/* ==========================================================
   COLOUR PALETTE
   ==========================================================
   Every colour used anywhere in the app, as CSS custom properties, so the
   whole look can be swapped at once (e.g. a per-user colour scheme picked
   on the profile page) rather than hunted down one declaration at a time.
   Grouped by what the colour is FOR:
     - Brand & Accent Core / Layout & Surfaces / Typography: the "theme"
       — what a colour scheme selector would actually repoint. Named by
       ROLE, not by hue, so a scheme can change what --brand or
       --link-accent actually look like without the name going stale
       (this is also why the old --accent-teal/--accent-cyan tokens are
       gone — the interactive-link role is now --link-accent-*, fully
       separate from the "Responsive" source badge below even though it
       happens to reuse the same hex today).
     - Status & Source Badges: fixed meaning (danger is always danger, a
       risk/source badge identifies data, not decoration) — literal names
       on purpose, since these are NOT expected to move with the scheme.
   White/black opacity "ladders" cover borders, hover fills and muted text
   — consolidated from a much finer original set (round after round each
   picked its own alpha by eye) down to one step per meaningfully distinct
   weight; a couple of single-use, rarely-focused-on values were folded
   into their closest neighbour. Frequently-seen interactive states (button
   hovers, the brand ladder) were left untouched rather than risk a visible
   flash-state changing. */
:root {
    /* --- Brand & Accent Core --- */
    --brand: #c084fc;                          /* primary accent — buttons, links, active nav/tabs, icons */
    --brand-glow-strong: rgba(192, 132, 252, 0.5);
    --brand-glow: rgba(192, 132, 252, 0.4);
    --brand-glow-soft: rgba(192, 132, 252, 0.3);
    --brand-bg-hover: rgba(192, 132, 252, 0.45);
    --brand-bg-strong: rgba(192, 132, 252, 0.35);
    --brand-bg: rgba(192, 132, 252, 0.2);       /* was two steps (.2/.25) */
    --brand-bg-faint: rgba(192, 132, 252, 0.15); /* was three steps (.12/.15/.18) */
    --brand-bg-whisper: rgba(192, 132, 252, 0.07); /* was two steps (.05/.07) */
    --brand-pale: #e9d5ff;                     /* clear-filters hover */

    /* Secondary "text link" accent — tag-toggle links, comment/body-text
       links, the dashboard rail's "view all" links. Named for what it
       DOES (a scheme swap repoints this), not what colour it happens to
       be today; kept fully separate from the Responsive source badge
       below, which must NOT move when this does. */
    --link-accent: #2dd4bf;
    --link-accent-bright: #5eead4;
    --link-accent-pale: #99f6e4;
    --link-accent-glow: rgba(45, 212, 191, 0.4);
    --link-accent-glow-soft: rgba(45, 212, 191, 0.3);
    --link-accent-bg-hover: rgba(14, 116, 144, 0.8);

    /* --- Layout & Surfaces --- */
    --body-gradient-start: #2d1252;
    --body-gradient-mid: #13315c;
    --body-gradient-end: #0e7490;

    --surface-glass: rgba(26, 28, 32, 0.8);     /* main glass container bg */
    --surface-glass-strong: rgba(26, 28, 32, 0.9);
    --surface-glass-solid: rgba(26, 28, 32, 0.95); /* modals / offcanvas drawer */
    /* Desaturated from an earlier, distinctly navy-blue rgba(15,23,42,x) —
       that read fine against the purple/teal default scheme, but clashed
       hard against warmer schemes (Council, Autumn) since it's fixed and
       never swaps. Now a near-neutral charcoal (a whisper of blue left,
       not enough to read as "blue") so it sits quietly under every scheme. */
    --surface-slate: rgba(26, 28, 32, 0.8);
    --surface-slate-strong: rgba(26, 28, 32, 0.9);
    --surface-slate-solid: rgba(26, 28, 32, 0.95);
    --surface-slate-deep: rgba(38, 41, 46, 0.95);
    --surface-navy: rgba(28, 30, 33, 0.8);      /* pagination links */

    --overlay-transparent: rgba(0, 0, 0, 0);
    --overlay-black-25: rgba(0, 0, 0, 0.25);    /* was two steps (.2/.25) */
    --overlay-black-30: rgba(0, 0, 0, 0.3);     /* was two steps (.3/.35) */
    --overlay-black-40: rgba(0, 0, 0, 0.4);     /* was two steps (.4/.45) */
    --overlay-black-60: rgba(0, 0, 0, 0.6);
    --border-on-white: rgba(30, 27, 58, 0.2);   /* faint border for chrome sat on a white/light surface */

    /* White opacity ladder — borders, hover fills, muted text/placeholders.
       Was 19 steps (0.05 through 0.80) originally, then 9; down to the 4
       below by folding every remaining step into its nearer of these four.
       This is deliberately the full set for the app going forward — reach
       for one of these four before adding a new white-NN step. */
    --white-10: rgba(255, 255, 255, 0.1);       /* was .05/.06/.08/.10/.12/.15 */
    --white-25: rgba(255, 255, 255, 0.25);      /* was .20/.25/.30 */
    --white-50: rgba(255, 255, 255, 0.5);       /* was .35/.40/.45/.50/.55 */
    --white-75: rgba(255, 255, 255, 0.75);      /* was .60/.65/.70/.75/.80 */

    /* --- Typography --- */
    --text-white: #fff;                         /* solid white — headings, primary icons/text */
    --text-soft: #9fa3a8;                        /* body copy on dark surfaces (feed/comment text, banners) */
    --text-pale-gray: #f3f4f6;                   /* table text, filter labels */
    --text-faint-blue-gray: #94a3b8;             /* small/secondary table text */
    --text-brand-pale: #fae8ff;                  /* pale accent text on brand/dark surfaces */
    --text-on-white: #1e1b3a;                    /* dark text set on a white/pale chip */
    --text-muted-on-light: rgba(0, 0, 0, 0.7);   /* muted text set on a light-background context */

    /* --- Status & Semantic Colours (meaning stays fixed across schemes) --- */
    --danger: #ef4444;
    --danger-bright: #f87171;
    --danger-bg: rgba(239, 68, 68, 0.85);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.85);
    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.85);
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.85);
    --neutral-gray: #6b7280;
    --neutral-gray-bg: rgba(107, 114, 128, 0.85);

    /* --- Source Badges (one bg/text/border trio per codebook source —
       fixed identity colours, deliberately NOT tied to --link-accent even
       where a value happens to match it) --- */
    --source-ros-bg: #581c87;
    --source-ros-border: #7e22ce;               /* source-ros text reuses --text-brand-pale */
    --source-responsive-bg: #0e7490;
    --source-responsive-text: #99f6e4;
    --source-responsive-border: #06b6d4;
    --source-merrisons-bg: #78350f;
    --source-merrisons-text: #fef3c7;
    --source-merrisons-border: #b45309;
    --source-another-level-bg: #064e3b;
    --source-another-level-text: #d1fae5;
    --source-another-level-border: #047857;
    --source-asbestos-bg: #881337;
    --source-asbestos-text: #ffe4e6;
    --source-asbestos-border: #be123c;
    --source-orbis-bg: #312e81;
    --source-orbis-text: #e0e7ff;
    --source-orbis-border: #4338ca;
}

