/*
 * Gradly brand overrides — remaps Metronic's default "primary" (blue #1B84FF) to the Gradly brand:
 *   navy  #233166  (primary — buttons, links, active nav, badges, progress, etc.)
 *   teal  #06B19E  (accent — link hover)
 * The theme drives almost everything through --bs-* variables, so overriding them here (loaded AFTER
 * style.bundle.css) rebrands the whole system without touching component markup. A few component-scoped
 * vars (e.g. .btn-primary's --bs-btn-*) hardcode the color, so they are overridden explicitly too.
 */

:root,
[data-bs-theme="light"] {
    --bs-primary: #233166;
    --bs-primary-active: #1a2650;
    --bs-primary-light: #e9ebf3;
    --bs-primary-inverse: #ffffff;
    --bs-primary-rgb: 35, 49, 102;
    --bs-primary-clarity: rgba(35, 49, 102, 0.2);
    --bs-primary-bg-subtle: #d5d9e8;
    --bs-primary-border-subtle: #aab2cc;
    --bs-primary-text-emphasis: #1a2650;
    --bs-text-primary: #233166;

    --bs-link-color: #233166;
    --bs-link-color-rgb: 35, 49, 102;
    --bs-link-hover-color: #06b19e;
    --bs-link-hover-color-rgb: 6, 177, 158;

    --bs-menu-link-color-active: #233166;
    --bs-menu-link-color-here: #233166;
    --bs-menu-link-color-hover: #233166;
    --bs-menu-link-color-show: #233166;

    --bs-component-active-bg: #233166;
    --bs-component-checked-bg: #233166;
    --bs-component-hover-color: #233166;

    --bs-nav-pills-link-active-bg: #233166;
    --bs-progress-bar-bg: #233166;
    --bs-ribbon-label-bg: #233166;
    --bs-scrolltop-bg-color: #233166;
    --bs-scrolltop-bg-color-hover: #1a2650;
}

[data-bs-theme="dark"] {
    /* A brighter navy so primary elements stay visible on dark surfaces. */
    --bs-primary: #3a53b5;
    --bs-primary-active: #2c3f80;
    --bs-primary-light: #1c2440;
    --bs-primary-inverse: #ffffff;
    --bs-primary-rgb: 58, 83, 181;
    --bs-primary-clarity: rgba(58, 83, 181, 0.2);
    --bs-primary-bg-subtle: #10152b;
    --bs-primary-border-subtle: #2a3768;
    --bs-primary-text-emphasis: #9fb0e8;
    --bs-text-primary: #8fa2e0;

    --bs-link-color: #8fa2e0;
    --bs-link-color-rgb: 143, 162, 224;
    --bs-link-hover-color: #06b19e;

    --bs-menu-link-color-active: #8fa2e0;
    --bs-menu-link-color-here: #8fa2e0;
    --bs-menu-link-color-hover: #8fa2e0;
    --bs-menu-link-color-show: #8fa2e0;

    --bs-component-active-bg: #3a53b5;
    --bs-component-checked-bg: #3a53b5;
    --bs-nav-pills-link-active-bg: #3a53b5;
    --bs-progress-bar-bg: #3a53b5;
}

/* Buttons — .btn-primary sets component-scoped --bs-btn-* with a hardcoded color. */
.btn.btn-primary {
    --bs-btn-bg: #233166;
    --bs-btn-border-color: #233166;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #1a2650;
    --bs-btn-hover-border-color: #1a2650;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #1a2650;
    --bs-btn-active-border-color: #1a2650;
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-bg: #233166;
    --bs-btn-disabled-border-color: #233166;
    --bs-btn-focus-shadow-rgb: 35, 49, 102;
}

[data-bs-theme="dark"] .btn.btn-primary {
    --bs-btn-bg: #3a53b5;
    --bs-btn-border-color: #3a53b5;
    --bs-btn-hover-bg: #2c3f80;
    --bs-btn-hover-border-color: #2c3f80;
    --bs-btn-active-bg: #2c3f80;
    --bs-btn-active-border-color: #2c3f80;
    --bs-btn-disabled-bg: #3a53b5;
    --bs-btn-disabled-border-color: #3a53b5;
    --bs-btn-focus-shadow-rgb: 58, 83, 181;
}

/* Form toggles / checkboxes / radios — default (non-semantic) checked state = brand navy.
   Matching the theme's own specificity + loading after it lets this win; the semantic variants
   (.form-check-success/-danger/-warning) have higher specificity so they keep their colors. */
.form-check-input:checked,
.form-switch .form-check-input:checked {
    background-color: #233166;
    border-color: #233166;
}

[data-bs-theme="dark"] .form-check-input:checked,
[data-bs-theme="dark"] .form-switch .form-check-input:checked {
    background-color: #3a53b5;
    border-color: #3a53b5;
}

/* =========================================================================
 * Gradly two-color theme — navy #233166 → teal #06B19E gradient.
 * The same treatment used on the marketing landing page (two-tone header
 * text + gradient bands), applied across every portal that loads this file.
 * ---- Reusable utilities (use anywhere in markup) ---- */
