: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;
}

/* Global typography system — "Buttons" role: 600 weight (Bootstrap's
   own default is 400). Font-size deliberately untouched here — this
   app already uses .btn-sm (14px) almost everywhere, which already
   sits in the requested 13-14px range; changing the base .btn size
   too would shift padding/layout on the few plain .btn usages for no
   real gain. */
.btn {
    font-weight: 600;
}

/* 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 64, Part B Role & Permissions UI pass — section-divider row
   grouping a dense permission matrix into its real module categories. */
.sg-perm-group-row th {
    background: #f4f6fb;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}
[data-theme="dark"] .sg-perm-group-row th {
    background: #1d2745;
}

/* 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;
    text-decoration: none;
}

.sg-sidebar-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;
    font-size: 1.05rem;
    color: #fff;
    flex-shrink: 0;
}

/* Update 64, Part B Section 2 — two-line brand treatment (name + tagline)
   matching the reference image's sidebar header, on top of the existing
   badge-mark rather than replacing it. */
.sg-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.sg-sidebar-brand-name {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.01em;
}

.sg-sidebar-brand-tagline {
    font-size: 0.66rem;
    font-weight: 500;
    color: var(--sg-sidebar-text);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.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 69, Slice C — pin/favorite toggle, injected as a child of each
   nav link by app-global.js (not server-rendered markup — see that
   file's comment). Hidden until hover/focus/pinned so it doesn't add
   visual noise to every single row at rest. */
.sg-nav-pin-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.2rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.25);
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.sg-sidebar-nav a:hover .sg-nav-pin-toggle,
.sg-nav-pin-toggle:focus-visible,
.sg-nav-pin-toggle.sg-pinned {
    opacity: 1;
}

.sg-nav-pin-toggle.sg-pinned {
    color: var(--sg-yellow);
}

.sg-nav-pin-toggle:hover {
    color: var(--sg-yellow);
}

/* 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;
}

/* Update 69, Slice A — desktop flyout. Mobile (<992px) keeps the plain
   accordion-in-place behavior from the rules above untouched; this
   query only repositions the SAME .collapse/.show pair the toggle
   button already sets, from "static block below the toggle" to "a
   detached panel floating beside the sidebar" — no second state
   mechanism, no JS change needed to make this rule take effect.

   Smart Flyout redesign — position: fixed (not absolute) so JS can set
   top/left/max-height as real viewport pixel coordinates from
   getBoundingClientRect(), recalculated on open/scroll/resize (see
   positionFlyout() in app-global.js). The old absolute+left:100%+top:0
   only "worked" because .sg-sidebar-group happened to sit inside the
   scrolling .sg-sidebar-nav; it had no collision detection, so a module
   low in a long sidebar could render a flyout that extended past the
   viewport bottom with no way to flip up and fit. min-width stays a
   CSS rule (JS doesn't need to know the panel's width to compute it),
   but top/left/max-height are intentionally left unset here — they're
   JS-computed per open, not static. */
@media (min-width: 992px) {
    .sg-sidebar-group-body.collapse {
        position: fixed;
        min-width: 260px;
        max-width: 300px;
        overflow-y: auto;
        background: var(--sg-sidebar-bg-active);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.6rem;
        box-shadow: 0 12px 32px rgba(8, 11, 22, 0.45);
        padding: 0.4rem 0;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-6px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
        pointer-events: none;
        z-index: 1050;
    }

    .sg-sidebar-group-body.collapse.show {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Flyout items don't need the mobile accordion's extra indent —
       there's no sibling top-level item inside the panel to visually
       separate from. */
    .sg-sidebar-group-body a,
    .sg-sidebar-group-body .sg-nav-disabled {
        padding-left: 1rem;
    }
}

/* Smart Flyout redesign — icon+title+subtitle header (desktop flyout
   only, see sidebar-group.blade.php's d-none d-lg-block) and labeled
   section groups within the flyout body. Both are plain additive
   rules over the existing dark sidebar palette — no new colors. */
.sg-flyout-header {
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.3rem;
}

.sg-flyout-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--sg-sidebar-text-active);
}

.sg-flyout-header-subtitle {
    font-size: 0.72rem;
    color: var(--sg-sidebar-text);
    margin-top: 0.1rem;
    padding-left: 1.6rem;
}

.sg-flyout-section + .sg-flyout-section {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sg-flyout-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    padding: 0.3rem 1rem 0.2rem;
}

/* Mobile accordion never renders .sg-flyout-header/.sg-flyout-section-
   label at all (d-none d-lg-block / no equivalent markup change there),
   but .sg-flyout-section itself is a plain div with no mobile-specific
   rule needed — its children (the <a> links) already use the existing
   accordion item styling untouched. */

.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;
}

