/* ── Font Loading ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=Source+Serif+4:wght@300;400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
/* ── Reset & Base ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* ═══ ANTARES — Silver Mode (default) ═══════════════════ */
:root{
  --radius:4px;--radius-sm:3px;--radius-xs:2px;--radius-table:3px;--radius-badge:10px;
  --sidebar-w:0px;--topnav-h:44px;--gap:10px;--pad:12px;
  --font:'DM Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --font-display:'Inter',system-ui,sans-serif;
  --transition:0.15s ease;
  --bg:#f0f1f3;--card:#ffffff;--border:#e0e2e6;--surface:#e8eaed;
  --dropdown-bg:#ffffff;--dropdown-border:#d8dce2;
  --text:#1a1d24;--text2:#5a6070;--text3:#8a8e96;
  --navy:#1a2332;
  --accent:#1a6fa8;--accent-color:#1a6fa8;--accent-hover:#1580c0;
  --accent-muted:rgba(26,111,168,0.08);--accent-dim:rgba(26,111,168,0.05);--accent-glow:rgba(26,111,168,0.12);
  --success:#228a4a;--warning:#9a6a10;--error:#cc3333;--info:#1a6fa8;
  --sidebar-bg:#1a2332;--sidebar-text:#e0e4ea;
  --divider:#e0e2e6;
  --label-bg:#1a6fa8;--label-color:#ffffff;
  --pos:#228a4a;--neg:#cc3333;
  /* Legacy aliases — referenced by modules not yet migrated */
  --primary:#1a6fa8;--danger:#cc3333;
  --text1:var(--text);--bg2:var(--surface);--bg3:var(--surface);--surface1:var(--surface);
}
/* ── Warm Mode ── */
[data-mode="light"]{
  --bg:#f5f2ec;--card:#ffffff;--border:#e4e0d8;--surface:#ebe7df;
  --dropdown-bg:#ffffff;--dropdown-border:#e4e0d8;
  --text:#1a1a1a;--text2:#444444;--text3:#888070;
  --accent:#1a6fa8;--accent-color:#1a6fa8;--accent-hover:#1580c0;
  --accent-muted:rgba(26,111,168,0.08);--accent-dim:rgba(26,111,168,0.05);--accent-glow:rgba(26,111,168,0.12);
  --success:#228a4a;--warning:#9a6a10;--error:#cc3333;--info:#1a6fa8;
  --sidebar-bg:#1a2332;--sidebar-text:#e0e4ea;
  --divider:#e4e0d8;
  --label-bg:#1a6fa8;--label-color:#ffffff;
  --primary:#1a6fa8;--danger:#cc3333;
  --text1:var(--text);--bg2:var(--surface);--bg3:var(--surface);--surface1:var(--surface);
}
/* ═══ Goldman Marquee Dark Mode (Figma-matched) ═══════════ */
[data-mode="dark"]{
  --bg:#1e2329;--card:#252c36;--border:#2a3240;--surface:#161b21;
  --dropdown-bg:#252c36;--dropdown-border:#2a3240;
  --text:#e2e8f0;--text2:#94a3b8;--text3:#64748b;
  --navy:#e2e8f0;
  --accent:#1a6fa8;--accent-color:#1a6fa8;--accent-hover:#1580c0;
  --accent-muted:rgba(26,111,168,0.15);--accent-dim:rgba(26,111,168,0.08);--accent-glow:rgba(26,111,168,0.2);
  --success:#22c55e;--warning:#f59e0b;--error:#ef4444;--info:#1a6fa8;
  --sidebar-bg:#161b21;--sidebar-text:#e0e4ea;
  --divider:#2a3240;
  --label-bg:#1a6fa8;--label-color:#ffffff;
  --pos:#22c55e;--neg:#ef4444;
  --primary:#1a6fa8;--danger:#ef4444;
  --text1:var(--text);--bg2:var(--surface);--bg3:var(--surface);--surface1:var(--surface);
  --bg1:var(--surface);
}
/* ── Dark mode component overrides (Figma-matched) ─────── */
[data-mode="dark"] .topnav{background:#1e2329;border-bottom-color:#2a3240}
[data-mode="dark"] .nav-rail{background:#161b21}
/* Rail color overrides MUST win over dark mode — use [data-rail] which comes later in cascade */
[data-mode="dark"] .nav-rail-btn.active{background:rgba(26,111,168,0.2);color:#4ba3d9}
[data-mode="dark"] .nav-rail-btn.active::before{background:#1a6fa8}
[data-mode="dark"] .nav-child-tab.active{background:#1a6fa8;color:#fff}
[data-mode="dark"] .nav-parent-tab.active{color:#e2e8f0;border-bottom-color:#1a6fa8}
[data-mode="dark"] .modal{background:#252c36;border-color:#2a3240}
[data-mode="dark"] .modal-overlay{background:rgba(0,0,0,0.75)}
[data-mode="dark"] .confirm-box{background:#252c36;border-color:#2a3240}
[data-mode="dark"] .confirm-overlay{background:rgba(0,0,0,0.7)}
[data-mode="dark"] .search-modal{background:#252c36;border-color:#2a3240}
[data-mode="dark"] .toast-success{background:#166534;color:#dcfce7}
[data-mode="dark"] .toast-error{background:#991b1b;color:#fecaca}
[data-mode="dark"] .toast-info{background:#1a3a5f;color:#bfdbfe}
[data-mode="dark"] .fleet-roster td{background:#252c36}
[data-mode="dark"] .fleet-roster tbody tr:hover td{background:#2a3240}
[data-mode="dark"] .tbl th{background:#1e2329}
[data-mode="dark"] .form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2364748b'%3E%3Cpath d='M5 7L1 3h8z'/%3E%3C/svg%3E")}
[data-mode="dark"] input[type="date"].form-input::-webkit-calendar-picker-indicator,
[data-mode="dark"] input[type="time"].form-input::-webkit-calendar-picker-indicator{filter:invert(0.8)}
[data-mode="dark"] .status-dropdown{background:#252c36;border-color:#2a3240}
[data-mode="dark"] .topnav-theme-dropdown{background:#252c36;border-color:#2a3240;box-shadow:0 4px 16px rgba(0,0,0,0.4)}
[data-mode="dark"] .topnav-dropdown{background:#252c36;border-color:#2a3240;box-shadow:0 4px 16px rgba(0,0,0,0.4)}
[data-mode="dark"] .port-autocomplete{background:#252c36;border-color:#2a3240}
[data-mode="dark"] .port-picker-dropdown{background:#252c36;border-color:#2a3240}
[data-mode="dark"] .port-picker-dd{background:#252c36;border-color:#2a3240}
[data-mode="dark"] .autocomplete-list{background:#252c36;border-color:#2a3240}
[data-mode="dark"] .time-dropdown{background:#1e2329;border-color:#2a3240}
[data-mode="dark"] .date-dropdown{background:#1e2329;border-color:#2a3240}
[data-mode="dark"] .kpi-value{color:#e2e8f0}
[data-mode="dark"] .kpi-hero .kpi-value{color:#f1f5f9}
[data-mode="dark"] .section-title{color:#e2e8f0}
[data-mode="dark"] .ov-greeting-text{color:#e2e8f0}
[data-mode="dark"] .result-panel{background:linear-gradient(135deg,rgba(26,111,168,0.08),rgba(34,197,94,0.06));border-color:#2a3240}
[data-mode="dark"] .result-value{color:#4ba3d9}
[data-mode="dark"] .twap-fill{color:#e2e8f0}
/* Dark mode: live data ticker bar */
[data-mode="dark"] .marquee-ticker{background:#161b21;border-bottom:0.5px solid #2a3240}
/* Dark mode scrollbar */
[data-mode="dark"] ::-webkit-scrollbar-thumb{background:#2a3240}
[data-mode="dark"] ::-webkit-scrollbar-thumb:hover{background:#3a4250}
/* Dark mode: status badges (fleet roster) */
[data-mode="dark"] .badge-spot{background:#166534;color:#dcfce7}
[data-mode="dark"] .badge-tc-out{background:#1e40af;color:#bfdbfe}
[data-mode="dark"] .badge-idle{background:#4b5563;color:#e5e7eb}
[data-mode="dark"] .badge-drydock{background:#92400e;color:#fcd34d}
/* Dark mode: validation messages */
[data-mode="dark"] .validation-error{background:rgba(220,38,38,0.2);color:#fca5a5}
[data-mode="dark"] .validation-warning{background:rgba(245,158,11,0.2);color:#fcd34d}
[data-mode="dark"] .validation-info{background:rgba(59,130,246,0.2);color:#93c5fd}
[data-mode="dark"] .field-error{border-color:#ff6b6b !important;box-shadow:0 0 0 1px rgba(255,107,107,0.3)}
/* Dark mode: status buttons */
[data-mode="dark"] .status-btn[data-status="negotiating"]{background:rgba(250,204,21,0.25);color:#fef08a}
[data-mode="dark"] .status-btn[data-status="on_subs"]{background:rgba(251,146,60,0.25);color:#ffedd5}
[data-mode="dark"] .status-btn[data-status="fixed"]{background:rgba(34,197,94,0.25);color:#86efac}
/* Dark mode: operations alert chips */
[data-mode="dark"] .ops-alert-chip.alert-demurrage{background:rgba(255,69,58,0.2);color:#ff7f79}
[data-mode="dark"] .ops-alert-chip.alert-laycan{background:rgba(255,214,10,0.2);color:#fef08a}
[data-mode="dark"] .ops-alert-chip.alert-completed{background:rgba(48,209,88,0.2);color:#86efac}
/* Dark mode: notification badges */
[data-mode="dark"] .notif-info{background:rgba(56,132,244,0.2)}
[data-mode="dark"] .notif-warning{background:rgba(255,214,10,0.2)}
[data-mode="dark"] .notif-error{background:rgba(255,69,58,0.2)}
[data-mode="dark"] .notif-success{background:rgba(48,209,88,0.2)}
/* Dark mode: cargo priority */
[data-mode="dark"] .ov-cargo-priority.high{background:rgba(255,69,58,0.25);color:#fca5a5}
[data-mode="dark"] .ov-cargo-priority.normal{background:rgba(48,209,88,0.25);color:#86efac}
/* Dark mode: mode bar states */
[data-mode="dark"] .mode-bar.editing{background:rgba(245,158,11,0.15);border-bottom-color:rgba(245,158,11,0.3)}
[data-mode="dark"] .mode-bar.comparison{background:rgba(26,111,168,0.15);border-bottom-color:rgba(26,111,168,0.3)}
[data-mode="dark"] .mode-bar.pick{background:rgba(34,197,94,0.15);border-bottom-color:rgba(34,197,94,0.3)}
/* Dark mode: weather conditions */
[data-mode="dark"] .wx-rough{background:rgba(249,115,22,0.25);color:#fed7aa}
[data-mode="dark"] .wx-storm{background:rgba(239,68,68,0.25);color:#fca5a5}
/* CII/CO2 grade badges — adaptive text color */
.cb-cii{padding:1px 6px;border-radius:3px;font-weight:700;font-size:10px;color:#1a1a1a}
[data-mode="dark"] .cb-cii{color:#fff;text-shadow:0 0 2px rgba(0,0,0,0.4)}

.topnav{background:var(--bg);border-bottom:0.5px solid var(--border)}
.topnav-group-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.topnav-brand-text{font-weight:500;letter-spacing:0.12em;font-size:13px}

.kpi-card.highlight{color:var(--accent)}
.inner-tabs{padding:0;background:none;border-radius:0;width:auto;border:none}
.inner-tab{border-radius:var(--radius-badge);border:0.5px solid var(--border);background:transparent}
.inner-tab.active{background:var(--accent);color:var(--bg);border-color:var(--accent);box-shadow:none}
.section-title{color:var(--navy);font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase}

html{font-size:14px}
html[data-style] *,html[data-mode] *{transition:background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
input,select,textarea,button{font-family:inherit;font-size:inherit}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}

/* ── Layout ─────────────────────────────────────────────── */
.app{display:flex;flex-direction:row;min-height:100vh}
.app-body{display:flex;flex-direction:column;flex:1;min-width:0;min-height:100vh}

/* ── Nav Rail (Goldman Sachs pattern — 48px, solid active fills) ── */
.nav-rail{
  width:48px;min-width:48px;max-width:48px;height:100vh;position:sticky;top:0;
  background:var(--navy);display:flex;flex-direction:column;align-items:center;
  padding:10px 0;gap:2px;z-index:1001;flex-shrink:0;
  border-right:none;
}
.nav-rail-logo{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;cursor:pointer;border-radius:6px;
  transition:background var(--transition);flex-shrink:0;
}
.nav-rail-logo:hover{background:rgba(255,255,255,0.08)}
.nav-rail-logo svg{width:24px;height:24px}
.nav-rail-sep{width:24px;height:1px;background:rgba(255,255,255,0.06);margin:6px 0;flex-shrink:0}
.nav-rail-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:rgba(255,255,255,0.4);
  cursor:pointer;border-radius:6px;transition:all var(--transition);
  position:relative;flex-shrink:0;
}
.nav-rail-btn:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.8)}
.nav-rail-btn.active{color:#fff;background:rgba(255,255,255,0.14)}
.nav-rail-btn.active::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;
  background:#fff;border-radius:0 3px 3px 0;
}
.nav-rail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2}
/* Rail tooltips — appear to the right */
.nav-rail-btn[data-tooltip]:hover::after{
  content:attr(data-tooltip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:#0d1520;color:#fff;padding:6px 12px;border-radius:4px;
  font-size:11px;font-weight:500;white-space:nowrap;z-index:1002;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);pointer-events:none;
  font-family:var(--font);letter-spacing:0.02em;
}
.nav-rail-spacer{flex:1}
/* Bottom section of rail */
.nav-rail-bottom{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:auto}
.nav-rail-avatar{
  width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.12);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:rgba(255,255,255,0.8);cursor:pointer;
  transition:all var(--transition);margin-top:6px;border:1px solid rgba(255,255,255,0.15);
}
.nav-rail-avatar:hover{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.3)}

/* ── Top Navigation Bar ──────────────────────────────────── */
.topnav{
  position:sticky;top:0;z-index:1000;min-height:var(--topnav-h);
  background:var(--bg);color:var(--text);
  display:flex;align-items:stretch;padding:0 16px;gap:0;
  border-bottom:0.5px solid var(--border);
  user-select:none;overflow:visible;flex-shrink:0;width:100%;
}
.topnav-brand{display:none}
.topnav-logo{width:28px;height:28px;background:var(--accent);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:var(--bg);flex-shrink:0}
.topnav-brand-text{font-size:13px;font-weight:500;letter-spacing:0.12em;color:var(--text)}
.topnav-groups{display:flex;flex-direction:column;flex:1;overflow:visible;padding-bottom:0}
.nav-tabs-row{display:flex;justify-content:center;gap:2px;padding:0 4px;overflow-x:auto;scrollbar-width:none}
.nav-tabs-row::-webkit-scrollbar{display:none}
.topnav-group{position:relative;transition:transform .15s}
/* ── Nav Tab Drag & Drop ──────────────────── */
.topnav-group.nav-dragging{opacity:0.2;transform:scale(0.95)}
.nav-drag-ghost{position:fixed;pointer-events:none;z-index:400;opacity:0.92;
  background:var(--sidebar-bg);border-radius:var(--radius-sm);
  box-shadow:0 8px 28px rgba(0,0,0,0.35);transform:rotate(0.5deg);padding:0;overflow:hidden}
.nav-drop-marker{width:3px;background:var(--accent);border-radius:2px;align-self:stretch;
  margin:0 -1px;box-shadow:0 0 6px var(--accent);min-height:24px;flex-shrink:0}
.topnav-group-btn{
  display:flex;align-items:center;gap:4px;padding:6px 8px;
  border:none;background:transparent;color:var(--text2);
  font-size:11px;font-weight:500;cursor:pointer;border-radius:var(--radius-sm);
  transition:all var(--transition);white-space:nowrap;font-family:var(--font);
  border-bottom:2px solid transparent;flex-shrink:0;
}
.topnav-group-btn:hover{background:var(--surface)}
.topnav-group-btn.active{color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:6px}
.topnav-group-btn .nav-icon{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center}
.topnav-group-btn .nav-icon svg{width:12px;height:12px;color:currentColor}
.topnav-group-btn .topnav-chevron{font-size:11px;opacity:0.7;margin-left:4px;padding:6px 8px;cursor:pointer;transition:transform 0.2s;border-radius:var(--radius-xs)}
.topnav-group-btn .topnav-chevron:hover{opacity:1;background:rgba(128,128,128,0.15)}
.topnav-group.open .topnav-group-btn .topnav-chevron{transform:rotate(180deg)}

/* ── 4-Mode Hierarchy: Parent + Child tab rows ──────────── */
.nav-parent-tabs{
  display:flex;gap:2px;padding:0 16px;
  border-bottom:0.5px solid var(--border);align-items:center;
}
.nav-parent-tab{
  padding:10px 16px;font-size:13px;font-weight:500;cursor:pointer;
  border:none;background:transparent;color:var(--text3);
  border-bottom:2px solid transparent;transition:all var(--transition);
  font-family:var(--font);white-space:nowrap;
}
.nav-parent-tab:hover{color:var(--navy)}
.nav-parent-tab.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}
.nav-parent-tab.nav-gear{
  margin-left:auto;padding:6px 10px;opacity:0.6;
}
.nav-parent-tab.nav-gear:hover{opacity:1}
.nav-parent-tab.nav-gear svg{display:block}

.nav-child-tabs{
  display:flex;gap:2px;padding:4px 16px;
  background:var(--bg);
}
.nav-child-tab{
  padding:6px 12px;font-size:11px;cursor:pointer;
  border:none;background:transparent;color:var(--text3);
  border-radius:var(--radius-sm);transition:all var(--transition);
  font-family:var(--font);white-space:nowrap;font-weight:500;
}
.nav-child-tab:hover{color:var(--text)}
.nav-child-tab.active{background:var(--navy);color:#fff;border-radius:4px}
/* Dropdown — uses bg so it's always opaque, even for transparent-card styles */
.topnav-dropdown{
  display:none;position:absolute;top:100%;left:0;
  min-width:160px;background:var(--bg);border:0.5px solid var(--border);
  border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,0.35);
  padding:4px;z-index:200;margin-top:2px;
}
.topnav-group.open .topnav-dropdown{display:block}
.topnav-dd-item{
  display:block;width:100%;padding:8px 14px;border:none;background:transparent;
  color:var(--text);font-size:12px;cursor:pointer;border-radius:var(--radius-xs);
  transition:all var(--transition);text-align:left;font-family:var(--font);
}
.topnav-dd-item:hover{background:var(--surface);color:var(--accent)}
.topnav-dd-item.active{color:var(--accent);font-weight:600;background:rgba(56,132,244,0.18);opacity:1}
/* Right section */
.topnav-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.topnav-icon-btn{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border:none;background:transparent;
  color:var(--text2);cursor:pointer;border-radius:var(--radius-sm);
  transition:all var(--transition);opacity:0.7;
}
.topnav-icon-btn:hover{background:var(--surface);opacity:1}
.topnav-icon-btn.active{color:var(--accent);opacity:1}
.topnav-icon-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3}
.topnav-status{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text3);opacity:0.6}
.topnav-status .status-dot{width:6px;height:6px}
/* Style/Mode picker in topnav dropdown */
/* @trace: theme picker — Goldman/UBS panel style */
.topnav-theme-dropdown{
  display:none;position:absolute;top:calc(100% + 4px);right:0;
  width:240px;background:var(--card);border:0.5px solid var(--border);
  border-radius:6px;box-shadow:0 12px 32px rgba(0,0,0,0.35);
  padding:12px;z-index:200;
}
[data-mode="light"] .topnav-theme-dropdown{box-shadow:0 8px 24px rgba(0,0,0,0.12);border-color:rgba(0,0,0,0.12)}
.topnav-theme-dropdown.open{display:block}
/* ── Section label ── */
.style-picker-label{
  font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:1px;
  color:var(--text3);margin-bottom:6px;
}
/* ── Style buttons (compact) ── */
.style-picker{display:flex;flex-direction:column;gap:1px;margin-bottom:10px}
.style-btn{
  display:flex;align-items:center;gap:8px;
  padding:6px 8px;border:0.5px solid transparent;border-radius:4px;
  background:transparent;color:var(--text2);cursor:pointer;
  font-size:11px;font-weight:500;font-family:var(--font);
  transition:all 0.12s ease;text-align:left;width:100%;
}
.style-btn:hover{background:var(--surface);color:var(--text);border-color:var(--border)}
.style-btn.active{background:var(--accent-muted);color:var(--text);border-color:var(--accent-color,var(--accent));font-weight:600}
.style-btn .style-swatch{
  width:12px;height:12px;border-radius:2px;flex-shrink:0;
  border:0.5px solid rgba(128,128,128,0.25);
}
.style-btn .style-name{flex:1}
/* ── Mode toggle (pill group) ── */
.mode-toggle-wrap{
  display:flex;gap:0;border:0.5px solid var(--border);border-radius:4px;overflow:hidden;
}
.mode-btn{
  flex:1;padding:5px 0;border:none;background:transparent;color:var(--text3);
  cursor:pointer;font-size:10px;font-weight:500;font-family:var(--font);
  transition:all 0.12s ease;text-align:center;
}
.mode-btn+.mode-btn{border-left:0.5px solid var(--border)}
.mode-btn:hover{color:var(--text)}
.mode-btn.active{background:var(--accent);color:#fff;font-weight:600}
/* ── Rail color picker (compact dots) ── */
.rail-color-btn{
  width:16px;height:16px;border-radius:50%;border:1.5px solid transparent;
  cursor:pointer;transition:all 0.12s ease;flex-shrink:0;padding:0;
}
.rail-color-btn:hover{transform:scale(1.2);border-color:rgba(255,255,255,0.5)}
.rail-color-btn.active{border-color:#fff;box-shadow:0 0 0 1.5px var(--accent)}
/* ── Rail color overrides ── */
[data-rail="navy"] .nav-rail{background:#1a2332}
[data-rail="charcoal"] .nav-rail{background:#2d2d2d}
[data-rail="graphite"] .nav-rail{background:#4a4a4a}
[data-rail="silver"] .nav-rail{background:#6b7280}
[data-rail="teal"] .nav-rail{background:#155e75}
[data-rail="emerald"] .nav-rail{background:#064e3b}
[data-rail="orange"] .nav-rail{background:#78350f}
[data-rail="crimson"] .nav-rail{background:#7f1d1d}
[data-rail="purple"] .nav-rail{background:#4c1d95}
[data-rail="midnight"] .nav-rail{background:#0f172a}
/* Icon brightness for lighter rails */
[data-rail="silver"] .nav-rail-btn{color:rgba(255,255,255,0.7)}
[data-rail="silver"] .nav-rail-btn.active{color:#fff}
[data-rail="silver"] .nav-rail-sep{background:rgba(255,255,255,0.15)}
[data-rail="graphite"] .nav-rail-btn{color:rgba(255,255,255,0.6)}
[data-rail="graphite"] .nav-rail-btn.active{color:#fff}

.main{flex:1;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:auto}
.topbar{display:none}
.topbar-title{font-size:16px;font-weight:600}
.topbar-right{display:flex;align-items:center;gap:16px}
.topbar-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text2)}
.status-dot{width:7px;height:7px;border-radius:50%;background:var(--success);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.hamburger{display:none;background:none;border:none;color:var(--text);font-size:20px;cursor:pointer;padding:4px}

.content{flex:1;padding:8px 16px 16px;max-width:none;width:100%;margin:0 auto;overflow-x:auto}
.tab-content{display:none;overflow:visible}
.tab-content.active{display:block}
#tab-overview.active{display:flex}
.subtab-bar{display:flex;gap:4px;padding:2px 0 4px;border-bottom:0.5px solid var(--border);margin-bottom:3px}
.subtab-pill{padding:4px 12px;border-radius:var(--radius-badge);font-size:12px;font-weight:500;cursor:pointer;border:0.5px solid var(--border);background:transparent;color:var(--text2);transition:all var(--transition);white-space:nowrap}
.subtab-pill:hover{border-color:var(--accent);color:var(--text1)}
.subtab-pill.active{background:var(--card);color:var(--text);border-color:var(--text);font-weight:600}

/* ── Cards (Goldman clean — no hover glow, subtle border) ───── */
.card{
  background:var(--card);border:0.5px solid var(--border);border-radius:6px;
  padding:16px 20px;
}
.card-title{font-size:9px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.card-title .badge{font-size:11px;padding:2px 8px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text2);text-transform:none;letter-spacing:0}

/* ── KPI Cards ──────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:var(--gap)}
/* @trace: JPM KPI strip style — restyled 2026-04-07 */
.kpi-card{
  background:transparent;border:none;border-radius:0;
  padding:8px 0;transition:all var(--transition);border-right:0.5px solid var(--divider);
}
.kpi-card:last-child{border-right:none}
/* @trace: Goldman Sachs KPI density — 38.5M hero pattern */
.kpi-label{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;font-weight:600}
.kpi-value{font-family:'Inter',var(--font);font-size:26px;font-weight:200;letter-spacing:-0.5px;line-height:1.1;color:var(--navy)}
/* ── Hero KPI (Goldman "$38.5M" pattern) ──── */
.kpi-hero .kpi-value{font-size:32px;font-weight:200;letter-spacing:-0.8px}
.kpi-secondary .kpi-value{font-size:18px;font-weight:300}
.kpi-change{font-size:10px;margin-top:4px;display:flex;align-items:center;gap:4px;color:var(--text3)}
.kpi-sub{font-size:10px;color:var(--text3);margin-top:4px}
#tab-overview .card-title{margin-bottom:8px}
#overviewKpis .kpi-card{padding:8px 16px}
#overviewKpis .kpi-label{margin-bottom:4px;font-size:8px;font-weight:600;letter-spacing:0.1em}
#overviewKpis .kpi-value{font-size:24px;letter-spacing:-0.5px;font-weight:200}
#overviewKpis .kpi-change{margin-top:2px;font-size:9px}
/* ── Dashboard Greeting Row (Goldman "Welcome Back" pattern) ──── */
.ov-greeting{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:16px 2px 8px;gap:12px;
}
.ov-greeting-text{font-size:20px;font-weight:300;color:var(--navy);letter-spacing:-0.3px}
.ov-greeting-text strong{font-weight:600}
.ov-greeting-meta{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em}
/* ── Overview 2×2 tile grid ──────────────────────────────
   --ov-chrome: nav(46) + greeting(40) + kpis(76) + margins/gaps(~15) = ~200px
   Each row gets exactly half the remaining height */
/* ── Dashboard Command Center (Pattern C) ──────────── */
#tab-overview{--ov-row-h:calc((100vh - 228px) / 2)}
#tab-overview.active{display:flex;flex-direction:row;gap:0;height:calc(100vh - 84px);overflow:hidden}
.ov-main{flex:1;min-width:0;overflow-y:auto;padding-right:16px}
.ov-aside{width:320px;min-width:320px;max-width:320px;overflow-y:auto;border-left:0.5px solid var(--border);padding-left:16px;display:flex;flex-direction:column;gap:12px}
.ov-aside-title{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:4px}
.ov-aside .card{padding:12px 14px}
.ov-shortcut-list{display:flex;flex-direction:column;gap:2px}
.ov-shortcut{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);font-size:12px;color:var(--text2)}
.ov-shortcut:hover{background:var(--surface);color:var(--accent)}
.ov-shortcut svg{width:14px;height:14px;color:var(--text3);flex-shrink:0}
.ov-alert-list{display:flex;flex-direction:column;gap:4px}
.ov-alert-item{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);font-size:11px;color:var(--text2)}
.ov-alert-item:hover{background:var(--surface)}
.ov-alert-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:4px}
.ov-alert-dot.urgent{background:var(--error)}
.ov-alert-dot.warning{background:var(--warning)}
.ov-alert-dot.info{background:var(--accent)}
#tab-overview .ov-row{height:var(--ov-row-h);min-height:0;max-height:var(--ov-row-h);overflow:hidden}
.kpi-change.up{color:var(--success)}
.kpi-change.down{color:var(--error)}

/* ── Operations Split View Toggle + Layout ─────────────── */
.ops-view-toggle{display:flex;gap:0;border:0.5px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.ops-view-btn{display:flex;align-items:center;gap:4px;padding:4px 10px;border:none;background:transparent;color:var(--text3);cursor:pointer;font-size:10px;font-weight:500;font-family:var(--font);transition:all var(--transition)}
.ops-view-btn+.ops-view-btn{border-left:0.5px solid var(--border)}
.ops-view-btn:hover{color:var(--text)}
.ops-view-btn.active{background:var(--accent-muted);color:var(--accent)}
.ops-split-layout{display:flex;height:100%;border:0.5px solid var(--border);border-radius:6px;overflow:hidden;background:var(--card)}
.ops-split-sidebar{width:200px;min-width:200px;border-right:0.5px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.ops-split-vessel-list{flex:1;overflow-y:auto}
.ops-split-vessel{padding:8px 12px;cursor:pointer;border-bottom:0.5px solid var(--border);transition:background var(--transition);font-size:11px}
.ops-split-vessel:hover{background:var(--surface)}
.ops-split-vessel.active{background:var(--accent-muted);border-left:2px solid var(--accent)}
.ops-split-vessel-name{font-weight:600;color:var(--text)}
.ops-split-vessel-type{font-size:10px;color:var(--text3)}
.ops-split-vessel-status{font-size:9px;padding:1px 6px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text3);display:inline-block;margin-top:2px}
.ops-split-list{width:280px;min-width:280px;border-right:0.5px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.ops-split-list-header{padding:10px 12px;font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em;border-bottom:0.5px solid var(--border)}
.ops-split-voy-list{flex:1;overflow-y:auto}
.ops-split-voy{padding:10px 12px;cursor:pointer;border-bottom:0.5px solid var(--border);transition:background var(--transition)}
.ops-split-voy:hover{background:var(--surface)}
.ops-split-voy.active{background:var(--accent-muted)}
.ops-split-voy-code{font-family:var(--font-mono);font-size:10px;color:var(--text3)}
.ops-split-voy-route{font-size:12px;font-weight:500;color:var(--text);margin-top:2px}
.ops-split-voy-meta{font-size:10px;color:var(--text3);margin-top:2px}
.ops-split-detail{flex:1;min-width:0;overflow-y:auto}

/* ── Reusable 3-Panel Layout (sidebar + list + detail) ──── */
.panel-3col{display:flex;border:0.5px solid var(--border);border-radius:6px;overflow:hidden;background:var(--card)}
.panel-3col-sidebar{width:180px;min-width:180px;border-right:0.5px solid var(--border);overflow-y:auto;padding:8px 0}
.panel-3col-list{width:320px;min-width:320px;border-right:0.5px solid var(--border);overflow-y:auto}
.panel-3col-detail{flex:1;min-width:0;overflow-y:auto}
.panel-sidebar-label{font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:var(--text3);padding:6px 14px;margin-bottom:2px}
.panel-sidebar-item{padding:7px 14px;cursor:pointer;font-size:12px;color:var(--text2);transition:all var(--transition);display:flex;align-items:center;justify-content:space-between}
.panel-sidebar-item:hover{background:var(--surface);color:var(--text)}
.panel-sidebar-item.active{color:var(--navy);font-weight:600;background:var(--surface);border-left:3px solid var(--navy)}
.panel-sidebar-count{font-size:10px;color:var(--text3);font-family:var(--font-mono);min-width:18px;text-align:right}
.panel-sidebar-item.active .panel-sidebar-count{color:var(--navy)}

/* ── Voyage Pipeline (5-panel layout) ──────────────────── */
.vp-layout{display:flex;height:100%;border:0.5px solid var(--border);border-radius:6px;overflow:hidden;background:var(--card)}
.vp-sidebar{width:180px;min-width:180px;border-right:0.5px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;padding:8px 0}
.vp-sidebar-section{margin-bottom:12px}
.vp-sidebar-label{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text3);padding:4px 12px;margin-bottom:2px}
.vp-status-item{padding:6px 12px;cursor:pointer;font-size:11px;color:var(--text2);transition:all var(--transition);display:flex;align-items:center;justify-content:space-between}
.vp-status-item:hover{background:var(--surface);color:var(--text)}
.vp-status-item.active{color:var(--accent);font-weight:600;background:var(--accent-muted);border-left:2px solid var(--accent)}
.vp-count{font-size:10px;color:var(--text3);font-family:var(--font-mono);min-width:20px;text-align:right}
.vp-status-item.active .vp-count{color:var(--accent)}
.vp-vessel-filter{padding:0 8px}
.vp-vessel-item{padding:4px 6px;font-size:10px;cursor:pointer;border-radius:var(--radius-xs);transition:background var(--transition);color:var(--text2)}
.vp-vessel-item:hover{background:var(--surface)}
.vp-vessel-item.active{color:var(--accent);font-weight:600}
.vp-list{width:300px;min-width:300px;border-right:0.5px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.vp-voy-list{flex:1;overflow-y:auto}
.vp-voy-item{padding:10px 12px;cursor:pointer;border-bottom:0.5px solid var(--border);transition:background var(--transition)}
.vp-voy-item:hover{background:var(--surface)}
.vp-voy-item.active{background:var(--accent-muted)}
.vp-voy-vessel{font-size:12px;font-weight:600;color:var(--text)}
.vp-voy-route{font-size:11px;color:var(--text2);margin-top:2px}
.vp-voy-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.vp-voy-status{font-size:9px;padding:1px 6px;border-radius:var(--radius-badge);text-transform:uppercase;font-weight:600}
.vp-voy-status.st-estimate{background:var(--surface);color:var(--text3)}
.vp-voy-status.st-on_subs{background:rgba(255,214,10,0.12);color:var(--warning)}
.vp-voy-status.st-fixed{background:rgba(26,111,168,0.12);color:var(--accent)}
.vp-voy-status.st-commenced{background:rgba(34,138,74,0.12);color:var(--success)}
.vp-voy-status.st-completed{background:rgba(34,138,74,0.08);color:var(--success)}
.vp-voy-tce{font-family:var(--font-mono);font-size:11px;font-weight:600}
.vp-detail{flex:1;min-width:0;overflow-y:auto}

/* ── Voyage Status Cards (linear layout) ──────────────── */
.voy-status-grid{display:flex;flex-direction:column;gap:4px}
.voy-status-card{
  background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius);
  padding:8px 12px 8px 16px;cursor:pointer;transition:all var(--transition);
  display:flex;align-items:center;gap:12px;position:relative;
}
.voy-status-card:hover{border-color:var(--accent)}
.voy-status-indicator{width:4px;border-radius:var(--radius) 0 0 var(--radius);position:absolute;left:0;top:0;bottom:0}
.voy-status-card[data-status="at_sea"] .voy-status-indicator,
.voy-status-card[data-status="commenced"] .voy-status-indicator{background:var(--info)}
.voy-status-card[data-status="loading"] .voy-status-indicator{background:var(--warning)}
.voy-status-card[data-status="discharging"] .voy-status-indicator{background:var(--warning)}
.voy-status-card[data-status="completed"] .voy-status-indicator{background:var(--success)}
.voy-status-card[data-status="pending"] .voy-status-indicator{background:var(--text3)}
/* Inline sections */
.vsc-vessel{font-weight:700;font-size:12px;color:var(--text1);white-space:nowrap;min-width:110px;overflow:hidden;text-overflow:ellipsis}
.vsc-code{font-family:var(--font-mono);font-size:10px;color:var(--text3);padding:1px 5px;background:var(--surface);border-radius:var(--radius-xs);white-space:nowrap}
.vsc-seg-badge{font-size:9px;padding:1px 6px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text3);white-space:nowrap;font-weight:500}
.vsc-route{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:100px;max-width:200px}
.vsc-sep{color:var(--border);font-size:10px;user-select:none}
.vsc-cp-party{font-size:11px;font-weight:600;color:var(--text);white-space:nowrap}
.vsc-cp-broker{font-size:11px;color:var(--text3);white-space:nowrap}
.vsc-cp-broker::before{content:'via ';color:var(--text3)}
.vsc-cp-freight{font-family:var(--font-mono);font-size:10px;color:var(--accent-color);font-weight:500;white-space:nowrap}
.vsc-chip{font-size:10px;padding:2px 7px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text2);white-space:nowrap}
.vsc-laycan-active{border:0.5px solid var(--success) !important;color:var(--success) !important;font-weight:500}
.vsc-laycan-expired{border:0.5px solid var(--error) !important;color:var(--error) !important;font-weight:500;opacity:0.7}
.vsc-laycan-upcoming{color:var(--text2) !important}
.vsc-spacer{flex:1}
.vsc-badge-wrap{display:flex;align-items:center;gap:6px;margin-left:auto}
.vsc-tce{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--success);white-space:nowrap}
.vsc-tce.negative{color:var(--error)}
/* Fleet filters bar */
.fleet-filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.fleet-filter-bar select{font-size:11px;padding:3px 8px;border:0.5px solid var(--border);border-radius:var(--radius-badge);background:var(--card);color:var(--text1);cursor:pointer}
.fleet-filter-bar .fleet-count{font-size:11px;color:var(--text3);margin-left:auto}
/* ── Ops inline alerts ────────────────────────────────── */
.ops-alert-strip{display:flex;gap:8px;flex-wrap:wrap}
.ops-alert-chip{font-size:11px;padding:5px 12px;border-radius:var(--radius);display:flex;align-items:center;gap:6px;cursor:pointer;transition:all var(--transition);border:0.5px solid}
.ops-alert-chip.alert-demurrage{background:rgba(255,69,58,0.08);border-color:rgba(255,69,58,0.3);color:#FF453A}
.ops-alert-chip.alert-laycan{background:rgba(255,214,10,0.08);border-color:rgba(255,214,10,0.3);color:#FFD60A}
.ops-alert-chip.alert-completed{background:rgba(48,209,88,0.08);border-color:rgba(48,209,88,0.3);color:#30D158}
.ops-alert-chip:hover{transform:translateY(-1px)}
.voy-alert-icon{font-size:13px;margin-left:4px;cursor:help}
.voy-alert-detail{font-size:10px;color:var(--error);font-weight:600;white-space:nowrap}
/* Toggle button */
.view-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:11px;color:var(--text3);padding:3px 8px;border-radius:var(--radius-badge);border:0.5px solid var(--border);background:transparent;transition:all var(--transition)}
.view-toggle:hover{border-color:var(--accent);color:var(--text1)}
.view-toggle svg{width:14px;height:14px}
/* ── Fleet Roster table ──────────────────────────────── */
.fleet-roster{width:100%;border-collapse:separate;border-spacing:0 2px}
.fleet-roster.pnl-voy-tbl,.fleet-roster.pnl-ffa-tbl{table-layout:fixed;font-size:11px}
.pnl-voy-tbl td,.pnl-ffa-tbl td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pnl-voy-tbl td.num,.pnl-ffa-tbl td.num,.pnl-voy-tbl th.num,.pnl-ffa-tbl th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;padding-right:14px}
.fleet-roster th{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.04em;padding:6px 10px;text-align:left;font-weight:600;border-bottom:0.5px solid var(--border)}
.fleet-roster th.num{text-align:right}
th[data-sort-dir]{color:var(--accent) !important}
.sort-ind{font-size:8px;opacity:.6;margin-left:2px}
/* ── Global Search Overlay ── */
.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:10001;display:none;justify-content:center;padding-top:15vh}
.search-overlay[style*="display:flex"],.search-overlay.open{display:flex}
.search-modal{width:100%;max-width:560px;background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius-lg,12px);box-shadow:0 20px 60px rgba(0,0,0,.6);max-height:70vh;display:flex;flex-direction:column;animation:modalIn .15s ease}
.search-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:0.5px solid var(--border)}
.search-icon{color:var(--text3);flex-shrink:0}
.search-input-wrap input{flex:1;background:transparent;border:none;outline:none;color:var(--text1);font-size:15px;font-family:var(--font-sans)}
.search-input-wrap input::placeholder{color:var(--text3)}
.search-kbd{font-size:10px;color:var(--text3);background:var(--surface);border:0.5px solid var(--border);border-radius:4px;padding:2px 6px;font-family:var(--font-mono)}
.search-results{overflow-y:auto;padding:6px}
.search-result-group{padding:8px 12px 4px;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.search-result-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:background .1s}
.search-result-item:hover,.search-result-item.active{background:var(--surface)}
.sr-name{font-size:13px;color:var(--text1);font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-detail{font-size:11px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.sr-type{font-size:9px;color:var(--accent);background:var(--accent-muted);padding:2px 6px;border-radius:3px;font-weight:600;text-transform:uppercase;white-space:nowrap}
.search-empty{padding:24px;text-align:center;color:var(--text3);font-size:13px}
/* ── Undo Toast ── */
.toast-undo{min-width:280px}
.undo-link{text-decoration:underline;cursor:pointer;font-weight:600;margin-left:8px}
.undo-link:hover{opacity:.8}
.fleet-roster td{font-size:12px;padding:8px 10px;background:var(--card);border-top:0.5px solid var(--border);border-bottom:0.5px solid var(--border);transition:all var(--transition)}
.fleet-roster td:first-child{border-left:4px solid transparent;border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.fleet-roster td:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.fleet-roster tr.vessel-employed td:first-child{border-left-color:var(--info)}
.fleet-roster tr.vessel-employed[data-status="loading"] td:first-child{border-left-color:var(--warning)}
.fleet-roster tr.vessel-employed[data-status="discharging"] td:first-child{border-left-color:var(--warning)}
.fleet-roster tr.vessel-employed[data-status="completed"] td:first-child{border-left-color:var(--success)}
.fleet-roster tr.vessel-employed[data-status="pending"] td:first-child{border-left-color:var(--text3)}
.fleet-roster tr.vessel-open td{opacity:0.55}
.fleet-roster tr.vessel-open:hover td{opacity:1}
.fleet-roster tr.vessel-open td:first-child{border-left-color:var(--text3)}
.fleet-roster tbody tr{cursor:pointer}
.fleet-roster tbody tr:hover td{border-color:var(--accent);background:var(--surface1)}
.fleet-roster .fr-vessel-name{font-weight:700;color:var(--text1);white-space:nowrap}
.fleet-roster .fr-seg{font-size:10px;padding:1px 6px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text3);font-weight:500;white-space:nowrap}
.fleet-roster .fr-dwt{font-family:var(--font-mono);font-size:11px;color:var(--text2);text-align:right;white-space:nowrap}
.fleet-roster .fr-flag{font-size:11px;color:var(--text2);white-space:nowrap}
.fleet-roster .fr-route{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.fleet-roster .fr-tce{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--success);text-align:right;white-space:nowrap}
.fleet-roster .fr-tce.negative{color:var(--error)}
.fleet-roster .fr-open-badge{font-size:9px;padding:2px 8px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text3);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* Fleet voy section toggle */
.fleet-voy-toggle{cursor:pointer;user-select:none}
.fleet-voy-toggle .toggle-icon{display:inline-block;transition:transform .2s;font-size:10px;margin-left:6px}
.fleet-voy-toggle.collapsed .toggle-icon{transform:rotate(-90deg)}

/* ── Fleet Positions table ─────────────────────────────── */
.pos-tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:6px 8px}
.pos-tbl td{padding:5px 8px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rob-grade{display:inline-block;padding:1px 5px;margin:1px 2px;border-radius:3px;font-size:10px;background:var(--surface);border:0.5px solid var(--border);white-space:nowrap}
.rob-grade b{color:var(--text1);font-weight:700}

/* ── Fleet Position Cards ──────────────────────────────── */
.pos-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}
.pos-card{
  background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius);
  padding:12px 14px 12px 18px;cursor:pointer;transition:all var(--transition);
  position:relative;display:flex;flex-direction:column;gap:6px;
}
.pos-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.pos-card .pos-indicator{width:4px;border-radius:var(--radius) 0 0 var(--radius);position:absolute;left:0;top:0;bottom:0}
.pos-card[data-status="at_sea"] .pos-indicator,.pos-card[data-status="commenced"] .pos-indicator{background:var(--info)}
.pos-card[data-status="loading"] .pos-indicator{background:var(--warning)}
.pos-card[data-status="discharging"] .pos-indicator{background:var(--warning)}
.pos-card[data-status="completed"] .pos-indicator{background:var(--success)}
.pos-card[data-status="pending"] .pos-indicator{background:var(--text3)}
.pos-card[data-status="idle"] .pos-indicator{background:var(--border)}
.pos-card .pos-hdr{display:flex;align-items:center;gap:8px;min-width:0}
.pos-card .pos-vname{font-weight:700;font-size:13px;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pos-card .pos-imo{font-family:var(--font-mono);font-size:10px;color:var(--text3);padding:1px 5px;background:var(--surface);border-radius:var(--radius-xs);flex-shrink:0}
.pos-card .pos-seg{font-size:10px;color:var(--text3);margin-left:auto;flex-shrink:0}
.pos-card .pos-route{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:6px}
.pos-card .pos-route .arrow{color:var(--text3)}
.pos-card .pos-meta{display:flex;gap:6px;flex-wrap:wrap}
.pos-card .pos-chip{font-size:10px;padding:2px 8px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text2);white-space:nowrap}
.pos-card .pos-rob-row{display:flex;gap:4px;flex-wrap:wrap}
.pos-card .pos-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.pos-card .pos-eta{font-family:var(--font-mono);font-size:11px;color:var(--text2)}
.pos-card .pos-status-badge{font-size:10px;padding:2px 8px;border-radius:var(--radius-badge);color:var(--bg);font-weight:600}
.pos-card .pos-specs{display:flex;flex-direction:column;gap:3px;padding:4px 0}
.pos-card .pos-spec-row{display:flex;gap:8px}
.pos-card .pos-spec{flex:1;display:flex;justify-content:space-between;align-items:baseline;gap:4px;min-width:0}
.pos-card .pos-spec-lbl{font-size:9px;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);white-space:nowrap}
.pos-card .pos-spec-val{font-size:11px;color:var(--text1);font-family:var(--font-mono);white-space:nowrap;text-align:right}

/* ── Voyage Timeline Bar (inside pos-card) ─────────────── */
.voy-timeline{position:relative;height:22px;margin:4px 0 2px;display:flex;align-items:center}
.voy-timeline .vtl-track{position:absolute;left:0;right:0;top:50%;height:3px;background:var(--border);border-radius:2px;transform:translateY(-50%)}
.voy-timeline .vtl-fill{position:absolute;left:0;top:50%;height:3px;border-radius:2px;transform:translateY(-50%);transition:width .3s ease}
.voy-timeline .vtl-nodes{position:relative;display:flex;justify-content:space-between;width:100%;z-index:1}
.voy-timeline .vtl-node{display:flex;flex-direction:column;align-items:center;gap:1px}
.voy-timeline .vtl-dot{width:8px;height:8px;border-radius:50%;border:2px solid var(--border);background:var(--card);transition:all .2s}
.voy-timeline .vtl-dot.done{background:var(--accent);border-color:var(--accent)}
.voy-timeline .vtl-dot.active{background:var(--bg);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.voy-timeline .vtl-lbl{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;margin-top:1px}
.voy-timeline .vtl-lbl.active{color:var(--accent);font-weight:700}
.voy-timeline .vtl-date{font-size:7px;color:var(--text3);font-family:var(--font-mono)}

/* ── Grid helpers ───────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.grid-1-2{display:grid;grid-template-columns:1fr 2fr;gap:var(--gap)}
.grid-2-1{display:grid;grid-template-columns:2fr 1fr;gap:var(--gap)}
.stack{display:flex;flex-direction:column;gap:var(--gap)}

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:var(--radius-table)}
/* @trace: JPM Risk Detail table style — restyled 2026-04-07 */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12px;line-height:1.4}
.tbl th{background:transparent;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3);
  text-align:left;padding:10px 12px;
  border-bottom:0.5px solid var(--border);
  position:sticky;top:0;z-index:2;background:var(--card);
}
.tbl td{padding:8px 12px;border-bottom:.5px solid var(--border)}
.tbl tr:hover td{background:var(--surface)}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ── Voyage Estimates table (compact) ──────────────────── */
#tab-estimates .tbl{font-size:11px}
#tab-estimates .tbl th{background:var(--surface);font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);padding:6px 8px;font-size:10px}
#tab-estimates .tbl td{padding:5px 8px;font-size:11px;white-space:nowrap}
#snp-projects .tbl{font-size:11px}
#snp-projects .tbl th{background:var(--surface);font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);padding:6px 8px;font-size:10px}
#snp-projects .tbl td{padding:5px 8px;font-size:11px;white-space:nowrap}

/* ── Forms ──────────────────────────────────────────────── */
/* @trace: JPM form style — restyled 2026-04-07 */
.form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.form-label{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:0.08em}
.form-input,.form-select{
  background:transparent;border:none;border-bottom:0.5px solid var(--border);border-radius:0;
  padding:8px 4px 6px;color:var(--text);outline:none;transition:border-color 0.2s ease;
  width:100%;
}
.form-input:focus,.form-select:focus{border-bottom-color:var(--accent);box-shadow:none}
.form-input::placeholder{color:var(--text3);font-style:italic;font-weight:300}
.form-select,select.form-input{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23a1a1a6'%3E%3Cpath d='M5 7L1 3h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;background-color:transparent;padding-right:18px}
.form-input-sm,.form-select-sm{font-size:11px;padding:2px 6px;width:auto}
/* Global underline for native date/time/number inputs */
input[type="date"].form-input,input[type="time"].form-input,input[type="number"].form-input{-webkit-appearance:none;appearance:none;-moz-appearance:textfield}
input[type="date"].form-input::-webkit-calendar-picker-indicator,input[type="time"].form-input::-webkit-calendar-picker-indicator{filter:invert(0.6);opacity:0.5;cursor:pointer}
input[type="date"].form-input::-webkit-calendar-picker-indicator:hover,input[type="time"].form-input::-webkit-calendar-picker-indicator:hover{opacity:0.8}
input[type="number"].form-input::-webkit-inner-spin-button,input[type="number"].form-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
textarea.form-input{resize:vertical;min-height:80px;border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:8px}
/* ── Port Picker: chip/tag + search ── */
.port-picker{border:none;border-bottom:0.5px solid var(--border);border-radius:0;background:transparent;padding:6px 4px;min-height:38px;display:flex;flex-wrap:wrap;gap:4px;align-items:center;cursor:text;transition:border-color 0.2s ease}
.port-picker:focus-within{border-bottom-color:var(--accent)}
.port-chip{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:3px 8px;border-radius:var(--radius-badge);background:var(--accent);color:var(--bg);font-weight:500;white-space:nowrap;animation:modalIn .12s ease}
.port-chip-x{cursor:pointer;font-size:13px;line-height:1;opacity:.7;margin-left:2px;font-weight:700}
.port-chip-x:hover{opacity:1}
.port-picker-input{border:none;background:transparent;outline:none;color:var(--text);font-size:12px;flex:1 1 80px;min-width:80px;padding:2px 0}
.port-picker-input::placeholder{color:var(--text3)}
.port-picker-dropdown{position:absolute;top:100%;left:0;right:0;z-index:9999;background:var(--dropdown-bg,#1e1e22);border:0.5px solid var(--dropdown-border,rgba(255,255,255,0.12));border-radius:var(--radius-sm);max-height:280px;overflow-y:auto;display:none;box-shadow:0 8px 24px rgba(0,0,0,0.5)}
.port-picker-dropdown.show{display:block}
.port-picker-opt{padding:6px 10px;font-size:12px;cursor:pointer;color:var(--text);transition:background .12s}
.port-picker-opt:hover,.port-picker-opt.active{background:var(--accent-muted,rgba(255,255,255,0.08))}
.port-picker-opt small{color:var(--text3);margin-left:4px}
.port-picker-empty{padding:8px 10px;font-size:11px;color:var(--text3);font-style:italic}
/* ── Port Picker Autocomplete (ship forms) ── */
.port-picker-dd{position:absolute;top:100%;left:0;right:0;z-index:200;background:var(--dropdown-bg,var(--card));border:0.5px solid var(--border);border-radius:var(--radius-sm);max-height:220px;overflow-y:auto;box-shadow:0 8px 24px rgba(0,0,0,0.45);margin-top:2px}
.port-picker-item{padding:8px 12px;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background .1s}
.port-picker-item:hover{background:var(--accent-muted,rgba(255,255,255,0.08))}
.port-picker-item:first-child{border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.port-picker-item:last-child{border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.pos-set-btn{cursor:pointer;font-size:12px;opacity:.5;transition:opacity .15s;vertical-align:middle}
.pos-set-btn:hover{opacity:1}
.rs-chip{font-size:10px;padding:2px 8px;border-radius:var(--radius-badge);background:var(--bg3);color:var(--text2);cursor:pointer;transition:all .15s;user-select:none}
.rs-chip:hover{background:var(--accent);color:var(--bg)}
.rs-chip-active{background:var(--accent);color:var(--bg)}

/* ── Overview: Drag & Drop Cards ──────────────── */
.ov-drag-card{position:relative;transition:transform .2s,opacity .2s;min-width:0}
.ov-drag-card .card-title[data-ov-drag-handle]{cursor:grab;user-select:none}
.ov-drag-card .card-title[data-ov-drag-handle]:active{cursor:grabbing}
.ov-drag-card.drag-ready>.card{outline:2px solid var(--accent);outline-offset:-2px;cursor:grabbing}
.ov-drag-card.dragging{opacity:0.2;transform:scale(0.97)}
.ov-drag-card.swap-highlight>.card{outline:2px dashed var(--accent);outline-offset:-2px}
.ov-drag-ghost{position:fixed;pointer-events:none;z-index:300;opacity:0.85;transform:rotate(0.5deg);box-shadow:0 12px 40px rgba(0,0,0,0.25);transition:none;border-radius:var(--radius);max-width:500px;overflow:hidden}

/* ── Time Picker (compact + dropdown) ─────────────────── */
.time-compact{display:inline-flex;align-items:center;justify-content:space-between;gap:4px;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:13px;color:var(--text);cursor:pointer;user-select:none;width:100%;transition:border-color var(--transition);font-variant-numeric:tabular-nums;font-weight:500}
.time-compact:hover{border-color:var(--accent)}
.time-compact.open{border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,132,244,0.15)}
.time-compact svg{width:12px;height:12px;fill:none;stroke:var(--text3);stroke-width:1.5;flex-shrink:0}
.time-dropdown{position:fixed;min-width:120px;z-index:9999;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,0.4);display:none;padding:8px;animation:modalIn .15s ease}
.time-dropdown.active{display:block}
.time-manual-row{margin-bottom:6px}
.time-manual-input{width:100%;padding:5px 8px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:center;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-xs);color:var(--text);outline:none;font-family:inherit;letter-spacing:1px}
.time-manual-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,132,244,0.15)}
.time-cols-wrap{display:flex;gap:4px}
.time-col{flex:1;max-height:180px;overflow-y:auto;scroll-snap-type:y mandatory}
.time-col::-webkit-scrollbar{width:3px}
.time-col::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.time-col-label{font-size:9px;text-transform:uppercase;color:var(--text3);letter-spacing:0.5px;padding:0 4px 4px;font-weight:600;text-align:center;position:sticky;top:0;background:var(--bg);z-index:1}
.time-item{padding:4px 6px;text-align:center;font-size:12px;cursor:pointer;border-radius:var(--radius-xs);color:var(--text2);transition:all .1s;font-variant-numeric:tabular-nums;scroll-snap-align:center}
.time-item:hover{background:var(--surface);color:var(--text)}
.time-item.selected{background:var(--accent);color:var(--bg);font-weight:600}

/* ── Date Picker (compact + dropdown) ─────────────────── */
.date-compact{display:inline-flex;align-items:center;justify-content:space-between;gap:4px;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;font-size:13px;color:var(--text);cursor:pointer;user-select:none;width:100%;transition:border-color var(--transition);font-variant-numeric:tabular-nums;font-weight:500}
.date-compact:hover{border-color:var(--accent)}
.date-compact.open{border-color:var(--accent);box-shadow:0 0 0 2px rgba(56,132,244,0.15)}
.date-compact svg{width:12px;height:12px;fill:none;stroke:var(--text3);stroke-width:1.5;flex-shrink:0}
.date-dropdown{position:fixed;min-width:220px;z-index:9999;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 16px rgba(0,0,0,0.4);display:none;padding:8px;animation:modalIn .15s ease}
.date-dropdown.active{display:block}
.date-nav{display:flex;align-items:center;justify-content:space-between;padding:0 2px 6px;gap:4px}
.date-nav-btn{background:none;border:none;cursor:pointer;color:var(--text2);padding:2px 6px;border-radius:var(--radius-xs);font-size:14px;line-height:1;transition:all .1s}
.date-nav-btn:hover{background:var(--surface);color:var(--text)}
.date-nav-label{font-size:12px;font-weight:600;color:var(--text);user-select:none}
.date-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.date-dow{text-align:center;font-size:9px;color:var(--text3);font-weight:600;padding:2px 0;text-transform:uppercase}
.date-cell{text-align:center;font-size:12px;padding:4px 2px;cursor:pointer;border-radius:var(--radius-xs);color:var(--text2);transition:all .1s;font-variant-numeric:tabular-nums}
.date-cell:hover{background:var(--surface);color:var(--text)}
.date-cell.selected{background:var(--accent);color:var(--bg);font-weight:600}
.date-cell.today{box-shadow:inset 0 0 0 1px var(--accent)}
.date-cell.outside{color:var(--text3);opacity:0.4;cursor:default}
.date-cell.outside:hover{background:none;color:var(--text3)}
.date-ym-picker{padding:4px 0}
.date-ym-section{margin-bottom:6px}
.date-ym-label{font-size:9px;text-transform:uppercase;color:var(--text3);letter-spacing:0.5px;padding:0 4px 4px;font-weight:600}
.date-ym-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:0 2px}
.date-ym-item{padding:5px 4px;text-align:center;font-size:11px;cursor:pointer;border-radius:var(--radius-xs);color:var(--text2);transition:all .1s}
.date-ym-item:hover{background:var(--surface);color:var(--text)}
.date-ym-item.selected{background:var(--accent);color:var(--bg);font-weight:600}
.date-nav-label:hover{background:var(--surface);border-radius:var(--radius-xs)}

/* ── Status Badge (clickable dropdown) ─────────────────── */
.status-btn{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--radius-badge);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;cursor:pointer;border:0.5px solid transparent;transition:all var(--transition);user-select:none;position:relative}
.status-btn:hover{filter:brightness(1.15)}
.status-btn[data-status="estimate"]{background:var(--surface);color:var(--text2);border-color:var(--border)}
.status-btn[data-status="negotiating"]{background:rgba(250,204,21,0.15);color:#facc15;border-color:rgba(250,204,21,0.3)}
.status-btn[data-status="on_subs"]{background:rgba(251,146,60,0.15);color:#fb923c;border-color:rgba(251,146,60,0.3)}
.status-btn[data-status="fixed"]{background:rgba(34,197,94,0.15);color:#22c55e;border-color:rgba(34,197,94,0.3)}
.status-dropdown{position:absolute;top:calc(100% + 4px);left:0;min-width:160px;z-index:1000;background:var(--dropdown-bg,#1e1e22);border:0.5px solid var(--dropdown-border,rgba(255,255,255,0.12));border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,0.7);display:none;padding:4px;animation:modalIn .15s ease}
.status-dropdown.active{display:block}
.status-option{padding:8px 12px;border-radius:var(--radius-xs);font-size:12px;font-weight:500;cursor:pointer;transition:background .15s;color:var(--text)}
.status-option:hover{background:var(--accent-muted,rgba(255,255,255,0.1))}
.status-option .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}

/* ── Buttons — JPM/UBS institutional ──────────────────── */
/* @trace: restyled 2026-04-07 — JPM 32px/12px, UBS 36px/13px */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 18px;border-radius:3px;font-weight:500;font-size:12px;
  cursor:pointer;border:0.5px solid transparent;transition:all var(--transition);
  user-select:none;white-space:nowrap;height:32px;
}
.btn-primary{background:var(--accent);color:#ffffff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-secondary:hover{background:var(--accent-dim)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--accent);border-color:transparent}
.btn-ghost:hover{background:var(--accent-dim)}
.btn-danger{background:transparent;color:var(--error);border-color:var(--error)}
.btn-danger:hover{background:rgba(204,51,51,0.05)}
.btn-success{background:var(--success);color:#fff}
.btn-warning{background:var(--warning);color:#fff}
.btn-error{background:transparent;color:var(--error);border-color:var(--error)}
.btn-xs{padding:2px 6px;font-size:10px}
.btn-sm{padding:4px 10px;font-size:11px}
.btn-md{padding:6px 14px;font-size:12px}
.btn-lg{padding:8px 18px;font-size:13px}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn-group{display:flex;gap:8px;flex-wrap:wrap}
/* ── Unified close button ── */
.btn-close{background:none;border:none;color:var(--text2);font-size:16px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:color var(--transition),background var(--transition)}
.btn-close:hover{color:var(--text);background:var(--surface)}

/* ── Badges ─────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-badge);font-size:11px;font-weight:500}
.badge-success{background:rgba(48,209,88,0.15);color:var(--success)}
.badge-warning{background:rgba(255,214,10,0.15);color:var(--warning)}
.badge-error{background:rgba(255,69,58,0.15);color:var(--error)}
.badge-info{background:rgba(56,132,244,0.15);color:var(--accent)}

/* ── Loading ────────────────────────────────────────────── */
.spinner{
  width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:spin 0.6s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes indeterminate{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}
.loading-state{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px;color:var(--text2);font-size:13px}
.empty-state{text-align:center;padding:40px;color:var(--text3);font-size:13px}
/* ── Rich Empty States (Outlook pattern) ──────────────── */
.empty-state-rich{text-align:center;padding:48px 32px;color:var(--text3)}
.empty-state-icon{font-size:40px;margin-bottom:12px;opacity:0.3;line-height:1}
.empty-state-title{font-size:15px;font-weight:600;color:var(--text2);margin-bottom:6px}
.empty-state-desc{font-size:12px;color:var(--text3);margin-bottom:16px;line-height:1.5;max-width:320px;margin-left:auto;margin-right:auto}
.empty-state-cta{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;font-size:12px;font-weight:500;background:var(--accent);color:#fff;border:none;border-radius:3px;cursor:pointer;transition:all var(--transition)}
.empty-state-cta:hover{background:var(--accent-hover)}
/* Inline add row (Outlook "Add a task" pattern) */
.inline-add-row td{transition:background var(--transition)}
.inline-add-row:hover td{background:var(--surface);color:var(--accent)}

/* ── Mode Indicator Bar ──────────────────────────────── */
.mode-bar{
  display:flex;align-items:center;gap:10px;
  padding:6px 16px;font-size:11px;font-weight:500;
  border-bottom:0.5px solid var(--border);
  animation:fadeIn .2s ease;
}
.mode-bar-icon{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.mode-bar-text{flex:1;color:var(--text2)}
.mode-bar-count{font-family:var(--font-mono);color:var(--text3)}
.mode-bar-action{padding:3px 10px;font-size:10px;font-weight:600;border-radius:3px;cursor:pointer;border:0.5px solid var(--border);background:transparent;color:var(--text2);transition:all var(--transition)}
.mode-bar-action:hover{background:var(--surface);color:var(--text)}
.mode-bar.editing{background:rgba(245,158,11,0.06);border-bottom-color:rgba(245,158,11,0.2)}
.mode-bar.editing .mode-bar-icon{background:var(--warning)}
.mode-bar.comparison{background:rgba(26,111,168,0.06);border-bottom-color:rgba(26,111,168,0.2)}
.mode-bar.comparison .mode-bar-icon{background:var(--accent)}
.mode-bar.pick{background:rgba(34,197,94,0.06);border-bottom-color:rgba(34,197,94,0.2)}
.mode-bar.pick .mode-bar-icon{background:var(--success)}
.stem-consumed td{text-decoration:line-through;opacity:0.5}

/* ── Notifications ──────────────────────────────────────── */
.notif{padding:12px 16px;border-radius:var(--radius-sm);border-left:3px solid;margin-bottom:8px;font-size:13px}
.notif-info{border-color:var(--accent);background:rgba(56,132,244,0.08)}
.notif-warning{border-color:var(--warning);background:rgba(255,214,10,0.08)}
.notif-error{border-color:var(--error);background:rgba(255,69,58,0.08)}
.notif-success{border-color:var(--success);background:rgba(48,209,88,0.08)}
.notif-title{font-weight:600;margin-bottom:2px}
.notif-body{color:var(--text2)}

/* ── Toast ──────────────────────────────────────────────── */
.toast-container{position:fixed;top:60px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:8px}
.toast{
  padding:12px 20px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;
  box-shadow:0 8px 30px rgba(0,0,0,0.4);animation:toastIn 0.3s ease;min-width:260px;
  display:flex;align-items:center;gap:8px;
}
.toast-success{background:var(--success);color:#000}
.toast-error{background:var(--error);color:var(--bg)}
.toast-info{background:var(--accent);color:var(--bg)}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* ── Sections ───────────────────────────────────────────── */
/* @trace: JPM/UBS section header — restyled 2026-04-10 */
.section-title{font-size:16px;font-weight:300;font-family:'Inter',var(--font);color:var(--navy);margin-bottom:16px;display:flex;align-items:center;justify-content:space-between}
.section-subtitle{font-size:12px;color:var(--text2);margin-bottom:12px}

/* ── Result Panel ───────────────────────────────────────── */
.result-panel{
  background:linear-gradient(135deg,rgba(56,132,244,0.05),rgba(48,209,88,0.05));
  border:0.5px solid var(--border);border-radius:var(--radius);padding:var(--pad);
}
.result-value{font-size:24px;font-weight:700;color:var(--accent)}
.result-label{font-size:12px;color:var(--text2);text-transform:uppercase;letter-spacing:0.5px}

/* ── Progress Bar ──────────────────────────────────────── */
.progress-wrap{background:var(--surface);border-radius:var(--radius-sm);height:8px;overflow:hidden;margin-bottom:12px}
.progress-bar{height:100%;border-radius:var(--radius-sm);transition:width 0.4s ease;background:var(--accent)}
.progress-bar.green{background:var(--success)}
.progress-bar.yellow{background:var(--warning)}
.progress-bar.red{background:var(--error)}

/* ── KPI highlight variants ────────────────────────────── */
.kpi-card.highlight{border-color:var(--accent);background:var(--accent-dim)}
.kpi-card.success{border-color:var(--success)}
.kpi-card.error{border-color:var(--error)}
.kpi-value.green{color:var(--success)}
.kpi-value.red{color:var(--error)}
.kpi-value.accent{color:var(--accent)}

/* ── Overview Command Center ─────────────────────────── */
.ovOpenChip.active,.ovCargoChip.active{background:var(--accent)!important;color:var(--bg)!important;border-color:var(--accent)!important}
.ov-ship-row{padding:8px 10px;border-bottom:0.5px solid var(--border);cursor:default}
.ov-ship-row:hover{background:var(--bg1)}
.ov-ship-name{font-weight:600;font-size:12px}
.ov-ship-meta{font-size:11px;color:var(--text2);margin-top:2px}
.ov-l3c{display:inline-flex;gap:4px;margin-top:3px}
.ov-l3c-tag{font-size:9px;padding:1px 5px;border-radius:3px;background:var(--bg1);color:var(--text2);font-weight:600;letter-spacing:0.03em}
.ov-cargo-row{padding:8px 10px;border-bottom:0.5px solid var(--border)}
.ov-cargo-row:hover{background:var(--bg1)}
.ov-cargo-name{font-weight:600;font-size:12px}
.ov-cargo-meta{font-size:11px;color:var(--text2);margin-top:2px}
.ov-cargo-priority{font-size:9px;padding:1px 5px;border-radius:3px;font-weight:600}
.ov-cargo-priority.high{background:rgba(255,69,58,0.15);color:var(--error)}
.ov-cargo-priority.normal{background:rgba(48,209,88,0.15);color:var(--success)}
.ov-cargo-priority.low{background:var(--bg1);color:var(--text3)}
.ov-activity-row{padding:8px 10px;border-bottom:0.5px solid var(--border);display:flex;gap:8px;align-items:flex-start}
.ov-activity-row:hover{background:var(--bg1)}
.ov-activity-icon{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;margin-top:1px}
.ov-activity-icon.ffa{background:rgba(10,132,255,0.15);color:#0A84FF}
.ov-activity-icon.cargo{background:rgba(48,209,88,0.15);color:#30D158}
.ov-activity-icon.voyage{background:rgba(255,159,10,0.15);color:#FF9F0A}
.ov-activity-icon.snp{background:rgba(191,90,242,0.15);color:#BF5AF2}
.ov-activity-msg{font-size:12px;line-height:1.4;flex:1}
.ov-activity-time{font-size:10px;color:var(--text3);white-space:nowrap;margin-top:2px}

/* ── Investment Appraisal — Compact Dense Layout ─────── */
#snp-investments .inv-param-card{padding:10px 12px;margin-bottom:8px}
#snp-investments .inv-section-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--accent);margin-bottom:6px;padding-bottom:4px;border-bottom:0.5px solid var(--border)}
#snp-investments .inv-param-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
/* Fixture-card style: flat grid of label-value pairs, inputs look like values */
#snp-investments .inv-param-grid .inv-flat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:4px 8px}
#snp-investments .inv-param-grid .inv-field{display:flex;flex-direction:column}
#snp-investments .inv-param-grid .inv-field label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:0;line-height:1.3}
#snp-investments .inv-param-grid .inv-field input,
#snp-investments .inv-param-grid .inv-field select{border:0.5px solid transparent;background:transparent;padding:1px 2px;font-size:12px;font-weight:600;color:var(--text);border-radius:var(--radius-xs);outline:none;width:100%;transition:border-color 0.15s,background 0.15s}
#snp-investments .inv-param-grid .inv-field input:hover,
#snp-investments .inv-param-grid .inv-field select:hover{border-color:var(--border);background:var(--surface)}
#snp-investments .inv-param-grid .inv-field input:focus,
#snp-investments .inv-param-grid .inv-field select:focus{border-color:var(--accent);background:rgba(56,132,244,0.04)}
#snp-investments .inv-param-grid .inv-field.wide{grid-column:1 / -1}
/* Legacy form-group fallback for financing dynamic fields */
#snp-investments .inv-param-grid .form-group{margin-bottom:4px}
#snp-investments .inv-param-grid .form-label{font-size:9px;margin-bottom:0;color:var(--text3);text-transform:uppercase;letter-spacing:0.3px}
#snp-investments .inv-param-grid .form-input,
#snp-investments .inv-param-grid .form-select{padding:2px 4px;font-size:12px;font-weight:600}
#snp-investments .inv-param-grid .inv-2col{display:grid;grid-template-columns:1fr 1fr;gap:4px 6px;margin-bottom:4px}
#snp-investments .inv-param-grid .inv-2col .form-group{margin-bottom:0}
#snp-investments .inv-kpi-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
#snp-investments .inv-kpi{background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 10px;border-left:3px solid var(--border);transition:all var(--transition)}
#snp-investments .inv-kpi:hover{border-color:var(--accent)}
#snp-investments .inv-kpi-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:2px}
#snp-investments .inv-kpi-value{font-family:var(--font-mono);font-size:18px;font-weight:700;letter-spacing:-0.4px;line-height:1.1}
#snp-investments .inv-kpi-sub{font-size:9px;color:var(--text3);margin-top:2px}
#snp-investments .inv-kpi.positive{border-left-color:var(--success)}
#snp-investments .inv-kpi.negative{border-left-color:var(--error)}
#snp-investments .inv-kpi.warning{border-left-color:var(--warning)}
#snp-investments .inv-kpi.accent{border-left-color:var(--accent)}
#snp-investments .inv-actions{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:0.5px solid var(--border)}
/* Sensitivity KPI tiles */
.sens-kpi{background:var(--surface);border-radius:var(--radius-xs);padding:6px 8px;text-align:center;border:0.5px solid var(--border);transition:border-color 0.2s}
.sens-kpi-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em}
.sens-kpi-value{font-family:var(--font-mono);font-size:16px;font-weight:700;margin-top:2px;line-height:1.1}
.sens-kpi-delta{font-size:9px;margin-top:1px}
/* Sensitivity step chips */
.sens-step-chip{font-size:9px;font-family:var(--font-mono);padding:4px 0;text-align:center;border:0.5px solid var(--border);border-radius:var(--radius-xs);cursor:pointer;background:var(--surface);color:var(--text3);transition:all 0.15s;line-height:1.2}
.sens-step-chip:hover{border-color:var(--accent);color:var(--text2)}
.sens-step-chip.active{border-color:var(--accent);background:rgba(56,132,244,0.08);color:var(--accent);font-weight:700}
.sens-step-chip.base{border-bottom:2px solid var(--accent)}
.btn-stepper{border:none;background:var(--surface);padding:4px 8px;cursor:pointer;color:var(--text2);font-size:14px;line-height:1;transition:all 0.15s}
.btn-stepper:hover{background:var(--border);color:var(--accent)}
/* Header strip */
#snp-investments .inv-header-strip{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#snp-investments .inv-header-strip select{width:220px;padding:5px 8px;font-size:12px}
#snp-investments .inv-header-strip .inv-header-badges{display:flex;gap:6px;flex:1}
#snp-investments .inv-header-strip .inv-badge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:var(--radius-badge);background:var(--surface);color:var(--text2)}
/* TC Rate cells */
.tc-cell{position:relative;flex:0 0 auto;min-width:64px;text-align:center;border:0.5px solid var(--border);border-right:none;background:var(--card);transition:border-color 0.15s}
.tc-cell:last-child{border-right:0.5px solid var(--border)}
.tc-cell:first-child{border-radius:var(--radius-xs) 0 0 var(--radius-xs)}
.tc-cell:last-child{border-radius:0 var(--radius-xs) var(--radius-xs) 0}
.tc-cell-label{font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:var(--text3);padding:3px 4px 1px;user-select:none}
.tc-cell input{width:100%;border:none;background:transparent;text-align:center;font-size:11px;font-family:var(--font-mono);font-weight:600;padding:1px 3px 4px;color:var(--text);outline:none}
.tc-cell input:focus{background:rgba(56,132,244,0.06)}
.tc-cell.tc-drag-over{border-color:var(--accent);background:rgba(56,132,244,0.08)}
.tc-cell.tc-drag-source{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.tc-cell .tc-handle{position:absolute;bottom:1px;right:1px;width:6px;height:6px;background:var(--accent);cursor:crosshair;opacity:0;transition:opacity 0.15s;border-radius:1px}
.tc-cell:hover .tc-handle,.tc-cell.tc-drag-source .tc-handle{opacity:1}
/* TC rate section header */
#invTcRateSection{margin-top:8px;border-top:0.5px solid var(--border);padding-top:8px}
#invTcRateSection .inv-section-label{margin-bottom:4px;padding-bottom:0;border-bottom:none}
/* Timeline & sensitivity compact */
#snp-investments #invTimelineCard{margin-top:8px}
#snp-investments #invTimelineCard .card-title{font-size:11px;margin-bottom:4px}
#snp-investments .tbl td{padding:3px 6px;font-size:11px}
#snp-investments .tbl th{background:var(--surface);font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);padding:3px 6px;font-size:9px}
#snp-investments #invAnalysisGrid{margin-top:8px}
#snp-investments #invAnalysisGrid .card-title{font-size:11px;margin-bottom:4px}

/* ── Fixtures: Segment Badges ─────────────────────────── */
.fix-seg-vlcc{background:rgba(255,69,58,0.15);color:#FF453A}
.fix-seg-suez{background:rgba(255,214,10,0.15);color:#FFD60A}
.fix-seg-afra{background:rgba(56,132,244,0.15);color:#0A84FF}
.fix-seg-mr{background:rgba(48,209,88,0.15);color:#30D158}
.fix-seg-small{background:rgba(191,90,242,0.15);color:#BF5AF2}
/* ── Fixtures: Sea Performance Badges ─────────────────── */
.fix-perf-faster{background:rgba(48,209,88,0.1);color:var(--success)}
.fix-perf-slower{background:rgba(255,69,58,0.1);color:var(--error)}

/* ── Risk Badge ────────────────────────────────────────── */
.risk-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-badge);font-size:11px;font-weight:600}
.risk-low{background:rgba(48,209,88,0.15);color:var(--success)}
.risk-medium{background:rgba(255,214,10,0.15);color:var(--warning)}
.risk-high{background:rgba(255,69,58,0.15);color:var(--error)}

/* ── TWAP Bars ─────────────────────────────────────────── */
.twap-bar-wrap{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.twap-label{width:50px;font-size:12px;color:var(--text2);text-align:right}
.twap-track{flex:1;background:var(--surface);border-radius:var(--radius-xs);height:24px;overflow:hidden}
.twap-fill{height:100%;border-radius:var(--radius-xs);display:flex;align-items:center;padding-left:8px;font-size:11px;font-weight:600;color:var(--bg);transition:width 0.5s ease}

/* ── Inline Edit ───────────────────────────────────────── */
.inline-edit{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-xs);padding:4px 8px;color:var(--text);font-size:13px;width:80px;text-align:right}
.inline-edit:focus{border-color:var(--accent);outline:none}
.detail-label{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px}
.detail-block{min-width:0}
.blotter-row:hover{background:var(--surface-hover,rgba(255,255,255,0.03))}
.position-detail td{background:transparent !important}

/* ── Scenario Bar ──────────────────────────────────────── */
.scenario-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 12px;background:var(--surface);border-radius:var(--radius-sm);border:0.5px solid var(--border)}
.scenario-bar select{max-width:200px}

/* ── Toggle / Switch ────────────────────────────────────── */
.toggle{position:relative;width:44px;height:24px;cursor:pointer;display:inline-block}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;inset:0;background:var(--border);border-radius:var(--radius);transition:var(--transition);
}
.toggle-slider::before{
  content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;
  top:3px;left:3px;transition:var(--transition);
}
.toggle input:checked+.toggle-slider{background:var(--accent)}
.toggle input:checked+.toggle-slider::before{transform:translateX(20px)}

/* ── Inner Tabs — matches subtab-pill style ────────────── */
.inner-tabs{display:flex;gap:4px;margin-bottom:10px;padding:2px 0 4px;border-bottom:none}
.inner-tab{
  padding:4px 12px;font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;
  border:0.5px solid var(--border);border-radius:var(--radius-badge);background:transparent;
  transition:all var(--transition);white-space:nowrap;
}
.inner-tab:hover{border-color:var(--accent);color:var(--text1)}
.inner-tab.active{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:500}
.inner-tabs-sub{margin-top:2px;margin-bottom:10px;margin-left:0;padding:0 0 0;border:none;background:none;border-radius:0;width:auto;border-bottom:0.5px solid var(--border)}
.inner-tabs-sub .inner-tab{font-size:11px;padding:4px 10px 6px;border-radius:0;border:none;background:none !important;box-shadow:none;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--text3);font-weight:400}
.inner-tabs-sub .inner-tab:hover{color:var(--text);background:none !important;border-color:transparent}
.inner-tabs-sub .inner-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:none !important;box-shadow:none;font-weight:500}
.autocomplete-list{position:absolute;z-index:9000;background:var(--dropdown-bg,var(--card,#fff));border:0.5px solid var(--dropdown-border,var(--border));border-radius:var(--radius);max-height:220px;overflow-y:auto;width:100%;box-shadow:0 4px 16px rgba(0,0,0,0.4)}
.autocomplete-list .ac-item{padding:6px 10px;font-size:13px;cursor:pointer;border-bottom:0.5px solid var(--border)}
.autocomplete-list .ac-item:hover{background:var(--hover)}
.autocomplete-list .ac-item .ac-region{font-size:11px;color:var(--text2);margin-left:6px}

/* ── Entity Modal / Detail Panel ───────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:10000;display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.modal-overlay.open{display:flex}
/* @trace: JPM modal style — restyled 2026-04-07 */
.modal{
  background:var(--bg);border:0.5px solid var(--border);border-radius:6px;
  width:100%;max-width:600px;padding:20px;position:relative;animation:modalIn 0.15s ease;
  margin:auto;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:visible;
}
@keyframes modalIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.modal-title{font-size:16px;font-weight:600}
.modal-close{background:none;border:none;color:var(--text);font-size:20px;line-height:1;cursor:pointer;padding:6px 10px;border-radius:var(--radius-sm);opacity:0.7;transition:opacity var(--transition),background var(--transition)}
.modal-close:hover{opacity:1;background:var(--surface)}
.modal-fullscreen{max-width:100vw!important;width:100vw!important;height:100vh!important;max-height:100vh!important;margin:0!important;border-radius:0!important}
.modal-body{flex:1;overflow-y:auto;min-height:0}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;padding-top:10px;border-top:0.5px solid var(--border)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.detail-item{padding:8px 0}
.detail-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:2px}
.detail-value{font-size:14px;font-weight:500}
.audit-footer{margin-top:12px;padding-top:8px;border-top:0.5px solid var(--border);font-size:11px;color:var(--text3);letter-spacing:0.2px}
/* @trace: JPM detail section — restyled 2026-04-07 */
.detail-section{margin-top:12px;padding-top:10px;border-top:.5px solid var(--border)}
.detail-section-title{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:12px}
.entity-row{cursor:pointer;transition:background var(--transition)}
.entity-row:hover td{background:rgba(56,132,244,0.06) !important}
.cm-ship-active td{background:rgba(26,111,168,0.12) !important;border-left:3px solid var(--accent-color)}
.cm-ship-active td:first-child{padding-left:5px}
.entity-actions{display:flex;gap:2px;align-items:center;justify-content:center;opacity:0.4;transition:opacity var(--transition)}
.entity-row:hover .entity-actions{opacity:1}
.btn-icon{padding:2px 6px;font-size:12px;line-height:1;border-radius:var(--radius-sm);background:none;border:0.5px solid transparent;cursor:pointer;color:var(--text3);transition:all var(--transition)}
.btn-icon:hover{background:var(--surface);border-color:var(--border);color:var(--text)}
.btn-icon.danger:hover{color:var(--error);border-color:var(--error)}
/* ── Wide modal variant (vessel detail) ── */
.modal-wide{max-width:860px !important}
.modal-wide .detail-grid{grid-template-columns:1fr 1fr 1fr}
.vd-tabs{display:flex;gap:0;border-bottom:0.5px solid var(--border);margin-bottom:14px}
.vd-tab{padding:8px 16px;font-size:12px;font-weight:500;cursor:pointer;color:var(--text2);border-bottom:2px solid transparent;transition:all var(--transition)}
.vd-tab:hover{color:var(--text)}
.vd-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.ops-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.ops-kpi{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;text-align:center}
.ops-kpi-label{font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:var(--text3);margin-bottom:3px}
.ops-kpi-value{font-family:var(--font-mono);font-size:18px;font-weight:700;letter-spacing:-0.3px}
.l3c-chip{display:inline-block;padding:2px 8px;font-size:11px;border-radius:10px;background:var(--surface);border:0.5px solid var(--border);margin:2px}
/* ── Q88 Vessel Details Tab ── */
.q88-upload-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:16px;text-align:center;margin-bottom:10px;transition:all var(--transition)}
.q88-upload-zone:hover{border-color:var(--text3)}
.q88-upload-inner{display:flex;flex-direction:column;align-items:center;gap:2px}
#vdTabQ88 .detail-grid{gap:8px 12px}
#vdTabQ88 .detail-item{padding:3px 0}
#vdTabQ88 .detail-label{font-size:10px;margin-bottom:1px}
#vdTabQ88 .detail-value{font-size:13px}
#vdTabQ88 .form-group{margin-bottom:4px}
#vdTabQ88 .form-label{font-size:10px;margin-bottom:1px}
#vdTabQ88 .form-input,#vdTabQ88 .form-select{font-size:12px;padding:4px 6px}
#vdTabQ88 .voy-collapse-section{margin:1px 0}
/* ── Confirm Dialog ── */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn .15s ease}
.confirm-box{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;width:340px;max-width:90vw;animation:modalIn .2s ease}
.confirm-box h3{font-size:14px;font-weight:600;color:var(--text);margin:0 0 8px}
.confirm-box p{font-size:13px;color:var(--text2);margin:0 0 12px;line-height:1.4}
.confirm-box .confirm-actions{display:flex;gap:8px;justify-content:flex-end}
.confirm-box .confirm-actions button{padding:6px 16px;font-size:12px;font-weight:500;border-radius:var(--radius-sm);cursor:pointer;border:0.5px solid var(--border);transition:all var(--transition)}
.confirm-box .btn-cancel{background:var(--surface);color:var(--text2)}
.confirm-box .btn-cancel:hover{background:var(--border);color:var(--text)}
.confirm-box .btn-confirm-del{background:var(--error);color:var(--bg);border-color:var(--error)}
.confirm-box .btn-confirm-del:hover{opacity:0.85}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Voyage 3-Column Layout ─────────────────────────────── */
/* Voyage tab uses full width — break out of .content constraints */
.content.voy-fullwidth{max-width:none;padding:4px 6px 6px}
.grid-voy-3col{display:grid;grid-template-columns:minmax(240px,16%) 1fr minmax(260px,20%);gap:8px;align-items:stretch;height:calc(100vh - 88px)}
.grid-voy-3col .voy-left-panel{overflow-y:auto;overflow-x:hidden;min-height:0;height:100%;padding:10px;background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius);scrollbar-width:thin;scrollbar-color:var(--border) transparent;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.grid-voy-3col .voy-center-panel{overflow-y:auto;overflow-x:hidden;min-height:0;height:100%;padding:0 2px;scrollbar-width:thin;scrollbar-color:var(--border) transparent;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.grid-voy-3col .voy-right-panel{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;min-height:0;height:100%;padding:10px;background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius);scrollbar-width:thin;scrollbar-color:var(--border) transparent;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.grid-voy-3col .voy-left-panel::-webkit-scrollbar,.grid-voy-3col .voy-right-panel::-webkit-scrollbar,.grid-voy-3col .voy-center-panel::-webkit-scrollbar{width:6px}
.grid-voy-3col .voy-left-panel::-webkit-scrollbar-thumb,.grid-voy-3col .voy-right-panel::-webkit-scrollbar-thumb,.grid-voy-3col .voy-center-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.grid-voy-3col .voy-left-panel::-webkit-scrollbar-thumb:hover,.grid-voy-3col .voy-right-panel::-webkit-scrollbar-thumb:hover,.grid-voy-3col .voy-center-panel::-webkit-scrollbar-thumb:hover{background:var(--text3)}
/* Prevent scroll-to-change on number/date/time inputs in voyage panels */
.voy-left-panel input[type="number"],.voy-right-panel input[type="number"]{-moz-appearance:textfield}
/* Right panel section styling */
.voy-right-panel .voy-collapse-section{margin:0 0 4px 0}
.voy-right-panel .voy-collapse-header{padding:6px 8px}
.voy-left-panel .form-group,.voy-right-panel .form-group{margin-bottom:5px;min-width:0;overflow:hidden}
.voy-left-panel .form-label,.voy-right-panel .form-label{font-size:10px;margin-bottom:1px}
.voy-left-panel .form-input,.voy-left-panel .form-select,.voy-right-panel .form-input,.voy-right-panel .form-select{padding:5px 8px 4px;font-size:12px;min-width:0;max-width:100%;box-sizing:border-box}
.voy-left-panel .form-row,.voy-left-panel .form-row-3,.voy-right-panel .form-row,.voy-right-panel .form-row-3{gap:6px}
.voy-left-panel .card-title,.voy-right-panel .card-title{font-size:10px;margin-bottom:4px;color:var(--accent)}
.voy-left-panel .voy-rp-title,.voy-right-panel .voy-rp-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--bg);background:var(--accent);margin:-10px -10px 8px -10px;padding:7px 10px;border-radius:var(--radius) var(--radius) 0 0}
/* Voyage form panel styling — uses style variables */
.voy-left-panel,.voy-right-panel{border-color:var(--accent) !important}
.voy-left-panel .form-label,.voy-right-panel .form-label{color:var(--accent);font-weight:600}
.voy-left-panel .form-group,.voy-right-panel .form-group{position:relative}
.voy-left-panel .port-picker,.voy-right-panel .port-picker{padding:4px 2px;min-height:32px}
.voy-left-panel .voy-collapse-header,.voy-right-panel .voy-collapse-header{background:var(--accent-muted)}
.voy-left-panel .voy-collapse-title,.voy-right-panel .voy-collapse-title{color:var(--accent);font-weight:600}

/* ── Routing panel: route choice groups ───────────────── */
.route-choice-group{display:flex;align-items:center;gap:6px}
.route-choice-label{font-size:10px;color:var(--text2);min-width:58px;flex-shrink:0;text-align:right}
.route-choice-options{display:flex;gap:3px;flex-wrap:wrap}
.route-choice-btn{background:transparent;border:0.5px solid var(--border);color:var(--text2);font-size:11px;padding:3px 10px;border-radius:10px;cursor:pointer;transition:all 0.15s;white-space:nowrap}
.route-choice-btn:hover{border-color:var(--accent);color:var(--accent)}
.route-choice-btn.active{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:600}

/* ── Voyage Comparison ──────────────────────────────────── */
.grid-voy-compare{display:grid;grid-template-columns:300px 1fr;gap:12px;align-items:start;transition:grid-template-columns 0.3s ease;overflow:hidden}
.grid-voy-compare.form-collapsed{grid-template-columns:0px 1fr;gap:0;overflow:hidden}
.grid-voy-compare.form-collapsed>.stack:first-child{overflow:hidden;max-width:0;padding:0;margin:0}
.grid-voy-compare.form-collapsed #voyFormCard{opacity:0;pointer-events:none;overflow:hidden;max-width:0;padding:0;margin:0}
.voy-form-compact .form-input,.voy-form-compact .form-select{padding:5px 8px 4px;font-size:12px}
.voy-form-compact .form-label{font-size:10px;margin-bottom:2px}
.voy-form-compact .form-group{margin-bottom:6px}
.voy-form-compact .card-title{font-size:13px;margin-bottom:8px}
.voy-form-compact .form-row,.voy-form-compact .form-row-3{gap:6px}
.voy-form-compact .card{padding:12px}
.voy-form-compact .section-label{font-size:10px;margin:6px 0 4px}
/* ── Voyage form ultra-compact mode ──────────── */
#voyFormCard.voy-form-ultra{padding:10px 12px}
#voyFormCard.voy-form-ultra .card-title{font-size:12px;margin-bottom:4px}
#voyFormCard.voy-form-ultra .form-group{margin-bottom:4px}
#voyFormCard.voy-form-ultra .form-label{font-size:10px;margin-bottom:1px}
#voyFormCard.voy-form-ultra .form-input,#voyFormCard.voy-form-ultra .form-select{padding:4px 8px 3px;font-size:12px}
#voyFormCard.voy-form-ultra .form-row,#voyFormCard.voy-form-ultra .form-row-3,#voyFormCard.voy-form-ultra .form-row-4{gap:6px}
#voyFormCard.voy-form-ultra #voyFifoFO,#voyFormCard.voy-form-ultra #voyFifoMGO{min-height:0}
#voyFormCard.voy-form-ultra .voy-section-remove{display:none}
.form-row-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
/* ── Collapsible section styles ──────────────── */
.voy-collapse-section{margin:2px 0}
.voy-collapse-header{display:flex;align-items:center;gap:6px;padding:5px 8px;background:var(--surface);border-radius:var(--radius-sm);cursor:pointer;user-select:none}
.voy-collapse-title{font-size:10px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:0.5px}
.voy-collapse-summary{font-size:10px;color:var(--text3);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%;text-align:right}
.comparison-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;padding:6px 0;align-items:stretch}
.cmp-card{background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius);padding:12px;position:relative;transition:border-color var(--transition),transform 0.2s,box-shadow 0.2s;display:flex;flex-direction:column;min-width:0}
.cmp-card:hover{box-shadow:0 2px 12px rgba(0,0,0,0.2)}
.cmp-card.cmp-saved{border-color:var(--success)}
.cmp-card.cmp-selected{border-color:var(--error);background:rgba(255,69,58,0.04)}
.cmp-selected-badge{display:inline-block;background:var(--error);color:var(--bg);font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:0.5px;text-transform:uppercase;margin-right:3px}
.cmp-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.cmp-code{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--accent);letter-spacing:0.5px}
.cmp-close{background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;line-height:1;padding:0}
.cmp-close:hover{color:var(--error)}
.cmp-vessel{font-size:11px;font-weight:600;color:var(--text);margin-bottom:1px}
.cmp-status-row{margin:2px 0 3px}
.cmp-status-row .status-btn{font-size:10px;padding:1px 6px}
.cmp-status-row .status-dropdown{min-width:120px}
.cmp-route{font-size:10px;color:var(--text3);margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.cmp-laycan{font-size:9px;color:var(--text3);margin-bottom:2px;font-variant-numeric:tabular-nums}
.cmp-parties{margin-bottom:4px}
.cmp-party{font-size:9px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;line-height:1.4}
.cmp-party-role{color:var(--text3);opacity:0.7;font-weight:600;text-transform:uppercase;letter-spacing:0.3px}
.cmp-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:0.5px solid var(--border);font-size:11px}
.cmp-row:last-of-type{border-bottom:none}
.cmp-row-label{color:var(--text3);font-size:10px}
.cmp-row-value{font-weight:600;font-variant-numeric:tabular-nums;font-size:11px}
.cmp-actions{display:flex;gap:3px;margin-top:auto;padding-top:6px;flex-wrap:wrap}
.cmp-actions .btn-xs{padding:3px 8px;font-size:10px}
.cmp-icon-btn{min-width:28px;text-align:center;line-height:1.2}
.cmp-toolbar{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;flex-wrap:wrap;gap:4px}
.cmp-toolbar .btn{font-size:10px;padding:3px 7px}
.cmp-counter{font-size:12px;color:var(--text2)}
.cmp-counter strong{color:var(--accent)}
.cmp-section{font-size:8px;text-transform:uppercase;letter-spacing:0.8px;color:var(--text3);padding:5px 0 2px;margin-top:3px;border-top:0.5px solid var(--border);font-weight:600}
.cmp-add-card{background:transparent;border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;min-height:140px;cursor:pointer;transition:border-color var(--transition),background var(--transition)}
.cmp-add-card:hover{border-color:var(--accent);background:rgba(0,122,255,0.04)}
.cmp-add-inner{text-align:center;pointer-events:none}
.cmp-add-icon{font-size:24px;color:var(--text3);line-height:1;margin-bottom:6px;transition:color var(--transition)}
.cmp-add-card:hover .cmp-add-icon{color:var(--accent)}
.cmp-add-label{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:4px}
.cmp-add-hint{font-size:10px;color:var(--text3)}
/* ── Comparison Board (dense table view) ── */
.cmp-board{background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius);overflow-x:auto;margin-bottom:6px}
.cmp-board table{width:100%;border-collapse:collapse;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cmp-board th{background:var(--surface);text-align:left;padding:4px 6px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:0.4px;color:var(--text3);border-bottom:0.5px solid var(--border);position:sticky;top:0;z-index:1}
.cmp-board td{padding:3px 6px;border-bottom:0.5px solid var(--border)}
.cmp-board tr:last-child td{border-bottom:none}
.cmp-board tr:hover{background:rgba(255,255,255,0.02)}
.cmp-board .cb-voyage{font-weight:700;color:var(--accent);font-size:11px}
.cmp-board .cb-vessel{font-weight:600;color:var(--text);max-width:100px;overflow:hidden;text-overflow:ellipsis}
.cmp-board .cb-route{color:var(--text2);font-size:10px;max-width:95px;overflow:hidden;text-overflow:ellipsis}
.cmp-board .cb-best{color:var(--success);font-weight:700}
.cmp-board .cb-worst{color:var(--error);font-weight:700}
.cmp-board .cb-rank{font-weight:800;font-size:12px;text-align:center}
.cmp-board .cb-accept{background:rgba(63,185,80,0.12);color:var(--success);font-weight:700;padding:2px 8px;border-radius:var(--radius-xs);font-size:10px;display:inline-block}
.cmp-board .cb-consider{background:rgba(210,153,34,0.12);color:var(--warning);font-weight:700;padding:2px 8px;border-radius:var(--radius-xs);font-size:10px;display:inline-block}
.cmp-board .cb-reject{background:rgba(248,81,73,0.12);color:var(--error);font-weight:700;padding:2px 8px;border-radius:var(--radius-xs);font-size:10px;display:inline-block}
.cmp-board .cb-cii{font-weight:700;padding:1px 6px;border-radius:3px;font-size:10px;display:inline-block}
.cmp-board-toggle.active{background:var(--accent)!important;color:var(--bg)!important}
/* ── Speed Quick-Pick Buttons ── */
.btn.spd-pick{font-size:10px;padding:2px 8px;min-width:36px;font-weight:600;letter-spacing:.03em;border-radius:var(--radius-sm)}
.btn.spd-pick.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
/* ── Weather Factor Display ── */
.wx-badge{display:inline-block;font-size:10px;font-weight:700;padding:1px 6px;border-radius:3px}
.wx-calm{background:rgba(16,185,129,0.12);color:var(--success)}
.wx-mod{background:rgba(234,179,8,0.12);color:var(--warning)}
.wx-rough{background:rgba(249,115,22,0.12);color:#f97316}
.wx-heavy{background:rgba(239,68,68,0.12);color:var(--error)}
.wx-storm{background:rgba(127,29,29,0.15);color:#7f1d1d}
/* ── Drag & Drop ── */
.cmp-grip{cursor:grab;color:var(--text3);font-size:14px;padding:2px 4px;user-select:none;line-height:1;transition:color var(--transition)}
.cmp-grip:hover{color:var(--accent)}
.cmp-grip:active{cursor:grabbing}
.cmp-card.cmp-dragging{opacity:0.35;transform:scale(0.96)}
.cmp-ghost{position:fixed;pointer-events:none;z-index:200;opacity:0.85;transform:rotate(2deg);box-shadow:0 12px 40px rgba(0,0,0,0.5)}
.cmp-drop-marker{width:100%;height:3px;background:var(--accent);border-radius:2px;grid-column:1/-1;transition:opacity 0.15s}
/* ── Swap Button (removed — grid layout uses drag reorder only) ── */
/* ── Collapsed Cards ── */
.cmp-card .cmp-details{transition:max-height 0.3s ease,opacity 0.3s ease;overflow:hidden}
.cmp-card .cmp-details.cmp-collapsed{max-height:0!important;opacity:0;padding:0;margin:0}
/* ── Preview Card — REMOVED (Hide Result creates real VOY entries now) ── */
/* ── VOY Badge (numbered cards) ── */
.cmp-voy-badge{display:inline-block;background:var(--surface);color:var(--text2);font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;letter-spacing:0.3px;margin-right:4px;border:0.5px solid var(--border)}
/* ── Active Result Card — REMOVED (unified VOY cards with selection) ── */
/* ── Floating Windows ── */
.fw-overlay{position:fixed;inset:0;background:rgba(10,10,12,0.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:100;opacity:0;transition:opacity 0.25s}
.fw-overlay.fw-open{opacity:1}
.fw-window{position:fixed;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);box-shadow:0 4px 24px rgba(0,0,0,0.2);display:flex;flex-direction:column;z-index:101;transform:scale(0.95);opacity:0;transition:transform 0.2s ease,opacity 0.2s ease;max-height:90vh;overflow:hidden}
.fw-window.fw-open{transform:scale(1);opacity:1}
.fw-titlebar{padding:10px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:0.5px solid var(--border);cursor:move;user-select:none;background:var(--bg);border-radius:var(--radius) var(--radius) 0 0}
.fw-title{font-size:13px;font-weight:600;color:var(--text2);letter-spacing:0.3px}
.fw-close{background:none;border:none;color:var(--text2);font-size:16px;line-height:1;cursor:pointer;padding:4px 8px;border-radius:var(--radius-sm);transition:color var(--transition),background var(--transition)}
.fw-close:hover{color:var(--text);background:var(--surface)}
.fw-body{padding:10px 12px;overflow-y:auto;flex:1}
.voy-form-floating{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;margin:0 !important}
.grid-voy-compare.form-detached{grid-template-columns:1fr}
/* ── Retractable Form Tab ── */
.form-tab-strip{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:50;writing-mode:vertical-rl;text-orientation:mixed;background:var(--accent);color:var(--bg);padding:12px 8px;border-radius:0 8px 8px 0;cursor:pointer;font-size:12px;font-weight:600;letter-spacing:0.5px;box-shadow:2px 0 12px rgba(0,0,0,0.3);transition:background var(--transition),transform 0.2s;user-select:none;display:none}
.form-tab-strip:hover{background:var(--accent-hover);transform:translateY(-50%) translateX(2px)}
.grid-voy-compare.form-retracted{grid-template-columns:1fr}
/* ── Pin Button in Floating Window ── */
.fw-pin{background:none;border:none;color:var(--text3);font-size:14px;cursor:pointer;padding:2px 6px;border-radius:var(--radius-xs);transition:color var(--transition),background var(--transition);margin-right:4px}
.fw-pin:hover{color:var(--accent);background:rgba(88,166,255,0.1)}
/* ── P&L Detail Panel (inline below cards) ── */
.cmp-pnl-panel{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-top:6px;display:none;animation:fadeSlideIn 0.25s ease}
.cmp-pnl-panel.open{display:block}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.cmp-pnl-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:0.5px solid var(--border)}
.cmp-pnl-title{font-size:14px;font-weight:600;color:var(--text)}
.cmp-pnl-kpis{display:flex;gap:10px;margin-bottom:8px}
.cmp-pnl-kpi{text-align:center;padding:6px 10px;background:var(--surface);border-radius:var(--radius-sm);border:0.5px solid var(--border)}
.cmp-pnl-kpi-label{font-size:9px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text3);margin-bottom:2px}
.cmp-pnl-kpi-value{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.cmp-pnl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.cmp-pnl-section{background:var(--surface);border-radius:var(--radius-sm);padding:10px;border:0.5px solid var(--border)}
.cmp-pnl-section-title{font-size:9px;text-transform:uppercase;letter-spacing:0.6px;color:var(--text3);font-weight:600;margin-bottom:6px}
.cmp-pnl-row{display:flex;justify-content:space-between;font-size:11px;padding:2px 0;border-bottom:0.5px solid var(--border)}
.cmp-pnl-row:last-child{border-bottom:none}
.cmp-pnl-row.indent{padding-left:10px;font-size:10px;color:var(--text2)}
.cmp-pnl-row-label{color:var(--text3)}
.cmp-pnl-row-value{font-weight:600;font-variant-numeric:tabular-nums}
/* ── P&L Group Card Layout ─────────────────── */
.pnl-grp-header{padding:10px 14px;border-bottom:0.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-height:42px}
.pnl-grp-header-left{display:flex;align-items:center;gap:8px;min-width:0}
.pnl-grp-arrow{font-size:10px;color:var(--text3);flex-shrink:0;width:12px}
.pnl-grp-name{font-weight:700;font-size:13px;white-space:nowrap}
.pnl-grp-chips{display:flex;gap:4px;align-items:center;margin-left:2px}
.pnl-grp-chip{font-size:10px;color:var(--text3);background:var(--surface);padding:2px 8px;border-radius:3px;white-space:nowrap}
.pnl-grp-header-right{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto;padding-left:16px}
.pnl-grp-count{font-size:10px;color:var(--text3);white-space:nowrap;min-width:70px;text-align:right}
.pnl-grp-pnl{font-family:var(--font-mono);font-size:14px;font-weight:700;white-space:nowrap;min-width:90px;text-align:right}
.pnl-grp-edit{font-size:12px;cursor:pointer;padding:2px 4px;opacity:0.5;transition:opacity .15s}
.pnl-grp-edit:hover{opacity:1}
.pnl-grp-footer{padding:8px 14px;border-top:0.5px solid var(--border);font-size:11px;color:var(--text2);display:flex;gap:16px;flex-wrap:wrap;align-items:center;min-height:34px}
.pnl-grp-sep{color:var(--border)}

/* ── Voyage Layout — Ultra-Dense (all content preserved, maximum compression) ── */
#voyLayoutGrid{gap:10px !important}
#voyLayoutGrid .stack{gap:6px}
#voyLayoutGrid .card{padding:8px 10px}
#voyLayoutGrid .card-title{margin-bottom:4px;font-size:11px}
#voyLayoutGrid .form-group{margin-bottom:6px}
#voyLayoutGrid .form-group label{font-size:10px;margin-bottom:1px}
#voyLayoutGrid .form-row,#voyLayoutGrid .form-row-3{gap:6px}
/* Align inputs at bottom: stretch groups to equal height, labels stay at top, inputs pushed down */
#voyLayoutGrid .form-row,#voyLayoutGrid .form-row-3{align-items:stretch}
#voyLayoutGrid .form-row>.form-group,#voyLayoutGrid .form-row-3>.form-group{display:flex;flex-direction:column;margin-bottom:0}
#voyLayoutGrid .form-row>.form-group>.form-label,#voyLayoutGrid .form-row-3>.form-group>.form-label{flex:0 0 auto}
#voyLayoutGrid .form-row>.form-group>.form-input,#voyLayoutGrid .form-row>.form-group>.form-select,#voyLayoutGrid .form-row>.form-group>.time-compact,#voyLayoutGrid .form-row>.form-group>.date-compact,
#voyLayoutGrid .form-row-3>.form-group>.form-input,#voyLayoutGrid .form-row-3>.form-group>.form-select,#voyLayoutGrid .form-row-3>.form-group>.time-compact,#voyLayoutGrid .form-row-3>.form-group>.date-compact{margin-top:auto}
#voyLayoutGrid .form-group{position:relative}
/* Compact sizing for voyage calculator inputs */
#voyLayoutGrid input,#voyLayoutGrid select{padding:5px 8px 4px;font-size:12px;-webkit-appearance:none;appearance:none}
#voyLayoutGrid .kpi-grid{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}
#voyLayoutGrid .kpi-card{padding:5px 8px}
#voyLayoutGrid .kpi-label{margin-bottom:1px;font-size:9px}
#voyLayoutGrid .kpi-value{font-size:16px;letter-spacing:-0.3px}
#voyLayoutGrid .kpi-change{margin-top:1px;font-size:9px}
#voyLayoutGrid .section-label{margin:1px 0 1px;font-size:10px}
#voyLayoutGrid .result-panel{padding:8px 10px}
#voyLayoutGrid .result-value{font-size:18px}
#voyLayoutGrid .result-label{font-size:11px}
#voyLayoutGrid #voyLegBreakdown{margin-top:4px}
#voyLayoutGrid .table-wrap{margin-top:4px}
#voyLayoutGrid .tbl td{padding:3px 8px;font-size:12px}
#voyLayoutGrid .tbl th{background:var(--surface);font-size:8px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--text3);padding:3px 8px;font-size:9px}
#voyLayoutGrid .tbl thead th[colspan]{font-size:12px !important;padding-bottom:4px !important}
#voyLayoutGrid .btn-group{gap:3px}
#voyLayoutGrid .btn-group .btn{font-size:10px;padding:3px 8px}
#voyLayoutGrid #voyLegBreakdown .card{padding:6px 8px}
#voyLayoutGrid #voyLegBreakdown>div{margin-bottom:4px;gap:6px}
#voyLayoutGrid #pnlFixtureCard{margin-bottom:4px}
#voyLayoutGrid #pnlFixtureCard .card-title{margin-bottom:4px}
#voyLayoutGrid #voyCIIBadge{margin-bottom:4px}
#voyLayoutGrid #voyDemurrageResult{margin-top:4px}
#voyLayoutGrid #voyWSCompare{margin-top:4px}
#voyLayoutGrid .detail-grid{gap:6px}
#voyLayoutGrid .detail-item{padding:4px 0}
#voyLayoutGrid .detail-label{font-size:10px;margin-bottom:1px}
#voyLayoutGrid .detail-value{font-size:12px}
#voyLayoutGrid .detail-section{margin-top:8px;padding-top:6px}
#voyLayoutGrid .detail-section-title{font-size:10px;margin-bottom:6px}
#voyLayoutGrid .tbl tr[onclick]{cursor:pointer;user-select:none}
#voyLayoutGrid .tbl tr[onclick]:hover td{background:rgba(56,132,244,0.06)}

/* ── Tier 1 Validation (Bible Ch.17) ────────────────────── */
.validation-banner{padding:10px 14px;border-radius:var(--radius);margin-bottom:12px;font-size:12px;line-height:1.5}
.validation-banner ul{margin:4px 0 0 16px;padding:0}
.validation-banner li{margin:2px 0}
.validation-error{background:rgba(220,38,38,0.08);border:0.5px solid rgba(220,38,38,0.3);color:#dc2626}
.validation-warning{background:rgba(245,158,11,0.08);border:0.5px solid rgba(245,158,11,0.3);color:#d97706}
.validation-info{background:rgba(59,130,246,0.08);border:0.5px solid rgba(59,130,246,0.3);color:#3b82f6}
.field-error{border-color:#dc2626 !important;box-shadow:0 0 0 1px rgba(220,38,38,0.2)}
/* Ownership + Employment badges */
.badge-owned{background:var(--accent);color:#fff;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:600}
.badge-tc-in{background:transparent;color:var(--accent);border:0.5px solid var(--accent);padding:1px 5px;border-radius:3px;font-size:10px;font-weight:600}
.badge-spot{background:#22c55e;color:#fff;padding:2px 6px;border-radius:3px;font-size:10px}
.badge-tc-out{background:#3b82f6;color:#fff;padding:2px 6px;border-radius:3px;font-size:10px}
.badge-idle{background:#9ca3af;color:#fff;padding:2px 6px;border-radius:3px;font-size:10px}
.badge-drydock{background:#f59e0b;color:#fff;padding:2px 6px;border-radius:3px;font-size:10px}

/* ── Calculator V2 — Horizontal Strip Layout ─────────── */
.calc-strip{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:flex-end}
.calc-ig{display:flex;flex-direction:column;gap:1px}
.calc-ig label{font-size:9px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text3);font-weight:500;white-space:nowrap}
.calc-ig input,.calc-ig select{font-size:11px;padding:4px 6px;border:0.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text)}
.calc-ig input:focus,.calc-ig select:focus{border-color:var(--accent);outline:none}
.calc-ig input[readonly]{background:var(--bg);color:var(--text2)}
.calc-ig-e input{border-color:var(--accent-dim);background:var(--bg)}
.calc-ig-ws input{border-color:var(--accent);font-weight:600;color:var(--accent)!important;font-family:var(--font-mono);font-size:13px;text-align:center}
.calc-pills{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;font-size:9px}
.calc-pills span{padding:2px 8px;border-radius:99px;background:var(--surface);color:var(--text2);border:0.5px solid var(--border);white-space:nowrap;font-family:var(--font-mono);letter-spacing:-0.2px}
.calc-pills .pill-book{background:var(--accent-dim);color:var(--accent);font-weight:500;font-family:var(--font-sans)}
.calc-pills .pill-adv{cursor:pointer;color:var(--accent);border-color:var(--accent-dim);font-family:var(--font-sans)}
.calc-cb{padding:6px 16px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;font-weight:600;font-size:11px;border:none;cursor:pointer;white-space:nowrap;font-family:inherit;transition:opacity .15s}
.calc-cb:hover{opacity:.88}

/* Result header */
.calc-rh{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius);margin-top:8px;background:var(--card);border:0.5px solid var(--border);overflow-x:auto;flex-wrap:nowrap;animation:calcFadeUp .25s ease .05s both}
.calc-rh.ok{border-left:3px solid var(--success)}
.calc-rh.bad{border-left:3px solid var(--error)}
.calc-rh .rm{display:flex;flex-direction:column;gap:0;min-width:fit-content;text-align:center;min-width:72px}
.calc-rh .rm-l{font-size:8px;text-transform:uppercase;letter-spacing:0.4px;color:var(--text3);margin-bottom:1px}
.calc-rh .rm-v{font-size:15px;font-weight:500;font-family:var(--font-mono);letter-spacing:-0.5px}
.calc-rh .sp{width:1px;height:28px;background:var(--border);flex-shrink:0}

/* Warnings */
.calc-wn{display:flex;align-items:center;gap:6px;padding:6px 12px;margin-top:6px;border-radius:var(--radius-sm);font-size:10px;background:var(--surface);border:0.5px solid var(--border)}
.calc-wn .wd{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.calc-wr{border-color:var(--error);background:color-mix(in srgb,var(--error) 8%,var(--bg))}
.calc-wa{background:color-mix(in srgb,var(--warning) 8%,var(--bg));border-color:rgba(0,0,0,0.06);color:var(--warning)}

/* Detail cards */
.calc-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
@media(max-width:900px){.calc-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.calc-cards{grid-template-columns:1fr}}
.calc-dc{background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius);padding:10px 12px;animation:calcFadeUp .25s ease both}
.calc-dc:nth-child(1){animation-delay:.08s}
.calc-dc:nth-child(2){animation-delay:.12s}
.calc-dc:nth-child(3){animation-delay:.16s}
.calc-dc:nth-child(4){animation-delay:.2s}
.calc-dc-t{font-size:8px;text-transform:uppercase;letter-spacing:0.7px;color:var(--text3);font-weight:500;margin-bottom:5px;padding-bottom:4px;border-bottom:0.5px solid var(--border)}
.calc-dr{display:flex;justify-content:space-between;align-items:baseline;padding:1.5px 0;font-size:11px}
.calc-dr-l{color:var(--text2)}
.calc-dr-v{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:-0.3px}
.calc-dr-s{font-size:9px;color:var(--text3);font-family:var(--font-mono);padding:0 0 1px}
.calc-dr-d{border-top:0.5px solid var(--border);margin:3px 0}
.calc-dr-t{font-weight:500}
.calc-dr-t .calc-dr-l,.calc-dr-t .calc-dr-v{font-weight:500;color:var(--text)}

/* Action buttons */
.calc-ac{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.calc-ab{padding:5px 14px;border-radius:var(--radius-sm);background:var(--surface);border:0.5px solid var(--border);font-size:10px;cursor:pointer;color:var(--text);font-family:inherit;transition:all .15s}
.calc-ab:hover{background:var(--card);border-color:var(--accent-dim)}
.calc-ab.ap{background:var(--accent);color:var(--bg);border-color:transparent;font-weight:500}

/* Sensitivity matrix */
.calc-sn{margin-top:8px;background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius);padding:9px 11px}
.calc-sn .tg{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.calc-sn .tg-t{font-size:8px;font-weight:500;color:var(--text3);text-transform:uppercase;letter-spacing:0.7px}
.calc-sn .tg-a{transition:transform .2s;font-size:9px;color:var(--text3)}
.calc-sn .tg-a.op{transform:rotate(90deg)}
.calc-sn table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:10px;font-family:var(--font-mono)}
.calc-sn td,.calc-sn th{padding:4px 3px;text-align:center}
.calc-sn .sh{color:var(--text3);font-weight:500;font-size:9px}
.calc-sn .srl{text-align:left;color:var(--text2);font-size:9px;font-family:var(--font-sans)}
.calc-sn .sy{background:var(--accent-dim);color:var(--accent);border-radius:3px;font-weight:500}
.calc-sn .sok{color:var(--success)}
.calc-sn .sbd{color:var(--error)}

/* Comparison cards */
.calc-cp{margin-top:10px}
.calc-ct{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:11px;font-weight:500}
.calc-cg{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.calc-cc{background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius);padding:10px;cursor:pointer;position:relative;transition:all .15s;width:calc(33.33% - 4px);min-width:240px}
.calc-cc:hover{border-color:var(--border);background:var(--surface)}
.calc-cc.cc-b{border-color:var(--accent)}
.calc-cc.ed{border:2px solid var(--accent)}
.calc-cc .ch{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px}
.calc-cc .cn{font-size:12px;font-weight:500}
.calc-cc .cr{font-size:10px;color:var(--text2)}
.calc-cc .cm{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.calc-cc .cv{padding:4px 6px;border-radius:var(--radius-sm);background:var(--surface);text-align:center}
.calc-cc .cl{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:0.3px}
.calc-cc .cvv{font-size:13px;font-weight:500;font-family:var(--font-mono);letter-spacing:-0.4px;margin-top:1px}
.calc-cc .cd{font-size:9px;color:var(--text3);font-family:var(--font-mono);margin-top:4px}
.calc-cc .ca{position:absolute;top:4px;right:4px;display:flex;gap:4px;opacity:0;transition:opacity .12s}
.calc-cc:hover .ca{opacity:1}
.calc-cc .cx{font-size:9px;padding:2px 5px;border-radius:3px;border:0.5px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer;font-family:inherit}
.calc-cc .cx:hover{color:var(--text);border-color:var(--text3)}
.calc-cc .cx.xd{color:var(--error)!important;border-color:rgba(220,38,38,.2)!important}
.calc-cc .cx.xd:hover{background:color-mix(in srgb,var(--error) 8%,var(--bg))!important}
.calc-cc .eh{display:none;font-size:8px;color:var(--accent);margin-top:3px;font-style:italic}
.calc-cc.ed .eh{display:block}

/* Badges */
.calc-bd{display:inline-block;padding:1px 6px;border-radius:3px;font-size:8px;font-weight:600;letter-spacing:0.3px;text-transform:uppercase}
.calc-bo{background:color-mix(in srgb,var(--success) 15%,var(--bg));color:var(--success)}
.calc-bt{background:color-mix(in srgb,var(--accent) 15%,var(--bg));color:var(--accent)}
.calc-bs{background:color-mix(in srgb,var(--info) 15%,var(--bg));color:var(--info)}

/* Animations */
@keyframes calcFadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* ── Calculator V2 Input Groups ─────────── */
.calc2-ig{display:flex;flex-direction:column;gap:1px}
.calc2-ig label{font-size:9px;text-transform:uppercase;letter-spacing:0.5px;color:var(--text3);font-weight:500;white-space:nowrap}
.calc2-ig input,.calc2-ig select{font-size:11px;padding:4px 6px;border:0.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);pointer-events:auto!important;opacity:1!important;position:relative;z-index:1}
.calc2-ig-e input{border-color:var(--accent-dim,var(--border))}
.calc2-ig-ws input{border-color:var(--accent);font-weight:600;color:var(--accent)!important;font-family:var(--font-mono)}

/* ── Mobile ─────────────────────────────────────────────── */
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:90}
@media(max-width:768px){
  .topnav{flex-wrap:wrap;height:auto;min-height:var(--topnav-h);padding:6px 12px}
  .topnav-brand{margin-right:auto}
  .topnav-groups{order:3;width:100%;overflow-x:auto;padding:4px 0 2px}
  .topnav-group-btn{padding:4px 8px;font-size:11px}
  .topnav-right{order:2}
  .hamburger{display:none}
  .grid-2,.grid-3,.grid-4,.grid-1-2,.grid-2-1,.grid-voy-compare,.grid-voy-3col{grid-template-columns:1fr}
  .grid-voy-3col{height:auto}
  .grid-voy-3col .voy-left-panel,.grid-voy-3col .voy-center-panel,.grid-voy-3col .voy-right-panel{height:auto}
  .content.voy-fullwidth{padding:6px}
  .comparison-row{gap:8px}
  .comparison-row{grid-template-columns:1fr}
  .cmp-card{width:100%}
  .form-row,.form-row-3,.form-row-4{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .content{padding:10px}
  .modal{max-width:100%}
  .detail-grid{grid-template-columns:1fr}
  .modal-wide .detail-grid{grid-template-columns:1fr}
  .ops-kpi-grid{grid-template-columns:repeat(2,1fr)}
  #vdTabQ88 .detail-grid{grid-template-columns:1fr 1fr}
  .subtab-bar{overflow-x:auto;flex-wrap:nowrap;padding:4px 0 8px}
  .subtab-pill{font-size:11px;padding:4px 10px}
}
/* ── Leaflet dark overrides ────────────────────────────── */
.leaflet-container{background:var(--bg)!important;font-family:var(--font)}
.leaflet-control-zoom a{background:var(--card)!important;color:var(--text)!important;border-color:var(--border)!important}
.leaflet-control-zoom a:hover{background:var(--surface)!important}
.leaflet-tooltip{background:var(--bg);color:var(--text);border:0.5px solid var(--border);font-size:12px;padding:4px 8px;border-radius:var(--radius-xs);box-shadow:0 2px 8px rgba(0,0,0,0.4)}
.leaflet-tooltip-top:before{border-top-color:var(--border)}
.marker-cluster div{background:rgba(10,132,255,0.7)!important;color:#fff!important}
.marker-cluster{background:rgba(10,132,255,0.3)!important}
/* ── Port autocomplete dropdown ──────────────────────────── */
.port-autocomplete{position:fixed;z-index:9999;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);max-height:280px;overflow-y:auto;display:none;box-shadow:0 4px 16px rgba(0,0,0,0.5)}
.port-autocomplete.active{display:block}
.port-ac-item{padding:8px 12px;cursor:pointer;font-size:13px;border-bottom:0.5px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.port-ac-item:last-child{border-bottom:none}
.port-ac-item:hover,.port-ac-item.selected{background:var(--surface)}
.port-ac-item .port-name{font-weight:500}
.port-ac-item .port-region{font-size:11px;color:var(--text2)}
/* ── SOF view switchboard pills ──────────────────────────── */
.sof-view-pill { background: var(--surface2); color: var(--text2); border: 0.5px solid var(--border); }
.sof-view-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ══ SOF Timeline Component ══════════════════════════════════
   Vertical timeline: time left, connector line center, details right.
   Color-coded badges. Works in all 9 themes via CSS custom properties.
   ════════════════════════════════════════════════════════════ */
.sof-timeline{position:relative;padding:8px 0}
.sof-timeline-item{display:flex;align-items:flex-start;gap:12px;padding:6px 0;position:relative;min-height:42px}
.sof-timeline-item:not(:last-child)::after{
  content:'';position:absolute;left:92px;top:30px;bottom:-6px;width:2px;background:var(--border)
}
.sof-timeline-time{width:80px;flex-shrink:0;text-align:right;font-family:var(--font-mono,'monospace');font-size:11px;color:var(--text2);padding-top:3px;line-height:1.3}
.sof-timeline-time .sof-date{font-size:10px;color:var(--text3);display:block}
.sof-timeline-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:4px;border:2px solid var(--card);box-shadow:0 0 0 2px var(--border)}
.sof-timeline-body{flex:1;min-width:0}
.sof-timeline-title{font-size:12px;font-weight:600;color:var(--text);line-height:1.4}
.sof-timeline-meta{font-size:11px;color:var(--text2);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}
.sof-timeline-remarks{font-size:11px;color:var(--text3);font-style:italic;margin-top:2px}
.sof-timeline-laytime{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:1px 6px;border-radius:var(--radius-badge);margin-left:6px}

/* Badge colors: green=cargo ops, blue=sailing, amber=NOR/anchor, red=delays */
.sof-dot-cargo{background:var(--success);box-shadow:0 0 0 2px rgba(var(--success),0.2)}
.sof-dot-sailing{background:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent),0.2)}
.sof-dot-nor{background:var(--warning);box-shadow:0 0 0 2px rgba(var(--warning),0.2)}
.sof-dot-delay{background:var(--error);box-shadow:0 0 0 2px rgba(var(--error),0.2)}
.sof-dot-default{background:var(--text3);box-shadow:0 0 0 2px var(--border)}

.sof-badge-cargo{background:rgba(48,209,88,0.12);color:var(--success)}
.sof-badge-sailing{background:rgba(56,132,244,0.12);color:var(--accent)}
.sof-badge-nor{background:rgba(255,214,10,0.12);color:var(--warning)}
.sof-badge-delay{background:rgba(255,69,58,0.12);color:var(--error)}

.sof-laytime-on{background:rgba(48,209,88,0.1);color:var(--success)}
.sof-laytime-off{background:rgba(255,69,58,0.1);color:var(--error)}
.sof-laytime-count{background:rgba(56,132,244,0.1);color:var(--accent)}

/* Empty timeline state */
.sof-timeline-empty{text-align:center;padding:32px 16px;color:var(--text3);font-size:12px}
.sof-timeline-empty svg{width:24px;height:24px;margin-bottom:8px;opacity:0.4}

/* Actions row */
.sof-timeline-actions{display:flex;gap:6px;margin-top:4px}
.sof-timeline-actions .btn{font-size:10px;padding:2px 8px}

/* ── Auth Screens (Login + Role Selector) ────────────── */
.antares-auth-overlay{
  position:fixed;inset:0;z-index:10001;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--navy);
}
.antares-auth-card{
  width:100%;max-width:400px;padding:44px 40px;text-align:center;
  background:var(--card);border:0.5px solid var(--border);border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  position:relative;
}
.antares-auth-logo{margin:0 auto 20px;width:48px;height:48px}
.antares-auth-brand{font-size:24px;font-weight:200;letter-spacing:6px;color:var(--navy);margin-bottom:4px;font-family:var(--font-display)}
.antares-auth-sub{font-size:9px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-bottom:32px}
.antares-auth-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px;font-family:var(--font)}
.antares-auth-desc{font-size:12px;color:var(--text3);margin-bottom:32px}
.antares-auth-field{text-align:left;margin-bottom:18px}
.antares-auth-label{font-size:9px;color:var(--text3);font-weight:600;display:block;margin-bottom:6px;letter-spacing:0.08em;text-transform:uppercase}
.antares-auth-input{
  width:100%;font-size:13px;padding:11px 14px;
  border:0.5px solid var(--border);border-radius:4px;
  background:var(--bg);color:var(--text);outline:none;
  font-family:var(--font);transition:border-color var(--transition);
}
.antares-auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}
.antares-auth-input::placeholder{color:var(--text3)}
.antares-auth-error{color:var(--error);font-size:11px;margin-bottom:8px;min-height:16px;text-align:left}
.antares-auth-btn{
  width:100%;padding:12px 20px;font-size:13px;font-weight:600;
  background:var(--navy);color:#fff;border:none;border-radius:4px;
  cursor:pointer;font-family:var(--font);transition:all var(--transition);
  letter-spacing:0.04em;
}
.antares-auth-btn:hover{background:var(--accent)}
.antares-auth-btn:disabled{opacity:0.35;cursor:not-allowed;background:var(--navy)}
.antares-auth-hint{font-size:10px;color:var(--text3);margin-top:20px}
.antares-auth-copyright{position:absolute;bottom:20px;font-size:9px;color:rgba(255,255,255,0.3);letter-spacing:0.5px}
/* Role cards grid */
.antares-role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.role-card{
  padding:20px 12px;border-radius:6px;border:1px solid var(--border);
  cursor:pointer;transition:all var(--transition);background:var(--card);text-align:center;
}
.role-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.role-card.selected{
  border-color:var(--accent);background:color-mix(in srgb, var(--accent) 8%, var(--card));
  border-width:2px;transform:translateY(-2px);
}
.role-card .role-icon{width:32px;height:32px;margin:0 auto 8px;color:var(--text3)}
.role-card.selected .role-icon{color:var(--accent)}
.role-card .role-name{font-size:13px;font-weight:600;color:var(--text);font-family:var(--font)}
.role-card .role-meta{font-size:9px;color:var(--text3);margin-top:4px}

/* ── Agent Chat UI — Side Panel (Outlook Copilot pattern) ── */
/* FAB hidden — copilot triggered from Nav Rail button */
.agent-chat-fab{display:none!important}

.agent-chat-modal{
  position:fixed;top:0;right:0;bottom:0;z-index:9999;
  width:360px;max-width:90vw;height:100vh;
  background:var(--card);border-left:0.5px solid var(--border);
  border-radius:0;box-shadow:-4px 0 24px rgba(0,0,0,0.08);
  display:flex;flex-direction:column;overflow:hidden;
  transition:transform 0.2s ease;transform:translateX(0);
}
.agent-chat-hidden{transform:translateX(100%)!important;pointer-events:none}
.agent-chat-minimized .agent-chat-body,
.agent-chat-minimized .agent-chat-footer{display:none}
.agent-chat-minimized{height:auto}

.agent-chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:0.5px solid var(--border);
  background:var(--bg);cursor:default;user-select:none;
}
.agent-chat-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;color:var(--text)}
.agent-chat-icon{font-size:18px}
.agent-chat-header-btns{display:flex;gap:4px}
.agent-chat-btn-min,.agent-chat-btn-close{
  background:none;border:none;cursor:pointer;
  width:28px;height:28px;border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:16px;line-height:1;transition:all 0.15s;
}
.agent-chat-btn-min:hover{background:var(--surface);color:var(--text)}
.agent-chat-btn-close:hover{background:var(--surface);color:var(--text)}

.agent-chat-body{
  flex:1;overflow-y:auto;padding:16px;
  display:flex;flex-direction:column;gap:12px;
}

/* Welcome screen */
.agent-chat-welcome{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:20px 8px;flex:1;
}
.agent-chat-welcome-icon{font-size:36px;margin-bottom:8px;opacity:0.6}
.agent-chat-welcome-title{font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px}
.agent-chat-welcome-text{font-size:12px;color:var(--text2);margin-bottom:16px;line-height:1.5}
.agent-chat-suggestions{display:flex;flex-direction:column;gap:6px;width:100%}
.agent-chat-suggestion{
  background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm);
  padding:8px 12px;font-size:11px;color:var(--text2);cursor:pointer;
  text-align:left;transition:all 0.15s;line-height:1.4;
}
.agent-chat-suggestion:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Messages */
.agent-msg{display:flex;flex-direction:column}
.agent-msg-user{align-items:flex-end}
.agent-msg-assistant{align-items:flex-start}
.agent-msg-bubble{
  max-width:85%;padding:10px 14px;border-radius:var(--radius-sm);
  font-size:13px;line-height:1.5;word-wrap:break-word;
}
.agent-msg-user-bubble{
  background:var(--accent);color:#fff;
  border-bottom-right-radius:var(--radius-xs);
}
.agent-msg-assistant-bubble{
  background:var(--surface);color:var(--text);
  border:0.5px solid var(--border);
  border-bottom-left-radius:var(--radius-xs);
}
.agent-msg-assistant-bubble strong{color:var(--accent)}
.agent-msg-assistant-bubble code{
  background:var(--border);padding:1px 4px;border-radius:3px;
  font-family:var(--font-mono);font-size:11px;
}
.agent-bullet{color:var(--accent);font-weight:700;margin-right:4px}
.agent-money{color:var(--success);font-weight:600}

/* Tool execution indicator */
.agent-msg-tool{
  display:flex;align-items:center;gap:6px;
  padding:4px 8px;font-size:11px;color:var(--text3);
  font-style:italic;
}
.agent-msg-tool-icon{font-size:13px}
.agent-msg-tool-name{font-family:var(--font-mono);font-size:10px}

/* Feedback buttons */
.agent-feedback-row{
  display:flex;align-items:center;gap:4px;
  margin-top:2px;padding-left:2px;flex-wrap:wrap;
}
.agent-feedback-btn{
  background:none;border:none;cursor:pointer;
  font-size:14px;opacity:0.3;padding:2px 4px;
  border-radius:4px;transition:opacity 0.15s, background 0.15s;
  line-height:1;
}
.agent-feedback-btn:hover{opacity:0.8;background:var(--surface)}
.agent-feedback-btn.agent-feedback-active{opacity:1}
.agent-feedback-confirm{
  font-size:12px;color:var(--success);margin-left:4px;
  transition:opacity 0.5s;
}
.agent-feedback-form{
  display:flex;flex-direction:column;gap:6px;
  width:100%;margin-top:6px;
}
.agent-feedback-select{
  font-size:11px;padding:4px 8px;border:0.5px solid var(--border);
  border-radius:var(--radius-xs);background:var(--surface);
  color:var(--text);font-family:var(--font);
}
.agent-feedback-text{
  font-size:11px;padding:6px 8px;border:0.5px solid var(--border);
  border-radius:var(--radius-xs);background:var(--surface);
  color:var(--text);font-family:var(--font);resize:vertical;
}
.agent-feedback-submit{
  align-self:flex-end;font-size:11px;padding:4px 12px;
  background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius-xs);cursor:pointer;
  font-family:var(--font);
}
.agent-feedback-submit:hover{opacity:0.9}

/* Typing indicator */
.agent-typing .agent-msg-bubble{padding:10px 18px}
.agent-typing-dots span{
  animation:agentDot 1.4s infinite ease-in-out;
  font-size:18px;font-weight:700;color:var(--text3);
}
.agent-typing-dots span:nth-child(2){animation-delay:0.2s}
.agent-typing-dots span:nth-child(3){animation-delay:0.4s}
@keyframes agentDot{
  0%,80%,100%{opacity:0.2}
  40%{opacity:1}
}

/* Footer / Input */
.agent-chat-footer{
  border-top:0.5px solid var(--border);padding:10px 12px 8px;
  background:var(--card);
}
.agent-chat-input-row{display:flex;align-items:flex-end;gap:8px}
.agent-chat-input{
  flex:1;resize:none;border:0.5px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 12px;
  font-size:13px;font-family:var(--font);color:var(--text);
  background:var(--surface);outline:none;
  max-height:120px;line-height:1.4;
  transition:border-color 0.15s;
}
.agent-chat-input:focus{border-color:var(--accent)}
.agent-chat-input::placeholder{color:var(--text3)}
.agent-chat-send{
  background:var(--accent);border:none;border-radius:var(--radius-sm);
  width:36px;height:36px;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.15s;flex-shrink:0;
}
.agent-chat-send:hover{background:var(--accent-hover)}
.agent-chat-send:disabled{opacity:0.5;cursor:not-allowed}
.agent-chat-footer-meta{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:6px;
}
.agent-chat-status{font-size:10px;color:var(--text3)}
.agent-chat-clear{
  background:none;border:none;font-size:10px;color:var(--text3);
  cursor:pointer;padding:2px 6px;border-radius:var(--radius-xs);
}
.agent-chat-clear:hover{color:var(--accent);background:var(--surface)}

/* ── Mode Navigation Bar ───────────────────────────── */
.nav-mode-bar{
  display:flex;gap:2px;padding:4px 8px;
  border-bottom:0.5px solid var(--border);
  background:var(--bg);
}
.nav-mode-btn{
  padding:6px 16px;border:none;border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  background:transparent;color:var(--text2);font-size:12px;font-weight:600;
  cursor:pointer;text-transform:uppercase;letter-spacing:0.5px;
  transition:all 0.15s ease;
}
.nav-mode-btn:hover{background:var(--surface);color:var(--text)}
.nav-mode-btn.active{
  background:var(--accent);color:#fff;
}
/* T-002: Mode pills hidden — modes now in Nav Rail */
.nav-modes-row{display:none}
.nav-mode-btn{display:none}
.nav-mode-sep{display:none}
/* FD-011: Segment pills hidden — moved to nav rail bottom */
.nav-segment-pills{display:none}
.nav-tabs-row{display:flex;gap:2px;padding:0 4px;flex:1;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.nav-tabs-row::-webkit-scrollbar{height:3px}
.nav-tabs-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.nav-tabs-row::-webkit-scrollbar-track{background:transparent}

/* ── Entity Cards ──────────────────────────────────── */
.entity-card{
  display:inline-flex;align-items:center;gap:4px;
  cursor:pointer;padding:2px 6px;border-radius:var(--radius-xs);
  transition:background 0.1s ease;
}
.entity-card:hover{background:var(--surface);}
.entity-card strong{color:var(--accent);font-weight:600;}
.entity-card.compact{font-size:12px;}
.entity-card .text-muted{color:var(--text3);font-size:11px;}

/* ═══ Calculator V2 — JPM/UBS institutional style ═══
 * @trace: redesigned 2026-04-07 based on JPM/UBS measurements
 * Reference: JPM inputs 36px/13px, UBS KPIs 28px/10px, JPM tables 12px/36px
 * Key changes: +4px input height, +1-2px fonts, +6px card padding, radius 3px
 */
.calc2-card{background:var(--card);border:0.5px solid var(--border);border-radius:6px;padding:14px 16px;margin-bottom:6px}
.calc2-strip{display:flex;gap:4px 0;align-items:flex-end;flex-wrap:nowrap}
.calc2-ig{display:flex;flex-direction:column;gap:2px}
.calc2-ig label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;font-weight:500}
.calc2-ig input,.calc2-ig select{font-family:var(--font-body,system-ui);font-size:12px;padding:6px 10px;height:32px;border:0.5px solid var(--border);border-radius:3px;background:var(--surface);color:var(--text);outline:none;transition:border-color .15s}
.calc2-ig select{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:100%}
.calc2-ig input:focus,.calc2-ig select:focus{border-color:var(--accent)}
.calc2-ig input[readonly]{background:var(--bg);color:var(--text2)}
.calc2-ig-e input{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:12px}
.calc2-ig-ws input{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:14px;font-weight:700;color:var(--accent);text-align:center;width:54px;border:2px solid var(--accent);background:transparent}
.calc2-pills{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.calc2-pills span{font-size:10px;color:var(--text3);background:var(--surface);padding:3px 8px;border-radius:3px;font-family:var(--font-mono,'JetBrains Mono',monospace);letter-spacing:-.2px}
.calc2-pill-fifo{color:var(--success)!important;background:rgba(34,197,94,.06)!important;border:0.5px solid rgba(34,197,94,.15)}
.calc2-pill-book{color:var(--accent)!important;background:color-mix(in srgb,var(--accent) 8%,var(--bg))!important}
.calc2-pill-adv{color:var(--accent)!important;cursor:pointer;background:none!important;font-family:var(--font-body,system-ui)!important}
.calc2-btn{font-size:12px;font-weight:600;padding:6px 22px;height:32px;background:var(--accent);color:#fff;border:none;border-radius:3px;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.calc2-btn:hover{opacity:.88}

/* Result header — JPM KPI strip style */
.calc2-rh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:6px;margin-top:8px;background:var(--card);border:0.5px solid var(--border);overflow-x:auto;flex-wrap:nowrap}
.calc2-rh-ok{border-left:3px solid var(--success)}
.calc2-rh-bad{border-left:3px solid var(--error)}
.calc2-sp{width:1px;height:32px;background:var(--border);flex-shrink:0}
.calc2-rm{text-align:center;min-width:80px}
.calc2-rm-l{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.calc2-rm-v{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:18px;font-weight:500;letter-spacing:-.5px}

/* Badges — subtle, institutional */
.calc2-bd{display:inline-block;padding:2px 6px;border-radius:3px;font-size:8px;font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.calc2-bd-own{background:color-mix(in srgb,var(--success) 12%,var(--bg));color:var(--success)}
.calc2-bd-tc{background:color-mix(in srgb,var(--warning,#FBBF24) 12%,var(--bg));color:var(--warning,#FBBF24)}
.calc2-bd-spot{background:color-mix(in srgb,var(--info,#60A5FA) 12%,var(--bg));color:var(--info,#60A5FA)}

/* Detail cards — JPM table density with more breathing room */
.calc2-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:8px}
@media(max-width:900px){.calc2-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.calc2-cards{grid-template-columns:1fr}}
.calc2-dc{background:var(--card);border:0.5px solid var(--border);border-radius:6px;padding:14px 16px}
.calc2-dc-t{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;padding-bottom:5px;border-bottom:.5px solid var(--border)}
.calc2-dr{display:flex;justify-content:space-between;align-items:baseline;padding:3px 0;font-size:11px}
.calc2-dr-l{color:var(--text2)}
.calc2-dr-v{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:500;font-size:11px;letter-spacing:-.3px}
.calc2-dr-s{font-size:9px;color:var(--text3);font-family:var(--font-mono,'JetBrains Mono',monospace);padding:0 0 1px}
.calc2-dr-d{border-top:.5px solid var(--border);margin:4px 0;opacity:.5}
.calc2-dr-t .calc2-dr-l,.calc2-dr-t .calc2-dr-v{font-weight:700;color:var(--text)}

/* Action buttons — JPM button style */
.calc2-actions{display:flex;gap:6px;margin-top:8px}
.calc2-ab{font-size:11px;padding:6px 16px;background:transparent;border:0.5px solid var(--border);border-radius:3px;color:var(--text2);cursor:pointer;transition:all .15s}
.calc2-ab:hover{border-color:var(--text3);color:var(--text);background:var(--surface)}
.calc2-ab-primary{background:var(--accent);color:#000;border-color:transparent;font-weight:600}

/* Comparison cards */
.calc2-cmp-grid{display:flex;gap:6px;flex-wrap:wrap}
.calc2-cc{background:var(--card);border:0.5px solid var(--border);border-radius:6px;padding:12px 14px;min-width:200px;cursor:pointer;transition:border-color .15s}
.calc2-cc:hover{border-color:var(--accent)}

/* Sensitivity matrix — JPM table style */
.calc2-sn{background:var(--card);border:0.5px solid var(--border);border-radius:6px;padding:0;margin-top:8px}
.calc2-sn-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;cursor:pointer;user-select:none}
.calc2-sn-title{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.6px}
.calc2-sn-arrow{color:var(--text3);font-size:10px;transition:transform .2s}
.calc2-sn-table{width:100%;border-collapse:collapse;margin:0 14px 10px;width:calc(100% - 28px)}
.calc2-sn-table td{padding:5px 10px;text-align:center;font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:11px;border:0.5px solid var(--border)}
.calc2-sn-sh{font-weight:600;color:var(--text2);background:var(--surface);font-size:10px}
.calc2-sn-rl{text-align:right!important;color:var(--text2);font-size:10px;background:var(--surface)}
.calc2-sn-cur{background:color-mix(in srgb,var(--accent) 15%,var(--bg));color:var(--accent);font-weight:700;border-radius:3px}
.calc2-sn-ok{color:var(--success)}
.calc2-sn-bad{color:var(--error)}

/* Comparison cards improved */
.calc2-cmp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:11px;font-weight:500}
.calc2-cc-best{border-color:var(--accent)}
.calc2-cc-edit{border:2px solid var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)}
.calc2-cc-actions{position:absolute;top:4px;right:4px;display:flex;gap:3px;opacity:0;transition:opacity .12s}
.calc2-cc:hover .calc2-cc-actions{opacity:1}
.calc2-cc-btn{font-size:8px;padding:2px 5px;border-radius:3px;border:0.5px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer}
.calc2-cc-btn:hover{color:var(--text);border-color:var(--text3)}
.calc2-cc-del{color:var(--error)!important;border-color:color-mix(in srgb,var(--error) 30%,var(--border))!important}
.calc2-cc-del:hover{background:color-mix(in srgb,var(--error) 10%,var(--bg))!important}
.calc2-cc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px}
.calc2-cc-name{font-size:11px;font-weight:600}
.calc2-cc-route{font-size:9px;color:var(--text3)}
.calc2-cc-metrics{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:4px}
.calc2-cc-metric{padding:4px 6px;border-radius:4px;background:var(--surface);text-align:center}
.calc2-cc-ml{font-size:8px;color:var(--text3);text-transform:uppercase;letter-spacing:.3px}
.calc2-cc-mv{font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:13px;font-weight:600;letter-spacing:-.4px;margin-top:1px}
.calc2-cc-detail{font-size:9px;color:var(--text3);font-family:var(--font-mono,'JetBrains Mono',monospace);margin-top:4px}
.calc2-cc-editing{font-size:8px;color:var(--accent);margin-top:3px;font-style:italic;display:block}
/* Warnings strip */
.calc2-warn-strip{display:flex;flex-wrap:wrap;gap:8px 16px;padding:6px 12px;background:color-mix(in srgb,var(--warning,#e5a00d) 8%,var(--bg));border:0.5px solid color-mix(in srgb,var(--warning,#e5a00d) 20%,var(--border));border-radius:var(--radius,8px);margin-top:6px}
.calc2-warn-item{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--text2)}
.calc2-warn-dot{width:6px;height:6px;border-radius:50%;background:var(--warning,#e5a00d);flex-shrink:0}
/* ═══ Calculator V2 additions — cv2-* — JPM/UBS institutional ═══ */
/* @trace: restyled 2026-04-07 — JPM measurements applied throughout */
#tab-voyage{font-family:'DM Sans',var(--font-sans,-apple-system,system-ui,sans-serif)}
#tab-voyage .mono{font-family:'JetBrains Mono',var(--font-mono,monospace)}
.cv2-group{display:flex;gap:6px;align-items:flex-end;padding:0 10px;border-right:0.5px solid var(--border)}
.cv2-group:last-child{border-right:none;padding-right:0}
.cv2-group-label{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;width:100%;margin-bottom:3px}
.cv2-row2{margin-top:6px;padding-top:6px;border-top:.5px solid var(--border)}
.cv2-row-sep{margin-top:8px;padding-top:8px;border-top:.5px solid var(--border)}
/* FIFO badge — show by default, hide via JS when no data */
/* Result bar */
.cv2-rb{display:flex;align-items:stretch;margin-top:6px;border-radius:var(--radius-sm,4px);overflow:visible;border:0.5px solid var(--border);border-left:3px solid var(--success)}
.cv2-rb.neg{border-left-color:var(--error)}
.cv2-rb-cell{display:flex;flex-direction:column;justify-content:center;padding:5px 9px;background:var(--card);border-right:0.5px solid var(--border);min-width:fit-content}
.cv2-rb-cell:last-child{border-right:none}
.cv2-rb-l{font-size:8px;color:var(--text3);font-weight:500;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.cv2-rb-v{font-size:13px;font-weight:700;font-family:'JetBrains Mono',var(--font-mono,monospace);white-space:nowrap}
.cv2-rb-hero .cv2-rb-v{font-size:28px;font-weight:400;letter-spacing:-1px;line-height:1}
.cv2-rb-hero .cv2-rb-unit{font-size:13px;color:var(--text2);margin-left:2px}
/* BE cell */
.cv2-be-cell{background:var(--surface);cursor:pointer;position:relative;padding:5px 10px}
.cv2-be-cell:hover{background:var(--card)}
.cv2-be-row{display:flex;align-items:baseline;gap:6px;flex-wrap:nowrap}
.cv2-be-dots{display:flex;gap:3px;align-items:center;margin-left:4px}
.cv2-be-dot{width:4px;height:4px;border-radius:50%;background:var(--warning);flex-shrink:0}
.cv2-be-dot-red{background:var(--error)}
.cv2-be-pop{display:none;position:absolute;top:calc(100% + 2px);left:0;z-index:100;padding:8px 12px;background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius-sm,4px);box-shadow:0 8px 24px rgba(0,0,0,.5);min-width:260px}
.cv2-be-pop.open{display:block}
.cv2-be-pop-row{display:flex;justify-content:space-between;padding:2px 0;font-size:10px}
.cv2-be-pop-l{color:var(--text2)}
.cv2-be-pop-v{font-family:'JetBrains Mono',var(--font-mono,monospace);font-weight:600}
.cv2-be-pop-sep{border-top:0.5px solid var(--border);margin:3px 0}
.cv2-be-pop-bold .cv2-be-pop-v{font-weight:700}
.cv2-be-pop-hint{font-size:8px;color:var(--text3);font-style:italic;margin-top:3px}
.cv2-be-pop-warns{margin-top:5px;padding-top:4px;border-top:0.5px solid var(--border)}
.cv2-be-warn-item{font-size:8px;color:var(--text2);padding:1px 0;display:flex;align-items:center;gap:4px}
.cv2-be-warn-item::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--warning);flex-shrink:0}
.cv2-be-warn-red::before{background:var(--error)}
/* VOY-001 chip */
.cv2-voy-id{font-family:'JetBrains Mono',var(--font-mono,monospace);font-size:9px;font-weight:700;color:var(--accent);padding:2px 5px;background:rgba(200,169,96,.08);border-radius:var(--radius-sm,4px);border:0.5px solid rgba(200,169,96,.18);white-space:nowrap}
/* Demurrage inline result tag */
.cv2-dem-tag{font-size:9px;color:var(--warning);font-family:'JetBrains Mono',var(--font-mono,monospace);padding:3px 8px;background:rgba(234,179,8,.06);border:0.5px solid rgba(234,179,8,.12);border-radius:var(--radius-sm,4px);height:26px;display:flex;align-items:center}
/* Popbar */
.cv2-popbar{display:flex;gap:3px;margin-top:5px}
.cv2-pop{padding:4px 10px;border-radius:var(--radius-sm,4px);background:var(--card);border:0.5px solid var(--border);font-size:9px;cursor:pointer;color:var(--text3)}
.cv2-pop:hover{border-color:var(--text3);color:var(--text)}
/* Comparison section */
.cv2-comp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.cv2-comp-title{font-size:12px;font-weight:700}
.cv2-comp-stat{font-size:10px;color:var(--text2);font-family:'JetBrains Mono',var(--font-mono,monospace)}
.cv2-tog{display:flex;background:var(--surface);border-radius:var(--radius-sm,4px);padding:1px;border:0.5px solid var(--border)}
.cv2-tog button{padding:3px 8px;border-radius:3px;font-size:10px;cursor:pointer;border:none;background:transparent;color:var(--text3)}
.cv2-tog button.on{background:var(--card);color:var(--accent);font-weight:600}
.cv2-cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px}
/* Individual comparison card */
.cv2-c{background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm,4px);padding:10px 12px;cursor:pointer;position:relative}
.cv2-c:hover{border-color:color-mix(in srgb,var(--text3) 40%,var(--border))}
.cv2-c-pre{border:2px solid #3b82f6;background:rgba(59,130,246,.06)}
.cv2-c-edit{border:2px solid var(--accent);background:rgba(200,169,96,.06)}
.cv2-c-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:3px}
.cv2-c-voy{font-family:'JetBrains Mono',var(--font-mono,monospace);font-size:11px;font-weight:700;color:var(--accent)}
.cv2-c-badges{display:flex;gap:3px;align-items:center}
.cv2-c-badge{font-size:8px;padding:2px 5px;border-radius:2px;font-weight:700}
.cv2-cb-pre{background:rgba(59,130,246,.08);color:#3b82f6;border:0.5px solid rgba(59,130,246,.2)}
.cv2-cb-edit{background:rgba(200,169,96,.08);color:var(--accent);border:0.5px solid rgba(200,169,96,.18)}
.cv2-cb-best{background:rgba(63,185,80,.08);color:var(--success);border:0.5px solid rgba(63,185,80,.15)}
.cv2-c-name{font-size:12px;font-weight:700;color:var(--text)}
.cv2-c-sub{font-size:10px;color:var(--text2)}
.cv2-c-route{font-size:10px;color:var(--text);margin-top:2px}
.cv2-c-dist{font-size:9px;color:var(--text2);font-family:'JetBrains Mono',var(--font-mono,monospace)}
.cv2-c-kpi{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:6px 0}
.cv2-c-kpi-box{padding:5px 6px;border-radius:var(--radius-sm,4px);background:var(--card);text-align:center;border:0.5px solid var(--border)}
.cv2-c-kpi-k{font-size:8px;color:var(--text2);text-transform:uppercase;font-weight:500}
.cv2-c-kpi-v{font-size:14px;font-weight:700;font-family:'JetBrains Mono',var(--font-mono,monospace)}
.cv2-c-foot{font-size:9px;color:var(--text2);font-family:'JetBrains Mono',var(--font-mono,monospace);margin-top:2px}
.cv2-c-btns{display:flex;gap:3px;margin-top:5px;flex-wrap:wrap}
.cv2-c-btn{font-size:9px;padding:3px 8px;border-radius:var(--radius-sm,4px);border:0.5px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer}
.cv2-c-btn:hover{color:var(--text)}
.cv2-c-btn-gold{color:var(--accent);border-color:var(--accent)}
/* Basis toggle in freight group */
.cv2-group .cv2-tog{margin-top:2px}
/* ═══ V9 additions — FIFO badge system ═══ */
.cv2-fifo-wrap{position:relative}
.cv2-fifo-wrap input{padding-right:40px}
.cv2-fifo-badge{position:absolute;right:5px;top:50%;transform:translateY(-50%);font-size:8px;font-weight:700;font-family:'JetBrains Mono',var(--font-mono,monospace);padding:2px 5px;border-radius:3px;cursor:pointer;background:rgba(34,197,94,.08);color:var(--success);border:0.5px solid rgba(34,197,94,.2);white-space:nowrap;display:inline-block;letter-spacing:.3px;transition:all .15s}
.cv2-fifo-badge.manual{background:rgba(224,201,127,0.07);color:var(--accent);border-color:rgba(224,201,127,0.2)}
.cv2-fifo-auto input{border-color:rgba(125,186,106,0.3)!important;background:rgba(125,186,106,0.04)!important}
.cv2-fifo-wrap input{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.04)}
.cv2-fifo-hint{font-size:8px;color:var(--text3);display:flex;align-items:center;gap:3px;min-height:11px}
.cv2-fifo-reset{color:var(--accent);cursor:pointer;font-size:8px;display:none}
/* ═══ V9 additions — Advanced panel ═══ */
.cv2-adv-btn{margin-left:auto;display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--radius-sm,4px);border:0.5px solid var(--accent-glow,rgba(224,201,127,0.12));background:var(--accent-muted,rgba(224,201,127,0.08));color:var(--accent);font-size:9px;font-weight:600;cursor:pointer}
.cv2-adv-btn:hover{background:var(--accent-dim,rgba(224,201,127,0.06))}
.cv2-adv-arr{display:inline-block;transition:transform .2s;font-size:9px}
.cv2-adv-panel{display:none;margin-top:6px;padding:8px 10px;background:var(--surface);border:0.5px solid var(--border);border-radius:var(--radius-sm,4px)}
.cv2-adv-panel.open{display:block}
.cv2-adv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 16px}
.cv2-adv-section{font-size:8px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px;padding-bottom:3px;border-bottom:0.5px solid var(--border)}
.cv2-adv-fields{display:flex;gap:6px;flex-wrap:wrap}
/* ═══ V9 additions — Auto badge ═══ */
.cv2-auto-tag{font-size:7px;font-weight:700;padding:1px 4px;border-radius:3px;background:rgba(125,186,106,0.08);color:var(--success);border:0.5px solid rgba(125,186,106,0.2);vertical-align:middle;margin-left:4px}
/* ═══ V12 additions — 2-column layout — JPM/UBS institutional ═══ */
/* @trace: restyled 2026-04-07 */
.cv2-cols{display:flex;gap:0}
.cv2-col-l{flex:1.7;padding-right:12px;border-right:.5px solid var(--border)}
.cv2-col-r{flex:1;padding-left:12px}
.cv2-sec{margin-bottom:10px}
.cv2-sec:last-child{margin-bottom:0}
.cv2-sec-t{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.cv2-sec-t::after{content:'';flex:1;height:.5px;background:var(--border);opacity:.4}
.cv2-sec-row{display:flex;gap:6px;align-items:flex-end;flex-wrap:wrap}
/* V12: Commercial row0 bar */
.cv2-row0{display:flex;align-items:center;gap:10px;padding:6px 12px;min-height:40px;border-bottom:.5px solid var(--border);margin:-14px -16px 10px;border-radius:6px 6px 0 0;background:var(--surface)}
.cv2-row0-label{font-size:9px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-right:4px}
.cv2-row0-ref{margin-left:auto;font-size:10px;color:var(--text3);font-family:var(--font-mono,'JetBrains Mono',monospace)}
/* V12: Multi-port rows */
.cv2-port-row{display:flex;gap:6px;align-items:center;margin-bottom:3px}
.cv2-add-port-btn{font-size:9px;color:var(--accent);cursor:pointer;margin-top:2px;background:none;border:none;font-family:inherit}
.cv2-add-port-btn:hover{text-decoration:underline}
/* V12: Additional costs — JPM table style */
.cv2-add-costs{margin-top:4px}
.cv2-add-cost-row{display:flex;align-items:center;gap:5px;margin-bottom:3px;font-size:10px}
.cv2-add-cost-row select{height:28px;font-size:10px;padding:2px 6px;border:0.5px solid var(--border);border-radius:3px;background:var(--surface);color:var(--text);width:120px}
.cv2-add-cost-row input{height:28px;font-size:10px;padding:2px 6px;border:0.5px solid var(--border);border-radius:3px;background:var(--surface);color:var(--text);width:72px;font-family:var(--font-mono,'JetBrains Mono',monospace);text-align:right}
.cv2-add-cost-row .del{color:var(--error);cursor:pointer;font-size:11px;background:none;border:none;padding:0 3px;opacity:.4}
.cv2-add-cost-row .del:hover{opacity:1}
.cv2-add-cost-total{display:flex;justify-content:space-between;font-size:10px;font-weight:600;padding-top:4px;border-top:.5px solid var(--border);margin-top:4px;font-family:var(--font-mono,'JetBrains Mono',monospace)}
.cv2-add-cost-btn{font-size:9px;color:var(--accent);cursor:pointer;background:none;border:none;font-family:inherit;margin-top:3px}
.cv2-add-cost-btn:hover{text-decoration:underline}
/* V12: Last cargoes */
.cv2-cargo-hist{margin-top:3px}
.cv2-cargo-row{display:flex;align-items:center;gap:6px;font-size:9px;color:var(--text2);margin-bottom:1px}
.cv2-cargo-num{font-size:8px;color:var(--text3);font-family:var(--font-mono,'JetBrains Mono',monospace);width:8px}
.cv2-cargo-type{color:var(--text);font-weight:500}
/* V12: Cleaning recommendation */
.cv2-cleaning-rec{margin-top:3px;padding:3px 6px;border-radius:4px;font-size:8px;display:flex;align-items:center;gap:4px}
.cv2-cleaning-wash{background:rgba(234,179,8,.07);color:var(--warning);border:0.5px solid rgba(234,179,8,.15)}
.cv2-cleaning-none{background:rgba(34,197,94,.06);color:var(--success);border:0.5px solid rgba(34,197,94,.2)}
/* V12: Overage terms (shown when basis = $/MT) */
.cv2-ovg-terms{display:flex;gap:4px;align-items:flex-end;margin-top:2px;padding:3px 0;border-top:1px dashed var(--border)}

/* ── Data Center Sidebar Layout ────────────────────────── */
.dc-layout{display:flex;gap:0;height:calc(100vh - 84px);overflow:hidden}
.dc-sidebar{
  width:160px;flex-shrink:0;background:var(--card);border-right:0.5px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;padding:12px 0;
}
.dc-sidebar-title{
  font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--text3);padding:0 14px 10px;
}
.dc-sidebar-nav{display:flex;flex-direction:column;gap:1px;padding:0 6px}
.dc-nav-item{
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  font-size:11px;font-weight:500;color:var(--text2);cursor:pointer;
  border-radius:var(--radius-sm);transition:all var(--transition);
  border:none;background:transparent;font-family:var(--font);white-space:nowrap;
}
.dc-nav-item:hover{background:var(--surface);color:var(--text)}
.dc-nav-item.active{background:var(--accent-muted);color:var(--accent);font-weight:600}
.dc-nav-item svg{flex-shrink:0;opacity:0.6}
.dc-nav-item.active svg{opacity:1;color:var(--accent)}
.dc-main{flex:1;overflow-y:auto;padding:8px 12px}
.dc-panel{padding:0}

/* ═══ Goldman Marquee Ticker Bar ══════════════════════════ */
.marquee-ticker{
  width:100%;height:28px;overflow:hidden;
  background:var(--navy);color:rgba(255,255,255,0.85);
  font-family:var(--font-mono);font-size:11px;font-weight:400;
  display:flex;align-items:center;position:relative;flex-shrink:0;
  border-bottom:0.5px solid var(--border);user-select:none;
  letter-spacing:0.02em;
}
.marquee-ticker-inner{
  display:flex;align-items:center;white-space:nowrap;
  animation:marqueeScroll 60s linear infinite;gap:0;
}
.marquee-ticker:hover .marquee-ticker-inner{animation-play-state:paused}
.marquee-item{display:inline-flex;align-items:center;gap:6px;padding:0 20px}
.marquee-item-label{color:rgba(255,255,255,0.5);font-weight:500}
.marquee-item-value{font-weight:600;color:rgba(255,255,255,0.95)}
.marquee-item-change{font-weight:600;font-size:10px}
.marquee-item-change.up{color:#22c55e}
.marquee-item-change.down{color:#ef4444}
.marquee-item-sep{color:rgba(255,255,255,0.15);padding:0 4px}
@keyframes marqueeScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Dark mode ticker — darker background */
[data-mode="dark"] .marquee-ticker{background:#050a14;color:rgba(255,255,255,0.8);border-bottom-color:#1e2d44}

/* ── Role Selector — Dark mode overrides ───────────────── */
[data-mode="dark"] .role-overlay{background:rgba(0,0,0,0.85)}
[data-mode="dark"] .role-selector{background:#252c36;border-color:#2a3240}
[data-mode="dark"] .role-card{background:#1e2329;border-color:#2a3240}
[data-mode="dark"] .role-card:hover{border-color:#1a6fa8;background:#252c36}
[data-mode="dark"] .role-card.selected{border-color:#1a6fa8;background:rgba(26,111,168,0.12)}

/* ── Auth Overlays — Dark mode ────────────────────────── */
[data-mode="dark"] .antares-auth-overlay{background:#161b21}
[data-mode="dark"] .antares-auth-card{background:#252c36;border-color:#2a3240;box-shadow:0 20px 60px rgba(0,0,0,0.4)}
[data-mode="dark"] .antares-auth-btn{background:#1a6fa8;color:#fff}
[data-mode="dark"] .antares-auth-btn:hover{background:#1580c0}
[data-mode="dark"] .antares-auth-btn:disabled{background:#2a3240;color:#64748b}
[data-mode="dark"] .antares-auth-input{background:#1e2329;border-color:#2a3240;color:#e2e8f0}
[data-mode="dark"] .antares-auth-input:focus{border-color:#1a6fa8}
[data-mode="dark"] .antares-auth-copyright{color:rgba(255,255,255,0.2)}
/* ── Dark mode: Copilot panel ──────────────────────── */
[data-mode="dark"] .agent-chat-modal{background:#252c36;border-left-color:#2a3240;box-shadow:-4px 0 16px rgba(0,0,0,0.25)}
[data-mode="dark"] .agent-chat-header{background:#1e2329}
[data-mode="dark"] .agent-msg-bubble.user{background:#1a3a5f;color:#e2e8f0}
[data-mode="dark"] .agent-msg-bubble.assistant{background:#1e2329;color:#e2e8f0}
/* ── Dark mode: Ops/Claims/FFA panel layouts ───────── */
[data-mode="dark"] .panel-3col{background:#252c36;border-color:#2a3240}
[data-mode="dark"] .panel-3col-sidebar{border-right-color:#2a3240}
[data-mode="dark"] .panel-3col-list{border-right-color:#2a3240}
[data-mode="dark"] .panel-sidebar-item.active{background:#1e2329;color:#e2e8f0;border-left-color:#1a6fa8}
[data-mode="dark"] .vp-layout{background:#252c36;border-color:#2a3240}
[data-mode="dark"] .ops-split-layout{background:#252c36;border-color:#2a3240}
/* ── Dark mode: Voyage panels ──────────────────────── */
[data-mode="dark"] .voy-left-panel,[data-mode="dark"] .voy-right-panel{background:#252c36;border-color:#1a6fa8 !important}
[data-mode="dark"] .voy-left-panel .voy-rp-title,[data-mode="dark"] .voy-right-panel .voy-rp-title{background:#1a6fa8}

/* ═══════════════════════════════════════════════════════════
   VESSEL SEARCH TAB — Map-first layout
   Full-screen map with floating overlays
   ═══════════════════════════════════════════════════════════ */
.vs-layout{position:relative;height:calc(100vh - 140px);overflow:hidden}
.vs-map-full{position:absolute;inset:0;z-index:0}
/* Floating top bar — search + distance + weather all inline */
.vs-float-bar{position:absolute;top:8px;left:8px;right:8px;z-index:800;display:flex;align-items:center;gap:4px;padding:6px 8px;background:var(--surface);border:0.5px solid var(--border);border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.vs-float-bar .form-input{height:28px;font-size:11px;padding:2px 6px;border-radius:4px}
.vs-search-input{width:180px;flex-shrink:0}
.vs-filter-select{width:90px;flex-shrink:0}
.vs-bar-sep{width:1px;height:20px;background:var(--border);margin:0 2px;flex-shrink:0}
.vs-dist-field{position:relative;width:110px;flex-shrink:0}
.vs-dist-result{font-size:11px;color:var(--text2);white-space:nowrap;max-width:180px;overflow:hidden;text-overflow:ellipsis}
/* Results panel — slides in from left, only when searching */
.vs-results-panel{position:absolute;top:52px;left:8px;bottom:8px;width:280px;z-index:700;background:var(--surface);border:0.5px solid var(--border);border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,0.18);display:flex;flex-direction:column;overflow:hidden}
.vs-results-header{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid var(--border);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:0.3px;font-weight:600;flex-shrink:0}
.vs-vessel-list{flex:1;overflow-y:auto;min-height:0}
.vs-vessel-row{padding:6px 10px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.12s}
.vs-vessel-row:hover{background:var(--hover)}
.vs-vessel-row.selected{background:rgba(26,111,168,0.12);border-left:3px solid var(--accent)}
.vs-vessel-row-main{display:flex;align-items:center;gap:5px;font-size:11px}
.vs-vessel-row-meta{display:flex;gap:6px;font-size:9px;color:var(--text3);margin-top:1px;padding-left:13px}
.vs-vessel-status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
/* Vessel detail — floating card bottom-left */
.vs-vessel-detail{position:absolute;bottom:8px;left:8px;z-index:700;width:320px;display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--surface);border:0.5px solid var(--border);border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,0.18)}
.vs-detail-header{display:flex;align-items:center;gap:8px;font-size:13px}
.vs-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px 10px;font-size:11px}
.vs-detail-label{display:block;font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:0.3px}
.vs-detail-actions{display:flex;gap:6px;margin-top:2px}
/* Weather floating card — bottom-right */
.vs-weather-float{position:absolute;bottom:8px;right:8px;z-index:700;width:220px;padding:10px 12px;background:var(--surface);border:0.5px solid var(--border);border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,0.18)}
.vs-weather-card-row{display:flex;justify-content:space-between;font-size:10px;color:var(--text2);padding:1px 0}
.vs-weather-card-row span:first-child{color:var(--text3)}
/* Dark mode overrides */
[data-mode="dark"] .vs-float-bar{background:#1a2332;border-color:#2a3240}
[data-mode="dark"] .vs-results-panel{background:#1a2332;border-color:#2a3240}
[data-mode="dark"] .vs-vessel-row{border-bottom-color:#2a3240}
[data-mode="dark"] .vs-vessel-row:hover{background:#252c36}
[data-mode="dark"] .vs-vessel-row.selected{background:rgba(26,111,168,0.18)}
[data-mode="dark"] .vs-vessel-detail{background:#1e2329;border-color:#2a3240}
[data-mode="dark"] .vs-weather-float{background:#1e2329;border-color:#2a3240}
/* ═══════════════════════════════════════════════════════════════
   CALCULATOR V3 — Goldman Density Layout
   3-zone progressive disclosure, zero scroll on 1080p
   ═══════════════════════════════════════════════════════════════ */

/* ── Zone 1: Quick Inputs ─────────────────────────────────── */
.cv3-zone1{padding:8px 12px 4px}
.cv3-row{display:flex;gap:6px;align-items:flex-end;margin-bottom:6px;flex-wrap:wrap}
.cv3-section-label{font-size:9px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px}
.cv3-card{background:var(--card);border:0.5px solid var(--border);border-radius:4px;padding:8px 10px}
.cv3-field{display:flex;flex-direction:column;gap:1px}
.cv3-field label{font-size:7px;text-transform:uppercase;color:var(--text3);font-weight:500;letter-spacing:0.3px}
.cv3-field input,.cv3-field select{font-size:9px;padding:3px 6px;height:22px;background:var(--surface);border:0.5px solid var(--border);border-radius:3px;color:var(--text);font-family:var(--font-mono,'JetBrains Mono',monospace);box-sizing:border-box}
.cv3-field input:focus,.cv3-field select:focus{border-color:var(--accent);outline:none}
.cv3-field-sm input{width:38px}
.cv3-field-md input,.cv3-field-md select{width:80px}
.cv3-field-lg input,.cv3-field-lg select{width:160px}
.cv3-field-xl select{width:200px}

/* Speed mode pill */
.cv3-speed-pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:3px;font-size:8px;font-weight:600;cursor:pointer}
.cv3-speed-pill.eco{background:rgba(34,197,94,0.15);color:var(--success)}
.cv3-speed-pill.full{background:rgba(239,68,68,0.15);color:var(--error)}
.cv3-speed-pill.normal{background:var(--surface);color:var(--text2)}
.cv3-speed-pill.custom{background:rgba(26,111,168,0.15);color:var(--accent)}

/* ── Itinerary Table ──────────────────────────────────────── */
.cv3-iti{width:auto;border-collapse:collapse;font-size:8px}
.cv3-iti th{font-size:7px;text-transform:uppercase;color:var(--text3);font-weight:500;text-align:left;padding:2px 6px;letter-spacing:0.3px}
.cv3-iti td{padding:3px 6px;border-top:0.5px solid var(--border);color:var(--text);font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:8px;white-space:nowrap}
.cv3-iti td input{background:var(--surface);border:0.5px solid var(--border);border-radius:3px;padding:2px 6px;font-size:8px;color:var(--text);height:22px;box-sizing:border-box;font-family:inherit}
.cv3-iti .port-input{width:220px}
.cv3-type-pill{display:inline-block;padding:1px 6px;border-radius:3px;font-size:7px;font-weight:700;color:#fff;text-transform:uppercase}
.cv3-type-load{background:#148e40}
.cv3-type-disch{background:#c02626}
.cv3-type-bunk{background:#1a6fa8}
.cv3-type-transit{background:#64748b}
.cv3-iti .editable{color:var(--accent);cursor:pointer;font-weight:500}
.cv3-iti .escal{font-weight:700}
.cv3-iti .escal-warn{color:#d98c1a}
.cv3-iti .escal-danger{color:#ef4444}
.cv3-add-port{font-size:8px;color:var(--accent);cursor:pointer;padding:4px;font-weight:500}
.cv3-add-port:hover{text-decoration:underline}
.cv3-type-select{font-size:8px;padding:2px 4px;height:18px;background:var(--surface);border:0.5px solid var(--border);border-radius:3px;color:var(--text);font-family:inherit;box-sizing:border-box}

/* Itinerary row layout (flex-based, replaces table) */
.cv3-iti-rows{display:flex;flex-direction:column;gap:0}
.cv3-iti-row{display:flex;align-items:center;gap:6px;padding:3px 0;border-top:0.5px solid var(--border)}
.cv3-iti-row:first-child{border-top:none}
.cv3-iti-num{width:20px;font-size:8px;color:var(--text3);font-family:var(--font-mono,'JetBrains Mono',monospace);text-align:center;flex-shrink:0}
.cv3-iti-port{flex:1;max-width:280px;background:var(--surface);border:0.5px solid var(--border);border-radius:3px;padding:3px 8px;font-size:9px;color:var(--text);height:22px;box-sizing:border-box;font-family:var(--font-mono,'JetBrains Mono',monospace)}
.cv3-iti-port:focus{border-color:var(--accent);outline:none}

/* ── Collapsible UBS Boxes ─────────────────────────────── */
.cv3-card.cv3-collapsed .cv3-row,
.cv3-card.cv3-collapsed .cv3-basis-pills,
.cv3-card.cv3-collapsed table,
.cv3-card.cv3-collapsed .cv3-iti-rows,
.cv3-card.cv3-collapsed .cv3-add-port,
.cv3-card.cv3-collapsed > div:not(.cv3-section-label):not(.cv3-box-summary) {display:none}
.cv3-card.cv3-collapsed {padding:4px 10px}
.cv3-card.cv3-collapsed .cv3-box-summary{display:block !important}
.cv3-section-label {cursor:pointer;user-select:none}

/* Freight basis pills */
.cv3-basis-pills{display:inline-flex;gap:0;border-radius:3px;overflow:hidden;border:0.5px solid var(--border)}
.cv3-basis-pill{padding:2px 8px;font-size:7px;font-weight:700;cursor:pointer;background:var(--surface);color:var(--text3);border:none;text-transform:uppercase}
.cv3-basis-pill.active{background:var(--accent);color:#fff}
.cv3-fifo-badge{display:inline-flex;align-items:center;height:14px;padding:0 6px;border-radius:3px;font-size:6px;font-weight:700;color:#fff;background:var(--success)}
.cv3-fifo-badge.manual{background:var(--text3)}

/* ── Expandable Panel Buttons ─────────────────────────────── */
.cv3-panel-btns{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}
.cv3-panel-btn{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:12px;font-size:7px;font-weight:500;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--card));border:0.5px solid color-mix(in srgb,var(--accent) 20%,var(--border));cursor:pointer;transition:all 0.15s}
.cv3-panel-btn:hover{background:color-mix(in srgb,var(--accent) 15%,var(--card))}
.cv3-panel-btn.open{background:color-mix(in srgb,var(--accent) 15%,var(--card));border-color:var(--accent);font-weight:600}
.cv3-panel-btn .arrow{font-size:6px;transition:transform 0.2s}
.cv3-panel-btn.open .arrow{transform:rotate(90deg)}

/* ── Expandable Panel Content ─────────────────────────────── */
.cv3-panel{display:none;background:var(--card);border:0.5px solid var(--border);border-radius:4px;padding:8px 12px;margin:0 0 4px;animation:cv3SlideDown 0.2s ease}
.cv3-panel.open{display:block}
.cv3-panel-title{font-size:8px;font-weight:700;color:var(--accent);text-transform:uppercase;margin-bottom:6px}
.cv3-panel-row{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.cv3-panel .cv3-field input{font-size:9px;height:20px}
.cv3-save-default{display:inline-flex;align-items:center;padding:3px 10px;border-radius:3px;font-size:8px;color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:0.5px solid color-mix(in srgb,var(--accent) 20%,var(--border));cursor:pointer;margin-top:6px}
.cv3-save-default:hover{background:color-mix(in srgb,var(--accent) 15%,var(--surface))}
@keyframes cv3SlideDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ── Result Bar (Goldman Hero) ────────────────────────────── */
.cv3-result{display:flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,#0a4f52,#0f6b6e);border-radius:0;min-height:50px;flex-wrap:nowrap;overflow-x:auto}
.cv3-result *{color:#fff}
.cv3-voy-chip{padding:3px 8px;background:rgba(255,255,255,0.1);border-radius:4px;font-size:7px;font-weight:700;white-space:nowrap}
.cv3-vessel-info{min-width:120px;max-width:240px}
.cv3-vessel-name{font-size:9px;font-weight:500;white-space:nowrap}
.cv3-vessel-detail{font-size:7px;opacity:0.75;white-space:nowrap}
.cv3-tce-hero{text-align:center;min-width:140px}
.cv3-tce-label{font-size:7px;text-transform:uppercase;opacity:0.7;font-weight:500}
.cv3-tce-value{font-size:26px;font-weight:700;font-family:var(--font-mono,'JetBrains Mono',monospace);line-height:1.1}
.cv3-tce-unit{font-size:11px;opacity:0.6;font-weight:400}
.cv3-kpi{text-align:center;min-width:70px}
.cv3-kpi-label{font-size:6px;text-transform:uppercase;opacity:0.6;font-weight:500;letter-spacing:0.3px}
.cv3-kpi-value{font-size:11px;font-weight:600;font-family:var(--font-mono,'JetBrains Mono',monospace);white-space:nowrap}
.cv3-kpi-value.pos{color:#86efac}
.cv3-kpi-value.neg{color:#fca5a5}
.cv3-kpi-value.warn{color:#fcd34d}
.cv3-result-sep{width:1px;height:28px;background:rgba(255,255,255,0.15);flex-shrink:0}
.cv3-be-dots{display:flex;gap:3px;align-items:center}
.cv3-be-dot{width:7px;height:7px;border-radius:50%}
.cv3-be-dot.ok{background:#22c55e}
.cv3-be-dot.warn{background:#f59e0b}
.cv3-be-dot.bad{background:#ef4444}
.cv3-be-text{font-size:7px;opacity:0.8}
.cv3-hedge-btn{padding:4px 12px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:4px;font-size:8px;font-weight:500;cursor:pointer;white-space:nowrap;color:#fff}
.cv3-hedge-btn:hover{background:rgba(255,255,255,0.2)}

/* ── Summary Row (collapsed breakdown) ────────────────────── */
.cv3-summary{background:var(--card);border:0.5px solid var(--border);border-radius:4px;padding:8px 12px;display:flex;gap:16px;flex-wrap:wrap;font-size:8px;color:var(--text);margin:4px 12px}
.cv3-summary-item{display:flex;gap:4px;align-items:baseline}
.cv3-summary-label{color:var(--text3);font-size:7px;text-transform:uppercase}
.cv3-summary-value{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:600}
.cv3-summary-value.pos{color:var(--success)}
.cv3-summary-value.neg{color:var(--error)}
.cv3-summary-expand{color:var(--text3);font-size:7px;cursor:pointer;margin-left:auto}

/* ── Breakdown Tabs ───────────────────────────────────────── */
.cv3-tabs{display:flex;gap:0;padding:0 12px;border-bottom:1px solid var(--border);margin-top:4px}
.cv3-tab{padding:6px 14px;font-size:9px;color:var(--text3);cursor:pointer;border-bottom:2px solid transparent;font-weight:500;transition:all 0.15s}
.cv3-tab:hover{color:var(--text2)}
.cv3-tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.cv3-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:14px;height:14px;border-radius:7px;background:color-mix(in srgb,var(--accent) 15%,var(--surface));color:var(--accent);font-size:7px;font-weight:700;margin-left:4px;padding:0 3px}
.cv3-tab-content{display:none;padding:8px 12px}
.cv3-tab-content.active{display:block}
.cv3-add-comp{margin-left:auto;font-size:8px;color:var(--accent);cursor:pointer;font-weight:500;padding:6px 0}
.cv3-add-comp:hover{text-decoration:underline}

/* ── 5-Column Breakdown Grid ──────────────────────────────── */
.cv3-breakdown{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
@media(max-width:1400px){.cv3-breakdown{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.cv3-breakdown{grid-template-columns:1fr 1fr}}
.cv3-bk-card{background:var(--card);border:0.5px solid var(--border);border-radius:4px;padding:10px 12px}
.cv3-bk-title{font-size:8px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:0.3px;margin-bottom:8px}
.cv3-bk-row{display:flex;justify-content:space-between;padding:2px 0;font-size:8px}
.cv3-bk-row-l{color:var(--text2)}
.cv3-bk-row-v{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:500;color:var(--text)}
.cv3-bk-row-v.pos{color:var(--success)}
.cv3-bk-row-v.neg{color:var(--error)}
.cv3-bk-row-v.warn{color:var(--warning)}
.cv3-bk-divider{border-top:0.5px solid var(--border);margin:4px 0}
.cv3-bk-total{font-weight:700;font-size:9px}
.cv3-bk-subtotal .cv3-bk-row-l,.cv3-bk-subtotal .cv3-bk-row-v{font-weight:700}

/* Sensitivity inside breakdown */
.cv3-sens-table{width:100%;border-collapse:collapse;font-size:7px;font-family:var(--font-mono,'JetBrains Mono',monospace)}
.cv3-sens-table th{font-size:6px;text-transform:uppercase;color:var(--text3);font-weight:500;padding:2px 4px;text-align:center}
.cv3-sens-table td{padding:3px 4px;text-align:center;border:0.5px solid var(--border)}
.cv3-sens-cur{background:color-mix(in srgb,var(--accent) 15%,var(--surface));font-weight:700;color:var(--accent)}
.cv3-sens-ok{color:var(--success)}
.cv3-sens-bad{color:var(--error)}

/* ── Comparison Side-by-Side Cards ────────────────────────── */
.cv3-cmp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:8px}
.cv3-cmp-card{background:var(--card);border:0.5px solid var(--border);border-radius:6px;padding:12px 14px;position:relative;transition:border-color 0.2s}
.cv3-cmp-card:hover{border-color:var(--text3)}
.cv3-cmp-card.best{border:2px solid var(--success);background:color-mix(in srgb,var(--success) 4%,var(--card))}
.cv3-cmp-card.negative .cv3-cmp-tce{color:var(--error)}
.cv3-cmp-best-badge{display:inline-flex;padding:2px 6px;background:var(--success);color:#fff;border-radius:3px;font-size:7px;font-weight:700;margin-right:6px}
.cv3-cmp-voy{font-size:10px;font-weight:700;color:var(--text)}
.cv3-cmp-route{font-size:8px;color:var(--text2);margin-top:2px}
.cv3-cmp-tce-section{margin:8px 0}
.cv3-cmp-tce-label{font-size:7px;color:var(--text3);text-transform:uppercase}
.cv3-cmp-tce{font-size:22px;font-weight:700;font-family:var(--font-mono,'JetBrains Mono',monospace);color:var(--text)}
.cv3-cmp-tce-unit{font-size:10px;color:var(--text3);font-weight:400}
.cv3-cmp-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin:6px 0}
.cv3-cmp-kpi{text-align:center}
.cv3-cmp-kpi-l{font-size:6px;color:var(--text3);text-transform:uppercase}
.cv3-cmp-kpi-v{font-size:9px;font-weight:600;font-family:var(--font-mono,'JetBrains Mono',monospace);color:var(--text)}
.cv3-cmp-section{border-top:0.5px solid var(--border);padding-top:6px;margin-top:6px}
.cv3-cmp-section-title{font-size:7px;font-weight:700;color:var(--accent);text-transform:uppercase;margin-bottom:4px}
.cv3-cmp-row{display:flex;justify-content:space-between;font-size:8px;padding:1px 0}
.cv3-cmp-row-l{color:var(--text2)}
.cv3-cmp-row-v{font-family:var(--font-mono,'JetBrains Mono',monospace);font-weight:500}
.cv3-cmp-actions{display:flex;gap:4px;margin-top:8px}
.cv3-cmp-action{padding:3px 10px;border-radius:4px;font-size:8px;font-weight:500;color:var(--accent);background:var(--surface);border:0.5px solid var(--border);cursor:pointer}
.cv3-cmp-action:hover{background:color-mix(in srgb,var(--accent) 10%,var(--surface))}
.cv3-cmp-action.delete{color:var(--error)}
.cv3-cmp-bottom{display:flex;align-items:center;gap:12px;padding:8px 12px;background:var(--card);border:0.5px solid var(--border);border-radius:4px;margin-top:8px}
.cv3-cmp-best-summary{font-size:9px;font-weight:700;color:var(--success);flex:1}
.cv3-cmp-export{padding:4px 12px;border-radius:4px;font-size:8px;color:var(--accent);background:var(--surface);border:0.5px solid var(--border);cursor:pointer}
.cv3-cmp-hedge{padding:4px 12px;border-radius:4px;font-size:8px;font-weight:600;color:#fff;background:var(--accent);border:none;cursor:pointer}

/* ── Pills Row ────────────────────────────────────────────── */
.cv3-pills{display:flex;gap:3px;padding:4px 12px;overflow-x:auto;flex-wrap:nowrap}
.cv3-pill{display:inline-flex;align-items:center;padding:2px 8px;border-radius:8px;font-size:6px;font-weight:500;color:var(--text2);background:var(--card);border:0.5px solid var(--border);white-space:nowrap;font-family:var(--font-mono,'JetBrains Mono',monospace)}

/* ── Light Mode Enhancements ──────────────────────────────── */
.cv3-bk-card{box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.cv3-cmp-card{box-shadow:0 1px 3px rgba(0,0,0,0.06)}
.cv3-summary{box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.cv3-card{box-shadow:0 1px 2px rgba(0,0,0,0.04)}

/* Dark mode: remove shadows, rely on borders */
[data-mode="dark"] .cv3-bk-card,[data-mode="dark"] .cv3-cmp-card,[data-mode="dark"] .cv3-summary,[data-mode="dark"] .cv3-card{box-shadow:none}
/* Dark mode: result bar gradient darker */
[data-mode="dark"] .cv3-result{background:linear-gradient(135deg,#062e30,#0a4a4d)}

/* ── Auto Matcher modal styles ── */
#amModal .entity-row:hover{background:var(--bg2)}
#amModal .entity-row td{padding:4px 6px}
#amModal .tbl th{padding:4px 6px;font-size:9px;text-transform:uppercase;letter-spacing:0.3px;color:var(--text3)}
#amModal .form-select{background:var(--bg2);color:var(--text1);border:1px solid var(--border)}