/* Plain CSS so the Tailwind CDN (no build step) can render it as-is. */

:root {
  --bse-navy:   #0b2545;
  --bse-blue:   #134074;
  --bse-accent: #4fb3bf;
  --bse-yellow:      #facc15; /* highlight / hi-vis */
  --bse-yellow-soft: #fef9c3; /* background tint */
  --bse-yellow-deep: #a16207; /* readable text on soft yellow */
}

html, body { height: 100%; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background-color: #f1f5f9;
  color: #0f172a;
}

.bg-bse-navy        { background-color: var(--bse-navy); }
.bg-bse-blue        { background-color: var(--bse-blue); }
.bg-bse-yellow      { background-color: var(--bse-yellow); }
.bg-bse-yellow-soft { background-color: var(--bse-yellow-soft); }
.text-bse-accent    { color: var(--bse-accent); }
.text-bse-yellow    { color: var(--bse-yellow); }
.border-bse-yellow  { border-color: var(--bse-yellow); }

/* Marker-style text highlight, like a hi-vis pen */
.hi { background: linear-gradient(transparent 55%, var(--bse-yellow) 55%); padding: 0 0.1em; }

/* --- Nav links --- */
.nav-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0.75rem; border-radius: 0.5rem;
  color: #e2e8f0;
  transition: background-color 120ms ease;
  font-size: 0.95rem;
}
.nav-link:hover  { background-color: rgba(255,255,255,0.10); }
.nav-link.active { background-color: rgba(255,255,255,0.16); color: #ffffff; font-weight: 600; }
.nav-link svg    { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }

/* --- Cards & KPIs --- */
.card {
  background: #fff; border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15,23,42,0.05);
  border: 1px solid #e2e8f0;
}
.kpi { padding: 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.kpi h3 { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 600; }
.kpi .v { font-size: 1.75rem; font-weight: 700; color: #0f172a; }
.kpi .sub { font-size: 0.75rem; color: #64748b; }

/* --- Chips --- */
.chip {
  display: inline-flex; align-items: center; padding: 0.125rem 0.5rem;
  border-radius: 9999px; font-size: 0.7rem; font-weight: 600; line-height: 1;
}
.chip-blue  { background:#dbeafe; color:#1d4ed8; }
.chip-amber { background:#fef3c7; color:#92400e; }
.chip-green { background:#d1fae5; color:#065f46; }
.chip-rose  { background:#ffe4e6; color:#9f1239; }
.chip-slate { background:#f1f5f9; color:#334155; }
.chip-purple{ background:#ede9fe; color:#5b21b6; }
.chip-sky   { background:#e0f2fe; color:#0369a1; }
.chip-teal  { background:#ccfbf1; color:#115e59; }
.chip-yellow{ background:var(--bse-yellow-soft); color:var(--bse-yellow-deep); border: 1px solid #fde047; }

/* Hi-vis pill for callouts that should grab the eye */
.chip-hivis {
  background: var(--bse-yellow); color:#3f2d00; border:1px solid #ca8a04;
  font-weight: 700;
}

/* --- Buttons --- */
.btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.625rem 1rem; border-radius: 0.5rem; font-weight: 600; font-size: 0.9rem;
  transition: background-color 120ms ease, transform 80ms ease;
  cursor: pointer; border: 1px solid transparent;
}
.btn-primary   { background: var(--bse-blue); color: #fff; }
.btn-primary:hover   { background: var(--bse-navy); }
.btn-secondary { background:#fff; color:#0f172a; border-color:#cbd5e1; }
.btn-secondary:hover { background:#f1f5f9; }
.btn-danger    { background:#e11d48; color:#fff; }
.btn-danger:hover    { background:#be123c; }
.btn-ghost     { background:transparent; color:#0f172a; }
.btn-ghost:hover     { background:#f1f5f9; }
.btn-primary:active, .btn-secondary:active, .btn-danger:active { transform: scale(0.98); }

/* --- Form controls --- */
.input, .select, textarea.input {
  width: 100%; border-radius: 0.5rem; border: 1px solid #cbd5e1;
  padding: 0.625rem 0.75rem; font-size: 0.95rem; background: #fff; color: #0f172a;
}
.input:focus, .select:focus, textarea.input:focus {
  outline: none; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,0.25);
}
.label { display:block; font-size: 0.8rem; font-weight: 600; color:#334155; margin-bottom: 0.35rem; }

/* --- Tables --- */
table.bse { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.bse th {
  text-align: left; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.05em;
  color:#64748b; font-weight: 600; padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #e2e8f0; background:#f8fafc;
}
table.bse td {
  padding: 0.75rem; border-bottom: 1px solid #f1f5f9; color:#1f2937;
}
table.bse tbody tr:hover td { background:#f8fafc; }

/* --- Sidebar drawer (mobile) --- */
.sidebar { transform: translateX(-100%); transition: transform 200ms ease; }
.sidebar.open { transform: translateX(0); }
.sidebar-backdrop { display: none; }
.sidebar-backdrop.open {
  display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 30;
}
@media (min-width: 1024px) {
  .sidebar { transform: translateX(0) !important; position: static; }
  .sidebar-backdrop { display: none !important; }
}

/* --- Yard heatmap --- */
.rack-cell { aspect-ratio: 1 / 1; border-radius: 4px; }

/* --- Misc --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }
.divider { height: 1px; background:#e2e8f0; margin: 1rem 0; }

/* Station pills shown on cards */
.station-pill {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size: 0.75rem; font-weight: 600; color:#fff;
  padding: 0.15rem 0.5rem; border-radius: 9999px;
}

/* Workflow lane (station columns) */
.lane {
  background:#f8fafc; border:1px solid #e2e8f0; border-radius: 0.75rem;
  padding: 0.75rem; min-height: 240px; display:flex; flex-direction:column; gap:0.5rem;
}
.lane-head { display:flex; align-items:center; justify-content: space-between; margin-bottom: 0.25rem; }
.lane-head .name { font-weight: 700; color:#0f172a; font-size: 0.9rem; }
.lane-card {
  background:#fff; border:1px solid #e2e8f0; border-radius: 0.5rem; padding:0.6rem 0.75rem;
  box-shadow: 0 1px 1px rgba(15,23,42,0.04);
  display:flex; flex-direction:column; gap: 0.25rem;
  cursor: grab;
}
.lane-card:active { cursor: grabbing; }
.lane-card .id { font-weight:700; color:#0f172a; font-size:0.85rem; }
.lane-card .meta { font-size: 0.7rem; color:#64748b; }