/* ============================================================
   dark-theme.css  –  Light/Dark token system + dark overrides
   Reference this file in _Layout.cshtml AFTER all other CSS.
   ============================================================ */

/* ── 1. Design tokens (light defaults) ─────────────────────── */
:root {
    /* brand gradient stops (unchanged between modes) */
    --main-light-color: #1471d1;
    --main-dark-color: #0d47a1;
    /* surface */
    --bg-body: #f6f7fb;
    --bg-card: #ffffff;
    --bg-hover: #f0f4ff;
    --bg-input: #ffffff;
    --bg-sidebar-item: transparent;
    --bg-sidebar-hover: #2688dd;
    /* text */
    --text-primary: #212529;
    --text-muted: #6c757d;
    --text-on-gradient: #e1e1e1;
    /* borders */
    --border-color: #dee2e6;
    --border-subtle: #e5e5e5;
    /* notification panel */
    --notif-bg: #ffffff;
    --notif-text: #333333;
    --notif-meta: #aaaaaa;
    --notif-border: #f0f0f0;
    --notif-header-sep: #eeeeee;
    /* suggestions dropdown */
    --suggestion-bg: #ffffff;
    --suggestion-text: #212529;
    --suggestion-hover: #eeeeee;
    --suggestion-border: rgba(0,0,0,0.6);
    /* sign/login page */
    --sign-bg: #f6f7fb;
    /* access-denied page */
    --denied-bg-start: #eeeeee;
    --denied-bg-end: #dcdcdc;
    /* upper-part component */
    --upper-bg: #eeeeee;
    /* DevExtreme theme file to load */
    --dx-theme: light;
}

/* ── 2a. Mid-mode token overrides (navy/slate blue) ─────────── */
body.mid {
    --bg-body: #132035;
    --bg-card: #1a2d47;
    --bg-hover: #1e3554;
    --bg-input: #1a2d47;
    --bg-sidebar-hover: #2a4a70;
    --text-primary: #dce8f5;
    --text-muted: #8aaac8;
    --text-on-gradient: #e1e1e1;
    --border-color: #2a4060;
    --border-subtle: #1e3554;
    --notif-bg: #1a2d47;
    --notif-text: #dce8f5;
    --notif-meta: #8aaac8;
    --notif-border: #2a4060;
    --notif-header-sep: #2a4060;
    --suggestion-bg: #1a2d47;
    --suggestion-text: #dce8f5;
    --suggestion-hover: #1e3a5f;
    --suggestion-border: rgba(255,255,255,0.15);
    --sign-bg: #132035;
    --denied-bg-start: #132035;
    --denied-bg-end: #0d1a2b;
    --upper-bg: #1a2d47;
}

/* ── 2b. Dark-mode token overrides ──────────────────────────── */
body.dark {
    --bg-body: #121212;
    --bg-card: #1e1e1e;
    --bg-hover: #1a2535 !important;
    --bg-input: #2a2a2a;
    --bg-sidebar-item: transparent;
    --bg-sidebar-hover: #1a4a7a;
    --text-primary: #e0e0e0;
    --text-muted: #9e9e9e;
    --text-on-gradient: #e1e1e1; /* stays same – gradient bg is always dark */

    --border-color: #333333;
    --border-subtle: #2a2a2a;
    --notif-bg: #1e1e1e;
    --notif-text: #e0e0e0;
    --notif-meta: #888888;
    --notif-border: #2a2a2a;
    --notif-header-sep: #2a2a2a;
    --suggestion-bg: #1e1e1e;
    --suggestion-text: #e0e0e0;
    --suggestion-hover: #2a2a2a;
    --suggestion-border: rgba(255,255,255,0.2);
    --sign-bg: #121212;
    --denied-bg-start: #1a1a1a;
    --denied-bg-end: #111111;
    --upper-bg: #1e1e1e;
}

/* ── 3. Global body ─────────────────────────────────────────── */
body {
    background-color: var(--bg-body);
    color: var(--text-primary);
    transition: background-color 0.25s, color 0.25s;
}

