:root{
  --pc-blue:#0b3d91;
  --pc-blue-700:#0a347b;
  --pc-bg:#f6f8fb;
  --pc-card:#ffffff;
  --pc-border:#e6e9ef;
  --pc-green:#2ea043;
  --pc-amber:#d97706;
  --pc-red:#dc2626;
  --pc-gray:#94a3b8;
  --col-status: 120px;   /* equal width with Dock */
  --col-dock:   120px;
  --col-carrier: 220px;
  --col-destination: 240px;
  --col-depart: 120px;
  --col-delivered: 140px;
  --col-remarks: 1fr;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial,sans-serif;
  background: var(--pc-bg);
  color:#0f172a;
}

.app-header{
  position: sticky;
  top:0;
  z-index: 20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:linear-gradient(180deg,var(--pc-blue),var(--pc-blue-700));
  color:#fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.15);
}

.brand{display:flex; align-items:center; gap:10px;}
.logo-dot{width:10px; height:10px; border-radius:50%; background:#fff; opacity:.9}
.brand-title{font-weight:600; letter-spacing:.2px}

.live-indicator{display:flex; align-items:center; gap:8px; font-size:14px}
.live-indicator .dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--pc-green);
  box-shadow: 0 0 0 0 rgba(46,160,67,.7);
  animation: pulse 2s infinite;
}
.live-indicator.stale .dot{
  background: var(--pc-gray);
  box-shadow:none;
  animation:none;
}
.live-indicator .label{opacity:.9}
.live-indicator.stale .label{display:none}
.live-indicator .stale-label{display:none}
.live-indicator.stale .stale-label{display:inline}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46,160,67,.7); }
  70% { box-shadow: 0 0 0 12px rgba(46,160,67,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,160,67,0); }
}

.container{max-width:1400px; margin:18px auto; padding:0 16px}

.table-wrap{
  background: var(--pc-card);
  border:1px solid var(--pc-border);
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

thead th{
  position: sticky; top: 52px; /* below header */
  background:#f8fafc;
  text-align:left;
  padding:12px 14px;
  font-weight:600;
  border-bottom:1px solid var(--pc-border);
  z-index: 10;
  white-space:nowrap;
}

thead th.col-status{width:var(--col-status)}
thead th.col-dock{width:var(--col-dock)}
thead th.col-carrier{width:var(--col-carrier)}
thead th.col-destination{width:var(--col-destination)}
thead th.col-depart{width:var(--col-depart); text-align:center}
thead th.col-delivered{width:var(--col-delivered); text-align:center}
thead th.col-remarks{width:var(--col-remarks)}

tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--pc-border);
  vertical-align:middle;
  background:#fff;
  transition: background-color .25s ease, outline-color .25s ease;
}

tbody tr.is-combo td{
  outline:2px solid #f59e0b55; /* subtle orange outline for combos */
  outline-offset:-2px;
}

tbody tr.status-geleverd td{ background:#e7f6ec } /* green tint when delivered */
tbody tr.status-vertrokken td{ background:#fff7ed } /* soft amber for departed (optional) */

td.col-depart, td.col-delivered{ text-align:center; font-variant-numeric: tabular-nums; }
td.col-status, td.col-dock{ width:auto } /* will follow header widths */

.status-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; font-weight:600; font-size:12px;
  line-height:1; letter-spacing:.2px;
}
.status-pill .svg{ width:16px; height:16px; display:inline-block; }

.status-aangemeld .status-pill{ background:#fff; color:#0f172a; border:1px solid var(--pc-border); }
.status-vertrokken .status-pill{ background:#fff6e5; color:#8a4f00; border:1px solid #f4d7a6; }
.status-geleverd .status-pill{ background:#eaf7ef; color:#196c2e; border:1px solid #bfe5c9; }

.ico{ width:14px; height:14px; display:inline-block; border-radius:50%; margin-right:8px; }
.legend .ico.status-aangemeld{ background:#cbd5e1; }
.legend .ico.status-vertrokken{ background:#f59e0b; }
.legend .ico.status-geleverd{ background:#22c55e; }

.badge-combo{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #f59e0b; color:#8a4f00; background:#fff7ed;
  padding:2px 6px; border-radius:6px; font-size:12px; font-weight:600;
}

.legend{
  margin-top:14px;
  background:#fff;
  border:1px solid var(--pc-border);
  border-radius:12px;
  padding:12px 14px;
}
.legend h3{ margin:0 0 8px 0; font-size:14px; color:#334155 }
.legend ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:10px; }
.legend li{ display:flex; align-items:center; gap:10px; }

/* Accessibility & polish */
tbody tr{ contain:layout style paint; } /* helps reduce flicker on updates */
tbody tr.updating td{ transition:none } /* skip transitions while updating quickly */
@media (prefers-reduced-motion: reduce){
  .live-indicator .dot{ animation:none }
  tbody td{ transition:none }
}