@tailwind base;
@tailwind components;
@tailwind utilities;

/* ====== POLISH PACK (drop-in) ========================================== */

/* Subtle app background movement */
body::before,
body::after{
  content:"";
  position:fixed; inset:auto;
  width:34rem; height:34rem; filter:blur(70px);
  pointer-events:none; z-index:-1; opacity:.18;
  border-radius:9999px;
}
body::before{ left:-12rem; top:-10rem; background:radial-gradient(ellipse at center,#10b98155 0%,#10b98100 60%);}
body::after{ right:-14rem; bottom:-12rem; background:radial-gradient(ellipse at center,#06b6d455 0%,#06b6d400 60%);}

/* ---------- Header chips & status row ---------- */
.header-chip{
  --bg: rgba(255,255,255,.06);
  --bd: rgba(255,255,255,.14);
  --fg: #e5e7eb;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:.65rem;
  border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-weight:700; font-size:.72rem; letter-spacing:.02em;
  box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
  transition:filter .18s ease, transform .18s ease, border-color .18s ease;
}
.header-chip svg{ width:.9rem; height:.9rem; opacity:.9 }
.header-chip:hover{ filter:brightness(1.06); border-color:#34d39955 }

/* Variants */
.header-chip--online{ --bg:rgba(16,185,129,.15); --bd:rgba(16,185,129,.35); --fg:#a7f3d0 }
.header-chip--backup{ --bg:rgba(245,158,11,.12); --bd:rgba(245,158,11,.35); --fg:#fde68a }
.header-chip--warn{   --bg:rgba(244,63,94,.12);  --bd:rgba(244,63,94,.4);  --fg:#fecaca }

/* ---------- Chamber cards ---------- */
.chamber-card{
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(2,6,23,.45),rgba(2,6,23,.35));
  border-radius:14px; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  display:flex; flex-direction:column; min-height: 225px;
}
.chamber-card:hover{
  border-color:#34d39966;
  box-shadow:0 6px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(16,185,129,.15) inset;
  transform:translateY(-1px);
}

/* keep all 9 chambers equal height inside the grid */
#chambersGrid{ align-content:start }
#chambersGrid > * { min-height: 0 } /* fix Firefox grid stretching */

/* Chamber title bar */
.chamber-card .title-bar{
  display:flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.35rem .5rem; margin:-.25rem -.25rem .4rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.chamber-card .title-chip{
  font-weight:800; font-size:.78rem; letter-spacing:.02em;
  background:rgba(20,83,45,.35); color:#bbf7d0;
  padding:.25rem .55rem; border-radius:.5rem; border:1px solid rgba(16,185,129,.35);
  box-shadow:0 0 0 1px rgba(16,185,129,.12) inset;
}

/* BAT ID emphasis row */
.bat-id-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.4rem .55rem; border-radius:.55rem;
  border:1px dashed rgba(255,255,255,.14);
  background:rgba(2,6,23,.35);
}
.bat-id-row .label{ color:#93a3af; font-size:.7rem; font-weight:700; letter-spacing:.03em }
.bat-id-row .value{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight:800; font-size:.9rem; letter-spacing:.06em;
  color:#e5fff4; text-shadow:0 0 12px rgba(16,185,129,.25);
}

/* Two-column “key: value” rows inside a chamber */
.kv{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem }
.kv .k{ color:#9ca3af; font-size:.72rem; }
.kv .v{ color:#e5e7eb; font-weight:700; font-size:.85rem }

/* Pills (battery / charger status) */
.pill{ padding:.28rem .5rem; border-radius:.5rem; border:1px solid; font-weight:800; font-size:.7rem; letter-spacing:.02em }
.pill--ok{    background:rgba(16,185,129,.15); color:#a7f3d0; border-color:rgba(16,185,129,.35) }
.pill--idle{  background:rgba(148,163,184,.12); color:#cbd5e1; border-color:rgba(148,163,184,.35) }
.pill--bad{   background:rgba(244,63,94,.16);  color:#fecaca; border-color:rgba(244,63,94,.38) }
.pill--sky{   background:rgba(56,189,248,.15); color:#bae6fd; border-color:rgba(56,189,248,.38) }

/* Door chip */
.door-chip{ color:#fff; font-weight:800; font-size:.72rem; padding:.22rem .55rem; border-radius:.45rem }
.door-chip--open{ background:#22c55e }
.door-chip--closed{ background:#ef4444 }

/* Action buttons inside card */
.card-actions .btn{
  font-size:.72rem; font-weight:800; padding:.45rem .55rem; border-radius:.6rem;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06);
}
.card-actions .btn:hover{ border-color:#34d39966; box-shadow:0 0 0 1px rgba(52,211,153,.2) inset }

/* ---------- Right column (panels) ---------- */
.panel{
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(2,6,23,.45),rgba(2,6,23,.35));
  border-radius:14px;
}
.panel h3{ font-weight:800; letter-spacing:.02em }

/* Station reset emphasis */
#station-reset-btn{
  border:1px solid rgba(244,63,94,.45)!important; color:#fecaca!important; background:rgba(244,63,94,.08)!important;
}
#station-reset-btn:hover{ background:rgba(244,63,94,.18)!important; box-shadow:0 0 0 2px rgba(244,63,94,.25) inset }

/* Instance log terminal feel */
.instance-log{
  background:#020617; color:#d1fae5; border:1px solid rgba(16,185,129,.15);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.78rem; line-height:1.35; border-radius:.6rem; padding:.75rem;
  box-shadow:inset 0 1px 0 rgba(16,185,129,.06);
}

/* Nice thin scrollbars (Chrome/Edge) */
*::-webkit-scrollbar{ height:10px; width:10px }
*::-webkit-scrollbar-thumb{ background:linear-gradient(#1f2937,#111827); border:2px solid #0b1220; border-radius:12px }
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(#243041,#131a2a) }

/* Motion-reduction respect */
@media (prefers-reduced-motion: reduce){
  .header-chip, .chamber-card{ transition:none }
}