/* ── 4. Dark toggle button ──────────────────────────────────── */
#darkToggle {
    cursor: pointer;
    font-size: 18px;
    background: none;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    padding: 2px 8px;
    color: #ffffff;
    line-height: 1.4;
    transition: border-color 0.2s, transform 0.3s;
    margin-left: 8px;
    margin-right: 8px;
}

    #darkToggle:hover {
        border-color: rgba(255,255,255,0.9);
        transform: rotate(15deg);
    }

/* ── 5. Notification panel ──────────────────────────────────── */
.notif-panel-dropdown {
    background: var(--notif-bg) !important;
    border: 1px solid var(--border-color) !important;
}

    .notif-panel-dropdown .notif-header-sep {
        border-bottom-color: var(--notif-header-sep) !important;
    }

    /* header row inside panel */
    .notif-panel-dropdown > div:first-child {
        border-bottom-color: var(--notif-header-sep) !important;
    }

    .notif-panel-dropdown strong {
        color: var(--notif-text) !important;
    }

    .notif-panel-dropdown button {
        color: var(--notif-meta) !important;
    }

/* ── 6. Sidebar suggestions dropdown ────────────────────────── */
.suggestions-area {
    background-color: var(--suggestion-bg) !important;
    border: 1px solid var(--border-color);
}

.search-suggestion {
    border-bottom-color: var(--suggestion-border) !important;
    color: var(--suggestion-text) !important;
}

    .search-suggestion:hover {
        background-color: var(--suggestion-hover) !important;
        color: var(--suggestion-text) !important;
    }

/* ── 7. Bootstrap card / panel overrides ────────────────────── */
body.mid .bg-white,
body.mid .card,
body.mid .card-body,
body.dark .bg-white,
body.dark .card,
body.dark .card-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary);
}

body.mid .border,
body.mid .border-top,
body.mid .border-bottom,
body.dark .border,
body.dark .border-top,
body.dark .border-bottom {
    border-color: var(--border-color) !important;
}

body.mid .text-muted,
body.dark .text-muted {
    color: var(--text-muted) !important;
}

/* ── 8. DevExtreme widget dark overrides ────────────────────── */
/* When dx.dark.css is loaded these are mostly handled,
   but a few container/wrapper overrides help consistency */
body.dark .dx-widget,
body.dark .dx-overlay-content {
    color: var(--text-primary);
}

/* ── 9. Upper-part component (Index.css) ────────────────────── */
.upper-part {
    background-color: var(--upper-bg);
}

/* ── 10. Sign / login page ──────────────────────────────────── */
.wraper_1 {
    background-color: var(--sign-bg) !important;
}

/* ── 11. Access-denied page ─────────────────────────────────── */
body.denied-page {
    background: linear-gradient(to bottom right, var(--denied-bg-start), var(--denied-bg-end)) !important;
}

/* ── 12. Sidebar / Navbar / Footer backgrounds ───────────────
   light: original blue gradient (no override needed)
   mid:   deep navy  #1e3a5f
   dark:  charcoal   #2d2d2d
*/
body.mid aside,
body.mid header,
body.mid footer {
    background: #1e3a5f !important;
}

body.dark aside,
body.dark header,
body.dark footer {
    background: #2d2d2d !important;
    /*background: #1ca8dd !important;  I like it*/
}

/* Active sidebar item hover */
body.mid .accordion-body li:has(a:hover),
body.mid .accordion-body li:has(a.active) {
    background-color: #2a4a70;
}

body.dark .accordion-body li:has(a:hover),
body.dark .accordion-body li:has(a.active) {
    background-color: #3a3a3a;
}

/* Dashboard link active indicator bar */
body.mid .dashboard-link:hover::before,
body.mid .dashboard-link.active::before,
body.dark .dashboard-link:hover::before,
body.dark .dashboard-link.active::before {
    background-color: #ffffff;
}

/* ── 13. Scrollbar ──────────────────────────────────────────── */
body.mid ::-webkit-scrollbar,
body.dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

body.mid ::-webkit-scrollbar-track {
    background: #0d1a2b;
}

body.mid ::-webkit-scrollbar-thumb {
    background: #2a4a70;
    border-radius: 3px;
}

body.dark ::-webkit-scrollbar-track {
    background: #1a1a1a;
}

body.dark ::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

