/* ============================================================
   APS TRACKER — "BRIDGE"  ·  design system
   Modernized Alpine Shipping blue/red · technical/industrial
   IBM Plex Sans + IBM Plex Mono
   ============================================================ */

:root {
  /* --- brand: modernized APS --- */
  --aps-blue:      oklch(0.50 0.17 257);   /* primary */
  --aps-blue-700:  oklch(0.42 0.16 257);
  --aps-blue-300:  oklch(0.70 0.11 257);
  --aps-navy:      oklch(0.27 0.055 256);  /* sidebar / chrome */
  --aps-navy-800:  oklch(0.23 0.05 256);
  --aps-navy-900:  oklch(0.19 0.045 256);
  --aps-red:       oklch(0.575 0.205 27);  /* accent / alert */
  --aps-red-700:   oklch(0.49 0.18 27);

  /* --- neutrals (cool) --- */
  --bg:        oklch(0.972 0.004 256);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.985 0.004 256);
  --surface-3: oklch(0.955 0.006 256);
  --line:      oklch(0.905 0.008 256);
  --line-2:    oklch(0.86 0.01 256);
  --ink:       oklch(0.24 0.03 256);
  --ink-2:     oklch(0.45 0.022 256);
  --ink-3:     oklch(0.62 0.018 256);

  /* --- status --- */
  --st-transit:   oklch(0.55 0.16 257);   /* sailing/in transit  - blue */
  --st-ontime:    oklch(0.62 0.14 158);   /* delivered/on time   - green */
  --st-risk:      oklch(0.76 0.15 78);    /* at risk / hold      - amber */
  --st-delay:     oklch(0.575 0.205 27);  /* delayed             - red */
  --st-plan:      oklch(0.60 0.015 256);  /* planned             - gray */

  /* --- type --- */
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  /* --- density (overridden by [data-density]) --- */
  --row-h: 44px;
  --pad: 16px;
  --gap: 16px;
  --fs: 14px;

  --radius: 8px;
  --radius-sm: 5px;
  --shadow-sm: 0 1px 2px oklch(0.27 0.05 256 / 0.06), 0 1px 1px oklch(0.27 0.05 256 / 0.04);
  --shadow-md: 0 4px 14px oklch(0.27 0.05 256 / 0.08), 0 1px 3px oklch(0.27 0.05 256 / 0.05);
  --shadow-pop: 0 16px 48px oklch(0.2 0.05 256 / 0.22);
}

[data-density="compact"] {
  --row-h: 34px;
  --pad: 11px;
  --gap: 11px;
  --fs: 13px;
}
[data-density="comfortable"] {
  --row-h: 52px;
  --pad: 22px;
  --gap: 22px;
  --fs: 14.5px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--sans);
  font-size: var(--fs);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#root { height: 100%; }

/* ---- utility ---- */
.mono { font-family: var(--mono); font-feature-settings: "zero" 1; }
.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.tnum { font-variant-numeric: tabular-nums; }

