/*
  Core pages — events (command/index/form), dashboard, field mode, errors.

  Styles extracted from inline `style="..."` attributes in:
    templates/events/detail.html     → .event-cmd-*
    templates/events/index.html      → .event-search
    templates/events/form.html       → .event-form-*
    templates/dashboard/index.html   → .dash-*
    templates/mobile/home.html       → .fm-* extensions (base .fm-* lives in components.css)
    templates/errors/error.html      → .err-*

  Theme-safe: only design tokens from tokens.css (no hardcoded colours).
  Breakpoints mirror components.css: 1100px / 900px / 760px / 640px / 560px.

  NOTE: dynamic values stay inline in the templates by design —
  gauge rings (`--pct`) and cover-bar widths (`width:N%`) are data-driven.
*/

/* ─── Shared micro-utilities (used across these pages) ─────────────── */
.inline-form { display: inline; }
.label-hint { font-weight: 400; }
.btn-tiny { padding: 2px 8px; font-size: 11px; min-height: 0; }
.req-star { color: var(--accent-rose); }

/* ═══ Event command page (events/detail.html) ═══════════════════════ */

/* Badge row above the title */
.event-cmd-badges { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.event-cmd-title { margin-top: 10px; }
.event-cmd-contacts { margin-top: 6px; }

/* Quick-action row under the header card */
.event-cmd-actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 14px 0 4px;
}

/* Team briefing card */
.event-cmd-briefing { margin-top: 12px; }
.event-cmd-briefing-body { white-space: pre-wrap; font-size: 13px; line-height: 1.6; }

/* Cover-team card internals */
.event-cmd-team-table { margin-top: 14px; }
.event-cmd-subtle { font-size: 11px; }
.event-cmd-window { font-size: 12px; }
.event-cmd-row-actions { text-align: right; white-space: nowrap; }
.event-cmd-delete { padding: 3px 6px; color: var(--accent-rose); }
.event-cmd-assign-form { margin-top: 12px; }
.event-cmd-assign-submit { margin-top: 10px; }

/* Side column: on-the-clock + control log */
.event-cmd-tight-body { padding-top: 12px; }
.event-cmd-log { margin-top: 16px; }
.event-cmd-live-meta { font-size: 10px; }
.event-cmd-log-row { display: flex; gap: 8px; align-items: center; }
.event-cmd-log-type { max-width: 130px; }
.event-cmd-log-empty { font-size: 12px; padding: 10px 0; }

/* Bottom pair: PCRs + timesheet (collapses to one column on tablet) */
.event-cmd-bottom { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); margin-top: 16px; }
.event-cmd-bottom > * { min-width: 0; }
@media (max-width: 900px) { .event-cmd-bottom { grid-template-columns: 1fr; } }
.event-cmd-note { font-size: 12px; }

/* ═══ Events index (events/index.html) ══════════════════════════════ */
.event-search { flex: 1; min-width: 200px; max-width: 340px; }
@media (max-width: 640px) {
  .event-search { min-width: 0; max-width: none; width: 100%; }
}

/* ═══ Event form (events/form.html) ═════════════════════════════════ */
.event-form { max-width: 980px; }
.event-form-card { margin-top: 16px; }
.event-form-postcode { max-width: 160px; }
.event-form-sec-provider { margin-top: 14px; max-width: 420px; }
.event-form-actions { display: flex; gap: 8px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .event-form-postcode, .event-form-sec-provider { max-width: none; }
}

/* ═══ Dashboard (dashboard/index.html) ══════════════════════════════ */

/* KPI grid spacing (grid itself + its breakpoints live in components.css) */
.dash-kpi-row { margin-top: 16px; }

