:root{
  --navy-950:#060f1a;
  --navy-900:#0a1b2c;
  --navy-800:#10283f;
  --navy-700:#173a58;
  --line:#1e3a54;
  --teal:#20c4b0;
  --teal-dim:#12766a;
  --amber:#f5a623;
  --red:#ff5c5c;
  --green:#3ddc84;
  --text:#dce8ee;
  --text-dim:#7f9bb0;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  --disp: -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
}

/* ---- DAY mode — bright, high-contrast for full daylight bridge use ---- */
html[data-theme="day"]{
  --navy-950:#eef2f5;
  --navy-900:#ffffff;
  --navy-800:#e4e9ed;
  --navy-700:#d3dae0;
  --line:#c3ccd4;
  --teal:#0d8a78;
  --teal-dim:#0a6b5d;
  --amber:#b5720a;
  --red:#c0392b;
  --green:#1e8449;
  --text:#16232e;
  --text-dim:#5b6b78;
}

/* ---- NIGHT-RED mode — dim red-only palette to preserve night vision ---- */
html[data-theme="night-red"]{
  --navy-950:#000000;
  --navy-900:#0a0000;
  --navy-800:#150202;
  --navy-700:#1f0303;
  --line:#3a0808;
  --teal:#ff4d4d;
  --teal-dim:#b32323;
  --amber:#cc3333;
  --red:#ff2222;
  --green:#ff6666;
  --text:#e05555;
  --text-dim:#8a2a2a;
}

/* ---- PITCH-BLACK mode — near-zero brightness, absolute darkness bridge --- */
html[data-theme="pitch-black"]{
  --navy-950:#000000;
  --navy-900:#000000;
  --navy-800:#050000;
  --navy-700:#0a0000;
  --line:#1a0505;
  --teal:#661515;
  --teal-dim:#440d0d;
  --amber:#551515;
  --red:#661010;
  --green:#551515;
  --text:#4a1414;
  --text-dim:#2e0d0d;
}
/* Night — tiles dimmed to match the dark UI */
html[data-theme="night"] .leaflet-tile{ filter: brightness(0.72) saturate(0.75); }

/* Night-red — grayscale + red tint to preserve night vision */
html[data-theme="night-red"] .leaflet-tile{ filter: grayscale(1) brightness(0.55) sepia(1) hue-rotate(310deg); }

/* Pitch-black — almost invisible map */
html[data-theme="pitch-black"] .leaflet-tile,
html[data-theme="pitch-black"] #map{ filter: brightness(0.15) saturate(0.3); }
html[data-theme="pitch-black"] .brand-mark,
html[data-theme="pitch-black"] .ship-icon{ filter: brightness(0.4); }


*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--navy-950);color:var(--text);font-family:var(--mono);}

.lockscreen{
  position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center, var(--navy-800) 0%, var(--navy-950) 75%);
}
.lockbox{
  width:360px;max-width:90vw;text-align:center;padding:32px 28px;background:var(--navy-900);
  border:1px solid var(--line);border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.lockbox-title{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:1px;color:var(--text);}
.lockbox-sub{font-size:11px;color:var(--text-dim);margin-top:4px;margin-bottom:18px;}
.lockbox-field{text-align:left;margin-bottom:12px;}
.lockbox-field label{display:block;font-size:9.5px;color:var(--text-dim);margin-bottom:4px;letter-spacing:0.3px;}
.lockbox-deviceid{
  font-family:var(--mono);font-size:15px;letter-spacing:2px;color:var(--teal);
  background:var(--navy-950);border:1px solid var(--line);border-radius:3px;padding:8px 10px;
  text-align:center;
}
.lockbox-field input[type=text]{
  width:100%;box-sizing:border-box;background:var(--navy-950);border:1px solid var(--line);color:var(--text);
  padding:8px 10px;border-radius:3px;font-family:var(--mono);font-size:12px;
}
.lockbox-divider{
  font-size:10px;color:var(--text-dim);text-align:center;margin:16px 0 10px;
  border-top:1px solid var(--line);padding-top:14px;
}
.lockbox input[type=password],.lockbox input[type=text]#lockKeyInput{
  width:100%;box-sizing:border-box;background:var(--navy-950);border:1px solid var(--line);color:var(--text);
  padding:10px 12px;border-radius:3px;font-family:var(--mono);font-size:13px;text-align:center;
  letter-spacing:2px;margin-bottom:10px;
}
.lockbox input:focus{outline:none;border-color:var(--teal);}
.lockbox .btn{width:100%;padding:10px;margin-bottom:8px;}
.lockbox-error{color:var(--red);font-size:11px;margin-top:4px;min-height:14px;}
.lockbox-footer{font-size:9px;color:var(--text-dim);margin-top:14px;opacity:0.7;line-height:1.4;}
.lockbox-remote-text{font-size:11.5px;color:var(--text-dim);line-height:1.6;margin:16px 0;}

