:root {
    --sg-sidebar-bg: #131a2c;
    --sg-sidebar-bg-active: #1d2745;
    --sg-sidebar-text: #a4acc7;
    --sg-sidebar-text-active: #ffffff;
    --sg-accent: #4f6df5;
    --sg-bg: #f4f6fb;
    --sg-card-shadow: 0 2px 10px rgba(20, 24, 45, 0.06);

    --sg-blue: #4f6df5;
    --sg-green: #17b26a;
    --sg-orange: #f59e0b;
    --sg-purple: #8b5cf6;
    --sg-teal: #14b8a6;
    --sg-red: #ef4444;
    --sg-yellow: #eab308;
    --sg-indigo: #6366f1;
    --sg-gray: #6b7280;
}

body {
    background: var(--sg-bg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Digits line up column-to-column in KPI cards and numeric table cells —
   tabular figures, not proportional, so a changing value doesn't visibly
   reflow its neighbors. */
.sg-kpi-value,
.table td.text-end,
.table td.fw-semibold,
.sg-panel table td {
    font-variant-numeric: tabular-nums;
}

/* Update 26, 35.1 — shared Total/Average table-footer row. */
.sg-table-totals-row {
    font-weight: 600;
    border-top: 2px solid rgba(79, 109, 245, 0.25);
    background: rgba(79, 109, 245, 0.05);
}
.sg-table-totals-row th,
.sg-table-totals-row td {
    font-variant-numeric: tabular-nums;
}
.sg-table-totals-sub {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--sg-text-muted, #8a93a6);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
[data-theme="dark"] .sg-table-totals-row {
    background: rgba(79, 109, 245, 0.12);
    border-top-color: rgba(79, 109, 245, 0.35);
}

/* Update 27, 36.2 — Average-per-day summary box, paired with but
   visually distinct from the in-table Total row above. Deliberately
   NOT another table — a compact card so it reads as a separate summary
   rather than an extra row easily confused with the totals row. */
.sg-avg-summary {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    background: rgba(23, 178, 106, 0.06);
    border: 1px solid rgba(23, 178, 106, 0.18);
}
.sg-avg-summary-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #178a56;
    margin-bottom: 0.5rem;
}
.sg-avg-summary-items {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}
.sg-avg-summary-item {
    display: flex;
    flex-direction: column;
}
.sg-avg-summary-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}
.sg-avg-summary-label {
    font-size: 0.72rem;
    color: var(--sg-text-muted, #8a93a6);
}
[data-theme="dark"] .sg-avg-summary {
    background: rgba(23, 178, 106, 0.1);
    border-color: rgba(23, 178, 106, 0.25);
}
[data-theme="dark"] .sg-avg-summary-title {
    color: #4ade95;
}

/* ── Layout shell ─────────────────────────────────────────── */
.sg-app {
    display: flex;
    min-height: 100vh;
}

.sg-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--sg-sidebar-bg);
    color: var(--sg-sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    transition: transform 0.2s ease;
}

.sg-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.35rem 1.5rem;
    color: #fff;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.sg-sidebar-brand .badge-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sg-accent), #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #fff;
}

.sg-sidebar-section {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: #5b6386;
    padding: 1.1rem 1.5rem 0.4rem;
    font-weight: 700;
}

.sg-sidebar-nav {
    /* Update 24, 33.2 — deliberately NOT flex-grow:1. The old flat item
       list was tall enough to fill the sidebar by itself; now that most
       groups start collapsed, forcing this to stretch left a large dead
       area below the last item. Default flex (0 1 auto) sizes to content
       and lets the footer follow immediately, while flex-shrink still
       lets it compress + scroll if enough groups are expanded to exceed
       the viewport. */
    min-height: 0;
    overflow-y: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: #3a4468 transparent;
}

.sg-sidebar-nav::-webkit-scrollbar {
    width: 6px;
}

.sg-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sg-sidebar-nav::-webkit-scrollbar-thumb {
    background-color: #3a4468;
    border-radius: 3px;
}

.sg-sidebar-nav::-webkit-scrollbar-thumb:hover {
    background-color: #4a5580;
}

.sg-sidebar-nav a,
.sg-sidebar-nav .sg-nav-disabled {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.5rem;
    color: var(--sg-sidebar-text);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}

.sg-sidebar-nav a:hover {
    background: var(--sg-sidebar-bg-active);
    color: var(--sg-sidebar-text-active);
}

.sg-sidebar-nav a.active {
    background: var(--sg-sidebar-bg-active);
    color: var(--sg-sidebar-text-active);
    font-weight: 700;
}

.sg-sidebar-nav .sg-nav-disabled {
    opacity: 0.4;
    cursor: default;
}

.sg-sidebar-nav i {
    width: 18px;
    text-align: center;
}

/* Update 24, 33.2 — collapsible sidebar groups, rebuilt as a proper dense
   accordion: the header row now uses the EXACT same padding/size/weight
   as a regular sidebar link (.sg-sidebar-nav a) so collapsed groups sit
   flush against each other and against the top-level Dashboard link
   instead of reading as separated, oversized "pills". Icon + label on
   the left, a chevron that rotates from ▶ to ▼ on the right — matching
   every other item's icon+label pattern rather than the old
   uppercase-label-with-no-icon treatment. */
.sg-sidebar-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    padding: 0.6rem 1.5rem;
    color: var(--sg-sidebar-text);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.sg-sidebar-group-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.sg-sidebar-group-toggle:hover,
.sg-sidebar-group-toggle[aria-expanded="true"] {
    background: var(--sg-sidebar-bg-active);
    color: var(--sg-sidebar-text-active);
}

