/* assets/css/styles.css (Finale Version - Angepasst für neue Navigation) */

/* --- Stile für Status-Badges --- */
.status-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.1rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 9999px;
    border-width: 1px;
    width: 100px;
    min-width: 100px;
    white-space: normal;
    line-height: 1.2;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

@media (min-width: 640px) {
    .status-badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        width: 140px;
        min-width: 140px;
    }
}

.status-badge--anreise-heute {
    background-color: #dcfce7;
    color: #166534;
    border-color: #86efac;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-badge--abreise-heute {
    background-color: #ffedd5;
    color: #9a3412;
    border-color: #fdba74;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-badge--anreise-zukunft {
    background-color: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}

.status-badge--abreise-zukunft {
    background-color: #ffedd5;
    color: #9a3412;
    border-color: #fdba74;
}

.status-badge--reservierung {
    background-color: #f3e8ff;
    color: #6b21a8;
    border-color: #d8b4fe;
}

.status-badge--reservierung-status {
    background-color: #ede9fe;
    color: #5b21b6;
    border-color: #c4b5fd;
}

.status-badge--wechseltag {
    background-color: #f3e8ff;
    color: #6b21a8;
    border-color: #d8b4fe;
}

.status-badge--konflikt {
    background-color: #fee2e2;
    color: #b91c1c;
    border-color: #fca5a5;
}

.status-badge--zimmer-fertig {
    background-color: #16a34a;
    color: #fff;
    border-color: #166534;
}

