/* ==========================================================================
   Vrushikha Stock — design tokens + light/dark theme
   Loaded after Bootstrap 4, so plain class selectors here win by source
   order — no !important needed for the vast majority of overrides.
   ========================================================================== */

:root {
    --bg: #f3f4f8;
    --surface: #ffffff;
    --surface-alt: #f7f8fc;
    --surface-hover: #eef0f8;
    --border: #e3e5ee;
    --border-strong: #d3d6e3;
    --text: #1e2130;
    --text-muted: #6b7086;
    --text-soft: #9297ab;

    --accent: #4f46e5;
    --accent-hover: #4338ca;
    --accent-soft: #eef0fe;
    --accent-soft-strong: #e0e2fc;
    --accent-contrast: #ffffff;

    --success: #15803d;
    --success-soft: #e3f8ea;
    --success-strong: #16a34a;
    --danger: #c0273c;
    --danger-soft: #fdeaec;
    --danger-strong: #dc2626;
    --warning: #b45309;
    --warning-soft: #fef3e0;

    --sidebar-bg: #171933;
    --sidebar-bg-alt: #1f2246;
    --sidebar-text: rgba(255, 255, 255, .68);
    --sidebar-text-active: #ffffff;
    --sidebar-border: rgba(255, 255, 255, .08);

    --shadow-sm: 0 1px 2px rgba(20, 21, 40, .04), 0 1px 3px rgba(20, 21, 40, .06);
    --shadow-md: 0 4px 10px rgba(20, 21, 40, .06), 0 2px 4px rgba(20, 21, 40, .05);
    --radius: .65rem;
    --radius-sm: .45rem;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #12131c;
        --surface: #1a1c29;
        --surface-alt: #20222f;
        --surface-hover: #262838;
        --border: #2c2f42;
        --border-strong: #3a3d54;
        --text: #e7e8f0;
        --text-muted: #9aa0b4;
        --text-soft: #767c93;

        --accent: #818cf8;
        --accent-hover: #a5b0fb;
        --accent-soft: rgba(129, 140, 248, .16);
        --accent-soft-strong: rgba(129, 140, 248, .26);
        --accent-contrast: #14152a;

        --success: #4ade80;
        --success-soft: rgba(74, 222, 128, .14);
        --success-strong: #22c55e;
        --danger: #f87171;
        --danger-soft: rgba(248, 113, 113, .14);
        --danger-strong: #ef4444;
        --warning: #fbbf24;
        --warning-soft: rgba(251, 191, 36, .14);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow-md: 0 6px 16px rgba(0, 0, 0, .35);
    }
}

:root[data-theme="dark"] {
    --bg: #12131c;
    --surface: #1a1c29;
    --surface-alt: #20222f;
    --surface-hover: #262838;
    --border: #2c2f42;
    --border-strong: #3a3d54;
    --text: #e7e8f0;
    --text-muted: #9aa0b4;
    --text-soft: #767c93;

    --accent: #818cf8;
    --accent-hover: #a5b0fb;
    --accent-soft: rgba(129, 140, 248, .16);
    --accent-soft-strong: rgba(129, 140, 248, .26);
    --accent-contrast: #14152a;

    --success: #4ade80;
    --success-soft: rgba(74, 222, 128, .14);
    --success-strong: #22c55e;
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, .14);
    --danger-strong: #ef4444;
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, .14);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .35);
}

/* base */
html, body { background: var(--bg); }
body {
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: background-color .15s ease, color .15s ease;
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
hr { border-color: var(--border); }
::selection { background: var(--accent-soft-strong); }

/* cards */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--text);
}
.card-header {
    background: var(--surface-alt);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
}
.card-footer { background: var(--surface-alt); border-top: 1px solid var(--border); }

/* text / bg utilities used throughout the app */
.text-muted { color: var(--text-muted) !important; }
.text-dark { color: var(--text) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.bg-white { background: var(--surface) !important; color: var(--text); }
.bg-light { background: var(--surface-alt) !important; color: var(--text); }
.bg-dark { background: var(--sidebar-bg) !important; }
.bg-success { background: var(--success-strong) !important; }
.bg-danger { background: var(--danger-strong) !important; }
.border { border-color: var(--border) !important; }

/* buttons — .btn-dark doubles as this app's primary action button */
.btn { border-radius: var(--radius-sm); font-weight: 500; }
.btn-dark {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:not(:disabled):not(.disabled):active {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-contrast);
}
.btn-outline-dark {
    color: var(--accent);
    border-color: var(--border-strong);
}
.btn-outline-dark:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}
.btn-outline-secondary {
    color: var(--text-muted);
    border-color: var(--border-strong);
}
.btn-outline-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text);
}
.btn-outline-success { color: var(--success); border-color: var(--success); }
.btn-outline-success:hover { background: var(--success); color: var(--accent-contrast); }
.btn-outline-danger { color: var(--danger); border-color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger); color: #fff; }
.btn-link { color: var(--accent); }

