/* ── Staff Scheduler ───────────────────────────────────────── */

body { font-size: 0.9rem; }

.navbar-brand {
    letter-spacing: 0.5px;
}

/* Tiny button */
.btn-xs {
    padding: 0.1rem 0.35rem;
    font-size: 0.7rem;
    border-radius: 0.2rem;
    line-height: 1.4;
}

/* ── Month calendar — Easter Theme ───────────────────────── */
.month-table { table-layout: fixed; width: 100%; }
.month-table { border-color: #e0d4f0; }

.easter-header {
    background: linear-gradient(135deg, #c8a2e8 0%, #f8b4d9 35%, #a7e8c9 65%, #fce4a8 100%);
    color: #3d2352;
}
.easter-header th {
    font-weight: 700;
    letter-spacing: 0.5px;
    border-color: rgba(255,255,255,0.3) !important;
}

.month-cell {
    vertical-align: top;
    min-height: 90px;
    padding: 6px !important;
    overflow: hidden;
    background-color: #fefcff;
}

.day-num {
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    color: #4a2d6e;
}
.day-num:hover { text-decoration: underline; color: #7c3aed; }

.today-cell        { background-color: #f3e8ff !important; }  /* soft lavender */
.stat-holiday-cell { background-color: #fef3c7 !important; }  /* butter yellow */

.stat-holiday-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 2px;
}
.stat-holiday-header { background-color: #92400e !important; }
.stat-holiday-badge  { background-color: #b45309; color: #fff; font-size: 0.75rem; }

/* Blocked day */
.blocked-cell  { background-color: #f5f0f8 !important; }
.blocked-header { background-color: #7c6992 !important; }
.blocked-cell-light { background-color: #faf7fc; }

.blocked-label {
    font-size: 0.7rem;
    color: #8b7a9e;
    margin-bottom: 4px;
}

/* Approved time-off badges on month view */
.timeoff-label {
    font-size: 0.68rem;
    color: #6c757d;
    background: #f4f2f7;
    border-radius: 3px;
    padding: 0 4px;
    margin-bottom: 2px;
}

/* Time-off year-at-a-glance mini calendars */
.mini-month { font-size: 0.72rem; }
.mini-month th { font-weight: 600; padding: 1px 2px; }
.mini-month td { padding: 1px 2px; }
/* td-scoped selectors needed to out-rank Bootstrap's .table > :not(caption) > * > * cell background */
.yoff-approved, .mini-month td.yoff-approved { background-color: #198754; color: #fff; border-radius: 3px; }
.yoff-pending,  .mini-month td.yoff-pending  { background-color: #ffc107; color: #212529; border-radius: 3px; }
.yoff-mixed,    .mini-month td.yoff-mixed    { background-color: #198754; background-image: linear-gradient(135deg, #198754 50%, #ffc107 50%); color: #fff; border-radius: 3px; }
.yoff-blackout, .mini-month td.yoff-blackout { background-color: #dc3545; color: #fff; border-radius: 3px; }
.yoff-legend   { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }

/* Shift bars on month view — Easter pastels */
.shift-bar {
    color: #fff;
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 0.7rem;
    line-height: 1.4;
}
.shift-bar:hover { opacity: 0.85; color: #fff; }
.shift-bar-name { font-weight: 600; margin-right: 3px; }
.shift-bar-time { opacity: 0.85; }
.shift-bar-unfilled {
    background-color: #ffed00 !important;
    color: #000 !important;
    border: 1.5px dashed #cc0000;
}
.shift-bar-unfilled:hover { opacity: 0.75; color: #000 !important; }

/* ── Week table ──────────────────────────────────────────── */
.week-table td, .week-table th { font-size: 0.8rem; }
.today-header { background-color: #1a5276 !important; }

/* ── Day view (transposed: staff rows × time columns) ────── */
.schedule-day-table {
    border-collapse: collapse;
    table-layout: fixed;
    min-width: max-content;
}

/* Sticky staff-name header cell in thead */
.day-grid-name-header {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 130px;
    min-width: 130px;
    background: #212529; /* table-dark colour */
    white-space: nowrap;
}

/* Sticky staff-name th in each row */
.day-grid-name {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 130px;
    min-width: 130px;
    background: #f8f9fa;
    font-weight: 600;
    font-size: 0.82rem;
    white-space: nowrap;
    vertical-align: middle;
}

/* Time slot column headers */
.day-time-th {
    width: 38px;
    min-width: 38px;
    padding: 6px 2px !important;
    text-align: center;
    white-space: nowrap;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    font-size: 0.7rem;
    vertical-align: bottom;
}
.day-time-hour { font-weight: 700; }
.day-time-half { font-weight: 400; opacity: 0.75; }

.empty-slot {
    background: #fafafa;
    width: 38px;
}

.shift-cell {
    vertical-align: top;
    padding: 4px !important;
    border: 1px solid rgba(0,0,0,.1) !important;
}

.shift-scheduled {
    background-color: #cfe2ff;
    border-top: 3px solid #0d6efd !important;
}

.shift-inner { min-height: 100%; }

.day-shift-time {
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.day-shift-notes {
    font-size: 0.68rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Shift status: sick / no show / cancelled ───────────── */
.shift-off {
    opacity: .62;
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.06) 6px 12px);
}
.shift-cancelled .day-shift-time { text-decoration: line-through; }
.shift-status-badge { font-size: .62rem; vertical-align: middle; }
.status-sick      { background-color: #ffc107 !important; color: #212529 !important; }
.status-no_show   { background-color: #dc3545 !important; color: #fff !important; }
.status-cancelled { background-color: #6c757d !important; color: #fff !important; text-decoration: line-through; }
.shift-off-badge  { opacity: .7; }

/* ── Reports ─────────────────────────────────────────────── */
.report-table th, .report-table td { font-size: 0.85rem; }

/* ── Print ───────────────────────────────────────────────── */
@media print {
    nav, .no-print { display: none !important; }
    .container-fluid { padding: 0 !important; }
    .report-table { font-size: 11pt; }
    .card { border: none !important; box-shadow: none !important; }
    .table-responsive { overflow: visible !important; }
    .density-row { display: none !important; }
    .break-windows-banner { display: none !important; }
}

/* ── Staffing Density Overlay ────────────────────────────── */
.density-row td {
    font-size: 0.7rem;
    text-align: center;
    font-weight: 600;
    padding: 2px !important;
    vertical-align: middle;
}
.density-0 { background-color: #fafafa; }
.density-1 { background-color: rgba(13,110,253,0.08); }
.density-2 { background-color: rgba(13,110,253,0.15); }
.density-3 { background-color: rgba(13,110,253,0.25); }
.density-4 { background-color: rgba(13,110,253,0.35); }
.density-5 { background-color: rgba(13,110,253,0.45); color: #fff; }


/* Break cell (split bar gap) */
.break-cell {
    background: repeating-linear-gradient(45deg, #fff3cd, #fff3cd 4px, #ffe69c 4px, #ffe69c 8px);
    text-align: center;
    font-size: 0.58rem;
    vertical-align: middle;
    color: #664d03;
    border: 1px dashed #ffc107 !important;
    padding: 2px !important;
    white-space: nowrap;
    font-weight: 600;
}
.break-cell i { font-size: 0.7rem; }

/* Break windows banner */
.break-windows-banner {
    background: #e8f4fd;
    border: 1px solid #b6d4fe;
    border-radius: 0.375rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    color: #0a4c8a;
}

/* ── Touch screens: .btn-xs is too small to hit with a finger ── */
@media (hover: none) and (pointer: coarse) {
    .btn-xs { padding: 0.3rem 0.55rem; font-size: 0.8rem; min-height: 32px; }
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 576px) {
    .month-cell   { min-height: 70px; padding: 3px !important; }
    .shift-bar    { font-size: 0.62rem; }
    .day-num      { font-size: 0.8rem; }
    .blocked-label { font-size: 0.62rem; }

    .schedule-day-table { font-size: 0.75rem; }
    .btn-xs { font-size: 0.62rem; }

    /* Hide day names on tiny screens, show 1 letter */
    .month-table thead th { font-size: 0.7rem; padding: 4px 2px !important; }
}

/* Bootstrap d-flex etc. use !important and would beat the HTML hidden attribute (inline "change dates" forms on Time Off). */
[hidden] { display: none !important; }