/* ============================================================
   PatrolWizzard · Officer Portal — base.css
   "The Watch Desk" design system: tokens, reset, primitives.
   ============================================================ */

:root {
  /* — Ink / navy chrome — */
  --ink:        #14233F;
  --ink-2:      #0E1A30;
  --ink-soft:   #243150;
  --on-ink:     #EDF1F7;
  --on-ink-dim: #9DAEC8;

  /* — Work surface — */
  --paper:        #F3F1EB;
  --surface:      #FFFFFF;
  --surface-sunken:#FAF8F2;
  --line:         #E7E3D8;
  --line-strong:  #D9D3C5;

  /* — Brass signature — */
  --brass:      #B0894C;
  --brass-deep: #8B6A34;
  --brass-tint: #F3EBDB;

  /* — Text — */
  --text:   #1B2436;
  --text-2: #586073;
  --text-3: #8B92A1;

  /* — Status (institutional, desaturated) — */
  --duty:        #2E7D54;  --duty-tint:  #E7F0EA;
  --amber:       #A9781E;  --amber-tint: #F5EDD9;
  --alert:       #A93C3C;  --alert-tint: #F6E6E4;
  --info:        #2C5D86;  --info-tint:  #E4EDF4;

  /* — Type — */
  --serif: "Spectral", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --t-xs: .6875rem;  --t-sm: .8125rem;  --t-base: .9375rem;
  --t-md: 1.0625rem; --t-lg: 1.25rem;   --t-xl: 1.75rem;  --t-2xl: 2.25rem;

  /* — Form — */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(20,35,63,.06), 0 1px 1px rgba(20,35,63,.04);
  --shadow-md: 0 4px 14px rgba(20,35,63,.08), 0 1px 3px rgba(20,35,63,.06);
  --shadow-lg: 0 18px 50px rgba(14,26,48,.22);

  --sidebar-w: 250px;
  --ease: cubic-bezier(.2,.7,.3,1);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; color: var(--ink); letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 3px; }

/* — Eyebrow / labels — */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass-deep);
  font-weight: 500;
}
.muted  { color: var(--text-3); }
.mono   { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.num    { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* — Buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 38px; padding: 0 1rem; border: 1px solid transparent; border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 500; letter-spacing: .01em;
  transition: background .15s var(--ease), border-color .15s, transform .04s, box-shadow .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-soft); }
.btn-brass { background: var(--brass); color: #fff; }
.btn-brass:hover { background: var(--brass-deep); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-sunken); border-color: var(--brass); }
.btn-quiet { background: transparent; color: var(--text-2); height: 32px; padding: 0 .6rem; }
.btn-quiet:hover { color: var(--ink); background: var(--surface-sunken); }
.btn-danger { background: var(--alert); color: #fff; }
.btn-danger:hover { filter: brightness(.93); }
.btn-sm { height: 30px; padding: 0 .7rem; font-size: var(--t-xs); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* — Cards / panels — */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line);
}
.card-head h3 { font-size: var(--t-md); }
.card-body { padding: 1.25rem; }

/* — Badges — */
.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  height: 22px; padding: 0 .55rem; border-radius: 999px;
  font-family: var(--mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .02em; text-transform: uppercase;
  border: 1px solid transparent;
}
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background: currentColor; opacity:.9; }
.badge.is-duty   { color: var(--duty);  background: var(--duty-tint);  }
.badge.is-amber  { color: var(--amber); background: var(--amber-tint); }
.badge.is-alert  { color: var(--alert); background: var(--alert-tint); }
.badge.is-info   { color: var(--info);  background: var(--info-tint);  }
.badge.is-muted  { color: var(--text-3);background: var(--surface-sunken); }
.badge.is-flat::before { display: none; }

/* — Tables — */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
table.data thead th {
  text-align: left; font-family: var(--mono); font-weight: 500;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); padding: .7rem 1rem; border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
table.data tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background .12s; }
table.data tbody tr:hover { background: var(--surface-sunken); }
table.data .col-right { text-align: right; }
.cell-title { font-weight: 500; color: var(--ink); }
.cell-sub   { color: var(--text-3); font-size: var(--t-xs); }

/* — Forms — */
.field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.field label { font-size: var(--t-xs); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.input, .select, .textarea {
  width: 100%; height: 40px; padding: 0 .75rem;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  color: var(--text); transition: border-color .15s, box-shadow .15s;
}
.textarea { height: auto; min-height: 96px; padding: .65rem .75rem; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px var(--brass-tint); }
.input.mono { font-family: var(--mono); letter-spacing: .08em; }

/* — Segmented control — */
.segmented { display: inline-flex; padding: 3px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-sm); }
.segmented button {
  height: 32px; padding: 0 .9rem; border: none; border-radius: 3px; background: transparent;
  font-size: var(--t-sm); font-weight: 500; color: var(--text-2);
}
.segmented button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* — Empty / loading / error states — */
.state { text-align: center; padding: 3rem 1.5rem; color: var(--text-2); }
.state .state-mark {
  width: 44px; height: 44px; margin: 0 auto .9rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-sunken);
  border: 1px solid var(--line); color: var(--brass-deep);
}
.state h4 { font-family: var(--serif); font-size: var(--t-md); color: var(--ink); margin-bottom: .25rem; }
.state p { font-size: var(--t-sm); max-width: 34ch; margin: 0 auto; }
.spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--line-strong); border-top-color: var(--brass);
  animation: spin .8s linear infinite; margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* — Modal — */
.modal-scrim {
  position: fixed; inset: 0; z-index: 200; background: rgba(14,26,48,.55);
  display: grid; place-items: center; padding: 1.5rem;
  backdrop-filter: blur(2px); animation: fade .18s var(--ease);
}
.modal {
  width: 100%; max-width: 520px; max-height: 90vh; overflow: auto;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  border-top: 3px solid var(--brass); animation: rise .22s var(--ease);
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 1.25rem 1.5rem .5rem; }
.modal-head h3 { font-size: var(--t-lg); }
.modal-head .eyebrow { display:block; margin-bottom:.3rem; }
.modal-body { padding: .75rem 1.5rem 1.25rem; }
.modal-foot { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.5rem; border-top: 1px solid var(--line); background: var(--surface-sunken); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.modal-close { background: none; border: none; color: var(--text-3); font-size: 1.4rem; line-height: 1; padding: .1rem .3rem; }
.modal-close:hover { color: var(--ink); }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* — Toast — */
.toast-host { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 300; display: flex; flex-direction: column; gap: .6rem; }
.toast {
  display: flex; align-items: center; gap: .65rem; min-width: 240px; max-width: 380px;
  padding: .8rem 1rem; background: var(--ink); color: var(--on-ink);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); font-size: var(--t-sm);
  border-left: 3px solid var(--brass); animation: rise .2s var(--ease);
}
.toast.ok    { border-left-color: var(--duty); }
.toast.warn  { border-left-color: var(--amber); }
.toast.err   { border-left-color: var(--alert); }

/* — Utility — */
.row { display: flex; align-items: center; gap: .75rem; }
.row.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; }
.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }