/* =====================================================================
   Ticketset — organiser area
   ---------------------------------------------------------------------
   The buyer storefront (ticketset.css) is a parent on a phone following
   a WhatsApp link. This is the other side of the counter: someone
   setting up a school play or a church fundraiser, more likely on a
   laptop, doing deliberate work.

   Same vernacular — the paper ticket, school-blazer bottle green, crest
   gold, Archivo + Plex Mono — but roomier, calmer, and built for forms
   and lists rather than a single buy flow. Tokens are re-declared here
   so this sheet stands alone; the buyer never loads it and it never
   loads the buyer's.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --paper:      #f2f4f1;
  --paper-2:    #e9ede8;
  --card:       #ffffff;
  --ink:        #12211a;
  --ink-soft:   #5a6b62;
  --ink-faint:  #8a988f;
  --blazer:     #1f5d45;
  --blazer-dk:  #16452f;
  --gold:       #a8891f;
  --marker:     #c0431f;
  --ok:         #1f7a4d;
  --rule:       #d3dad4;
  --rule-soft:  #e6eae6;

  --radius:  14px;
  --notch:   11px;
  --shadow:  0 1px 2px rgba(18,33,26,.06), 0 10px 30px -14px rgba(18,33,26,.22);

  --display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #0e1613;
    --paper-2:   #121d18;
    --card:      #17231e;
    --ink:       #e8efe9;
    --ink-soft:  #9aaba2;
    --ink-faint: #71847a;
    --blazer:    #6cc39c;
    --blazer-dk: #8ad3b2;
    --gold:      #d9b641;
    --marker:    #f0805c;
    --ok:        #6fbe93;
    --rule:      #2c3d35;
    --rule-soft: #223029;
    --shadow:    0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.65);
  }
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blazer); }
:focus-visible {
  outline: 2px solid var(--blazer);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- shell -------------------------------------------------------- */
.wrap { max-width: 40rem; margin: 0 auto; padding: 0 1.25rem 5rem; }
.wrap--narrow { max-width: 26rem; }

.masthead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 0 2rem;
}
.wordmark {
  font-family: var(--display); font-weight: 800; font-size: .95rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--blazer); text-decoration: none;
}
.wordmark span { color: var(--gold); }

.masthead__right {
  display: flex; align-items: center; gap: 1rem;
  font-family: var(--mono); font-size: .78rem; color: var(--ink-soft);
}
.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--ink-soft); text-decoration: underline;
  text-underline-offset: 2px;
}
.linkbtn:hover { color: var(--ink); }