.status-badge--reinigung-offen {
    background-color: #ea580c;
    color: #fff;
    border-color: #9a3412;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-pulse-subtle {
    animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* --- Kalender-Styling --- */
.calendar-table {
    border-collapse: collapse;
    table-layout: auto;
    margin: 0 auto;
    border-left: 1px solid #e2e8f0;
    border-top: 1px solid #e2e8f0;
}

.calendar-table th,
.calendar-table td {
    border: none;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

.calendar-table td.day-cell { /* Nur noch für Datenzellen */
    height: 39px;
    width: 40px;
}

.calendar-table th.day-header {
    width: 40px; /* Breite beibehalten */
    height: auto; /* Höhe an Inhalt anpassen */
    padding: 0 0.25rem;
    font-size: 0.7rem;
    font-weight: normal;
    background-color: #f9fafb;
    vertical-align: middle;
}

.calendar-table td.day-cell {
    padding: 0;
    overflow: hidden;
}

.calendar-table .wohnung-name-cell {
    white-space: nowrap;
    font-weight: bold;
    font-size: 0.8rem;
    background-color: #f9fafb;
    padding: 0.5rem;
    text-align: left;
    vertical-align: middle;
}

.calendar-table thead tr th:first-child {
    border-top-left-radius: 8px;
    background-color: #f9fafb;
}

/* --- Mobile Ansicht --- */
@media (max-width: 767px) {
    /* Definiert die Breite der Tages-Spalten */
    .calendar-table th.day-header,
    .calendar-table td.day-cell {
        width: 15px !important;
        min-width: 15px !important;
    }

    /* Definiert die Höhe der Daten-Zeilen (Wohnungen) */
    .calendar-table tbody td {
        height: 15px !important;
    }

    /* Passt die Schriftgröße der Wohnungsnamen an die neue Zeilenhöhe an */
    .calendar-table tbody .wohnung-name-cell {
        font-size: 0.6rem !important;
        padding: 0.1rem 0.4rem !important;
        display: flex;
        align-items: center;
    }

    /* Passt die Schriftgröße der Kopfzeile an */
    .calendar-table th.day-header {
        font-size: 0.3rem !important;
    }

    .calendar-table th.day-header .text-base {
        font-size: 0.3rem !important;
    }

    /* Passt die Segmente an die neuen Zellengrößen an */
    .segment {
        top: 1px !important;
        bottom: 1px !important;
    }

    .segment-shape-single {
        left: 1px !important;
        width: calc(100% - 2px) !important;
    }
}

/* --- Kalender-Segmente --- */
.segment {
    position: absolute;
    top: 5px;
    bottom: 5px;
    display: block;
    transition: all 0.15s ease-in-out;
}

.segment-clickable {
    cursor: pointer;
}

.segment-clickable:hover {
    filter: brightness(1.1);
    transform: scaleY(1.1);
    z-index: 30;
}

.segment-shape-start {
    border-radius: 8px 0 0 8px;
    left: 50%;
    width: 50%;
}

.segment-shape-mid {
    left: -1px;
    width: calc(100% + 2px);
    z-index: 5;
}

.segment-shape-end {
    border-radius: 0 8px 8px 0;
    width: 50%;
    left: 0;
}

.segment-shape-single {
    border-radius: 8px;
    left: 5px;
    width: calc(100% - 10px);
}

.segment-shape-wechsel-anreise {
    border-radius: 8px 0 0 8px;
    left: 56%;
    width: 44%;
}

.segment-shape-wechsel-abreise {
    border-radius: 0 8px 8px 0;
    width: 44%;
    left: 0;
}

.segment-modifier-booking {
    background-color: #3B82F6;
}

.segment-shape-single.segment-modifier-booking {
    background-color: #6366F1;
}

.segment-modifier-reservation {
    background-color: #f1c40f;
    opacity: 0.8;
}

.segment-modifier-status-1 {
    background: #9b59b6 !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9b59b6;
    z-index: 10;
}

.segment-modifier-status-2 {
    background-color: #f6d32d !important;
    box-shadow: 0 0 0 rgba(249, 115, 22, 0.7);
    animation: pulse-border 2s infinite;
    z-index: 9;
}

.segment-modifier-status-3 {
    background-color: #ff7800 !important;
    box-shadow: 0 0 0 rgba(249, 115, 22, 0.7);
    animation: pulse-border 2s infinite;
    z-index: 8;
}

/* --- Sonstige Stile --- */
.today {
    background-color: #8ff0a4 !important;
}

.weekend {
    background-color: #fafafa;
}

.day-cell-free {
    cursor: pointer;
}

.day-cell-free:hover {
    background-color: #f0f9ff;
}

.selection-segment {
    position: absolute;
    top: 8px;
    bottom: 8px;
    display: block;
    z-index: 10;
    pointer-events: none;
}

.selection-segment-start {
    background-color: #34d399;
    border-radius: 8px 0 0 8px;
    left: 50%;
    width: 50%;
}

.selection-segment-mid {
    background-color: #a5f3fc;
    left: -1px;
    width: calc(100% + 2px);
}

.selection-segment-end {
    background-color: #a5f3fc;
    border-radius: 0 8px 8px 0;
    left: 0;
    width: 50%;
}

.selection-segment-invalid {
    background-color: rgba(220, 38, 38, 0.6) !important;
    border: 1px dashed rgba(127, 29, 29, 0.8);
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(249, 115, 22, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
    }
}

.prose p {
    margin-top: 2em;
    margin-bottom: 2em;
}

.prose p:first-child {
    margin-top: 0;
}

.prose p:last-child {
    margin-bottom: 0;
}
/* Neue, generische Status-Klassen für den Kalender */
.segment-modifier-status-1 {
    background: #9b59b6 !important; /* Lila */
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #9b59b6;
    z-index: 10;
}

.segment-modifier-status-2 {
    background-color: #ff7800 !important; /* Orange */
    box-shadow: 0 0 0 rgba(249, 115, 22, 0.7);
    animation: pulse-border 2s infinite;
    z-index: 9;
}

.segment-modifier-status-3 {
    background-color: #f6d32d !important; /* Gelb */
    box-shadow: 0 0 0 rgba(246, 211, 45, 0.7);
    animation: pulse-border 2s infinite;
    z-index: 8;
}


/* assets/css/styles.css (Ergänzung/Anpassung) */

.reinigungs-kalender-table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    overflow: hidden;
    --th-width: 130px;
}

.reinigungs-kalender-table th,
.reinigungs-kalender-table td {
    width: 36px;  /* Kantenlänge auf 36px reduziert */
    height: 36px;
    min-width: 36px;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    font-size: 0.75rem;
    padding: 0;
    vertical-align: middle;
}
.reinigungs-kalender-table tr > *:last-child { border-right: none; }
.reinigungs-kalender-table tbody tr:last-child > * { border-bottom: none; }

.reinigungs-kalender-table thead th {
    background-color: #f9fafb;
}


.reinigungs-kalender-table tbody th {
    width: var(--th-width);
    padding: 0 0.75rem;
    background-color: #fdfdff;
    text-align: left;
    font-weight: 600;
}
.reinigungs-kalender-table tbody th.sticky {
    background-color: #f9fafb;
}

/* GEMEINSAMER STIL FÜR "HEUTE" IN HEADER UND BODY */
.reinigungs-kalender-table thead th.heute,
.heute-marker-zelle {
    background-color: #dcfce7 !important; /* Helles Grün */
    position: relative;
    z-index: 5;
}

.reinigungs-buchung-block {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 65%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.5rem;
    border: 1px solid;
    border-radius: 1rem;
    font-size: 0.7rem;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
    z-index: 10;
}
.reinigungs-buchung-block:hover {
    transform: translateY(-50%) scale(1.02);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    z-index: 20;
}

.reinigungs-buchung-block.reinigungs-buchung--start-clipped {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Farbschema (unverändert) */
.reinigungs-buchung--frei {
    background-color: #fee2e2; /* Rot */
    border-color: #fca5a5;
    color: #991b1b;
}
.reinigungs-buchung--meine {
    background-color: #dcfce7; /* Grün */
    border-color: #86efac;
    color: #166534;
}
.reinigungs-buchung--fremd {
    background-color: #e0e7ff; /* Blau/Indigo */
    border-color: #a5b4fc;
    color: #3730a3;
}

@keyframes blink-softly {
    50% { opacity: 0.6; }
}
.blinken-sanft {
    animation: blink-softly 2s ease-in-out infinite;
}

.detail-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    text-align: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem !important; /* Feste Schriftgröße sicherstellen */
    font-weight: 600;
    border-radius: 9999px;
    border-width: 1px;
    width: 180px; /* Breite erhöht */
    min-width: 180px; /* Breite erhöht */
    white-space: normal;
    line-height: 1.2;
    box-sizing: border-box;
}

/* --- HILFSKLASSE ZUM AUSBLENDEN VON SCROLLBALKEN --- */

/* Für Webkit-Browser (Chrome, Safari, Edge) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Für Firefox & generell */
.no-scrollbar {
    -ms-overflow-style: none;  /* IE und Edge */
    scrollbar-width: none;  /* Firefox */
}

/* NEUER CSS-BLOCK FÜR DAS WARN-TAG */
.status-badge--warnung {
    background-color: #fef2f2; /* Tailwind red-50 */
    color: #b91c1c; /* Tailwind red-700 */
    border-color: #fca5a5; /* Tailwind red-300 */
}
/* Animation für den Countdown-Ring der Benachrichtigung */
@keyframes countdown-ring {
    from {
        stroke-dashoffset: 100.53; /* Umfang des Kreises (2 * pi * 16) */
    }
    to {
        stroke-dashoffset: 0;
    }
}

.progress-ring-circle {
    animation: countdown-ring 5s linear forwards;
}

/* Optimierte Stile für Spaltenbreiten im Kostenaufstellungs-Editor */
.kostenaufstellung-table.is-editing .w-menge {
    width: 10ch;
}
.kostenaufstellung-table.is-editing .w-einzel-netto,
.kostenaufstellung-table.is-editing .w-einzel-brutto {
    width: 13ch;
}
.kostenaufstellung-table.is-editing .w-mwst {
    width: 11ch;
}
.kostenaufstellung-table.is-editing .w-gesamt-brutto {
    width: 15ch;
}
.kostenaufstellung-table.is-editing .w-beschreibung {
    width: 100%; /* Sorgt dafür, dass die Spalte den Rest des Platzes einnimmt */
}

/*
 * Anpassungen für das zentrierte Menüband
 * ----------------------------------------
 * DEAKTIVIERT: Diese Regeln haben die Navigation auf 1400px begrenzt und 
 * standen im Konflikt mit der neuen 1450px Umschalt-Logik in _navigation.php.
 */

/*
nav.bg-white.shadow-md > .max-w-full {
    display: flex;
    justify-content: center;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1400px;
}
*/

/* --- Toggle Switch Styling (Für Konfigurationsseiten) --- */

/* Versteckt die Checkbox, hält sie aber zugänglich */
.toggle-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Der Hintergrund (Track) */
.toggle-track {
    width: 2.75rem; /* entspr. w-11 */
    height: 1.5rem; /* entspr. h-6 */
    background-color: #e5e7eb; /* gray-200 */
    border-radius: 9999px; /* rounded-full */
    transition: background-color 0.2s ease-in-out;
    position: relative; /* Damit der Knob sich relativ hierzu bewegt */
}

/* Wenn Checkbox aktiv ist: Hintergrund blau färben */
.toggle-checkbox:checked + .toggle-track {
    background-color: #4f46e5; /* indigo-600 */
}

/* Der Fokus-Ring (für Tastaturnavigation) */
.toggle-checkbox:focus + .toggle-track {
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.3); /* indigo-300 mit Transparenz */
}

