/*
 * TopTax brand tokens
 * -------------------
 * Loaded after Metronic's style.bundle.css on every admin page (dashboard + auth).
 * Values measured from public/logo.webp (see CLAUDE.md "Brand rules"):
 *   logo blue      #3854a4  (rgb 56, 84, 164)
 *   logo charcoal  #414143
 *   logo has a transparent background -> it always sits on white or --tt-light.
 *
 * Rules: flat colors only (no gradients), no purple/violet, every color in our
 * own views/CSS/JS comes from these tokens. Email templates are the one place
 * that must repeat the literal hex values because mail clients ignore CSS vars.
 */

:root {
    --tt-primary: #3854a4;
    --tt-primary-rgb: 56, 84, 164;
    --tt-primary-hover: #30478b;   /* ~15% darker, used for hover/active */
    --tt-primary-light: #ebeef6;   /* 10% tint on white, light buttons/badges/rows */
    --tt-dark: #414143;
    --tt-light: #f5f7fa;
    /* Metronic's stock "info" palette is violet, which the brand rules ban.
       It is re-pointed to this teal-blue so text-info / btn-info / bg-light-info stay usable. */
    --tt-info: #1787a8;
    --tt-info-rgb: 23, 135, 168;
    --tt-info-hover: #136f8a;
    --tt-info-light: #e7f4f8;

    /* Neutrals and state colors, so views never need a literal hex */
    --tt-white: #ffffff;
    --tt-gray-100: #f8f9fa;
    --tt-gray-300: #e4e6ef;
    --tt-gray-600: #6c757d;
    --tt-cream: #f0e8d1;          /* warm accent used on the public landing page */
    --tt-success: #28a745;
    --tt-success-dark: #155724;
    --tt-success-light: #d4edda;
    --tt-success-border: #c3e6cb;
    --tt-danger: #dc3545;
    --tt-danger-dark: #721c24;
    --tt-danger-light: #f8d7da;
    --tt-danger-border: #f5c6cb;
    --tt-warning: #ffc107;

    /* Label / pill palette (x-label). No purple by design. */
    --tt-label-green: #22b783;
    --tt-label-amber: #ffb822;
    --tt-label-red: #f5325c;
    --tt-label-teal: #00b393;
    --tt-label-orange: #ff8500;
    --tt-label-navy: #20446f;
    --tt-label-gray: #808080;
}

/* ------------------------------------------------------------------
 * Re-point Metronic 8.1 + Bootstrap 5 "primary" at the brand blue.
 * Metronic components read --kt-*; Bootstrap components read --bs-*.
 * ------------------------------------------------------------------ */
:root,
[data-theme=light],
[data-bs-theme=light] {
    --bs-primary: var(--tt-primary);
    --bs-primary-rgb: var(--tt-primary-rgb);
    --bs-primary-active: var(--tt-primary-hover);
    --bs-primary-light: var(--tt-primary-light);
    --bs-primary-inverse: #ffffff;
    --bs-link-color: var(--tt-primary);
    --bs-link-hover-color: var(--tt-primary-hover);
    --bs-link-color-rgb: var(--tt-primary-rgb);
    --bs-link-hover-color-rgb: 48, 71, 139;

    --kt-primary: var(--tt-primary);
    --kt-primary-rgb: var(--tt-primary-rgb);
    --kt-primary-active: var(--tt-primary-hover);
    --kt-primary-light: var(--tt-primary-light);
    --kt-primary-inverse: #ffffff;
    --kt-primary-clarity: rgba(var(--tt-primary-rgb), 0.2);
    --kt-text-primary: var(--tt-primary);
    --kt-link-color: var(--tt-primary);
    --kt-link-hover-color: var(--tt-primary-hover);
    --kt-component-active-bg: var(--tt-primary);
    --kt-component-active-color: #ffffff;
    --kt-form-check-input-checked-bg-color: var(--tt-primary);
    --kt-form-check-input-checked-bg-color-solid: var(--tt-primary);
    --kt-form-check-input-checked-border-color: var(--tt-primary);
    --kt-input-focus-border-color: var(--tt-primary);

    --bs-info: var(--tt-info);
    --bs-info-rgb: var(--tt-info-rgb);
    --kt-info: var(--tt-info);
    --kt-info-rgb: var(--tt-info-rgb);
    --kt-info-active: var(--tt-info-hover);
    --kt-info-light: var(--tt-info-light);
    --kt-info-inverse: #ffffff;
    --kt-text-info: var(--tt-info);
}

