/* LSZH Flight Monitor — Design token CSS variables */
:root {
  /* Primary (sky) */
  --color-primary:         #0ea5e9; /* sky-500 */
  --color-primary-dark:    #0369a1; /* sky-700 */
  --color-primary-light:   #e0f2fe; /* sky-100 */
  --color-primary-bg:      #f0f9ff; /* sky-50 */
  --color-primary-border:  #bae6fd; /* sky-200 */

  /* Surface & Background */
  --color-surface:  #ffffff;
  --color-bg:       #f1f5f9; /* slate-100 */
  --color-bg-soft:  #f8fafc; /* slate-50 */

  /* Text */
  --color-text:         #0f172a; /* slate-900 */
  --color-text-muted:   #64748b; /* slate-500 */
  --color-text-caption: #94a3b8; /* slate-400 */

  /* Border */
  --color-border:       #e2e8f0; /* slate-200 */
  --color-border-soft:  #f1f5f9; /* slate-100 */

  /* Status: on-time (emerald) */
  --color-status-on-time-text:   #047857; /* emerald-700 */
  --color-status-on-time-bg:     #ecfdf5; /* emerald-50 */
  --color-status-on-time-border: #a7f3d0; /* emerald-200 */
  --color-status-on-time-dot:    #10b981; /* emerald-500 */

  /* Status: warn / minor delay (amber) */
  --color-status-warn-text:   #b45309; /* amber-700 */
  --color-status-warn-bg:     #fffbeb; /* amber-50 */
  --color-status-warn-border: #fde68a; /* amber-200 */
  --color-status-warn-dot:    #f59e0b; /* amber-500 */

  /* Status: danger / ≥15m / cancel (rose) */
  --color-status-bad-text:   #be123c; /* rose-700 */
  --color-status-bad-bg:     #fff1f2; /* rose-50 */
  --color-status-bad-border: #fecdd3; /* rose-200 */
  --color-status-bad-dot:    #f43f5e; /* rose-500 */

  /* Status: probably departed/landed (orange) */
  --color-status-maybe-text:   #c2410c; /* orange-700 */
  --color-status-maybe-bg:     #fff7ed; /* orange-50 */
  --color-status-maybe-border: #fed7aa; /* orange-200 */

  /* Task / work categories */
  --color-task-nightstop-text:   #4338ca; /* indigo-700 */
  --color-task-nightstop-bg:     #eef2ff; /* indigo-50 */
  --color-task-nightstop-border: #c7d2fe; /* indigo-200 */

  --color-task-workpackage-text:   #6d28d9; /* violet-700 */
  --color-task-workpackage-bg:     #f5f3ff; /* violet-50 */
  --color-task-workpackage-border: #ddd6fe; /* violet-200 */

  --color-task-aog-bg:   #e11d48; /* rose-600 */
  --color-task-aog-text: #ffffff;

  --color-task-parking-text:   #475569; /* slate-700 */
  --color-task-parking-bg:     #f1f5f9; /* slate-100 */
  --color-task-parking-border: #e2e8f0; /* slate-200 */

  /* Auth chips */
  --color-chip-aircraft-text:   #0369a1; /* sky-700 */
  --color-chip-aircraft-bg:     #f0f9ff; /* sky-50 */
  --color-chip-aircraft-border: #bae6fd; /* sky-200 */

  --color-chip-engine-text:   #6d28d9; /* violet-700 */
  --color-chip-engine-bg:     #f5f3ff; /* violet-50 */
  --color-chip-engine-border: #ddd6fe; /* violet-200 */

  --color-chip-airline-text:   #047857; /* emerald-700 */
  --color-chip-airline-bg:     #ecfdf5; /* emerald-50 */
  --color-chip-airline-border: #a7f3d0; /* emerald-200 */

  /* Shift palette */
  --shift-morning-bg:   #dbeafe;
  --shift-morning-text: #1d4ed8;
  --shift-morning-border: #3b82f6;

  --shift-afternoon-bg:   #fed7aa;
  --shift-afternoon-text: #9a3412;
  --shift-afternoon-border: #f97316;

  --shift-night-bg:   #e0e7ff;
  --shift-night-text: #3730a3;
  --shift-night-border: #6366f1;

  --shift-vac-bg:   #fef3c7;
  --shift-vac-text: #92400e;

  --shift-sick-bg:   #fee2e2;
  --shift-sick-text: #991b1b;

  --shift-off-bg:   #f1f5f9;
  --shift-off-text: #94a3b8;

  /* Elevation (shadow) */
  --shadow-card:   0 1px 2px rgba(15,23,42,.04);
  --shadow-drawer: 0 4px 24px rgba(15,23,42,.12);

  /* Radii */
  --radius-pill: 6px;
  --radius-card: 12px;
  --radius-panel: 14px;

  /* Font families */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Global font overrides */
body {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.font-mono, .mono, code {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Pill base — 22px height, matches preview */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  white-space: nowrap;
  height: 22px;
  line-height: 22px;
}

/* Dot pulse (live indicator) */
.pulse-dot {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: #10b981;
  flex-shrink: 0;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 9999px;
  background: #10b981;
  opacity: 0.35;
  animation: pulse-ring 1.6s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse-ring {
  0%  { transform: scale(.6); opacity: .5; }
  100%{ transform: scale(1.9); opacity: 0; }
}

/* AOG pulse */
@keyframes aog-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(244,63,94,.4); }
  50%     { box-shadow: 0 0 0 4px rgba(244,63,94,0); }
}
.aog-pulse { animation: aog-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .aog-pulse { animation: none; }
}

/* AOG board row — compact density for ops desk */
.aog-row {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

/* ── AOG animation keyframes ───────────────────────────────────── */

@keyframes crit-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.5); }
  50%       { box-shadow: 0 0 8px 4px rgba(244, 63, 94, 0); }
}
.crit-glow { animation: crit-glow 2.4s ease-in-out infinite; }

@keyframes aog-ring {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}
.aog-ring { animation: aog-ring 1.9s ease-out infinite; }

@keyframes panel-slide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.panel-slide { animation: panel-slide 240ms cubic-bezier(.16, 1, .3, 1) both; }

@keyframes modal-enter {
  from { transform: scale(.96); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.modal-enter { animation: modal-enter 200ms cubic-bezier(.16, 1, .3, 1) both; }

@keyframes quicklog-drop {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.quicklog-drop { animation: quicklog-drop 160ms cubic-bezier(.16, 1, .3, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .crit-glow,
  .aog-ring,
  .panel-slide,
  .modal-enter,
  .quicklog-drop { animation: none; }
}

/* ── Handover print portal ────────────────────────────────────────── */
/* #hopo lives outside #root so we can hide #root during printing */
#hopo { display: none; }

/* When doPrint sets body.ho-printing: hide app, show only #hopo */
body.ho-printing #root  { display: none !important; }
body.ho-printing #hopo  { display: block !important; }

/* Print styles */
@media print {
  /* ho-printing portal mode: hide everything except #hopo */
  #root   { display: none !important; }
  #hopo   { display: block !important; background: #fff; }

  /* Legacy handoff view (non-portal path) */
  header, nav, aside, .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }

  /* Per-card page break */
  [style*="pageBreakInside"] { page-break-inside: avoid; }
  .space-y-5 > * { page-break-inside: avoid; }
  .max-w-4xl { max-width: 100% !important; }
}