body {
    background: linear-gradient(135deg, var(--body-gradient-start) 0%, var(--body-gradient-mid) 50%, var(--body-gradient-end) 100%);
    min-height: 100vh;
    color: var(--text-white);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    padding-top: 5vh;
    padding-bottom: 5vh;
    background-attachment: fixed;
}
.glass-container {
    background: var(--surface-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--white-10);
    border-radius: 20px;
    padding: 60px 0px 10px 0px;
    box-shadow: 0 12px 40px 0 var(--overlay-black-40), inset 0 1px 0 0 var(--white-10);
    margin-bottom: 30px;
}
.logotitle {display:block;}
.logotitle h2 {color: var(--text-white);}
.logo-img { max-height: 200px; max-width: 70%; margin-bottom: 10px; filter: drop-shadow(0 4px 12px var(--overlay-black-30));opacity:0.8;}
.brand-text { color: var(--brand); font-weight: 300; letter-spacing: 2px; margin-bottom: 30px; font-size: 2rem; text-shadow: 0 2px 10px var(--brand-glow-soft); }
.glass-input-box {margin: 0 30px 0 30px;}
.glass-input-box input {
    background: var(--overlay-black-40);
    border: 1px solid var(--white-25);
    color: var(--text-white);
    border-radius: 30px;
    padding: 15px 20px 15px 20px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}
.glass-input-box input:focus {
    background: var(--overlay-black-60);
    border-color: var(--brand);
    box-shadow: 0 0 20px var(--brand-glow);
    color: var(--text-white);
}
.glass-input-box input::placeholder { color: var(--white-75); }
.search-box { position: relative; margin-bottom: 20px; }
.search-box input { padding-left: 50px; }
.search-box i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--brand);
    font-size: 1.2rem;
}
.filter-label { font-weight: 500; font-size: 1.1rem; color: var(--text-pale-gray); }

/* Fixed Filter Button States for clear hover background and bright text */
.btn-outline-brand { 
    color: var(--brand); 
    border-color: var(--brand); 
    background: var(--overlay-black-25); 
}
.btn-outline-brand:hover, 
.btn-outline-brand:focus { 
    background-color: var(--brand-bg-hover); 
    color: var(--text-white) !important; 
    border-color: var(--brand); 
    box-shadow: 0 0 12px var(--brand-glow); 
}
.btn-check:checked + .btn-outline-brand,
.btn-check:active + .btn-outline-brand { 
    background-color: var(--brand); 
    color: var(--text-white) !important; 
    border-color: var(--brand); 
    box-shadow: 0 0 15px var(--brand-glow-strong); 
}

