/* =========================================================================
   MMConnect Africa CRM — design system (Material Design 3)
   Loaded LAST by every layout, so it restyles the shared components on
   every page: Angular Material's look — Roboto Flex type scale, tonal colour
   roles generated from the brand coral, elevated 12px cards, pill buttons,
   a navigation drawer with an active-indicator pill, mat-table rows.
   ========================================================================= */

:root {
    /* ── Colour roles (M3, from seed #F06355 — the logo's coral) ───────── */
    --md-primary:               #B3382C;
    --md-on-primary:            #FFFFFF;
    --md-primary-container:     #FFDAD5;
    --md-on-primary-container:  #410001;
    --md-secondary-container:   #FFDAD5;
    --md-on-secondary-container:#3B0906;
    --md-tertiary:              #7A5B00;
    --md-tertiary-container:    #FFDFA0;
    --md-success:               #1E6B3A;
    --md-success-container:     #B8F1C6;
    --md-info:                  #1A5B8C;
    --md-info-container:        #D1E4FF;
    --md-error:                 #BA1A1A;
    --md-error-container:       #FFDAD6;
    --md-surface:               #FFFFFF;
    --md-background:            #F8F5F4;
    --md-surface-container-low: #FBF7F6;
    --md-surface-container:     #F4EEEC;
    --md-on-surface:            #201A19;
    --md-on-surface-variant:    #534341;
    --md-outline:               #857371;
    --md-outline-variant:       #E4D8D5;

    /* M3 elevation (Angular Material's mat-elevation levels 1–3) */
    --md-elev-1: 0 1px 2px rgba(0, 0, 0, .10), 0 1px 3px 1px rgba(0, 0, 0, .06);
    --md-elev-2: 0 1px 2px rgba(0, 0, 0, .12), 0 2px 6px 2px rgba(0, 0, 0, .07);
    --md-elev-3: 0 4px 8px 3px rgba(0, 0, 0, .08), 0 1px 3px rgba(0, 0, 0, .12);

    --md-font: 'Roboto Flex', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* ── Map the app's existing tokens onto the M3 roles, so every page
          (including inline var(--…) styles) picks the system up ───────── */
    --primary:        var(--md-primary);
    --primary-hover:  #98291F;
    --primary-light:  var(--md-primary-container);
    --primary-border: #EDB4AB;
    --primary-dark:   #7A1A12;
    --font:           var(--md-font);
    --font-display:   var(--md-font);
    --bg-body:        var(--md-background);
    --bg-card:        var(--md-surface);
    --border:         var(--md-outline-variant);
    --text-1:         var(--md-on-surface);
    --text-2:         #3A302E;
    --text-3:         var(--md-on-surface-variant);
    --text-4:         var(--md-outline);
    --hover-bg:       #F5EEEC;
    --topbar-bg:      rgba(248, 245, 244, .92);
    --brand-tint:     var(--md-surface-container-low);
    --sb-bg:          var(--md-surface);
    --sb-border:      var(--md-outline-variant);
    --sb-hover:       #F5EEEC;
    --sb-text:        var(--md-on-surface-variant);
    --sb-text-hi:     var(--md-on-surface);
    --sb-section:     var(--md-on-surface-variant);
    --shadow-xs: var(--md-elev-1);
    --shadow-sm: var(--md-elev-1);
    --shadow-md: var(--md-elev-2);
    --shadow-lg: var(--md-elev-3);
    --shadow-xl: var(--md-elev-3);

    --bs-primary: var(--md-primary);
    --bs-primary-rgb: 179, 56, 44;
    --bs-link-color: var(--md-primary);
    --bs-link-color-rgb: 179, 56, 44;
    --bs-link-hover-color: #98291F;
    --bs-link-hover-color-rgb: 152, 41, 31;
    --bs-body-font-family: var(--md-font);
    --bs-font-sans-serif: var(--md-font);
    --bs-border-radius: 8px;
}

/* ── Type scale (M3) ───────────────────────────────────────────────────── */
body {
    font-family: var(--md-font);
    font-size: 14px;
    letter-spacing: .01em;
    background: var(--md-background);
    color: var(--md-on-surface);
    text-rendering: optimizeLegibility;
}
button, input, select, textarea, .btn, .form-control, .form-select, .badge, .table, .dropdown-menu { font-family: var(--md-font); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.modal-title, .card-title, .card-header-title, .card-header strong, .stat-value, .mini-value, .sb-title-name {
    font-family: var(--md-font);
    letter-spacing: 0;
}
/* Headline/title weights are M3's 400–500 — the heavy 800/900 some pages set inline read as "template". */
.page-content :is(h1, h2, .h1, .h2) { font-weight: 500 !important; letter-spacing: 0 !important; }
.page-content :is(h3, h4, h5, h6, .h3, .h4, .h5, .h6) { font-weight: 500; }
.page-content h1, .page-content .h3 { font-size: 24px; line-height: 32px; }       /* headline-small */
.page-header h1 { font-size: 24px; font-weight: 500; }
.page-header p  { font-size: 14px; color: var(--md-on-surface-variant); }
.stat-value, .mini-value, .table td, .badge, #callTimer { font-variant-numeric: tabular-nums; }
[style*="font-family:monospace"], [style*="font-family: monospace"] {
    font-family: var(--md-font) !important; font-variant-numeric: tabular-nums; font-weight: 500;
}

/* ── Top app bar ───────────────────────────────────────────────────────── */
#topbar {
    background: var(--topbar-bg);
    border-bottom: 1px solid transparent;
    box-shadow: none;
    transition: box-shadow .2s, border-color .2s;
}
body.is-scrolled #topbar { box-shadow: var(--md-elev-2); }
.topbar-title { font-size: 22px; font-weight: 400; letter-spacing: 0; color: var(--md-on-surface); }
.icon-btn {
    width: 40px; height: 40px; border-radius: 50%;
    border: none !important; background: transparent; color: var(--md-on-surface-variant);
}
.icon-btn:hover { background: rgba(32, 26, 25, .08); color: var(--md-on-surface); box-shadow: none !important; }
#topbarQuickSearch {
    height: 40px; border-radius: 20px !important; border: none !important;
    background: var(--md-surface-container) !important; padding-left: 36px !important;
}
#topbarQuickSearch:focus { background: var(--md-surface) !important; box-shadow: var(--md-elev-2) !important; }

