/* Custom styles for the Dienstplan-System */

/* Jumbotron styling (Bootstrap 5 doesn't include jumbotron by default) */
.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    border-radius: 0.3rem;
}

/* Card hover effect */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Form styling */
.form-container {
    max-width: 600px;
    margin: 0 auto;
}

/* Month calendar on the "Meine Wünsche" page */
.wish-calendar-wrap {
    margin-top: 20px;
}

.wish-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.wish-calendar__head {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #adb5bd;
    padding-bottom: 2px;
}

.wish-calendar__head.is-weekend {
    color: #f1a9a0;
}

.wish-calendar__day {
    min-height: 84px;
    padding: 0.35rem;
    border: 1px solid #e9ecef;
    border-radius: 0.6rem;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.wish-calendar__day:hover,
.wish-calendar__day:focus-visible {
    border-color: #86b7fe;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.12);
    outline: none;
}

.wish-calendar__day.is-empty {
    background: #f8f9fa;
    border-style: dashed;
    cursor: default;
    box-shadow: none;
}

.wish-calendar__day.is-weekend {
    background: #fafafa;
}

.wish-calendar__day.is-today {
    border-color: #1d4ed8;
    box-shadow: inset 0 0 0 1px #1d4ed8;
}

.wish-calendar__day.has-wishes {
    background: #f5f9ff;
}

/* Weekend teams (same colours as the schedule view) – win over the
   is-weekend / has-wishes tints so the weekend stays recognisable. */
.wish-calendar__day.weekend-hauffe,
.wish-calendar__day.weekend-hauffe.has-wishes { background: #e7f5ec; }
.wish-calendar__day.weekend-braukmann,
.wish-calendar__day.weekend-braukmann.has-wishes { background: #f3ecfb; }
.wish-calendar__day.is-my-weekend.weekend-hauffe { background: #c6ebd3; }
.wish-calendar__day.is-my-weekend.weekend-braukmann { background: #e2d1f7; }
.wish-calendar__day.is-my-weekend {
    box-shadow: inset 0 3px 0 #0f766e;
}
.wish-calendar__day.is-my-weekend.weekend-braukmann {
    box-shadow: inset 0 3px 0 #6d28d9;
}

.wish-calendar__day.is-holiday {
    border-top: 2px solid #dc2626;
}

.wish-calendar__day.is-school-holiday {
    border-bottom: 3px solid #0284c7;
}

.wish-calendar__holiday,
.wish-calendar__ferien {
    display: block;
    font-size: 0.62rem;
    line-height: 1.15;
    color: #dc2626;
    font-weight: 600;
    margin-bottom: 0.2rem;
    white-space: normal;
}

.wish-calendar__ferien {
    color: #0369a1;
}

.wish-calendar__num {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.3rem;
}

.wish-calendar__day.is-today .wish-calendar__num {
    color: #1d4ed8;
}

.wish-calendar__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

/* Wish status shown on the badge */
.shift-badge.status-pending {
    opacity: 0.55;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.shift-badge.status-rejected {
    opacity: 0.4;
    text-decoration: line-through;
}

/* The locked calendar is not interactive */
.wish-calendar-wrap[data-locked] .wish-calendar__day {
    cursor: default;
    opacity: 0.75;
}

.wish-calendar-wrap[data-locked] .wish-calendar__day:hover {
    border-color: #e9ecef;
    box-shadow: none;
}

@media (max-width: 576px) {
    .wish-calendar {
        gap: 3px;
    }
    .wish-calendar__day {
        min-height: 62px;
        padding: 0.2rem;
        border-radius: 0.4rem;
    }
    .wish-calendar__num {
        font-size: 0.75rem;
        margin-bottom: 0.15rem;
    }
}

/* Admin panel styling */
.admin-panel {
    background-color: #f8f9fa;
    border-radius: 0.3rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

/* ===== Schedule view ===== */
.schedule-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1rem;
}

.schedule-toolbar__nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.schedule-toolbar__nav .btn {
    --bs-btn-padding-x: 0.6rem;
    font-size: 1.1rem;
    line-height: 1;
    border: 1px solid #dee2e6;
}

.schedule-toolbar__title {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    min-width: 11rem;
    text-align: center;
}

.schedule-toolbar__pick {
    display: flex;
    gap: 0.5rem;
}

.schedule-toolbar__pick .form-select {
    width: auto;
}

.schedule-toolbar__actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.schedule-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #495057;
}

.schedule-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Shift badge (used in the grid and the legend) */
.shift-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    vertical-align: middle;
}

.shift-badge + .shift-badge {
    margin-left: 2px;
}

/* Badge + optional "note" marker */
.wish-badge {
    position: relative;
    display: inline-block;
}

.wish-badge + .wish-badge {
    margin-left: 2px;
}

.wish-note-dot {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    background: #1d4ed8;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    font-style: italic;
    line-height: 0.85rem;
    text-align: center;
    cursor: pointer;
    border: 1px solid #fff;
}

.wish-note-dot:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 1px;
}

.shift-morning   { background: #f59e0b; }
.shift-afternoon { background: #ea580c; }
.shift-night     { background: #6d28d9; }
.shift-free      { background: #0d9488; }
.shift-vacation  { background: #2563eb; }
.shift-unavailable { background: #6b7280; }

/* Grid card + horizontal scroll */
.schedule-card {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.schedule-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.schedule-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 0.85rem;
}

.schedule-table th,
.schedule-table td {
    border-bottom: 1px solid #f1f3f5;
    border-right: 1px solid #f1f3f5;
    padding: 0.4rem 0.3rem;
    text-align: center;
    white-space: nowrap;
}

.schedule-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8f9fa;
    color: #495057;
    font-weight: 600;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.schedule-table__daynum {
    display: block;
    font-size: 0.9rem;
    color: #212529;
}

.schedule-table__dayname {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #adb5bd;
}

/* Sticky employee column */
.schedule-table__name-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #fff;
    text-align: left;
    font-weight: 500;
    min-width: 9.5rem;
    box-shadow: 1px 0 0 #e9ecef;
}

/* `.schedule-table td { text-align: center }` (0,1,1) outweighs the rule above
   (0,1,0); this compound selector (0,2,1) wins it back so short labels like
   "Frei" don't drift to the middle of the name column. */
.schedule-table td.schedule-table__name-col,
.schedule-table th.schedule-table__name-col {
    text-align: left;
}

.schedule-table thead .schedule-table__name-col {
    z-index: 3;
    background: #f8f9fa;
}

.schedule-table tbody tr:hover td {
    background: #f8fbff;
}

.schedule-table tbody tr:hover .schedule-table__name-col {
    background: #f8fbff;
}

/* Weekend + today accents */
.schedule-table th.is-weekend,
.schedule-table td.is-weekend {
    background: #fafafa;
}

.schedule-table th.is-today,
.schedule-table td.is-today {
    background: #eef5ff;
    box-shadow: inset 0 0 0 1px #bcd7ff;
}

.schedule-table thead th.is-today .schedule-table__daynum {
    color: #1d4ed8;
    font-weight: 700;
}

/* Totals band */
.schedule-table__totals td {
    background: #f8f9fa;
}

.schedule-table__totals-head td {
    border-top: 2px solid #ced4da;
    border-bottom: 1px solid #dee2e6;
    background: #eef0f2;
    font-weight: 600;
    color: #495057;
    text-align: left;
    height: 2.2rem;
}

.schedule-table__totals .schedule-table__name-col {
    background: #f8f9fa;
}

.schedule-table__totals-label {
    font-weight: 500;
}

.schedule-table__totals-label .shift-badge {
    margin-right: 0.4rem;
}

.schedule-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #212529;
}

.schedule-count.is-zero {
    color: #ced4da;
    font-weight: 400;
}

.schedule-count.is-understaffed {
    color: #b02a37;
    background: #fbeaec;
    box-shadow: inset 0 0 0 1px #f1aeb5;
}

/* Weekend teams (Hauffe / Braukmann), 14-day rotation */
.schedule-table th.weekend-hauffe,
.schedule-table td.weekend-hauffe {
    background: #e7f5ec;
}

.schedule-table th.weekend-braukmann,
.schedule-table td.weekend-braukmann {
    background: #f3ecfb;
}

/* The logged-in user's own on-duty weekends: stronger tint + accent border */
.schedule-table th.is-my-weekend.weekend-hauffe,
.schedule-table td.is-my-weekend.weekend-hauffe {
    background: #c6ebd3;
}

.schedule-table th.is-my-weekend.weekend-braukmann,
.schedule-table td.is-my-weekend.weekend-braukmann {
    background: #e2d1f7;
}

.schedule-table thead th.is-my-weekend {
    box-shadow: inset 0 -3px 0 #0f766e;
}

.schedule-table thead th.is-my-weekend.weekend-braukmann {
    box-shadow: inset 0 -3px 0 #6d28d9;
}

/* Public holidays: red top edge on top of the (weekend-)tint */
.schedule-table th.is-holiday,
.schedule-table td.is-holiday {
    border-top: 2px solid #dc2626;
}

.schedule-table thead th.is-holiday .schedule-table__dayname {
    color: #dc2626;
    font-weight: 700;
}

/* NRW school holidays: blue bottom edge, composes with the other markers */
.schedule-table th.is-school-holiday,
.schedule-table td.is-school-holiday {
    border-bottom: 2px solid #0284c7;
}

/* First day of a month in the multi-month views */
.schedule-table th.month-start,
.schedule-table td.month-start {
    border-left: 2px solid #cbd5e1;
}

.schedule-table__months th {
    text-align: left;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border-bottom: 1px solid #cbd5e1;
    padding: 0.25rem 0.4rem;
}

.schedule-table__pub {
    color: #15803d;
}

/* Legend swatches for the weekend teams */
.weekend-swatch {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 0.2rem;
    vertical-align: -2px;
    border: 1px solid rgba(15, 23, 42, 0.15);
}

.weekend-swatch.weekend-hauffe { background: #c6ebd3; }
.weekend-swatch.weekend-braukmann { background: #e2d1f7; }
.weekend-swatch.is-my-weekend { box-shadow: inset 0 -3px 0 #0f766e; }
.weekend-swatch.is-my-weekend.weekend-braukmann { box-shadow: inset 0 -3px 0 #6d28d9; }
.weekend-swatch.is-holiday-swatch { background: #fff; border-top: 3px solid #dc2626; }
.weekend-swatch.is-school-holiday-swatch { background: #fff; border-bottom: 3px solid #0284c7; }

/* Compact half-year / year grid – squeezed so ~4 months fit side by side.
   The card breaks out of the container to use the full window width. */
.schedule-card--wide {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-radius: 0;
}

.schedule-table--compact {
    font-size: 0.62rem;
}

.schedule-table--compact th,
.schedule-table--compact td {
    padding: 0;
    border-right-color: #eef1f3;
}

.schedule-table--compact thead th {
    padding: 0.1rem 0;
}

.schedule-table--compact .schedule-table__daynum {
    font-size: 0.58rem;
    font-weight: 400;
    line-height: 1.1;
}

/* the weekday initials add width without much value at this size */
.schedule-table--compact .schedule-table__dayname {
    display: none;
}

.schedule-table--compact .shift-badge {
    display: block;
    width: 100%;
    min-width: 0.85rem;
    height: 0.95rem;
    line-height: 0.95rem;
    border-radius: 0;
    font-size: 0.56rem;
    padding: 0;
}

.schedule-table--compact .schedule-table__name-col {
    min-width: 5.5rem;
    max-width: 5.5rem;
    font-size: 0.66rem;
    padding-left: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.schedule-table--compact .schedule-table__month-band {
    font-size: 0.66rem;
    padding: 0.15rem 0.3rem;
}

@media (max-width: 768px) {
    .schedule-toolbar__actions {
        margin-left: 0;
    }
    .schedule-table__name-col {
        min-width: 7rem;
    }
}

/* Print view for the schedule */
@media print {
    .navbar,
    footer,
    .no-print,
    .alert {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .container {
        max-width: none;
        width: 100%;
    }

    .schedule-card {
        border: none;
        box-shadow: none;
        border-radius: 0;
    }

    .schedule-scroll {
        overflow: visible !important;
    }

    .schedule-table {
        font-size: 9px;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 1px 2px;
        border-color: #ccc;
    }

    .schedule-table thead th,
    .schedule-table__name-col {
        position: static;
    }

    .shift-badge {
        width: auto;
        height: auto;
        color: #000;
        background: none !important;
        border-radius: 0;
        font-size: 9px;
    }

    @page {
        size: landscape;
        margin: 1cm;
    }
}