#accounts-view {
  max-width: 760px;
  margin: 0 auto;
  /* Room so the fixed save bar never overlaps the last row/form. */
  padding-bottom: 3.5rem;
}

/* ---- Save bar: edits to existing accounts/producties (admin toggle,
   wachtwoord, rollen, kleur, verwijderen) are staged locally and only sent
   to the server here - only the "toevoegen" forms save immediately, since
   clicking that button is already its own explicit commit. ---- */
.save-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
}

.save-bar[hidden] {
  display: none;
}

.save-bar-count {
  font-size: 0.85rem;
  opacity: 0.8;
}

.save-bar .error {
  margin: 0;
  flex: 1;
}

/* box-shadow on the <tr> itself instead of a cell renders inconsistently
   across browsers (tables/rows aren't a normal box in every engine) - scope
   it to the first cell instead, which paints reliably everywhere. */
.pending-change td:first-child {
  box-shadow: inset 3px 0 0 0 var(--accent);
}

.pending-delete td {
  opacity: 0.5;
  text-decoration: line-through;
}

.pending-delete .actions-cell {
  opacity: 1;
  text-decoration: none;
}

.pending-delete-label {
  font-size: 0.8rem;
  opacity: 0.8;
  font-style: italic;
}

#accounts-view header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.settings-section {
  margin-bottom: 2.5rem;
}

.settings-section h2 {
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}

.settings-section .hint {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: -0.3rem;
  margin-bottom: 0.75rem;
}

/* public/styles.css has several rules for "table"/"thead th"/"tbody td"
   that are unscoped - written only with #schedule (the tour table) in
   mind, but since they're not actually scoped to it, they leak onto any
   other <table> on a page that loads that stylesheet, including this one.
   Reset everything that doesn't make sense for a small settings table:
   fixed layout + a huge min-width (meant to fit 11+ schedule columns),
   sticky/pinned headers, and ellipsis-truncated cells. Matching or
   exceeding the specificity of each source rule (and this file loading
   after styles.css) is what makes these resets actually win. */
