/*
 * Hand-written layer on top of membership.css (which is generated from the design system by web/build-css.sh and
 * is not edited by hand). It holds the dark theme, the shell additions (skip link, theme switch), the shared list
 * and form parts (status chips, bulk bar, needs-you queue, save bar, empty states) and the phone tap-target rules.
 * Nothing here is a Tailwind utility, so it needs no content scan and no rebuild when a template changes.
 *
 * Dark theme: token level. The light tokens are the bare :root in membership.css. The dark set below is applied
 * when the OS asks for dark and the visitor has not chosen Light, or when the visitor chose Dark.
 */

:root { color-scheme: light; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --white: #101e2c;
    --surface-base: #0a1520;
    --ink: #e8eef5;
    --slate-900: #e6edf5;
    --slate-700: #c3cedb;
    --slate-600: #aab6c5;
    --slate-500: #8e9cae;
    --slate-400: #6f7f93;
    --slate-300: #3a4a5e;
    --slate-200: #2a3a4d;
    --slate-150: #223144;
    --slate-100: #1b2839;
    --slate-50: #15212f;
    --blue-50: #0f2a41;
    --blue-700: #7cc3ee;
    --blue-800: #9ad2f3;
    --blue-100: #123552;
    --blue-200: #1c4d72;
    --green-50: #0f2a21;
    --amber-50: #2b2111;
    --red-50: #321718;
    --coral-50: #321718;
    --hairline: rgba(255, 255, 255, .09);
    --sh-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --sh-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
    --sh-md: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .3);
    --sh-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .4);
    --dk-link: #5fb4ea;
    --dk-ok: #6fd1a6;
    --dk-warn: #e9b765;
    --dk-bad: #f08886;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --white: #101e2c;
  --surface-base: #0a1520;
  --ink: #e8eef5;
  --slate-900: #e6edf5;
  --slate-700: #c3cedb;
  --slate-600: #aab6c5;
  --slate-500: #8e9cae;
  --slate-400: #6f7f93;
  --slate-300: #3a4a5e;
  --slate-200: #2a3a4d;
  --slate-150: #223144;
  --slate-100: #1b2839;
  --slate-50: #15212f;
  --blue-50: #0f2a41;
  --blue-700: #7cc3ee;
  --blue-800: #9ad2f3;
  --blue-100: #123552;
  --blue-200: #1c4d72;
  --green-50: #0f2a21;
  --amber-50: #2b2111;
  --red-50: #321718;
  --coral-50: #321718;
  --hairline: rgba(255, 255, 255, .09);
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25);
  --sh-md: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 20px rgba(0, 0, 0, .3);
  --sh-lg: 0 4px 8px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .4);
  --dk-link: #5fb4ea;
  --dk-ok: #6fd1a6;
  --dk-warn: #e9b765;
  --dk-bad: #f08886;
}