.btn-tag-toggle { color: var(--link-accent); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; font-weight: 500; }
.btn-tag-toggle:hover { color: var(--link-accent-bright); text-shadow: 0 0 8px var(--link-accent-glow); }
.tag-cloud-area {
    max-height: 200px;
    overflow-y: auto;
    padding: 15px;
}
/* Content-block panels: the same flat, bordered "card" treatment as the
   Dashboard rail panels (background tint + hairline border + soft radius,
   no drop shadow) so every page's main content reads as a designed surface
   rather than bare text floating over the app shell's own background. */
.results-wrapper {
    display: none;
    background: var(--overlay-black-25);
    border: 1px solid var(--white-10);
    border-radius: 14px;
}
/* Was an inline style="background: rgba(255,255,255,0.05); border-radius: 8px;"
   on each generated invite-link row — pulled in here so no colour is
   declared outside this file. */
.invite-result-row { background: var(--white-10); border-radius: 8px; }

.table { color: var(--text-pale-gray); margin-bottom: 0; }
.table thead th { background: var(--overlay-black-60); border-bottom: 2px solid var(--brand); color: var(--brand); font-weight: 600; letter-spacing: 1px; border-top: none; }
.table tbody tr { border-bottom: 1px solid var(--white-10); transition: background 0.2s; }
.table tbody tr:hover { background: var(--white-10); }
.table td { border-color: transparent; vertical-align: middle; }
.tag-badge {
    background: var(--surface-slate-solid); border: 1px solid var(--brand); color: var(--text-brand-pale); font-size: 0.8rem;
    font-weight: 500; padding: 5px 10px; border-radius: 6px; display: inline-block; margin: 3px; box-shadow: 0 2px 6px var(--overlay-black-40);
}
.tag-badge:hover {background: var(--brand); color: var(--text-white); transform: translateY(-1px); box-shadow: 0 4px 12px var(--brand-glow);
}
.clickable-tag { cursor: pointer; transition: all 0.2s ease; }
.clickable-tag:hover {color: var(--text-white);}
/* .source-badge / .source-ros etc. defined once, below, under "Source Badges
   for all Codebooks" — this used to duplicate that block (plus a stray
   .source-res that no actual codebook source ever generates; the real
   source is "Responsive" -> .source-responsive). */
#loadingSpinner { display: none; color: var(--brand); margin-bottom: 15px; }
.top-nav-links { position: absolute; top: 20px; right: 25px; font-size: 0.9rem; }
.top-nav-links a { color: var(--white-75); text-decoration: none; margin-left: 15px; font-weight: 500; transition: color 0.2s; }
.top-nav-links a:hover { color: var(--text-white); text-shadow: 0 0 8px var(--white-50); }
.auth-prompt-text { color: var(--text-brand-pale); font-size: 1.05rem; }

/* Custom Modal Styling for Tag Manager */
.modal-content.glass-modal {
    background: var(--surface-glass-solid);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--white-25);
    color: var(--text-white);
    box-shadow: 0 12px 40px 0 var(--overlay-black-60);
}
.modal-header {
    border-bottom: 1px solid var(--white-10);
}
.modal-footer {
    border-top: 1px solid var(--white-10);
}
.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.assigned-tag-badge {
    background: var(--brand);
    color: var(--text-white);
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 6px;
    display: inline-block;
    margin: 3px;
    box-shadow: 0 2px 8px var(--brand-glow);
}
.assigned-tag-badge i {
    cursor: pointer;
    margin-left: 8px;
    opacity: 0.8;
    transition: opacity 0.2s;
}
.assigned-tag-badge i:hover {
    opacity: 1;
}
.available-tag-badge {
    background: var(--surface-slate-strong);
    border: 1px solid var(--white-25);
    color: var(--link-accent-bright);
    font-size: 0.85rem;
    padding: 5px 10px;
    border-radius: 6px;
    display: inline-block;
    margin: 3px;
    cursor: pointer;
    transition: all 0.2s;
}
.available-tag-badge:hover {
    background: var(--link-accent-bg-hover);
    border-color: var(--link-accent);
    color: var(--text-white);
    box-shadow: 0 0 10px var(--link-accent-glow-soft);
}

