/* Productivity app — uses the same design tokens as the Steinweg Hub (style.css). */
.page { min-height: 100vh; }
.content { padding: 24px 28px; display: flex; flex-direction: column; gap: 20px; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 20px 22px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.card-head h2 { font-size: 16px; font-weight: 600; color: var(--text-primary); margin: 0; }
.doc-id { font-size: 12px; color: var(--text-tertiary); font-weight: 500; }
.card-actions { display: flex; gap: 10px; align-items: center; }

.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 18px; }

.btn-primary {
  background: var(--steinweg-teal); color: #fff; border: none; border-radius: var(--radius);
  padding: 9px 16px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: var(--transition);
}
.btn-primary:hover { background: var(--steinweg-dark-navy); }
.btn-ghost {
  background: var(--background-alt); color: var(--text-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 14px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: var(--transition);
}
.btn-ghost:hover { background: #E8F4F6; color: var(--steinweg-teal); border-color: var(--steinweg-teal); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border-light); border-radius: var(--radius); }
.prod-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.prod-table thead th {
  background: var(--background-alt); color: var(--text-secondary); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em; padding: 9px 8px; text-align: left; border-bottom: 1px solid var(--border);
}
.prod-table tbody td { padding: 4px 6px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); }
.prod-table tbody tr:last-child td { border-bottom: none; }
.cell-input {
  width: 100%; min-width: 52px; border: 1px solid transparent; background: transparent; font: inherit; font-size: 13px;
  padding: 6px 6px; border-radius: 6px; color: var(--text-primary);
}
.cell-input:hover { background: var(--background-alt); }
.cell-input:focus { outline: none; border-color: var(--steinweg-teal); background: #fff; box-shadow: 0 0 0 3px rgba(0,107,127,.10); }
select.cell-input { min-width: 150px; }
.cell-input.num { min-width: 54px; text-align: right; }
.cargo-sel { min-width: 170px; }
.hold-cell { background: #FAFCFD; }
.total-cell { font-weight: 600; text-align: right; color: var(--steinweg-dark-navy); }
.hrs-cell { font-weight: 600; text-align: right; color: var(--steinweg-teal); }
.hrs-cell.warn { color: var(--danger); }
.row-del { border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.row-del:hover { background: #FEF2F2; color: var(--danger); }

.kpi-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.hold-tag { font-size: 11px; font-weight: 600; color: var(--steinweg-gold); margin-left: 6px; }
.note { margin: 12px 2px 0; font-size: 13px; color: var(--danger); background: #FEF2F2; border: 1px solid #FECACA; padding: 9px 12px; border-radius: var(--radius); }
.warn { color: var(--danger); font-weight: 600; }

.checkbox-row { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-secondary); }
.link-muted { color: var(--steinweg-teal); font-size: 13px; text-decoration: none; }
.btn-ghost input[type=file] { display: none; }

.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 50; background: var(--text-primary); color: #fff;
  padding: 12px 18px; border-radius: var(--radius); box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 500; max-width: 360px;
}
.toast.success { background: var(--success); }
.toast.warn { background: var(--warning); }

.topbar-right { display: flex; align-items: center; gap: 14px; }
.sidebar-logo-wrap span { font-weight: 700; color: var(--text-primary); }

@media print {
  .sidebar, .topbar, .card-actions, .row-del, #login { display: none !important; }
  .main-area { margin: 0 !important; }
  .content { padding: 0; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  body { background: #fff; }
}

/* ---- Gang planning ---- */
.gang-rec {
  background: linear-gradient(135deg, #E8F4F6, #F8FCFF); border: 1px solid #BAE0E6;
  border-left: 4px solid var(--steinweg-gold); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 18px;
}
.rec-main { font-size: 16px; color: var(--text-primary); }
.rec-main b { color: var(--steinweg-teal); }
.rec-sub { font-size: 13px; color: var(--text-secondary); margin-top: 5px; }
.gang-layout { display: grid; grid-template-columns: minmax(280px, 0.9fr) 1.3fr; gap: 22px; }
@media (max-width: 900px){ .gang-layout { grid-template-columns: 1fr; } }
.mini-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); margin-bottom: 10px; }
.scenario-table { width: 100%; }
.scenario-head th { font-size: 10px !important; padding: 6px 8px !important; }
.scenario-row { cursor: pointer; transition: var(--transition); }
.scenario-row td { padding: 8px !important; border-bottom: 1px solid var(--border-light); }
.scenario-row:hover { background: var(--background-alt); }
.scenario-row.sel { background: #E8F4F6; box-shadow: inset 3px 0 0 var(--steinweg-teal); }
.scenario-row.optimal td { font-weight: 600; }
.sweet { color: var(--steinweg-gold); font-weight: 700; font-size: 12px; }
.hint, .balance-note { font-size: 12px; color: var(--text-tertiary); margin-top: 10px; font-style: italic; }
.grow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.glabel { width: 64px; font-size: 13px; font-weight: 600; color: var(--text-secondary); flex-shrink: 0; }
.gbar { flex: 1; display: flex; height: 30px; border-radius: 6px; overflow: hidden; background: var(--background-alt); }
.gseg { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; font-weight: 600; min-width: 22px; border-right: 1px solid rgba(255,255,255,.35); }
.gseg:last-child { border-right: none; }
.gload { width: 54px; text-align: right; font-weight: 600; font-size: 13px; color: var(--steinweg-dark-navy); flex-shrink: 0; }

/* ---- Views / tally / production ---- */
.vessel-tag { margin-left: 14px; font-size: 13px; color: var(--text-tertiary); font-weight: 500; }
.btn-sm { padding: 4px 10px !important; font-size: 12px !important; }
.shift-block { border: 1.5px solid #C4D2DD; border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 18px; }
.shift-block.z0 { background: #FFFFFF; }
.shift-block.z1 { background: #E9EFF4; }
.shift-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-bottom: 9px; border-bottom: 2px solid #003F59; }
.shift-no { font-weight: 800; color: #003F59; font-size: 15px; }
.shift-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 14px; }
.tf { display: flex; flex-direction: column; gap: 3px; }
.tf label { font-size: 11px; color: var(--text-tertiary); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.tf .cell-input { border: 2px solid #000; border-radius: 6px; background: #fff; min-width: 0; }
.net-val { font-weight: 700; color: var(--steinweg-dark-navy); padding: 7px 0; font-size: 14px; }
.holds-wrap { margin-top: 12px; }
.holds-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; }
@media (max-width: 1100px){ .holds-row { grid-template-columns: repeat(6, 1fr); } }
.hold-in { display: flex; flex-direction: column; gap: 2px; }
.hold-in span { font-size: 10px; color: var(--text-tertiary); text-align: center; font-weight: 600; }
.hold-in .cell-input { border: 2px solid #000; border-radius: 6px; background: #fff; text-align: center; padding: 6px 2px; }
.delays-wrap { margin-top: 12px; }
.delays-wrap summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--steinweg-teal); padding: 4px 0; }
.delays-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; margin-top: 8px; }
.delay-in { display: flex; flex-direction: column; gap: 2px; }
.delay-in span { font-size: 10px; color: var(--text-tertiary); }
.delay-in .cell-input { border: 2px solid #000; border-radius: 6px; background: #fff; padding: 5px; }
.pbar { display: inline-block; width: 120px; height: 8px; background: var(--background-alt); border-radius: 5px; overflow: hidden; vertical-align: middle; }
.pfill { height: 100%; background: var(--success); border-radius: 5px; }
.ppct { font-size: 12px; color: var(--text-secondary); margin-left: 8px; }

/* ---- Production dashboard ---- */
.dash-charts { display: grid; grid-template-columns: 240px 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 1100px){ .dash-charts { grid-template-columns: 1fr; } }
.chart-box { min-width: 0; }
.donut-wrap { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.dc-pct { font-size: 34px; font-weight: 700; color: var(--steinweg-dark-navy); line-height: 1; }
.dc-sub { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.bal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px){ .bal-grid { grid-template-columns: 1fr; } }
.bal-open { color: var(--danger); font-weight: 600; }
.bal-done { color: var(--success); font-weight: 600; }
.zero { color: var(--border); }
.matrix-tot td { background: var(--background-alt); border-top: 2px solid var(--border); }
#matrixTable td, #matrixTable th { text-align: right; }
#matrixTable td:first-child, #matrixTable th:first-child { text-align: left; }

/* ---- vs standard badges ---- */
.vs { display: inline-block; padding: 2px 9px; border-radius: 20px; font-weight: 700; font-size: 12px; }
.vs-good { background: var(--success-bg); color: var(--success); }
.vs-mid  { background: var(--warning-bg); color: var(--warning); }
.vs-bad  { background: #FEF2F2; color: var(--danger); }
.vs-na { color: var(--text-tertiary); }

/* ---- berth overview ---- */
.ovbar { display: inline-block; width: 140px; height: 9px; background: var(--background-alt); border-radius: 5px; overflow: hidden; vertical-align: middle; }
.ovfill { height: 100%; border-radius: 5px; }

/* ========== UX PASS: readability + usability ========== */
/* darker tertiary text for contrast (was #94A3B8 ~2.8:1 -> #64748B ~4.7:1 passes WCAG AA) */
:root { --text-tertiary: #64748B; }
.hint { color: #64748B; }
.kpi-sub, .doc-id, .ppct, .kpi-label, .mini-head { color: #5A6B7F; }
.tf label, .hold-in span, .delay-in span { color: #000; font-weight: 700; }
.mini-head { color: #000; }
.kpi-label { font-weight: 700; }
.rec-sub { color: #4A5568; }

/* topbar: vessel switcher + save status */
.topbar-left { display: flex; align-items: center; gap: 0; }
.veswitch { border: 1px solid var(--border); border-radius: var(--radius); padding: 7px 12px; font: inherit; font-size: 13px; font-weight: 600; color: var(--steinweg-dark-navy); background: #fff; min-width: 200px; cursor: pointer; }
.veswitch:hover { border-color: var(--steinweg-teal); }
.save-status { font-size: 12px; font-weight: 600; min-width: 90px; }
.save-status.saving { color: var(--warning); }
.save-status.saved { color: var(--success); }
.save-status.dirty { color: var(--text-tertiary); }

/* clickable overview rows (manager drill-in) */
#ovBerths tbody tr { cursor: pointer; }
#ovBerths tbody tr:hover { background: #E8F4F6; }
.row-hint { font-size: 11px; color: var(--text-tertiary); font-weight: 400; }

/* current-vessel banner on data-entry views */
.ctx-bar { background: #F2F6F9; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 9px 14px; margin-bottom: 16px; font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.ctx-bar b { color: var(--steinweg-dark-navy); }
.ctx-bar.empty { color: var(--warning); background: var(--warning-bg); border-color: #FDE68A; }

/* ---- shift log (Excel-style wide table) ---- */
.shift-log { font-size: 12.5px; }
.shift-log th, .shift-log td { white-space: nowrap; padding: 6px 8px; }
.shift-log .hcol { text-align: right; min-width: 42px; background: #FAFCFD; }
.shift-log thead .hcol { background: #ECF3F6; color: var(--steinweg-dark-navy); }
.shift-log .op { color: var(--text-secondary); font-size: 12px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.shift-log tbody tr:hover td { background: #F4F9FB; }
.shift-log .total-cell { background: #F2F6F9; }

/* ---- shift with multiple gangs ---- */
.shift-head { flex-wrap: wrap; gap: 8px; }
.shift-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.shift-when { margin-bottom: 6px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); grid-template-columns: repeat(auto-fit, minmax(160px, 220px)) !important; }
.gang-block { border: 1px solid var(--border-light); border-left: 3px solid var(--steinweg-teal); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0 0; background: #fff; }
.gang-block.todo { background: #FFF7E6; border-left-color: #E0A12B; }
.gang-block.todo .gang-no::after { content: ' · to fill'; color: #b5781a; font-weight: 700; font-size: 12px; }
.perf { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); padding: 9px 0 1px; }
.perf b { font-weight: 800; }
.perf.good { color: #1d7a52; } .perf.mid { color: #b5781a; } .perf.low { color: #c0392b; }
/* visual hold-picker (ship hull) */
.hold-ship { display: flex; gap: 5px; border: 2px solid #003F59; border-radius: 10px 30px 30px 10px; padding: 9px 18px 9px 10px; background: #F4F8FA; }
.hcell { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 8px; padding: 8px 2px; background: #fff; border: 1.5px solid #CBD5E1; cursor: pointer; min-height: 54px; }
.hcell:not(.on):hover { background: #EAF1F4; border-color: #006B7F; }
.hcell:not(.on):hover .hlab { color: #006B7F; }
.hcell.on { cursor: default; border-color: #003F59; }
.hlab { font-size: 11px; font-weight: 800; color: #9AA7B2; }
.hcell.on .hlab { color: #003F59; }
.hplus { font-size: 17px; color: #B6C2CC; font-weight: 700; line-height: .7; }
.hqty { width: 100%; text-align: center; border: 1.5px solid #000 !important; border-radius: 6px; padding: 5px 2px; font-size: 13px; }
@media (max-width: 1100px){ .hold-ship { flex-wrap: wrap; border-radius: 12px; padding: 9px; } .hcell { flex: 0 0 calc(16.66% - 5px); } }
/* gang sections + delay chips (#5) */
.gsec { margin-top: 14px; }
.gsec-h { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #006B7F; margin-bottom: 9px; padding-bottom: 5px; border-bottom: 1px solid #DBE4EB; }
.delay-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.dchip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid #CBD5E1; border-radius: 18px; padding: 6px 12px; background: #fff; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #64748B; }
.dchip:not(.on):hover { border-color: #006B7F; color: #006B7F; }
.dchip .dplus { font-weight: 800; color: #94A3B8; }
.dchip:not(.on):hover .dplus { color: #006B7F; }
.dchip.on { cursor: default; border-color: #003F59; color: #003F59; background: #F4F8FA; }
.dqty { width: 56px; text-align: center; border: 1.5px solid #000 !important; border-radius: 6px; padding: 4px 2px; font-size: 12.5px; }
/* KPI sparklines + timeline legend (dashboard visuals) */
.kpi-spark { display: block; width: 100% !important; height: 30px !important; margin-top: 8px; }
.time-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #EEF2F7; }
.tl-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: #475569; }
.tl-key i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
/* visual ship hold-plan (Dashboard A) */
.plan-ship { display: flex; gap: 6px; border: 2px solid #003F59; border-radius: 10px 44px 44px 10px; padding: 12px 30px 12px 12px; background: #F4F8FA; align-items: stretch; }
.pcell { position: relative; flex: 1; min-height: 132px; border: 1.5px solid #CBD5E1; border-radius: 6px; background: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.pcell.off { opacity: .38; }
.pcell .pfill-v { width: 100%; background: linear-gradient(180deg, #0a8aa3, #006B7F); transition: height .55s ease; }
.pcell.full .pfill-v { background: linear-gradient(180deg, #1f9268, #16623f); }
.pcell .plab { position: absolute; top: 6px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 800; color: #003F59; z-index: 2; }
.pcell .ppctv { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 14px; font-weight: 800; color: #003F59; z-index: 2; line-height: 1.3; background: rgba(255, 255, 255, .86); padding: 4px 8px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 63, 89, .12); }
.pcell .ppctv small { display: block; font-size: 9.5px; font-weight: 600; color: #475569; }
.pcell.full .plab { color: #fff; }
@media (max-width: 900px) { .plan-ship { flex-wrap: wrap; border-radius: 12px; padding: 10px; } .pcell { flex: 0 0 calc(16.66% - 6px); min-height: 96px; } }
/* ===== navigation redesign: grouped sidebar, SVG icons, vessel-context header, tabs, segmented toggle ===== */
.sidebar-logo-wrap span { color: #EAF3F7; font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.nav-group { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.42); margin: 14px 12px 5px; }
.sidebar-nav .nav-group:first-child { margin-top: 4px; }
.nav-sep { height: 1px; background: rgba(255,255,255,.14); margin: 12px 10px; }
.sidebar-nav svg.nav-icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: rgba(255,255,255,.55); }
.nav-item:hover svg.nav-icon, .nav-item.active svg.nav-icon { color: #fff; }
/* vessel-context header (Planning / Tally / Production) */
.vctx { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #DCE5EB; border-left: 4px solid #006B7F; border-radius: 12px; padding: 14px 20px; margin-bottom: 18px; }
.vctx.empty { border-left-color: #E0A12B; color: #7a5b16; background: #FFF7E6; font-weight: 600; font-size: 13.5px; }
.vctx-main { display: flex; flex-direction: column; gap: 2px; }
.vctx-name { font-size: 19px; font-weight: 800; color: #003049; line-height: 1.1; }
.vctx-meta { font-size: 13px; color: #5A6B79; font-weight: 600; }
.vctx-pill { margin-left: auto; background: #EAF1F5; color: #006B7F; font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 20px; white-space: nowrap; }
.vctx-pill.done { background: #E6F4EC; color: #1d7a52; }
/* Production tabs */
.tabstrip { display: flex; gap: 4px; border-bottom: 1px solid #DCE5EB; margin-bottom: 18px; }
.tabbtn { background: none; border: none; padding: 9px 18px; font-family: inherit; font-weight: 700; font-size: 14px; color: #64748B; border-bottom: 3px solid transparent; cursor: pointer; margin-bottom: -1px; }
.tabbtn:hover { color: #003049; }
.tabbtn.on { color: #006B7F; border-bottom-color: #006B7F; }
/* segmented Map/List toggle */
.seg-toggle { display: inline-flex; border: 1.5px solid #CBD9E2; border-radius: 8px; overflow: hidden; }
.seg { background: #fff; border: none; padding: 6px 16px; font-family: inherit; font-weight: 700; font-size: 13px; color: #64748B; cursor: pointer; }
.seg + .seg { border-left: 1.5px solid #CBD9E2; }
.seg.on { background: #006B7F; color: #fff; }
/* vessel status badges + sign-off bar */
.stbadge { display: inline-block; padding: 3px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.st-plan { background: #EEF2F7; color: #64748B; }
.st-prog { background: #E1F0F4; color: #006B7F; }
.st-done { background: #E6F4EC; color: #1d7a52; }
/* live quay board: running-vs-norm + gang advice (#3) */
.runpill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.run-good { background: #E6F4EC; color: #1d7a52; }
.run-mid { background: #FBF1DC; color: #b5781a; }
.run-low { background: #FBE9E7; color: #c0392b; }
.run-na { color: #94A3B8; font-size: 12px; font-weight: 600; }
.run-delay { font-size: 11px; font-weight: 700; color: #c0392b; margin-left: 6px; }
.adv { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 800; margin-left: 6px; white-space: nowrap; }
.adv-up { background: #FCE9D6; color: #b5530f; }
.adv-down { background: #E1F0F4; color: #006B7F; }
.adv-ok { background: #E6F4EC; color: #1d7a52; }
.row-sub { font-size: 11px; color: #94A3B8; font-weight: 600; }
.unit { color: #94A3B8; font-weight: 600; font-size: 11px; }
.row-archived { opacity: .58; background: #F8FAFC; }
.row-archived td:first-child b::after { content: ' · archived'; font-weight: 600; color: #94A3B8; font-size: 11px; }
/* ===== Settings master-data editor ===== */
.set-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.set-card .card-head { margin-bottom: 12px; }
.set-list { display: flex; flex-direction: column; gap: 6px; }
.set-row { display: flex; gap: 6px; align-items: center; }
.set-inp { flex: 1; min-width: 0; border: 1.5px solid #CBD9E2; border-radius: 7px; padding: 7px 9px; font-size: 13px; font-family: inherit; color: #1E293B; background: #fff; }
.set-inp:focus { outline: none; border-color: #006B7F; }
.set-inp.num { max-width: 150px; }
.set-del { border: none; background: #FBE9E7; color: #c0392b; border-radius: 6px; width: 28px; height: 30px; cursor: pointer; font-size: 12px; flex-shrink: 0; font-weight: 700; }
.set-del:hover { background: #f3c4bd; }
.set-add { margin-top: 4px; align-self: flex-start; }
.set-objlist { display: flex; flex-direction: column; gap: 6px; }
.set-orow { display: flex; gap: 8px; align-items: center; }
.set-ocell { flex: 1; min-width: 0; }
.set-ocell .set-inp { width: 100%; }
.set-ohead { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #64748B; padding: 0 2px; }
.set-ocell-x { flex: 0 0 36px; }
.set-sub { margin-top: 14px; }
.set-sub-h { font-size: 12px; font-weight: 800; color: #006B7F; margin-bottom: 7px; text-transform: uppercase; letter-spacing: .03em; }
.set-status { font-size: 12.5px; font-weight: 700; margin-right: 12px; }
.set-status.dirty { color: #b5781a; } .set-status.saved { color: #1d7a52; }
@media (max-width: 1000px) { .set-grid { grid-template-columns: repeat(2, 1fr); } }
.rate-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 14px; }
.rate-lbl { font-size: 12.5px; font-weight: 700; color: #003049; }
.rate-custom { display: inline-flex; align-items: center; gap: 8px; }
.set-inp-period { max-width: 180px; }
.rate-preview { margin-top: 6px; }
.rate-new { color: #1d7a52; }
.rate-nodata { color: #94A3B8; font-size: 12px; font-weight: 600; }
/* ===== roles (read-only gating) ===== */
.ro-banner { display: flex; align-items: center; gap: 8px; background: #FFF7E6; color: #8a6d1a; border-bottom: 1px solid #f0dca8; padding: 8px 24px; font-size: 13px; font-weight: 700; }
.ro-banner svg { stroke: #b5781a; flex-shrink: 0; }
.view-ro input:disabled, .view-ro select:disabled, .view-ro textarea:disabled { background: #f1f4f7 !important; color: #64748b !important; cursor: not-allowed; border-color: #dbe3ea !important; }
.view-ro .hplus, .view-ro .dplus { pointer-events: none; opacity: .4; }
.view-ro .dchip:not(.on) { pointer-events: none; opacity: .6; }
.view-ro .hcell:not(.on) { pointer-events: none; }
/* trends-over-time euro control + summary (#4) */
.euro-ctl label { font-weight: 700; font-size: 13px; color: #003049; display: inline-flex; align-items: center; gap: 6px; }
.euro-ctl input { width: 64px; border: 1.5px solid #CBD9E2; border-radius: 7px; padding: 5px 7px; font-size: 13px; font-weight: 700; text-align: center; }
.euro-summary { background: #F4F8FA; border: 1px solid #DCE5EB; border-left: 4px solid #D9AA27; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; color: #334155; }
.euro-summary .eu-ctrl { color: #b5530f; }
.euro-summary .eu-rate { color: #94A3B8; font-weight: 600; font-size: 12.5px; }
.signoff-bar { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #DCE5EB; border-radius: 10px; padding: 11px 18px; margin-bottom: 16px; }
.signoff-bar label { display: inline-flex; align-items: center; gap: 9px; font-weight: 700; color: #003049; cursor: pointer; font-size: 14px; }
.signoff-bar input { width: 18px; height: 18px; accent-color: #1d7a52; cursor: pointer; }
.so-done { color: #1d7a52; font-weight: 700; font-size: 13px; }
.so-ready { color: #b5781a; font-weight: 700; font-size: 13px; }
/* collapsible gangs */
.grow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1.5px solid #E2EAF0; border-radius: 10px; margin: 6px 0; background: #fff; cursor: pointer; }
.grow:hover { border-color: #9FB6C4; }
.grow.todo { background: #FFFBF2; border-color: #F0D9A8; }
.gdot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.gdot.ok { background: #1d9d63; } .gdot.todo { background: #E0A12B; }
.gname { font-weight: 800; color: #003049; font-size: 13.5px; width: 58px; flex-shrink: 0; }
.gsum { color: #334155; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsum b { color: #003049; }
.gsum.tofill { color: #b5781a; font-weight: 700; }
.gright { margin-left: auto; display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.gprod { font-size: 13px; color: #5A6B79; font-weight: 600; white-space: nowrap; }
.gpct { font-weight: 800; font-size: 12.5px; padding: 3px 10px; border-radius: 20px; }
.gpct.good { background: #E6F4EC; color: #1d7a52; } .gpct.mid { background: #FBF1DC; color: #b5781a; } .gpct.low { background: #FBE9E7; color: #c0392b; }
.chev { color: #94A3B8; font-size: 14px; width: 14px; text-align: center; }
.gang-open { border: 2px solid #006B7F; border-radius: 10px; margin: 6px 0; background: #fff; overflow: hidden; }
.gang-open.todo { border-color: #E0A12B; }
.gang-open-head { display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #F1F8FA; border-bottom: 1px solid #DCEAEF; cursor: pointer; }
.gang-open.todo .gang-open-head { background: #FFFBF2; border-bottom-color: #F0D9A8; }
.gang-open-body { padding: 14px 16px 18px; }
.gang-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.gang-no { font-weight: 700; color: var(--steinweg-teal); font-size: 13px; }

/* ---- berth status + previous calls ---- */
.berth-status { font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 20px; }
.berth-status.occ { background: var(--success-bg); color: var(--success); }
.berth-status.free { background: var(--background-alt); color: var(--text-tertiary); }
.prev-calls { margin-top: 12px; }
.prev-calls summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 6px 0; }
.prev-calls .prod-table { opacity: 0.72; }
.prev-calls .prod-table tbody tr:hover { opacity: 1; }

/* ============ DISPATCH — quay control room ============ */
.disp-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.disp-h1 { font-size: 22px; color: var(--steinweg-navy); font-weight: 800; }
.disp-sub { color: var(--text-secondary); font-size: 13px; margin-top: 2px; }
.disp-shiftbox { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.disp-lab { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); font-weight: 700; line-height: 1.25; }
.disp-ginput { font-size: 30px; font-weight: 800; color: var(--steinweg-teal); line-height: 1; border: 2px solid var(--steinweg-teal); border-radius: 10px; padding: 4px 10px; background: #F0FAFC; width: 86px; text-align: center; }
.disp-exec { background: linear-gradient(90deg, #003F59, #006B7F); color: #EAF6F9; border-radius: 14px; padding: 15px 20px; font-size: 15px; line-height: 1.55; margin-bottom: 16px; }
.disp-exec .dlab { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #9FD3DE; font-weight: 700; margin-bottom: 4px; }
.disp-exec b { color: #fff; }
.disp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.dkpi { background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 12px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.dkpi .dk { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); font-weight: 700; }
.dkpi .dv { font-size: 24px; font-weight: 800; margin-top: 3px; color: var(--steinweg-navy); }
.dkpi .ds { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.dkpi.teal { border-top: 3px solid var(--steinweg-teal); }
.dkpi.navy { border-top: 3px solid var(--steinweg-navy); }
.dkpi.gold { border-top: 3px solid var(--steinweg-gold); }
.dkpi.green { border-top: 3px solid #1E9E62; }
.disp-sec-h { font-size: 15px; color: var(--steinweg-navy); font-weight: 800; margin: 4px 2px 10px; }
.dvcard { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05); display: flex; margin-bottom: 11px; overflow: hidden; }
.dvc-main { flex: 1; padding: 14px 18px; min-width: 0; }
.dvc-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; flex-wrap: wrap; }
.dberth { display: inline-block; background: var(--steinweg-navy); color: #fff; border-radius: 7px; padding: 3px 10px; font-weight: 800; font-size: 12px; }
.dvname { font-weight: 800; font-size: 16px; color: var(--text-primary); }
.dstatus { font-size: 12px; font-weight: 800; border-radius: 20px; padding: 3px 12px; margin-left: auto; }
.dvc-cargo { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; }
.dcommod { background: #EEF3F7; color: var(--steinweg-navy); font-weight: 700; font-size: 12px; border-radius: 6px; padding: 3px 9px; text-transform: uppercase; letter-spacing: .03em; }
.dcargo { font-size: 13px; color: var(--text-primary); }
.dcname { font-weight: 700; }
.dcqty { color: var(--text-secondary); }
.dcargo:not(:last-child)::after { content: '·'; color: #CBD5E1; margin-left: 7px; }
.dcmore { font-size: 12px; color: var(--text-tertiary); font-style: italic; }
.dvc-prog { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dbarwrap { width: 160px; height: 9px; background: #E6EDF2; border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.dbar { height: 100%; }
.dprogtxt { font-size: 13px; color: var(--text-secondary); }
.dprogtxt b { color: var(--text-primary); }
.dvc-action { width: 300px; flex-shrink: 0; background: #F7FAFC; border-left: 1px solid var(--border); padding: 13px 18px; display: flex; flex-direction: column; justify-content: center; }
.dga-num { font-size: 15px; color: var(--text-secondary); }
.dga-num b { font-size: 30px; color: var(--steinweg-teal); font-weight: 800; margin-right: 4px; }
.dga-delta { font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; }
.dup { color: #1E9E62; font-weight: 800; }
.ddown { color: #C77B0A; font-weight: 800; }
.dok { color: var(--text-secondary); font-weight: 700; }
.dwarn { color: var(--danger, #DC2626); font-weight: 800; }
.dvc-holds { margin-bottom: 7px; }
.dvc-holds .dgpill { display: inline-block; background: #F0FAFC; border: 1px solid #BFE0E7; color: var(--steinweg-teal); border-radius: 7px; padding: 2px 9px; font-size: 12px; margin: 1px 3px 1px 0; }
.dvc-holds .dgpill b { color: var(--steinweg-navy); }
.dvc-finish { font-size: 13px; color: var(--text-secondary); }
.dvc-finish b { color: var(--steinweg-navy); }
.dmuted { color: var(--text-tertiary); }
.disp-note { margin-top: 8px; }
@media (max-width: 900px) {
  .disp-kpis { grid-template-columns: repeat(2, 1fr); }
  .dvcard { flex-direction: column; }
  .dvc-action { width: auto; border-left: none; border-top: 1px solid var(--border); }
}

/* ============ QUAY PULSE — interactive control room ============ */
#view-quaypulse { --qpteal:#006B7F; --qpnavy:#003F59; --qpink:#1E293B; --qpsub:#64748B; --qptrack:#E6EDF2; }
.qp-wrap { display:flex; flex-direction:column; gap:16px; }
.qp-header { display:flex; align-items:flex-end; justify-content:space-between; }
.qp-title { font-size:25px; font-weight:800; letter-spacing:.5px; color:var(--qpnavy); }
.qp-title span { color:var(--qpteal); }
.qp-subtitle { font-size:12px; color:var(--qpsub); letter-spacing:.16em; text-transform:uppercase; margin-top:3px; }
.qp-clock { text-align:right; }
.qp-clock .t { font-size:21px; font-weight:800; color:var(--qpteal); letter-spacing:.5px; font-variant-numeric:tabular-nums; }
.qp-clock .d { font-size:11px; color:var(--qpsub); letter-spacing:.12em; text-transform:uppercase; }
.qp-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.qp-kpi { background:#fff; border:1px solid var(--border); border-radius:14px; padding:13px 18px; position:relative; overflow:hidden; box-shadow:0 1px 3px rgba(16,40,60,.05); }
.qp-kpi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--qpteal); }
.qp-kpi .l { font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--qpsub); font-weight:700; }
.qp-kpi .v { font-size:29px; font-weight:800; color:var(--qpnavy); line-height:1.05; margin-top:4px; font-variant-numeric:tabular-nums; }
.qp-kpi .v small { font-size:15px; color:var(--qpsub); font-weight:600; }
.qp-kpi.gold::before { background:var(--steinweg-gold); } .qp-kpi.gold .v { color:#B98900; }
.qp-main { display:grid; grid-template-columns:300px 1fr 320px; gap:16px; align-items:start; }
.qp-col { display:flex; flex-direction:column; gap:13px; min-height:0; }
.qp-panel { background:#fff; border:1px solid var(--border); border-radius:16px; padding:15px 16px; box-shadow:0 1px 3px rgba(16,40,60,.05); }
.qp-panel h3 { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--qpsub); font-weight:700; margin-bottom:11px; }
.qp-vlist { flex:1; overflow:auto; display:flex; flex-direction:column; gap:9px; max-height:560px; }
.qp-chip { position:relative; display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px; cursor:pointer; background:#FBFDFE; border:1px solid var(--border); transition:transform .25s,border-color .25s,box-shadow .25s,background .25s; overflow:hidden; }
.qp-chip:hover { transform:translateX(3px); border-color:rgba(0,107,127,.4); }
.qp-chip.sel { background:linear-gradient(90deg,rgba(0,107,127,.08),#fff); border-color:var(--qpteal); box-shadow:0 0 0 1px var(--qpteal),0 6px 18px rgba(0,107,127,.12); }
.qp-chip .qp-berth { flex-shrink:0; background:var(--qpnavy); color:#fff; font-weight:800; font-size:11px; border-radius:7px; padding:4px 8px; letter-spacing:.04em; }
.qp-chip .qp-nm { flex:1; min-width:0; }
.qp-chip .qp-nm b { display:block; font-size:13.5px; color:var(--qpink); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qp-chip .qp-mini { display:block; height:4px; border-radius:3px; background:var(--qptrack); margin-top:6px; overflow:hidden; }
.qp-chip .qp-mini i { display:block; height:100%; border-radius:3px; transition:width .8s cubic-bezier(.2,.7,.2,1); }
.qp-chip .qp-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.qp-ripple { position:absolute; border-radius:50%; background:rgba(0,107,127,.22); transform:translate(-50%,-50%) scale(0); pointer-events:none; animation:qprip .6s ease-out forwards; }
@keyframes qprip { to { transform:translate(-50%,-50%) scale(9); opacity:0; } }
.qp-focus { display:flex; flex-direction:column; gap:14px; }
.qp-focus.flash { animation:qpflash .6s ease; }
@keyframes qpflash { 0%{box-shadow:0 1px 3px rgba(16,40,60,.05)} 30%{box-shadow:0 0 0 2px rgba(0,107,127,.5),0 10px 30px rgba(0,107,127,.18)} 100%{box-shadow:0 1px 3px rgba(16,40,60,.05)} }
.qp-fhead { display:flex; align-items:center; gap:14px; }
.qp-fhead .qp-fb { background:var(--qpnavy); color:#fff; font-weight:800; border-radius:9px; padding:6px 12px; font-size:14px; }
.qp-fhead .qp-fn { font-size:23px; font-weight:800; color:var(--qpink); }
.qp-fhead .qp-fc { font-size:12px; color:var(--qpsub); text-transform:uppercase; letter-spacing:.1em; }
.qp-fhead .qp-fstat { margin-left:auto; font-size:13px; font-weight:800; padding:5px 14px; border-radius:20px; }
.qp-dials { display:flex; gap:18px; align-items:center; }
.qp-dial { text-align:center; }
.qp-dial canvas { display:block; }
.qp-dial .cap { font-size:10.5px; color:var(--qpsub); text-transform:uppercase; letter-spacing:.1em; margin-top:2px; }
.qp-cargo-row { display:flex; flex-wrap:wrap; gap:7px; }
.qp-cgo { font-size:12px; color:var(--qpink); background:rgba(0,107,127,.06); border:1px solid rgba(0,107,127,.18); border-radius:7px; padding:4px 10px; opacity:0; transform:translateY(6px); transition:opacity .4s,transform .4s; }
.qp-cgo b { color:var(--qpnavy); } .qp-cgo.in { opacity:1; transform:none; }
.qp-holds h4 { font-size:10.5px; color:var(--qpsub); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; }
.qp-hrow { display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.qp-hrow .qp-hl { width:34px; font-size:12px; color:var(--qpsub); font-weight:700; }
.qp-hbar { flex:1; height:14px; background:var(--qptrack); border-radius:7px; overflow:hidden; position:relative; }
.qp-hbar .qp-load { position:absolute; inset:0; border-radius:7px; border:1px dashed rgba(100,116,139,.4); }
.qp-hbar .qp-done { height:100%; border-radius:7px; width:0; transition:width 1s cubic-bezier(.2,.7,.2,1); }
.qp-hrow .qp-hv { width:96px; text-align:right; font-size:11.5px; color:var(--qpsub); font-variant-numeric:tabular-nums; }
.qp-statbig { font-size:32px; font-weight:800; color:var(--qpnavy); font-variant-numeric:tabular-nums; }
.qp-statsub { font-size:12px; color:var(--qpsub); }
.qp-split { margin-top:6px; }
.qp-split .lab { display:flex; justify-content:space-between; font-size:11px; color:var(--qpsub); margin-bottom:5px; }
.qp-split .track { height:12px; border-radius:7px; overflow:hidden; display:flex; background:var(--qptrack); }
.qp-split .track i { height:100%; transition:width 1s cubic-bezier(.2,.7,.2,1); }
.qp-gnum { font-size:13px; color:var(--qpsub); margin-top:8px; }
.qp-gnum b { color:var(--qpink); font-size:16px; }
.qp-foot { font-size:10.5px; color:var(--qpsub); }
.qp-future { opacity:.7; }
.qp-future .l::after { content:' · coming soon'; color:#B98900; font-size:9px; }
@media (max-width: 1000px) { .qp-main { grid-template-columns:1fr; } .qp-kpis { grid-template-columns:repeat(2,1fr); } }

/* ============ QUAY BOARD (Overview · Map) — refined ============ */
#termQuay { --tnavy:#003F59; --tteal:#006B7F; --tink:#1E293B; --tsub:#64748B; }
.tq-board { display:flex; gap:12px; align-items:stretch; padding-bottom:14px; position:relative; }
.tq-board::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px;
  background:linear-gradient(90deg,rgba(0,107,127,.0),rgba(0,107,127,.35),rgba(0,107,127,.0)); }
.tq-berth { flex:1; min-width:0; display:flex; flex-direction:column; gap:9px; }
.tq-blabel { text-align:center; font-size:12.5px; font-weight:800; color:var(--tnavy); letter-spacing:.04em; padding:3px 0;
  position:relative; }
.tq-blabel::after { content:''; display:block; width:6px; height:6px; border-radius:50%; background:#9AA9B3; margin:5px auto 0; }
.tq-free { flex:1; min-height:96px; border:1.5px dashed #C4D2DC; border-radius:13px; display:flex; align-items:center; justify-content:center;
  background:repeating-linear-gradient(45deg,#F7FAFB,#F7FAFB 8px,#F2F6F9 8px,#F2F6F9 16px); }
.tq-free span { font-size:12px; font-weight:700; color:#9FB1BC; letter-spacing:.05em; }
.tq-ship { flex:1; background:#fff; border:1px solid var(--border); border-radius:13px; box-shadow:0 1px 3px rgba(16,40,60,.06);
  position:relative; overflow:hidden; cursor:pointer; transition:transform .2s, box-shadow .2s, border-color .2s;
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
.tq-ship:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(16,40,60,.12); }
.tq-ship.sel { border-color:var(--tteal); box-shadow:0 0 0 2px var(--tteal), 0 10px 26px rgba(0,107,127,.18); transform:translateY(-3px); }
.tq-stripe { height:5px; background:var(--st,#1E9E62); }
.tq-ship-in { display:flex; align-items:center; gap:10px; padding:11px 26px 12px 13px; }
.tq-ship-txt { flex:1; min-width:0; }
.tq-sname { font-size:13.5px; font-weight:800; color:var(--tink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tq-smeta { font-size:11px; color:var(--tsub); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tq-setc { font-size:10.5px; color:#94A3B8; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tq-ring { flex-shrink:0; }
.tq-ringfg { transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1); }
.tq-legend { font-size:11.5px; color:var(--tsub); margin-top:10px; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.tq-legend .tq-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin:0 3px 0 10px; }
.tq-legend .tq-dot:first-of-type { margin-left:0; }
.tq-legend .tq-hint { color:#94A3B8; margin-left:6px; }

/* hold plan */
.td-wrap { display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; margin-top:18px; }
.td-plan { flex:1; min-width:520px; }
.td-head { display:flex; align-items:baseline; gap:12px; margin-bottom:14px; }
.td-head h3 { font-size:16px; font-weight:800; color:var(--tnavy); }
.td-orient { font-size:10px; color:#94A3B8; letter-spacing:.1em; font-weight:700; }
.td-hull { display:flex; align-items:stretch; gap:10px; background:#F6F9FB; border:1.5px solid #DBE5EC; border-radius:14px;
  padding:16px 14px 14px; position:relative; }
.td-bow { width:42px; flex-shrink:0; align-self:stretch; margin-top:0; background:#E5ECF1; border-radius:8px;
  clip-path:polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%); }
.td-hold { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; }
.td-tank { position:relative; width:100%; height:150px; background:#E5ECF1; border-radius:8px; overflow:hidden; }
.td-fill { position:absolute; left:0; right:0; bottom:0; background:var(--c,#7C93A3); border-radius:8px 8px 7px 7px;
  transition:height 1s cubic-bezier(.2,.7,.2,1); box-shadow:0 -2px 10px rgba(0,107,127,.18); }
.td-hpct { position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:13px; font-weight:800; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25); }
.td-hold.bn .td-tank { box-shadow:0 0 0 2.5px var(--steinweg-gold); }
.td-hlabel { font-size:12px; font-weight:800; color:var(--tnavy); margin-top:7px; }
.td-warn { color:#C98A00; }
.td-hcargo { font-size:9.5px; color:#475569; margin-top:2px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.td-hto { font-size:9.5px; color:#94A3B8; margin-top:1px; text-align:center; }
.td-legend { font-size:11px; color:var(--tsub); margin-top:12px; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.td-legend .td-dot { width:9px; height:9px; border-radius:50%; display:inline-block; margin:0 3px 0 9px; }
.td-bnk { color:#C98A00; font-weight:700; margin-left:8px; }

.td-side { width:300px; flex-shrink:0; }
.td-bigring { text-align:center; margin:0 0 14px; }
.td-bigcap { font-size:11px; color:var(--tsub); text-transform:uppercase; letter-spacing:.6px; margin-top:2px; }
.td-kv { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #EEF2F6; font-size:13px; }
.td-kv.last { border-bottom:none; }
.td-k { color:var(--tsub); } .td-v { font-weight:700; color:var(--tink); }
.td-u { color:#94A3B8; font-weight:600; font-size:11px; }
.td-stat { font-size:12px; font-weight:800; padding:3px 11px; border-radius:20px; }
@media (max-width:1100px){ .td-plan{ min-width:0; } .td-side{ width:100%; } }

/* Berth Planning line-up picker */
.lineup-modal{position:fixed;inset:0;background:rgba(0,30,45,.45);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.lineup-box{background:#fff;border-radius:14px;width:560px;max-width:100%;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 18px 50px rgba(0,0,0,.25)}
.lineup-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #E2E8F0;font-weight:700;color:#003F59}
.lineup-list{overflow-y:auto;padding:6px 0}
.lu-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 18px;border-bottom:1px solid #EEF2F5;cursor:pointer}
.lu-row:hover{background:#F2F6F9}
.lu-row:last-child{border-bottom:0}
.lu-main{min-width:0}
.lu-chip{display:inline-block;background:#EAF3F7;color:#006B7F;border:1px solid #CFE3EC;border-radius:5px;padding:0 7px;font-size:11px;font-weight:600;margin:3px 4px 0 0}
.lu-chip.lu-pl{background:#EAF7EF;border-color:#BFE3CC;color:#1F6B3D}
.lu-st{font-size:11px;font-weight:700;color:#5B6B7A;background:#EEF2F5;border-radius:5px;padding:2px 8px;white-space:nowrap}
.lu-empty{padding:24px 18px;color:#64748B;font-size:13.5px}