/* console.css : Impeccable app surfaces (2026-10-13 canon rebuild)
 *
 * Shared stylesheet for the Operate-mode surfaces: admin console (update.php),
 * customer portal (dma_portal.php). The customer loader dashboard
 * (dashboard.html) ships self-contained but uses the same tokens.
 *
 * Token authority: DESIGN.md ("The Canon, Played Straight"). Ground navy
 * #0A0F1E, panel navy #101728, hairlines rgba(148,178,230,0.14), one brand
 * accent #3B82F6, action blues #2563EB / #1D4ED8 on buttons, honest status
 * hues only (working green / upcoming amber / paused slate). Orbitron for
 * identity and labels, Rajdhani for prose and UI text. No gradients, no
 * purple, no particles; the mark's drop-shadow is the only colored glow.
 *
 * The first block mirrors DESIGN.md. The "app surfaces" block adds the tokens
 * the Operate components need (sidebar, topbar, tables, filter chips, mono
 * numerals, ops danger) and is the record mirrored in DESIGN.md's appendix.
 */

:root {
    /* canon colors (DESIGN.md) */
    --bg-0: #0A0F1E;                       /* ground navy */
    --bg-1: #101728;                       /* panel navy */
    --bg-2: #0C1224;                       /* raised navy */
    --bg-deep: #080D1A;                    /* deep navy (footer/sidebar base) */
    --line: rgba(148, 178, 230, 0.14);     /* hairline */
    --line-strong: rgba(148, 178, 230, 0.28);
    --text: #EDF2F7;                       /* ink */
    --text-dim: #9FB0C7;                   /* dim ink */
    --text-faint: #94A3B8;                 /* idle slate (do not darken) */
    --accent: #3B82F6;                     /* the one accent */
    --accent-fill: #2563EB;                /* action blue (buttons) */
    --accent-fill-hover: #1D4ED8;
    --accent-soft: rgba(59, 130, 246, 0.10);
    --accent-line: rgba(59, 130, 246, 0.35);
    --ok: #34D399;                         /* working */
    --ok-soft: rgba(52, 211, 153, 0.10);
    --warn: #FBBF24;                       /* upcoming */
    --warn-soft: rgba(251, 191, 36, 0.08);
    --idle: #94A3B8;                       /* paused */
    --idle-soft: rgba(148, 163, 184, 0.10);

    /* canon shapes */
    --r: 8px;          /* panels */
    --r-sm: 4px;       /* buttons, inputs */
    --r-pill: 9999px;  /* status pills */

    /* canon type (Google Fonts already in use on the storefront; sans fallbacks) */
    --font-display: 'Orbitron', sans-serif;   /* identity, labels, headings */
    --font-sans: 'Rajdhani', sans-serif;      /* prose and UI text */

    /* canon elevation: neutral near-black navy only */
    --shadow-panel: 0 8px 24px rgba(2, 6, 18, 0.55);
    --shadow-btn: 0 6px 18px rgba(2, 6, 18, 0.5);

    /* spacing rhythm */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    /* app surfaces (added for the Operate-mode shell; mirrored in DESIGN.md) */
    --bg-hover: #141D33;                                  /* hover row / nav tint base */
    --mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", Menlo, monospace; /* ids, hashes, numerals */
    --danger: #F87171;                                    /* ops destructive (admin only) */
    --danger-soft: rgba(248, 113, 113, 0.10);
    --danger-line: rgba(248, 113, 113, 0.38);
    --sidebar-w: 240px;
    --sidebar-rail-w: 60px;
    --topbar-h: 56px;
    --motion: 200ms;                                      /* state motion 150-250ms */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body.console {
    font-family: var(--font-sans);
    background: var(--bg-0);
    color: var(--text);
    font-size: 15px;
    line-height: 1.45;
    min-height: 100vh;
}

::selection { background: var(--accent-line); color: var(--text); }

/* focus: 2px accent outline offset, never removed */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.mono, table.data td.num, table.data td.id, table.data code { font-family: var(--mono); }
table.data td.num, table.data td.id, table.data code { font-size: 12.5px; }

/* ---------------------------------------------------------------- layout */
.console-shell { max-width: 1280px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-6); }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--sp-5);
    flex-wrap: wrap;
}
.topbar .brand-name {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text);
    text-transform: uppercase;
}
.topbar .brand-name .accent { color: var(--accent); }
.topbar .brand-sub { font-size: 13px; color: var(--text-faint); letter-spacing: 0.025em; }
.topbar .topbar-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* ---------------------------------------------------------------- panels */
.panel {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-panel);
}
.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    border-bottom: 1px solid var(--line);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}
.panel-head h2 {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
}
.panel-head h2::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: var(--sp-2);
    vertical-align: 1px;
}
.panel-head .panel-note { font-size: 13px; color: var(--text-faint); }

