/* bomsync-theme.css (Load after Fluent2.css) */

:root {
    /* Core Custom Colors */
    --bsx-form-bg: #FFFFFF; /* Set to white for the background */
    --bsx-panel-bg: #33415C; /* Panel background */
    --bsx-white: #FFFFFF;
    --bsx-black: #000000;
    --bsx-gray: #D3D3D3; /* LightGray */
    --bsx-light-blue: #ADD8E6; /* LightBlue */
    --bsx-dim-gray: #696969; /* DimGray */
    /* Action Buttons */
    --bsx-action: #2F6690; /* Action button */
    --bsx-option: #415A77; /* Option button */
    --bsx-exit: #D3D3D3; /* Exit button */
    --bsx-cadet-pressed: #5F9EA0; /* Pressed state */
    --bsx-border-100: #646464; /* Border color */
    --bsx-groupdrop-bg: #E6E6E6; /* Group drop background */
    --bsx-groupdrop-text: #333333; /* Group drop text */
    /* Fluent2 Colors (Customized) */
    --fluent-primary: var(--bsx-action); /* Fluent2 Primary */
    --fluent-secondary: var(--bsx-option); /* Fluent2 Secondary */
    --fluent-background: #FFFFFF; /* Set to white for Fluent2 Background */
    --fluent-surface: var(--bsx-panel-bg); /* Fluent2 Surface */
    --fluent-foreground: var(--bsx-black); /* Fluent2 Foreground */
    --fluent-accent: var(--bsx-cadet-pressed); /* Fluent2 Accent */
    /* Sidebar & Text */
    --bs-sidebar-fg: #ffffff;
    --bs-sidebar-fg-muted: #d7e6ff;
    --bs-cyan: #6ad7ff; /* selected (cyan-ish) */
    --bs-cadet: #5f9ea0; /* hover (cadetblue) */
    --bs-hover-bg: rgba(95,158,160,.20); /* hover background */
    --bs-active-bg: rgba(106,215,255,.16); /* active background */
    --bs-border-accent: #6ad7ff; /* accent border */
    /* Nav colors */
    --brand-blue: #111B2C;
    --nav-bg: #2F5485;
    --nav-img: url('/images/ai-grid-overlay2.webp');
    --nav-tint-1: rgba(17,27,44,.90);
    --nav-tint-2: rgba(17,27,44,.84);
}


/* ========== Buttons ========== */
/* Primary → Action */
.e-btn.e-primary, .e-css.e-btn.e-primary {
    background: var(--bsx-action) !important; /* Use action color directly */
    border-color: var(--bsx-action) !important;
    color: #fff !important; /* White text on dark background */
}

    .e-btn.e-primary:hover {
        background: #295C84 !important;
        border-color: #295C84 !important;
    }

    .e-btn.e-primary:active, .e-btn.e-primary.e-active {
        background: #244E73 !important;
        border-color: #244E73 !important;
    }

/* Secondary → Option */
.e-btn.e-secondary, .e-css.e-btn.e-secondary {
    background: var(--bsx-option) !important; /* Use option color directly */
    border-color: var(--bsx-option) !important;
    color: #fff !important; /* White text on dark background */
}

    .e-btn.e-secondary:hover {
        background: #3A516B !important;
        border-color: #3A516B !important;
    }

    .e-btn.e-secondary:active, .e-btn.e-secondary.e-active {
        background: #32465B !important;
        border-color: #32465B !important;
    }

/* Danger → Exit */
.e-btn.e-danger, .e-css.e-btn.e-danger {
    background: var(--bsx-exit) !important;
    border-color: var(--bsx-exit) !important;
    color: var(--bsx-black) !important;
}

    .e-btn.e-danger:hover {
        background: #C8C8C8 !important;
        border-color: #C8C8C8 !important;
    }

    .e-btn.e-danger:active, .e-btn.e-danger.e-active {
        background: #BDBDBD !important;
        border-color: #BDBDBD !important;
    }

