/* ============================================================
   Stonecliffe Platform — App Shell
   Navy left sidebar + light content area, with a Harbour-blue
   accent and green/amber/red status colours.
   ============================================================ */

:root {
    --sc-ink: #141412;
    --sc-sidebar: #f4ede0;
    --sc-sidebar-text: #6b6459;
    --sc-sidebar-active: #ffffff;
    --sc-content-bg: #fbf6ee;
    --sc-card: #fcf8f1;   /* warm off-white card surface (was pure #fff) */
    --sc-hairline: #e6dcc9;
    --sc-muted: #6e6a63;

    /* accent + semantic palette */
    --sc-accent: #d64c5c;
    --sc-accent-2: #e8934a;
    --sc-accent-soft: #f8e9e4;
    --sc-good: #1e8e6a;
    --sc-good-soft: #e3f4ee;
    --sc-warn: #c9821c;
    --sc-warn-soft: #faf0db;
    --sc-risk: #c0392b;
    --sc-risk-soft: #fbeceb;
}

/* Base type scale for the staff portal. Bumped from the 16px browser default so
   the whole rem-based UI (content + sidebar + labels) reads a step larger. This
   file is only linked from the staff _Layout, so partner portals are unaffected. */
html { font-size: 18.5px; }

/* ---------- Shell ---------- */
.sc-app {
    display: flex;
    min-height: 100vh;
}

.sc-sidebar {
    width: 276px;
    flex: 0 0 276px;
    background: var(--sc-sidebar);
    border-right: 1px solid var(--sc-hairline);
    color: var(--sc-sidebar-text);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sc-sidebar::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #e8934a 0%, #e26a90 50%, #d64c5c 100%);
    z-index: 2;
}