.panel h3 {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin: var(--sp-4) 0 var(--sp-2);
}
.panel h3:first-of-type { margin-top: 0; }

.subpanel {
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--sp-4);
}

/* ---------------------------------------------------------------- buttons */
.btn {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.025em;
    white-space: nowrap;
    padding: 10px 20px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--motion) ease, border-color var(--motion) ease, transform 100ms ease;
    text-decoration: none;
    display: inline-block;
    color: var(--text);
    background: transparent;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-accent { background: var(--accent-fill); color: #FFFFFF; border-color: var(--accent-fill); box-shadow: var(--shadow-btn); }
.btn-accent:hover:not(:disabled) { background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }

.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover:not(:disabled) { border-color: var(--accent); background: rgba(59, 130, 246, 0.08); }

.btn-danger { border-color: var(--danger-line); color: var(--danger); background: var(--danger-soft); }
.btn-danger:hover:not(:disabled) { background: rgba(248, 113, 113, 0.16); }

/* ---------------------------------------------------------------- forms */
.field { margin-bottom: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.field label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.field input, .field select {
    background: var(--bg-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    padding: 9px 12px;
    color: var(--text);
    font-size: 15px;
    font-family: var(--font-sans);
    width: 100%;
}
.field input::placeholder { color: var(--text-faint); }
.field input:focus, .field select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}
.field .field-error { color: var(--danger); font-size: 13px; min-height: 15px; }
input[type="file"] { padding: 7px 12px; }

/* ---------------------------------------------------------------- tables */
table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-top: var(--sp-2);
}
table.data th {
    text-align: left;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-faint);
    padding: 6px 10px;
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}
table.data td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--text);
    vertical-align: middle;
}
table.data tr:last-child td { border-bottom: none; }
table.data code { background: var(--bg-2); padding: 2px 6px; border-radius: var(--r-sm); color: var(--text-dim); }
table.data tbody tr:hover td { background: var(--bg-hover); }

/* ---------------------------------------------------------------- pills (status chips) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4.8px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    color: var(--text-dim);
    background: transparent;
    white-space: nowrap;
}
.chip::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.chip.ok    { color: var(--ok);    border-color: rgba(52,211,153,0.4);   background: var(--ok-soft); }
.chip.warn  { color: var(--warn);  border-color: rgba(251,191,36,0.4);   background: var(--warn-soft); }
.chip.err   { color: var(--danger);border-color: var(--danger-line);     background: var(--danger-soft); }
.chip.idle  { color: var(--idle);  border-color: rgba(148,163,184,0.35); background: var(--idle-soft); }
.chip.accent{ color: var(--accent);border-color: var(--accent-line);     background: var(--accent-soft); }

/* ---------------------------------------------------------------- misc */
.empty {
    border: 1px dashed var(--line-strong);
    border-radius: var(--r);
    padding: var(--sp-5);
    text-align: center;
    color: var(--text-faint);
    font-size: 14px;
    background: transparent;
}
.empty strong { color: var(--text-dim); display: block; margin-bottom: 4px; font-size: 15px; }

.stat-strip { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.stat {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--bg-1);
    box-shadow: var(--shadow-panel);
    padding: var(--sp-3) var(--sp-4);
    min-width: 140px;
}
.stat .stat-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.stat .stat-value { font-size: 20px; font-weight: 700; color: var(--text); font-family: var(--mono); }

.info-row {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.info-row:last-child { border-bottom: none; }
.info-row .k { color: var(--text-dim); }
.info-row .v { color: var(--text); font-family: var(--mono); font-size: 12.5px; }

.log {
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--sp-3) var(--sp-4);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.7;
    max-height: 260px;
    overflow-y: auto;
    color: var(--text-dim);
}
.log div { margin: 1px 0; }

.note {
    border-left: 2px solid var(--accent-line);
    background: var(--accent-soft);
    padding: var(--sp-3) var(--sp-4);
    border-radius: 0 var(--r) var(--r) 0;
    color: var(--text-dim);
    font-size: 14px;
    margin: var(--sp-3) 0;
}
.note strong { color: var(--text); display: block; margin-bottom: 2px; }

/* slim scrollbars, tinted */
.log::-webkit-scrollbar, .scroll-y::-webkit-scrollbar { width: 8px; }
.log::-webkit-scrollbar-track, .scroll-y::-webkit-scrollbar-track { background: var(--bg-1); }
.log::-webkit-scrollbar-thumb, .scroll-y::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-sm); }
.log::-webkit-scrollbar-thumb:hover, .scroll-y::-webkit-scrollbar-thumb:hover { background: var(--accent-line); }