::selection { background: var(--aps-blue); color: #fff; }

/* slim scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* blueprint grid texture */
.grid-tex {
  background-image:
    linear-gradient(oklch(0.27 0.05 256 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.27 0.05 256 / 0.035) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* corner ticks — industrial frame accent */
.ticks { position: relative; }
.ticks::before, .ticks::after {
  content: ""; position: absolute; width: 7px; height: 7px; pointer-events: none;
}
.ticks::before { left: 0; top: 0; border-left: 1.5px solid var(--aps-blue); border-top: 1.5px solid var(--aps-blue); }
.ticks::after { right: 0; bottom: 0; border-right: 1.5px solid var(--aps-blue); border-bottom: 1.5px solid var(--aps-blue); }

/* ---- status pill ---- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 3px 9px 3px 7px; border-radius: 100px;
  border: 1px solid transparent; white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 100px; flex: none; }
.pill.transit { color: var(--st-transit); background: oklch(0.55 0.16 257 / 0.09); border-color: oklch(0.55 0.16 257 / 0.20); }
.pill.transit .dot { background: var(--st-transit); }
.pill.ontime  { color: oklch(0.45 0.13 158); background: oklch(0.62 0.14 158 / 0.10); border-color: oklch(0.62 0.14 158 / 0.22); }
.pill.ontime .dot { background: var(--st-ontime); }
.pill.risk    { color: oklch(0.52 0.12 70); background: oklch(0.76 0.15 78 / 0.14); border-color: oklch(0.76 0.15 78 / 0.30); }
.pill.risk .dot { background: var(--st-risk); }
.pill.delay   { color: var(--st-delay); background: oklch(0.575 0.205 27 / 0.09); border-color: oklch(0.575 0.205 27 / 0.22); }
.pill.delay .dot { background: var(--st-delay); }
.pill.plan    { color: var(--ink-2); background: var(--surface-3); border-color: var(--line-2); }
.pill.plan .dot { background: var(--st-plan); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  padding: 0 14px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, box-shadow .12s, transform .04s;
}
.btn:hover { background: var(--surface-3); border-color: var(--ink-3); }
.btn:active { transform: translateY(0.5px); }
.btn.primary { background: var(--aps-blue); border-color: var(--aps-blue); color: #fff; }
.btn.primary:hover { background: var(--aps-blue-700); border-color: var(--aps-blue-700); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-3); }
.btn.sm { height: 28px; font-size: 12px; padding: 0 10px; }
.btn .ico { width: 15px; height: 15px; }

/* ---- card ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

a { color: inherit; text-decoration: none; }

/* sidebar nav */
.navbtn {
  display: flex; align-items: center; gap: 12px; border: 0; cursor: pointer;
  width: 100%; text-align: left; border-radius: 8px; font-size: 13.5px; font-weight: 500;
  background: transparent; transition: background .12s; font-family: var(--sans);
}
.navbtn:hover:not(.is-active) { background: oklch(1 0 0 / 0.06); }
.navbtn.is-active { background: oklch(0.5 0.17 257 / 0.9); box-shadow: inset 2px 0 0 var(--aps-red); }

/* keyframes */
@keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 0.7; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }
@keyframes dash-move { to { stroke-dashoffset: -1000; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.fade-up { animation: fade-up .32s cubic-bezier(.2,.7,.3,1) both; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; } }

/* ---- overlays ---- */
.ov-backdrop {
  position: fixed; inset: 0; z-index: 1000; background: oklch(0.2 0.04 256 / 0.42);
  backdrop-filter: blur(2px); display: flex; animation: ov-fade .16s ease both;
}
.ov-backdrop.center { align-items: center; justify-content: center; padding: 32px; }
.ov-backdrop.right { justify-content: flex-end; }
.ov-modal {
  background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-pop);
  border: 1px solid var(--line); display: flex; flex-direction: column;
  max-height: calc(100vh - 64px); width: 100%;
}
.ov-drawer {
  background: var(--surface); box-shadow: var(--shadow-pop); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; height: 100vh; width: 100%;
}
/* No entrance transform/opacity on the panels themselves: a throttled iframe can
   stall an animation at its `from` keyframe, which would hide or offset the panel.
   Panels render at their visible base state; only the backdrop fades. */
.ov-head {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--line); flex: none;
}
.ov-body { overflow: auto; flex: 1; }
.ov-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  padding: 14px 20px; border-top: 1px solid var(--line); flex: none; background: var(--surface-2);
}
.ov-close {
  width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--line-2);
  background: var(--surface); cursor: pointer; display: grid; place-items: center; color: var(--ink-2); flex: none;
}
.ov-close:hover { background: var(--surface-3); }
@keyframes ov-fade { from { opacity: 0; } }
@keyframes ov-pop { from { opacity: 0; transform: translateY(10px) scale(.99); } }
@keyframes ov-slide { from { transform: translateX(100%); } }
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 1100;
  background: var(--aps-navy); color: #fff; padding: 11px 16px 11px 14px; border-radius: 10px;
  box-shadow: var(--shadow-pop); display: flex; align-items: center; gap: 10px; font-size: 13.5px;
  animation: toast-in .24s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }

/* form controls */
.fld-label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500; margin-bottom: 7px; }
.fld-input, .fld-select {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--surface); font-family: var(--sans); font-size: 13.5px; color: var(--ink); outline: none;
}
.fld-input:focus, .fld-select:focus { border-color: var(--aps-blue); box-shadow: 0 0 0 3px color-mix(in oklch, var(--aps-blue) 14%, transparent); }
.fld-input.mono { font-family: var(--mono); }
textarea.fld-input { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.dropzone {
  border: 1.5px dashed var(--line-2); border-radius: 10px; padding: 28px; text-align: center;
  background: var(--surface-2); cursor: pointer; transition: border-color .12s, background .12s;
}
.dropzone:hover { border-color: var(--aps-blue); background: color-mix(in oklch, var(--aps-blue) 5%, var(--surface-2)); }