/* Source Badges for all Codebooks */
.source-badge { font-size: 0.75rem; padding: 4px 10px; border-radius: 20px; font-weight: 600; display: inline-block; }
.source-ros { background-color: var(--source-ros-bg); color: var(--text-brand-pale); border: 1px solid var(--source-ros-border); }
.source-responsive { background-color: var(--source-responsive-bg); color: var(--source-responsive-text); border: 1px solid var(--source-responsive-border); }
.source-merrisons { background-color: var(--source-merrisons-bg); color: var(--source-merrisons-text); border: 1px solid var(--source-merrisons-border); }
.source-another-level { background-color: var(--source-another-level-bg); color: var(--source-another-level-text); border: 1px solid var(--source-another-level-border); }
.source-asbestos { background-color: var(--source-asbestos-bg); color: var(--source-asbestos-text); border: 1px solid var(--source-asbestos-border); }
.source-orbis { background-color: var(--source-orbis-bg); color: var(--source-orbis-text); border: 1px solid var(--source-orbis-border); }

/* Pagination Controls Glass Styling */
.page-link {
    background: var(--surface-navy) !important;
    border-color: var(--white-10) !important;
    color: var(--brand) !important;
    transition: all 0.2s ease;
}
.page-link:hover {
    background: var(--brand-glow-soft) !important;
    color: var(--text-white) !important;
    border-color: var(--brand) !important;
}
.page-item.active .page-link {
    background: var(--brand) !important;
    color: var(--text-white) !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 10px var(--brand-glow);
}
.page-item.disabled .page-link {
    background: var(--overlay-black-30) !important;
    color: var(--white-25) !important;
    border-color: var(--white-10) !important;
}

/* Filter explanation text above the buttons */
.glass-container p.text-muted,
.glass-container .text-muted {
    color: var(--text-soft) !important;
    font-size: 0.95rem;
}

/* .results-wrapper (the standard panel background almost everything below
   the login screen sits on) is only a 25%-black tint over the body
   gradient — with the default/Night gradients that stays dark enough for
   light text, but Day/Autumn/Council's brighter gradients show through it
   enough that pale, semi-transparent muted text (the old --white-50) got
   close to unreadable, worse still once a hover state lightens things
   further. --text-muted-on-light (already proven on the Job Builder empty
   state below) reads clearly against that panel background regardless of
   which scheme's gradient is showing through it. */
.text-muted {color: var(--text-muted-on-light)!important;}

#editTagCodeCount.text-muted {
  color: var(--text-soft) !important;
    font-size: 0.95rem;
}

/* Medium descriptions in the search results table */
.table td small.text-muted {
    color: var(--text-faint-blue-gray) !important;
}

/* Left-align table descriptions while leaving codes and rates centered */
.table th:nth-child(2),
.table td:nth-child(2) {
    text-align: left !important;
}

/* Clear selection button link */
#clearFiltersBtn {
    color: var(--brand) !important;
}
#clearFiltersBtn:hover {
    color: var(--brand-pale) !important;
}

