/* ==========================================================================
   AOG Unified Platform — "AURA" design system (complete redesign)
   Deep indigo sidebar · pill buttons · borderless cards · soft badges.
   Legacy variable names (--wine, --gold, --hair …) are kept as aliases so
   page-embedded styles inherit this palette automatically. Do not rename.
   ========================================================================== */

:root{
    /* Core palette */
    --bg:#eef1f6;
    --surface:#ffffff;
    --ink:#0b1020;
    --ink2:#161c30;
    --tx:#1e2433;
    --tx2:#5a6376;
    --tx3:#98a1b3;
    --line:rgba(30,36,51,.08);
    --brand:#4f46e5;
    --brand2:#4338ca;
    --brand3:#818cf8;
    --brand-bg:#eef0fe;
    --amber:#e19110;
    --amber2:#f3c66f;
    --amber-bg:#fdf3e3;
    --ok:#16a34a;   --ok-bg:#e6f6ec;
    --warn:#b45309; --warn-bg:#fdf1df;
    --bad:#dc2626;  --bad-bg:#fdeaea;
    --sh:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
    --sh2:0 12px 32px rgba(16,24,40,.16);
    --r:18px;
    --r-sm:12px;
    /* Legacy aliases used across views — values only, names frozen */
    --wine:var(--brand);
    --wine2:var(--brand2);
    --wine3:var(--brand3);
    --wine-bg:var(--brand-bg);
    --gold:var(--amber);
    --gold2:var(--amber2);
    --gold-dark:#b45309;
    --gold-bg:var(--amber-bg);
    --hair:var(--line);
    --card:var(--surface);
    --primary:var(--brand);
    --sidebar:var(--ink);
    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;
    --secondary:#6B7280;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:hidden!important}
body{
    margin:0;
    background:
        radial-gradient(1100px 420px at 85% -140px,rgba(79,70,229,.07),transparent 60%),
        var(--bg);
    color:var(--tx);
    font-size:14.5px;
    line-height:1.65;
    font-family:"Cairo","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
}
a{color:var(--brand2);text-decoration-color:rgba(79,70,229,.35)}
a:hover{color:var(--brand)}
::selection{background:rgba(79,70,229,.18)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#cdd3e1;border-radius:999px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#aeb6c9;background-clip:content-box;border:2px solid transparent}

/* --------------------------------------------------------------------------
   Shell layout
   -------------------------------------------------------------------------- */
.app-shell{display:flex;min-height:100vh;background:transparent}
.main-content{margin-left:252px;width:calc(100% - 252px);min-width:0}
.app-content{padding:26px 32px 64px!important;max-width:1520px}
.sidebar,.main-content{transition:transform .22s ease,margin-left .22s ease,width .22s ease}

/* --------------------------------------------------------------------------
   Sidebar — deep indigo, glowing pill nav
   -------------------------------------------------------------------------- */
.sidebar{
    position:fixed;top:0;bottom:0;left:0;z-index:30;
    width:252px;height:100vh;box-sizing:border-box;
    display:flex;flex-direction:column;
    padding:22px 14px 16px;
    color:#fff;
    background:
        radial-gradient(420px 220px at 110% 0%,rgba(129,140,248,.16),transparent 65%),
        linear-gradient(190deg,#1a2040,#0e1224 70%);
    overflow:hidden;
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
}
.sidebar-scroll{display:block!important;flex:1 1 auto!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;min-height:0;max-height:100%;padding-bottom:8px}
.sidebar-scroll::-webkit-scrollbar{width:7px}
.sidebar-scroll::-webkit-scrollbar-track{background:transparent}
.sidebar-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px}
.sidebar nav{padding-right:2px;min-height:0}

.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px;padding:0 6px 18px;border-bottom:1px solid rgba(255,255,255,.09);margin:0 0 14px;flex:0 0 auto}
.brand-logo-stack{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:0 0 56px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:7px 5px}
.brand-logo-stack strong{color:var(--amber2);font-size:10.5px;line-height:1;font-weight:900;letter-spacing:.5px}
.brand-logo{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.brand span{display:flex;flex-direction:column;color:#fff;font-size:16.5px;line-height:1.25}
.brand small{font-size:10.5px;color:rgba(255,255,255,.45);font-weight:600;letter-spacing:.2px;margin-top:2px}

.nav-section{font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.34);padding:14px 14px 6px;font-weight:800}
.sidebar .nav-link{
    position:relative;display:flex;gap:11px;align-items:center;
    color:rgba(255,255,255,.66);
    border-radius:999px;
    padding:9px 16px;margin-bottom:3px;
    font-size:13.8px;font-weight:600;
    transition:background .18s,color .18s,transform .18s;
}
.sidebar .nav-link i{width:18px;text-align:center;color:rgba(255,255,255,.42);transition:color .18s}
.sidebar .nav-link:hover{background:rgba(255,255,255,.07);color:#fff;transform:translateX(3px)}
.sidebar .nav-link:hover i{color:var(--brand3)}
.sidebar .nav-link.active{
    background:linear-gradient(95deg,var(--brand),#6d28d9);
    color:#fff;font-weight:800;
    box-shadow:0 8px 20px rgba(79,70,229,.42);
}
.sidebar .nav-link.active i{color:#fff}
.nav-link-sm{font-size:.85rem;padding-top:7px!important;padding-bottom:7px!important}

.nav-group-toggle{
    width:100%;border:0;background:transparent;
    color:rgba(255,255,255,.66);
    border-radius:999px;padding:9px 16px;margin-bottom:3px;
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    font:inherit;font-size:13.8px;font-weight:700;text-align:left;
}
.nav-group-toggle:hover,.nav-group-toggle:not(.collapsed){background:rgba(255,255,255,.07);color:#fff}
.nav-group-toggle.active{background:rgba(129,140,248,.16);color:#dfe3ff}
.nav-group-toggle i{font-size:.72rem;transition:transform .18s ease}
.nav-group-toggle:not(.collapsed) i,.nav-group-toggle.active i{transform:rotate(180deg)}
.sidebar .collapse .nav-link{border-left:1px solid rgba(255,255,255,.12);margin-left:18px;padding-left:14px;border-radius:0 999px 999px 0}
.sidebar .collapsing{transition:height .2s ease}

.sidefoot{padding:14px 10px 0;border-top:1px solid rgba(255,255,255,.09);margin-top:12px;flex:0 0 auto}
.sidefoot .hot{display:flex;align-items:center;gap:9px;color:var(--amber2);font-weight:900;font-size:18px;letter-spacing:.5px}
.sidefoot .hot small{font-size:10.5px;color:rgba(255,255,255,.4);font-weight:600}
.sidefoot .tag{font-size:10px;color:rgba(255,255,255,.3);margin-top:6px;font-style:italic}

/* Sidebar collapse / restore */
.sidebar-collapse-btn{margin-left:auto;width:32px;height:32px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;transition:all .15s}
.sidebar-collapse-btn:hover{background:rgba(129,140,248,.2);border-color:var(--brand3);color:#fff}
body.sidebar-collapsed .sidebar{transform:translateX(-110%)!important}
body.sidebar-collapsed .main-content{margin-left:0!important;width:100%!important}
body.sidebar-collapsed .topbar{padding-left:72px}

/* --------------------------------------------------------------------------
   Topbar — airy, shadow instead of border
   -------------------------------------------------------------------------- */
/* z-index budget for the app chrome — keep these in this order:
   sidebar (30 classic / 100 nexus) > .sidebar-mobile-overlay (29) > .topbar (25) > page content (<=20).
   The topbar is sticky + z-indexed, so it is a stacking context: the notification
   dropdown inside it can never escape this number, no matter how high its own
   z-index is. Anything in .app-content that outranks 25 will paint over the open
   notification panel. Cap page content below the topbar rather than raising the
   topbar, which has to stay under the mobile sidebar overlay. */
.topbar{
    height:70px;position:sticky;top:0;z-index:25;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:12px 32px;
    background:rgba(238,241,246,.78);
    backdrop-filter:saturate(150%) blur(16px);
    -webkit-backdrop-filter:saturate(150%) blur(16px);
    border-bottom:1px solid transparent;
    box-shadow:0 1px 0 var(--line);
}
.topbar-title{display:flex;align-items:center;gap:12px;min-width:180px}
.page-title{position:relative;font-size:21px;font-weight:800;color:var(--ink2);padding-bottom:8px;line-height:1.1;letter-spacing:-.2px}
.page-title:after{content:"";position:absolute;bottom:0;left:2px;width:40px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--brand),#a78bfa)}
.page-title i{margin-right:.35rem}
.topbar-search{position:relative;flex:1;max-width:520px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;box-shadow:var(--sh);transition:all .2s}
.topbar-search:focus-within{border-color:var(--brand3);box-shadow:0 0 0 4px rgba(79,70,229,.14)}
.topbar-search i{color:var(--tx3)}
.topbar-search input{border:0;outline:0;background:transparent;flex:1;font:inherit;font-size:14px;color:var(--tx);min-width:80px}
.topbar-actions{display:flex;align-items:center;gap:12px}
.user-chip{display:flex;flex-direction:column;align-items:flex-end;font-weight:800;font-size:13px;line-height:1.2;color:var(--tx)}
.user-chip small{font-size:11px;color:var(--tx2);font-weight:600}

/* --------------------------------------------------------------------------
   Cards & headings
   -------------------------------------------------------------------------- */
.card,.metric-card,.settings-side-card,.settings-table-card,.settings-create,.settings-content,.report-card,.app-filter-card{
    background:var(--surface)!important;
    border:0!important;
    border-radius:var(--r)!important;
    box-shadow:var(--sh)!important;
    transition:box-shadow .22s,transform .22s;
}
.card:hover,.report-card:hover{box-shadow:var(--sh2)!important}
.card-header{background:transparent!important;border-bottom:1px solid var(--line)!important;border-radius:var(--r) var(--r) 0 0!important;font-weight:800;color:var(--ink2);padding-top:.9rem;padding-bottom:.9rem}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.page-heading h4{font-weight:800;letter-spacing:-.2px;color:var(--ink2)}

.metric-card{padding:16px 18px;position:relative;overflow:hidden}
.metric-card:before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--brand),#a78bfa);opacity:.85}
.metric-card:hover{transform:translateY(-2px);box-shadow:var(--sh2)!important}
.metric-card span{display:block;font-size:12.5px;color:var(--tx2);font-weight:700}
.metric-card strong{font-size:28px;color:var(--ink2);letter-spacing:-.6px;line-height:1.2}
.metric-card-link{display:block;color:inherit;text-decoration:none}
.metric-card-link:hover{color:inherit}
.dashboard-metric-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:14px}
.dashboard-ratio-card{min-height:100px;padding:15px 16px!important}
.dashboard-ratio-card strong{display:flex;align-items:baseline;gap:6px;margin-top:4px;font-size:24px!important;line-height:1.05}
.dashboard-ratio-card strong a{color:var(--brand2);text-decoration:none}
.dashboard-ratio-card strong a:hover{text-decoration:underline}
.dashboard-ratio-card strong em{font-style:normal;color:var(--tx3);font-size:18px}
.dashboard-ratio-card small{display:block;margin-top:7px;color:var(--tx3);font-size:11px;font-weight:700;line-height:1.35}
.dashboard-ratio-card span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.report-card{display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--tx);padding:18px;font-weight:800}
.report-card i{width:42px;height:42px;flex:0 0 42px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px;background:var(--brand-bg);color:var(--brand)}
.report-card:hover{transform:translateY(-2px);color:var(--brand2)}

/* --------------------------------------------------------------------------
   Buttons — pill
   -------------------------------------------------------------------------- */
.btn{border-radius:999px;font-weight:800;box-shadow:none!important;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding-left:1.05rem;padding-right:1.05rem}
.btn-primary{background:linear-gradient(95deg,var(--brand),#6d28d9)!important;border:0!important;color:#fff!important;box-shadow:0 6px 18px rgba(79,70,229,.35)!important}
.btn-primary:hover{filter:brightness(1.07)}
.btn-outline-primary{color:var(--brand2)!important;border-color:rgba(79,70,229,.35)!important;background:#fff!important}
.btn-outline-primary:hover{background:var(--brand-bg)!important;color:var(--brand2)!important;border-color:var(--brand)!important}
.btn-light{background:#fff!important;border-color:var(--line)!important;color:var(--tx)!important}
.btn-light:hover{background:var(--brand-bg)!important;color:var(--brand2)!important}
.btn-dark{background:var(--ink2)!important;border-color:var(--ink2)!important}
.btn-warning{background:linear-gradient(95deg,#f59e0b,#fbbf24)!important;border:0!important;color:#3b2c05!important}
.btn-success{background:linear-gradient(95deg,#16a34a,#22c55e)!important;border:0!important;color:#fff!important}
.btn-outline-success{color:#15803d!important;border-color:rgba(22,163,74,.4)!important;background:#fff!important}
.btn-outline-success:hover{background:var(--ok-bg)!important;color:#15803d!important}
.btn-danger{background:linear-gradient(95deg,#dc2626,#ef4444)!important;border:0!important;color:#fff!important}
.btn-outline-danger{color:#dc2626!important;border-color:rgba(220,38,38,.35)!important;background:#fff!important}
.btn-outline-danger:hover{background:var(--bad-bg)!important;color:#b91c1c!important}
.btn-outline-secondary{color:var(--tx2)!important;border-color:var(--line)!important;background:#fff!important}
.btn-outline-secondary:hover{background:#f2f4f9!important;color:var(--tx)!important}
.icon-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.user-actions{white-space:nowrap}
.user-actions form{display:inline-flex}
.action-icon-btn{width:32px;height:32px;border-radius:999px!important;margin-inline-start:4px;padding:0!important}
.action-icon-btn i{font-size:13px}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-label{font-size:12px;font-weight:800;color:var(--tx2);margin-bottom:5px}
.form-control,.form-select,.search-select-button{
    border:1px solid var(--line)!important;
    border-radius:var(--r-sm)!important;
    background:#f7f8fc!important;
    color:var(--tx)!important;
    min-height:38px;box-shadow:none!important;
    transition:border-color .15s,background .15s,box-shadow .15s;
}
.form-control:focus,.form-select:focus,.search-select.open .search-select-button{
    border-color:var(--brand3)!important;
    background:#fff!important;
    box-shadow:0 0 0 4px rgba(79,70,229,.13)!important;
}
.form-control::placeholder{color:var(--tx3)}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.form-check-input:focus{border-color:var(--brand3);box-shadow:0 0 0 .2rem rgba(79,70,229,.15)}
.form-control-color.form-control-sm{width:44px;min-width:44px}
.project-checklist{max-height:132px;overflow-y:auto;background:#fff}

/* Searchable select */
.search-select{position:relative;width:100%}
.search-select-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.search-select-button{width:100%;text-align:left;padding:.375rem 2rem .375rem .75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;min-width:0}
.search-select-button:after{content:"";position:absolute;right:.8rem;top:50%;width:.5rem;height:.5rem;border-right:1.5px solid var(--tx3);border-bottom:1.5px solid var(--tx3);transform:translateY(-65%) rotate(45deg)}
.search-select-sm .search-select-button{min-height:31px;padding:.25rem 1.75rem .25rem .5rem;font-size:.875rem}
.search-select-menu{display:none;position:absolute;z-index:1055;top:calc(100% + 6px)!important;left:0!important;right:0!important;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2);padding:8px}
.search-select.open .search-select-menu{display:block}
.search-select-menu.is-portal{display:block!important;position:fixed!important;z-index:4090!important}
/* Anchored in viewport coordinates by app.js (placeMenu) when a scrollable ancestor would
   otherwise clip the menu. The main case is Bootstrap's .table-responsive: its overflow-x:auto
   forces overflow-y to compute to auto, so an absolutely positioned menu inside a table cell is
   cut off at the container's bottom edge instead of overlaying the page.
   The !important flags mirror the ones on .search-select-menu above, which they must outrank. */
.search-select-menu.is-fixed{
    position:fixed!important;
    top:var(--ss-top)!important;
    left:var(--ss-left)!important;
    right:auto!important;
    width:var(--ss-width);
}
/* Opens upward instead of downward, set by app.js when the space under the button cannot hold
   the menu. Without it a row near the bottom of the viewport opens a menu that runs off the
   page - .table-responsive is overflow:visible here, so nothing scrolls it back into view. */
.search-select-menu.is-above{top:auto!important;bottom:calc(100% + 6px)!important}
.search-select.disabled .search-select-button{background:#eceef4!important;color:var(--tx3)!important;cursor:not-allowed}
.search-select-input{width:100%;border:1px solid var(--line);border-radius:10px;padding:7px 10px;margin-bottom:8px;outline:none;background:#f7f8fc}
.search-select-input:focus{border-color:var(--brand3);background:#fff;box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.search-select-list{max-height:220px;overflow-y:auto;display:flex!important;flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important}
.search-select-option{width:100%!important;border:0;background:#fff;color:var(--tx);text-align:left!important;border-radius:9px;padding:7px 10px;display:block!important;flex:0 0 auto!important}
.search-select-option:hover,.search-select-option.selected,.search-select-option.active{background:var(--brand-bg);color:var(--brand2)}
.search-select-option.active{box-shadow:inset 3px 0 0 var(--brand)}
.search-select-empty{color:var(--tx2);font-size:.875rem;padding:8px 9px}
.search-select-menu,.dropdown-menu{max-width:min(360px,calc(100vw - 32px))}
.smart-multi-button{min-height:42px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding-top:6px;padding-bottom:6px;padding-right:2.2rem}
.smart-multi-placeholder{color:var(--tx3);font-weight:500}
.smart-multi-chip{display:inline-flex;align-items:center;max-width:100%;padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:var(--brand-bg);color:var(--brand2);font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smart-multi-menu{min-width:min(420px,calc(100vw - 16px))}
.smart-multi-option{display:grid!important;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:8px}
.smart-multi-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--brand2);font-size:12px;font-weight:900}
.smart-multi-option[aria-selected="true"]{background:var(--brand-bg);color:var(--brand2)}
.smart-multi-option[aria-selected="true"] .smart-multi-check{border-color:var(--brand);background:var(--brand);color:#fff}

/* Dropdown menus */
.dropdown-menu{border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh2)}
.dropdown-menu.show{display:flex!important;flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important}
.dropdown-menu.show>.dropdown-item,.dropdown-menu.show>button,.dropdown-menu.show>a,.dropdown-menu.show>label{display:block;width:100%;flex:0 0 auto}

/* --------------------------------------------------------------------------
   Badges — soft tinted
   -------------------------------------------------------------------------- */
.badge,.pill{border-radius:999px;font-weight:800;padding:.38rem .68rem;letter-spacing:.1px}
.badge.text-bg-primary{background:var(--brand-bg)!important;color:var(--brand2)!important}
.badge.text-bg-success{background:var(--ok-bg)!important;color:#15803d!important}
.badge.text-bg-danger{background:var(--bad-bg)!important;color:#b91c1c!important}
.badge.text-bg-warning{background:var(--warn-bg)!important;color:var(--warn)!important}
.badge.text-bg-info{background:#e3f3fb!important;color:#0e7490!important}
.badge.text-bg-secondary{background:#edeff5!important;color:var(--tx2)!important}
.badge.text-bg-dark{background:var(--ink2)!important;color:#fff!important}
.badge.text-bg-light{background:#f2f4f9!important;color:var(--tx2)!important}
.lead-status-pill,.lead-substatus-pill{display:inline-flex;align-items:center;min-height:24px;border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:800;background:var(--brand-bg);color:var(--brand2)}
.lead-substatus-pill{background:#f2f4f9;color:var(--tx2);border:1px solid var(--line)}

/* --------------------------------------------------------------------------
   Alerts, toasts, confirm dialog
   -------------------------------------------------------------------------- */
.alert{border:0;border-radius:14px;box-shadow:var(--sh)}
.ui-toast-stack{position:fixed;right:22px;bottom:22px;z-index:3000;display:grid;gap:10px;width:min(380px,calc(100vw - 28px));pointer-events:none}
.ui-toast{opacity:0;transform:translateY(8px);transition:.18s ease;pointer-events:auto;background:#fff;border:0;border-left:4px solid var(--brand);border-radius:14px;box-shadow:var(--sh2);padding:12px;display:grid;grid-template-columns:22px minmax(0,1fr) 28px;gap:9px;align-items:start;color:var(--tx);font-weight:800}
.ui-toast.show{opacity:1;transform:translateY(0)}
.ui-toast>i{margin-top:2px;color:var(--brand)}
.ui-toast span{font-size:13px;line-height:1.55}
.ui-toast button{border:0;background:transparent;color:var(--tx3);width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.ui-toast button:hover{background:var(--bg);color:var(--tx)}
.ui-toast-success{border-left-color:var(--ok)}.ui-toast-success>i{color:var(--ok)}
.ui-toast-danger{border-left-color:var(--bad)}.ui-toast-danger>i{color:var(--bad)}
.ui-toast-warning{border-left-color:#f59e0b}.ui-toast-warning>i{color:#f59e0b}
.ui-toast-info{border-left-color:var(--brand)}.ui-toast-info>i{color:var(--brand)}

.app-confirm-overlay{position:fixed;inset:0;background:rgba(11,16,32,.55);z-index:5000;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .16s ease;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.app-confirm-overlay.show{opacity:1}
.app-confirm-dialog{width:min(440px,100%);background:#fff;border:0;border-radius:20px;box-shadow:var(--sh2);padding:20px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;transform:translateY(8px) scale(.98);transition:transform .16s ease}
.app-confirm-dialog.show{transform:translateY(0) scale(1)}
.app-confirm-icon{width:48px;height:48px;border-radius:999px;background:var(--brand-bg);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:22px}
.app-confirm-body h5{font-size:16px;font-weight:900;color:var(--ink2);margin:1px 0 5px}
.app-confirm-body p{font-size:13px;color:var(--tx2);margin:0;line-height:1.6}
.app-confirm-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.app-confirm-actions .btn{min-width:96px}

/* --------------------------------------------------------------------------
   Notifications bell
   -------------------------------------------------------------------------- */
.notif-bell{position:relative}
.notif-toggle{position:relative;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--tx2);display:inline-flex;align-items:center;justify-content:center;transition:all .18s}
.notif-toggle:hover{color:var(--brand);border-color:var(--brand3);box-shadow:var(--sh)}
.notif-toggle .fa-bell{font-size:16px}
.notif-count{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:linear-gradient(95deg,var(--brand),#6d28d9);color:#fff;font-size:10.5px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(79,70,229,.5)}
.notif-menu{width:min(360px,90vw);padding:0;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh2);overflow:hidden}
.notif-menu-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:900;color:var(--ink2)}
.notif-list{max-height:340px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--tx);transition:background .15s}
.notif-item.is-read{background:#f7f8fc;color:var(--tx2);opacity:.78}
.notif-item.is-read .notif-icon{background:#eef0f6;color:var(--tx3)}
.notif-item:not(.is-read){box-shadow:inset 3px 0 0 var(--brand)}
/* Severity tones. The bell now carries every toast the app raises, so a failed
   save has to be tellable from a successful one at a glance. Read items keep the
   neutral treatment above so the unread ones stay the thing that draws the eye. */
.notif-item.notif-tone-success:not(.is-read){box-shadow:inset 3px 0 0 var(--ok)}
.notif-item.notif-tone-warning:not(.is-read){box-shadow:inset 3px 0 0 var(--warn)}
.notif-item.notif-tone-danger:not(.is-read){box-shadow:inset 3px 0 0 var(--bad)}
.notif-item.notif-tone-success:not(.is-read) .notif-icon{background:var(--ok-bg);color:var(--ok)}
.notif-item.notif-tone-warning:not(.is-read) .notif-icon{background:var(--warn-bg);color:var(--warn)}
.notif-item.notif-tone-danger:not(.is-read) .notif-icon{background:var(--bad-bg);color:var(--bad)}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--brand-bg)}
.notif-item .notif-icon{flex:0 0 34px;width:34px;height:34px;border-radius:999px;background:var(--brand-bg);color:var(--brand);display:flex;align-items:center;justify-content:center}
.notif-item strong{display:block;font-size:12.5px;line-height:1.4}
.notif-item small{color:var(--tx2);font-size:11px}
.notif-empty{padding:28px 14px;text-align:center;color:var(--tx3);font-weight:700}
.notif-foot{padding:10px 14px;border-top:1px solid var(--line);text-align:center}

/* --------------------------------------------------------------------------
   Tables — core containment + look
   -------------------------------------------------------------------------- */
.app-shell,.main-content,.app-content,main,.card,.card-body,.row,[class*="col-"],.settings-page,.settings-main-panel,.settings-records-panel{min-width:0;max-width:100%}
.table-responsive{width:100%;max-width:100%;overflow:visible!important;border-radius:0 0 var(--r) var(--r)}
.settings-table-responsive,.receiving-project-card .table-responsive,.import-first-row .table-responsive{max-width:100%;overflow-x:hidden!important;overflow-y:auto!important}
table.table{width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed!important;border-collapse:separate;border-spacing:0;font-size:13px}
table.table th,table.table td{min-width:0!important;max-width:100%;white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}
.table>:not(caption)>*>*{border-bottom:0;border-top:1px solid var(--line);padding:11px 10px}
.table td,.table th{vertical-align:middle}
table.table th{padding:.55rem .5rem}
table.table td{padding:.6rem .5rem}
.table thead th{border-top:0;color:var(--tx2);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;background:#f4f5fb!important}
.table{--bs-table-hover-bg:var(--brand-bg)}
.table-hover>tbody>tr:hover>*{background:var(--brand-bg)!important}
table.table input,table.table select,table.table textarea,table.table .form-control,table.table .form-select,table.table .search-select,table.table .search-select-button{width:100%!important;min-width:0!important;max-width:100%!important}
.text-break{word-break:break-word}
.table-columns-many{font-size:11px}
.table-columns-many th,.table-columns-many td{padding:.42rem .28rem!important}
.table-columns-many .table-sort-button{width:20px;height:20px;flex-basis:20px}

/* Column tools: sort + filter row */
.table-heading-control{display:flex;align-items:flex-start;justify-content:space-between;gap:7px;min-width:0;max-width:100%}
.table-heading-control>span{min-width:0;overflow-wrap:anywhere}
.table-sort-button{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:transparent;color:var(--tx3);padding:0;flex:0 0 24px}
.table-sort-button:hover,.table-sort-button[data-direction="asc"],.table-sort-button[data-direction="desc"]{background:var(--brand-bg);color:var(--brand)}
.table-filter-row th{padding:.35rem .4rem!important;background:#fff!important;border-bottom:1px solid var(--line)}
.table-column-filter{min-width:0!important;max-width:100%;font-size:11px!important;font-weight:600!important;text-transform:none;letter-spacing:0}
.table-filter-row .form-control,.table-filter-row .form-select{height:31px;padding-top:.2rem;padding-bottom:.2rem;border-radius:8px!important}
.table-filter-row .search-select{min-width:0!important;max-width:100%}
.table-filter-row .search-select-button{min-height:31px;padding:5px 28px 5px 9px;font-size:11px;border-radius:8px!important}
.table-filter-row .search-select-menu{min-width:min(220px,calc(100vw - 32px));z-index:1080}
.column-filter-hidden{display:none!important}
.table-mobile-tools{display:none}
.table-mobile-tools .search-select{width:100%}
.table-mobile-tools .search-select-button{width:100%}

/* Pagination */
.pagination{--bs-pagination-border-radius:999px;gap:5px}
.pagination .page-link{border:1px solid var(--line);border-radius:999px!important;color:var(--tx2);font-weight:700;min-width:34px;text-align:center}
.pagination .page-item.active .page-link{background:linear-gradient(95deg,var(--brand),#6d28d9);border-color:transparent;color:#fff;box-shadow:0 6px 14px rgba(79,70,229,.35)}
.pagination .page-link:hover{background:var(--brand-bg);color:var(--brand2)}
.pagination .page-item.disabled .page-link{background:transparent;color:var(--tx3)}

/* Timeline */
.timeline{position:relative}
.timeline-item{border-left:3px solid var(--brand);padding:0 15px 18px;margin-bottom:10px}

/* Linked lead cards */
.linked-lead-card{display:block;height:100%;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:var(--tx);transition:border-color .15s,box-shadow .15s,transform .15s}
.linked-lead-card:hover{border-color:var(--brand3);box-shadow:var(--sh);transform:translateY(-1px);color:var(--tx)}
.linked-lead-card strong{display:block;font-size:13px;margin-bottom:4px}
.linked-lead-card span{display:block;color:var(--tx2);font-size:12px;line-height:1.45}

/* --------------------------------------------------------------------------
   Leads list data grid
   -------------------------------------------------------------------------- */
.leads-table-card{overflow:hidden}
.leads-table-wrap{width:100%;max-width:100%;overflow-x:hidden!important;overflow-y:visible!important;border-radius:14px}
table.leads-data-table{table-layout:fixed!important;width:100%!important;min-width:0!important;max-width:100%!important;border-collapse:separate!important;border-spacing:0}
table.leads-data-table th,table.leads-data-table td{white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;overflow:hidden;text-overflow:ellipsis;vertical-align:middle!important;max-width:none!important;min-width:0!important;padding:.46rem .22rem!important;line-height:1.2}
table.leads-data-table th{position:sticky;top:0;z-index:2;background:#f4f5fb;color:var(--tx2);font-size:9px;font-weight:800;letter-spacing:0}
table.leads-data-table td{background:#fff;font-size:10px}
table.leads-data-table tr:hover td{background:var(--brand-bg)}
.leads-data-table .lead-col-_select{width:2.5%;text-align:center}
.leads-data-table .lead-col-id{width:4%}
.leads-data-table .lead-col-customer_name{width:8%}
.leads-data-table .lead-col-number_status{width:7%}
.leads-data-table .lead-col-phones{width:17%}
.leads-data-table .lead-col-source_id{width:6%}
.leads-data-table .lead-col-project_id{width:7%}
.leads-data-table .lead-col-request_id{width:6%}
.leads-data-table .lead-col-assigned_to{width:7.5%}
.leads-data-table .lead-col-status_id,.leads-data-table .lead-col-sub_status_id{width:6%}
.leads-data-table .lead-col-gud_sync_status{width:6%}
.leads-data-table .lead-col-created_at{width:7%}
.leads-data-table .lead-col-actions{width:10%;overflow:visible!important;text-overflow:clip;text-align:center!important}
.lead-assigned-stack{display:grid;gap:3px;min-width:0}
.leads-data-table .badge,.leads-data-table .lead-status-pill,.leads-data-table .lead-substatus-pill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;padding:.28rem .34rem}
.leads-data-table .lead-col-actions .btn{display:inline-flex;align-items:center;gap:3px;padding:.22rem .32rem;font-size:9px;white-space:nowrap;vertical-align:middle}
.leads-data-table .table-heading-control{align-items:center;gap:1px;white-space:nowrap}
.leads-data-table .table-heading-control>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leads-data-table .table-sort-button{width:15px;height:15px;flex:0 0 15px;font-size:8px}
.leads-data-table .table-column-filter{font-size:9px!important;padding-left:.24rem!important;padding-right:.24rem!important;white-space:nowrap!important}
.leads-data-table .table-filter-row th{padding:.25rem .16rem!important}
/* Automation rules — plain-language, right-to-left detail panel.
   The app shell is dir=ltr, so every Arabic block sets dir=rtl itself;
   without it the clauses render in visually reversed order. */
.rule-cell{text-align:right}
.rule-detail-row td{background:#f7f8fd;padding:0!important;border-top:0}
.rule-detail{border-right:4px solid var(--brand);border-left:0;padding:14px 16px;text-align:right}
.rule-detail-note{margin:0 0 12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12.5px;font-weight:700;color:var(--tx2)}
.rule-steps{display:grid;gap:9px;margin-bottom:12px}
.rule-step{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.rule-step-no{flex:0 0 26px;width:26px;height:26px;border-radius:999px;background:var(--brand-bg);color:var(--brand2);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}
.rule-step h6{margin:0 0 4px;font-size:11px;font-weight:900;color:var(--tx3)}
.rule-step p{margin:0;font-size:13px;font-weight:800;color:var(--ink2)}
.rule-step ul,.rule-step ol{margin:0;padding-right:18px;padding-left:0}
.rule-step li{font-size:13px;font-weight:700;color:var(--ink2);line-height:1.9}
.rule-step small{display:block;margin-top:4px;color:var(--tx3);font-size:11px;font-weight:700}
.rule-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:9px}
.rule-detail-grid>div{background:#fff;border:1px solid var(--line);border-radius:11px;padding:8px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.rule-detail-grid span{font-size:10px;font-weight:800;color:var(--tx3)}
.rule-detail-grid strong{font-size:12.5px;color:var(--ink2);overflow-wrap:anywhere}
.rule-detail-grid em{font-style:normal;font-weight:700;color:var(--tx3);font-size:10.5px}
.lead-gud-open-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px;justify-content:flex-end}
.lead-gud-open-count{display:block;width:100%;color:var(--tx3);font-size:8px;font-weight:800;line-height:1.2}
.lead-assigned-line{display:block;color:var(--tx2);font-size:11.5px;line-height:1.35}
.lead-assigned-line.is-current{color:var(--tx);font-weight:900}

/* --------------------------------------------------------------------------
   GUD CRM data grid (base — page adds its own "clone" skin)
   -------------------------------------------------------------------------- */
.gud-crm-page .gud-crm-heading{align-items:flex-start}
.gud-crm-actions{display:flex;align-items:flex-start;justify-content:flex-end;gap:10px;flex-wrap:wrap;max-width:760px}
.gud-sync-form{display:grid;grid-template-columns:150px minmax(150px,1fr) 92px 92px minmax(170px,auto) auto;gap:8px;align-items:center}
.gud-next-sync{height:38px;border:1px solid var(--line);border-radius:999px;background:#fff;display:flex;align-items:center;gap:7px;padding:0 13px;color:var(--tx2);font-size:12px;font-weight:800;white-space:nowrap}
.gud-next-sync i{color:var(--brand)}
.gud-next-sync strong{color:var(--brand2);font-variant-numeric:tabular-nums;font-size:13px}
.gud-filter-card{border-radius:14px}
.gud-filter-grid{display:grid;grid-template-columns:repeat(6,minmax(145px,1fr));gap:9px;align-items:center}
.gud-filter-search{grid-column:span 2}
.gud-table-card{overflow:hidden;border-radius:14px}
.gud-table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fff}
.gud-table-toolbar strong{display:block;color:var(--ink2);font-size:14px}
.gud-table-toolbar span{display:block;color:var(--tx2);font-size:12px}
.gud-table-wrap,.gud-log-wrap{width:100%;max-width:100%;overflow-x:auto!important;overflow-y:visible!important}
table.gud-crm-table,table.gud-log-table{table-layout:auto!important;width:max-content!important;min-width:100%!important;max-width:none!important;border-collapse:separate!important;border-spacing:0}
table.gud-crm-table th,table.gud-crm-table td,table.gud-log-table th,table.gud-log-table td{white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important;vertical-align:middle!important;max-width:none!important;min-width:0!important}
.gud-crm-table th{position:sticky;top:0;z-index:3;background:#f4f5fb;color:var(--tx2);font-size:11px;text-transform:none;letter-spacing:0}
.gud-crm-table td{font-size:12px;background:#fff}
.gud-crm-table tr:hover td{background:var(--brand-bg)}
.gud-crm-table .gud-col-external_id{position:sticky;left:0;z-index:4;min-width:86px;background:inherit;box-shadow:1px 0 0 var(--line)}
.gud-crm-table th.gud-col-external_id{z-index:6;background:#f4f5fb}
.gud-crm-table .gud-col-name{position:sticky;left:86px;z-index:4;min-width:170px;max-width:220px!important;background:inherit;box-shadow:1px 0 0 var(--line)}
.gud-crm-table th.gud-col-name{z-index:6;background:#f4f5fb}
.gud-crm-table .gud-col-lead_datetime{min-width:150px}
.gud-crm-table .gud-col-telephone1,.gud-crm-table .gud-col-telephone2,.gud-crm-table .gud-col-telephone3,.gud-crm-table .gud-col-telephone4{min-width:116px}
.gud-crm-table .gud-col-project_name,.gud-crm-table .gud-col-campaign_name,.gud-crm-table .gud-col-ad_name{min-width:150px;max-width:240px!important}
.gud-crm-table .gud-col-platform_name,.gud-crm-table .gud-col-platform_child_name,.gud-crm-table .gud-col-sales_name,.gud-crm-table .gud-col-created_by_name,.gud-crm-table .gud-col-leader_name,.gud-crm-table .gud-col-manager_name,.gud-crm-table .gud-col-marketer_name{min-width:130px}
.gud-crm-table .gud-col-status_name,.gud-crm-table .gud-col-sub_status_name,.gud-crm-table .gud-col-fresh_sales{min-width:110px}
.gud-crm-table .gud-col-notes,.gud-crm-table .gud-col-sales_report,.gud-crm-table .gud-col-history_json,.gud-crm-table .gud-col-actions_json,.gud-crm-table .gud-col-more_json,.gud-crm-table .gud-col-transfer_history_json{min-width:88px;text-align:center}
.gud-id-pill{display:inline-flex;align-items:center;justify-content:center;min-width:56px;border-radius:999px!important;font-weight:900}
.gud-transfer-form{display:grid;grid-template-columns:auto 86px;gap:6px;align-items:center}
.gud-transfer-form .form-control{width:86px!important;min-width:86px!important}
.gud-detail-btn{min-width:72px}
.gud-date{color:var(--tx2);font-variant-numeric:tabular-nums}
.gud-log-table{width:100%!important}
.gud-log-table th,.gud-log-table td{font-size:12px}

/* --------------------------------------------------------------------------
   Prospect files
   -------------------------------------------------------------------------- */
.prospect-files-grid{display:grid;grid-template-columns:1fr;gap:14px}
.prospect-file-card{overflow:hidden}
.prospect-file-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px;border-bottom:1px solid var(--line);background:#fff}
.prospect-file-head h5{font-weight:900;color:var(--ink2)}
.prospect-file-meta,.prospect-file-summary{display:flex;flex-wrap:wrap;gap:8px 12px;color:var(--tx2);font-size:12px;font-weight:800}
.prospect-file-meta i{color:var(--brand)}
.prospect-file-body{padding:14px 16px}
.prospect-chip-row{display:flex;flex-wrap:wrap;gap:7px}
.prospect-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#f7f8fc;color:var(--tx);border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800}
.prospect-chip i{color:var(--brand)}
.prospect-file-summary{margin-top:10px}

/* --------------------------------------------------------------------------
   Import
   -------------------------------------------------------------------------- */
.import-first-row{border:1px solid var(--line);border-radius:14px;background:#f7f8fc;padding:12px}
.import-first-row .table-responsive{max-height:240px;overflow:auto;border-radius:10px}
.import-first-row th{position:sticky;top:0;background:#fff;z-index:1}
.import-selected-sample{min-height:38px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:8px 10px;color:var(--tx2);font-size:12px;line-height:1.45;word-break:break-word}
.import-header-dropdown{width:100%}
.import-header-toggle{width:100%;justify-content:space-between;background:#f7f8fc!important;border:1px solid var(--line)!important;color:var(--tx)!important;min-height:40px;text-align:left;border-radius:var(--r-sm)!important}
.import-header-menu{width:min(520px,calc(100vw - 48px));max-height:320px;overflow:auto;padding:8px;border:1px solid var(--line);box-shadow:var(--sh2);border-radius:14px}
.import-header-menu.show{display:flex!important;flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important}
.import-header-option{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;padding:8px 9px;border-radius:9px;cursor:pointer;margin:0}
.dropdown-menu.show>.import-header-option{display:grid!important;grid-template-columns:18px minmax(0,1fr);width:100%;flex:0 0 auto}
.import-header-option:hover{background:var(--brand-bg)}
.import-header-option input{margin-top:3px}
.import-header-option strong{display:block;font-size:13px;color:var(--tx);line-height:1.25}
.import-header-option small{display:block;color:var(--tx3);font-size:11px;line-height:1.35;margin-top:2px;word-break:break-word}
.import-sheet-preview .table-responsive{max-height:430px;overflow:auto!important;border-radius:14px}
.import-sheet-preview th{position:sticky;top:0;background:#fff;z-index:1}
.import-sheet-preview [data-sheet-column].is-import-mapped{background:#eaf8ef!important;border-color:#b7ebc6!important;box-shadow:inset 0 0 0 999px rgba(34,197,94,.06)}
.import-sheet-preview th.is-import-mapped{background:#22c55e!important;color:#fff!important}
.import-preview-page{display:grid;gap:18px;padding-bottom:88px}
.import-preview-heading{margin-bottom:0}
.import-eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--brand);font-size:12px;font-weight:900;margin-bottom:6px}
.import-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.import-summary-card{display:flex;align-items:center;gap:12px;padding:15px 16px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh1)}
.import-summary-card>div{display:grid;line-height:1.15}
.import-summary-card strong{font-size:22px;color:var(--ink2);font-weight:900}
.import-summary-card span:not(.import-summary-icon){font-size:11px;color:var(--tx3);font-weight:800;margin-top:5px}
.import-summary-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:17px;flex:0 0 auto}
.import-summary-icon.is-blue{background:#eaf2ff;color:#2563eb}.import-summary-icon.is-green{background:#eaf9ef;color:#16a34a}
.import-summary-icon.is-violet{background:#f2edff;color:#7c3aed}.import-summary-icon.is-amber{background:#fff6df;color:#d97706}
.import-mapping-panel,.import-sheet-preview{overflow:visible}
.import-panel-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid var(--line)}
.import-panel-head h5{display:flex;align-items:center;gap:9px;margin:0 0 5px;font-weight:900;color:var(--ink2)}
.import-panel-head h5 i{color:var(--brand)}.import-panel-head p{margin:0;color:var(--tx3);font-size:12px;font-weight:700}
.import-progress-ring{--mapping-progress:0%;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:conic-gradient(#22c55e var(--mapping-progress),#e8ecf3 0);position:relative}
.import-progress-ring:before{content:"";position:absolute;inset:6px;background:#fff;border-radius:50%}.import-progress-ring span{position:relative;font-size:12px;font-weight:900;color:var(--ink2)}
.import-mapping-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 22px;background:#fafbfe;border-bottom:1px solid var(--line)}
.import-search{position:relative;min-width:min(360px,100%)}.import-search i{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--tx3)}
.import-search .form-control{padding-right:40px;border-radius:11px}
.import-filter-group{display:flex;gap:6px}.import-filter-group .btn{border:1px solid var(--line);background:#fff;color:var(--tx2);font-size:12px;font-weight:800;border-radius:9px}
.import-filter-group .btn.active{background:var(--ink2);border-color:var(--ink2);color:#fff}
.import-mapping-guide{display:flex;align-items:center;justify-content:center;gap:14px;padding:11px;background:#f0f6ff;color:#48617e;font-size:11px;font-weight:800;border-bottom:1px solid #dce8f7}
.import-mapping-guide span{display:flex;align-items:center;gap:6px}.import-mapping-guide b{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--brand)}
.import-mapping-guide>i{font-size:10px;color:#9cb0c7}
.import-mapping-list{display:grid;gap:10px;padding:16px 18px;max-height:720px;overflow:auto}
.import-map-row{display:grid;grid-template-columns:minmax(190px,.85fr) minmax(230px,1fr) minmax(270px,1.15fr);align-items:center;gap:14px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:.18s ease}
.import-map-row:hover{border-color:#b9c7da;box-shadow:0 7px 20px rgba(33,52,79,.07)}.import-map-row.is-mapped{border-right:4px solid #22c55e}
.import-map-field{display:flex;align-items:center;gap:11px;min-width:0}.import-map-field>div{min-width:0}
.import-map-field strong{display:block;color:var(--ink2);font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-map-field code{display:block;color:var(--tx3);font-size:10px;margin-top:4px}
.import-map-state{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f1f3f7;color:#98a2b3;flex:0 0 auto}
.is-mapped .import-map-state{background:#e9f9ef;color:#16a34a}
.import-toggle-content{display:grid;text-align:right;min-width:0}.import-toggle-content small{font-size:9px;color:var(--tx3);font-weight:800}
.import-toggle-content b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.import-header-toggle{display:flex!important;align-items:center!important}.import-header-toggle:after{margin-right:auto}
.import-dropdown-title{font-size:11px;color:var(--tx3);font-weight:900;padding:5px 9px 9px;border-bottom:1px solid var(--line);margin-bottom:4px}
.import-map-result{min-width:0}.import-result-label,.import-default-label{font-size:9px;color:var(--tx3);font-weight:900;margin-bottom:5px}
.import-result-label i{color:#16a34a;margin-left:4px}.import-selected-sample{min-height:40px;background:#f2fbf5;border-color:#c8ecd3;color:#176a35;font-weight:800}
.import-no-results{padding:48px;text-align:center;color:var(--tx3);display:grid;justify-items:center;gap:7px}
.import-no-results i{font-size:25px}.import-no-results strong{color:var(--tx);font-size:14px}.import-no-results span{font-size:11px}
.import-preview-badge{display:inline-flex;align-items:center;gap:7px;background:#edf9f0;color:#16823b;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:900}
.import-sheet-preview{overflow:hidden}.import-sheet-preview .table-responsive{border-radius:0;max-height:520px}
.import-sheet-preview table{font-size:11px}.import-sheet-preview td{min-width:130px;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.import-sheet-preview th{background:#f6f8fb}.import-sheet-preview .import-row-number{position:sticky;right:0;min-width:54px!important;width:54px;background:#eef1f6!important;z-index:3;text-align:center;font-weight:900}
.import-confirm-bar{position:sticky;bottom:12px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:16px;padding:13px 16px 13px 20px;background:rgba(23,32,51,.97);backdrop-filter:blur(12px);border-radius:17px;color:#fff;box-shadow:0 18px 45px rgba(11,16,32,.28)}
.import-confirm-bar>div{display:flex;align-items:center;gap:12px}.import-confirm-bar>div>i{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#67e08b}
.import-confirm-bar span{display:grid}.import-confirm-bar strong{font-size:13px}.import-confirm-bar small{color:#c3cbd8;font-size:10px;margin-top:3px}.import-confirm-bar .btn{border-radius:12px;font-weight:900;font-size:13px}
@media(max-width:1100px){.import-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.import-map-row{grid-template-columns:minmax(180px,.75fr) 1fr}.import-map-result{grid-column:1/-1;padding-right:45px}}
@media(max-width:700px){.import-summary-grid{grid-template-columns:1fr 1fr}.import-summary-card{padding:12px}.import-mapping-toolbar{align-items:stretch;flex-direction:column}.import-search{min-width:0}.import-filter-group{overflow:auto}.import-mapping-guide{display:none}.import-map-row{grid-template-columns:1fr}.import-map-result{grid-column:auto;padding-right:0}.import-panel-head{padding:16px}.import-mapping-list{padding:12px;max-height:none}.import-confirm-bar{align-items:stretch;flex-direction:column}.import-confirm-bar .btn{width:100%}.import-confirm-bar>div{display:none}}
.import-monitor-page{display:grid;gap:16px}
.import-monitor-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.import-monitor-summary>div{display:grid;gap:5px;padding:15px 17px;background:#fff;border:1px solid var(--line);border-radius:14px;border-top:4px solid #94a3b8;box-shadow:var(--sh1)}
.import-monitor-summary span{font-size:11px;color:var(--tx3);font-weight:800}.import-monitor-summary strong{font-size:24px;color:var(--ink2);font-weight:900}
.import-monitor-summary .is-success{border-top-color:#22c55e}.import-monitor-summary .is-danger{border-top-color:#ef4444}.import-monitor-summary .is-warning{border-top-color:#f59e0b}
.import-monitor-filters{padding:10px;background:#fff;border:1px solid var(--line);border-radius:13px}
.import-monitor-table th{white-space:nowrap;background:#f6f8fb}.import-monitor-table td{font-size:12px;vertical-align:top}
@media(max-width:800px){.import-monitor-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.import-monitor-summary>div:first-child{grid-column:1/-1}}
.imports-overview-page{display:grid;gap:18px}
.imports-overview-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
.imports-overview-summary>div{display:grid;gap:7px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--sh1)}
.imports-overview-summary span{display:flex;align-items:center;gap:7px;color:var(--tx3);font-size:11px;font-weight:800}
.imports-overview-summary strong{font-size:25px;color:var(--ink2);font-weight:900}.imports-overview-summary .is-success i,.imports-overview-summary .is-success strong{color:#16a34a}
.imports-overview-summary .is-danger i,.imports-overview-summary .is-danger strong{color:#dc2626}.imports-overview-summary .is-rate i,.imports-overview-summary .is-rate strong{color:#7c3aed}
.imports-batch-list{display:grid;gap:11px}
.imports-batch-card{display:grid;grid-template-columns:minmax(250px,1.15fr) minmax(300px,1fr) minmax(180px,.7fr) auto;align-items:center;gap:18px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-right:4px solid #22c55e;border-radius:16px;box-shadow:var(--sh1)}
.imports-batch-card.has-issues{border-right-color:#f59e0b}.imports-batch-main{display:flex;align-items:center;gap:13px;min-width:0}
.imports-batch-icon{width:46px;height:46px;border-radius:14px;background:#eaf9ef;color:#16a34a;display:grid;place-items:center;font-size:18px;flex:0 0 auto}
.has-issues .imports-batch-icon{background:#fff5dd;color:#d97706}.imports-batch-title{min-width:0}.imports-batch-title h5{font-size:14px;font-weight:900;margin:0;color:var(--ink2)}
.imports-batch-title p{margin:5px 0 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--tx2);font-size:11px;font-weight:800;max-width:360px}
.imports-batch-title small{font-size:10px;color:var(--tx3)}.imports-batch-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.imports-batch-stats span{display:grid;text-align:center;padding:8px 5px;background:#f6f8fb;border-radius:9px;color:var(--tx3);font-size:9px;font-weight:800}
.imports-batch-stats b{display:block;color:var(--ink2);font-size:14px}.imports-batch-stats .is-success b{color:#16a34a}.imports-batch-stats .is-danger b{color:#dc2626}.imports-batch-stats .is-warning b{color:#d97706}
.imports-batch-progress{display:grid;gap:7px}.imports-batch-progress span,.imports-batch-progress b{font-size:10px;color:var(--tx3)}.imports-batch-progress .progress{height:7px;background:#edf0f5}
.imports-batch-action .btn{white-space:nowrap;border-radius:10px;font-size:11px;font-weight:900}
@media(max-width:1200px){.imports-batch-card{grid-template-columns:minmax(230px,1fr) minmax(280px,1fr) auto}.imports-batch-progress{grid-column:1/-1}.imports-overview-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.imports-overview-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.imports-batch-card{grid-template-columns:1fr}.imports-batch-stats{grid-template-columns:repeat(4,1fr)}.imports-batch-action .btn{width:100%}}
.permission-required-prominent{padding:8px 10px;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px}
.permission-required-prominent>label{color:#c2410c!important;font-weight:900!important}.permission-required-prominent>label i{font-size:9px;margin-left:4px}
/* Same control on list/report pages, where the rule only bites on create/edit. */
.permission-required-prominent{flex-wrap:wrap}
.permission-required-indirect{background:#f8fafc;border-color:var(--line)}
.permission-required-indirect>label{color:var(--tx2)!important}
.permission-required-prominent>em{flex:0 0 100%;font-style:normal;font-size:9px;font-weight:700;color:var(--tx3);margin-top:3px}
.custom-field-builder{margin:0 0 18px;background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--sh1);overflow:hidden}
.custom-field-builder>summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 20px;cursor:pointer;list-style:none;background:linear-gradient(135deg,#f7f5ff,#eef5ff)}
.custom-field-builder>summary::-webkit-details-marker{display:none}.custom-field-builder>summary>span{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px}
.custom-field-builder>summary>span>i{grid-row:1/3;width:38px;height:38px;border-radius:12px;background:#6d3df0;color:#fff;display:grid;place-items:center}
.custom-field-builder>summary b{font-size:14px;color:var(--ink2)}.custom-field-builder>summary small{font-size:10px;color:var(--tx3)}
.custom-field-builder[open]>summary>i{transform:rotate(180deg)}.custom-field-builder-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:18px;padding:18px}
.custom-field-form{border:1px solid var(--line);border-radius:14px;padding:16px;background:#fbfcfe}.custom-field-form-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:15px}
.custom-field-form-head h5{font-size:14px;font-weight:900;margin:0 0 4px}.custom-field-form-head p{font-size:10px;color:var(--tx3);margin:0}
.custom-field-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.custom-field-form-grid label>span{display:block;font-size:10px;font-weight:900;color:var(--tx2);margin-bottom:5px}
.custom-field-form-grid label>span b{color:#dc2626}.custom-options-field,.custom-help-field{grid-column:1/-1}.custom-options-field small{display:block;color:var(--tx3);font-size:9px;margin-top:4px}
.custom-field-flags{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px}.custom-field-flags>label{position:relative}.custom-field-flags input{position:absolute;opacity:0}
.custom-field-flags span{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:#fff;cursor:pointer}
.custom-field-flags span i{grid-row:1/3;color:#94a3b8}.custom-field-flags span b{font-size:10px}.custom-field-flags span small{font-size:8px;color:var(--tx3)}
.custom-field-flags input:checked+span{border-color:#8b5cf6;background:#f5f1ff}.custom-field-flags input:checked+span i{color:#7c3aed}
.custom-field-actions{display:flex;justify-content:flex-end;margin-top:14px}.custom-field-list{display:grid;align-content:start;gap:8px;max-height:520px;overflow:auto}
.custom-field-list-head{display:flex;justify-content:space-between;align-items:center;padding:0 3px 6px}.custom-field-list-head h6{font-size:12px;font-weight:900;margin:0}.custom-field-list-head span{font-size:9px;color:var(--tx3)}
.custom-field-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px;border:1px solid var(--line);border-radius:12px}.custom-field-item.is-inactive{opacity:.65}
.custom-field-type-icon{width:34px;height:34px;border-radius:10px;background:#eef2ff;color:#6542df;display:grid;place-items:center}.custom-field-item-main{min-width:0}
.custom-field-item-main>div{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.custom-field-item-main strong{font-size:11px;color:var(--ink2)}.custom-field-item-main small{font-size:9px;color:var(--tx3)}
.custom-field-item-actions{display:flex;gap:5px}.custom-field-item-actions form{margin:0}.custom-field-empty{display:grid;justify-items:center;gap:8px;padding:35px;color:var(--tx3);font-size:10px}
@media(max-width:1000px){.custom-field-builder-body{grid-template-columns:1fr}.custom-field-list{max-height:none}}@media(max-width:600px){.custom-field-form-grid{grid-template-columns:1fr}.custom-options-field,.custom-help-field{grid-column:auto}.custom-field-item{grid-template-columns:auto 1fr}.custom-field-item-actions{grid-column:1/-1;justify-content:flex-end}}

/* --------------------------------------------------------------------------
   Receiving control
   -------------------------------------------------------------------------- */
.receiving-admin-table th,.receiving-admin-table td{white-space:nowrap}
.receiving-channel-pair{display:flex;flex-wrap:wrap;gap:10px 14px;min-width:0!important}
.receiving-number{max-width:92px}
.receiving-project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:82px}
.receiving-project-card .table-responsive{max-height:430px;overflow:auto}
.receiving-project-card thead th{position:sticky;top:0;background:#f4f5fb;z-index:1}
.sticky-save-bar{position:sticky;bottom:12px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--ink2);color:#fff;border-radius:999px;padding:12px 20px;box-shadow:0 18px 40px rgba(11,16,32,.3)}
.sticky-save-bar span{font-weight:700;font-size:13px}

/* --------------------------------------------------------------------------
   Settings pages
   -------------------------------------------------------------------------- */
.settings-page{display:flex;flex-direction:column;gap:18px}
.settings-modern{gap:18px}
.settings-header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.settings-section-title{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:14px 16px;font-weight:800}
.settings-create-grid{display:grid;grid-template-columns:220px repeat(4,minmax(120px,1fr)) auto 150px;gap:14px;align-items:end;padding:16px}
.settings-create-grid .form-label{font-size:.78rem;font-weight:700;color:var(--tx2)}
.settings-active-check{align-self:center;margin:0}
.settings-create-action{align-self:end}
.settings-manager{display:grid;grid-template-columns:240px minmax(0,1fr);gap:16px;align-items:start}
.settings-nav{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;position:sticky;top:82px;box-shadow:var(--sh)}
.settings-nav-item{width:100%;border:0;background:transparent;border-radius:10px;color:var(--tx);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;text-align:left;font-weight:700}
.settings-nav-item strong{background:#eef0f6;color:var(--tx2);border-radius:999px;min-width:30px;padding:2px 8px;text-align:center;font-size:.78rem}
.settings-nav-item:hover{background:#f4f5fb}
.settings-nav-item.active{background:linear-gradient(95deg,var(--brand),#6d28d9);color:#fff}
.settings-nav-item.active strong{background:rgba(255,255,255,.18);color:#fff}
.settings-table-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--line)}
.settings-table-head h5{margin:0;font-weight:800}
.settings-table-head span{color:var(--tx2);font-size:.85rem}
.settings-table-wrap{max-height:calc(100vh - 250px);overflow:auto}
.settings-table thead th{position:sticky;top:0;background:#f4f5fb;z-index:2;color:var(--tx2);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.settings-table thead tr:first-child th{top:0}
.settings-table thead tr.table-filter-row th{top:38px;z-index:3}
.settings-table td{vertical-align:top}
.settings-relations{min-width:0!important;display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:6px}
.settings-relations .form-label{font-size:.72rem;margin:.15rem 0;color:var(--tx2)}
.settings-relations .form-select,.settings-relations .form-control{margin-bottom:.25rem}
.settings-sort-input{width:86px}
.settings-actions{min-width:0!important;white-space:normal!important;display:flex;gap:6px;flex-wrap:wrap}
.settings-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px;align-items:start}
.settings-side-panel{display:grid;gap:14px;position:sticky;top:86px}
.settings-side-card{padding:12px}
.settings-side-title{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tx2);font-weight:800;margin-bottom:10px}
.settings-tab-list{display:grid;gap:6px}
.settings-tab-button{width:100%;border:0;background:transparent;border-radius:999px;color:var(--tx);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;text-align:left;font-weight:700}
.settings-tab-button strong{background:#eef0f6;color:var(--tx2);border-radius:999px;min-width:30px;padding:2px 8px;text-align:center;font-size:.78rem}
.settings-tab-button:hover{background:#f4f5fb}
.settings-tab-button.active{background:linear-gradient(95deg,var(--brand),#6d28d9);color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.3)}
.settings-tab-button.active strong{background:rgba(255,255,255,.18);color:#fff}
.settings-quick-form{display:grid;gap:10px}
.settings-quick-form .form-label,.settings-field .form-label{font-size:.74rem;font-weight:800;color:var(--tx2);margin-bottom:4px}
.settings-inline-controls{display:flex;gap:8px;align-items:center}
.settings-inline-controls .form-control-color{width:42px;min-width:42px}
.settings-inline-controls input[type=number]{max-width:82px}
.settings-table-title{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--line)}
.settings-table-title h5{margin:0;font-weight:800}
.settings-table-title span{color:var(--tx2);font-size:.85rem}
.settings-table-responsive{max-height:calc(100vh - 150px);overflow:auto}
.settings-name-cell{display:flex;align-items:center;gap:9px}
.settings-name-cell strong{color:var(--tx)}
.color-indicator{width:22px;height:22px;border-radius:8px;display:inline-block;border:1px solid rgba(30,36,51,.12);flex:0 0 22px}
.settings-badges{display:flex;flex-wrap:wrap;gap:5px}
.relation-badge{display:inline-flex;align-items:center;gap:5px;background:var(--brand-bg);color:var(--brand2);border-radius:999px;padding:4px 10px;font-size:.76rem;font-weight:700}
.settings-edit-row td{background:#f7f8fd;padding:0!important}
.settings-edit-panel{border-left:4px solid var(--brand);padding:16px;background:linear-gradient(135deg,#fff,#f7f8fd)}
.settings-edit-grid{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px}
.settings-edit-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f4f5fb;border-radius:12px;padding:10px 12px;margin-top:12px}
.settings-child-section{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.settings-child-title{font-weight:800;color:var(--ink2);margin-bottom:10px}
.settings-child-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:12px;padding:0}
.settings-child-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px}
.settings-child-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.settings-child-head strong{font-size:.9rem}
.settings-child-head span{background:var(--brand-bg);color:var(--brand2);border-radius:999px;padding:1px 9px;font-size:.75rem;font-weight:800}
.settings-child-create{display:grid;gap:8px;margin-bottom:10px}
.settings-child-create .form-label,.settings-child-item .form-label{font-size:.7rem;margin:.1rem 0;color:var(--tx2)}
.settings-child-create .form-check,.settings-child-item .form-check{margin:0;align-self:center;white-space:nowrap}
.settings-child-list{display:grid;gap:8px;max-height:320px;overflow:auto}
.settings-child-item{display:grid;gap:8px;border:1px solid var(--line);border-radius:12px;background:#f9fafd;padding:9px}
.settings-child-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;white-space:nowrap}
.settings-child-row td{background:#f7f8fd;padding:0 14px 14px!important;border-top:0}
.settings-child-details{border:1px solid var(--line);border-radius:12px;background:#fff}
.settings-child-details summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;font-weight:800;color:var(--ink2);list-style:none}
.settings-child-details summary::-webkit-details-marker{display:none}
.settings-child-details summary:after{content:"";width:.55rem;height:.55rem;border-right:1.5px solid var(--tx2);border-bottom:1.5px solid var(--tx2);transform:rotate(45deg);transition:.15s ease}
.settings-child-details[open] summary{border-bottom:1px solid var(--line)}
.settings-child-details[open] summary:after{transform:rotate(225deg)}
.settings-child-details summary strong{background:#eef0f6;color:var(--tx2);border-radius:999px;min-width:28px;text-align:center;padding:2px 8px;font-size:.78rem}
.settings-fixed-unit{min-height:38px;border:1px solid var(--line);border-radius:var(--r-sm);background:#f7f8fc;color:var(--tx);display:flex;align-items:center;padding:7px 11px;font-weight:900}
.settings-main-panel{display:grid;gap:14px;min-width:0}
.settings-create-main-card{margin-bottom:0}
.settings-create-main-form{display:grid;grid-template-columns:minmax(190px,240px) repeat(2,minmax(170px,1fr)) minmax(250px,auto) minmax(130px,160px);gap:12px;align-items:end;padding:16px}
.settings-create-main-form .form-label{font-size:.74rem;font-weight:800;color:var(--tx2);margin-bottom:4px}
.settings-create-main-form .settings-inline-controls{align-items:center}
.settings-branding-form{display:grid;grid-template-columns:92px repeat(4,minmax(150px,1fr)) minmax(140px,auto);gap:12px;align-items:end;padding:16px}
.settings-branding-preview{height:74px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(190deg,#1a2040,#0e1224);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px}
.settings-branding-preview img{max-width:66px;max-height:38px;object-fit:contain}
.settings-branding-preview strong{font-size:11px;color:var(--amber2);line-height:1}
.settings-records-panel{min-width:0}
.position-depth-item{margin-left:calc(var(--position-depth,0) * 18px);position:relative}
.position-depth-item:before{content:"";display:block;position:absolute;left:-10px;top:16px;width:8px;border-top:1px solid #cbd5e1}

/* --------------------------------------------------------------------------
   Permissions — master/detail workbench
   Left pane = access tree, right pane = the focused page as card grids.
   Mode colors are semantic: hidden = slate, view = indigo, edit = green.
   -------------------------------------------------------------------------- */
.permission-toolbar{display:grid;grid-template-columns:minmax(200px,260px) minmax(0,1fr) auto;gap:16px;align-items:end;background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);padding:14px 18px;margin-bottom:16px}
.permission-toolbar .form-label{margin-bottom:6px}
.permission-role-select-wrap{position:relative}
.permission-role-select-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--brand);pointer-events:none;z-index:1}
.permission-role-select-wrap .form-select{padding-left:38px;min-height:42px;font-weight:800}
.permission-search{display:flex;align-items:center;gap:9px;background:#f7f8fc;border:1px solid var(--line);border-radius:999px;padding:0 8px 0 16px;min-height:42px;transition:border-color .15s,background .15s,box-shadow .15s}
.permission-search:focus-within{border-color:var(--brand3);background:#fff;box-shadow:0 0 0 4px rgba(79,70,229,.13)}
.permission-search>i{color:var(--tx3)}
.permission-search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:13.5px;color:var(--tx);min-width:60px}
.permission-search input::placeholder{color:var(--tx3)}
.permission-search-count{background:var(--brand-bg);color:var(--brand2);border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:800;white-space:nowrap}
.permission-search [data-search-clear]{width:28px;height:28px;border:0;border-radius:999px;background:transparent;color:var(--tx3);display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px}
.permission-search [data-search-clear]:hover{background:#eef0f6;color:var(--tx)}
.permission-btn-pair{display:inline-flex;background:#f7f8fc;border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.permission-btn-pair button{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:800;color:var(--tx2);white-space:nowrap;transition:background .15s,color .15s}
.permission-btn-pair button:hover{background:#fff;color:var(--brand2);box-shadow:var(--sh)}
.permission-btn-pair button.is-active{background:var(--brand);color:#fff}
.permission-btn-pair button.is-active:hover{background:var(--brand2);color:#fff}
.permission-btn-pair button i{font-size:9px}
.perm-search-hide,.perm-filter-hide{display:none!important}

/* Workspace ------------------------------------------------------------- */
.permission-workspace{display:grid;grid-template-columns:minmax(258px,300px) minmax(0,1fr);gap:14px;align-items:start}
.permission-workspace-solo,.permission-workspace.is-tree-hidden{grid-template-columns:minmax(0,1fr)}
.permission-workspace.is-tree-hidden>.permission-tree-pane{display:none}
.permission-tree-pane{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;position:sticky;top:86px;display:flex;flex-direction:column;max-height:calc(100vh - 100px);min-height:320px}
.permission-pane-head{padding:13px 14px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,var(--ink2),#252d50);color:#fff;flex:0 0 auto}
.permission-pane-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;margin-bottom:10px}
.permission-pane-title i{color:var(--brand3)}
.permission-scope-field .form-label{color:rgba(255,255,255,.6);margin-bottom:4px}
.permission-scope-field .form-label i{cursor:help}
.permission-scope-field .form-select{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.16)!important;color:#fff!important;font-weight:700}
.permission-scope-field .form-select option{color:var(--tx);background:#fff}
/* Two rules here are load-bearing, do not "simplify" them:
   min-height:0 lets this flex child shrink so overflow-y:auto actually scrolls;
   and the groups must be flex-column children with flex:0 0 auto — as grid rows
   they get compressed (their overflow:hidden zeroes their automatic minimum
   size) and each group clips its own items. */
.permission-tree{flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px}
.permission-tree>*{flex:0 0 auto}

/* Tree — group ---------------------------------------------------------- */
.permission-tree-group{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.permission-tree-group>header{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#f4f5fb;border-bottom:1px solid var(--line)}
.permission-caret{width:22px;height:22px;flex:0 0 22px;border:0;border-radius:7px;background:transparent;color:var(--tx3);display:inline-flex;align-items:center;justify-content:center;font-size:9px;transition:background .15s,color .15s,transform .18s}
.permission-caret:hover{background:#e7eaf3;color:var(--tx)}
.permission-caret i{transition:transform .18s ease}
.is-collapsed>header .permission-caret i,.is-collapsed>.permission-tree-item-head .permission-caret i{transform:rotate(-90deg)}
.is-collapsed>[data-tree-group-body],.is-collapsed>[data-tree-item-body]{display:none!important}
.permission-tree-name{display:flex;align-items:center;gap:6px;min-width:0;flex:1}
.permission-tree-name>i{width:15px;text-align:center;color:var(--brand);font-size:11px;flex:0 0 15px}
/* Wrap rather than ellipsis: a truncated "Customer Visits Sche…" is unusable
   for choosing a page, and the pane scrolls anyway. */
.permission-tree-name strong{font-size:12.5px;color:var(--ink2);line-height:1.3;min-width:0;overflow-wrap:anywhere}
.permission-tree-name small{flex:0 0 auto;background:#eef0f6;color:var(--tx2);border-radius:999px;min-width:20px;padding:1px 6px;text-align:center;font-size:9.5px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.permission-tree-group>header .permission-tree-name strong{font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.permission-tree-items{display:grid;gap:6px;padding:8px}
.permission-tree-item{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.permission-tree-item-head{display:flex;align-items:center;gap:8px;padding:7px 9px;background:#fbfcff}
.permission-tree-pages{display:grid;gap:4px;padding:6px 8px 8px 18px;position:relative}
.permission-tree-pages:before{content:"";position:absolute;left:9px;top:2px;bottom:10px;width:2px;border-radius:2px;background:#e7eaf3}
.permission-tree-empty{color:var(--tx3);font-size:11px;padding:4px 2px}

/* Tree — page rows ------------------------------------------------------ */
.permission-tree-page-head{display:flex;align-items:center;gap:6px;border-radius:10px;padding:4px 6px 4px 4px;transition:background .15s}
.permission-tree-page-head:hover{background:#f4f5fb}
.permission-page-link{display:flex;align-items:center;gap:7px;min-width:0;flex:1;text-decoration:none;color:var(--tx);padding:3px 4px;border-radius:8px}
.permission-page-link>i{width:14px;text-align:center;font-size:10px;color:var(--tx3);flex:0 0 14px}
.permission-page-link>span{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.permission-page-link strong{font-size:12px;font-weight:700;color:var(--tx);line-height:1.3;min-width:0;overflow-wrap:anywhere}
.permission-page-link small{color:var(--tx3);font-size:9.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.permission-page-link:hover{color:var(--brand2)}
.permission-page-link:hover strong{color:var(--brand2)}
.permission-tree-page.is-current>.permission-tree-page-head{background:var(--brand-bg);box-shadow:inset 3px 0 0 var(--brand)}
.permission-page-link.is-current{cursor:default}
.permission-page-link.is-current>i{color:var(--brand)}
.permission-page-link.is-current strong{color:var(--brand2);font-weight:800}

/* Detail pane ----------------------------------------------------------- */
.permission-detail-pane{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;min-width:0}
.permission-detail-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#fff,#f7f8fd)}
.permission-crumb{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3);margin-bottom:3px}
.permission-detail-head h5{margin:0;font-size:16px;font-weight:900;color:var(--ink2);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.permission-detail-head code{font-size:10.5px;font-weight:700;color:#64748b;background:#f2f4f9;border-radius:7px;padding:2px 8px}
.permission-page-state{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:5px 13px;font-size:11px;font-weight:800;background:var(--ok-bg);color:#15803d;white-space:nowrap}
.permission-page-state.is-off{background:#eef0f6;color:var(--tx2)}
.permission-detail-body{padding:13px;display:grid;gap:13px}

.permission-empty-state{padding:64px 24px;text-align:center;color:var(--tx2)}
.permission-empty-state i{font-size:34px;color:var(--tx3);opacity:.5}
.permission-empty-state h5{margin:14px 0 6px;font-weight:900;color:var(--ink2)}
.permission-empty-state p{margin:0 auto;max-width:420px;font-size:13px;line-height:1.6}

/* Blocks (sections / fields) -------------------------------------------- */
.permission-block{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.permission-block>header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 13px;background:#f8f9fd;border-bottom:1px solid var(--line)}
.permission-block>header h6{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;font-weight:900;color:var(--ink2)}
.permission-block>header h6>i{color:var(--brand)}
.permission-block-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.permission-block-empty,.permission-block-note{padding:22px 14px;text-align:center;color:var(--tx3);font-size:12px;font-weight:700}
.permission-count-chip{display:inline-flex;align-items:center;background:#e7eaf3;color:var(--tx2);border-radius:999px;padding:2px 9px;font-size:10px;font-weight:800}

/* Mode filter chips */
.permission-filter-chips{display:inline-flex;background:#eef0f6;border-radius:999px;padding:3px;gap:2px}
.permission-filter-chips button{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;border-radius:999px;padding:4px 11px;font-size:10.5px;font-weight:800;color:var(--tx2);white-space:nowrap;transition:background .15s,color .15s}
.permission-filter-chips button em{font-style:normal;font-size:9.5px;opacity:.65;font-variant-numeric:tabular-nums}
.permission-filter-chips button:hover{color:var(--ink2)}
.permission-filter-chips button.is-active{background:#fff;color:var(--ink2);box-shadow:var(--sh)}
.permission-filter-chips button.is-active[data-filter-mode="hidden"]{color:#334155}
.permission-filter-chips button.is-active[data-filter-mode="view"]{color:var(--brand2)}
.permission-filter-chips button.is-active[data-filter-mode="editable"]{color:#15803d}

/* Bulk set */
.permission-bulk{display:inline-flex;align-items:center;gap:5px}
.permission-bulk em{font-style:normal;font-size:10px;color:var(--tx3);font-weight:800}
.permission-bulk button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 11px;font-size:10px;font-weight:800;color:var(--tx2);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.permission-bulk button[data-bulk-mode="hidden"]:hover{background:#334155;border-color:#334155;color:#fff}
.permission-bulk button[data-bulk-mode="view"]:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.permission-bulk button[data-bulk-mode="editable"]:hover{background:var(--ok);border-color:var(--ok);color:#fff}

/* Card grid — 3 across on a normal desktop, adapts to the viewport ------- */
.permission-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(218px,1fr));gap:10px;padding:10px}
.permission-element-card,.permission-field-card{display:flex;flex-direction:column;gap:9px;border:1px solid var(--line);border-radius:13px;background:#fff;padding:11px 12px;min-width:0;transition:border-color .15s,box-shadow .15s}
.permission-element-card:hover,.permission-field-card:hover{border-color:var(--brand3);box-shadow:var(--sh)}
.permission-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}
.permission-card-head>span{display:flex;flex-direction:column;gap:3px;min-width:0;align-items:flex-start}
.permission-card-head strong{font-size:12.5px;font-weight:800;color:var(--ink2);line-height:1.35;overflow-wrap:anywhere}
.permission-card-head code{font-size:10px;color:#64748b;background:#f2f4f9;border-radius:6px;padding:1px 7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.permission-card-head small{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:2px 8px;font-size:8.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3);white-space:nowrap}
.permission-element-card .permission-card-head>i{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:var(--brand-bg);color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-size:11px;order:-1}
.permission-element-card .permission-card-head{align-items:center}
.permission-element-card .permission-card-head small{border:0;padding:0;letter-spacing:.04em}
.permission-card-switch{display:flex}
.permission-field-controls{display:flex;flex-direction:column;gap:8px;min-width:0}

/* Segmented mode control — semantic colors ------------------------------ */
.permission-field-modes,.permission-element-modes{display:flex;align-items:center;flex-wrap:wrap;gap:8px 0}
.permission-field-modes label,.permission-element-modes label{margin:0;cursor:pointer}
.permission-field-modes input,.permission-element-modes input{position:absolute;opacity:0}
.permission-field-modes label:not(.permission-mask) span,.permission-element-modes label span{display:inline-flex;align-items:center;padding:5px 12px;border:1px solid var(--line);font-size:10.5px;font-weight:800;color:var(--tx2);background:#fff;position:relative;transition:background .15s,color .15s,border-color .15s}
.permission-field-modes label:not(.permission-mask):not(:first-child) span,.permission-element-modes label:not(:first-child) span{margin-left:-1px}
.permission-field-modes label:first-child span,.permission-element-modes label:first-child span{border-radius:999px 0 0 999px}
.permission-field-modes label:nth-child(3) span,.permission-element-modes label:nth-child(3) span{border-radius:0 999px 999px 0}
.permission-field-modes label:not(.permission-mask) span:hover,.permission-element-modes label span:hover{background:#f2f4f9}
.permission-field-modes input:checked+span,.permission-element-modes input:checked+span{color:#fff;z-index:1}
.permission-field-modes input[value="hidden"]:checked+span,.permission-element-modes input[value="hidden"]:checked+span{background:#334155;border-color:#334155}
.permission-field-modes input[value="view"]:checked+span,.permission-element-modes input[value="view"]:checked+span{background:var(--brand);border-color:var(--brand)}
.permission-field-modes input[value="editable"]:checked+span,.permission-element-modes input[value="editable"]:checked+span{background:var(--ok);border-color:var(--ok)}
.permission-field-modes input:focus-visible+span,.permission-element-modes input:focus-visible+span{outline:3px solid rgba(37,99,235,.42);outline-offset:2px;z-index:2}
.permission-mask{margin-left:8px!important}
.permission-mask span{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;font-size:10.5px;font-weight:800;color:var(--tx2);background:#fff;transition:background .15s,color .15s,border-color .15s}
.permission-mask span i{font-size:9px}
.permission-mask input:checked+span{background:#111827;border-color:#111827;color:#fff}

/* Secondary field options */
.permission-field-extra{display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.permission-required-mode{display:inline-flex;align-items:center;gap:5px}
.permission-required-mode label{font-size:10px;color:var(--tx2);font-weight:800;margin:0}
.permission-required-mode select{width:auto;min-width:112px;min-height:29px;padding:2px 22px 2px 8px;font-size:10.5px;border-radius:999px!important}
.perm-inline-option{display:inline-flex;margin:0;cursor:pointer}
.perm-inline-option input{position:absolute;opacity:0}
.perm-inline-option span{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:999px;padding:5px 11px;font-size:10.5px;font-weight:800;color:var(--tx3);background:#fff;transition:background .15s,color .15s,border-color .15s}
.perm-inline-option span i{font-size:9px;opacity:.7}
.perm-inline-option input:checked+span{background:var(--brand-bg);border-color:rgba(79,70,229,.4);color:var(--brand2)}
.perm-inline-option input:checked+span i{opacity:1}
.perm-inline-option input:focus-visible+span{outline:3px solid rgba(37,99,235,.42);outline-offset:2px}

/* Hidden-value editor (stacks inside a card) */
.field-hidden-fill-editor{padding:9px 10px;border:1px solid #dfe3f4;border-radius:11px;background:#f7f8fd}
.field-hidden-fill-title{display:flex;align-items:center;gap:6px;margin-bottom:7px;color:var(--brand2);font-size:10.5px;font-weight:900}
.field-hidden-fill-grid{display:grid;grid-template-columns:1fr;gap:7px}
.field-hidden-fill-grid label{margin:0;min-width:0}
.field-hidden-fill-grid label>span{display:block;margin-bottom:3px;color:var(--tx2);font-size:10px;font-weight:800}
.field-hidden-fill-grid .form-control,.field-hidden-fill-grid .form-select{font-size:11px;min-height:31px;padding-top:4px;padding-bottom:4px}

/* Visibility switch ----------------------------------------------------- */
.permission-switch{display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.permission-switch input{position:absolute;opacity:0;pointer-events:none}
.permission-switch>span{width:34px;height:19px;border-radius:999px;background:#cbd0dc;position:relative;transition:.18s;flex:0 0 34px}
.permission-switch>span:after{content:"";position:absolute;width:13px;height:13px;top:3px;left:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.22);transition:.18s}
.permission-switch input:checked+span{background:var(--ok)}
.permission-switch input:checked+span:after{transform:translateX(15px)}
.permission-switch input:focus-visible+span{outline:3px solid rgba(37,99,235,.42);outline-offset:2px}
.permission-switch b{font-size:9.5px;font-weight:800;min-width:36px;color:var(--tx3)}
.permission-switch input:checked~b{color:var(--ok)}
/* In the tree the switch colour already carries the state; the word is kept for
   screen readers only so long page names get the space instead. */
.permission-tree .permission-switch b{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}

/* Detail pane dimmed when the focused page itself is hidden for the role */
.permission-detail-pane.is-page-off .permission-detail-body{opacity:.55}

/* System permissions ---------------------------------------------------- */
.permission-extra{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-top:16px}
.permission-extra>summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:900;color:var(--ink2);display:flex;align-items:center;gap:9px}
.permission-extra>summary::-webkit-details-marker{display:none}
.permission-extra>summary:after{content:"";width:.55rem;height:.55rem;border-right:1.5px solid var(--tx2);border-bottom:1.5px solid var(--tx2);transform:rotate(45deg);margin-left:auto;transition:.15s ease}
.permission-extra[open]>summary:after{transform:rotate(225deg)}
.permission-extra>summary>i{color:var(--brand)}
.permission-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;padding:0 16px 16px}
.permission-check{border:1px solid var(--line);border-radius:12px;padding:9px 11px;background:#fff;height:100%;display:flex;gap:9px;align-items:flex-start;transition:border-color .15s}
.permission-check:hover{border-color:var(--brand3)}
.permission-check input{margin-top:3px;accent-color:var(--brand)}
.permission-check span{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.permission-check strong{font-size:12.5px;color:var(--tx)}
.permission-check small{font-size:11px;color:var(--tx2);overflow-wrap:anywhere}

/* Save bar -------------------------------------------------------------- */
.permission-save-bar{position:sticky;bottom:12px;z-index:6;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px 16px;box-shadow:var(--sh2);margin-top:16px}
.permission-save-meta{display:flex;align-items:center;gap:9px;min-width:0;flex:1}
.permission-save-meta i{color:var(--brand)}
.permission-save-meta span{font-size:12px;font-weight:700;color:var(--tx2)}
.permission-save-meta strong{color:var(--ink2)}
.permission-dirty-status{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--tx3);background:#f2f4f9;border-radius:999px;padding:6px 12px;white-space:nowrap;transition:background .15s,color .15s}
.permission-dirty-status.is-dirty{background:var(--amber-bg);color:var(--warn)}

.permission-tree-noresults{color:var(--tx3);font-size:12px;font-weight:700;text-align:center;padding:20px 10px}
.permission-readonly-scope{pointer-events:none;opacity:.7}

/* Permissions — responsive ---------------------------------------------- */
@media(max-width:900px){
    .permission-workspace{grid-template-columns:1fr}
    .permission-tree-pane{position:static;max-height:none}
    .permission-tree{max-height:340px}
    .permission-toolbar{grid-template-columns:1fr}
    .permission-tree-controls .permission-btn-pair{width:100%}
    .permission-tree-controls .permission-btn-pair button{flex:1;justify-content:center}
}
@media(max-width:768px){
    .permission-card-grid{grid-template-columns:1fr;padding:10px}
    .permission-block>header{align-items:flex-start;flex-direction:column}
    .permission-block-tools{margin-left:0;width:100%}
    .permission-filter-chips,.permission-bulk{flex-wrap:wrap}
    .permission-detail-body{padding:12px}
    .permission-save-bar{flex-wrap:wrap}
    .permission-save-meta{flex:1 1 100%}
}

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */
.auth-bg{
    background:
        radial-gradient(700px 400px at 88% -10%,rgba(79,70,229,.16),transparent 60%),
        radial-gradient(600px 380px at -10% 105%,rgba(109,40,217,.12),transparent 60%),
        var(--bg);
}
.auth-bg .card{border-radius:24px!important;box-shadow:var(--sh2)!important}
.auth-logo-frame{width:76px;height:76px;border-radius:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(190deg,#1a2040,#0e1224);padding:10px;box-shadow:0 12px 28px rgba(11,16,32,.25)}
.auth-logo{width:100%;height:100%;object-fit:contain}

/* --------------------------------------------------------------------------
   Misc utilities
   -------------------------------------------------------------------------- */
.page-quick-hidden{display:none!important}
.nav-group-label{font-size:.75rem;color:var(--tx3);padding:8px 18px 3px;font-weight:700}

/* --------------------------------------------------------------------------
   Responsive — tablets
   -------------------------------------------------------------------------- */
@media(max-width:1200px){
    .settings-create-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}
    .settings-manager{grid-template-columns:1fr}
    .settings-nav{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
    .settings-workspace{grid-template-columns:1fr}
    .settings-side-panel{position:static;grid-template-columns:1fr 1fr}
    .settings-edit-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}
    .settings-create-main-form,.settings-branding-form{grid-template-columns:repeat(2,minmax(160px,1fr))}
    .settings-create-main-form .btn{grid-column:auto}
    .gud-crm-actions{width:100%;max-width:none;justify-content:flex-start}
    .gud-sync-form{grid-template-columns:repeat(2,minmax(140px,1fr))}
    .gud-filter-grid{grid-template-columns:repeat(3,minmax(130px,1fr))}
}
@media(max-width:1100px){
    .settings-child-grid{grid-template-columns:1fr}
    .receiving-project-grid{grid-template-columns:1fr}
    .receiving-project-card .table-responsive{max-height:none}
    .sticky-save-bar{align-items:stretch;flex-direction:column;border-radius:18px}
}
@media(max-width:992px){
    .sidebar{transform:translateX(-100%);transition:.22s;width:272px}
    .sidebar.open{transform:translateX(0);box-shadow:24px 0 60px rgba(11,16,32,.4)}
    body.sidebar-mobile-open .sidebar{transform:translateX(0)!important;box-shadow:24px 0 60px rgba(11,16,32,.4)}
    .main-content{margin-left:0;width:100%}
    .topbar{padding:10px 16px}
    .topbar-search{display:none}
    .user-chip{display:none}
    .app-content{padding:18px 16px 112px!important}
    .sidebar-collapse-btn{display:none}
}
@media(max-width:768px){
    .page-heading,.settings-header,.settings-edit-footer{align-items:flex-start;flex-direction:column}
    .settings-side-panel,.settings-child-grid,.settings-edit-grid{grid-template-columns:1fr}
    .main-content main{padding:16px!important}
    .settings-table-responsive{max-height:none}
    .topbar .text-muted{display:none}
    .settings-actions .btn{margin-bottom:4px}
    .permission-grid{grid-template-columns:1fr}
    .gud-filter-grid,.gud-sync-form{grid-template-columns:1fr}
    .gud-filter-search{grid-column:auto}
    .gud-table-toolbar{align-items:flex-start;flex-direction:column}
}
@media(max-width:700px){
    .settings-create-main-form,.settings-branding-form{grid-template-columns:1fr}
    .settings-create-grid{grid-template-columns:1fr}
    .settings-nav{grid-template-columns:1fr}
    .settings-relations{grid-template-columns:1fr}
    .settings-table-wrap{max-height:none}
    .prospect-file-head{flex-direction:column}
    .prospect-file-head .btn{width:100%}
}
@media(max-width:680px){
    .ui-toast-stack{right:14px;bottom:14px;width:calc(100vw - 28px)}
    .topbar-actions form .btn{width:36px;height:36px;padding:0;font-size:0}
    .topbar-actions form .btn i{margin:0;font-size:14px}
    .page-title{font-size:19px}
    .metric-card strong{font-size:24px}
}

/* --------------------------------------------------------------------------
   Responsive — mobile card tables (behavioral, do not remove)
   -------------------------------------------------------------------------- */
@media(max-width:768px){
    html,body{max-width:100%;overflow-x:hidden}
    .app-shell,.main-content,.app-content,.card,.table-responsive,.settings-table-responsive{max-width:100%;overflow-x:hidden!important}
    .table-responsive,.settings-table-responsive{overflow:visible!important;max-height:none!important;border-radius:0!important}
    table.table{display:block;width:100%!important;min-width:0!important;border-collapse:separate!important;border-spacing:0!important}
    table.table thead{display:none!important}
    .table-mobile-tools{display:block;margin:0 0 10px;background:#fff;border:0;border-radius:14px;box-shadow:var(--sh)}
    .table-mobile-tools summary{display:flex;align-items:center;gap:8px;padding:11px 14px;color:var(--brand2);font-weight:900;cursor:pointer;list-style:none}
    .table-mobile-tools summary::-webkit-details-marker{display:none}
    .table-mobile-tools-grid{display:grid;grid-template-columns:1fr;gap:9px;padding:0 12px 12px}
    .table-mobile-filter-field{display:grid;gap:4px;min-width:0}
    .table-mobile-filter-field>span{font-size:11px;color:var(--tx2);font-weight:900}
    table.table tbody{display:block;width:100%}
    table.table tbody tr{display:block;width:100%;background:#fff;border:0;border-radius:16px;margin:0 0 12px;padding:8px;box-shadow:var(--sh)}
    table.table tbody tr.collapse:not(.show){display:none!important}
    table.table tbody td,table.table tbody th{display:flex!important;align-items:flex-start;justify-content:space-between;gap:14px;width:100%!important;min-width:0!important;max-width:100%!important;padding:8px 6px!important;border-top:1px solid var(--line)!important;text-align:right!important;white-space:normal!important;overflow-wrap:anywhere;word-break:break-word}
    table.table tbody tr>:first-child{border-top:0!important}
    table.table tbody td:before{content:attr(data-label);flex:0 0 42%;max-width:42%;text-align:left;color:var(--tx2);font-weight:900;font-size:11.5px;line-height:1.5}
    table.table tbody td.mobile-full-cell,table.table tbody td[colspan]{display:block!important;text-align:center!important}
    table.table tbody td.mobile-full-cell:before,table.table tbody td[colspan]:before{display:none!important}
    table.table tbody td>*{max-width:100%;min-width:0}
    table.table tbody td .btn,table.table tbody td form{max-width:100%;white-space:normal}
    table.mobile-key-value-table tbody th{display:none!important}
    table.mobile-key-value-table tbody td{display:block!important;text-align:left!important}
    table.mobile-key-value-table tbody td:before{display:block;max-width:100%;margin-bottom:3px;text-align:left}
    .settings-actions,.user-actions,.settings-child-actions{display:flex!important;justify-content:flex-start!important;gap:6px;flex-wrap:wrap;white-space:normal!important}
    .settings-actions form,.user-actions form,.settings-child-actions form{display:inline-flex}
    .pagination{flex-wrap:wrap}
    /* GUD CRM keeps a real grid on mobile */
    .gud-crm-page .table-mobile-tools{display:none!important}
    .gud-crm-page table.table{display:table!important}
    .gud-crm-page table.table thead{display:table-header-group!important}
    .gud-crm-page table.table tbody{display:table-row-group!important}
    .gud-crm-page table.table tbody tr{display:table-row!important;border:0!important;box-shadow:none!important;margin:0!important;padding:0!important}
    .gud-crm-page table.table tbody td,.gud-crm-page table.table tbody th{display:table-cell!important;width:auto!important;padding:.55rem .45rem!important;text-align:left!important;border-top:1px solid var(--line)!important}
    .gud-crm-page table.table tbody td:before{display:none!important}
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print{
    .sidebar,.topbar,.report-toolbar,.app-confirm-overlay,.ui-toast-stack,.sidefoot,.alert-dismissible .btn-close{display:none!important}
    .main-content{margin-left:0!important;width:100%!important}
    .app-content{padding:0!important;max-width:none!important}
    .card,.table-responsive{box-shadow:none!important;border:0!important}
    body{background:#fff!important}
    a[href]:after{content:""!important}
    .table{font-size:12px}
}

/* --------------------------------------------------------------------------
   Accessibility, resilient loading, and small-screen finishing
   -------------------------------------------------------------------------- */
.skip-link{position:fixed;top:10px;left:10px;z-index:99999;transform:translateY(-180%);background:#111827;color:#fff!important;border-radius:10px;padding:10px 14px;font-weight:900;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.skip-link:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid rgba(37,99,235,.42)!important;outline-offset:2px!important}
#mainContent:focus{outline:0!important}
.asset-warning{display:flex;align-items:flex-start;gap:10px;border:1px solid #f59e0b;background:#fffbeb;color:#78350f;border-radius:14px;padding:11px 14px;margin:0 0 14px;font-weight:700}
.asset-warning i{margin-top:3px}
.chart-unavailable{min-height:180px;display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed var(--line);border-radius:14px;background:#f8fafc;color:var(--tx2);padding:20px;font-weight:800}
.card,.metric-card,.report-card,.settings-child-item,.permission-check{min-width:0}
.card-title,.page-title,.page-heading h1,.page-heading h2,.page-heading h3,.metric-card,.report-card{overflow-wrap:anywhere}
img,svg,canvas{max-width:100%}
.form-control,.form-select,.btn{min-height:38px}
textarea.form-control{min-height:96px}

@media(max-width:768px){
    .page-heading>.d-flex,.page-heading>.btn-group,.page-heading>.settings-actions,.settings-header>.d-flex{width:100%;flex-wrap:wrap}
    .page-heading>.d-flex .btn,.page-heading>.btn-group .btn,.page-heading>.settings-actions .btn{flex:1 1 150px}
    .card-header,.card-footer{padding-left:14px!important;padding-right:14px!important}
    .card-body{padding:14px!important}
    .modal-dialog{margin:10px!important;max-width:calc(100% - 20px)!important}
    .modal-content{max-height:calc(100vh - 20px);overflow:auto}
    .sticky-save-bar,.permission-save-bar{left:0;right:0;width:100%;border-radius:16px;flex-wrap:wrap}
    .sticky-save-bar .btn,.permission-save-bar .btn{width:100%}
    /* .is-fixed is listed explicitly: it is more specific than a bare .search-select-menu, so
       without it the desktop button-anchored coordinates would override this centred mobile
       sheet whenever the menu sits inside a scrollable ancestor. */
    .search-select-menu,.search-select-menu.is-fixed,.search-select-menu.is-above{position:fixed;left:12px!important;right:12px!important;top:18vh!important;bottom:auto!important;width:auto!important;max-width:none!important;max-height:64vh;z-index:1060}
    .search-select-list{max-height:48vh}
    .visit-submit-row{position:sticky;bottom:0;z-index:8;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);padding:12px;margin-left:-12px;margin-right:-12px;gap:8px}
    .visit-submit-row>*{flex:1 1 0;text-align:center}
}

@media(max-width:480px){
    .app-content,.main-content main{padding-left:10px!important;padding-right:10px!important}
    .topbar{padding-left:10px;padding-right:10px}
    .btn{white-space:normal}
    .page-title{font-size:18px}
    .metric-card strong{font-size:21px}
    table.table tbody td:before{flex-basis:38%;max-width:38%}
}
.empty-state-icon{font-size:26px;opacity:.35}
.notification-empty-icon{font-size:22px}
.text-gold{color:var(--gold)!important}
.text-preview-220{max-width:220px}
.text-preview-260{max-width:260px}
.detail-label-column{width:260px}
.user-search-width{width:280px}
.mapping-field-column{width:240px}
.mapping-preview-column{width:32%}
.metric-value-medium{font-size:1rem!important}
.metric-value-compact{font-size:.9rem!important}
.metric-value-small{font-size:.83rem!important}
.visit-history-scroll{overflow:auto}
.calendar-empty{background:rgba(120,150,180,.06)}

/* Internal contacts — phones read as numbers, not as code/number fragments */
.contact-phone-list{display:grid;gap:5px}
.contact-phone{display:block;font-weight:800;font-size:12.5px;color:var(--brand2);text-decoration:none;line-height:1.4;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:embed}
.contact-phone:hover{text-decoration:underline}

/* Lead form — grouped sections */
.lead-form-section{margin-top:6px}
.lead-form-section h6{display:flex;align-items:center;gap:8px;margin:0;padding:9px 13px;background:linear-gradient(135deg,var(--brand-bg),#f7f8fd);border-right:3px solid var(--brand);border-radius:10px;font-size:12.5px;font-weight:900;color:var(--brand2)}
.lead-form-section h6 i{font-size:11px}
.lead-form-section:first-of-type{margin-top:0}

/* Toasts / confirm dialog: Arabic messages get their own direction, since the
   app shell is dir=ltr and a mixed Arabic+Latin sentence reverses without it.
   dir=rtl already mirrors the grid columns, so do NOT add `order` here — it
   cancels that mirroring and puts the icon back on the wrong side. */
.ui-toast[dir="rtl"]{border-left:0;border-right:4px solid var(--brand);text-align:right}
.ui-toast-success[dir="rtl"]{border-right-color:var(--ok)}
.ui-toast-danger[dir="rtl"]{border-right-color:var(--bad)}
.ui-toast-warning[dir="rtl"]{border-right-color:#f59e0b}
.ui-toast-info[dir="rtl"]{border-right-color:var(--brand)}
.app-confirm-body[dir="rtl"]{text-align:right}

/* Pending Requests — phone opens the GUD search for that number */
.intake-phone-cell{white-space:normal}
.intake-phone-list{display:grid;gap:5px}
.intake-phone-row{display:flex;align-items:center}
.intake-phone{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12.5px;color:var(--brand2);text-decoration:none;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:embed}
.intake-phone i{font-size:9px;opacity:.65}
.intake-phone:hover{text-decoration:underline}
.intake-phone:hover i{opacity:1}
.intake-phone-call{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-inline-start:6px;border-radius:999px;background:var(--brand-bg);color:var(--brand2);font-size:10px;text-decoration:none}
.intake-phone-call:hover{background:var(--brand);color:#fff}

/* Pending Requests — column widths.
   The global table-layout:fixed splits every column evenly, which squeezed the
   phone cell until the GUD chip broke mid-word ("Abdelrahma n Samir") and the
   Assign button wrapped to "Assi gn". Give each column a share that matches its
   content instead. */
.intake-pending-table{table-layout:fixed}
.intake-pending-table .ip-col-created{width:11%}
.intake-pending-table .ip-col-workflow{width:11%}
.intake-pending-table .ip-col-caller{width:11%}
.intake-pending-table .ip-col-phone{width:29%}
.intake-pending-table .ip-col-project{width:11%}
.intake-pending-table .ip-col-notes{width:11%}
.intake-pending-table .ip-col-assign{width:16%}
.intake-pending-table td,.intake-pending-table th{vertical-align:middle}
.intake-pending-table .ip-col-caller strong,.intake-pending-table .ip-col-project,.intake-pending-table .ip-col-workflow{overflow-wrap:anywhere}
.intake-pending-table .ip-col-notes{color:var(--tx2);font-size:11.5px;overflow-wrap:anywhere}
.intake-assign-form{display:flex;align-items:center;gap:7px;min-width:0}
.intake-assign-form .search-select{flex:1;min-width:0}
/* The enhanced picker hides the native select with opacity:0, but the generic
   `table.table select{width:100%!important}` rule then stretched that invisible,
   absolutely-positioned box to the full content width. Keep it at 1px. */
table.table select.search-select-native{width:1px!important;max-width:1px!important}
.intake-assign-form .btn{white-space:nowrap;flex:0 0 auto}

/* Pending Requests — what GUD knows about each number */
.intake-phone-row{flex-wrap:wrap;gap:6px}
.intake-gud-none{font-style:normal;font-size:10px;font-weight:800;color:var(--tx3);background:#f2f4f9;border-radius:999px;padding:2px 9px}
.intake-gud-hit{display:inline-flex;align-items:center;gap:6px;max-width:100%;text-decoration:none;background:var(--ok-bg);border:1px solid rgba(22,163,74,.25);border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:800;color:#15803d;white-space:nowrap;overflow:hidden}
.intake-gud-hit>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.intake-gud-hit:hover{background:var(--ok);color:#fff;border-color:var(--ok)}
.intake-gud-hit:hover .intake-gud-status,.intake-gud-hit:hover .intake-gud-sales{color:#fff}
.intake-gud-hit b{font-variant-numeric:tabular-nums;direction:ltr}
.intake-gud-status{color:#166534}
.intake-gud-sales{display:inline-flex;align-items:center;gap:4px;color:var(--tx2);font-weight:700}
.intake-gud-sales i{font-size:8px;opacity:.7}

/* Leads list: same number, no GUD record, and a different sales owner locally */
.lead-owner-clash{display:inline-flex;align-items:center;gap:4px;margin-top:3px;max-width:100%;background:var(--warn-bg);color:var(--warn);border:1px solid rgba(180,83,9,.25);border-radius:999px;padding:1px 7px;font-size:8.5px;font-weight:800;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.lead-owner-clash i{font-size:8px;flex:0 0 auto}


/* 2026 unified UX hardening */
.app-filter-card,.card,.table-responsive{position:relative;overflow:visible}
/* Flowing band funnel (dashboard/_funnel_flow.php). The SVG carries the geometry; this
   only supplies typography and colour, so it stays legible in both themes. */
.funnel-flow{margin:-4px -4px 14px;overflow:hidden}
.funnel-flow-svg{display:block;width:100%;height:auto;overflow:visible}
.funnel-flow-divider{stroke:var(--line);stroke-width:1.5}
.funnel-flow-count{font-size:30px;font-weight:800;fill:var(--ink2);font-variant-numeric:tabular-nums}
.funnel-flow-stage{font-size:13.5px;font-weight:800;fill:var(--ok);letter-spacing:.02em}
.funnel-flow-pct{font-size:13px;font-weight:800;fill:var(--brand)}
.funnel-flow-pct.funnel-flow-muted{fill:var(--tx3);font-weight:700}
.funnel-flow-legend text{font-size:13px;font-weight:700;fill:var(--tx2)}
.funnel-flow-band path{transition:opacity .15s}
.funnel-flow-svg:hover .funnel-flow-band{opacity:.42}
.funnel-flow-svg .funnel-flow-band:hover{opacity:1}
@media(max-width:640px){
    .funnel-flow-count{font-size:34px}
    .funnel-flow-stage,.funnel-flow-pct,.funnel-flow-legend text{font-size:15px}
}

/* Stage rows under the ribbon: the exact figures, each one a drill-down link. */
.funnel{display:grid;gap:6px}
.funnel-headline{font-size:13px;color:var(--tx2)}
.funnel-headline strong{color:var(--ok);font-size:16px}
.funnel-stage{display:grid;grid-template-columns:minmax(140px,1.1fr) minmax(0,2.4fr) minmax(90px,.7fr) minmax(90px,.7fr);gap:12px;align-items:center;padding:9px 12px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.funnel-stage:hover{border-color:var(--brand);background:var(--brand-bg)}
.funnel-label{display:grid;min-width:0}
.funnel-label strong{font-size:13px;color:var(--ink2)}
.funnel-label small{font-size:11px;color:var(--tx2);overflow-wrap:anywhere}
.funnel-bar-wrap{background:var(--brand-bg);border-radius:999px;height:18px;overflow:hidden}
/* The reveal is a CSS animation, not a JS-driven transition, so the bar is correct
   even if scripts are slow or blocked; only the flourish depends on the animation. */
.funnel-bar{display:block;height:100%;border-radius:999px;width:var(--funnel-width,100%);transform-origin:left center;animation:funnel-grow .55s ease both}
@keyframes funnel-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.funnel-bar{animation:none}}
/* Cool at the wide top, warm at the narrow bottom, so the taper reads at a glance. */
.funnel-bar-0{background:linear-gradient(90deg,var(--brand),#818cf8)}
.funnel-bar-1{background:linear-gradient(90deg,#6366f1,#a78bfa)}
.funnel-bar-2{background:linear-gradient(90deg,#8b5cf6,#c084fc)}
.funnel-bar-3{background:linear-gradient(90deg,var(--warn),#fbbf24)}
.funnel-bar-4{background:linear-gradient(90deg,var(--ok),#4ade80)}
.funnel-figures{display:grid;text-align:end}
.funnel-figures strong{font-size:15px;color:var(--ink2);font-variant-numeric:tabular-nums}
.funnel-figures small{font-size:10.5px;color:var(--tx2)}
.funnel-drop{display:grid;text-align:end;font-size:11.5px}
.funnel-keep{font-weight:800;color:var(--tx)}
.funnel-lost{color:var(--bad)}
@media(max-width:820px){
    .funnel-stage{grid-template-columns:1fr 1fr;gap:6px}
    .funnel-bar-wrap{grid-column:1/-1;order:3}
    .funnel-figures,.funnel-drop{text-align:start}
}

/* Multi-select filter, shared by GUD CRM Leads and the Dashboard (partials/multi_select_filter.php).
   The toggle is a real .form-select so it lines up with the inputs beside it; the menu is
   absolutely positioned, so its filter card must carry .app-filter-card (see the z-index note
   below) or a later card paints over the open menu. */
.gud-multi{position:relative}
.gud-multi-toggle{cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:34px}
.gud-multi.has-selection .gud-multi-toggle{border-color:var(--brand);font-weight:800}
.gud-multi-menu{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:2060;min-width:100%;width:max-content;max-width:min(340px,80vw);background:var(--card,#fff);color:var(--tx);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh2);padding:8px}
.gud-multi.open .gud-multi-menu{display:block}
.gud-multi-menu.is-above{top:auto;bottom:calc(100% + 4px)}
.gud-multi-menu.is-end{left:auto;right:0}
.gud-multi-actions{display:flex;gap:6px;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.gud-multi-actions .gud-multi-search{flex:1;min-width:0}
.gud-multi-list{max-height:var(--gud-multi-list-max,260px);overflow-y:auto}
.gud-multi-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:13px;margin:0;color:inherit}
.gud-multi-item:hover{background:var(--brand-bg)}
.gud-multi-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gud-multi-item.is-hidden{display:none}
.gud-multi-item.is-empty-option{border-bottom:1px solid var(--line);margin-bottom:4px;padding-bottom:8px;font-style:italic}
.gud-multi-empty{padding:8px;font-size:12px;color:var(--tx3)}
/* Text and date filters get the same "empty" escape hatch as the multi-selects. */
.gud-date-filter{display:grid;gap:4px}
.gud-empty-toggle{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--tx2);cursor:pointer;margin:0}
.gud-empty-toggle input{cursor:pointer}

/* 15 only has to beat the content card that follows the filter card in the DOM
   (position:relative, z-index:auto) so the filter dropdowns open over it. It must
   stay under .topbar (25) or the filter card covers the open notification panel. */
.app-filter-card{z-index:15}.app-filter-card .dropdown-menu,.app-filter-card .search-select-menu,.gud-multi-menu{z-index:2060!important}
.dashboard-metric-grid{position:relative;z-index:1}.crm-chart{min-height:300px}
.table-responsive{overflow-x:auto}.table thead th{position:sticky;top:0;z-index:3;background:var(--card,#fff);white-space:nowrap}
.table td{vertical-align:middle}.table tbody tr:hover{background:rgba(79,70,229,.055)}
.report-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.report-summary-card{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--card,#fff);box-shadow:var(--sh)}
.report-summary-card span{display:block;color:var(--tx2);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.report-summary-card strong{display:block;font-size:25px;color:var(--ink2);margin-top:5px}
.report-insight{border-left:4px solid var(--brand);background:var(--brand-bg);padding:12px 14px;border-radius:12px;margin-bottom:16px;color:var(--tx)}
/* Source picker for the follow-up delays filter. Lives here rather than in a
   style= attribute because style-src carries no 'unsafe-inline'. */
.report-source-menu{max-height:320px;overflow-y:auto}
/* Wide reports opt out of the global table-layout:fixed and scroll instead. Without
   both rules the extra columns are squeezed to unreadable widths with no scrollbar,
   because .table-responsive above forces overflow:visible. Mirrors .gud-table-wrap. */
.table-responsive.report-wide-responsive{width:100%;max-width:100%;overflow-x:auto!important;overflow-y:visible!important}
table.table.report-wide-table{table-layout:auto!important;width:max-content!important;min-width:100%!important;max-width:none!important}
table.table.report-wide-table th,table.table.report-wide-table td{white-space:nowrap!important;word-break:normal!important;min-width:0!important;max-width:none!important}
/* Tables on this report sit on the page rather than inside a card. A card adds a
   rounded, padded, blurred panel around a grid that is already ruled and shaded -
   two frames around the same content - and its padding is width the table needs.
   The heading strip stays, because a detail table has to say what it is showing. */
.report-table-block{position:relative;width:100%;max-width:100%}
.report-table-head{padding:0 2px 10px;font-size:14px}
.report-table-block .table-responsive{width:100%;max-width:100%;border:0;background:transparent}
body.nexus-ui .report-table-block .table-responsive{border:0;background:transparent}
/* The summary table is meant to be read across, not scrolled: twelve columns of
   which eight hold small numbers. Sized to its widest line it came to 1510px inside
   a 922px page and pushed the delay columns out of sight, so here it fills the page
   instead and the four name columns wrap to take up the slack. The detail tables
   keep the scrolling variant above - their columns are timestamps, and a wrapped
   timestamp is harder to read than a scrollbar. */
table.table.report-fit-table{table-layout:auto!important;width:100%!important;min-width:0!important;max-width:100%!important}
table.table.report-fit-table th,table.table.report-fit-table td{white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere;min-width:0!important;max-width:none!important}
/* Figures never wrap - a "1,534" broken across two lines reads as two numbers. */
table.table.report-fit-table td.heat,table.table.report-fit-table tfoot td{white-space:nowrap!important}
/* The column filters carry their own intrinsic width, which is what made four of
   the columns 140px wider than their contents needed. */
table.table.report-fit-table .table-column-filter,
table.table.report-fit-table .table-filter-row select,
table.table.report-fit-table .table-filter-row .search-select{width:100%!important;min-width:0!important}
table.table.report-fit-table .table-heading-control{gap:4px}
/* Customer names were taking 11% of the table - more than any column except the
   timestamps - for a field that is rarely what the row is being read for. Capped
   at roughly half that. The cap sits on an inner block rather than the cell,
   because under table-layout:auto a max-width on a td is only a hint and the
   browser hands the column back its content width; the span's max-width is what
   the column's max-content actually resolves to. Full name stays on the title. */
table.table.report-fit-table td.report-col-customer>span{display:block;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
table.table.report-fit-table th.report-col-customer{max-width:52px;overflow:hidden;text-overflow:ellipsis}
/* The header word is the column's real floor - a column cannot be narrower than
   its own min-content - so the cell padding comes off too, otherwise 30px of it
   is most of what is left. */
table.table.report-fit-table th.report-col-customer,
table.table.report-fit-table td.report-col-customer{padding-left:6px!important;padding-right:6px!important}
/* --------------------------------------------------------------------------
   Report heat map
   Numeric cells are shaded by how large the value is relative to the largest in
   its scale, so a table of forty rows can be read by eye instead of column by
   column. Two ramps, each a single hue light to dark, because the columns do two
   different jobs: red for the counts that mean somebody is behind, blue for
   volume, which is not a fault. Both are sequential - the step index is the
   magnitude and nothing else.

   Every step carries its own ink rather than inheriting the table's, and no step
   flips to white-on-saturated halfway up: light mode stays a tint with dark ink
   throughout, dark mode a deep fill with light ink. A ramp that changes ink
   direction mid-scale reads as two palettes rather than one, and its loudest
   cells shout over the numbers they are supposed to be labelling.

   All twenty-four pairs were measured against the surface they actually render
   on, at rest *and* under the hover wash below: the lowest clears 4.61:1.
   Consecutive fills stay far enough apart to tell two levels apart at a glance
   while the ramp stays quiet enough to read forty rows of.
   Classes rather than inline styles: style-src carries no 'unsafe-inline'.

   !important throughout because Bootstrap paints table cells through
   `.table>:not(caption)>*>*` and an inset box-shadow the width of the cell;
   without it the fill is drawn over and only the ink survives.
   -------------------------------------------------------------------------- */
.heat{font-weight:800;font-variant-numeric:tabular-nums;box-shadow:none!important}
/* The link inside a shaded cell has to take the step's ink; left to itself it
   keeps the global link colour and disappears into the fill. */
.heat a{color:inherit!important;text-decoration-color:currentColor}
.heat-d1{background:#fff5f4!important;color:#8c1015!important}
.heat-d2{background:#ffdcd6!important;color:#8c1015!important}
.heat-d3{background:#ffc2b8!important;color:#8c1015!important}
.heat-d4{background:#ffa799!important;color:#750d11!important}
.heat-d5{background:#fd8b7a!important;color:#5e0a0e!important}
.heat-d6{background:#f56f5c!important;color:#4d080b!important}
.heat-v1{background:#f2f7ff!important;color:#123f8c!important}
.heat-v2{background:#dae8fd!important;color:#123f8c!important}
.heat-v3{background:#bed5fb!important;color:#123f8c!important}
.heat-v4{background:#a0c1f8!important;color:#0f356f!important}
.heat-v5{background:#82adf5!important;color:#0b2a5c!important}
.heat-v6{background:#6499f2!important;color:#08214a!important}
/* Hovering a row has to move every cell in it, shaded or not. The app's row hover
   is a background tint, which an opaque fill simply covers - so half the row lit
   up and half did not, which is what made the shading look broken on hover. A
   flat wash over the cell shifts each step by the same amount instead: the ramp
   keeps its order and the ink keeps its contrast. */
.table>tbody>tr:hover>td.heat{box-shadow:inset 0 0 0 9999px rgba(11,16,32,.07)!important}
/* The totals row is a summary, not a data row: it sits under a rule, sticks to
   the bottom of a long table, and stays out of the heat map - shading it against
   the same scale as the rows would paint it the darkest step every time and say
   nothing. */
.report-totals-row td{position:sticky;bottom:0;z-index:2;background:var(--card,#fff);border-top:2px solid var(--line);font-weight:900;font-variant-numeric:tabular-nums;color:var(--ink2)}
.report-totals-row td[data-total-label]{text-transform:uppercase;letter-spacing:.03em;font-size:12px;color:var(--tx2)}
body.nexus-ui .report-totals-row td{background:var(--nx-panel-strong);color:var(--nx-text)}
@media print{.report-totals-row td{position:static}}
.report-heat-legend{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--tx2);font-size:12px;font-weight:700}
.report-heat-legend .heat{padding:2px 10px;font-size:11px;border-radius:6px}
.report-heat-legend span{white-space:nowrap}
/* The dark theme is a body class the user toggles at runtime (see nexus.css),
   not a media query. Its steps are chosen for the dark panel rather than flipped
   from the light ones: on it the ramps brighten with magnitude, since the surface
   is already dark and a darker fill would read as less, not more. */
body.nexus-ui:not(.nexus-light) .heat-d1{background:#3d1a1a!important;color:#f7bdb7!important}
body.nexus-ui:not(.nexus-light) .heat-d2{background:#55201f!important;color:#ffcbc5!important}
body.nexus-ui:not(.nexus-light) .heat-d3{background:#6d2622!important;color:#ffd8d3!important}
body.nexus-ui:not(.nexus-light) .heat-d4{background:#872d26!important;color:#ffe2de!important}
body.nexus-ui:not(.nexus-light) .heat-d5{background:#a1352c!important;color:#ffece9!important}
body.nexus-ui:not(.nexus-light) .heat-d6{background:#b83e32!important;color:#fffbfa!important}
body.nexus-ui:not(.nexus-light) .heat-v1{background:#16294c!important;color:#adc9fb!important}
body.nexus-ui:not(.nexus-light) .heat-v2{background:#1d3562!important;color:#bad3fc!important}
body.nexus-ui:not(.nexus-light) .heat-v3{background:#254278!important;color:#c8ddfd!important}
body.nexus-ui:not(.nexus-light) .heat-v4{background:#2d4f90!important;color:#d6e6fe!important}
body.nexus-ui:not(.nexus-light) .heat-v5{background:#355aa2!important;color:#e4eefe!important}
body.nexus-ui:not(.nexus-light) .heat-v6{background:#3d65b4!important;color:#f8fbff!important}
/* On the dark surface the wash has to lighten rather than darken, or a hovered
   cell reads as a lower step than it is. */
body.nexus-ui:not(.nexus-light) .table>tbody>tr:hover>td.heat{box-shadow:inset 0 0 0 9999px rgba(255,255,255,.08)!important}
/* Print and forced-colours drop background fills, so the shading is restored as a
   left rule whose weight carries the same order. */
@media print,(forced-colors:active){
    .heat,body.nexus-ui:not(.nexus-light) .heat{background:none!important;color:inherit!important;border-left:3px solid currentColor;padding-left:6px}
    .heat-d4,.heat-d5,.heat-d6,.heat-v4,.heat-v5,.heat-v6{border-left-width:7px!important}
    .heat-d3,.heat-v3{border-left-width:5px!important}
}
.gud-attention{font-size:1.06rem!important;font-weight:900!important;background:rgba(225,145,16,.16)!important;color:#8a4b00!important;box-shadow:inset 0 0 0 1px rgba(225,145,16,.28)}
.assignment-anchor{scroll-margin-top:90px}
[data-bs-theme="dark"],body.dark-mode,body[data-theme="dark"]{--bg:#0b1220;--card:#111b2d;--tx:#e8eef8;--tx2:#b9c5d8;--tx3:#93a4bc;--ink:#06101e;--ink2:#f4f7fb;--line:#29364a;--brand-bg:rgba(99,102,241,.18)}
[data-bs-theme="dark"] body,body.dark-mode,body[data-theme="dark"]{background:var(--bg);color:var(--tx)}
[data-bs-theme="dark"] .card,[data-bs-theme="dark"] .dropdown-menu,[data-bs-theme="dark"] .form-control,[data-bs-theme="dark"] .form-select,[data-bs-theme="dark"] .app-confirm-dialog,[data-bs-theme="dark"] .ui-toast,
body.dark-mode .card,body.dark-mode .dropdown-menu,body.dark-mode .form-control,body.dark-mode .form-select,body.dark-mode .app-confirm-dialog,body.dark-mode .ui-toast{background:#111b2d!important;color:#e8eef8!important;border-color:#29364a!important}
[data-bs-theme="dark"] .card-header,[data-bs-theme="dark"] .table thead th,body.dark-mode .card-header,body.dark-mode .table thead th{background:#152238!important;color:#f4f7fb!important;border-color:#29364a!important}
[data-bs-theme="dark"] .table,body.dark-mode .table{--bs-table-color:#e8eef8;--bs-table-bg:transparent;--bs-table-border-color:#29364a;--bs-table-hover-color:#fff;--bs-table-hover-bg:rgba(99,102,241,.13)}
[data-bs-theme="dark"] .text-muted,body.dark-mode .text-muted{color:#aebbd0!important}

.audit-description-cell{min-width:260px}

/* Post-import distribution report modal */
.import-report-modal .modal-header{align-items:flex-start;gap:12px}
.import-report-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:20px}
.import-report-stats>div{display:grid;gap:4px;padding:14px 15px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh1)}
.import-report-stats span{display:flex;align-items:center;gap:7px;color:var(--tx3);font-size:11px;font-weight:800}
.import-report-stats strong{font-size:23px;color:var(--ink2);font-weight:900;line-height:1.1}
.import-report-stats small{color:var(--tx3);font-size:10px;font-weight:700}
.import-report-stats .is-new i,.import-report-stats .is-new strong{color:var(--brand)}
.import-report-stats .is-returned i,.import-report-stats .is-returned strong{color:#0891b2}
.import-report-stats .is-redistributed i,.import-report-stats .is-redistributed strong{color:#7c3aed}
.import-report-stats .is-fallback i,.import-report-stats .is-fallback strong{color:#d97706}
.import-report-stats .is-held i,.import-report-stats .is-held strong{color:#64748b}
.import-report-stats .is-unassigned i,.import-report-stats .is-unassigned strong{color:#dc2626}
.import-report-subhead{font-size:13px;font-weight:900;color:var(--ink2);margin-bottom:10px}
.import-report-table thead th{background:#f6f8fb;color:var(--tx3);font-size:11px;font-weight:800;white-space:nowrap}
.import-report-table tbody td{font-size:13px;color:var(--ink2)}
@media (max-width:768px){.import-report-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}