/* Parts of the generated sheet that hard-code a colour instead of reading a token. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body { background: var(--surface-base); color: var(--ink); }
  :root:not([data-theme="light"]) .picker-list,
  :root:not([data-theme="light"]) .data--stack tr,
  :root:not([data-theme="light"]) .table-wrap,
  :root:not([data-theme="light"]) .stat-card,
  :root:not([data-theme="light"]) .pside,
  :root:not([data-theme="light"]) .ptopbar,
  :root:not([data-theme="light"]) .init,
  :root:not([data-theme="light"]) .tier,
  :root:not([data-theme="light"]) .partner-card,
  :root:not([data-theme="light"]) .proofmodal__panel { background: var(--white); }
  :root:not([data-theme="light"]) .badge--active,
  :root:not([data-theme="light"]) .badge--paid,
  :root:not([data-theme="light"]) .ok-msg { color: var(--dk-ok); border-color: rgba(111, 209, 166, .3); }
  :root:not([data-theme="light"]) .badge--pending,
  :root:not([data-theme="light"]) .badge--open { color: var(--dk-warn); }
  :root:not([data-theme="light"]) .badge--lapsed { color: var(--dk-bad); }
  :root:not([data-theme="light"]) .err-msg { color: var(--dk-bad); border-color: rgba(240, 136, 134, .3); }
  :root:not([data-theme="light"]) input::placeholder,
  :root:not([data-theme="light"]) textarea::placeholder { color: var(--slate-400); }
  :root:not([data-theme="light"]) img.qr, :root:not([data-theme="light"]) .card-qr img { background: #fff; padding: 8px; border-radius: 8px; }
}
:root[data-theme="dark"] body { background: var(--surface-base); color: var(--ink); }
:root[data-theme="dark"] .picker-list,
:root[data-theme="dark"] .data--stack tr,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .pside,
:root[data-theme="dark"] .ptopbar,
:root[data-theme="dark"] .init,
:root[data-theme="dark"] .tier,
:root[data-theme="dark"] .partner-card,
:root[data-theme="dark"] .proofmodal__panel { background: var(--white); }
:root[data-theme="dark"] .badge--active,
:root[data-theme="dark"] .badge--paid,
:root[data-theme="dark"] .ok-msg { color: var(--dk-ok); border-color: rgba(111, 209, 166, .3); }
:root[data-theme="dark"] .badge--pending,
:root[data-theme="dark"] .badge--open { color: var(--dk-warn); }
:root[data-theme="dark"] .badge--lapsed { color: var(--dk-bad); }
:root[data-theme="dark"] .err-msg { color: var(--dk-bad); border-color: rgba(240, 136, 134, .3); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: var(--slate-400); }
:root[data-theme="dark"] img.qr, :root[data-theme="dark"] .card-qr img { background: #fff; padding: 8px; border-radius: 8px; }

/* ---- skip link ---- */
.skip-link {
  position: fixed; left: 12px; top: -64px; z-index: 1000; padding: 12px 18px; border-radius: var(--r-md);
  background: var(--blue); color: #fff; font-weight: 600; text-decoration: none; transition: top .15s var(--ease);
}
.skip-link:focus { top: 12px; outline: 3px solid #fff; outline-offset: 2px; }
main:focus { outline: none; }

/* ---- theme switch: sits in the dark admin rail and the light portal rail, so it only uses currentColor ---- */
.themeswitch { display: flex; gap: 2px; margin: var(--s3) var(--s3) var(--s2); padding: 3px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); border-radius: var(--r-md); }
.pside .themeswitch { margin: 0 0 var(--s3); color: var(--slate-600); }
.side .themeswitch { color: var(--on-dark-mid); }
.themeswitch button {
  flex: 1; min-height: 34px; border: 0; border-radius: calc(var(--r-md) - 3px); background: transparent; color: inherit;
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.themeswitch button[aria-pressed="true"] { background: var(--blue); color: #fff; }
.themeswitch button:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: 1px; }

/* ---- status chips with counts ---- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: var(--r-full);
  border: 1px solid var(--slate-200); background: var(--white); color: var(--slate-700); font-size: .86rem; font-weight: 600; text-decoration: none;
}
.chip:hover { border-color: var(--blue); }
.chip--on { background: var(--blue); border-color: var(--blue); color: #fff; }
.chip__n { font-variant-numeric: tabular-nums; font-size: .78rem; padding: 1px 7px; border-radius: var(--r-full); background: var(--slate-100); color: var(--slate-700); }
.chip--on .chip__n { background: rgba(255, 255, 255, .22); color: #fff; }
a.stat-card--link { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
a.stat-card--link:hover { border-color: var(--blue); }

/* ---- bulk actions ---- */
.bulkbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s3); padding: var(--s3) var(--s4);
  border: 1px solid var(--blue-200); background: var(--blue-50); border-radius: var(--r-md);
}
.bulkbar.is-idle { display: none; }
.bulkbar .select { width: auto; min-width: 190px; flex: 1; max-width: 280px; }
.bulkbar__n { font-weight: 600; font-size: .9rem; margin-right: auto; }
.cell-check { width: 44px; text-align: center; }
.cell-check input { width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; }

/* ---- empty states ---- */
.empty { display: grid; gap: 4px; justify-items: center; text-align: center; padding: var(--s6) var(--s4); color: var(--slate-600); }
.empty b { color: var(--ink); font-size: 1rem; }

