/* ==========================================================
   Proficiency Coffee — Executive Dashboard
   Ported from the Apps Script exec_v4 project (Executive.zip)
   so the PHP rebuild reads as the same product, not a redesign.
   Tokens, class names and shell layout are copied as-is; the
   parts that depended on Apps Script (Chart.js, client-side
   SPA routing, Google auth) are simplified for a server-
   rendered multi-page app instead. See CLAUDE.md.
========================================================== */

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

@font-face{
    font-family:'Outfit';
    src:url('/assets/fonts/outfit-latin-400-normal.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'Outfit';
    src:url('/assets/fonts/outfit-latin-600-normal.woff2') format('woff2');
    font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'Outfit';
    src:url('/assets/fonts/outfit-latin-700-normal.woff2') format('woff2');
    font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
    font-family:'Outfit';
    src:url('/assets/fonts/outfit-latin-800-normal.woff2') format('woff2');
    font-weight:800; font-style:normal; font-display:swap;
}

/* Material Symbols Rounded's @font-face and .material-symbols-rounded
   utility class now live in /assets/material-symbols.css (self-hosted,
   loaded by every page in place of the Google Fonts link this app used
   to use) - see that file's own docblock for why (direct user report:
   "why are the icons broken?"). Nothing else in this file needs to
   redeclare either; the class name works the same wherever it's used
   once that stylesheet is on the page, app.css included.
*/

:root{
    --primary:#402417;
    --primary-dark:#2B180E;
    --primary-light:#F7EEE7;
    --accent:#C78E5E;
    --bg:#F7F8FA;
    --surface:#FFFFFF;
    /* Was referenced (table thead th{ background:var(--surface-alt) })
       by 6 views across the app - hr/employee-monitoring.php,
       admin/data-export.php, admin/recipes.php, ops/inventory-cost.php
       (x2), executive/menu-margin.php - but never actually defined
       here, so every one of those table headers has always rendered
       with a fully transparent background (var() with an undefined
       custom property computes to the property's initial value, not
       an error). Invisible everywhere it was used in a normal,
       page-scrolling table, where a see-through header scrolls away
       with the rows underneath it anyway - only surfaced now, fixing
       hr/employee-monitoring.php's own sticky header (see that
       view's own comment): a header that actually stays in place
       while rows scroll under it needs a REAL opaque background, or
       row text visibly bleeds through it. Set to the same value as
       --bg rather than reusing --bg directly - same color today, but
       a distinct token for "a muted shade of a white Surface" (table
       headers, alternating panels) vs. --bg's own job (the page's
       own background), in case they ever need to diverge.
    */
    --surface-alt:#F7F8FA;
    --border:#E4E7EC;
    --text:#1D2939;
    --text-secondary:#667085;
    --text-tertiary:#98A2B3;
    --success:#0D8A4C;
    --success-light:#E8F7EF;
    --danger:#D92D20;
    --danger-light:#FEF3F2;
    --warning:#B54708;
    --warning-light:#FFFAEB;
    --info:#1E88E5;
    --info-light:#E9F4FD;
    --radius:10px;
    --radius-lg:14px;
    --shadow-sm:0 1px 2px rgba(16,24,40,.05);
    --shadow-md:0 4px 12px rgba(16,24,40,.08);
    --font:'Outfit','Helvetica Neue',Arial,sans-serif;
}

html,body{
    height:100%;
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    font-size:14px;
    -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

/* ==========================================================
   App Shell
========================================================== */

#app{
    display:flex;
    min-height:100vh;
}

.sidebar{
    width:264px;
    height:100vh;
    position:sticky;
    top:0;
    flex-shrink:0;
    background:var(--surface);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.sidebar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    padding:20px 20px 16px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}

.sidebar-brand-icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}
.sidebar-brand-icon img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.sidebar-brand-text{ font-weight:700; font-size:15px; color:var(--text); line-height:1.3; }
.sidebar-brand-sub{ font-size:11.5px; color:var(--text-tertiary); font-weight:500; }

.sidebar-nav{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:16px 12px;
}

/* .sidebar-group-label is a <summary> inside a <details> now - direct
   user request to make the sub-headings collapsible, one open at a
   time ("collapse the headings in the sidebar, let only one open at
   a time"). list-style/marker resets strip the browser's own
   disclosure triangle so the Material Symbols chevron below is the
   only one shown; cursor+flex make the label itself the click target,
   spanning the full row so the chevron lands flush right.
   Follow-up pass - direct user request ("need some more spacing and
   some icons") - added a leading icon per sub-heading (.sidebar-
   group-icon, same Material Symbols set every nav item already
   uses - see the 'icon' key added to each $navGroup above) and
   opened up the padding/gaps a bit (8px/6px -> 10px/8px top/bottom,
   row gap 2px -> 4px) so the collapsed list of sub-headings reads
   as separate rows rather than a dense stack. */
.sidebar-group-label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text-tertiary);
    padding:10px 10px 8px;
    cursor:pointer;
    list-style:none;
    user-select:none;
}
.sidebar-group-label::-webkit-details-marker{ display:none; }
.sidebar-group-label::marker{ content:""; }
.sidebar-group-label:hover{ color:var(--text-secondary); }

.sidebar-group-label-left{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
}

.sidebar-group-icon{
    font-size:15px !important;
    color:var(--text-tertiary);
    flex-shrink:0;
}
.sidebar-group-label:hover .sidebar-group-icon{ color:var(--text-secondary); }

.sidebar-group-chevron{
    font-size:16px !important;
    color:var(--text-tertiary);
    transition:transform .15s;
    flex-shrink:0;
}
details[open] > .sidebar-group-label .sidebar-group-chevron{ transform:rotate(180deg); }

/* The <details> element itself carries no box styling of its own -
   everything visible still comes from .sidebar-group-label (the
   <summary>) and .sidebar-item (the links inside) - margin-bottom
   (added on the same "need some more spacing" pass as the icons
   above) is the one exception, giving each collapsed sub-heading
   row breathing room from the next, matching the 2px .sidebar-item
   rows already use just at double the gap since these are bigger,
   bolder section labels rather than individual links. */