/* Global typography system — "Page Title" role: 28-32px/700. */
.sg-topbar h1 {
    font-size: 1.75rem;
    font-weight: 700;
    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: 700;
    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: 700;
    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;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Update 64, Part B Section 16/33 — subtle hover, same treatment as
   .sg-panel, so Kanban cards don't feel like a different component
   system from the rest of the app. */
.sg-kanban-card:hover {
    box-shadow: 0 4px 14px rgba(20, 24, 45, 0.1);
    border-color: #dde1ee;
}

.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;
    transition: box-shadow 0.15s ease;
}

/* Update 64, Part B Section 1/33 — every panel gets the same subtle
   hover lift already used elsewhere (.sg-kpi-nav, .sg-kpi-card), instead
   of only the cards that happen to be clickable. Shadow-only (no
   transform) so it doesn't shift layout under tables/charts inside. */
.sg-panel:hover {
    box-shadow: 0 4px 16px rgba(20, 24, 45, 0.09);
}

/* Global typography system — "Section Title" role: 18-22px/600. */
.sg-panel-title {
    font-weight: 600;
    font-size: 1.25rem;
    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: 700;
    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: 700;
    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: 700;
    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: 700;
    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: 700;
}

.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 66, Slice 1b — non-blocking Sales Rule warnings use this
   variant (amber, matching --sg-orange) instead of the success/error
   pair, which both already had a fixed meaning before this. */
.sg-toast-warning {
    background: #b45309;
}

/* 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);
}

/* ── Update 64, Part B Section 6 — dashboard greeting banner ──────────
   Reference image uses a photo background; no such asset exists in this
   app, so this uses a gradient built from the app's own existing brand
   tokens (--sg-sidebar-bg -> --sg-accent) instead of fabricating a stock
   image. Shared by every role's home dashboard via the
   <x-dashboard-greeting> component, not copy-pasted per view. */
.sg-dashboard-greeting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.75rem 2rem;
    border-radius: 14px;
    background: linear-gradient(120deg, var(--sg-sidebar-bg) 0%, #2a3563 60%, var(--sg-accent) 140%);
    color: #fff;
}

.sg-dashboard-greeting h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.sg-dashboard-greeting p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.9rem;
}

.sg-dashboard-greeting-date {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.sg-dashboard-greeting-date i {
    font-size: 1.1rem;
}

@media (max-width: 575.98px) {
    .sg-dashboard-greeting {
        padding: 1.25rem 1.4rem;
    }

    .sg-dashboard-greeting h2 {
        font-size: 1.15rem;
    }
}

/* ── Update 64, Part B Section 9 — Recent Activities timeline ─────── */
.sg-activity-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.sg-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.sg-activity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sg-accent);
    flex-shrink: 0;
    margin-top: 0.35rem;
}

.min-width-0 {
    min-width: 0;
}

[data-theme="dark"] .sg-activity-dot {
    background: var(--sg-accent);
}

/* Advanced Sales Negotiation Workspace — Bootstrap's grid already
   collapses .col-md-* to one column below this breakpoint and
   .modal-dialog-scrollable already keeps the header/footer fixed with
   only .modal-body scrolling, so this is deliberately small: just
   touch-target sizing (checkboxes default to ~16px, well under the
   ~44px minimum) and footer button stacking so three save buttons
   don't get cramped onto one row on a phone. */
