/* =========================================================================
   Alpha Shop theme — visual skin layered on top of Metronic (dark mode).
   ONLY colors / fonts / borders / radius / glow. No layout properties
   (no display/width/position/flex/margins/padding) so the existing
   responsive Bootstrap layout is untouched. Loaded AFTER style.bundle.css.
   ========================================================================= */

/* ---- Palette --------------------------------------------------------- */
:root,
[data-bs-theme="dark"] {
    --alpha-base: #0A0E14;
    --alpha-surface: #11161F;
    --alpha-raised: #1A2230;
    --alpha-line: #1E293B;
    --alpha-accent: #0866ff;
    --alpha-accent-bright: #4d8bff;
    --alpha-muted: #94A3B8;
    --alpha-text: #E2E8F0;
    --alpha-ok: #34D399;
    --alpha-danger: #F87171;
    --alpha-amber: #ffb020;
    --alpha-glow: 0 0 24px -6px rgba(8, 102, 255, .5);
    --alpha-glow-sm: 0 0 12px -3px rgba(8, 102, 255, .45);

    /* Re-point the Bootstrap/Metronic CSS variables the framework builds on. */
    --bs-body-bg: #0A0E14;
    --bs-body-bg-rgb: 10, 14, 20;
    --bs-body-color: #E2E8F0;
    --bs-body-color-rgb: 226, 232, 240;
    --bs-border-color: #1E293B;
    --bs-border-color-translucent: rgba(30, 41, 59, .75);
    --bs-primary: #0866ff;
    --bs-primary-rgb: 8, 102, 255;
    --bs-primary-active: #4d8bff;
    --bs-link-color: #4d8bff;
    --bs-link-color-rgb: 77, 139, 255;
    --bs-link-hover-color: #4d8bff;
    --bs-success: #34D399;
    --bs-success-rgb: 52, 211, 153;
    --bs-danger: #F87171;
    --bs-danger-rgb: 248, 113, 113;
    --bs-warning: #ffb020;
    --bs-warning-rgb: 255, 176, 32;
    --bs-info: #4d8bff;
    --bs-info-rgb: 77, 139, 255;
    --bs-secondary-color: #94A3B8;
    --bs-card-bg: #11161F;
    --bs-card-border-color: #1E293B;
    --bs-light: #1A2230;
    --bs-light-rgb: 26, 34, 48;
    --bs-text-muted: #94A3B8;
    --bs-component-active-bg: #0866ff;
    --bs-component-active-color: #ffffff;

    /* Metronic app-shell vars (best-effort; class overrides below are the backstop). */
    --bs-app-bg-color: #0A0E14;
    --bs-app-blank-bg-color: #0A0E14;
    --bs-app-sidebar-base-bg-color: #11161F;
    --bs-app-header-base-bg-color: #0A0E14;
    --kt-primary: #0866ff;
}

/* ---- Fonts ----------------------------------------------------------- */
/* Body font only — do NOT target weight/size utility classes (.fw-*, .fs-*),
   because icons (Font Awesome / keenicons) reuse those classes and a font-family
   override would replace the icon glyph font and break the icon. */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background-color: var(--alpha-base) !important;
    color: var(--alpha-text);
    -webkit-font-smoothing: antialiased;
}

