/* bomsync-theme.css  (load after material3.css) */
:root {
    /* Core palette (hex from your WinForms colors) */
    --bsx-form-bg: #111B2C; /* FormBg (17,27,44)  */
    --bsx-panel-bg: #33415C; /* PanelBg (51,65,92) */
    --bsx-white: #FFFFFF;
    --bsx-black: #000000;
    --bsx-gray: #D3D3D3; /* LightGray */
    --bsx-light-blue: #ADD8E6; /* LightBlue */
    --bsx-dim-gray: #696969; /* DimGray */
    /* Buttons */
    --bsx-action: #2F6690; /* ActionBtn (47,102,144) */
    --bsx-option: #415A77; /* OptionBtn (65,90,119)  */
    --bsx-option-panel: #778899; /* OptionPanelBtn (LightSlateGray) */
    --bsx-exit: #D3D3D3; /* ExitBtn (LightGray) */
    --bsx-grid-action: #F2F2F2; /* GridActionBtn (242,242,242) */
    --bsx-grid-text: #333333; /* GridActionText (51,51,51) */
    --bsx-grid-pressed: #CCCCCC; /* GridActionPressed (204,204,204) */
    --bsx-cadet-pressed: #5F9EA0; /* PressedCadetBlue */
    /* DataGrid */
    --bsx-border-100: #646464; /* Border100 (100,100,100) */
    --bsx-groupdrop-bg: #E6E6E6; /* GroupDropBg (230,230,230) */
    --bsx-groupdrop-text: #333333; /* GroupDropText (51,51,51) */
    /* Brand bars (you already use these) */
    --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);
    /* text adjustments */
    --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);
    --bs-active-bg: rgba(106,215,255,.16);
    --bs-border-accent: #6ad7ff;
    /* material theme override */
    /*--md-sys-color-primary: #7eaacd;*/ /* your nav blue */
    /*--md-sys-color-on-primary: #ffffff;*/ /* white font */
    /*--md-sys-color-secondary: #111b2c;*/ /* dark background */
    /*--md-sys-color-on-surface: #ffffff;*/ /* force white text */
    /*--md-sys-color-surface-variant: #111b2c;*/
}


/* ===== 2) Global mapping: Primary/Secondary/Danger ===== */
/* Primary → Action */
.e-btn.e-primary, .e-css.e-btn.e-primary {
    background: var(--bsx-action) !important;
    border-color: var(--bsx-action) !important;
    color: #fff !important;
}

    .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;
    border-color: var(--bsx-option) !important;
    color: #fff !important;
}

    .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: #111 !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;
    }

/* ===== 3) Optional named button classes ===== */
.btn-action {
    background: var(--bsx-action) !important;
    border-color: var(--bsx-action) !important;
    color: #fff !important;
}

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

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

.btn-option {
    background: var(--bsx-option) !important;
    border-color: var(--bsx-option) !important;
    color: #fff !important;
}

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

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

.btn-exit {
    background: var(--bsx-exit) !important;
    border-color: var(--bsx-exit) !important;
    color: #111 !important;
}

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

    .btn-exit:active {
        background: #BDBDBD !important;
        border-color: #BDBDBD !important;
    }

.btn-pressed, .is-pressed {
    background: var(--bsx-cadet-pressed) !important;
    border-color: var(--bsx-cadet-pressed) !important;
    color: #fff !important;
}

/* ===== 4) Grid touches ===== */
.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;
    border-bottom: 1px solid var(--bsx-border-100) !important;
}

.e-grid .e-rowcell .e-btn {
    background: var(--bsx-grid-action);
    color: var(--bsx-grid-text);
    border-color: var(--bsx-grid-action);
}

    .e-grid .e-rowcell .e-btn:active {
        background: var(--bsx-grid-pressed);
        border-color: var(--bsx-grid-pressed);
    }



/* Base text color for menu links and icons */
.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 .material-symbols-outlined {
    color: var(--bs-sidebar-fg) !important;
    opacity: .95;
}

/* Hover / focus */
.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;
}

/* SELECTED (this kills the default Material purple) */
.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);
}

    /* Keep icons tinted on selected too */
    .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) panel: background + colors */
.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 (dock) state still needs white icons */
.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;
}

/* Optional: kill the default M3 ripple flash color if it clashes */
.sidebar-menu .e-ripple-element {
    background: transparent !important;
}