/* Base styles for SAAJ */
:root {
    color-scheme: dark light;
    --bg: #0f151d;
    --fg: #e8edf5;
    --muted: #9ba7b6;
    --primary: #d6b97b;

    /* Brand palette and fonts (merged from base.css) */
    --color-azul-profundo: #1E2A38;
    --color-dourado-claro: #D6B97B;
    --color-cinza-neutro: #C7C7C7;
    --color-azul-petroleo: #345A70;
    --color-azul-cobalto: #2E4C63;
    --color-azul-noturno: #12202B;

    /* Extended neutral scale */
    --surface-base: #0f151d;
    --surface-subtle: #15212d;
    --surface-overlay: rgba(30, 42, 56, 0.92);
    --surface-muted: rgba(23, 32, 42, 0.85);
    --border-muted: #253546;
    --border-strong: #3a4d60;
    --text-secondary: #b5bfca;
    --accent-emerald: #0f766e;

    /* Data display helpers */
    --table-header-bg: #1e2a38;
    --table-row-bg: rgba(12, 19, 27, 0.8);
    --table-row-alt-bg: rgba(18, 32, 43, 0.6);
    --table-row-hover-bg: rgba(52, 90, 112, 0.45);
    --table-border: #2e4153;
    --chip-bg: rgba(52, 90, 112, 0.2);

    --font-primary: 'IBM Plex Sans', sans-serif;
    --font-secondary: 'Inter', sans-serif;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f151d;
        --fg: #e8edf5;
        --muted: #9ba7b6;
        --primary: #d6b97b;
    }
}

html[data-theme='light'] {
    --bg: #f7fafc;
    --fg: #0f172a;
    --muted: #4b5563;
    --primary: #1d4ed8;
    --surface-base: #edf2f7;
    --surface-subtle: #fff;
    --surface-overlay: #ffffff;
    --surface-muted: #f1f5f9;
    --border-muted: #d2d6dc;
    --border-strong: #94a3b8;
    --text-secondary: #4b5563;
    --table-header-bg: #e2e8f0;
    --table-row-bg: #ffffff;
    --table-row-alt-bg: #f8fafc;
    --table-row-hover-bg: #e0e7ff;
    --table-border: #cbd5f5;
    --chip-bg: rgba(29, 78, 216, 0.1);
}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--surface-base);
    color: var(--fg);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.5;
}

.app-title {
    margin: 0;
    padding: 1rem;
}

main {
    padding: 1rem;
}


/* Basic header and hero styles for homepage */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--muted);
}
.brand-logo {
    height: 32px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), rgba(255,255,255,0));
    border-radius: 50%;
    padding: 4px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}
.site-nav a {
    color: var(--fg);
    text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; }

.hero {
    text-align: center;
    padding: 3rem 1rem;
}
.hero-logo { height: 80px; margin-bottom: 1rem; }
.button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--primary);
    color: var(--color-azul-noturno);
    border-radius: 6px;
}
.button:hover { filter: brightness(0.95); }

/* Surface overrides for dark console */
body,
.bg-body {
    background-color: var(--surface-base) !important;
    color: var(--fg) !important;
}

.navbar,
.navbar.bg-dark {
    background-color: var(--surface-subtle) !important;
    border-bottom: 1px solid var(--border-muted) !important;
}

.navbar .navbar-brand img {
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}

html[data-theme='light'] .navbar .navbar-brand img {
    box-shadow: 0 4px 10px rgba(15,23,42,0.12);
    background: radial-gradient(circle, rgba(15,23,42,0.05), rgba(15,23,42,0));
}

.navbar .nav-link,
.navbar .navbar-brand span {
    color: var(--fg) !important;
}

.navbar .nav-link:hover {
    color: var(--primary) !important;
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item {
    background-color: var(--surface-overlay);
    color: var(--fg);
    border: 1px solid var(--border-muted);
}

.card .card-header,
.modal-header {
    background-color: var(--table-header-bg);
    color: var(--primary);
    border-bottom: 1px solid var(--border-muted);
}

.bg-light {
    background-color: var(--surface-muted) !important;
    color: var(--fg) !important;
}

.text-muted {
    color: var(--muted) !important;
}

.nav-tabs {
    border-bottom: 1px solid var(--border-muted);
}

.nav-tabs .nav-link {
    color: var(--muted);
}

.nav-tabs .nav-link:hover {
    color: var(--primary);
    border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--primary);
    background-color: transparent;
    border-color: var(--border-muted) var(--border-muted) var(--surface-overlay);
}

.form-control,
.form-select,
.input-group-text,
textarea {
    background-color: var(--surface-subtle);
    color: var(--fg);
    border-color: var(--border-muted);
}

.form-control:focus,
.form-select:focus {
    color: var(--fg);
    background-color: var(--surface-subtle);
    border-color: var(--primary);
    box-shadow: 0 0 0 0.15rem rgba(214, 185, 123, 0.25);
}

.form-control::placeholder,
.form-select option {
    color: var(--text-secondary);
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--color-azul-noturno);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #c9a963;
    border-color: #c9a963;
    color: var(--color-azul-noturno);
}

.btn-outline-secondary {
    color: var(--text-secondary);
    border-color: var(--border-strong);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    color: var(--primary);
    border-color: var(--primary);
    background-color: rgba(214, 185, 123, 0.08);
}

.badge.text-bg-light {
    background-color: var(--chip-bg) !important;
    color: var(--primary) !important;
    border-color: var(--border-muted) !important;
}

.table {
    color: var(--fg);
    background-color: var(--table-row-bg);
    border-color: var(--table-border);
}

.table thead th {
    background-color: var(--table-header-bg);
    color: var(--primary);
    border-color: var(--table-border);
    font-weight: 600;
}

.table tbody tr {
    background-color: transparent;
    border-color: var(--table-border);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--table-row-alt-bg);
}

.table-hover > tbody > tr:hover,
.table tbody tr:hover {
    background-color: var(--table-row-hover-bg);
    color: var(--fg);
}

.table td,
.table th {
    border-color: var(--table-border);
}

.pagination .page-link {
    background-color: var(--surface-subtle);
    color: var(--text-secondary);
    border-color: var(--border-muted);
}

.pagination .page-link:hover {
    color: var(--primary);
    background-color: rgba(214, 185, 123, 0.08);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--color-azul-noturno);
}

.accordion-button {
    background-color: var(--surface-subtle);
    color: var(--fg);
}

.accordion-button:not(.collapsed) {
    color: var(--primary);
    background-color: rgba(30, 42, 56, 0.75);
}

.accordion-button:focus {
    box-shadow: 0 0 0 0.15rem rgba(214, 185, 123, 0.25);
}

.accordion-item {
    background-color: var(--surface-overlay);
    border: 1px solid var(--border-muted);
}

.border-dashed {
    border-style: dashed !important;
}