/* Wochenplanung – Drag & Drop */

:root {
    --slot-bg: #fff;
    --slot-disabled: #f5f5f5;
    --slot-disabled-print: #f9f9f9;
    --slot-border: #949494;
    --slot-filled: #e4e4e4;
    --drag-over: #007bff;
    --drag-over-bg: rgba(0, 123, 255, 0.08);
    --drop-forbidden: #dc3545;
    --drop-forbidden-bg: rgba(220, 53, 69, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
    background: #ffffff;
    padding: .5rem;
    color: #a3a3a3;
}

.template-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.5rem 0;
}

.template-actions .template-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}

.template-actions .template-label-text {
    font-size: 0.9rem;
    color: #555;
}

.template-actions input[type="file"] {
    font-size: 0.85rem;
}

.template-actions button {
    padding: 0.4rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--slot-border);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.template-actions button:hover {
    background: #f0f0f0;
}

.template-actions select {
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
    border: 1px solid var(--slot-border);
    border-radius: 6px;
    background: #fff;
    min-width: 10rem;
}

.hour-types {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.hour-type {
    padding: 0.5rem 1rem;
    background: #fff;
    border: 2px solid var(--slot-border);
    border-radius: 8px;
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: box-shadow 0.15s;
}

.hour-type:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.hour-type:active {
    cursor: grabbing;
}

.hour-type .icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
}

.hour-type .icon-wrap svg {
    width: 1.25rem;
    height: 1.25rem;
}

.hour-type .count {
    background: #333;
    color: #fff;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.hour-type.zero-available .count {
    background: #999;
}

/* Schwellwerte: blau (viel), grün (mittel), rot (wenig) – svg und svg * damit polygon/line/rect die Farbe bekommen */
.hour-type.count-high .count {
    background: #0d6efd;
    color: #fff;
}

.hour-type.count-high .icon-wrap svg,
.hour-type.count-high .icon-wrap svg * {
    stroke: #0d6efd;
}

.hour-type.count-mid .count {
    background: #198754;
    color: #fff;
}

.hour-type.count-mid .icon-wrap svg,
.hour-type.count-mid .icon-wrap svg * {
    stroke: #198754;
}

.hour-type.count-low .count {
    background: #dc3545;
    color: #fff;
}

.hour-type.count-low .icon-wrap svg,
.hour-type.count-low .icon-wrap svg * {
    stroke: #dc3545;
}

.hour-type.zero-available.count-low .count {
    background: #999;
}

/* Wochentage links (1. Spalte), Uhrzeiten oben (1. Zeile), Zellen = 12 Stunden × 7 Tage */
.week-grid {
    display: grid;
    grid-template-columns: 2.5rem repeat(13, minmax(0, 1fr));
    grid-auto-rows: minmax(2.5rem, auto);
    gap: 1px;
    background: var(--slot-border);
    border: 1px solid var(--slot-border);
    border-radius: 8px;
    overflow: hidden;
    max-width: 100%;
}

.week-grid .cell {
    background: #fff;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    text-align: center;
}

.week-grid .cell.header {
    background: #e9ecef;
    font-weight: 600;
}

.week-grid .cell.header.time {
    font-size: 0.75rem;
    color: #555;
}

/* Samstag & Sonntag (DISABLED_DAYS) ausblenden */
.week-grid .row-hidden {
    display: none;
}

.hour-slot {
    display: grid;
    grid-template-columns: 1fr 0px 1fr;
    gap: 0;
    min-height: 7.5rem;
    background: var(--slot-border);
    transition: grid-template-columns 0.15s ease;
}

.full-slot-drop {
    min-width: 2px;
    background: var(--slot-bg);
    cursor: pointer;
    transition: background 0.15s, outline 0.15s;
}

.full-slot-drop.drag-over-ok {
    outline: 2px dashed var(--drag-over);
    outline-offset: -2px;
    background: var(--drag-over-bg);
}

.full-slot-drop.drag-over-forbidden {
    outline: 2px dashed var(--drop-forbidden);
    outline-offset: -2px;
    background: var(--drop-forbidden-bg);
}

/* Nur ein Half-Slot belegt: dieser nutzt die volle Breite, Mitte ausblenden */
.hour-slot.single-filled-first,
.hour-slot.both-same-type {
    grid-template-columns: 1fr 0fr 0fr;
}

.hour-slot.single-filled-first .half-slot:last-child,
.hour-slot.single-filled-first .full-slot-drop,
.hour-slot.both-same-type .half-slot:last-child,
.hour-slot.both-same-type .full-slot-drop {
    min-width: 0;
    overflow: hidden;
}

.hour-slot.single-filled-second {
    grid-template-columns: 0fr 0fr 1fr;
}


.hour-slot.half-slot-left {
    background: var(--slot-bg);
}

/* Nur rechter Half frei + nächste Stunde ganz geblockt → Slot links darstellen (Spalten tauschen) */
.hour-slot.half-slot-left .half-slot:first-child {
    grid-column: 3;
    grid-row: 1;
}
.hour-slot.half-slot-left .half-slot:last-child {
    grid-column: 1;
    grid-row: 1;
}
.hour-slot.half-slot-left .full-slot-drop {
    grid-column: 2;
    grid-row: 1;
}

/* Wenn (logisch) nur der zweite Half belegt ist, aber visuell links dargestellt wird: volle Breite links */
.hour-slot.half-slot-left.single-filled-second {
    grid-template-columns: 1fr 0fr 0fr;
}
.hour-slot.half-slot-left.single-filled-second .half-slot:first-child,
.hour-slot.half-slot-left.single-filled-second .full-slot-drop {
    min-width: 0;
    overflow: hidden;
}

