/*
 * BSEC IPO colour theme (Option A, Navy & Teal).
 * Loaded after style.bundle.css in every layout and overrides Metronic's colour variables.
 * One palette for every screen width and theme mode, so colours never change with resolution.
 * Contrast (WCAG 2.1): every text/background pair below is at least 4.5:1 (AA).
 */

:root,
[data-bs-theme=light],
[data-bs-theme=dark] {
    /* Palette */
    --bsec-primary: #0b3954;        /* brand: buttons, header, links (12.2:1 on white) */
    --bsec-primary-active: #072638;
    --bsec-primary-light: #e6eef3;
    --bsec-accent: #087e8b;         /* accent: section marks, rule links (4.8:1 on white) */
    --bsec-accent-active: #066670;
    --bsec-accent-text: #066670;    /* accent text on light accent backgrounds (5.6:1) */
    --bsec-accent-light: #e3f2f3;
    --bsec-positive: #1e7b4f;       /* complied, success, approve (5.3:1 on white) */
    --bsec-positive-active: #17603d;
    --bsec-positive-light: #e5f3eb;
    --bsec-negative: #b42318;       /* error, not complied, reject (6.6:1 on white) */
    --bsec-negative-active: #8f1c13;
    --bsec-negative-light: #fbe9e7;
    --bsec-warning: #9a5b00;        /* to review (5.4:1 on white) */
    --bsec-warning-active: #7a4800;
    --bsec-warning-light: #fdf1dc;
    --bsec-ink: #14212e;            /* body text (16.3:1) */
    --bsec-muted: #5f6f80;          /* secondary text (5.2:1) */
    --bsec-line: #dce3ea;
    --bsec-page: #f4f6f8;
    --bsec-focus: #1d6fd6;

    /* Metronic / Bootstrap variables */
    --bs-primary: var(--bsec-primary);
    --bs-primary-rgb: 11, 57, 84;
    --bs-primary-active: var(--bsec-primary-active);
    --bs-primary-light: var(--bsec-primary-light);
    --bs-primary-inverse: #ffffff;
    --bs-primary-bg-subtle: var(--bsec-primary-light);
    --bs-primary-border-subtle: #b6cad7;
    --bs-primary-text-emphasis: var(--bsec-primary-active);
    --bs-text-primary: var(--bsec-primary);

    --bs-info: var(--bsec-accent);
    --bs-info-rgb: 8, 126, 139;
    --bs-info-active: var(--bsec-accent-active);
    --bs-info-light: var(--bsec-accent-light);
    --bs-info-inverse: #ffffff;
    --bs-info-bg-subtle: var(--bsec-accent-light);
    --bs-info-border-subtle: #a9d6da;
    --bs-info-text-emphasis: var(--bsec-accent-text);
    --bs-text-info: var(--bsec-accent-text);

    --bs-success: var(--bsec-positive);
    --bs-success-rgb: 30, 123, 79;
    --bs-success-active: var(--bsec-positive-active);
    --bs-success-light: var(--bsec-positive-light);
    --bs-success-inverse: #ffffff;
    --bs-success-bg-subtle: var(--bsec-positive-light);
    --bs-success-border-subtle: #b3dbc5;
    --bs-success-text-emphasis: var(--bsec-positive-active);
    --bs-text-success: var(--bsec-positive);

    --bs-danger: var(--bsec-negative);
    --bs-danger-rgb: 180, 35, 24;
    --bs-danger-active: var(--bsec-negative-active);
    --bs-danger-light: var(--bsec-negative-light);
    --bs-danger-inverse: #ffffff;
    --bs-danger-bg-subtle: var(--bsec-negative-light);
    --bs-danger-border-subtle: #f0bdb7;
    --bs-danger-text-emphasis: var(--bsec-negative-active);
    --bs-text-danger: var(--bsec-negative);

    --bs-warning: var(--bsec-warning);
    --bs-warning-rgb: 154, 91, 0;
    --bs-warning-active: var(--bsec-warning-active);
    --bs-warning-light: var(--bsec-warning-light);
    --bs-warning-inverse: #ffffff;
    --bs-warning-bg-subtle: var(--bsec-warning-light);
    --bs-warning-border-subtle: #ecd2a4;
    --bs-warning-text-emphasis: var(--bsec-warning-active);
    --bs-text-warning: var(--bsec-warning);

    --bs-link-color: var(--bsec-primary);
    --bs-link-color-rgb: 11, 57, 84;
    --bs-link-hover-color: var(--bsec-accent-active);
    --bs-link-hover-color-rgb: 6, 102, 112;
    --bs-component-active-bg: var(--bsec-primary);
    --bs-component-active-color: #ffffff;
    --bs-component-hover-color: var(--bsec-accent-active);
    --bs-component-checked-bg: var(--bsec-primary);

    --bs-body-color: var(--bsec-ink);
    --bs-body-color-rgb: 20, 33, 46;
    --bs-body-bg: #ffffff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-text-muted: var(--bsec-muted);
    --bs-text-gray-500: var(--bsec-muted);
    --bs-gray-500: #66758a;         /* labels and placeholders: 4.7:1 (Metronic default 2.6:1) */
    --bs-gray-600: #5f6f80;
    --bs-gray-700: #44515f;
    --bs-gray-800: #263442;
    --bs-gray-900: var(--bsec-ink);
    --bs-text-gray-600: #5f6f80;
    --bs-text-gray-700: #44515f;
    --bs-text-gray-800: #263442;
    --bs-text-gray-900: var(--bsec-ink);
    --bs-text-dark: var(--bsec-ink);
    --bs-border-color: var(--bsec-line);
    --bs-focus-ring-color: rgba(29, 111, 214, .45);

    --bs-app-bg-color: var(--bsec-page);
    --bs-page-bg: var(--bsec-page);
    --bs-app-header-base-border-bottom: 3px solid var(--bsec-accent);

    color-scheme: light;
}