details.sidebar-group{ margin:0 0 4px; padding:0; }
details.sidebar-group[open]{ margin-bottom:6px; }

/* Top-level nav heading ("Summary Reports" / "Detailed Reports") -
   direct user request to restructure the executive nav under two
   such headings, each holding its own sub-headings (.sidebar-group-
   label above) and, under those, the actual report links. Bigger,
   bolder and darker than a sub-heading so the two-level hierarchy
   reads clearly, with a top border + extra margin for the "spacing
   between the main 2 heading sections" the request specifically
   asked for; the first heading skips both (.first) since it directly
   follows the standalone Overview/Tablet Compliance items above it,
   not another heading, and doesn't need a divider off of them. */
.sidebar-supergroup-label{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--text);
    padding:14px 10px 6px;
    margin-top:20px;
    border-top:1px solid var(--border);
}
.sidebar-supergroup-label.first{
    margin-top:8px;
    padding-top:0;
    border-top:none;
}

/* Page-level section divider, used where one page (e.g.
   Operations) stacks more than one distinct topic - not the
   same as .chart-card-title, which labels one card. */
.content-section-label{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--text-tertiary);
    margin:32px 0 14px;
    padding-top:24px;
    border-top:2px solid var(--border);
}
.content-section-label .material-symbols-rounded{
    font-size:17px;
    color:var(--accent);
}
.content-section-label:first-child{
    margin-top:0;
    padding-top:0;
    border-top:none;
}

.sidebar-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 10px;
    border-radius:8px;
    cursor:pointer;
    color:var(--text-secondary);
    font-size:13.5px;
    font-weight:500;
    margin-bottom:2px;
    transition:.12s;
}

.sidebar-item:hover{ background:var(--bg); color:var(--text); }

.sidebar-item.active{
    background:var(--primary-light);
    color:var(--primary);
    font-weight:600;
}

.sidebar-item.disabled{
    cursor:default;
    opacity:.45;
}

.sidebar-item.disabled:hover{ background:transparent; color:var(--text-secondary); }

.sidebar-item .material-symbols-rounded{ font-size:19px; }

.sidebar-footer-wrapper{ position:relative; flex-shrink:0; }

.sidebar-footer{
    padding:14px 20px;
    border-top:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:10px;
}

.sidebar-avatar{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--accent);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:13px;
    overflow:hidden;
    flex-shrink:0;
}
.sidebar-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.sidebar-user-name{
    font-size:13px;
    font-weight:600;
    color:var(--text);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.sidebar-user-email{
    font-size:11.5px;
    color:var(--text-tertiary);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ==========================================================
   Main Content
========================================================== */

.main{
    flex:1;
    display:flex;
    flex-direction:column;
    min-width:0;
}

.topbar{
    height:64px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    border-bottom:1px solid var(--border);
    background:var(--surface);
}

.topbar-title{ font-size:18px; font-weight:700; color:var(--text); }
.topbar-subtitle{ font-size:12.5px; color:var(--text-secondary); margin-top:2px; }

.content{
    flex:1;
    padding:28px;
}

/* ==========================================================
   Notices
========================================================== */

.notice{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border-radius:var(--radius);
    font-size:13.5px;
    margin-bottom:16px;
    background:var(--warning-light);
    color:var(--warning);
    border:1px solid #FDECC8;
}

.notice code{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:12.5px;
    background:rgba(0,0,0,.05);
    padding:1px 5px;
    border-radius:4px;
}

/* Reverted-ticket notice on maintenance-detail.php - same shape
   as the base .notice, danger-toned instead of warning-toned so a
   sent-back ticket reads as more urgent than the default amber
   notice. */
.notice-danger{
    background:var(--danger-light);
    color:var(--danger);
    border:1px solid var(--danger-light);
}

/* ==========================================================
   Page header (title row + search)
========================================================== */

.page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.page-header-search{
    position:relative;
    flex:1;
    max-width:320px;
    min-width:200px;
}

.page-header-search .material-symbols-rounded{
    position:absolute;
    left:11px;
    top:50%;
    transform:translateY(-50%);
    font-size:18px;
    color:var(--text-tertiary);
}

.page-header-search input{
    width:100%;
    height:38px;
    padding:0 12px 0 36px;
    border:1px solid var(--border);
    border-radius:8px;
    font-size:13.5px;
    background:var(--surface);
    font-family:var(--font);
}

.page-header-search input:focus{
    outline:none;
    border-color:var(--primary);
}

/* ==========================================================
   Buttons (ported subset - primary/danger/icon variants exist
   in the original but aren't needed here yet; add on demand)
========================================================== */

.btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:34px;
    padding:0 13px;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text-secondary);
    font-family:var(--font);
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    transition:.12s;
    white-space:nowrap;
    text-decoration:none;
}

.btn:hover{ background:var(--bg); color:var(--text); }
.btn .material-symbols-rounded{ font-size:16px; }

.btn-primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover{ background:var(--primary-dark); border-color:var(--primary-dark); }