/* Glass Nav Tabs */
.custom-glass-tabs {
    border-bottom: 1px solid var(--white-10);
}
.custom-glass-tabs .nav-link {
    color: var(--white-75);
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-weight: 500;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    padding-bottom: 12px;
}
.custom-glass-tabs .nav-link:hover {
    color: var(--text-white);
    border-color: var(--white-25);
}
.custom-glass-tabs .nav-link.active {
    color: var(--brand);
    background: var(--brand-bg-whisper);
    border-bottom: 2px solid var(--brand);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.bg-brand {
    background-color: var(--brand) !important;
    color: var(--text-white);
}

/* Page Banner — a large version of the page's own sidebar icon acting as a
   bullet point for the description text beside it, left-aligned. */
.glass-notice-banner {
    background: linear-gradient(180deg, var(--overlay-black-40) 0%, var(--overlay-transparent) 100%);
    padding: 30px 30px 28px 30px;
    margin: 0 0 10px 0; /* Stretches edge-to-edge inside the glass container */
    display: flex;
    align-items: center;
    gap: 24px;
    text-align: left;
}
.page-banner-icon {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--brand-bg-faint);
    border: 1px solid var(--brand-bg-strong);
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-banner-icon i { font-size: 1.7rem; color: var(--brand); }
.page-banner-text { flex: 1 1 auto; min-width: 0; }
.page-banner-text p {
    max-width: 750px; /* Condenses the text width so it doesn't run edge-to-edge on wide screens */
    margin: 0;
    color: var(--text-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}
.page-banner-text p + p { margin-top: 8px; }
@media (max-width: 575.98px) {
    .glass-notice-banner { gap: 16px; padding: 24px 18px 22px 18px; }
    .page-banner-icon { width: 48px; height: 48px; }
    .page-banner-icon i { font-size: 1.3rem; }
}

#footer {margin: 20px 0px 0 0;}

/* Master Tag Edit Icon */
.edit-master-tag-btn {
    cursor: pointer;
    color: var(--white-50);
    transition: color 0.2s ease, transform 0.2s ease;
}
.edit-master-tag-btn:hover {
    color: var(--text-white);
    transform: scale(1.1);
}

/* Job Builder Styling */

#jobBuilderContainer {padding: 1em 2em!important;}
/* Was an inline style="color: #c084fc;" on the grand-total figure — pulled
   in here so no colour is declared outside this file. */
.job-grand-total { color: var(--brand); }
.job-qty-input {
    width: 70px;
    background: var(--overlay-black-40);
    border: 1px solid var(--white-25);
    color: var(--text-white);
    border-radius: 6px;
    text-align: center;
    transition: all 0.2s ease;
}
.job-qty-input:focus {
    background: var(--overlay-black-60);
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 10px var(--brand-glow-soft);
    color: var(--text-white);
}
/* Job Builder Item Remove Icon */
.remove-job-btn {
    color: var(--danger); /* A clear danger red */
    cursor: pointer;
    font-size: 1.1rem;
    opacity: 0.6; /* Muted by default so it isn't distracting */
    transition: all 0.2s ease;
}
.remove-job-btn:hover {
    opacity: 1; /* Full brightness on hover */
    transform: scale(1.2);
}

/* ==========================================
   ASBESTOS REGISTER STYLING
   ========================================== */

/* Neutral Accordion Header */
.accordion-button.neutral-header {
    background-color: var(--surface-glass-strong) !important;
    color: var(--text-white) !important;
    border: 1px solid var(--white-10) !important;
}
.accordion-button.neutral-header:not(.collapsed) {
    background-color: var(--surface-slate-deep) !important;
}
.accordion-button.neutral-header::after { 
    filter: invert(1); 
}

/* Count Badges on Accordion Header */
.badge-count {
    font-size: 0.75rem;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}
/* Risk Badges */
.badge-high {
background-color: var(--danger-bg) !important; 
border-color: var(--danger) !important;
}
.badge-medium {
background-color: var(--warning-bg) !important; 
border-color: var(--warning) !important;
}
.badge-low {
background-color: var(--info-bg) !important; 
border-color: var(--info) !important;
}
.badge-none {
background-color: var(--success-bg) !important; 
border-color: var(--success) !important;
}
.badge-unknown {
background-color: var(--neutral-gray-bg) !important; 
border-color: var(--neutral-gray) !important;
}

/* Two Column Grid for Item Details */
.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
@media (max-width: 768px) {
    .two-column-grid {
        grid-template-columns: 1fr;
    }
}
/* Item Header Risk Colors */
.bg-risk-high { background-color: var(--danger-bg) !important; border-color: var(--danger) !important; }
.bg-risk-medium { background-color: var(--warning-bg) !important; border-color: var(--warning) !important; }
.bg-risk-low { background-color: var(--info-bg) !important; border-color: var(--info) !important; }
.bg-risk-none { background-color: var(--success-bg) !important; border-color: var(--success) !important; }
.bg-risk-unknown { background-color: var(--neutral-gray-bg) !important; border-color: var(--neutral-gray) !important; }

.glass-accordion-body { background: var(--overlay-black-30); }
.glass-item-body { background: var(--surface-slate); }

.accordion-button::after {margin-left: 0px!important;}

/* ==========================================
   APP SHELL — sidebar / mobile drawer navigation (Phase 2)
   ========================================== */

.login-container { max-width: 640px; }

.app-shell-container {
    overflow: hidden;
    border-radius: 20px;
}
.app-shell {
    display: flex;
    align-items: stretch;
    min-height: 80vh;
}

/* Desktop sidebar */
.app-sidebar {
    width: 250px;
    flex-shrink: 0;
    background: var(--overlay-black-25);
    border-right: 1px solid var(--white-10);
    padding: 24px 0;
}
.sidebar-logo { padding: 0 20px 22px 20px; text-align: center; }
.logo-img-sm { max-height: 46px; max-width: 100%; opacity: 0.9; }

.sidebar-nav { list-style: none; margin: 0; padding: 0 12px; }
.sidebar-nav-heading {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: var(--white-50);
    padding: 18px 12px 6px 12px;
}
.sidebar-nav-item { margin-bottom: 4px; list-style: none; }
.nav-link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--white-75);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}
.nav-link-item i { width: 18px; text-align: center; }
.nav-link-item:hover { color: var(--text-white); background: var(--white-10); }
.nav-link-item.active {
    color: var(--text-white);
    background: var(--brand-bg-faint);
    box-shadow: inset 3px 0 0 0 var(--brand);
}
.nav-link-item.active i { color: var(--brand); }

.sidebar-footer {
    border-top: 1px solid var(--white-10);
    padding: 16px 20px 4px 20px;
}
.sidebar-user { color: var(--white-75); margin-bottom: 8px; }
.sidebar-logout { color: var(--white-75); text-decoration: none; font-size: 0.85rem; transition: color 0.2s; }
.sidebar-logout:hover { color: var(--text-white); }

/* The screen name + avatar in the sidebar footer link through to the
   profile page — laid out like a nav item (it uses .nav-link-item for the
   same delegated click-router handler) but its own padding/shape since it
   sits above the logout link rather than in the main nav list. */
