/* Copied unchanged from CADeskPro (CADeskPro-Server/static/css/theme_d.css) so
   GST Suite looks exactly like CADeskPro. To pick up a CADeskPro restyle,
   copy that file over this one again (keep this note). GST Suite-specific
   mappings live in gst_bridge.css, which loads after this file. */

/* =====================================================================
   theme_d.css -- "Option D · Workspace" (v1.5.0)
   Brown theme (v1.6.0): brown actions, near-black text, light brown page;
   small Plus Jakarta Sans type,
   capsule buttons. Loaded AFTER base.html's own <style>, so it re-points
   the shared design tokens (every page already styles itself through
   them) and then restyles the shared components and the app shell
   (top capsule menu + grouped side panel). Page-specific templates need
   no changes for the colours/type to follow.
   ===================================================================== */

@font-face{
    font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:400 700; font-display:swap;
    src:url("../fonts/PlusJakartaSans-latin.woff2") format("woff2");
    unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
    font-family:"Plus Jakarta Sans"; font-style:normal; font-weight:400 700; font-display:swap;
    src:url("../fonts/PlusJakartaSans-latin-ext.woff2") format("woff2");
    unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
    /* v1.6.0 Brown theme: brown actions, near-black text, a very light
       brown page (never plain white) and a dark brown side menu. Every
       primary action, active state and focus ring follows "brand". */
    --brand-50:#F5ECE1; --brand-100:#EDE0CF; --brand-200:#DCC8B2; --brand-300:#C4A98B;
    --brand-400:#9C7454; --brand-500:#8B5A36; --brand-600:#7B4A2A; --brand-700:#5E3519;
    --brand-800:#4A2912; --brand-900:#3E2B1F;
    --accent2-500:#8B5A36; --accent2-600:#7B4A2A; --accent2-700:#5E3519;
    --brand-gradient: linear-gradient(#7B4A2A, #7B4A2A);
    --brand-gradient-hover: linear-gradient(#5E3519, #5E3519);

    --ink-50:#F5ECE1; --ink-100:#EDE0CF; --ink-200:#E0CEB8; --ink-300:#CBB396;
    --ink-400:#9C8169; --ink-500:#7A6250; --ink-600:#5C4635; --ink-700:#422F22;
    --ink-800:#2A1D14; --ink-900:#1A120C;

    --bg:#F7EFE5; --card:#FCF7F1; --surface:#FCF7F1; --topbar:#F2E6D8;
    --text:#1A120C; --text-muted:#7A6250;
    --border:#E7D8C6; --table-head:#FCF7F1; --scrollbar-thumb:#DCC8B2;
    --accent-soft:#F2E7DA; --accent-dark:#3E2B1F;
    --primary:#7B4A2A; --primary-hover:#5E3519;
    --side-bg:#3E2B1F; --side-text:#E6D5C1; --side-muted:#C2A88E; --side-hover:#4E3828; --side-on:#5C412F;
    --danger:#B3261E; --danger-soft:#F9DDD7; --success:#24572C; --success-soft:#DCEBD6;
    --warn:#6E4400; --warn-soft:#F6E6C8; --info:#23426B; --info-soft:#E1E8F3;

    --radius-sm:999px;   /* buttons -> capsules */
    --radius-md:10px;    /* inputs */
    --radius-lg:14px;    /* cards, tables */
    --radius-xl:18px;    /* dialogs */

    --shadow-card:none;
    --shadow-glow:none;
    --shadow-popover:0 14px 34px -8px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.05);

    --d-top-h:52px;
    --d-panel-w:188px;
    --d-font:"Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------------- Base type ---------------- */
html{ -webkit-text-size-adjust:100%; }
body{
    font-family:var(--d-font) !important;
    font-size:12.5px; line-height:1.5; letter-spacing:-.003em;
    background:var(--bg); color:var(--text);
    -webkit-font-smoothing:antialiased;
}
.content{ --bs-link-color:var(--primary); --bs-link-hover-color:var(--primary); --bs-body-font-size:12.5px; }
a{ color:var(--text); }
h1,h2,h3,h4,h5,h6{ letter-spacing:-.01em; }
h5{ font-size:14px; } h6{ font-size:12.5px; }
.text-muted{ color:var(--text-muted) !important; }
.small, small{ font-size:11.5px; }
::selection{ background:var(--primary); color:#fff; }

/* =====================================================================
   APP SHELL -- top capsule menu + grouped side panel
   ===================================================================== */
.mobile-topbar, .sidebar:not(.d-panel){ display:none !important; }
.layout.d-layout{ display:block; min-height:100vh; }

.d-top{
    position:sticky; top:0; z-index:1030;
    height:var(--d-top-h); display:flex; align-items:center; gap:14px;
    padding:0 18px; background:var(--topbar); border-bottom:1px solid var(--border);
}
.d-menu-btn{ display:none; width:36px; height:36px; border:0; border-radius:999px; background:transparent; color:var(--text);
    align-items:center; justify-content:center; }
.d-menu-btn svg{ width:19px; height:19px; }
.d-logo{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); font-weight:700; font-size:13px; flex-shrink:0; }
.d-logo img{ width:24px; height:24px; border-radius:7px; }
.d-tnav{ display:flex; align-items:center; gap:2px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.d-tnav::-webkit-scrollbar{ display:none; }
.d-tnav a{
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
    padding:5px 12px; border-radius:999px; font-size:12px; font-weight:500;
    color:var(--ink-500); text-decoration:none; transition:background .15s, color .15s;
}
.d-tnav a:hover{ color:var(--text); background:var(--ink-100); }
.d-tnav a.on{ background:var(--primary); color:#fff; }
.d-tnav a svg{ width:13px; height:13px; }
.d-top-right{ margin-left:auto; display:flex; align-items:center; gap:8px; position:relative; flex-shrink:0; }
.d-fy{ display:flex; align-items:center; gap:4px; margin:0; height:32px; padding:0 4px 0 10px; border:1px solid var(--ink-200, #E0CEB8); border-radius:999px; background:var(--surface); }
.d-fy svg{ width:13px; height:13px; color:#7A6250; }
.d-fy select{ border:0; background:transparent; font:inherit; font-size:11.5px; font-weight:600; color:var(--text); padding:0 4px; cursor:pointer; outline:none; -webkit-appearance:none; appearance:none; }
.d-fy:hover{ border-color:var(--primary); }
.d-fy svg.d-fy-lock{ color:#B42318; margin-right:6px; }
[data-dbl-href]{ cursor:default; transition:border-color .15s; }
[data-dbl-href]:hover{ border-color:var(--primary) !important; }
.stat-card[data-dbl-href]{ border:1px solid transparent; }
.d-user{
    display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
    padding:3px 10px 3px 3px; border:1px solid var(--ink-100); border-radius:999px; background:var(--surface);
}
.d-user:hover{ border-color:var(--ink-300); }
.d-user .d-avatar{ width:26px; height:26px; border-radius:999px; background:var(--primary); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; }
.d-user .u-name{ font-size:11.5px; font-weight:600; line-height:1.15; color:var(--text); }
.d-user .u-role{ font-size:10px; color:var(--text-muted); line-height:1.15; text-transform:capitalize; }
.d-user svg{ width:13px; height:13px; color:var(--ink-400); }
.d-user-menu{
    position:absolute; top:calc(100% + 8px); right:0; left:auto !important; bottom:auto !important; margin:0 !important;
    overflow:visible !important; z-index:1060; min-width:200px;
    background:var(--surface); border:1px solid var(--ink-100); border-radius:14px; padding:6px;
    box-shadow:var(--shadow-popover);
}
.d-user-menu .sidebar-user-menu-item{
    display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; border:0; background:transparent;
    border-radius:999px; font-size:12px; color:var(--text); text-decoration:none; text-align:left;
}
.d-user-menu .sidebar-user-menu-item:hover{ background:var(--ink-50); }
.d-user-menu .sidebar-user-menu-item svg{ width:14px; height:14px; color:var(--ink-500); }
.d-user-menu .sidebar-user-menu-danger{ color:var(--text); font-weight:600; }

.d-shell{ display:flex; align-items:flex-start; min-height:calc(100vh - var(--d-top-h)); }
.d-panel{
    width:var(--d-panel-w); flex-shrink:0; position:sticky; top:var(--d-top-h);
    height:calc(100vh - var(--d-top-h)); overflow-y:auto;
    border-right:0; padding:16px 10px 24px; background:var(--side-bg);
    display:flex; flex-direction:column; gap:2px;
}
.d-shell.no-panel .d-panel{ display:none; }
.d-panel-title{ font-size:13px; font-weight:700; padding:2px 10px 8px; color:#FFF6EC; }
.d-group-label{ font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--side-muted); padding:12px 10px 4px; }
.d-panel a{
    display:flex; align-items:center; gap:9px; padding:6px 10px; border-radius:999px;
    font-size:12px; color:var(--side-text); text-decoration:none;
}
.d-panel a:hover{ background:var(--side-hover); color:#FFF6EC; }
.d-panel a.on{ background:var(--side-on); color:#FFF6EC; font-weight:600; }
.d-panel a svg{ width:14px; height:14px; color:var(--side-muted); flex-shrink:0; }
.d-panel a.on svg{ color:#FFF6EC; }
.d-panel-modules{ display:none; }

.d-shell > .content{
    flex:1; min-width:0; margin:0 !important; padding:22px 28px 60px !important;
    background:var(--bg); border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
.content-inner{ max-width:none; }   /* every page uses the full width -- tables line up across pages */
.d-tabbar{ display:none; }

/* =====================================================================
   COMPONENTS
   ===================================================================== */

/* Page header */
.page-header{ margin-bottom:16px; gap:12px; }
.page-header h4, .page-title{ font-size:17px !important; font-weight:700 !important; letter-spacing:-.015em; }
.page-subtitle{ font-size:11.5px; color:var(--text-muted); }
.page-icon-badge{ width:32px !important; height:32px !important; border-radius:999px !important; background:var(--ink-100) !important;
    color:var(--text) !important; box-shadow:none !important; }
.page-icon-badge svg{ width:15px !important; height:15px !important; color:var(--text) !important; }
.page-header-actions{ gap:6px; flex-wrap:wrap; }

/* Cards / boxes */
.tally-box, .card, .stat-card, .work-summary-box, .utility-card, .processing-card{
    background:var(--surface) !important; border:1px solid var(--ink-100) !important; border-radius:14px !important;
    box-shadow:none !important;
}
.tally-box{ padding:16px; }
.stat-icon{ border-radius:999px !important; background:var(--ink-100) !important; color:var(--text) !important; box-shadow:none !important; }
.stat-icon svg{ color:var(--text) !important; }
.stat-card h3, .stat-card .stat-value{ font-weight:700; letter-spacing:-.02em; }

/* Buttons -- capsules */
.btn{
    font-family:var(--d-font); font-size:12px; font-weight:500; letter-spacing:-.003em;
    border-radius:999px !important; padding:5px 14px; box-shadow:none !important; transform:none !important;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.btn-sm{ font-size:11.5px; padding:4px 12px; }
.btn-lg{ font-size:13px; padding:8px 18px; }
.btn svg, .btn i[data-lucide]{ width:13px; height:13px; }
.btn-primary, .btn-success, .btn-dark{
    background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important;
}
.btn-primary:hover, .btn-success:hover, .btn-dark:hover,
.btn-primary:focus, .btn-success:focus{ background:var(--primary-hover) !important; border-color:var(--primary-hover) !important; color:#fff !important; }
.btn-secondary, .btn-light, .btn-outline-secondary, .btn-outline-dark, .btn-outline-primary, .btn-outline-info,
.btn-info, .btn-warning{
    background:var(--surface) !important; border:1px solid var(--ink-200) !important; color:var(--text) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover, .btn-outline-dark:hover,
.btn-outline-primary:hover, .btn-info:hover, .btn-warning:hover{
    background:var(--ink-50) !important; border-color:var(--ink-300) !important; color:var(--text) !important;
}
.btn-danger, .btn-outline-danger{
    background:var(--surface) !important; border:1px solid var(--ink-200) !important; color:var(--text) !important;
}
.btn-danger:hover, .btn-outline-danger:hover{ background:var(--danger) !important; border-color:var(--danger) !important; color:#fff !important; }
.btn-ghost{ background:transparent !important; border:1px solid transparent !important; color:var(--ink-600) !important; }
.btn-ghost:hover{ background:var(--ink-50) !important; color:var(--text) !important; }
.btn-link{ color:var(--text) !important; text-decoration:none; }
.btn-icon, .btn-circle{ border-radius:999px !important; padding:0 !important; }
.btn-icon{ width:28px; height:28px; }
.btn-circle{ width:32px !important; height:32px !important; }
.btn-icon svg, .btn-circle svg{ width:14px; height:14px; }
.btn:disabled, .btn.disabled{ opacity:.45; }
.btn-close{ border-radius:999px; }

/* Forms */
label, .form-label, .tally-box label{ font-size:11px !important; font-weight:500; color:var(--ink-500); }
.form-control, .form-select{
    font-family:var(--d-font); font-size:12px; color:var(--text);
    border:1px solid var(--ink-200) !important; border-radius:10px !important; background-color:var(--surface);
    padding:6px 11px; box-shadow:none !important;
}
.form-control-sm, .form-select-sm{ font-size:11.5px; padding:4px 10px; min-height:28px; }
.form-control:focus, .form-select:focus{ border-color:var(--primary) !important; box-shadow:0 0 0 3px rgba(123,74,42,.15) !important; }
.form-control::placeholder{ color:var(--ink-400); }
.search-input-wrap .form-control, input[type="search"]{ border-radius:999px !important; }
.input-group-text{ border-radius:10px; background:var(--ink-50); border-color:var(--ink-200); font-size:11.5px; }
.form-check-input{ border-color:var(--ink-300); }
.form-check-input:checked{ background-color:var(--primary) !important; border-color:var(--primary) !important; }
.form-check-input:focus{ box-shadow:0 0 0 3px rgba(0,0,0,.08); border-color:var(--primary); }
.form-switch .form-check-input:focus{ --bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237B4A2A'/%3e%3c/svg%3e"); }
.form-text{ font-size:11px; color:var(--text-muted); }
.fy-capsule{ border-radius:999px !important; border:1px solid var(--ink-200) !important; background:var(--surface) !important; }

/* Tables */
.table{ font-size:12px; color:var(--text); --bs-table-bg:transparent; --bs-table-hover-bg:var(--ink-50); margin-bottom:0; }
.table > :not(caption) > * > *{ padding:8px 10px; border-bottom-color:#EEE2D3; }
.table th, .table thead th{
    font-size:10.5px !important; font-weight:500 !important; color:var(--ink-500) !important;
    text-transform:none !important; letter-spacing:0 !important;
    background:var(--surface) !important; border-bottom:1px solid var(--ink-100) !important; white-space:nowrap;
}
.table tbody tr:hover > *{ background:var(--ink-50); }
.table-striped > tbody > tr:nth-of-type(odd) > *{ --bs-table-accent-bg:#F9F3EC; }
.table-scroll-wrap{ border-radius:12px; }
tr.bulk-row-selected > td{ background:var(--ink-50) !important; }

/* Status badges -- one capsule shape, state shown by the dot */
.badge-pill{
    display:inline-flex !important; align-items:center; gap:5px;
    font-size:10.5px !important; font-weight:500 !important; padding:2px 9px 2px 8px !important;
    border-radius:999px !important; background:#F2E7DA !important; color:#4A3A2D !important;
    border:1px solid transparent; white-space:nowrap;
}
.badge-pill::before{ content:""; width:6px; height:6px; border-radius:999px; background:var(--ink-400); flex-shrink:0; }
.badge-pill svg{ display:none; }
.badge-pending{ background:var(--warn-soft) !important; color:var(--warn) !important; }
.badge-pending::before{ background:#C98A12; }
.badge-review, .badge-progress{ background:var(--info-soft) !important; color:var(--info) !important; }
.badge-review::before, .badge-progress::before{ background:#3B6AA8; }
.badge-warning{ background:#F7DCCF !important; color:#872D12 !important; }
.badge-warning::before{ background:#D2602F; }
.badge-success{ background:var(--success-soft) !important; color:var(--success) !important; }
.badge-success::before{ background:#2E8A45; }
.badge-danger{ background:var(--danger) !important; color:#fff !important; }
.badge-danger::before{ background:#fff; }
.badge{ border-radius:999px; font-weight:500; }
.bg-primary, .bg-success, .bg-info, .bg-dark{ background-color:var(--primary) !important; color:#fff !important; }
.bg-danger{ background-color:var(--danger) !important; color:#fff !important; }
.bg-success{ background-color:var(--success) !important; color:#fff !important; }
.bg-warning, .bg-secondary, .bg-light{ background-color:var(--ink-100) !important; color:var(--text) !important; }
.task-period-pill{ background:var(--surface) !important; border:1px solid var(--ink-200); color:var(--text) !important; font-weight:500 !important; }
.due-cat-badge, [class*="due-cat-"]{ background:var(--ink-100) !important; color:var(--text) !important; border-color:var(--ink-200) !important; }

/* Semantic text colours */
.text-danger{ color:var(--danger) !important; font-weight:600; }
.text-success{ color:var(--success) !important; }
.text-primary, .text-info{ color:var(--primary) !important; }
.text-warning{ color:var(--warn) !important; }

/* Alerts */
.alert{ border-radius:12px !important; border:1px solid var(--ink-200) !important; background:var(--ink-50) !important;
    color:var(--text) !important; font-size:12px; box-shadow:none !important; }
.alert-danger{ border-color:#E8B4AC !important; background:var(--danger-soft) !important; color:#6E1712 !important; }
.alert-success{ background:var(--success-soft) !important; border-color:#B9D8B0 !important; }
.alert a{ color:var(--text); font-weight:600; }

/* Tabs / pills / view toggles */
.nav-tabs{ border-bottom:1px solid var(--ink-100) !important; gap:18px; }
.nav-tabs .nav-link{
    border:0 !important; background:transparent !important; color:var(--ink-500) !important;
    font-size:12px; font-weight:500; padding:6px 1px 9px !important; margin:0 !important; border-radius:0 !important;
}
.nav-tabs .nav-link:hover{ color:var(--text) !important; }
.nav-tabs .nav-link.active{ color:var(--text) !important; font-weight:600; box-shadow:inset 0 -1.5px 0 var(--primary); }
.nav-pills .nav-link{ border-radius:999px !important; color:var(--ink-600); font-size:12px; padding:5px 13px; }
.nav-pills .nav-link.active{ background:var(--primary) !important; color:#fff !important; }
.view-toggle-capsule{ background:var(--ink-100) !important; border:0 !important; border-radius:999px !important; padding:2px !important; }
.view-toggle-btn, .assignee-toggle-btn{ border-radius:999px !important; font-size:11.5px !important; color:var(--ink-500) !important; background:transparent !important; }
.view-toggle-btn.active, .assignee-toggle-btn.active{ background:var(--surface) !important; color:var(--text) !important; box-shadow:0 1px 2px rgba(0,0,0,.1) !important; }
.view-toggle-btn svg{ width:14px; height:14px; }

/* Dialogs, menus, popovers */
.modal-content{ border:0 !important; border-radius:18px !important; box-shadow:var(--shadow-popover) !important; }
.modal-header{ border-bottom:1px solid var(--ink-100) !important; padding:14px 18px; }
.modal-header .modal-title, .modal-title{ font-size:13.5px !important; font-weight:700; }
.modal-footer{ border-top:1px solid var(--ink-100) !important; }
.modal-body{ padding:16px 18px; }
.dropdown-menu, .gst-popup, .notif-dropdown, .autocomplete-list{
    border:1px solid var(--ink-100) !important; border-radius:14px !important; box-shadow:var(--shadow-popover) !important;
}
.gst-option, .dropdown-item, .autocomplete-option{ border-radius:999px !important; font-size:12px !important; }
.gst-option:hover, .dropdown-item:hover{ background:var(--ink-50) !important; color:var(--text) !important; }
.confirm-modal-icon{ background:var(--ink-100) !important; color:var(--text) !important; }


/* ---------------- Grouped lists (To-Do) ---------------- */
.d-groups{ display:flex; flex-direction:column; gap:10px; }
.d-grp{ border:1px solid var(--ink-100); border-radius:14px; background:var(--surface); }
.d-grp-h{
    list-style:none; cursor:pointer; user-select:none;
    display:flex; align-items:center; gap:9px; padding:10px 14px; font-size:12.5px;
}
.d-grp-h::-webkit-details-marker{ display:none; }
.d-grp-h b{ font-weight:700; }
.d-grp-chev{ width:14px; height:14px; color:var(--ink-400); transition:transform .15s; }
.d-grp:not([open]) .d-grp-chev{ transform:rotate(-90deg); }
.d-grp-ic{ width:20px; height:20px; border-radius:6px; background:var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.d-grp-ic svg{ width:11px; height:11px; }
.d-grp-count{ color:var(--text-muted); font-size:11.5px; }
.d-grp-meta{ margin-left:auto; display:flex; align-items:center; gap:12px; color:var(--text-muted); font-size:11px; }
.d-grp-meta > span{ display:inline-flex; align-items:center; gap:4px; }
.d-grp-meta svg{ width:12px; height:12px; }
.d-grp[open] > .table-scroll-wrap{ border-top:1px solid var(--ink-100); border-radius:0 0 14px 14px; }
.d-grp .table th{ padding-top:7px; padding-bottom:7px; }
.d-grp .table-scroll-wrap{ max-height:none !important; overflow-y:visible !important; }

@media (max-width:640px){
    .d-grp-h{ flex-wrap:wrap; row-gap:4px; }
    .d-grp-meta{ margin-left:29px; width:100%; }
    /* Each task becomes a compact card instead of a sideways-scrolling row. */
    .content table.d-task-table{ display:block !important; white-space:normal !important; overflow:visible !important; }
    .d-task-table thead{ display:none; }
    .d-task-table tbody, .d-task-table tr{ display:block; }
    .d-task-table tr.task-row{
        display:grid; grid-template-columns:22px 1fr 1fr; gap:4px 10px; align-items:start;
        padding:10px 12px; border-bottom:1px solid #EEE2D3;
    }
    .d-task-table tr.task-row > td{ display:block; border:0 !important; padding:0 !important; background:transparent !important; font-size:11.5px; }
    .d-task-table tr.task-row > td.bulk-col{ grid-row:1 / span 4; padding-top:2px !important; }
    .d-task-table tr.task-row > td:nth-child(2){ grid-column:2 / span 2; }
    .d-task-table tr.task-row > td[data-label]::before{
        content:attr(data-label); display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-400);
    }
    .d-task-table .d-hide-phone{ display:none !important; }
    .d-task-table tr.task-row > td:last-child{ grid-column:2 / span 2; }
    .d-task-table .table-row-actions{ justify-content:flex-start; }
}

/* Kanban */
.kanban-col{ background:var(--ink-50) !important; border:0 !important; border-radius:14px !important; }
.kanban-card{ border:1px solid var(--ink-100) !important; border-radius:12px !important; box-shadow:none !important; }
.kanban-card:hover{ border-color:var(--ink-300) !important; }
.kanban-card-title{ font-size:12px !important; font-weight:600 !important; }

/* Progress */
.progress{ background:var(--ink-100) !important; border-radius:999px !important; height:6px; }
.progress-bar, .processing-bar-fill{ background:var(--primary) !important; }
.checklist-ring .bar{ stroke:var(--primary) !important; }

/* Pagination */
.pagination .page-link{ border-radius:999px !important; border:0; color:var(--text); font-size:12px; margin:0 2px; }
.pagination .page-item.active .page-link{ background:var(--primary); color:#fff; }

/* Floating controls */
.notif-fab{ background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--ink-200) !important; box-shadow:var(--shadow-popover) !important; }
.chat-fab{ background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--ink-200) !important; box-shadow:var(--shadow-popover) !important; }
.chat-fab-badge{ background:var(--primary) !important; color:#fff !important; }
.notif-fab.has-unread{ background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important; }
.notif-fab-badge{ background:var(--surface) !important; color:var(--text) !important; border:1px solid var(--primary); }
.bulk-action-bar{ border-radius:999px !important; background:var(--primary) !important; padding:6px 8px 6px 16px !important; }
.bulk-action-bar .btn-light{ background:var(--surface) !important; border-color:#fff !important; color:var(--text) !important; }
.bulk-action-bar .btn-primary{ background:var(--primary-hover) !important; border-color:var(--primary) !important; }
.bulk-action-bar .btn-danger{ background:var(--surface) !important; color:var(--text) !important; }
.bulk-action-bar .bulk-count{ font-size:12px !important; }

/* File drop zones */
.file-drop-zone, .upload-dropzone{ border:1px dashed var(--ink-300) !important; border-radius:14px !important; background:var(--ink-50) !important; }

/* Scrollbars */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--ink-200); border-radius:999px; }
::-webkit-scrollbar-track{ background:transparent; }

/* =====================================================================
   PHONE / TABLET
   ===================================================================== */
@media (max-width:900px){
    .d-top{ padding:0 10px; gap:8px; }
    .d-menu-btn{ display:inline-flex; }
    .d-tnav{ display:none; }
    .d-user{ padding:2px; border:0; }
    .d-user .u-text, .d-user > svg{ display:none; }
    .d-panel{
        position:fixed; top:0; left:0; bottom:0; z-index:1050; width:282px; height:100%;
        transform:translateX(-100%); transition:transform .2s ease; padding-top:18px;
        box-shadow:var(--shadow-popover);
    }
    .d-shell.no-panel .d-panel{ display:flex; }
    body.sidebar-open .d-panel{ transform:translateX(0); }
    body.sidebar-open .sidebar-backdrop{ display:block; position:fixed; inset:0; z-index:1040; background:rgba(0,0,0,.35); }
    .d-panel-modules{ display:flex; flex-direction:column; gap:2px; padding-bottom:6px; margin-bottom:6px; border-bottom:1px solid var(--side-hover); }
    .d-panel a{ min-height:40px; font-size:13px; }
    .d-shell > .content{ padding:14px 14px 92px !important; }
    .page-header{ flex-wrap:wrap; }
    .page-header h4, .page-title{ font-size:16px !important; }
    .content .table{ display:block; overflow-x:auto; white-space:nowrap; }

    .d-tabbar{
        display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1035;
        background:var(--topbar); border-top:1px solid var(--border);
        padding:6px 6px calc(8px + env(safe-area-inset-bottom, 0px));
        justify-content:space-around;
    }
    .d-tabbar a, .d-tabbar button{
        flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
        font-size:10px; color:var(--ink-400); text-decoration:none; border:0; background:transparent; padding:4px 0;
    }
    .d-tabbar svg{ width:19px; height:19px; }
    .d-tabbar .on{ color:var(--text); font-weight:600; }
    .notif-fab{ bottom:calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
    .chat-fab{ bottom:calc(78px + env(safe-area-inset-bottom, 0px)) !important; }
    .chat-fab-panel{ bottom:calc(132px + env(safe-area-inset-bottom, 0px)) !important; }
    .bulk-action-bar{ bottom:calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media (max-width:480px){
    .d-fy{ padding:0 2px 0 8px; height:30px; }
    .d-fy svg{ display:none; }
    .d-fy select{ font-size:11px; padding:0 2px; }
    .chat-fab{ bottom:calc(134px + env(safe-area-inset-bottom, 0px)) !important; }
    .chat-fab-panel{ bottom:calc(188px + env(safe-area-inset-bottom, 0px)) !important; }
}
.chat-fab.has-unread{ background:var(--primary) !important; color:#fff !important; border-color:var(--primary) !important; }

@media print{
    .d-top, .d-panel, .d-tabbar, .notif-fab{ display:none !important; }
    .d-shell > .content{ padding:0 !important; }
}

/* Global flash notice (base.html) */
.d-flash{ position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:1080; display:flex; gap:12px; align-items:flex-start;
  max-width:min(560px, calc(100vw - 32px)); padding:10px 14px 10px 18px; border-radius:16px; background:var(--primary); color:#fff; font-size:12.5px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); }
.d-flash button{ border:0; background:none; color:#fff; font-size:18px; line-height:1; cursor:pointer; opacity:.7; }
@media (max-width:900px){ .d-flash{ bottom:calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* One size for every page's main list table (Master Clients, GST Clients,
   Invoices, Users...): full width, same height, header stays put. Small
   tables inside dashboard cards / pop-ups keep their own size. */
.content-inner > .tally-box > .table-scroll-wrap:not([style*="max-height"]),
.content-inner > .tally-box > form > .table-scroll-wrap:not([style*="max-height"]),
.content-inner > .tally-box > div > .table-scroll-wrap.table-scroll-wrap--tall,
.content-inner .tab-pane > .tally-box > .table-scroll-wrap:not([style*="max-height"]){
  height:calc(100vh - 300px); min-height:280px; max-height:none;
}
@media (max-width:640px){
  .content-inner > .tally-box > .table-scroll-wrap:not([style*="max-height"]),
  .content-inner > .tally-box > form > .table-scroll-wrap:not([style*="max-height"]){ height:auto; max-height:70vh; min-height:0; }
}

/* Tabs with an icon: icon sized to the text and on its baseline. */
.nav-tabs .nav-link{ display:inline-flex; align-items:center; gap:6px; }
.nav-tabs .nav-link svg{ width:14px !important; height:14px !important; flex-shrink:0; }

/* Segmented choices (radio buttons styled as a button group -- Letter /
   Certificate / Document, Full / Part payment...): label text centred. */
.btn-group > label.btn, label.btn{
  display:inline-flex !important; align-items:center; justify-content:center; gap:4px;
  margin:0 !important; min-height:32px; line-height:1.2; font-weight:500;
}
.btn-group:has(> .btn-check){ gap:6px; }
.btn-group > .btn-check + label.btn{ border-radius:999px !important; flex:1; }
.btn-check:checked + label.btn .text-muted{ color:rgba(255,255,255,.7) !important; }

/* No decorative icons in headings: card titles, To-Do group headers, pop-up titles. */
.tally-box b.d-flex > svg:first-child, .tally-box h6.d-flex > svg:first-child,
.tally-box > .d-flex > b > svg:first-child, .d-grp-ic, .modal-title > svg:first-child,
.page-icon-badge{ display:none !important; }

/* Icon buttons that now also carry their name (see base.html script). */
.btn.has-label.btn-circle, .btn.has-label.btn-icon{
  width:auto !important; min-width:0 !important; padding:0 11px !important; gap:5px;
  display:inline-flex; align-items:center; border-radius:999px !important;
}
.btn.has-label .btn-txt, .view-toggle-btn.has-label .btn-txt{ font-size:11.5px; font-weight:600; white-space:nowrap; }
.view-toggle-btn.has-label{ width:auto !important; padding:0 10px !important; gap:5px; display:inline-flex; align-items:center; }
.table-row-actions{ display:flex; gap:4px; flex-wrap:nowrap; justify-content:flex-end; }
#onHoldBtn.drag-hold-over{ background:var(--primary) !important; color:#fff !important; transform:scale(1.05); }
.table-row-actions .btn.has-label{ padding:0 8px !important; height:26px; }
.table-row-actions .btn.has-label .btn-txt{ font-size:11px; }
.onhold-count{ margin-left:4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--primary); color:#fff; font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; } .onhold-count[hidden]{ display:none; }

/* Chat + notifications sit in the top bar (moved there by base.html). */
.d-top .notif-fab.in-topbar, .d-top .chat-fab.in-topbar{
  position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important;
  width:32px !important; height:32px !important; flex-shrink:0; box-shadow:none !important; transform:none !important; z-index:auto;
}
.d-top .notif-fab.in-topbar svg, .d-top .chat-fab.in-topbar svg{ width:15px !important; height:15px !important; }
.d-top .in-topbar .notif-fab-badge, .d-top .in-topbar .chat-fab-badge{ top:-5px; right:-5px; min-width:16px; height:16px; line-height:16px; font-size:9.5px; }
body.fabs-in-topbar .notif-dropdown, body.fabs-in-topbar .chat-fab-panel{
  top:calc(var(--d-top-h) + 8px) !important; bottom:auto !important; right:16px !important; z-index:1070;
}
body.fabs-in-topbar .chat-fab-panel{ height:min(520px, calc(100vh - var(--d-top-h) - 24px)) !important; }
@media (max-width:480px){
  .d-top .notif-fab.in-topbar, .d-top .chat-fab.in-topbar{ width:30px !important; height:30px !important; }
  .d-top-right{ gap:5px; }
  body.fabs-in-topbar .notif-dropdown, body.fabs-in-topbar .chat-fab-panel{ right:8px !important; left:8px !important; width:auto !important; }
}

/* Breadcrumbs under the page title (page_header macro) */
.d-crumbs{ display:flex; align-items:center; flex-wrap:wrap; gap:2px 6px; margin-top:3px; font-size:11.5px; line-height:1.4; color:var(--text-muted); }
.d-crumbs a{ color:var(--text-muted); text-decoration:none; border-radius:4px; }
.d-crumbs a:hover{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }
.d-crumb-sep{ opacity:.55; }
.d-crumb-here{ color:var(--text); font-weight:500; max-width:28ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.d-crumbs + .page-subtitle{ margin-top:2px; }
@media (max-width:576px){ .d-crumbs{ font-size:11px; } }