/* css/reports.css — Snapshot popup, cloud/radar popups, 24h weather report tables, print
   ms20: split from the old single style.css. Load ORDER in index.html matters (cascade). */
/* ── PRINT SNAPSHOT MODAL ── */
#snapshotModal {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(5px);
  display:none; justify-content:center; align-items:center;
  z-index:9999; padding:16px;
}
#snapshotModal.active { display:flex; }
#snapshotBox {
  background:#0d1f35;
  border:2px solid #1e4a7a;
  border-radius:16px; padding:0; max-width:940px; width:100%;
  box-shadow:0 24px 80px rgba(0,0,0,0.9); position:relative;
  max-height:94vh; overflow:hidden;
  display:flex; flex-direction:column;
}
#snap-header {
  background:linear-gradient(135deg,#0d47a1 0%,#1565c0 40%,#0277bd 100%);
  padding:14px 22px 12px;
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-shrink:0;
  border-bottom:2px solid rgba(0,229,255,0.3);
}
#snap-header-left { display:flex; flex-direction:column; gap:2px; }
#snap-header-left .snap-title {
  font-family:'Orbitron',sans-serif; color:#ffffff;
  font-size:clamp(13px,1.8vw,20px); font-weight:900; letter-spacing:1px;
}
#snap-header-left .snap-title span { color:#00e5ff; }
#snap-header-left .snap-subtitle {
  font-family:'Inter',sans-serif; color:rgba(255,255,255,0.65);
  font-size:clamp(9px,0.85vw,11px); letter-spacing:0.3px;
}
.snap-close {
  background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25);
  color:#fff; font-size:18px; cursor:pointer; border-radius:6px;
  padding:2px 8px; line-height:1; transition:all 0.2s;
}
.snap-close:hover { background:rgba(255,255,255,0.25); }
#snapshotContent {
  overflow-y:auto; padding:16px 20px;
  font-family:'Inter',sans-serif;
  font-size:clamp(10px,1vw,13px);
  color:#e0e8f4;
  flex:1; min-height:0;
}
.snap-rwy-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-bottom:12px;
}
@media (max-width:580px) { .snap-rwy-grid { grid-template-columns:1fr; } }
.snap-panel {
  border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
}
.snap-panel-header {
  padding:6px 12px;
  font-family:'Orbitron',sans-serif;
  font-size:clamp(10px,1.1vw,13px); font-weight:700;
  letter-spacing:1px; color:#fff;
}
.snap-panel-header.rwy28 { background:linear-gradient(90deg,#1565c0,#0288d1); }
.snap-panel-header.rwy10 { background:linear-gradient(90deg,#00695c,#00897b); }
.snap-panel-body { background:rgba(255,255,255,0.04); padding:8px 10px; }
.snap-drow {
  display:flex; justify-content:space-between; align-items:center;
  padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.06);
}
.snap-drow:last-child { border-bottom:none; }
.snap-dlbl { color:#7aaccf; font-size:clamp(9px,0.85vw,11px); font-weight:500; }
.snap-dval { font-weight:800; font-size:clamp(10px,1vw,13px); color:#fff; }
.snap-dval.cyan  { color:#00e5ff; }
.snap-dval.green { color:#00e676; }
.snap-dval.red   { color:#ff5252; }
.snap-dval.amber { color:#ffb74d; }
.snap-dval.teal  { color:#80cbc4; }

/* ═══ CLOUD INFO MODAL — bigger fonts, glance-readable ═══ */
#cloudModal {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.75); backdrop-filter:blur(5px);
  display:none; justify-content:center; align-items:center;
  z-index:9999; padding:16px;
}
#cloudModal.active { display:flex; }
#cloudBox {
  background:#0d1f35;
  border:2px solid #1e4a7a;
  border-radius:16px; padding:0; width:80vw; height:80vh; max-width:1200px;
  box-shadow:0 24px 80px rgba(0,0,0,0.9); position:relative;
  overflow:hidden;
  display:flex; flex-direction:column;
}
body:not(.dark) #cloudBox { background:#ffffff; border-color:#b0c4de; }
#cloud-header {
  background:linear-gradient(135deg,#37474f 0%,#546e7a 50%,#78909c 100%);
  padding:16px 22px 14px;
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-shrink:0;
  border-bottom:2px solid rgba(255,255,255,0.25);
}
#cloud-header-left { display:flex; flex-direction:column; gap:3px; }
.cloud-title {
  font-family:'Orbitron',sans-serif; color:#ffffff;
  font-size:clamp(16px,2.4vw,22px); font-weight:900; letter-spacing:0.5px;
}
.cloud-subtitle {
  font-family:'Inter',sans-serif; color:rgba(255,255,255,0.85);
  font-size:clamp(11px,1.1vw,14px); letter-spacing:0.3px;
}
.cloud-close {
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3);
  color:#fff; font-size:22px; cursor:pointer; border-radius:8px;
  padding:2px 10px; line-height:1; transition:all 0.2s;
}
.cloud-close:hover { background:rgba(255,255,255,0.3); }
#cloudContent {
  flex:1; min-height:0;
  display:flex; flex-direction:column;
  font-family:'Inter',sans-serif;
  color:#e8eef4;
  overflow:hidden;
}
body:not(.dark) #cloudContent { color:#1a2a3a; }

/* ── Radar Outlook layout: 30% headline strip, 70% unified cell grid ── */
.ro-headline {
  flex: 0 0 30%;
  display:flex; align-items:center; gap:14px;
  padding:18px 24px;
  background:rgba(79,195,247,0.08);
  border-bottom:1px solid rgba(255,255,255,0.1);
  overflow-y:auto;
}
body:not(.dark) .ro-headline { background:rgba(79,195,247,0.06); border-bottom-color:rgba(0,0,0,0.08); }
.ro-headline-icon { font-size:clamp(28px,3.4vw,40px); flex-shrink:0; line-height:1.2; }
.ro-headline-text {
  font:600 clamp(14px,1.8vw,19px) 'Inter',sans-serif;
  color:#e8eef4; line-height:1.55;
}
body:not(.dark) .ro-headline-text { color:#1a2a3a; }

.ro-grid-wrap {
  flex:1; min-height:0;
  padding:16px 22px; overflow-y:auto;
}

.ro-section-hdr {
  font:800 clamp(11px,1.2vw,14px) 'Inter',sans-serif;
  color:#4fc3f7; letter-spacing:0.6px; text-transform:uppercase;
  margin-bottom:12px;
}

.ro-cell-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
@media (max-width:700px) {
  .ro-cell-grid { grid-template-columns:1fr; }
}

.ro-cell-card {
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:12px;
  padding:12px 15px;
}
body:not(.dark) .ro-cell-card { background:rgba(0,0,0,0.03); border-color:rgba(0,0,0,0.1); }

.ro-cell-top {
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; margin-bottom:8px; flex-wrap:wrap;
}
.ro-cell-loc {
  font:700 clamp(12px,1.3vw,15px) 'Inter',sans-serif;
  color:#e8eef4;
}
body:not(.dark) .ro-cell-loc { color:#1a2a3a; }

.ro-cell-detail-row {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  font:600 clamp(11px,1.1vw,13px) 'Inter',sans-serif;
  color:#9fb8cc; padding:2px 0;
}
body:not(.dark) .ro-cell-detail-row { color:#5a7589; }
.ro-cell-detail-row b { color:#e8eef4; font-weight:800; }
body:not(.dark) .ro-cell-detail-row b { color:#1a2a3a; }

.ro-badge {
  display:inline-block; padding:2px 9px; border-radius:20px;
  font:800 clamp(10px,1vw,12px) 'Inter',sans-serif;
  letter-spacing:0.3px; white-space:nowrap;
}
.ro-badge.light { background:rgba(105,240,174,0.18); color:#69f0ae; }
.ro-badge.moderate { background:rgba(255,183,77,0.18); color:#ffb74d; }
.ro-badge.heavy { background:rgba(255,82,82,0.18); color:#ff5252; }
.ro-badge.none { background:rgba(255,255,255,0.1); color:#8fa8bd; }

.ro-empty {
  color:#8fa8bd; font:600 clamp(12px,1.3vw,14px) 'Inter',sans-serif;
  text-align:center; padding:24px 10px;
}

.ro-footer {
  flex-shrink:0; padding:8px 22px;
  border-top:1px solid rgba(255,255,255,0.08);
  font:600 10px 'Inter',sans-serif; color:#6d8aa3;
  text-align:center;
}
body:not(.dark) .ro-footer { border-top-color:rgba(0,0,0,0.08); }

/* ═══ LIVE RAIN RADAR MODAL — covers 80% of viewport, image cache-busted on every open ═══ */
#radarModal {
  position:fixed; top:0; left:0; width:100vw; height:100vh;
  background:rgba(0,0,0,0.8); backdrop-filter:blur(5px);
  display:none; justify-content:center; align-items:center;
  z-index:9999; padding:16px;
}
#radarModal.active { display:flex; }
#radarBox {
  background:#0d1f35; border:2px solid #1e4a7a; border-radius:16px;
  padding:0; width:80vw; height:80vh; max-width:1200px;
  box-shadow:0 24px 80px rgba(0,0,0,0.9); position:relative;
  display:flex; flex-direction:column; overflow:hidden;
}
body:not(.dark) #radarBox { background:#ffffff; border-color:#b0c4de; }
#radar-header {
  background:linear-gradient(135deg,#37474f 0%,#546e7a 50%,#78909c 100%);
  padding:14px 20px 12px;
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-shrink:0; border-bottom:2px solid rgba(255,255,255,0.25);
}
#radar-header-left { display:flex; flex-direction:column; gap:3px; }
.radar-title {
  font-family:'Orbitron',sans-serif; color:#ffffff;
  font-size:clamp(15px,2.2vw,20px); font-weight:900; letter-spacing:0.5px;
}
.radar-subtitle {
  font-family:'Inter',sans-serif; color:rgba(255,255,255,0.85);
  font-size:clamp(10px,1vw,13px); letter-spacing:0.3px;
}
.radar-close {
  background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3);
  color:#fff; font-size:22px; cursor:pointer; border-radius:8px;
  padding:2px 10px; line-height:1; transition:all 0.2s;
}
.radar-close:hover { background:rgba(255,255,255,0.3); }
#radarContent {
  flex:1; min-height:0; position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:auto; background:#04090f;
}
body:not(.dark) #radarContent { background:#e8f0f8; }
#radarImg { max-width:100%; max-height:100%; object-fit:contain; display:none; }
.radar-status-msg {
  color:#8fa8bd; font-family:'Inter',sans-serif; font-size:14px;
  text-align:center; padding:30px;
}
.radar-error { color:#ff6b6b; }

.snap-station-bar {
  display:flex; gap:16px; flex-wrap:wrap;
  background:rgba(21,101,192,0.18); border:1px solid rgba(21,101,192,0.4);
  border-radius:8px; padding:8px 14px; margin-bottom:12px;
  align-items:center;
}
.snap-station-item { display:flex; flex-direction:column; gap:1px; }
.snap-station-lbl { color:#7aaccf; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.snap-station-val { color:#fff; font-weight:800; font-size:clamp(10px,1vw,13px); }
.snap-metar-box { border-radius:8px; overflow:hidden; margin-top:10px; }
.snap-metar-hdr {
  background:linear-gradient(90deg,#1b5e20,#2e7d32);
  padding:5px 12px;
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700;
  color:#fff; letter-spacing:0.5px;
}
.snap-metar-body {
  background:rgba(0,100,50,0.15); border:1px solid rgba(0,200,83,0.25);
  border-top:none; padding:10px 12px;
  font-family:'JetBrains Mono','Courier New',monospace;
  color:#00e676; font-size:clamp(11px,1.1vw,15px);
  word-break:break-all; letter-spacing:0.3px;
  border-radius:0 0 8px 8px;
}
.snap-divider { border:none; border-top:1px solid rgba(255,255,255,0.08); margin:10px 0; }
#snap-actions {
  display:flex; gap:8px; padding:12px 20px;
  border-top:1px solid rgba(255,255,255,0.1);
  flex-shrink:0; flex-wrap:wrap;
  background:rgba(0,0,0,0.25);
}
.snap-btn {
  font-family:'Inter',sans-serif; font-size:clamp(9px,0.9vw,12px);
  font-weight:700; padding:6px 16px; border-radius:8px;
  cursor:pointer; transition:all 0.2s; border:1px solid;
  display:flex; align-items:center; gap:5px;
}
.snap-btn.btn-pdf {
  background:linear-gradient(135deg,#b71c1c,#c62828);
  color:#fff; border-color:#e53935;
}
.snap-btn.btn-pdf:hover { filter:brightness(1.15); }
.snap-btn.btn-pdf:disabled { opacity:0.6; cursor:wait; filter:none; }
.snap-btn.btn-print {
  background:linear-gradient(135deg,#0d47a1,#1565c0);
  color:#fff; border-color:#1976d2;
}
.snap-btn.btn-print:hover { filter:brightness(1.15); }
.snap-btn.btn-copy {
  background:rgba(255,255,255,0.07); color:#e0e8f4;
  border-color:rgba(255,255,255,0.2);
}
.snap-btn.btn-copy:hover { background:rgba(255,255,255,0.14); }
.snap-btn.btn-close {
  background:rgba(255,255,255,0.05); color:#7aaccf;
  border-color:rgba(255,255,255,0.12); margin-left:auto;
}
.snap-btn.btn-close:hover { background:rgba(255,255,255,0.10); color:#fff; }
/* ── 24H SUMMARY TABLES (print/PDF page) ── */
.snap-24h-section { margin-top:14px; }
.snap-24h-section:has(.wr-paper) { margin-top:0; }
.snap-24h-heading {
  font-family:'Orbitron',sans-serif; font-size:clamp(10px,1vw,12px); font-weight:700;
  color:#7aaccf; letter-spacing:0.6px; text-transform:uppercase;
  margin:10px 0 5px; padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,0.12);
}
.snap-24h-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:580px) { .snap-24h-grid { grid-template-columns:1fr; } }
.snap-24h-table {
  width:100%; border-collapse:collapse; font-size:clamp(8.5px,0.82vw,10.5px);
  border:1px solid rgba(255,255,255,0.12); border-radius:6px; overflow:hidden;
}
.snap-24h-table caption {
  font-family:'Orbitron',sans-serif; font-weight:700; letter-spacing:0.5px;
  font-size:clamp(9px,0.9vw,11px); color:#fff; text-align:left;
  padding:5px 8px; caption-side:top;
}
.snap-24h-table.rwy28 caption { background:linear-gradient(90deg,#1565c0,#0288d1); }
.snap-24h-table.rwy10 caption { background:linear-gradient(90deg,#00695c,#00897b); }
.snap-24h-table.common caption { background:linear-gradient(90deg,#4527a0,#5e35b1); }
.snap-24h-table td, .snap-24h-table th {
  padding:3px 7px; border-bottom:1px solid rgba(255,255,255,0.07); text-align:left;
}
.snap-24h-table tr:last-child td { border-bottom:none; }
.snap-24h-table td.s24-lbl { color:#7aaccf; font-weight:500; width:46%; }
.snap-24h-table td.s24-val { color:#fff; font-weight:800; }
.snap-24h-table td.s24-time { color:#80cbc4; font-weight:500; font-size:0.92em; white-space:nowrap; }
.snap-24h-table td.s24-val.red   { color:#ff5252; }
.snap-24h-table td.s24-val.amber { color:#ffb74d; }
.snap-24h-table td.s24-val.green { color:#00e676; }
.snap-24h-table td.s24-val.cyan  { color:#00e5ff; }
.s24-approx { font-size:0.85em; color:#ffb74d; font-weight:500; }
.snap-24h-note {
  font-size:clamp(8px,0.78vw,9.5px); color:#7aaccf; opacity:0.8;
  margin-top:4px; font-style:italic;
}
.snap-24h-loading {
  text-align:center; padding:14px; color:#7aaccf; font-size:11px;
  grid-column:1/-1;
}

/* ══════════════════════════════════════════
   PRINT - A4 PERFECT FIT (टॉप-टू-बॉटम)
   ══════════════════════════════════════════ */
@media print {
  /* पूरी स्क्रीन के बजाय केवल मॉडल दिखाएँ */
  body > *:not(#snapshotModal):not(#AWModal) { display:none !important; }
  #snapshotModal:not(.active) { display:none !important; }
  #AWModal:not(.active) { display:none !important; }
  #snapshotModal {
    position:static !important;
    display:block !important;
    padding:0 !important;
    background:none !important;
  }
  #snapshotBox {
    max-height:none !important;
    overflow:visible !important;
    background:#fff !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
    display:block !important;
    width:100% !important;
  }
  /* पेज सेटअप (A4, मार्जिन 10mm) */
  @page {
    size: A4;
    margin: 5mm;
  }

  /* हेडर और बेसिक कलर */
  #snap-header {
    background:#1565c0 !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
    padding:6px 14px !important;
  }
  .snap-panel-header.rwy28 { background:#1565c0 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .snap-panel-header.rwy10 { background:#00695c !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .snap-metar-hdr { background:#2e7d32 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  #snapshotContent {
    color:#000 !important;
    overflow:visible !important;
    padding:6px 12px !important;
  }

  /* ── FONT SIZES टॉप-टू-बॉटम फिट के लिए ── */
  .snap-dlbl {
    font-size:12px !important;
    color:#444 !important;
  }
  .snap-dval,
  .snap-dval.cyan,
  .snap-dval.green,
  .snap-dval.amber,
  .snap-dval.teal {
    font-size:13px !important;
    color:#000 !important;
  }
  .snap-dval.red { color:#c62828 !important; font-size:13px !important; }

  .snap-panel-body {
    background:#f0f4f8 !important;
    padding:4px 8px !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .snap-station-bar {
    background:#e3f2fd !important;
    padding:6px 10px !important;
    margin-bottom:8px !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .snap-station-lbl {
    color:#555 !important;
    font-size:11px !important;
  }
  .snap-station-val {
    color:#000 !important;
    font-size:12px !important;
  }
  .snap-metar-body {
    color:#1b5e20 !important;
    background:#f1f8e9 !important;
    font-size:12px !important;
    padding:6px 10px !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  /* buttons hide */
  #snap-actions, .snap-close { display:none !important; }

  /* ── 24H SUMMARY TABLES - एकदम फिट ── */
  .snap-24h-section {
    margin-top:6px !important;
    page-break-inside:avoid;
  }
  .snap-24h-heading {
    font-size:11px !important;
    color:#333 !important;
    border-bottom:1px solid #ccc !important;
    margin:8px 0 4px !important;
  }
  .snap-24h-grid { gap:6px !important; }
  .snap-24h-table {
    font-size:9px !important;
    border:1px solid #bbb !important;
  }
  .snap-24h-table caption {
    font-size:10px !important;
    padding:3px 6px !important;
    color:#fff !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .snap-24h-table.rwy28 caption { background:#1565c0 !important; }
  .snap-24h-table.rwy10 caption { background:#00695c !important; }
  .snap-24h-table.common caption { background:#5e35b1 !important; }
  .snap-24h-table td, .snap-24h-table th {
    padding:2px 5px !important;
    border-bottom:1px solid #e0e0e0 !important;
  }
  .snap-24h-table td.s24-lbl { color:#444 !important; }
  .snap-24h-table td.s24-val { color:#000 !important; }
  .snap-24h-table td.s24-val.red   { color:#c62828 !important; }
  .snap-24h-table td.s24-val.amber { color:#a05a00 !important; }
  .snap-24h-table td.s24-val.green { color:#1b5e20 !important; }
  .snap-24h-table td.s24-val.cyan  { color:#01579b !important; }
  .snap-24h-table td.s24-time { color:#00695c !important; }
  .s24-approx { color:#a05a00 !important; }
  .snap-24h-note {
    font-size:9px !important;
    color:#666 !important;
  }
  .snap-24h-loading { display:none !important; }

  /* spacers and dividers ko compact karo */
  .snap-divider { margin:6px 0 !important; }
  .snap-rwy-grid { margin-bottom:6px !important; }
  .snap-metar-box { margin-top:6px !important; }
}

/* Note: the AW report is no longer printed from inside this modal.
   printAWReport() in app.js opens a completely standalone HTML document
   (matching aerodrome_warning_monitor.py's own generate_html_report
   output) in a new tab and prints that instead — it avoids fighting
   with this dashboard's flexbox/dark-theme CSS entirely. */