.sc-sidebar-brand {
    padding: 22px 20px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.sc-sidebar-brand .sc-sidebar-logo {
    display: block;
    width: 180px;
    max-width: 84%;
    aspect-ratio: 2215 / 339;
    height: auto;
    margin: 0 auto 8px;
    /* Recolour the logo wordmark to the brand coral→orange gradient (masked from the PNG shape). */
    background: linear-gradient(90deg, #e8934a 0%, #d64c5c 58%, #b33f4d 100%);
    -webkit-mask: url(../images/stonecliffe-logo.png?v=4) center / contain no-repeat;
            mask: url(../images/stonecliffe-logo.png?v=4) center / contain no-repeat;
}

/* ---- Print / Save-as-PDF (applies to any staff page) ----
   @page margin:0 suppresses the browser's URL / date / page-number header & footer;
   content padding is restored below, chrome is hidden, and colours print exactly. */
@media print {
    @page { margin: 0; }
    html, body { background: #fcf8f1 !important; }
    .sc-sidebar, .sc-topbar, .sc-hamburger, .sc-fab, #scAssistantBtn, .sc-fab-label { display: none !important; }
    .sc-app, .sc-main, .sc-content {
        display: block !important;
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 12mm 12mm !important;
        background: #fcf8f1 !important;
    }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    img, canvas, svg, table { max-width: 100% !important; }
    tr, thead, .sc-card { break-inside: avoid; }
    .no-print { display: none !important; }
}

.sc-sidebar-brand .sc-subwordmark {
    color: var(--sc-sidebar-text);
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    margin-top: 2px;
}

.sc-nav {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    flex: 1 1 auto;
    min-height: 0;      /* allow the nav to scroll internally instead of expanding and pushing the user/Sign-out row off-screen */
    overflow-y: auto;
}

.sc-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px;
    color: var(--sc-sidebar-text);
    text-decoration: none;
    font-size: 1.02rem;
    border-left: 3px solid transparent;
    transition: background .12s ease, color .12s ease;
}

.sc-nav a:hover {
    color: #141412;
    background: rgba(0, 0, 0, 0.05);
}

.sc-nav a.active {
    color: #fff;
    background: linear-gradient(90deg, #e8934a 0%, #e26a90 50%, #d64c5c 100%);
    border-left-color: transparent;
    font-weight: 600;
}

.sc-nav a.active .sc-ico { opacity: 1; color: #fff; }

.sc-nav .sc-ico {
    width: 20px;
    text-align: center;
    font-size: 1.06em;
    opacity: .85;
    flex: 0 0 20px;
}

.sc-sidebar-user {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 14px 20px;
    font-size: .85rem;
}

.sc-sidebar-user .sc-user-name {
    color: #141412;
    font-weight: 600;
    word-break: break-word;
}

.sc-sidebar-user a {
    color: var(--sc-sidebar-text);
    text-decoration: none;
}

.sc-sidebar-user a:hover { color: #141412; text-decoration: underline; }

/* ---------- Main ---------- */
.sc-main {
    flex: 1 1 auto;
    background: var(--sc-content-bg);
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.sc-topbar {
    /* lighter brand orange→pink with a faint scrim so the white title stays readable */
    background: linear-gradient(rgba(90,40,55,.10), rgba(90,40,55,.10)), linear-gradient(90deg, #e8934a 0%, #e26a90 100%);
    border-bottom: 0;
    border-top: 0;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 10px rgba(214,76,92,.18);
}

.sc-topbar .sc-page-title {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: 1.05rem;
    margin: 0;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(74,18,30,.55);
}

.sc-topbar .sc-user {
    color: rgba(255,255,255,.92);
    font-size: .9rem;
}

.sc-back {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.4);
    color: #fff;
    border-radius: 7px;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 1rem; margin-right: 10px; flex: 0 0 auto;
}
.sc-back:hover { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.65); color: #fff; }

.sc-content {
    padding: 26px 28px;
    flex: 1 1 auto;
}

/* ---------- KPI cards ---------- */
.sc-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.sc-kpi {
    background: var(--sc-card);
    border: 1px solid var(--sc-hairline);
    border-top: 3px solid var(--sc-accent);
    border-radius: 5px;
    padding: 18px 20px;
    box-shadow: 0 1px 2px rgba(20, 30, 50, 0.04);
}

.sc-kpi .sc-kpi-label {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .68rem;
    color: var(--sc-muted);
    margin-bottom: 6px;
}

.sc-kpi .sc-kpi-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--sc-accent);
    line-height: 1.1;
}

.sc-kpi .sc-kpi-sub {
    font-size: .72rem;
    color: var(--sc-muted);
    margin-top: 4px;
}

/* accent variants for specific KPI tiles */
.sc-kpi.kpi-good { border-top-color: var(--sc-good); }
.sc-kpi.kpi-good .sc-kpi-value { color: var(--sc-good); }
.sc-kpi.kpi-warn { border-top-color: var(--sc-warn); }
.sc-kpi.kpi-warn .sc-kpi-value { color: var(--sc-warn); }
.sc-kpi.kpi-risk { border-top-color: var(--sc-risk); }
.sc-kpi.kpi-risk .sc-kpi-value { color: var(--sc-risk); }

/* ---------- Panels ---------- */
.sc-panel {
    background: var(--sc-card);
    border: 1px solid var(--sc-hairline);
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(20, 20, 20, 0.05);
}

.sc-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.sc-panel-head h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0;
    background: linear-gradient(90deg, #e8934a 0%, #d64c5c 60%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--sc-accent);
    padding-left: 10px;
    border-left: 3px solid var(--sc-accent);
}
/* A link inside a gradient heading (e.g. the project name on Budgets) must also show the gradient,
   not the default link colour — keeps every heading consistent. */
.sc-panel-head h2 a {
    background: inherit; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--sc-accent) !important;
    text-decoration: none;
}
/* Linked title inside the branded page-head band stays ink (matches the Class A doc title) */
.sc-pagehead h1 a, .sc-pagehead h2 a, .sc-pagehead .sc-ph-title a {
    color: #141412 !important; -webkit-text-fill-color:#141412; text-decoration: none;
}

.sc-panel-head a { font-size: .78rem; color: var(--sc-accent); text-decoration: none; font-weight: 600; }
.sc-panel-head a:hover { color: var(--sc-accent-2); text-decoration: underline; }

/* ---------- Chart cards ---------- */
.sc-chart-card {
    background: var(--sc-card);
    border: 1px solid var(--sc-hairline);
    border-radius: 5px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(20, 30, 50, 0.04);
    height: 100%;
}
.sc-chart-card h3 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sc-ink);
    margin: 0 0 12px;
}
.sc-chart-wrap { position: relative; height: 260px; }

/* ---------- Stage columns ---------- */
.sc-stage-col {
    background: var(--sc-card);
    border: 1px solid var(--sc-hairline);
    border-radius: 5px;
    overflow: hidden;
    height: 100%;
}

.sc-stage-col .sc-stage-head {
    padding: 12px 14px;
    border-bottom: 1px solid var(--sc-hairline);
    border-top: 3px solid var(--sc-accent);
}

.sc-stage-head .sc-stage-no {
    color: var(--sc-accent);
    font-weight: 700;
    margin-right: 6px;
}

.sc-stage-head .sc-stage-name {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .72rem;
    font-weight: 700;
}

.sc-proj-card {
    padding: 11px 14px;
    border-bottom: 1px solid #f0f0ee;
}

.sc-proj-card:last-child { border-bottom: 0; }
.sc-proj-card .sc-proj-name { font-weight: 600; font-size: .9rem; color: var(--sc-accent); text-decoration: none; }
.sc-proj-card .sc-proj-name:hover { text-decoration: underline; }
.sc-proj-card .sc-proj-addr { color: var(--sc-muted); font-size: .76rem; }

/* status dot badges */
.sc-status { font-size: .72rem; display: inline-flex; align-items: center; gap: 5px; }
.sc-status .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sc-status.on-track .dot { background: var(--sc-good); }
.sc-status.on-track { color: var(--sc-good); }
.sc-status.at-risk .dot { background: var(--sc-risk); }
.sc-status.at-risk { color: var(--sc-risk); font-weight: 600; }

/* shared status pill (works on any page) */
.sc-pill { display: inline-block; font-size: .7rem; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.sc-pill.good { background: var(--sc-good-soft); color: var(--sc-good); }
.sc-pill.warn { background: var(--sc-warn-soft); color: var(--sc-warn); }
.sc-pill.risk { background: var(--sc-risk-soft); color: var(--sc-risk); }
.sc-pill.accent { background: var(--sc-accent-soft); color: var(--sc-accent); }

/* ---------- list rows (deadlines / activity) ---------- */
.sc-list-row {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0ee;
    align-items: flex-start;
}
.sc-list-row:last-child { border-bottom: 0; }

.sc-date-chip {
    flex: 0 0 46px;
    text-align: center;
    border: 1px solid var(--sc-hairline);
    border-radius: 4px;
    padding: 4px 0;
    line-height: 1.1;
    background: var(--sc-accent-soft);
}
.sc-date-chip .m { font-size: .6rem; text-transform: uppercase; color: var(--sc-accent); letter-spacing: .05em; }
.sc-date-chip .d { font-size: 1.05rem; font-weight: 700; color: var(--sc-accent); }

.sc-list-row .sc-row-main { flex: 1 1 auto; min-width: 0; }
.sc-list-row .sc-row-title { font-weight: 600; font-size: .86rem; color: var(--sc-ink); }
.sc-list-row .sc-row-sub { font-size: .76rem; color: var(--sc-muted); }
.sc-list-row .sc-row-meta { font-size: .72rem; color: var(--sc-muted); white-space: nowrap; }
.sc-list-row .sc-row-meta.overdue { color: var(--sc-risk); font-weight: 700; }

/* ---------- bootstrap accents (carry colour to other pages) ---------- */
.sc-content .btn-primary { background-color: var(--sc-accent); border-color: var(--sc-accent); }
.sc-content .btn-primary:hover { background-color: #16487f; border-color: #16487f; }
.sc-content .btn-outline-primary { color: var(--sc-accent); border-color: var(--sc-accent); }
.sc-content .btn-outline-primary:hover { background-color: var(--sc-accent); border-color: var(--sc-accent); }
.sc-content .table > thead th { color: var(--sc-accent); border-bottom: 2px solid var(--sc-accent-soft); }
.sc-content a:not(.btn):not(.badge):not(.nav-link) { color: var(--sc-accent); }
.sc-content .badge.bg-dark { background-color: var(--sc-accent) !important; }

/* ---------- map ---------- */
#sc-map, #sc-map-full { width: 100%; border-radius: 4px; border: 1px solid var(--sc-hairline); }
#sc-map { height: 260px; }
#sc-map-full { height: 70vh; }
.leaflet-container { font-family: Arial, sans-serif; }

/* ============================================================
   MOBILE / PHONE  (updated 2026-06-25)
   Replaces the old "wrap all nav links at the top" rule with a
   real hamburger + slide-in drawer so the menu no longer takes
   over the screen. Desktop (>900px) is completely unchanged.
   ============================================================ */

/* Hamburger button + backdrop are hidden until we hit phone width */
.sc-hamburger { display: none; }
.sc-backdrop  { display: none; }

@media (max-width: 900px) {

    /* --- Sidebar becomes an off-canvas drawer --- */
    .sc-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;                 /* fallback for browsers without dvh */
        height: 100dvh;                /* dynamic viewport: excludes mobile browser chrome so the bottom (Sign out) stays visible */
        width: 84%;
        max-width: 320px;
        flex-basis: auto;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 2px 0 18px rgba(0, 0, 0, .35);
        padding-bottom: env(safe-area-inset-bottom);   /* clear the home indicator so Sign out isn't tucked under it */
    }
    body.sc-nav-open .sc-sidebar { transform: translateX(0); }

    /* --- Dark backdrop behind the open drawer --- */
    .sc-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1040;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }
    body.sc-nav-open .sc-backdrop { opacity: 1; visibility: visible; }
    body.sc-nav-open { overflow: hidden; }   /* lock background scroll when menu open */

    /* --- Main column takes the full width (sidebar is out of flow) --- */
    .sc-main { width: 100%; }

    /* --- Sticky top bar carries the hamburger --- */
    .sc-topbar {
        position: sticky;
        top: 0;
        z-index: 1030;
        padding: 12px 14px;
        gap: 12px;
        justify-content: flex-start;
    }
    .sc-topbar .sc-page-title { font-size: .95rem; }
    .sc-topbar .sc-user { display: none; }   /* name already shown in the drawer */

    .sc-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        flex: 0 0 42px;
        border: 1px solid var(--sc-hairline);
        border-radius: 6px;
        background: #fcf8f1;
        color: var(--sc-accent);
        font-size: 1.45rem;
        line-height: 1;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .sc-hamburger:active { background: var(--sc-accent-soft); }

    /* --- Bigger tap targets in the drawer --- */
    .sc-nav a { padding: 14px 22px; font-size: 1rem; }

    /* --- Roomier-but-tighter content padding --- */
    .sc-content { padding: 16px 14px; }

    /* --- Wide tables scroll sideways instead of breaking the page --- */
    .sc-content table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- KPI tiles pack neatly on a narrow screen --- */
    .sc-kpi-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
    .sc-kpi { padding: 14px 16px; }
    .sc-kpi .sc-kpi-value { font-size: 1.4rem; }

    /* --- Charts/maps not too tall on a phone --- */
    .sc-chart-wrap { height: 220px; }
    #sc-map { height: 220px; }
}

/* ============================================================
   SHARED COMPONENTS — one component layer for every staff page.
   Built on the --sc-* tokens above. Prefer these classes over
   per-page <style> blocks and raw Bootstrap so pages stay consistent.
   ============================================================ */

/* Page header — branded "Class A" band: gradient Stonecliffe wordmark + title + right-aligned actions.
   Shared by every staff page, so all sidebar pages read as the same branded document. */
.sc-pagehead { display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap; margin:0 0 20px;
    background:#faf5ec; border:1px solid #e7e0d5; border-bottom:2px solid #d64c5c; border-radius:10px;
    padding:18px 26px; box-shadow:0 1px 3px rgba(20,20,20,.05); }
.sc-pagehead::before { content:""; width:172px; max-width:44vw; aspect-ratio:2215 / 339; flex:none; align-self:center;
    background:linear-gradient(90deg,#e8934a 0%,#e26a90 50%,#d64c5c 100%);
    -webkit-mask:url(/images/stonecliffe-logo.png?v=5) left center / contain no-repeat;
    mask:url(/images/stonecliffe-logo.png?v=5) left center / contain no-repeat; }
.sc-pagehead .sc-ph-titles { min-width:0; }
.sc-pagehead h1, .sc-pagehead h2, .sc-pagehead .sc-ph-title { margin:0; font-size:1.3rem; font-weight:800;
    color:#141412; -webkit-text-fill-color:#141412; background:none; line-height:1.15; }
.sc-pagehead .sc-ph-sub { color:var(--sc-muted); font-size:.86rem; margin-top:3px; max-width:840px; }
.sc-pagehead .sc-ph-actions { margin-left:auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* Buttons — ONE system. Primary (accent), secondary (outline), success, danger, small. */
.sc-btn { display:inline-flex; align-items:center; gap:6px; background:linear-gradient(90deg,#e8934a 0%,#e26a90 50%,#d64c5c 100%); color:#fff !important; border:1px solid transparent; border-radius:6px; padding:9px 16px; font-size:.88rem; font-weight:600; line-height:1.1; cursor:pointer; text-decoration:none; box-shadow:0 2px 8px rgba(214,76,92,.22); transition:filter .12s ease, box-shadow .12s ease; }
.sc-btn:hover { filter:brightness(.96); box-shadow:0 3px 12px rgba(214,76,92,.3); }
.sc-btn--secondary { background:#fcf8f1; color:var(--sc-ink) !important; border-color:#e0d6c6; }
.sc-btn--secondary:hover { background:#f7f1e8; border-color:#d8cbb5; }
.sc-btn--success { background:var(--sc-good); border-color:var(--sc-good); color:#fff !important; }
.sc-btn--success:hover { background:#186f52; border-color:#186f52; }
.sc-btn--danger { background:#fcf8f1; color:var(--sc-risk) !important; border-color:#e3b6b2; }
.sc-btn--danger:hover { background:var(--sc-risk-soft); }
.sc-btn--sm { padding:5px 11px; font-size:.78rem; border-radius:5px; }
.sc-btn:disabled, .sc-btn[disabled] { opacity:.5; cursor:not-allowed; }

/* Status chips — ONE semantic set. */
.sc-chip { display:inline-block; font-size:.64rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 9px; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.sc-chip--muted { background:#f1f3f6; color:var(--sc-muted); border-color:var(--sc-hairline); }
.sc-chip--info { background:var(--sc-accent-soft); color:var(--sc-accent); border-color:#cfe0f2; }
.sc-chip--good { background:var(--sc-good-soft); color:var(--sc-good); border-color:#b9dcc6; }
.sc-chip--warn { background:var(--sc-warn-soft); color:var(--sc-warn); border-color:#e7d18c; }
.sc-chip--danger { background:var(--sc-risk-soft); color:var(--sc-risk); border-color:#e3b6b2; }
.sc-chip--draft { background:#f3f0fa; color:#5b4b8a; border-color:#ddd3f0; }

/* Card surface */
.sc-card { background:var(--sc-card); border:1px solid var(--sc-hairline); border-radius:10px; }
.sc-card--pad { padding:16px 20px; }

/* Tables — micro-header, hairlines, hover, numeric alignment. Wrap in .sc-scroll for responsiveness. */
.sc-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sc-table { width:100%; border-collapse:collapse; font-size:.88rem; color:var(--sc-ink); }
.sc-table th { text-align:left; font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:var(--sc-muted); font-weight:600; padding:9px 14px; border-bottom:1px solid var(--sc-hairline); white-space:nowrap; }
.sc-table td { padding:11px 14px; border-bottom:1px solid var(--sc-hairline); vertical-align:middle; overflow-wrap:anywhere; }
.sc-table tbody tr:hover td { background:#faf5ec; }
.sc-table tbody tr:last-child td { border-bottom:none; }
.sc-table .num, .sc-table th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Class A branded table header — gradient sunset row with white labels (matches the budget doc) */
.sc-table thead tr { background:linear-gradient(90deg,#e8934a 0%,#e26a90 50%,#d64c5c 100%); }
.sc-table thead th { color:#fff; border-bottom:none; background:transparent; }
.sc-table tbody tr:hover td { background:#faf5ec; }

/* ===== Class A consistency — EVERY data table in the staff content area ===== */
/* One sunset gradient header + white labels + right-aligned tabular numerics, so all
   pages read as the same branded budget document (covers bespoke *-tbl and raw tables,
   not just .sc-table). Partner portals have their own equivalent and aren't under .sc-content. */
.sc-content table thead tr { background:linear-gradient(90deg,#e8934a 0%,#e26a90 50%,#d64c5c 100%); }
.sc-content table thead th { color:#fff !important; background:transparent !important; border-bottom:none !important; }
.sc-content table td.num, .sc-content table th.num,
.sc-content table td.n, .sc-content table th.n,
.sc-content table td.text-end, .sc-content table th.text-end,
.sc-content table td.text-right, .sc-content table th.text-right {
    text-align:right; font-variant-numeric:tabular-nums;
}

/* Form fields */
.sc-fieldgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.sc-field { display:flex; flex-direction:column; gap:3px; }
.sc-field > label { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--sc-muted); }
.sc-input, .sc-field input, .sc-field select, .sc-field textarea { border:1px solid var(--sc-hairline); border-radius:6px; padding:8px 10px; font-size:.9rem; font-family:inherit; background:#fcf8f1; color:var(--sc-ink); }
.sc-input:focus, .sc-field input:focus, .sc-field select:focus, .sc-field textarea:focus { outline:none; border-color:var(--sc-accent); box-shadow:0 0 0 2px var(--sc-accent-soft); }

/* Message banners */
.sc-banner { padding:10px 14px; border-radius:8px; font-size:.88rem; margin-bottom:14px; border:1px solid transparent; }
.sc-banner--good { background:var(--sc-good-soft); color:var(--sc-good); border-color:#b9dcc6; }
.sc-banner--info { background:var(--sc-accent-soft); color:var(--sc-accent); border-color:#cfe0f2; }
.sc-banner--warn { background:var(--sc-warn-soft); color:var(--sc-warn); border-color:#e7d18c; }
.sc-banner--danger { background:var(--sc-risk-soft); color:var(--sc-risk); border-color:#e3b6b2; }

/* Empty state */
.sc-empty { background:var(--sc-card); border:1px dashed var(--sc-hairline); border-radius:10px; padding:30px; text-align:center; color:var(--sc-muted); font-size:.9rem; }

/* Stat tiles */
.sc-tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:0 0 20px; }
.sc-tile { border:1px solid var(--sc-hairline); border-top:3px solid transparent; border-radius:8px; padding:13px 16px; background:linear-gradient(var(--sc-card),var(--sc-card)) padding-box, linear-gradient(90deg,#e8934a 0%,#e26a90 50%,#d64c5c 100%) border-box; }
.sc-tile .sc-tile-l { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--sc-muted); }
.sc-tile .sc-tile-v { font-size:1.45rem; font-weight:700; color:var(--sc-ink); font-variant-numeric:tabular-nums; }

/* ---- Global color normalization: snap Bootstrap controls in the staff area onto the brand palette
   so every unconverted page's buttons/links are the correct colour (no markup change, colour only). */
.sc-content .btn-primary { background:var(--sc-accent); border-color:var(--sc-accent); color:#fff; }
.sc-content .btn-primary:hover { background:#b33f4d; border-color:#b33f4d; }
.sc-content .btn-outline-primary { color:var(--sc-accent); border-color:var(--sc-accent); }
.sc-content .btn-outline-primary:hover { background:var(--sc-accent); color:#fff; }
.sc-content .btn-success { background:var(--sc-good); border-color:var(--sc-good); color:#fff; }
.sc-content .btn-danger { background:var(--sc-risk); border-color:var(--sc-risk); color:#fff; }
/* Button visibility guarantee — every button variant must read clearly on the cream/white content.
   Bootstrap's greys/links get brand-legible colours; a bare <button> falls back to the coral pill. */
.sc-content .btn-secondary { background:#fcf8f1; color:var(--sc-ink); border-color:#e0d6c6; }
.sc-content .btn-secondary:hover { background:#f7f1e8; border-color:#d8cbb5; color:var(--sc-ink); }
.sc-content .btn-outline-secondary { color:#5a5349; border-color:#cfc7b8; background:#fcf8f1; }
.sc-content .btn-outline-secondary:hover { background:#f2ece1; color:var(--sc-ink); border-color:#bcb2a0; }
.sc-content .btn-light { background:#fcf8f1; color:var(--sc-ink); border:1px solid #e0d6c6; }
.sc-content .btn-link { color:var(--sc-accent); text-decoration:none; }
.sc-content .btn-link:hover { color:#b33f4d; text-decoration:underline; }
.sc-content a:not(.sc-btn):not(.btn) { color:var(--sc-accent); }
.sc-content .form-control:focus, .sc-content .form-select:focus { border-color:var(--sc-accent); box-shadow:0 0 0 2px var(--sc-accent-soft); }

/* ============================================================
   GRADIENT HEADERS — one coral→orange gradient on EVERY header across
   the portal. Covers: all page-title <h1>s; every top-level (direct-child)
   <h2>/<h3> page/section title; and the custom light-background heading
   classes. Headings that sit on a dark or coral CARD band are nested (not
   direct children) and keep their own solid white text — intentionally NOT
   selected here, so contrast is preserved. One stop (60%) everywhere.
   ============================================================ */
.sc-content h1,
.sc-content > h2, .sc-content > h3,
.crm-card > h2, .cc-card > h2,
.inv-title, .ca-title,
.co-hero .name, .baa h3,
.ir-title h1, .est-brand .est-b-title, .sc-chat-head h2 {
    background: linear-gradient(90deg, #e8934a 0%, #d64c5c 60%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--sc-accent);
}

/* Card-band headings (Daily Log, Units & Sales, Photos, RFIs, Approvals, Client Stages, Vendors,
   Consultants, Project Team, Cash Flow, Financials, Permit Checklists, Team, Monthly Overview) used a
   solid dark/coral band with white text. Per the brand direction render them as the gradient too —
   no black band. !important because each page's own <style> sets the band after app.css. */
.ap-card h2, .cs-card h2, .vd-card h2, .dl-card h2, .ph-card h2, .pt-card h2, .un-card h2,
.rf-card h2, .cf-card > h2, .fn-card > h2, .pm-card h2, .tm-card > h2, .mo-card h3, .cs-card.active h2, .vd-card.edit h2 {
    background:linear-gradient(90deg,#e8934a 0%,#e26a90 50%,#d64c5c 100%) !important;
    -webkit-background-clip:text !important; background-clip:text !important;
    -webkit-text-fill-color:transparent !important; color:var(--sc-accent) !important;
    border-color:transparent !important;
}

/* Keep dense numeric columns on one line (Bootstrap text-end cells inside our tables) */
.sc-table td.text-end, .sc-table th.text-end { white-space:nowrap; }

/* Invoices table: don't shatter text one character per line. Wrap at spaces only, and
   give the Vendor column room so long names read on two lines instead of vertically. */
.sc-table.sc-inv td, .sc-table.sc-inv th { overflow-wrap:normal; word-break:normal; }
.sc-table.sc-inv td:nth-child(2), .sc-table.sc-inv th:nth-child(2) { min-width:190px; white-space:normal; }
.sc-table.sc-inv td:nth-child(3), .sc-table.sc-inv th:nth-child(3),
.sc-table.sc-inv td:nth-child(4), .sc-table.sc-inv th:nth-child(4) { white-space:nowrap; }

/* Project Invoices table: same treatment — full Vendor name wraps at spaces on two lines. */
.sc-table.inv-table td, .sc-table.inv-table th { overflow-wrap:normal; word-break:normal; }
.sc-table.inv-table td:nth-child(2), .sc-table.inv-table th:nth-child(2) { min-width:190px; white-space:normal; }

/* ============================================================
   MOBILE / TOUCH (≤640px) — phone polish on top of the existing
   drawer nav. Additive: desktop is untouched.
   ============================================================ */
@media (max-width: 640px) {

    /* --- Kill iOS zoom-on-focus: any control under 16px makes Safari zoom in.
       Covers our .sc-* fields and any remaining Bootstrap controls. --- */
    .sc-input,
    .sc-field input, .sc-field select, .sc-field textarea,
    .sc-content .form-control, .sc-content .form-select,
    .sc-content input[type="text"], .sc-content input[type="number"],
    .sc-content input[type="email"], .sc-content input[type="date"],
    .sc-content input[type="search"], .sc-content input[type="tel"],
    .sc-content textarea, .sc-content select {
        font-size: 16px;
    }

    /* --- Finger-sized tap targets (min ~44px). --- */
    .sc-btn { padding: 12px 18px; }
    .sc-btn--sm { padding: 9px 14px; font-size: .82rem; }
    .sc-content .btn { min-height: 42px; display: inline-flex; align-items: center; }
    .sc-content .btn-sm { min-height: 38px; }

    /* --- Data tables collapse into stacked cards. A small script in _Layout copies
       each column header onto its cells as data-label and adds .sc-cards to tables it
       can safely transform, so the labels show here with ZERO per-page markup. --- */
    table.sc-table.sc-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.sc-table.sc-cards,
    table.sc-table.sc-cards tbody,
    table.sc-table.sc-cards tr,
    table.sc-table.sc-cards td { display: block; width: 100%; }
    table.sc-table.sc-cards tr {
        border: 1px solid var(--sc-hairline); border-radius: 10px;
        margin-bottom: 12px; background: var(--sc-card); overflow: hidden;
    }
    table.sc-table.sc-cards tbody tr:last-child { margin-bottom: 0; }
    table.sc-table.sc-cards tbody tr:hover td { background: transparent; }
    table.sc-table.sc-cards td {
        display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
        text-align: right; padding: 7px 14px; border: 0; font-size: .9rem; line-height: 1.35;
        border-bottom: 1px solid #f1ede4; white-space: normal;
    }
    table.sc-table.sc-cards tr td:last-child { border-bottom: 0; }
    /* Column label pulled from the header (only on cells the script matched). */
    table.sc-table.sc-cards td[data-label]::before {
        content: attr(data-label); text-align: left; flex: 0 0 40%;
        color: var(--sc-muted); font-size: .72rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .03em; align-self: center;
    }
    table.sc-table.sc-cards td[data-label] { font-weight: 600; font-variant-numeric: tabular-nums; }
    /* Option A: the first cell is the card's headline — full width, bold, no label. */
    table.sc-table.sc-cards td:first-child {
        display: block; text-align: left; font-size: 1rem; font-weight: 700; color: var(--sc-ink);
        padding: 11px 14px 9px; background: #fff; border-bottom: 1px solid var(--sc-hairline);
    }
    table.sc-table.sc-cards td:first-child::before { display: none; }
    /* Cells with no label (totals / edit / colspan rows) stay full-width. */
    table.sc-table.sc-cards td:not([data-label]) { justify-content: flex-start; text-align: left; }
    /* Right-aligned numeric cells can wrap now that space is tight. */
    table.sc-table.sc-cards td.text-end, table.sc-table.sc-cards td.num { white-space: normal; }

    /* --- Install banner (Add to Home Screen) --- */
    .sc-install {
        position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1060;
        background: #141412; color: #fff; border-radius: 12px; padding: 12px 14px;
        box-shadow: 0 8px 24px rgba(0,0,0,.32); display: none;
        align-items: center; gap: 12px; font-size: .86rem;
    }
    .sc-install.show { display: flex; }
    .sc-install .sc-install-txt { flex: 1 1 auto; line-height: 1.35; }
    .sc-install .sc-install-txt strong { display: block; font-size: .92rem; }
    .sc-install button {
        border: 0; border-radius: 7px; padding: 9px 14px; font-size: .84rem; font-weight: 600;
        cursor: pointer; white-space: nowrap;
    }
    .sc-install .sc-install-go { background: var(--sc-accent-2); color: #08243f; }
    .sc-install .sc-install-x { background: transparent; color: #cbc4b8; padding: 9px 6px; }
}

/* ============================================================
   MOBILE BATCH 2 — bottom tab bar, safe-area (notch) insets,
   and on-site camera capture. Desktop untouched.
   ============================================================ */

/* Bottom tab bar + camera button are hidden until phone width. */
.sc-btabs { display: none; }
.ph-camera { display: none; }

@media (max-width: 640px) {

    /* --- Thumb-reach bottom tab bar (staff portal). --- */
    .sc-btabs {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
        background: var(--sc-sidebar); border-top: 1px solid rgba(255, 255, 255, .09);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, .18);
        padding-bottom: env(safe-area-inset-bottom);   /* clear the home indicator */
        overflow-x: auto; scrollbar-width: none;        /* many tabs -> swipe left/right */
    }
    .sc-btabs::-webkit-scrollbar { display: none; }
    .sc-btabs a {
        /* grow to fill the width when there are few tabs; hold a comfortable size and let
           the bar scroll when there are many. */
        flex: 1 0 auto; min-width: 62px;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 8px 4px 6px; color: var(--sc-sidebar-text); text-decoration: none;
        font-size: .6rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 600;
        -webkit-tap-highlight-color: transparent;
    }
    .sc-btabs a i { font-size: 1.3rem; line-height: 1; }
    /* Active tab: coral text + icon on the cream bar (was white — invisible on cream),
       with a small coral indicator line at the top of the tab. */
    .sc-btabs a.active { color: var(--sc-accent); font-weight: 700; box-shadow: inset 0 2px 0 var(--sc-accent); }
    .sc-btabs a.active i { color: var(--sc-accent); }
    body.sc-nav-open .sc-btabs { display: none; }      /* drawer takes over */

    /* Keep page content clear of the fixed bar. */
    .sc-content { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

    /* Top notch/status bar: let the sticky topbar + drawer clear it in standalone. */
    .sc-topbar { padding-top: calc(12px + env(safe-area-inset-top)); }
    .sc-sidebar { padding-top: env(safe-area-inset-top); }

    /* Lift floating UI above the bottom bar. */
    .sc-fab { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
    .sc-install { bottom: calc(78px + env(safe-area-inset-bottom)); }

    /* --- On-site "Take photo" button (jumps straight to the camera). --- */
    .ph-camera {
        display: inline-flex; align-items: center; gap: 8px;
        background: var(--sc-accent); color: #fff; border: 1px solid var(--sc-accent);
        border-radius: 8px; padding: 12px 16px; font-weight: 600; font-size: .92rem;
        cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .ph-camera i { font-size: 1.15rem; line-height: 1; }
}

/* --- Sticky table headers on desktop: keep column names visible while a long table
   scrolls. (Only applies to tables in normal page flow; tables wrapped in .sc-scroll
   keep their own behaviour. Mobile shows cards, so this is desktop-scoped.) --- */
@media (min-width: 641px) {
    /* Keep the branded gradient header continuous while it sticks (row-level, not per-cell). */
    .sc-table thead tr {
        position: sticky; top: 0; z-index: 2;
    }
}

/* --- Invoices: compact mobile card. Builds on the generic card transform but promotes
   Vendor to the card title, keeps Net + Status prominent, tucks Date/Category/Cost code
   in small underneath, and hides the Claimed/Certified/Holdback breakdown (Net sums it;
   full detail remains on desktop). Targets columns via the labels the labeller sets. --- */
@media (max-width: 640px) {
    .inv-table.sc-cards td { padding-top: 7px; padding-bottom: 7px; }

    /* Vendor = card title */
    .inv-table.sc-cards td[data-label="Vendor"] {
        display: block; text-align: left; font-size: 1rem; font-weight: 700;
        color: var(--sc-ink); padding: 12px 14px 2px; border-bottom: 0;
    }
    .inv-table.sc-cards td[data-label="Vendor"]::before { display: none; }

    /* Invoice number under the vendor */
    .inv-table.sc-cards td[data-label="Inv #"] {
        display: block; text-align: left; color: var(--sc-muted); font-size: .74rem; font-weight: 600;
        padding: 0 14px 9px; border-bottom: 1px solid var(--sc-hairline);
    }
    .inv-table.sc-cards td[data-label="Inv #"]::before { content: "Invoice "; }

    /* Net stays prominent */
    .inv-table.sc-cards td[data-label="Net"] { font-size: 1.02rem; font-weight: 700; color: var(--sc-ink); }

    /* Secondary detail — small + muted */
    .inv-table.sc-cards td[data-label="Date"],
    .inv-table.sc-cards td[data-label="Category"],
    .inv-table.sc-cards td[data-label="Cost code"] { font-size: .78rem; color: var(--sc-muted); }

    /* Money breakdown hidden on mobile (Net summarizes it; visible on desktop) */
    .inv-table.sc-cards td[data-label="Claimed"],
    .inv-table.sc-cards td[data-label="Certified"],
    .inv-table.sc-cards td[data-label="Holdback"] { display: none; }
}

/* ── Website-style gradient headlines (orange → coral) — matches the stonecliffedevelopments.ca hero ── */
.sc-grad,
.sc-hero h1,
.sc-topbar .sc-page-title {
    background: linear-gradient(90deg, #e8934a 0%, #d64c5c 60%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #d64c5c; /* fallback where background-clip:text is unsupported */
}

/* ---------- Mobile: data tables become clean line-item cards ---------- */
@media (max-width: 640px) {
    .sc-content table:not(.sc-nostack) thead { display: none; }
    .sc-content table:not(.sc-nostack) { border: 0; background: transparent; }
    .sc-content table:not(.sc-nostack) tbody tr {
        display: block; background: var(--sc-card); border: 1px solid var(--sc-hairline);
        border-radius: 10px; margin: 0 0 9px; padding: 8px 13px; box-shadow: 0 1px 2px rgba(20,20,20,.04);
    }
    .sc-content table:not(.sc-nostack) tbody td {
        display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
        padding: 4px 0; border: 0 !important; text-align: right; white-space: normal;
    }
    .sc-content table:not(.sc-nostack) tbody td::before {
        content: attr(data-label); font-weight: 700; color: var(--sc-muted);
        text-transform: uppercase; font-size: .6rem; letter-spacing: .05em; text-align: left; flex: 0 0 auto;
    }
    .sc-content table:not(.sc-nostack) tbody td:first-child { font-weight: 800; font-size: .95rem; color: var(--sc-ink); padding-top: 2px; }
    .sc-content table:not(.sc-nostack) tbody td:first-child::before { display: none; }
    .sc-content table:not(.sc-nostack) tbody td:not([data-label]):empty { display: none; }
    /* editable / complex tables just scroll cleanly */
    .sc-content table.sc-nostack { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
    /* Phones: hide every big KPI / stat band (each page names its own *-kpis / *-stats),
       leaving just the line items. The metrics document (.pmx-kpi) is singular and stays. */
    [class*="-kpis"], [class*="-kpi-row"], [class*="-stats"],
    .sc-kpi-row, .se-k, .dash-kpi-grid { display: none !important; }
}

/* ============================================================
   Design System v2 — typography, tabular figures, KPI
   hierarchy, semantic status colour. Appended last so it wins
   the cascade. Self-hosted fonts (no CDN) — same on every OS.
   ============================================================ */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(/fonts/inter-400.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(/fonts/inter-500.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/inter-600.woff2) format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url(/fonts/inter-700.woff2) format('woff2'); }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:600; font-display:swap; src:url(/fonts/newsreader-600.woff2) format('woff2'); }

body, .sc-content, .sc-sidebar, .sc-topbar { font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; }

/* Page titles pick up the Newsreader serif for an editorial, report-like feel. */
.sc-pagehead h1, .sc-pagehead h2, .sc-pagehead .sc-ph-title {
    font-family:'Newsreader',Georgia,'Times New Roman',serif; font-weight:600; letter-spacing:-.01em;
}

/* Tabular figures everywhere numbers line up: tables, KPI values, money spans. */
.sc-content table td, .sc-content table th,
.sc-kpi-value, [class*="-kpi"] .v, [class*="-kpi"] .k-v, .se-k .v,
.num, .money, .tabnum, td.text-end, td.num {
    font-variant-numeric: tabular-nums;
}

/* KPI hierarchy — bigger, tighter, tabular value; quieter uppercase label. */
.sc-kpi-value, [class*="-kpi"] .v, [class*="-kpi"] .k-v {
    letter-spacing:-.02em; line-height:1.05;
}
.sc-kpi-label, [class*="-kpi"] .l, [class*="-kpi"] .k-l {
    font-weight:700; letter-spacing:.07em;
}

/* Semantic status — keep Bootstrap "danger" on the browner risk-red (--sc-risk #c0392b),
   NOT the brand pink-red (--sc-accent #d64c5c), so brand and problem never blur. */
.sc-content .text-danger { color: var(--sc-risk) !important; }
.sc-content .badge.bg-danger, .sc-content .bg-danger { background-color: var(--sc-risk) !important; }
.sc-content .btn-danger { background-color: var(--sc-risk) !important; border-color: var(--sc-risk) !important; }
.sc-content .badge.bg-success, .sc-content .bg-success { background-color: var(--sc-good) !important; }
.sc-content .badge.bg-warning, .sc-content .bg-warning { background-color: var(--sc-warn) !important; color:#fff !important; }

/* ============================================================
   Design System v2 — close-out: accessibility, print, states.
   ============================================================ */

/* --- Accessibility: a single visible keyboard-focus ring everywhere.
   Uses :focus-visible so it only shows for keyboard users, not mouse clicks. --- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .sc-nav a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--sc-accent) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
/* Skip-to-content link (paired with #sc-main; harmless if the anchor is absent). */
.sc-skip { position:absolute; left:-9999px; top:0; z-index:2000; background:var(--sc-ink); color:#fff;
    padding:10px 16px; border-radius:0 0 8px 0; font-weight:700; }
.sc-skip:focus { left:0; }

/* Respect the OS "reduce motion" preference across the whole app. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* --- Loading skeleton utility: add class="sc-skel" to a block while data loads. --- */
@keyframes scShimmer { 0% { background-position:-420px 0; } 100% { background-position:420px 0; } }
.sc-skel { background:linear-gradient(90deg,#efe7d9 25%,#f7f1e7 37%,#efe7d9 63%); background-size:840px 100%;
    animation:scShimmer 1.35s infinite linear; border-radius:6px; color:transparent !important; user-select:none; }
.sc-skel * { visibility:hidden; }
@media (prefers-reduced-motion: reduce) { .sc-skel { animation:none; } }

/* --- Empty-state polish (shared .sc-empty). --- */
.sc-empty { padding:34px 26px; }
.sc-empty .sc-empty-ico { font-size:26px; color:var(--sc-accent); opacity:.55; margin-bottom:8px; display:block; }
.sc-empty .sc-empty-title { font-weight:700; color:var(--sc-ink); margin-bottom:4px; }

/* --- Print: strip chrome, expand content, ink-on-paper. Add class="no-print"
   to anything that should never print; "print-only" to show only when printing. --- */
.print-only { display:none; }
@media print {
    .sc-sidebar, .sc-topbar, .sc-mobile-bar, .sc-mobile-drawer, .sc-mobile-toggle,
    .sc-ph-actions, .no-print, .sc-skip, button, .sc-btn, .sc-tab, nav { display:none !important; }
    .print-only { display:block !important; }
    .sc-app { display:block !important; min-height:0 !important; }
    .sc-content { margin:0 !important; padding:0 !important; width:100% !important; }
    html, body { background:#fff !important; }
    body, .sc-content, .sc-content * { color:#000 !important; }
    a { color:#000 !important; text-decoration:none !important; }
    .sc-card, .ca-doc, .iv-panel, table { box-shadow:none !important; }
    .sc-card, table { border-color:#bbb !important; }
    table { page-break-inside:auto; } tr { page-break-inside:avoid; }
    thead { display:table-header-group; } /* repeat headers on each printed page */
    @page { margin:14mm; }
}

/* ============================================================
   Command palette (⌘K) — staff portal.
   ============================================================ */
.sc-cmdk { position:fixed; inset:0; z-index:3000; background:rgba(30,20,16,.34); backdrop-filter:blur(2px);
    display:flex; align-items:flex-start; justify-content:center; padding:12vh 16px 16px; }
.sc-cmdk[hidden] { display:none; }
.sc-cmdk-box { width:min(560px,100%); background:#fff; border:1px solid var(--sc-hairline); border-radius:16px;
    box-shadow:0 24px 70px rgba(20,14,8,.4); overflow:hidden; }
.sc-cmdk-q { display:flex; align-items:center; gap:11px; padding:14px 18px; border-bottom:1px solid var(--sc-hairline); }
.sc-cmdk-q .bi { color:#a99f8e; font-size:16px; }
.sc-cmdk-q input { border:0; outline:0; width:100%; font:inherit; font-size:16px; background:transparent; color:var(--sc-ink); }
.sc-cmdk-list { max-height:min(52vh,420px); overflow:auto; padding:8px; }
.sc-cmdk-sec { font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:#a99f8e; font-weight:700; padding:9px 12px 4px; }
.sc-cmdk-it { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:9px; cursor:pointer; font-size:14px; }
.sc-cmdk-it .sc-cmdk-ico { width:26px; height:26px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; color:#fff; background:linear-gradient(90deg,#e8934a 0%,#e26a90 50%,#d64c5c 100%); }
.sc-cmdk-it .sc-cmdk-ico.pg { background:#efe6d6; color:#8a7a5f; }
.sc-cmdk-it .sc-cmdk-nm { color:var(--sc-ink); }
.sc-cmdk-it .sc-cmdk-sub { margin-left:auto; color:var(--sc-muted); font-size:12px; white-space:nowrap; }
.sc-cmdk-it.act, .sc-cmdk-it:hover { background:#fdeef0; }
.sc-cmdk-none { padding:22px 12px; text-align:center; color:var(--sc-muted); font-size:14px; }
/* topbar hint button */
.sc-cmdk-btn { display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--sc-hairline);
    color:var(--sc-muted); border-radius:8px; padding:6px 10px; font-size:12px; cursor:pointer; }
.sc-cmdk-btn kbd { font-family:ui-monospace,Menlo,monospace; background:#f1e8d8; border:1px solid var(--sc-hairline);
    border-radius:4px; padding:0 5px; font-size:11px; color:#5a5142; }
.sc-cmdk-btn:hover { border-color:#e0b7a3; color:var(--sc-ink); }
@media (max-width:640px) { .sc-cmdk { padding-top:8vh; } .sc-cmdk-btn { display:none; } }

/* ============================================================
   Mobile project snapshot (KPI chips + key facts) — phone-only.
   ============================================================ */
.sc-msnap { display: none; }
@media (max-width: 640px) {
    .sc-msnap { display: block; margin: 0 0 14px; }
    .sc-msnap-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 8px; -webkit-overflow-scrolling: touch; }
    .sc-msnap-chips::-webkit-scrollbar { display: none; }
    .sc-msnap-chip { flex: 0 0 auto; min-width: 92px; border: 1px solid var(--sc-hairline); border-top: 2px solid transparent; border-radius: 10px; padding: 8px 12px;
        background: linear-gradient(var(--sc-card), var(--sc-card)) padding-box, linear-gradient(90deg,#e8934a,#e26a90 50%,#d64c5c) border-box; }
    .sc-msnap-chip .l { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--sc-muted); font-weight: 700; }
    .sc-msnap-chip .v { display: block; font-size: 16px; font-weight: 700; color: var(--sc-accent-dark, #b33f4d); font-variant-numeric: tabular-nums; margin-top: 3px; }
    .sc-msnap-facts { background: var(--sc-card); border: 1px solid var(--sc-hairline); border-radius: 11px; padding: 4px 13px; }
    .sc-msnap-facts .f { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid #f2ede3; }
    .sc-msnap-facts .f:last-child { border-bottom: 0; }
    .sc-msnap-facts .k { color: var(--sc-muted); }
    .sc-msnap-facts .val { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
}

/* Content fade-in on page load — pairs with the nav progress bar for smooth staff
   navigation (matches the partner-portal fade). Scoped to the main content only,
   so the sidebar/topbar don't move. Respects reduced-motion. */
main.sc-content { animation: scContentFade .44s ease both; transform-origin: top center; }
@keyframes scContentFade { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main.sc-content { animation: none; } }

/* Hover-lift pop: KPI cards and hub tiles rise slightly with a soft brand shadow. */
.sc-kpi { transition: transform .14s ease, box-shadow .14s ease; }
.sc-kpi:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(214, 76, 92, .12); }
@media (prefers-reduced-motion: reduce) { .sc-kpi:hover { transform: none; } }

/* ============================================================
   Mobile app shell (installed-PWA feel) — bottom tab bar, card
   tables, and touch polish. Desktop is untouched.
   ============================================================ */

/* --- Bottom tab bar (staff, phones/tablets) --- */
.sc-tabbar { display: none; }
@media (max-width: 900px) {
    .sc-tabbar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 1030;
        background: rgba(244, 237, 224, .92);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        border-top: 1px solid var(--sc-hairline);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .sc-tabbar a, .sc-tabbar button {
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        padding: 8px 2px 7px; background: none; border: 0; text-decoration: none;
        color: #6b6459; font-size: .62rem; font-weight: 700; letter-spacing: .02em;
    }
    .sc-tabbar i { font-size: 1.25rem; line-height: 1; }
    .sc-tabbar .on { color: #d64c5c; }
    .sc-tabbar .on i { filter: drop-shadow(0 2px 5px rgba(214,76,92,.35)); }

    /* Clear the tab bar: page content, the assistant FAB and toasts all lift above it. */
    .sc-content { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
    .sc-fab { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
    .sc-toast { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
}

/* --- Tables become stacked cards on phones (rows labelled by a tiny layout script) --- */
@media (max-width: 640px) {
    table.sc-cards, table.sc-cards tbody, table.sc-cards tr, table.sc-cards td { display: block; width: 100%; }
    table.sc-cards thead { display: none; }
    table.sc-cards tbody tr {
        background: var(--sc-card); border: 1px solid var(--sc-hairline); border-radius: 11px;
        margin-bottom: 10px; padding: 5px 13px; box-shadow: 0 1px 2px rgba(20,20,18,.05);
    }
    table.sc-cards tbody td {
        border: 0; border-bottom: 1px solid #f3eee3; padding: 7px 0;
        display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
        text-align: right; white-space: normal; overflow-wrap: anywhere;
    }
    table.sc-cards tbody td:last-child { border-bottom: 0; }
    table.sc-cards tbody td::before {
        content: attr(data-th);
        font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
        color: var(--sc-muted); text-align: left; flex: 0 0 auto; max-width: 42%;
    }
    table.sc-cards tbody td[data-th=""]::before, table.sc-cards tbody td:not([data-th])::before { content: none; }

    /* --- Touch polish --- */
    input.form-control, select.form-select, select.form-control, textarea.form-control { font-size: 16px; }  /* stops iOS zoom-on-focus */
    .btn { min-height: 40px; }
    .sc-content { padding-left: 14px; padding-right: 14px; }
}

/* ============================================================
   Mobile polish round 2 — glass topbar, project chips,
   page transitions, pull-to-refresh spinner.
   ============================================================ */

/* Page transitions: native cross-document View Transitions where supported… */
@view-transition { navigation: auto; }
/* …and a subtle glide-in everywhere as the fallback. */
.sc-content { animation: scPageIn .26s ease both; }
@keyframes scPageIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sc-content { animation: none; } }

/* Project chips: swipeable snap-scroller on phones (replaces the dropdown there). */
.sc-projchips { display: none; }
@media (max-width: 640px) {
    .sc-projsel { display: none !important; }
    .sc-projchips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 8px;
        scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .sc-projchips::-webkit-scrollbar { display: none; }
    .sc-pchip { flex: none; scroll-snap-align: start; background: var(--sc-card); border: 1px solid var(--sc-hairline);
        border-radius: 16px; padding: 7px 14px; font-size: .8rem; font-weight: 700; color: #5c5346;
        text-decoration: none; white-space: nowrap; }
    .sc-pchip.on { background: linear-gradient(90deg, #e8934a, #d64c5c); color: #fff; border-color: transparent; }
}

@media (max-width: 900px) {
    /* Glass topbar: translucent gradient + blur so content scrolls beneath it, safe-area aware. */
    .sc-topbar {
        background: linear-gradient(rgba(90,40,55,.10), rgba(90,40,55,.10)),
                    linear-gradient(90deg, rgba(232,147,74,.92) 0%, rgba(226,106,144,.92) 100%);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        padding-top: calc(12px + env(safe-area-inset-top));
    }
}

/* Pull-to-refresh spinner (shown by the layout script in installed/standalone mode). */
#scPtr { position: fixed; top: calc(env(safe-area-inset-top) + 8px); left: 50%; z-index: 99997;
    transform: translate(-50%, -70px); transition: transform .22s ease; pointer-events: none; }
#scPtr .sp { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #f0dfd0; border-top-color: #d64c5c;
    background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
#scPtr.arm { transform: translate(-50%, 14px); }
#scPtr.go .sp { animation: scPtrSpin .8s linear infinite; }
@keyframes scPtrSpin { to { transform: rotate(360deg); } }