/* =====================================================
   Cardiothoracic Theatre Viewer
   styles.css
   -----------------------------------------------------
   Core dashboard styling for index.html: hero header,
   toolbar, day tabs, theatre/on-call/support cards, and
   the splash screen. clinical.css layers a more compact
   "Dashboard V2" pass on top of this file; features.css
   and insights.css style the newer overlays.

   Palette and card language match week.css/calendar.css/
   staff.css so every page in the app reads as one system:
   muted ink text, thin borders, soft shadows, and colour
   used functionally (theatre/status accents) rather than
   decoratively.
   ===================================================== */

:root{
    /* One vibrant accent (and two darker shades of the same hue, for
       hierarchy and hover/emphasis) used everywhere a colour appears -
       every card header, button and tag below is a shade of this one
       colour, not a different hue per theatre/status. Was a desaturated
       graphite; this is the same single-accent structure, just punchier. */
    --nhs-blue:#2563EB;
    --nhs-dark:#1E3A8A;

    --ink:#212B32;
    --ink-soft:#4C6272;
    --line:#E1E6EA;
    --surface:#ffffff;
    --page-bg:#F4F6F8;

    --shadow-sm:0 1px 3px rgba(33,43,50,.08);
    --shadow-md:0 4px 14px rgba(33,43,50,.10);
    --shadow-lift:0 6px 20px rgba(33,43,50,.14);

    --radius:12px;

    /* Theatre accents - all the same hue (was a different one per
       theatre). Kept as separate variables so each .theatreN class
       still only needs a one-line rule. */
    --theatre1:#2563EB;
    --theatre2:#2563EB;
    --theatre4:#2563EB;
    --theatre5:#2563EB;
    --cathlab:#2563EB;

    /* Support/On Call cards use one step darker, so the grid still
       reads with a little hierarchy without introducing a new hue. */
    --support:#1D4ED8;
    --oncall:#1D4ED8;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background:var(--page-bg);
    color:var(--ink);
    padding-bottom:90px;
    /* Reserves space for the now permanently-fixed Week Commencing bar
       so the hero header doesn't start out hidden underneath it.
       --week-bar-h is measured from the real element by app.js, with a
       fallback close to its actual height for the first paint. */
    padding-top:var(--week-bar-h, 112px);
}

/* ===========================
   HERO HEADER
   =========================== */

/* No outer gutter/margin any more - sits flush against the pinned
   Week Commencing bar directly below it, the two reading as one
   continuous block instead of two separate shadowed cards. */
.hero-header{
    margin:0;
}

.hero-banner{
    background:var(--nhs-dark);
    color:#fff;
    padding:26px 24px 20px;
    text-align:center;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.hero-ecg{
    display:block;
    margin:0 auto 10px;
}

.hero-banner h1{
    margin:0;
    font-size:23px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:-.01em;
}

.hero-subtitle{
    margin-top:8px;
    font-size:14px;
    font-weight:600;
    color:#BFD3F5;
}

/* ===========================
   WEEK COMMENCING CARD
   -----------------------------
   Pinned to the very top of the viewport at all times (the hero
   header scrolls away normally beneath it) - the one thing worth
   reaching without scrolling back up. body's padding-top and the day
   headers' sticky offset (both set from --week-bar-h, measured by
   app.js) reserve exactly its height so nothing starts out hidden
   underneath it.
   =========================== */

.week-picker-card.card{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:400;
    max-width:none;
    margin:0;
    border-radius:0;
    border:none;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.week-header-bar{
    background:var(--nhs-blue);
    position:relative;
}

#scrollTopBtn{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    width:30px;
    height:30px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    color:#fff;
    font-size:15px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease, visibility .2s, background .15s ease, transform .15s ease;
}

#scrollTopBtn.show{
    opacity:1;
    visibility:visible;
}

#scrollTopBtn:hover{
    background:rgba(255,255,255,.32);
}

#scrollTopBtn:active{
    transform:translateY(-50%) scale(.88);
}

.week-picker-body{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
}