@media (max-width: 767.98px) {
    #negotiationWorkspaceModal .form-check {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    #negotiationWorkspaceModal .form-check-input {
        width: 1.25em;
        height: 1.25em;
        margin-top: 0;
        flex-shrink: 0;
    }

    #negotiationWorkspaceModal .modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    #negotiationWorkspaceModal .modal-footer .btn {
        width: 100%;
        min-height: 44px;
    }

    #negotiationWorkspaceModal .accordion-button {
        min-height: 44px;
    }

    /* A-Z Expansion, Slices 4-6 — the per-row edit/delete icon buttons on
       the Product/Objection/Pricing Item/Note lists default to Bootstrap's
       .btn-sm padding (well under 44px) — bump them to a real touch
       target on phones, same rationale as the form-check sizing above. */
    #negotiationWorkspaceModal .edit-presentation-btn,
    #negotiationWorkspaceModal .delete-presentation-btn,
    #negotiationWorkspaceModal .edit-objection-btn,
    #negotiationWorkspaceModal .delete-objection-btn,
    #negotiationWorkspaceModal .edit-pricing-item-btn,
    #negotiationWorkspaceModal .delete-pricing-item-btn,
    #negotiationWorkspaceModal .edit-note-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* The View/Edit toggle buttons sit in the same stacked footer as the
       save buttons — covered by the .modal-footer .btn rule above, no
       separate rule needed for #nwEditBtn/#nwCancelEditBtn. */
}

/* Slice 2 — task reminder cards (public/js/reminders.js). Stacked bottom-right
   on desktop, full-width bottom sheet on phones; sits above page content but
   below modals' backdrop (z 1050) so it never blocks a modal's own buttons. */
.sg-reminder-stack {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1045;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.6rem;
    width: min(380px, calc(100vw - 2rem));
    pointer-events: none;
}
.sg-reminder-card {
    pointer-events: auto;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 4px solid var(--sg-accent);
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    padding: 0.8rem 0.9rem;
    animation: sg-reminder-in 0.18s ease-out;
}
[data-theme="dark"] .sg-reminder-card { background: #1b2236; border-color: rgba(255, 255, 255, 0.08); }
@keyframes sg-reminder-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sg-reminder-card { animation: none; } }
.sg-reminder-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.35rem; }
.sg-reminder-head .bi-bell-fill { color: var(--sg-orange); }
.sg-reminder-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--sg-gray); }
.sg-reminder-priority { background: var(--sg-red); font-size: 0.62rem; }
.sg-reminder-close { margin-left: auto; font-size: 0.7rem; }
.sg-reminder-title { font-weight: 600; font-size: 0.95rem; line-height: 1.3; word-break: break-word; }
.sg-reminder-due { font-size: 0.8rem; color: var(--sg-gray); margin-bottom: 0.55rem; }
.sg-reminder-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sg-reminder-actions .btn { min-height: 34px; }
@media (max-width: 767.98px) {
    .sg-reminder-stack { right: 0; left: 0; bottom: 0; width: 100%; padding: 0 0.6rem 0.6rem; }
    .sg-reminder-actions .btn { min-height: 44px; flex: 1 1 auto; }
}

/* Slice 3 — My To-Do drag-to-reorder + planner chips. */
.sg-drag-handle { cursor: grab; margin-right: 0.15rem; }
tr.task-row[draggable="true"]:active .sg-drag-handle { cursor: grabbing; }
tr.task-row.sg-dragging { opacity: 0.45; }
.sg-task-chips { scrollbar-width: thin; }
.sg-task-chips .btn { white-space: nowrap; }
@media (max-width: 767.98px) { .sg-task-chips .btn { min-height: 38px; } }
/* Slice 3 — rows-per-page footer: stack cleanly on phones. */
@media (max-width: 575.98px) { .sg-pagination-bar { flex-direction: column; align-items: stretch !important; } .sg-pagination-bar nav { overflow-x: auto; } }

