/* =============================================================================
   SYNCROSTORE THEME (syncrotheme.css)
   Clean, consolidated version - load LAST after bootstrap and other CSS
   ============================================================================= */

/* =============================================================================
   1. CSS VARIABLES (Design Tokens)
   ============================================================================= */
:root {
    /* Brand Colors */
    --ss-primary: #008000;
    --ss-primary-hover: #006B00;
    --ss-primary-active: #005700;
    --ss-primary-soft: #E8F5E9;
    /* Secondary (Navy) */
    --ss-navy: #0F172A;
    --ss-navy-hover: #0B1220;
    --ss-navy-focus: rgba(15, 23, 42, .22);
    /* Neutrals */
    --ss-bg: #F5F7FB;
    --ss-surface: #FFFFFF;
    --ss-surface-2: #F8FAFC;
    --ss-border: #E3E8EF;
    --ss-text: #1F2937;
    --ss-muted: #64748B;
    /* Status Colors */
    --ss-danger: #dc3545;
    --ss-danger-hover: #bb2d3b;
    --ss-warning: #F4A100;
    --ss-info: #2660A4;
    /* Effects */
    --ss-radius: 12px;
    --ss-radius-sm: 10px;
    --ss-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    --ss-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.08);
    --ss-shadow-pop: 0 18px 50px rgba(15, 23, 42, .18);
    /* Bootstrap Overrides */
    --bs-primary: var(--ss-primary);
    --bs-primary-rgb: 0, 128, 0;
    --bs-link-color: var(--ss-primary);
    --bs-link-hover-color: var(--ss-primary-hover);
    --bs-body-bg: var(--ss-bg);
    --bs-body-color: var(--ss-text);
}

/* =============================================================================
   2. BASE STYLES
   ============================================================================= */
body {
    background: var(--ss-bg);
    color: var(--ss-text);
}

/* =============================================================================
   3. CARDS
   ============================================================================= */
.card,
.ss-card,
.panel,
.dxbs-card {
    background: var(--ss-surface);
    border: 1px solid var(--ss-border);
    border-radius: var(--ss-radius);
    box-shadow: var(--ss-shadow-sm);
    background-image: none !important;
}

/* Card Header - White with Green Accent Bar */
.card-header,
.ss-card-header {
    background: var(--ss-surface) !important;
    color: var(--ss-text) !important;
    border-bottom: 1px solid var(--ss-border);
    border-top-left-radius: var(--ss-radius);
    border-top-right-radius: var(--ss-radius);
    padding: 14px 16px;
    font-weight: 700;
    position: relative;
}

    /* Accent bar on card headers */
    .card-header::before,
    .ss-card-header::before,
    .card-header.ss-accent::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: var(--ss-primary);
        border-top-left-radius: var(--ss-radius);
    }

/* Card with header actions - ensure overflow visible */
.card-header-actions {
    overflow: visible !important;
}

    .card-header-actions > .card-header {
        background: var(--ss-surface) !important;
        color: var(--ss-text) !important;
        border-bottom: 1px solid var(--ss-border);
        position: relative;
        padding-left: 24px;
        font-weight: 700;
        overflow: visible !important;
        z-index: 2;
        /* Override fixed height: 3.5625rem from styles.css */
        height: auto !important;
        min-height: 3.5625rem;
    }

        .card-header-actions > .card-header::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 6px;
            background: var(--ss-primary);
            border-top-left-radius: var(--ss-radius);
        }

.card-header .header-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ss-text);
}

/* =============================================================================
   4. BUTTONS
   ============================================================================= */

/* Primary Button (Green) */
html body .btn-primary,
html body .btn.btn-primary,
html body .dxbs-button.btn-primary,
html body a.btn.btn-primary,
html body button.btn.btn-primary {
    background-color: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: var(--ss-radius-sm);
}

    html body .btn-primary:hover,
    html body .dxbs-button.btn-primary:hover {
        background-color: var(--ss-primary-hover) !important;
        border-color: var(--ss-primary-hover) !important;
    }

    html body .btn-primary:active {
        background-color: var(--ss-primary-active) !important;
        border-color: var(--ss-primary-active) !important;
    }

/* Secondary Button (Navy) */
html body .btn-secondary,
html body .btn.btn-secondary,
html body .dxbs-button.btn-secondary,
html body a.btn.btn-secondary,
html body button.btn.btn-secondary {
    background-color: var(--ss-navy) !important;
    border-color: var(--ss-navy) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: var(--ss-radius-sm);
}

    html body .btn-secondary:hover,
    html body .dxbs-button.btn-secondary:hover {
        background-color: var(--ss-navy-hover) !important;
        border-color: var(--ss-navy-hover) !important;
    }

/* Danger Button (Red) */
html body .btn-danger,
html body .btn.btn-danger,
html body .dxbs-button.btn-danger {
    background-color: var(--ss-danger) !important;
    border-color: var(--ss-danger) !important;
    color: #fff !important;
    font-weight: 700 !important;
    border-radius: var(--ss-radius-sm);
}

    html body .btn-danger:hover,
    html body .dxbs-button.btn-danger:hover {
        background-color: var(--ss-danger-hover) !important;
        border-color: var(--ss-danger-hover) !important;
    }

    html body .btn-danger:focus,
    html body .dxbs-button.btn-danger:focus {
        box-shadow: 0 0 0 .25rem rgba(220, 53, 69, 0.25) !important;
    }

/* Success Button (Green - same as primary) */
.btn-success {
    background-color: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
}

    .btn-success:hover {
        background-color: var(--ss-primary-hover) !important;
        border-color: var(--ss-primary-hover) !important;
    }

/* Outline Primary */
.btn-outline-primary {
    border-color: var(--ss-primary);
    color: var(--ss-primary);
    border-radius: var(--ss-radius-sm);
    font-weight: 700;
}

    .btn-outline-primary:hover {
        background: var(--ss-primary);
        border-color: var(--ss-primary);
        color: #fff;
    }

/* Green utility button */
.btn-green {
    background-color: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
    color: #fff !important;
    font-weight: 700;
    border-radius: var(--ss-radius-sm);
}

    .btn-green:hover {
        background-color: var(--ss-primary-hover) !important;
        border-color: var(--ss-primary-hover) !important;
    }

/* Focus rings - green instead of blue */
html body .btn-primary:focus,
html body .btn-secondary:focus,
html body .dxbs-button:focus {
    box-shadow: 0 0 0 .25rem rgba(0, 128, 0, 0.18) !important;
}