.week-picker-body .nav-arrow{
    width:44px;
    height:44px;
    flex:none;
    border:none;
    border-radius:10px;
    background:var(--nhs-blue);
    color:#fff;
    font-size:17px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .15s ease;
}

.week-picker-body .nav-arrow:hover{
    background:var(--nhs-dark);
}

.week-picker-body .nav-arrow:active{
    transform:scale(.92);
}

.week-picker{
    flex:1;
    min-width:0;
}

.week-picker select{
    width:100%;
    height:44px;
    border:1px solid var(--line);
    border-radius:10px;
    padding:0 12px;
    background:#fff;
    color:var(--ink);
    font-size:14px;
    font-weight:600;
    text-align:center;
    appearance:none;
}

/* ===========================
   DAY TABS
   =========================== */

.day-tabs{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:8px;
    padding:18px;
    max-width:700px;
    margin:auto;
}

.day-tab{
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink-soft);
    border-radius:999px;
    padding:9px 0;
    width:100%;
    cursor:pointer;
    font-weight:700;
    font-size:13.5px;
    transition:.15s;
}

.day-tab.active{
    background:var(--nhs-blue);
    border-color:var(--nhs-blue);
    color:white;
}

/* ===========================
   STATUS BAR
   =========================== */

#statusBar{
    text-align:center;
    padding:14px;
}

.hidden{
    display:none;
}

#loading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--ink-soft);
    font-weight:600;
    font-size:13.5px;
}

/* #loading's own id-selector display:flex above otherwise outranks the
   plain class selector .hidden{display:none}, so the loading state
   never actually hid once toggled - this id+class rule outranks both. */
#loading.hidden{
    display:none;
}

.status-dots{
    display:inline-flex;
    gap:4px;
}

.status-dots span{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--nhs-blue);
    animation:pulse 1.2s infinite ease-in-out;
}

.status-dots span:nth-child(2){ animation-delay:.2s; }
.status-dots span:nth-child(3){ animation-delay:.4s; }

#error{
    color:var(--nhs-dark);
    font-weight:700;
}

/* ===========================
   MAIN
   =========================== */

main{
    max-width:1450px;
    margin:auto;
    padding:12px 30px 20px;
}

/* ===========================
   DAY HEADING
   =========================== */

.day-heading{
    margin:0;
    font-size:26px;
    font-weight:800;
    letter-spacing:-.015em;
    line-height:1.2;
    text-align:center;
    /* No explicit colour - inherits from body, which dark mode
       overrides. Keeps this legible without a separate dark rule. */
}

.day-today-tag{
    display:inline-block;
    background:var(--nhs-blue);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    padding:2px 9px;
    border-radius:999px;
    vertical-align:middle;
}

.day-bh-tag{
    display:inline-block;
    background:var(--oncall);
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.02em;
    padding:2px 9px;
    border-radius:999px;
    vertical-align:middle;
}

.day-date{
    text-align:center;
    color:var(--ink-soft);
    font-size:13.5px;
    margin-top:4px;
    margin-bottom:16px;
    font-weight:500;
}

/* Sticky while its day's cards scroll past, so you always know which
   day you're looking at on a long full-week page. Each section's own
   header takes over the moment the previous one scrolls out - the
   solid background stops cards showing through underneath it. */
.day-header{
    /* Its parent (.dashboard-layout) is a flex column with
       align-items:center, which shrink-wraps children to their content
       width by default - without an explicit width here the sticky
       background below would only cover the heading text, not the
       full row, leaving the cards scrolling past visible either side
       of it. */
    width:100%;
    text-align:center;
    position:sticky;
    /* Stops just below the fixed Week Commencing bar, not at the very
       top of the viewport, now that the bar is permanently pinned
       there. */
    top:var(--week-bar-h, 112px);
    z-index:5;
    background:var(--page-bg);
    padding:10px 0 2px;
}

/* Each day's section now sits directly above the next on one scrolling
   page (the dashboard used to show a single selected day at a time) -
   a top rule + spacing separates them, skipped on the very first one. */
.daySection{
    width:100%;
    max-width:900px;
    margin:0 auto;
    padding-top:28px;
    border-top:1px solid var(--line);
}
.daySection:first-child{
    padding-top:0;
    border-top:none;
}

