/*
 * Rankbase warm theme: the RCL super-admin scheme (espresso surfaces, cream
 * text, peach #C98B6F accent) applied on top of Metronic's dark theme by
 * remapping its CSS variables. Scoped to [data-bs-theme="dark"]; the light
 * theme is untouched. Loaded after style.bundle.css.
 */

[data-bs-theme="dark"] {
    /* Accent: peach terracotta */
    --bs-primary: #C98B6F;
    --bs-primary-active: #B07A5F;
    --bs-primary-light: rgba(201, 139, 111, 0.12);
    --bs-primary-inverse: #1F1A17;
    --bs-primary-rgb: 201, 139, 111;
    --bs-component-active-bg: #C98B6F;
    --bs-component-active-color: #1F1A17;
    /* Dropdown/menu hover states (user menu, app switcher entries) */
    --bs-component-hover-color: #C98B6F;
    --bs-component-hover-bg: #26201B;
    --bs-component-checked-bg: #C98B6F;
    --bs-menu-link-color-hover: #C98B6F;
    --bs-menu-link-color-active: #C98B6F;
    --bs-menu-link-color-here: #C98B6F;
    --bs-menu-link-color-show: #C98B6F;
    --bs-menu-link-bg-color-hover: #26201B;
    --bs-menu-link-bg-color-active: #26201B;
    --bs-menu-link-bg-color-here: #26201B;
    --bs-menu-link-bg-color-show: #26201B;
    /* Dropdown panels (app switcher, user menu): warm card surface instead of
       Metronic's cool #1C1D22 */
    --bs-menu-dropdown-bg-color: #292220;
    --bs-menu-heading-color: #8D7D6E;
    --bs-link-color: #C98B6F;
    --bs-link-hover-color: #DBA98B;
    /* Bootstrap anchors read the -rgb variants, not the hex ones */
    --bs-link-color-rgb: 201, 139, 111;
    --bs-link-hover-color-rgb: 219, 169, 139;
    --bs-text-primary: #C98B6F;

    /* Secondary / light button families (toolbar switchers, table row
       actions): Metronic's cool grays, re-tinted warm. */
    --bs-secondary: #3B322A;
    --bs-secondary-active: #4C4036;
    --bs-secondary-light: #332B24;
    --bs-secondary-inverse: #EDE5DB;
    --bs-secondary-rgb: 59, 50, 42;
    --bs-light: #26201B;
    --bs-light-active: #2E2721;
    --bs-light-inverse: #A89B8D;
    --bs-light-rgb: 38, 32, 27;

    /* The "dark" family drives btn-active-dark hover states on the switchers
       and View All buttons: keep it dark but espresso, not navy. */
    --bs-dark: #191410;
    --bs-dark-active: #120E0B;
    --bs-dark-light: #26201B;
    --bs-dark-inverse: #EDE5DB;
    --bs-dark-rgb: 25, 20, 16;

    /* Info accent: Metronic's purple clashes with the warm scheme; use the
       mauve from the chart palette. Success/warning/danger keep their
       semantic colors. */
    --bs-info: #B05F8D;
    --bs-info-active: #9D527C;
    --bs-info-light: rgba(176, 95, 141, 0.12);
    --bs-info-inverse: #ffffff;
    --bs-info-rgb: 176, 95, 141;
    --bs-text-info: #C77FA5;

    /* Success/warning/danger keep their hues, but their -light fills are cool
       dark grays in Metronic (e.g. success-light #1F212A); as glazes they pick
       up the warm card underneath. */
    --bs-success-light: rgba(80, 205, 137, 0.12);
    --bs-warning-light: rgba(255, 199, 0, 0.12);
    --bs-danger-light: rgba(241, 65, 108, 0.12);

    /* Espresso surfaces */
    --bs-body-bg: #211B17;
    --bs-body-bg-rgb: 33, 27, 23;
    --bs-body-color: #DEE2E6;
    --bs-app-bg-color: #1F1A17;
    --bs-app-blank-bg-color: #1F1A17;
    --bs-app-header-base-bg-color: #1A1512;
    --bs-app-footer-bg-color: #1A1512;
    --bs-card-bg: #292220;
    --bs-card-border-color: rgba(201, 139, 111, 0.2);

    /* Warm gray ramp: drives text-gray-*, table stripes, hairlines */
    --bs-gray-100: #26201B; --bs-gray-100-rgb: 38, 32, 27;
    --bs-gray-200: #2E2721; --bs-gray-200-rgb: 46, 39, 33;
    --bs-gray-300: #3B322A; --bs-gray-300-rgb: 59, 50, 42;
    --bs-gray-400: #4C4036; --bs-gray-400-rgb: 76, 64, 54;
    --bs-gray-500: #6C5D50; --bs-gray-500-rgb: 108, 93, 80;
    --bs-gray-600: #8D7D6E; --bs-gray-600-rgb: 141, 125, 110;
    --bs-gray-700: #AC9D8E; --bs-gray-700-rgb: 172, 157, 142;
    --bs-gray-800: #CEC0B2; --bs-gray-800-rgb: 206, 192, 178;
    --bs-gray-900: #EEE6DC; --bs-gray-900-rgb: 238, 230, 220;

    /* Peach-tinted hairlines, like the reference tables and panels */
    --bs-border-color: rgba(201, 139, 111, 0.15);
    --bs-border-dashed-color: rgba(201, 139, 111, 0.3);

    /* Metronic's text utilities (.text-gray-*, .text-muted) read their own
       variable family, compiled separately from the gray ramp. */
    --bs-text-muted: #8D7D6E;
    --bs-text-gray-100: #26201B;
    --bs-text-gray-200: #2E2721;
    --bs-text-gray-300: #3B322A;
    --bs-text-gray-400: #6C5D50;
    --bs-text-gray-500: #7D6E60;
    --bs-text-gray-600: #8D7D6E;
    --bs-text-gray-700: #AC9D8E;
    --bs-text-gray-800: #CEC0B2;
    --bs-text-gray-900: #EEE6DC;
}