[data-theme=dark],
[data-bs-theme=dark] {
    --bs-primary: var(--tt-primary);
    --bs-primary-rgb: var(--tt-primary-rgb);
    --bs-primary-active: var(--tt-primary-hover);
    --bs-primary-light: #1f2a45;
    --bs-primary-inverse: #ffffff;
    --bs-link-color: var(--tt-primary);
    --bs-link-hover-color: var(--tt-primary-hover);

    --kt-primary: var(--tt-primary);
    --kt-primary-rgb: var(--tt-primary-rgb);
    --kt-primary-active: var(--tt-primary-hover);
    --kt-primary-light: #1f2a45;
    --kt-primary-inverse: #ffffff;
    --kt-primary-clarity: rgba(var(--tt-primary-rgb), 0.2);
    --kt-text-primary: var(--tt-primary);
    --kt-link-color: var(--tt-primary);
    --kt-link-hover-color: var(--tt-primary-hover);
    --kt-component-active-bg: var(--tt-primary);
    --kt-form-check-input-checked-bg-color: var(--tt-primary);
    --kt-form-check-input-checked-bg-color-solid: var(--tt-primary);
    --kt-form-check-input-checked-border-color: var(--tt-primary);

    --bs-info: var(--tt-info);
    --bs-info-rgb: var(--tt-info-rgb);
    --kt-info: var(--tt-info);
    --kt-info-rgb: var(--tt-info-rgb);
    --kt-info-active: var(--tt-info-hover);
    --kt-info-light: #1c2f38;
    --kt-info-inverse: #ffffff;
    --kt-text-info: var(--tt-info);
}

/* ------------------------------------------------------------------
 * Rules where the bundle hard-codes the old primary instead of a token.
 * ------------------------------------------------------------------ */
.btn-primary {
    --bs-btn-bg: var(--tt-primary);
    --bs-btn-border-color: var(--tt-primary);
    --bs-btn-hover-bg: var(--tt-primary-hover);
    --bs-btn-hover-border-color: var(--tt-primary-hover);
    --bs-btn-active-bg: var(--tt-primary-hover);
    --bs-btn-active-border-color: var(--tt-primary-hover);
    --bs-btn-disabled-bg: var(--tt-primary);
    --bs-btn-disabled-border-color: var(--tt-primary);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-color: #ffffff;
}

.btn.btn-primary {
    color: #ffffff;
    border-color: var(--tt-primary);
    background-color: var(--tt-primary);
}

.btn-check:checked + .btn.btn-primary,
.btn-check:active + .btn.btn-primary,
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active,
.btn.btn-primary.show,
.show > .btn.btn-primary {
    color: #ffffff;
    border-color: var(--tt-primary-hover);
    background-color: var(--tt-primary-hover) !important;
}

.btn-outline-primary {
    --bs-btn-color: var(--tt-primary);
    --bs-btn-border-color: var(--tt-primary);
    --bs-btn-hover-bg: var(--tt-primary);
    --bs-btn-hover-border-color: var(--tt-primary);
    --bs-btn-active-bg: var(--tt-primary);
    --bs-btn-active-border-color: var(--tt-primary);
    --bs-btn-disabled-color: var(--tt-primary);
    --bs-btn-disabled-border-color: var(--tt-primary);
}

.btn.btn-light-primary {
    color: var(--tt-primary);
    border-color: var(--tt-primary-light);
    background-color: var(--tt-primary-light);
}

.btn-check:checked + .btn.btn-light-primary,
.btn.btn-light-primary:focus:not(.btn-active),
.btn.btn-light-primary:hover:not(.btn-active),
.btn.btn-light-primary:active:not(.btn-active),
.btn.btn-light-primary.active,
.btn.btn-light-primary.show,
.show > .btn.btn-light-primary {
    color: #ffffff;
    border-color: var(--tt-primary);
    background-color: var(--tt-primary) !important;
}

.btn-link {
    --bs-btn-color: var(--tt-primary);
    --bs-btn-hover-color: var(--tt-primary-hover);
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--tt-primary);
    border-color: var(--tt-primary);
}

.form-range::-webkit-slider-thumb { background-color: var(--tt-primary); }
.form-range::-moz-range-thumb { background-color: var(--tt-primary); }

