/*
 * design.css — visual overrides + analytics components
 * Loaded after style.css. Visual rules are global; layout
 * position overrides are scoped to min-width: 601px.
 */

/* ════════════════════════════════════════════════════════════════
   1. COLOUR TOKENS
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  --bg0: #040D1C;
  --bg1: #071626;
  --bg2: #0C2038;
  --bgp: #071626ee;
  --bgc: #091B30;
  --bgh: #112A45;
  --bd:  #1C3D5E;
  --bda: #2E5E8C;
  --t2:  #8DAFC8;
  --tm:  #5A7A96;
  --sh:  rgba(0,0,0,.55);
}

[data-theme="light"] {
  --bg0: #EDF1F6;
  --bg1: #FFFFFF;
  --bg2: #F3F6FA;
  --bgp: #FFFFFFee;
  --bgc: #F7F9FC;
  --bgh: #E8EEF5;
  --bd:  #CDD6E2;
  --bda: #9AAFC4;
  --t1:  #172235;
  --t2:  #4E6070;
  --tm:  #8899AA;
  --sh:  rgba(0,0,0,.10);
}

/* ════════════════════════════════════════════════════════════════
   2. GLOBAL VISUAL STYLES
   ════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .tb {
  background: rgba(7,22,38,0.92) !important;
  border-bottom: 1px solid rgba(0,200,232,0.13) !important;
  box-shadow: 0 2px 16px var(--sh);
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
}
[data-theme="light"] .tb {
  background: rgba(255,255,255,0.96) !important;
  border-bottom: 1px solid rgba(0,0,0,0.09) !important;
  box-shadow: 0 2px 12px var(--sh);
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
}

[data-theme="dark"] .sd {
  background: rgba(7,22,38,0.94) !important;
  border-right-color: rgba(0,200,232,0.10) !important;
  box-shadow: 4px 0 24px var(--sh);
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
}
[data-theme="light"] .sd {
  background: rgba(255,255,255,0.97) !important;
  border-right-color: rgba(0,0,0,0.07) !important;
  box-shadow: 4px 0 20px var(--sh);
}

[data-theme="dark"] .sdt { background: rgba(4,13,28,0.6) !important; border-bottom-color: rgba(0,200,232,0.08) !important; }
[data-theme="dark"] .bb  { background: rgba(4,13,28,0.96) !important; border-top-color: rgba(0,200,232,0.10) !important; }
[data-theme="dark"] .rp  { background: rgba(7,22,38,0.96) !important; border-left-color: rgba(0,200,232,0.12) !important; }

.lt  { font-size: 17px !important; letter-spacing: 4.5px !important; }
.ls  { font-size: 10px !important; letter-spacing: 2.5px !important; }
.tbl { gap: 12px; }

.tbn .st.on { background: rgba(0,200,232,0.08) !important; }
.cn { border-radius: 20px !important; padding: 4px 10px !important; font-size: 11px !important; }

.bt { border-radius: 8px !important; font-size: 11px !important; letter-spacing: 0.6px !important; gap: 6px !important; }
.bt:hover { transform: translateY(-1px); box-shadow: 0 3px 10px var(--sh); }
.bt:active { transform: scale(0.96) !important; }

.sb { border-radius: 12px !important; box-shadow: 0 4px 24px var(--sh) !important; }
[data-theme="dark"] .sb { background: rgba(7,22,38,0.92) !important; border-color: rgba(0,200,232,0.18) !important; }
.sb:focus-within { border-color: var(--c) !important; box-shadow: 0 0 0 3px rgba(0,200,232,0.12),0 6px 24px var(--sh) !important; }
.si { padding: 11px 8px !important; }
.sr { border-radius: 0 0 12px 12px !important; }
.sri { padding: 9px 14px !important; }

.tt { font-size: 10px !important; letter-spacing: 2.5px !important; margin: 14px 0 6px 2px !important; display: flex; align-items: center; gap: 6px; }
.tt::after { content: ""; flex: 1; height: 1px; background: var(--bd); opacity: 0.5; }

.ly { border-radius: 8px !important; margin-bottom: 2px !important; border: 1px solid transparent; }
[data-theme="dark"] .ly:hover { background: rgba(0,200,232,0.06) !important; border-color: rgba(0,200,232,0.12); }
.lc { border-radius: 6px !important; }
.ly-btn { border-radius: 8px !important; }

.wc { border-radius: 10px !important; }
.ws { border-radius: 8px !important; }

.nm { border-radius: 10px !important; }
.nm:hover { box-shadow: 0 4px 16px var(--sh) !important; }
.nmb { border-radius: 6px !important; }

.fm-card, .pl-card { border-radius: 10px !important; }
.fm-card:hover, .pl-card:hover { box-shadow: 0 4px 18px rgba(0,200,232,0.10) !important; }
.fm-input, .fm-select, .fm-textarea, .ra-notes-input, .pf-input { border-radius: 8px !important; }
.sgi { border-radius: 8px !important; }

.pf-cat { border-radius: 10px !important; overflow: hidden; }
.pf-box { border-radius: 5px !important; }
.pf-btn-reset, .pf-btn-export { border-radius: 8px !important; }

.ra-domain { border-radius: 8px !important; }
.ra-sc { border-radius: 8px !important; }

.dr { border-radius: 6px !important; margin-bottom: 3px !important; }

.disc-box { border-radius: 14px !important; box-shadow: 0 32px 80px rgba(0,0,0,0.7) !important; }
.mo { border-radius: 14px !important; }
.sv { border-radius: 8px !important; }

.to { border-radius: 10px !important; backdrop-filter: blur(20px) saturate(1.4) !important; -webkit-backdrop-filter: blur(20px) saturate(1.4) !important; }

.ab-section { border-radius: 10px !important; }
.ab-feat { border-radius: 10px !important; }
.blog-card { border-radius: 10px !important; }
.ob-card { border-radius: 16px !important; box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important; }
.apq { border-radius: 12px !important; }
.apq-item { border-radius: 8px !important; }
.sd-show { border-radius: 0 10px 10px 0 !important; }
.kh { border-radius: 10px 10px 0 0 !important; }

.leaflet-control-zoom { border-radius: 10px !important; overflow: hidden; box-shadow: 0 4px 16px var(--sh) !important; border: 1px solid var(--bd) !important; }

:focus-visible { outline: 2px solid rgba(0,200,232,0.6) !important; outline-offset: 2px !important; }

/* ════════════════════════════════════════════════════════════════
   3. DESKTOP LAYOUT OVERRIDES  (min-width: 601px)
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 601px) {
  .tb  { height: 52px !important; padding: 0 16px !important; }
  .tbn .st { height: 52px !important; padding: 0 14px !important; }
  .sd  { top: 52px !important; bottom: 104px !important; width: 330px !important; }
  .mw  { top: 52px !important; bottom: 104px !important; }
  .rp  { top: 52px !important; bottom: 104px !important; border-radius: 14px 0 0 14px !important; box-shadow: -4px 0 32px var(--sh) !important; }
  .sw  { top: 62px !important; }
  .bb  { height: 44px !important; }
  .bb-top { height: 44px !important; min-height: 44px !important; padding: 0 16px !important; }
  .locate-fab { border-radius: 12px !important; box-shadow: 0 4px 20px var(--sh) !important; bottom: 118px !important; right: 14px !important; }
  .apq { top: 118px !important; }
  .leaflet-control-zoom { margin-top: 62px !important; }
  .bbn { bottom: 44px; }
}

/* ════════════════════════════════════════════════════════════════
   4. ANALYTICS — FLEET TAB COMPONENTS
   ════════════════════════════════════════════════════════════════ */

