/* ═══════════════════════════════════════════════════════════════
   GEO-OSINT ANALYZER — MILITARY TACTICAL STYLESHEET
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
  --mil-bg:         #080c08;
  --mil-surface:    #0e130e;
  --mil-surface2:   #131a13;
  --mil-surface3:   #1a241a;
  --mil-border:     #243322;
  --mil-border2:    #375435;
  --mil-border3:    #4a7047;
  --mil-green:      #4caf50;
  --mil-green2:     #2e7d32;
  --mil-green-dim:  #1b5e20;
  --mil-amber:      #ffb300;
  --mil-amber-dim:  #ff6f00;
  --mil-red:        #c62828;
  --mil-red-bright: #ef5350;
  --mil-blue:       #1565c0;
  --mil-blue-bright:#42a5f5;
  --mil-purple:     #6a1b9a;
  --mil-purple-bright:#ce93d8;
  --mil-text:       #c8e6c9;
  --mil-text2:      #81c784;
  --mil-text3:      #4caf50;
  --mil-dim:        #4a7c4e;
  --mil-dim2:       #2d4f30;
  --mil-mono:       'Share Tech Mono', 'Courier New', monospace;
  --mil-sans:       'Rajdhani', Arial, sans-serif;
}

/* ── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--mil-sans);
  background: var(--mil-bg);
  color: var(--mil-text);
  max-width: 80%;
  margin: 20px auto;
  padding: 0 16px;
  font-size: 14px;
  line-height: 1.5;
}

/* ── System Header ─────────────────────────────────────────────── */
.mil-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 10px 14px;
  background: var(--mil-surface);
  border: 1px solid var(--mil-border2);
  border-top: 2px solid var(--mil-green2);
  margin-bottom: 12px;
  position: relative;
}
.mil-header::before {
  content: '';
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mil-green), var(--mil-amber), var(--mil-green), transparent);
}
.mil-header-title {
  font-family: var(--mil-mono);
  font-size: 15px;
  color: var(--mil-green);
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.mil-header-sub {
  font-family: var(--mil-mono);
  font-size: 12px;
  color: var(--mil-dim);
  letter-spacing: 1px;
  margin-top: 3px;
  text-transform: uppercase;
}
.mil-status-online {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mil-mono);
  font-size: 13px;
  color: var(--mil-text2);
}
.mil-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mil-green);
  box-shadow: 0 0 6px var(--mil-green);
  animation: mil-blink 2.5s infinite;
}
@keyframes mil-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

/* ── Corner Decoration ─────────────────────────────────────────── */
.mil-corners { position: relative; }
.mil-corners::before,
.mil-corners::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-color: var(--mil-green2);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  z-index: 1;
}
.mil-corners::before { top: 3px; left: 3px;  border-top-width: 1px; border-left-width: 1px; }
.mil-corners::after  { top: 3px; right: 3px; border-top-width: 1px; border-right-width: 1px; }

/* ── Input Row ─────────────────────────────────────────────────── */
.op-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.op-field {
  display: flex;
  flex-direction: column;
}
.op-field--mgrs {
  flex: 1;
  min-width: 220px;
}
.op-dtg-group {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-left: auto;
}
.op-row label,
.op-field label {
  font-family: var(--mil-mono);
  font-size: 12px;
  color: var(--mil-dim);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

/* ── Inputs ────────────────────────────────────────────────────── */
input[type=text],
input[type=number],
#mgrs-inp,
#op-name,
.dtg-in {
  background: var(--mil-surface2);
  border: 1px solid var(--mil-border2);
  color: var(--mil-text);
  font-family: var(--mil-mono);
  font-size: 15px;
  padding: 8px 10px;
  outline: none;
  border-radius: 0;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
input[type=text]:focus,
input[type=number]:focus,
#mgrs-inp:focus,
.dtg-in:focus {
  border-color: var(--mil-green);
  box-shadow: inset 0 0 0 1px var(--mil-green2);
}
input::placeholder { color: var(--mil-dim2); }

#mgrs-inp {
  flex: 2;
  min-width: 220px;
  font-size: 14px;
  padding: 9px 12px;
  border-color: var(--mil-border3);
}

/* ── DTG Group ─────────────────────────────────────────────────── */
.dtg-wrap {
  display: flex;
  align-items: stretch;
  height: 38px;
}
.dtg-wrap .dtg-in {
  flex: 1;
  border-right: none;
  width: auto;
  height: 100%;
  min-width: 140px;
}
#mgrs-inp {
  height: 38px;
}
.dtg-now {
  background: var(--mil-surface3);
  border: 1px solid var(--mil-border2);
  border-left: none;
  color: var(--mil-green2);
  padding: 0 10px;
  font-family: var(--mil-mono);
  font-size: 15px;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  height: 100%;
}
.dtg-now:hover { background: var(--mil-border); color: var(--mil-green); }