/* Der Knopf (Knob) */
.toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem; /* entspr. w-5 */
    height: 1.25rem; /* entspr. h-5 */
    background-color: white;
    border-radius: 9999px; /* rounded-full */
    border: 1px solid #d1d5db; /* gray-300 */
    transition: transform 0.2s ease-in-out;
    transform: translateX(0);
}

/* Wenn Checkbox aktiv ist: Knopf nach rechts schieben und Border weiß machen */
.toggle-checkbox:checked + .toggle-track .toggle-knob {
    transform: translateX(100%); /* Verschiebung um eigene Breite (20px) */
    border-color: white;
}

* Fallback Styling für Markdown Vorschau, falls Tailwind Typography fehlt */
#preview-area h1 { font-size: 2em; font-weight: bold; margin-bottom: 0.5em; border-bottom: 1px solid #eee; }
#preview-area h2 { font-size: 1.5em; font-weight: bold; margin-top: 1em; margin-bottom: 0.5em; }
#preview-area h3 { font-size: 1.25em; font-weight: bold; margin-top: 1em; }
#preview-area ul { list-style-type: disc; padding-left: 20px; margin-bottom: 1em; }
#preview-area ol { list-style-type: decimal; padding-left: 20px; margin-bottom: 1em; }
#preview-area p { margin-bottom: 1em; line-height: 1.6; }
#preview-area strong { font-weight: bold; }
#preview-area em { font-style: italic; }
#preview-area pre { background: #f3f4f6; padding: 10px; border-radius: 5px; overflow-x: auto; font-family: monospace; }
#preview-area code { background: #e5e7eb; padding: 2px 4px; border-radius: 3px; font-family: monospace; font-size: 0.9em; }
#preview-area blockquote { border-left: 4px solid #e5e7eb; padding-left: 10px; color: #6b7280; font-style: italic; }

/* --- Stile für die Full-Width Anzeigetafel & Auto-Refresh --- */

/* Animation für den Refresh-Indicator (Sanftes Pulsieren) */
@keyframes pulse-refresh {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

#refresh-indicator:not(.hidden) {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #3b82f6;
    border-radius: 50%;
    animation: pulse-refresh 2s infinite;
}

/* Dashboard Zonen-Überschriften */
.dashboard-zone-header {
    letter-spacing: 0.15em;
    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

/* Card-Hover Effekte auf der Anzeigetafel */
[data-card-key] {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[data-card-key]:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Spezifische Scrollbar für Infokarten-Listen (E-Mails, Anfragen) */
.custom-scrollbar::-webkit-scrollbar {
    width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.5);
}

/* Leerzustand Animation */
.dashboard-empty-state {
    animation: dashboardFadeIn 0.6s ease-out;
}

@keyframes dashboardFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Optimierung für sehr breite Bildschirme (4K / Widescreen) */
@media (min-width: 1920px) {
    .2xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}