.sg-group-chevron {
    transition: transform 0.15s ease;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.sg-sidebar-group-toggle[aria-expanded="true"] .sg-group-chevron {
    transform: rotate(90deg);
}

.sg-sidebar-group-body.collapse:not(.show) {
    display: none;
}

/* Slight indent distinguishes a group's children from its header and
   from top-level items, without a heavy visual break between them. */
.sg-sidebar-group-body a,
.sg-sidebar-group-body .sg-nav-disabled {
    padding-left: 2.3rem;
}

.sg-sidebar-footer {
    padding: 1rem 1.5rem;
    font-size: 0.72rem;
    color: #5b6386;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.sg-main {
    margin-left: 260px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ── Topbar ───────────────────────────────────────────────── */
.sg-topbar {
    background: #fff;
    border-bottom: 1px solid #eceff5;
    padding: 0.85rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 1020;
}

/* KPI cards that jump to an in-page panel (rather than a separate page)
   use a #anchor href — this keeps the sticky topbar from covering the
   panel's heading right after the jump. */
#branchDepartmentsPanel,
#departmentTeamPanel,
#myDepartmentsPanel {
    scroll-margin-top: 84px;
}

.sg-topbar h1 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0;
    color: #1c2333;
}

.sg-topbar .text-muted-sm {
    font-size: 0.8rem;
}

.sg-bell {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--sg-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b5468;
    border: none;
}

.sg-bell .dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sg-red);
    border: 2px solid #fff;
}

.sg-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sg-accent), #7c3aed);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
}

/* ── Content ──────────────────────────────────────────────── */
.sg-content {
    padding: 1.75rem;
    flex: 1;
}

.sg-page-footer {
    padding: 1rem 1.75rem;
    color: #8991ac;
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sg-page-footer .pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sg-green);
    display: inline-block;
    animation: sg-pulse 1.6s infinite;
}

@keyframes sg-pulse {
    0% { box-shadow: 0 0 0 0 rgba(23,178,106,0.5); }
    70% { box-shadow: 0 0 0 6px rgba(23,178,106,0); }
    100% { box-shadow: 0 0 0 0 rgba(23,178,106,0); }
}

/* ── KPI cards ────────────────────────────────────────────── */
.sg-kpi-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--sg-card-shadow);
    border: 1px solid #eef0f7;
    padding: 1.25rem 1.35rem;
    height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: sg-fade-in-up 0.35s ease both;
}

/* Universal gentle lift for every KPI card, not just the ones that
   navigate — .sg-kpi-nav below layers a stronger lift + hint on top of
   this for the ones that do. */
.sg-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(20, 24, 45, 0.1);
}

.sg-kpi-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 0.85rem;
}

.sg-kpi-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1c2333;
    line-height: 1.2;
}

.sg-kpi-label {
    font-size: 0.82rem;
    color: #8991ac;
    font-weight: 600;
}

/* Gradient tints instead of flat pastel fills — same accent family per
   category, just with a touch more depth. */
.sg-bg-blue { background: linear-gradient(135deg, rgba(79,109,245,0.16), rgba(79,109,245,0.06)); color: var(--sg-blue); }
.sg-bg-green { background: linear-gradient(135deg, rgba(23,178,106,0.16), rgba(23,178,106,0.06)); color: var(--sg-green); }
.sg-bg-orange { background: linear-gradient(135deg, rgba(245,158,11,0.16), rgba(245,158,11,0.06)); color: var(--sg-orange); }
.sg-bg-purple { background: linear-gradient(135deg, rgba(139,92,246,0.16), rgba(139,92,246,0.06)); color: var(--sg-purple); }
.sg-bg-teal { background: linear-gradient(135deg, rgba(20,184,166,0.16), rgba(20,184,166,0.06)); color: var(--sg-teal); }
.sg-bg-red { background: linear-gradient(135deg, rgba(239,68,68,0.16), rgba(239,68,68,0.06)); color: var(--sg-red); }
.sg-bg-yellow { background: linear-gradient(135deg, rgba(234,179,8,0.16), rgba(234,179,8,0.06)); color: var(--sg-yellow); }
.sg-bg-indigo { background: linear-gradient(135deg, rgba(99,102,241,0.16), rgba(99,102,241,0.06)); color: var(--sg-indigo); }
.sg-bg-gray { background: linear-gradient(135deg, rgba(107,114,128,0.16), rgba(107,114,128,0.06)); color: var(--sg-gray); }

/* Update 42, 52.3 — Labels column redesign: chips wrap within a bounded
   width instead of plain text/unbounded badges blowing out the row's
   height, with a "+N more" chip (native title tooltip) when they don't
   fit rather than truncating layout unpredictably. */
.sg-label-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 190px; }
.sg-label-chip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; display: inline-block; }

/* ── CRM Activity Timeline (Update 19) ───────────────────────── */
.sg-timeline {
    position: relative;
}

.sg-timeline-item {
    display: flex;
    gap: 0.85rem;
    padding-bottom: 1.25rem;
    position: relative;
}

.sg-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 36px;
    bottom: 0;
    width: 2px;
    background: #eef0f7;
}

.sg-timeline-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    z-index: 1;
}

.sg-timeline-body {
    flex: 1;
    min-width: 0;
    padding-top: 0.3rem;
}

[data-theme="dark"] .sg-timeline-item:not(:last-child)::before {
    background: #262f4d;
}

/* ── CRM Kanban Pipeline (Update 19) ─────────────────────────── */
.sg-kanban-board {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
}

.sg-kanban-column {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    background: #f4f6fb;
    border-radius: 14px;
    max-height: calc(100vh - 220px);
}

.sg-kanban-column-header {
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.7rem 0.9rem;
    border-radius: 14px 14px 0 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sg-kanban-column-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    min-height: 80px;
    transition: background 0.15s ease;
}