/* DevExpress button styling */
.dxbs-button.btn,
.dxbs-button.btn-primary,
.dxbs-button.btn-secondary {
    padding: 8px 14px !important;
    min-height: 36px !important;
    line-height: 1.1 !important;
    border-radius: var(--ss-radius-sm) !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.dxbs-button .bx,
.dxbs-button i {
    font-size: 1.05rem !important;
    line-height: 1 !important;
}

/* =============================================================================
   5. FORM INPUTS
   ============================================================================= */
.form-control,
.form-select,
.dxbs-textbox input,
.dxbs-combobox input,
.dxbs-editor input {
    border-radius: var(--ss-radius-sm) !important;
    border: 1px solid var(--ss-border) !important;
    background: var(--ss-surface);
}

    .form-control:focus,
    .form-select:focus,
    .dxbs-textbox input:focus,
    .dxbs-combobox input:focus {
        border-color: rgba(0, 128, 0, .35) !important;
        box-shadow: 0 0 0 .25rem rgba(0, 128, 0, .18) !important;
    }

/* =============================================================================
   6. NAVIGATION - Top Bar & Sidebar
   ============================================================================= */

/* Top Navigation Bar - Green Gradient */
.navbar,
.topbar,
.ss-topbar,
header.navbar,
.navbar.ss-topbar,
nav.navbar.fixed-top {
    background: linear-gradient(90deg, var(--ss-primary), var(--ss-primary-hover)) !important;
}

    .ss-topbar .link-white,
    .ss-topbar .nav-link,
    .ss-topbar .navbar-brand {
        color: #fff !important;
    }

/* Sidebar - Navy */
.sidebar,
.ss-sidebar,
#layoutSidenav_nav,
.sb-sidenav,
.sb-sidenav-dark,
nav.sb-sidenav {
    background: var(--ss-navy) !important;
    color: #CBD5E1 !important;
}

    #layoutSidenav_nav .ss-sidebar .sidenav-menu-heading {
        color: rgba(255, 255, 255, .55) !important;
        letter-spacing: .08em;
        font-size: .72rem;
        text-transform: uppercase;
        margin-top: 10px !important;
        margin-bottom: 6px !important;
        padding: 0 12px !important;
    }

    .sidebar .nav-link,
    #layoutSidenav_nav .nav-link,
    .sb-sidenav .nav-link,
    #layoutSidenav_nav .ss-sidebar .nav-link {
        color: #CBD5E1 !important;
        font-weight: 600;
        border-radius: var(--ss-radius-sm);
        margin: 1px 8px !important;
        padding: 8px 10px !important;
    }

        .sidebar .nav-link:hover,
        #layoutSidenav_nav .nav-link:hover,
        .sb-sidenav .nav-link:hover,
        #layoutSidenav_nav .ss-sidebar .nav-link:hover {
            background: rgba(0, 128, 0, .14) !important;
            color: #fff !important;
        }

        .sidebar .nav-link.active,
        #layoutSidenav_nav .nav-link.active,
        .sb-sidenav .nav-link.active,
        #layoutSidenav_nav .ss-sidebar .nav-link.active {
            background: rgba(0, 128, 0, .20) !important;
            border-left: 4px solid var(--ss-primary) !important;
            color: #fff !important;
            position: relative;
        }

    /* Sidebar layout - footer stays visible */
    .nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav,
    #layoutSidenav_nav .ss-sidebar {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 100% !important;
    }

        .nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav .sidenav-menu,
        #layoutSidenav_nav .ss-sidebar .sidenav-menu {
            flex: 1 1 auto !important;
            overflow-y: auto !important;
            padding-bottom: 1rem !important;
        }

        #layoutSidenav_nav .ss-sidebar .sidenav-footer,
        .nav-fixed #layoutSidenav #layoutSidenav_nav .sidenav .sidenav-footer {
            flex: 0 0 auto !important;
            padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)) !important;
        }

/* Fix gap under fixed header + prevent wide grids from stretching the layout */
.nav-fixed #layoutSidenav #layoutSidenav_content {
    top: 0 !important;
    padding-top: 3.625rem !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
}

/* Break the width-expansion chain from grid table up to layout root.
   Block-level ancestors pass content width upward; overflow-x on ONE
   ancestor alone won't help because the parent it measures "100%" of
   is ALSO being stretched. Pin every link in the chain. */
#layoutSidenav_content > main,
#layoutSidenav_content > main > .container-fluid,
#layoutSidenav_content > main > .container-fluid > .ss-app {
    max-width: 100% !important;
    overflow-x: visible !important;
}

/* =============================================================================
   7. DEVEXPRESS GRIDS - Modern Style
   ============================================================================= */

/* Grid Container */
.dxbs-gridview,
.dxgvControl,
.dxgv {
    border: 1px solid var(--ss-border) !important;
    border-radius: var(--ss-radius) !important;
    overflow: hidden;
    background: var(--ss-surface);
    box-shadow: var(--ss-shadow-sm);
    background-image: none !important;
}

    /* Grid Header */
    .dxbs-gridview .dxgvHeader,
    .dxbs-gridview thead th,
    .dxbs-gridview .dxgvHeaderPanel,
    .dxgvHeader,
    .dxgvHeader table {
        background: var(--ss-surface-2) !important;
        border-bottom: 1px solid var(--ss-border) !important;
        color: var(--ss-muted) !important;
        font-weight: 600 !important;
        font-size: 0.75rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
    }

        .dxbs-gridview thead th,
        .dxbs-gridview .dxgvHeader td,
        .dxgvHeader td {
            padding: 12px 16px !important;
            vertical-align: middle !important;
            border-right: none !important;
            color: var(--ss-text) !important;
        }

        .dxgvHeader td,
        .dxgvHeader a,
        .dxgvHeader span {
            color: var(--ss-text) !important;
        }

    /* Data Rows */
    .dxbs-gridview .dxgvDataRow td,
    .dxbs-gridview tbody td {
        padding: 14px 16px !important;
        vertical-align: middle !important;
        border-bottom: 1px solid var(--ss-border) !important;
        border-right: none !important;
        color: var(--ss-text);
        font-size: 0.9rem;
        transition: background-color 0.15s ease;
    }

    .dxbs-gridview .dxgvDataRow:last-child td,
    .dxbs-gridview tbody tr:last-child td {
        border-bottom: none !important;
    }

    /* Row Hover */
    .dxbs-gridview .dxgvDataRow:hover td,
    .dxbs-gridview tbody tr:hover td,
    .dxgvDataRow:hover > td {
        background-color: var(--ss-surface-2) !important;
    }

    /* Selected/Focused Row */
    .dxbs-gridview .dxgvFocusedRow td,
    .dxbs-gridview .dxgvSelectedRow td,
    .dxgvFocusedRow > td {
        background-color: rgba(0, 128, 0, 0.08) !important;
    }

    /* Remove striping */
    .dxbs-gridview .dxgvDataRow:nth-child(even) td {
        background-color: transparent;
    }

    .dxbs-gridview .dxgvDataRow:nth-child(even):hover td {
        background-color: var(--ss-surface-2) !important;
    }

    /* Pager */
    .dxbs-gridview .dxgvPagerBottomPanel,
    .dxbs-gridview .dxgvPagerTopPanel,
    .dxbs-pager {
        background: var(--ss-surface-2) !important;
        border-top: 1px solid var(--ss-border) !important;
        padding: 12px 16px !important;
    }

    /* Search Panel */
    .dxbs-gridview .dxgvSearchPanel input {
        border-radius: 8px !important;
        border: 1px solid var(--ss-border) !important;
        padding: 8px 12px !important;
    }

        .dxbs-gridview .dxgvSearchPanel input:focus {
            border-color: rgba(0, 128, 0, 0.35) !important;
            box-shadow: 0 0 0 3px rgba(0, 128, 0, 0.1) !important;
        }

.dxbs-gridview{
    overflow: visible !important;
}


