/* genver-studio mockup — component utilities layered on top of Tailwind CDN */

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(71 85 105);
  transition: background-color .15s, color .15s;
}
.dark .nav-item { color: rgb(148 163 184); }
.nav-item:hover { background: rgb(241 245 249); color: rgb(15 23 42); }
.dark .nav-item:hover { background: rgb(30 41 59); color: rgb(255 255 255); }
.nav-item svg { width: 18px; height: 18px; flex: none; }
.nav-item.active {
  background: rgb(237 233 254);
  color: rgb(109 40 217);
  font-weight: 600;
}
.dark .nav-item.active {
  background: rgba(124, 58, 237, .15);
  color: rgb(196 181 253);
}
.nav-badge {
  margin-left: auto;
  font-size: 11px;
  background: rgb(226 232 240);
  color: rgb(71 85 105);
  border-radius: 999px;
  padding: 1px 8px;
}
.dark .nav-badge { background: rgb(51 65 85); color: rgb(203 213 225); }
.nav-item.active .nav-badge { background: rgb(196 181 253); color: rgb(76 29 149); }

.card {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  padding: 1.25rem;
}
.dark .card { background: rgb(15 23 42); border-color: rgb(30 41 59); }

.stat-card {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
}
.dark .stat-card { background: rgb(15 23 42); border-color: rgb(30 41 59); }
.stat-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: .7rem; }
.stat-icon svg { width: 20px; height: 20px; }

.form-label { display:block; font-size: 13px; font-weight: 600; color: rgb(51 65 85); margin-bottom: .4rem; }
.dark .form-label { color: rgb(203 213 225); }
.form-input {
  width: 100%;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  border-radius: .6rem;
  padding: .55rem .75rem;
  font-size: 14px;
  color: rgb(30 41 59);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus { border-color: rgb(139 92 246); box-shadow: 0 0 0 3px rgba(139,92,246,.15); }
.dark .form-input { background: rgb(2 6 23); border-color: rgb(51 65 85); color: rgb(226 232 240); }

.filter-tab { font-size: 13px; font-weight: 600; color: rgb(100 116 139); padding: .4rem .8rem; border-radius: .5rem; transition: all .15s; }
.filter-tab:hover { color: rgb(30 41 59); }
.dark .filter-tab { color: rgb(148 163 184); }
.filter-active { background: rgb(237 233 254); color: rgb(109 40 217) !important; }
.dark .filter-active { background: rgba(124,58,237,.18); color: rgb(196 181 253) !important; }

.badge-n, .badge-x {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 9px;
}
.badge-n { background: rgb(224 242 254); color: rgb(2 132 199); }
.dark .badge-n { background: rgba(56,189,248,.15); color: rgb(125 211 252); }
.badge-x { background: rgb(237 233 254); color: rgb(109 40 217); }
.dark .badge-x { background: rgba(124,58,237,.18); color: rgb(196 181 253); }

.mode-card {
  display: flex; align-items: center; gap: .75rem;
  flex: 1; min-width: 150px;
  border: 1px solid rgb(226 232 240);
  background: #fff; border-radius: .9rem; padding: .9rem 1rem; text-align: left;
  transition: all .15s;
}
.dark .mode-card { background: rgb(15 23 42); border-color: rgb(30 41 59); }
.mode-card:hover { border-color: rgb(196 181 253); }
.mode-card svg { width: 22px; height: 22px; color: rgb(100 116 139); flex: none; }
.mode-desc { font-size: 12px; color: rgb(148 163 184); }
.mode-active { border-color: rgb(139 92 246); background: rgb(245 243 255); }
.dark .mode-active { background: rgba(124,58,237,.1); border-color: rgb(124 58 237); }
.mode-active svg { color: rgb(124 58 237); }
.dark .mode-active svg { color: rgb(167 139 250); }

.status-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }

/* ===== 신호등(Readiness traffic-light) ===== */
.light { width: 9px; height: 9px; border-radius: 999px; display: inline-block; flex: none; }
.light-green  { background: rgb(16 185 129); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.light-amber  { background: rgb(245 158 11); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.light-red    { background: rgb(244 63 94);  box-shadow: 0 0 0 3px rgba(244,63,94,.18); }
.light-off    { background: rgb(203 213 225); }
.dark .light-off { background: rgb(51 65 85); }

/* pulsing for live/attention */
.light-pulse { animation: lightpulse 1.6s ease-in-out infinite; }
@keyframes lightpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* overall verdict pill */
.verdict { display:inline-flex; align-items:center; gap:.4rem; font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px; }
.verdict-go   { background: rgb(209 250 229); color: rgb(4 120 87); }
.dark .verdict-go   { background: rgba(16,185,129,.15); color: rgb(110 231 183); }
.verdict-hold { background: rgb(254 243 199); color: rgb(180 83 9); }
.dark .verdict-hold { background: rgba(245,158,11,.15); color: rgb(252 211 77); }
.verdict-block{ background: rgb(255 228 230); color: rgb(190 18 60); }
.dark .verdict-block{ background: rgba(244,63,94,.15); color: rgb(253 164 175); }

/* readiness check row */
.check-row { display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:.6rem; }
.check-row:hover { background: rgb(248 250 252); }
.dark .check-row:hover { background: rgba(30,41,59,.5); }

/* disabled dispatch button */
.btn-blocked { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }

.gate-mini { display:inline-flex; align-items:center; gap:3px; }
.gate-mini .light { width: 7px; height: 7px; box-shadow: none; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgb(203 213 225); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.dark ::-webkit-scrollbar-thumb { background: rgb(51 65 85); background-clip: content-box; }