/* ---- "Needs you" queue ---- */
.needs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--s3); }
.needs__list li { display: flex; }
.needs__row {
  flex: 1; display: flex; align-items: center; gap: var(--s3); min-height: 64px; padding: var(--s3) var(--s4); border: 1px solid var(--slate-200);
  border-radius: var(--r-md); text-decoration: none; color: var(--ink); background: var(--slate-50);
}
.needs__row:hover { border-color: var(--blue); }
.needs__row small { display: block; color: var(--slate-600); font-size: .78rem; line-height: 1.35; }
.needs__n { flex: none; min-width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--slate-150); font-weight: 700; font-variant-numeric: tabular-nums; }
.needs__n--on { background: var(--coral); color: #fff; }

/* ---- sectioned forms with a save bar and unsaved-changes guard ---- */
.savebar {
  position: sticky; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: flex-end; gap: var(--s3);
  margin-top: var(--s5); padding: var(--s3) var(--s4); background: var(--white); border: 1px solid var(--slate-200);
  border-radius: var(--r-md); box-shadow: var(--sh-md);
}
.savebar__msg { margin-right: auto; font-size: .86rem; color: var(--slate-600); }
.savebar.is-dirty .savebar__msg { color: var(--ink); font-weight: 600; }
.savebar.is-dirty .savebar__msg::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-right: 8px; }

/* ---- install prompt: quieter than the default ---- */
.pwa-install { box-shadow: var(--sh-md); }

/* ---- overflow at tablet widths ---- */
/* A bare 1fr track cannot shrink below its content, so one wide table or badge row pushed the whole page past the
   viewport (invoices and team at 1024, team at 390). minmax(0, 1fr) lets the track shrink and the table scroll inside. */
.admin, .portal-grid, .team-layout { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .admin { grid-template-columns: 256px minmax(0, 1fr); } }
@media (min-width: 960px) { .portal-grid { grid-template-columns: 240px minmax(0, 1fr); } }
@media (min-width: 1080px) { .team-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.ptopbar__toggle { background: var(--white); color: var(--slate-700); }
.amain, .pmain { min-width: 0; }
.select { max-width: 100%; }
.amain .card, .amain section, .amain aside { min-width: 0; max-width: 100%; }

/* ---- phone: every tap target at least 44px ---- */
@media (max-width: 700px) {
  .btn, .btn--sm, .select, .input, .textarea, .tab, .chip, .themeswitch button { min-height: 44px; }
  .btn--sm { padding-inline: 14px; }
  .atopbar__toggle, .ptopbar__toggle { width: 44px; height: 44px; }
  .pwa-install__dismiss { width: 44px; height: 44px; }
  summary, .filter-more__summary { display: flex; align-items: center; min-height: 44px; }
  /* a 22px box is drawn inside a 44px hit area */
  input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: none; appearance: none; flex: none; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; cursor: pointer;
    background: center / 44px 44px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='11.5' y='11.5' width='21' height='21' rx='5' fill='none' stroke='%238e9cae' stroke-width='2'/%3E%3C/svg%3E");
  }
  input[type="radio"] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='10.5' fill='none' stroke='%238e9cae' stroke-width='2'/%3E%3C/svg%3E");
  }
  input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='11' y='11' width='22' height='22' rx='5' fill='%230278be'/%3E%3Cpath d='M16.5 22.5l4 4 7-8.5' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='10.5' fill='none' stroke='%230278be' stroke-width='2'/%3E%3Ccircle cx='22' cy='22' r='5.5' fill='%230278be'/%3E%3C/svg%3E");
  }
  input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--blue-bright); outline-offset: -4px; border-radius: 10px; }
  .side__foot button, .pside__signout { min-width: 44px; min-height: 44px; }
  [role="note"] a { display: inline-block; padding: 13px 6px; }
  .cell-strong a, .person__name a { display: inline-block; padding: 12px 0; }
  .data a.btn, .data button.btn { min-height: 44px; }
  .row-cell { min-height: 44px; display: block; }
  table.data td, table.data th { padding-block: 10px; }
  /* the switch is 25px tall; its invisible input reaches 44px so the tap target is met without changing the look */
  .toggle input { top: -10px; width: 100%; height: 44px; background: none; -webkit-appearance: auto; appearance: auto; }
}