/* Command buttons in grid — always green (except danger & icon-only)
       DevExpress renders dual-class: btn-primary + btn-secondary + dxbs-button
       and adds data-toggle="gridview-datarow-custom" on custom command buttons.
       Target the exact rendered combo to beat the standalone btn-secondary navy rule. */
html body button.btn.btn-primary.btn-secondary.dxbs-button:not(.btn-danger):not(.ss-cmd-btn),
html body button.dxbs-button[data-toggle*="gridview"]:not(.btn-danger):not(.ss-cmd-btn) {
    background-color: var(--ss-primary) !important;
    border-color: var(--ss-primary) !important;
    color: #fff !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}

    html body button.btn.btn-primary.btn-secondary.dxbs-button:not(.btn-danger):not(.ss-cmd-btn):hover,
    html body button.dxbs-button[data-toggle*="gridview"]:not(.btn-danger):not(.ss-cmd-btn):hover {
        background-color: var(--ss-primary-hover) !important;
        border-color: var(--ss-primary-hover) !important;
        color: #fff !important;
    }

    html body button.btn.btn-primary.btn-secondary.dxbs-button:not(.btn-danger):not(.ss-cmd-btn):focus,
    html body button.dxbs-button[data-toggle*="gridview"]:not(.btn-danger):not(.ss-cmd-btn):focus {
        box-shadow: 0 0 0 .25rem rgba(0, 128, 0, 0.18) !important;
    }

/* Danger buttons in grid stay red */
html body button.btn.btn-danger.dxbs-button[data-toggle*="gridview"],
html body button.btn.btn-primary.btn-secondary.btn-danger.dxbs-button {
    background-color: var(--ss-danger) !important;
    border-color: var(--ss-danger) !important;
    color: #fff !important;
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
}

    html body button.btn.btn-danger.dxbs-button[data-toggle*="gridview"]:hover,
    html body button.btn.btn-primary.btn-secondary.btn-danger.dxbs-button:hover {
        background-color: var(--ss-danger-hover) !important;
        border-color: var(--ss-danger-hover) !important;
    }

/* =============================================================================
   7b. TRANSPARENT ICON-ONLY GRID COMMAND BUTTONS
   Uses doubled-class trick (.ss-cmd-btn.ss-cmd-btn) for maximum specificity
   ============================================================================= */
button.ss-cmd-btn.ss-cmd-btn.btn.btn-secondary.dxbs-button,
button.ss-cmd-btn.ss-cmd-btn.btn.btn-secondary,
button.ss-cmd-btn.ss-cmd-btn.btn.dxbs-button,
button.ss-cmd-btn.ss-cmd-btn.dxbs-button,
button.ss-cmd-btn.ss-cmd-btn.btn,
button.ss-cmd-btn.ss-cmd-btn {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    padding: 4px 8px !important;
    min-width: auto !important;
    min-height: auto !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    transition: background 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
}

    button.ss-cmd-btn.ss-cmd-btn:hover {
        background: rgba(0, 0, 0, 0.06) !important;
        background-color: rgba(0, 0, 0, 0.06) !important;
        border-radius: 8px !important;
        border: none !important;
        box-shadow: none !important;
    }

    button.ss-cmd-btn.ss-cmd-btn:focus {
        box-shadow: none !important;
        outline: none !important;
        background: transparent !important;
        background-color: transparent !important;
    }

    /* Color variants */
    button.ss-cmd-btn.ss-cmd-btn.ss-cmd-green {
        color: var(--ss-primary) !important;
    }

        button.ss-cmd-btn.ss-cmd-btn.ss-cmd-green:hover {
            color: var(--ss-primary-hover) !important;
        }

    button.ss-cmd-btn.ss-cmd-btn.ss-cmd-red {
        color: var(--ss-danger) !important;
    }

        button.ss-cmd-btn.ss-cmd-btn.ss-cmd-red:hover {
            color: var(--ss-danger-hover) !important;
        }

    button.ss-cmd-btn.ss-cmd-btn.ss-cmd-navy {
        color: var(--ss-navy) !important;
    }

        button.ss-cmd-btn.ss-cmd-btn.ss-cmd-navy:hover {
            color: var(--ss-navy-hover) !important;
        }

    /* Hide button text, show only icons */
    button.ss-cmd-btn.ss-cmd-btn .dxbs-button-text {
        display: none !important;
    }

/* =============================================================================
   8. MOBILE LIST GRID
   ============================================================================= */
.ss-mobile-list {
    background: transparent !important;
}

    .ss-mobile-list .dxbs-gridview,
    .ss-mobile-list .dxgvControl {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Each row as a card */
    .ss-mobile-list .dxgvDataRow,
    .ss-mobile-list tbody tr {
        display: block !important;
        background: var(--ss-surface) !important;
        border: 1px solid var(--ss-border) !important;
        border-radius: var(--ss-radius) !important;
        margin-bottom: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        padding: 16px !important;
        transition: all 0.2s ease;
        cursor: pointer;
    }

        .ss-mobile-list .dxgvDataRow:hover,
        .ss-mobile-list tbody tr:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
            border-color: var(--ss-primary) !important;
        }

        .ss-mobile-list .dxgvDataRow:active,
        .ss-mobile-list tbody tr:active {
            transform: scale(0.99);
        }

        .ss-mobile-list .dxgvDataRow td,
        .ss-mobile-list tbody td {
            display: block !important;
            border: none !important;
            padding: 0 !important;
            background: transparent !important;
        }

    /* Hide header on mobile list */
    .ss-mobile-list .dxgvHeader,
    .ss-mobile-list thead {
        display: none !important;
    }

/* Field labels */
.ss-mobile-cell {
    margin-bottom: 12px;
}

    .ss-mobile-cell:last-child {
        margin-bottom: 0;
    }

.ss-mobile-field {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ss-muted);
    margin-bottom: 2px;
}

.ss-mobile-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ss-text);
    word-break: break-word;
}

.ss-mobile-cell:first-child .ss-mobile-value {
    font-size: 1.05rem;
    font-weight: 600;
}

/* Mobile pager/search */
.ss-mobile-list .dxgvPagerTopPanel,
.ss-mobile-list .dxbs-pager {
    background: transparent !important;
    border: none !important;
    padding: 0 0 16px 0 !important;
}

.ss-mobile-list .dxgvSearchPanel {
    margin-bottom: 16px;
}

    .ss-mobile-list .dxgvSearchPanel input {
        width: 100% !important;
        padding: 12px 16px !important;
        border-radius: var(--ss-radius-sm) !important;
        border: 1px solid var(--ss-border) !important;
        font-size: 1rem !important;
    }

/* =============================================================================
   9. DEVEXPRESS FORM LAYOUTS
   ============================================================================= */
.dxbs-fl-group > .card-header,
.dxbs-fl .card-header,
.dxbs-formlayout .card-header {
    background: var(--ss-surface) !important;
    color: var(--ss-text) !important;
    border-bottom: 1px solid var(--ss-border) !important;
    position: relative;
    padding-left: 24px !important;
    font-weight: 700;
    font-size: 1rem;
}

    .dxbs-fl-gd,
    .dxbs-fl-gd .card,
    .dxbs-fl-gd .row,
    .dxbs-fl-gd .form-group,
    .dxbs-fl-gd .dxbs-fl-ctrl {
        overflow: visible !important; 
        position: relative; 
    }

    .dxbs-fl-gd .dropdown-menu,
    .dxbs-fl-gd .dxbs-dropdown-menu {
        position: absolute !important;
        z-index: 999999 !important;
        overflow: visible !important;
    }

    .dxbs-fl-group > .card-header::before,
    .dxbs-fl .card-header::before,
    .dxbs-formlayout .card-header::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: var(--ss-primary);
    }