.app{display:flex;flex-direction:column;height:100vh;}

/* ---- Topbar ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 20px;background:var(--navy-900);border-bottom:1px solid var(--line);
  flex-shrink:0;flex-wrap:wrap;gap:8px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{color:var(--teal);}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-title{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:1.5px;color:var(--text);}
.brand-sub{font-size:10.5px;color:var(--text-dim);letter-spacing:0.5px;}
.ruleset-badge{
  font-family:var(--mono);font-size:9.5px;color:var(--text-dim);
  border:1px solid var(--line);border-radius:3px;padding:2px 7px;margin-left:14px;
}
.ruleset-badge.ruleset-aging{color:var(--amber);border-color:var(--amber);}
.ruleset-badge.ruleset-old{color:var(--red);border-color:var(--red);}
.ruleset-badge.ruleset-old::after{content:" — verify with office";}
.hint{font-weight:400;opacity:0.7;font-size:9px;}
#evalDateHint{color:var(--amber);background:rgba(245,166,35,0.08);}
.integrity-banner{
  position:fixed;top:0;left:0;right:0;z-index:9999;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:12px;font-weight:600;text-align:center;padding:8px;
}
.pos-meta{font-family:var(--mono);font-size:9.5px;color:var(--text-dim);margin-left:8px;}
.pos-meta.pos-stale-amber{color:var(--amber);}
.pos-meta.pos-stale-red{color:var(--red);font-weight:600;}
.gps-warn{font-size:9px;opacity:0.75;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.theme-select{
  background:var(--navy-800);border:1px solid var(--line);color:var(--text);
  padding:6px 8px;border-radius:3px;font-family:var(--mono);font-size:11px;cursor:pointer;
}
.theme-select:focus{outline:none;border-color:var(--teal);}
.shipreadout{
  font-size:11px;letter-spacing:0.5px;color:var(--text-dim);
  border:1px solid var(--line);padding:6px 12px;border-radius:3px;background:var(--navy-800);
}
.shipreadout.locked{color:var(--text);}
.topbar-status{
  font-size:11px;letter-spacing:1px;color:var(--amber);
  border:1px solid var(--line);padding:6px 12px;border-radius:3px;background:var(--navy-800);
}
.topbar-status.locked{color:var(--teal);}

/* ---- Layout ---- */
.layout{flex:1;display:flex;min-height:0;}
.mapcol{flex:1.4;display:flex;flex-direction:column;border-right:1px solid var(--line);min-width:0;position:relative;}
#map{flex:1;background:var(--navy-950);position:relative;}

.mapcol.is-fullscreen{position:fixed;inset:0;z-index:2000;width:100vw;height:100vh;border-right:none;}
.resultcol.is-fullscreen{position:fixed;inset:0;z-index:2000;width:100vw;height:100vh;}

.fs-btn{
  background:var(--navy-800);border:1px solid var(--line);color:var(--text-dim);
  cursor:pointer;font-size:10.5px;padding:4px 9px;border-radius:3px;font-family:var(--mono);
  white-space:nowrap;
}
.fs-btn:hover{color:var(--teal);border-color:var(--teal);}
.map-fs-btn{position:absolute;z-index:1000;bottom:14px;left:14px;}
.offline-banner{
  position:absolute;z-index:1000;top:14px;left:14px;
  background:rgba(181,114,10,0.95);color:#fff;font-size:11px;font-weight:600;
  padding:6px 12px;border-radius:3px;font-family:var(--mono);
}
#tileSourceLabel{
  position:absolute;z-index:1000;bottom:36px;right:8px;
  background:rgba(0,0,0,0.45);color:rgba(255,255,255,0.85);
  font-size:10px;font-family:var(--mono);
  padding:3px 7px;border-radius:3px;pointer-events:none;
}

