/* Appointed Duty · masjid dashboard.
   The palette is the app's own (lib/ui/ufuq.dart), so the two read as one
   product: warm ivory and deep green, gold for anything that needs a hand. */

:root {
  --bg:        #F7F3EB;
  --surface:   #FFFDF7;
  --inset:     #F1EBDD;
  --rule:      #E3DCCA;
  --ink:       #22382E;
  --muted:     #75837A;
  --faint:     #95A198;
  --green:     #2E7D5B;
  --green-ink: #2E7D5B;
  --on-green:  #FDF8EA;
  --gold:      #C1802E;
  --gold-ink:  #8A6A3A;
  --gold-bg:   #FBEEDD;
  --coral:     #D06A3E;
  --coral-bg:  #FBE6DC;
  --shadow:    0 16px 34px rgba(60, 45, 20, .13);
  --shadow-sm: 0 3px 10px rgba(60, 45, 20, .08);
  --radius:    20px;
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #101B14;
    --surface:   #16251D;
    --inset:     #1A2A1F;
    --rule:      #2E4436;
    --ink:       #F0EDDE;
    --muted:     #8CA091;
    --faint:     #7E907E;
    --green:     #2E7D5B;
    --green-ink: #8FD6AE;
    --on-green:  #F0EDDE;
    --gold:      #E6C685;
    --gold-ink:  #E6C685;
    --gold-bg:   #2C221A;
    --coral:     #EE9270;
    --coral-bg:  #33211A;
    --shadow:    0 16px 38px rgba(0, 0, 0, .45);
    --shadow-sm: 0 3px 10px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

/* The whole page is switched with the `hidden` attribute: the sign-in gate
   off, one of the two dashboards on. The browser's own `[hidden]` rule is
   only `display: none` at user-agent weight, so ANY author rule that sets
   `display` on the same element beats it and the element stays on screen.
   That is exactly what `.gate { display: grid }` did to `#login` from
   30 Aug 2026: signing in worked, the code was accepted, the dashboard was
   drawn underneath a full-height login card that would not go away, so the
   screen never changed and every code looked broken (Amr, TG 1969).
   One guard, at author weight, for every toggle on the page including the
   ones nobody has written yet. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  min-height: 100dvh;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: 26px; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .09em;
     color: var(--muted); font-weight: 800; }
p  { margin: 0; }

button, input { font: inherit; color: inherit; }

/* ------------------------------------------------------------------ gate */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
}

.gate-card { width: min(420px, 100%); text-align: center; }

.mark { width: 54px; height: 54px; margin: 0 auto 16px; }
.mark svg { width: 100%; height: 100%; display: block; }
.mark rect { fill: var(--green); }
.mark path { fill: var(--gold); }

.gate-card .sub {
  color: var(--muted);
  margin: 8px 0 22px;
  font-size: 14px;
}

.gate-card .field-label { text-align: left; display: block; }

.code-input {
  width: 100%;
  background: var(--inset);
  border: 1.5px solid transparent;
  border-radius: 16px;
  padding: 15px 16px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: border-color .15s ease;
}
.code-input::placeholder { color: var(--faint); letter-spacing: .12em; font-weight: 600; }
.code-input:focus { border-color: var(--green-ink); }

.check {
  display: flex;
  align-items: center;
  gap: 9px;
  justify-content: center;
  margin: 14px 0 16px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}
.check input { accent-color: var(--green); width: 17px; height: 17px; }

.gate-card .foot {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--faint);
  line-height: 1.45;
}

/* ----------------------------------------------------------------- shell */

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px calc(48px + env(safe-area-inset-bottom));
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.who .muted { color: var(--muted); font-size: 13.5px; }
.top-actions { display: flex; gap: 8px; }

.pill {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  max-width: 62vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pill.gold  { background: var(--gold-bg); color: var(--gold-ink); }
.pill.green { background: var(--green); color: var(--on-green); }

.live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-ink);
  opacity: .3;
  transition: opacity .35s ease;
}
.live.on { opacity: 1; }

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-bottom: 16px;
}

.grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.col-side .card { position: sticky; top: 18px; }

@media (min-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 16px; }
  .shell { padding-top: 24px; }
}

/* --------------------------------------------------------------- buttons */

.btn {
  border: none;
  border-radius: 14px;
  padding: 11px 17px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  background: var(--inset);
  color: var(--ink);
  transition: transform .08s ease, opacity .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--green); color: var(--on-green);
               box-shadow: 0 6px 14px rgba(46, 125, 91, .25); }
.btn.ghost { background: transparent; color: var(--muted);
             box-shadow: inset 0 0 0 1.5px var(--rule); }
.btn.danger { background: transparent; color: var(--coral);
              box-shadow: inset 0 0 0 1.5px var(--coral); }
.btn.wide { width: 100%; padding: 14px; font-size: 15px; }
.btn.tiny { padding: 7px 12px; font-size: 12.5px; border-radius: 11px; }

/* ---------------------------------------------------------------- inputs */

