/*
  GNexus — the shared visual core.

  Every GNexus surface links this: the sign-in page, the customer portal,
  the vendor console, and any business module that comes later. It is
  deliberately NOT a component library — no widgets, no markup, no
  behaviour. Tokens and primitives only.

  That restraint is on purpose. Every app built so far is a low-density
  admin screen, and the next consumer is a dense, keyboard-driven billing
  module. Three similar examples are one example three times; extracting a
  component API from them would be designing in the abstract, which is the
  mistake ADR 0003 avoided by deferring RBAC until something real needed it.
  Components wait for that fourth, dissimilar consumer.

  Why sharing this matters more than tidiness: a person crosses from
  GPass.Auth to GPass.Portal in a single flow, and a change of clothes
  halfway through reads as a change of SITE. That is precisely the feeling
  a phishing page trades on, so "these apps look like one system" is a
  security property, not a preference. Three separately-editable copies
  quietly erode it.

  No CSS framework, and no third-party component library anywhere in this
  project — a standing rule.

  Layout is NOT here. GPass.Auth is one centred card; the Portal and Console
  are an app shell. Forcing one on the other would break it, so each app
  owns its own layout and the admin shell lives in gnexus-admin.css.
*/

/* ---- tokens ----------------------------------------------------------- */

:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --border: #dfe3e8;
    --text: #1a1d21;
    --muted: #5c6570;
    /* Teal. The one place the platform's colour is decided — every app
       reads it from here, so this line changes GPass.Auth, the Portal and
       GHour together, which is the whole reason the token exists.

       #0f766e carries white text at 5.5:1, comfortably past AA. That
       matters more than the hue: --accent is the button FILL and the
       focus ring, so a prettier, lighter teal would quietly make every
       primary button unreadable. */
    --accent: #0f766e;
    --accent-text: #ffffff;

    /* The app bar. Its own token rather than --accent, because a bar is a
       LARGE flat area: the accent is tuned to carry white text on a button,
       and dark mode flips it to a bright mint that would be a glaring slab
       across the top of every page. The bar keeps a deep teal in BOTH
       themes, the way an app bar usually does, and the text on it is light
       either way. */
    --bar: #0f766e;
    --bar-text: #ffffff;
    --danger: #b3261e;
    --danger-bg: #fdeceb;
    --ok: #1a7f4b;
    --warn-bg: #fff6e5;
    --warn-text: #7a4b00;
    --radius: 10px;

    /* System fonts. Nothing to download, nothing to block rendering, and
       the sign-in page in particular must never wait on a font server. */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
            Arial, "Noto Sans", sans-serif;

    --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* An app may override --accent to distinguish itself — the console does,
   so that it is never mistaken for the customer-facing Portal in an
   adjacent tab. Everything else should stay put. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16181c;
        --surface: #1e2126;
        --border: #31363d;
        --text: #eceff3;
        --muted: #9aa4b0;
        /* Lighter here, because on a dark surface the light-mode teal is
           the one that fails: --accent is also link text against #16181c.
           --accent-text goes dark to match, since the button fill is now
           the light colour. */
        --accent: #2dd4bf;
        --accent-text: #10131a;

        /* Deeper than the light-mode bar, not lighter: against a dark page
           the bar should recede, and the same #0f766e would glow. */
        --bar: #10504b;
        --bar-text: #eaf6f4;
        --danger: #ffb4ab;
        --danger-bg: #3b1a17;
        --ok: #6ee7a8;
        --warn-bg: #38300f;
        --warn-text: #ffe0a3;
    }
}

/* ---- reset and base --------------------------------------------------- */

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

html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Links were never themed — they were the browser's default blue, and while
   the accent was ALSO blue nobody could tell. Changing the accent to teal is
   what made it visible: a teal page with blue links underneath it.
   `.linkbutton` keeps its own colour, being a class. */
a {
    color: var(--accent);
}

h1 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 0.35rem;
}

h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}

h3 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    margin: 1.5rem 0 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sub { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.95rem; }
.hint { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--muted); }

code {
    font-family: var(--mono);
    font-size: 0.875em;
    padding: 0.1rem 0.3rem;
    background: var(--bg);
    border-radius: 4px;
}

