/* Console entry point.
 *
 * The nine imports below are ported unchanged from lobie-engine-cloud-repasse,
 * minus its main.css (roughly 350 of its 468 lines are repasse-specific
 * widgets: .saldo-*, .entries-*, .totals-*, .import-*) and minus lists.css,
 * which styles file-upload lists this console has none of.
 *
 * One rename on the way over: --accent-gold is #1565c0 (blue) in light mode
 * and gold only in dark. Inheriting a token whose name is wrong half the time
 * is inheriting debt for free, so it is --accent-primary here.
 *
 * No build step and no npm, exactly as over there. @import is resolved by the
 * browser; the cost is a handful of extra requests on first load, against a
 * toolchain nobody has to install.
 */

@import url('themes.css');
@import url('base.css');
@import url('forms.css');
@import url('buttons.css');
@import url('cards.css');
@import url('status.css');
@import url('modals.css');
@import url('tables.css');
@import url('login.css');

/* ── console shell ─────────────────────────────────────────────────────── */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

/* ── navigation ────────────────────────────────────────────────────────── */

.app-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.app-nav .nav-brand {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin-right: 1.25rem;
    white-space: nowrap;
}

.app-nav a {
    padding: 0.4rem 0.7rem;
    border-radius: 4px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.app-nav a:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.app-nav a[aria-current="page"] {
    background: var(--accent-primary);
    color: #fff;
}

/* ── footer ────────────────────────────────────────────────────────────── */

.app-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.app-footer form { margin: 0; }

/* ── the environment strip ─────────────────────────────────────────────── */

/* Loud on purpose. This console can mint Payment Links a customer receives
 * and write another system's PMS, so which account it is pointed at must be
 * readable without hunting for it. */
.env-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    padding: 0.5rem 0.85rem;
    margin-bottom: 1.25rem;
    border-radius: 4px;
    font-size: 0.85rem;
    background: var(--bg-secondary);
    border-left: 3px solid var(--text-muted);
}

.env-strip.is-live {
    border-left-color: var(--accent-danger);
    background: color-mix(in srgb, var(--accent-danger) 8%, var(--bg-secondary));
}

.env-strip .env-flag { font-weight: 600; }

/* ── dashboard tiles ───────────────────────────────────────────────────── */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.tile dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.3rem 1rem;
    margin: 0;
}

.tile dt { color: var(--text-secondary); font-size: 0.88rem; }
.tile dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }

.tile dd.is-good { color: var(--accent-success); }
.tile dd.is-bad { color: var(--accent-danger); }
.tile dd.is-neutral { color: var(--text-muted); font-weight: 400; }

/* ── chunked run progress ──────────────────────────────────────────────── */

.phase-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1rem 0;
}

.phase-chip {
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    font-size: 0.82rem;
    color: var(--text-muted);
}

.phase-chip[data-state="active"] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    font-weight: 600;
}

.phase-chip[data-state="done"] {
    border-color: var(--accent-success);
    color: var(--accent-success);
}

.run-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-secondary);
    overflow: hidden;
    margin: 0.5rem 0;
}

.run-progress > div {
    height: 100%;
    background: var(--accent-primary);
    transition: width 0.25s ease;
}

/* Monospace, scrollable, and bounded: a long ingest emits a lot of lines and
 * the page must not grow without limit. */
.run-log {
    max-height: 320px;
    overflow-y: auto;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    background: var(--bg-secondary);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.run-log .is-error { color: var(--accent-danger); }
.run-log .is-warn { color: var(--accent-warning); }
.run-log .is-done { color: var(--accent-success); }

/* ── destructive-action scaffolding ────────────────────────────────────── */

/* The standing banner on the settlement page. It is present whether or not
 * writes are enabled; only its severity changes, so the operator never has to
 * infer the state from the absence of a warning. */
.danger-banner {
    padding: 0.85rem 1rem;
    border-radius: 4px;
    margin-bottom: 1.25rem;
    border-left: 4px solid var(--accent-danger);
    background: color-mix(in srgb, var(--accent-danger) 10%, var(--bg-secondary));
    color: var(--text-primary);
}

.danger-banner.is-disarmed {
    border-left-color: var(--accent-success);
    background: color-mix(in srgb, var(--accent-success) 10%, var(--bg-secondary));
}

.danger-banner strong { display: block; margin-bottom: 0.2rem; }

/* Recomputed on every filter change, and quoted verbatim by the confirm()
 * dialog — the operator must never be asked to confirm something phrased
 * differently from what they were shown. */
.scope-hint {
    padding: 0.6rem 0.85rem;
    border-radius: 4px;
    background: var(--bg-secondary);
    font-size: 0.9rem;
    margin: 0.75rem 0;
}

.scope-hint .scope-count { font-weight: 700; }
.scope-hint .scope-warn { display: block; margin-top: 0.3rem; color: var(--accent-warning); }

/* FROM → TO cells in the settlement plan. */
.change-cell .from { color: var(--text-muted); text-decoration: line-through; }
.change-cell .to { color: var(--accent-primary); font-weight: 600; }

.badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.badge.is-head { border-color: var(--accent-primary); color: var(--accent-primary); }
.badge.is-danger { border-color: var(--accent-danger); color: var(--accent-danger); }

/* ── misc ──────────────────────────────────────────────────────────────── */

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.filter-row > div { display: flex; flex-direction: column; gap: 0.2rem; }
.filter-row label { font-size: 0.8rem; color: var(--text-secondary); }

.hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.table-scroll { overflow-x: auto; }

[hidden] { display: none !important; }