/* =====================================================================
   NEXUS THEME - the design system layer.
   One file defines the visual language for the whole app: tokens first,
   then the primitives every page is built from. Loaded after app.css,
   so these rules win. Dark mode flips the tokens; components follow.
   ===================================================================== */

:root {
    --nx-red: #d31335;
    --nx-red-dark: #a80f2b;
    --nx-red-soft: #fdeef1;

    --nx-bg: #f4f5f7;
    --nx-surface: #ffffff;
    --nx-surface-2: #f8f9fb;
    --nx-border: #e6e8ec;
    --nx-border-strong: #d3d7dd;

    --nx-text: #1c2127;
    --nx-text-soft: #4b5563;
    --nx-muted: #6b7280;

    --nx-radius: 14px;
    --nx-radius-sm: 10px;

    --nx-shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --nx-shadow-md: 0 4px 6px rgba(16, 24, 40, .04), 0 10px 24px rgba(16, 24, 40, .07);
    --nx-shadow-lg: 0 14px 38px rgba(16, 24, 40, .14);

    --nx-focus-ring: 0 0 0 3px rgba(211, 19, 53, .18);
}

body.dark-mode {
    --nx-red-soft: #3a2229;

    --nx-bg: #14161a;
    --nx-surface: #1e2127;
    --nx-surface-2: #23262d;
    --nx-border: #33383f;
    --nx-border-strong: #464c55;

    --nx-text: #e5e8ec;
    --nx-text-soft: #c2c9d0;
    --nx-muted: #98a1ab;

    --nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --nx-shadow-md: 0 4px 6px rgba(0, 0, 0, .3), 0 10px 24px rgba(0, 0, 0, .35);
    --nx-shadow-lg: 0 14px 38px rgba(0, 0, 0, .5);
}

/* ------------------------------------------------ typography ---- */

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    /* Readable-first: this floor has bifocals on it. */
    font-size: 1.05rem;
    letter-spacing: -.005em;
    color: var(--nx-text);
    background: var(--nx-bg) !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--nx-text);
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.35rem; }

::selection { background: rgba(211, 19, 53, .18); }

/* Unify the dark palette (overrides the older experimental grays in app.css). */
body.dark-mode,
body.dark-mode .page,
body.dark-mode main,
body.dark-mode article.content {
    background: var(--nx-bg) !important;
    color: var(--nx-text) !important;
}

/* ------------------------------------------------ scrollbars ---- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--nx-border-strong);
    border-radius: 999px;
    border: 2px solid var(--nx-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--nx-muted); }

/* ------------------------------------------------ cards ---------- */

.card {
    border-radius: var(--nx-radius) !important;
    border: 1px solid var(--nx-border) !important;
    background: var(--nx-surface) !important;
    color: var(--nx-text) !important;
    box-shadow: var(--nx-shadow-sm);
    transition: box-shadow .15s ease;
}

.card:hover { box-shadow: var(--nx-shadow-md); }

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--nx-border) !important;
    font-weight: 600;
    letter-spacing: -.01em;
    padding: .8rem 1.1rem;
    color: var(--nx-text) !important;
}

.card-footer {
    background: var(--nx-surface-2) !important;
    border-top: 1px solid var(--nx-border) !important;
}

.card-body { padding: 1.05rem 1.1rem; }

/* ------------------------------------------------ buttons -------- */

