/* ============================================
   AutoAlert — Dashboard Theme
   ============================================ */

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

:root{
  --bg-primary:   #0b0e14;
  --bg-secondary: #111620;
  --bg-card:      #161c28;
  --bg-hover:     #1c2436;
  --border:       #1e2738;
  --text-primary: #e2e8f0;
  --text-muted:   #64748b;
  --accent:       #38bdf8;
  --accent-dim:   #0c4a6e;
  --green:        #22c55e;
  --green-dim:    #14532d;
  --red:          #ef4444;
  --red-dim:      #7f1d1d;
  --orange:       #f59e0b;
  --orange-dim:   #78350f;
  --purple:       #a78bfa;
  --radius:       8px;
  --radius-lg:    12px;
  --transition:   .25s ease;
}

html{font-size:14px}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg-primary);
  color:var(--text-primary);
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------- Header ---------- */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.75rem 1.5rem;
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.header__brand{display:flex;align-items:center;gap:1rem}
.header__logo{display:flex;align-items:center;gap:.5rem}
.header__logo h1{font-size:1.5rem;font-weight:700;letter-spacing:-.5px}
.logo-icon{font-size:1.6rem;filter:drop-shadow(0 0 6px var(--accent))}
.accent{color:var(--accent)}
.header__tagline{color:var(--text-muted);font-size:.85rem}

.header__status{display:flex;align-items:center;gap:.75rem;font-size:.85rem}
.header__clock{
  background:var(--bg-card);
  padding:.3rem .75rem;
  border-radius:var(--radius);
  font-family:'Consolas','Courier New',monospace;
  font-size:.85rem;
  color:var(--accent);
  border:1px solid var(--border);
}

/* Status Dot */
.status-dot{
  width:10px;height:10px;border-radius:50%;
  display:inline-block;
  background:var(--green);
  box-shadow:0 0 6px var(--green);
}
.status-dot--active{animation:pulse-dot 2s infinite}
.status-dot--alert{
  background:var(--red);
  box-shadow:0 0 10px var(--red);
  animation:pulse-dot-red .8s infinite;
}

@keyframes pulse-dot{
  0%,100%{opacity:1}
  50%{opacity:.4}
}
@keyframes pulse-dot-red{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.6;transform:scale(1.3)}
}

/* ---------- Dashboard Grid ---------- */
.dashboard{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:1rem;
  padding:1rem 1.5rem;
  height:calc(100vh - 56px);
  min-height:0;
}

.panel{display:flex;flex-direction:column;gap:1rem;min-height:0}

/* ---------- Video Container ---------- */
.video-container{
  position:relative;
  background:#000;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--border);
  aspect-ratio:16/9;
  flex-shrink:0;
}
.video-container video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

.video-label{
  position:absolute;top:.75rem;left:.75rem;
  display:flex;align-items:center;gap:.5rem;
  background:rgba(0,0,0,.7);
  padding:.3rem .75rem;
  border-radius:var(--radius);
  font-size:.75rem;
  font-family:monospace;
  z-index:10;
  color:var(--text-primary);
  backdrop-filter:blur(4px);
}
.rec-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--red);
  animation:pulse-dot-red 1s infinite;
}

/* Detection Overlay */
.detection-overlay{
  position:absolute;inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}
.detection-overlay.active{opacity:1}

.bounding-box{
  position:absolute;
  border:2px solid var(--red);
  border-radius:4px;
  box-shadow:0 0 12px rgba(239,68,68,.4);
  transition:all .4s ease;
  /* default position — JS overrides per scenario */
  top:20%;left:25%;width:50%;height:55%;
}
.bbox-label{
  position:absolute;
  top:-26px;left:0;
  background:var(--red);
  color:#fff;
  padding:2px 8px;
  font-size:.7rem;
  font-weight:700;
  border-radius:3px;
  white-space:nowrap;
  font-family:monospace;
}

/* Placeholder */
.video-placeholder{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.5rem;
  background:var(--bg-secondary);
  color:var(--text-muted);
  font-size:.95rem;
  z-index:5;
  transition:opacity .4s ease;
}
.video-placeholder.hidden{opacity:0;pointer-events:none}
.placeholder-icon{font-size:3rem;opacity:.3}