/* ── Nav row (Fleet / Logs / Analytics tabs) ── */
.fl-nav-row {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.fl-nav-btn {
  flex: 1;
  background: var(--bgc);
  border: 1px solid var(--bd);
  border-radius: 8px;
  color: var(--t2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 7px 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fl-nav-btn:hover { background: var(--bgh); color: var(--t1); }
.fl-nav-btn.on {
  background: rgba(0,200,232,0.12);
  border-color: rgba(0,200,232,0.4);
  color: var(--c);
}

/* ── Quick stats strip on overview ── */
.fl-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
  cursor: pointer;
}
.fl-stat-pill {
  background: var(--bgc);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.fl-stat-pill:hover { border-color: rgba(0,200,232,0.4); background: var(--bgh); }
.fl-stat-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--c);
  line-height: 1;
}
.fl-stat-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--tm);
  margin-top: 3px;
}

/* ── Alert banner on overview ── */
.fl-alert-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: opacity 0.15s;
}
.fl-alert-banner:hover { opacity: 0.85; }
.fl-alert-banner.fl-alert-crit { background: rgba(255,51,68,0.12); border: 1px solid rgba(255,51,68,0.3); color: var(--r); }
.fl-alert-banner.fl-alert-warn { background: rgba(238,184,0,0.10); border: 1px solid rgba(238,184,0,0.28); color: var(--y); }
.fl-alert-icon { font-size: 14px; flex-shrink: 0; }
.fl-alert-arr { margin-left: auto; font-size: 16px; opacity: 0.6; }

