/* ============================================================================
   EFA admin console — base styles (The Quiet Ledger, night shift).
   The same ledger vocabulary as the portal, translated to a dark operations
   room built from the ink hue family. Two-tone rule holds: cyan #00b2e4
   speaks for the brand (links, active, marks) — and on dark surfaces the
   true brand cyan is itself text-safe (≥ 6.8:1), a luxury the light portal
   cannot afford — while bright wheat #ffeaa2 speaks for the operator
   (buttons, actionable) and always carries near-black ink (Dark Ink rule).
   Numbers are tabular; nothing moves unless the operator acted.
   ========================================================================== */

:root {
    color-scheme: dark;
    /* Ink */
    --ink: #dce6ec;
    --ink-soft: #93a6b1;          /* secondary labels only — never body copy or numbers */
    /* Surfaces (ground below, panels above, inputs inset) */
    --ground: #0d1317;
    --surface: #151d23;
    --inset: #10181d;
    --line: #26323a;
    --line-strong: #3a4a55;
    --row-hover: #1a252c;
    /* Brand (cyan) */
    --brand: #00b2e4;
    --brand-deep: #35c3ea;        /* text-safe cyan on dark: links, focus rings (8.2:1 on surface) */
    --brand-tint: #0c2a36;
    /* Action (wheat — identical to the portal: the operator's color, day or night) */
    --act: #ffeaa2;
    --act-hover: #ffe27d;
    --act-active: #f8d95e;
    --act-border: #e2c25e;
    /* Functional roles (dark-tuned, same meanings as the portal) */
    --gain: #5ac48e;
    --loss: #ef8875;
    --ok-bg: #10281c;
    --ok-ink: #7fd7a4;
    --warn-bg: #331f1a;
    --warn-ink: #f0a894;
    /* Spacing scale (4pt) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    /* Shape */
    --radius: 8px;
    --radius-sm: 6px;
    /* Z scale */
    --z-nav: 30;
    --z-mobile-bar: 20;
}

* { box-sizing: border-box; }

html { height: 100%; scrollbar-color: var(--line-strong) var(--ground); }

body {
    margin: 0;
    min-height: 100%;
    background: var(--ground);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.3; text-wrap: balance; margin: 0 0 var(--space-md); }
h1 { font-size: 1.375rem; font-weight: 700; }
h2 { font-size: 1.125rem; font-weight: 650; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0 0 var(--space-md); max-width: 72ch; }

a { color: var(--brand-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.85em;
    background: var(--inset);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Tabular figures for anything comparable (The Tabular Rule). */
.num { font-variant-numeric: tabular-nums; }
.money.loss { color: var(--loss); }
.money.gain { color: var(--gain); }

:focus-visible {
    outline: 2px solid var(--brand-deep);
    outline-offset: 2px;
    border-radius: 2px;
}

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: var(--space-md); top: -48px;
    background: var(--surface);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    z-index: calc(var(--z-nav) + 1);
    transition: top 150ms ease-out;
}
.skip-link:focus { top: var(--space-md); }

/* ── Brand mark (the logo artwork is all-cyan — dark-ready as shipped) ───── */

.brand { display: block; }

.brand-logo {
    display: block;
    width: 100%;
    max-width: 168px;
    height: auto;
}

/* Lockup label: cyan, justified edge-to-edge under the wordmark — the
   portal lockup with the console wording, so an open admin tab is
   unmistakable next to a portal tab. */
.brand-sub {
    display: block;
    width: 100%;
    max-width: 168px;
    margin-top: 7px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand);
    text-align: justify;
    text-align-last: justify;
}
:lang(en) .brand-sub {
    text-justify: inter-character;
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* ── App shell ───────────────────────────────────────────────────────────── */

.shell { display: flex; min-height: 100vh; }

.sidebar {
    flex: none;
    width: 216px;
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar .brand { padding: var(--space-lg) var(--space-lg) var(--space-xl); }

.nav-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.nav-list a {
    display: block;
    padding: 8px var(--space-lg);
    color: var(--ink-soft);
    text-decoration: none;
    font-weight: 550;
    font-size: 0.9375rem;
    transition: background 150ms ease-out, color 150ms ease-out;
}
.nav-list a:hover { background: var(--ground); color: var(--ink); }
.nav-list a.active { background: var(--brand-tint); color: var(--ink); font-weight: 650; }

.sidebar-foot { padding: var(--space-md) var(--space-lg) var(--space-lg); border-top: 1px solid var(--line); }
.sidebar-user { margin: 0 0 var(--space-sm); font-size: 0.875rem; font-weight: 650; overflow-wrap: anywhere; }
.sidebar-foot form { margin: 0 0 var(--space-xs); }

.linklike {
    background: none;
    border: 0;
    padding: 0;
    color: var(--brand-deep);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.linklike:hover { text-decoration-thickness: 2px; }

.content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-xl) var(--space-xl) var(--space-lg);
    max-width: 1600px;
}

.content-foot {
    margin-top: auto;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--line);
}
.content-foot .copyright {
    margin: 0;
    max-width: none;
    font-size: 0.8125rem;
    color: var(--ink-soft);
    text-align: center;
}