.sg-kanban-column-body.sg-kanban-dragover {
    background: rgba(79,109,245,0.10);
    border-radius: 0 0 14px 14px;
}

.sg-kanban-card {
    background: #fff;
    border: 1px solid #eef0f7;
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    box-shadow: var(--sg-card-shadow);
    cursor: grab;
    touch-action: pan-y;
}

.sg-kanban-card-link {
    color: inherit;
    display: block;
}

.sg-kanban-card.sg-kanban-dragging {
    opacity: 0.55;
    cursor: grabbing;
}

[data-theme="dark"] .sg-kanban-column {
    background: #10152a;
}

[data-theme="dark"] .sg-kanban-card {
    background: #171d33;
    border-color: #262f4d;
}

[data-theme="dark"] .sg-kanban-column-body.sg-kanban-dragover {
    background: rgba(79,109,245,0.18);
}

@media (max-width: 767.98px) {
    .sg-kanban-column {
        flex: 0 0 78vw;
    }
}

/* Trend badge — good/bad is decided per-KPI server-side (TrendService),
   not just "up=green": a falling Loan Outstanding is good and green even
   though the arrow points down. */
.sg-kpi-trend {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
}

.sg-kpi-trend-good {
    background: rgba(23, 178, 106, 0.12);
    color: var(--sg-green);
}

.sg-kpi-trend-bad {
    background: rgba(239, 68, 68, 0.12);
    color: var(--sg-red);
}

[data-theme="dark"] .sg-kpi-trend-good {
    background: rgba(23, 178, 106, 0.2);
}

[data-theme="dark"] .sg-kpi-trend-bad {
    background: rgba(239, 68, 68, 0.2);
}

/* ── Cards / panels ───────────────────────────────────────── */
.sg-panel {
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--sg-card-shadow);
    border: 1px solid #eef0f7;
    padding: 1.35rem 1.5rem;
    animation: sg-fade-in-up 0.4s ease both;
}

.sg-panel-title {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: #1c2333;
    margin-bottom: 1rem;
}

/* Update 30, 39.1 — small initial-letter avatar used by the Upcoming
   Birthdays widget (and available for reuse anywhere a lightweight
   person-identifier beats a full photo). */
.sg-avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--sg-accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Entrance animation for KPI cards and panels — a plain page load still
   benefits from a bit of motion instead of content just snapping into
   place. Cards/panels within the same row stagger slightly via nth-child
   so they don't all land in perfect unison. */
@keyframes sg-fade-in-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.row > div:nth-child(1) > .sg-kpi-card { animation-delay: 0ms; }
.row > div:nth-child(2) > .sg-kpi-card { animation-delay: 40ms; }
.row > div:nth-child(3) > .sg-kpi-card { animation-delay: 80ms; }
.row > div:nth-child(4) > .sg-kpi-card { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
    .sg-kpi-card, .sg-panel, .sg-kpi-nav {
        animation: none !important;
        transition: none !important;
    }
}

/* ── Guest (auth) layout ──────────────────────────────────── */
.sg-guest-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, #1d2745, #0d1122 60%);
    padding: 1.5rem;
}

.sg-guest-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    padding: 2.25rem 2rem;
}

.sg-guest-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-weight: 800;
    font-size: 1.2rem;
    color: #1c2333;
    text-decoration: none;
}

.sg-guest-brand .badge-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--sg-accent), #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #fff;
}

/* ── Compliance grid ──────────────────────────────────────── */
.compliance-cell.cell-flagged {
    cursor: pointer;
}

.compliance-cell.cell-flagged:hover {
    background: rgba(239, 68, 68, 0.08);
    border-radius: 6px;
}

/* ── Advanced filter bar ──────────────────────────────────── */
.sg-filter-bar .sg-filter-field label,
.sg-month-filter label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8991ac;
    font-weight: 700;
    margin-bottom: 0.2rem;
    display: block;
}

/* ── Unified month+year filter (replaces separate Month/Year selects) ── */
.sg-month-input {
    max-width: 180px;
}

/* ── Global top-bar search ────────────────────────────────── */
.sg-global-search {
    width: 280px;
}

.sg-global-search i.bi-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8991ac;
    font-size: 0.85rem;
    pointer-events: none;
}

.sg-global-search input {
    padding-left: 32px;
}

.sg-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #eef0f7;
    border-radius: 10px;
    max-height: 360px;
    overflow-y: auto;
    z-index: 1050;
}

.sg-search-results .sg-search-group-label {
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: #8991ac;
    padding: 0.5rem 0.9rem 0.25rem;
}

.sg-search-results a.sg-search-result {
    display: block;
    padding: 0.45rem 0.9rem;
    text-decoration: none;
    color: #1c2333;
}

.sg-search-results a.sg-search-result:hover {
    background: rgba(79, 109, 245, 0.06);
}

.sg-search-results a.sg-search-result .sublabel {
    display: block;
    font-size: 0.76rem;
    color: #8991ac;
}

.sg-search-results .sg-search-empty {
    padding: 0.75rem 0.9rem;
    color: #8991ac;
    font-size: 0.82rem;
}

.sg-search-mobile-close {
    display: none;
}

/* Below md, the always-visible 280px input doesn't fit the topbar next to
   the page title — collapse it to an icon (#globalSearchMobileToggle) that
   expands this wrapper into a full-width overlay bar instead of hiding
   search entirely (it must stay reachable on every viewport). */
