/* AgroLink Platform-ops — app shell + component styling (A1.6, shared DARK theme).
   Tokens: css/tokens.css (synced from apps/shared/tokens). Radzen bridge: css/agrolink-radzen.css.
   The showcase admin surface is a desktop full-bleed layout: fixed left sidebar + main pane, no
   device frame (PO-SH-016). Flat / border-driven — shadows are reserved for dialogs. */

html, body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--al-font-body);
    font-size: var(--al-text-body-m);
    line-height: var(--al-lh-body-m);
    background: var(--al-bg-0);
    color: var(--al-ink-1);
}

/* --- Shell: sidebar + main (desktop full-bleed) --------------------------------- */
.al-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "sidebar header" "sidebar main";
    min-height: 100vh;
}

.al-header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--al-space-4);
    padding: var(--al-space-4) var(--al-space-6);
    background: var(--al-bg-1);
    border-bottom: 1px solid var(--al-line-1);
}

.al-header-titles { display: flex; flex-direction: column; gap: 2px; }
.al-header-eyebrow {
    font-size: var(--al-text-label);
    letter-spacing: var(--al-ls-label);
    text-transform: uppercase;
    color: var(--al-ink-3);
}
.al-header-context { font-size: var(--al-text-body-s); color: var(--al-ink-2); }

.al-header-right { display: inline-flex; align-items: center; gap: var(--al-space-4); }
.al-user { font-size: var(--al-text-body-s); color: var(--al-ink-2); }
.al-user strong { color: var(--al-ink-1); font-weight: var(--al-weight-medium); }

/* Environment badge — amber = simulated (CLAUDE.md §4: simulated money is always badged). */
.al-env-badge {
    background: var(--al-sim-bg);
    color: var(--al-sim-fg);
    border: 1px solid var(--al-sim-line);
    border-radius: var(--al-radius-xs);
    padding: 3px 8px;
    font-family: var(--al-font-mono);
    font-size: var(--al-text-data-s);
    letter-spacing: var(--al-ls-data-s);
    text-transform: uppercase;
    white-space: nowrap;
}

/* --- Sidebar ------------------------------------------------------------------- */
.al-sidebar {
    grid-area: sidebar;
    background: var(--al-bg-1);
    border-right: 1px solid var(--al-line-1);
    padding: var(--al-space-5) 0;
    display: flex;
    flex-direction: column;
    gap: var(--al-space-2);
    overflow-y: auto;
}
.al-sidebar-brand {
    padding: 0 var(--al-space-6) var(--al-space-5);
    font-family: var(--al-font-display);
    font-size: var(--al-text-serif-card);
    color: var(--al-ink-0);
    border-bottom: 1px solid var(--al-line-1);
    margin-bottom: var(--al-space-3);
}
.al-nav-section {
    padding: var(--al-space-4) var(--al-space-6) var(--al-space-2);
    font-size: var(--al-text-label);
    letter-spacing: var(--al-ls-label);
    text-transform: uppercase;
    color: var(--al-ink-3);
}
.al-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--al-space-3);
    padding: var(--al-space-3) var(--al-space-6);
    color: var(--al-ink-1);
    text-decoration: none;
    font-size: var(--al-text-body-m);
    border-left: 2px solid transparent;
    cursor: pointer;
}
.al-nav-item:hover { background: var(--al-bg-2); color: var(--al-ink-0); }
.al-nav-item.active {
    background: var(--al-signal-tint);
    border-left-color: var(--al-signal);
    color: var(--al-ink-0);
}
.al-nav-item.disabled { color: var(--al-ink-3); cursor: default; }
.al-nav-item.disabled:hover { background: transparent; }

.al-nav-badge {
    font-family: var(--al-font-mono);
    font-size: var(--al-text-data-s);
    letter-spacing: var(--al-ls-data-s);
    color: var(--al-ink-2);
    background: var(--al-bg-3);
    border-radius: var(--al-radius-xs);
    padding: 1px 6px;
    min-width: 14px;
    text-align: center;
}
.al-nav-badge.soon {
    color: var(--al-ink-3);
    background: transparent;
    border: 1px solid var(--al-line-2);
    text-transform: uppercase;
}