/* ── Map ───────────────────────────────────────────────────────── */
#map {
  height: 640px;
  border: 1px solid var(--mil-border2);
  border-top: 2px solid var(--mil-green2);
  border-radius: 0;
  margin-bottom: 12px;
  filter: brightness(.92) saturate(.85);
}

/* ── Tabs ──────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--mil-border2);
  margin-top: 0;
}
.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--mil-dim);
  font-family: var(--mil-mono);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tab-btn:hover      { color: var(--mil-text2); }
.tab-btn.active     { color: var(--mil-green); border-bottom-color: var(--mil-green); }

/* ── Tab Panels ────────────────────────────────────────────────── */
.tab-panel          { display: none; padding: 14px 0; }
.tab-panel.active   { display: block; background: transparent; }

/* ── Checkboxes ────────────────────────────────────────────────── */
.checks {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.checks label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mil-mono);
  font-size: 13px;
  color: var(--mil-text2);
  cursor: pointer;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.checks input[type=checkbox] {
  width: 14px; height: 14px;
  appearance: none;
  background: var(--mil-surface2);
  border: 1px solid var(--mil-border2);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.checks input[type=checkbox]:checked {
  background: var(--mil-green-dim);
  border-color: var(--mil-green);
}
.checks input[type=checkbox]:checked::after {
  content: '✓';
  position: absolute;
  top: -2px; left: 1px;
  font-size: 12px;
  color: var(--mil-green);
  font-family: var(--mil-mono);
}

/* ── Button Row ────────────────────────────────────────────────── */
.btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

/* ── Buttons ───────────────────────────────────────────────────── */
button, .mil-btn {
  background: var(--mil-surface2);
  border: 1px solid var(--mil-border2);
  color: var(--mil-text2);
  font-family: var(--mil-mono);
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 0;
  transition: background .15s, border-color .15s, color .15s;
  position: relative;
  overflow: hidden;
}
button:disabled { opacity: .4; cursor: default; }

button::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(76,175,80,.1), transparent);
  transition: left .35s;
}
button:not(:disabled):hover::after { left: 100%; }

#btn-analyze {
  border-color: var(--mil-green2);
  color: var(--mil-green);
}
#btn-analyze:not(:disabled):hover { background: rgba(46,125,50,.2); }

#btn-lvc-open {
  border-color: #b71c1c;
  color: var(--mil-red-bright);
}
#btn-lvc-open:not(:disabled):hover { background: rgba(198,40,40,.15); }

#btn-weather {
  border-color: var(--mil-blue);
  color: var(--mil-blue-bright);
}
#btn-weather:not(:disabled):hover { background: rgba(21,101,192,.15); }

#btn-airspace {
  border-color: var(--mil-purple);
  color: var(--mil-purple-bright);
}
#btn-airspace:not(:disabled):hover { background: rgba(106,27,154,.15); }

/* ── Status Text ───────────────────────────────────────────────── */
#status, #weather-status, #airspace-status {
  font-family: var(--mil-mono);
  font-size: 13px;
  color: var(--mil-dim);
  letter-spacing: .5px;
}

/* ── Coords Display ────────────────────────────────────────────── */
.coords {
  font-family: var(--mil-mono);
  font-size: 13px;
  color: var(--mil-dim);
  margin-bottom: 8px;
  letter-spacing: .5px;
}
.coords a { color: var(--mil-green2); text-decoration: none; }
.coords a:hover { color: var(--mil-green); }

/* ── Result / Error Boxes ──────────────────────────────────────── */
.box {
  background: #ffffff;
  border: none;
  padding: 16px 2px;
  white-space: pre-wrap;
  border-radius: 0;
  line-height: 1.9;
  font-size: 14px;
  font-family: Arial, sans-serif;
  color: #111111;
}
.box.error {
  background: #fff5f5;
  border-left-color: var(--mil-red);
  border-color: #f2c6c6;
  color: #7a1a1a;
  font-family: var(--mil-mono);
  font-size: 13px;
}

/* ── Airspace Controls ─────────────────────────────────────────── */
#as-radius, #as-drone-cat {
  background: var(--mil-surface2);
  border: 1px solid var(--mil-border2);
  color: var(--mil-text);
  font-family: var(--mil-mono);
  font-size: 14px;
  padding: 7px 10px;
  border-radius: 0;
  outline: none;
  cursor: pointer;
}
#as-radius:focus, #as-drone-cat:focus { border-color: var(--mil-green); }

