/* Ashraf Systems Theme Engine - 10 company themes */
html[data-theme="classic"] {
    --as-bg: #f4f6f9;
    --as-surface: #ffffff;
    --as-surface-2: #f8fafc;
    --as-text: #172033;
    --as-muted: #6b778c;
    --as-border: #dce3ec;
    --as-accent: #173f72;
    --as-accent-2: #246fd3;
    --as-nav: #111827;
    --as-nav-text: #ffffff;
    --as-input: #ffffff;
    --as-radius: 14px;
    --as-shadow: 0 10px 28px rgba(18,38,63,.09);
    --as-glow: none;
}

html[data-theme="neon-command"] {
    --as-bg: #050916;
    --as-surface: #091126;
    --as-surface-2: #0d1731;
    --as-text: #eef6ff;
    --as-muted: #8294b4;
    --as-border: #18315b;
    --as-accent: #0ea5ff;
    --as-accent-2: #7657ff;
    --as-nav: #050a18;
    --as-nav-text: #eaf5ff;
    --as-input: #07101f;
    --as-radius: 16px;
    --as-shadow: 0 18px 50px rgba(0,0,0,.35);
    --as-glow: 0 0 22px rgba(14,165,255,.22);
}

html[data-theme="industrial-orange"] {
    --as-bg: #080b0f;
    --as-surface: #0d1117;
    --as-surface-2: #111820;
    --as-text: #f5f7fa;
    --as-muted: #8995a3;
    --as-border: #262e38;
    --as-accent: #ff8a1f;
    --as-accent-2: #ffad45;
    --as-nav: #080b0f;
    --as-nav-text: #fff;
    --as-input: #090d12;
    --as-radius: 14px;
    --as-shadow: 0 20px 48px rgba(0,0,0,.32);
    --as-glow: 0 0 24px rgba(255,138,31,.22);
}

html[data-theme="cyber-purple"] {
    --as-bg: #070512;
    --as-surface: #100a21;
    --as-surface-2: #17102b;
    --as-text: #faf6ff;
    --as-muted: #a295b7;
    --as-border: #30204d;
    --as-accent: #9b5cff;
    --as-accent-2: #e052ff;
    --as-nav: #080512;
    --as-nav-text: #fff;
    --as-input: #0c0817;
    --as-radius: 18px;
    --as-shadow: 0 20px 55px rgba(0,0,0,.38);
    --as-glow: 0 0 26px rgba(178,75,255,.28);
}

html[data-theme="crimson-control"] {
    --as-bg: #090a0d;
    --as-surface: #121317;
    --as-surface-2: #18191e;
    --as-text: #fff4f4;
    --as-muted: #a99498;
    --as-border: #382027;
    --as-accent: #ef233c;
    --as-accent-2: #ff4d5e;
    --as-nav: #090a0d;
    --as-nav-text: #fff;
    --as-input: #0d0e12;
    --as-radius: 8px;
    --as-shadow: 0 18px 45px rgba(0,0,0,.38);
    --as-glow: 0 0 22px rgba(239,35,60,.25);
}

html[data-theme="neon-analytics"] {
    --as-bg: #050b10;
    --as-surface: #07151d;
    --as-surface-2: #0a1d26;
    --as-text: #e9fdff;
    --as-muted: #83aab0;
    --as-border: #16414b;
    --as-accent: #00d9e8;
    --as-accent-2: #b43cff;
    --as-nav: #050b10;
    --as-nav-text: #edffff;
    --as-input: #061219;
    --as-radius: 16px;
    --as-shadow: 0 20px 52px rgba(0,0,0,.38);
    --as-glow: 0 0 24px rgba(0,217,232,.24);
}

html[data-theme="executive-finance"] {
    --as-bg: #eaf0f7;
    --as-surface: #ffffff;
    --as-surface-2: #f2f6fb;
    --as-text: #10253f;
    --as-muted: #64778d;
    --as-border: #cbd8e6;
    --as-accent: #075985;
    --as-accent-2: #0ea5e9;
    --as-nav: #06243b;
    --as-nav-text: #fff;
    --as-input: #fff;
    --as-radius: 12px;
    --as-shadow: 0 14px 34px rgba(6,36,59,.12);
    --as-glow: 0 0 18px rgba(14,165,233,.14);
}