/* ── Log flight button on drone card ── */
.fl-log-btn {
  background: rgba(0,200,232,0.08);
  border: 1px solid rgba(0,200,232,0.25);
  border-radius: 6px;
  color: var(--c);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s, border-color 0.15s;
}
.fl-log-btn:hover { background: rgba(0,200,232,0.15); border-color: rgba(0,200,232,0.5); }

/* ── Analytics: summary stat grid ── */
.fl-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.fl-stat-card {
  background: var(--bgc);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}
.fl-stat-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--c);
  line-height: 1;
}
.fl-stat-unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--tm);
  margin-left: 1px;
}
.fl-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--tm);
  margin-top: 5px;
}

/* ── Analytics: section titles ── */
.fl-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: var(--tm);
  margin: 16px 0 8px 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fl-section-title::after { content: ""; flex: 1; height: 1px; background: var(--bd); opacity: 0.5; }

/* ── Analytics: monthly activity chart ── */
.fl-chart-wrap {
  background: var(--bgc);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 12px 12px 8px;
  margin-bottom: 4px;
}
.fl-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 64px;
}
.fl-chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 100%;
  justify-content: flex-end;
}
.fl-chart-tip {
  font-size: 9px;
  color: var(--tm);
  min-height: 12px;
  line-height: 12px;
}
.fl-chart-bar {
  width: 100%;
  background: var(--c);
  opacity: 0.35;
  border-radius: 3px 3px 0 0;
  min-height: 0;
  transition: opacity 0.2s;
}
.fl-chart-bar-now { opacity: 0.85; }
.fl-chart-col:hover .fl-chart-bar { opacity: 0.7; }
.fl-chart-labels {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.fl-chart-lbl {
  flex: 1;
  font-size: 9px;
  color: var(--tm);
  text-align: center;
  letter-spacing: 0;
}

/* ── Analytics: per-drone breakdown ── */
.fl-drone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bgc);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
}
.fl-drone-icon { font-size: 18px; flex-shrink: 0; }
.fl-drone-info { flex: 1; min-width: 0; }
.fl-drone-name { font-size: 13px; font-weight: 600; color: var(--t1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-drone-model { font-size: 11px; color: var(--tm); margin-top: 1px; }
.fl-drone-metrics { display: flex; gap: 8px; flex-shrink: 0; }
.fl-metric { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fl-metric-val {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--c);
  line-height: 1;
}
.fl-metric-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--tm); }
.fl-metric-ok   { color: var(--g) !important; }
.fl-metric-warn { color: var(--y) !important; }
.fl-metric-crit { color: var(--r) !important; }

/* ── Analytics: maintenance / alert cards ── */
.fl-alert-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.fl-alert-card-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.fl-alert-card-drone { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 2px; }
.fl-alert-card-msg { color: var(--t1); }
.fl-alert-card-crit { background: rgba(255,51,68,0.08);  border: 1px solid rgba(255,51,68,0.25); }
.fl-alert-card-crit .fl-alert-card-drone { color: var(--r); }
.fl-alert-card-warn { background: rgba(238,184,0,0.08); border: 1px solid rgba(238,184,0,0.22); }
.fl-alert-card-warn .fl-alert-card-drone { color: var(--y); }
.fl-alert-card-info { background: rgba(0,200,232,0.06); border: 1px solid rgba(0,200,232,0.18); }
.fl-alert-card-info .fl-alert-card-drone { color: var(--c); }
.fl-alert-none {
  text-align: center;
  padding: 14px;
  background: rgba(61,232,160,0.06);
  border: 1px solid rgba(61,232,160,0.2);
  border-radius: 8px;
  color: var(--g);
  font-size: 13px;
}

/* ── Analytics: licence expiry rows ── */
.fl-lic-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--bd);
  margin-bottom: 5px;
  font-size: 12px;
}
.fl-lic-label { font-weight: 600; flex: 1; color: var(--t1); }
.fl-lic-date  { color: var(--t2); font-family: 'Space Mono', monospace; font-size: 11px; }
.fl-lic-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
.fl-lic-ok       { border-color: rgba(61,232,160,0.25); }
.fl-lic-ok       .fl-lic-status { color: var(--g); }
.fl-lic-expiring { border-color: rgba(238,184,0,0.3); background: rgba(238,184,0,0.05); }
.fl-lic-expiring .fl-lic-status { color: var(--y); }
.fl-lic-expired  { border-color: rgba(255,51,68,0.35); background: rgba(255,51,68,0.06); }
.fl-lic-expired  .fl-lic-status { color: var(--r); }