/* Slice 4 — searchable Country/State/City picker + lead form sections */
.sg-geo { position: relative; }
.sg-geo-list {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 1065;
    max-height: 220px; overflow-y: auto; margin: 2px 0 0; padding: 4px;
    list-style: none; background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.sg-geo-option, .sg-geo-empty { padding: 7px 10px; font-size: .85rem; border-radius: 6px; }
.sg-geo-option { cursor: pointer; min-height: 36px; display: flex; align-items: center; }
.sg-geo-option:hover, .sg-geo-option.active { background: rgba(var(--bs-primary-rgb, 13, 110, 253), .1); }
.sg-geo-custom { font-style: italic; }
.sg-geo-empty { color: var(--bs-secondary-color, #6c757d); }
.sg-geo-input:disabled { background-color: var(--bs-secondary-bg, #e9ecef); cursor: not-allowed; }
.sg-form-section-title {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--bs-secondary-color, #6c757d); margin: 6px 0 2px; padding-bottom: 4px;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
@media (max-width: 575.98px) {
    .sg-geo-option { min-height: 44px; }
}

/* ══ Slice 6 — header navigation (desktop ≥ 992px) ═══════════════════════
   The left sidebar becomes a top navigation bar. It is the SAME markup,
   permission gates and JS as before (so role visibility, pins, active
   states and the location switcher are untouched) — only its presentation
   changes. Each module's panel is the existing position:fixed "flyout",
   now opened BELOW its header item (see positionFlyout() in app-global.js),
   so it can never be clipped by a scrolling/overflow container.
   Below 992px nothing here applies: the bar stays the slide-in mobile drawer. */
:root { --sg-nav-h: 0px; }

@media (min-width: 992px) {
    :root { --sg-nav-h: 64px; }

    .sg-sidebar {
        width: auto;
        right: 0;
        bottom: auto;
        height: var(--sg-nav-h);
        flex-direction: row;
        align-items: center;
        gap: 0.35rem;
        padding: 0 1rem;
        box-shadow: 0 2px 14px rgba(8, 11, 22, 0.28);
    }
    .sg-main { margin-left: 0; padding-top: var(--sg-nav-h); }
    .sg-topbar { top: var(--sg-nav-h); }
    #branchDepartmentsPanel, #departmentTeamPanel, #myDepartmentsPanel { scroll-margin-top: calc(84px + var(--sg-nav-h)); }

    .sg-sidebar-brand { padding: 0 0.6rem 0 0; flex-shrink: 0; }
    .sg-sidebar-brand .badge-mark { width: 38px; height: 38px; }
    .sg-sidebar-brand-name { font-size: 1rem; white-space: nowrap; }
    .sg-sidebar-brand-tagline { display: none; }
    .sg-sidebar-footer { display: none; }

    .sg-location-switcher { order: 3; margin-left: auto; padding: 0 !important; width: 170px; flex-shrink: 0; }
    .sg-location-switcher label { display: none; }

    .sg-sidebar-nav {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.1rem;
        overflow: visible;
        padding: 0;
    }
    .sg-sidebar-nav > a,
    .sg-sidebar-group-toggle {
        width: auto;
        padding: 0.5rem 0.7rem;
        border-radius: 0.55rem;
        white-space: nowrap;
        font-size: 0.85rem;
        gap: 0.4rem;
        position: relative;
    }
    .sg-sidebar-group { position: static; }
    .sg-sidebar-group-toggle-label { gap: 0.45rem; }
    .sg-sidebar-group-toggle .sg-group-chevron { margin-left: 0.15rem; transform: rotate(90deg); }
    .sg-sidebar-group-toggle[aria-expanded="true"] .sg-group-chevron { transform: rotate(-90deg); }
    .sg-sidebar-dashboard-link .sg-nav-pin-toggle { display: none; }

    /* "You are here": the module holding the current page (or the Dashboard
       link itself) gets an accent underline, whether or not it is open. */
    .sg-sidebar-nav > a.active,
    .sg-sidebar-group:has(.sg-sidebar-group-body a.active) > .sg-sidebar-group-toggle {
        color: var(--sg-sidebar-text-active);
        background: var(--sg-sidebar-bg-active);
        box-shadow: inset 0 -2px 0 var(--sg-accent);
    }
    .sg-sidebar-nav > a:focus-visible,
    .sg-sidebar-group-toggle:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: -2px; }

    /* Panels drop down from the item instead of sliding out from a sidebar. */
    .sg-sidebar-group-body.collapse { transform: translateY(-6px); max-width: 340px; }
    .sg-sidebar-group-body.collapse.show { transform: translateY(0); }
}

/* Mid-width desktops: icon-only items (label kept for screen readers and as
   the hover title) so every module still fits in the bar. */
@media (min-width: 992px) and (max-width: 1799.98px) {
    .sg-nav-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    .sg-sidebar-nav > a, .sg-sidebar-group-toggle { padding: 0.5rem 0.65rem; }
    .sg-sidebar-group-toggle-label i, .sg-sidebar-dashboard-link > i { font-size: 1.1rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sg-sidebar-brand-text { display: none; }
    .sg-location-switcher { width: 130px; }
}

/* Phones & tablets: the drawer is full-width on phones, with 44px targets. */
@media (max-width: 575.98px) {
    .sg-sidebar { width: 100%; }
}
@media (max-width: 991.98px) {
    .sg-sidebar-nav > a,
    .sg-sidebar-group-toggle { min-height: 44px; }
    .sg-sidebar-group-body a { min-height: 44px; }
    .sg-sidebar-nav { overflow-y: auto; flex: 1 1 auto; }
    .sg-sidebar-drawer-close { display: inline-flex !important; }
}
.sg-sidebar-drawer-close {
    display: none; position: absolute; top: 0.7rem; right: 0.6rem; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: none; border: 0; color: #fff; font-size: 1.4rem;
}
@media (min-width: 992px) { .sg-sidebar-drawer-close { display: none !important; } }
.sg-topbar-logo { flex-shrink: 0; text-decoration: none; }
.sg-topbar-logo .badge-mark {
    width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--sg-accent), #7c3aed); color: #fff; font-weight: 900;
}

/* ══ Slice 7 — design tokens + shared state components ═══════════════════
   Semantic names for the palette the app already uses, so new UI can say
   --primary / --danger instead of a hex. Each is an ALIAS of an existing
   --sg-* value: no colour changes anywhere. Inter is already the global font. */
:root {
    --primary: var(--sg-accent);
    --secondary: var(--sg-gray);
    --success: var(--sg-green);
    --warning: var(--sg-orange);
    --danger: var(--sg-red);
    --info: var(--sg-teal);
    --background: var(--sg-bg);
    --surface: #ffffff;
    --text: #1c2333;
    --text-muted: #6b7280;
    --border: #eceff5;
    --radius: 0.6rem;
}
[data-theme="dark"] {
    --surface: #171d33;
    --text: #e4e7f2;
    --text-muted: #8b93b8;
    --border: #262f4d;
}

/* Loading skeleton — apply to a block; respects reduced-motion. */
.sg-skeleton {
    display: block; min-height: 1em; border-radius: 6px;
    background: linear-gradient(90deg, rgba(128,134,160,.12) 25%, rgba(128,134,160,.22) 37%, rgba(128,134,160,.12) 63%);
    background-size: 400% 100%; animation: sg-skeleton 1.4s ease infinite;
}
@keyframes sg-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sg-skeleton { animation: none; } }

/* Empty / error states. */
.sg-empty-state, .sg-error-state {
    text-align: center; padding: 2rem 1rem; color: var(--text-muted);
    border: 1px dashed var(--border); border-radius: var(--radius);
}
.sg-empty-state i, .sg-error-state i { display: block; font-size: 1.8rem; margin-bottom: .4rem; }
.sg-error-state { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

/* ══ Premium page headers + jewellery pricing cards ══════════════════════
   One header pattern for CRM pages and the quotation workflow: breadcrumb,
   strong title, concise subtitle, aligned actions. Navy/indigo accents only
   (existing --sg-* palette); text stays AA-contrast and focus rings stay visible. */
.sg-page-header {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.25rem; border-radius: var(--radius, .6rem);
    background: linear-gradient(120deg, #131a2c 0%, #1f2a52 60%, #2f3f86 120%);
    color: #fff; box-shadow: var(--sg-card-shadow);
}
.sg-page-header-title { font-size: 1.35rem; font-weight: 700; margin: .15rem 0 .2rem; display: flex; align-items: center; gap: .55rem; color: #fff; }
.sg-page-header-title i { color: #9fb2ff; }
.sg-page-header-sub { margin: 0; max-width: 62ch; font-size: .85rem; color: #c4cbe6; }
.sg-page-header-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sg-page-header .btn-outline-light { border-color: rgba(255,255,255,.45); }
.sg-breadcrumb { font-size: .74rem; letter-spacing: .02em; color: #aab4d8; display: flex; align-items: center; gap: .35rem; }
.sg-breadcrumb a { color: #d6dcf5; text-decoration: none; }
.sg-breadcrumb a:hover, .sg-breadcrumb a:focus-visible { text-decoration: underline; }
.sg-breadcrumb i { font-size: .6rem; opacity: .7; }
.sg-page-header :focus-visible { outline: 2px solid #9fb2ff; outline-offset: 2px; }

.sg-section-heading {
    font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--text-muted, #6b7280); margin: .25rem 0 .5rem; padding-bottom: .3rem;
    border-bottom: 1px solid var(--border, #eceff5);
}
.sg-modal-header-premium { background: var(--surface, #fff); border-bottom: 3px solid var(--sg-accent); }

.sg-rate-card {
    border: 1px solid var(--border, #eceff5); border-top: 4px solid var(--cat, var(--sg-accent));
    border-radius: var(--radius, .6rem); background: var(--surface, #fff); overflow: hidden; height: 100%;
}
.sg-rate-card--cz_casting_gross { --cat: #4f46e5; }
.sg-rate-card--cz_casting_less { --cat: #2563eb; }
.sg-rate-card--cz_plain { --cat: #0f766e; }
.sg-rate-card-title { padding: .6rem .85rem .35rem; font-weight: 700; font-size: .95rem; color: var(--text, #1c2333); }
.sg-rate-table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #6b7280); }
.sg-rate-table td, .sg-rate-table th { padding: .5rem .85rem; }
.sg-rate-row { cursor: pointer; transition: background .12s ease; }
.sg-rate-row:hover { background: rgba(79, 109, 245, .08); }
.sg-rate-row:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: -2px; }
.sg-rate-row.selected { background: rgba(79, 109, 245, .16); box-shadow: inset 3px 0 0 var(--cat, var(--sg-accent)); }
.sg-rate-row.is-disabled { opacity: .45; cursor: not-allowed; }
.sg-rate-picker { border: 1px dashed var(--border, #d6dbe8); border-radius: var(--radius, .6rem); padding: .75rem .9rem; background: rgba(79, 109, 245, .04); }
.sg-quote-lines td { vertical-align: middle; }
@media (max-width: 575.98px) {
    .sg-page-header { padding: .9rem; }
    .sg-page-header-actions { width: 100%; }
    .sg-page-header-actions .btn { flex: 1 1 auto; min-height: 44px; }
    .sg-rate-row { min-height: 44px; }
}
[data-theme="dark"] .sg-rate-card, [data-theme="dark"] .sg-modal-header-premium { background: #171d33; border-color: #262f4d; }

/* Lead details hero + page-level breadcrumb (light pages). */
.sg-breadcrumb--page { color: var(--text-muted, #6b7280); }
.sg-breadcrumb--page a { color: var(--sg-accent); }
.sg-breadcrumb--page span { color: var(--text, #1c2333); font-weight: 600; }
.sg-lead-hero { border-left: 4px solid var(--sg-accent); background: linear-gradient(90deg, rgba(79,109,245,.07), transparent 55%), var(--surface, #fff); }
.sg-lead-hero-title { font-size: 1.5rem; font-weight: 700; color: var(--text, #1c2333); }
.sg-lead-hero .btn { min-height: 36px; }
@media (max-width: 575.98px) { .sg-lead-hero .btn { flex: 1 1 auto; min-height: 44px; } .sg-lead-hero-title { font-size: 1.25rem; } }
@media (max-width: 575.98px) { .sg-rate-table td { padding-top: .8rem; padding-bottom: .8rem; } }

/* Taller, better-balanced header bar (64px): roomier items, consistent icon/label alignment. */
@media (min-width: 992px) {
    .sg-sidebar-nav > a, .sg-sidebar-group-toggle { padding: 0.65rem 0.8rem; font-size: 0.88rem; }
    .sg-sidebar-nav > a > i, .sg-sidebar-group-toggle-label > i { font-size: 1.05rem; line-height: 1; }
    .sg-sidebar-group-toggle-label, .sg-sidebar-nav > a { align-items: center; }
    .sg-topbar { padding-top: 0.75rem; padding-bottom: 0.75rem; }
}