#as-drone-weight {
  padding: 7px 10px;
  font-size: 12px;
  width: 80px;
}

/* ── Weather Tables ────────────────────────────────────────────── */
.weather-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: Arial, sans-serif;
  background: #ffffff;
  border: 1px solid #c5cdc3;
}
.weather-table th {
  background: #2e7d32;
  color: #e8f5e9;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: 13px;
  border-bottom: 1px solid #1b5e20;
  font-family: var(--mil-mono);
}
.weather-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #e0e5df;
  white-space: nowrap;
  color: #1a1a1a;
}
.weather-table tr:last-child td { border-bottom: none; }
.weather-table tr:hover td {
  background: #f0f5ef;
  color: #111;
}

.weather-summary {
  background: #f7f8f5;
  border: 1px solid #c5cdc3;
  border-left: 3px solid var(--mil-blue);
  padding: 12px 16px;
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.9;
  color: #1a1a1a;
}
.weather-summary b { color: #1b5e20; font-weight: 700; }

/* ── Section Headers inside results ───────────────────────────── */
h4 {
  font-family: var(--mil-mono);
  font-size: 13px;
  color: var(--mil-green2);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #c5cdc3;
}

/* ── Airspace result GPT box ───────────────────────────────────── */
#airspace-result .box {
  border-left-color: var(--mil-purple);
}

/* ── Explicit result text areas — plain readable output ───────── */
#result-box,
#error-box,
#weather-result,
#airspace-result {
  background: #ffffff !important;
  color: #111111 !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}
#error-box {
  background: #fff5f5 !important;
  color: #7a1a1a !important;
  border-left: 3px solid var(--mil-red) !important;
  border-color: #f2c6c6 !important;
  padding: 12px 16px !important;
}

/* ── Leaflet overrides ─────────────────────────────────────────── */
.leaflet-bar a, .leaflet-bar a:hover {
  background: var(--mil-surface2) !important;
  color: var(--mil-green) !important;
  border-color: var(--mil-border2) !important;
}
.leaflet-control-layers {
  background: var(--mil-surface) !important;
  border: 1px solid var(--mil-border2) !important;
  color: var(--mil-text2) !important;
}
.leaflet-control-layers label {
  color: var(--mil-text2) !important;
  font-family: var(--mil-mono) !important;
  font-size: 13px !important;
}
.leaflet-popup-content-wrapper {
  background: var(--mil-surface2) !important;
  border: 1px solid var(--mil-border2) !important;
  color: var(--mil-text) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--mil-mono) !important;
  font-size: 12px !important;
}
.leaflet-popup-tip { background: var(--mil-surface2) !important; }
.leaflet-popup-close-button { color: var(--mil-green) !important; }

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--mil-bg); }
::-webkit-scrollbar-thumb { background: var(--mil-border2); }
::-webkit-scrollbar-thumb:hover { background: var(--mil-border3); }

/* ── Night Mode Toggle ─────────────────────────────────────────── */
.night-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #7b1414;
  color: #ef5350;
  font-family: var(--mil-mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.night-toggle:hover {
  background: rgba(198,40,40,.15);
  border-color: #c62828;
  color: #ff5252;
}
.night-toggle__icon {
  font-size: 14px;
  line-height: 1;
}
.night-toggle__label {
  font-size: 11px;
  letter-spacing: 1.5px;
}

/* ── Night Mode Variables ──────────────────────────────────────── */
body.night-mode {
  --mil-bg:         #060606;
  --mil-surface:    #0a0a0a;
  --mil-surface2:   #0d0d0d;
  --mil-surface3:   #111111;
  --mil-border:     #1a1a1a;
  --mil-border2:    #280808;
  --mil-border3:    #3d0f0f;
  --mil-green:      #ff1a1a;
  --mil-green2:     #cc0000;
  --mil-green-dim:  #7b0000;
  --mil-amber:      #ff4444;
  --mil-amber-dim:  #cc0000;
  --mil-text:       #ffcccc;
  --mil-text2:      #ff8080;
  --mil-text3:      #ff1a1a;
  --mil-dim:        #7a3333;
  --mil-dim2:       #3d1a1a;
}
body.night-mode #map {
  filter: brightness(.5) saturate(.4) hue-rotate(300deg);
}
body.night-mode .night-toggle {
  border-color: #4a0000;
  color: #ff8080;
}
body.night-mode .night-toggle:hover {
  background: rgba(100,0,0,.3);
  border-color: #cc0000;
  color: #ff4444;
}