/* =========================================================================
   HORUS :: tactical command-center theme
   Dark surface, phosphor amber/green accents, monospace data.
   ========================================================================= */

:root{
  --bg:        #0a0e0c;
  --bg-2:      #0e1411;
  --panel:     #111a15;
  --panel-2:   #15201a;
  --line:      #233029;
  --line-2:    #2f4036;
  --txt:       #c8d6cc;
  --txt-dim:   #7c8c81;
  --txt-faint: #51605770;

  --amber:     #ffb627;
  --green:     #38f08f;
  --green-dk:  #1f9d63;
  --red:       #ff4d4d;
  --blue:      #4db8ff;
  --purple:    #b07cff;

  --mono: "Share Tech Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --head: "Rajdhani", "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, #10241a40, transparent),
    var(--bg);
  color:var(--txt);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body::after{ /* subtle scanline texture */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background:repeating-linear-gradient(0deg, #00000000 0 2px, #00000010 2px 3px);
  mix-blend-mode:overlay; opacity:.5;
}
a{ color:inherit; text-decoration:none; }

/* Classification banner ---------------------------------------------------*/
.classbar{
  background:repeating-linear-gradient(45deg,#1a1205 0 12px,#160f04 12px 24px);
  color:var(--amber);
  border-bottom:1px solid #4a3410;
  text-align:center; letter-spacing:3px; font-size:11px; padding:5px;
  text-transform:uppercase;
}

/* Layout ------------------------------------------------------------------*/
.layout{ display:flex; min-height:calc(100vh - 27px); }

.sidebar{
  width:248px; flex:0 0 248px;
  background:linear-gradient(180deg,var(--bg-2),#0a0f0c);
  border-right:1px solid var(--line);
  padding:18px 16px; display:flex; flex-direction:column; gap:22px;
  position:sticky; top:0; height:calc(100vh - 27px);
}
.brand{ display:flex; gap:12px; align-items:center; }
.brand-mark{
  font-size:30px; color:var(--green);
  text-shadow:0 0 14px #38f08f88; line-height:1;
}
.brand-name{ font-family:var(--head); font-weight:700; font-size:21px; letter-spacing:2px; color:#eaf3ed; }
.brand-sub{ font-size:9px; color:var(--txt-dim); letter-spacing:2.5px; }

.nav{ display:flex; flex-direction:column; gap:3px; }
.nav a{
  display:flex; align-items:center; gap:11px;
  padding:10px 12px; border-radius:4px; color:var(--txt-dim);
  font-size:13px; letter-spacing:.5px; border:1px solid transparent;
  transition:.12s;
}
.nav a span{ width:16px; text-align:center; color:var(--green-dk); }
.nav a:hover{ background:var(--panel); color:var(--txt); }
.nav a.active{
  background:linear-gradient(90deg,#13261c,#0e1814);
  color:var(--green); border-color:var(--line-2);
  box-shadow:inset 2px 0 0 var(--green);
}
.nav a.active span{ color:var(--green); }

.sidebar-foot{
  margin-top:auto; font-size:10px; color:var(--txt-dim);
  letter-spacing:1.5px; display:flex; align-items:center; gap:8px;
  border-top:1px solid var(--line); padding-top:14px; flex-wrap:wrap;
}
.status-dot{
  width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green); animation:pulse 2s infinite;
}
.clock{ width:100%; color:var(--amber); font-size:13px; letter-spacing:2px; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 26px; border-bottom:1px solid var(--line);
  background:#0b110e; position:sticky; top:0; z-index:5;
}
.crumb{ font-family:var(--head); font-weight:600; letter-spacing:2px; font-size:15px; color:#dfeae2; text-transform:uppercase; }
.topbar-meta{ font-size:11px; color:var(--txt-dim); letter-spacing:1px; }
.topbar-meta b{ color:var(--green); }
.topbar-meta .sep{ margin:0 8px; color:var(--line-2); }

.content{ padding:26px; flex:1; }
.foot{
  padding:16px 26px; border-top:1px solid var(--line);
  font-size:10px; color:var(--txt-dim); letter-spacing:1.5px; text-align:center;
}

/* Flash messages ----------------------------------------------------------*/
.flashes{ padding:14px 26px 0; }
.flash{
  padding:9px 14px; border-radius:4px; margin-bottom:8px; font-size:13px;
  border:1px solid var(--line-2); background:var(--panel); letter-spacing:.5px;
}
.flash-success{ border-color:#1f5e3c; color:var(--green); background:#0e1d15; }
.flash-warning{ border-color:#6a4a12; color:var(--amber); background:#1c1407; }

/* Headings / sections -----------------------------------------------------*/
.section-title{
  font-family:var(--head); font-weight:600; letter-spacing:2px;
  font-size:13px; color:var(--txt-dim); text-transform:uppercase;
  margin:0 0 12px; display:flex; align-items:center; gap:10px;
}
.section-title::after{ content:""; flex:1; height:1px; background:var(--line); }

/* Panels ------------------------------------------------------------------*/
.panel{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line); border-radius:6px; padding:18px;
}
.panel + .panel{ margin-top:18px; }

/* Stat cards --------------------------------------------------------------*/
.grid{ display:grid; gap:16px; }
.grid-stats{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.stat{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--panel),#0c120f);
  border:1px solid var(--line); border-radius:6px; padding:16px 18px;
}
.stat::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green); }
.stat.amber::before{ background:var(--amber); }
.stat.red::before{ background:var(--red); }
.stat.blue::before{ background:var(--blue); }
.stat-label{ font-size:10px; letter-spacing:2px; color:var(--txt-dim); text-transform:uppercase; }
.stat-value{ font-size:34px; font-family:var(--head); font-weight:700; color:#eef6f0; line-height:1.1; margin-top:6px; }
.stat-value.green{ color:var(--green); } .stat-value.amber{ color:var(--amber); }
.stat-value.red{ color:var(--red); } .stat-value.blue{ color:var(--blue); }
.stat-foot{ font-size:10px; color:var(--txt-dim); margin-top:4px; letter-spacing:1px; }

.cols-2{ display:grid; grid-template-columns:1.6fr 1fr; gap:18px; align-items:start; }
@media (max-width:1000px){ .cols-2{ grid-template-columns:1fr; } }

/* Tables ------------------------------------------------------------------*/
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:6px; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
thead th{
  background:#0c1410; text-align:left; padding:11px 14px;
  font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--txt-dim); border-bottom:1px solid var(--line-2); white-space:nowrap;
}
tbody td{ padding:11px 14px; border-bottom:1px solid var(--line); }
tbody tr{ transition:.1s; }
tbody tr:hover{ background:#0f1813; }
tbody tr:last-child td{ border-bottom:none; }
.row-link{ cursor:pointer; }
.mono-id{ color:var(--amber); font-size:12px; }

/* Badges ------------------------------------------------------------------*/
.badge{
  display:inline-block; padding:2px 8px; border-radius:3px; font-size:10px;
  letter-spacing:1px; border:1px solid var(--line-2); text-transform:uppercase;
  white-space:nowrap;
}
.b-green{ color:var(--green); border-color:#1f5e3c; background:#0e1d15; }
.b-amber{ color:var(--amber); border-color:#6a4a12; background:#1c1407; }
.b-red{ color:var(--red); border-color:#6a1f1f; background:#1d0e0e; }
.b-blue{ color:var(--blue); border-color:#1f4a6a; background:#0e1620; }
.b-purple{ color:var(--purple); border-color:#4a2f6a; background:#160e20; }
.b-grey{ color:var(--txt-dim); }

/* Buttons -----------------------------------------------------------------*/
.btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  padding:9px 16px; border-radius:4px; border:1px solid var(--line-2);
  background:var(--panel); color:var(--txt); cursor:pointer; font-family:var(--mono);
  font-size:12px; letter-spacing:1px; text-transform:uppercase; transition:.12s;
}
.btn:hover{ border-color:var(--green-dk); color:var(--green); }
.btn-primary{
  background:linear-gradient(180deg,#15402a,#0f2c1c);
  border-color:var(--green-dk); color:var(--green);
}
.btn-primary:hover{ box-shadow:0 0 16px #38f08f33; color:#baffdb; }
.btn-block{ width:100%; }
.btn-danger{ color:var(--red); border-color:#6a1f1f; }
.btn-danger:hover{ background:#1d0e0e; border-color:var(--red); color:#ff8a8a; }
.btn-sm{ padding:5px 10px; font-size:10px; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* Forms -------------------------------------------------------------------*/
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.form-grid .full{ grid-column:1/-1; }
@media (max-width:760px){ .form-grid{ grid-template-columns:1fr; } }
label{ display:block; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--txt-dim); margin-bottom:6px; }
input,select,textarea{
  width:100%; background:#0a100d; border:1px solid var(--line-2); border-radius:4px;
  color:var(--txt); font-family:var(--mono); font-size:13px; padding:10px 12px; transition:.12s;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--green-dk); box-shadow:0 0 0 2px #38f08f22;
}
textarea{ resize:vertical; min-height:90px; line-height:1.6; }
select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--txt-dim) 50%),linear-gradient(135deg,var(--txt-dim) 50%,transparent 50%); background-position:calc(100% - 18px) 17px,calc(100% - 13px) 17px; background-size:5px 5px; background-repeat:no-repeat; }

/* Filter bar --------------------------------------------------------------*/
.filterbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:18px; }
.filterbar .field{ min-width:160px; }
.filterbar input,.filterbar select{ padding:8px 12px; }

/* Detail header -----------------------------------------------------------*/
.detail-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:20px; }
.detail-code{ font-family:var(--head); font-weight:700; font-size:30px; letter-spacing:3px; color:#eef6f0; }
.detail-name{ color:var(--txt-dim); letter-spacing:1px; margin-top:2px; }
.kv{ display:grid; grid-template-columns:140px 1fr; gap:8px 16px; font-size:13px; }
.kv dt{ color:var(--txt-dim); letter-spacing:1px; font-size:11px; text-transform:uppercase; padding-top:2px; }
.kv dd{ margin:0; color:var(--txt); }

.tag-meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }

/* Bars (analytics) --------------------------------------------------------*/
.bars{ display:flex; flex-direction:column; gap:11px; }
.bar-row{ display:grid; grid-template-columns:130px 1fr 46px; align-items:center; gap:12px; font-size:12px; }
.bar-label{ color:var(--txt-dim); letter-spacing:1px; text-transform:uppercase; font-size:11px; }
.bar-track{ background:#0a100d; border:1px solid var(--line); border-radius:3px; height:18px; overflow:hidden; }
.bar-fill{ height:100%; background:linear-gradient(90deg,var(--green-dk),var(--green)); box-shadow:0 0 12px #38f08f55; }
.bar-fill.amber{ background:linear-gradient(90deg,#a8761a,var(--amber)); box-shadow:0 0 12px #ffb62755; }
.bar-fill.red{ background:linear-gradient(90deg,#9d2b2b,var(--red)); box-shadow:0 0 12px #ff4d4d55; }
.bar-fill.blue{ background:linear-gradient(90deg,#2b6f9d,var(--blue)); }
.bar-val{ text-align:right; color:var(--txt); }

/* Sub-record cards (casualties/challenges/reports in detail) --------------*/
.rec{ border:1px solid var(--line); border-radius:5px; padding:13px 15px; background:#0c120f; margin-bottom:10px; }
.rec-head{ display:flex; justify-content:space-between; gap:12px; align-items:center; }
.rec-title{ color:#e6f0e9; letter-spacing:.5px; }
.rec-body{ color:var(--txt-dim); font-size:12.5px; margin-top:8px; line-height:1.6; }
.rec-meta{ font-size:11px; color:var(--txt-dim); letter-spacing:1px; margin-top:6px; }

.empty{ color:var(--txt-dim); font-size:12px; padding:14px; text-align:center; border:1px dashed var(--line-2); border-radius:5px; letter-spacing:1px; }

.inline-form{ display:inline; }

/* Tabs for adding sub-records --------------------------------------------*/
.addbox{ background:#0a0f0c; border:1px solid var(--line); border-radius:6px; padding:16px; margin-top:14px; }
.addbox summary{ cursor:pointer; color:var(--green); letter-spacing:1px; font-size:12px; text-transform:uppercase; list-style:none; }
.addbox summary::before{ content:"+ "; }
.addbox[open] summary::before{ content:"– "; }
.addbox .form-grid{ margin-top:14px; }

/* Drone feed -------------------------------------------------------------*/
.feed-frame{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:#05080680; border:1px solid var(--line-2); border-radius:6px;
}
.feed-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.feed-offline{
  background:
    radial-gradient(120% 90% at 50% 40%, #0e1a14, #05080a 80%);
  display:flex; align-items:center; justify-content:center;
}
.feed-grid{
  position:absolute; inset:0; opacity:.18;
  background-image:
    linear-gradient(#38f08f33 1px, transparent 1px),
    linear-gradient(90deg, #38f08f33 1px, transparent 1px);
  background-size:34px 34px;
}
.feed-frame.feed-offline::after{ /* moving scan sweep */
  content:""; position:absolute; left:0; right:0; height:42%;
  background:linear-gradient(180deg, transparent, #38f08f0f 70%, #38f08f1f);
  animation:feedscan 4.5s linear infinite;
}
@keyframes feedscan{ 0%{ transform:translateY(-120%) } 100%{ transform:translateY(260%) } }
.feed-placeholder{ position:relative; text-align:center; z-index:2; padding:20px; }
.feed-eye{ font-size:40px; color:var(--green); text-shadow:0 0 16px #38f08f88; opacity:.7; animation:pulse 2.4s infinite; }
.feed-status{ font-family:var(--head); font-weight:600; letter-spacing:2px; color:var(--amber); margin-top:10px; font-size:14px; }
.feed-sub{ color:var(--txt-dim); font-size:12px; letter-spacing:.5px; margin-top:6px; }
.feed-corner{
  position:absolute; z-index:3; font-size:10px; letter-spacing:1.5px; color:#7fd8a8aa;
  padding:8px 12px;
}
.feed-corner.tl{ top:0; left:0; color:var(--red); }
.feed-corner.tr{ top:0; right:0; }
.feed-corner.bl{ bottom:0; left:0; }
.feed-corner.br{ bottom:0; right:0; color:var(--amber); }
.feed-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:12px; }
.feed-live{ color:var(--red); letter-spacing:1.5px; font-size:12px; animation:pulse 1.6s infinite; }

/* Multi-drone wall + tiles -----------------------------------------------*/
.feed-wall{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(310px, 1fr));
}
.feed-tile{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line); border-radius:6px; overflow:hidden;
}
.feed-tile .feed-frame{ border:0; border-bottom:1px solid var(--line); border-radius:0; }
.feed-tilebar{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 13px;
}
.feed-tileinfo b{ color:#e6f0e9; letter-spacing:.5px; }
.feed-editbox{ margin:0 13px 13px; padding:13px; }
.feed-editbox summary{ font-size:11px; }

hr.div{ border:none; border-top:1px solid var(--line); margin:24px 0; }
.muted{ color:var(--txt-dim); }
.center{ text-align:center; }