/* forms.css */
label { display: flex; flex-direction: column; font-size: .9rem; gap: .4rem; }
input[type="text"],
input[type="password"],
input[type="number"],
select, textarea {
  display: block; width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: #8b93a1; }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
}
.controls, .edit-box { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1.5rem; }
button, .button {
  padding: .55rem 1rem; border-radius: 10px; border: 1px solid var(--border);
  background: #00000007; cursor: pointer; color: var(--text);
}
button:hover, .button:hover { background: #00000015; }

/* Accent color – match your top menu buttons */
:root {
  --accent-color: #09a9ff; /* tweak this to exactly match your menu blue */
}

#tbl th:first-child,
#tbl td[data-col="vis"] {
  text-align: center;
}

/* Pretty checkbox that looks like a small radio-dot toggle */
.series-toggle {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 999px; /* circle */
  border: 2px solid var(--accent-color);
  background: #15181c;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.08s ease;
  box-shadow: 0 0 0 0 rgba(9,169,255,0); /* animated halo */
}

.series-toggle::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: transparent;
  transition: background-color 0.15s ease, transform 0.08s ease;
}

.series-toggle:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(9,169,255,0.25);
}

.series-toggle:checked {
  background: var(--accent-color);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(9,169,255,0.35);
}

.series-toggle:checked::before {
  background: #fff;
  transform: scale(0.9);
}

/* Keyboard focus ring */
.series-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.6);
}

/* Mobile media queries for forms */
@media (max-width: 767px) {
  .controls, .edit-box {
    flex-direction: column;
    gap: 1rem;
  }
  
  label {
    width: 100%;
  }
  
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  select, textarea {
    font-size: 16px; /* prevent mobile zoom on focus */
  }
}