/* Smart Suite design system — SmartBook.
   Tokens are verbatim from DESIGN_SYSTEM.md. Never hard-code a hex in a
   component; reference the variable. Light theme only. */

:root {
  --navy:      #1A0033;
  --purple:    #7020B0;
  --purple-l:  #9D4EDD;
  --purple-xl: #C77DFF;
  --lilac:     #E0AAFF;
  --light:     #F5EDFB;
  --mid:       #DCC4F5;
  --bg:        #FAFAFA;
  --card:      #FFFFFF;
  --border:    #E5DDF0;
  --text:      #241638;
  --muted:     #6B5D7E;
  --success:   #2D8A4F;
  --warning:   #C77;
  --danger:    #C33;
  --font-display: 'Space Grotesk', 'Poppins', -apple-system, sans-serif;
  --font-body:    'Poppins', -apple-system, sans-serif;
}

/* OS dark mode must not auto-invert panels and inputs. */
:root { color-scheme: light; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── layout ─────────────────────────────────────────────── */

.layout { display: flex; min-height: 100vh; }
.main { flex: 1; margin-left: 240px; padding: 28px 32px 48px; max-width: 1400px; }

/* ── sidebar (§11) ──────────────────────────────────────── */

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 240px;
  background: var(--navy); color: #fff;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.sb-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,0.09);
}
.sb-wordmark { font-family: var(--font-display); line-height: 1.05; }
.sb-wordmark .l1 { display: block; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.sb-wordmark .l2 { display: block; font-size: 15px; font-weight: 700; color: #c175f9; letter-spacing: -0.01em; }

.sb-nav { padding: 14px 10px; flex: 1; }
.sb-section {
  font-size: 10px; font-weight: 600; color: var(--lilac);
  text-transform: uppercase; letter-spacing: 1.5px;
  padding: 14px 8px 7px;
}
.sb-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  color: var(--mid); font-size: 13.5px; font-weight: 500;
  text-decoration: none; margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.sb-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sb-item.active { background: var(--purple); color: #fff; }
.sb-item svg { width: 18px; height: 18px; flex: none; }

.sb-foot {
  padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.09);
  font-size: 11px; color: var(--mid);
}
.sb-foot .build { color: var(--lilac); font-weight: 600; }

/* ── platform icon (§5) ─────────────────────────────────── */

.pf-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(150deg, var(--purple-l), var(--purple) 65%, var(--navy));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 6px 18px rgba(112,32,176,0.28);
  flex: none;
}
.pf-icon.sm { width: 34px; height: 34px; border-radius: 9px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35); }
.pf-icon.sm svg { width: 17px; height: 17px; }

/* ── page head (§7) ─────────────────────────────────────── */

.page-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
  gap: 20px;
}
.page-title { font-size: 24px; font-weight: 700; color: var(--navy); font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; }
.page-subtitle { font-size: 13px; color: var(--muted); margin-top: 4px; }
.page-actions { display: flex; gap: 8px; align-items: center; }

.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--success);
  background: rgba(45,138,79,0.1); border-radius: 12px; padding: 4px 10px;
}
.live-pill::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--success); animation: pulse 1.8s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

/* ── buttons (§8) ───────────────────────────────────────── */

.btn {
  padding: 9px 16px; border-radius: 7px; font-weight: 600; font-size: 13px;
  cursor: pointer; border: none; transition: all .15s; font-family: inherit;
  display: inline-flex; align-items: center; gap: 7px;
}
.btn-primary { background: var(--purple); color: #fff; }
.btn-primary:hover { background: var(--purple-l); }
.btn-secondary { background: #fff; color: var(--purple); border: 1px solid var(--purple); }
.btn-secondary:hover { background: var(--light); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── cards, stats (§9) ──────────────────────────────────── */

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); margin-bottom: 16px;
}
.card-title { font-size: 14px; font-weight: 600; color: var(--navy); font-family: var(--font-display); margin: 0 0 4px; }
.card-sub { font-size: 12px; color: var(--muted); margin-bottom: 14px; }

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.stat {
  background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--purple);
  border-radius: 12px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.stat-value { font-size: 28px; font-weight: 800; color: var(--navy); font-family: var(--font-display); letter-spacing: -0.02em; line-height: 1.1; }
.stat-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; }
.stat-note { font-size: 11px; color: var(--muted); margin-top: 7px; }

/* ── tables (§9) ────────────────────────────────────────── */

table.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1px;
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl td { font-size: 13px; padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl tbody tr:hover { background: var(--light); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; }

/* ── pills (§9) ─────────────────────────────────────────── */

.pill {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 12px; white-space: nowrap;
}
.pill-success { background: #E6F7EB; color: var(--success); }
.pill-warning { background: #FFF5E5; color: #C77; }
.pill-neutral { background: var(--light); color: var(--muted); }
.pill-info    { background: var(--mid);  color: var(--purple); }
.pill-danger  { background: #FDEBEB; color: var(--danger); }

/* ── forms (§10) ────────────────────────────────────────── */

.form-group { margin-bottom: 14px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; background: #fff; color: var(--text); font-family: inherit;
}
.form-textarea { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; line-height: 1.55; resize: vertical; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--purple); }
.form-hint { font-size: 11px; color: var(--muted); margin-top: 5px; }

/* ── empty states (§15) ─────────────────────────────────── */

.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty h3 { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--navy); margin: 0 0 6px; }
.empty p { font-size: 12.5px; margin: 0; }

/* ── misc ───────────────────────────────────────────────── */

.callout {
  border: 1px solid var(--border); border-left: 3px solid var(--purple);
  background: var(--light); border-radius: 8px; padding: 13px 15px;
  font-size: 12.5px; color: var(--text); margin-bottom: 16px;
}
.callout.warn { border-left-color: #C77; background: #FFF9F0; }
.callout.danger { border-left-color: var(--danger); background: #FDF2F2; }
.callout strong { color: var(--navy); }

.kv { display: grid; grid-template-columns: 190px 1fr; gap: 8px 16px; font-size: 12.5px; }
.kv dt { color: var(--muted); font-weight: 500; }
.kv dd { margin: 0; color: var(--text); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .split { grid-template-columns: 1fr; } }

pre.out {
  background: #1A0033; color: #E0D6F0; border-radius: 8px; padding: 15px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px;
  line-height: 1.55; overflow-x: auto; margin: 0; max-height: 460px;
}
pre.out .k { color: var(--purple-xl); }

.flightbar { display: flex; align-items: center; gap: 2px; margin: 10px 0 4px; }
.flightbar span { height: 9px; border-radius: 3px; }
.flightbar .on { background: var(--purple); }
.flightbar .gap { background: repeating-linear-gradient(45deg, #EDE3F7, #EDE3F7 3px, #fff 3px, #fff 6px); border: 1px solid var(--border); }
.flightlegend { font-size: 11px; color: var(--muted); }

.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dot-confirmed { background: var(--success); }
.dot-assumed   { background: #C77; }
.dot-unknown   { background: var(--danger); }