/* Shared styles for the login, invite, dashboard, admin and billing pages. Tokens follow the JobQue Visual Style
   Guide (Oct 14, 2026), the same values as site.css: calm guidance, green only for actions and verified signals.
   Single light theme, like the website. Token names are kept from the old theme so every page picks these up. */
:root {
  --bg: #F8FAF8;          /* Page Background */
  --surface: #FFFFFF;     /* Card / Surface */
  --surface-2: #EDF4F0;   /* Summary Background */
  --line: #E1E7E2;        /* Border */
  --line-strong: #D6E4DB; /* Summary Border: dividers, dashed outlines */
  --input: #FCFDFC; --input-border: #7F8F86;
  --ink: #202F2A;         /* Main Text */
  --ink-2: #202F2A;       /* Main Text: the guide has no in-between grey (secondary copy uses --ink-3, Muted) */
  --ink-3: #64736C;       /* Muted Text */
  --brand: #32644F;       /* Primary Green */
  --brand-ink: #2A5643;   /* hover, links */
  --brand-soft: #EDF4F0; --on-brand: #FFFFFF;
  --sun: #BB4D00; --sun-ink: #973C00; --sun-soft: #FFFBEB;       /* Review / attention */
  --mint: #006045; --mint-ink: #006045; --mint-soft: #ECFDF5;    /* Positive */
  --amber-ink: #973C00; --amber-soft: #FFFBEB;
  --rose: #A81E2E; --rose-soft: #FDEDEF; --rose-line: #D7263D;   /* Error */
  --wa: #32644F; --on-wa: #FFFFFF;                               /* WhatsApp buttons use Primary Green, as on the site */
  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow-sm: 0 1px 2px rgb(24 55 49 / .05);
  --shadow-md: 0 8px 40px -16px rgb(24 55 49 / .18);
  --ring: 0 0 0 3px rgb(50 100 79 / .22);
  --radius: 12px;
  /* Lucide outline icons for pills, callouts and errors (drawn in currentColor through a mask) */
  --i-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  --i-alert-triangle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/><path d='M12 9v4'/><path d='M12 17h.01'/></svg>");
  --i-alert-circle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 8v4'/><path d='M12 16h.01'/></svg>");
  --i-info: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
  --i-pause: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='14' y='4' width='4' height='16' rx='1'/><rect x='6' y='4' width='4' height='16' rx='1'/></svg>");
  --i-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  --i-minus-circle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M8 12h8'/></svg>");
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: var(--font); letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(28px, 7vw, 40px); line-height: 1.1; font-weight: 600; }
h2 { font-size: 18px; font-weight: 600; }
p { margin: 0; }
a { color: var(--brand); text-underline-offset: 3px; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.mono { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 460px; margin: 0 auto; padding: 0 16px; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 19px/1 var(--font);
        color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.logo-img { display: block; height: 28px; width: auto; }
.logo-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--brand); color: var(--on-brand);
             display: grid; place-items: center; font-size: 17px; }
.logo b { color: inherit; font-weight: inherit; }   /* "JobQue" in one colour, as on the site */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }

.btn { appearance: none; border: 1px solid transparent; border-radius: 8px; padding: 12px 20px; min-height: 48px;
       font: 500 14px/1.2 var(--font); cursor: pointer; display: inline-flex; align-items: center;
       justify-content: center; gap: 8px; text-decoration: none; transition: transform .06s ease, background .15s ease; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-ink); }
.btn-wa { background: var(--wa); color: var(--on-wa); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--input-border); }
.btn-sm { min-height: 36px; padding: 6px 12px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 14px; font-weight: 500; color: var(--ink); }
.input { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--input-border);
         background: var(--input); color: var(--ink); font: inherit; font-size: 16px; }
.input::placeholder { color: var(--ink-3); }
.code-input { letter-spacing: .5em; text-align: center; font-size: 24px; font-family: "Geist Mono", ui-monospace, monospace; }

/* Status pills follow the style guide's status sets: colour, icon and label together, never colour alone.
   Positive (emerald) = done or working; review (amber) = needs the member's attention; error (red) = something failed;
   neutral = muted text on the card surface; info = in progress. */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px;
        font-weight: 600; background: var(--surface); color: var(--ink-3); border: 1px solid var(--line); white-space: nowrap; }
.pill::before { content: none; width: 12px; height: 12px; flex: none; background: currentColor;
                -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.pill.pos, .pill.active { background: var(--mint-soft); color: var(--mint-ink); border-color: transparent; }
.pill.rev, .pill.unsupported, .pill.waitlist { background: var(--sun-soft); color: var(--sun-ink); border-color: transparent; }
.pill.err { background: var(--rose-soft); color: var(--rose); border-color: transparent; }
.pill.info, .pill.searching, .pill.retrying { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.pill.pos::before, .pill.active::before { content: ""; --i: var(--i-check); }
.pill.rev::before, .pill.unsupported::before, .pill.waitlist::before { content: ""; --i: var(--i-alert-triangle); color: var(--sun); }
.pill.err::before { content: ""; --i: var(--i-alert-circle); color: var(--rose-line); }
.pill.info::before, .pill.searching::before, .pill.retrying::before { content: ""; --i: var(--i-search); }
.pill.paused::before { content: ""; --i: var(--i-pause); }
.pill.neutral::before { content: ""; --i: var(--i-minus-circle); }

/* Callouts: 16px radius, an icon, then one line of what happened and what to do */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--surface-2);
          color: var(--ink); font-size: 15px; }
.notice::before { content: ""; width: 18px; height: 18px; flex: none; margin-top: 2px; background: currentColor; --i: var(--i-info);
                  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.notice.error { background: var(--rose-soft); color: var(--rose); }
.notice.error::before { --i: var(--i-alert-circle); background: var(--rose-line); }
.notice.warn { background: var(--sun-soft); color: var(--sun-ink); }
.notice.warn::before { --i: var(--i-alert-triangle); background: var(--sun); }
.notice.ok { background: var(--mint-soft); color: var(--mint-ink); }
.notice.ok::before { --i: var(--i-check); }
.notice.hidden { display: none !important; }

/* Inline field error: right under the field, error icon + text, and the field's border turns red */
.field-error { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; color: var(--rose); }
.field-error::before { content: ""; width: 16px; height: 16px; flex: none; margin-top: 2px; background: var(--rose-line);
                       -webkit-mask: var(--i-alert-circle) center / contain no-repeat; mask: var(--i-alert-circle) center / contain no-repeat; }
.input[aria-invalid="true"] { border-color: var(--rose-line); }
.input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; box-shadow: none; border-color: var(--brand); }

/* Toast: short, temporary, always icon + text */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 10;
         display: flex; gap: 8px; align-items: center; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 12px;
         background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-md); font-size: 14px; }
.toast::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--brand); --i: var(--i-check);
                 -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.toast.err { background: var(--rose-soft); color: var(--rose); border-color: transparent; }
.toast.err::before { --i: var(--i-alert-circle); background: var(--rose-line); }
.ico { width: 16px; height: 16px; flex: none; vertical-align: -3px; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 12px 0; border-top: 1px solid var(--line); }
.list > li:first-child { border-top: 0; padding-top: 0; }
.row { display: flex; align-items: center; gap: 12px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.hidden { display: none !important; }

.switch { position: relative; width: 44px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: .15s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
                      background: #fff; transition: .15s; box-shadow: var(--shadow-sm); }
.switch input:checked + span { background: var(--brand); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { box-shadow: var(--ring); }

.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%;
            animation: shimmer 1.2s infinite; border-radius: 8px; min-height: 16px; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } * { transition: none !important; } }