/* create custom tailwind utilities */

@utility container {
    margin-inline: auto;
}

/*
    own classes go here
*/

* {
    @apply focus:border-none;
    @apply focus:outline-primary;
}


.logo {
    @apply decoration-0 text-5xl font-bold font-logo text-juraclimbs;
}

.no-arrow::after {
    display: none;
}

.standard-radius {
    border-radius: var(--radius-field);
}

.standard-link {
    @apply font-bold underline  text-black font-bold decoration-1 underline-offset-4;
}

.standard-link:hover {
    @apply text-juraclimbs;
}

/**
BreadCrumbs
 */


nav[aria-label="Breadcrumb"] ol {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
    margin: 0px;
}

nav[aria-label="Breadcrumb"] li + li::before {
    content: "/";
    padding: 0 0.3em;
}

.image-placeholder {
    background-color: #f3f4f6;
    width: 100%;
    height: 400px;
    margin-top: 2em;
    margin-bottom: 2em;
    border: 1px solid #e5e7eb;
}

.card-hover {
    @apply transition-all duration-100 ease-in-out;
    @apply hover:scale-105;
    @apply hover:shadow-xl;
}

.prosa {
    @apply prose dark:prose-invert max-w-none;
}

/**
 *
 * Administration
 *
 */

/* Admin Table */
.admin-table {
    @apply border-1 border-gray-300;
}

.admin-table thead tr {
    @apply bg-avocado-200
}

.admin-table th {
    @apply text-left text-sm font-semibold text-gray-700 px-2 py-4 border-r-1 border-gray-300;
}

.admin-table td {
    @apply text-left text-sm  px-2 py-1 border-r-1 border-b-1 border-gray-300;
}

.admin-table input {
    @apply border-none p-1 text-sm w-full rounded focus:ring-0;
}



/* Prevent toggle checkbox from blur */
/* Standard-Toggle (unchecked) */
.d-toggle {
    opacity: 1 !important; /* Volle Deckkraft */
    border-color: #333 !important; /* Rand schwarz */
}

/* Toggle-Thumb immer mit voller Farbe */
.d-toggle::before {
    background-color: black !important; /* Standardfarbe des Thumbs (weiß) */
    opacity: 1 !important; /* Volle Deckkraft */
}

/* Fett, wenn Checkbox aktiviert ist */
.d-toggle:checked ~ .toggle-content-active {
    font-weight: bold;
}

/* Fett, wenn Checkbox NICHT aktiviert ist */
.d-toggle:not(:checked) ~ .toggle-content-inactive {
    font-weight: bold !important;
}


.d-floating-label span {
    text-transform: none !important;
}

.d-tab-content {
    border-color: var(--color-base-300) !important;
}


/*try to set a margin top for anchor links*/
*[id] {
    scroll-margin-top: 1.5rem;
}

/*

Sortable List for climbs

*/

.custom-sortable-list {
    @apply list-none p-0;
    counter-reset: climb-counter;
}

.sortable-item {
    counter-increment: climb-counter; /* Erhöht den Zähler pro <li> */
}

/* Die Nummerierung anzeigen */
.index-badge::before {
    content: counter(climb-counter) "."; /* Zeigt "1.", "2." etc. an */
    @apply text-black font-bold inline-block;
}

/* Während des Ziehens das Original-Element stylen */
.sortable-ghost {
    @apply opacity-40 bg-slate-800 text-white border-dashed;
}

/*  --- make sure that edit button icon is black--- */
.edit-comment-button{
    color: black !important;
}