/* --- Main content -------------------------------------------------------------- */
.al-main { grid-area: main; padding: var(--al-space-7) var(--al-space-8); overflow-x: auto; }

.al-page-title {
    font-family: var(--al-font-display);
    font-size: var(--al-text-display-s);
    line-height: var(--al-lh-display-s);
    color: var(--al-ink-0);
    margin: 0 0 var(--al-space-2);
    font-weight: var(--al-weight-normal);
}
.al-page-sub { color: var(--al-ink-2); margin: 0 0 var(--al-space-6); font-size: var(--al-text-body-m); }

.al-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--al-space-4);
    margin-bottom: var(--al-space-5);
    flex-wrap: wrap;
}

.al-card {
    background: var(--al-bg-2);
    border: 1px solid var(--al-line-1);
    border-radius: var(--al-radius-lg);
    padding: var(--al-space-6);
}

/* --- Dashboard ----------------------------------------------------------------- */
.al-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--al-space-5); }
.al-stat-row { display: flex; flex-wrap: wrap; gap: var(--al-space-4); margin-top: var(--al-space-3); }
.al-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--al-space-4) var(--al-space-5);
    background: var(--al-bg-1);
    border: 1px solid var(--al-line-1);
    border-radius: var(--al-radius-lg);
    text-decoration: none;
    min-width: 120px;
    flex: 1;
}
.al-stat-tile:hover { border-color: var(--al-signal-line); }
.al-stat-value { font-size: var(--al-text-data-l); color: var(--al-ink-0); }
.al-stat-label { font-size: var(--al-text-label); letter-spacing: var(--al-ls-label); text-transform: uppercase; color: var(--al-ink-3); }

@media (max-width: 900px) { .al-dash-grid { grid-template-columns: 1fr; } }

/* --- Status pills (2px mono uppercase — the showcase status vocabulary) --------- */
.al-pill {
    display: inline-block;
    border-radius: var(--al-radius-xs);
    padding: 1px 7px;
    font-family: var(--al-font-mono);
    font-size: var(--al-text-data-s);
    letter-spacing: var(--al-ls-data-s);
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}
.al-pill-signal { background: var(--al-signal-bg); color: var(--al-signal); border-color: var(--al-signal-line); }
.al-pill-amber  { background: var(--al-amber-bg);  color: var(--al-amber);  border-color: var(--al-amber-line); }
.al-pill-red    { background: var(--al-red-bg);    color: var(--al-red);    border-color: var(--al-red-line); }
.al-pill-cool   { background: var(--al-cool-bg);   color: var(--al-cool);   border-color: var(--al-cool-line); }
.al-pill-muted  { color: var(--al-ink-3); border-color: var(--al-line-2); }

/* Manual-pin attention chip — INFO/BLUE family (operator ruling A1.6): a hand-placed pin is the one
   thing the approver must weigh. Amber is now reserved for simulated money ONLY, so this moves to the
   cool/info family to stay visually distinct from the sim badge (AC4). */
.al-chip-attention {
    display: inline-block;
    background: var(--al-cool-bg);
    color: var(--al-cool);
    border: 1px solid var(--al-cool-line);
    border-radius: var(--al-radius-xs);
    padding: 1px 7px;
    font-family: var(--al-font-mono);
    font-size: var(--al-text-data-s);
    letter-spacing: var(--al-ls-data-s);
    text-transform: uppercase;
}
.al-chip-plain { color: var(--al-ink-3); font-family: var(--al-font-mono); }