/* =============================== */
/* Grid Header Color Adjustment */
/* =============================== */
/* Grid Header Cells */
.e-grid .e-headercell {
    background-color: var(--brand-blue); /* Retain your custom brand blue */
    color: #ffffff; /* Change grid header text color to white for better contrast */
    font-size: 11px;
    font-weight: bold;
}
/* ========== Grid & Table ========== */
.e-grid .e-rowcell, .e-grid .e-headercell, .e-grid .e-gridheader {
    border-color: var(--bsx-border-100) !important;
}

.e-grid .e-groupdroparea {
    background: var(--bsx-groupdrop-bg) !important;
    color: var(--bsx-groupdrop-text) !important;
}

.e-grid .e-rowcell .e-btn {
    background: var(--bsx-action) !important; /* Use action color if grid-action not defined */
    color: #fff !important; /* White text on dark background */
    border-color: var(--bsx-action) !important;
}

    .e-grid .e-rowcell .e-btn:hover {
        background: #295C84 !important; /* Darker on hover */
        border-color: #295C84 !important;
        color: #fff !important;
    }

    .e-grid .e-rowcell .e-btn:active {
        background: #244E73 !important; /* Even darker when active */
        border-color: #244E73 !important;
        color: #fff !important;
    }

/* ========== Sidebar Menu ========== */
.sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item > a,
.sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item > a .e-menu-text {
    color: var(--bs-sidebar-fg) !important;
}

.sidebar-menu .e-menu-container .e-menu-icon,
.sidebar-menu .e-menu-container .bi,
.sidebar-menu .e-menu-container .e-menu-item .material-symbols-outlined {
    color: var(--bs-sidebar-fg) !important;
    opacity: .95;
}

.sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item:hover > a,
.sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-focused > a {
    background: var(--bs-hover-bg) !important;
    color: var(--bs-sidebar-fg) !important;
}

.sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected > a {
    background: var(--bs-active-bg) !important;
    color: var(--bs-cyan) !important;
    border-left: 3px solid var(--bs-border-accent);
}

    .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected > a .e-menu-icon,
    .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected > a .bi,
    .sidebar-menu .e-menu-container ul.e-vertical > li.e-menu-item.e-selected > a .material-symbols-outlined {
        color: var(--bs-cyan) !important;
    }

/* Submenu (Flyout) */
.sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul {
    background: linear-gradient(var(--nav-tint-1), var(--nav-tint-2)), var(--nav-img);
    border: 1px solid rgba(0,0,0,.25);
}

    .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item > a {
        color: var(--bs-sidebar-fg) !important;
    }

    .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item:hover > a,
    .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item.e-focused > a {
        background: var(--bs-hover-bg) !important;
    }

    .sidebar-menu .e-menu-container ul.e-vertical > .e-menu-item .e-ul .e-menu-item.e-selected > a {
        background: var(--bs-active-bg) !important;
        color: var(--bs-cyan) !important;
    }

/* Collapsed State */
.sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item .e-menu-icon,
.sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item .bi,
.sidebar-menu.e-dock.e-close .e-menu-container ul.e-vertical > li.e-menu-item .material-symbols-outlined {
    color: var(--bs-sidebar-fg) !important;
}

/* ========== General Layout ========== */
body {
    background-color: var(--fluent-background); /* Set to white */
    color: var(--fluent-foreground);
}

.top-bar {
    background-color: var(--brand-blue);
    color: #ffffff;
}

.page-hero {
    background: radial-gradient(1200px 600px at 20% -10%, var(--bsx-action), transparent 60%), radial-gradient(1200px 600px at 120% 10%, var(--bsx-option), transparent 60%), var(--fluent-background);
}

/* Footer */
.footer-bar {
    background-color: #0f1a2a;
    color: #ffffff;
}




/* !!!!!!!!!!!!!!!!! PATCH FILES 2025.11.13 */
/* ===== Section bar under top brand bar (make light grey) ===== */
.sticky-toolbar,
.section-toolbar {
    background-color: #f3f4f6 !important; /* soft grey */
    border-bottom: 1px solid #d6d9de !important;
    color: #333 !important;
}

    .sticky-toolbar .e-toolbar,
    .section-toolbar .e-toolbar {
        background-color: #f3f4f6 !important;
        border-bottom: 1px solid #d6d9de !important;
    }

