/*
 * Claiborne operator portal -- Newmarket design system.
 *
 * ==========================================================================
 * THIS FILE IS DELIBERATELY STANDALONE. DO NOT @import /shared/styles.css.
 * ==========================================================================
 *
 * /shared/styles.css is served into player game iframes and carries the
 * games' dark-gold theme plus greens and blues that are not part of this
 * palette. Sharing a stylesheet between the two surfaces would mean every
 * portal tweak lands inside eleven live games, and every game tweak lands
 * on an operator's revenue screen. The duplication here is the cheaper of
 * the two problems.
 *
 * Palette rules that are binding, not stylistic:
 *   - Yellow is never text on a light surface. #ce9808 (--gold-dark) is the
 *     gold-family colour for light backgrounds, and even then it is used for
 *     rules, borders and chart series rather than for reading text, because
 *     it only reaches ~2.6:1 against white. Text on light is navy or ink.
 *     #fde15c (--yellow-light) is the gold for dark surfaces, where it
 *     reaches 8.9:1 on --navy.
 *   - --red is for failed conformance and integrity incidents. It is never
 *     decoration, so there is no .btn-danger-looking-nice here.
 *   - No greens, no purples.
 */

:root {
    --navy: #163962;
    --navy-dark: #0e2440;
    --navy-mid: #275b98;
    --yellow: #f2bc2b;
    --yellow-light: #fde15c;
    --gold-dark: #ce9808;
    --ink: #15202e;
    --paper: #f4f7fb;
    --rule: #ccd6e4;
    --red: #a02020;

    /* Derived. Both hit 4.5:1 as text on the surface they are named for:
       --muted 5.1:1 on --paper, --muted-dark 7.5:1 on --navy. */
    --muted: #5a6b80;
    --muted-dark: #c3d2e4;

    /* The one dark surface treatment: login, hero, About. */
    --dark-surface: linear-gradient(155deg, #0e2440 0%, #163962 60%, #275b98 100%);

    /* Panels on dark are always this. A lighter navy fill reads as a
       different brand; a translucent white keeps the gradient underneath. */
    --panel-dark: rgba(255, 255, 255, 0.07);
    --panel-dark-rule: rgba(255, 255, 255, 0.16);

    --ui: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
    --display: Georgia, "Times New Roman", serif;

    --shadow-card: 0 1px 2px rgba(21, 32, 46, 0.08), 0 2px 8px rgba(21, 32, 46, 0.06);
    --shadow-pop: 0 8px 32px rgba(14, 36, 64, 0.24);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    /* 14px is the floor for UI body text in this system. */
    font: 400 14px/1.5 var(--ui);
    color: var(--ink);
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--navy-mid); }
a:hover { color: var(--navy); }

/* Georgia is reserved for display numbers and editorial prose. Nav, data,
   forms and buttons all stay on the UI stack. */
.display { font-family: var(--display); }

h1, h2, h3, h4 {
    font-family: var(--ui);
    color: var(--navy);
    margin: 0;
    font-weight: 600;
}

h1 { font-size: 22px; letter-spacing: -0.01em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

.caption {
    font-size: 12px;
    color: var(--muted);
}

.muted { color: var(--muted); }
.mono { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.center { text-align: center; }

/* ==========================================================================
   Dark surfaces: login, portal hero, About
   ========================================================================== */

.dark-surface {
    background: var(--dark-surface);
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.dark-surface h1,
.dark-surface h2,
.dark-surface h3 { color: #fff; }

.dark-surface .caption,
.dark-surface .muted { color: var(--muted-dark); }

/* Gold on dark. Never the same colour on a light panel. */
.dark-surface .accent { color: var(--yellow-light); }

.panel-dark {
    background: var(--panel-dark);
    border: 1px solid var(--panel-dark-rule);
    border-radius: 6px;
    padding: 20px;
}

/* ==========================================================================
   Login / change-password
   ========================================================================== */

.auth-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--panel-dark);
    border: 1px solid var(--panel-dark-rule);
    border-radius: 8px;
    padding: 32px;
    box-shadow: var(--shadow-pop);
}

.auth-card h1 {
    font-size: 20px;
    margin-bottom: 4px;
}

.auth-lede {
    color: var(--muted-dark);
    font-size: 13px;
    margin: 0 0 24px;
}

.auth-brand {
    text-align: center;
    padding: 48px 20px 8px;
}

/* Never recolour, never stretch: explicit height, width follows. */
.auth-brand img {
    height: 30px;
    width: auto;
    display: inline-block;
}

.auth-brand .product {
    font-family: var(--display);
    font-size: 28px;
    color: var(--yellow-light);
    margin: 14px 0 2px;
    letter-spacing: 0.01em;
}

.auth-brand .product-sub {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted-dark);
}

/* ==========================================================================
   Forms
   ========================================================================== */

.field { margin-bottom: 16px; }

.field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    color: var(--muted);
}