/* Farmer-review detail (A1.7): label/value list + compact pillar table. */
.al-detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 16px;
    margin: 0;
}
.al-detail-list dt { color: var(--al-ink-3); font-size: var(--al-text-data-s); text-transform: uppercase; letter-spacing: 0.5px; align-self: center; }
.al-detail-list dd { margin: 0; }
.al-mini-table { border-collapse: collapse; width: 100%; }
.al-mini-table td { padding: 3px 10px 3px 0; border-bottom: 1px solid var(--al-line-2); }
.al-mini-table tr:last-child td { border-bottom: none; }

/* Loan queue + review (A1.8): status filter chips, PO-ORIG-family score tile/pillar bars, timeline. */
.al-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--al-space-4); }
.al-filter-chip {
    background: var(--al-bg-2);
    border: 1px solid var(--al-line-2);
    color: var(--al-ink-2);
    border-radius: 999px;
    padding: 3px 11px;
    font-family: var(--al-font-mono);
    font-size: var(--al-text-data-s);
    letter-spacing: var(--al-ls-data-s);
    text-transform: uppercase;
    cursor: pointer;
}
.al-filter-chip:hover { border-color: var(--al-signal-line); color: var(--al-ink-0); }
.al-filter-chip.active { background: var(--al-signal-tint); border-color: var(--al-signal); color: var(--al-ink-0); }

.al-score-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--al-line-2);
    border-radius: var(--al-radius-lg);
    padding: var(--al-space-5);
    min-width: 130px;
}
.al-score-value { font-family: var(--al-font-mono); font-size: 2.4em; line-height: 1; color: var(--al-ink-0); }

.al-pillar-table { border-collapse: collapse; width: 100%; }
.al-pillar-table td { padding: 4px 10px 4px 0; border-bottom: 1px solid var(--al-line-2); vertical-align: middle; font-size: var(--al-text-body-s); }
.al-pillar-table tr:last-child td { border-bottom: none; }
.al-pillar-bar { position: relative; height: 4px; min-width: 90px; background: var(--al-bg-3); border-radius: 2px; }
.al-pillar-bar > span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 2px; background: var(--al-signal); }

.al-timeline { list-style: none; margin: 0; padding: 0; }
.al-timeline li { display: flex; gap: 10px; padding: 5px 0; align-items: baseline; border-bottom: 1px solid var(--al-line-2); }
.al-timeline li:last-child { border-bottom: none; }
.al-timeline .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--al-line-2); flex: none; align-self: center; }
.al-timeline li.passed .dot { background: var(--al-signal); }
.al-timeline li.current .dot { background: var(--al-signal); box-shadow: var(--al-glow-signal); }
.al-timeline li.current { color: var(--al-ink-0); }
.al-timeline li.rejected .dot { background: var(--al-red); box-shadow: none; }
.al-timeline li.future { color: var(--al-ink-3); }

/* Simulated-money badge (CLAUDE.md §4) — amber, wraps every simulated ₦ amount. */
.al-sim-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--al-font-mono);
    color: var(--al-sim-fg);
}
.al-sim-badge .al-sim-tag {
    font-size: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--al-sim-bg);
    border: 1px solid var(--al-sim-line);
    border-radius: var(--al-radius-xs);
    padding: 0 3px;
}

/* --- Live dot (SignalR) -------------------------------------------------------- */
.al-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--al-text-body-s); color: var(--al-ink-2); }
.al-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--al-ink-3); }
.al-live-dot.connected { background: var(--al-signal); box-shadow: var(--al-glow-signal); }

/* --- States -------------------------------------------------------------------- */
.al-empty {
    padding: var(--al-space-8);
    text-align: center;
    color: var(--al-ink-2);
    border: 1px dashed var(--al-line-2);
    border-radius: var(--al-radius-lg);
    background: var(--al-bg-1);
}
.al-error {
    color: var(--al-red);
    background: var(--al-red-bg);
    border: 1px solid var(--al-red-line);
    border-radius: var(--al-radius-lg);
    padding: var(--al-space-3) var(--al-space-4);
    margin: 0 0 var(--al-space-4);
}
.al-placeholder {
    max-width: 640px;
    color: var(--al-ink-2);
}
.al-placeholder h2 { color: var(--al-ink-0); font-family: var(--al-font-display); font-weight: var(--al-weight-normal); }

