/*
  ShinyWish back office.

  Deliberately NOT the app. The product is warm and secretive; this is a tool for one operator who
  needs to find an account fast and be sure of what a destructive button will do. So: dense rows,
  a neutral slate palette, no ornament, and the one accent reserved for things that change data.
*/

:root {
    color-scheme: light dark;

    --bg: #F1F2F4;
    --surface: #FFFFFF;
    --sunken: #F7F8FA;
    --line: #DCDFE4;
    --text: #1A1D21;
    --muted: #626873;

    /* Plum only as a signature tie back to the product; everything operational is neutral. */
    --accent: #4A3568;
    --accent-ink: #FFFFFF;
    --danger: #A32B32;

    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16181C;
        --surface: #1E2126;
        --sunken: #24282E;
        --line: #333941;
        --text: #ECEFF3;
        --muted: #98A1AE;
        --accent: #B49AE0;
        --accent-ink: #1A1027;
        --danger: #F08A8F;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
}

.boot { padding: 3rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ── Shell ─────────────────────────────────────────────────────────────────────────────────── */

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

.admin-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
}

.admin-brand { font-weight: 650; letter-spacing: -0.01em; padding: 0.85rem 0; }
.admin-brand em { color: var(--muted); font-style: normal; font-weight: 400; }

.admin-header nav { display: flex; gap: 1.25rem; align-self: stretch; }

.admin-header nav a {
    display: flex;
    align-items: center;
    color: var(--muted);
    text-decoration: none;
    font-weight: 550;
    border-bottom: 2px solid transparent;
}

.admin-header nav a.active { color: var(--text); border-bottom-color: var(--accent); }

.admin-user { margin-left: auto; color: var(--muted); display: flex; gap: 0.85rem; align-items: center; }

.admin-main { padding: 1.5rem 1.25rem 4rem; max-width: 1080px; width: 100%; margin: 0 auto; flex: 1; }

.admin-empty { display: grid; place-items: center; min-height: 100vh; padding: 1.5rem; }

.login-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 1.75rem;
    width: min(340px, 100%);
}

.login-card h1 { font-size: 1.05rem; margin: 0 0 0.25rem; }
.login-card .hint { color: var(--muted); margin: 0 0 1.5rem; font-size: 0.86rem; }
.login-card label { display: block; margin-bottom: 1rem; }

/* ── Type ──────────────────────────────────────────────────────────────────────────────────── */

h1 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.015em; margin: 0; }
h2 { font-size: 1rem; font-weight: 650; margin: 2rem 0 0.6rem; }
h3 { font-size: 0.9rem; font-weight: 650; margin: 1.5rem 0 0.5rem; }

.muted { color: var(--muted); }
.error { color: var(--danger); margin: 0.75rem 0; }

.page-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.page-head > :last-child { margin-left: auto; }

/* ── Controls ──────────────────────────────────────────────────────────────────────────────── */

label { font-size: 0.82rem; color: var(--muted); font-weight: 550; }

input, select {
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

h1:focus, h1:focus-visible { outline: none; }

.search { max-width: 380px; margin-bottom: 1rem; }

button {
    font: inherit;
    font-weight: 550;
    padding: 0.45rem 0.85rem;
    min-height: 34px;
    border-radius: 6px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: transparent; }
button.linkish { border: none; background: none; color: var(--accent); padding: 0.2rem; min-height: 0; }
button.linkish.danger { color: var(--danger); }
button:disabled { opacity: .45; cursor: default; }

.actions { display: flex; gap: 0.6rem; margin: 1.25rem 0; }

/* ── Tables: the back office's real interface ──────────────────────────────────────────────── */

table.grid {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

table.grid th, table.grid td {
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--line);
}

table.grid th {
    font-size: 0.76rem;
    color: var(--muted);
    font-weight: 600;
    background: var(--sunken);
}

table.grid tbody tr:last-child td { border-bottom: none; }
table.grid tr.clickable { cursor: pointer; }
table.grid tr.clickable:hover { background: var(--sunken); }

/* Counts line up so an outlier is visible without reading every row. */
table.grid .num { text-align: right; font-family: var(--num); font-size: 0.85rem; }
table.grid .email { color: var(--muted); }

.row-actions { display: flex; gap: 0.85rem; justify-content: flex-end; }

/* State, said in words rather than colour alone. */
.state { font-size: 0.78rem; font-weight: 600; }
.state.ok { color: var(--muted); }
.state.none { color: var(--danger); }

.candidates { list-style: none; padding: 0; margin: 0.5rem 0 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); max-width: 520px; }
.candidates li { display: flex; align-items: center; gap: 1rem; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--line); }
.candidates li:last-child { border-bottom: none; }
.candidates li > :first-child { flex: 1; }
.candidates em { color: var(--muted); font-style: normal; margin-left: 0.5rem; }

.add-member input { max-width: 380px; }

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    padding: 0.7rem 1.1rem;
    background: var(--danger);
    color: #FFF;
}


/* --- AI requests ---------------------------------------------------------------------------- */

.ai-totals { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 0 0 1rem; color: var(--muted); font-family: var(--num); font-size: 0.85rem; }
.ai-totals strong { color: var(--text); }
table.grid.ai-facts th { width: 11rem; text-align: left; vertical-align: top; }
.ai-role { margin: 1.25rem 0 0.35rem; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ai-text {
    margin: 0;
    padding: 0.75rem 1rem;
    max-height: 36rem;
    overflow: auto;
    background: var(--sunken);
    border: 1px solid var(--line);
    border-radius: 6px;
    font-family: var(--num);
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.ai-error { color: var(--danger); }