/* =====================================================
   Cardiothoracic Theatre Viewer
   week.css
   -----------------------------------------------------
   Week-at-a-glance board: a compact grid of terse rows
   (not full cards) so the whole week is visible with far
   less scrolling than the daily dashboard. Same one-accent
   palette as the dashboard - two shades of the one blue,
   not a different hue per theatre - so the two views read
   as one system.
   ===================================================== */

:root {
    --wk-accent:      #2563EB;   /* theatres, the normal accent */
    --wk-accent-mid:  #1D4ED8;   /* On Call / Waiting List      */
    --wk-accent-dark: #1E3A8A;   /* header bar, today's emphasis */
    --wk-tint:        #E6EEFD;   /* light fill for list/flag pills */

    --wk-ink:      #212B32;
    --wk-ink-soft: #4C6272;
    --wk-line:     #E1E6EA;
    --wk-surface:  #FFFFFF;
    --wk-page:     #F4F6F8;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 16px;
    background: var(--wk-page);
    color: var(--wk-ink);
    font-family: Arial, -apple-system, "Segoe UI", Helvetica, sans-serif;
}

/* ------------------------------------------------------
   Header
   ------------------------------------------------------ */

.week-header {
    text-align: center;
    margin-bottom: 16px;
    background: var(--wk-accent-dark);
    color: #fff;
    padding: 18px 16px;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.back-button {
    text-decoration: none;
    color: #BFD3F5;
    font-weight: 700;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 10px;
}
.back-button:hover { color: #fff; }

.week-header h1 { margin: 0; color: #fff; font-size: 21px; font-weight: 800; }
#weekTitle { margin-top: 4px; color: #BFD3F5; font-weight: 600; font-size: 13.5px; }

.wk-loading, .wk-error { text-align: center; color: var(--wk-ink-soft); font-size: 17px; }

/* ------------------------------------------------------
   Weekday columns
   ------------------------------------------------------ */

.wk-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: start;
    max-width: 1500px;
    margin: 0 auto;
}

.wk-day {
    background: var(--wk-surface);
    border: 1px solid var(--wk-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(33,43,50,.07);
}

.wk-day-head {
    background: var(--wk-accent);
    color: #fff;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.wk-day-name { font-weight: 800; font-size: 15px; }
.wk-day-date { font-size: 12px; color: #D6E4FB; font-weight: 700; white-space: nowrap; }

/* Today's column stands out a shade darker, same accent family */
.wk-today { box-shadow: 0 0 0 3px var(--wk-accent-dark), 0 3px 12px rgba(30,58,138,.25); }
.wk-today .wk-day-head { background: var(--wk-accent-dark); }
.wk-today .wk-day-date { color: #BFD3F5; }

.wk-day-body { display: flex; flex-direction: column; }

/* ------------------------------------------------------
   Rows: one per theatre, plus support and on-call
   ------------------------------------------------------ */

.wk-row {
    display: flex;
    gap: 8px;
    padding: 7px 10px 7px 8px;
    border-bottom: 1px solid var(--wk-line);
    border-left: 4px solid transparent;
    align-items: flex-start;
}

.wk-row:last-child { border-bottom: none; }

.wk-t1,
.wk-t2,
.wk-t4,
.wk-t5,
.wk-cath { border-left-color: var(--wk-accent); }

.wk-support { border-left-color: var(--wk-ink-soft); background: var(--wk-page); }

.wk-oncall {
    border-left-color: var(--wk-accent-mid);
    background: var(--wk-tint);
}

.wk-wlist { border-left-color: var(--wk-accent); background: var(--wk-tint); }

.wk-tag {
    flex: none;
    width: 58px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--wk-ink-soft);
    padding-top: 3px;
}

.wk-t1 .wk-tag,
.wk-t2 .wk-tag,
.wk-t4 .wk-tag,
.wk-t5 .wk-tag,
.wk-cath .wk-tag { color: var(--wk-accent); }

.wk-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
    align-items: baseline;
    min-width: 0;
}

.wk-odp   { font-weight: 800; font-size: 13.5px; }
.wk-odp em { font-style: normal; font-size: 11px; color: var(--wk-ink-soft); font-weight: 800; }
.wk-anaes { font-weight: 600; font-size: 12.5px; color: var(--wk-ink-soft); }
.wk-list  {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--wk-accent);
    background: var(--wk-tint);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}
.wk-flag {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--wk-accent-mid);
    background: var(--wk-tint);
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}
.wk-empty { color: #A6B1BB; font-weight: 700; }

/* ------------------------------------------------------
   Weekend strip
   ------------------------------------------------------ */

.wk-weekend {
    max-width: 1500px;
    margin: 14px auto 0;
    background: var(--wk-surface);
    border: 1px solid var(--wk-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(33,43,50,.07);
}

.wk-wend-head {
    background: var(--wk-accent-dark);
    color: #fff;
    font-weight: 800;
    letter-spacing: .05em;
    padding: 10px 14px;
}

.wk-wend-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.wk-wend-half { border-right: 1px solid var(--wk-line); }
.wk-wend-half:last-child { border-right: none; }

.wk-wend-half.wk-today { box-shadow: inset 0 0 0 3px var(--wk-accent-dark); }

.wk-wend-day {
    font-weight: 800;
    padding: 8px 12px 2px;
    color: var(--wk-accent);
}

/* ------------------------------------------------------
   Dark mode (shares the dashboard's stored preference)
   ------------------------------------------------------ */

html[data-theme="dark"] body { background: #10161f; color: #E4E9EF; }

html[data-theme="dark"] .wk-day,
html[data-theme="dark"] .wk-weekend { background: #1B2430; border-color: #3A4656; }

html[data-theme="dark"] .wk-row { border-bottom-color: #2A3542; }
html[data-theme="dark"] .wk-support { background: #232E3C; }
html[data-theme="dark"] .wk-oncall,
html[data-theme="dark"] .wk-wlist   { background: #1A2740; }
html[data-theme="dark"] .wk-anaes,
html[data-theme="dark"] .wk-tag { color: #93A1B1; }
html[data-theme="dark"] .wk-empty { color: #5B6B7D; }
html[data-theme="dark"] .wk-list,
html[data-theme="dark"] .wk-flag { background: #1E3A5F; color: #9DBFF2; }

/* ------------------------------------------------------
   Smaller screens: 5 -> 2 -> 1 columns
   ------------------------------------------------------ */

@media (max-width: 1150px) { .wk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  {
    .wk-grid { grid-template-columns: 1fr; }
    .wk-wend-body { grid-template-columns: 1fr; }
    .wk-wend-half { border-right: none; border-bottom: 1px solid var(--wk-line); }
}