/* ── 14. Flash prevention helper ───────────────────────────── */
html.dark-pending body {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

html.mid-pending body {
    background-color: #132035 !important;
    color: #dce8f5 !important;
}

/* ═══════════════════════════════════════════════════════════════
   MID-MODE – DevExtreme + content area overrides
   (dx.light.css stays loaded; we override on top via body.mid)
   ═══════════════════════════════════════════════════════════════ */

/* ── Body / container backgrounds ──────────────────────────── */
body.mid #bodyContainer,
/*body.mid .container-fluid,*/
body.mid .container {
    background-color: var(--bg-body) !important;
    color: var(--text-primary) !important;
}

/* ── DataGrid ───────────────────────────────────────────────── */
body.mid .dx-datagrid,
body.mid .dx-datagrid-headers,
body.mid .dx-datagrid-rowsview,
body.mid .dx-datagrid-filter-row,
body.mid .dx-datagrid-total-footer,
body.mid .dx-datagrid-group-panel {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

    /* Header row cells */
    body.mid .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
        background-color: #162a42 !important;
        color: #b8d4f0 !important;
        border-color: var(--border-color) !important;
    }

    /* Data rows */
    body.mid .dx-datagrid-rowsview .dx-row > td {
        background-color: var(--bg-card) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Alternating rows */
    body.mid .dx-datagrid-rowsview .dx-row-alt > td,
    body.mid .dx-datagrid-rowsview .dx-row-alt > tr > td {
        background-color: #162a42 !important;
    }

    /* Row hover */
    body.mid .dx-datagrid-rowsview .dx-row:not(.dx-header-row):hover > td {
        background-color: var(--bg-hover) !important;
    }

    /* Selected row */
    body.mid .dx-datagrid-rowsview .dx-selection > td,
    body.mid .dx-datagrid-rowsview .dx-selection.dx-row:hover > td {
        background-color: #1e4a7a !important;
        color: #dce8f5 !important;
    }

    /* Filter row */
    body.mid .dx-datagrid-filter-row td {
        background-color: #162a42 !important;
        border-color: var(--border-color) !important;
    }

body.dark .dx-datagrid-rowsview .dx-row:hover > td,
body.dark .dx-datagrid-rowsview .dx-data-row:hover > td,
body.dark .dx-datagrid-rowsview .dx-row.dx-state-hover > td {
    background-color: #3a3a3a !important;
    color: #e0e0e0 !important;
}


/* Group panel drag area */
body.mid .dx-datagrid-group-panel {
    background-color: #162a42 !important;
    color: var(--text-muted) !important;
}

/* Pager */
body.mid .dx-datagrid-pager,
body.mid .dx-pager {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

body.mid .dx-page,
body.mid .dx-page-size {
    color: var(--text-primary) !important;
}

    body.mid .dx-page.dx-selection,
    body.mid .dx-page-size.dx-selection {
        background-color: #1e4a7a !important;
        color: #ffffff !important;
        border-radius: 4px;
    }

/* ── Toolbar ────────────────────────────────────────────────── */
body.mid .dx-toolbar,
body.mid .dx-toolbar-items-container {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* ── Buttons ────────────────────────────────────────────────── */
body.mid .dx-button {
    background-color: #1e3a5f !important;
    color: #dce8f5 !important;
    border-color: #2a4a70 !important;
}

    body.mid .dx-button:hover,
    body.mid .dx-button.dx-state-hover {
        background-color: #2a4a70 !important;
    }

/* ── TextBox / SelectBox / DateBox / NumberBox ──────────────── */
body.mid .dx-texteditor,
body.mid .dx-texteditor-container,
body.mid .dx-texteditor-input,
body.mid .dx-placeholder {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

    body.mid .dx-texteditor.dx-state-focused {
        border-color: #4a90d9 !important;
    }

    body.mid .dx-placeholder::before {
        color: var(--text-muted) !important;
    }

/* ── DropDown popup / list ──────────────────────────────────── */
body.mid .dx-dropdownlist-popup-wrapper .dx-list,
body.mid .dx-dropdownlist-popup-wrapper .dx-list-item,
body.mid .dx-popup-content,
body.mid .dx-overlay-content {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.mid .dx-list-item:hover,
body.mid .dx-list-item.dx-state-hover {
    background-color: var(--bg-hover) !important;
}

body.mid .dx-list-item.dx-state-focused,
body.mid .dx-list-item.dx-list-item-selected {
    background-color: #1e4a7a !important;
    color: #dce8f5 !important;
}

/* ── Popup / Dialog ─────────────────────────────────────────── */
body.mid .dx-popup-wrapper .dx-overlay-content,
body.mid .dx-popup-title,
body.mid .dx-popup-content {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* ── Checkbox ───────────────────────────────────────────────── */
body.mid .dx-checkbox-icon {
    border-color: #4a90d9 !important;
    background-color: var(--bg-input) !important;
}

/* ── General widget text ────────────────────────────────────── */
body.mid .dx-widget {
    color: var(--text-primary) !important;
}

    body.mid .dx-widget input,
    body.mid .dx-widget textarea,
    body.mid .dx-widget select {
        background-color: var(--bg-input) !important;
        color: var(--text-primary) !important;
    }

/* ── Bootstrap / plain HTML inputs & tables ─────────────────── */
body.mid input,
body.mid textarea,
body.mid select,
body.mid .form-control,
body.mid .form-select {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.mid table,
body.mid .table {
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

    body.mid .table > :not(caption) > * > * {
        background-color: var(--bg-card) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

body.mid .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #162a42 !important;
}

/* ── Upper-part / card / panel ──────────────────────────────── */
body.mid .upper-part {
    background-color: var(--upper-bg) !important;
    color: var(--text-primary) !important;
}

body.mid .card,
body.mid .card-body,
body.mid .card-header,
body.mid .card-footer {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.mid .dashboard a {
    background: linear-gradient(to right, #1e3a5f 0%, #2a4a70 80%, #1a2d47 100%);
}

body.dark .dashboard a {
    background: linear-gradient(to right, #2d2d2d 0%, #3a3a3a 80%, #222222 100%);
    /*background: linear-gradient(to right, #1ca8dd 0%, #25b8f0 50%, #1ca8dd 100%); I like this*/
}

body.mid .upper-part h4 {
    background: linear-gradient(to right, #1e3a5f 0%, #2a4a70 80%, #1a2d47 100%);
}

body.dark .upper-part h4 {
    background: linear-gradient(to right, #2d2d2d 0%, #3a3a3a 80%, #222222 100%);
}

aside img {
    /*filter: hue-rotate(200deg) saturate(3) brightness(0.9);*/
    /* Gold */
    /*filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(600%) hue-rotate(5deg) brightness(90%);*/
    /* Red */
    /*filter: brightness(0) saturate(100%) invert(22%) sepia(96%) saturate(2000%) hue-rotate(350deg) brightness(95%);*/
    /* Blue */
    /*filter: brightness(0) saturate(100%) invert(40%) sepia(80%) saturate(1500%) hue-rotate(210deg) brightness(100%);*/
    /* Green */
    /*filter: brightness(0) saturate(100%) invert(40%) sepia(80%) saturate(1500%) hue-rotate(120deg) brightness(95%);*/
    /* Orange */
    /*filter: brightness(0) saturate(100%) invert(30%) sepia(96%) saturate(2000%) hue-rotate(30deg) brightness(100%);*/
    /* Purple */
    /*filter: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1500%) hue-rotate(270deg) brightness(95%);*/
}

body.mid .accordion-button i,
body.mid .dashboard-link i,
body.mid .accordion-body a i {
    color: #64b5f6;
}


body.mid .dx-dropdowneditor-icon {
    color: #fff !important;
}

body.mid .dx-lookup-arrow {
    color: #fff !important;
}

body.mid #PurchaseInvoiceChart {
    color: #fff !important;
}

/*#region Charts*/
body.mid #localProductChart,
body.mid #clientVendorStoreChart,
body.mid #clientVendorStoresAndLocalProductsChart,
body.mid #clientVendorStoreProductStockChart {
    background-color: transparent;
}

    body.mid #localProductChart text,
    body.mid #clientVendorStoreChart text,
    body.mid #clientVendorStoresAndLocalProductsChart text,
    body.mid #clientVendorStoreProductStockChart text {
        fill: white !important;
    }

body.dark #localProductChart,
body.dark #clientVendorStoreChart,
body.dark #clientVendorStoresAndLocalProductsChart,
body.dark #clientVendorStoreProductStockChart {
    background-color: transparent;
}

    body.dark #localProductChart text,
    body.dark #clientVendorStoreChart text,
    body.dark #clientVendorStoresAndLocalProductsChart text,
    body.dark #clientVendorStoreProductStockChart text {
        fill: white !important;
    }

/*#endregion*/



body.dark .accordion-button i,
body.dark .dashboard-link i,
body.dark .accordion-body a i {
    color: #64b5f6;
}


/* ── Buttons – red in mid mode ── */
body.mid .dx-button-mode-contained.dx-button-default {
    background-color: rgb(30, 58, 95) !important;
    color: rgb(220, 232, 245) !important;
    border-color: rgb(42, 74, 112) !important;
}


    body.mid .dx-button-mode-contained.dx-button-default:hover,
    body.mid .dx-button-mode-contained.dx-button-default.dx-state-hover {
        background-color: #2a4a70 !important;
        border-color: #3a5a80 !important;
    }


body.dark .dx-button-mode-contained.dx-button-default {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

    body.dark .dx-button-mode-contained.dx-button-default:hover,
    body.dark .dx-button-mode-contained.dx-button-default.dx-state-hover {
        background-color: #3a3a3a !important;
        border-color: #555555 !important;
    }



/* ---- Mid Tabs Styles ---- */
body.mid .dx-tabs-wrapper {
    background-color: #2a4a70;
    color: #fff !important;
}

body.mid .dx-tab .dx-tab-text {
    color: #fff !important;
}

body.mid .dx-tab {
    background-color: #2a4a70 !important;
    color: #fff !important;
}

    body.mid .dx-tab.dx-tab-selected {
        background-color: #0f1e30 !important;
        color: #fff !important;
        border-bottom: none !important;
        border-bottom-color: transparent !important;
    }

body.mid .dx-tabs {
    border-bottom: none !important;
}
/* ---- End Mid Tabs Styles ---- */

/*body.mid .dx-list .dx-empty-message, .dx-list-item {
    color: #fff;
}*/

body.mid .dx-list .dx-empty-message,
body.mid .dx-list-item {
    color: #fff;
}

/* ── SelectBox / DropDown list hover – mid mode ── */
body.mid .dx-list-item.dx-state-hover,
body.mid .dx-list-item:hover {
    background-color: #2a4a70 !important;
    color: #ffffff !important;
}

/* ── Button icon color – mid mode ── */
body.mid .dx-button-mode-contained .dx-icon,
body.mid .dx-button-normal .dx-icon {
    color: #dce8f5 !important;
}

body.dark .dx-button-mode-contained .dx-icon,
body.dark .dx-button-normal .dx-icon {
    color: #dce8f5 !important;
}

/* ── DataGrid filter row icons – mid mode ── */
body.mid .dx-datagrid .dx-icon-filter-operation-default,
body.mid .dx-datagrid .dx-icon-filter-operation-default::before,
body.mid .dx-datagrid-filter-row .dx-icon {
    color: #8aaac8 !important;
}

/* ── DataGrid header filter icon – mid mode ── */
body.mid .dx-datagrid .dx-header-filter-empty,
body.mid .dx-datagrid .dx-header-filter {
    color: #8aaac8 !important;
}

body.mid .dx-dropdowneditor-icon,
body.dark .dx-dropdowneditor-icon {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* active/open state */
body.mid .dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon,
body.dark .dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon {
    color: #ffffff !important;
    background-color: transparent !important;
}


body.mid div:where(.swal2-container).swal2-center > .swal2-popup,
body.dark div:where(.swal2-container).swal2-center > .swal2-popup {
    background-color: var(--bg-card) !important;
    color: var(--text-primary);
}

body.mid .item-card,
body.dark .item-card {
    background-color: var(--bg-card) !important;
    color: var(--text-primary);
}

#itemCardViewPanelGrid,
#itemCardViewPanelFloat {
    background-color: #fff;
}

body.mid #itemCardViewPanelGrid,
body.mid #itemCardViewPanelFloat,
body.dark #itemCardViewPanelGrid,
body.dark #itemCardViewPanelFloat {
    background-color: var(--bg-card) !important;
    /*color: var(--text-primary);*/
}