/* ── Flight log: list cards ── */
.fl-log-card {
  background: var(--bgc);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 6px;
  transition: border-color 0.15s;
}
.fl-log-card:hover { border-color: var(--bda); }
.fl-log-card.fl-log-incident { border-left: 3px solid var(--y); }
.fl-log-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.fl-log-drone { font-size: 13px; font-weight: 600; color: var(--t1); }
.fl-log-date  { font-size: 11px; color: var(--tm); margin-top: 2px; }
.fl-log-actions { display: flex; gap: 3px; flex-shrink: 0; }
.fl-log-metrics { display: flex; flex-wrap: wrap; gap: 4px; }
.fl-log-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
  background: var(--bg1);
  border: 1px solid var(--bd);
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: 0.3px;
}
.fl-log-chip-warn { color: var(--y); border-color: rgba(238,184,0,0.3); background: rgba(238,184,0,0.06); }
.fl-log-notes { font-size: 11px; color: var(--tm); margin-top: 6px; line-height: 1.5; border-top: 1px solid var(--bd); padding-top: 6px; }

/* ── Log-from-plan button on flight plan cards ── */
.fl-log-from-plan {
  border-color: rgba(0,200,232,0.35) !important;
  color: var(--c) !important;
  font-size: 11px !important;
}
.fl-log-from-plan:hover { background: rgba(0,200,232,0.08) !important; }

/* ── Log list: toolbar row (new entry + import) ── */
.fl-log-toolbar {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 10px;
}

/* ── Import button (label wrapping hidden file input) ── */
.fl-import-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: rgba(0,200,232,0.07);
  color: var(--c);
  border: 1px solid rgba(0,200,232,0.3);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.fl-import-label:hover { background: rgba(0,200,232,0.14); border-color: rgba(0,200,232,0.55); }
.fl-import-label input[type="file"] { display: none; }

/* ── Import preview: secondary export button ── */
.fl-import-export-btn {
  display: block;
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid var(--bd);
  border-radius: 8px;
  color: var(--tm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.fl-import-export-btn:hover { border-color: var(--g); color: var(--g); }

/* ── Fleet overview: import CTA (shown when no logs yet) ── */
.fl-import-cta {
  background: rgba(0,200,232,0.05);
  border: 1px dashed rgba(0,200,232,0.3);
  border-radius: 10px;
  padding: 14px 14px 12px;
  margin-top: 12px;
  text-align: center;
}
.fl-import-cta-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--t);
  margin-bottom: 4px;
}
.fl-import-cta-sub {
  font-size: 11px;
  color: var(--tm);
  margin-bottom: 10px;
  line-height: 1.5;
}
.fl-import-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: rgba(0,200,232,0.12);
  border: 1px solid rgba(0,200,232,0.4);
  color: var(--g);
  border-radius: 7px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: background 0.15s, border-color 0.15s;
}
.fl-import-cta-btn:hover { background: rgba(0,200,232,0.2); border-color: rgba(0,200,232,0.7); }
.fl-import-cta-btn input[type="file"] { display: none; }

/* ── Import preview: info note ── */
.fl-import-note {
  font-size: 12px;
  color: var(--tm);
  background: var(--bgc);
  border: 1px solid var(--bd);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 0 10px;
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════════
   5. BOTTOM NAVIGATION BAR
   ════════════════════════════════════════════════════════════════ */

.bbn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 60px;
  display: flex;
  align-items: stretch;
  background: var(--bg2);
  border-top: 1px solid var(--bd);
  z-index: 1003;
}
[data-theme="dark"] .bbn {
  background: rgba(7,22,38,0.94) !important;
  border-top-color: rgba(0,200,232,0.10) !important;
  box-shadow: 0 -2px 16px var(--sh);
  backdrop-filter: blur(20px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
}
[data-theme="light"] .bbn {
  background: rgba(255,255,255,0.97) !important;
  border-top-color: rgba(0,0,0,0.07) !important;
  box-shadow: 0 -2px 12px var(--sh);
}
.bbn-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--tm);
  padding: 6px 2px;
  min-width: 0;
  transition: color 0.2s, background 0.2s;
}
.bbn-tab:hover { color: var(--c); background: rgba(0,200,232,0.06); }
.bbn-tab.on    { color: var(--c); background: rgba(0,200,232,0.10); border-top: 2px solid var(--c); }
.bbn-icon { width: 20px !important; height: 20px !important; }
.bbn-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Mobile: push sidebar + map up to sit above the bottom nav */
@media (max-width: 600px) {
  .sd  { bottom: 60px !important; }
  .mw  { bottom: 60px !important; }
  .rp  { bottom: 60px !important; }
  .locate-fab { bottom: 72px !important; }
}