.sidebar-user-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    margin-bottom: 8px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.2s ease;
}
.sidebar-user-link:hover { background: var(--white-10); }
.sidebar-user-link .sidebar-user { margin-bottom: 0; }
.sidebar-avatar-img { width: 34px; height: 34px; font-size: 0.95rem; flex-shrink: 0; }

/* Mobile topbar */
.app-topbar {
    background: var(--overlay-black-30);
    border-bottom: 1px solid var(--white-10);
    padding: 12px 18px;
}
.nav-toggle-btn {
    background: transparent;
    border: 1px solid var(--white-25);
    color: var(--text-white);
    width: 38px;
    height: 38px;
    border-radius: 8px;
}
.nav-toggle-btn:active { background: var(--white-10); }
.topbar-logo-img { max-height: 30px; }
.topbar-logout { color: var(--white-75); font-size: 1.15rem; }
.topbar-logout:hover { color: var(--text-white); }

/* Mobile offcanvas drawer — same nav markup as the sidebar */
.app-offcanvas {
    background: var(--surface-glass-solid);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--text-white);
    width: 270px;
    border-right: 1px solid var(--white-10);
}
.app-offcanvas .offcanvas-header { border-bottom: 1px solid var(--white-10); }
.app-offcanvas .sidebar-footer { border-top: 1px solid var(--white-10); margin-top: auto; }

.app-main {
    padding: 28px 32px;
    min-width: 0;
    flex-grow: 1;
}
.page-section { display: none; }
.page-section.active { display: block; }

@media (max-width: 991.98px) {
    .app-shell { flex-direction: column; min-height: 0; }
    .app-main { padding: 22px 16px; }
}

/* ==========================================
   RESPONSIVE TABLES — card-style reflow below tablet width
   ========================================== */

@media (max-width: 767.98px) {
    .responsive-stack-table thead { display: none; }
    .responsive-stack-table,
    .responsive-stack-table tbody,
    .responsive-stack-table tr,
    .responsive-stack-table td {
        display: block;
        width: 100%;
    }
    .responsive-stack-table tr {
        margin-bottom: 14px;
        border: 1px solid var(--white-10);
        border-radius: 10px;
        overflow: hidden;
        background: var(--overlay-black-25);
    }
    .responsive-stack-table tr:last-child { margin-bottom: 0; }
    .responsive-stack-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        text-align: right;
        padding: 10px 14px;
        border-bottom: 1px solid var(--white-10);
    }
    .responsive-stack-table td:last-child { border-bottom: none; }
    .responsive-stack-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--brand);
        text-align: left;
        margin-right: auto;
        flex-shrink: 0;
    }
    .responsive-stack-table td[data-label=""]::before { content: none; }
    /* Empty-state / colspan rows (e.g. "no results yet") read better centred */
    .responsive-stack-table td[colspan] {
        display: block;
        text-align: center;
    }
    .responsive-stack-table td[colspan]::before { content: none; }
}

/* ==========================================
   DASHBOARD FEED
   ========================================== */

.feed-list {overflow-y: auto; }
.feed-item {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--white-10);
    text-align: left;
}
.feed-item:last-child { border-bottom: none; }
.feed-item-pinned { background: var(--brand-bg-whisper); border-radius:14px;}
.feed-item-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--overlay-black-30);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}
/* The negative margins consume exactly the flex `gap` the icon and actions
   columns otherwise reserve on each side (empty space, not their own width),
   so the body sits flush against both instead of carrying extra padding it
   never asked for — most visible now that the comments/reaction footer
   below the text needs the room. */
   .feed-item-body {flex-grow: 1; min-width: 0;margin-top: 6px;}
.feed-item[data-item-type="post"] > .feed-item-body {margin-left: -40px;
  margin-right: -35px;
  margin-top: 50px; }
.feed-pin-flag {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--brand);
    font-weight: 600;
    margin-bottom: 4px;
}
.feed-item-title { font-weight: 600; color: var(--text-white); margin-bottom: 2px; }
.feed-item-text { color: var(--text-soft); font-size: 0.95rem; overflow-wrap: anywhere; }
.feed-item-meta { font-size: 0.8rem; color: var(--white-50); margin-top: 6px; }
.feed-item-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.feed-action-btn {
    background: transparent;
    border: 1px solid var(--white-25);
    color: var(--white-75);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.feed-action-btn:hover { color: var(--text-white); border-color: var(--brand); background: var(--brand-bg); }
.feed-pin-btn.active { color: var(--brand); border-color: var(--brand); background: var(--brand-bg-faint); }

/* Basic formatting produced by formatFeedBody() from the composer toolbar */
.feed-item-text a { color: var(--link-accent-bright); text-decoration: underline; }
.feed-item-text a:hover { color: var(--link-accent-pale); }
.feed-item-text strong { color: var(--text-white); }

/* React button + label, comment count/disabled label/admin toggle, and the
   reaction summary — bottom strip of a post, below the meta line. Shares
   .feed-item-body's own gap-clearing -14px margins (see above); status/
   activity items never render this row at all. */
.feed-item-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.feed-comment-status { display: flex; align-items: center; gap: 8px; }
.feed-comment-toggle {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--white-50);
    font-size: 0.9rem;
    transition: color 0.2s;
}
.feed-comment-toggle:hover { color: var(--link-accent-bright); }
.feed-comments-disabled-label { font-size: 0.8rem; }
.feed-comments-admin-toggle {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--white-50);
    font-size: 0.9rem;
    transition: color 0.2s;
}
.feed-comments-admin-toggle:hover { color: var(--brand); }