/* ---------- Scenario Bar ---------- */
.scenario-bar{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1rem;
}
.scenario-buttons{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-top:.75rem;
}
.btn-scenario{
  flex:1 1 140px;
  padding:.6rem .75rem;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-secondary);
  color:var(--text-primary);
  font-size:.8rem;
  font-weight:600;
  cursor:pointer;
  transition:all var(--transition);
  display:flex;align-items:center;gap:.4rem;
  justify-content:center;
}
.btn-scenario:hover{
  background:var(--bg-hover);
  border-color:var(--accent);
  transform:translateY(-1px);
}
.btn-scenario.active{
  background:var(--accent-dim);
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 0 12px rgba(56,189,248,.15);
}
.btn-icon{font-size:1rem}

/* ---------- Status Bars ---------- */
.status-bars{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1rem;
}
.status-row{
  display:grid;
  grid-template-columns:130px 1fr 60px;
  align-items:center;
  gap:.75rem;
  padding:.4rem 0;
}
.status-label{font-size:.75rem;color:var(--text-muted)}
.status-bar{
  height:6px;
  background:var(--bg-primary);
  border-radius:3px;
  overflow:hidden;
}
.status-bar__fill{
  height:100%;
  background:var(--accent);
  border-radius:3px;
  transition:width .6s ease;
}
.status-bar__fill--danger{background:var(--red)}
.status-value{
  font-size:.7rem;
  font-family:monospace;
  color:var(--text-muted);
  text-align:right;
}

/* ---------- Section Titles ---------- */
.section-title{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--text-muted);
  display:flex;align-items:center;gap:.5rem;
}

/* ---------- Alert Panel (Right) ---------- */
.alerts-panel{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1rem;
  flex:1;
  min-height:0;
  display:flex;flex-direction:column;
}
.alert-count{
  background:var(--bg-primary);
  color:var(--text-muted);
  padding:.15rem .5rem;
  border-radius:10px;
  font-size:.7rem;
  font-weight:700;
}
.alert-count.has-alerts{
  background:var(--red);
  color:#fff;
  animation:pulse-dot-red 1.5s infinite;
}

.alerts-list{
  flex:1;
  overflow-y:auto;
  margin-top:.75rem;
  display:flex;flex-direction:column;gap:.5rem;
}

.alerts-empty{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.5rem;
  padding:2rem;
  color:var(--text-muted);
  font-size:.85rem;
}
.alerts-empty.hidden{display:none}
.empty-icon{font-size:2rem;opacity:.3}

/* Alert Card */
.alert-card{
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:.75rem 1rem;
  border-left:3px solid var(--red);
  animation:slideIn .4s ease;
}
.alert-card--fire{border-left-color:var(--orange)}
.alert-card--gesture{border-left-color:var(--purple)}
.alert-card--no_movement{border-left-color:var(--orange)}

.alert-card__header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:.4rem;
}
.alert-card__type{
  font-size:.85rem;font-weight:700;
  display:flex;align-items:center;gap:.4rem;
}
.alert-card__type .dot{
  width:8px;height:8px;border-radius:50%;
  display:inline-block;
}
.dot--fall{background:var(--red)}
.dot--fire{background:var(--orange)}
.dot--gesture{background:var(--purple)}
.dot--no_movement{background:var(--orange)}

.alert-card__confidence{
  font-size:.7rem;
  font-family:monospace;
  padding:.15rem .5rem;
  border-radius:3px;
  background:var(--red-dim);
  color:var(--red);
}
.alert-card--fire .alert-card__confidence{background:var(--orange-dim);color:var(--orange)}
.alert-card--gesture .alert-card__confidence{background:rgba(167,139,250,.15);color:var(--purple)}
.alert-card--no_movement .alert-card__confidence{background:var(--orange-dim);color:var(--orange)}

.alert-card__body{font-size:.78rem;color:var(--text-muted);line-height:1.5}
.alert-card__body strong{color:var(--text-primary)}

@keyframes slideIn{
  from{opacity:0;transform:translateX(30px)}
  to{opacity:1;transform:translateX(0)}
}

/* ---------- System Log ---------- */
.system-log{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1rem;
  max-height:220px;
  display:flex;flex-direction:column;
}
.log-entries{
  flex:1;overflow-y:auto;
  margin-top:.75rem;
  font-family:'Consolas','Courier New',monospace;
  font-size:.72rem;
  line-height:1.7;
  color:var(--text-muted);
}
.log-entry{padding:.1rem 0}
.log-time{color:var(--accent)}
.log-warn{color:var(--orange)}
.log-error{color:var(--red)}
.log-ok{color:var(--green)}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#2d3a50}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .dashboard{grid-template-columns:1fr;height:auto}
  .header{flex-direction:column;gap:.5rem;text-align:center}
  .video-container{aspect-ratio:16/9}
}