/*
 * SyncBridge POS — Theme Overrides
 * Modern, responsive theme layered on top of the legacy SmartHR template.
 * Color system, typography, layout, and mobile responsiveness in one file.
 */

/* ============ Typography — force Inter to fix CircularStd local() wide-variant fallback ============ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body span, body label, body input, body button, body a,
body small, body strong, body div {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
    font-stretch: normal !important;
    font-variant: normal !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Keep icon fonts intact — Line Awesome / Font Awesome / Material need their original family + weight */
i.la, i.las, .la, .las            { font-family: 'Line Awesome Free' !important;   font-weight: 900 !important; font-style: normal !important; }
i.lar, .lar                       { font-family: 'Line Awesome Free' !important;   font-weight: 400 !important; font-style: normal !important; }
i.lab, .lab                       { font-family: 'Line Awesome Brands' !important; font-weight: 400 !important; font-style: normal !important; }
i.fa, i.fab, i.fas, i.far,
.fa, .fab, .fas, .far             { font-family: 'FontAwesome' !important;         font-style: normal !important; }
.material-icons                   { font-family: 'Material Icons' !important; }

/* Legacy icon-only spans in the SmartHR template (sidebar chevrons, etc) that rely on
   inherited font-family from their own stylesheet rule. The global Inter override on
   `body span` was clobbering them, breaking the glyph rendering. */
.menu-arrow, .menu-arrow:before,
.menu-arrow:after,
.has-arrow .arrow,
.dropdown-toggle::after,
.carousel-control-prev-icon, .carousel-control-next-icon {
    font-family: 'FontAwesome' !important;
}

:root {
    /* Brand & semantic colors */
    --sb-primary: #2563eb;
    --sb-primary-dark: #1d4ed8;
    --sb-primary-light: #3b82f6;
    --sb-primary-soft: rgba(37, 99, 235, 0.10);
    --sb-accent: #10b981;
    --sb-accent-dark: #059669;
    --sb-accent-soft: rgba(16, 185, 129, 0.10);
    --sb-warning: #f59e0b;
    --sb-warning-soft: rgba(245, 158, 11, 0.12);
    --sb-danger: #ef4444;
    --sb-danger-soft: rgba(239, 68, 68, 0.10);
    --sb-info: #06b6d4;
    --sb-info-soft: rgba(6, 182, 212, 0.10);

    /* Surfaces & text */
    --sb-bg: #f1f5f9;
    --sb-surface: #ffffff;
    --sb-surface-alt: #f8fafc;
    --sb-border: #e2e8f0;
    --sb-border-strong: #cbd5e1;
    --sb-text: #0f172a;
    --sb-text-muted: #64748b;
    --sb-text-subtle: #94a3b8;

    /* Sidebar */
    --sb-sidebar-bg: #0f172a;
    --sb-sidebar-bg-alt: #1e293b;
    --sb-sidebar-text: #cbd5e1;
    --sb-sidebar-text-strong: #f8fafc;
    --sb-sidebar-active: #2563eb;
    --sb-sidebar-active-bg: rgba(37, 99, 235, 0.16);

    /* Shape & motion */
    --sb-radius: 12px;
    --sb-radius-sm: 8px;
    --sb-radius-lg: 16px;
    --sb-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --sb-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    --sb-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --sb-transition: all .2s ease;
}

/* ============ Base ============ */
body {
    background-color: var(--sb-bg) !important;
    color: var(--sb-text) !important;
    font-feature-settings: "kern", "liga", "calt", "tnum";
}

a { color: var(--sb-primary); }
a:hover { color: var(--sb-primary-dark); }