html[data-theme="emerald-terminal"] {
    --as-bg: #050a08;
    --as-surface: #0a1210;
    --as-surface-2: #0d1814;
    --as-text: #ecfff7;
    --as-muted: #829c91;
    --as-border: #1d3a30;
    --as-accent: #22c58b;
    --as-accent-2: #8ee86b;
    --as-nav: #050a08;
    --as-nav-text: #effff8;
    --as-input: #07100d;
    --as-radius: 10px;
    --as-shadow: 0 18px 48px rgba(0,0,0,.38);
    --as-glow: 0 0 24px rgba(34,197,139,.22);
}

html[data-theme="luxury-graphite"] {
    --as-bg: #11110f;
    --as-surface: #191815;
    --as-surface-2: #211f1a;
    --as-text: #fffaf0;
    --as-muted: #aaa18f;
    --as-border: #39352c;
    --as-accent: #b68a45;
    --as-accent-2: #e5c77b;
    --as-nav: #11110f;
    --as-nav-text: #fff8e8;
    --as-input: #151411;
    --as-radius: 6px;
    --as-shadow: 0 18px 48px rgba(0,0,0,.32);
    --as-glow: 0 0 20px rgba(229,199,123,.16);
}

html[data-theme="arctic-glass"] {
    --as-bg: #e9f4fb;
    --as-surface: rgba(255,255,255,.78);
    --as-surface-2: rgba(245,251,255,.72);
    --as-text: #123047;
    --as-muted: #688397;
    --as-border: #bfd6e5;
    --as-accent: #2d8fc5;
    --as-accent-2: #6cc8ef;
    --as-nav: rgba(13,48,70,.92);
    --as-nav-text: #fff;
    --as-input: rgba(255,255,255,.76);
    --as-radius: 20px;
    --as-shadow: 0 18px 44px rgba(30,92,125,.13);
    --as-glow: 0 0 20px rgba(108,200,239,.16);
}

/* =========================================================
   FULL APPLICATION THEME COMPATIBILITY LAYER
   Covers Bootstrap + Ashraf Systems custom pages.
   ========================================================= */

html[data-theme] {
    color-scheme: light;
    --bs-body-bg: var(--as-bg);
    --bs-body-color: var(--as-text);
    --bs-border-color: var(--as-border);
    --bs-secondary-color: var(--as-muted);
    --bs-tertiary-bg: var(--as-surface-2);
}

html[data-theme="neon-command"],
html[data-theme="industrial-orange"],
html[data-theme="cyber-purple"],
html[data-theme="crimson-control"],
html[data-theme="neon-analytics"],
html[data-theme="emerald-terminal"],
html[data-theme="luxury-graphite"] {
    color-scheme: dark;
}

html[data-theme]:not([data-theme="classic"]) body {
    background-image: radial-gradient(circle at 12% 0%,color-mix(in srgb,var(--as-accent) 9%,transparent),transparent 28%);
}

html[data-theme] body,
html[data-theme] .app-body,
html[data-theme] .app-shell,
html[data-theme] .main-area,
html[data-theme] .content-area {
    background-color: var(--as-bg) !important;
    color: var(--as-text) !important;
}

html[data-theme] .sidebar {
    background: linear-gradient(180deg, color-mix(in srgb,var(--as-nav) 92%,var(--as-accent) 8%), var(--as-nav)) !important;
    color: var(--as-nav-text) !important;
}

html[data-theme] .topbar {
    background: var(--as-surface) !important;
    color: var(--as-text) !important;
    border-color: var(--as-border) !important;
}

html[data-theme] .top-company,
html[data-theme] .top-account-name,
html[data-theme] .page-heading h1,
html[data-theme] .page-heading h2,
html[data-theme] .page-heading h3,
html[data-theme] h1, html[data-theme] h2, html[data-theme] h3,
html[data-theme] h4, html[data-theme] h5, html[data-theme] h6,
html[data-theme] label,
html[data-theme] .form-label {
    color: var(--as-text) !important;
}

html[data-theme] .top-caption,
html[data-theme] .text-muted,
html[data-theme] .small.text-muted,
html[data-theme] .page-heading p,
html[data-theme] .metric-top,
html[data-theme] .metric-foot {
    color: var(--as-muted) !important;
}