.field-label {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

input[type="text"], input[type="time"], input[type="date"] {
  width: 100%;
  background: var(--inset);
  border: 1.5px solid transparent;
  border-radius: 13px;
  padding: 11px 13px;
  font-size: 15px;
  font-weight: 600;
  outline: none;
  transition: border-color .15s ease;
  min-height: 44px;
}
input:focus { border-color: var(--green-ink); }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row.end { justify-content: flex-end; margin-top: 14px; }
.grow { flex: 1 1 190px; min-width: 0; }

.hint { color: var(--muted); font-size: 13px; margin: 8px 0 14px; line-height: 1.45; }

.notice {
  margin-top: 13px;
  padding: 11px 14px;
  border-radius: 13px;
  font-size: 13.5px;
  font-weight: 700;
  background: var(--gold-bg);
  color: var(--gold-ink);
  text-align: left;
}
.notice.bad  { background: var(--coral-bg); color: var(--coral); }
.notice.good { background: rgba(46, 125, 91, .13); color: var(--green-ink); }

/* -------------------------------------------------------------- new form */

.new-masjid h2 { margin-bottom: 14px; }

/* ------------------------------------------------------------ masjid card */

.masjid-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.masjid-title { font-size: 20px; font-weight: 800; letter-spacing: -.01em;
                min-width: 0; overflow-wrap: anywhere; }
.masjid-meta { color: var(--faint); font-size: 12.5px; margin-top: 3px; }

.stats { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.stat {
  background: var(--inset);
  border-radius: 13px;
  padding: 9px 13px;
  min-width: 84px;
}
.stat b { display: block; font-size: 17px; font-weight: 800; }
.stat span { font-size: 11px; font-weight: 700; letter-spacing: .07em;
             text-transform: uppercase; color: var(--faint); }

.codebox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--inset);
  border-radius: 12px;
  padding: 8px 10px 8px 13px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  overflow-wrap: anywhere;
}

.sec { margin-top: 20px; padding-top: 16px; border-top: 1.5px solid var(--rule); }
.sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 11px; flex-wrap: wrap;
}
.count { color: var(--faint); font-weight: 700; }

/* ---------------------------------------------------------------- tables */

.rows { display: flex; flex-direction: column; gap: 2px; }
.spaced { margin-top: 12px; }
.line {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.line:last-child { border-bottom: none; }
.line .name { font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.line .when { color: var(--faint); font-size: 12.5px; }
.line.gone .name { color: var(--faint); text-decoration: line-through; }

.times-strip { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 4px; }
.tslot {
  background: var(--inset); border-radius: 11px; padding: 7px 11px;
  text-align: center; min-width: 68px;
}
.tslot span { display: block; font-size: 10.5px; font-weight: 800;
              letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.tslot b { font-size: 15px; font-weight: 800; }
.tslot.jum { background: var(--gold-bg); }
.tslot.jum b, .tslot.jum span { color: var(--gold-ink); }
/* A prayer this masjid holds no congregation for: said quietly, in words, so
   it can never be read as a time that failed to load. */
.tslot.none b { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
                text-transform: uppercase; color: var(--faint); }

.empty { color: var(--faint); font-size: 13.5px; padding: 6px 0; }

/* -------------------------------------------------------- times editor */

.times { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
         gap: 10px; margin-top: 14px; }
/* A note inside the times grid: spans it, so it breaks the row and stays with
   the inputs it is about (blanks under the dailies, khutbah under Jumu'ah). */
.slot-note { grid-column: 1 / -1; margin: 0; color: var(--muted);
             font-size: 12.5px; line-height: 1.45; }
.from { display: block; max-width: 240px; }

.upcoming .line b { font-weight: 800; }

/* ------------------------------------------ azan source + iqamah rules */

/* A rule row shows only the fields its own mode uses, hidden with the hidden
   attribute, which the guard at the top of this file already makes stick. */

select {
  width: 100%;
  background: var(--inset);
  border: 1.5px solid transparent;
  border-radius: 13px;
  padding: 11px 13px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: inherit;
  outline: none;
  min-height: 44px;
  appearance: none;
  transition: border-color .15s ease;
}
select:focus { border-color: var(--green-ink); }

/* Who this masjid takes its azan from, said in one line above the picker. */
.current {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: 13px;
  background: var(--inset);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.rules { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.rule { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rule-name { flex: 0 0 74px; font-weight: 800; font-size: 14px; }
.rule select { flex: 1 1 150px; width: auto; }
.rule input { flex: 0 1 96px; width: auto; }
.rule-unit { color: var(--faint); font-size: 12.5px; font-weight: 700; }
.rules .slot-note { margin-top: 4px; }

#ma-preview .field-label { margin-top: 12px; }
#ma-preview .field-label:first-child { margin-top: 0; }

/* --------------------------------------------------------------- events */

.feed { max-height: min(74dvh, 760px); display: flex; flex-direction: column; }
.events {
  list-style: none; margin: 12px 0 0; padding: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  flex: 1 1 auto; min-height: 0;
}
.ev { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.ev:last-child { border-bottom: none; }
.ev-top { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.ev-what { font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
.ev-when { font-size: 11.5px; color: var(--faint); white-space: nowrap; }
.ev-who  { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.ev-diff { font-size: 12px; color: var(--muted); margin-top: 4px;
           font-family: var(--mono); overflow-wrap: anywhere; }
.ev-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
          margin-right: 7px; vertical-align: middle; background: var(--green-ink); }
.ev-dot.gold  { background: var(--gold); }
.ev-dot.coral { background: var(--coral); }

/* ------------------------------------------------------- minted a code */

.minted {
  background: var(--gold-bg);
  border-radius: 15px;
  padding: 14px 15px;
  margin-top: 12px;
}
.minted .field-label { color: var(--gold-ink); }
.minted .warn { font-size: 12.5px; color: var(--gold-ink); margin-top: 9px;
                line-height: 1.45; }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: var(--shadow);
  z-index: 40;
  max-width: calc(100vw - 32px);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}