.btn {
    border-radius: var(--nx-radius-sm);
    font-weight: 600;
    letter-spacing: -.005em;
    transition: transform .08s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.btn:active { transform: translateY(1px); }

.btn-sm { border-radius: 8px; font-size: .95rem; }

.btn-primary {
    background: var(--nx-red) !important;
    border-color: var(--nx-red) !important;
    color: #fff !important;
}

    .btn-primary:hover, .btn-primary:focus {
        background: var(--nx-red-dark) !important;
        border-color: var(--nx-red-dark) !important;
        box-shadow: 0 6px 16px rgba(211, 19, 53, .28);
    }

.btn-outline-primary {
    color: var(--nx-red) !important;
    border-color: var(--nx-red) !important;
}

    .btn-outline-primary:hover {
        background: var(--nx-red) !important;
        color: #fff !important;
    }

.btn-success { box-shadow: none; }

.btn:focus-visible { box-shadow: var(--nx-focus-ring) !important; }

/* ------------------------------------------------ forms ---------- */

.form-control, .form-select, .input-group-text {
    border-radius: var(--nx-radius-sm) !important;
    border: 1px solid var(--nx-border-strong) !important;
    background: var(--nx-surface) !important;
    color: var(--nx-text) !important;
    transition: border-color .12s ease, box-shadow .12s ease;
}

    .form-control:focus, .form-select:focus {
        border-color: var(--nx-red) !important;
        box-shadow: var(--nx-focus-ring) !important;
        background: var(--nx-surface) !important;
        color: var(--nx-text) !important;
    }

    .form-control::placeholder { color: var(--nx-muted); opacity: .8; }

.form-label { font-weight: 600; font-size: .95rem; color: var(--nx-text-soft); }

.form-control, .form-select { font-size: 1rem; }

.badge { font-size: .82em; }

.input-group-text {
    background: var(--nx-surface-2) !important;
    color: var(--nx-muted) !important;
    font-weight: 600;
    font-size: .85rem;
}

.form-check-input:checked {
    background-color: var(--nx-red);
    border-color: var(--nx-red);
}

/* ------------------------------------------------ tables --------- */

.table {
    color: var(--nx-text) !important;
    border-color: var(--nx-border) !important;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--nx-surface-2);
    --bs-table-hover-bg: var(--nx-red-soft);
}

    .table thead th {
        font-size: .82rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        color: var(--nx-muted) !important;
        border-bottom: 1px solid var(--nx-border-strong) !important;
        padding: .65rem .8rem;
        white-space: nowrap;
    }

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

    .table td { padding: .68rem .8rem; vertical-align: middle; font-size: 1rem; }

    .table tbody tr { transition: background .1s ease; }

body.dark-mode .table {
    --bs-table-striped-bg: rgba(255, 255, 255, .025);
    --bs-table-hover-bg: rgba(211, 19, 53, .12);
}

/* ------------------------------------------------ badges & pills - */

.badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .38em .75em;
}

/* ------------------------------------------------ alerts --------- */

.alert {
    border-radius: var(--nx-radius-sm);
    border: none;
    box-shadow: var(--nx-shadow-sm);
}

body.dark-mode .alert-success { background: #16281d; color: #7fd8a2; }
body.dark-mode .alert-danger { background: #2d181d; color: #ff92a4; }
body.dark-mode .alert-warning { background: #2b2415; color: #e8c877; }
body.dark-mode .alert-info { background: #14232e; color: #85c5ec; }
body.dark-mode .alert-light { background: var(--nx-surface-2); color: var(--nx-text); }

/* ------------------------------------------------ modals --------- */

.modal-content {
    border-radius: var(--nx-radius) !important;
    border: 1px solid var(--nx-border) !important;
    background: var(--nx-surface) !important;
    color: var(--nx-text) !important;
    box-shadow: var(--nx-shadow-lg);
}

.modal-header { border-bottom: 1px solid var(--nx-border) !important; }
.modal-footer { border-top: 1px solid var(--nx-border) !important; }

/* ------------------------------------------------ misc ----------- */

.list-group-item {
    background: var(--nx-surface) !important;
    color: var(--nx-text) !important;
    border-color: var(--nx-border) !important;
}

.dropdown-menu {
    border-radius: var(--nx-radius-sm);
    border: 1px solid var(--nx-border);
    background: var(--nx-surface);
    box-shadow: var(--nx-shadow-md);
}

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

hr { border-color: var(--nx-border); opacity: 1; }

a { color: var(--nx-red); }

    a:hover { color: var(--nx-red-dark); }

/* Sidebar polish - refine what's already there, both modes. */
.mdwc-sidebar-wrapper { box-shadow: var(--nx-shadow-md) !important; }

.mdwc-nav-link { border-radius: 10px !important; }

/* The brand banner: same dark treatment as the login page - slate gradient,
   red-white logo, thin red signature line. One look, everywhere. */
.mdwc-logo-area {
    background: linear-gradient(120deg, #1a232e 0%, #131a22 100%) !important;
    border-bottom: 3px solid var(--nx-red) !important;
    border-radius: 14px !important;
    padding: 18px 14px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}