:root {
    --mci-blaze-orange: #ff6600;
    --mci-dark-navy: #002060;
    --mci-white: #ffffff;
    --mci-black: #000000;
    --mci-orange-dark: #e55a00;
    --mci-orange-pale: #fff0e6;
    --mci-mid-blue: #003399;
    --mci-bpoaas-blue: #2f70d9;
    --mci-gray-800: #333333;
    --mci-gray-200: #eeeeee;
    --mci-font-family: "Quicksand", Calibri, Arial, sans-serif;
}

:root,
[data-theme="light"] {
    --color-bg: #f6f8fb;
    --color-panel: var(--mci-white);
    --color-panel-alt: #f9fafc;
    --color-text: var(--mci-gray-800);
    --color-muted: #5c6675;
    --color-border: var(--mci-gray-200);
    --color-shell: var(--mci-dark-navy);
    --color-shell-muted: #dbe5ff;
    --color-primary: var(--mci-blaze-orange);
    --color-primary-hover: var(--mci-orange-dark);
    --color-focus: var(--mci-blaze-orange);
    --shadow-panel: 0 0.65rem 1.75rem rgba(0, 32, 96, 0.1);
}

[data-theme="dark"] {
    --color-bg: #00133d;
    --color-panel: #001b52;
    --color-panel-alt: #002060;
    --color-text: var(--mci-white);
    --color-muted: #c7d3ec;
    --color-border: #214682;
    --color-shell: #000f30;
    --color-shell-muted: #c7d3ec;
    --shadow-panel: 0 0.65rem 1.75rem rgba(0, 0, 0, 0.28);
}

body {
    min-height: 100vh;
    color: var(--color-text);
    font-family: var(--mci-font-family);
}

.auth-shell {
    background: linear-gradient(180deg, rgba(0, 32, 96, 0.05), rgba(0, 32, 96, 0)), var(--color-bg);
}

.public-shell {
    min-height: 100dvh;
    background: linear-gradient(135deg, rgba(0, 32, 96, 0.97), rgba(0, 15, 48, 0.98)), var(--mci-dark-navy);
    color: var(--mci-white);
}

.auth-main,
.public-main {
    color: var(--color-text);
}

.app-shell {
    overflow: hidden;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-panel);
}

.app-shell-header,
.card-header {
    background: var(--color-shell);
    color: var(--mci-white);
    border-bottom: 3px solid var(--color-primary);
}

.app-shell-body {
    background: var(--color-panel);
    color: var(--color-text);
}

.brand-lockup {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.55rem;
    line-height: 1;
}

.brand-wordmark {
    font-family: var(--mci-font-family);
    font-size: clamp(1.35rem, 3vw, 2.15rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.brand-mci {
    color: var(--mci-blaze-orange);
}

.brand-bpo {
    color: var(--mci-bpoaas-blue);
}

.app-title {
    color: inherit;
    font-size: clamp(1.05rem, 2vw, 1.55rem);
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

.current-time {
    color: var(--color-shell-muted);
    font-size: 0.86rem;
    font-weight: 600;
}

.theme-error {
    display: none;
}

.theme-error.is-visible {
    display: block;
}

h2,
h3 {
    color: var(--color-text);
    font-weight: 700;
    letter-spacing: 0;
}

.public-shell h2 {
    color: var(--mci-white);
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(199, 211, 236, 0.35);
}

a {
    color: var(--mci-bpoaas-blue);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

img {
    max-height: 64px;
    height: auto;
}

.card,
.card-slate,
.card.bg-secondary {
    background: var(--color-panel) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0.5rem !important;
    box-shadow: var(--shadow-panel);
}

.card-body,
.card-body.bg-dark,
.card-body.bg-secondary {
    background: var(--color-panel) !important;
    color: var(--color-text) !important;
}

.app-shell-body .card-body .text-white,
.app-shell-body .card-body .text-light {
    color: var(--color-text) !important;
}

.app-shell-body .card-header .text-white,
.app-shell-body .card-header .text-light,
.app-shell-body .btn.text-white {
    color: var(--mci-white) !important;
}

.card-header.bg-secondary {
    background: var(--color-shell) !important;
}

.form-label,
label,
strong {
    color: var(--color-text);
}

.form-text {
    color: var(--color-muted);
    font-size: 0.875em;
}

.form-control,
.form-select {
    color: var(--color-text);
    background-color: var(--color-panel-alt);
    border-color: var(--color-border);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.btn:focus-visible,
.dropdown-item:focus-visible {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.22);
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--mci-white);
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--mci-white) !important;
}

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

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--mci-white);
}

.btn-secondary {
    background: var(--mci-dark-navy);
    border-color: var(--mci-dark-navy);
    color: var(--mci-white);
}

.btn-outline-info {
    color: var(--mci-bpoaas-blue);
    border-color: var(--mci-bpoaas-blue);
}

.btn-outline-info:hover,
.btn-outline-info:focus {
    background: var(--mci-bpoaas-blue);
    border-color: var(--mci-bpoaas-blue);
    color: var(--mci-white);
}

.badge.bg-success,
.badge.bg-success-subtle {
    background: #157347 !important;
    color: var(--mci-white) !important;
}

.badge.bg-warning,
.badge.bg-warning-subtle {
    background: var(--mci-blaze-orange) !important;
    color: var(--mci-white) !important;
}

.badge.bg-info,
.badge.bg-info-subtle,
.badge.bg-secondary {
    background: var(--mci-mid-blue) !important;
    color: var(--mci-white) !important;
}

.badge.bg-danger {
    background: #b02a37 !important;
    color: var(--mci-white) !important;
}

.table {
    --bs-table-bg: var(--color-panel-alt);
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-border);
    --bs-table-striped-bg: rgba(0, 32, 96, 0.04);
    --bs-table-striped-color: var(--color-text);
    --bs-table-hover-bg: rgba(255, 102, 0, 0.08);
    --bs-table-hover-color: var(--color-text);
}

.table-dark {
    --bs-table-bg: var(--color-panel-alt);
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-border);
}

.json-scroll-block {
    max-height: 350px;
    overflow: auto;
    padding: 10px;
    color: var(--color-text);
    background: var(--color-panel-alt);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
}

.json-scroll-block pre,
.text-light.small pre.mb-0 {
    color: var(--color-text);
    font-size: 0.95em;
    background: none;
    border: none;
    margin-bottom: 0;
}

.dropdown-menu {
    border-color: var(--color-border);
    box-shadow: var(--shadow-panel);
}

.theme-option.is-active {
    color: var(--mci-white);
    background: var(--mci-dark-navy);
}

footer {
    color: var(--color-muted);
}

.public-shell footer {
    color: var(--mci-white);
}

@media (max-width: 575.98px) {
    .app-title {
        white-space: normal;
    }

    .account-menu {
        width: 100%;
    }

    .account-menu .dropdown-toggle {
        width: 100%;
    }
}