/* Surfaces: Bootstrap and custom cards/panels */
html[data-theme] .card,
html[data-theme] .panel,
html[data-theme] .metric-card,
html[data-theme] .company-card,
html[data-theme] .settings-hero,
html[data-theme] .modal-content,
html[data-theme] .dropdown-menu,
html[data-theme] .list-group-item,
html[data-theme] .accordion-item,
html[data-theme] .offcanvas,
html[data-theme] .toast,
html[data-theme] .popover,
html[data-theme] .filter-card,
html[data-theme] .search-card,
html[data-theme] .report-card,
html[data-theme] .summary-card,
html[data-theme] .table-responsive {
    background-color: var(--as-surface) !important;
    color: var(--as-text) !important;
    border-color: var(--as-border) !important;
}

html[data-theme] .card-header,
html[data-theme] .card-footer,
html[data-theme] .modal-header,
html[data-theme] .modal-footer,
html[data-theme] .accordion-header,
html[data-theme] .accordion-button,
html[data-theme] .dropdown-header {
    background-color: var(--as-surface-2) !important;
    color: var(--as-text) !important;
    border-color: var(--as-border) !important;
}

/* Inputs */
html[data-theme] .form-control,
html[data-theme] .form-select,
html[data-theme] .input-group-text,
html[data-theme] textarea,
html[data-theme] input[type="text"],
html[data-theme] input[type="number"],
html[data-theme] input[type="date"],
html[data-theme] input[type="datetime-local"],
html[data-theme] input[type="time"],
html[data-theme] input[type="tel"],
html[data-theme] input[type="email"],
html[data-theme] input[type="search"],
html[data-theme] input[type="password"],
html[data-theme] select,
html[data-theme] .settings-input {
    background-color: var(--as-input) !important;
    color: var(--as-text) !important;
    border-color: var(--as-border) !important;
}

    html[data-theme] .form-control::placeholder,
    html[data-theme] textarea::placeholder,
    html[data-theme] input::placeholder {
        color: var(--as-muted) !important;
        opacity: .82;
    }

    html[data-theme] .form-control:focus,
    html[data-theme] .form-select:focus,
    html[data-theme] textarea:focus,
    html[data-theme] input:focus,
    html[data-theme] select:focus {
        background-color: var(--as-input) !important;
        color: var(--as-text) !important;
        border-color: var(--as-accent) !important;
        box-shadow: 0 0 0 .2rem color-mix(in srgb,var(--as-accent) 20%,transparent), var(--as-glow) !important;
    }

/* Tables - removes white rows in dark themes */
html[data-theme] .table {
    --bs-table-bg: var(--as-surface);
    --bs-table-color: var(--as-text);
    --bs-table-border-color: var(--as-border);
    --bs-table-striped-bg: color-mix(in srgb,var(--as-surface-2) 82%,var(--as-accent) 18%);
    --bs-table-striped-color: var(--as-text);
    --bs-table-hover-bg: color-mix(in srgb,var(--as-surface-2) 72%,var(--as-accent) 28%);
    --bs-table-hover-color: var(--as-text);
    background-color: var(--as-surface) !important;
    color: var(--as-text) !important;
    border-color: var(--as-border) !important;
}

    html[data-theme] .table > :not(caption) > * > *,
    html[data-theme] table td,
    html[data-theme] table th {
        background-color: transparent !important;
        color: var(--as-text) !important;
        border-color: var(--as-border) !important;
    }

    html[data-theme] .table thead th,
    html[data-theme] table thead th {
        background-color: var(--as-surface-2) !important;
        color: var(--as-text) !important;
    }

/* Buttons */
html[data-theme] .btn-primary,
html[data-theme] .apply-btn,
html[data-theme] .save-profile {
    background: linear-gradient(135deg,var(--as-accent-2),var(--as-accent)) !important;
    border-color: var(--as-accent) !important;
    color: #fff !important;
    box-shadow: var(--as-glow) !important;
}

html[data-theme] .btn-secondary,
html[data-theme] .btn-light {
    background: var(--as-surface-2) !important;
    color: var(--as-text) !important;
    border-color: var(--as-border) !important;
}

html[data-theme] .btn-outline-primary {
    color: var(--as-accent-2) !important;
    border-color: var(--as-accent) !important;
}

    html[data-theme] .btn-outline-primary:hover {
        background: var(--as-accent) !important;
        color: #fff !important;
    }