/* --- Forms --------------------------------------------------------------------- */
.al-form { display: grid; gap: var(--al-space-4); max-width: 520px; }
.al-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--al-space-4); }
.al-field { display: flex; flex-direction: column; gap: 6px; }
.al-field label { font-size: var(--al-text-label); letter-spacing: var(--al-ls-label); text-transform: uppercase; color: var(--al-ink-3); }
.al-form-actions { display: flex; gap: var(--al-space-3); margin-top: var(--al-space-3); }

/* --- Audit viewer + rail ledger (A1.9): filter grid, server pager, banner, expander ---- */
.al-audit-filters { grid-template-columns: repeat(3, 1fr); max-width: 1100px; margin-bottom: var(--al-space-4); }
@media (max-width: 900px) { .al-audit-filters { grid-template-columns: 1fr; } }

.al-pager { display: flex; align-items: center; gap: var(--al-space-3); margin-top: var(--al-space-4); flex-wrap: wrap; }
.al-pager-status { color: var(--al-ink-2); font-size: var(--al-text-data-s); }
.al-pager-size { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.al-pager-size label { font-size: var(--al-text-label); letter-spacing: var(--al-ls-label); text-transform: uppercase; color: var(--al-ink-3); }

/* The page-level SIM framing (CLAUDE.md §4) — same amber family as .al-sim-badge, banner-sized. */
.al-rail-banner {
    display: flex;
    align-items: baseline;
    gap: 8px;
    background: var(--al-sim-bg);
    border: 1px solid var(--al-sim-line);
    border-radius: var(--al-radius-lg);
    color: var(--al-sim-fg);
    padding: var(--al-space-3) var(--al-space-4);
    margin: 0 0 var(--al-space-4);
}
.al-rail-banner .al-sim-tag {
    font-size: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--al-sim-bg);
    border: 1px solid var(--al-sim-line);
    border-radius: var(--al-radius-xs);
    padding: 0 3px;
    flex: none;
}

.al-audit-detail { display: grid; gap: var(--al-space-3); padding: var(--al-space-2) var(--al-space-3); }
.al-audit-detail-ids { display: flex; flex-wrap: wrap; gap: var(--al-space-4); color: var(--al-ink-3); font-size: var(--al-text-data-s); }
.al-audit-payload {
    margin: 0;
    padding: var(--al-space-3) var(--al-space-4);
    background: var(--al-bg-1);
    border: 1px solid var(--al-line-2);
    border-radius: var(--al-radius-lg);
    font-size: var(--al-text-data-s);
    white-space: pre-wrap;
    word-break: break-word;
}

/* --- Login card (dark) --------------------------------------------------------- */
.al-login-wrap { display: grid; place-items: center; min-height: 100vh; background: var(--al-bg-0); }
.al-login-card {
    background: var(--al-bg-2);
    border: 1px solid var(--al-line-2);
    border-radius: var(--al-radius-lg);
    padding: var(--al-space-8);
    width: min(400px, 92vw);
}
.al-login-card h1 { font-family: var(--al-font-display); font-weight: var(--al-weight-normal); color: var(--al-ink-0); margin-top: 0; }

/* --- Blazor WASM loading + error UI -------------------------------------------- */
.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem; }
.loading-progress circle { fill: none; stroke: var(--al-line-2); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--al-signal); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0; color: var(--al-ink-1); }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }
#blazor-error-ui { background: var(--al-amber-bg); color: var(--al-ink-0); border-top: 1px solid var(--al-amber-line); bottom: 0; box-shadow: var(--al-shadow-frame); display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* --- Responsive: collapse the sidebar to a top strip on narrow viewports -------- */
@media (max-width: 900px) {
    .al-shell { grid-template-columns: 1fr; grid-template-areas: "header" "sidebar" "main"; }
    .al-sidebar { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--al-line-1); }
    .al-form-grid { grid-template-columns: 1fr; }
}