/* ==========================================================================
   eeZfi shared theme — navy + seafoam, Space Grotesk / Inter.
   Extracted from the marketing home page (Views/Home/Index.cshtml) so the
   admin + platform pages share one design system. Tweak the palette here and
   every page that links this file updates.

   Scope: Admin/* and platform chrome (SF console, login, signed-out, home
   shells). NOT the per-business chat (eThread) pages — those are themed per
   business via ChatTheme and must stay independent.

   Usage in a page:
     <link rel="stylesheet" href="~/css/eezfi-theme.css" />
   Then drop the page's own palette/font declarations and let these tokens +
   component classes (.btn, .ez-card, .field, .back-link, .pill-tabs, …) apply.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --navy:        #001A2C;
    --navy-2:      #002438;
    --navy-3:      #00314c;
    --seafoam:     #00F5D4;
    --seafoam-ink: #00171F;                       /* text on a seafoam fill */
    --seafoam-dim: rgba(0, 245, 212, 0.14);
    --ink:         #DCEBF2;
    --ink-soft:    rgba(220, 235, 242, 0.62);
    --line:        rgba(0, 245, 212, 0.16);
    --line-strong: rgba(0, 245, 212, 0.40);
    --panel:       linear-gradient(180deg, rgba(0, 49, 76, 0.34), rgba(0, 26, 44, 0));
    --ok:          #00F5D4;
    --err:         #ffb3c1;
    --display:     'Space Grotesk', system-ui, sans-serif;
    --body:        'Inter', system-ui, sans-serif;
    --radius:      12px;
    --radius-lg:   18px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    /* Lock the page horizontally so a hairline overflow can't show a stray, never-moving
       bottom scrollbar (the global ::-webkit-scrollbar styling below makes scrollbars
       classic/always-visible rather than overlay, so even 1px of overflow looks like a
       persistent bar) or a sideways drag on mobile. `clip` is stricter than `hidden` (not a
       scroll container); `hidden` is the fallback. Inner elements that genuinely need
       horizontal scroll (wide tables, code snippets) keep their own overflow-x:auto
       containers — this only removes page-level horizontal scroll. */
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
    background: var(--navy);
    color: var(--ink);
    font-family: var(--body);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin: 0;
}

a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Layout shell ───────────────────────────────────────────────────────── */
.wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 20px 16px 40px;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.title {
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* Bare .btn is the filled (primary) action — that's how the admin pages use
   it. .btn-ghost is the outline/secondary. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--display);
    font-weight: 500;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid transparent;
    background: var(--seafoam);
    color: var(--seafoam-ink);
    box-shadow: 0 6px 22px rgba(0, 245, 212, 0.18);
    transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 245, 212, 0.32); }
.btn[disabled] { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
    box-shadow: none;
}
.btn-ghost:hover {
    background: transparent;
    color: var(--seafoam);
    border-color: var(--seafoam);
    box-shadow: none;
}

/* Small text/link-styled action (used as "Sign out", "Close session", etc.) */
.auth-link {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--seafoam);
    padding: 6px 14px;
    border-radius: 8px;
    font-family: var(--display);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.auth-link:hover { background: var(--seafoam-dim); color: var(--ink); border-color: var(--line-strong); }

.back-link {
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s ease;
}
.back-link:hover { color: var(--seafoam); }

/* ── Cards / panels ─────────────────────────────────────────────────────── */
.ez-card, .editor {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 18px 18px 22px;
}

.hint {
    color: var(--ink-soft);
    font-size: 0.875rem;
    padding: 12px 6px;
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 4px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.75rem; color: var(--ink-soft); }

.field input, .field textarea, .field select,
.ez-input {
    background: rgba(0, 26, 44, 0.55);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--ink);
    font-size: 0.9rem;
    font-family: var(--body);
    outline: none;
    transition: border-color 0.2s ease;
}
.field input:focus, .field textarea:focus, .field select:focus,
.ez-input:focus { border-color: var(--line-strong); }
.field textarea { resize: vertical; min-height: 56px; }

.status-msg { font-size: 0.85rem; min-height: 1.2em; }
.status-msg.ok { color: var(--ok); }
.status-msg.err { color: var(--err); }

/* ── Settings list (link rows) ──────────────────────────────────────────── */
.settings-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.settings-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font-weight: 500;
    font-size: 0.95rem;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.settings-link:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 245, 212, 0.1);
}
.settings-link .chev { color: var(--ink-soft); font-size: 1.1rem; }

/* ── Pill tabs ──────────────────────────────────────────────────────────── */
.pill-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(0, 36, 56, 0.6);
    border: 1px solid var(--line);
    border-radius: 999px;
    margin-bottom: 16px;
}
.pill {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--ink-soft);
    font-family: var(--display);
    font-size: 0.85rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.pill.active { background: var(--seafoam); color: var(--seafoam-ink); font-weight: 600; }

/* ── Search box ─────────────────────────────────────────────────────────── */
.search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 26, 44, 0.55);
    border: 1px solid var(--line);
    border-radius: 999px;
    margin-bottom: 8px;
}
.search:focus-within { border-color: var(--line-strong); }
.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ink);
    font-size: 0.95rem;
    font-family: var(--body);
}
.search-input::placeholder { color: var(--ink-soft); }

/* ── Section label ──────────────────────────────────────────────────────── */
.section-label {
    margin: 18px 0 8px;
    font-family: var(--display);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
}

/* ── Notice / banner ────────────────────────────────────────────────────── */
.banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--seafoam-dim);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.9rem;
    font-weight: 500;
}

[hidden] { display: none !important; }