/* ---- surfaces --------------------------------------------------------- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.card.narrow { max-width: 25rem; margin: 4rem auto; }
.card.highlight { border-color: var(--accent); }

/* ---- forms ------------------------------------------------------------ */

label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 1rem 0 0.35rem;
}

/* `input:not([type])` FIRST, and it is the one that matters.
 *
 * Blazor's <InputText> emits NO type attribute unless you pass one, so
 * input[type="text"] never matched it. Every field in the project that was
 * not explicitly a password therefore fell out of this stylesheet and
 * rendered as a raw browser control — a 177px box with an inset border,
 * sitting beside a 350px rounded one on the very same form. Twenty of them,
 * including "Email or phone" on the sign-in page.
 *
 * Fixed here rather than by adding type="text" to twenty call sites: that
 * is a rule nobody can keep, and the twenty-first would look wrong again.
 * The types are listed rather than inverted with :not() so that checkboxes,
 * radios, files and buttons keep their own appearance. */
input:not([type]),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
    width: 100%;
    padding: 0.65rem 0.75rem;
    font: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* Never remove this without replacing it. Keyboard users lose the ability
   to see where they are, and this is a set of apps you sign in to. */
input:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button {
    margin-top: 1.25rem;
    padding: 0.65rem 1rem;
    font: inherit;
    font-size: 0.925rem;
    font-weight: 500;
    color: var(--accent-text);
    background: var(--accent);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

button:hover:not(:disabled) { filter: brightness(1.06); }
button:active:not(:disabled) { filter: brightness(0.96); }
button:disabled { opacity: 0.6; cursor: default; }

button.secondary {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}

button.secondary:hover:not(:disabled) { border-color: var(--accent); filter: none; }

button.danger { color: #fff; background: var(--danger); }

.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.actions button { margin-top: 1.25rem; }

.linkbutton {
    display: block;
    margin-top: 1.5rem;
    padding: 0.65rem 1rem;
    text-align: center;
    text-decoration: none;
    font-weight: 500;
    color: var(--accent-text);
    background: var(--accent);
    border: 1px solid transparent;
    border-radius: 8px;
}

/* The quieter one, matching button.secondary — for a link that sits beside
   a primary action rather than being the reason the page exists. */
.linkbutton.secondary {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}

.linkbutton.secondary:hover { border-color: var(--accent); }

/* Several links side by side rather than one filling the card. .actions is
   a flex row, but .linkbutton is display:block from its solo use, so it
   would stretch and stack without this. */
.actions .linkbutton { display: inline-block; margin-top: 1.25rem; }

.validation-message {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.825rem;
    color: var(--danger);
}

.invalid { border-color: var(--danger); }

/* ---- feedback --------------------------------------------------------- */

.notice, .error, .warn {
    padding: 0.7rem 0.85rem;
    font-size: 0.9rem;
    border-radius: 8px;
    margin: 0 0 1.25rem;
}

.notice { color: var(--text); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.error { color: var(--danger); background: var(--danger-bg); }
.warn { margin-top: 1rem; color: var(--warn-text); background: var(--warn-bg); }

.ok { color: var(--ok); font-weight: 600; }
.off { color: var(--muted); font-weight: 600; }

/* ---- small pieces ----------------------------------------------------- */

/* The app's mark. Sized by the app, because a single centred card wants a
   larger one than a top bar does. */
.mark {
    border-radius: 6px;
    background: var(--accent);
    color: var(--accent-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.pill {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 999px;
    white-space: nowrap;
}

.badge {
    margin-left: 0.5rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--muted);
    background: var(--bg);
    border-radius: 4px;
}

/* A badge that needs noticing — "Closing 2 Oct 2026" on a team list.

   RESETS the block padding and margin, because `.warn` is otherwise a
   full-width notice box: sharing the class without this makes one word in a
   list render as a banner. */
.badge.warn {
    padding: 0.1rem 0.4rem;
    margin: 0 0 0 0.5rem;
    font-size: 0.7rem;
    color: var(--warn-text);
    background: var(--warn-bg);
}

.sep {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}