/* Mobile top bar (hidden on desktop). */
.mobile-bar {
    display: none;
    position: sticky;
    top: 0;
    z-index: var(--z-mobile-bar);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 10px var(--space-md);
    align-items: center;
    justify-content: space-between;
}
.brand-small { display: flex; align-items: center; }
.brand-small .brand-logo { width: 119px; }

.mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    color: var(--ink);
    cursor: pointer;
}
.mobile-nav-toggle .menu-icon { width: 22px; height: 22px; display: block; }

/* ── Page head & panels ──────────────────────────────────────────────────── */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.page-head h1 { margin: 0; }
.page-head h1:lang(en) { text-transform: uppercase; }
/* Detail titles carry data values (usernames); never restyle those. */
.page-head h1 .title-data { text-transform: none; }

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}
.panel-head h2 { margin: 0; }
.panel-lead { color: var(--ink); font-size: 0.9375rem; }
.panel-empty { padding: var(--space-xl) 0; text-align: center; color: var(--ink-soft); }
.panel-empty p { margin: 0 auto; }

.fineprint { font-size: 0.8125rem; color: var(--ink-soft); max-width: none; }

/* ── Notices ─────────────────────────────────────────────────────────────── */

.notice {
    border-radius: var(--radius-sm);
    padding: 12px var(--space-md);
    margin-bottom: var(--space-md);
    font-size: 0.9375rem;
    max-width: none;
}
.notice-ok { background: var(--ok-bg); color: var(--ok-ink); }
.notice-warn { background: var(--warn-bg); color: var(--warn-ink); }
.notice .inline-form { display: inline-block; margin-left: var(--space-sm); }
.notice code { background: rgba(13, 19, 23, 0.55); color: inherit; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.button {
    display: inline-block;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 8px 18px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease-out, border-color 150ms ease-out;
}
.button:hover { background: var(--row-hover); }
.button:active { background: var(--line); }

/* Wheat = actionable (the operator's color). Ink text only — never white. */
.button-primary { background: var(--act); border-color: var(--act-border); color: #1c2429; }
.button-primary:hover { background: var(--act-hover); border-color: var(--act-border); }
.button-primary:active { background: var(--act-active); }

.button-danger { border-color: var(--loss); color: var(--loss); }
.button-danger:hover { background: var(--warn-bg); }

.button-quiet { border-color: transparent; color: var(--ink-soft); }
.button-quiet:hover { background: var(--row-hover); color: var(--ink); }

.button-small { padding: 4px 12px; font-size: 0.8125rem; }
.button-block { display: block; width: 100%; }

.button[disabled], .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* ── Forms ───────────────────────────────────────────────────────────────── */

.field { margin-bottom: var(--space-md); min-width: 0; }
.field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 650;
    margin-bottom: var(--space-xs);
}

input[type="text"], input[type="password"], input[type="url"],
input[type="email"], input[type="date"], input[type="month"], select, textarea {
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--ink);
    background: var(--inset);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand-deep);
    box-shadow: 0 0 0 2px var(--brand-tint);
}
input[disabled], select[disabled], textarea[disabled] { background: var(--ground); color: var(--ink-soft); }
::placeholder { color: #7c8f9a; opacity: 1; }

.field-hint { font-size: 0.8125rem; color: var(--ink-soft); margin: var(--space-xs) 0 0; max-width: none; }

.form-actions { display: flex; gap: var(--space-sm); align-items: center; }

/* Shared form grid: related fields side by side, wrapping structurally. */
.builder-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}
.builder-row .field { flex: 1 1 180px; }
.builder-row .field-grow { flex: 2 1 280px; }

.input-code {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.35em;
    font-size: 1.25rem;
    text-align: center;
    max-width: 220px;
}