.layertoggle{
  position:absolute;z-index:1000;top:14px;right:14px;background:rgba(10,27,44,0.92);
  border:1px solid var(--line);border-radius:4px;padding:8px 10px;display:flex;flex-direction:column;gap:5px;
  font-size:11px;
}
.layertoggle label{display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;}
.layertoggle input[type=checkbox]{accent-color:var(--teal);}
.swatch{width:12px;height:12px;border-radius:2px;display:inline-block;flex-shrink:0;}
.swatch-special{background:rgba(160,120,255,0.55);border:1px solid #a078ff;}
.swatch-eca{background:rgba(245,166,35,0.45);border:1px solid var(--amber);}
.swatch-deca{background:rgba(0,61,130,0.6);border:1px solid #003d82;}
.swatch-bathy{background:rgba(90,160,255,0.55);border:1px solid #5aa0ff;}

.posbar{
  display:flex;align-items:end;gap:10px;padding:10px 14px;background:var(--navy-900);
  border-top:1px solid var(--line);flex-wrap:wrap;
}
.posfield{display:flex;flex-direction:column;gap:3px;}
.posfield label{font-size:10px;color:var(--text-dim);letter-spacing:0.5px;}
.posfield input{
  background:var(--navy-950);border:1px solid var(--line);color:var(--text);
  padding:7px 9px;border-radius:3px;font-family:var(--mono);font-size:12.5px;width:180px;
}
.posfield input:focus{outline:none;border-color:var(--teal);}
.posfield-combo{display:flex;gap:5px;}
.posfield-combo input{width:140px;}
.posfield-combo select{
  background:var(--navy-950);border:1px solid var(--line);color:var(--teal);
  padding:7px 6px;border-radius:3px;font-family:var(--mono);font-size:12.5px;font-weight:600;
  width:52px;text-align:center;cursor:pointer;
}
.posfield-combo select:focus{outline:none;border-color:var(--teal);}
.maphint{margin:0;padding:6px 14px 10px;font-size:11px;color:var(--text-dim);background:var(--navy-900);}

.btn{
  font-family:var(--mono);font-size:12px;letter-spacing:0.4px;padding:8px 14px;
  border-radius:3px;border:1px solid var(--line);cursor:pointer;background:var(--navy-800);color:var(--text);
}
.btn:hover{border-color:var(--teal);}
.btn-primary{background:var(--teal-dim);border-color:var(--teal);color:#eafffb;font-weight:600;}
.btn-primary:hover{background:var(--teal);}
.btn-ghost{color:var(--text-dim);}

/* ---- Result column ---- */
.resultcol{flex:1;display:flex;flex-direction:column;min-width:400px;background:var(--navy-950);overflow:hidden;}

.areapanel{padding:14px 16px;border-bottom:1px solid var(--line);background:var(--navy-900);}
.areapanel-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.areapanel-title{font-size:10.5px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;}
.areapanel-body{font-size:13px;line-height:1.5;}
.areapanel-body .chip{
  display:inline-block;background:var(--navy-800);border:1px solid var(--teal-dim);color:var(--teal);
  padding:3px 9px;border-radius:20px;font-size:11px;margin:2px 4px 2px 0;
}
.distline{font-size:12px;color:var(--text-dim);margin-bottom:6px;}
.distline strong{color:var(--teal);}
.depthreadout{font-size:12px;color:var(--text-dim);margin-top:6px;}

.manualdepth{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;flex-wrap:wrap;}
.manualdepth label{color:var(--text-dim);}
.manualdepth input{
  width:80px;background:var(--navy-950);border:1px solid var(--line);color:var(--text);
  padding:5px 7px;border-radius:3px;font-family:var(--mono);font-size:12px;
}
.btn-small{padding:5px 10px;font-size:11px;}

.shipregistry{
  display:flex;align-items:end;gap:10px;margin-bottom:16px;padding-bottom:14px;
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.shipregistry .formrow{flex:1;min-width:180px;}
.shipregistry select{
  background:var(--navy-900);border:1px solid var(--line);color:var(--text);
  padding:8px 9px;border-radius:3px;font-family:var(--mono);font-size:12.5px;width:100%;
}
.registrybtns{display:flex;gap:8px;}
.btn-danger{color:var(--red);border-color:var(--red);}
.btn-danger:hover{background:rgba(255,92,92,0.12);}

.footer-credit{
  flex-shrink:0;font-size:9.5px;color:var(--text-dim);text-align:center;
  padding:6px 16px 10px;letter-spacing:0.3px;opacity:0.75;
}

.tabs{display:flex;background:var(--navy-900);border-bottom:1px solid var(--line);overflow-x:auto;flex-shrink:0;}
.tab{
  flex:1;min-width:78px;background:none;border:none;color:var(--text-dim);cursor:pointer;
  padding:10px 6px 8px;font-family:var(--mono);font-size:12px;font-weight:600;border-bottom:2px solid transparent;
  display:flex;flex-direction:column;gap:2px;align-items:center;white-space:nowrap;
}
.tab span{font-size:9px;font-weight:400;letter-spacing:0.3px;color:var(--text-dim);}
.tab.active{color:var(--teal);border-bottom-color:var(--teal);background:var(--navy-800);}
.tab:hover{color:var(--text);}

.panels{flex:1;overflow-y:auto;padding:16px;}
.panel{display:none;}
.panel.active:empty::before{
  content:"Enter a ship position above to see results for this Annex.";
  display:block;color:var(--text-dim);font-size:12px;padding:20px;font-style:italic;
}
.panel.active{display:block;}

.subsection-label{
  font-size:10.5px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;
  margin:4px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--line);
}

.controlrow{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:12.5px;}
.controlrow select{
  background:var(--navy-800);color:var(--text);border:1px solid var(--line);border-radius:3px;
  padding:6px 8px;font-family:var(--mono);font-size:12.5px;
}
.controlrow input[type=checkbox]{accent-color:var(--teal);}

/* ---- Ship particulars form ---- */
.shipform{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-bottom:10px;}
.formrow{display:flex;flex-direction:column;gap:4px;}
.formrow.checkrow{grid-column:1 / -1;flex-direction:row;align-items:center;font-size:12.5px;}
.formrow label{font-size:10.5px;color:var(--text-dim);letter-spacing:0.4px;}
.formrow input[type=text],.formrow input[type=number],.formrow input[type=date],.formrow select{
  background:var(--navy-900);border:1px solid var(--line);color:var(--text);
  padding:8px 9px;border-radius:3px;font-family:var(--mono);font-size:12.5px;
}
.formrow input:focus,.formrow select:focus{outline:none;border-color:var(--teal);}
#saveShipBtn{grid-column:1 / -1;justify-self:start;margin-top:4px;}

/* ---- Rule cards ---- */
.card{
  border:1px solid var(--line);border-left-width:4px;border-radius:4px;background:var(--navy-900);
  padding:12px 14px;margin-bottom:12px;
}
.card-title{font-family:var(--disp);font-weight:600;font-size:13.5px;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.card-bullets{margin:0;padding-left:18px;font-size:12.5px;line-height:1.55;color:var(--text);}
.card-bullets li{margin-bottom:4px;}
.card-bullets li:last-child{margin-bottom:0;}
.card-bullets li.bullet-ok{color:var(--green);font-weight:600;}
.card-bullets li.bullet-no{color:var(--red);font-weight:600;}
.card.status-ok{border-left-color:var(--green);}
.card.status-ok .card-title{color:var(--green);}
.card.status-cond{border-left-color:var(--amber);}
.card.status-cond .card-title{color:var(--amber);}
.card.status-no{border-left-color:var(--red);}
.card.status-no .card-title{color:var(--red);}
.card.status-info{border-left-color:var(--teal-dim);}
.card.status-info .card-title{color:var(--teal);}

.disclaimerbar{
  flex-shrink:0;display:flex;align-items:center;gap:8px;
  padding:6px 16px;border-top:1px solid var(--line);background:var(--navy-900);
}
.disclaimer-icon{
  background:var(--navy-800);border:1px solid var(--line);border-radius:50%;
  width:26px;height:26px;font-size:13px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.disclaimer-icon:hover{border-color:var(--amber);}
.disclaimerbar-hint{font-size:10px;color:var(--text-dim);}

.modal-overlay{
  display:none;position:fixed;inset:0;z-index:6000;align-items:center;justify-content:center;
  background:rgba(6,15,26,0.75);
}
.modal-overlay.is-open{display:flex;}
.modal-box{
  width:min(480px, 90vw);background:var(--navy-900);border:1px solid var(--line);
  border-radius:6px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,0.5);
}
.modal-title{font-family:var(--disp);font-weight:700;font-size:15px;color:var(--amber);margin-bottom:12px;}
.modal-text{font-size:12.5px;line-height:1.6;color:var(--text);margin-bottom:18px;}
.modal-box .btn{width:100%;}

/* Leaflet dark tweaks */
.leaflet-container{background:#08131f;}
.leaflet-control-attribution{background:rgba(6,15,26,0.7)!important;color:var(--text-dim)!important;font-size:10px;}
.leaflet-control-attribution a{color:var(--teal)!important;}
.ship-icon{filter:drop-shadow(0 0 4px rgba(32,196,176,0.8));}

@media (max-width: 880px){
  .layout{flex-direction:column;}
  .mapcol{border-right:none;border-bottom:1px solid var(--line);height:46vh;}
  #map{min-height:220px;}
  .shipform{grid-template-columns:1fr;}
}