/* ============================================================
   SAVERBRO POS THEME
   Custom visual theme for UltimatePOS
   ============================================================ */


/* ============================================================
   LIGHT THEME
   ============================================================ */

:root,
html[data-theme="light"]
{

    --sb-bg: #f1f5f9;

    --sb-sidebar: #ffffff;
    --sb-navbar: #ffffff;

    --sb-surface: #ffffff;
    --sb-surface-2: #f8fafc;
    --sb-surface-3: #eef2f7;

    --sb-border: #dbe3ec;
    --sb-border-light: #e8edf3;

    --sb-text: #172033;
    --sb-text-secondary: #64748b;
    --sb-text-muted: #94a3b8;

    --sb-primary: #0284c7;
    --sb-primary-light: #38bdf8;

    --sb-sidebar-active: #e0f2fe;
    --sb-sidebar-hover: #f1f5f9;

    --sb-shadow:
        0 4px 15px rgba(15, 23, 42, 0.06);

    --sb-radius: 14px;
}


/*Grace was here adding dark theme 22/9/2026 ehekk*/
html[data-theme="dark"] {

    --sb-bg: #07111f;

    --sb-sidebar: #0b1728;
    --sb-navbar: #081525;

    --sb-surface: #0f1c2d;
    --sb-surface-2: #0b1929;
    --sb-surface-3: #122338;

    --sb-border: #20384f;
    --sb-border-light: #172d42;

    --sb-text: #f8fafc;
    --sb-text-secondary: #a5bad0;
    --sb-text-muted: #6f88a1;

    --sb-primary: #38bdf8;
    --sb-primary-light: #7dd3fc;

    --sb-sidebar-active: #123149;
    --sb-sidebar-hover: #10263a;

    --sb-shadow:
        0 8px 24px rgba(0, 0, 0, 0.15);

    --sb-radius: 14px;
}


/* ============================================================
   GLOBAL
   ============================================================ */

html.saverbro-theme-root,
html.saverbro-theme-root body {
    background: var(--sb-bg);
}

body.saverbro-app {
    background: var(--sb-bg);
    color: var(--sb-text);

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.saverbro-main {
    background: var(--sb-bg);
    color: var(--sb-text);
}


/*
|--------------------------------------------------------------------------
| IMPORTANT
|--------------------------------------------------------------------------
| For now we only heavily theme the normal dashboard/admin layout.
| This prevents POS create/edit/payment screens from being affected
| during development.
*/

.saverbro-main-layout .content-wrapper {
    background: var(--sb-bg) !important;
}


/* ============================================================
   TEXT
   ============================================================ */

.saverbro-main-layout h1,
.saverbro-main-layout h2,
.saverbro-main-layout h3,
.saverbro-main-layout h4,
.saverbro-main-layout h5,
.saverbro-main-layout h6 {
    color: var(--sb-text);
}

.saverbro-main-layout p,
.saverbro-main-layout label {
    color: var(--sb-text-secondary);
}


/* ============================================================
   GENERAL CARDS / BOXES
   ============================================================ */

.saverbro-main-layout .box {
    background: var(--sb-surface);
    color: var(--sb-text);

    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);

    box-shadow: var(--sb-shadow);

    overflow: hidden;
}

.saverbro-main-layout .box-header {
    color: var(--sb-text);

    border-bottom-color: var(--sb-border-light);
}

.saverbro-main-layout .box-title {
    color: var(--sb-text);
}

.saverbro-main-layout .box-footer {
    background: var(--sb-surface-2);

    border-top-color: var(--sb-border);
}


/* ============================================================
   INPUTS
   ============================================================ */

.saverbro-main-layout .form-control {

    background: var(--sb-surface-2);

    color: var(--sb-text);

    border: 1px solid var(--sb-border);

    border-radius: 9px;

    box-shadow: none;
}

.saverbro-main-layout .form-control:focus {

    border-color: var(--sb-primary);

    box-shadow:
        0 0 0 2px rgba(56, 189, 248, 0.12);
}


/* Placeholder */

.saverbro-main-layout .form-control::placeholder {
    color: var(--sb-text-muted);
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

html[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #07111f;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #29435c;
    border-radius: 20px;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #365b7a;
}


/* ============================================================
   SELECTION
   ============================================================ */

::selection {
    background: rgba(56, 189, 248, 0.30);
    color: var(--sb-text);
}

/* ============================================================
   SAVERPOS DASHBOARD
   ============================================================ */

.saverbro-dashboard [hidden] {
    display: none !important;
}

/* Dashboard header */

.sb-dashboard-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.25rem;
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: var(--sb-radius);
    background: linear-gradient(135deg, #0c2945, #071525);
    box-shadow: var(--sb-shadow);
}

.sb-dashboard-intro {
    flex: 1 1 auto;
    min-width: 0;
}

.sb-dashboard-eyebrow {
    margin: 0 0 5px;
    color: #7dd3fc !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sb-dashboard-intro h1 {
    margin: 0;
    color: #f8fafc !important;
}

.sb-dashboard-welcome {
    margin: 7px 0 0;
    color: #a5bad0 !important;
}

/* Dashboard filters */

.sb-dashboard-header-filters {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 14px;
    flex: 0 1 650px;
}

.sb-dashboard-filter-control {
    flex: 1 1 250px;
    min-width: 200px;
}

.sb-dashboard-filter-control--date {
    flex: 0 0 210px;
}

.sb-dashboard-filter-label {
    display: block;
    margin: 0 0 6px;
    color: #a5bad0 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sb-dashboard-filter-control .select2-container {
    width: 100% !important;
}

.sb-dashboard-filter-button {
    width: 100% !important;
    min-height: 44px;
    border: 1px solid rgba(125, 211, 252, 0.25) !important;
    border-radius: 10px !important;
    background: rgba(8, 23, 39, 0.92) !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}

.sb-dashboard-filter-button:hover,
.sb-dashboard-filter-button:focus {
    border-color: #38bdf8 !important;
    background: #102c46 !important;
}

/* KPI grid */

.sb-dashboard-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.sb-dashboard-kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    min-height: 132px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 14px;
    background: linear-gradient(140deg, #07503e, #09252a);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.2);
    color: #f8fafc;
}

.sb-dashboard-kpi::after {
    position: absolute;
    top: -48px;
    right: -28px;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.16),
        transparent 68%
    );
    content: "";
    pointer-events: none;
}