/* ============================================================ app surfaces */
/* Sidebar app shell (update.php). */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg-deep);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 40;
    transition: width var(--motion) ease, transform var(--motion) ease;
}
.app-sidebar .sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--line);
}
.app-sidebar .sidebar-brand img { width: 28px; height: 28px; }
.app-sidebar .sidebar-brand .brand-name {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--text);
    text-transform: uppercase;
    white-space: nowrap;
}
.app-sidebar .sidebar-nav { flex: 1; padding: var(--sp-3) var(--sp-2); overflow-y: auto; }
.app-sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 9px 12px;
    margin-bottom: 2px;
    border-radius: var(--r-sm);
    border-left: 2px solid transparent;
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.025em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--motion) ease, color var(--motion) ease, border-color var(--motion) ease;
}
.app-sidebar .nav-item:hover { background: var(--bg-hover); color: var(--text); }
.app-sidebar .nav-item.active {
    border-left-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}
.app-sidebar .nav-item .nav-icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-sidebar .nav-item .nav-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-sidebar .sidebar-foot {
    border-top: 1px solid var(--line);
    padding: var(--sp-3) var(--sp-4);
    font-size: 13px;
    color: var(--text-faint);
}

.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 0 var(--sp-5);
    border-bottom: 1px solid var(--line);
    background: var(--bg-1);
    position: sticky;
    top: 0;
    z-index: 30;
}
.app-topbar .view-title { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.app-topbar .view-note { font-size: 13px; color: var(--text-faint); }
.app-topbar .topbar-actions { display: flex; gap: var(--sp-2); }
.app-content { padding: var(--sp-5); max-width: 1280px; width: 100%; }

/* hash-routed views */
.view { display: none; }
.view.active { display: block; }

/* stat cards */
.stat-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow-panel);
    padding: var(--sp-4);
}
.stat-card .stat-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-faint);
}
.stat-card .stat-value { font-family: var(--mono); font-size: 24px; font-weight: 700; color: var(--text); margin-top: 4px; }
.stat-card .stat-sub { font-size: 13px; color: var(--text-faint); margin-top: 2px; }

/* filter chips (logs view, tables) */
.filter-chip {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-strong);
    background: transparent;
    color: var(--text-dim);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.025em;
    cursor: pointer;
    transition: border-color var(--motion) ease, color var(--motion) ease, background var(--motion) ease;
}
.filter-chip:hover { border-color: var(--accent); color: var(--text); }
.filter-chip.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* skeleton loading (operate: skeletons, not spinners) */
.skeleton {
    border-radius: var(--r-sm);
    background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-hover) 50%, var(--bg-2) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    min-height: 14px;
}
@keyframes skeleton-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* inline confirm (destructive actions; never a bare js confirm) */
.confirm-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    border: 1px solid var(--danger-line);
    background: var(--danger-soft);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text);
}
.confirm-inline input {
    background: var(--bg-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    padding: 5px 8px;
    font-size: 13px;
    width: 130px;
    font-family: var(--font-sans);
}

/* detail expand (logs JSON) */
.json-detail {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-dim);
    background: var(--bg-deep);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: var(--sp-2) var(--sp-3);
    white-space: pre-wrap;
    word-break: break-all;
}

/* sidebar responsive: icon rail < 1024px, hamburger < 768px */
.sidebar-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    width: 36px; height: 36px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.sidebar-toggle svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }

@media (max-width: 1023px) {
    .app-sidebar { width: var(--sidebar-rail-w); }
    .app-sidebar .brand-name, .app-sidebar .nav-item span.nav-label, .app-sidebar .sidebar-foot .foot-text { display: none; }
    .app-sidebar .nav-item { justify-content: center; padding: 10px 6px; border-left: none; border-radius: var(--r-sm); }
    .app-sidebar .nav-item.active { border-left: none; box-shadow: inset 2px 0 0 var(--accent); }
}
@media (max-width: 767px) {
    .sidebar-toggle { display: inline-flex; }
    .app-sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        transform: translateX(-100%);
        width: var(--sidebar-w);
    }
    .app-sidebar.open { transform: translateX(0); }
    .app-sidebar .brand-name, .app-sidebar .nav-item span.nav-label, .app-sidebar .sidebar-foot .foot-text { display: inline; }
    .app-sidebar .nav-item { justify-content: flex-start; padding: 9px 12px; }
    .app-content { padding: var(--sp-4) var(--sp-3); }
}

/* reduced motion: final states immediately, no choreography */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .skeleton { animation: none; background: var(--bg-2); }
}

@media (max-width: 720px) {
    .console-shell { padding: var(--sp-3) var(--sp-2) var(--sp-5); }
    .panel { padding: var(--sp-3) var(--sp-4); }
}