@media (max-width: 767.98px) {
    /* Topbar's desktop padding (28px each side) plus 4 full-size icon
       buttons on the right leaves almost no room for the page title on a
       360-390px phone, forcing it to wrap 2-3 lines and squeezing the
       avatar toward the edge. Tighten padding/icon size and let the title
       group actually shrink (needs min-width: 0 — flex children don't
       shrink below their content size by default) with an ellipsis
       instead of wrapping. */
    .sg-topbar {
        padding: 0.6rem 0.85rem;
    }

    .sg-topbar-titlegroup {
        min-width: 0;
        flex: 1 1 auto;
    }

    .sg-topbar-titles {
        min-width: 0;
        overflow: hidden;
    }

    .sg-topbar h1 {
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Desktop's 28px content padding + 24px panel padding eat 104px of a
       360px screen before any content renders — most visible in the My
       Reports calendar, where it left a 7-column grid too cramped to hit
       a reasonable tap-target size. Tightened everywhere on mobile, not
       just there, since every page pays this same tax. */
    .sg-content {
        padding: 0.85rem;
    }

    .sg-panel {
        padding: 0.85rem;
    }

    /* Bare-form pages cap the filter form at 320px desktop-side but that's
       tighter than a phone's own width needs to be — let the month input
       use the full row instead of an arbitrary fixed max-width. */
    .sg-month-filter,
    .sg-month-input {
        max-width: none;
        width: 100%;
    }

    .sg-topbar .text-muted-sm {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sg-topbar-actions {
        flex-shrink: 0;
        gap: 0.4rem !important;
    }

    .sg-topbar-actions .sg-bell,
    .sg-topbar-actions .sg-avatar {
        width: 34px;
        height: 34px;
    }

    .sg-global-search {
        display: none;
        width: auto;
    }

    .sg-global-search.sg-search-mobile-open {
        display: block;
        position: fixed;
        top: 0.6rem;
        left: 0.75rem;
        right: 0.75rem;
        z-index: 1060;
    }

    .sg-global-search.sg-search-mobile-open input {
        padding-right: 32px;
    }

    .sg-search-mobile-open .sg-search-mobile-close {
        display: block;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.7rem;
    }

    /* Bootstrap's default (non -sm) form-control/select/btn sizing is
       ~38px tall — comfortable with a mouse, tight for a thumb. Bump
       every *primary* control (the ones a form is actually filled/
       submitted with) to the ~44px touch-target minimum. Deliberately
       excludes -sm variants, which stay compact on purpose in dense
       contexts like filter bars and table toolbars, not primary actions. */
    .form-control:not(.form-control-sm),
    .form-select:not(.form-select-sm),
    .btn:not(.btn-sm) {
        min-height: 44px;
    }

    .sg-activity-calendar-grid {
        gap: 4px;
    }

    /* Job Cards bulk-select checkboxes are the one checkbox used for a
       repeated tap-heavy mobile workflow (selecting several rows before a
       bulk status update) — worth a bigger target. Left the admin
       permission grid's checkboxes alone; that's a dense desktop-typical
       matrix where enlarging every cell would do more harm than good. */
    .job-card-checkbox {
        width: 22px;
        height: 22px;
    }

    .job-card-checkbox + label,
    td:has(.job-card-checkbox) {
        padding-top: 0.9rem;
        padding-bottom: 0.9rem;
    }
}

/* ── Jump-to-record highlight (from global search results) ──── */
.sg-highlight-flash {
    animation: sg-highlight-flash-anim 2s ease;
}

@keyframes sg-highlight-flash-anim {
    0%, 100% { background: transparent; }
    15%, 60% { background: rgba(245, 158, 11, 0.25); }
}

/* ── Click-to-open rows ───────────────────────────────────── */
.sg-row-nav,
.sg-row-detail {
    cursor: pointer;
}

.sg-row-nav:hover,
.sg-row-detail:hover {
    background: rgba(79, 109, 245, 0.05);
}

/* ── KPI cards ───────────────────────────────────
   Update 62 (Priority 2.2 fix) — the "double-click to view" hint used
   to be a CSS ::after with content always in the DOM (just opacity 0
   until :hover). Mobile WebKit/Blink browsers can stick a tapped
   element's :hover state (no mouse to un-hover it), and the
   `@media (hover: none)` fallback below made it worse by showing the
   text permanently by design on touch devices — either way it could
   render as a persistent visible label instead of a hint, which is
   exactly what was reported. A native `title` attribute (see
   tasks/index.blade.php) can never render as static page content
   under any of those conditions, so the pseudo-element + its content
   is removed rather than patched. The hover lift/shadow itself was
   never the reported problem, so that stays. */
.sg-kpi-nav {
    cursor: pointer;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sg-kpi-nav:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(20, 24, 45, 0.14);
}

[data-theme="dark"] .sg-kpi-nav:hover {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .sg-kpi-nav::after {
    color: #6b7396;
}

/* Mobile sidebar toggle */
.sg-sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .sg-sidebar {
        transform: translateX(-100%);
    }
    .sg-sidebar.show {
        transform: translateX(0);
    }
    .sg-main {
        margin-left: 0;
    }

    .sg-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 20, 36, 0.5);
        z-index: 1025;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .sg-sidebar-backdrop.show {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ── Table horizontal-scroll hint (mobile) ────────────────────
   Only shown (via .sg-scroll-hint, toggled in app-global.js) when a
   table actually overflows its container and hasn't been scrolled to
   the end yet — a fade + arrow on the right edge instead of relying on
   an easy-to-miss native scrollbar. */
.table-responsive {
    position: relative;
}

.sg-scroll-hint::after {
    content: "\f285";
    font-family: "bootstrap-icons";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 0.35rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 75%);
    color: #8991ac;
    font-size: 0.9rem;
    pointer-events: none;
}

[data-theme="dark"] .sg-scroll-hint::after {
    background: linear-gradient(to right, rgba(23, 29, 51, 0), #171d33 75%);
    color: #8b93b8;
}

/* ── Export toolbar ───────────────────────────────────────── */
.sg-export-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ── Dark mode ─────────────────────────────────────────────
   Bootstrap's own components (tables, modals, dropdowns, forms,
   buttons) already re-theme themselves via data-bs-theme="dark" on
   <html> (set alongside our own data-theme). Everything below only
   covers the custom .sg-* surfaces Bootstrap doesn't touch. Text/
   border colors are flipped deliberately (not a blanket filter:invert)
   so KPI numbers, chart legends, and status colors stay legible. */
[data-theme="dark"] {
    --sg-bg: #0f1424;
    --sg-card-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] body {
    color: #e4e7f2;
}

[data-theme="dark"] .sg-topbar {
    background: #171d33;
    border-bottom-color: #262f4d;
}

[data-theme="dark"] .sg-topbar h1 {
    color: #f2f4fb;
}

[data-theme="dark"] .sg-bell {
    background: #1d2540;
    color: #c3c9e0;
}

[data-theme="dark"] .sg-bell .dot {
    border-color: #171d33;
}

[data-theme="dark"] .sg-kpi-card,
[data-theme="dark"] .sg-panel {
    background: #171d33;
    border-color: #262f4d;
}

[data-theme="dark"] .sg-kpi-value,
[data-theme="dark"] .sg-panel-title {
    color: #f2f4fb;
}

[data-theme="dark"] .sg-kpi-label,
[data-theme="dark"] .sg-page-footer,
[data-theme="dark"] .sg-filter-bar .sg-filter-field label {
    color: #8b93b8;
}

[data-theme="dark"] .sg-global-search input {
    background: #1d2540;
    border-color: #262f4d;
    color: #e4e7f2;
}

[data-theme="dark"] .sg-search-results {
    background: #171d33;
    border-color: #262f4d;
}

[data-theme="dark"] .sg-search-results a.sg-search-result {
    color: #e4e7f2;
}

[data-theme="dark"] .sg-search-results a.sg-search-result:hover,
[data-theme="dark"] .sg-row-nav:hover,
[data-theme="dark"] .sg-row-detail:hover {
    background: rgba(79, 109, 245, 0.16);
}

[data-theme="dark"] .compliance-cell.cell-flagged:hover {
    background: rgba(239, 68, 68, 0.18);
}

/* ── Skeleton loaders ─────────────────────────────────────────
   Shimmer placeholder shown briefly on KPI values (while the count-up
   script runs) and on chart canvases (until Chart.js paints them) so a
   page load reads as "loading in" rather than the numbers just appearing. */
.sg-skeleton {
    display: inline-block;
    height: 1em;
    width: 4.5em;
    border-radius: 4px;
    background: linear-gradient(90deg, #eceff5 25%, #f6f7fb 37%, #eceff5 63%);
    background-size: 400% 100%;
    animation: sg-skeleton-shimmer 1.4s ease infinite;
    vertical-align: middle;
}

.sg-chart-skeleton {
    border-radius: 10px;
    background: linear-gradient(90deg, #eceff5 25%, #f6f7fb 37%, #eceff5 63%);
    background-size: 400% 100%;
    animation: sg-skeleton-shimmer 1.4s ease infinite;
}

.sg-loading {
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

@keyframes sg-skeleton-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

[data-theme="dark"] .sg-skeleton,
[data-theme="dark"] .sg-chart-skeleton {
    background: linear-gradient(90deg, #1d2540 25%, #262f4d 37%, #1d2540 63%);
    background-size: 400% 100%;
}

@media (prefers-reduced-motion: reduce) {
    .sg-skeleton, .sg-chart-skeleton {
        animation: none;
    }
}

/* ── Print ─────────────────────────────────────────────────
   Applies to every page automatically: hide chrome (sidebar,
   topbar, footer, anything marked .no-print — forms, buttons,
   month pickers) and let report tables/panels print full-width. */
@media print {
    .sg-sidebar,
    .sg-topbar,
    .sg-page-footer,
    .no-print {
        display: none !important;
    }

    .sg-main {
        margin-left: 0 !important;
    }

    .sg-content {
        padding: 0 !important;
    }

    body {
        background: #fff !important;
    }

    .sg-panel {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
    }

    .table {
        font-size: 11px;
    }
}

/* ── My Reports: progress rings ──────────────────────────────
   conic-gradient renders the ring itself — no chart library needed for
   a single-value progress indicator, which keeps this mobile-first page
   light. --sg-ring-pct (0-100, clamped) is set inline per ring. */
.sg-rings-row {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.sg-ring-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 130px;
}

.sg-ring-wrap-disabled {
    opacity: 0.7;
}

.sg-ring {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: conic-gradient(var(--sg-accent) calc(var(--sg-ring-pct, 0) * 1%), #eceff5 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sg-ring-empty {
    background: #eceff5;
}

.sg-ring-inner {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sg-ring-value {
    font-weight: 800;
    font-size: 0.95rem;
    color: #1c2333;
}

.sg-ring-edit {
    position: absolute;
    top: 0;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eceff5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--sg-accent);
    box-shadow: 0 2px 6px rgba(20, 24, 45, 0.12);
}

.sg-ring-label {
    margin-top: 0.6rem;
    font-weight: 700;
    font-size: 0.85rem;
}

.sg-ring-sub {
    font-size: 0.72rem;
    color: #8991ac;
    text-align: center;
}

/* ── Daily Activity Report popup: Sales/Collection highlight ──
   These two fields (Update 10) are the most important thing this popup
   captures now — a distinct gradient card + oversized bold input text
   makes them read as the focal point, ahead of Sharing/task-sheet.
   Teal/green match the Sales/Collection color coding used everywhere
   else in the app (KPI cards, rings). */
.sg-activity-highlight {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(23, 178, 106, 0.1));
    border: 1px solid rgba(20, 184, 166, 0.25);
    border-radius: 14px;
    padding: 1rem;
}

.sg-activity-highlight-input {
    font-size: 1.2rem;
    font-weight: 800;
    padding: 0.6rem 0.7rem;
    background: #fff;
    border: 1px solid rgba(20, 184, 166, 0.3);
}

.sg-activity-highlight-input:focus {
    border-color: var(--sg-teal);
    box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.15);
}

[data-theme="dark"] .sg-activity-highlight {
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(23, 178, 106, 0.1));
    border-color: rgba(20, 184, 166, 0.3);
}

[data-theme="dark"] .sg-activity-highlight-input {
    background: #1d2540;
    color: #fff;
    border-color: rgba(20, 184, 166, 0.35);
}

/* ── My Reports: Last 4 Months summary widget (Update 10) ────
   Each card is a link (drill into that month's calendar) with an
   edit-pencil per metric layered on top — stopPropagation in JS keeps
   the pencil click from also triggering the card's navigation. */
.sg-month-summary-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.sg-month-summary-card {
    display: block;
    border: 1px solid #eceff5;
    border-radius: 12px;
    padding: 0.85rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sg-month-summary-card:hover {
    border-color: var(--sg-accent);
    box-shadow: 0 4px 14px rgba(20, 24, 45, 0.08);
}

.sg-month-summary-current {
    border-color: var(--sg-accent);
    background: rgba(79, 109, 245, 0.04);
}

.sg-month-summary-label {
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.sg-month-summary-metric {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.78rem;
    margin-bottom: 0.3rem;
    position: relative;
}

.sg-month-summary-metric-label {
    font-weight: 700;
    min-width: 58px;
}

.sg-month-summary-metric-value {
    font-weight: 600;
    color: #1c2333;
}

.sg-month-summary-metric-value small {
    color: #8991ac;
    font-weight: 500;
}

.sg-month-summary-edit {
    margin-left: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #eceff5;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--sg-accent);
    flex-shrink: 0;
}

.sg-text-teal { color: var(--sg-teal); }
.sg-text-green { color: var(--sg-green); }

[data-theme="dark"] .sg-month-summary-card {
    border-color: #262f4d;
}

[data-theme="dark"] .sg-month-summary-current {
    background: rgba(79, 109, 245, 0.1);
}

[data-theme="dark"] .sg-month-summary-metric-value {
    color: #fff;
}

[data-theme="dark"] .sg-month-summary-edit {
    background: #1d2540;
    border-color: #262f4d;
}

@media (max-width: 767.98px) {
    .sg-month-summary-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Below ~480px, a metric row (label + value + edit-pencil) genuinely
   doesn't fit a 2-column card's content width — full-width single-column
   cards read better here than shrinking text past comfort. */
@media (max-width: 480px) {
    .sg-month-summary-row {
        grid-template-columns: 1fr;
    }
}

/* ── My Reports: activity calendar ───────────────────────────── */
.sg-activity-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.sg-activity-calendar-head {
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #8991ac;
    text-transform: uppercase;
    text-align: center;
}

.sg-activity-day {
    aspect-ratio: 1;
    border: 1px solid #eceff5;
    border-radius: 10px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0;
}

.sg-activity-day-blank {
    border-color: transparent;
    background: transparent;
    cursor: default;
}

.sg-activity-day-submitted {
    border-color: rgba(23, 178, 106, 0.3);
    background: rgba(23, 178, 106, 0.08);
    color: #17b26a;
}

.sg-activity-day-missed {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

/* Update 30, 39.4 — Leave Calendar: a date with exactly one leave type
   active gets its whole cell tinted (matching the submitted/missed
   pattern above), so the leave type is legible at a glance instead of a
   single fixed-color dot regardless of which type it actually was. */
.sg-activity-day-leave-blue { border-color: rgba(79, 109, 245, 0.3); background: rgba(79, 109, 245, 0.08); color: var(--sg-blue); }
.sg-activity-day-leave-green { border-color: rgba(23, 178, 106, 0.3); background: rgba(23, 178, 106, 0.08); color: var(--sg-green); }
.sg-activity-day-leave-orange { border-color: rgba(245, 158, 11, 0.3); background: rgba(245, 158, 11, 0.08); color: var(--sg-orange); }
.sg-activity-day-leave-purple { border-color: rgba(139, 92, 246, 0.3); background: rgba(139, 92, 246, 0.08); color: var(--sg-purple); }
.sg-activity-day-leave-teal { border-color: rgba(20, 184, 166, 0.3); background: rgba(20, 184, 166, 0.08); color: var(--sg-teal); }
.sg-activity-day-leave-red { border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.08); color: var(--sg-red); }
.sg-activity-day-leave-yellow { border-color: rgba(234, 179, 8, 0.3); background: rgba(234, 179, 8, 0.08); color: var(--sg-yellow); }
.sg-activity-day-leave-indigo { border-color: rgba(99, 102, 241, 0.3); background: rgba(99, 102, 241, 0.08); color: var(--sg-indigo); }

.sg-activity-day-selected {
    outline: 2px solid var(--sg-accent);
    outline-offset: 1px;
}

.sg-activity-day-num {
    font-weight: 700;
}

/* Small status dot instead of a full check/cross icon — the cell's own
   tinted background+border already signal status, so the icon was doing
   the same job twice and read as heavy/oversized on a ~40px mobile cell.
   Explicit colors (not currentColor) so a Sunday's red text rule below
   doesn't also tint a submitted day's dot red. */
.sg-activity-day-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.sg-activity-day-submitted .sg-activity-day-dot {
    background: #17b26a;
}

.sg-activity-day-missed .sg-activity-day-dot {
    background: #ef4444;
}

.sg-sunday {
    color: #ef4444 !important;
}

.sg-activity-calendar-hint {
    font-size: 0.68rem;
}

@media (max-width: 480px) {
    .sg-activity-calendar-hint {
        width: 100%;
        margin-left: 0 !important;
    }
}

/* ── My Reports: floating add-report button ──────────────────── */
.sg-fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--sg-accent);
    color: #fff;
    border: none;
    font-size: 1.3rem;
    box-shadow: 0 8px 20px rgba(79, 109, 245, 0.4);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .sg-ring-inner {
    background: #171d33;
}

[data-theme="dark"] .sg-ring-value {
    color: #f2f4fb;
}

[data-theme="dark"] .sg-ring-edit {
    background: #171d33;
    border-color: #262f4d;
}

[data-theme="dark"] .sg-activity-day {
    background: #171d33;
    border-color: #262f4d;
}

@media (max-width: 400px) {
    .sg-ring-wrap {
        width: 46%;
    }

    .sg-ring {
        width: 100px;
        height: 100px;
    }

    .sg-ring-inner {
        width: 74px;
        height: 74px;
    }
}

/* ── My Profile (Update 11) ──────────────────────────────────── */
.sg-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem 0 0.75rem;
}

.sg-profile-photo-wrap {
    position: relative;
    margin-bottom: 0.85rem;
}

.sg-profile-photo {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(20, 24, 45, 0.12);
}

.sg-profile-photo-initials {
    background: linear-gradient(135deg, var(--sg-accent), #7c3aed);
    color: #fff;
    font-weight: 800;
    font-size: 2.1rem;
}

.sg-profile-photo-edit {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--sg-accent);
    border: 3px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(20, 24, 45, 0.2);
}

.sg-profile-name {
    font-size: 1.25rem;
    font-weight: 800;
}

.sg-profile-role {
    font-weight: 700;
    color: var(--sg-accent);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

.sg-profile-org {
    color: #8991ac;
    font-size: 0.8rem;
    margin-top: 0.1rem;
}

.sg-profile-code {
    margin-top: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.sg-profile-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0;
    border-bottom: 1px solid #eceff5;
}

.sg-profile-detail-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sg-profile-detail-label {
    color: #8991ac;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sg-profile-detail-value {
    font-weight: 700;
    font-size: 0.9rem;
}

[data-theme="dark"] .sg-profile-photo-edit {
    border-color: #171d33;
}

[data-theme="dark"] .sg-profile-detail-row {
    border-bottom-color: #262f4d;
}

@media (max-width: 400px) {
    .sg-profile-photo {
        width: 88px;
        height: 88px;
    }

    .sg-profile-photo-initials {
        font-size: 1.8rem;
    }
}

/* ── AJAX save toast (Update 12) ── */
.sg-toast-wrap {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.sg-toast {
    background: #1f2937;
    color: #fff;
    padding: 0.65rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sg-toast-show {
    opacity: 1;
    transform: translateY(0);
}

.sg-toast-success {
    background: #15803d;
}

.sg-toast-error {
    background: #b91c1c;
}

/* Update 41, 50.2-A/50.3 — floating "New WhatsApp Lead" notification card
   on Lead Explorer, distinct from the generic sg-toast above (this one
   is clickable/persistent until dismissed, not an auto-fading message). */
.sg-wa-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1900;
    width: 300px;
    background: #fff;
    border: 1px solid #eef0f7;
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
    padding: 0.85rem 1rem;
}

[data-theme="dark"] .sg-wa-toast {
    background: #171d33;
    border-color: #262f4d;
}

@media (max-width: 480px) {
    .sg-wa-toast {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        width: auto;
    }
}

@media (max-width: 480px) {
    .sg-toast-wrap {
        left: 0.75rem;
        right: 0.75rem;
        top: 0.75rem;
    }

    .sg-toast {
        width: 100%;
    }
}

/* Update 39, 48.5 — vertical stepper wizard rail (Add Employee, and any
   other genuinely multi-section form). Numbered main steps, each with
   expandable sub-items; the sub-item currently in view highlights both
   itself and its parent step. */
.sg-stepper-rail {
    padding-right: 0.5rem;
}

.sg-stepper-step {
    margin-bottom: 0.25rem;
}

.sg-stepper-step-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.25rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: #1c2333;
    cursor: default;
}

.sg-stepper-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #eef1fb;
    color: var(--sg-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.sg-stepper-step.is-current .sg-stepper-num {
    background: var(--sg-accent);
    color: #fff;
}

.sg-stepper-substeps {
    margin-left: 13px;
    padding-left: 16px;
    border-left: 2px solid #e7eaf5;
    margin-bottom: 0.4rem;
}

.sg-stepper-step:last-child .sg-stepper-substeps {
    border-left-color: transparent;
}

.sg-stepper-sub {
    display: block;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: #5b6373;
    text-decoration: none;
    border-radius: 6px;
    margin-bottom: 2px;
}

.sg-stepper-sub:hover {
    background: var(--sg-bg);
    color: #1c2333;
}

.sg-stepper-sub.active {
    background: rgba(79, 109, 245, 0.1);
    color: var(--sg-accent);
    font-weight: 600;
}

[data-theme="dark"] .sg-stepper-step-header {
    color: #e5e8f2;
}

[data-theme="dark"] .sg-stepper-num {
    background: rgba(79, 109, 245, 0.18);
}

[data-theme="dark"] .sg-stepper-substeps {
    border-left-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sg-stepper-sub {
    color: #a4acc7;
}

[data-theme="dark"] .sg-stepper-sub:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #e5e8f2;
}

/* Update 40, 50.1 — small uppercase section divider label for grouped modal
   forms (e.g. Departments modal's "Department Details" / "Classification"). */
.sg-form-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sg-text-muted, #8a93a6);
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #eef0f6;
}
.sg-form-section-label:not(:first-child) {
    margin-top: 1.1rem;
}
[data-theme="dark"] .sg-form-section-label {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Update 42, 52.2 — numbered-circle-with-connector-line step indicator for
   the Add Lead wizard, replacing Update 40/41's pill-style horizontal nav
   to match the client's Update 42 reference screenshot. Class names
   (.sg-lead-stepper / .sg-lead-stepper-item / .sg-lead-stepper-num) are
   kept identical to the pill version so the existing step-controller JS
   (toggles .active/.is-done, reads data-step-nav) needs no changes —
   only the layout/visual language changed. */
.sg-lead-stepper {
    display: flex;
    overflow-x: auto;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid #eef0f6;
}
.sg-lead-stepper-item {
    position: relative;
    flex: 1 0 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    padding-top: 2px;
}
.sg-lead-stepper-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: #e2e5ee;
    z-index: 0;
}
.sg-lead-stepper-item.is-done:not(:last-child)::after {
    background: var(--sg-green, #17b26a);
}
.sg-lead-stepper-num {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #d8dce6;
    color: #8a93a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}
.sg-lead-stepper-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #8a93a6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}
.sg-lead-stepper-item.active .sg-lead-stepper-num {
    background: var(--sg-accent);
    border-color: var(--sg-accent);
    color: #fff;
}
.sg-lead-stepper-item.active .sg-lead-stepper-label {
    color: var(--sg-accent);
}
.sg-lead-stepper-item.is-done .sg-lead-stepper-num {
    background: var(--sg-green, #17b26a);
    border-color: var(--sg-green, #17b26a);
    color: #fff;
}
[data-theme="dark"] .sg-lead-stepper {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .sg-lead-stepper-num {
    background: #171d33;
    border-color: rgba(255, 255, 255, 0.16);
}
[data-theme="dark"] .sg-lead-stepper-item:not(:last-child)::after {
    background: rgba(255, 255, 255, 0.12);
}

/* Update 42, 52.2 — Lead Type segmented control, field icons, Tags picker,
   and Quick Add template cards on the Add Lead wizard's Basic Info step. */
.sg-segmented {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.sg-segmented-btn {
    flex: 1 1 auto;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #dde1eb;
    background: #fff;
    color: #4b5468;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}
.sg-segmented-btn.active {
    background: var(--sg-accent);
    border-color: var(--sg-accent);
    color: #fff;
}
[data-theme="dark"] .sg-segmented-btn {
    background: #171d33;
    border-color: rgba(255, 255, 255, 0.12);
    color: #a4acc7;
}
.sg-field-icon-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.sg-field-icon-group > i {
    color: #9aa2b8;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.sg-tag-chip-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.sg-tag-chip-picker .sg-tag-chip {
    cursor: pointer;
    border: 1px solid transparent;
    user-select: none;
}
.sg-tag-chip-picker .sg-tag-chip.selected {
    border-color: currentColor;
}
.sg-quick-add-card {
    border: 1px solid #eef0f6;
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    text-align: left;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    position: relative;
}
.sg-quick-add-card:hover {
    border-color: var(--sg-accent);
    background: rgba(79, 109, 245, 0.05);
}
/* Update 43, 52.2 — "selecting one visibly highlights it (border + subtle
   background + check icon)" per the client's final reference. The check
   icon itself is a real <i class="bi bi-check-circle-fill"> element (see
   .sg-quick-add-check below), not a CSS-generated glyph — more robust
   than hardcoding a bootstrap-icons codepoint in content:. */
.sg-quick-add-card.selected {
    border-color: var(--sg-accent);
    border-width: 2px;
    background: rgba(79, 109, 245, 0.08);
}
.sg-quick-add-check {
    position: absolute;
    top: 6px;
    right: 8px;
    color: var(--sg-accent);
    font-size: 0.9rem;
    display: none;
}
.sg-quick-add-card.selected .sg-quick-add-check {
    display: inline;
}
/* Update 43, 52.3 — Label Management table's Color column swatch. */
.sg-color-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.sg-quick-add-card .sg-quick-add-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(79, 109, 245, 0.1);
    color: var(--sg-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
[data-theme="dark"] .sg-quick-add-card {
    background: #171d33;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Update 40, 50.1 — reusable searchable multi-select (JS: sgEnhanceMultiSelect). */
.sg-multiselect {
    position: relative;
}

.sg-multiselect-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.4rem;
}

.sg-multiselect-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(79, 109, 245, 0.1);
    color: var(--sg-accent);
    border-radius: 999px;
    padding: 0.2rem 0.35rem 0.2rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.sg-multiselect-chip button {
    border: none;
    background: transparent;
    color: inherit;
    line-height: 1;
    font-size: 1rem;
    padding: 0 0.15rem;
    cursor: pointer;
    opacity: 0.7;
}

.sg-multiselect-chip button:hover {
    opacity: 1;
}

.sg-multiselect-input-wrap {
    position: relative;
}

.sg-multiselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1075;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e5f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(20, 24, 45, 0.12);
    padding: 0.35rem;
    display: none;
}

.sg-multiselect.is-open .sg-multiselect-dropdown {
    display: block;
}

.sg-multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 0.88rem;
    color: #1c2333;
    cursor: pointer;
    margin-bottom: 0;
}

.sg-multiselect-option:hover {
    background: var(--sg-bg);
}

.sg-multiselect-option input[type="checkbox"] {
    flex-shrink: 0;
}

[data-theme="dark"] .sg-multiselect-chip {
    background: rgba(79, 109, 245, 0.18);
}

[data-theme="dark"] .sg-multiselect-dropdown {
    background: #1a2036;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .sg-multiselect-option {
    color: #e5e8f2;
}

[data-theme="dark"] .sg-multiselect-option:hover {
    background: rgba(255, 255, 255, 0.04);
}