/*
 * Nexstadia Hub — identitas Nexstadia Brand Identity Guideline v1.0 (Plan V1.3 §12.1).
 * Navy #101D35 · Electric Blue #246BFD · Cyan #36C5F0 · Ice Gray #F3F6FB · Graphite #172033
 * Judul Plus Jakarta Sans, isi Inter. Teks di atas biru elektrik memakai #1D4ED8 untuk tombol
 * agar kontras AA; cyan hanya aksen, tidak untuk teks kecil.
 */
:root {
    --nx-navy: #101D35;
    --nx-blue: #246BFD;
    --nx-blue-strong: #1D4ED8;
    --nx-cyan: #36C5F0;
    --nx-ice: #F3F6FB;
    --nx-graphite: #172033;
    --nx-muted: #5B6478;
    --nx-line: #DCE3EE;
    --nx-surface: #FFFFFF;
    --nx-success: #12805C;
    --nx-danger: #C2322F;
    --nx-warning: #9A6400;
    --nx-radius: 14px;
    --nx-font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
    --nx-font-body: "Inter", system-ui, sans-serif;

    --bs-body-font-family: var(--nx-font-body);
    --bs-body-color: var(--nx-graphite);
    --bs-body-bg: var(--nx-ice);
    --bs-primary: var(--nx-blue-strong);
    --bs-primary-rgb: 29, 78, 216;
    --bs-link-color: var(--nx-blue-strong);
    --bs-link-color-rgb: 29, 78, 216;
    --bs-border-color: var(--nx-line);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --nx-ice: #0B1324;
        --nx-surface: #121C33;
        --nx-graphite: #E6EBF5;
        --nx-muted: #A3AEC4;
        --nx-line: #26334F;
        --bs-body-color: var(--nx-graphite);
        --bs-body-bg: var(--nx-ice);
        --bs-border-color: var(--nx-line);
        --bs-secondary-color: var(--nx-muted);
        --bs-tertiary-bg: #1A2540;
    }
    :root:not([data-theme="light"]) .card,
    :root:not([data-theme="light"]) .form-control,
    :root:not([data-theme="light"]) .form-select,
    :root:not([data-theme="light"]) .table { --bs-table-bg: var(--nx-surface); background-color: var(--nx-surface); color: var(--nx-graphite); border-color: var(--nx-line); }
    :root:not([data-theme="light"]) .text-muted { color: var(--nx-muted) !important; }
}

body { background: var(--nx-ice); color: var(--nx-graphite); font-family: var(--nx-font-body); }
h1, h2, h3, h4, h5, .nx-heading, .navbar-brand { font-family: var(--nx-font-heading); font-weight: 700; letter-spacing: -.01em; }

.btn-primary { --bs-btn-bg: var(--nx-blue-strong); --bs-btn-border-color: var(--nx-blue-strong); --bs-btn-hover-bg: #1A44BD; --bs-btn-hover-border-color: #1A44BD; --bs-btn-active-bg: #163A9F; }
.btn-outline-primary { --bs-btn-color: var(--nx-blue-strong); --bs-btn-border-color: var(--nx-blue-strong); --bs-btn-hover-bg: var(--nx-blue-strong); --bs-btn-hover-border-color: var(--nx-blue-strong); }
.card { border-radius: var(--nx-radius); border-color: var(--nx-line); background: var(--nx-surface); }

/* Navbar portal */
.nx-nav { background: var(--nx-navy); }
.nx-nav .navbar-brand, .nx-nav .nav-link { color: #fff; }
.nx-nav .nav-link:hover, .nx-nav .nav-link.active { color: var(--nx-cyan); }
.nx-nav .navbar-toggler { border-color: rgba(255,255,255,.4); }
.nx-nav .navbar-toggler-icon { filter: invert(1); }
.nx-brand { display: inline-flex; align-items: center; gap: .5rem; }

/* Hero portal */
.nx-hero { background: radial-gradient(1200px 400px at 85% -20%, rgba(54,197,240,.35), transparent), var(--nx-navy); color: #fff; padding: 3.5rem 0 4.5rem; }
.nx-hero h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
.nx-hero .lead { color: #C9D6EE; }
.nx-search { margin-top: -2.5rem; }

.nx-venue-card .ratio { background: linear-gradient(135deg, var(--nx-navy), var(--nx-blue)); border-radius: var(--nx-radius) var(--nx-radius) 0 0; overflow: hidden; }
.nx-venue-card img { object-fit: cover; }
.nx-chip { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: rgba(36,107,253,.1); color: var(--nx-blue-strong); font-size: .78rem; font-weight: 600; margin: 0 .25rem .25rem 0; }

/* Slot jadwal */
.nx-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.nx-slot { border: 1px solid var(--nx-line); border-radius: 10px; padding: .45rem .3rem; text-align: center; background: var(--nx-surface); font-size: .85rem; }
.nx-slot small { display: block; color: var(--nx-muted); font-size: .72rem; }
.nx-slot.is-open { cursor: pointer; border-color: var(--nx-blue); }
.nx-slot.is-open:hover, .nx-slot.is-open:focus-visible { background: rgba(36,107,253,.08); outline: 2px solid var(--nx-blue); outline-offset: 1px; }
.nx-slot.is-closed { opacity: .45; text-decoration: line-through; }

/* Panel owner/admin */
.nx-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.nx-side { background: var(--nx-navy); color: #C9D6EE; padding: 1.25rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.nx-side .nx-brand { color: #fff; font-family: var(--nx-font-heading); font-weight: 700; text-decoration: none; margin-bottom: 1.5rem; }
.nx-side .nav-link { color: #C9D6EE; border-radius: 10px; padding: .55rem .75rem; display: flex; gap: .6rem; align-items: center; }
.nx-side .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.nx-side .nav-link.active { color: #fff; background: var(--nx-blue-strong); }
.nx-side .nx-side-label { text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; color: #7F8BA6; margin: 1rem .75rem .35rem; }
.nx-main { padding: 1.75rem 2rem; min-width: 0; }
.nx-page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.25rem; }
.nx-page-head p { color: var(--nx-muted); margin: 0; }
.nx-stat { font-family: var(--nx-font-heading); font-size: 1.6rem; font-weight: 700; }
.nx-progress { height: 8px; border-radius: 999px; background: var(--nx-line); overflow: hidden; }
.nx-progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--nx-blue), var(--nx-cyan)); }

.badge-status { font-weight: 600; }
.badge-status.st-active, .badge-status.st-paid, .badge-status.st-redeemed, .badge-status.st-confirmed { background: rgba(18,128,92,.12); color: var(--nx-success); }
.badge-status.st-trial, .badge-status.st-pending, .badge-status.st-open, .badge-status.st-sent, .badge-status.st-issued { background: rgba(36,107,253,.12); color: var(--nx-blue-strong); }
.badge-status.st-grace, .badge-status.st-redemption { background: rgba(154,100,0,.14); color: var(--nx-warning); }
.badge-status.st-suspended, .badge-status.st-terminated, .badge-status.st-void, .badge-status.st-revoked, .badge-status.st-cancelled, .badge-status.st-expired { background: rgba(194,50,47,.12); color: var(--nx-danger); }

.nx-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; letter-spacing: .05em; }

@media (max-width: 991.98px) {
    .nx-shell { grid-template-columns: 1fr; }
    .nx-side { position: static; height: auto; }
    .nx-main { padding: 1.25rem 16px; }
}
@media (max-width: 575.98px) {
    .container { padding-left: 16px; padding-right: 16px; }
}