/* forms */
.form-control {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
}
.form-control:focus {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--text);
    box-shadow: 0 0 0 .18rem var(--accent-soft);
}
.form-control:disabled, .form-control[readonly] { background: var(--surface-alt); color: var(--text-muted); }
.form-control::placeholder { color: var(--text-soft); }
label { color: var(--text); }
.custom-control-label::before { background: var(--surface); border-color: var(--border-strong); }
.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--accent);
    border-color: var(--accent);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .18rem var(--accent-soft); }

/* tables */
.table { color: var(--text); }
.table th, .table td { border-color: var(--border); }
.table thead.thead-light th, .table thead th {
    background: var(--surface-alt);
    color: var(--text-muted);
    border-color: var(--border);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
}
.table-hover tbody tr:hover { background: var(--surface-hover); color: var(--text); }
.table tfoot td { border-top: 2px solid var(--border-strong); }

/* alerts + badges */
.alert-success { background: var(--success-soft); border-color: var(--success-soft); color: var(--success); }
.alert-danger { background: var(--danger-soft); border-color: var(--danger-soft); color: var(--danger); }
.badge-success { background: var(--success-strong); }
.badge-danger { background: var(--danger-strong); }
.badge-secondary { background: var(--border-strong); color: var(--text); }
.badge-light { background: var(--surface-alt); color: var(--text-muted); }

/* pagination */
.page-link { background: var(--surface); border-color: var(--border); color: var(--accent); }
.page-link:hover { background: var(--accent-soft); border-color: var(--border); color: var(--accent-hover); }
.page-item.active .page-link { background: var(--accent); border-color: var(--accent); }
.page-item.disabled .page-link { background: var(--surface-alt); color: var(--text-soft); }

/* app shell */
.topbar { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; }
.content-wrapper { color: var(--text); }
.sidebar { background: var(--sidebar-bg) !important; }
.sidebar .navbar-brand { color: var(--sidebar-text-active); }
.sidebar .nav-link { color: var(--sidebar-text); }
.sidebar .nav-link.active {
    color: var(--sidebar-text-active);
    background: var(--accent);
    box-shadow: var(--shadow-sm);
}
.sidebar .nav-link:hover:not(.active) { color: var(--sidebar-text-active); background: rgba(255, 255, 255, .08); }
#sidebar-collapse-toggle { color: var(--sidebar-text); }
#sidebar-collapse-toggle:hover { color: var(--sidebar-text-active); }
.sidebar-brand-row { border-bottom: 1px solid var(--sidebar-border); }
.bottom-nav { background: var(--surface); border-top: 1px solid var(--border); }
.bottom-nav-item { color: var(--text-muted); }
.bottom-nav-item.active { color: var(--accent); }

/* theme toggle button */
.theme-toggle {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-muted);
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .theme-toggle .fa-sun,
:root:not([data-theme="light"]) .theme-toggle .fa-sun { display: none; }
.theme-toggle .fa-moon { display: none; }
[data-theme="dark"] .theme-toggle .fa-moon { display: inline; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .fa-moon { display: inline; }
}

/* auth pages */
.auth-shell { background: var(--bg); }
.auth-card .card-header {
    background: linear-gradient(135deg, var(--sidebar-bg), var(--sidebar-bg-alt));
    color: #fff;
}

/* searchable dropdowns (Select2) — follow the light/dark tokens */
.select2-container--bootstrap4 .select2-selection {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered { color: var(--text); }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder { color: var(--text-soft); }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    border-color: var(--text-muted) transparent transparent transparent;
}
.select2-container--bootstrap4.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--text-muted) transparent;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--accent);
    box-shadow: 0 0 0 .18rem var(--accent-soft);
}
.select2-container--bootstrap4 .select2-dropdown {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
    min-width: 16rem; /* long script names stay readable in narrow filter boxes */
    box-shadow: var(--shadow-md);
}
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
}
.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .18rem var(--accent-soft);
    outline: 0;
}
.select2-container--bootstrap4 .select2-results__option { color: var(--text); }
.select2-container--bootstrap4 .select2-results__option[aria-selected=true] {
    background: var(--surface-alt);
    color: var(--text);
}
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap4 .select2-results__option--highlighted.select2-results__option[aria-selected="true"] {
    background: var(--accent);
    color: var(--accent-contrast);
}
.select2-container--bootstrap4 .select2-results__message { color: var(--text-muted); }

/* same height/type size as Bootstrap's .form-control-sm, for the filter bars */
.select2-container--bootstrap4 .select2-selection--single.select2--small {
    height: calc(1.5em + .5rem + 2px) !important;
    font-size: .875rem;
}
.select2-container--bootstrap4 .select2-selection--single.select2--small .select2-selection__rendered {
    line-height: calc(1.5em + .5rem);
    padding-left: .5rem;
}
.select2-container--bootstrap4 .select2-selection--single.select2--small .select2-selection__arrow {
    top: 0;
    height: 100%;
}
.select2-container--bootstrap4 .select2-selection--single.select2--small .select2-selection__arrow b {
    top: 50%;
    margin-top: -2px;
}
.select2-container--bootstrap4 .select2-dropdown.select2--small { font-size: .875rem; }