.dxbs-fl-group > .card,
.dxbs-fl .card {
    background: var(--ss-surface) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: var(--ss-radius) !important;
    box-shadow: var(--ss-shadow-sm) !important;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

/* =============================================================================
   10. BADGES & TAGS
   ============================================================================= */
.dxbs-gridview .badge,
.dxbs-gridview span[class*="badge"],
.dxgvDataRow .badge,
td .badge {
    background-color: #E0F2FE !important;
    color: #0369A1 !important;
    border: 1px solid #BAE6FD !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
}

.badge-success,
.badge.bg-success {
    background-color: #DCFCE7 !important;
    color: #166534 !important;
    border: 1px solid #BBF7D0 !important;
}

.badge-warning,
.badge.bg-warning {
    background-color: #FEF9C3 !important;
    color: #A16207 !important;
    border: 1px solid #FDE047 !important;
}

.badge-danger,
.badge.bg-danger {
    background-color: #FEE2E2 !important;
    color: #DC2626 !important;
    border: 1px solid #FECACA !important;
}

.badge-info,
.badge.bg-info {
    background-color: #E0F2FE !important;
    color: #0369A1 !important;
    border: 1px solid #BAE6FD !important;
}

.badge-primary,
.badge.bg-primary {
    background-color: #E8F5E9 !important;
    color: #166534 !important;
    border: 1px solid #A7F3D0 !important;
}

.badge-secondary,
.badge.bg-secondary {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    border: 1px solid #E2E8F0 !important;
}

/* =============================================================================
   11. DROPDOWNS & POPUPS
   ============================================================================= */
.dropdown-menu {
    border: 1px solid var(--ss-border) !important;
    border-radius: var(--ss-radius) !important;
    box-shadow: var(--ss-shadow-pop) !important;
    padding: 10px !important;
}

    .dropdown-menu .dropdown-item {
        border-radius: var(--ss-radius-sm) !important;
        padding: 10px 12px !important;
        font-weight: 600 !important;
        color: var(--ss-text) !important;
    }

        .dropdown-menu .dropdown-item:hover,
        .dropdown-menu .dropdown-item:focus {
            background: rgba(0, 128, 0, .10) !important;
            color: var(--ss-navy) !important;
        }

/* DevExpress Popups */
.dxpc-mainDiv,
.dxpcLite,
.dxbs-popup,
.dxbs-popover,
.dxbs-dropdown {
    border: 1px solid var(--ss-border) !important;
    border-radius: var(--ss-radius) !important;
    box-shadow: var(--ss-shadow-pop) !important;
    background: #fff !important;
    overflow: visible !important;
}

    .dxpc-header,
    .dxpcHeader,
    .dxbs-popup .modal-header,
    .dxbs-popover .popover-header {
        background: var(--ss-navy) !important;
        color: #fff !important;
        border-bottom: none !important;
        font-weight: 700 !important;
        padding: 12px 14px !important;
    }

    .dxpc-mainDiv .bg-primary,
    .dxpcLite .bg-primary,
    .dxbs-popover .bg-primary {
        background: var(--ss-navy) !important;
        background-image: none !important;
    }

    /* =============================================================================
   12. STORE PICKER POPUP
   ============================================================================= */
    .dxbs-popup.ss-store-picker.modal-dialog {
        width: 100% !important;
        max-width: 1140px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 1.25rem auto !important;
        box-sizing: border-box;
    }

    .dxbs-popup.ss-store-picker .modal-header {
        background-color: var(--ss-navy) !important;
        color: #ffffff !important;
        border-bottom: none !important;
        padding: 14px 18px;
    }

    .dxbs-popup.ss-store-picker .modal-title {
        font-weight: 700;
        font-size: 1rem;
        color: #ffffff !important;
    }

    .dxbs-popup.ss-store-picker .dxbs-icon-remove,
    .dxbs-popup.ss-store-picker .close {
        color: #22c55e !important;
        opacity: 1 !important;
    }

    .dxbs-popup.ss-store-picker thead th {
        background: var(--ss-surface-2) !important;
        color: var(--ss-text) !important;
        font-weight: 700;
        border-bottom: 1px solid var(--ss-border) !important;
    }

    .dxbs-popup.ss-store-picker .dxbs-command-column .btn,
    .dxbs-popup.ss-store-picker .dxbs-command-column .dxbs-button {
        background-color: var(--ss-primary) !important;
        border-color: var(--ss-primary) !important;
        color: #ffffff !important;
        font-weight: 700;
        font-size: 0.95rem;
        padding: 6px 14px !important;
        min-height: 34px;
        border-radius: var(--ss-radius-sm);
    }

        .dxbs-popup.ss-store-picker .dxbs-command-column .btn:hover,
        .dxbs-popup.ss-store-picker .dxbs-command-column .dxbs-button:hover {
            background-color: var(--ss-primary-hover) !important;
            border-color: var(--ss-primary-hover) !important;
        }

/* =============================================================================
   13. KPI / STAT CARDS
   ============================================================================= */
.ss-stat {
    background: #fff;
    border: 1px solid var(--ss-border);
    border-radius: 14px;
    box-shadow: var(--ss-shadow);
    padding: 14px 16px;
    position: relative;
    overflow: visible;
}

    .ss-stat::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 6px;
        height: 100%;
        background: var(--ss-primary);
        border-radius: 14px 0 0 14px;
    }