/* Larger, fixed type size at every screen width (Metronic: 13px, 12px below 992px). */
html,
body {
    font-size: 15px !important;
}

@media (max-width: 991.98px) {
    html,
    body {
        font-size: 15px !important;
    }
}

body {
    color: var(--bsec-ink);
    line-height: 1.55;
}

/* Small helper text stays readable. */
.fs-8,
.fs-9 {
    font-size: .85rem !important;
}

.form-label,
label {
    color: var(--bsec-ink);
}

.form-control::placeholder {
    color: #66758a;
    opacity: 1;
}

/* Links */
a {
    text-underline-offset: 3px;
}

a:not(.btn):not(.menu-link):not(.nav-link):hover {
    color: var(--bsec-accent-active);
}

.rule-ref {
    color: var(--bsec-accent-text);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
}

/* Keyboard focus is always visible (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.menu-link:focus-visible,
.nav-link:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    outline: 3px solid var(--bsec-focus) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Buttons: brand, accent, positive, negative */
.btn {
    font-weight: 600;
    min-height: 38px;
}

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

.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:active,
.btn.btn-primary.active {
    background-color: var(--bsec-primary-active) !important;
    color: #ffffff !important;
}

.btn.btn-info {
    background-color: var(--bsec-accent);
    color: #ffffff;
}

.btn.btn-info:hover:not(.btn-active) {
    background-color: var(--bsec-accent-active) !important;
}

.btn.btn-success {
    background-color: var(--bsec-positive);
    color: #ffffff;
}

.btn.btn-success:hover:not(.btn-active) {
    background-color: var(--bsec-positive-active) !important;
    color: #ffffff !important;
}

.btn.btn-danger {
    background-color: var(--bsec-negative);
    color: #ffffff;
}

.btn.btn-danger:hover:not(.btn-active) {
    background-color: var(--bsec-negative-active) !important;
    color: #ffffff !important;
}

.btn.btn-warning {
    background-color: var(--bsec-warning);
    color: #ffffff;
}

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

.btn.btn-light-success {
    color: var(--bsec-positive-active);
    background-color: var(--bsec-positive-light);
}

.btn.btn-light-danger {
    color: var(--bsec-negative-active);
    background-color: var(--bsec-negative-light);
}

.btn.btn-outline.btn-outline-primary {
    color: var(--bsec-primary);
    border-color: var(--bsec-primary);
}

.btn:disabled,
.btn.disabled {
    opacity: .5;
}

/* Badges and alerts use dark text on light tints (AA). */
.badge-light-primary {
    color: var(--bsec-primary);
    background-color: var(--bsec-primary-light);
}

.badge-light-info {
    color: var(--bsec-accent-text);
    background-color: var(--bsec-accent-light);
}