.inline-form { display: inline; }

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; margin: 0 calc(-1 * var(--space-lg)); padding: 0 var(--space-lg); }

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.5;
}
.data-table th, .data-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.data-table thead th {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--ink-soft);
    border-bottom-color: var(--line-strong);
    white-space: nowrap;
}
.data-table thead th .sort-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}
.data-table thead th .sort-link:hover,
.data-table thead th .sort-link:focus-visible { color: var(--ink); }
.data-table thead th.is-sorted .sort-link { font-weight: 750; color: var(--ink); }
.sort-arrow { width: 9px; height: 7px; flex: none; }
.data-table tbody th { font-weight: 600; }
.data-table tbody tr:hover { background: var(--row-hover); }
.data-table tfoot th, .data-table tfoot td {
    border-top: 2px solid var(--line-strong);
    border-bottom: 0;
    font-weight: 650;
}
.num-col { text-align: right !important; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.row-muted { color: var(--ink-soft); }
.cell-empty { color: var(--ink-soft); }
.cell-note { color: var(--brand-deep); cursor: help; margin-left: 2px; }

.row-action { margin-right: var(--space-sm); font-size: 0.8125rem; white-space: nowrap; }
.actions-col { white-space: nowrap; }
.actions-col .inline-form { margin-right: var(--space-sm); }
.actions-col .linklike { font-size: 0.8125rem; }

/* ── Badges ──────────────────────────────────────────────────────────────── */

.badge {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 650;
    background: #232e35;
    color: var(--ink-soft);
    white-space: nowrap;
}
.badge-active { background: var(--brand-tint); color: var(--brand-deep); }
.badge-gain { background: var(--ok-bg); color: var(--ok-ink); }
.badge-loss { background: var(--warn-bg); color: var(--warn-ink); }
.badge-paused { background: #3a3113; color: #e8c66a; }
.badge-archived { background: #232e35; color: var(--ink-soft); }

/* ── Pagination / tabs / filters ─────────────────────────────────────────── */

.pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    font-size: 0.875rem;
}
.pagination-total { grid-column: 1; margin: 0; color: var(--ink-soft); }

.pagination-links {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    align-items: center;
}
.pager-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 4px 8px;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}
.pager-chevron { width: 1.5em; height: 1.5em; }
.pager-button[aria-disabled="true"] { cursor: default; }
.pager-current {
    background: var(--brand-tint);
    border-color: var(--brand);
    color: var(--brand-deep);
    cursor: default;
}
.pager-current:hover { background: var(--brand-tint); }
.pager-break {
    color: var(--ink-soft);
    padding: 0 2px;
    user-select: none;
}

.table-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}
.table-controls .export-actions { margin-top: 0; }

.per-page-form {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.per-page-form label { font-size: 0.8125rem; color: var(--ink-soft); }
.per-page-form select {
    width: auto;
    padding: 4px 8px;
    font-size: 0.8125rem;
}

.view-tabs { display: flex; gap: var(--space-xs); }
.view-tabs a {
    padding: 6px 14px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 150ms ease-out, color 150ms ease-out;
}
.view-tabs a:hover { background: var(--surface); color: var(--ink); }
.view-tabs a.active { background: var(--brand-tint); color: var(--brand-deep); }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: flex-end;
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-md);
}
.filter-bar .field { margin-bottom: 0; }
.filter-bar .button { margin-bottom: 1px; }

/* Period picker */
.period-picker { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.period-picker a {
    padding: 5px 12px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    transition: background 150ms ease-out, color 150ms ease-out;
}
.period-picker a:hover { background: var(--surface); color: var(--ink); }
.period-picker a.active { background: var(--brand-tint); color: var(--brand-deep); }
.period-custom { display: flex; gap: var(--space-xs); align-items: center; margin-left: var(--space-sm); }
.period-custom label { white-space: nowrap; font-size: 0.8125rem; color: var(--ink-soft); }
.period-custom input[type="date"], .period-custom input[type="month"] { width: auto; padding: 4px 8px; font-size: 0.8125rem; }

/* ── Ledger lead (dashboard / payouts) ───────────────────────────────────── */

.ledger-lead {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    margin-bottom: var(--space-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg) var(--space-2xl);
    align-items: flex-end;
}
.lead-commission { display: flex; flex-direction: column; }
.lead-label { font-size: 0.8125rem; font-weight: 650; color: var(--ink-soft); }
.lead-period { font-weight: 500; }
.lead-value {
    font-size: 2.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.lead-measures {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-xl);
    margin: 0 0 6px;
}
.lead-measures > div { display: flex; flex-direction: column; }
.lead-measures dt { font-size: 0.75rem; font-weight: 650; color: var(--ink-soft); }
.lead-measures dd { margin: 0; font-size: 1.125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.lead-side { max-width: 40ch; }
.lead-side p { margin: 0 0 var(--space-xs); font-size: 0.875rem; }
.lead-note { color: var(--ink-soft); }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .shell { display: block; }
    .mobile-bar { display: flex; }
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: var(--z-nav);
        transform: translateX(-100%);
        transition: transform 200ms ease-out;
        box-shadow: none;
        height: 100dvh;
        overflow-y: auto;
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 0 0 32px rgba(0, 0, 0, 0.65);
    }
    .content { padding: var(--space-md) var(--space-md) var(--space-xl); }
    .panel { padding: var(--space-md); }
    .table-scroll { margin: 0 calc(-1 * var(--space-md)); padding: 0 var(--space-md); }
    .pagination { grid-template-columns: 1fr; justify-items: center; gap: var(--space-sm); }
    .pagination-total, .pagination-links { grid-column: 1; }
    .ledger-lead { gap: var(--space-md) var(--space-lg); }
    .lead-value { font-size: 1.875rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}