/* Today's section gets a quiet accent so it's easy to find while
   scrolling a full week of these. */
.daySection.day-today,
.weekend-card.day-today{
    background:linear-gradient(180deg, rgba(37,99,235,.07), transparent 120px);
    border-radius:var(--radius);
}

/* ===========================
   THEATRE / ON-CALL / SUPPORT CARDS
   =========================== */

.dashboard-layout{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.cards-grid,
.theatre-grid{
    display:grid;
    /* Fixed 2 columns, matching the reference layout's rhythm - CT1/CT2
       on one row, CT4/CT5 on the next, CATH LAB/Support on the last -
       rather than fitting as many as happen to squeeze in. */
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
    width:100%;
    margin:16px 0;
    /* Every box in the grid (theatres and Support alike) is meant to
       read as one uniform set, so they're stretched to a shared row
       height rather than each hugging its own content. */
    align-items:stretch;
}

/* A card-header that also carries a small badge on the right (the
   theatre's list type, e.g. "CARDIAC") instead of just a centred label. */
.card-header-split{
    justify-content:space-between !important;
    text-align:left !important;
}
.theatre-list-badge{
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    opacity:.85;
}

/* The shared label/value row every box (theatres, Support, On Call,
   Waiting List) is now built from. Stacked (label above value) by
   default - the narrow 2-column theatre/Support/weekend cards don't
   have room for a long surname next to a label on the same line
   without an ugly mid-word break. The On Call box spans the full page
   width though, so it overrides back to side-by-side below. */
.rota-card-body{
    padding:4px 12px;
}
.rota-row{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding:8px 0;
    border-bottom:1px solid var(--line);
}
.rota-row:last-child{ border-bottom:none; }
.rota-row-label{
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--ink-soft);
    white-space:nowrap;
    flex-shrink:0;
}
.rota-row-value{
    font-size:14px;
    font-weight:700;
    text-align:left;
    width:100%;
    overflow-wrap:break-word;
}
.rota-row-line{ display:block; }
.rota-row-extra{
    display:block;
    font-size:11px;
    font-weight:700;
    color:var(--ink-soft);
    margin-top:2px;
}

/* The On Call box spans the full page width (not squeezed into a
   2-column card), so it has room to put the value back on the same
   line as the label, right-aligned - closer to the original reference
   layout where every row had the whole width to work with. */
.oncall-wide .rota-row{
    flex-direction:row;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
}
.oncall-wide .rota-row-value{
    text-align:right;
    width:auto;
    min-width:0;
    flex:1;
}
.oncall-wide .rota-row-extra{
    text-align:right;
}

.card{
    background:var(--surface);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    border:1px solid var(--line);
    transition:transform .15s ease, box-shadow .15s ease;
}

.card:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-lift);
}

.card:active{
    transform:translateY(0) scale(.99);
    box-shadow:var(--shadow-sm);
}

.card-header{
    color:#fff;
    padding:8px 10px;
    font-weight:700;
    font-size:14px;
    letter-spacing:.04em;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:40px;
}

.theatre1{ background:var(--theatre1); }
.theatre2{ background:var(--theatre2); }
.theatre4{ background:var(--theatre4); }
.theatre5{ background:var(--theatre5); }
.cathlab{
    background:var(--cathlab);
    font-size:13px;
}
.support{ background:var(--support); }
.oncall{ background:var(--oncall); }

.card-body{
    padding:10px;
}

.person{
    font-size:15px;
    font-weight:600;
    margin-bottom:8px;
    /* No explicit colour - inherits from .card-body, which dark
       mode overrides. Keeps this legible without a separate dark rule. */
}

.info{
    margin-top:6px;
    line-height:1.6;
    color:var(--ink-soft);
    text-align:center;
    font-size:13.5px;
}

.from-home{
    display:inline-block;
    margin:10px 0;
    padding:4px 11px;
    background:#E6EEFD;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.03em;
    color:var(--nhs-blue);
}

.oncall-body{
    text-align:center;
    padding:8px;
}