.gradly-gradient {
    background: linear-gradient(135deg, #233166 0%, #1a2650 45%, #06b19e 100%) !important;
    color: #ffffff;
}

.gradly-gradient-soft {
    background: linear-gradient(135deg, rgba(35, 49, 102, 0.06), rgba(6, 177, 158, 0.06));
}

.gradly-gradient-text {
    background: linear-gradient(120deg, #233166, #06b19e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

[data-bs-theme="dark"] .gradly-gradient-text {
    background: linear-gradient(120deg, #8fa2e0, #2ee6cf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---- Branded sidebar (aside): navy→teal gradient with legible light menu ---- */
.aside {
    background: linear-gradient(180deg, #233166 0%, #233166 32%, #17415f 74%, #06b19e 128%) !important;
    border-right: 0 !important;
}

/* Always use the light (white) logo on the dark gradient aside, regardless of theme mode. */
.aside .aside-logo .theme-light-show { display: none !important; }
.aside .aside-logo .theme-dark-show { display: inline-block !important; }

.aside .menu {
    --bs-menu-link-color-default: rgba(255, 255, 255, 0.75);
    --bs-menu-link-color-hover: #ffffff;
    --bs-menu-link-color-here: #ffffff;
    --bs-menu-link-color-active: #ffffff;
    --bs-menu-link-color-show: #ffffff;
    --bs-menu-link-bg-color-active: rgba(255, 255, 255, 0.14);
    --bs-menu-link-bg-color-hover: rgba(255, 255, 255, 0.10);
    --bs-menu-link-bg-color-here: rgba(255, 255, 255, 0.14);
    --bs-menu-link-bg-color-show: rgba(255, 255, 255, 0.10);
}

.aside .menu .menu-link,
.aside .menu .menu-link .menu-title {
    color: rgba(255, 255, 255, 0.75) !important;
}

.aside .menu .menu-link:hover,
.aside .menu .menu-link:hover .menu-title,
.aside .menu .menu-item.here > .menu-link,
.aside .menu .menu-item.here > .menu-link .menu-title,
.aside .menu .menu-link.active,
.aside .menu .menu-link.active .menu-title {
    color: #ffffff !important;
}

.aside .menu .menu-link:hover,
.aside .menu .menu-link.active,
.aside .menu .menu-item.here > .menu-link {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-radius: 0.475rem;
}

.aside .menu .menu-icon i,
.aside .menu .menu-icon .ki-outline,
.aside .menu .menu-icon .ki-duotone {
    color: rgba(255, 255, 255, 0.6) !important;
}

.aside .menu .menu-link:hover .menu-icon i,
.aside .menu .menu-link.active .menu-icon i,
.aside .menu .menu-item.here > .menu-link .menu-icon i {
    color: #06b19e !important;
}

.aside .menu .menu-section,
.aside .menu .menu-subtitle {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* ---- Page-title header: two-tone gradient text + a brand accent underline ---- */
.header .page-title h1 {
    background: linear-gradient(120deg, #233166, #06b19e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-bs-theme="dark"] .header .page-title h1 {
    background: linear-gradient(120deg, #8fa2e0, #2ee6cf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, #233166, #06b19e) 1;
}

/* ---- Success == brand teal. Remap Bootstrap/Metronic's "success" semantic (default green #50cd89)
 * to the Gradly teal #06B19E, so every success button/badge/text/check uses the theme accent. ---- */
:root,
[data-bs-theme="light"] {
    --bs-success: #06b19e;
    --bs-success-active: #059684;
    --bs-success-light: #d8f2ee;
    --bs-success-inverse: #ffffff;
    --bs-success-rgb: 6, 177, 158;
    --bs-success-clarity: rgba(6, 177, 158, 0.2);
    --bs-success-bg-subtle: #d8f2ee;
    --bs-success-border-subtle: #9fdcd3;
    --bs-success-text-emphasis: #05877a;
    --bs-text-success: #06b19e;
}

[data-bs-theme="dark"] {
    --bs-success: #17c4b0;
    --bs-success-active: #06b19e;
    --bs-success-light: #0e2b28;
    --bs-success-inverse: #ffffff;
    --bs-success-rgb: 23, 196, 176;
    --bs-success-clarity: rgba(23, 196, 176, 0.2);
    --bs-success-bg-subtle: #0e2b28;
    --bs-success-border-subtle: #1c4a44;
    --bs-success-text-emphasis: #6fded1;
    --bs-text-success: #17c4b0;
}

/* .btn-success hardcodes component-scoped --bs-btn-* vars, so remap them explicitly too. */
.btn.btn-success {
    --bs-btn-bg: #06b19e;
    --bs-btn-border-color: #06b19e;
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #059684;
    --bs-btn-hover-border-color: #059684;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #059684;
    --bs-btn-active-border-color: #059684;
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-bg: #06b19e;
    --bs-btn-disabled-border-color: #06b19e;
    --bs-btn-focus-shadow-rgb: 6, 177, 158;
}