/* 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-3xl sm: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 dark:text-white font-bold decoration-1 underline-offset-4;
}

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

/**
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;
}


/* klaro CCM */

.klaro .cookie-modal .cm-list-input+.cm-list-label .slider, .klaro .context-notice .cm-list-input:checked+.cm-list-label .slider, .klaro .cookie-notice .cm-list-input+.cm-list-label .slider {
    background-color: #a2a09c;
}

#klaro-cookie-notice{
    @apply bg-slate-700
}

.klaro .cookie-modal a, .klaro .context-notice a, .klaro .cookie-notice a {
    color: white !important;
    text-decoration: underline;
}


button.cm-btn.cm-btn-success.cm-btn-info.cm-btn-accept {
    @apply bg-primary text-black;
}

.klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success {
    @apply bg-primary text-black;
}

#cookieScreen > div.cm-modal.cm-klaro > div.cm-footer > div > button.cm-btn.cm-btn-success.cm-btn-accept-all {
    @apply bg-primary text-black;
}
.klaro .cookie-modal .cm-modal.cm-klaro {
    max-height: 400px !important;
}

/* Wir nutzen das Attribut-Selector-Muster für maximale Priorität */
div[data-controller="map"].leaflet-container img {
    max-width: none !important;
    max-height: none !important;
    width: 256px !important; /* Kacheln sind immer 256px */
    height: 256px !important;
    display: block !important;
    position: absolute !important;
}

.leaflet-map-container {
    height: 400px !important;
    min-height: 400px !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Fix für die Kachel-Positionierung */
.leaflet-tile-pane {
    z-index: 2;
}