.dark-surface .field label { color: var(--muted-dark); }

.field input,
.field select,
.field textarea {
    width: 100%;
    font: 400 14px/1.4 var(--ui);
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 9px 10px;
}

.field textarea { min-height: 76px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: 2px solid var(--navy-mid);
    outline-offset: -1px;
    border-color: var(--navy-mid);
}

.field .hint {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.dark-surface .field .hint { color: var(--muted-dark); }

.field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0 16px;
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.check input { width: auto; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    font: 600 14px/1 var(--ui);
    padding: 10px 16px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    background: var(--navy);
    color: #fff;
}

.btn:hover:not(:disabled) { background: var(--navy-mid); }

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-block { width: 100%; }

.btn-secondary {
    background: #fff;
    color: var(--navy);
    border-color: var(--rule);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--paper);
    border-color: var(--navy-mid);
}

/* Gold as a fill with ink text -- the only compliant way to put yellow next
   to reading text on a light surface. */
.btn-accent {
    background: var(--yellow);
    color: var(--ink);
    border-color: var(--gold-dark);
}

.btn-accent:hover:not(:disabled) { background: var(--yellow-light); }

/* Destructive, not decorative. */
.btn-alert {
    background: #fff;
    color: var(--red);
    border-color: var(--red);
}

.btn-alert:hover:not(:disabled) {
    background: var(--red);
    color: #fff;
}

.btn-sm {
    font-size: 12px;
    padding: 6px 10px;
}

.btn-link {
    background: none;
    border: none;
    color: var(--navy-mid);
    font: 600 13px/1 var(--ui);
    cursor: pointer;
    padding: 4px 0;
    text-decoration: underline;
}

.dark-surface .btn-link { color: var(--yellow-light); }

.btn-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Portal shell
   ========================================================================== */

.shell {
    display: grid;
    grid-template-columns: 232px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--navy-dark);
    color: #fff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 20px 18px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* White wordmark, because the sidebar is a dark surface.
   16px is the tallest the wordmark can be here: it is 453x41, so its aspect
   ratio puts it at 177px wide, and the sidebar leaves 196px between its
   paddings. At 20px it rendered 221px and was clipped by the sidebar edge.
   The logo is never scaled non-uniformly to fit -- the height comes down and
   width:auto follows it. */
.sidebar-brand img {
    height: 16px;
    width: auto;
    display: block;
}

.sidebar-brand .product {
    font-family: var(--display);
    font-size: 19px;
    color: var(--yellow-light);
    margin-top: 10px;
}

.sidebar-brand .product-sub {
    font-size: 12px;
    color: var(--muted-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.nav { padding: 12px 0; flex: 1; }

.nav-group-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    padding: 14px 18px 6px;
}

.nav a {
    display: block;
    padding: 8px 18px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 14px;
    border-left: 3px solid transparent;
}

.nav a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
}

.nav a.active {
    background: rgba(255, 255, 255, 0.1);
    border-left-color: var(--yellow);
    color: #fff;
    font-weight: 600;
}

.sidebar-user {
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 13px;
}

.sidebar-user .who {
    color: #fff;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user .role {
    color: var(--muted-dark);
    font-size: 12px;
    margin-bottom: 8px;
}

.main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
}

.view {
    flex: 1;
    padding: 24px 28px 40px;
    min-width: 0;
}

.view-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
}

.view-head .lede {
    color: var(--muted);
    font-size: 13px;
    margin: 4px 0 0;
    max-width: 70ch;
}

.portal-footer {
    border-top: 1px solid var(--rule);
    background: var(--paper);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--muted);
}

/* Navy wordmark, because the footer sits on --paper. */
.portal-footer img {
    height: 18px;
    width: auto;
}

.portal-footer .attribution { color: var(--ink); }

/* ==========================================================================
   Banners
   ========================================================================== */

.banner {
    padding: 12px 28px;
    font-size: 13px;
    display: flex;
    gap: 10px;
    align-items: baseline;
    border-bottom: 1px solid var(--rule);
}

.banner strong { font-weight: 600; }

/* Advisory. Gold rule plus ink text -- readable, and not the alert colour. */
.banner-warn {
    background: #fdf6e0;
    border-bottom-color: var(--gold-dark);
    color: var(--ink);
}

/* True alerts only. */
.banner-alert {
    background: #f9eaea;
    border-bottom-color: var(--red);
    color: var(--red);
}

.banner-info {
    background: var(--paper);
    color: var(--ink);
}

/* ==========================================================================
   Cards, panels, stat cards
   ========================================================================== */

.card {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: 18px;
    box-shadow: var(--shadow-card);
}

.card + .card { margin-top: 18px; }