.ss-stat-top {
    display: block;
    position: relative;
    overflow: visible !important;
    min-width: 0;
    padding-right: 36px;
}

    .ss-stat-top > div:first-child {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

.ss-stat-title {
    font-size: .78rem;
    font-weight: 800;
    color: var(--ss-muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.ss-stat-icon {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.4rem;
    color: #94A3B8;
}

.ss-stat-footer {
    margin-top: 12px;
}

.ss-stat-link {
    font-weight: 800;
    font-size: .85rem;
    color: var(--ss-info);
    text-decoration: none;
}

/* Stat value styling */
.ss-stat .dxbs-textbox,
.ss-stat .dxbs-textbox input,
.ss-stat .ss-stat-value input,
.ss-stat input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: clamp(1.2rem, 2vw, 1.65rem) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
    color: #111827 !important;
    font-variant-numeric: tabular-nums;
}

/* FormLayout wrapper inside stat cards — prevent clipping and force full width */
.ss-stat .ss-stat-form,
.ss-stat .dxbs-fl,
.ss-stat .ss-stat-value,
.ss-stat .dxbs-fl-ctrl,
.ss-stat .dxbs-fl-item,
.ss-stat .dxbs-fl-cpt-area,
.ss-stat .dxbs-fl-ctrl-area,
.ss-stat [class*="dxbs-fl"],
.ss-stat .form-group,
.ss-stat .dxbs-textbox {
    overflow: visible !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Accent colors for stat cards */
.ss-green::before {
    background: var(--ss-primary);
}

.ss-blue::before {
    background: var(--ss-info);
}

.ss-amber::before {
    background: var(--ss-warning);
}

.ss-red::before {
    background: var(--ss-danger);
}

/* =============================================================================
   14. SIDEBAR LOGO
   ============================================================================= */
.sidebar-logo-container {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    .sidebar-logo-container .logo-form-layout {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        margin: 12px 0 !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Force FormLayout row/col to full width (DevExpress renders col-md-6) */
    .sidebar-logo-container .row {
        width: 100% !important;
        margin: 0 !important;
        justify-content: center !important;
    }

    .sidebar-logo-container [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .sidebar-logo-container .dxbs-form-group {
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .sidebar-logo-container img {
        max-height: 200px !important;
        width: auto !important;
        height: auto !important;
        max-width: 100% !important;
        object-fit: contain !important;
    }

.logo-form-layout,
.logo-layout-item {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

img.logo-image {
    display: block !important;
    margin: 0 auto !important;
    padding: 16px 0 !important;
}
/* =============================================================================
   15. UTILITY BACKGROUND COLORS
   ============================================================================= */
.bg-success,
.bg-primary {
    background: var(--ss-primary) !important;
    background-image: none !important;
}

.bg-navy {
    background: var(--ss-navy) !important;
    background-image: none !important;
    color: #fff !important;
}

.bg-danger {
    background: var(--ss-danger) !important;
    background-image: none !important;
}

.bg-warning {
    background: var(--ss-warning) !important;
    background-image: none !important;
}

.bg-info {
    background: var(--ss-info) !important;
    background-image: none !important;
}

/* =============================================================================
   16. MOBILE RESPONSIVE
   ============================================================================= */
@media (max-width: 767.98px) {
    /* Mobile card header - stack vertically */
    .card-header-actions > .card-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px 16px 16px 24px !important;
        overflow: visible !important;
        min-height: auto !important;
        height: auto !important;
    }

    .card-header .header-title {
        display: block !important;
        margin-bottom: 0 !important;
    }

    /* Actions container inside header */
    .ss-cust-header-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        position: relative !important;
        z-index: 10 !important;
    }

        /* Buttons (direct children) get 50% two-column sizing */
        .ss-cust-header-actions > .dxbs-button,
        .ss-cust-header-actions > .btn,
        .ss-cust-header-actions > a.btn {
            flex: 1 1 calc(50% - 5px) !important;
            min-width: 0 !important;
            max-width: calc(50% - 5px) !important;
            text-align: center !important;
            justify-content: center !important;
            padding: 10px 8px !important;
            font-size: 0.85rem !important;
        }

        /* Wrapper divs inside header actions (Inventory pattern) */
        .ss-cust-header-actions > div {
            flex: 0 0 auto !important;
            max-width: 100% !important;
        }

        .ss-cust-header-actions > a:not(.btn) {
            display: none !important;
        }

        /* Comboboxes/editors full width on mobile */
        .ss-cust-header-actions .dxbs-combobox,
        .ss-cust-header-actions .dxbs-editor,
        .ss-cust-header-actions .dxbs-textbox {
            max-width: 100% !important;
        }

    .card-header-actions > .card-body {
        margin-top: 0 !important;
        padding-top: 16px !important;
    }

    .ss-mobile-list {
        margin-top: 8px !important;
    }

    /* Mobile stat cards */
    .ss-stat input {
        font-size: 1.55rem !important;
    }

    /* Hide dark mode toggle on mobile */
    #darkModeToggle {
        display: none !important;
    }

    /* Profile link positioning */
    .ss-profile-link {
        margin-left: auto !important;
    }

    /* Customer grid mobile */
    #MainContent_BootstrapGridView2 .dxbs-gridview td:first-child,
    #MainContent_BootstrapGridView2 .dxbs-gridview th:first-child {
        display: none !important;
    }

    #MainContent_BootstrapGridView2 .dxbs-gridview tbody tr,
    #MainContent_gvCustomersMobile tbody tr {
        cursor: pointer;
    }

    /* Popup mobile sizing */
    .ss-store-picker,
    .dxbs-popup {
        max-width: 100vw !important;
    }

        .dxbs-popup .card-body {
            padding: 12px !important;
        }

        .dxbs-popup .card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        /* Store picker mobile */
        .dxbs-popup.ss-store-picker.modal-dialog {
            max-width: calc(100vw - 24px) !important;
            margin: 12px !important;
            left: 12px !important;
            transform: none !important;
        }
}

@media (max-width: 576px) {
    .ss-stat .ss-stat-value input {
        font-size: 1.55rem !important;
    }
}

/* =============================================================================
   17. COMPACT GRID VARIANT
   ============================================================================= */
.ss-grid-compact .dxgvDataRow td,
.ss-grid-compact tbody td {
    padding: 10px 16px !important;
}

.ss-grid-compact .dxgvDataRow:hover td {
    background-color: #F1F5F9 !important;
}

/* =============================================================================
   18. GRID CONTAINER — Fixed-width wrapper for wide grids (Inventory, etc.)
   Prevents the grid from pushing the page wider than the viewport.
   
   HOW IT WORKS:
   • width:0 + min-width:100% breaks the circular width-expansion chain.
   • overflow:hidden clips anything beyond the container edge.
   • table-layout:auto lets the browser shrink TEXT columns first while
     keeping command-button columns at their natural width.
   • Data cells get max-width:0 so the auto algorithm can compress them.
   • Command cells + detail-expand cells use width:1% to shrink-to-fit
     their content without stealing leftover space from data columns.
   ============================================================================= */
.ss-grid-container {
    width: 0 !important;
    min-width: 100% !important;
    overflow: hidden !important;
}

    /* The grid wrapper itself must also be clamped so the table inside
   doesn't push it wider than the container. */
    .ss-grid-container > .dxbs-gridview {
        max-width: 100% !important;
        overflow: hidden !important;
    }

        /* Constrain the data table to 100%. */
        .ss-grid-container > .dxbs-gridview .dxbs-table {
            width: 100% !important;
            table-layout: auto !important;
        }

    /* --- Protect command, checkbox, and detail-expand columns ---
   td.dxbs-cmd-cell   = command buttons + select checkboxes
   td.dxbs-md-btn-cell = detail row expand/collapse (+) button
   td.dxbs-indent-cell = indent spacer for detail rows
   width:1% = "be as narrow as your content allows" in auto layout,
   so these columns never steal space from data columns. */
    .ss-grid-container .dxbs-table td.dxbs-cmd-cell,
    .ss-grid-container .dxbs-table th.dxbs-cmd-cell,
    .ss-grid-container .dxbs-table td.dxbs-md-btn-cell,
    .ss-grid-container .dxbs-table th.dxbs-md-btn-cell,
    .ss-grid-container .dxbs-table td.dxbs-indent-cell,
    .ss-grid-container .dxbs-table th.dxbs-indent-cell {
        white-space: nowrap !important;
        width: 1% !important;
        overflow: visible !important;
        max-width: none !important;
    }

    /* --- Data cells: allow maximum compression ---
   max-width:0 tells the auto algorithm this column can compress
   as much as needed.  overflow:hidden + ellipsis truncates gracefully. */
    .ss-grid-container > .dxbs-gridview .dxbs-table td:not(.dxbs-cmd-cell):not(.dxbs-md-btn-cell):not(.dxbs-indent-cell),
    .ss-grid-container > .dxbs-gridview .dxbs-table th:not(.dxbs-cmd-cell):not(.dxbs-md-btn-cell):not(.dxbs-indent-cell) {
        max-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Detail rows (variant sub-grid) use a full-width colspan cell.
   Must NOT be clipped or the nested grid gets hidden. */
    .ss-grid-container > .dxbs-gridview .dxbs-table td[colspan] {
        max-width: none !important;
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
    }

/* Sidebar Navy Fix - High Specificity */
.sidebar,
.ss-sidebar,
#layoutSidenav_nav,
#layoutSidenav_nav .sb-sidenav,
#layoutSidenav_nav .ss-sidebar,
.sb-sidenav,
.sb-sidenav-dark,
nav.sb-sidenav,
.sidenav {
    background: #0F172A !important;
    background-color: #0F172A !important;
    background-image: none !important;
    color: #CBD5E1 !important;
}

/* Fix CustomerDetails mobile header overlap (scoped to cards with FormLayout) */
@media (max-width: 767.98px) {
    /* Only add extra padding when card contains a DevExpress FormLayout */
    .card-header-actions:has(.dxbs-fl) > .card-header,
    .card-header-actions:has(.dxbs-formlayout) > .card-header {
        padding-bottom: 50px !important;
    }

    /* Push the form layout down */
    .card-header-actions .dxbs-fl,
    .card-header-actions .dxbs-formlayout,
    .card-header-actions > .dxbs-fl,
    .card-header-actions > div > .dxbs-fl {
        margin-top: 0 !important;
    }

    /* Ensure BootstrapFormLayout doesn't overlap */
    .card-header-actions:has(.dxbs-fl) .card-body,
    .card-header-actions:has(.dxbs-fl) > .card-body {
        padding-top: 20px !important;
        clear: both !important;
    }

    /* The form layout group headers need spacing */
    .dxbs-fl-group:first-child,
    .dxbs-fl .card:first-child {
        margin-top: 16px !important;
    }
}
/* =============================================================================
   POPUP VIEWPORT FIX — Ensures footer buttons (Apply, Cancel, etc.) are ALWAYS
   visible on screen. Uses flex column on .modal-content so header + footer pin
   to top/bottom and only .modal-body scrolls when content is tall.
   ============================================================================= */

/* Constrain entire popup to viewport */
.dxbs-popup.modal-dialog {
    max-height: calc(100vh - 3rem) !important;
    margin: 1.5rem auto !important;
}

.dxbs-popup .modal-dialog {
    max-height: calc(100vh - 3rem) !important;
    margin: 1.5rem auto !important;
}

/* Modal content uses flex column — header and footer stay pinned, body scrolls */
.dxbs-popup .modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 3rem) !important;
    height: auto !important;
    min-height: 0 !important;
}

    /* Remove any fixed heights DevExpress injects via inline style */
    .dxbs-popup[style*="height"],
    .dxbs-popup .modal-content[style*="height"],
    .dxbs-popup .modal-body[style*="height"] {
        height: auto !important;
    }

/* DevExpress inner wrappers — prevent them from forcing fixed heights */
.dxbs-popup .dxpc-content,
.dxbs-popup .dxpc-contentWrapper,
.dxbs-popup .dxpcLite,
.dxbs-popup .dxpc-mainDiv {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* The .dxbs-popup container itself should not have a fixed height */
.dxbs-popup {
    height: auto !important;
    min-height: 0 !important;
}

    /* Modal body — the ONLY scrollable section */
    .dxbs-popup .modal-body {
        padding: 20px !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
        overflow-y: auto !important;
    }

    /* Header stays pinned at top — no shrink */
    .dxbs-popup .modal-header {
        flex: 0 0 auto !important;
    }

    /* Footer stays pinned at bottom — NEVER hidden */
    .dxbs-popup .modal-footer,
    .dxbs-popup .card-footer {
        flex: 0 0 auto !important;
        padding: 12px 16px !important;
        border-top: 1px solid var(--ss-border, #E3E8EF);
        background: var(--ss-surface-2, #F8FAFC);
    }

    /* Reduce excessive padding in popup content */
    .dxbs-popup .dxbs-fl,
    .dxbs-popup .dxbs-formlayout {
        padding: 0 !important;
    }

    .dxbs-popup .card-body {
        padding: 16px !important;
    }

/* =====================================================================
   syncrotheme.css ADDITIONS — VendorSalesByCategoryReport
   Add these rules to the existing syncrotheme.css file.
   ===================================================================== */

/* --- Date-filter row: responsive stacking --- */
.ss-date-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

@media (max-width: 767.98px) {
    .ss-date-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

        .ss-date-filter-row label {
            text-align: left;
        }

        /* Force date pickers full-width on mobile */
        .ss-date-filter-row .dxbs-textbox,
        .ss-date-filter-row .dxbs-date-edit,
        .ss-date-filter-row .ss-date-input {
            width: 100% !important;
        }

        /* Category filter combo full-width on mobile */
        .ss-date-filter-row .ss-category-filter,
        .ss-date-filter-row .ss-category-filter.dxbs-combobox {
            width: 100% !important;
            margin-left: 0 !important;
        }

    /* Top-5 category cards: 2-up on small screens */
    .category-cards-container {
        justify-content: center;
    }

    .category-card {
        min-width: 140px;
        max-width: none;
        flex: 1 1 calc(50% - 8px);
    }
}
/* =====================================================================
   syncrotheme.css ADDITIONS — Preferences Page
   Append these rules to the existing syncrotheme.css file.
   ===================================================================== */

/* --- Preferences: QuickBooks tab mobile fix --- */
/* Ensure the QB account mapping section doesn't overflow on mobile */
@media (max-width: 767.98px) {
    /* QB layout items need full width on mobile */
    #MainContent_BootstrapCallbackPanel1_BootstrapPageControl1_BootstrapFormLayoutQuickBooks .dxbs-fl-item,
    #MainContent_BootstrapCallbackPanel1_BootstrapPageControl1_BootstrapFormLayoutQuickBooks .dxbs-fl-group {
        max-width: 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    /* QB alert info box should not overflow */
    #MainContent_BootstrapCallbackPanel1_BootstrapPageControl1_BootstrapFormLayoutQuickBooks .alert {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Payment Terminals button group wraps on mobile */
    #MainContent_BootstrapCallbackPanel1 .d-flex.flex-wrap.gap-2.mt-3 .dxbs-button {
        flex: 1 1 calc(50% - 8px);
        min-width: 120px;
    }

    /* QB buttons wrap on mobile */
    #MainContent_BootstrapCallbackPanel1_BootstrapPageControl1_BootstrapFormLayoutQuickBooks .d-flex.flex-wrap {
        width: 100%;
    }

        #MainContent_BootstrapCallbackPanel1_BootstrapPageControl1_BootstrapFormLayoutQuickBooks .d-flex.flex-wrap > div {
            width: 100%;
        }

            #MainContent_BootstrapCallbackPanel1_BootstrapPageControl1_BootstrapFormLayoutQuickBooks .d-flex.flex-wrap > div .dxbs-button {
                width: 100% !important;
                margin-bottom: 8px;
            }
}

/* --- Preferences: PAX Popup navy header --- */
#MainContent_PAXDetailsPopup .modal-title,
#MainContent_PAXDetailsPopup .dxpc-header,
#MainContent_PAXDetailsPopup_PW-1 .modal-header {
    background-color: var(--ss-navy, #0F172A) !important;
    color: #fff !important;
}

/* --- Preferences: Tab control responsive --- */
@media (max-width: 767.98px) {
    /* Make tab navigation wrap nicely on mobile */
    #MainContent_BootstrapCallbackPanel1_BootstrapPageControl1 .nav-tabs {
        flex-wrap: wrap !important;
    }

        #MainContent_BootstrapCallbackPanel1_BootstrapPageControl1 .nav-tabs .nav-item {
            flex: 0 0 auto;
        }

        #MainContent_BootstrapCallbackPanel1_BootstrapPageControl1 .nav-tabs .nav-link {
            padding: 8px 12px !important;
            font-size: 0.875rem;
        }
}
/* =====================================================================
   syncrotheme.css ADDITIONS — Rent Pages + Sub-Header Fix
   Add these rules to the existing syncrotheme.css file.
   ===================================================================== */