/* Two-column card rows — own class so we control the collapse */
.dash-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); margin-top: 24px; }
.dash-grid > * { min-width: 0; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

.dash-card-title { font-size: 13px; margin-bottom: 10px; }
.dash-card-cta { margin-top: 12px; }
.dash-note { font-size: 12px; }

/* Next-event card */
.dash-event-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.dash-event-link { font-size: 17px; font-weight: 650; }
.dash-event-meta { font-size: 12px; margin-bottom: 12px; }

/* Recent activity feed */
.dash-activity { margin-top: 16px; }
.dash-feed { margin-top: 6px; }
.dash-feed-icon { color: var(--fg-subtle); display: inline-flex; align-self: center; }
.dash-feed-who { color: var(--fg); }

/* ═══ Field mode (mobile/home.html) — extends .fm-* in components.css ═ */

.fm-break-flag { color: var(--accent-amber); }
.fm-off-sub { margin-top: 8px; }

/* "My events" banner variant: content stacks from the top, body grows */
.fm-banner-top { align-items: flex-start; }
.fm-banner-body { flex: 1; min-width: 0; }
.fm-banner-title { display: block; margin-bottom: 4px; }
.fm-myevent { margin-bottom: 3px; }

/* Tonal icon chips for the big tiles (inline tint/accent pairs extracted) */
.fm-ico-blue    { background: var(--tint-blue);    color: var(--brand-600); }
.fm-ico-cyan    { background: var(--tint-cyan);    color: var(--accent-cyan); }
.fm-ico-violet  { background: var(--tint-violet);  color: var(--accent-violet); }
.fm-ico-emerald { background: var(--tint-emerald); color: var(--accent-emerald); }
.fm-ico-amber   { background: var(--tint-amber);   color: var(--accent-amber); }
.fm-ico-rose    { background: var(--tint-rose);    color: var(--accent-rose); }

/* Duty-toggle form must not add a grid cell of its own */
.fm-status-form { display: contents; }

/* Device & account tools */
.fm-tools-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, 1fr); margin-top: 12px; }
.fm-tools-grid > * { min-width: 0; }
.fm-tool-title { font-size: 13px; margin-bottom: 8px; }
.fm-tool-btn { margin-top: 8px; }
.fm-tool-hint { font-size: 11px; margin-top: 6px; }
.fm-tool-note { font-size: 12px; margin-bottom: 8px; }
.fm-pin-input { max-width: 140px; }
.fm-display-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .fm-tools-grid { grid-template-columns: 1fr; }
  .fm-pin-input { max-width: none; }
}

/* ═══ Error page (errors/error.html) ════════════════════════════════ */

/* Guest variant (logged out): fills the viewport, centres the card */
.err-shell {
  min-height: 100vh; display: grid; place-items: center;
  padding: var(--sp-10) var(--sp-5);
}
/* In-shell variant: centred within the normal content column */
.err-center { display: grid; place-items: center; padding: var(--sp-12) var(--sp-5); }

/* Centred error card built on the design system's card primitives */
.err-card {
  width: 100%; max-width: 440px; text-align: center;
  background: var(--card-bg); border: var(--card-border-w) solid var(--border);
  border-radius: var(--card-radius); box-shadow: var(--card-shadow);
  padding: var(--sp-10) var(--sp-8);
}
.err-card.flat { box-shadow: none; border-color: transparent; background: transparent; }

.err-code {
  font-family: var(--f-num); font-size: clamp(56px, 14vw, 84px);
  font-weight: var(--num-weight); letter-spacing: var(--num-tracking); line-height: 1;
  background: linear-gradient(135deg, var(--brand-grad-from), var(--brand-grad-to));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.err-title { margin-top: var(--sp-2); }
.err-msg { margin-top: var(--sp-2); color: var(--fg-muted); font-size: 14px; }
.err-actions { margin-top: var(--sp-5); display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ═══ Responsive polish ═════════════════════════════════════════════ */

/* Event command: gauges wrap under the title on narrow screens */
@media (max-width: 1100px) {
  .cmd-head-body { align-items: flex-start; }
}
@media (max-width: 760px) {
  .cmd-title h1 { font-size: 20px; }
  .cmd-gauges { gap: 10px; width: 100%; }
  .gauge { width: 80px; height: 80px; }
  .gauge-in strong { font-size: 17px; }
  .event-cmd-actions .btn { flex: 1 1 auto; justify-content: center; }
  .event-cmd-log-row { flex-wrap: wrap; }
  .event-cmd-log-type { max-width: none; flex: 1 1 100%; }
}
@media (max-width: 560px) {
  .gauge { width: 72px; height: 72px; }
  .cmd-meta { gap: 8px 14px; }
  .event-cmd-badges { gap: 6px; }
}

/* Dashboard: tighten hero event link on phones */
@media (max-width: 560px) {
  .dash-event-link { font-size: 15px; }
}