.oncall-person{
    font-size:17px;
    font-weight:700;
    margin-bottom:12px;
    /* No explicit colour - inherits from .card-body, which dark
       mode overrides. Keeps this legible without a separate dark rule. */
}

.oncall-anaesthetist{
    font-size:14.5px;
    font-weight:600;
    margin-top:12px;
    color:var(--ink-soft);
}

.oncall-cicu{
    font-size:13px;
    font-weight:600;
    margin-top:4px;
    color:var(--ink-soft);
}

.oncall-surgeon{
    font-size:13px;
    font-weight:600;
    margin-top:4px;
    color:var(--ink-soft);
}

.oncall-header{
    background:var(--oncall);
    color:#fff;
    text-align:center;
    font-size:14px;
    font-weight:700;
    letter-spacing:.05em;
}

.support-header{
    background:var(--support);
    color:#fff;
    text-align:center;
    font-size:14px;
    font-weight:700;
    letter-spacing:.05em;
}

.theatre-card{
    min-width:0;
    width:100%;
    min-height:70px;
}

.theatre-card .card-body{
    padding:8px;
}

.theatre-card .info{
    font-size:12.5px;
}

.compact-card{
    padding:10px 8px;
    text-align:center;
}

.compact-card .person{
    font-size:13px;
    font-weight:600;
    margin-bottom:2px;
}

.compact-card .info{
    font-size:12px;
    line-height:1.3;
}

.dashboard-row{
    display:flex !important;
    gap:12px;
    width:100%;
    margin-top:12px;
}

.dashboard-panel{
    flex:1;
    min-height:180px;
}

/* On Call: one full-width card below the theatre/Support grid (not
   squeezed into half the row next to Support any more), broken into a
   role-by-role grid so it's clear who's covering what, not just a run
   of names. Reused for the weekend On Call card too, inside its
   existing (narrower, paired-with-Waiting-List) box - the grid just
   collapses to fewer columns there. */
.oncall-wide{
    width:100%;
    margin-top:12px;
}

.oncall-role-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
    gap:14px;
}

.oncall-role{
    text-align:center;
}

.oncall-role-label{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--ink-soft);
    margin-bottom:4px;
}

.oncall-role-value{
    font-size:15px;
    font-weight:700;
}

.oncall-role-extra{
    font-size:12px;
    font-weight:700;
    color:var(--ink-soft);
    margin-top:2px;
}

.dashboard-row .card-header{
    padding:8px;
    font-size:13.5px;
}

.dashboard-row .card-body{
    padding:10px;
}

.dashboard-row .oncall-person{
    font-size:16px;
    margin-bottom:6px;
}

/* Weekend cover: two side-by-side cards (Saturday/Sunday), each with
   its own heading above the shared .dashboard-row card pair. */
.weekend-card .person,
.weekend-card .info{
    text-align:center;
}

.weekend-title{
    text-align:center;
    font-size:16px;
    font-weight:700;
    letter-spacing:.03em;
    color:var(--ink-soft);
    margin:18px 0 4px;
}

/* Full Week View button - width/position/z-index/pointer-events/cursor
   are pinned with !important because this button previously ended up
   behind other elements and stopped being clickable; keep them. */
.full-week-view{
    width:100% !important;
    margin-top:12px;
    background:#fff;
    border:1px solid var(--line);
    padding:12px !important;
    display:block !important;
    position:relative !important;
    z-index:9999 !important;
    pointer-events:auto !important;
    cursor:pointer !important;
    text-decoration:none;
    color:inherit;
    transition:border-color .15s ease, box-shadow .15s ease;
}

.full-week-view:hover{
    border-color:var(--nhs-blue);
    box-shadow:var(--shadow-sm);
}

.full-week-view h3{
    color:var(--nhs-blue);
    font-size:14.5px;
    font-weight:700;
    margin-bottom:2px;
}

.full-week-view p{
    color:var(--ink-soft);
    font-size:12px !important;
}

/* ===========================
   FOOTER
   =========================== */

footer{
    margin-top:40px;
    padding:16px 30px;
    background:#fff;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    font-size:13px;
    color:var(--ink-soft);
}

.live-indicator{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-weight:700;
    color:var(--ink-soft);
}

