@import "tailwindcss";

/* ============================================================
   Design-Basis v2 »Bühnenlicht« — semantische Token-Ebene (design-basis.md §0/§1)
   ============================================================ */
@theme {
    /* ---------- Flächen ---------- */
    --color-surface-canvas:  #F2F3F5;   /* Seitenhintergrund (v2, kühl) */
    --color-surface:         #FFFFFF;   /* Karten, Tabellen, Modal */
    --color-surface-sunken:  #F4F5F6;   /* Modal-Footer, Zebra */
    --color-surface-header:  #FBFBFC;   /* Tabellenkopf */
    --color-surface-hover:   #EFF4F9;   /* Zeilen-Hover, akzentgetönt */
    --color-surface-inverse: #222831;   /* Band: Navigation, Toolbar, Kalender-/Modalkopf */

    /* ---------- Rahmen ---------- */
    --color-border-hairline: #EEEFF1;   /* Zeilentrenner */
    --color-border-subtle:   #E3E5E9;   /* Karten, Segmented-Track */
    --color-border:          #C9CDD3;   /* Eingaben, Buttons */
    --color-border-strong:   #8B929C;   /* Datenraster, 3:1-Pflicht */

    /* ---------- Text (Kontrast auf --color-surface) ---------- */
    --color-text:            #1C1F24;   /* 15,1:1 */
    --color-text-muted:      #5F6169;   /*  6,3:1 */
    --color-text-subtle:     #74767E;   /*  4,6:1 — Minimum für Text */
    --color-text-inverse:    #F4F4F2;   /* auf dem Band */
    --color-text-inverse-muted: #A9B1BC; /* Kontextzeilen auf dem Band, nie unter 11,5px */

    /* ---------- Akzent (abgeleitet aus Bestands-#3073ae) ---------- */
    --color-accent-50:       #EEF4FA;
    --color-accent-100:      #D9E7F4;
    --color-accent-200:      #B7D0E8;
    --color-accent-500:      #3073AE;   /* Flächen, Icons — NICHT für Text auf Weiß */
    --color-accent-600:      #276293;   /* Primär, Links, Fokus — 4,6:1 */
    --color-accent-700:      #1E4E77;   /* Hover / Aktiv */
    --color-accent-900:      #14314A;

    /* ---------- Status ---------- */
    --color-success:         #157F4F;  --color-success-surface: #E8F5EE;  --color-success-border: #A8D8BF;
    --color-warning:         #8A5A00;  --color-warning-surface: #FCF3E1;  --color-warning-border: #E8CE92;
    --color-danger:          #B3261E;  --color-danger-surface:  #FDEDEC;  --color-danger-border:  #F0B9B4;
    --color-info:            #276293;  --color-info-surface:    #EEF4FA;  --color-info-border:    #B7D0E8;

    /* ---------- Radien ---------- */
    --radius-sm:   4px;   /* Kalenderkacheln, Zellen */
    --radius-md:   6px;   /* alle Steuerelemente */
    --radius-lg:  12px;   /* Karten, Modale, Listen-Container */
    --radius-pill: 999px; /* Chips, Zähler */

    /* ---------- Elevation ---------- */
    --shadow-raised:  0 1px 2px rgba(28,31,36,.06), 0 1px 1px rgba(28,31,36,.04);
    --shadow-overlay: 0 8px 24px -8px rgba(28,31,36,.18), 0 2px 6px rgba(28,31,36,.06);
    --shadow-card:    0 1px 2px rgba(28,31,36,.06), 0 6px 16px -8px rgba(28,31,36,.10);

    /* ---------- Steuerhöhen ---------- */
    --control-h-sm: 28px;
    --control-h-md: 32px;
    --control-h-lg: 40px;

    /* ---------- Zeilenhöhen ---------- */
    --row-h:         40px;  /* Standard-Datenzeile */
    --row-h-project: 44px;  /* Projektlisten (Badges + Avatare) */
    --row-h-compact: 34px;  /* wählbares Kompakt-Profil */

    /* ---------- Typografie ---------- */
    --font-heading: Lexend, system-ui, sans-serif;
    --font-body:    Inter, system-ui, sans-serif;
    --font-sans:    Inter, system-ui, sans-serif;
    --font-lexend:  Lexend, system-ui, sans-serif;

    /* ---------- Gelernte Sonderfarben (feste Marker, AA auf Weiß) ----------
       Für etablierte Spezialfälle: violet = Lifecycle/BI-Chips, pink =
       "zuletzt angelegt"-Marker (Bulk), orange = Verifizierung/Nachträglich,
       teal = Ausgleichstage/Sonder-Marker. Nutzergepflegte Farben (Terminarten,
       Inventar-Status, Räume, Gewerke) kommen weiterhin dynamisch aus der DB. */
    --color-special-violet:         #6D28D9;
    --color-special-violet-surface: #F2EEFA;
    --color-special-violet-border:  #D6C9F0;
    --color-special-pink:           #B03578;
    --color-special-pink-surface:   #F9ECF3;
    --color-special-pink-border:    #EDC2DA;
    --color-special-orange:         #B04A0A;
    --color-special-orange-surface: #FAF0E6;
    --color-special-orange-border:  #F0CBA4;
    --color-special-teal:           #0F766E;
    --color-special-teal-surface:   #E7F4F2;
    --color-special-teal-border:    #A9D8D2;

    /* ---------- Sonstiges (Bestand, weiter genutzt) ---------- */
    --z-100: 100;
}