/* ===== SfGrid: blue header with white text (like your reference) ===== */
:root {
    --grid-header-bg: #2F6690; /* your action blue */
    --grid-header-fg: #ffffff;
}

/* header cells & bar */
.e-grid .e-gridheader,
.e-grid .e-gridheader .e-headercell,
.e-grid .e-gridheader .e-headercontent {
    background-color: var(--grid-header-bg) !important;
}

    /* header text */
    .e-grid .e-gridheader .e-headercelldiv,
    .e-grid .e-gridheader .e-headercell .e-headertext {
        color: var(--grid-header-fg) !important;
    }

    /* sort/filter icons in header */
    .e-grid .e-gridheader .e-icons,
    .e-grid .e-gridheader .e-sortfilterdiv .e-icons,
    .e-grid .e-gridheader .e-filtermenudiv .e-icons {
        color: var(--grid-header-fg) !important;
        fill: var(--grid-header-fg) !important;
        opacity: 1 !important;
    }

    /* optional: header cell borders subtle */
    .e-grid .e-gridheader,
    .e-grid .e-headercell,
    .e-grid .e-gridheader .e-headercontent {
        border-color: rgba(255,255,255,.18) !important;
    }

/* ===== Buttons: white label text everywhere; keep your blues ===== */
:root {
    --btn-primary-bg: #2F6690; /* Action */
    --btn-secondary-bg: #415A77; /* Option */
    --changed-cell-bg: #ccf4c3;
    --btn-neutral-bg: #e5e7eb; /* gray-200 */
    --btn-neutral-fg: #1f2937; /* gray-800 */
    --btn-neutral-bd: #e5e7eb;
    --btn-neutral-hv: #d1d5db; /* gray-300 */
    --btn-neutral-ac: #cbd5e1; /* gray-300/400 */
}

/* base Syncfusion button - default to action color (not white) */
/* Exclude toolbar buttons (.e-tbar-btn) - they should be white */
.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn),
.e-control.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn) {
    background: var(--bsx-action) !important; /* Use action blue instead of white */
    border-color: var(--bsx-action) !important;
    color: #fff !important; /* White text on dark background */
}

    .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):hover,
    .e-control.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):hover {
        background: #295C84 !important; /* Darker on hover */
        border-color: #295C84 !important;
        color: #fff !important;
    }

    .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):active,
    .e-control.e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):not(.e-flat):not(.e-outline):not(.e-success):not(.e-info):not(.e-warning):not(.e-tbar-btn):active {
        background: #244E73 !important; /* Even darker when active */
        border-color: #244E73 !important;
        color: #fff !important;
    }

    /* filled buttons */
    .e-btn.e-primary, .e-css.e-btn.e-primary {
        background: var(--btn-primary-bg) !important;
        border-color: var(--btn-primary-bg) !important;
    }

    .e-btn.e-secondary, .e-css.e-btn.e-secondary {
        background: var(--btn-secondary-bg) !important;
        border-color: var(--btn-secondary-bg) !important;
    }

    /* common hover/active */
    .e-btn.e-primary:hover {
        filter: brightness(0.92);
    }

    .e-btn.e-primary:active, .e-btn.e-primary.e-active {
        filter: brightness(0.85);
    }

    .e-btn.e-secondary:hover {
        filter: brightness(0.92);
    }

    .e-btn.e-secondary:active, .e-btn.e-secondary.e-active {
        filter: brightness(0.85);
    }

    /* “Get Data” stays white text even if templated/plain .e-btn */
    button#GetDataBtn, /* if you have an id */
    .e-btn.get-data, /* or add class="get-data" */
    .e-control.e-btn.get-data {
        color: #fff !important;
    }

    /* keep outline/ghost buttons readable (optional) */
    .e-btn.e-outline, .e-control.e-btn.e-outline {
        color: #2b2b2b !important;
    }

    /* 1) Restrict white text to filled primaries/secondaries only */
    .e-btn.e-primary, .e-css.e-btn.e-primary,
    .e-btn.e-secondary, .e-css.e-btn.e-secondary,
    .e-btn.e-danger, .e-css.e-btn.e-danger {
        color: #fff !important;
    }

    /* 2) Neutral buttons (e.g., Cancel) – soft gray with dark text */
    .e-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger),
    .e-toolbar .e-btn.e-flat:not(.e-primary):not(.e-secondary):not(.e-danger),
    .e-btn.e-flat:not(.e-primary):not(.e-secondary):not(.e-danger) {
        background: var(--btn-neutral-bg) !important;
        border-color: var(--btn-neutral-bd) !important;
        color: var(--btn-neutral-fg) !important;
    }

        /* Hover / active states for neutral buttons */
        .e-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):hover,
        .e-btn.e-flat:not(.e-primary):not(.e-secondary):not(.e-danger):hover {
            background: var(--btn-neutral-hv) !important;
            border-color: var(--btn-neutral-hv) !important;
            color: var(--btn-neutral-fg) !important;
        }

        .e-dialog .e-footer-content .e-btn:not(.e-primary):not(.e-secondary):not(.e-danger):active,
        .e-btn.e-flat:not(.e-primary):not(.e-secondary):not(.e-danger):active {
            background: var(--btn-neutral-ac) !important;
            border-color: var(--btn-neutral-ac) !important;
            color: var(--btn-neutral-fg) !important;
        }

    /* Optional: outline/ghost neutrals stay readable */
    .e-btn.e-outline:not(.e-primary):not(.e-secondary):not(.e-danger) {
        color: var(--btn-neutral-fg) !important;
        border-color: #cbd5e1 !important;
    }



