/* ============================================================
   APP SHELL  (review build) — sidebar + topbar + content
   Uses CSS variables from theme.css. All 8 themes apply.
   Scoped class prefix: .app-  /  .sb-  /  .tb-
   ============================================================ */

*{ box-sizing:border-box; }
.app-body{
    margin:0;
    font-family:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
    background:var(--c-bg);
    color:var(--c-text);
    font-size:13.5px;            /* consistent base — prevents the "zoomed" feel */
    line-height:1.5;
    overflow-x:hidden;           /* no horizontal scroll / clipped right side */
    -webkit-font-smoothing:antialiased;
}

:root{ --sb-w:248px; --sb-mini:72px; --tb-h:58px; --ft-h:38px; }

/* ============ SIDEBAR ============ */
.app-sidebar{
    position:fixed; top:0; left:0; bottom:0; width:var(--sb-w); z-index:40;
    background:linear-gradient(180deg, var(--c-sidebar) 0%, var(--c-sidebar-2) 100%);
    color:#cdd7e6;
    display:flex; flex-direction:column;
    transition:width .28s var(--ease);
    overflow:hidden;
}
.app-sidebar::-webkit-scrollbar{ width:0; }

.sb-brand{
    min-height:var(--tb-h); flex:0 0 auto;
    display:flex; align-items:center; gap:12px; padding:8px 18px;
    border-bottom:1px solid rgba(255,255,255,.07);
}
.sb-brand img{ width:40px; height:40px; border-radius:10px; background:#fff; padding:4px; flex:0 0 auto; }
.sb-brand .txt{ font-weight:700; font-size:15px; line-height:1.2; color:#fff; white-space:normal; word-break:break-word; transition:opacity .2s var(--ease); }
.sb-brand .txt small{ display:block; font-weight:400; font-size:11px; color:#8fa0b8; }

.sb-nav{ flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:10px 10px 18px; }

/* powered-by footer in sidebar (our small logo) */
.sb-powered{
    flex:0 0 auto; border-top:1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; gap:7px; padding:12px 16px;
    font-size:11.5px; color:#8fa0b8; white-space:nowrap;
}
.sb-powered img{ width:20px; height:20px; object-fit:contain; flex:0 0 auto; }
.sb-powered .pb{
    font-weight:500;
    background:linear-gradient(100deg, #7e8ca3 0%, #7e8ca3 38%, #ffffff 50%, #7e8ca3 62%, #7e8ca3 100%);
    background-size:220% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:sbShine 3.4s linear infinite;
}
.sb-powered .pb b{ font-weight:700; }
@keyframes sbShine{ 0%{ background-position:160% 0; } 100%{ background-position:-160% 0; } }
.app.collapsed .app-sidebar:not(:hover) .sb-powered{ justify-content:center; }
.app.collapsed .app-sidebar:not(:hover) .sb-powered .pb{ display:none; }
@media (prefers-reduced-motion: reduce){ .sb-powered .pb{ animation:none; } }
.sb-nav::-webkit-scrollbar{ width:6px; }
.sb-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:6px; }

.sb-section{ font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:#6e8099; margin:16px 10px 8px; white-space:nowrap; }

.sb-item{ position:relative; }
.sb-link{
    display:flex; align-items:center; gap:11px;
    padding:9px 11px; margin:1px 0; border-radius:10px;
    color:#c2cdde; text-decoration:none; font-size:13.5px; font-weight:500;
    cursor:pointer; white-space:nowrap; user-select:none;
    transition:background .18s var(--ease), color .18s var(--ease);
}
.sb-link .i{ font-size:19px; width:22px; text-align:center; flex:0 0 auto; }
.sb-link .label{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:opacity .2s var(--ease); }
.sb-link .caret{ font-size:18px; transition:transform .25s var(--ease); opacity:.7; }
.sb-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.sb-link.active{ color:#fff; background:var(--grad-primary); box-shadow:0 8px 18px var(--ring); }
.sb-link.active .i{ color:#fff; }

/* badge on a link */
.sb-badge{
    font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px;
    background:var(--c-accent); color:#3a2400;
}

/* submenu */
.sb-item.open > .sb-link .caret{ transform:rotate(90deg); }
.sb-sub{
    list-style:none; margin:0; padding:0 0 0 12px;
    max-height:0; overflow:hidden;
    transition:max-height .3s var(--ease);
}
.sb-item.open > .sb-sub{ max-height:760px; }
.sb-sub a{
    display:block; padding:9px 12px 9px 34px; margin:1px 0; border-radius:9px;
    color:#9fb0c7; text-decoration:none; font-size:13px; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition:color .15s var(--ease), background .15s var(--ease);
}
.sb-sub a::before{
    content:""; position:absolute; left:18px; top:50%; transform:translateY(-50%);
    width:6px; height:6px; border-radius:50%; background:#54657f; transition:background .15s var(--ease);
}
.sb-sub a:hover{ color:#fff; background:rgba(255,255,255,.05); }
.sb-sub a:hover::before,
.sb-sub a.active::before{ background:var(--c-primary); }
.sb-sub a.active{ color:#fff; }

/* ---- collapsed (mini) state: icons only, expand on hover ---- */
.app.collapsed .app-sidebar{ width:var(--sb-mini); }
.app.collapsed .app-sidebar:hover{ width:var(--sb-w); box-shadow:var(--shadow-lg); }
.app.collapsed .app-sidebar:not(:hover) .sb-brand .txt,
.app.collapsed .app-sidebar:not(:hover) .sb-link .label,
.app.collapsed .app-sidebar:not(:hover) .sb-link .caret,
.app.collapsed .app-sidebar:not(:hover) .sb-section,
.app.collapsed .app-sidebar:not(:hover) .sb-badge{ opacity:0; pointer-events:none; }
.app.collapsed .app-sidebar:not(:hover) .sb-item.open > .sb-sub{ max-height:0; }

/* ---- Clean collapsed icon rail: centered icons packed top-to-bottom, no reserved gaps ---- */
.app.collapsed .app-sidebar:not(:hover) .sb-brand{ justify-content:center; padding:8px 0; }
.app.collapsed .app-sidebar:not(:hover) .sb-brand .txt{ display:none; }
.app.collapsed .app-sidebar:not(:hover) .sb-section{ display:none; }          /* remove reserved gap */
.app.collapsed .app-sidebar:not(:hover) .sb-nav{ padding:8px 12px; }
.app.collapsed .app-sidebar:not(:hover) .sb-item{ margin:0; }
.app.collapsed .app-sidebar:not(:hover) .sb-link{ justify-content:center; padding:11px 0; margin:3px 0; border-radius:12px; }
.app.collapsed .app-sidebar:not(:hover) .sb-link .label,
.app.collapsed .app-sidebar:not(:hover) .sb-link .caret,
.app.collapsed .app-sidebar:not(:hover) .sb-badge{ display:none; }             /* so the icon truly centers */
.app.collapsed .app-sidebar:not(:hover) .sb-link .i{ margin:0; font-size:21px; }
.app.collapsed .app-sidebar:not(:hover) .sb-link.active{ background:var(--grad-primary); color:#fff; }
.app.collapsed .app-sidebar:not(:hover) .sb-link:hover{ background:rgba(255,255,255,.08); }

/* ============ MAIN / TOPBAR ============ */
.app-main{
    margin-left:var(--sb-w);
    min-height:100vh;
    min-width:0; max-width:100%;
    /* NOTE: no overflow here — it would break the sticky topbar.
       Horizontal overflow is clipped at body level instead. */
    transition:margin-left .28s var(--ease);
    display:flex; flex-direction:column;
}
.app.collapsed .app-main{ margin-left:var(--sb-mini); }

.app-topbar{
    position:sticky; top:0; z-index:30;
    height:var(--tb-h);
    background:var(--c-surface);
    border-bottom:1px solid var(--c-border);
    display:flex; align-items:center; gap:14px; padding:0 20px;
    box-shadow:0 1px 0 rgba(16,32,55,.02);
    backdrop-filter:saturate(160%) blur(8px);
    transition:box-shadow .25s var(--ease), background .25s var(--ease);
}
/* subtle brand accent line along the bottom of the topbar */
.app-topbar::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background:var(--grad-primary); opacity:.35;
    transition:opacity .25s var(--ease);
}
/* elevate when the page is scrolled (scroll-aware) */
.app-topbar.scrolled{ box-shadow:0 10px 30px rgba(16,32,55,.10); }
.app-topbar.scrolled::after{ opacity:.85; }
.tb-toggle{
    width:40px; height:40px; border:0; border-radius:10px; cursor:pointer;
    background:var(--c-surface-2); color:var(--c-text); font-size:20px;
    display:grid; place-items:center; transition:background .15s var(--ease), color .15s var(--ease);
}
.tb-toggle:hover{ background:var(--ring); color:var(--c-primary); }

.tb-search{ position:relative; flex:1 1 auto; max-width:380px; }
.tb-search i{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--c-text-muted); font-size:18px; }
.tb-search input{
    width:100%; height:42px; padding:0 14px 0 40px;
    border:1.5px solid var(--c-border); border-radius:999px;
    background:var(--c-surface-2); color:var(--c-text); font-size:14px; outline:none;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.tb-search input:focus{ border-color:var(--c-primary); background:var(--c-surface); box-shadow:0 0 0 4px var(--ring); }

.tb-right{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.tb-icon{
    position:relative;
    width:42px; height:42px; border:0; border-radius:11px; cursor:pointer;
    background:transparent; color:var(--c-text-muted); font-size:21px;
    display:grid; place-items:center;
    transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tb-icon:hover{ background:var(--c-surface-2); color:var(--c-primary); transform:translateY(-2px); box-shadow:0 6px 14px var(--ring); }
.tb-icon:active{ transform:translateY(0) scale(.95); }
a.tb-icon{ text-decoration:none; }
.tb-logout:hover{ background:rgba(244,63,94,.12); color:#f43f5e; box-shadow:0 6px 14px rgba(244,63,94,.22); }
.tb-icon .dot{
    position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%;
    background:var(--c-accent); box-shadow:0 0 0 2px var(--c-surface);
    animation:tbPulse 1.8s ease-in-out infinite;
}
@keyframes tbPulse{
    0%,100%{ box-shadow:0 0 0 2px var(--c-surface), 0 0 0 0 rgba(247,148,30,.55); }
    50%    { box-shadow:0 0 0 2px var(--c-surface), 0 0 0 6px rgba(247,148,30,0); }
}

/* user chip */
.tb-user{
    display:flex; align-items:center; gap:10px; cursor:pointer;
    padding:5px 8px 5px 6px; border-radius:999px; border:1px solid var(--c-border);
    background:var(--c-surface-2); transition:box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.tb-user:hover{ border-color:var(--c-primary); box-shadow:0 0 0 3px var(--ring); }
.tb-user .av{
    width:34px; height:34px; border-radius:50%; flex:0 0 auto;
    background:var(--grad-primary); color:#fff; font-weight:700; font-size:14px;
    display:grid; place-items:center;
}
.tb-user .meta{ line-height:1.15; }
.tb-user .meta b{ font-size:13px; display:block; }
.tb-user .meta span{ font-size:11px; color:var(--c-text-muted); }

/* theme popover */
.tb-theme-wrap{ position:relative; }
.tb-theme-pop{
    position:absolute; right:0; top:52px; z-index:60;
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:14px;
    box-shadow:var(--shadow-lg); padding:14px; width:230px;
    opacity:0; visibility:hidden; transform:translateY(-8px); transition:.2s var(--ease);
}
.tb-theme-wrap.open .tb-theme-pop{ opacity:1; visibility:visible; transform:none; }
.tb-theme-pop h6{ margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.6px; color:var(--c-text-muted); }
.tb-theme-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.tb-sw{
    height:38px; border-radius:10px; cursor:pointer; border:2px solid transparent;
    transition:transform .15s var(--ease); position:relative;
}
.tb-sw:hover{ transform:scale(1.07); }
.tb-sw.active{ border-color:#fff; box-shadow:0 0 0 2px var(--c-primary); }
.tb-sw[data-set="teal"]{ background:linear-gradient(135deg,#1B2A4A,#1CA9A0); }
.tb-sw[data-set="navy"]{ background:linear-gradient(135deg,#233a63,#1B2A4A); }
.tb-sw[data-set="indigo"]{ background:linear-gradient(135deg,#6366F1,#7c3aed); }
.tb-sw[data-set="emerald"]{ background:linear-gradient(135deg,#10B981,#34d399); }
.tb-sw[data-set="orange"]{ background:linear-gradient(135deg,#1B2A4A,#F7941E); }
.tb-sw[data-set="sunset"]{ background:linear-gradient(135deg,#f97316,#fb7185); }
.tb-sw[data-set="rose"]{ background:linear-gradient(135deg,#f43f5e,#e11d48); }
.tb-sw[data-set="dark"]{ background:linear-gradient(135deg,#0b1220,#22d3ee); }

/* ============ CONTENT ============ */
/* the extra bottom padding clears the pinned footer, so the last row of a
   table is never hidden underneath it */
.app-content{ padding:18px 22px calc(24px + var(--ft-h)); flex:1 1 auto; display:flex; flex-direction:column; }

/* Footer is PINNED to the bottom-left of the window so it sits in the exact
   same place on every screen, regardless of how much content the page has.
   It is taken out of the flow, so:
     · left tracks the sidebar (full / collapsed / hidden-on-mobile) to stay
       flush with the content column rather than drifting per page;
     · the background must be opaque — content scrolls UNDER it, and a
       transparent strip would let rows show through;
     · .app-content carries matching bottom padding (above) so nothing is
       permanently covered.
   Scoped to .app so the login / reset screens — which load this stylesheet
   but have no shell — are untouched. */
.app .footer{
    position:fixed !important;
    left:var(--sb-w); right:0; bottom:0;
    top:auto !important; width:auto !important; height:var(--ft-h) !important;
    z-index:20;
    display:flex; align-items:center;
    padding:0 26px !important; margin:0 !important;
    background:var(--c-bg) !important; color:var(--c-text-muted) !important;
    border-top:1px solid var(--c-border);
    font-size:12.5px;
    transition:left .28s var(--ease);
}
.app .footer .container-fluid{ width:100%; }
.app.collapsed .footer{ left:var(--sb-mini); }
@media (max-width:992px){
    .app .footer{ left:0; }
}
.footer .container-fluid > .row{ align-items:center; }
.app-content .footer .container-fluid{ padding:0 !important; }

/* Neutralize the legacy theme's page padding when a page is rendered
   inside the new shell (removes the big top gap / double padding). */
.app-content .page-content{ padding:0 !important; margin:0 !important; }
.app-content .page-content > .container-fluid,
.app-content > .container-fluid{ padding-left:0 !important; padding-right:0 !important; max-width:100% !important; }
.app-content .page-title-box{ padding:0 !important; margin-bottom:16px !important; }
.pg-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
.pg-head h1{ font-size:19px; margin:0 0 3px; }
.pg-crumb{ font-size:12.5px; color:var(--c-text-muted); }
.pg-crumb b{ color:var(--c-primary); font-weight:600; }

.btn-primary-ui{
    height:38px; padding:0 16px; color:#fff; font-size:13px;
    background:var(--grad-primary); box-shadow:0 8px 20px var(--ring);
    display:inline-flex; align-items:center; gap:7px;
}
.btn-primary-ui:hover{ filter:brightness(1.05); }

/* stat cards */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:16px; }
.stat{
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:14px;
    padding:16px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.stat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.stat .ic{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:20px; color:#fff; margin-bottom:11px; }
.stat .ic.c1{ background:linear-gradient(135deg,#1CA9A0,#178f88); }
.stat .ic.c2{ background:linear-gradient(135deg,#6366F1,#4f46e5); }
.stat .ic.c3{ background:linear-gradient(135deg,#F7941E,#e07d0a); }
.stat .ic.c4{ background:linear-gradient(135deg,#f43f5e,#e11d48); }
.stat .num{ font-size:23px; font-weight:700; line-height:1; }
.stat .lbl{ font-size:12.5px; color:var(--c-text-muted); margin-top:5px; }
.stat .trend{ font-size:11.5px; font-weight:600; margin-top:9px; display:inline-flex; align-items:center; gap:4px; }
.trend.up{ color:#10b981; } .trend.down{ color:#f43f5e; }

/* generic card */
.ui-card{
    background:var(--c-surface); border:1px solid var(--c-border); border-radius:14px;
    box-shadow:var(--shadow-sm); margin-bottom:16px; overflow:hidden;
}
.ui-card .hd{ padding:13px 16px; border-bottom:1px solid var(--c-border); display:flex; align-items:center; justify-content:space-between; }
.ui-card .hd h3{ margin:0; font-size:14px; }
.ui-card .bd{ padding:15px 16px; }
.two-col{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; }
.two-col > *{ min-width:0; }
@media (max-width:1100px){ .two-col{ grid-template-columns:1fr; } }

/* mini bar chart (pure CSS) */
.chart{ display:flex; align-items:flex-end; gap:12px; height:150px; padding-top:10px; }
.chart .bar{ flex:1; background:var(--grad-primary); border-radius:8px 8px 0 0; opacity:.85; transition:height .6s var(--ease); position:relative; }
.chart .bar span{ position:absolute; top:-20px; left:0; right:0; text-align:center; font-size:11px; color:var(--c-text-muted); }
.chart .bar small{ position:absolute; bottom:-22px; left:0; right:0; text-align:center; font-size:11px; color:var(--c-text-muted); }

/* activity feed */
.feed{ list-style:none; margin:0; padding:0; }
.feed li{ display:flex; gap:12px; padding:11px 0; border-bottom:1px dashed var(--c-border); }
.feed li:last-child{ border-bottom:0; }
.feed .fic{ width:34px; height:34px; border-radius:9px; flex:0 0 auto; display:grid; place-items:center; font-size:16px; background:var(--c-surface-2); color:var(--c-primary); }
.feed .ft{ font-size:13.5px; } .feed .fm{ font-size:11.5px; color:var(--c-text-muted); }

/* table */
.tbl-wrap{ overflow-x:auto; }
table.ui-tbl{ width:100%; border-collapse:collapse; font-size:13px; }
table.ui-tbl th{ text-align:left; padding:10px 14px; color:var(--c-text-muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--c-border); }
table.ui-tbl td{ padding:10px 14px; border-bottom:1px solid var(--c-border); }
table.ui-tbl tbody tr{ transition:background .15s var(--ease); }
table.ui-tbl tbody tr:hover{ background:var(--c-surface-2); }
.av-sm{ width:30px; height:30px; border-radius:50%; background:var(--grad-primary); color:#fff; font-size:12px; font-weight:700; display:inline-grid; place-items:center; margin-right:8px; vertical-align:middle; }
.pill{ font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:999px; }
.pill.ok{ background:rgba(16,185,129,.14); color:#0f9b6c; }
.pill.warn{ background:rgba(247,148,30,.16); color:#b9710a; }
.pill.bad{ background:rgba(244,63,94,.14); color:#e11d48; }

/* skeleton rows */
.skrow td{ padding:14px; }
.skbar{ height:14px; border-radius:6px; }

/* mobile */
.app-backdrop{ position:fixed; inset:0; background:rgba(8,15,30,.45); z-index:39; opacity:0; visibility:hidden; transition:.2s var(--ease); }
@media (max-width:992px){
    .app-sidebar{ transform:translateX(-100%); transition:transform .28s var(--ease); width:var(--sb-w); }
    .app.mobile-open .app-sidebar{ transform:none; box-shadow:var(--shadow-lg); }
    .app.mobile-open .app-backdrop{ opacity:1; visibility:visible; }
    .app-main{ margin-left:0 !important; }
    .tb-search{ display:none; }
}
.review-ribbon{
    position:fixed; left:12px; bottom:12px; z-index:20;
    background:var(--c-accent); color:#3a2400; font-size:10.5px; font-weight:700;
    padding:5px 12px; border-radius:999px; box-shadow:var(--shadow-md); letter-spacing:.5px;
}

/* ============================================================
   THEMED MODALS — applies app-wide so every Add/Edit/confirm
   dialog matches the brand theme (light + dark).
   ============================================================ */
.modal-content{
    background:var(--c-surface); color:var(--c-text);
    border:1px solid var(--c-border); border-radius:16px; overflow:hidden;
    box-shadow:0 30px 70px rgba(8,15,30,.35);
}
.modal-header{
    background:linear-gradient(135deg, var(--c-sidebar) 0%, var(--c-primary) 150%);
    color:#fff; border-bottom:0; padding:15px 20px;
}
.modal-header .modal-title{ color:#fff; font-weight:600; font-size:16px; letter-spacing:.2px; }
.modal-header .btn-close{ filter:invert(1) grayscale(1) brightness(2.2); opacity:.85; }
.modal-header .btn-close:hover{ opacity:1; transform:rotate(90deg); transition:transform .2s var(--ease); }
.modal-body{ background:var(--c-surface); padding:18px 20px 8px; }
.modal-footer{ background:var(--c-surface-2); border-top:1px solid var(--c-border); padding:12px 20px; }

/* form fields inside modals */
.modal .form-control, .modal .form-select{
    border:1.5px solid var(--c-border); border-radius:10px;
    background:var(--c-surface); color:var(--c-text);
    transition:border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.modal .form-control:focus, .modal .form-select:focus{
    border-color:var(--c-primary); box-shadow:0 0 0 4px var(--ring); background:var(--c-surface); color:var(--c-text);
}
.modal .form-control::placeholder{ color:var(--c-text-muted); opacity:.55; }
.modal .form-label, .modal label{ color:var(--c-text-muted); font-weight:500; }

/* The legacy modals force a short field height that breaks Bootstrap's
   floating-label geometry (label overlaps the placeholder). Inside modals we
   stack the label ABOVE the field instead — clean and overlap-proof. */
.modal .form-floating{ display:flex; flex-direction:column; }
.modal .form-floating > label{
    position:static; order:-1; height:auto; width:auto;
    padding:0 0 4px 2px; margin:0; transform:none !important; opacity:1 !important;
    pointer-events:auto; font-size:11px; font-weight:500; line-height:1.2;
    color:var(--c-text-muted); white-space:nowrap;
}
.modal .form-floating > .form-control,
.modal .form-floating > .form-select{
    height:calc(2.3rem + 6px) !important; padding:.45rem .7rem !important;
}
.modal .form-floating > .form-control::placeholder{ color:var(--c-text-muted); opacity:.55; }
.modal .form-floating:focus-within > label{ color:var(--c-primary); }

/* buttons inside modals */
.modal .btn-primary{
    background:var(--grad-primary) !important; border:0 !important; color:#fff !important; border-radius:10px;
    box-shadow:0 8px 18px var(--ring); transition:transform .15s var(--ease), filter .2s var(--ease);
}
.modal .btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.modal .btn-secondary{
    background:var(--c-surface-2) !important; color:var(--c-text) !important;
    border:1.5px solid var(--c-border) !important; border-radius:10px;
    transition:border-color .15s var(--ease), color .15s var(--ease);
}
.modal .btn-secondary:hover{ border-color:var(--c-primary) !important; color:var(--c-primary) !important; }

/* Select2 styled to match the themed inputs (modal + global dropdowns) */
.select2-container--default .select2-selection--single{
    border:1.5px solid var(--c-border) !important; border-radius:10px !important;
    height:calc(2.3rem + 1px) !important; background:var(--c-surface) !important;
    display:flex !important; align-items:center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
    color:var(--c-text) !important; line-height:normal !important; padding-left:12px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow{ height:100% !important; }
.select2-dropdown{
    border:1.5px solid var(--c-border) !important; border-radius:10px !important;
    background:var(--c-surface) !important; box-shadow:var(--shadow-md); overflow:hidden;
}
.select2-container--default .select2-results__option{ color:var(--c-text); }
.select2-container--default .select2-results__option--highlighted[aria-selected]{ background:var(--c-primary) !important; color:#fff !important; }
.select2-container--default .select2-results__option[aria-selected=true]{ background:var(--ring) !important; color:var(--c-text); }
.select2-search--dropdown .select2-search__field{
    border:1.5px solid var(--c-border) !important; border-radius:8px; background:var(--c-surface); color:var(--c-text);
}
.select2-container{ z-index:1060; }

/* ============================================================
   THEMED TOASTR NOTIFICATIONS (app-wide)
   ============================================================ */
#toast-container > div{
    opacity:1 !important;
    border-radius:13px !important;
    padding:14px 18px 14px 54px !important;
    box-shadow:0 14px 34px rgba(8,15,30,.26) !important;
    background-position:18px center !important;
    background-size:22px !important;
    color:#fff !important;
    border:0 !important;
    font-family:'Poppins', system-ui, sans-serif;
    width:330px;
    transition:transform .18s var(--ease), box-shadow .18s var(--ease);
    animation:toastIn .3s var(--ease) both;
}
#toast-container > div:hover{ transform:translateY(-2px); box-shadow:0 20px 46px rgba(8,15,30,.34) !important; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(18px) scale(.98); } to{ opacity:1; transform:none; } }

.toast-title{ font-weight:600; font-size:13.5px; letter-spacing:.2px; margin-bottom:1px; }
.toast-message{ font-size:12.5px; line-height:1.4; opacity:.96; word-break:break-word; }

/* semantic colours (icons kept from toastr defaults) */
#toast-container > .toast-success{ background-color:#13a594 !important; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") !important; }
#toast-container > .toast-error{ background-color:#e5484d !important; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E") !important; }
#toast-container > .toast-warning{ background-color:#f5a524 !important; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E") !important; }
#toast-container > .toast-info{ background-color:#2d6cdf !important; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E") !important; }

.toast-close-button{ color:#fff !important; opacity:.85; text-shadow:none !important; font-weight:400; font-size:18px; right:2px; top:-2px; }
.toast-close-button:hover{ opacity:1; }
.toast-progress{ background:#fff !important; opacity:.45 !important; height:3px; border-radius:0 0 13px 13px; }

/* =====================================================================
   bootstrap-datepicker popups — keep them above themed cards, sane width,
   and neutralize page table-theming so the month/day grid isn't distorted.
   ===================================================================== */
.datepicker.datepicker-dropdown{
    z-index:1065 !important;
    min-width:250px;
    padding:8px !important;
    border:1px solid var(--c-border,#e6eaf0);
    border-radius:12px;
    box-shadow:var(--shadow-lg,0 16px 40px rgba(16,24,40,.18));
    background:var(--c-surface,#fff);
}
/* Raise the card that currently contains an open datepicker above sibling cards */
.page-content .card:has(.datepicker.datepicker-dropdown){ position:relative; z-index:40; }
/* Reset any inherited table theming inside the picker */
.datepicker table{ width:100%; margin:0; }
.datepicker table td, .datepicker table th{
    border:0 !important; box-shadow:none !important; background:transparent;
    text-transform:none !important; letter-spacing:normal !important; font-size:13px !important;
    animation:none !important; transition:background .12s ease, color .12s ease;
}
.datepicker table tbody tr{ animation:none !important; }
.datepicker thead th{ background:transparent !important; color:var(--c-text,#1B2A4A) !important; border-bottom:0 !important; }
.datepicker thead th.datepicker-switch:hover,
.datepicker thead th.next:hover, .datepicker thead th.prev:hover{ background:color-mix(in srgb,var(--c-primary,#1CA9A0) 12%,#fff) !important; border-radius:8px; }
.datepicker td.day:hover, .datepicker span.month:hover, .datepicker span.year:hover{ background:color-mix(in srgb,var(--c-primary,#1CA9A0) 14%,#fff) !important; border-radius:8px; }
.datepicker td.active, .datepicker td.active:hover,
.datepicker span.active, .datepicker span.active:hover,
.datepicker td.active.day, .datepicker th.active{
    background:var(--c-primary,#1CA9A0) !important; color:#fff !important; border-radius:8px;
}
.datepicker td.today, .datepicker td.today:hover{ background:color-mix(in srgb,var(--c-accent,#F7941E) 22%,#fff) !important; color:var(--c-text,#1B2A4A) !important; border-radius:8px; }
.datepicker td.old, .datepicker td.new, .datepicker span.old, .datepicker span.new{ color:var(--c-text-muted,#9aa6b8) !important; }

/* =====================================================================
   Sidebar hover tooltip — shows the full menu/sub-menu name for any item
   whose label is truncated (narrow sidebar). Element is created by ui.js.
   ===================================================================== */
#sbTip{
    position:fixed; z-index:100000; pointer-events:none;
    background:var(--c-sidebar,#1B2A4A); color:#fff;
    font-size:12.5px; font-weight:600; letter-spacing:.2px; line-height:1.25;
    padding:7px 11px; border-radius:9px; max-width:280px;
    box-shadow:0 10px 26px rgba(0,0,0,.32);
    border:1px solid rgba(255,255,255,.12);
    opacity:0; transform:translateX(-6px); transition:opacity .12s ease, transform .12s ease;
}
#sbTip.show{ opacity:1; transform:none; }
#sbTip::before{
    content:""; position:absolute; left:-5px; top:50%; transform:translateY(-50%) rotate(45deg);
    width:9px; height:9px; background:var(--c-sidebar,#1B2A4A);
    border-left:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12);
}