/* Fokus — verbindlich, nie überschreiben */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--color-accent-600);
    outline-offset: 2px;
}

:root {
    /*General*/
    --dp-font-family: 'lexend', sans-serif; /*Font family for the date picker*/
    --dp-border-radius: 5px; /*Configurable border-radius*/
    --dp-cell-border-radius: 4px; /*Specific border radius for the calendar cell*/
    --dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/

    /*Sizing*/
    --dp-button-height: 35px; /*Size for buttons in overlays*/
    --dp-month-year-row-height: 35px; /*Height of the month-year select row*/
    --dp-month-year-row-button-size: 35px; /*Specific height for the next/previous buttons*/
    --dp-button-icon-height: 20px; /*Icon sizing in buttons*/
    --dp-cell-size: 35px; /*Width and height of calendar cell*/
    --dp-cell-padding: 5px; /*Padding in the cell*/
    --dp-common-padding: 10px; /*Common padding used*/
    --dp-input-icon-padding: 35px; /*Padding on the left side of the input if icon is present*/
    --dp-input-padding: 6px 30px 6px 12px; /*Padding in the input*/
    --dp-menu-min-width: 260px; /*Adjust the min width of the menu*/
    --dp-action-buttons-padding: 2px 5px; /*Adjust padding for the action buttons in action row*/
    --dp-row-margin:  5px 0; /*Adjust the spacing between rows in the calendar*/
    --dp-calendar-header-cell-padding:  0.5rem; /*Adjust padding in calendar header cells*/
    --dp-two-calendars-spacing:  10px; /*Space between multiple calendars*/
    --dp-overlay-col-padding:  3px; /*Padding in the overlay column*/
    --dp-time-inc-dec-button-size:  32px; /*Sizing for arrow buttons in the time picker*/
    --dp-menu-padding: 6px 8px; /*Menu padding*/

    /*Font sizes*/
    --dp-font-size: 1rem; /*Default font-size*/
    --dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
    --dp-time-font-size: 0.8rem; /*Font size in the time picker*/

    /*Transitions*/
    --dp-animation-duration: 0.1s; /*Transition duration*/
    --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1); /*Timing on menu appear animation*/
    --dp-transition-timing: ease-out; /*Timing on slide animations*/
}