.dropdown-menu,
.dropdown-menu-dark { --bs-dropdown-link-active-bg: var(--tt-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--tt-primary); }
.breadcrumb { --bs-breadcrumb-item-active-color: var(--tt-primary); }
.pagination {
    --bs-pagination-hover-color: var(--tt-primary);
    --bs-pagination-focus-color: var(--tt-primary);
    --bs-pagination-active-bg: var(--tt-primary);
    --bs-pagination-active-border-color: var(--tt-primary);
}
.progress { --bs-progress-bar-bg: var(--tt-primary); }
.list-group {
    --bs-list-group-active-bg: var(--tt-primary);
    --bs-list-group-active-border-color: var(--tt-primary);
}

.link-primary { color: var(--tt-primary) !important; }
.link-primary:hover, .link-primary:focus { color: var(--tt-primary-hover) !important; }
.text-primary { color: var(--tt-primary) !important; }
.text-hover-primary:hover { color: var(--tt-primary-hover) !important; }
.bg-primary { background-color: var(--tt-primary) !important; }
.bg-light-primary { background-color: var(--tt-primary-light) !important; }
.border-primary { border-color: var(--tt-primary) !important; }
.badge-primary { color: #ffffff; background-color: var(--tt-primary); }
.badge-light-primary { color: var(--tt-primary); background-color: var(--tt-primary-light); }

.separator.separator-content.border-primary::before,
.separator.separator-content.border-primary::after { border-color: var(--tt-primary) !important; }
.carousel-custom .carousel-indicators-active-primary li.active:after { background-color: var(--tt-primary) !important; }
.pulse.pulse-primary .pulse-ring { border-color: var(--tt-primary); }

/* "info" rules the bundle hard-codes in violet */
.btn-info {
    --bs-btn-bg: var(--tt-info);
    --bs-btn-border-color: var(--tt-info);
    --bs-btn-hover-bg: var(--tt-info-hover);
    --bs-btn-hover-border-color: var(--tt-info-hover);
    --bs-btn-active-bg: var(--tt-info-hover);
    --bs-btn-active-border-color: var(--tt-info-hover);
    --bs-btn-disabled-bg: var(--tt-info);
    --bs-btn-disabled-border-color: var(--tt-info);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
}
.btn.btn-info { color: #ffffff; border-color: var(--tt-info); background-color: var(--tt-info); }
.btn-check:checked + .btn.btn-info,
.btn.btn-info:focus:not(.btn-active),
.btn.btn-info:hover:not(.btn-active),
.btn.btn-info:active:not(.btn-active),
.btn.btn-info.active,
.btn.btn-info.show { color: #ffffff; border-color: var(--tt-info-hover); background-color: var(--tt-info-hover) !important; }
.btn.btn-light-info { color: var(--tt-info); border-color: var(--tt-info-light); background-color: var(--tt-info-light); }
.btn.btn-light-info:hover:not(.btn-active),
.btn.btn-light-info:focus:not(.btn-active),
.btn.btn-light-info:active:not(.btn-active),
.btn.btn-light-info.active { color: #ffffff; border-color: var(--tt-info); background-color: var(--tt-info) !important; }
.btn-outline-info {
    --bs-btn-color: var(--tt-info);
    --bs-btn-border-color: var(--tt-info);
    --bs-btn-hover-bg: var(--tt-info);
    --bs-btn-hover-border-color: var(--tt-info);
    --bs-btn-active-bg: var(--tt-info);
    --bs-btn-active-border-color: var(--tt-info);
}
.link-info { color: var(--tt-info) !important; }
.text-info { color: var(--tt-info) !important; }
.bg-info { background-color: var(--tt-info) !important; }
.bg-light-info { background-color: var(--tt-info-light) !important; }
.border-info { border-color: var(--tt-info) !important; }
.badge-info { color: #ffffff; background-color: var(--tt-info); }
.badge-light-info { color: var(--tt-info); background-color: var(--tt-info-light); }
.separator.separator-content.border-info::before,
.separator.separator-content.border-info::after { border-color: var(--tt-info) !important; }
.carousel-custom .carousel-indicators-active-info li.active:after { background-color: var(--tt-info) !important; }
.pulse.pulse-info .pulse-ring { border-color: var(--tt-info); }

/* Sidebar / menus */
.aside-menu .menu .menu-item .menu-link.active { background-color: var(--tt-primary); color: #ffffff; }
.landing-header .menu .menu-link.active,
[data-kt-sticky-landing-header=on] .landing-header .menu .menu-link.active { color: var(--tt-primary); }
.menu-link.active,
.menu-item .menu-link.active { color: var(--tt-primary); }

/* Auth pages */
.auth-link { color: var(--tt-primary); font-weight: 600; text-decoration: none; }
.auth-link:hover { color: var(--tt-primary-hover); }