.card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 14px;
}

.grid {
    display: grid;
    gap: 16px;
}

.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.stat-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-top: 4px solid var(--yellow);
    border-radius: 4px;
    padding: 14px 16px 16px;
}

.stat-card .label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
}

.stat-card .value {
    font-family: var(--display);
    font-size: 30px;
    line-height: 1.1;
    color: var(--navy);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

.stat-card .sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

/* Reserved for a stat card reporting something wrong. */
.stat-card.alert { border-top-color: var(--red); }
.stat-card.alert .value { color: var(--red); }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rule);
    border-radius: 6px;
}

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

table.data thead th {
    background: var(--navy);
    color: var(--paper);
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 12px;
    white-space: nowrap;
}

table.data tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

table.data tbody tr:nth-child(even) { background: var(--paper); }

table.data tbody tr:hover { background: #eaf0f8; }

table.data td.right, table.data th.right { text-align: right; }
table.data td.mono { font-variant-numeric: tabular-nums; }

table.data .row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* ==========================================================================
   Pills / status chips
   ========================================================================== */

.pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--rule);
    background: var(--paper);
    color: var(--navy);
    white-space: nowrap;
}

.pill-live {
    background: var(--navy);
    color: var(--paper);
    border-color: var(--navy);
}

.pill-accent {
    background: var(--yellow);
    color: var(--ink);
    border-color: var(--gold-dark);
}

.pill-muted {
    background: #fff;
    color: var(--muted);
}

/* True alerts only: failed conformance, integrity incidents. */
.pill-alert {
    background: #f9eaea;
    color: var(--red);
    border-color: var(--red);
}

/* ==========================================================================
   Charts (hand-rolled SVG -- see js/charts.js)
   ========================================================================== */

.chart {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart text {
    font-family: var(--ui);
    font-size: 11px;
    fill: var(--muted);
}

.chart .axis-line,
.chart .grid-line {
    stroke: var(--rule);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.chart-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--muted);
    margin-top: 10px;
}

.chart-legend .key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.chart-legend .swatch {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    display: inline-block;
}

/* ==========================================================================
   Misc layout helpers
   ========================================================================== */

.toolbar {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.toolbar .field { margin-bottom: 0; }

.toolbar .field input,
.toolbar .field select { width: auto; min-width: 150px; }

.kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 18px;
    font-size: 14px;
}

.kv dt {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    padding-top: 2px;
}

.kv dd { margin: 0; }

.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.tabs button {
    font: 600 13px/1 var(--ui);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--muted);
}

.tabs button:hover { color: var(--navy); }

.tabs button.active {
    color: var(--navy);
    border-bottom-color: var(--yellow);
}

.form-error,
.inline-error {
    color: var(--red);
    font-size: 13px;
    margin: 10px 0 0;
}

.form-ok {
    color: var(--navy);
    font-size: 13px;
    margin: 10px 0 0;
}

.loading {
    padding: 32px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

/* Editorial prose: About, docs. Georgia is correct here. */
.prose {
    font-family: var(--display);
    font-size: 16px;
    line-height: 1.65;
    max-width: 68ch;
    color: var(--ink);
}

.prose h2, .prose h3 { font-family: var(--ui); margin: 24px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 22px; }

.dark-surface .prose { color: #fff; }

.wizard-step {
    border-left: 3px solid var(--rule);
    padding: 0 0 0 18px;
    margin-bottom: 24px;
}

.wizard-step.current { border-left-color: var(--yellow); }
.wizard-step.done { border-left-color: var(--navy-mid); }

.wizard-step .step-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 8px;
}

.drop-zone {
    border: 2px dashed var(--rule);
    border-radius: 6px;
    padding: 28px;
    text-align: center;
    color: var(--muted);
    background: var(--paper);
    cursor: pointer;
}

.drop-zone.over {
    border-color: var(--gold-dark);
    background: #fdf6e0;
    color: var(--ink);
}

/* Modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(14, 36, 64, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    z-index: 50;
}

.modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow-pop);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-body { padding: 20px; }

.modal-foot {
    padding: 14px 20px;
    border-top: 1px solid var(--rule);
    background: var(--paper);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.thumb {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 3px;
}

@media (max-width: 860px) {
    .shell { grid-template-columns: 1fr; }

    .sidebar {
        position: static;
        height: auto;
    }

    .sidebar .nav { display: flex; flex-wrap: wrap; padding: 6px; }
    .sidebar .nav a { border-left: none; border-bottom: 3px solid transparent; }
    .sidebar .nav a.active { border-left: none; border-bottom-color: var(--yellow); }
    .nav-group-label { display: none; }
    .view { padding: 18px 16px 32px; }
    .banner, .portal-footer { padding-left: 16px; padding-right: 16px; }
}