/* The one stylesheet every screen in every module inherits — see
   gateway/templates/gateway/theme.html for the note on what belongs
   here. Served from /static/ with a content hash on the URL
   (gateway/templatetags/theme.py), so a browser keeps it between pages
   and fetches it again the first time it changes. */

:root {
  color-scheme: light;

  --ink: #241c20;
  --ink-soft: #4a3f45;
  --muted: #77696f;
  --line: #e2d9cd;
  --line-soft: #ede6dc;
  --bg: #f6f1e8;
  --card-bg: #fff;
  --sunken: #faf7f1;

  --accent: #760d52;
  --accent-dark: #57093c;
  --accent-tint: #f7e9f1;

  --good: #1a6b3d;
  --good-bg: #e8f5ed;
  --warn: #8a5000;
  --warn-bg: #fbefdc;
  --bad: #9c1f1f;
  --bad-bg: #fbe8e6;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --shadow: 0 1px 2px rgba(36, 28, 32, 0.05), 0 6px 16px -8px rgba(36, 28, 32, 0.12);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  padding-bottom: 3rem;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

/* One visible focus treatment for everything, so keyboard and
   switch-access users aren't left guessing. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---------- app header ---------- */
header.app-header {
  background: var(--accent);
  color: #fff;
  /* The insets are 0 in a browser and only become real once this is
     installed on a phone, where the page runs under the status bar and
     the notch (base.html's viewport-fit=cover). Without the top one the
     clock sits on top of the logo. */
  padding: calc(0.8rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right))
           0.8rem calc(1rem + env(safe-area-inset-left));
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
header.app-header .header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  max-width: 640px;
  margin: 0 auto;
}
header.app-header .header-left { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
header.app-header .brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }

/* The way back to the hub, top left of every module's header. Same
   treatment as the log-out button on the right so the two read as one
   pair of chrome controls rather than two different kinds of thing. */
header.app-header .home-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-sm);
  padding: 0.3rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 600;
}
header.app-header .home-btn:hover { background: rgba(255, 255, 255, 0.14); }
header.app-header .home-btn svg { width: 0.9rem; height: 0.9rem; fill: currentColor; display: block; }
/* On a narrow phone the icon carries it alone — the title needs the room
   more than the word does. title="Dashboard" keeps it labelled. */