.badge-light-success {
    color: var(--bsec-positive-active);
    background-color: var(--bsec-positive-light);
}

.badge-light-danger {
    color: var(--bsec-negative-active);
    background-color: var(--bsec-negative-light);
}

.badge-light-warning {
    color: var(--bsec-warning-active);
    background-color: var(--bsec-warning-light);
}

.badge {
    font-size: .85rem;
    font-weight: 600;
}

.alert-success {
    color: var(--bsec-positive-active);
    background-color: var(--bsec-positive-light);
    border-color: var(--bsec-positive);
}

.alert-danger {
    color: var(--bsec-negative-active);
    background-color: var(--bsec-negative-light);
    border-color: var(--bsec-negative);
}

.alert-warning {
    color: var(--bsec-warning-active);
    background-color: var(--bsec-warning-light);
    border-color: var(--bsec-warning);
}

.alert-primary,
.alert-info {
    color: var(--bsec-primary);
    background-color: var(--bsec-primary-light);
    border-color: var(--bsec-primary);
}

.invalid-feedback,
.fv-plugins-message-container.invalid-feedback {
    color: var(--bsec-negative);
    font-size: .9rem;
}

/* Section card headers (bg-success was used as a plain section colour, not as "success"). */
.card > .card-header.bg-success,
.card > .card-header.bg-info,
.card > .card-header.bg-dark {
    background-color: var(--bsec-primary) !important;
    border-bottom: 3px solid var(--bsec-accent);
}

/* Header and sidebar */
.app-header {
    border-bottom: 3px solid var(--bsec-accent);
}

.app-sidebar .menu .menu-item .menu-link.active {
    background-color: var(--bsec-accent-light);
}

.app-sidebar .menu .menu-item .menu-link.active .menu-title,
.app-sidebar .menu .menu-item .menu-link.active .menu-icon i {
    color: var(--bsec-accent-text) !important;
}

.app-sidebar .menu .menu-item .menu-link:hover:not(.active) .menu-title {
    color: var(--bsec-primary) !important;
}

/* Tabs */
.nav-line-tabs .nav-item .nav-link.active,
.nav-tabs .nav-link.active {
    color: var(--bsec-primary);
    border-bottom-color: var(--bsec-primary);
}

/* Tables */
.table thead th,
.table thead td {
    color: var(--bsec-ink);
}

.table.table-bordered > :not(caption) > * > * {
    border-color: var(--bsec-line);
}

/* Toastr messages: same palette, white text (AA). */
#toast-container > .toast-success {
    background-color: var(--bsec-positive) !important;
}

#toast-container > .toast-error {
    background-color: var(--bsec-negative) !important;
}

#toast-container > .toast-warning {
    background-color: var(--bsec-warning) !important;
}

#toast-container > .toast-info {
    background-color: var(--bsec-primary) !important;
}

#toast-container > div {
    opacity: 1 !important;
    font-size: .95rem;
}

/* Stepper (IPO application wizard) */
.stepper .stepper-item.current .stepper-icon,
.stepper .stepper-item.completed .stepper-icon {
    background-color: var(--bsec-primary) !important;
}

.stepper .stepper-item.current .stepper-icon .stepper-number,
.stepper .stepper-item.completed .stepper-icon .stepper-check {
    color: #ffffff !important;
}

.stepper .stepper-item.current .stepper-title {
    color: var(--bsec-primary) !important;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* Sidebar footer: signed-in user; name hidden while the sidebar is minimized. */
[data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hover=true]) .app-sidebar .sidebar-user .menu-title-hide {
    display: none !important;
}

.app-sidebar-footer .menu-link {
    padding: .55rem .75rem;
    border-radius: .5rem;
}

/* Collapsed sidebar: the footer shows icons only, centred like the main menu. */
[data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hover=true]) .app-sidebar-footer {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
}

[data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hover=true]) .app-sidebar-footer .menu-title,
[data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hover=true]) .app-sidebar-footer .menu-title-hide {
    display: none !important;
}

[data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hover=true]) .app-sidebar-footer .sidebar-user,
[data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hover=true]) .app-sidebar-footer .menu-link {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

[data-kt-app-sidebar-minimize=on]:not([data-kt-app-sidebar-hover=true]) .app-sidebar-footer .menu-icon {
    margin: 0 !important;
}

.app-sidebar-footer .menu-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}