/**
 * UMRAN theme override layer — loaded after public/css/app.css.
 * Espresso, metallic gold, teal accent. Keeps tokens consistent if the main bundle is stale.
 */
:root {
    --umran-bg: #0f172a;
    --umran-bg-mid: #111827;
    --umran-bg-elevated: #1f2937;
    --umran-bg-input: #0b1220;
    --umran-gold-champagne: #e2e8f0;
    --umran-gold: #0ea5e9;
    --umran-gold-deep: #0369a1;
    --umran-teal: #006d77;
    --umran-teal-bright: #0a9396;
    --umran-text: #f8fafc;
    --umran-text-muted: #94a3b8;
    --umran-border: rgba(14, 165, 233, 0.24);

    --lux-charcoal: #0f172a;
    --lux-charcoal-deep: #0b1220;
    --lux-sage: #0ea5e9;
    --lux-sage-dark: #0369a1;
    --lux-sage-light: #e2e8f0;
    --lux-cream: #0f172a;
    --lux-paper: #1f2937;
    --lux-ink: #f8fafc;
    --lux-muted: #94a3b8;

    --bs-primary: #0ea5e9;
    --bs-primary-rgb: 14, 165, 233;
    --bs-link-color: #e2e8f0;
    --bs-link-hover-color: #0a9396;
}

body {
    background-color: var(--umran-bg-mid) !important;
    color: var(--umran-text) !important;
}

[dir="ltr"] h1, [dir="ltr"] h2, [dir="ltr"] h3, [dir="ltr"] h4, [dir="ltr"] h5, [dir="ltr"] h6,
[dir="ltr"] .h1, [dir="ltr"] .h2, [dir="ltr"] .h3, [dir="ltr"] .h4, [dir="ltr"] .h5, [dir="ltr"] .h6 {
    color: var(--umran-gold-champagne) !important;
}

.navbar {
    background: linear-gradient(135deg, #0f172a 0%, #0b1220 100%) !important;
    border-bottom: 1px solid var(--umran-border) !important;
}

.navbar-nav .nav-link.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.28), rgba(0, 109, 119, 0.2)) !important;
    color: var(--umran-gold-champagne) !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--umran-gold) 0%, var(--umran-gold-deep) 100%) !important;
    border-color: transparent !important;
    color: #f8fafc !important;
}

.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, var(--umran-gold-deep) 0%, #7a4a0f 100%) !important;
    color: var(--umran-gold-champagne) !important;
}

.btn-outline-primary {
    color: var(--umran-gold-champagne) !important;
    border-color: var(--umran-gold) !important;
}

.btn-outline-primary:hover {
    background: linear-gradient(135deg, var(--umran-gold), var(--umran-gold-deep)) !important;
    border-color: var(--umran-gold-deep) !important;
    color: #f8fafc !important;
}

.card {
    background: var(--umran-bg-elevated) !important;
    border: 1px solid var(--umran-border) !important;
    color: var(--umran-text) !important;
}

.table thead {
    background-color: rgba(212, 175, 55, 0.12) !important;
    color: var(--umran-gold-champagne) !important;
}

.form-control:focus, .form-select:focus {
    border-color: var(--umran-teal) !important;
    box-shadow: 0 0 0 3px rgba(0, 109, 119, 0.28) !important;
}

.page-link, .pagination .page-link {
    color: var(--umran-gold-champagne) !important;
    background-color: var(--umran-bg-input) !important;
    border-color: var(--umran-border) !important;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, var(--umran-gold), var(--umran-gold-deep)) !important;
    border-color: var(--umran-gold-deep) !important;
    color: #f8fafc !important;
}

.auth-page {
    background: radial-gradient(circle at 0% 0%, rgba(212, 175, 55, 0.14) 0%, var(--umran-bg) 40%, #121212 100%) !important;
}

.auth-brand-panel {
    background: linear-gradient(165deg, rgba(0, 109, 119, 0.28), rgba(26, 18, 11, 0.96)) !important;
    color: var(--umran-text) !important;
}

.auth-form-panel {
    background: var(--umran-bg-elevated) !important;
}

/* Readable text on dark panels (align with resources/css/app.css) */
.text-muted {
    color: var(--umran-text-muted) !important;
}

.text-dark:not(.btn):not(.badge) {
    color: var(--umran-text) !important;
}