/* soft green like your ref */

.e-grid .e-updatedtd {
    background-color: var(--changed-cell-bg) !important;
    transition: background-color .25s ease;
}

/* Keep the highlight even on hover/selection */
.e-grid .e-row:hover .e-updatedtd,
.e-grid .e-selectionbackground .e-updatedtd {
    background-color: var(--changed-cell-bg) !important;
}

/* Optional: added/edited rows (if you use them) */
.e-grid .e-addedrow .e-rowcell,
.e-grid .e-updatedrow .e-rowcell {
    background-color: #e9fbe4 !important; /* even lighter */
}


/* Read-only columns: cells + any inner content */
.e-grid td.e-rowcell.col-readonly,
.e-grid td.e-rowcell.col-readonly * {
    background-color: whitesmoke !important;
    color: lightslategrey !important;
}

/* ========== Syncfusion Toast Styling ========== */
/* Position Toast at top-left with 100px offset from top to avoid NavMenu top-bar */
.e-toast-container.e-toast-top-left {
    top: 100px !important;
    left: 20px !important;
    z-index: 2100 !important; /* Above top-bar (z-index: 2000) */
}

/* Ensure toast container has proper z-index regardless of position */
.e-toast-container {
    z-index: 2100 !important; /* Above top-bar (z-index: 2000) */
}

/* Ensure individual toast notifications also have proper z-index */
.e-toast-container .e-toast {
    z-index: 2100 !important;
}

/* ========== Toolbar and Hamburger Button Styling ========== */
/* Main nav-menu hamburger button (in sticky-toolbar) - MUST come after general button rules */
.sticky-toolbar .e-toolbar .e-tbar-btn,
.sticky-toolbar .e-toolbar .e-toolbar-item .e-tbar-btn,
.sticky-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn,
.sticky-toolbar .e-toolbar .e-toolbar-item button.e-tbar-btn,
.sticky-toolbar .e-toolbar-items .e-toolbar-item button.e-tbar-btn {
    background: #ffffff !important; /* White background - use 'background' to override 'background' property */
    background-color: #ffffff !important; /* White background */
    border-color: #e0e0e0 !important; /* Light gray border */
    color: #333333 !important; /* Dark text for readability */
}

    .sticky-toolbar .e-toolbar .e-tbar-btn:hover,
    .sticky-toolbar .e-toolbar .e-toolbar-item .e-tbar-btn:hover,
    .sticky-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn:hover,
    .sticky-toolbar .e-toolbar .e-toolbar-item button.e-tbar-btn:hover,
    .sticky-toolbar .e-toolbar-items .e-toolbar-item button.e-tbar-btn:hover {
        background: #f5f5f5 !important; /* Smoke white on hover */
        background-color: #f5f5f5 !important; /* Smoke white on hover */
        border-color: #d0d0d0 !important;
    }

    .sticky-toolbar .e-toolbar .e-tbar-btn:active,
    .sticky-toolbar .e-toolbar .e-toolbar-item .e-tbar-btn:active,
    .sticky-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn:active,
    .sticky-toolbar .e-toolbar .e-toolbar-item button.e-tbar-btn:active,
    .sticky-toolbar .e-toolbar-items .e-toolbar-item button.e-tbar-btn:active {
        background: #e8e8e8 !important; /* Slightly darker on active */
        background-color: #e8e8e8 !important; /* Slightly darker on active */
        border-color: #c0c0c0 !important;
    }