/* --- type ------------------------------------------------------- */
h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.04; letter-spacing: -.022em;
  margin: 0 0 .6rem; text-wrap: balance;
}
h2 {
  font-family: var(--display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -.01em;
  margin: 0 0 .9rem;
}
.dek { color: var(--ink-soft); margin: 0 0 2rem; font-size: 1.03rem; }
.dek b { color: var(--ink); font-weight: 600; }

.eyebrow {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-soft);
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1rem;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

.mono { font-family: var(--mono); }

/* --- opening screen: the split ---------------------------------- */
.hero {
  max-width: 30rem;
  margin: 3rem auto 0;
  text-align: center;
}
.hero h1 {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  margin-bottom: .7rem;
}
.hero .dek { margin: 0 auto 2.6rem; }

.choice {
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem;
}
.choice--hero { max-width: 22rem; margin-inline: auto; }
@media (max-width: 30rem) { .choice { grid-template-columns: 1fr; } }

.choice a {
  display: block; text-decoration: none; text-align: center;
  border-radius: var(--radius); padding: 1.15rem 1rem;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.choice a:hover { transform: translateY(-1px); }
.choice__primary { background: var(--blazer); color: #fff; }
.choice__primary:hover { background: var(--blazer-dk); }
.choice__secondary {
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--rule); box-shadow: var(--shadow);
}
.choice__secondary:hover { border-color: var(--blazer); }
@media (prefers-color-scheme: dark) { .choice__primary { color: #0e1613; } }

.resume {
  margin-top: 1.5rem; font-size: .9rem; color: var(--ink-soft);
}

/* --- card (auth forms, dashboard panels) ------------------------ */
.card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.5rem;
  background-image:
    radial-gradient(circle at 0 2.4rem,   rgba(0,0,0,0) var(--notch), var(--card) calc(var(--notch) + .5px)) left  / 51% 100% no-repeat,
    radial-gradient(circle at 100% 2.4rem, rgba(0,0,0,0) var(--notch), var(--card) calc(var(--notch) + .5px)) right / 51% 100% no-repeat;
}
.card + .card { margin-top: 1rem; }

/* --- forms ---------------------------------------------------- */
.field { margin-bottom: 1.05rem; }
.field:last-of-type { margin-bottom: 1.4rem; }
.field label {
  display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem;
}
.field input {
  width: 100%; padding: .74rem .85rem; font: inherit;
  color: var(--ink); background: var(--card);
  border: 1.5px solid var(--rule); border-radius: 9px;
}
.field input:focus { border-color: var(--blazer); outline: none; }
.field .hint { font-size: .78rem; color: var(--ink-soft); margin-top: .32rem; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 26rem) { .row2 { grid-template-columns: 1fr; } }

.error {
  border-left: 3px solid var(--marker); color: var(--ink);
  background: color-mix(in srgb, var(--marker) 8%, transparent);
  padding: .65rem .8rem; border-radius: 0 6px 6px 0;
  font-size: .9rem; margin-bottom: 1.1rem;
}

.btn {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  padding: .82rem 1.4rem; border: 0; border-radius: 10px;
  background: var(--blazer); color: #fff; cursor: pointer;
  letter-spacing: -.005em; transition: background .12s ease;
  display: inline-block; text-decoration: none; text-align: center;
}
a.btn:hover { color: #fff; }
@media (prefers-color-scheme: dark) { a.btn:hover { color: #0e1613; } }
.btn:hover:not(:disabled) { background: var(--blazer-dk); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--wide { width: 100%; }
@media (prefers-color-scheme: dark) { .btn { color: #0e1613; } }

.formfoot {
  margin-top: 1.2rem; font-size: .9rem; color: var(--ink-soft);
  text-align: center;
}

/* --- dashboard ---------------------------------------------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.1rem 0 1.6rem;
  border-bottom: 1px solid var(--rule); margin-bottom: 2rem;
}
.who { font-size: .9rem; color: var(--ink-soft); }
.who b { color: var(--ink); font-weight: 600; }

.pagehead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}

.orgpick {
  font: inherit; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--rule); border-radius: 9px;
  padding: .5rem .7rem;
}

.events { list-style: none; margin: 0; padding: 0; }
.eventrow {
  display: flex; align-items: center; gap: 1rem;
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: 1rem 1.15rem;
  box-shadow: var(--shadow); margin-bottom: .7rem;
}
a.eventrow {
  text-decoration: none; color: inherit;
  transition: border-color .12s ease;
}
a.eventrow:hover { border-color: var(--blazer); }
.eventrow__main { flex: 1; min-width: 0; }
.eventrow__name {
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eventrow__when {
  font-family: var(--mono); font-size: .78rem;
  color: var(--ink-soft); margin-top: .2rem;
}

.pill {
  font-family: var(--mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .55rem; border-radius: 999px;
  border: 1px solid var(--rule); color: var(--ink-soft);
  white-space: nowrap;
}
.pill--live   { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--rule)); }
.pill--draft  { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, var(--rule)); }
.pill--closed { color: var(--marker); border-color: color-mix(in srgb, var(--marker) 40%, var(--rule)); }

/* --- empty / loading states ------------------------------------ */
.empty {
  text-align: center; padding: 3rem 1.5rem;
  border: 1.5px dashed var(--rule); border-radius: var(--radius);
  color: var(--ink-soft);
}
.empty h2 { color: var(--ink); }
.empty .btn { margin-top: 1.2rem; }

.spin { color: var(--ink-soft); font-size: .92rem; padding: 2.5rem 0; text-align: center; }

.note {
  border-left: 3px solid var(--rule); padding: .7rem 0 .7rem .9rem;
  font-size: .88rem; color: var(--ink-soft); margin: 1rem 0 0;
}

/* --- event editor --------------------------------------------- */
.section { margin-bottom: 1.5rem; }
.section > h2 { margin-bottom: .35rem; }
.section__hint { font-size: .86rem; color: var(--ink-soft); margin: 0 0 1rem; }
.section[hidden] { display: none; }

.ok { color: var(--ok); font-size: .82rem; margin-left: .6rem; font-weight: 600; }

/* a saved session / ticket-type, listed above its add form */
.line {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rule-soft);
}
.line:first-child { border-top: 1px solid var(--rule-soft); }
.line__main { flex: 1; min-width: 0; }
.line__title { font-family: var(--display); font-weight: 700; font-size: .98rem; }
.line__sub { font-family: var(--mono); font-size: .76rem; color: var(--ink-soft); margin-top: .15rem; }
.line__x {
  background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px;
  padding: 0;
}
.line__x:hover { color: var(--marker); }

.addrow {
  display: grid; gap: .7rem; margin-top: 1.1rem;
  grid-template-columns: 1fr 1fr; align-items: end;
}
.addrow .field { margin-bottom: 0; }
.addrow .field--full { grid-column: 1 / -1; }
.addrow .btn { grid-column: 1 / -1; }
@media (max-width: 30rem) { .addrow { grid-template-columns: 1fr; } }

/* the publish bar */
.publish {
  position: sticky; bottom: 0;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--rule);
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
  margin-top: 1.5rem;
}
.publish__inner {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.publish__state { flex: 1; min-width: 12rem; font-size: .9rem; color: var(--ink-soft); }
.publish__state b { color: var(--ink); }
.publish__qr {
  display: inline-block; margin-top: .5rem; line-height: 0;
  border: 1px solid var(--rule); border-radius: .4rem; padding: .4rem;
  background: #fff;
}
.btn--ghost {
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--rule);
}
.btn--ghost:hover:not(:disabled) { border-color: var(--blazer); background: var(--card); }

/* --- stat tiles (organiser + admin dashboards) -------------------- */
.stats {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-bottom: 1.6rem;
}
.stat {
  background: var(--card); border: 1px solid var(--rule-soft);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  box-shadow: var(--shadow);
}
.stat__value {
  font-family: var(--display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: -.01em; line-height: 1.15;
}
.stat__label {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); margin-top: .3rem;
}

/* --- simple data table (admin screens) ---------------------------- */
.tablewrap { overflow-x: auto; margin-bottom: 1.6rem; }
.datatable {
  width: 100%; border-collapse: collapse; font-size: .87rem;
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.datatable th, .datatable td {
  text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.datatable th {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
}
.datatable tbody tr:last-child td { border-bottom: 0; }
.datatable tbody tr:hover { background: var(--paper-2); }