/* 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; }

/* 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; }