@media (max-width: 26rem) {
  header.app-header .home-btn span { display: none; }
  header.app-header .home-btn { padding: 0.3rem 0.4rem; }
  /* Inside a module (where there is a home button) the name goes, so
     "Maintenance" is not cut to "Mainte…" to make room for something the
     reader already knows. It stays on the hub itself, which has the room
     and is where "am I signed in as me?" gets asked. A browser without
     :has() ignores this and shortens the name with an ellipsis instead. */
  header.app-header .header-left:has(.home-btn) ~ .who .whoami { display: none; }
}
header.app-header .brand-badge {
  background: #fff;
  border-radius: var(--r-sm);
  padding: 0.25rem 0.5rem;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
header.app-header .brand-badge img { height: 1.4rem; display: block; }
header.app-header h1 {
  font-family: var(--serif);
  font-size: 1.1rem;
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* On a phone there is not room for the title, the name and the button.
   The name is what gives way (flex-shrink far above the title's): a
   director saw "Mainte…" beside their own name in full, and the name is
   the one thing on the page they already know (2026-09-20). */
header.app-header .who { display: flex; align-items: center; gap: 0.5rem; flex: 0 100 auto; min-width: 0; white-space: nowrap; }
header.app-header .who .whoami { font-size: 0.8rem; color: rgba(255, 255, 255, 0.85); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
header.app-header .who form { flex-shrink: 0; }
header.app-header .who button {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-sm);
  padding: 0.3rem 0.65rem; font-size: 0.78rem; cursor: pointer;
  font-family: inherit;
}
header.app-header .who button:hover { background: rgba(255, 255, 255, 0.14); }

main { max-width: 640px; margin: 0 auto; padding: 1.25rem 1rem; }

/* ---------- messages ---------- */
.messages { list-style: none; margin: 0 0 1rem; padding: 0; }
.messages li {
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-md);
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  background: var(--good-bg);
  color: var(--good);
  border: 1px solid rgba(26, 107, 61, 0.18);
}
.messages li.error {
  background: var(--bad-bg); color: var(--bad);
  border-color: rgba(156, 31, 31, 0.18);
}

/* ---------- containers ----------
   .step is a section of the page and carries the elevation; .card is an
   item inside one and carries only a hairline. Spending both on both is
   what flattened the hierarchy before. */
.step {
  background: var(--card-bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 1.15rem;
  margin-bottom: 1.1rem;
  box-shadow: var(--shadow);
}
.step h2 {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.step h2 .num {
  background: var(--accent);
  color: #fff;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.85rem;
  margin-bottom: 0.6rem;
}
.card:last-child { margin-bottom: 0; }
.card summary { list-style: none; cursor: pointer; }
.card summary::-webkit-details-marker { display: none; }

/* Used by the dashboard and every ticket screen: a title on the left,
   status on the right. */
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.card-head .who { font-weight: 600; }
.card-head .period { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.tap-hint { font-size: 0.82rem; color: var(--accent); margin-top: 0.35rem; font-weight: 600; }

/* ---------- badges ---------- */
.badge {
  display: inline-block;
  font-size: 0.73rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--sunken);
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.badge.good { background: var(--good-bg); color: var(--good); border-color: rgba(26, 107, 61, 0.2); }
.badge.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(138, 80, 0, 0.2); }
.badge.bad { background: var(--bad-bg); color: var(--bad); border-color: rgba(156, 31, 31, 0.22); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0.5rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.25;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--accent-dark); }
.btn:active { transform: translateY(1px); }
.btn.small { padding: 0.34rem 0.62rem; font-size: 0.8rem; }
.btn.ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--line);
}
.btn.ghost:hover { background: var(--accent-tint); border-color: var(--accent); }
.btn.full { display: block; width: 100%; padding: 0.8rem; font-size: 1rem; }
.btn.danger { background: var(--bad); }
.btn.danger:hover { background: #7d1818; }
.btn:disabled { background: var(--line); color: var(--muted); cursor: not-allowed; }
.btn:disabled:hover { background: var(--line); }

form.inline { display: inline; }
.btn-row { display: flex; gap: 0.5rem; align-items: center; }
.btn-row form { flex: 1; }
.btn-row form .btn { width: 100%; }

/* ---------- text ---------- */
.empty-note { color: var(--muted); font-size: 0.88rem; }

/* ---------- forms ---------- */
select, input[type=text], input[type=email], input[type=password],
input[type=search], input[type=tel], input[type=number], input[type=date], textarea {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--card-bg);
  margin-bottom: 0.5rem;
}
select:focus, input:focus, textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-tint);
}
textarea { resize: vertical; }
.field-row { margin-bottom: 0.7rem; }
.field-row label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.25rem; }
label.check { font-size: 0.9rem; font-weight: 400; }

/* ---------- ticket bits, shared by the admin and supervisor screens ---------- */
.ticket-id {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-decoration: none;
}
a.ticket-id:hover { text-decoration: underline; }

.detail-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.9rem;
  margin: 0.75rem 0 0;
  font-size: 0.9rem;
}
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; }

.reopen-note {
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.75rem;
  background: var(--bad-bg);
  border-left: 3px solid var(--bad);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--bad);
  font-size: 0.9rem;
}

/* The office admin's instruction on a maintenance job, as the
   supervisor sees it. Same shape as .reopen-note, in the accent
   rather than red: it is guidance, not an alarm. */
.office-note {
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.75rem;
  background: var(--accent-tint);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--accent-dark);
  font-size: 0.9rem;
}

.has-photo { color: var(--accent); font-weight: 600; }

/* A reporter's photo. Capped in height so a portrait phone photo can't
   push every control off the screen. */
.photo-attachment { display: block; text-decoration: none; }
.photo-attachment img {
  display: block;
  width: 100%;
  max-height: 20rem;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--sunken);
}
.photo-attachment span { display: block; margin-top: 0.35rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .btn:active { transform: none; }
}