@font-face {
    font-family: 'Inter';
    src: local('Inter-Regular'), url('../fonts/Inter-Regular.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'Lexend';
    src: local('Lexend-Regular'), url('../fonts/Lexend-Regular.woff2') format('woff2');
    font-display: swap;
}

    body {
        scrollbar-width: thin; /* Für Firefox */
        scrollbar-color: rgba(210, 210, 213, 0.44) transparent; /* Für Firefox */
    }

    [x-cloak] {
        display: none;
    }

    ::-webkit-scrollbar {
        width: 9px;
        height: 9px;
    }

    ::-webkit-scrollbar-track {
        background-color: transparent;
        box-shadow: none;
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgba(210, 210, 213, 0.44);
        border-radius: 16px;
        border: 4px solid transparent;
        background-clip: content-box;
        box-shadow: none;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8bbbf;
    }

    .base-menu-link {
        .base-menu-icon {
            @apply text-text-subtle;
        }
    }































    .stateColorDefault {
        background-color: #FCFCFBFF;
        border: 1px solid #afafaf;
        color: #696868;
    }

    .stateColorRed {
        background: rgba(100, 26, 84, 0.15);
        border: 1px solid #641A54;
        color: #641A54;
    }

    .stateColorPink {
        background: rgba(218, 63, 135, 0.15);
        border: 1px solid #DA3F87;
        color: #DA3F87
    }

    .stateColorOrange {
        background: rgba(235, 122, 61, 0.15);
        border: 1px solid #EB7A3D;
        color: #EB7A3D;
    }

    .stateColorYellow {
        background: rgba(241, 182, 64, 0.15);
        border: 1px solid #F1B640;
        color: #F1B640;
    }

    .stateColorGreen {
        background: rgba(134, 197, 84, 0.15);
        border: 1px solid #86C554;
        color: #86C554;
    }

    .stateColorDarkGreen {
        background: rgba(46, 170, 99, 0.15);
        border: 1px solid #2EAA63;
        color: #2EAA63;
    }

    .stateColorDodgeBlue {
        background: rgba(61, 195, 203, 0.15);
        border: 1px solid #3DC3CB;
        color: #3DC3CB;
    }

    .stateColorBlue {
        background: rgba(22, 143, 195, 0.15);
        border: 1px solid #168FC3;
        color: #168FC3;
    }

    .stateColorGreenBlue {
        background: rgba(77, 144, 142, 0.15);
        border: 1px solid #4D908E;
        color: #4D908E;
    }

    .stateColorDarkBlue {
        background: rgba(33, 72, 92, 0.15);
        border: 1px solid #21485C;
        color: #21485C;
    }




    .transition-enter-active {
        @apply transition ease-out duration-100;
    }

    .transition-enter-from,
    .transition-leave-to {
        @apply transform opacity-0 scale-95;
    }

    .transition-enter-to,
    .transition-leave-from {
        @apply transform opacity-100 scale-100;
    }

    .transition-leave-active {
        @apply transition ease-in duration-75;
    }


    .event-disabled {
        background-image: repeating-linear-gradient(
            -45deg,
            transparent 0,
            transparent 10px,
            color-mix(in srgb, var(--event-contrast-color, currentColor) 18%, transparent) 10px,
            color-mix(in srgb, var(--event-contrast-color, currentColor) 18%, transparent) 20px
        );
    }

.tooltip {
    @apply invisible absolute;
}

.has-tooltip:hover .tooltip {
    margin-top: -1rem;
    margin-left: 1.5rem;
    @apply visible z-50;
}

.artwork {
    .chip {
        @apply inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-medium ring-1 ring-inset
        bg-white/10 ring-white/20;
    }

    /* Alias auf BaseUIButton variant="secondary" (Design-Basis v1) */


    .artwork-container {
        @apply mx-auto container px-4 sm:px-6 md:px-6 lg:px-8 xl:px-8 2xl:px-8 mt-5 pb-20;
    }

    /* Volle Breite für Board-/Tabellen-Seiten (z.B. Kanban), Padding identisch zum artwork-container */
    .artwork-container-fluid {
        @apply w-full max-w-none px-4 sm:px-6 md:px-6 lg:px-8 xl:px-8 2xl:px-8 mt-5 pb-20;
    }

    /* Linksverankerte Projektseiten (Designkonzept „Ankerlinie = Seitenkante"):
       -page = volle Breite mit Seitenpadding (Kopfzeile), -column = an derselben
       Ankerlinie hängende Inhaltsspalte mit 1536px-Deckel. Werkzeug-Komponenten
       (Kalender/Schichten/Budget/Terminliste) laufen ohne Wrapper vollbreit. */
    .artwork-anchored-page {
        @apply w-full max-w-none px-4 sm:px-6 md:px-6 lg:px-8 xl:px-8 2xl:px-8;
    }
    .artwork-anchored-column {
        @apply w-full max-w-[96rem] px-4 sm:px-6 md:px-6 lg:px-8 xl:px-8 2xl:px-8;
    }

    .background-color {
        @apply bg-white;
    }

    /* Layout Helpers */
    .ui-grid-2 { @apply grid grid-cols-1 gap-2 md:grid-cols-2; }
    .ui-hint { @apply text-[12px] text-zinc-500; }
    .ui-error { @apply text-[12px] text-rose-600; }

    /* Card */
    .ui-card { @apply rounded-lg border border-zinc-200 bg-white/90 p-3; }
    .ui-card-header { @apply flex items-center gap-2 mb-2; }
    .ui-card-title { @apply text-[13.5px] font-semibold text-zinc-900; }
    .ui-dot { @apply inline-block size-2.5 rounded-full; }
    /* Aliasse auf die BaseUIButton-Varianten (Design-Basis v1) — Templates nutzen sie noch direkt */
    .ui-button { @apply select-none inline-flex items-center gap-x-1.5 justify-center rounded-md border border-border bg-surface min-h-8 px-3 text-[13px] font-medium text-text cursor-pointer hover:bg-surface-sunken transition-[background-color,border-color] duration-150 ease-out disabled:bg-surface-canvas disabled:text-text-subtle disabled:border-border-subtle disabled:cursor-not-allowed;}
    .ui-button-small { @apply select-none inline-flex items-center gap-x-1.5 justify-center rounded-md border border-border bg-surface min-h-7 px-2.5 text-xs font-medium text-text cursor-pointer hover:bg-surface-sunken transition-[background-color,border-color] duration-150 ease-out disabled:bg-surface-canvas disabled:text-text-subtle disabled:border-border-subtle disabled:cursor-not-allowed;}
    .ui-button-add { @apply select-none inline-flex items-center gap-x-1.5 justify-center rounded-md bg-accent-600 text-white border border-accent-600 min-h-8 px-3 text-[13px] font-medium cursor-pointer hover:bg-accent-700 hover:border-accent-700 transition-[background-color,border-color] duration-150 ease-out disabled:bg-surface-canvas disabled:text-text-subtle disabled:border-border-subtle disabled:cursor-not-allowed;}
    .ui-button-add-small { @apply select-none inline-flex items-center gap-x-1.5 justify-center rounded-md bg-accent-600 text-white border border-accent-600 min-h-7 px-2.5 text-xs font-medium cursor-pointer hover:bg-accent-700 hover:border-accent-700 transition-[background-color,border-color] duration-150 ease-out disabled:bg-surface-canvas disabled:text-text-subtle disabled:border-border-subtle disabled:cursor-not-allowed;}
    .ui-button-delete { @apply select-none inline-flex items-center gap-x-1.5 justify-center rounded-md bg-surface text-danger border border-danger-border min-h-8 px-3 text-[13px] font-medium cursor-pointer hover:bg-danger-surface transition-[background-color,border-color] duration-150 ease-out disabled:bg-surface-canvas disabled:text-text-subtle disabled:border-border-subtle disabled:cursor-not-allowed;}


    /* Inputs kompakt */
    .ui-input :deep(input),
    .ui-input { @apply h-10; }

    /* Checkbox kompakt */
    .ui-checkbox { @apply size-4 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500; }
    .ui-checkbox-emerald { @apply text-emerald-600 focus:ring-emerald-500; }
    .ui-checkbox-amber { @apply text-amber-600 focus:ring-amber-500; }

    /* Project Chip */
    .ui-project-chip { @apply flex items-center gap-2 rounded-md border border-zinc-200 bg-zinc-50 px-3 py-2; }
    .ui-project-link { @apply inline-block max-w-[28rem] truncate text-indigo-600 hover:underline; }


    /* Segment-Schalter */
    .ui-segment {
        @apply inline-flex rounded-md border border-zinc-200 bg-white p-0.5 shadow-sm;
    }
    .ui-segment-btn {
        @apply relative inline-flex items-center justify-center rounded-[6px] px-3 py-1.5 text-[12.5px] text-zinc-700 transition;
    }
    .ui-segment-btn.is-active {
        @apply bg-zinc-100 text-zinc-900;
    }

    /* Buttons */
    .ui-icon-btn {
        @apply inline-flex items-center justify-center rounded-md border border-transparent text-text-subtle hover:text-danger;
    }

    /* Transition */
    .fade-enter-active, .fade-leave-active { transition: opacity .15s ease, transform .15s ease; }
    .fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(-2px); }

    /* Buttons */

    /* Sticky Footer innerhalb des Modals */
    /* Sticky-Modal-Footer (v2): surface-sunken, Hairline-Oberkante, kein Blur */
    .ui-footer {
        @apply sticky bottom-0 left-0 w-full bg-surface-sunken border-t border-border-subtle pt-2 pb-2 mt-2;
    }

    .ui-lb-btn { /* placeholder, falls extern benötigt */ }


    .card-header {
        @apply flex items-center gap-2 -mt-1;
    }
    .card-dot {
        @apply inline-block size-2 rounded-full;
    }
    .card-title {
        @apply text-[13px] font-semibold text-zinc-900;
    }

    /* --- Helpers --- */
    .hint { @apply text-[12px] text-zinc-500; }
    .err  { @apply text-[12px] text-rose-600; }



    /* --- Listbox default classes via props (keine globalen Änderungen nötig) --- */

    .border-color {
        &.soft-green {
            @apply border-[#edf5ef];
        }

        &.soft-red {
            @apply border-[#f6eaea];
        }

        &.soft-yellow {
            @apply border-[#f8f3dd];
        }
    }



    .aw-checklist-input {
        @apply col-start-1 row-start-1 size-4 appearance-none rounded-sm border border-border bg-surface checked:border-accent-600 checked:bg-accent-600 indeterminate:border-accent-600 indeterminate:bg-accent-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent-600 disabled:border-border-subtle disabled:bg-surface-sunken disabled:checked:bg-surface-sunken forced-colors:appearance-auto
    }

    .aw-input-svg {
        @apply pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25 dark:group-has-disabled:stroke-white/25;
    }

}

.timeline-container {
    @apply flex flex-col gap-2 w-full;

    .timeline-dates-container,
    .timeline-times-container {
        @apply flex flex-row gap-2;

        .timeline-date-input,
        .timeline-time-input {
            @apply h-8 placeholder:subpixel-antialiased rounded-md w-full border-border focus:border-accent-600;
        }
    }

    .timeline-error-text {
        @apply text-danger text-xs;
    }

    .timeline-textarea {
        @apply block w-full placeholder:subpixel-antialiased rounded-md border-border focus:border-accent-600;
    }
}


.base-menu-link {
    @apply cursor-pointer flex items-center px-4 py-2 text-sm subpixel-antialiased;

    .base-menu-icon {
        @apply mr-3 h-5 w-5;
    }
}

.input {
    @apply rounded-md px-2.5 w-full text-sm border border-border bg-surface text-text placeholder-text-subtle placeholder-transparent transition-[border-color,background-color] duration-150 ease-out;

    &:disabled {
        @apply bg-surface-sunken text-text-subtle cursor-not-allowed;
    }

}

.input-label {
    @apply cursor-text px-1 absolute left-0 -top-6 peer-placeholder-shown:text-xs transition-all subpixel-antialiased peer-placeholder-shown:text-text-subtle peer-placeholder-shown:left-2 pointer-events-none;
}

.input-checklist {
    color: var(--color-success);
    @apply border border-border rounded-md p-2.5 text-sm text-left;
}

.input-checklist-small {
    color: var(--color-success);
    @apply border border-border rounded-md p-0.5 text-sm text-left;
}

.input-checklist-dark {
    color: var(--color-success);
    @apply rounded-md p-2 text-sm text-left;
}

.menu-button {
    @apply w-full flex items-center justify-between border border-border bg-surface rounded-md px-3 min-h-8 py-1 text-sm placeholder-transparent;

    span {
        @apply text-left float-left text-sm placeholder-transparent text-text-muted;
    }
}

.menu-button-no-padding {
    @apply w-full flex items-center justify-between border border-border bg-surface rounded-md px-3 min-h-8 text-sm placeholder-transparent;

    span {
        @apply text-left float-left text-sm placeholder-transparent text-text-muted;
    }
}

.menu-button-no-flex {
    @apply w-full block border border-border bg-surface rounded-md px-3 min-h-8 py-1 text-sm placeholder-transparent;

    span {
        @apply text-left float-left text-sm placeholder-transparent text-text-muted;
    }
}


.btn-icon {
    @apply grid place-items-center size-8 rounded-md border border-border bg-surface text-text hover:bg-surface-sunken transition-colors;
}

/* Inputs */
.form-input {
    @apply w-full rounded-md border border-border bg-surface py-2 pr-3 text-sm text-text placeholder:text-text-subtle focus:border-accent-600;
}
.form-textarea {
    @apply rounded-md border border-border bg-surface py-2.5 pr-3 pl-3 text-sm text-text placeholder:text-text-subtle focus:border-accent-600;
}

/* Position Picker spots */
.picker-spot {
    @apply absolute h-20 w-28 rounded-lg border-2 border-dashed border-white/70 bg-white/20 hover:bg-white/30 focus:outline-none transition-colors;
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-thumb {
    background-color: rgba(24, 24, 27, 0.12);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-track {
    background: transparent;
}

/*
 * Horizontale Scrollbarkeit immer sichtbar machen (Pflichtenheft 3.4).
 * Wenn ein Container horizontal scrollbar ist, soll der Scrollbalken dauerhaft
 * sichtbar sein – nicht nur als Overlay beim Scrollen (macOS/WebKit-Verhalten).
 * Greift global über die in der App genutzten Tailwind-Overflow-Utilities.
 */
.overflow-x-auto,
.overflow-x-scroll,
.overflow-auto,
.overflow-scroll {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(24, 24, 27, 0.25) transparent;
}

.overflow-x-auto::-webkit-scrollbar,
.overflow-x-scroll::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar,
.overflow-scroll::-webkit-scrollbar {
    -webkit-appearance: none; /* erzwingt klassische, dauerhaft sichtbare Scrollbalken statt Overlay */
    height: 10px;
}

/*
 * Bewusstes Opt-out: .no-scrollbar (z.B. Filter-Chip-Reihen) bleibt ohne Balken.
 * !important, damit das Opt-out unabhängig von der Quellreihenfolge gewinnt.
 */
.no-scrollbar {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge alt */
}
.no-scrollbar::-webkit-scrollbar {
    display: none !important;
}



.modal {
    @apply relative transform bg-white text-left shadow-2xl transition-all sm:my-8 sm:w-full rounded-lg;
}

.modal-header {
    @apply mb-6;

    .full-modal {
        @apply px-6 pt-4 pb-2;
    }

    .not-full-modal {
        @apply pt-4 pb-2;
    }

    .model-title {
        @apply font-medium font-lexend text-zinc-900;
    }

    .modal-description {
        @apply text-gray-400 font-lexend font-light;
    }
}


.checklist-card {
    @apply w-72 min-w-72 rounded-lg;

    .checklist-card-header {
        @apply  px-4 py-2 flex items-center justify-between text-white truncate rounded-t-lg;
    }

    .checklist-card-body {
        @apply bg-gray-100 rounded-b-lg;

        .checklist-card-body-project {
            @apply w-full text-xs mb-2 flex items-start gap-x-2 px-4 py-2;
        }

        .checklist-body-add-task {
            @apply px-5 py-2.5 cursor-pointer flex items-center text-center justify-center;
        }
    }
}


.checklist-listview-head-bar {
    @apply bg-gray-50 px-5 py-2.5 rounded-lg;

    .head-bar-grid {
        @apply grid grid-cols-12 grid-rows-1 gap-6;
    }
}

.checklist-listview-container {
    @apply space-y-5 mt-5 min-h-screen;
}



.dp__btn {
    @apply !font-lexend !text-xs;
}

.dp__menu {
    @apply !rounded-b-3xl !rounded-tr-3xl !font-lexend;
}

.dp__action_row {
    @apply !px-4 !py-3;
}

.dp__action_cancel {
    @apply !font-lexend !px-4 !py-4
}

.dp__action_select {
    @apply !font-lexend !px-4 !py-4
}

.badge {
    @apply inline-flex items-center gap-1.5 rounded-full bg-white px-2.5 py-0.5 text-[11px] text-zinc-700 ring-1 ring-zinc-200;
}


/* === PrimeVue Tooltip: global width/word-wrap + visuals (aw-tooltip) ===
   Ensures tooltips don't collapse to 1-char width after horizontal scroll.
   Applied to any tooltip created with directive option { class: 'aw-tooltip' }.
*/
.aw-tooltip {
    /* Tunable via CSS var if needed per scope */
    --aw-tooltip-min-width: 12ch;   /* ensures ~10–14 chars fit per line */
    --aw-tooltip-max-width: 24rem;  /* ≈ Tailwind max-w-sm */
    z-index: 9999 !important;       /* ensure tooltip renders above HeadlessUI Float portals */
}
/* PrimeVue-Theme deckelt .p-tooltip auf 12.5rem — hier gilt stattdessen die CSS-Variable */
.aw-tooltip.p-tooltip {
    max-width: var(--aw-tooltip-max-width);
}
/* Breitere Variante für erklärende Tooltips (per tooltip-css-class="aw-tooltip-wide") */
.aw-tooltip-wide {
    --aw-tooltip-max-width: 32rem;
}
/* Aufzählungen in HTML-Tooltips (allow-html): echte Liste mit hängendem Einzug */
.aw-tooltip .p-tooltip-text ul {
    margin: 0.375rem 0 0;
    padding-left: 1.1rem;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.aw-tooltip .p-tooltip-text {
    display: inline-block;
    min-width: var(--aw-tooltip-min-width);
    max-width: var(--aw-tooltip-max-width);
    white-space: pre-line; /* wie normal, erhält aber \n → mehrzeilige Tooltips (z.B. Aufzählungen) */
    overflow-wrap: anywhere; /* modern, allows breaking long tokens */
    word-break: break-word;  /* fallback for older browsers */

    /* Visuals aligned with previous Tailwind classes */
    background-color: var(--color-primary, #222);
    color: #fff; /* contrast text */
    font-weight: 500; /* ~font-medium */
    font-size: 0.75rem; /* ~text-xs */
    padding: 0.25rem 0.5rem; /* ~px-2 py-1 */
    border: 1px solid #1f2937; /* ~border-gray-800 */
    border-radius: 0.5rem; /* rounded-md/lg */
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); /* ~shadow-lg */
}

/* ============================================================
   Schichtplan — Personenbereich (unteres Panel in ShiftPlan.vue)
   Zwei Farbwelten über EINEN Variablensatz (--uo-*): Standard ist die
   bisherige dunkle Fläche (Band-Ink), `.user-overview-light` schaltet
   pro Person auf die helle Design-Fläche um. Die Werte auf :root sind
   bewusst die Dunkel-Werte, damit geteilte Komponenten (DragElement im
   Projekt-Schichten-Tab) außerhalb des Panels unverändert aussehen.
   Statusfarben: auf Dunkel die hellen *-border-Töne (lesbar auf Ink),
   auf Hell die kräftigen Basistöne (AA auf Weiß).
   ============================================================ */
:root {
    --uo-bg:            var(--color-surface-inverse);
    --uo-text:          #FFFFFF;
    --uo-text-muted:    rgba(255, 255, 255, 0.75);
    --uo-text-subtle:   rgba(255, 255, 255, 0.6);
    --uo-line:          rgba(255, 255, 255, 0.3);
    --uo-line-strong:   rgba(255, 255, 255, 0.4);
    --uo-chip-bg:       rgba(255, 255, 255, 0.1);
    --uo-chip-text:     var(--color-text-inverse);
    --uo-cell-bg:       rgba(244, 245, 246, 0.1);
    --uo-cell-ring:     transparent;
    --uo-hover-ring:    rgba(255, 255, 255, 0.4);
    --uo-active-ring:   rgba(255, 255, 255, 0.7);
    --uo-success-text:  var(--color-success-border);
    --uo-danger-text:   var(--color-danger-border);
    --uo-warning-text:  var(--color-warning-border);
    --uo-orange-text:   #F08B32;
    --uo-teal-text:     var(--color-special-teal-border);
    --uo-staff-none-bg:    rgba(255, 255, 255, 0.1);
    --uo-staff-none-text:  rgba(255, 255, 255, 0.5);
    --uo-staff-low-bg:     color-mix(in srgb, var(--color-danger) 25%, transparent);
    --uo-staff-low-text:   var(--color-danger-surface);
    --uo-staff-partial-bg: color-mix(in srgb, var(--color-warning) 25%, transparent);
    --uo-staff-partial-text: var(--color-warning-surface);
    --uo-staff-full-bg:    color-mix(in srgb, var(--color-success) 25%, transparent);
    --uo-staff-full-text:  var(--color-success-surface);
    --uo-kw-attention-bg:   color-mix(in srgb, var(--color-warning) 50%, transparent);
    --uo-kw-attention-ring: color-mix(in srgb, var(--color-warning-border) 70%, transparent);
    --uo-kw-requested-bg:   color-mix(in srgb, var(--color-accent-500) 50%, transparent);
    --uo-kw-requested-ring: color-mix(in srgb, var(--color-accent-200) 70%, transparent);
    --uo-kw-committed-bg:   color-mix(in srgb, var(--color-success) 50%, transparent);
    --uo-kw-committed-ring: color-mix(in srgb, var(--color-success-border) 70%, transparent);
}
.user-overview-light {
    --uo-bg:            var(--color-surface-canvas);
    --uo-text:          var(--color-text);
    --uo-text-muted:    var(--color-text-muted);
    --uo-text-subtle:   var(--color-text-subtle);
    --uo-line:          var(--color-border);
    --uo-line-strong:   var(--color-border-strong);
    --uo-chip-bg:       rgba(28, 31, 36, 0.08);
    --uo-chip-text:     var(--color-text);
    --uo-cell-bg:       var(--color-surface);
    --uo-cell-ring:     var(--color-border-subtle);
    --uo-hover-ring:    var(--color-border-strong);
    --uo-active-ring:   var(--color-text);
    --uo-success-text:  var(--color-success);
    --uo-danger-text:   var(--color-danger);
    --uo-warning-text:  var(--color-warning);
    --uo-orange-text:   var(--color-special-orange);
    --uo-teal-text:     var(--color-special-teal);
    --uo-staff-none-bg:    rgba(28, 31, 36, 0.08);
    --uo-staff-none-text:  var(--color-text-subtle);
    --uo-staff-low-bg:     var(--color-danger-surface);
    --uo-staff-low-text:   var(--color-danger);
    --uo-staff-partial-bg: var(--color-warning-surface);
    --uo-staff-partial-text: var(--color-warning);
    --uo-staff-full-bg:    var(--color-success-surface);
    --uo-staff-full-text:  var(--color-success);
    --uo-kw-attention-bg:   var(--color-warning-surface);
    --uo-kw-attention-ring: var(--color-warning-border);
    --uo-kw-requested-bg:   var(--color-accent-50);
    --uo-kw-requested-ring: var(--color-accent-200);
    --uo-kw-committed-bg:   var(--color-success-surface);
    --uo-kw-committed-ring: var(--color-success-border);
}