/* Draft Survey — Dashboard Theme
   Slate + neon blue + emerald, CargoMax-inspired, zero external assets. */

:root{
  --slate-950:#0f172a; --slate-900:#151f36; --slate-850:#182140; --slate-800:#1c2947;
  --slate-700:#2a3a5c; --slate-600:#3d4f78;
  --text:#e2e8f0; --text-dim:#8fa1bd; --text-faint:#5c6f92;
  --blue:#38bdf8; --blue-dim:#0c4a6e; --blue-glow:rgba(56,189,248,.35);
  --emerald:#10b981; --emerald-dim:#064e3b; --emerald-glow:rgba(16,185,129,.30);
  --amber:#f59e0b; --amber-dim:#3a2a05;
  --red:#f87171; --red-dim:#3f1414;
  --mono:'SF Mono','JetBrains Mono','Consolas','Menlo',monospace;
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--slate-950);color:var(--text);font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;}
body{padding-bottom:70px;background-image:radial-gradient(circle at 20% 0%, rgba(56,189,248,.05), transparent 40%),radial-gradient(circle at 80% 10%, rgba(16,185,129,.05), transparent 35%);}

/* ---------- Top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:rgba(10,16,30,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--slate-700);padding:10px 16px;}
.topbar-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,var(--blue),var(--emerald));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#04101c;flex:none;}
.brand-text h1{margin:0;font-size:15px;letter-spacing:.03em;color:var(--text);}
.brand-text .sub{font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;}
.topbar-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.vessel-chip{display:flex;flex-direction:column;background:var(--slate-850);border:1px solid var(--slate-700);border-radius:8px;padding:6px 12px;min-width:120px;}
.vessel-chip .k{font-size:9px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;}
.vessel-chip .v{font-size:13px;font-weight:600;color:var(--text);font-family:var(--mono);}
.stage-toggle{display:flex;background:var(--slate-850);border:1px solid var(--slate-700);border-radius:8px;overflow:hidden;}
.stage-btn{background:transparent;border:none;color:var(--text-dim);padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;letter-spacing:.03em;min-height:38px;}
.stage-btn.active{background:var(--blue-dim);color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:5px 10px;border-radius:20px;border:1px solid var(--slate-700);color:var(--text-dim);}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--emerald);box-shadow:0 0 6px var(--emerald-glow);}
.pill.offline .dot{background:var(--red);box-shadow:0 0 6px rgba(248,113,113,.4);}
.installbtn{background:var(--emerald);color:#04241a;border:none;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;min-height:38px;}

/* ---------- Tabs (secondary nav) ---------- */
#tabbar{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;background:var(--slate-900);border-bottom:1px solid var(--slate-800);}
.tabbtn{background:transparent;border:1px solid var(--slate-700);color:var(--text-dim);padding:9px 14px;border-radius:7px;font-size:13px;cursor:pointer;min-height:40px;font-weight:500;transition:border-color .15s,color .15s;}
.tabbtn.active{background:var(--slate-850);color:var(--blue);border-color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset,0 0 14px var(--blue-glow);}

/* ---------- Layout ---------- */
#main{padding:16px;max-width:1180px;margin:0 auto;}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:14px;}
.grid2col{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:start;}
@media (max-width:860px){.grid2col{grid-template-columns:1fr;}}

/* ---------- Cards / Panels ---------- */
.card,.panel{background:linear-gradient(180deg,var(--slate-900),var(--slate-850));border:1px solid var(--slate-800);border-radius:var(--radius);padding:16px;margin-bottom:14px;}
.card{padding:14px;}
.card .label{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);margin-bottom:6px;}
.card .value{font-size:24px;font-weight:700;font-family:var(--mono);color:var(--text);}
.card .value.blue{color:var(--blue);text-shadow:0 0 16px var(--blue-glow);}
.card .value.emerald{color:var(--emerald);text-shadow:0 0 16px var(--emerald-glow);}
.card .value.amber{color:var(--amber);}
.card .unit{font-size:12px;color:var(--text-dim);font-weight:400;margin-left:4px;}
.card .delta{font-size:11px;color:var(--text-faint);margin-top:4px;}

.panel h2{margin:0 0 10px;font-size:16px;color:var(--text);display:flex;align-items:center;gap:8px;}
.panel h2::before{content:'';width:4px;height:16px;background:var(--blue);border-radius:2px;box-shadow:0 0 8px var(--blue-glow);}
.panel h3{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin:18px 0 8px;}
.grouphead{font-size:12px;color:var(--blue);text-transform:capitalize;margin:14px 0 6px;font-weight:600;}
.hint{font-size:12px;color:var(--text-faint);font-weight:normal;text-transform:none;letter-spacing:normal;}

/* ---------- Forms ---------- */
label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-dim);margin-bottom:10px;}
input,select{background:var(--slate-950);border:1px solid var(--slate-700);color:var(--text);padding:10px;border-radius:6px;font-size:15px;font-family:var(--mono);min-height:42px;}
input:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow);}
input[disabled]{opacity:.55;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px;}
@media (max-width:640px){.grid2,.grid3{grid-template-columns:1fr;}}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0;}