/* Fixed espresso gradient behind everything (reference body background) */
[data-bs-theme="dark"] body {
    background: linear-gradient(135deg, #1F1A17 0%, #2A2320 50%, #1F1A17 100%) fixed;
}

/* Deepest espresso for the app chrome */
[data-bs-theme="dark"] .app-sidebar {
    background-color: #1A1512 !important;
    border-right: 1px solid rgba(201, 139, 111, 0.12);
}

/* Primary buttons: peach gradient with dark text, like the reference */
[data-bs-theme="dark"] .btn.btn-primary {
    background-image: linear-gradient(135deg, #B07A5F 0%, #C98B6F 100%);
    border: 0;
}

[data-bs-theme="dark"] .btn.btn-primary:hover:not(.btn-active),
[data-bs-theme="dark"] .btn.btn-primary:focus:not(.btn-active),
[data-bs-theme="dark"] .btn.btn-primary:active:not(.btn-active) {
    background-image: linear-gradient(135deg, #A06F55 0%, #BD7F63 100%) !important;
}

/* Reference panel rounding */
[data-bs-theme="dark"] .card {
    --bs-card-border-radius: 12px;
}

/* Checked switches/checkboxes/radios: Metronic compiles these outside the
   variable system, so restate the accent explicitly. */
[data-bs-theme="dark"] .form-check-input:checked {
    background-color: #C98B6F;
    border-color: #C98B6F;
}

/* Dropdown menus share the card hairline so they read as warm panels */
[data-bs-theme="dark"] .menu-sub-dropdown {
    border: 1px solid rgba(201, 139, 111, 0.15);
}

/* .link-primary rests on --bs-primary-rgb (already peach) but its hover state
   is compiled as a literal blue with !important; restate in peach. */
[data-bs-theme="dark"] .link-primary:hover,
[data-bs-theme="dark"] .link-primary:focus {
    color: RGBA(219, 169, 139, var(--bs-link-opacity, 1)) !important;
    text-decoration-color: RGBA(219, 169, 139, var(--bs-link-underline-opacity, 1)) !important;
}

/* Sidebar menu: the dark-sidebar preset hardcodes cool grays (#9A9CAE links,
   #464852 icons, #1C1C21 active bg), no variables involved. Same selectors,
   warm values; this file loads later so it wins the tie. */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-heading {
    color: #8D7D6E !important;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-title {
    color: #A89B8D;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: #6C5D50;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet {
    background-color: #6C5D50;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here),
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-title {
    color: #EEE6DC;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-icon i,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon i,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-icon i {
    color: #C98B6F;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.here > .menu-link .menu-bullet .bullet,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item.show > .menu-link .menu-bullet .bullet {
    background-color: #C98B6F;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    background-color: #2E2721;
    color: #EEE6DC;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-title {
    color: #EEE6DC;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
    color: #C98B6F;
}

[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-bullet .bullet {
    background-color: #C98B6F;
}