/* ── Navigation drawer ─────────────────────────────────────────────────── */
#sidebar { box-shadow: none; border-right: 1px solid var(--md-outline-variant); }
.sidebar-brand { border-bottom: none; }
.sb-title-name { font-size: 16px; font-weight: 600; color: var(--md-on-surface); }
.sb-title-sub  { font-size: 10px; font-weight: 500; letter-spacing: .08em; white-space: nowrap; color: var(--md-on-surface-variant); }
.nav-section {
    font-size: 13px !important; font-weight: 500 !important; text-transform: none !important;
    letter-spacing: .01em !important; color: var(--md-on-surface-variant) !important;
    padding: 18px 28px 6px !important;
}
.nav-wrap { padding: 0 12px; }
.nav-link-item {
    height: 48px; border-radius: 24px !important; padding: 0 16px !important;
    font-size: 14px !important; font-weight: 500 !important; color: var(--md-on-surface-variant) !important;
    gap: 12px; transform: none !important;
}
.nav-link-item:hover { background: rgba(32, 26, 25, .06) !important; color: var(--md-on-surface) !important; }
.nav-icon {
    width: 24px !important; height: 24px !important; border-radius: 0 !important;
    background: transparent !important; font-size: 19px !important; color: inherit !important;
}
.nav-link-item.active {
    background: var(--md-secondary-container) !important;
    color: var(--md-on-secondary-container) !important;
    font-weight: 600 !important; box-shadow: none !important;
}
.nav-link-item.active::before { display: none !important; }
.nav-link-item.active .nav-icon { background: transparent !important; color: var(--md-on-secondary-container) !important; }
.nav-chip { border-radius: 10px; font-size: 11px; font-weight: 600; }
.nav-link-item.nav-logout { color: var(--md-error) !important; }
.nav-link-item.nav-logout .nav-icon { background: transparent !important; color: var(--md-error) !important; }
.nav-link-item.nav-logout:hover { background: rgba(186, 26, 26, .08) !important; }
.sidebar-user-btn { border-radius: 16px; border-color: var(--md-outline-variant); }

/* ── Content area ──────────────────────────────────────────────────────── */
.page-content { padding: 24px 28px; }

/* ── Cards (mat-card, elevated) ────────────────────────────────────────── */
.card {
    background: var(--md-surface);
    border: none;
    border-radius: 12px;
    box-shadow: var(--md-elev-1);
    transition: box-shadow .2s;
}
.card > .card-header {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
    min-height: 56px; padding: 12px 16px;
    background: transparent;
    border-bottom: 1px solid var(--md-outline-variant);
    border-radius: 12px 12px 0 0;
}
.card > .card-header::before { content: none; }
.card > .card-header :is(h1, h2, h3, h4, h5, h6, strong, .card-header-title, .card-title) {
    font-size: 16px; font-weight: 500; color: var(--md-on-surface); margin: 0;
    display: inline-flex; align-items: center; gap: 10px;
}
.card > .card-header :is(h1, h2, h3, h4, h5, h6, strong, .card-header-title, .card-title) > .bi:first-child { color: var(--md-primary); font-size: 18px; }
.card > .card-body   { padding: 16px; }
.card > .card-footer { padding: 12px 16px; background: transparent; border-top: 1px solid var(--md-outline-variant); border-radius: 0 0 12px 12px; }
.card :is(.fs-1, .fs-2, .fs-3, .fs-4).fw-bold { font-weight: 500 !important; }

/* Side-by-side cards in a row line up to equal height */
.row > [class*="col"]:has(> .card:only-child) { display: flex; flex-direction: column; }
.row > [class*="col"] > .card:only-child      { flex: 1 1 auto; min-width: 0; }
@media (min-width: 1200px) { .row-cols-xl-7 > * { flex: 0 0 auto; width: calc(100% / 7); } }
@media (max-width: 991.98px) { .card:has(> table.table), .card-body:has(> table.table) { overflow-x: auto; } }

