/* Trivvo brand color overrides for Metronic 8 | Primary: #4a6cf7 */

/* ── CSS variable overrides ── */
:root {
    --bs-primary: #4a6cf7;
    --bs-primary-rgb: 74, 108, 247;
    --bs-primary-active: #3556e5;
    --bs-primary-inverse: #ffffff;
    --bs-primary-light: #f1f4fe;
    --bs-primary-clarity: rgba(74, 108, 247, 0.15);
    --bs-primary-text-emphasis: #1d2b63;
    --bs-primary-bg-subtle: #eaedfd;
    --bs-primary-border-subtle: #c4ccfb;
}

[data-bs-theme="dark"] {
    --bs-primary: #4a6cf7;
    --bs-primary-rgb: 74, 108, 247;
    --bs-primary-active: #5d7df8;
    --bs-primary-inverse: #ffffff;
    --bs-primary-text-emphasis: #8c9ef9;
    --bs-primary-bg-subtle: #0d1433;
    --bs-primary-border-subtle: #2940b8;
}

/* ── Primary button (Metronic hardcodes these, must override) ── */
.btn-primary {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #4a6cf7;
    --bs-btn-border-color: #4a6cf7;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #3556e5;
    --bs-btn-hover-border-color: #3050dc;
    --bs-btn-focus-shadow-rgb: 74, 108, 247;
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: #2f4cdb;
    --bs-btn-active-border-color: #2c46ce;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: #4a6cf7;
    --bs-btn-disabled-border-color: #4a6cf7;
}

/* ── App toolbar background ── */
#kt_app_toolbar,
.app-toolbar {
    background-color: #4a6cf7 !important;
}

/* ── Light primary backgrounds (badge bg, avatar bg, etc.) ── */
.bg-light-primary {
    background-color: rgba(74, 108, 247, 0.1) !important;
}

/* ── Text & links ── */
.text-primary {
    color: #4a6cf7 !important;
}

.link-primary {
    color: #4a6cf7 !important;
}

.link-primary:hover,
.link-primary:focus {
    color: #3556e5 !important;
}

/* ── Form focus ring ── */
.form-control:focus,
.form-select:focus {
    border-color: #4a6cf7 !important;
    box-shadow: 0 0 0 0.25rem rgba(74, 108, 247, 0.25) !important;
}

/* ── Btn active color primary (used in header buttons) ── */
.btn-active-color-primary:hover,
.btn-active-color-primary.active,
.btn-active-color-primary:active {
    color: #4a6cf7 !important;
}

/* ── Light-primary button variant ── */
.btn-light-primary {
    color: #4a6cf7;
    border-color: transparent;
    background-color: rgba(74, 108, 247, 0.1);
}

.btn-light-primary:hover {
    color: #ffffff;
    background-color: #4a6cf7 !important;
    border-color: transparent !important;
}

/* ── Badge light primary ── */
.badge-light-primary {
    color: #4a6cf7 !important;
    background-color: rgba(74, 108, 247, 0.1) !important;
}

/* ── Form checkbox / radio checked ── */
.form-check-input:checked {
    background-color: #4a6cf7;
    border-color: #4a6cf7;
}

.form-check-input:focus {
    border-color: #4a6cf7;
    box-shadow: 0 0 0 0.25rem rgba(74, 108, 247, 0.25);
}

/* ── Read-only field style (darker bg + not-allowed cursor) ── */
.cursor-not-allowed {
    cursor: not-allowed !important;
}

.form-control[readonly].bg-secondary {
    background-color: #eff2f5 !important;
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   Dark frame (#111827) — header, page background, footer
   ═══════════════════════════════════════════════════════════ */

/* Page / body background */
body.app-default {
    background-color: #111827 !important;
}

/* Ensure wrapper layers stay transparent so body dark shows through */
#kt_app_root,
#kt_app_page,
#kt_app_wrapper,
#kt_app_main {
    background-color: transparent !important;
}

/* ── Header ── */
.app-header {
    background-color: #111827 !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}
.app-header[data-kt-sticky-apply="true"] {
    background-color: #111827 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}

/* Mobile header drawer */
.app-header-mobile-drawer {
    background-color: #111827 !important;
}

/* Mobile hamburger toggle */
#kt_app_header_menu_toggle {
    color: rgba(255, 255, 255, 0.6) !important;
}
#kt_app_header_menu_toggle:hover {
    color: #ffffff !important;
}

/* ── Header nav text ── */
#kt_app_header_menu .menu-link .menu-title {
    color: rgba(255, 255, 255, 0.65) !important;
}
#kt_app_header_menu .menu-item > .menu-link:hover {
    background-color: transparent !important;
}
#kt_app_header_menu .menu-item > .menu-link:hover .menu-title {
    color: #ffffff !important;
}
#kt_app_header_menu .menu-item.menu-here-bg > .menu-link,
#kt_app_header_menu .menu-item > .menu-link.active {
    background-color: transparent !important;
}
#kt_app_header_menu .menu-item.menu-here-bg > .menu-link .menu-title,
#kt_app_header_menu .menu-item > .menu-link.active .menu-title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* ── Header nav dropdown arrows ── */
#kt_app_header_menu .menu-arrow {
    color: rgba(255, 255, 255, 0.4) !important;
}
#kt_app_header_menu .menu-item > .menu-link:hover .menu-arrow {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ── Header right-side icon buttons (notification bell, etc.) ── */
.app-navbar .btn-icon-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}
.app-navbar .btn-icon-muted:hover,
.app-navbar .btn-active-color-primary:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Header user avatar initials — make slightly more opaque on dark bg */
#kt_header_user_menu_toggle .symbol-label.bg-light-primary {
    background-color: rgba(74, 108, 247, 0.3) !important;
}

/* ── Footer ── */
#kt_app_footer {
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
}
#kt_app_footer .text-muted {
    color: rgba(255, 255, 255, 0.35) !important;
}
#kt_app_footer .text-gray-800,
#kt_app_footer a.text-gray-800 {
    color: rgba(255, 255, 255, 0.6) !important;
}
#kt_app_footer a.text-hover-primary:hover {
    color: #4a6cf7 !important;
}