.btn-secondary{ background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-secondary:hover{ background:var(--bg); }

.btn-danger{ background:var(--danger-light); color:var(--danger); border-color:transparent; }
.btn-danger:hover{ background:#FEE4E2; }

.btn-icon{
    width:34px;
    height:34px;
    padding:0;
    justify-content:center;
    background:transparent;
    border:1px solid transparent;
    color:var(--text-secondary);
    border-radius:7px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
}

.btn-icon:hover{ background:var(--bg); color:var(--text); }
.btn-icon.danger:hover{ background:var(--danger-light); color:var(--danger); }
.btn-icon .material-symbols-rounded{ font-size:18px; }

/* Direct user request 2026-09-17: a second camera icon, green
   background, distinguishing a maintenance-staff-submitted
   completion photo from the existing (plain) branch-submitted
   photo icon above - reuses .view-photo-btn's own JS/lightbox
   wiring (maintenance-list.js), this is styling only. */
.btn-icon.photo-completion-btn{ background:var(--success-light); color:var(--success); }
.btn-icon.photo-completion-btn:hover{ background:var(--success); color:#fff; }

.link-button{
    background:none;
    border:none;
    padding:0;
    font-size:11.5px;
    font-weight:600;
    color:var(--primary);
    cursor:pointer;
    text-decoration:underline;
}

.data-table td.actions-col{ text-align:right; white-space:nowrap; }
.table-cell-empty{ color:var(--text-tertiary); font-style:italic; }
.hidden{ display:none !important; }

/* ==========================================================
   Bulk actions
========================================================== */

.bulk-check-col{ width:36px; text-align:center !important; }
.bulk-check-col input[type="checkbox"]{ width:16px; height:16px; cursor:pointer; }

.bulk-action-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 16px;
    background:var(--primary-light);
    border:1px solid var(--primary);
    border-radius:var(--radius);
    margin-bottom:16px;
    font-size:13px;
    font-weight:600;
    color:var(--primary-dark);
}

.bulk-action-buttons{ display:flex; gap:8px; }

.bulk-field-row{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

.bulk-field-row .form-input,
.bulk-field-row .form-select{ flex:1; }

.bulk-field-toggle{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:12.5px;
    font-weight:600;
    color:var(--text);
    cursor:pointer;
    min-width:140px;
    flex-shrink:0;
}

.bulk-field-toggle input[type="checkbox"]{ width:15px; height:15px; cursor:pointer; }

/* ==========================================================
   Modal (Admin Panel add/edit forms)
========================================================== */

.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(16,24,40,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
    padding:20px;
}

.modal-box{
    background:var(--surface);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    width:100%;
    max-width:480px;
    max-height:88vh;
    display:flex;
    flex-direction:column;
}

.modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 22px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}

.modal-title{ font-size:16px; font-weight:700; }
.modal-close{ cursor:pointer; color:var(--text-tertiary); font-size:22px; line-height:1; }
.modal-close:hover{ color:var(--text); }
.modal-body{ padding:20px 22px; overflow-y:auto; }

.modal-footer{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    padding:16px 22px;
    border-top:1px solid var(--border);
    flex-shrink:0;
}

/* ==========================================================
   Form fields
========================================================== */

.form-group{ margin-bottom:16px; }

/* ops_platform maintenance detail - spare parts / purchases
   row editors (public/assets/maintenance.js) */
.dynamic-row{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:8px;
}
.dynamic-row .form-select,
.dynamic-row .form-input{
    flex:1;
    min-width:0;
}
.dynamic-row .qty-input,
.dynamic-row .cost-input{
    flex:0 0 90px;
}
.dynamic-row-empty{
    font-size:13px;
    padding:4px 0 8px;
}
.dynamic-row .bill-status{
    flex:1;
    min-width:0;
    font-size:12.5px;
}
.dynamic-row .bill-input{
    font-size:11.5px;
    max-width:100%;
}

.form-label{
    display:block;
    font-size:12.5px;
    font-weight:600;
    color:var(--text);
    margin-bottom:6px;
}

.form-label .required-mark{ color:var(--danger); margin-left:2px; }
.form-help{ font-size:11.5px; color:var(--text-tertiary); margin-top:4px; line-height:1.4; }

.form-input,
.form-select,
.form-textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:8px;
    padding:0 12px;
    font-size:13.5px;
    font-family:var(--font);
    background:var(--surface);
    color:var(--text);
}

.form-input,
.form-select{ height:38px; }
.form-textarea{ padding:10px 12px; min-height:80px; resize:vertical; }

.form-input:focus,
.form-select:focus,
.form-textarea:focus{
    outline:none;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(64,36,23,.08);
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled{
    background:var(--bg);
    color:var(--text-tertiary);
    cursor:not-allowed;
}

.searchable-select-wrap{ position:relative; }
.searchable-select-list{
    position:absolute;
    top:calc(100% + 4px);
    left:0;
    right:0;
    z-index:50;
    max-height:200px;
    overflow-y:auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 4px 16px rgba(16,24,40,.12);
}
.searchable-select-list.hidden{ display:none; }
.searchable-select-option{
    padding:8px 12px;
    font-size:13px;
    cursor:pointer;
}
.searchable-select-option:hover{ background:var(--bg); }
.searchable-select-empty{
    padding:8px 12px;
    font-size:13px;
    color:var(--text-tertiary);
    font-style:italic;
}

.form-error{ color:var(--danger); font-size:11.5px; margin-top:4px; }

/* ==========================================================
   Toast
========================================================== */

#toastContainer{
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:10001;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.toast{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 16px;
    border-radius:9px;
    font-size:13px;
    font-weight:500;
    box-shadow:var(--shadow-md);
    min-width:240px;
    color:#fff;
}

.toast-success{ background:var(--success); }
.toast-error{ background:var(--danger); }

/* ==========================================================
   Sortable table columns
========================================================== */

.data-table th.sortable{ cursor:pointer; user-select:none; }
.data-table th.sortable:hover{ color:var(--text); }

.data-table th.sortable .sort-arrow{
    display:inline-block;
    margin-left:3px;
    font-size:10px;
    opacity:.4;
}

.data-table th.sortable.sort-active .sort-arrow{
    opacity:1;
    color:var(--primary);
}

/* ==========================================================
   Table toolbar (injected by tables.js - sort hint + export)
========================================================== */

.table-toolbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    padding:10px 14px;
    border-bottom:1px solid var(--border);
    background:#FBFBFC;
}

.table-toolbar-hint{
    font-size:11.5px;
    color:var(--text-tertiary);
    margin-right:auto;
}

.table-search-input{
    width:200px;
    flex-shrink:0;
}

/* ==========================================================
   Print - a page's "Export PDF" button is just window.print().
   Strip everything that isn't the report itself.
========================================================== */

@media print{
    .sidebar, .topbar-actions, .page-header-search,
    .table-toolbar, .chart-tooltip, .notice,
    .sidebar-item, .empty-state .material-symbols-rounded{
        display:none !important;
    }
    .content{ padding:0; }
    .chart-card, .table-card, .overview-card{
        box-shadow:none;
        border:1px solid #ccc;
        break-inside:avoid;
    }
    body{ background:#fff; }
}


/* ==========================================================
   Overview cards
========================================================== */

.overview-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:14px;
    margin-bottom:20px;
}

.overview-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:18px 20px;
}