/* Grid toolbar buttons (ToolbarHandler buttons) - MUST come after general button rules */
.e-grid .e-toolbar .e-tbar-btn,
.e-grid .e-toolbar .e-toolbar-item .e-tbar-btn,
.e-grid .e-toolbar-items .e-toolbar-item .e-tbar-btn,
.e-grid .e-toolbar .e-toolbar-item button.e-tbar-btn,
.e-grid .e-toolbar-items .e-toolbar-item button.e-tbar-btn {
    background: #ffffff !important; /* White background - use 'background' to override 'background' property */
    background-color: #ffffff !important; /* White background */
    border-color: #e0e0e0 !important; /* Light gray border */
    color: #333333 !important; /* Dark text for readability */
}

    .e-grid .e-toolbar .e-tbar-btn:hover,
    .e-grid .e-toolbar .e-toolbar-item .e-tbar-btn:hover,
    .e-grid .e-toolbar-items .e-toolbar-item .e-tbar-btn:hover,
    .e-grid .e-toolbar .e-toolbar-item button.e-tbar-btn:hover,
    .e-grid .e-toolbar-items .e-toolbar-item button.e-tbar-btn:hover {
        background: #f5f5f5 !important; /* Smoke white on hover */
        background-color: #f5f5f5 !important; /* Smoke white on hover */
        border-color: #d0d0d0 !important;
    }

    .e-grid .e-toolbar .e-tbar-btn:active,
    .e-grid .e-toolbar .e-toolbar-item .e-tbar-btn:active,
    .e-grid .e-toolbar-items .e-toolbar-item .e-tbar-btn:active,
    .e-grid .e-toolbar .e-toolbar-item button.e-tbar-btn:active,
    .e-grid .e-toolbar-items .e-toolbar-item button.e-tbar-btn:active {
        background: #e8e8e8 !important; /* Slightly darker on active */
        background-color: #e8e8e8 !important; /* Slightly darker on active */
        border-color: #c0c0c0 !important;
    }

/* ========== XeoKit Viewer Toolbar ========== */
.xeokit-sf-toolbar {
    background: rgba(0, 0, 0, 0.7) !important;
    border-radius: 4px;
    padding: 4px;
}

.xeokit-sf-toolbar .e-toolbar-item .e-tbar-btn {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    margin: 2px;
}

.xeokit-sf-toolbar .e-toolbar-item .e-tbar-btn:hover {
    background: var(--bsx-action) !important;
    border-color: var(--bsx-action) !important;
}

.xeokit-sf-toolbar .e-toolbar-item .e-tbar-btn.e-active {
    background: var(--bsx-action) !important;
    border-color: var(--bsx-action) !important;
}

.xeokit-units-dropdown .e-input-group {
    background: rgba(255, 255, 255, 0.9) !important;
}

.xeokit-units-dropdown .e-input-group {
    background: rgba(255, 255, 255, 0.9) !important;
}

.xeokit-units-dropdown .e-input-group .e-input {
    color: var(--bsx-black) !important;
}

/* ========== XeoKit NavCube Color Styling ========== */
/* NavCube colors are configured in xeokit-viewer.js using CSS variables:
   - Top/Bottom: --bsx-form-bg
   - Left/Right: --bsx-action  
   - Front/Back: --bsx-option
   Note: NavCubePlugin uses WebGL rendering, so colors must be set programmatically
   via the plugin configuration (handled in JavaScript)
*/