/* Individual card colours */

.sb-dashboard-kpi--purchase {
    background: linear-gradient(140deg, #352367, #171942);
}

.sb-dashboard-kpi--due {
    background: linear-gradient(140deg, #573911, #301f16);
}

.sb-dashboard-kpi--adjustments {
    background: linear-gradient(140deg, #514215, #2b2213);
}

.sb-dashboard-kpi--transactions {
    background: linear-gradient(140deg, #075163, #09283d);
}

.sb-dashboard-kpi--returns {
    background: linear-gradient(140deg, #6a2741, #32192d);
}

.sb-dashboard-kpi--expenses {
    background: linear-gradient(140deg, #194554, #122334);
}

.sb-dashboard-kpi--visits {
    background: linear-gradient(140deg, #0c3b64, #0c1f3b);
}

/* KPI content */

.sb-dashboard-kpi__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #b9f6d6;
    font-size: 21px;
}

.sb-dashboard-kpi--purchase .sb-dashboard-kpi__icon {
    color: #d7c5ff;
}

.sb-dashboard-kpi--due .sb-dashboard-kpi__icon,
.sb-dashboard-kpi--adjustments .sb-dashboard-kpi__icon {
    color: #fde68a;
}

.sb-dashboard-kpi--returns .sb-dashboard-kpi__icon {
    color: #fecdd3;
}

.sb-dashboard-kpi--visits .sb-dashboard-kpi__icon {
    color: #bae6fd;
}

.saverbro-main-layout .sb-dashboard-kpi__content {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible !important;
}

.sb-dashboard-kpi__label,

.sb-dashboard-kpi__hint {
    margin: 0;
}

.sb-dashboard-kpi__label {
    min-height: 18px;
    color: rgba(238, 246, 255, 0.8) !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.saverbro-main-layout .sb-dashboard-kpi__value {
    display: block;
    width: auto !important;
    max-width: none !important;

    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;

    font-size: clamp(1.05rem, 1.25vw, 1.25rem) !important;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

.sb-dashboard-kpi__hint {
    margin-top: 7px;
    color: rgba(207, 224, 241, 0.75) !important;
    font-size: 12px;
    line-height: 1.35;
}

/* Walk-In Summary */
.sb-walk-in-summary {
    position: relative;
    z-index: 1;
    display: block;

    box-sizing: border-box;
    width: 100%;
    max-width: 100%;

    margin: 0 0 1.25rem;
    padding: 1.25rem;
    overflow: hidden;

    background: var(--sb-surface, #ffffff);
    border: 1px solid var(--sb-border, #dbe3ec);
    border-radius: 14px;
    box-shadow: var(--sb-shadow, 0 4px 15px rgba(15, 23, 42, 0.06));
}

.sb-walk-in-summary__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.sb-walk-in-summary__eyebrow {
    margin: 0;
    color: var(--sb-text-secondary, #64748b);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sb-walk-in-summary h3 {
    margin: 0.2rem 0;
    color: var(--sb-text, #172033);
    font-size: 1.25rem;
    font-weight: 700;
}

.sb-walk-in-summary__subtitle {
    margin: 0;
    color: var(--sb-text-secondary, #64748b);
    font-size: 0.875rem;
}

.sb-walk-in-summary__link {
    flex: 0 0 auto;
    color: var(--sb-primary, #0284c7);
    font-weight: 700;
}

.sb-walk-in-summary__stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.sb-walk-in-summary__stats > div {
    min-width: 0;
    padding: 0.85rem;
    background: var(--sb-surface-2, #f8fafc);
    border: 1px solid var(--sb-border-light, #e8edf3);
    border-radius: 10px;
}

.sb-walk-in-summary__stats span,
.sb-walk-in-summary__stats strong {
    display: block;
}

.sb-walk-in-summary__stats span {
    color: var(--sb-text-secondary, #64748b);
    font-size: 0.75rem;
}

.sb-walk-in-summary__stats strong {
    margin-top: 0.3rem;
    color: var(--sb-text, #172033);
    font-size: 1.1rem;
    font-weight: 800;
}

@media (max-width: 991px) {
    .sb-walk-in-summary__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .sb-walk-in-summary__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .sb-walk-in-summary__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Allow wrapping only on very small mobile screens */
@media (max-width: 480px) {
    .sb-dashboard-kpi__value {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   THEME TOGGLE
   ============================================================ */

.sb-theme-toggle {
    min-width: 34px;
    min-height: 34px;
    border: 0;
    background: rgba(0, 0, 0, 0.12);
    color: #ffffff;
    cursor: pointer;
}

.sb-theme-toggle:hover,
.sb-theme-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    outline: 2px solid rgba(125, 211, 252, 0.55);
    outline-offset: 2px;
}

.sb-theme-toggle__sun {
    display: none;
}

.sb-theme-toggle__moon {
    display: block;
}

html[data-theme="dark"] .sb-theme-toggle__sun {
    display: block;
}

html[data-theme="dark"] .sb-theme-toggle__moon {
    display: none;
}

/* ============================================================
   DARK ADMIN LAYOUT
   POS create/edit/payment pages do not load this stylesheet.
   ============================================================ */

html[data-theme="dark"] body.saverbro-main-layout,
html[data-theme="dark"] body.saverbro-main-layout .saverbro-main,
html[data-theme="dark"] body.saverbro-main-layout #scrollable-container,
html[data-theme="dark"] body.saverbro-main-layout .content,
html[data-theme="dark"] body.saverbro-main-layout .content-wrapper,
html[data-theme="dark"] body.saverbro-main-layout .tw-bg-gray-100 {
    background-color: var(--sb-bg) !important;
    color: var(--sb-text);
}

html[data-theme="dark"] body.saverbro-main-layout .tw-bg-white,
html[data-theme="dark"] body.saverbro-main-layout .bg-white,
html[data-theme="dark"] body.saverbro-main-layout .card,
html[data-theme="dark"] body.saverbro-main-layout .panel,
html[data-theme="dark"] body.saverbro-main-layout .well,
html[data-theme="dark"] body.saverbro-main-layout .box,
html[data-theme="dark"] body.saverbro-main-layout .dropdown-menu,
html[data-theme="dark"] body.saverbro-main-layout .tw-dw-menu,
html[data-theme="dark"] body.saverbro-main-layout [role="menu"] {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .tw-bg-gray-50,
html[data-theme="dark"] body.saverbro-main-layout .bg-gray,
html[data-theme="dark"] body.saverbro-main-layout .bg-light,
html[data-theme="dark"] body.saverbro-main-layout .box-footer,
html[data-theme="dark"] body.saverbro-main-layout .panel-footer,
html[data-theme="dark"] body.saverbro-main-layout .card-footer {
    background-color: var(--sb-surface-2) !important;
    color: var(--sb-text-secondary) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .tw-text-gray-900,
html[data-theme="dark"] body.saverbro-main-layout .tw-text-gray-800,
html[data-theme="dark"] body.saverbro-main-layout .tw-text-gray-700,
html[data-theme="dark"] body.saverbro-main-layout .text-black,
html[data-theme="dark"] body.saverbro-main-layout .control-label,
html[data-theme="dark"] body.saverbro-main-layout legend {
    color: var(--sb-text) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .tw-text-gray-600,
html[data-theme="dark"] body.saverbro-main-layout .tw-text-gray-500,
html[data-theme="dark"] body.saverbro-main-layout .text-muted,
html[data-theme="dark"] body.saverbro-main-layout small,
html[data-theme="dark"] body.saverbro-main-layout .help-block {
    color: var(--sb-text-secondary) !important;
}

html[data-theme="dark"] body.saverbro-main-layout hr,
html[data-theme="dark"] body.saverbro-main-layout fieldset,
html[data-theme="dark"] body.saverbro-main-layout .tw-border-gray-200,
html[data-theme="dark"] body.saverbro-main-layout .tw-border-gray-300,
html[data-theme="dark"] body.saverbro-main-layout .border,
html[data-theme="dark"] body.saverbro-main-layout .box-header,
html[data-theme="dark"] body.saverbro-main-layout .box-footer {
    border-color: var(--sb-border) !important;
}

/* Sidebar */

html[data-theme="dark"] body.saverbro-main-layout #side-bar,
html[data-theme="dark"] body.saverbro-main-layout .main-sidebar,
html[data-theme="dark"] body.saverbro-main-layout .sidebar {
    background: var(--sb-sidebar) !important;
    color: var(--sb-text-secondary) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout #side-bar a,
html[data-theme="dark"] body.saverbro-main-layout .main-sidebar a,
html[data-theme="dark"] body.saverbro-main-layout .sidebar a {
    color: var(--sb-text-secondary) !important;
}

html[data-theme="dark"] body.saverbro-main-layout #side-bar a:hover,
html[data-theme="dark"] body.saverbro-main-layout #side-bar a:focus,
html[data-theme="dark"] body.saverbro-main-layout #side-bar .theme-sidebar-active,
html[data-theme="dark"] body.saverbro-main-layout .main-sidebar a:hover,
html[data-theme="dark"] body.saverbro-main-layout .main-sidebar .active > a {
    background: var(--sb-sidebar-active) !important;
    color: var(--sb-primary-light) !important;
}

/* Forms and Select2 */

html[data-theme="dark"] body.saverbro-main-layout .form-control,
html[data-theme="dark"] body.saverbro-main-layout input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] body.saverbro-main-layout textarea,
html[data-theme="dark"] body.saverbro-main-layout select,
html[data-theme="dark"] body.saverbro-main-layout .input-group-addon {
    background-color: var(--sb-surface-2) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout input::placeholder,
html[data-theme="dark"] body.saverbro-main-layout textarea::placeholder {
    color: var(--sb-text-muted) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .form-control:focus,
html[data-theme="dark"] body.saverbro-main-layout input:focus,
html[data-theme="dark"] body.saverbro-main-layout textarea:focus,
html[data-theme="dark"] body.saverbro-main-layout select:focus {
    border-color: var(--sb-primary) !important;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.14) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .form-control[disabled],
html[data-theme="dark"] body.saverbro-main-layout .form-control[readonly],
html[data-theme="dark"] body.saverbro-main-layout fieldset[disabled] .form-control {
    background-color: #111f30 !important;
    color: var(--sb-text-muted) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .select2-container--default .select2-selection--single,
html[data-theme="dark"] body.saverbro-main-layout .select2-container--default .select2-selection--multiple,
html[data-theme="dark"] body.saverbro-main-layout .select2-dropdown,
html[data-theme="dark"] body.saverbro-main-layout .select2-search__field {
    background: var(--sb-surface-2) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-theme="dark"] body.saverbro-main-layout .select2-container--default .select2-selection--multiple .select2-selection__choice,
html[data-theme="dark"] body.saverbro-main-layout .select2-results__option {
    color: var(--sb-text) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--sb-surface-3) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--sb-primary) !important;
    color: #06111d !important;
}

html[data-theme="dark"] body.saverbro-main-layout .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--sb-surface-3) !important;
    border-color: var(--sb-border) !important;
}

/* Tables and DataTables */

html[data-theme="dark"] body.saverbro-main-layout table,
html[data-theme="dark"] body.saverbro-main-layout .table {
    background: var(--sb-surface) !important;
    color: var(--sb-text) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .table > thead > tr > th,
html[data-theme="dark"] body.saverbro-main-layout .table > tbody > tr > th,
html[data-theme="dark"] body.saverbro-main-layout .table > tfoot > tr > th,
html[data-theme="dark"] body.saverbro-main-layout .table > thead > tr > td,
html[data-theme="dark"] body.saverbro-main-layout .table > tbody > tr > td,
html[data-theme="dark"] body.saverbro-main-layout .table > tfoot > tr > td {
    background-color: transparent !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .table-striped > tbody > tr:nth-of-type(odd),
html[data-theme="dark"] body.saverbro-main-layout table.dataTable.stripe tbody tr.odd,
html[data-theme="dark"] body.saverbro-main-layout table.dataTable.display tbody tr.odd {
    background-color: var(--sb-surface-2) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .table-hover > tbody > tr:hover,
html[data-theme="dark"] body.saverbro-main-layout table.dataTable.hover tbody tr:hover,
html[data-theme="dark"] body.saverbro-main-layout table.dataTable.display tbody tr:hover {
    background-color: var(--sb-surface-3) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .dataTables_wrapper,
html[data-theme="dark"] body.saverbro-main-layout .dataTables_info,
html[data-theme="dark"] body.saverbro-main-layout .dataTables_length,
html[data-theme="dark"] body.saverbro-main-layout .dataTables_filter,
html[data-theme="dark"] body.saverbro-main-layout .dataTables_processing {
    color: var(--sb-text-secondary) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .dataTables_processing {
    background: var(--sb-surface-2) !important;
    border: 1px solid var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .pagination > li > a,
html[data-theme="dark"] body.saverbro-main-layout .pagination > li > span,
html[data-theme="dark"] body.saverbro-main-layout .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: var(--sb-surface-2) !important;
    color: var(--sb-text-secondary) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .pagination > .active > a,
html[data-theme="dark"] body.saverbro-main-layout .pagination > .active > span,
html[data-theme="dark"] body.saverbro-main-layout .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--sb-primary) !important;
    color: #06111d !important;
    border-color: var(--sb-primary) !important;
}

/* Modals, menus, popovers and tabs */

html[data-theme="dark"] body.saverbro-main-layout .modal-content,
html[data-theme="dark"] body.saverbro-main-layout .popover {
    background: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
    box-shadow: var(--sb-shadow) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .modal-header,
html[data-theme="dark"] body.saverbro-main-layout .modal-footer,
html[data-theme="dark"] body.saverbro-main-layout .popover-title {
    background: var(--sb-surface-2) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .close {
    color: var(--sb-text) !important;
    text-shadow: none !important;
    opacity: 0.85;
}

html[data-theme="dark"] body.saverbro-main-layout .dropdown-menu > li > a,
html[data-theme="dark"] body.saverbro-main-layout [role="menuitem"] {
    color: var(--sb-text-secondary) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .dropdown-menu > li > a:hover,
html[data-theme="dark"] body.saverbro-main-layout .dropdown-menu > li > a:focus,
html[data-theme="dark"] body.saverbro-main-layout [role="menuitem"]:hover,
html[data-theme="dark"] body.saverbro-main-layout [role="menuitem"]:focus {
    background: var(--sb-surface-3) !important;
    color: var(--sb-text) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .nav-tabs {
    border-bottom-color: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .nav-tabs > li > a {
    color: var(--sb-text-secondary) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .nav-tabs > li.active > a,
html[data-theme="dark"] body.saverbro-main-layout .nav-tabs > li.active > a:hover,
html[data-theme="dark"] body.saverbro-main-layout .nav-tabs > li.active > a:focus {
    background: var(--sb-surface) !important;
    color: var(--sb-primary-light) !important;
    border-color: var(--sb-border) !important;
    border-bottom-color: var(--sb-surface) !important;
}

/* Date range picker */

html[data-theme="dark"] body.saverbro-main-layout .daterangepicker,
html[data-theme="dark"] body.saverbro-main-layout .daterangepicker .calendar-table {
    background: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .daterangepicker td.off,
html[data-theme="dark"] body.saverbro-main-layout .daterangepicker td.off.in-range,
html[data-theme="dark"] body.saverbro-main-layout .daterangepicker td.off.start-date,
html[data-theme="dark"] body.saverbro-main-layout .daterangepicker td.off.end-date {
    background: var(--sb-surface) !important;
    color: var(--sb-text-muted) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .daterangepicker td.in-range,
html[data-theme="dark"] body.saverbro-main-layout .daterangepicker td:hover,
html[data-theme="dark"] body.saverbro-main-layout .daterangepicker th:hover,
html[data-theme="dark"] body.saverbro-main-layout .daterangepicker .ranges li:hover {
    background: var(--sb-surface-3) !important;
    color: var(--sb-text) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .daterangepicker td.active,
html[data-theme="dark"] body.saverbro-main-layout .daterangepicker td.active:hover,
html[data-theme="dark"] body.saverbro-main-layout .daterangepicker .ranges li.active {
    background: var(--sb-primary) !important;
    color: #06111d !important;
}

/* Highcharts */

html[data-theme="dark"] body.saverbro-main-layout .highcharts-background {
    fill: var(--sb-surface) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .highcharts-title,
html[data-theme="dark"] body.saverbro-main-layout .highcharts-subtitle,
html[data-theme="dark"] body.saverbro-main-layout .highcharts-axis-title,
html[data-theme="dark"] body.saverbro-main-layout .highcharts-axis-labels text,
html[data-theme="dark"] body.saverbro-main-layout .highcharts-legend-item text {
    fill: var(--sb-text-secondary) !important;
    color: var(--sb-text-secondary) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .highcharts-grid-line,
html[data-theme="dark"] body.saverbro-main-layout .highcharts-axis-line,
html[data-theme="dark"] body.saverbro-main-layout .highcharts-tick {
    stroke: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .highcharts-tooltip-box {
    fill: var(--sb-surface-2) !important;
    stroke: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout .highcharts-tooltip text {
    fill: var(--sb-text) !important;
}

/* Footer and links */

html[data-theme="dark"] body.saverbro-main-layout footer,
html[data-theme="dark"] body.saverbro-main-layout .main-footer {
    background: var(--sb-surface) !important;
    color: var(--sb-text-secondary) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"] body.saverbro-main-layout a:not(.btn):not([class*="tw-bg-"]) {
    color: var(--sb-primary-light);
}

html[data-theme="dark"] body.saverbro-main-layout a:not(.btn):not([class*="tw-bg-"]):hover {
    color: #bae6fd;
}

@media (prefers-reduced-motion: reduce) {
    body.saverbro-app,
    .sb-theme-toggle {
        transition: none !important;
    }
}

/* ============================================================
   WALK-IN INTELLIGENCE
   ============================================================ */

/* Filter card */

.walkin-intelligence-page .walkin-filter-card {
    margin-bottom: 30px;
}

.walkin-intelligence-page #walkin_date_range {
    min-height: 34px;
    cursor: pointer;
}


/* KPI layout */

.walkin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.walkin-kpi {
    position: relative;
    min-width: 0;
    min-height: 112px;
    padding: 18px 20px;
    overflow: hidden;

    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 14px;

    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.18);

    color: #f8fafc;
}

.walkin-kpi::after {
    position: absolute;
    top: -48px;
    right: -28px;

    width: 125px;
    height: 125px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.16),
            transparent 68%
        );

    content: "";
    pointer-events: none;
}


/* Same colour palette as dashboard KPI cards */

.walkin-kpi--visits {
    background:
        linear-gradient(
            140deg,
            #0c3b64,
            #0c1f3b
        );
}

.walkin-kpi--converted {
    background:
        linear-gradient(
            140deg,
            #07503e,
            #09252a
        );
}

.walkin-kpi--no-sale {
    background:
        linear-gradient(
            140deg,
            #6a2741,
            #32192d
        );
}

.walkin-kpi--open {
    background:
        linear-gradient(
            140deg,
            #514215,
            #2b2213
        );
}

.walkin-kpi--rate {
    background:
        linear-gradient(
            140deg,
            #075163,
            #09283d
        );
}

.walkin-kpi--revenue {
    background:
        linear-gradient(
            140deg,
            #352367,
            #171942
        );
}


/* KPI text */

.walkin-kpi__label {
    position: relative;
    z-index: 1;

    min-height: 18px;
    margin: 0 0 9px;

    color: rgba(238, 246, 255, 0.88) !important;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.walkin-kpi__value {
    position: relative;
    z-index: 1;

    display: block;
    width: 100%;

    color: #ffffff !important;

    font-size: clamp(1.55rem, 2vw, 2.25rem);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;

    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}


/* Responsive KPI layout */

@media (max-width: 1199px) {
    .walkin-kpi-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .walkin-kpi-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .walkin-kpi {
        min-height: 105px;
    }
}

@media (max-width: 480px) {
    .walkin-kpi-grid {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   WALK-IN DARK MODE READABILITY
   ============================================================ */

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
.content-header h1 {
    color: #f8fafc !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
.content-header h1 small {
    color: #b9cce0 !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
label {
    color: #cbd5e1 !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
.box-title {
    color: #f8fafc !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
#walkin_date_range {
    background: #0b1929 !important;
    color: #f8fafc !important;
    border-color: #29435c !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
#walkin_date_range span,
html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
#walkin_date_range i {
    color: #f8fafc !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
.table > thead > tr > th {
    background: #122338 !important;
    color: #f8fafc !important;
    border-color: #29435c !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
.table > tbody > tr > td {
    color: #e2e8f0 !important;
    border-color: #20384f !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
.table > tbody > tr:nth-of-type(odd) {
    background: #0b1929 !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
.table > tbody > tr:nth-of-type(even) {
    background: #0f1c2d !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
.table small {
    color: #bae6fd !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
.text-muted {
    color: #b9cce0 !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.walkin-intelligence-page
select option {
    background: #0b1929;
    color: #f8fafc;
}


/* ============================================================
   DARK SIDEBAR CONTRAST
   ============================================================ */

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar .tw-bg-gray-50,

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar .tw-bg-gray-100,

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar .tw-bg-gray-200,

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar ul ul {
    background: #0f1c2d !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar a,

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar span {
    color: #c5d5e5 !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar a:hover,

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar a:focus {
    background: #123149 !important;
    color: #f8fafc !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar .theme-sidebar-active,

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar .theme-sidebar-child-active {
    background: #123149 !important;
    color: #7dd3fc !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar .theme-sidebar-active span,

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar .theme-sidebar-child-active span {
    color: #7dd3fc !important;
}

/* ============================================================
   DARK MODE — CURRENT SIDEBAR PAGE
   ============================================================ */

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar a.sb-current-page {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;

    padding-top: 0.45rem !important;
    padding-right: 0.75rem !important;
    padding-bottom: 0.45rem !important;
    padding-left: 1rem !important;

    background: linear-gradient(
        90deg,
        rgba(56, 189, 248, 0.24),
        rgba(56, 189, 248, 0.13)
    ) !important;

    color: #7dd3fc !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar a.sb-current-page:hover,
html[data-theme="dark"]
body.saverbro-main-layout
#side-bar a.sb-current-page:focus {
    background: linear-gradient(
        90deg,
        rgba(56, 189, 248, 0.30),
        rgba(56, 189, 248, 0.18)
    ) !important;

    color: #e0f2fe !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
#side-bar a.sb-current-page i,
html[data-theme="dark"]
body.saverbro-main-layout
#side-bar a.sb-current-page svg {
    color: #38bdf8 !important;
}

/* ============================================================
   DARK MODE — TABS AND TAB CONTENT
   ============================================================ */

html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs-custom {
    background: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--sb-shadow) !important;
    overflow: hidden;
}

html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs-custom > .nav-tabs,
html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs {
    background: var(--sb-surface-2) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs-custom > .tab-content,
html[data-theme="dark"]
body.saverbro-main-layout
.tab-content {
    background: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

/* Inactive tabs */
html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs > li > a {
    background: var(--sb-surface-2) !important;
    color: var(--sb-text-secondary) !important;
    border-color: transparent !important;
}

/* Inactive tab hover */
html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs > li > a:hover,
html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs > li > a:focus {
    background: var(--sb-surface-3) !important;
    color: var(--sb-primary-light) !important;
    border-color: var(--sb-border) !important;
}

/* Active tab */
html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs > li.active > a,
html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs > li.active > a:hover,
html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs > li.active > a:focus {
    background: var(--sb-surface) !important;
    color: var(--sb-primary-light) !important;
    border-color: var(--sb-border) !important;
    border-bottom-color: var(--sb-surface) !important;
    font-weight: 700 !important;
}

/* Cyan active-tab indicator */
html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs-custom > .nav-tabs > li.active {
    border-top-color: var(--sb-primary-light) !important;
}

/* Tab icons */
html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs > li.active > a i,
html[data-theme="dark"]
body.saverbro-main-layout
.nav-tabs > li.active > a svg {
    color: var(--sb-primary-light) !important;
}


/* ============================================================
   DARK MODE — BUSINESS SETTINGS
   ============================================================ */

/* Main tab content area */
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .pos-tab-content {
    background-color: var(--sb-surface) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

/* Left settings navigation */
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .list-group-item {
    background-color: var(--sb-surface-2) !important;
    color: var(--sb-text-secondary) !important;
    border-color: var(--sb-border) !important;
}

/* Hovered settings tab */
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .list-group-item:hover,
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .list-group-item:focus {
    background-color: var(--sb-surface-3) !important;
    color: var(--sb-primary-light) !important;
}

/* Selected settings tab */
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .list-group-item.active,
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .list-group-item.active:hover,
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .list-group-item.active:focus {
    background: linear-gradient(
        90deg,
        #2563eb,
        #0284c7
    ) !important;

    color: #ffffff !important;
    border-color: #38bdf8 !important;
    font-weight: 700 !important;
}

/* Labels */
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .pos-tab-content label {
    color: var(--sb-text-secondary) !important;
}

/* Help text */
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .pos-tab-content .help-block,
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .pos-tab-content small,
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .pos-tab-content em {
    color: var(--sb-text-muted) !important;
}

/* Inputs and dropdowns */
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .pos-tab-content .form-control,
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .pos-tab-content .input-group-addon,
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .pos-tab-content select,
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .pos-tab-content textarea {
    background-color: var(--sb-surface-2) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

/* Select2 fields */
html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .select2-selection {
    background-color: var(--sb-surface-2) !important;
    color: var(--sb-text) !important;
    border-color: var(--sb-border) !important;
}

html[data-theme="dark"]
body.saverbro-main-layout
#bussiness_edit_form .select2-selection__rendered {
    color: var(--sb-text) !important;
}



/* ============================================================
   FORCE HEADER BRAND TO WHITE — BOTH THEMES
   ============================================================ */

.main-header .logo,
.main-header .logo *,
.main-header .logo-lg,
.main-header .logo-mini,
.main-header .brand-link,
.main-header .brand-link *,
.main-header .brand-text,
header .logo,
header .logo *,
header .logo-lg,
header .logo-mini,
header .brand-text,
header .tw-text-lg,
header .tw-text-xl,
header .tw-font-semibold {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

/* ============================================================
   DASHBOARD LIGHT-MODE PASTEL PALETTE
   ============================================================ */

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi--revenue {
    --sb-kpi-bg: #dcfce7;
    --sb-kpi-accent: #047857;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi--purchase {
    --sb-kpi-bg: #ede9fe;
    --sb-kpi-accent: #6d28d9;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi--due {
    --sb-kpi-bg: #fef3c7;
    --sb-kpi-accent: #a15c00;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi--adjustments {
    --sb-kpi-bg: #fef7d6;
    --sb-kpi-accent: #8a6508;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi--transactions {
    --sb-kpi-bg: #cffafe;
    --sb-kpi-accent: #0e7490;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi--returns {
    --sb-kpi-bg: #fce7f3;
    --sb-kpi-accent: #be185d;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi--expenses {
    --sb-kpi-bg: #e0f2fe;
    --sb-kpi-accent: #0369a1;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi--visits {
    --sb-kpi-bg: #dbeafe;
    --sb-kpi-accent: #0369a1;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi {
    color: #14213d !important;

    background: var(--sb-kpi-bg, #ffffff) !important;
    background-image: none !important;

    border: 1px solid rgba(148, 163, 184, 0.14) !important;

    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi__icon {
    color: var(--sb-kpi-accent, #0284c7) !important;

    background: rgba(255, 255, 255, 0.48) !important;

    border-color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi__icon i,
html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi__icon svg {
    color: var(--sb-kpi-accent, #0284c7) !important;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi__label,
html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi__value {
    color: #14213d !important;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-kpi__hint {
    color: #526174 !important;
}


/* Light-mode welcome card */

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-header-row {
    color: #14213d !important;

    background:
        linear-gradient(
            135deg,
            #eff6ff 0%,
            #ffffff 55%,
            #f0fdfa 100%
        ) !important;

    border: 1px solid #dbe7f1 !important;

    box-shadow:
        0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-header-row h1,
html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-header-row .sb-dashboard-welcome,
html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-header-row .sb-dashboard-filter-label {
    color: #14213d !important;
}

html[data-theme="light"]
.saverbro-dashboard
.sb-dashboard-filter-button {
    color: #14213d !important;

    background: #ffffff !important;

    border: 1px solid #cbd5e1 !important;
}


/* ============================================================
   DASHBOARD PHONE VIEW
   ============================================================ */

@media (max-width: 767.98px) {
    .saverbro-dashboard {
        width: 100%;
        max-width: 100%;

        overflow-x: hidden !important;
    }


    /* Welcome card */

    .saverbro-dashboard
    .sb-dashboard-header-row {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 1.25rem !important;

        gap: 1rem !important;

        align-items: stretch !important;

        border-radius: 16px !important;
    }

    .saverbro-dashboard
    .sb-dashboard-header-row > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
    }

    .saverbro-dashboard
    .sb-dashboard-intro h1 {
        margin: 0 0 0.4rem !important;

        font-size: 1.75rem !important;
        line-height: 1.15 !important;
    }

    .saverbro-dashboard
    .sb-dashboard-header-filters {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 0.8rem !important;
    }

    .saverbro-dashboard
    .sb-dashboard-filter-control,
    .saverbro-dashboard
    .sb-dashboard-filter-control--date,
    .saverbro-dashboard
    .sb-dashboard-filter-control .select2-container,
    .saverbro-dashboard
    .sb-dashboard-filter-control .select2-selection,
    .saverbro-dashboard
    #dashboard_location,
    .saverbro-dashboard
    #dashboard_date_filter {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .saverbro-dashboard
    .sb-dashboard-filter-control .select2-selection,
    .saverbro-dashboard
    #dashboard_date_filter {
        min-height: 44px !important;
    }


    /* KPI area */

    .saverbro-dashboard
    .sb-dashboard-kpi-area {
        width: 100% !important;
        max-width: 100% !important;

        padding: 1rem !important;

        overflow: visible !important;
    }

    .saverbro-dashboard
    .sb-dashboard-kpi-grid {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 1rem !important;
    }

    .saverbro-dashboard
    .sb-dashboard-kpi-grid--secondary {
        margin-top: 1rem !important;
    }

    .saverbro-dashboard
    .sb-dashboard-kpi {
        display: flex !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 128px !important;

        padding: 1.25rem !important;

        gap: 1rem !important;

        align-items: center !important;

        border-radius: 16px !important;

        overflow: visible !important;
    }

    .saverbro-dashboard
    .sb-dashboard-kpi__icon {
        display: inline-flex !important;

        width: 48px !important;
        height: 48px !important;

        min-width: 48px !important;

        flex: 0 0 48px !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 12px !important;
    }

    .saverbro-dashboard
    .sb-dashboard-kpi__content {
        width: auto !important;
        min-width: 0 !important;

        flex: 1 1 auto !important;

        overflow: visible !important;
    }

    .saverbro-dashboard
    .sb-dashboard-kpi__label {
        margin: 0 0 0.45rem !important;

        font-size: 0.75rem !important;
        line-height: 1.25 !important;

        letter-spacing: 0.08em !important;

        white-space: normal !important;
    }

    .saverbro-dashboard
    .sb-dashboard-kpi__value {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 1.7rem !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;

        letter-spacing: -0.035em !important;

        white-space: nowrap !important;

        overflow: visible !important;
        text-overflow: clip !important;
    }

    .saverbro-dashboard
    .sb-dashboard-kpi__hint {
        margin: 0.45rem 0 0 !important;

        color: inherit;

        font-size: 0.8rem !important;
        line-height: 1.35 !important;

        white-space: normal !important;

        overflow: visible !important;
    }
}


/* Extra-small phones */

@media (max-width: 374.98px) {
    .saverbro-dashboard
    .sb-dashboard-header-row,
    .saverbro-dashboard
    .sb-dashboard-kpi {
        padding: 1rem !important;
    }

    .saverbro-dashboard
    .sb-dashboard-kpi {
        min-height: 118px !important;

        gap: 0.8rem !important;
    }

    .saverbro-dashboard
    .sb-dashboard-kpi__value {
        font-size: 1.45rem !important;
    }
}

/* ============================================================
   FINAL KPI LIGHT MODE + MOBILE OVERRIDE
   Must remain at the bottom of saverbro-theme.css
   ============================================================ */


/* Card-specific light colours */

html[data-theme="light"] body .sb-dashboard-kpi--revenue {
    --sb-kpi-bg: #dcfce7;
    --sb-kpi-accent: #047857;
}

html[data-theme="light"] body .sb-dashboard-kpi--purchase {
    --sb-kpi-bg: #ede9fe;
    --sb-kpi-accent: #6d28d9;
}

html[data-theme="light"] body .sb-dashboard-kpi--due {
    --sb-kpi-bg: #fef3c7;
    --sb-kpi-accent: #a15c00;
}

html[data-theme="light"] body .sb-dashboard-kpi--adjustments {
    --sb-kpi-bg: #fef7d6;
    --sb-kpi-accent: #8a6508;
}

html[data-theme="light"] body .sb-dashboard-kpi--transactions {
    --sb-kpi-bg: #cffafe;
    --sb-kpi-accent: #0e7490;
}

html[data-theme="light"] body .sb-dashboard-kpi--returns {
    --sb-kpi-bg: #fce7f3;
    --sb-kpi-accent: #be185d;
}

html[data-theme="light"] body .sb-dashboard-kpi--expenses {
    --sb-kpi-bg: #e0f2fe;
    --sb-kpi-accent: #0369a1;
}

html[data-theme="light"] body .sb-dashboard-kpi--visits {
    --sb-kpi-bg: #dbeafe;
    --sb-kpi-accent: #0369a1;
}


/* Override the existing dark gradients in light mode */

html[data-theme="light"] body .sb-dashboard-kpi {
    color: #14213d !important;

    background-color: var(--sb-kpi-bg, #ffffff) !important;
    background-image: none !important;
    background: var(--sb-kpi-bg, #ffffff) !important;

    border: 1px solid rgba(148, 163, 184, 0.14) !important;

    box-shadow:
        0 14px 30px rgba(15, 23, 42, 0.10) !important;
}

html[data-theme="light"] body .sb-dashboard-kpi__label,
html[data-theme="light"] body .sb-dashboard-kpi__value {
    color: #14213d !important;
}

html[data-theme="light"] body .sb-dashboard-kpi__hint {
    color: #526174 !important;
}

html[data-theme="light"] body .sb-dashboard-kpi__icon {
    color: var(--sb-kpi-accent, #0284c7) !important;

    background: rgba(255, 255, 255, 0.48) !important;

    border-color: rgba(255, 255, 255, 0.65) !important;
}

html[data-theme="light"] body .sb-dashboard-kpi__icon i,
html[data-theme="light"] body .sb-dashboard-kpi__icon svg {
    color: var(--sb-kpi-accent, #0284c7) !important;
}


/* Phone layout */

@media screen and (max-width: 767.98px) {
    body .sb-dashboard-kpi-area {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        padding: 1rem !important;

        overflow: visible !important;
    }

    body .sb-dashboard-kpi-area > .sb-dashboard-kpi-grid {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 1rem !important;

        margin: 0 !important;
    }

    body
    .sb-dashboard-kpi-area
    > .sb-dashboard-kpi-grid--secondary {
        margin-top: 1rem !important;
    }

    body
    .sb-dashboard-kpi-area
    > .sb-dashboard-kpi-grid
    > .sb-dashboard-kpi {
        display: flex !important;

        grid-column: 1 / -1 !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 128px !important;

        margin: 0 !important;
        padding: 1.25rem !important;

        gap: 1rem !important;

        align-items: center !important;

        border-radius: 16px !important;

        overflow: visible !important;
    }

    body .sb-dashboard-kpi__icon {
        display: inline-flex !important;

        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;

        flex: 0 0 48px !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 12px !important;
    }

    body .sb-dashboard-kpi__content {
        width: auto !important;
        min-width: 0 !important;

        flex: 1 1 auto !important;

        overflow: visible !important;
    }

    body .sb-dashboard-kpi__label {
        margin: 0 0 0.45rem !important;

        color: inherit;

        font-size: 0.75rem !important;
        line-height: 1.25 !important;

        letter-spacing: 0.08em !important;

        white-space: normal !important;
    }

    body .sb-dashboard-kpi__value {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        color: inherit;

        font-size: 1.7rem !important;
        font-weight: 800 !important;
        line-height: 1.1 !important;

        letter-spacing: -0.035em !important;

        white-space: nowrap !important;

        overflow: visible !important;
        text-overflow: clip !important;
    }

    body .sb-dashboard-kpi__hint {
        margin: 0.45rem 0 0 !important;

        font-size: 0.8rem !important;
        line-height: 1.35 !important;

        white-space: normal !important;

        overflow: visible !important;
    }
}


@media screen and (max-width: 374.98px) {
    body
    .sb-dashboard-kpi-area
    > .sb-dashboard-kpi-grid
    > .sb-dashboard-kpi {
        min-height: 118px !important;

        padding: 1rem !important;

        gap: 0.8rem !important;
    }

    body .sb-dashboard-kpi__value {
        font-size: 1.45rem !important;
    }
}

/* ============================================================
   DARK MODE — WHITE KPI VALUES
   ============================================================ */

html[data-theme="dark"] .sb-dashboard-kpi__value,
html[data-theme="dark"] .sb-dashboard-kpi__value *,
html[data-theme="dark"] .sb-dashboard-kpi__value span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    opacity: 1 !important;

    font-weight: 800 !important;
}