.overview-card-label{ font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
.overview-card-value{ font-size:26px; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.overview-card-sub{ font-size:12px; color:var(--text-tertiary); margin-top:4px; }

/* ==========================================================
   Chart card
========================================================== */

.chart-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:20px 20px 12px;
    margin-bottom:20px;
}

.chart-card-title{ font-size:14px; font-weight:700; color:var(--text); margin-bottom:4px; }
.chart-card-sub{ font-size:12px; color:var(--text-tertiary); margin-bottom:14px; }
.chart-legend{ display:flex; gap:14px; margin:-8px 0 10px; }
.chart-legend-item{ display:flex; align-items:center; gap:5px; font-size:11px; font-weight:600; color:var(--text-tertiary); }
.chart-legend-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.chart-legend-dot.current{ background:var(--primary); }
.chart-legend-dot.previous{ background:var(--primary); opacity:0.35; }


/* ---------------------------------------------------------------
   Shared stat/metric card system - one canonical card component
   used across the Executive pages that show a row of KPI/metric
   figures. Before this, ~9 pages each hand-rolled their own bare
   label+value box (own class name, own CSS, no icon, no trend
   pill, no shared shadow/radius) - overview.php's .sm-kpi-tile
   redesign already established the visual language (white surface,
   border, shadow, rounded-lg radius, Outfit tabular-figure values);
   this extracts that same language into reusable classes so every
   other page's cards can adopt it without redefining it, and so a
   future visual tweak only has to happen in one place.

   Structure: .stat-card > .stat-card-head (icon chip + label) +
   .stat-card-value-row (value + optional .sm-pct trend pill) +
   optional .stat-card-sub (small caption line).
   ------------------------------------------------------------- */
.stat-card{ position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; box-shadow:var(--shadow-sm); transition:box-shadow .15s ease, transform .15s ease; }
.stat-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px); }
.stat-card-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.stat-card-icon{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--primary-light); color:var(--primary); flex-shrink:0; }
.stat-card-icon .material-symbols-rounded{ font-size:18px; }
.stat-card-icon.tone-accent{ background:#FBEFE3; color:var(--accent); }
.stat-card-icon.tone-success{ background:var(--success-light); color:var(--success); }
.stat-card-icon.tone-danger{ background:var(--danger-light); color:var(--danger); }
.stat-card-icon.tone-warning{ background:var(--warning-light); color:var(--warning); }
.stat-card-icon.tone-info{ background:var(--info-light); color:var(--info); }
.stat-card-icon.tone-dark{ background:rgba(255,255,255,.16); color:#fff; }
.stat-card-label{ font-size:11px; font-weight:600; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.045em; }
.stat-card-value-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.stat-card-value{ font-size:22px; font-weight:700; color:var(--text); letter-spacing:-0.01em; font-variant-numeric:tabular-nums; }
.stat-card-sub{ font-size:11.5px; color:var(--text-secondary); margin-top:6px; }
.stat-card.dark{ background:var(--primary); border-color:var(--primary); }
.stat-card.dark .stat-card-label{ color:#D9C7B5; }
.stat-card.dark .stat-card-value{ color:#fff; }

/* Trend pill - up/down percent badge next to a .stat-card-value or
   a table cell (overview.php's own $pctBadge() helper already
   produces this markup; moved here from being duplicated per-page
   so any page can use the same badge without redefining it). */
.sm-pct{ font-size:11px; font-weight:700; margin-left:4px; padding:2px 8px; border-radius:8px; white-space:nowrap; }
.sm-pct.up{ background:#E8F7EF; color:#0D8A4C; }
.sm-pct.down{ background:#FEF3F2; color:#D92D20; }

.chart{ width:100%; height:auto; display:block; }
.chart-line{ fill:none; stroke:var(--primary); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.chart-bar-secondary{ fill:#8A9BE0; opacity:0.55; }
.chart-line-previous{ fill:none; stroke:var(--primary); stroke-width:1.75; stroke-linejoin:round; opacity:0.35; }
.chart-dot{ fill:var(--accent); stroke:#fff; stroke-width:2.5; r:5.5; }
.chart-weekend{ stroke:var(--border); stroke-width:1; stroke-dasharray:2 4; }
.chart-target{ stroke:var(--text-tertiary); stroke-width:1; stroke-dasharray:4 3; }
.chart-target-label{ font-size:10.5px; fill:var(--text-tertiary); text-anchor:end; }
.chart-label{ font-size:11px; fill:var(--text-tertiary); }
.chart-peak{ font-size:11px; fill:var(--text-tertiary); letter-spacing:.05em; }
.chart-empty{ font-size:13.5px; color:var(--text-tertiary); padding:20px 0; }

.chart-wrap{ position:relative; cursor:crosshair; }

.chart-hover-line{
    stroke:var(--text-tertiary);
    stroke-width:1;
    opacity:0;
    pointer-events:none;
    transition:opacity .08s;
}

.chart-hover-dot{
    fill:var(--primary);
    stroke:#fff;
    stroke-width:2;
    opacity:0;
    pointer-events:none;
    transition:opacity .08s;
}

.chart-tooltip{
    display:none;
    position:fixed;
    left:0;
    top:0;
    z-index:10000;
    pointer-events:none;
    background:var(--primary-dark);
    color:#fff;
    padding:7px 11px;
    border-radius:8px;
    box-shadow:var(--shadow-md);
    line-height:1.35;
    white-space:nowrap;
}

.chart-tooltip-date{
    font-size:10.5px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
    opacity:.75;
}

.chart-tooltip-value{
    font-size:14px;
    font-weight:700;
    margin-top:1px;
}

.chart-tooltip-title{
    font-size:11.5px;
    font-weight:700;
    opacity:.9;
}

.chart-tooltip-sub{
    font-size:12px;
    opacity:.85;
    margin-top:1px;
}

.trend-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

/* trend-grid's own gap already spaces its children correctly in
   both directions (including the single-column mobile fallback
   below) - a child .table-card's own margin-bottom would double
   up with that gap, or unevenly leave one side-by-side card with
   trailing space the other lacks. */
.trend-grid > .table-card{ margin-bottom:0; }

@media(max-width:900px){
    .trend-grid{ grid-template-columns:1fr; }
}

/* Full-width sections stacked vertically - for content (like a
   wide table with many columns) that shouldn't be squeezed into
   a side-by-side grid. No gap here: .table-card supplies its own
   margin-bottom, and a gap on top of that would double the space
   between sections. */
.stacked-sections{
    display:flex;
    flex-direction:column;
}

/* ==========================================================
   Table
========================================================== */

.table-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    margin-bottom:20px;
}

/* Last stacked section on a page needs no trailing margin - an
   explicit opt-out for the common "last card on the page" case,
   rather than relying on every view to remember an inline
   override. */
.table-card:last-child{ margin-bottom:0; }

.table-card-head{ padding:18px 20px 4px; }
.table-card-head .chart-card-title{ margin-bottom:2px; }

.table-scroll{ overflow-x:auto; }

table.data-table{ width:100%; border-collapse:collapse; }

.data-table thead th{
    text-align:left;
    font-size:11.5px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    color:var(--text-tertiary);
    padding:11px 16px;
    border-bottom:1px solid var(--border);
    background:#FBFBFC;
    white-space:nowrap;
}

.data-table tbody td{
    padding:12px 16px;
    font-size:13.5px;
    color:var(--text);
    border-bottom:1px solid var(--border);
    vertical-align:middle;
    white-space:nowrap;
}

.data-table tbody tr:last-child td{ border-bottom:none; }

/*
 * Every totals/"Grand Total" row across the app (12 views use
 * <tfoot> for one) sits inside a tfoot, not a tbody - so it never
 * inherited the base cell rule above (padding, font-size, color,
 * vertical-align), which only ever targeted "tbody td". Each page
 * layers its own font-weight/background onto its own total-row
 * class (e.g. .ns-total-row td), but none of them re-add the
 * missing padding - so every totals row rendered flush against its
 * own cell edges (near-zero padding) while the data rows above it
 * kept their normal 12px/16px padding, throwing off both the row's
 * height and the right-aligned numeric columns' apparent alignment
 * against the column above (same column boundaries, just no
 * padding to match). Restoring the same base rule for tfoot cells
 * fixes it everywhere at once, the same way thead/tbody's shared
 * rules already do, rather than patching padding into 12 separate
 * inline <style> blocks.
 */
.data-table tfoot td{
    padding:12px 16px;
    font-size:13.5px;
    color:var(--text);
    vertical-align:middle;
    white-space:nowrap;
}
.data-table tbody tr:hover{ background:#FBFBFC; }
.data-table tbody tr.clickable-row{ cursor:pointer; }

.data-table td.num, .data-table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.data-table td.strong{ font-weight:700; }
.table-cell-secondary{ color:var(--text-secondary); }

/* Direct user bug report: maintenance list's Incident cell was
   set to max-width:280px inline with no override of the base
   .data-table tbody td{ white-space:nowrap } rule - nowrap plus a
   max-width but no overflow:hidden doesn't truncate anything, it
   just lets the text render past the cell's box straight over the
   next columns ("the incident goes through the cells"). Wrapping
   the text within its own column (rather than single-line
   ellipsis truncation) so the full incident description stays
   readable without opening the ticket. */
.data-table td.maint-incident-cell{
    /* Selector has to out-specify ".data-table tbody td{ white-space:
       nowrap }" (0,1,2) - a bare ".maint-incident-cell" class (0,1,0)
       loses to it regardless of source order, which is exactly why
       the first attempt at this fix still overflowed live (direct
       bug report, second screenshot: "its still going through the
       cells" - confirmed by checking the deployed commit still had
       the old, losing selector). */
    max-width:280px;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:break-word;
}

.branch-name{ display:block; font-weight:600; }
.branch-code{ display:block; font-size:11px; color:var(--text-tertiary); font-variant-numeric:tabular-nums; }

/* ==========================================================
   Badges (for status / freshness indicators)
========================================================== */

.badge{
    display:inline-flex;
    align-items:center;
    padding:3px 10px;
    border-radius:20px;
    font-size:11.5px;
    font-weight:600;
}

.badge-success{ background:var(--success-light); color:var(--success); }
.badge-danger{ background:var(--danger-light); color:var(--danger); }
.badge-warning{ background:var(--warning-light); color:var(--warning); }
.badge-neutral{ background:var(--bg); color:var(--text-secondary); }
.badge-hold{ background:#E7E8FB; color:#4B4FC4; }
.badge-pending-approval{ background:#FDF2E3; color:#C2410C; }

/* ==========================================================
   Photo lightbox - quick-view for a table row's own photo
   without navigating away from the table (maintenance list's
   camera-icon column). Plain, page-agnostic: any page can drop
   in #photoLightbox and call PhotoLightbox.open(url).
========================================================== */

.photo-lightbox{
    position:fixed; inset:0; z-index:1000;
    display:flex; align-items:center; justify-content:center;
}
.photo-lightbox.hidden{ display:none !important; }
.photo-lightbox-backdrop{
    position:absolute; inset:0; background:rgba(20,14,10,0.72);
}
.photo-lightbox-content{
    position:relative; max-width:90vw; max-height:90vh;
}
.photo-lightbox-content img{
    display:block; max-width:90vw; max-height:90vh;
    border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,0.4);
}
.photo-lightbox-close{
    position:absolute; top:-14px; right:-14px; width:32px; height:32px;
    border-radius:50%; border:none; background:#fff; color:#2a2118;
    font-size:18px; line-height:1; cursor:pointer;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

/* ==========================================================
   Empty state
========================================================== */

.empty-state{ text-align:center; padding:64px 24px; color:var(--text-tertiary); }
.empty-state .material-symbols-rounded{ font-size:40px; color:var(--text-tertiary); margin-bottom:10px; }
.empty-state-title{ font-size:14.5px; font-weight:600; color:var(--text-secondary); margin-bottom:4px; }
.empty-state-sub{ font-size:12.5px; }

/* ==========================================================
   Footer
========================================================== */

.foot{ font-size:12px; color:var(--text-tertiary); padding:6px 0 40px; }

@media(max-width:900px){
    .sidebar{ display:none; }
    .content{ padding:20px; }
}

/*
 * Shared 2-row filter form - direct user request applying to every
 * executive page with the new filter set: "if there is a date
 * filter then keep date filter in one row and move all other
 * filters to row 2, so that it ensures that filters don't break to
 * two rows." A single flex-wrap row was letting the browser decide
 * where the wrap happened (usually mid-way through a dropdown row,
 * different at every viewport width) - two explicit rows means the
 * date inputs are always together, and the dropdowns are always
 * together, regardless of window width.
 *
 * Added here (not inline per-page) so every page adopts the exact
 * same rule as this gets rolled out, rather than each page carrying
 * its own copy that can drift.
 */
.exec-filter-form{ margin-bottom:20px; }
.exec-filter-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.exec-filter-row + .exec-filter-row{ margin-top:10px; }
/* The 2nd row is actually .ms-filter-group (filter-panel.php's own
   root), not another .exec-filter-row, so the rule above never
   fired between the date row and the filter row - real bug, fixed
   here rather than by renaming either class (both are reused too
   widely elsewhere to risk it). */
.exec-filter-row + .ms-filter-group{ margin-top:14px; }
.exec-filter-form label{ font-size:12px; font-weight:600; color:var(--text-secondary); margin-right:-4px; }
.exec-filter-form select, .exec-filter-form input{ height:36px; }

/*
 * Multi-select filter dropdown (resources/views/executive/partials/
 * filter-panel.php + public/assets/multi-select.js) - direct user
 * request: "all filters need to multiselect capable."
 *
 * Dropdowns flex-grow to fill the row (rather than the row's own
 * justify-content:space-between spreading small, fixed-width pills
 * apart with dead space between them - direct user feedback: "just
 * blank space" between them, "make the filter dropdowns bigger").
 * Apply stays its normal compact button size since it isn't given
 * flex-grow.
 */
.ms-filter-group{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }
/* Direct user report: at realistic window widths the row was
   breaking into 2 lines (4 dropdowns, then the last 2 dropping to
   their own row below) - flex-wrap:wrap plus a 160px basis looked
   fine with short placeholder text ("All") but real trigger content
   (a multi-select summary like "3 selected", or a long "CODE - Name"
   store label) is wider than that, and once a real value pushed the
   row past the container width it wrapped rather than shrinking -
   the browser won't shrink a flex item below its own content's
   width unless min-width is overridden.
   Fix: the 6 dropdowns live in their own .ms-filter-scroll strip
   that scrolls horizontally instead of wrapping (nowrap on both this
   row and the strip), and Apply sits outside that strip as a plain
   sibling - so on a genuinely narrow window the FILTERS scroll but
   Apply never gets pushed off-screen with them. At every desktop
   width actually seen in use this never needs to scroll at all. */
.ms-filter-scroll{
    display:flex; align-items:center; gap:10px;
    flex:1 1 auto; min-width:0; overflow-x:auto;
}
/* flex:1 1 0 (a shared, zero basis) is what makes every dropdown end
   up the SAME width rather than each growing in proportion to its
   own content (direct user request: "equal size for each filter
   box"); min-width:135px is the floor before a dropdown starts
   truncating its value text (via .ms-trigger-value's own ellipsis)
   instead of shrinking further - short enough that all 6 comfortably
   fit without scrolling from ~1280px content width up, the practical
   floor for this dashboard. */
.ms-dropdown{ position:relative; flex:1 1 0; min-width:135px; }
.ms-trigger{
    display:flex; align-items:center; justify-content:space-between; gap:8px; height:42px; padding:0 14px;
    width:100%;
    background:#fff; border:1px solid var(--border); border-radius:8px;
    font-size:13.5px; color:var(--text-primary); cursor:pointer; white-space:nowrap;
}
.ms-trigger:hover{ border-color:#C7BDB2; }
.ms-trigger-label{ font-weight:600; color:var(--text-secondary); }
.ms-trigger-value{ font-weight:600; max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.ms-trigger-caret{ font-size:16px; color:var(--text-secondary); transition:transform 0.15s; }
.ms-dropdown.is-open .ms-trigger-caret{ transform:rotate(180deg); }
.ms-dropdown.is-open .ms-trigger{ border-color:#402417; }

/* position:fixed (not absolute) - direct user report: after the
   task-23 fix wrapped the 6 dropdowns in .ms-filter-scroll
   (overflow-x:auto, needed so the trigger row itself doesn't wrap to
   2 lines), the CSS overflow spec quietly forces overflow-y to
   'auto' too the moment overflow-x isn't 'visible' - so this panel,
   an absolutely-positioned child of that now-clipping strip, was
   being cropped to the strip's own ~42px height and effectively
   invisible every time it opened. There's no CSS-only way to have a
   horizontally-scrolling row AND an unclipped child popping out
   below it - fixed positioning sidesteps the whole conflict by
   escaping the scroll strip's containing block entirely.
   top/left are set here only as a pre-JS fallback; multi-select.js
   overwrites both with the trigger's real getBoundingClientRect()
   position the moment a dropdown opens, since a fixed-position panel
   has no ancestor to anchor "below its own trigger" to on its own. */
.ms-panel{
    display:none; position:fixed; top:0; left:0; z-index:1000;
    min-width:200px; max-height:280px; overflow-y:auto;
    background:#fff; border:1px solid var(--border); border-radius:10px;
    box-shadow:0 4px 16px rgba(16,24,40,.12); padding:8px;
}
.ms-dropdown.is-open .ms-panel{ display:block; }
.ms-option{
    display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px;
    font-size:13px; color:var(--text-primary); cursor:pointer; white-space:nowrap;
}
.ms-option:hover{ background:#F7F8FA; }
.ms-option input[type="checkbox"]{ margin:0; flex-shrink:0; }

.ms-panel-actions{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:2px 8px 8px; margin-bottom:4px; border-bottom:1px solid var(--border);
}
.ms-panel-action{
    background:none; border:none; padding:2px 0; font-size:12px; font-weight:700;
    color:var(--accent); cursor:pointer;
}
.ms-panel-action:hover{ text-decoration:underline; }

/* Search box inside a filter panel - only rendered (by the PHP
   partial) when a dropdown has more than 8 options, since a short
   list doesn't need one. Sits above the Select All/Deselect All row. */
.ms-search-wrap{ padding:2px 8px 8px; }
.ms-search{
    width:100%; height:32px; padding:0 10px;
    background:#fff; border:1px solid var(--border); border-radius:6px;
    font-size:13px; color:var(--text-primary);
}
.ms-search:focus{ outline:none; border-color:#402417; }
.ms-no-matches{ padding:10px 8px; font-size:13px; color:var(--text-secondary); text-align:center; }


/*
 * Loading overlay for exec-filters.js - shown the instant a filter
 * changes or Apply is clicked, hidden again once the new page has
 * actually rendered (a fresh page load has no JS state carried over,
 * so the overlay simply doesn't exist until the next filter change).
 */
.exec-loading-overlay{
    position:fixed; inset:0; background:rgba(255,255,255,0.6);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; opacity:0; pointer-events:none;
    transition:opacity 0.15s ease;
}
.exec-loading-overlay.is-visible{ opacity:1; pointer-events:all; }
.exec-loading-spinner{
    width:40px; height:40px; border-radius:50%;
    border:4px solid #E4E7EC; border-top-color:#402417;
    animation:exec-spin 0.7s linear infinite;
}
@keyframes exec-spin{ to{ transform:rotate(360deg); } }



/* ===== Cashier Closing Handover (direct user request) =====
   Shift-grouped sections inside each branch's Cashier Closing
   card, one per closing, each with a WhatsApp-style double-tick:
   blue = verified, no variance. Orange (reusing --warning, this
   app's existing amber/orange status color) = verified WITH a
   variance, in which case an "Originally submitted" panel below
   shows the pre-correction figures - accountant/admin (the only
   roles with access to this page at all) can always see both old
   and new. */
.cashier-shift-group{ margin-bottom:18px; }
.cashier-shift-group:last-child{ margin-bottom:0; }

.cashier-shift-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 20px;
    background:var(--bg);
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
}

.cashier-shift-title{ font-weight:600; font-size:13px; color:var(--text); }
.cashier-shift-employee{ font-weight:400; color:var(--text-secondary); margin-left:8px; }

.cashier-shift-tick{ display:flex; align-items:center; gap:6px; }
.cashier-tick{ font-size:20px; }
.cashier-tick-verified{ color:var(--info); }
.cashier-tick-variance{ color:var(--warning); }
.cashier-tick-pending{ color:var(--text-tertiary); font-size:18px; }

.cashier-tick-label{ font-size:12px; font-weight:600; }
.cashier-tick-label-verified{ color:var(--info); }
.cashier-tick-label-variance{ color:var(--warning); }
.cashier-tick-label-pending{ color:var(--text-tertiary); font-weight:500; }

.cashier-original-panel{
    margin:0 20px 16px;
    padding:12px 14px;
    background:var(--warning-light);
    border:1px solid var(--warning);
    border-radius:var(--radius);
}

.cashier-original-head{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:600;
    color:var(--warning);
    margin-bottom:8px;
}
.cashier-original-head .material-symbols-rounded{ font-size:16px; }

.cashier-original-table{ background:transparent; }

/* Cashier Closing - admin edit/void (direct user request, "need a
   cashier closing edit or delete functionality in admin"). Icons
   sit next to the tick, reusing the same rmv-edit-icon-style
   convention as Raw Material Variance's own admin edit affordance. */
.cashier-admin-actions{ display:flex; align-items:center; gap:4px; margin-left:10px; }
.cashier-admin-icon{
    font-size:18px;
    color:var(--text-tertiary);
    cursor:pointer;
    padding:4px;
    border-radius:6px;
}
.cashier-admin-icon:hover{ background:var(--bg); color:var(--text); }
.cashier-admin-icon-danger:hover{ background:var(--danger-light); color:var(--danger); }

.cashier-voided-panel{ margin-bottom:20px; opacity:.85; }

.modal-box-wide{ max-width:760px; }

.cashier-modal-empty{ font-size:13px; color:var(--text-tertiary); padding:8px 0; }

.cashier-modal-warning{
    display:flex;
    align-items:flex-start;
    gap:8px;
    padding:10px 12px;
    margin-bottom:16px;
    background:var(--warning-light);
    border:1px solid var(--warning);
    border-radius:var(--radius);
    font-size:12.5px;
    color:var(--text);
}
.cashier-modal-warning .material-symbols-rounded{ font-size:18px; color:var(--warning); flex-shrink:0; }

.cashier-edit-slip{ margin-bottom:14px; }
.cashier-edit-slip-title{ font-size:12.5px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.cashier-edit-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:10px;
}
.cashier-edit-grid .form-group{ margin-bottom:0; }

/* Branch Handover (Ops dashboard) - direct user request. Mirrors
   the Cashier Closing admin edit/void CSS above one-for-one
   (.cashier-admin-icon etc.) under its own bh- prefix rather than
   reusing those classes directly, so this new page's markup isn't
   coupled to a same-looking-but-differently-named feature elsewhere -
   purely additive, nothing above this comment was touched. */
.bh-admin-actions{ display:flex; align-items:center; gap:4px; }
.bh-admin-icon{
    font-size:18px;
    color:var(--text-tertiary);
    cursor:pointer;
    padding:4px;
    border-radius:6px;
}
.bh-admin-icon:hover{ background:var(--bg); color:var(--text); }
.bh-admin-icon-danger:hover{ background:var(--danger-light); color:var(--danger); }
.bh-voided-panel{ margin-bottom:20px; opacity:.85; }
.bh-modal-empty{ font-size:13px; color:var(--text-tertiary); padding:8px 0; }

.bh-party-line{ font-size:12.5px; color:var(--text-secondary); }
.bh-party-line strong{ color:var(--text); font-weight:600; }

.bh-detail-section{ margin-bottom:16px; }
.bh-detail-section-title{
    font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--text-tertiary); border-bottom:1px solid var(--border); padding-bottom:4px; margin-bottom:8px;
}
.bh-detail-empty{ font-size:12.5px; color:var(--text-tertiary); font-style:italic; }

.bh-sig-pad-wrap{ margin-top:6px; }
.bh-sig-pad-canvas{
    width:100%; height:150px; border:2px dashed var(--border); border-radius:var(--radius);
    touch-action:none; background:#fff; display:block;
}
.bh-sig-pad-actions{ display:flex; justify-content:flex-end; margin-top:6px; }

.bh-kickback-note{
    background:var(--warning-light); border:1px solid var(--warning); border-radius:var(--radius);
    padding:8px 10px; font-size:12.5px; white-space:pre-wrap; color:var(--text);
}

/* ==========================================================
   Maintenance manager UI overhaul - area cards, filter bar,
   List/Board view toggle, Kanban board. Direct user request:
   "a UI overhaul for the maintenance manager, a simpler
   interface... dashboard sectorized by area... easy to
   maintain, easy to navigate, easy to work with." Reuses every
   existing token/component this file already defines
   (--primary/--border/--radius, .overview-card, .badge-*,
   .btn/.btn-icon, .form-select, .table-card, .empty-state) -
   nothing below invents a new color or spacing scale.
========================================================== */

.area-card-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}

.area-card{
    display:flex;
    align-items:center;
    gap:8px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:10px 16px;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    cursor:pointer;
    transition:border-color .12s, color .12s, background .12s;
}

.area-card:hover{
    border-color:var(--accent);
    color:var(--text);
}

.area-card.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

.area-card-name{ white-space:nowrap; }

.area-card-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:var(--bg);
    color:var(--text-secondary);
    font-size:11px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

.area-card.active .area-card-count{
    background:rgba(255,255,255,.22);
    color:#fff;
}

/* Filter bar */

.maint-filter-bar{
    display:flex;
    /* Direct user request: "the filters can all be in one line" -
       the search/select controls live in their own nested
       .maint-filter-controls row (below) that scrolls horizontally
       if it ever doesn't fit; the List/Board toggle sits OUTSIDE
       that scrollable row as its own flex item, so it's always
       visible/clickable regardless of window width - a first
       attempt made the whole bar (toggle included) one scrollable
       row and that scrolled the toggle out of view on a narrower
       window (direct bug report: "where is board view now?"). */
    flex-wrap:nowrap;
    align-items:center;
    gap:10px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    padding:12px 14px;
    margin-bottom:20px;
}

.maint-filter-controls{
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:8px;
    flex:1 1 auto;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:2px;
}

.maint-filter-search{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1 1 170px;
    min-width:130px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:0 12px;
    height:38px;
}

.maint-filter-search .material-symbols-rounded{
    font-size:18px;
    color:var(--text-tertiary);
}

.maint-filter-search input{
    flex:1;
    border:none;
    background:none;
    outline:none;
    font-family:inherit;
    font-size:13px;
    color:var(--text);
    height:100%;
}

.maint-filter-bar .form-select{
    flex:0 1 auto;
    width:auto;
    max-width:150px;
    min-width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.maint-filter-checkbox{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:600;
    color:var(--text-secondary);
    white-space:nowrap;
    cursor:pointer;
    flex:0 0 auto;
}

#maintFilterClear{
    flex:0 0 auto;
}

.maint-filter-checkbox input{ cursor:pointer; }

/* List/Board segmented toggle */

.view-toggle{
    display:flex;
    margin-left:auto;
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    flex-shrink:0;
}

.view-toggle-btn{
    display:flex;
    align-items:center;
    gap:6px;
    padding:0 14px;
    height:38px;
    border:none;
    background:var(--surface);
    color:var(--text-secondary);
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:background .12s, color .12s;
}

.view-toggle-btn .material-symbols-rounded{ font-size:18px; }

.view-toggle-btn + .view-toggle-btn{ border-left:1px solid var(--border); }

.view-toggle-btn:hover{ background:var(--bg); }

.view-toggle-btn.active{
    background:var(--primary);
    color:#fff;
}

/* Kanban board */

.board-view{ margin-bottom:20px; }

.board-columns{
    display:grid;
    grid-template-columns:repeat(6, minmax(240px, 1fr));
    gap:14px;
    overflow-x:auto;
    padding-bottom:4px;
}

.board-column{
    display:flex;
    flex-direction:column;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    min-height:120px;
    max-height:calc(100vh - 340px);
    min-width:240px;
}

.board-column-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
}

.board-column-title{
    font-size:12.5px;
    font-weight:700;
    color:var(--text);
    text-transform:uppercase;
    letter-spacing:.03em;
}

.board-column-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text-secondary);
    font-size:11px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
}

.board-column-body{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:12px;
    overflow-y:auto;
    flex:1;
}

.board-column-terminal{ background:transparent; }

.board-column-drop-only{
    display:flex;
    align-items:center;
    justify-content:center;
}

.board-column-hint{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
    color:var(--text-tertiary);
    font-size:12px;
    padding:20px 12px;
    border:2px dashed var(--border);
    border-radius:var(--radius);
}

.board-column-hint .material-symbols-rounded{ font-size:22px; }

.board-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:12px;
    cursor:grab;
    transition:box-shadow .12s, border-color .12s;
}

.board-card[draggable="true"]:hover{
    border-color:var(--accent);
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.board-card:active{ cursor:grabbing; }

.board-card-top{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:8px;
}

.board-card-branch{
    display:flex;
    flex-direction:column;
    margin-bottom:6px;
}

.board-card-incident{
    font-size:12.5px;
    color:var(--text-secondary);
    line-height:1.4;
    margin-bottom:10px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.board-card-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding-top:8px;
    border-top:1px solid var(--border);
}

.board-card-assignee{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:11.5px;
    font-weight:600;
    color:var(--text-tertiary);
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.board-card-assignee .material-symbols-rounded{ font-size:15px; flex-shrink:0; }

.board-card-actions{
    display:flex;
    align-items:center;
    gap:2px;
    flex-shrink:0;
}

.board-card-actions .btn-icon{ padding:3px; }
.board-card-actions .btn-icon .material-symbols-rounded{ font-size:17px; }

@media (max-width:1100px){
    .board-columns{ grid-template-columns:repeat(3, minmax(240px, 1fr)); }
}

@media (max-width:700px){
    .board-columns{ grid-template-columns:repeat(2, minmax(220px, 1fr)); }
    .view-toggle{ margin-left:0; }
}