/* Navigation / tabs / pagination */
html[data-theme] .nav-tabs {
    border-color: var(--as-border) !important;
}

    html[data-theme] .nav-tabs .nav-link,
    html[data-theme] .page-link {
        background: var(--as-surface) !important;
        color: var(--as-text) !important;
        border-color: var(--as-border) !important;
    }

        html[data-theme] .nav-tabs .nav-link.active,
        html[data-theme] .page-item.active .page-link {
            background: var(--as-accent) !important;
            color: #fff !important;
            border-color: var(--as-accent) !important;
        }

/* Dashboard custom components */
html[data-theme] .metric-card,
html[data-theme] .panel {
    background: var(--as-surface) !important;
    border-color: var(--as-border) !important;
    box-shadow: var(--as-shadow) !important;
}

html[data-theme] .metric-icon,
html[data-theme] .inventory-stats div {
    background: var(--as-surface-2) !important;
    color: var(--as-accent-2) !important;
    border-color: var(--as-border) !important;
}

html[data-theme] .quick-grid a {
    background: var(--as-surface) !important;
    color: var(--as-text) !important;
    border-color: var(--as-border) !important;
}

    html[data-theme] .quick-grid a:hover {
        background: color-mix(in srgb,var(--as-surface-2) 82%,var(--as-accent) 18%) !important;
        border-color: var(--as-accent) !important;
    }

html[data-theme] .quick-grid b,
html[data-theme] .eyebrow {
    color: var(--as-accent-2) !important;
}

/* Dropdown/account popup */
html[data-theme] .top-account-popover {
    background: var(--as-surface) !important;
    color: var(--as-text) !important;
    border-color: var(--as-border) !important;
}

html[data-theme] .account-popover-head {
    border-color: var(--as-border) !important;
}

    html[data-theme] .account-popover-head strong,
    html[data-theme] .account-menu-link {
        color: var(--as-text) !important;
    }

    html[data-theme] .account-popover-head span {
        color: var(--as-muted) !important;
    }

html[data-theme] .account-menu-link:hover {
    background: var(--as-surface-2) !important;
}

/* Generic borders/background helpers frequently used by Bootstrap */
html[data-theme] .bg-white {
    background-color: var(--as-surface) !important;
}

html[data-theme] .bg-light {
    background-color: var(--as-surface-2) !important;
}

html[data-theme] .text-dark {
    color: var(--as-text) !important;
}

html[data-theme] .border,
html[data-theme] .border-top,
html[data-theme] .border-bottom,
html[data-theme] .border-start,
html[data-theme] .border-end {
    border-color: var(--as-border) !important;
}

html[data-theme] hr {
    border-color: var(--as-border) !important;
    opacity: 1;
}

html[data-theme] a:not(.btn):not(.nav-item):not(.nav-child):not(.brand-link) {
    color: var(--as-accent-2);
}

/* Theme-specific finish */
html[data-theme="arctic-glass"] .card,
html[data-theme="arctic-glass"] .panel,
html[data-theme="arctic-glass"] .metric-card,
html[data-theme="arctic-glass"] .modal-content,
html[data-theme="arctic-glass"] .topbar {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

html[data-theme="crimson-control"] .card,
html[data-theme="luxury-graphite"] .card {
    border-radius: var(--as-radius);
}
html[data-theme] .as-custom-select__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 10000;
    max-height: 260px !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 4px;
    background: var(--as-surface) !important;
    color: var(--as-text) !important;
    border: 1px solid var(--as-border) !important;
    border-radius: .5rem;
    box-shadow: var(--as-shadow);
}

html[data-theme] .as-custom-select.is-open .as-custom-select__menu {
    display: block !important;
}

html[data-theme] .as-custom-select__option {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 38px !important;
    padding: .55rem .75rem !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: .35rem;
    background: transparent !important;
    color: var(--as-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    html[data-theme] .as-custom-select__option:hover,
    html[data-theme] .as-custom-select__option:focus {
        background: color-mix( in srgb, var(--as-accent) 18%, var(--as-surface) ) !important;
        color: var(--as-text) !important;
    }

    html[data-theme] .as-custom-select__option.is-selected {
        background: color-mix( in srgb, var(--as-accent) 28%, var(--as-surface) ) !important;
        color: var(--as-text) !important;
        font-weight: 700;
    }