/* Plain flex row — the toggle (first) and the picker (last) are ordinary
   siblings rather than an absolutely-positioned popup, which is what lets
   the picker roll out as a normal width transition immediately to the
   toggle's right instead of appearing in a floating box above it. */
.feed-reaction-wrap { display: inherit; align-items: center; gap: 6px; }
.feed-reaction-toggle {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--white-50);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    transition: color 0.2s;
    white-space: nowrap;
}
.feed-reaction-toggle:hover { color: var(--brand); }
.feed-reaction-picker {
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.25s ease, opacity 0.2s ease;
}
/* Sized to fit six of these at .feed-reaction-option's own width, so the
   transition finishes exactly when the icons finish appearing rather than
   continuing to "expand" past the point they're already fully visible. */
.feed-reaction-picker.open { max-width: 150px; opacity: 1; }
/* Icon scale matches .feed-reaction-toggle (font-size: 0.8rem) — the picker
   should read as the same size as the button that opens it, not larger. */
.feed-reaction-option {
    background: transparent;
    border: none;
    color: var(--white-75);
    width: 22px;
    height: 22px;
    font-size: 0.8rem;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.15s ease, transform 0.15s ease;
}
/* Default + hover only now — no separate active/selected look and no count
   badge, both dropped now that the read-only summary below covers "which
   reactions has this post got" on its own; the picker's only job is picking. */
.feed-reaction-option:hover { color: var(--text-white); transform: translateY(-2px); }

/* Read-only tally of whichever reaction types have actually been used on
   the post — right-aligned where the React button used to sit. One item per
   type that has at least one reaction. Styled to match the slide-out picker
   icons above (same 22px circle, same icon scale) but with a faint border
   added to both the icon and its count, and the count itself as a small
   white, dark-text badge tucked underneath and slightly to the icon's
   right — rather than the picker's own corner-overlap badge, since there's
   no button chrome here to badge onto. */
.feed-reaction-summary { display: flex; align-items: center; gap: 10px; }
.feed-reaction-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    color: var(--white-75);
}
.feed-reaction-summary-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--white-25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.feed-reaction-summary-item.active { color: var(--brand); }
.feed-reaction-summary-item.active .feed-reaction-summary-icon { border-color: var(--brand-glow-strong); }
.feed-reaction-summary-count {
    margin-top: -9px;
    transform: translateX(14px);
    min-width: 15px;
    height: 15px;
    padding: 0 2px;
    border-radius: 50%;
    border: 1px solid var(--border-on-white);
    background: var(--text-white);
    color: var(--text-on-white);
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The rolled-out comments area — separated from the post above it by a fine
   dashed line, as opposed to the feed's own solid item separators. */
.feed-comments-panel {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--white-25);
}
.feed-comment-form textarea { resize: vertical; }
.feed-comments-list { margin-top: 14px; }
.post-comment {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--white-10);
}
.post-comment:last-child { border-bottom: none; }
.post-comment-avatar { flex-shrink: 0; }
.post-comment-body { flex-grow: 1; min-width: 0; }
.post-comment-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.post-comment-author { font-weight: 600; color: var(--text-white); font-size: 0.85rem; }
.post-comment-time { font-size: 0.75rem; }
.post-comment-text { color: var(--text-soft); font-size: 0.9rem; overflow-wrap: anywhere; margin-top: 2px; }
.post-comment-delete-btn {
    background: transparent;
    border: none;
    color: var(--white-50);
    align-self: flex-start;
    transition: color 0.2s;
}
.post-comment-delete-btn:hover { color: var(--danger-bright); }

/* Avatars — shared by the sidebar footer, the profile page and comments.
   .avatar-img/.avatar-fallback carry no size of their own; each context
   below sets the size via its own class. */
.avatar-img { object-fit: cover; border-radius: 50%; display: block; }
.avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--brand-bg);
    color: var(--text-brand-pale);
    font-weight: 700;
}
.post-comment-avatar-img { width: 32px; height: 32px; font-size: 0.9rem; }