.settings-table {
  table-layout: auto;
  min-width: 0;
  width: 100%;
  /* separate + zero spacing (not collapse) - visually identical single-line
     row dividers, but collapse's shared-border algorithm has a known WebKit
     sub-pixel misalignment quirk around cells containing a <button> (the
     color-swatch-trigger here), producing a visible stepped/offset line
     right at that column - separate mode draws each cell's own border
     independently instead, avoiding that specific rendering path. */
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.settings-table thead th {
  position: static;
  height: auto;
}

.settings-table thead th,
.settings-table tbody td {
  padding: 0.4rem 0.5rem;
  font-size: 0.85rem;
  text-align: left;
}

.settings-table tbody td {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.settings-table th,
.settings-table td {
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.settings-table .actions-cell,
.settings-table td:last-child {
  white-space: nowrap;
}

/* Shrinks a column to fit its content (e.g. "Beheerder"/"Kleur", which
   would otherwise stretch to share the table's width:100% evenly with the
   long-text columns) - width:1% + nowrap is the standard auto-layout trick
   for this, since the browser gives shrunk columns just what they need and
   hands the rest to the other columns. */
.settings-table th.col-narrow,
.settings-table td.col-narrow {
  width: 1%;
  white-space: nowrap;
}

/* ---- Settings forms (account creation, production editor) ----
   A grid instead of the schedule's flex-wrap row: each field gets its own
   track and wraps predictably, and .full-width fields (checkboxes, color
   picker, role pools, the action buttons) span every track instead of
   fighting for space in a single cramped row. */
.settings-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
}

.settings-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.settings-form input[type="text"],
.settings-form input[type="password"],
.settings-form select {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  font-size: 0.9rem;
}

.settings-form .full-width {
  grid-column: 1 / -1;
}

.settings-form .form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.settings-form .form-actions button[type="submit"] {
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  cursor: pointer;
  font-size: 0.85rem;
}

.settings-form .form-actions .error {
  margin: 0;
}

.admin-checkbox-label {
  flex-direction: row !important;
  align-items: center;
  gap: 0.4em;
}

.admin-checkbox-label .hint {
  font-size: 0.75rem;
  opacity: 0.7;
}

/* ---- Producties: color picker, role pools ---- */

/* The clickable preview - click it to open the popover grid below.
   Per-row in the Producties table, sized down to fit the table's own
   compact row height - otherwise the swatch forces every row taller than
   its text content, throwing off the row dividers. */
.color-swatch-trigger {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

#productions-table .color-swatch-trigger {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 4px;
}

/* A curated palette instead of the OS's native color picker - that picker's
   own preset grid is out of our control (it's OS-rendered, not part of the
   page), and most of it isn't a good fit for this table's soft/pastel
   coloring anyway. Only the "geen" (default) + greyscale row and two rows
   of pastel hues stay - see pickUnusedColor()/renderColorSwatches() in
   accounts.js for how these are generated. Only shown on demand (clicking a
   .color-swatch-trigger), positioned next to whichever trigger was clicked. */
.color-swatch-popover {
  position: fixed;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.color-swatch-popover[hidden] {
  display: none;
}

.color-swatch-row {
  display: flex;
  gap: 0.3rem;
}

.color-swatch-btn {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
}

.color-swatch-btn.selected {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.color-swatch-clear {
  background: var(--bg);
  color: var(--fg);
}

.color-swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  vertical-align: middle;
}

/* Next to a username in the collapsed accounts row - wraps instead of
   forcing the row wider, since a person can be in many productions and
   this column has no fixed width to shrink into on a narrow phone. */
.account-productions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

@media (max-width: 480px) {
  .account-production-swatch {
    width: 0.6rem;
  }
}

/* ---- Producties table: expand-to-assign-roles row ---- */
/* (.expand-toggle/.expand-arrow are shared markup - no accounts-table user
   left after roles moved here, but the names are generic enough to reuse.) */

.production-row {
  cursor: pointer;
}

.expand-toggle {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
}

.expand-arrow {
  display: inline-block;
  font-size: 1rem;
  opacity: 0.85;
}

/* .detail-row itself (hidden/open, background, padding) is already handled
   by the shared tr.detail-row rule in public/styles.css, reused as-is here. */
.production-roles-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 480px;
}

.production-role-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.production-role-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Pushed to the row's right edge regardless of how narrow the name/dropdown
   combo is, instead of sitting flush against the dropdown. */
.production-role-remove-btn {
  margin-left: auto;
}

/* Looks like plain text until hovered/focused (border-color: transparent
   by default) - a visible border only appears once it's clear you're
   about to edit it, matching this app's general "not a grey placeholder,
   a real editable field" inline-editing convention. Blur-to-save (see
   accounts.js's renameRoleSlot/the focusout listener), same pattern as
   admin.js's schedule-table cells. */
.production-role-name-input {
  min-width: 5rem;
  max-width: 8rem;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.3rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: inherit;
  font-family: inherit;
}

.production-role-name-input:hover,
.production-role-name-input:focus {
  border-color: var(--border);
  background: var(--bg);
}

.production-add-role-btn {
  align-self: flex-start;
  margin-top: 0.2rem;
}

/* One dropdown per role - same look/behavior as the persoon/productie
   filter menus and the schedule table's "Zichtbaar voor" picker
   (admin.css's .visibility-select*), just plain position:absolute instead
   of that one's position:fixed-plus-portal-to-body - this page has no
   overflow/stacking container to escape, so anchoring directly to the
   trigger is enough (see accounts.js's own comment on this). */
.production-role-select {
  position: relative;
}

.production-role-select-trigger {
  width: max-content;
  max-width: 100%;
  text-align: left;
  font-size: 0.85rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: inherit;
  cursor: pointer;
}

/* position:fixed, not absolute - top/left (or bottom, when flipped above
   the trigger) are set in JS from the trigger's own getBoundingClientRect,
   see openRoleSelect() in accounts.js. Needed so it can flip to open
   upward near the bottom of the screen instead of running off it - a
   plain CSS "top: 100%" has no way to know how close to the viewport edge
   its trigger is. z-index above .save-bar's 30 so it's never obscured by
   it when opening near the bottom (exactly where that overlap is likeliest
   to happen, being the whole reason this needs to flip at all). */
.production-role-select-list {
  position: fixed;
  z-index: 35;
  width: max-content;
  max-height: min(20rem, 60vh);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.production-role-select-option {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.production-role-select-option:hover,
.production-role-select-option.selected {
  background: var(--row-hover, rgba(0, 0, 0, 0.05));
}

.production-role-select-check {
  width: 1em;
  flex: 0 0 auto;
  text-align: center;
}

/* .icon-btn/.icon-btn-danger moved to the shared public/styles.css so
   every page can use them, not just this one. */

/* ---- Inline password editor (Accounts table Acties column) ---- */

.actions-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.actions-cell select {
  font-size: 0.85rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
}

.actions-cell .password-input {
  font-size: 0.85rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg);
  width: 10em;
}

.actions-cell .password-error {
  margin: 0;
  flex-basis: 100%;
  font-size: 0.75rem;
}