/* Firewall modal – roosterbron tabs (CSS-only, geen JavaScript) */

.sysreq-firewall-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.625rem;
  padding: 0.4375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  text-align: left;
  color: rgb(75 85 99);
  background: transparent;
  border: 1px solid rgb(229 231 235);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sysreq-firewall-link:hover {
  background: rgb(249 250 251);
  border-color: rgb(209 213 219);
  color: rgb(55 65 81);
}

.sysreq-firewall-link:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(255 255 255), 0 0 0 3px rgb(156 163 175);
}

.dark .sysreq-firewall-link {
  color: rgb(156 163 175);
  background: transparent;
  border-color: rgb(75 85 99);
}

.dark .sysreq-firewall-link:hover {
  background: rgb(55 65 81 / 0.45);
  border-color: rgb(107 114 128);
  color: rgb(209 213 219);
}

.dark .sysreq-firewall-link:focus {
  box-shadow: 0 0 0 2px rgb(17 24 39), 0 0 0 3px rgb(107 114 128);
}

.sysreq-firewall-link__icon {
  flex-shrink: 0;
  width: 0.9375rem;
  height: 0.9375rem;
  opacity: 0.7;
}

.sysreq-firewall-link:hover .sysreq-firewall-link__icon {
  opacity: 0.85;
}

.sysreq-firewall-link__text {
  flex: 1;
  line-height: 1.35;
}

.sysreq-firewall-link__chevron {
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  opacity: 0.4;
}

.sysreq-firewall-link:hover .sysreq-firewall-link__chevron {
  opacity: 0.6;
}

.fw-rooster-tabs {
  --fw-tab-accent: rgb(37 99 235);
}

.fw-rooster-tabs input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fw-rooster-tab-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.fw-rooster-tab-labels label {
  cursor: pointer;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  border: 1px solid rgb(209 213 219);
  background: rgb(255 255 255);
  color: rgb(55 65 81);
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dark .fw-rooster-tab-labels label {
  border-color: rgb(75 85 99);
  background: rgb(55 65 81);
  color: rgb(229 231 235);
}

.fw-rooster-tab-labels label:hover {
  background: rgb(243 244 246);
}

.dark .fw-rooster-tab-labels label:hover {
  background: rgb(75 85 99);
}

#fw-rooster-zermelo:checked ~ .fw-rooster-tab-labels label[for="fw-rooster-zermelo"],
#fw-rooster-xedule:checked ~ .fw-rooster-tab-labels label[for="fw-rooster-xedule"],
#fw-rooster-somtoday:checked ~ .fw-rooster-tab-labels label[for="fw-rooster-somtoday"],
#fw-rooster-webuntis:checked ~ .fw-rooster-tab-labels label[for="fw-rooster-webuntis"] {
  background: var(--fw-tab-accent);
  border-color: var(--fw-tab-accent);
  color: rgb(255 255 255);
}

.dark #fw-rooster-zermelo:checked ~ .fw-rooster-tab-labels label[for="fw-rooster-zermelo"],
.dark #fw-rooster-xedule:checked ~ .fw-rooster-tab-labels label[for="fw-rooster-xedule"],
.dark #fw-rooster-somtoday:checked ~ .fw-rooster-tab-labels label[for="fw-rooster-somtoday"],
.dark #fw-rooster-webuntis:checked ~ .fw-rooster-tab-labels label[for="fw-rooster-webuntis"] {
  background: rgb(59 130 246);
  border-color: rgb(59 130 246);
  color: rgb(255 255 255);
}

.fw-rooster-panel {
  display: none;
}

#fw-rooster-zermelo:checked ~ .fw-rooster-panels .fw-rooster-panel--zermelo,
#fw-rooster-xedule:checked ~ .fw-rooster-panels .fw-rooster-panel--xedule,
#fw-rooster-somtoday:checked ~ .fw-rooster-panels .fw-rooster-panel--somtoday,
#fw-rooster-webuntis:checked ~ .fw-rooster-panels .fw-rooster-panel--webuntis {
  display: block;
}

.fw-rooster-note {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(75 85 99);
  margin-bottom: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: rgb(239 246 255);
  border: 1px solid rgb(191 219 254);
}

.fw-dev-notice {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgb(146 64 14);
  margin-bottom: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: rgb(255 251 235);
  border: 1px solid rgb(253 230 138);
}

.dark .fw-dev-notice {
  color: rgb(253 230 138);
  background: rgb(120 53 15 / 0.25);
  border-color: rgb(180 83 9 / 0.45);
}

.dark .fw-rooster-note {
  color: rgb(219 234 254);
  background: rgb(30 58 138 / 0.25);
  border-color: rgb(29 78 216 / 0.45);
}

.fw-rooster-note--muted {
  background: rgb(249 250 251);
  border-color: rgb(229 231 235);
  color: rgb(107 114 128);
}

.dark .fw-rooster-note--muted {
  background: rgb(55 65 81 / 0.5);
  border-color: rgb(75 85 99);
  color: rgb(156 163 175);
}

.fw-domain-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .fw-domain-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.fw-domain-card {
  padding: 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid rgb(229 231 235);
  background: rgb(255 255 255);
}

.dark .fw-domain-card {
  border-color: rgb(75 85 99);
  background: rgb(55 65 81);
}

.fw-domain-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.fw-domain-card-host {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.875rem;
  color: rgb(17 24 39);
}

.dark .fw-domain-card-host {
  color: rgb(255 255 255);
}

.fw-domain-card-desc {
  font-size: 0.75rem;
  color: rgb(75 85 99);
}

.dark .fw-domain-card-desc {
  color: rgb(209 213 219);
}

.fw-badge {
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}

.fw-badge--rooster {
  background: rgb(219 234 254);
  color: rgb(30 64 175);
}

.dark .fw-badge--rooster {
  background: rgb(30 64 175);
  color: rgb(219 234 254);
}

.fw-badge--edudisplay {
  background: rgb(219 234 254);
  color: rgb(30 64 175);
}

.dark .fw-badge--edudisplay {
  background: rgb(30 64 175);
  color: rgb(219 234 254);
}

.fw-badge--microsoft {
  background: rgb(219 234 254);
  color: rgb(30 64 175);
}

.dark .fw-badge--microsoft {
  background: rgb(30 64 175);
  color: rgb(219 234 254);
}

.fw-badge--cdn {
  background: rgb(219 234 254);
  color: rgb(30 64 175);
}

.dark .fw-badge--cdn {
  background: rgb(30 64 175);
  color: rgb(219 234 254);
}

.fw-badge--weer {
  background: rgb(219 234 254);
  color: rgb(30 64 175);
}

.dark .fw-badge--weer {
  background: rgb(30 64 175);
  color: rgb(219 234 254);
}