:root {
  --tt-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tt-radius: 18px;
  --tt-radius-sm: 12px;
  --tt-shadow: 0 18px 50px rgba(15, 23, 42, .12);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; font-family: var(--tt-font); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Shared Teacher Tools header navigation */
.header-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid #dfe5ef;
  border-radius: 12px;
  background: rgba(255,255,255,.94);
  color: #172033;
  font-size: .78rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.header-nav-link:hover {
  border-color: #5b4bdb;
  color: #4435bf;
}

/* A light active tab in dark mode must retain dark label text. */
html[data-theme="dark"] .workspace-tab.active {
  color: #172033 !important;
}
html[data-theme="dark"] .header-nav-link {
  border-color: #34405a;
  background: #1a2233;
  color: #eef1f7;
}
html[data-theme="dark"] .header-nav-link:hover {
  border-color: #8d7cff;
  color: #ffffff;
}

/* Seating Plan: simple three-row Step 2 toolbar. */
#planPanel .toolbars {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 5px 12px !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: var(--panel-soft) !important;
  overflow: hidden !important;
}

#planPanel .toolbar-group {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 7px 0 !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  align-items: center !important;
  align-content: center !important;
}

#planPanel .toolbar-group + .toolbar-group {
  border-top: 1px solid var(--line) !important;
}

#planPanel .toolbar-group .toolbar-label,
#planPanel .toolbar-group .inline-number,
#planPanel .toolbar-group .times-mark,
#planPanel .toolbar-group select,
#planPanel .toolbar-group input[type="number"],
#planPanel .toolbar-group .soft-button,
#planPanel .toolbar-group .primary-button {
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif !important;
}

#planPanel .toolbar-group .toolbar-label {
  grid-column: auto !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: .78rem !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#planPanel .toolbar-group .inline-number,
#planPanel .toolbar-group .times-mark {
  color: var(--muted) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#planPanel .toolbar-group select,
#planPanel .toolbar-group input[type="number"],
#planPanel .toolbar-group .soft-button,
#planPanel .toolbar-group .primary-button {
  min-height: 36px !important;
  height: 36px !important;
  min-width: 0 !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  border-radius: 10px !important;
}

#planPanel .toolbar-group select {
  width: 100% !important;
  padding: 0 30px 0 10px !important;
}

/* Keep native number spinners, but reserve enough room for two-digit values in every browser. */
#planPanel input[type="number"] {
  width: 66px !important;
  min-width: 66px !important;
  padding: 0 22px 0 10px !important;
  text-align: left !important;
  font-variant-numeric: tabular-nums;
}

#planPanel .inline-number {
  grid-template-columns: auto 66px !important;
}

/* Row 1: arrangement */
#planPanel .arrange-group {
  display: grid !important;
  grid-template-columns: 112px minmax(150px, 1fr) auto auto !important;
}

#planPanel .arrange-group .inline-number {
  display: grid !important;
  grid-template-columns: auto 66px !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

#planPanel .arrange-group .inline-number input {
  width: 66px !important;
  min-width: 66px !important;
}

#planPanel .arrange-group .primary-button {
  padding: 0 14px !important;
  white-space: nowrap !important;
}

/* Row 2: student grid */
#planPanel .grid-size-group {
  display: grid !important;
  grid-template-columns: 112px auto auto auto auto !important;
  justify-content: start !important;
}

#planPanel .grid-size-group .inline-number {
  display: grid !important;
  grid-template-columns: auto 66px !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}

#planPanel .grid-size-group .inline-number input {
  width: 66px !important;
  min-width: 66px !important;
}

#planPanel .grid-size-group .times-mark {
  padding: 0 2px !important;
  align-self: center !important;
}

#planPanel .grid-size-group .soft-button {
  padding: 0 12px !important;
  white-space: nowrap !important;
}

/* Row 3: colours */
#planPanel .colour-group {
  display: grid !important;
  grid-template-columns: 112px minmax(180px, 1fr) 38px auto !important;
}

#planPanel .colour-group .colour-input {
  width: 38px !important;
  height: 36px !important;
  min-width: 38px !important;
  border-radius: 9px !important;
}

#planPanel .colour-group .soft-button {
  padding: 0 13px !important;
  white-space: nowrap !important;
}

/* Room items should never force the page wider. */
#planPanel .room-tools {
  min-width: 0 !important;
  margin-top: 8px !important;
  padding: 8px 10px !important;
}

#planPanel .room-tool-copy strong,
#planPanel .room-tool-copy span,
#planPanel .room-tool-buttons button {
  font-family: "Nunito", ui-sans-serif, system-ui, sans-serif !important;
}

#planPanel .room-tool-copy strong {
  font-size: .82rem !important;
  font-weight: 900 !important;
}

#planPanel .room-tool-copy span {
  font-size: .72rem !important;
}

#planPanel .room-tool-buttons {
  min-width: 0 !important;
  flex-wrap: wrap !important;
}

#planPanel .room-tool-buttons button {
  min-height: 34px !important;
  font-size: .74rem !important;
}

/* On narrower screens each toolbar row becomes a tidy two-line block. */
@media (max-width: 760px) {
  #planPanel .toolbars {
    padding: 5px 9px !important;
  }

  #planPanel .arrange-group,
  #planPanel .grid-size-group,
  #planPanel .colour-group {
    grid-template-columns: 1fr auto !important;
    gap: 7px !important;
  }

  #planPanel .toolbar-group .toolbar-label {
    grid-column: 1 / -1 !important;
  }

  #planPanel .arrange-group select,
  #planPanel .colour-group select {
    grid-column: 1 !important;
  }

  #planPanel .arrange-group .inline-number {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  #planPanel .arrange-group .primary-button {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #planPanel .grid-size-group {
    grid-template-columns: auto auto auto auto !important;
  }

  #planPanel .grid-size-group .toolbar-label {
    grid-column: 1 / -1 !important;
  }

  #planPanel .colour-group {
    grid-template-columns: minmax(0,1fr) 38px auto !important;
  }

  #planPanel .colour-group .toolbar-label {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 520px) {
  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .header-nav-link {
    order: 2;
  }

  #planPanel .arrange-group {
    grid-template-columns: 1fr auto !important;
  }

  #planPanel .arrange-group .inline-number {
    grid-column: 1 / -1 !important;
  }

  #planPanel .arrange-group .primary-button {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  #planPanel .grid-size-group {
    grid-template-columns: 1fr auto 1fr !important;
  }

  #planPanel .grid-size-group .soft-button {
    grid-column: 1 / -1 !important;
  }

  #planPanel .colour-group {
    grid-template-columns: minmax(0,1fr) 38px auto !important;
  }
}

@media (max-width: 700px) {
  .header-nav-link {
    min-height: 38px;
    padding: 0 9px;
    font-size: .69rem;
  }
}