/* Display font for headings only — NOT .fs-* size utilities (icons use them too). */
h1, h2, h3, h4, h5, h6,
.card-title {
    font-family: 'Space Grotesk', 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.text-dark,
.text-gray-900,
.text-gray-800 {
    color: #ffffff !important;
}

/* Mono for prices / ids / codes / balances (Alpha convention). */
code,
.money,
.glow-num,
kbd,
.text-mono {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
    font-variant-numeric: tabular-nums;
}

code {
    color: var(--alpha-accent-bright) !important;
    background-color: rgba(8, 102, 255, .08) !important;
    border-radius: 6px;
}

.glow-num {
    color: var(--alpha-accent-bright) !important;
    text-shadow: 0 0 14px rgba(8, 102, 255, .45);
}

/* Muted / secondary text */
.text-muted,
.text-gray-400,
.text-gray-500,
.text-gray-600 {
    color: var(--alpha-muted) !important;
}

.text-gray-700 {
    color: #cbd5e1 !important;
}

a, .text-primary, .text-hover-primary:hover {
    color: var(--alpha-accent-bright) !important;
}

/* ---- App shell: page / sidebar / header / content -------------------- */
.app-default,
.app-blank,
.app-page,
.wrapper,
.content,
.app-content,
.app-toolbar,
.bg-light,
.bg-body,
[id="kt_app_content"],
[id="kt_app_toolbar"] {
    /* Override even inline background-color:#f6f6f6 some toolbars/pages hardcode. */
    background-color: var(--alpha-base) !important;
}

.bg-white,
.bg-body-white {
    background-color: var(--alpha-surface) !important;
}

.aside,
.app-sidebar {
    background-color: var(--alpha-surface) !important;
    border-right: 1px solid var(--alpha-line) !important;
}

.header,
.app-header {
    background-color: rgba(10, 14, 20, .85) !important;
    border-bottom: 1px solid var(--alpha-line) !important;
    backdrop-filter: blur(10px);
}

/* The hairline under the header is only wanted on mobile (where the header is a
   distinct fixed bar); on desktop it reads as a stray line, so drop it. */
@media (min-width: 992px) {
    .header,
    .app-header {
        border-bottom: none !important;
    }
}

/* Sidebar wordmark */
.app-sidebar-logo span,
.aside-logo span {
    font-family: 'Space Grotesk', sans-serif !important;
    letter-spacing: .18em !important;
    text-transform: uppercase;
    color: #ffffff !important;
}

/* ---- Sidebar menu --------------------------------------------------- */
.menu-link {
    color: var(--alpha-muted) !important;
    border-radius: 8px !important;
    transition: background-color .2s, color .2s;
}

.menu-link:hover,
.menu-item.hover > .menu-link,
.menu-item.show > .menu-link {
    background-color: var(--alpha-raised) !important;
    color: #ffffff !important;
}

.menu-link.active,
.menu-item.here > .menu-link {
    background-color: rgba(8, 102, 255, .15) !important;
    color: var(--alpha-accent-bright) !important;
}

.menu-link.active .menu-title,
.menu-link:hover .menu-title {
    color: inherit !important;
}

.menu-icon i {
    color: var(--alpha-muted) !important;
}

/* Active = highlighted row + accent text/icon. The icon keeps its shape (only
   recoloured); only the round bullet dot gets a filled background. */
.menu-link.active .menu-icon i {
    color: var(--alpha-accent-bright) !important;
}

.menu-link.active .menu-bullet .bullet {
    background-color: var(--alpha-accent-bright) !important;
}

/* ---- Cards (the "tile" look: hairline border + hover glow) ----------- */
.card {
    background-color: var(--alpha-surface) !important;
    border: 1px solid var(--alpha-line) !important;
    border-radius: 12px !important;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.card:hover {
    border-color: rgba(8, 102, 255, .45) !important;
    box-shadow: var(--alpha-glow-sm);
}

.card-header {
    border-bottom: 1px solid var(--alpha-line) !important;
    background-color: transparent !important;
}

.card-footer {
    border-top: 1px solid var(--alpha-line) !important;
    background-color: transparent !important;
}

.hairline {
    border-color: var(--alpha-line) !important;
}

/* ---- Buttons -------------------------------------------------------- */
.btn {
    border-radius: 8px !important;
    transition: all .2s ease;
}

.btn.rounded-pill,
.btn-icon.rounded-circle {
    border-radius: 999px !important;
}

.btn-primary {
    background-color: var(--alpha-accent) !important;
    border-color: var(--alpha-accent) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--alpha-accent-bright) !important;
    border-color: var(--alpha-accent-bright) !important;
    box-shadow: var(--alpha-glow-sm) !important;
    color: #fff !important;
}

.btn-light,
.btn-secondary,
.btn-active-light {
    background-color: var(--alpha-raised) !important;
    border: 1px solid var(--alpha-line) !important;
    color: var(--alpha-text) !important;
}

.btn-light:hover,
.btn-secondary:hover {
    border-color: rgba(8, 102, 255, .5) !important;
    color: #fff !important;
}

.btn-outline,
.btn-outline-primary {
    background-color: transparent !important;
    border: 1px solid var(--alpha-line) !important;
    color: var(--alpha-text) !important;
}
.btn-outline:hover,
.btn-outline-primary:hover {
    border-color: rgba(8, 102, 255, .6) !important;
    color: #fff !important;
}

/* Tinted "soft" button + badge variants → chip look */
.btn-light-primary { background-color: rgba(8, 102, 255, .15) !important; color: var(--alpha-accent-bright) !important; border: 1px solid rgba(8, 102, 255, .30) !important; }
.btn-light-primary:hover { background-color: rgba(8, 102, 255, .28) !important; color: #fff !important; }
.btn-light-info { background-color: rgba(77, 139, 255, .15) !important; color: var(--alpha-accent-bright) !important; border: 1px solid rgba(77, 139, 255, .30) !important; }
.btn-light-success { background-color: rgba(52, 211, 153, .15) !important; color: var(--alpha-ok) !important; border: 1px solid rgba(52, 211, 153, .30) !important; }
.btn-light-warning { background-color: rgba(255, 176, 32, .15) !important; color: var(--alpha-amber) !important; border: 1px solid rgba(255, 176, 32, .30) !important; }
.btn-light-danger { background-color: rgba(248, 113, 113, .15) !important; color: var(--alpha-danger) !important; border: 1px solid rgba(248, 113, 113, .30) !important; }

.btn-success { background-color: var(--alpha-ok) !important; border-color: var(--alpha-ok) !important; color: #06231a !important; }
.btn-danger  { background-color: var(--alpha-danger) !important; border-color: var(--alpha-danger) !important; color: #2a0b0b !important; }
.btn-info    { background-color: var(--alpha-accent) !important; border-color: var(--alpha-accent) !important; color: #fff !important; }
.btn-warning { background-color: var(--alpha-amber) !important; border-color: var(--alpha-amber) !important; color: #231703 !important; }

/* ---- Badges (pills/chips) ------------------------------------------- */
.badge { border-radius: 999px !important; }
.badge-light-primary,   .badge-primary   { background-color: rgba(8, 102, 255, .15) !important; color: var(--alpha-accent-bright) !important; }
.badge-light-info,      .badge-info      { background-color: rgba(77, 139, 255, .15) !important; color: var(--alpha-accent-bright) !important; }
.badge-light-success,   .badge-success   { background-color: rgba(52, 211, 153, .15) !important; color: var(--alpha-ok) !important; }
.badge-light-warning,   .badge-warning   { background-color: rgba(255, 176, 32, .15) !important; color: var(--alpha-amber) !important; }
.badge-light-danger,    .badge-danger    { background-color: rgba(248, 113, 113, .15) !important; color: var(--alpha-danger) !important; }
.badge-light-secondary, .badge-light-dark { background-color: rgba(148, 163, 184, .15) !important; color: var(--alpha-muted) !important; }
.bg-success { background-color: var(--alpha-ok) !important; }
.bg-warning { background-color: var(--alpha-amber) !important; }
.bg-danger  { background-color: var(--alpha-danger) !important; }

/* ---- Tables --------------------------------------------------------- */
.table {
    --bs-table-color: var(--alpha-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--alpha-line);
    --bs-table-striped-color: var(--alpha-text);
    --bs-table-striped-bg: rgba(255, 255, 255, .02);
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: rgba(8, 102, 255, .06);
    color: var(--alpha-text) !important;
}

.table > thead th,
.table thead tr {
    color: var(--alpha-muted) !important;
    border-color: var(--alpha-line) !important;
}

.table > :not(caption) > * > * {
    border-color: var(--alpha-line) !important;
}

/* ---- Forms ---------------------------------------------------------- */
.form-control,
.form-select,
.form-control-solid,
.form-select-solid,
.input-group-text {
    background-color: var(--alpha-raised) !important;
    border: 1px solid var(--alpha-line) !important;
    color: var(--alpha-text) !important;
    border-radius: 8px !important;
}

.form-control::placeholder { color: #64748b !important; }

.form-control:focus,
.form-select:focus,
.form-control-solid:focus {
    background-color: var(--alpha-raised) !important;
    border-color: var(--alpha-accent) !important;
    box-shadow: 0 0 0 1px rgba(8, 102, 255, .6) !important;
    color: #fff !important;
}

.form-check-input { background-color: var(--alpha-raised); border-color: var(--alpha-line); }
.form-check-input:checked { background-color: var(--alpha-accent) !important; border-color: var(--alpha-accent) !important; }

/* select2 (used for searchable dropdowns) */
.select2-container--bootstrap5 .select2-selection,
.select2-selection {
    background-color: var(--alpha-raised) !important;
    border-color: var(--alpha-line) !important;
    color: var(--alpha-text) !important;
}
.select2-dropdown {
    background-color: var(--alpha-surface) !important;
    border-color: var(--alpha-line) !important;
}
.select2-results__option--highlighted,
.select2-container--bootstrap5 .select2-results__option--highlighted {
    background-color: var(--alpha-accent) !important;
    color: #fff !important;
}

/* ---- Alerts --------------------------------------------------------- */
.alert-primary,   .bg-light-primary   { background-color: rgba(8, 102, 255, .12) !important; border: 1px solid rgba(8, 102, 255, .30) !important; color: var(--alpha-accent-bright) !important; }
.alert-info,      .bg-light-info      { background-color: rgba(77, 139, 255, .12) !important; border: 1px solid rgba(77, 139, 255, .30) !important; color: var(--alpha-accent-bright) !important; }
.alert-success,   .bg-light-success   { background-color: rgba(52, 211, 153, .12) !important; border: 1px solid rgba(52, 211, 153, .30) !important; color: var(--alpha-ok) !important; }
.alert-warning,   .bg-light-warning   { background-color: rgba(255, 176, 32, .12) !important; border: 1px solid rgba(255, 176, 32, .30) !important; color: var(--alpha-amber) !important; }
.alert-danger,    .bg-light-danger    { background-color: rgba(248, 113, 113, .12) !important; border: 1px solid rgba(248, 113, 113, .30) !important; color: var(--alpha-danger) !important; }

/* ---- Modals / dropdowns / pagination -------------------------------- */
.modal-content,
.dropdown-menu,
.menu-sub-dropdown {
    background-color: var(--alpha-surface) !important;
    border: 1px solid var(--alpha-line) !important;
    border-radius: 12px !important;
}
.modal-header, .modal-footer { border-color: var(--alpha-line) !important; }

.page-link {
    background-color: var(--alpha-raised) !important;
    border-color: var(--alpha-line) !important;
    color: var(--alpha-text) !important;
}
.page-item.active .page-link {
    background-color: var(--alpha-accent) !important;
    border-color: var(--alpha-accent) !important;
    color: #fff !important;
}
.page-item.disabled .page-link { color: #475569 !important; }

/* ---- Separators / focus / scrollbar --------------------------------- */
.separator { border-color: var(--alpha-line) !important; }

:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(8, 102, 255, .7) !important;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--alpha-base); }
::-webkit-scrollbar-thumb { background: var(--alpha-line); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #2e3b52; }

/* ---- DataTables (reusable alpha tables: data-alpha-dt) -------------- */
.dataTables_wrapper select,
.dataTables_wrapper .dataTables_length select {
    width: auto !important;
    display: inline-block;
    min-width: 4.5rem;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper input[type="search"] {
    width: 16rem;
    max-width: 100%;
    display: inline-block;
}
.dataTables_wrapper .dataTables_info { color: var(--alpha-muted) !important; }
.dataTables_wrapper .dataTables_paginate .pagination { margin: 0; }
table.dataTable thead th { cursor: pointer; }
table.dataTable thead th.sorting_disabled { cursor: default; }
/* sort arrows in the muted hairline colour */
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after {
    opacity: .4;
    color: var(--alpha-accent-bright);
}

/* ---- Mobile: breathing room under the fixed header ------------------- */
/* On mobile the page title swaps INTO the content, which carries an inline
   padding-top:0 — so the title hugs the fixed header. Restore some top space. */
@media (max-width: 991.98px) {
    .content,
    [id="kt_content"] {
        padding-top: 1.5rem !important;
    }
    .app-toolbar,
    [id="kt_app_toolbar"] {
        padding-top: 1.25rem !important;
    }
}