.hour-slot.single-filled-second .half-slot:first-child,
.hour-slot.single-filled-second .full-slot-drop {
    min-width: 0;
    overflow: hidden;
}

/* Beim Ziehen über den Hour-Slot: wieder 50:50 + Mitte zum Ablegen */
.hour-slot.drop-mode {
    grid-template-columns: 1fr 2px 1fr;
}

.hour-slot.drop-mode .half-slot {
    min-width: 0;
}

/* Deaktivierte Slots (z. B. 12:00–13:30) – kein Drag & Drop */
.half-slot.slot-disabled,
.full-slot-drop.slot-disabled {
    background: var(--slot-disabled);
    cursor: default;
    pointer-events: none;
}

.half-slot {
    background: var(--slot-bg);
    border: none;
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.15s, outline 0.15s;
}

.half-slot.filled {
    background: var(--slot-filled);
}

.half-slot.drag-over-ok {
    outline: 2px dashed var(--drag-over);
    outline-offset: -2px;
    background: var(--drag-over-bg);
}

.half-slot.drag-over-forbidden {
    outline: 2px dashed var(--drop-forbidden);
    outline-offset: -2px;
    background: var(--drop-forbidden-bg);
}

.hour-slot.drag-over-ok {
    outline: 2px dashed var(--drag-over);
    outline-offset: -2px;
    background: var(--drag-over-bg);
}

.hour-slot.drag-over-forbidden {
    outline: 2px dashed var(--drop-forbidden);
    outline-offset: -2px;
    background: var(--drop-forbidden-bg);
}

.hour-type.drag-over-ok {
    outline: 2px dashed var(--drag-over);
    outline-offset: -2px;
    background: var(--drag-over-bg);
}

.hour-type.drag-over-forbidden {
    outline: 2px dashed var(--drop-forbidden);
    outline-offset: -2px;
    background: var(--drop-forbidden-bg);
}

.half-slot[draggable="true"] {
    cursor: grab;
}

.half-slot[draggable="true"]:active {
    cursor: grabbing;
}

.half-slot svg {
    width: 2rem;
    height: 2rem;
    pointer-events: none;
}

.half-slot.filled.count-high svg,
.half-slot.filled.count-high svg * {
    stroke: #0d6efd;
}

.half-slot.filled.count-mid svg,
.half-slot.filled.count-mid svg * {
    stroke: #198754;
}

.half-slot.filled.count-low svg,
.half-slot.filled.count-low svg * {
    stroke: #dc3545;
}

/* Modal: Template speichern */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-overlay.is-open {
    display: flex;
}

.modal-dialog {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 1.5rem;
    min-width: 280px;
    max-width: 90vw;
}

.modal-title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    color: #333;
}

.modal-label {
    display: block;
    margin-bottom: 0.5rem;
}

.modal-label-text {
    display: block;
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.25rem;
}

.modal-dialog input[type="text"] {
    width: 100%;
    padding: 0.5rem 0.6rem;
    font-size: 1rem;
    border: 1px solid var(--slot-border);
    border-radius: 6px;
}

.modal-hint {
    margin: 0 0 1rem;
    font-size: 0.8rem;
    color: #666;
}

.modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.modal-actions button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border: 1px solid var(--slot-border);
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

.modal-actions button:hover {
    background: #f0f0f0;
}

.modal-actions button:first-child {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

.modal-actions button:first-child:hover {
    background: #0069d9;
}


@media (max-width: 640px) {
    .week-grid {
        grid-template-columns: 2rem repeat(13, minmax(0, 1fr));
    }

    .week-grid .cell.header:not(.time) {
        font-size: 0.65rem;
    }
}


/* Print layout: schlichtes Layout, Icons in #ccc, keine Aktionsleisten/Buttons */
@media print {
body {
    background: transparent;
    padding: 0.5rem;
}

    .template-actions,
    .hour-types,
    .modal-overlay {
        display: none !important;
    }

.hour-type .icon-wrap svg,
.hour-type .icon-wrap svg *,
.hour-type.count-high .icon-wrap svg,
.hour-type.count-high .icon-wrap svg *,
.hour-type.count-mid .icon-wrap svg,
.hour-type.count-mid .icon-wrap svg *,
.hour-type.count-low .icon-wrap svg,
.hour-type.count-low .icon-wrap svg * {
    stroke: #ccc !important;
}

.hour-type .count {
    background: #999 !important;
    color: #fff;
}


.half-slot svg,
.half-slot.filled.count-high svg,
.half-slot.filled.count-high svg *,
.half-slot.filled.count-mid svg,
.half-slot.filled.count-mid svg *,
.half-slot.filled.count-low svg,
.half-slot.filled.count-low svg * {
    stroke: #dbdbdb !important;
}

.week-grid {
    break-inside: avoid;
}

.hour-slot {
    break-inside: avoid;
}
.week-grid .half-slot {
    background-color: var(--slot-bg);
}

/* Geblockte Zeiten im Druck: grau mit feiner Schraffur */
.half-slot.slot-disabled,
.full-slot-drop.slot-disabled {
    background-color: var(--slot-disabled-print) !important;
    print-color-adjust: exact;
}

/* Dezentes Raster im Druck, ohne doppelte Kanten */
.week-grid .hour-slot,
.week-grid .cell {
    border: 0.5px solid #ccc;
}


}