.card-header-actions .ss-sub-header {
    display: block !important;
    justify-content: initial !important;
    height: auto !important;
    background: var(--ss-surface-2, #F8FAFC) !important;
    color: var(--ss-text, #1F2937) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    border-bottom: 1px solid var(--ss-border, #E3E8EF) !important;
    padding: 12px 16px !important;
    border-left: 3px solid var(--ss-muted, #64748B) !important;
}

/* ---- Navy Popup Header ---- */
.ss-popup-header-navy,
.dxbs-popup .ss-popup-header-navy {
    background-color: #0F172A !important;
    color: #fff !important;
    border-bottom: none !important;
}

    .ss-popup-header-navy .dxpc-headerText,
    .ss-popup-header-navy .modal-title,
    .dxbs-popup .ss-popup-header-navy .dxpc-headerText {
        color: #fff !important;
        font-weight: 600 !important;
    }

    .ss-popup-header-navy .dxpc-closeBtn,
    .ss-popup-header-navy .btn-close,
    .dxbs-popup .ss-popup-header-navy .dxpc-closeBtn {
        color: #fff !important;
        filter: brightness(0) invert(1) !important;
        opacity: 0.8 !important;
    }

        .ss-popup-header-navy .dxpc-closeBtn:hover,
        .ss-popup-header-navy .btn-close:hover {
            opacity: 1 !important;
        }

/* ---- Rent Preview Popup — mobile containment ---- */
@media (max-width: 767.98px) {
    .ss-rent-preview-popup,
    .ss-rent-preview-popup.modal-dialog,
    .ss-rent-preview-popup .modal-dialog {
        max-width: calc(100vw - 24px) !important;
        width: calc(100vw - 24px) !important;
        margin: 12px !important;
    }

        .ss-rent-preview-popup .modal-body,
        .ss-rent-preview-popup .dxbs-popup-content {
            padding: 12px !important;
            overflow-x: auto !important;
        }

        /* Let the grid scroll horizontally inside the popup on mobile */
        .ss-rent-preview-popup .ss-grid,
        .ss-rent-preview-popup .dxbs-gridview {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        /* Shrink spin edit on mobile so it fits */
        .ss-rent-preview-popup .dxbs-spin-edit,
        .ss-rent-preview-popup .dxbs-spin-edit input {
            width: 90px !important;
            min-width: 80px !important;
        }

        /* Stack footer buttons on mobile */
        .ss-rent-preview-popup .modal-footer > div {
            flex-direction: column !important;
            width: 100% !important;
        }

        .ss-rent-preview-popup .modal-footer .dxbs-button {
            width: 100% !important;
        }
}
/* =====================================================================
   syncrotheme.css ADDITIONS — Settlements Pages + Sub-Header + Header Alignment
   Add these rules to the existing syncrotheme.css file.
   ===================================================================== */

/* --- Sub-section card header (light gray, no green accent bar) --- */
.card-header.ss-accent-header {
    background: var(--ss-surface-2, #F8FAFC) !important;
    color: var(--ss-text, #1F2937) !important;
    border-bottom: 1px solid var(--ss-border, #E3E8EF);
    font-weight: 700;
    font-size: 1rem;
    padding: 12px 16px;
    text-align: left !important;
    position: relative;
}

    /* Remove green accent bar from sub-section headers */
    .card-header.ss-accent-header::before {
        display: none !important;
    }

/* --- Card header title left-alignment (ensure no right-justify) --- */
.card-header-actions > .card-header {
    text-align: left !important;
}

    .card-header-actions > .card-header .header-title {
        text-align: left !important;
        justify-self: flex-start !important;
    }

        /* Headers without buttons: use flex-start instead of space-between */
        .card-header-actions > .card-header:only-child,
        .card-header-actions > .card-header .header-title:only-child {
            justify-content: flex-start !important;
            z-index: 2050;
        }

/* --- Settlements: Unsettled Balance KPI consistent formatting --- */
/* Ensure both green and red KPI text boxes have matching alignment */
.bigTextGreen input,
.bigTextRed input {
    text-align: center !important;
    width: 100% !important;
}

/* --- Settlement Details: Currency format fields --- */
/* Ensure amount fields in SettlementDetails form are readable */
.card-header-actions .dxbs-fl .dxbs-fl-group .dxbs-textbox input[readonly] {
    background-color: var(--ss-surface, #fff) !important;
    border: 1px solid var(--ss-border, #E3E8EF) !important;
}
/* =====================================================================
   syncrotheme.css ADDITIONS — Settlements Pages
   ===================================================================== */

/* --- Sub-section card header (light gray, no green accent bar, LEFT-justified) ---
   Used by Generate Settlements, Generate Checks sub-cards.
   Matches ss-sub-header pattern but for non-card-header-actions parents. */
.card-header.ss-accent-header {
    display: block !important;
    justify-content: initial !important;
    height: auto !important;
    background: var(--ss-surface-2, #F8FAFC) !important;
    color: var(--ss-text, #1F2937) !important;
    border-bottom: 1px solid var(--ss-border, #E3E8EF) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 12px 16px !important;
    text-align: left !important;
    border-left: 3px solid var(--ss-muted, #64748B) !important;
}

    /* Remove green accent bar pseudo-element from sub-section headers */
    .card-header.ss-accent-header::before {
        display: none !important;
    }

/* =====================================================================
   syncrotheme.css ADDITIONS — Settlements Pages
   ===================================================================== */

/* --- Fix sub-card headers inheriting flex/space-between from parent ---
   styles.css applies: .card-header-actions .card-header { display: flex; justify-content: space-between; }
   This cascades to ALL nested .card-header elements inside a card-header-actions parent,
   including sub-cards like Generate Settlements / Generate Checks.
   Override with higher specificity + !important. */
.card-header-actions .card .card-header.ss-sub-header,
.card-header-actions .card-body .card .card-header.ss-sub-header {
    display: block !important;
    justify-content: initial !important;
    text-align: left !important;
    height: auto !important;
}

/* =====================================================================
   syncrotheme.css ADDITIONS — Vendors / VendorDetails
   Add these rules to the existing syncrotheme.css file.
   ===================================================================== */

/* Fix: ss-popup-header-navy bleeds white text into popup body content.
   Reset all body/form content to dark text so labels and captions are visible. */
.ss-popup-header-navy .modal-body,
.ss-popup-header-navy .modal-body .card,
.ss-popup-header-navy .modal-body .card-header,
.ss-popup-header-navy .modal-body .card-body,
.ss-popup-header-navy .dxbs-popup-content,
.ss-popup-header-navy .dxpc-content,
.ss-popup-header-navy .modal-body label,
.ss-popup-header-navy .modal-body .dxbs-fl-caption,
.ss-popup-header-navy .modal-body .dxbs-fl-group .card-header,
.ss-popup-header-navy .modal-body .col-form-label {
    color: var(--ss-text, #1F2937) !important;
}

    /* =====================================================================
   syncrotheme.css ADDITIONS — Store / StoreMappingInv Pages
   Add these rules to the existing syncrotheme.css file.
   ===================================================================== */

    /* Fix: ss-popup-header-navy cascades white text into popup body/FormLayout labels.
   Scope white text to ONLY the popup header, reset body content to normal text color. */
    .ss-popup-header-navy .modal-body,
    .ss-popup-header-navy .modal-body label,
    .ss-popup-header-navy .modal-body .dxbs-fl-ctrl-lbl,
    .ss-popup-header-navy .modal-body .card-header,
    .ss-popup-header-navy .dxpc-content,
    .ss-popup-header-navy .dxpc-content label,
    .ss-popup-header-navy .dxpc-content .dxbs-fl-ctrl-lbl {
        color: var(--ss-text, #1F2937) !important;
    }

/* =====================================================================
   syncrotheme.css ADDITIONS — Store / StoreMappingInv Pages
   Add these rules to the existing syncrotheme.css file.
   ===================================================================== */

/* Navy background utility for popup headers */
.ss-navy-bg {
    background-color: var(--ss-navy, #1B2A4A) !important;
}

/* Fix: ss-popup-header-navy cascades white text into popup body/FormLayout labels.
   Scope white text to ONLY the popup header, reset body content to normal text color. */
.ss-popup-header-navy .modal-body,
.ss-popup-header-navy .modal-body label,
.ss-popup-header-navy .modal-body .dxbs-fl-ctrl-lbl,
.ss-popup-header-navy .modal-body .card-header,
.ss-popup-header-navy .dxpc-content,
.ss-popup-header-navy .dxpc-content label,
.ss-popup-header-navy .dxpc-content .dxbs-fl-ctrl-lbl {
    color: var(--ss-text, #1F2937) !important;
}

/* =============================================================================
   IFRAME POPUP PATTERN (SetContentUrl)
   
   DO NOT use ss-popup-header-navy / CssClasses-Control on iframe popups.
   syncrotheme.css forces .dxbs-popup { height: auto !important } which
   collapses iframes (they can't push content height).
   
   Instead, use explicit CssClasses with Control="modal fade" to replace 
   the default dxbs-popup class entirely, bypassing the height:auto rule:
   
   <CssClasses Content="modal-content" Control="modal fade" 
               Footer="modal-footer" 
               Header="modal-title ss-navy-bg text-white" 
               IconClose="bi bi-x-lg" />
   <SettingsAdaptivity MinHeight="88%" MinWidth="65%" Mode="Always" 
                       VerticalAlign="WindowCenter" />
   
   Use ss-popup-header-navy ONLY for form-based popups with inline content.
   ============================================================================= */

/* =====================================================================
   syncrotheme.css ADDITIONS — CreateCustomReport / Dynamic Grid Pages
   ===================================================================== */

/* Mobile "use desktop" note — for pages with dynamic/report-builder grids
   that cannot have mobile grid equivalents. Hidden on desktop, shown on mobile. */
.ss-mobile-desktop-note {
    display: none;
    background: var(--ss-surface-2, #F8FAFC);
    border: 1px solid var(--ss-border, #E3E8EF);
    border-radius: var(--ss-radius-sm, 10px);
    padding: 20px;
    text-align: center;
    color: var(--ss-muted, #64748B);
    font-size: 0.95rem;
    margin-bottom: 16px;
}

    .ss-mobile-desktop-note i {
        font-size: 1.5rem;
        display: block;
        margin-bottom: 8px;
        color: var(--ss-navy, #0F172A);
    }

@media (max-width: 767.98px) {
    .ss-mobile-desktop-note {
        display: block;
    }

    .ss-desktop-reports {
        display: none;
    }
}

/* =====================================================================
   syncrotheme.css ADDITIONS — TimeClock Report Page
   ===================================================================== */

/* Date filter row — stacks vertically on mobile */
@media (max-width: 767.98px) {
    .ss-date-filter-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }

        .ss-date-filter-row > * {
            width: 100% !important;
            margin-left: 0 !important;
        }

        .ss-date-filter-row label {
            margin-top: 8px;
            font-weight: 600;
        }
}

/* NOTE: The ss-date-filter-row rules are also inlined in the page <style> block
   for immediate effect. Adding them here ensures they persist if the page
   inline styles are ever removed. If these rules already exist in 
   syncrotheme.css from a previous page overhaul, skip this addition. */

/* =============================================================================
   syncrotheme.css ADDITIONS — Point of Sale Page
   ============================================================================= */

/* --- POS Popup Overflow Fix (Manual Item VendorID dropdown) ---
   DevExpress popups clip overflow by default. When a ComboBox dropdown
   opens upward inside a popup, it gets cut off by the popup boundary.
   Force overflow visible on the popup content area. */
#popManualItem_PW-1 .modal-body,
#popManualItem_PW-1 .dxpc-content,
#popManualItem_PW-1 .dxbs-popup-content {
    overflow: visible !important;
}

/* --- POS Panel Card (right-side action panel) --- */
.pos-panel-card {
    background: var(--ss-surface, #FFFFFF);
    border: 1px solid var(--ss-border, #E3E8EF);
    border-radius: var(--ss-radius, 12px);
    padding: 16px;
    box-shadow: var(--ss-shadow-sm, 0 4px 14px rgba(15, 23, 42, 0.08));
}

/* --- POS Section Labels (small uppercase group labels) --- */
.pos-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ss-muted, #64748B);
    margin-bottom: 8px;
}

/* --- POS Button Grid Layouts --- */
.pos-btn-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.pos-btn-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

@media (max-width: 767.98px) {
    .pos-btn-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =============================================================================
   MOBILE BACK NAVIGATION (child/standalone pages)
   ============================================================================= */
.ss-mobile-back {
    background: var(--ss-surface);
    border-bottom: 1px solid var(--ss-border);
    padding: 10px 16px;
    margin-bottom: 16px;
    border-radius: 0 0 var(--ss-radius) var(--ss-radius);
}

.ss-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ss-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

    .ss-back-link:hover,
    .ss-back-link:focus {
        color: var(--ss-primary-hover);
        text-decoration: none;
    }

    .ss-back-link i {
        font-size: 1.1rem;
        line-height: 1;
    }
/* =============================================================================
   4 columns on KPIs on Dashboard when super large screen
   ============================================================================= */
@media (min-width: 1800px) {
    .ss-dashboard .col-lg-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}