/* KPI cards — M3 filled tonal cards instead of loud gradients */
.stat-card {
    border-radius: 16px; padding: 20px; border: none; box-shadow: none;
    color: var(--md-on-primary-container);
    transition: box-shadow .2s;
}
.stat-card::before, .stat-card::after { content: none !important; }
.stat-card:hover { box-shadow: var(--md-elev-1); }
.stat-card .stat-value { font-size: 32px; font-weight: 500; line-height: 40px; letter-spacing: 0; }
.stat-card .stat-label { font-size: 14px; font-weight: 500; opacity: .9; margin-top: 2px; }
.stat-card .stat-change { font-size: 12px; opacity: .8; }
.stat-card .stat-icon {
    opacity: 1; font-size: 20px; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .55);
}
.s-indigo, .s-rose, .s-orange { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.s-emerald, .s-teal           { background: var(--md-success-container); color: #002111; }
.s-amber                      { background: var(--md-tertiary-container); color: #261A00; }
.s-sky, .s-violet             { background: var(--md-info-container); color: #001D36; }
.stat-card * { color: inherit; }

/* Mini stats — outlined cards */
.mini-stat {
    background: var(--md-surface); border: 1px solid var(--md-outline-variant);
    border-radius: 12px; box-shadow: none; padding: 16px;
}
.mini-stat:hover { box-shadow: var(--md-elev-1); }
.mini-icon  { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.mini-value { font-size: 22px; font-weight: 500; line-height: 28px; }
.mini-label { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--md-on-surface-variant); }

/* ── Tables (mat-table) ────────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th, .table th {
    height: 56px; padding: 0 16px !important;
    font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: .01em !important;
    color: var(--md-on-surface-variant) !important; background: transparent !important;
    border-bottom: 1px solid var(--md-outline-variant) !important; vertical-align: middle;
}
.table td {
    height: 52px; padding: 8px 16px !important; font-size: 14px !important; font-weight: 400 !important;
    border-bottom: 1px solid var(--md-outline-variant) !important;
}
.table-hover tbody tr:hover td, .table tbody tr:hover td { background: rgba(32, 26, 25, .03); }

/* ── Buttons (M3: filled / outlined / text, pill shape) ────────────────── */
.btn {
    border-radius: 20px; font-weight: 500; font-size: 14px; letter-spacing: .01em;
    padding: 8px 20px; min-height: 40px; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transform: none !important;
}
.btn-sm { min-height: 32px; padding: 4px 14px; font-size: 13px; border-radius: 16px; }
.btn-primary {
    background: var(--md-primary) !important; border: 1px solid var(--md-primary) !important;
    color: var(--md-on-primary) !important; box-shadow: none !important;
}
.btn-primary:hover, .btn-primary:focus { background: #A3302A !important; box-shadow: var(--md-elev-1) !important; filter: none; }
.btn-outline-secondary, .btn-outline-primary, .btn-light {
    background: transparent !important; border: 1px solid var(--md-outline) !important; color: var(--md-primary) !important;
}
.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-light:hover { background: rgba(179, 56, 44, .08) !important; }
.btn-outline-danger  { border-color: var(--md-outline) !important; color: var(--md-error) !important; background: transparent !important; }
.btn-outline-danger:hover  { background: rgba(186, 26, 26, .08) !important; }
.btn-outline-success { border-color: var(--md-outline) !important; color: var(--md-success) !important; background: transparent !important; }
.btn-outline-success:hover { background: rgba(30, 107, 58, .08) !important; }
.btn-success { background: var(--md-success) !important; border-color: var(--md-success) !important; color: #fff !important; }
.btn-danger  { background: var(--md-error) !important; border-color: var(--md-error) !important; color: #fff !important; }
.btn-call { border-radius: 16px; font-weight: 500; }

/* ── Text fields (outlined) ────────────────────────────────────────────── */
.form-control, .form-select {
    min-height: 44px; border-radius: 8px; border: 1px solid var(--md-outline) !important;
    background: var(--md-surface); color: var(--md-on-surface); font-size: 14px; padding: 10px 14px;
}
.form-control-sm, .form-select-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.form-control:hover, .form-select:hover { border-color: var(--md-on-surface) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--md-primary) !important; box-shadow: inset 0 0 0 1px var(--md-primary) !important;
}
.form-label { font-size: 13px; font-weight: 500; color: var(--md-on-surface-variant); }
.input-group-text { border-radius: 8px; border-color: var(--md-outline) !important; background: var(--md-surface-container-low); }
.form-check-input:checked { background-color: var(--md-primary); border-color: var(--md-primary); }
.form-check-input:focus { box-shadow: 0 0 0 4px rgba(179, 56, 44, .15); border-color: var(--md-primary); }

/* ── Chips / badges ────────────────────────────────────────────────────── */
.badge { border-radius: 8px; font-weight: 500; font-size: 12px; padding: 4px 8px; letter-spacing: .02em; }

/* ── Alerts → M3 banners ───────────────────────────────────────────────── */
.alert { border: none !important; border-radius: 12px; font-size: 14px; padding: 12px 16px; }
.alert-success { background: #E3F6E8; color: #0B3A1B; }
.alert-danger  { background: var(--md-error-container); color: #410002; }
.alert-warning { background: #FFF1D6; color: #3F2E00; }
.alert-info, .alert-primary { background: #E3EEFB; color: #0B2E4F; }

/* ── Menus, dialogs ────────────────────────────────────────────────────── */
.dropdown-menu { border: none; border-radius: 8px; box-shadow: var(--md-elev-2); padding: 8px 0; }
.dropdown-item { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 14px; border-radius: 0; }
.dropdown-item:hover { background: rgba(32, 26, 25, .06); }
.dropdown-item.active, .dropdown-item:active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.modal-content { border: none; border-radius: 28px; box-shadow: var(--md-elev-3); background: var(--md-surface-container-low); }
.modal-header { border-bottom: none; padding: 24px 24px 8px; }
.modal-title  { font-size: 24px; font-weight: 400; }
.modal-body   { padding: 8px 24px 16px; }
.modal-footer { border-top: none; padding: 8px 24px 20px; }

/* ── Paginator (mat-paginator) — see resources/views/vendor/pagination ── */
.md-paginator {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 4px 16px;
    min-height: 56px; padding: 4px 8px; font-size: 13px; color: var(--md-on-surface-variant);
}
.md-paginator .md-range { margin-right: 8px; white-space: nowrap; }
.md-paginator .md-pages { display: flex; align-items: center; gap: 2px; }
.md-paginator .md-page, .md-paginator .md-nav {
    min-width: 36px; height: 36px; padding: 0 6px; border-radius: 18px; border: none; background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--md-on-surface-variant); text-decoration: none; font-weight: 500;
}
.md-paginator a.md-page:hover, .md-paginator a.md-nav:hover { background: rgba(32, 26, 25, .08); color: var(--md-on-surface); }
.md-paginator .md-page.is-current { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.md-paginator .is-disabled { opacity: .38; pointer-events: none; }

/* ── Route-change progress bar (mat-progress-bar, indeterminate) ───────── */
#md-progress {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 20000; overflow: hidden;
    background: var(--md-primary-container); opacity: 0; transition: opacity .15s; pointer-events: none;
}
#md-progress.is-active { opacity: 1; }
#md-progress::before, #md-progress::after {
    content: ''; position: absolute; top: 0; bottom: 0; background: var(--md-primary);
}
#md-progress.is-active::before { animation: md-bar1 2.1s cubic-bezier(.65, .815, .735, .395) infinite; }
#md-progress.is-active::after  { animation: md-bar2 2.1s cubic-bezier(.165, .84, .44, 1) 1.15s infinite; }
@keyframes md-bar1 { 0% { left: -35%; right: 100%; } 60%, 100% { left: 100%; right: -90%; } }
@keyframes md-bar2 { 0% { left: -200%; right: 100%; } 60%, 100% { left: 107%; right: -8%; } }

/* ── Motion ────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .card, .stat-card, .mini-stat, #topbar { transition: none; }
    #md-progress::before, #md-progress::after { animation: none !important; }
}

/* ── Navigation drawer: brand block, collapsible icon rail ─────────────── */
:root { --sidebar-rail: 80px; }
#sidebar, #topbar, #main-content { transition: width .22s cubic-bezier(.2,0,0,1), left .22s cubic-bezier(.2,0,0,1), margin-left .22s cubic-bezier(.2,0,0,1), transform .28s cubic-bezier(.4,0,.2,1); }
#sidebar { background: var(--md-surface-container-low); }
.sidebar-brand { gap: 12px; padding: 0 18px; min-width: 0; }
.sb-logo img { height: 32px; }
.sidebar-brand { padding: 0 14px 0 18px; gap: 10px; }
.sb-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.sb-title-name {
    font-size: 16px !important; font-weight: 700 !important; letter-spacing: -.015em !important;
    color: var(--md-on-surface) !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.sb-title-sub {
    margin-top: 3px; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .06em !important;
    color: var(--md-primary) !important; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-section { padding: 16px 28px 4px !important; font-size: 12px !important; letter-spacing: .04em !important; text-transform: uppercase !important; opacity: .8; white-space: nowrap; }
.nav-wrap { padding: 1px 12px; }
.nav-link-item { height: 44px; white-space: nowrap; overflow: hidden; }
.nav-link-item > span:not(.nav-chip) { overflow: hidden; text-overflow: ellipsis; }
.nav-link-item.active { background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; }
.nav-link-item.active .nav-icon { color: var(--md-primary) !important; }
.sidebar-footer { border-top: 1px solid var(--md-outline-variant); background: var(--md-surface-container-low); }
.sidebar-user-btn { background: var(--md-surface); }
#sidebarToggle .bi { transition: transform .22s; }

@media (min-width: 992px) {
    body.sb-collapsed { --sidebar-width: var(--sidebar-rail); }
    body.sb-collapsed #sidebarToggle .bi { transform: rotate(90deg); }
    body.sb-collapsed .sidebar-brand { justify-content: center; padding: 0; }
    body.sb-collapsed .sb-title,
    body.sb-collapsed .nav-link-item > span,
    body.sb-collapsed .sidebar-user-btn > div:not(:first-child),
    body.sb-collapsed .sidebar-user-btn > .bi { display: none !important; }
    body.sb-collapsed .nav-section {
        height: 1px; padding: 0 !important; margin: 10px 22px; overflow: hidden;
        font-size: 0 !important; background: var(--md-outline-variant);
    }
    body.sb-collapsed .nav-wrap { padding: 1px 12px; }
    body.sb-collapsed .nav-link-item {
        justify-content: center; padding: 0 !important; gap: 0; height: 44px; border-radius: 22px !important;
    }
    body.sb-collapsed .nav-link-item .nav-icon { font-size: 20px !important; }
    body.sb-collapsed .sidebar-footer { padding: 12px 10px; }
    body.sb-collapsed .sidebar-user-btn { justify-content: center; padding: 8px; border: none; background: transparent; }
    body.sb-collapsed .sidebar-scroll { scrollbar-width: none; }
}

/* ── Sign-in pages (auth layout) in the same system ────────────────────── */
.auth-form-panel { background: var(--md-background); }
.auth-form-panel::before { content: none !important; }
.auth-form-wrapper {
    border: none !important; border-radius: 28px !important;
    box-shadow: var(--md-elev-1) !important; padding: 40px 36px 28px !important;
}
.form-eyebrow {
    background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important;
    border-radius: 8px !important; font-weight: 500 !important; letter-spacing: .04em !important;
}
.form-title { font-size: 28px !important; font-weight: 400 !important; letter-spacing: 0 !important; line-height: 36px !important; }
.form-sub   { color: var(--md-on-surface-variant) !important; }
.btn-auth {
    height: 48px; border-radius: 24px !important; background: var(--md-primary) !important;
    font-weight: 500 !important; font-size: 15px !important; letter-spacing: .01em;
    box-shadow: none !important; transform: none !important;
}
.btn-auth:hover { background: #A3302A !important; box-shadow: var(--md-elev-1) !important; }
.btn-auth-outline {
    height: 48px; border-radius: 24px !important; border: 1px solid var(--md-outline) !important;
    color: var(--md-primary) !important; font-weight: 500 !important; background: transparent !important;
}
.btn-auth-outline:hover { background: rgba(179, 56, 44, .08) !important; }
.brand-headline { font-weight: 600 !important; letter-spacing: -.01em !important; }
.auth-divider::before { background: var(--md-outline-variant) !important; }
.auth-divider span { background: var(--md-surface) !important; }
/* The rail is narrower than the account menu — let that menu escape it. */
@media (min-width: 992px) { body.sb-collapsed #sidebar { overflow: visible; } }

/* ── Buttons: complete set of M3 variants ──────────────────────────────── */
.btn { transition: background-color .15s, box-shadow .15s, border-color .15s, color .15s; line-height: 1.2; }
.btn > .bi:first-child:not(:only-child) { margin-right: 0 !important; margin-left: -2px; font-size: 1.05em; }  /* the flex gap spaces icons */
.btn:focus-visible { outline: 2px solid var(--md-primary) !important; outline-offset: 2px; box-shadow: none !important; }
.btn:disabled, .btn.disabled { opacity: .45; box-shadow: none !important; }
.btn-success:hover, .btn-success:focus { background: #175A30 !important; box-shadow: var(--md-elev-1) !important; }
.btn-danger:hover,  .btn-danger:focus  { background: #9C1515 !important; box-shadow: var(--md-elev-1) !important; }
.btn-warning { background: var(--md-tertiary-container) !important; border: 1px solid transparent !important; color: #261A00 !important; }
.btn-warning:hover { background: #F7D27E !important; box-shadow: var(--md-elev-1) !important; }
.btn-outline-warning { background: transparent !important; border: 1px solid var(--md-outline) !important; color: var(--md-tertiary) !important; }
.btn-outline-warning:hover { background: rgba(122, 91, 0, .08) !important; }
.btn-secondary { background: var(--md-surface-container) !important; border: 1px solid transparent !important; color: var(--md-on-surface) !important; }
.btn-link { color: var(--md-primary) !important; text-decoration: none; background: transparent !important; border: none !important; }
.btn-link:hover { background: rgba(179, 56, 44, .08) !important; }
/* Tonal (filled-tonal) — secondary actions that still need emphasis */
.btn-tonal         { background: var(--md-primary-container) !important; color: var(--md-on-primary-container) !important; border: 1px solid transparent !important; }
.btn-tonal:hover   { background: #FFC9C2 !important; box-shadow: var(--md-elev-1) !important; }
.btn-tonal-success { background: var(--md-success-container) !important; color: #002111 !important; border: 1px solid transparent !important; }
.btn-tonal-success:hover { background: #9EE5B0 !important; box-shadow: var(--md-elev-1) !important; }
.btn-tonal-warning { background: var(--md-tertiary-container) !important; color: #261A00 !important; border: 1px solid transparent !important; }
.btn-tonal-warning:hover { background: #F7D27E !important; }
.btn-tonal-neutral { background: var(--md-surface-container) !important; color: var(--md-on-surface) !important; border: 1px solid transparent !important; }
.btn-tonal-neutral:hover { background: #ECE3E0 !important; }
/* Text / icon buttons */
.btn-text-danger { background: transparent !important; border: none !important; color: var(--md-on-surface-variant) !important; }
.btn-text-danger:hover { background: rgba(186, 26, 26, .08) !important; color: var(--md-error) !important; }
.btn-icon { width: 40px; min-width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important; }
.btn-icon.btn-sm { width: 32px; min-width: 32px; height: 32px; }
/* On a coloured surface (hero banners, coloured cards) */
.btn-on-color { background: rgba(255, 255, 255, .18) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .45) !important; }
.btn-on-color:hover { background: rgba(255, 255, 255, .28) !important; }
.btn-on-color-filled { background: #fff !important; color: var(--md-primary) !important; border: 1px solid #fff !important; }
.btn-on-color-filled:hover { background: #FFF4F2 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, .18) !important; }

/* Segmented button (period pickers etc.) */
.md-segmented { display: inline-flex; border: 1px solid var(--md-outline); border-radius: 20px; overflow: hidden; }
.md-segmented > a, .md-segmented > button {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px;
    font-size: 13px; font-weight: 500; color: var(--md-on-surface); text-decoration: none;
    background: transparent; border: none; border-left: 1px solid var(--md-outline);
}
.md-segmented > :first-child { border-left: none; }
.md-segmented > :hover { background: rgba(32, 26, 25, .06); }
.md-segmented > .is-selected { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

/* Top-bar account chip */
.tb-user-btn {
    display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 4px;
    border-radius: 20px; border: 1px solid var(--md-outline-variant); background: var(--md-surface);
    font-family: var(--md-font); transition: background .15s, box-shadow .15s;
}
.tb-user-btn:hover { background: var(--md-surface-container-low); box-shadow: var(--md-elev-1); }
.tb-user-btn > div:first-child { border-radius: 50% !important; width: 32px !important; height: 32px !important; }

/* ── Dashboard ─────────────────────────────────────────────────────────── */
.db-hero {
    position: relative; overflow: hidden; border-radius: 24px; padding: 28px 32px; margin-bottom: 20px; color: #fff;
    background: radial-gradient(120% 140% at 100% 0%, #F06355 0%, #C8453A 45%, #8E2A21 100%);
    box-shadow: 0 8px 24px rgba(142, 42, 33, .25);
}
.db-hero::before, .db-hero::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
    background: rgba(255, 255, 255, .08);
}
.db-hero::before { width: 320px; height: 320px; right: -80px; top: -140px; }
.db-hero::after  { width: 200px; height: 200px; right: 180px; bottom: -120px; background: rgba(255, 255, 255, .06); }
.db-hero > * { position: relative; z-index: 1; }
.db-hero-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.db-hero h2 { color: #fff !important; font-size: 28px !important; line-height: 36px; margin: 6px 0 4px; font-weight: 500 !important; }
.db-hero p { margin: 0; opacity: .9; font-size: 14px; }
.db-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.db-hero-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.db-hero-stat {
    min-width: 120px; padding: 14px 18px; border-radius: 16px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
}
.db-hero-stat .v { font-size: 26px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.db-hero-stat .l { font-size: 12px; opacity: .85; margin-top: 2px; }
.db-quickcall { display: flex; gap: 8px; align-items: center; margin-top: 16px; max-width: 420px; }
.db-quickcall .form-control { background: #fff; border: none !important; border-radius: 20px; min-height: 40px; }

.db-kpi {
    height: 100%; background: var(--md-surface); border-radius: 16px; padding: 18px 20px;
    box-shadow: var(--md-elev-1); display: flex; flex-direction: column; gap: 12px;
    transition: box-shadow .2s, transform .2s; text-decoration: none; color: inherit;
}
a.db-kpi:hover { box-shadow: var(--md-elev-2); transform: translateY(-1px); color: inherit; }
.db-kpi-top { display: flex; align-items: center; justify-content: space-between; }
.db-kpi-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.db-kpi-value { font-size: 30px; font-weight: 600; line-height: 1; color: var(--md-on-surface); font-variant-numeric: tabular-nums; }
.db-kpi-label { font-size: 14px; font-weight: 600; color: var(--md-on-surface); margin-top: 6px; }
.db-kpi-foot { font-size: 13px; color: #3A302E; }
.db-kpi-foot .up { color: var(--md-success); font-weight: 600; }
.db-kpi-foot .down { color: var(--md-error); font-weight: 600; }
/* Solid, saturated tones (white glyph) — no washed-out pastel tiles */
.tone-primary { background: #C8453A; color: #fff; }
.tone-success { background: #1E7B45; color: #fff; }
.tone-warning { background: #D98E00; color: #fff; }
.tone-info    { background: #1565C0; color: #fff; }
.tone-error   { background: #C62828; color: #fff; }
.tone-neutral { background: #5D4F4C; color: #fff; }
.badge.tone-primary, .badge.tone-success, .badge.tone-warning, .badge.tone-info, .badge.tone-error, .badge.tone-neutral { color: #fff !important; }

.db-glance { display: grid; grid-template-columns: repeat(6, 1fr); }
.db-glance > div { padding: 16px 20px; display: flex; align-items: center; gap: 12px; border-left: 1px solid var(--md-outline-variant); min-width: 0; }
.db-glance > div:first-child { border-left: none; }
.db-glance .gi { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.db-glance .gv { font-size: 20px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.db-glance .gl { font-size: 13px; font-weight: 500; color: #3A302E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1199.98px) {
    .db-glance { grid-template-columns: repeat(3, 1fr); }
    .db-glance > div:nth-child(3n+1) { border-left: none; }
    .db-glance > div:nth-child(n+4) { border-top: 1px solid var(--md-outline-variant); }
}
@media (max-width: 575.98px) {
    .db-hero { padding: 22px 20px; border-radius: 20px; }
    .db-hero h2 { font-size: 22px !important; line-height: 28px; }
    .db-hero-stats { width: 100%; gap: 8px; flex-wrap: nowrap; }
    .db-hero-stat { flex: 1 1 0; min-width: 0; padding: 10px 12px; border-radius: 12px; }
    .db-hero-stat .v { font-size: 20px; }
    .db-hero-stat .l { font-size: 11px; }
    .db-glance { grid-template-columns: repeat(2, 1fr); }
    .db-glance > div { border-left: none !important; border-top: 1px solid var(--md-outline-variant); }
    .db-glance > div:nth-child(-n+2) { border-top: none; }
    .db-glance > div:nth-child(2n) { border-left: 1px solid var(--md-outline-variant) !important; }
}

.db-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.db-card-head .sub { display: block; font-size: 12px; color: #5A4B48; margin-top: 2px; font-weight: 400; }
.db-link { font-size: 13px; font-weight: 500; color: var(--md-primary); text-decoration: none; padding: 6px 12px; border-radius: 16px; white-space: nowrap; }
.db-link:hover { background: rgba(179, 56, 44, .08); color: var(--md-primary); }
.db-legend { display: flex; flex-direction: column; gap: 6px; }
.db-legend-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 12px; background: var(--md-surface-container); font-weight: 500; }
.db-legend-row .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 10px; }
.db-legend-row .n { font-weight: 600; font-variant-numeric: tabular-nums; }
.db-legend-row .pct { font-size: 12px; color: var(--md-on-surface-variant); margin-left: 8px; font-weight: 400; }
.db-donut { position: relative; width: 150px; height: 150px; margin: 4px auto 18px; }
.db-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.db-donut-center .v { font-size: 28px; font-weight: 600; line-height: 1; }
.db-donut-center .l { font-size: 12px; color: var(--md-on-surface-variant); margin-top: 4px; }

.db-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--md-outline-variant); }
.db-list-item:last-child { border-bottom: none; }
.db-rank { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; background: var(--md-surface-container); color: var(--md-on-surface-variant); }
.db-rank.r1 { background: #FFE08A; color: #5C4300; }
.db-rank.r2 { background: #E3E3E3; color: #3F3F3F; }
.db-rank.r3 { background: #F5CFB5; color: #5C2E0E; }
.db-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--md-surface-container); max-width: 110px; overflow: hidden; }
.db-bar > span { display: block; height: 100%; border-radius: 3px; }
.db-empty { padding: 40px 20px; text-align: center; color: var(--md-on-surface-variant); font-size: 14px; }
.db-empty .bi { font-size: 32px; display: block; margin-bottom: 8px; color: var(--md-outline-variant); }
.db-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.db-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.db-avatar-i { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.card-header-title:has(> .sub) { flex-direction: column; align-items: flex-start !important; gap: 0 !important; }

/* Dashboard filter bar */
.db-filter {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
    background: var(--md-surface); border-radius: 16px; box-shadow: var(--md-elev-1); padding: 10px 12px; margin-bottom: 8px;
}
.db-filter-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.db-filter-chips::-webkit-scrollbar { display: none; }
.db-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; flex-shrink: 0;
    border-radius: 17px; border: 1px solid #A8948F; background: var(--md-surface);
    font: 500 13px var(--md-font); color: var(--md-on-surface); cursor: pointer; white-space: nowrap;
    transition: background .15s, border-color .15s;
}
.db-chip:hover { background: #F4E7E4; }
.db-chip.is-selected { background: var(--md-primary); border-color: var(--md-primary); color: #fff; }
.db-chip:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.db-filter-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-filter-custom { display: flex; align-items: center; gap: 6px; }
.db-filter-custom[hidden] { display: none; }
.db-filter-custom span { font-size: 13px; color: var(--md-on-surface-variant); }
.db-filter-custom .form-control { width: 150px; min-height: 34px; border-radius: 17px; }
.db-filter-product { width: auto; max-width: 260px; min-width: 170px; min-height: 34px !important; border-radius: 17px !important; font-weight: 500; }
.db-filter-summary { font-size: 13px; color: #3A302E; margin: 0 4px 16px; }
.db-filter-summary span { color: var(--md-on-surface-variant); }
@media (max-width: 575.98px) {
    .db-filter-side, .db-filter-custom { width: 100%; }
    .db-filter-custom .form-control { flex: 1; width: auto; }
    .db-filter-product { flex: 1; }
}

/* KPI tiles across the app (reports, calls, agents…) — solid brand tones, not pastels */
.s-indigo, .s-rose, .s-orange { background: #C8453A !important; color: #fff !important; }
.s-emerald, .s-teal           { background: #1E7B45 !important; color: #fff !important; }
.s-amber                      { background: #C77F00 !important; color: #fff !important; }
.s-sky, .s-violet             { background: #1565C0 !important; color: #fff !important; }
.stat-card .stat-icon { background: rgba(255, 255, 255, .2) !important; }
.stat-card .stat-label, .stat-card .stat-change { opacity: 1; }

/* ── Profile page ──────────────────────────────────────────────────────── */
.pf-hero { background: var(--md-surface); border-radius: 20px; box-shadow: var(--md-elev-1); overflow: hidden; margin-bottom: 24px; }
.pf-hero-banner {
    height: 120px;
    background: radial-gradient(120% 160% at 100% 0%, #F06355 0%, #C8453A 45%, #8E2A21 100%);
    position: relative;
}
.pf-hero-banner::after { content: ''; position: absolute; width: 260px; height: 260px; right: -60px; top: -130px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.pf-hero-body { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: 0 28px 20px; position: relative; }
.pf-avatar { margin-top: -56px; }
.pf-avatar { position: relative; flex-shrink: 0; }
.pf-avatar img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 4px solid var(--md-surface); box-shadow: var(--md-elev-2); display: block; background: var(--md-surface); }
.pf-avatar-btn {
    position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px; border-radius: 50%;
    background: var(--md-primary); color: #fff; border: 3px solid var(--md-surface);
    display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px;
    transition: background .15s;
}
.pf-avatar-btn:hover { background: #98291F; }
.pf-identity { flex: 1 1 260px; min-width: 0; padding: 14px 0 4px; }
.pf-name { font-size: 26px !important; font-weight: 600 !important; margin: 0; color: var(--md-on-surface); line-height: 1.2; }
.pf-role { background: var(--md-primary); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 14px; letter-spacing: .02em; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: 14px; color: #3A302E; }
.pf-meta .bi { color: var(--md-primary); margin-right: 6px; }
.pf-upload { margin-bottom: 4px; cursor: pointer; }
.pf-tabs { display: flex; gap: 4px; padding: 0 20px; border-top: 1px solid var(--md-outline-variant); overflow-x: auto; }
.pf-tabs a {
    display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; white-space: nowrap;
    font-size: 14px; font-weight: 500; color: #3A302E; text-decoration: none;
    border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.pf-tabs a:hover { color: var(--md-primary); background: rgba(179, 56, 44, .05); }
.pf-tabs a.is-active { color: var(--md-primary); border-bottom-color: var(--md-primary); font-weight: 600; }
.pf-head-icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px !important; flex-shrink: 0; }
.card > .card-header .card-header-title .pf-head-icon > .bi { color: #fff !important; font-size: 16px !important; }
.card-header-title .sub { font-size: 12px; font-weight: 400; color: #5A4B48; margin-top: 2px; }
.pf-stat { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-ext { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 14px; background: #1E7B45; color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; font-size: 14px; }
.pf-dl dt { font-weight: 500; color: #5A4B48; }
.pf-dl dd { margin: 0; font-weight: 500; color: var(--md-on-surface); }
.pf-dl dd span { color: #5A4B48; font-weight: 400; }
.form-control:disabled { background: var(--md-surface-container-low); color: #5A4B48; }
@media (max-width: 575.98px) {
    .pf-hero-body { padding: 0 16px 16px; justify-content: center; text-align: center; }
    .pf-identity .d-flex, .pf-meta { justify-content: center; }
    .pf-upload { width: 100%; }
    .pf-tabs { padding: 0 8px; }
}
/* Phones: KPI cards become compact rows (icon · figures) instead of tall tiles */
@media (max-width: 767.98px) {
    .db-kpi { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; align-items: center; padding: 14px 16px; }
    .db-kpi-icon { grid-row: span 2; }
    .db-kpi-value { font-size: 24px; }
    .db-kpi-label { margin-top: 2px; }
    .db-kpi-foot { grid-column: 2; }
}
@media (max-width: 575.98px) {
    .db-filter-product { max-width: none; }
    .pf-hero + .row .card-footer .btn { flex: 1 1 auto; }
}

/* Stronger emphasis everywhere — solid brand fills instead of pale tints */
.nav-link-item.active { background: var(--md-primary) !important; color: #fff !important; box-shadow: 0 2px 6px rgba(179, 56, 44, .3) !important; }
.nav-link-item.active .nav-icon { color: #fff !important; }
.nav-link-item.active .nav-chip { background: #fff !important; color: var(--md-primary) !important; }
.nav-chip.chip-primary { background: var(--md-primary); color: #fff; }
.nav-chip.chip-warn    { background: #D98E00; color: #fff; }
.nav-chip.chip-danger  { background: #C62828; color: #fff; }
.btn-tonal { background: #F6C9C2 !important; color: #5C0F09 !important; }
.btn-tonal:hover { background: #F0B3AA !important; }
.md-paginator .md-page.is-current, .md-segmented > .is-selected { background: var(--md-primary); color: #fff; }

/* ══ Text fields — one consistent outlined style for every input/select ══ */
.form-control, .form-select {
    background-color: var(--bg-card) !important;       /* colour only: keeps the select chevron image */
    border: 1px solid #BFB0AC !important; border-radius: 10px !important;
    min-height: 44px; padding: 10px 14px; font-size: 14px; color: var(--md-on-surface);
    box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.form-select { padding-right: 40px; cursor: pointer; }
.form-select, select.form-control {                                   /* selects styled as .form-control get the chevron too */
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 40px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23534341' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 14px 10px !important;
}
.form-select[multiple], .form-select[size]:not([size='1']), select.form-control[multiple], select.form-control[size]:not([size='1']) { background-image: none !important; padding-right: 14px; }
textarea.form-control { min-height: 88px; line-height: 1.5; }
.form-control-sm, .form-select-sm { min-height: 36px; padding-top: 6px; padding-bottom: 6px; font-size: 13px; border-radius: 8px !important; }
.form-control::placeholder { color: #8F7F7B; opacity: 1; }
.form-control:hover:not(:disabled):not(:focus), .form-select:hover:not(:disabled):not(:focus) { border-color: #6F5F5B !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--md-primary) !important;
    box-shadow: 0 0 0 3px rgba(179, 56, 44, .16) !important; outline: none;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: #F4EEEC !important; color: #5A4B48; cursor: not-allowed; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--md-error) !important; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(186, 26, 26, .16) !important; }
input[type=file].form-control { padding: 8px 10px; }
input[type=file].form-control::file-selector-button {
    border: none; border-radius: 16px; background: var(--md-primary); color: #fff; font-weight: 500;
    padding: 6px 14px; margin: -2px 12px -2px 0;
}
input[type=date].form-control, input[type=datetime-local].form-control, input[type=time].form-control { cursor: pointer; }
.form-label { font-size: 13px; font-weight: 600; color: #3A302E; margin-bottom: 6px; letter-spacing: .01em; }
.form-label .text-danger, .form-label .required { color: var(--md-error) !important; }
.form-text { font-size: 12px; color: #5A4B48; margin-top: 6px; }
.invalid-feedback { font-size: 12px; font-weight: 500; }
.input-group > .form-control, .input-group > .form-select { border-radius: 10px !important; }
.input-group > :not(:first-child):not(.dropdown-menu) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.input-group-text { border: 1px solid #BFB0AC !important; border-radius: 10px; background: #F4EEEC !important; color: #3A302E; font-size: 13px; }
.form-check-input { width: 18px; height: 18px; border: 2px solid #6F5F5B; margin-top: .15em; }
.form-switch .form-check-input { width: 36px; height: 20px; }
.form-check-label { font-size: 14px; color: var(--md-on-surface); }

/* Select2 (searchable selects) matched to the text fields */
.select2-container--bootstrap-5 .select2-selection {
    min-height: 44px !important; border: 1px solid #BFB0AC !important; border-radius: 10px !important;
    background-color: var(--bg-card) !important; font-size: 14px !important; padding: 9px 40px 9px 14px !important; box-shadow: none !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { padding: 0 !important; color: var(--md-on-surface) !important; line-height: 24px; }
.select2-container--bootstrap-5 .select2-selection--single { background-position: right 14px center !important; }
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--md-primary) !important; box-shadow: 0 0 0 3px rgba(179, 56, 44, .16) !important; }
.select2-container--bootstrap-5 .select2-dropdown { border: none !important; border-radius: 10px !important; box-shadow: var(--md-elev-2) !important; overflow: hidden; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option { font-size: 14px; padding: 10px 14px; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted { background: #F4E7E4 !important; color: var(--md-on-surface) !important; }
.select2-container--bootstrap-5 .select2-dropdown .select2-results__option--selected { background: var(--md-primary) !important; color: #fff !important; }
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { border-radius: 8px !important; border-color: #BFB0AC !important; min-height: 38px; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice { background: var(--md-primary) !important; color: #fff !important; border: none !important; border-radius: 12px !important; }
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove { filter: invert(1); }

/* ══ Avatars / status / call button ════════════════════════════════════ */
.avatar-initial { width: 38px; height: 38px; font-size: 13px; font-weight: 600; background: var(--md-primary); color: #fff; letter-spacing: .02em; }
.avatar-initial.sm { width: 32px; height: 32px; font-size: 12px; }
.badge-status { border-radius: 12px !important; padding: 5px 10px !important; font-size: 12px !important; font-weight: 600 !important; }
.badge-status.bg-success   { background: #1E7B45 !important; color: #fff !important; }
.badge-status.bg-danger    { background: #C62828 !important; color: #fff !important; }
.badge-status.bg-warning   { background: #D98E00 !important; color: #fff !important; }
.badge-status.bg-info      { background: #1565C0 !important; color: #fff !important; }
.badge-status.bg-secondary { background: #5D4F4C !important; color: #fff !important; }

/* Call button: solid green pill; round icon-only variant for tables */
.btn-call, .btn-call:focus {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; padding: 0 16px; border-radius: 18px !important; border: none !important;
    background: #1E7B45 !important; color: #fff !important; font-size: 13px; font-weight: 600;
    box-shadow: 0 1px 3px rgba(30, 123, 69, .3) !important; transition: background .15s, box-shadow .15s, transform .15s;
}
.btn-call:hover { background: #17633A !important; color: #fff !important; box-shadow: 0 4px 12px rgba(30, 123, 69, .35) !important; transform: translateY(-1px) !important; }
.btn-call:active { transform: none !important; }
.btn-call.btn-call-icon { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0 !important; border-radius: 50% !important; font-size: 14px; }
.btn-call .bi { font-size: 1em; margin: 0 !important; }
.phone-cell { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* List filter bar (customers, …): fields line up on one row, wrap cleanly */
.filter-bar { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(4, minmax(130px, 1fr)) auto; gap: 10px; align-items: center; }
.filter-bar .filter-actions { display: flex; gap: 8px; }
@media (max-width: 1199.98px) { .filter-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .filter-bar > :first-child { grid-column: 1 / -1; } }
@media (max-width: 575.98px) { .filter-bar { grid-template-columns: 1fr 1fr; } .filter-bar .filter-actions { grid-column: 1 / -1; } .filter-bar .filter-actions .btn-primary { flex: 1; } }
.search-field { position: relative; }
.search-field > .bi { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #6F5F5B; pointer-events: none; }
.search-field > .form-control { padding-left: 40px; }
.cust-name { font-size: 14px; font-weight: 600; color: var(--md-on-surface); text-decoration: none; }
.cust-name:hover { color: var(--md-primary); text-decoration: underline; }
.cust-sub { font-size: 12px; color: #5A4B48; max-width: 240px; }
.btn-text-neutral { background: transparent !important; border: none !important; color: #3A302E !important; }
.btn-text-neutral:hover, .btn-text-neutral[aria-expanded=true] { background: rgba(32, 26, 25, .08) !important; }

/* ── Customer groups ───────────────────────────────────────────────────── */
.grp-toolbar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px;
    background: var(--md-surface); border-radius: 16px; box-shadow: var(--md-elev-1); padding: 10px 16px; margin-bottom: 16px;
}
.grp-count { font-size: 14px; color: #3A302E; }
.grp-card {
    height: 100%; display: flex; flex-direction: column; gap: 14px;
    background: var(--md-surface); border-radius: 16px; box-shadow: var(--md-elev-1); padding: 18px;
    transition: box-shadow .2s, transform .2s;
}
.grp-card:hover { box-shadow: var(--md-elev-2); transform: translateY(-1px); }
.grp-head { display: flex; align-items: flex-start; gap: 12px; }
.grp-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.grp-title { flex: 1; min-width: 0; }
.grp-title h3 {
    font-size: 16px !important; font-weight: 600 !important; line-height: 1.3; margin: 0 0 6px; color: var(--md-on-surface);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word;
}
.grp-product { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #fff; background: #5D4F4C; padding: 3px 10px; border-radius: 12px; max-width: 100%; }
.grp-desc { font-size: 13px; color: #3A302E; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grp-stat { display: flex; align-items: baseline; gap: 8px; margin-top: auto; }
.grp-stat .v { font-size: 28px; font-weight: 600; line-height: 1; color: var(--md-on-surface); font-variant-numeric: tabular-nums; }
.grp-stat .l { font-size: 14px; color: #3A302E; }
.grp-actions { display: flex; gap: 8px; padding-top: 14px; border-top: 1px solid var(--md-outline-variant); }
.grp-actions .btn { flex: 1; }
.cs-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cs-stats > div { border-radius: 12px; padding: 14px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.cs-stats .v { font-size: 22px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cs-stats .l { font-size: 12px; font-weight: 500; opacity: .95; }
.btn-call:disabled { opacity: .45; box-shadow: none !important; transform: none !important; cursor: not-allowed; }
.btn-call.btn-sm { min-height: 32px; padding: 0 14px; font-size: 13px; }