/* ==========================================
   DASHBOARD RAIL — right-hand column of saved-item panels (Phase 3+4)
   ========================================== */

.dashboard-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.dashboard-main { flex: 1 1 auto; min-width: 0; }
.dashboard-rail {
    flex: 0 0 320px;
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rail-panel {
    background: var(--overlay-black-25);
    border: 1px solid var(--white-10);
    border-radius: 14px;
    overflow: hidden;
}
.rail-panel-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    color: var(--text-white);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}
.rail-panel-header:hover { background: var(--white-10); }
.rail-panel-header i:first-child { color: var(--brand); width: 18px; text-align: center; }
.rail-panel-caret { font-size: 0.8rem; color: var(--white-50); transition: transform 0.2s ease; }
.rail-panel-body { padding: 0 16px 16px 16px; }

.rail-item-list { list-style: none; margin: 0; padding: 0; }
.rail-item-list li { border-bottom: 1px solid var(--white-10); }
.rail-item-list li:last-child { border-bottom: none; }
.rail-item-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 2px;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.88rem;
}
.rail-item-link:hover { color: var(--text-white); }
.rail-item-link span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item-meta { flex-shrink: 0; color: var(--white-50); font-size: 0.78rem; }
.rail-view-all {
    display: inline-block;
    margin-top: 10px;
    color: var(--link-accent-bright);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 500;
}
.rail-view-all:hover { color: var(--link-accent-pale); }

/* Active Users panel rows — avatar + screen name, no meta text and not a
   link (there's nowhere for a single user to go), so these get their own
   class rather than reusing .rail-item-link. */
.rail-active-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 2px;
    color: var(--text-soft);
    font-size: 0.88rem;
}
.rail-active-user-avatar { flex-shrink: 0; }
.rail-active-user-avatar-img { width: 28px; height: 28px; font-size: 0.8rem; }
.rail-active-user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 991.98px) {
    .dashboard-layout { flex-direction: column; }
    .dashboard-rail { width: 100%; flex: 1 1 auto; }
}

/* ==========================================
   SAVED ASBESTOS BREAKDOWNS — history expand row (Phase 3+4)
   ========================================== */

.history-snapshot-list { list-style: none; margin: 0; padding: 0; }
.history-snapshot-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--white-10);
    font-size: 0.9rem;
}
.history-snapshot-list li:last-child { border-bottom: none; }
.history-row td { background: var(--overlay-black-25); text-align: left !important; }
.history-body { max-width: 500px; margin: 0 auto; }
@media (min-width: 768px) {
    .history-body { margin: 0; }
}

/* "New Announcement" sub-link nested under Dashboard in the nav */
.sidebar-nav-subitem { margin: -2px 0 6px 0; list-style: none; }
.nav-link-subitem {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 34px;
    font-size: 0.85rem;
    color: var(--white-50);
    background: 0 !important;
    box-shadow: inset 3px 0 0 0 var(--overlay-transparent) !important;
}
.nav-link-subitem i { font-size: 0.8rem; }
.nav-link-subitem:hover { color: var(--text-white); background: var(--white-10); }

/* Announcement composer formatting toolbar */
.composer-toolbar { display: flex; gap: 6px; }
.composer-toolbar-btn {
    background: var(--overlay-black-30);
    border: 1px solid var(--white-25);
    color: var(--white-75);
    width: 34px;
    height: 34px;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.composer-toolbar-btn:hover { color: var(--text-white); border-color: var(--brand); background: var(--brand-bg); }
.composer-toolbar-btn.composer-hint-toggle { margin-left: auto; }
.composer-toolbar-btn.active { color: var(--text-white); border-color: var(--brand); background: var(--brand-bg-strong); }
.composer-hint { line-height: 1.4; }

/* ==========================================
   PROFILE PAGE
   ========================================== */
.profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.profile-avatar-preview { flex-shrink: 0; }
.profile-avatar-img { width: 96px; height: 96px; font-size: 2.2rem; border: 3px solid var(--white-10); }
.profile-avatar-controls { flex: 1 1 auto; min-width: 0; }

@media (max-width: 575.98px) {
    .profile-avatar-row { gap: 16px; }
    .profile-avatar-img { width: 72px; height: 72px; font-size: 1.7rem; }
}

.colour-scheme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
}
.colour-scheme-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 10px;
    background: var(--surface-slate);
    border: 1px solid var(--white-10);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.colour-scheme-swatch:hover { border-color: var(--white-25); background: var(--surface-slate-strong); }
.colour-scheme-swatch.active { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 0 12px var(--brand-glow-soft); }
.colour-scheme-swatch-preview { display: flex; gap: 4px; }
.colour-scheme-swatch-chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--white-25);
}
.colour-scheme-swatch-label { font-size: 0.85rem; color: var(--text-soft); font-weight: 600; }
.colour-scheme-swatch.active .colour-scheme-swatch-label { color: var(--text-white); }