/* ============ Buttons ============ */
.btn {
    border-radius: var(--sb-radius-sm);
    font-weight: 500;
    transition: var(--sb-transition);
    padding: .5rem 1rem;
}
.btn-primary {
    background-color: var(--sb-primary) !important;
    border-color: var(--sb-primary) !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--sb-primary-dark) !important;
    border-color: var(--sb-primary-dark) !important;
    transform: translateY(-1px);
}
.btn-success {
    background-color: var(--sb-accent) !important;
    border-color: var(--sb-accent) !important;
}
.btn-success:hover { background-color: var(--sb-accent-dark) !important; border-color: var(--sb-accent-dark) !important; }
.btn-warning { background-color: var(--sb-warning) !important; border-color: var(--sb-warning) !important; color: #fff !important; }
.btn-danger { background-color: var(--sb-danger) !important; border-color: var(--sb-danger) !important; }
.btn-info { background-color: var(--sb-info) !important; border-color: var(--sb-info) !important; color: #fff !important; }
.btn-outline-primary { color: var(--sb-primary) !important; border-color: var(--sb-primary) !important; background: #fff; }
.btn-outline-primary:hover { background: var(--sb-primary) !important; color: #fff !important; }
.btn-outline-danger { color: var(--sb-danger) !important; border-color: var(--sb-danger) !important; background: #fff; }
.btn-outline-danger:hover { background: var(--sb-danger) !important; color: #fff !important; }
.btn-outline-secondary, .btn-secondary {
    background-color: #64748b !important;
    border-color: #64748b !important;
    color: #fff !important;
}
.btn-outline-secondary:hover, .btn-secondary:hover {
    background-color: #475569 !important;
    border-color: #475569 !important;
}

/* Consistent action-button row spacing (works for the View/Delete/Back pattern) */
.sb-actions, .page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}
.sb-actions .btn, .page-actions .btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
@media (max-width: 575.98px) {
    .sb-actions .btn, .page-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============ Cards ============ */
.card {
    border: 1px solid var(--sb-border) !important;
    border-radius: var(--sb-radius) !important;
    box-shadow: var(--sb-shadow-sm) !important;
    background-color: var(--sb-surface) !important;
    transition: var(--sb-transition);
}
.card:hover { box-shadow: var(--sb-shadow) !important; }
.card-header {
    background-color: var(--sb-surface) !important;
    border-bottom: 1px solid var(--sb-border) !important;
    padding: 1rem 1.25rem !important;
}
.card-body { padding: 1.25rem !important; }

/* KPI accent cards (used on dashboard) */
.card.border-left-primary { border-left: 4px solid var(--sb-primary) !important; }
.card.border-left-success { border-left: 4px solid var(--sb-accent) !important; }
.card.border-left-info    { border-left: 4px solid var(--sb-info) !important; }
.card.border-left-warning { border-left: 4px solid var(--sb-warning) !important; }
.card.border-left-danger  { border-left: 4px solid var(--sb-danger) !important; }

.text-primary { color: var(--sb-primary) !important; }
.text-success { color: var(--sb-accent) !important; }
.text-info    { color: var(--sb-info) !important; }
.text-warning { color: var(--sb-warning) !important; }
.text-danger  { color: var(--sb-danger) !important; }
.text-gray-800 { color: var(--sb-text) !important; }
.text-gray-300 { color: var(--sb-text-subtle) !important; }

/* Badges */
.badge {
    font-weight: 500;
    padding: .35em .65em;
    border-radius: 999px;
}
.badge.bg-success, .badge-success { background-color: var(--sb-accent) !important; color: #fff; }
.badge.bg-warning, .badge-warning { background-color: var(--sb-warning) !important; color: #fff; }
.badge.bg-danger, .badge-danger   { background-color: var(--sb-danger) !important; color: #fff; }
.badge.bg-info, .badge-info       { background-color: var(--sb-info) !important; color: #fff; }
.badge.bg-primary, .badge-primary { background-color: var(--sb-primary) !important; color: #fff; }

/* ============ Header ============ *
 * Legacy admin header (.header used by layouts.app) — made to LOOK identical
 * to the POS terminal's Tailwind bar: subtle white-to-grey gradient, soft
 * bottom shadow, dark sidebar slot on the left, polished bell + user pieces.
 */
.header {
    background: linear-gradient(180deg, #ffffff 0%, #fafbfd 100%) !important;
    border-bottom: 1px solid var(--sb-border) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06) !important;
    height: 60px !important;
}
.header .nav.user-menu { align-items: center; }
.header .user-menu > li.nav-item { display: inline-flex; align-items: center; }
.header .user-menu .nav-link { color: var(--sb-text) !important; }
.header .user-menu .nav-link:hover { color: var(--sb-primary) !important; }

/* User dropdown — bigger avatar, cleaner spacing, ring on hover */
.header .user-menu .main-drop > .nav-link {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 12px !important;
    border-radius: 10px;
}
.header .user-menu .main-drop > .nav-link:hover {
    background: var(--sb-surface-alt);
}
.header .user-menu .user-img img {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--sb-border);
}
.header .user-menu .user-img .status.online {
    background: var(--sb-accent) !important;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--sb-accent);
}
.header .user-menu .main-drop > .nav-link > span:not(.user-img) {
    font-weight: 600;
    color: var(--sb-text);
}

/* Dropdown menus — modernise (rounded, soft shadow, clean items) */
.header .dropdown-menu {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow);
    padding: 6px;
    min-width: 220px;
    margin-top: 8px;
}
.header .dropdown-menu .dropdown-item {
    padding: 8px 12px;
    border-radius: var(--sb-radius-sm);
    color: var(--sb-text);
    font-size: .9rem;
}
.header .dropdown-menu .dropdown-item:hover,
.header .dropdown-menu .dropdown-item:focus {
    background: var(--sb-primary-soft);
    color: var(--sb-primary);
}
.header .dropdown-menu .dropdown-item.text-danger { color: var(--sb-danger); }
.header .dropdown-menu .dropdown-item.text-danger:hover { background: var(--sb-danger-soft); color: var(--sb-danger); }
.header .dropdown-menu form { margin: 0; }
.header .dropdown-divider { margin: 4px 0; border-color: var(--sb-border); }

/* Notification bell — make it match the POS bell visually */
.header .user-menu .noti-icon, .header .user-menu .notification-bell-link, .header .user-menu li > a > i.la-bell {
    font-size: 18px;
    color: var(--sb-text-muted) !important;
}
.header .user-menu li > a > i.la-bell + .badge,
.header .user-menu .notification-badge {
    background: var(--sb-danger) !important;
    border: 2px solid #fff !important;
    font-size: .65rem !important;
    font-weight: 700 !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 14px !important;
}
.header .header-left {
    background: var(--sb-sidebar-bg) !important;
    width: 230px !important;          /* match the .sidebar width (style.css line 1507) */
    padding: 0 !important;
    text-align: left !important;
    overflow: hidden;
}
.header .header-left .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    height: 60px !important;
    line-height: 1 !important;        /* kill legacy line-height:60px that breaks flex */
    padding: 0 16px !important;
    width: 100% !important;
    color: var(--sb-sidebar-text-strong) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
.header .header-left .sb-brand-icon {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--sb-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.header .header-left .sb-brand-text {
    color: #fff;
    font-weight: 600;
    letter-spacing: .2px;
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.header .header-left .sb-brand-text strong { color: var(--sb-primary-light); font-weight: 700; }

/* Collapsed sidebar (legacy template adds .mini-sidebar to body) — show icon only */
body.mini-sidebar .header .header-left { width: 60px !important; }
body.mini-sidebar .header .header-left .logo { justify-content: center !important; padding: 0 12px !important; }
body.mini-sidebar .header .header-left .sb-brand-text { display: none !important; }

/* Compact on tablets so the title row has more room */
@media (max-width: 991.98px) {
    .header .header-left { width: 200px !important; }
    .header .header-left .sb-brand-text { font-size: .95rem; }
}

/* =====================================================================
 * Dedicated mobile header (≤767.98px)
 *
 * The legacy .header uses float + absolute positioning that overrides any
 * attempt to repurpose it cleanly. Strategy: on mobile we HIDE the legacy
 * .header entirely and render a purpose-built .sb-mobile-header partial
 * (resources/views/layouts/partials/mobile-header.blade.php). On desktop
 * the new partial is hidden and the legacy header is shown.
 * ===================================================================== */
.sb-mobile-header { display: none; }  /* hidden on desktop by default */

@media (max-width: 767.98px) {
    /* Hide the legacy header and its inner pieces — nothing from it shows */
    .header { display: none !important; }
    /* Show our clean mobile header instead */
    .sb-mobile-header {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 56px;
        padding: 0 8px 0 4px;
        background: #fff;
        border-bottom: 1px solid var(--sb-border);
        box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 1040;
    }
    body { padding-top: 56px; }
    .page-wrapper { padding-top: 0 !important; }
    /* Restore main-wrapper margin handling (no longer relying on legacy .header height) */
    .main-wrapper { margin-top: 0 !important; }
}

/* --- Mobile header pieces (all scoped under .sb-mobile-header) --- */
.sb-mobile-header .sb-mh-btn {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    width: 42px; height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-text);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    text-decoration: none !important;
    position: relative;
    font-size: 20px;
    flex: 0 0 auto;
}
.sb-mobile-header .sb-mh-btn:hover,
.sb-mobile-header .sb-mh-btn:focus {
    background: var(--sb-surface-alt);
    color: var(--sb-primary);
}
.sb-mobile-header .sb-mh-hamburger { color: var(--sb-text); }

.sb-mobile-header .sb-mh-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--sb-text) !important;
    text-decoration: none !important;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 4px;
}
.sb-mobile-header .sb-mh-mark {
    width: 32px; height: 32px; flex: 0 0 32px;
    border-radius: 9px;
    background: var(--sb-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, .25);
}
.sb-mobile-header .sb-mh-mark i { color: #fff !important; font-size: 16px; }
.sb-mobile-header .sb-mh-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sb-text);
    letter-spacing: .1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.sb-mobile-header .sb-mh-title strong {
    color: var(--sb-primary);
    font-weight: 700;
}

.sb-mobile-header .sb-mh-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

/* Status dot — silent, no background */
.sb-mobile-header .sb-mh-status {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
}
.sb-mobile-header .sb-mh-status [data-sb-status] {
    width: 10px; height: 10px;
}

/* Sync icon button + queue count badge */
.sb-mobile-header .sb-mh-sync .la-sync {
    font-size: 18px;
}
.sb-mobile-header .sb-mh-count {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: transparent;
    color: transparent;
    font-size: .65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.sb-mobile-header .sb-mh-count.has-pending {
    background: var(--sb-warning);
    color: #fff;
}

/* Notification bell badge */
.sb-mobile-header .sb-mh-bell { color: var(--sb-text); }
.sb-mobile-header .sb-mh-bell .la-bell { font-size: 20px; }
.sb-mobile-header .sb-mh-badge {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--sb-danger);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* Avatar button */
.sb-mobile-header .sb-mh-avatar {
    width: 38px; height: 38px;
    padding: 0;
    overflow: hidden;
    background: var(--sb-surface-alt);
}
.sb-mobile-header .sb-mh-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.sb-mobile-header .sb-mh-avatar-fallback {
    width: 100%; height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--sb-primary-soft);
    color: var(--sb-primary);
    font-weight: 700;
    font-size: .95rem;
}

.sb-mobile-header .sb-mh-user .dropdown-menu {
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow);
    padding: 6px;
    min-width: 180px;
}
.sb-mobile-header .sb-mh-user .dropdown-item {
    border-radius: var(--sb-radius-sm);
    padding: 8px 12px;
}
.sb-mobile-header .sb-mh-user .dropdown-item:hover {
    background: var(--sb-primary-soft);
    color: var(--sb-primary);
}

/* Very narrow phones */
@media (max-width: 380px) {
    .sb-mobile-header .sb-mh-title { font-size: .9rem; }
    .sb-mobile-header .sb-mh-btn { width: 38px; height: 38px; }
    .sb-mobile-header .sb-mh-avatar { width: 36px; height: 36px; }
}
.header .page-title-box h3 {
    color: var(--sb-text) !important;
    font-size: 1.05rem;
    font-weight: 600;
}
.header .user-menu .nav-link { color: var(--sb-text-muted) !important; }
.header #toggle_btn .bar-icon span { background-color: var(--sb-primary) !important; }

/* ============ Sidebar ============ */
.sidebar {
    background: var(--sb-sidebar-bg) !important;
    border-right: 1px solid #0b1220 !important;
}
.sidebar-inner { background: var(--sb-sidebar-bg) !important; }
.sidebar .sidebar-menu > ul > li > a {
    color: var(--sb-sidebar-text) !important;
    padding: 11px 18px !important;
    border-radius: 0 !important;
    transition: var(--sb-transition);
    font-weight: 500;
    border-left: 3px solid transparent;
}
.sidebar .sidebar-menu > ul > li > a:hover {
    background: var(--sb-sidebar-bg-alt) !important;
    color: var(--sb-sidebar-text-strong) !important;
    border-left-color: var(--sb-primary-light);
}
.sidebar .sidebar-menu > ul > li.active > a,
.sidebar .sidebar-menu > ul > li.subdrop > a {
    background: var(--sb-sidebar-active-bg) !important;
    color: var(--sb-sidebar-text-strong) !important;
    border-left-color: var(--sb-primary) !important;
}
.sidebar .sidebar-menu > ul > li > a i {
    color: var(--sb-primary-light) !important;
    font-size: 18px !important;
    margin-right: 10px;
    width: 22px;
    text-align: center;
}
.sidebar .sidebar-menu ul ul a {
    color: var(--sb-text-subtle) !important;
    padding: 7px 18px 7px 68px !important;
    font-size: .8125rem;             /* 13px — smaller than main menu (15px) */
    line-height: 1.4;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 3px solid transparent;
    transition: var(--sb-transition);
}
.sidebar .sidebar-menu ul ul a:hover {
    color: var(--sb-sidebar-text-strong) !important;
    background: var(--sb-sidebar-bg-alt) !important;
    border-left-color: var(--sb-primary-light) !important;
    padding-left: 65px !important;   /* keep text position fixed (3px border replaces 3px padding) */
}
.sidebar .sidebar-menu ul ul a.active {
    color: var(--sb-sidebar-text-strong) !important;
    background: var(--sb-sidebar-active-bg) !important;
    border-left-color: var(--sb-primary) !important;
    padding-left: 65px !important;
    text-decoration: none !important;
    font-weight: 500;
}
.sidebar .menu-title {
    color: var(--sb-text-subtle) !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 1px;
    padding: 20px 18px 8px !important;
    font-weight: 600;
}

/* Page wrapper background */
.page-wrapper { background: var(--sb-bg) !important; }
.page-wrapper > .content { padding: 24px !important; }

/* ============ Tables ============ */
.table { color: var(--sb-text); }
.table thead th {
    background: var(--sb-surface-alt);
    color: var(--sb-text-muted);
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--sb-border) !important;
    border-top: none !important;
}
.table td, .table th { border-color: var(--sb-border) !important; padding: .85rem !important; vertical-align: middle; }
.table-hover tbody tr:hover { background: var(--sb-surface-alt); }

/* ============ Forms ============ */
.form-control, .form-select, select.form-control {
    border-radius: var(--sb-radius-sm) !important;
    border-color: var(--sb-border) !important;
    height: 42px;
    color: var(--sb-text);
    transition: var(--sb-transition);
}
.form-control:focus, .form-select:focus {
    border-color: var(--sb-primary) !important;
    box-shadow: 0 0 0 3px var(--sb-primary-soft) !important;
}
label { color: var(--sb-text); font-weight: 500; margin-bottom: .35rem; }

/* ============ Alerts ============ */
.alert { border-radius: var(--sb-radius); border: 1px solid transparent; }
.alert-warning { background: var(--sb-warning-soft); border-color: rgba(245,158,11,.25); color: #92400e; }
.alert-success { background: var(--sb-accent-soft); border-color: rgba(16,185,129,.25); color: #065f46; }
.alert-danger  { background: var(--sb-danger-soft); border-color: rgba(239,68,68,.25); color: #991b1b; }
.alert-info    { background: var(--sb-info-soft); border-color: rgba(6,182,212,.25); color: #155e75; }

/* ============ Account / Auth pages ============ */
.account-page {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%) !important;
    min-height: 100vh;
}
.account-page .main-wrapper { background: transparent !important; }
.account-content { padding: 40px 16px; }
.account-logo img { max-height: 80px; }
.account-box {
    background: var(--sb-surface);
    border-radius: var(--sb-radius-lg) !important;
    box-shadow: var(--sb-shadow-lg) !important;
    overflow: hidden;
    border: none !important;
}
.account-wrapper { padding: 36px 32px !important; }
.account-title { color: var(--sb-text); font-weight: 700 !important; margin-bottom: 6px; }
.account-subtitle { color: var(--sb-text-muted); margin-bottom: 28px; }
.account-btn { background: var(--sb-primary) !important; border: none !important; padding: 12px !important; font-weight: 600 !important; }
.account-btn:hover { background: var(--sb-primary-dark) !important; }

/* Two-column auth layout — image / value-prop on the left, form on the right */
.sb-auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--sb-surface);
    border-radius: var(--sb-radius-lg);
    overflow: hidden;
    box-shadow: var(--sb-shadow-lg);
    max-width: 1040px;
    margin: 0 auto;
}
.sb-auth-pitch {
    background: linear-gradient(160deg, #1e3a8a 0%, #2563eb 60%, #0ea5e9 100%);
    color: #fff;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 560px;
}
.sb-auth-pitch h2 { color: #fff; font-weight: 700; font-size: 1.85rem; line-height: 1.25; }
.sb-auth-pitch p  { color: rgba(255,255,255,.85); }
.sb-auth-pitch .sb-feature {
    display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.15);
}
.sb-auth-pitch .sb-feature:first-of-type { border-top: none; }
.sb-auth-pitch .sb-feature i {
    flex: 0 0 36px; height: 36px; width: 36px;
    background: rgba(255,255,255,.15);
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.sb-auth-pitch .sb-feature strong { display: block; font-weight: 600; }
.sb-auth-pitch .sb-feature small { color: rgba(255,255,255,.75); }
.sb-auth-form-wrap { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; }

@media (max-width: 991.98px) {
    .sb-auth-grid { grid-template-columns: 1fr; }
    .sb-auth-pitch { min-height: auto; padding: 32px 24px; }
    .sb-auth-form-wrap { padding: 32px 24px; }
}

/* ============ Business hero (dashboard top) ============ */
.sb-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #06b6d4 100%);
    color: #fff;
    border-radius: var(--sb-radius-lg);
    padding: 28px 28px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.sb-hero::after {
    content: "";
    position: absolute;
    right: -60px; top: -60px;
    width: 220px; height: 220px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
}
.sb-hero::before {
    content: "";
    position: absolute;
    right: 80px; bottom: -40px;
    width: 140px; height: 140px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
}
.sb-hero .sb-hero-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 6px; color: #fff; }
.sb-hero .sb-hero-sub   { color: rgba(255,255,255,.85); margin: 0 0 16px; max-width: 720px; }
.sb-hero .sb-hero-tags  { display: flex; flex-wrap: wrap; gap: 8px; position: relative; z-index: 1; }
.sb-hero .sb-hero-tags span {
    background: rgba(255,255,255,.16);
    color: #fff;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 500;
    backdrop-filter: blur(8px);
}

/* ============ Module / business cards ============ */
.sb-module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}
.sb-module-card {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 18px;
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: var(--sb-transition);
}
.sb-module-card:hover {
    transform: translateY(-2px);
    border-color: var(--sb-primary);
    box-shadow: var(--sb-shadow);
    color: inherit;
}
.sb-module-card .sb-icon {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
    background: var(--sb-primary-soft);
    color: var(--sb-primary);
}
.sb-module-card.is-accent .sb-icon { background: var(--sb-accent-soft); color: var(--sb-accent); }
.sb-module-card.is-warning .sb-icon { background: var(--sb-warning-soft); color: var(--sb-warning); }
.sb-module-card.is-info .sb-icon { background: var(--sb-info-soft); color: var(--sb-info); }
.sb-module-card.is-danger .sb-icon { background: var(--sb-danger-soft); color: var(--sb-danger); }
.sb-module-card h6 { margin: 0; font-weight: 600; color: var(--sb-text); }
.sb-module-card p  { margin: 0; color: var(--sb-text-muted); font-size: .85rem; line-height: 1.45; }

/* ============ KPI card refresh ============ */
.kpi-card {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    transition: var(--sb-transition);
}
.kpi-card:hover { box-shadow: var(--sb-shadow); transform: translateY(-2px); }
.kpi-card .kpi-icon {
    flex: 0 0 50px; height: 50px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    background: var(--sb-primary-soft);
    color: var(--sb-primary);
}
.kpi-card.is-accent .kpi-icon  { background: var(--sb-accent-soft);  color: var(--sb-accent); }
.kpi-card.is-info .kpi-icon    { background: var(--sb-info-soft);    color: var(--sb-info); }
.kpi-card.is-warning .kpi-icon { background: var(--sb-warning-soft); color: var(--sb-warning); }
.kpi-card.is-danger .kpi-icon  { background: var(--sb-danger-soft);  color: var(--sb-danger); }
.kpi-card .kpi-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sb-text-muted);
    font-weight: 600;
    margin: 0;
}
.kpi-card .kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--sb-text);
    margin: 2px 0 0;
    line-height: 1.2;
}
.kpi-card .kpi-trend { font-size: .8rem; color: var(--sb-text-muted); margin-top: 2px; }

/* ============ Toggle button / mobile nav ============ */
#mobile_btn { color: var(--sb-text) !important; }

/* ============ Quick action grid ============ */
.sb-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.sb-quick-actions .sb-qa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 10px;
    background: var(--sb-surface-alt);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius-sm);
    color: var(--sb-text);
    text-decoration: none !important;
    transition: var(--sb-transition);
    font-weight: 500;
    font-size: .85rem;
    text-align: center;
}
.sb-quick-actions .sb-qa:hover {
    transform: translateY(-2px);
    border-color: var(--sb-primary);
    color: var(--sb-primary);
    background: var(--sb-primary-soft);
}
.sb-quick-actions .sb-qa i { font-size: 22px; color: var(--sb-primary); }
.sb-quick-actions .sb-qa.is-accent i { color: var(--sb-accent); }
.sb-quick-actions .sb-qa.is-warning i { color: var(--sb-warning); }
.sb-quick-actions .sb-qa.is-info i { color: var(--sb-info); }

/* ============ Responsive tuning ============ */
@media (max-width: 1199.98px) {
    .page-wrapper > .content { padding: 20px !important; }
    .sb-hero { padding: 22px; }
    .sb-hero .sb-hero-title { font-size: 1.4rem; }
}
@media (max-width: 991.98px) {
    .page-wrapper > .content { padding: 16px !important; }
    .sb-hero { padding: 20px; border-radius: var(--sb-radius); }
    .kpi-card { padding: 14px 16px; }
    .kpi-card .kpi-icon { flex: 0 0 42px; height: 42px; font-size: 18px; }
    .kpi-card .kpi-value { font-size: 1.2rem; }
}
@media (max-width: 767.98px) {
    .header .page-title-box { display: none !important; }
    .page-wrapper > .content { padding: 12px !important; }
    .sb-hero { padding: 18px 16px; }
    .sb-hero .sb-hero-title { font-size: 1.2rem; }
    .sb-hero .sb-hero-sub { font-size: .9rem; }
    .sb-module-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sb-module-card { padding: 14px; }
    .sb-module-card p { font-size: .78rem; }
    .card-body { padding: 1rem !important; }
    .card-header { padding: .85rem 1rem !important; }
    .table thead th, .table td, .table th { padding: .65rem !important; font-size: .85rem; }
    h1, .h1 { font-size: 1.6rem; }
    h3, .h3 { font-size: 1.2rem; }
}
@media (max-width: 575.98px) {
    .sb-module-grid { grid-template-columns: 1fr; }
    .sb-quick-actions { grid-template-columns: 1fr 1fr; }
    .account-wrapper { padding: 24px 20px !important; }
    .account-logo img { max-height: 60px; }
}

/* ============ Connectivity indicator ============ */
.sb-conn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sb-surface-alt);
    border: 1px solid var(--sb-border);
    font-size: .78rem;
    font-weight: 600;
    color: var(--sb-text-muted);
    white-space: nowrap;
}
[data-sb-status] {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--sb-text-subtle);
    display: inline-block;
    transition: background-color .2s ease, box-shadow .2s ease;
}
[data-sb-status].is-online {
    background: var(--sb-accent);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
    animation: sb-pulse-ok 2s ease-out infinite;
}
[data-sb-status].is-offline {
    background: var(--sb-danger);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .18);
    animation: sb-pulse-bad 1.4s ease-out infinite;
}
@keyframes sb-pulse-ok {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
    50%      { box-shadow: 0 0 0 6px rgba(16,185,129,.05); }
}
@keyframes sb-pulse-bad {
    0%, 100% { box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
    50%      { box-shadow: 0 0 0 6px rgba(239,68,68,.05); }
}

/* Offline banner — small floating chip in the bottom-right.
 * Doesn't push the page layout. Soft slide-in, auto fades.
 */
[data-sb-offline-banner] {
    position: fixed;
    bottom: 18px; right: 18px; left: auto; top: auto;
    z-index: 1080;
    background: #0f172a;
    color: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .25);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100vw - 36px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    transform: translateY(8px);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
}
[data-sb-offline-banner]:not([hidden]) {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
[data-sb-offline-banner]::before {
    content: "";
    width: 8px; height: 8px; border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
    flex: 0 0 8px;
}
[data-sb-offline-banner] i { display: none; }   /* color dot replaces the wifi icon */
[data-sb-offline-banner][hidden] { display: none !important; }
body.sb-offline { padding-top: 0; }  /* no page push — chip floats over content */

@media (max-width: 575.98px) {
    [data-sb-offline-banner] {
        bottom: 12px; right: 12px;
        font-size: .76rem;
        padding: 8px 12px;
    }
}

/* Sync count pill (e.g. on a button) */
[data-sb-sync-count].has-pending {
    background: var(--sb-warning);
    color: #fff;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: .72rem;
    font-weight: 700;
    margin-left: 6px;
}

/* Make any horizontally-scrollable element scroll smoothly on touch */
.table-responsive { -webkit-overflow-scrolling: touch; }

/* =====================================================================
 * Global button-row responsive rules
 *
 * Every admin page (reports, dashboards, lists) puts action buttons in
 * either:  <div class="d-flex gap-2"> ... </div>
 *      or: <div class="btn-group"> ... </div>
 *      or: <div class="d-sm-flex justify-content-between"> ... </div>
 *
 * Bootstrap 4.6 supports `.gap-*` but doesn't enforce wrapping, so on
 * narrow screens buttons overflow horizontally. These rules:
 *   - Force consistent gap on every action-button container
 *   - Allow wrapping so buttons stack rather than overflow
 *   - On <575px, every button in an action row goes full width
 * Applied site-wide. No per-page edits needed.
 * ===================================================================== */
.d-flex.gap-1, .d-flex.gap-2, .d-flex.gap-3,
.d-sm-flex.gap-1, .d-sm-flex.gap-2, .d-sm-flex.gap-3 {
    flex-wrap: wrap;
}
.d-flex.gap-2 { gap: .5rem !important; }
.d-flex.gap-3 { gap: .75rem !important; }

/* Polish for inline button groups (Refresh + Export dropdown patterns) */
.btn-group .btn { z-index: 1; }
.btn-group .btn:focus, .btn-group .btn:hover { z-index: 2; }

/* Buttons in page-header action rows */
.page-header .d-flex.gap-2 .btn,
.d-sm-flex.align-items-center.justify-content-between .d-flex.gap-2 .btn,
.d-sm-flex.justify-content-between .d-flex .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* On phones, action buttons stack and fill the row width */
@media (max-width: 575.98px) {
    .page-header .d-flex.gap-2,
    .d-sm-flex.justify-content-between .d-flex,
    form .d-flex.gap-2 {
        width: 100%;
    }
    .page-header .d-flex.gap-2 > .btn,
    .page-header .d-flex.gap-2 > .btn-group,
    .d-sm-flex.justify-content-between .d-flex > .btn,
    .d-sm-flex.justify-content-between .d-flex > .btn-group,
    form .d-flex.gap-2 > .btn,
    form .d-flex.gap-2 > .btn-group {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }
    .btn-group { width: 100%; }
    .btn-group > .btn { flex: 1 1 auto; }
    /* Page header titles drop their right-margin on mobile */
    .d-sm-flex.align-items-center.justify-content-between > h1,
    .d-sm-flex.align-items-center.justify-content-between > h3 { margin-bottom: 12px !important; }
}

/* Tablet: keep buttons inline but reduce padding to fit */
@media (max-width: 767.98px) {
    .page-header .btn-sm,
    .d-sm-flex.justify-content-between .btn-sm { padding: .35rem .7rem; font-size: .82rem; }
}

/* =====================================================================
 * Global responsive guardrails
 * Applied site-wide so every page degrades cleanly to mobile, regardless
 * of which legacy partial built the markup.
 * ===================================================================== */

/* Containers should never overflow horizontally */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Tighten container padding on small screens so cards don't get squished */
@media (max-width: 1199.98px) {
    .container-fluid, .content.container-fluid { padding-left: 16px !important; padding-right: 16px !important; }
}
@media (max-width: 767.98px) {
    .container-fluid, .content.container-fluid { padding-left: 12px !important; padding-right: 12px !important; }
    .page-header { margin-bottom: 14px !important; }
    .page-title { font-size: 1.15rem !important; }
}

/* On mobile the desktop sidebar is off-screen — neutralize its desktop offset */
@media (max-width: 991.98px) {
    .page-wrapper { margin-left: 0 !important; }
}

/* Any two-column .row with col-lg-* children stacks gracefully (POS, dashboard, settings...) */
@media (max-width: 991.98px) {
    .row > [class*="col-lg-"] + [class*="col-lg-"] { margin-top: 16px; }
}

/* Tables — always horizontally scrollable on small screens */
@media (max-width: 767.98px) {
    .table { font-size: .85rem; }
    .table > :not(caption) > * > * { padding: .55rem .6rem; }
    /* Auto-wrap raw tables in a horizontal-scroll shell via overflow */
    .card .table:not(.table-responsive) { display: block; overflow-x: auto; }
}

/* Cards — tighter padding on mobile so content gets more room */
@media (max-width: 767.98px) {
    .card-body { padding: 14px !important; }
    .card-header { padding: 12px 14px !important; }
}

/* Modal — full-width on phones, sane padding */
@media (max-width: 575.98px) {
    .modal-dialog { margin: 8px !important; max-width: calc(100vw - 16px) !important; }
    .modal-header { padding: 12px 14px !important; }
    .modal-body  { padding: 14px !important; }
    .modal-footer { padding: 12px 14px !important; flex-wrap: wrap; gap: 8px; }
    .modal-footer > .btn { flex: 1 1 auto; }
}

/* Forms — full-width controls and stacked label/help on mobile */
@media (max-width: 575.98px) {
    .form-row, .row.g-3 > [class*="col-"] { margin-bottom: 8px; }
    .input-group { flex-wrap: wrap; }
    .input-group > .form-control, .input-group > .form-select { min-width: 0; flex: 1 1 auto; }
}

/* ============ Modern Admin Header (matches POS top bar) ============ */
.sb-header .sb-user-menu { display: flex; align-items: center; gap: 10px; padding: 0 14px 0 0; }

/* Pills — Location, Clock */
.sb-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: var(--sb-text);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.sb-chip i { color: var(--sb-primary); font-size: 14px; }
.sb-chip-clock { font-variant-numeric: tabular-nums; min-width: 110px; justify-content: center; }
.sb-chip-clock i { color: var(--sb-info); }

/* User dropdown */
.sb-user-drop > .sb-user-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px !important;
    border-radius: 12px;
    background: transparent;
    color: var(--sb-text) !important;
    transition: var(--sb-transition);
}
.sb-user-drop > .sb-user-toggle:hover { background: var(--sb-surface-alt); }
.sb-user-drop > .sb-user-toggle::after { display: none !important; } /* hide Bootstrap caret */
.sb-user-drop .sb-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--sb-primary-soft);
    color: var(--sb-primary);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex: 0 0 34px;
    font-weight: 700;
    font-size: .9rem;
}
.sb-user-drop .sb-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sb-user-drop .sb-avatar.sb-avatar-initial { background: var(--sb-primary-soft); color: var(--sb-primary); }
.sb-user-drop .sb-user-name {
    font-weight: 600; font-size: .9rem; color: var(--sb-text);
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sb-user-drop .sb-user-caret { font-size: 12px; color: var(--sb-text-muted); margin-left: 2px; transition: transform .2s; }
.sb-user-drop.show .sb-user-caret { transform: rotate(180deg); }

/* Dropdown panel */
.sb-user-menu-drop {
    min-width: 240px !important;
    padding: 0 !important;
    border: 1px solid var(--sb-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px -10px rgba(15,23,42,.18) !important;
    overflow: hidden;
}
.sb-user-head { padding: 14px 16px; border-bottom: 1px solid var(--sb-border); background: var(--sb-surface-alt); }
.sb-user-head-name { font-weight: 700; color: var(--sb-text); font-size: .95rem; }
.sb-user-head-mail { color: var(--sb-text-muted); font-size: .8rem; display: block; margin-top: 2px; }
.sb-user-menu-drop .dropdown-item { padding: 10px 16px; font-size: .9rem; display: flex; align-items: center; gap: 10px; }
.sb-user-menu-drop .dropdown-item i { font-size: 16px; color: var(--sb-text-muted); width: 18px; text-align: center; }
.sb-user-menu-drop .dropdown-item.text-danger i { color: var(--sb-danger); }
.sb-user-menu-drop .dropdown-divider { margin: 0; border-color: var(--sb-border); }

/* Sidebar toggle button — keep the legacy responsive behavior (visible only on
   desktop via the media query in style.css). Just recolor the white bars so
   they're visible on the white header area, and brand them on hover. */
.header .bar-icon span { background-color: var(--sb-primary) !important; }
#toggle_btn:hover .bar-icon span { background-color: var(--sb-primary-dark) !important; }

/* Brand logo image (when CompanyProfile.logo is set, the sidebar slot shows
   the uploaded image instead of the default cash-register icon). */
.sb-brand-logo { max-height: 38px; width: auto; object-fit: contain; margin-right: 8px; }

/* ============ Scroll isolation: sidebar ⇄ content body ============
   The page <body> no longer scrolls. The sidebar has its own scroll context
   (already true via .sidebar-inner) and the content area gets its own.
   `overscroll-behavior: contain` stops scroll chaining so reaching the end
   of either container does NOT bubble up and move the other. */
@media (min-width: 992px) {
    html, body { height: 100%; overflow: hidden !important; }
    body { overscroll-behavior: none; }

    /* Sidebar inner already has overflow-y:auto + height calc — just contain. */
    .sidebar-inner { overscroll-behavior: contain; }

    /* Make the right-hand content the sole vertical scroller. */
    .page-wrapper {
        height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Pretty scrollbar inside the content area (matches sidebar style). */
    .page-wrapper::-webkit-scrollbar       { width: 8px; }
    .page-wrapper::-webkit-scrollbar-track { background: transparent; }
    .page-wrapper::-webkit-scrollbar-thumb { background: rgba(15,23,42,.18); border-radius: 4px; }
    .page-wrapper::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,.32); }
}

/* Mobile (< 992px): sidebar slides over as an overlay — let the body scroll. */
@media (max-width: 991.98px) {
    .sidebar-inner { overscroll-behavior: contain; }
}

/* Mobile tweaks */
@media (max-width: 767.98px) {
    .sb-header .sb-user-menu { gap: 4px; padding-right: 6px; }
    .sb-user-drop > .sb-user-toggle { padding: 4px !important; }
    .sb-user-drop .sb-user-name, .sb-user-drop .sb-user-caret { display: none; }
}

/* DataTables — keep them inside a horizontal scroll wrapper */
.dataTables_wrapper .dataTables_scroll,
.dataTables_wrapper .dataTables_scrollBody { overflow-x: auto; }
@media (max-width: 767.98px) {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length { float: none !important; text-align: left !important; margin-bottom: 8px; }
    .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin-left: 0 !important; }
}

/* Page action button rows — wrap nicely instead of clipping */
.page-header .btn, .page-header .btn-group { white-space: nowrap; }
@media (max-width: 575.98px) {
    .page-header .row { row-gap: 8px; }
    .page-header .col-auto { flex: 1 1 100%; max-width: 100%; }
    .page-header .col-auto > .btn,
    .page-header .col-auto > .btn-group { width: 100%; }
}

/* Breadcrumbs — wrap on mobile */
.breadcrumb { flex-wrap: wrap; row-gap: 4px; }

/* Ensure text doesn't overflow on narrow viewports */
.kpi-card .kpi-value,
.sb-module-card h6 { word-break: break-word; }