.live-indicator::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--nhs-dark);
}

#refreshAppBtn{
    width:36px;
    height:36px;
    border:1px solid var(--line);
    border-radius:50%;
    background:#fff;
    color:var(--nhs-blue);
    font-size:16px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform .3s ease, border-color .2s ease;
}

#refreshAppBtn:hover{
    border-color:var(--nhs-blue);
}

#refreshAppBtn:active{
    transform:rotate(180deg) scale(0.95);
}

/* ===========================
   PWA SPLASH SCREEN
   =========================== */

#splash-screen{
    position:fixed;
    inset:0;
    background:var(--nhs-dark);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:99999;
    transition:opacity .5s ease;
}

#splash-screen.hidden{
    opacity:0;
    pointer-events:none;
}

.splash-content{
    text-align:center;
    color:white;
    padding:20px;
}

.splash-logo{
    width:100px;
    height:100px;
    border-radius:16px;
    margin-bottom:22px;
    background:#fff;
}

.splash-content h1{
    margin:0;
    font-size:1.5rem;
    font-weight:700;
}

.splash-content p{
    opacity:.85;
    margin:8px 0;
    font-size:14px;
}

.loader{
    margin:26px auto 15px;
}

.loader span{
    display:inline-block;
    width:9px;
    height:9px;
    margin:0 4px;
    border-radius:50%;
    background:white;
    animation:pulse 1.2s infinite ease-in-out;
}

.loader span:nth-child(2){ animation-delay:.2s; }
.loader span:nth-child(3){ animation-delay:.4s; }

@keyframes pulse{
    0%, 80%, 100%{ transform:scale(.6); opacity:.5; }
    40%{ transform:scale(1); opacity:1; }
}

/* ===========================
   DASHBOARD TRANSITIONS
   =========================== */

#rotaContainer{
    opacity:1;
    transform:translateY(0);
    transition:opacity .20s ease, transform .20s ease;
}

#rotaContainer.fade-out{
    opacity:0;
    transform:translateY(12px);
}

#rotaContainer.fade-in{
    opacity:1;
    transform:translateY(0);
}

#rotaContainer.slide-left{
    opacity:0;
    transform:translateX(-40px);
}

#rotaContainer.slide-right{
    opacity:0;
    transform:translateX(40px);
}

/* ===========================
   SMART UPDATE BANNER
   =========================== */

#updateBanner{
    position:fixed;
    left:16px;
    right:16px;
    bottom:16px;
    z-index:9999;
    display:none;
    animation:slideUp .35s ease;
}

.update-card{
    background:white;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow-lift);
    border:1px solid var(--line);
}

.update-title{
    background:var(--nhs-dark);
    color:white;
    font-size:15px;
    font-weight:700;
    padding:12px 16px;
}

.update-text{
    padding:16px;
    font-size:14px;
    color:var(--ink-soft);
    line-height:1.5;
}

#refreshApp{
    display:block;
    width:calc(100% - 32px);
    margin:0 16px 16px;
    height:44px;
    border:none;
    border-radius:10px;
    background:var(--nhs-blue);
    color:white;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}

@keyframes slideUp{
    from{ transform:translateY(120%); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
}

/* ===========================
   MOBILE
   =========================== */

@media(max-width:900px){
    .week-picker-body{
        gap:8px;
        padding:10px;
    }

    .week-picker-body .nav-arrow{
        width:40px;
        height:40px;
    }

    .cards-grid,
    .theatre-grid{
        gap:8px;
    }

    .theatre-card{
        width:100%;
    }

    main{
        padding:18px;
    }
}

/* ===========================
   PRINT
   =========================== */

@media print{
    .week-picker-card,
    footer{
        display:none;
    }

    body{
        background:#fff;
    }

    .card{
        box-shadow:none;
        border:1px solid #ccc;
        break-inside:avoid;
    }

    main{
        padding:0;
    }

    .from-home{
        display:inline-block;
        background:#1D4ED8;
        color:#fff;
        padding:8px 16px;
        border-radius:999px;
        font-size:13px;
        font-weight:700;
        margin:10px 0;
    }
}