.btn{background:var(--blue);color:#04101c;border:none;padding:12px 18px;border-radius:7px;font-size:14px;font-weight:700;cursor:pointer;min-height:44px;letter-spacing:.02em;}
.btn:hover{filter:brightness(1.08);}
.btn.secondary{background:transparent;color:var(--blue);border:1px solid var(--blue);}
.btn.emerald{background:var(--emerald);color:#04241a;}
.btn.danger{background:transparent;color:var(--red);border:1px solid var(--red);}
.btn.tiny{padding:5px 9px;font-size:11px;min-height:30px;}
.filebtn{display:inline-flex;align-items:center;cursor:pointer;}

.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--slate-800);font-size:14px;}
.kv span{color:var(--text-dim);}
.kv b{font-family:var(--mono);}
.kv.highlight{background:var(--emerald-dim);border:1px solid var(--emerald);border-radius:7px;padding:12px;margin-top:8px;font-size:18px;}
.kv.highlight b{color:var(--emerald);}

.notice{background:var(--blue-dim);border:1px solid #1e6f9c;border-radius:7px;padding:12px;font-size:13px;margin:10px 0;color:#bfe6fb;}
.notice.warn{background:var(--amber-dim);border-color:var(--amber);color:#ffdca0;}
.warnings-block .notice{margin:8px 0;}
.warnpill{background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber);border-radius:10px;padding:1px 8px;font-size:11px;margin-left:6px;}

.status-badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:4px;margin-left:6px;vertical-align:middle;border:1px solid;}
.status-badge.badge-measured{color:#38bdf8;border-color:#38bdf8;background:rgba(56,189,248,.1);}
.status-badge.badge-calculated{color:#10b981;border-color:#10b981;background:rgba(16,185,129,.1);}
.status-badge.badge-predicted{color:#f59e0b;border-color:#f59e0b;background:rgba(245,158,11,.1);}
.status-badge.badge-ai{color:#c084fc;border-color:#c084fc;background:rgba(192,132,252,.1);}

.tablewrap{overflow-x:auto;}
table.datatable,table.audittable,table.reporttable{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px;}
table.datatable th,table.datatable td,table.audittable th,table.audittable td{border:1px solid var(--slate-800);padding:6px 8px;text-align:left;}
table.datatable input,table.datatable select{padding:6px;font-size:13px;min-height:32px;width:100%;}
table.audittable td.mono{font-family:var(--mono);}
th{color:var(--text-dim);font-weight:600;}

.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(30px);background:var(--slate-850);color:var(--text);border:1px solid var(--blue);padding:10px 18px;border-radius:8px;opacity:0;transition:all .2s;pointer-events:none;font-size:14px;z-index:100;box-shadow:0 0 20px var(--blue-glow);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.error{border-color:var(--red);color:#ffb3b3;}
.loading{color:var(--text-dim);padding:30px;text-align:center;}

/* ---------- Vessel profile SVG panel ---------- */
.vessel-svg-wrap{background:var(--slate-950);border:1px solid var(--slate-800);border-radius:8px;padding:8px;overflow-x:auto;}
.vessel-svg-wrap svg{display:block;width:100%;height:auto;min-width:520px;}
.svg-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--text-dim);}
.svg-legend span{display:inline-flex;align-items:center;gap:5px;}
.swatch{width:10px;height:10px;border-radius:2px;display:inline-block;}

/* ---------- Chart canvas ---------- */
.chartwrap{background:var(--slate-950);border:1px solid var(--slate-800);border-radius:8px;padding:10px;}
canvas.hydrochart{width:100%;height:220px;display:block;}
.chart-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px;}
.chart-tab{background:var(--slate-850);border:1px solid var(--slate-700);color:var(--text-dim);padding:5px 10px;border-radius:6px;font-size:11px;cursor:pointer;}
.chart-tab.active{color:var(--emerald);border-color:var(--emerald);}

/* ---------- Report / print ---------- */
.report-sheet{background:#fff;color:#111;}
.report-sheet h1{font-size:20px;margin-bottom:2px;}
.report-sheet h2{color:#111;font-size:15px;margin-top:0;}
.report-sheet h2::before{display:none;}
.report-sheet h3{color:#333;font-size:13px;text-transform:uppercase;margin:16px 0 6px;}
table.reporttable{width:100%;border-collapse:collapse;margin-bottom:6px;}
table.reporttable td,table.reporttable th{border:1px solid #ccc;padding:6px 8px;font-size:13px;}
.disclaimer{font-size:11px;color:#555;margin-top:16px;border-top:1px solid #ccc;padding-top:8px;}
.sigblock{display:flex;flex-direction:column;gap:22px;margin-top:30px;font-size:13px;}
.report-svg-wrap svg{width:100%;max-width:600px;}

@media print{
  .topbar,#tabbar,.no-print{display:none !important;}
  body{background:#fff;}
  #main{max-width:none;padding:0;}
  .panel,.card{border:none;padding:0;background:none;}
}