/*
 * Project accreditations page (Manage/Door mode + Records/Approvals/Batch
 * tabs, drawer-per-record detail) — wider than the default reading-width
 * .account-layout, page-local so other pages are unaffected.
 */
.accreditation-layout {
  width: 100%;
  margin-inline: auto;
  padding: var(--wa-space-xl) var(--wa-space-l);
  box-sizing: border-box;
}

/* Manage/Door: the outer wa-tab-group restyled as a right-aligned pill
   segmented control instead of an underlined tab strip. ::part(tabs), not
   ::part(nav) — the nav-container part is a plain block, the flex row WA
   actually lays the tabs out in is the tabs part one level in. --track-width
   hides the default active-tab underline so the white-pill-plus-shadow on
   wa-tab[active] (WA reflects `active` to a real attribute) is the only
   "current mode" signal. */
.accreditation-mode-toggle {
  --track-width: 0px;
  font-size: var(--wa-font-size-s);
}

.accreditation-mode-toggle::part(nav) {
  display: flex;
  justify-content: flex-end;
}

.accreditation-mode-toggle::part(tabs) {
  flex: 0 0 auto;
  width: fit-content;
  gap: var(--wa-space-3xs);
  padding: var(--wa-space-3xs);
  background: var(--wa-color-neutral-fill-quiet);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
}

.accreditation-mode-toggle wa-tab::part(tab) {
  padding: var(--wa-space-2xs) var(--wa-space-s);
  border-radius: var(--wa-border-radius-s);
  color: var(--wa-color-text-quiet);
}

.accreditation-mode-toggle wa-tab[active]::part(tab) {
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  box-shadow: var(--wa-shadow-m);
}

.accreditation-filter-bar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--wa-space-xs);
  padding: var(--wa-space-s);
  background: var(--wa-color-neutral-fill-quiet);
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
}

.accreditation-filter-result-count {
  margin-inline-start: auto;
  white-space: nowrap;
}

.accreditation-table,
.accreditation-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(5.5rem, 7rem) minmax(0, 1fr) minmax(8rem, 11rem);
  gap: var(--wa-space-m);
  align-items: center;
}

.accreditation-table {
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  overflow: hidden;
  background: var(--wa-color-surface-default);
  grid-template-columns: none;
}

.accreditation-table-head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(5.5rem, 7rem) minmax(0, 1fr) minmax(8rem, 11rem);
  gap: var(--wa-space-m);
  padding: var(--wa-space-2xs) var(--wa-space-s);
  background: var(--wa-color-neutral-fill-quiet);
  border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.accreditation-row {
  padding: var(--wa-space-xs) var(--wa-space-s);
  border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

.accreditation-row-wrap:last-child .accreditation-row {
  border-block-end: none;
}

.accreditation-row-person {
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
  min-width: 0;
}

.accreditation-row-person-text {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-3xs);
  min-width: 0;
}

.accreditation-row-actions {
  justify-content: flex-end;
}

.accreditation-status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--wa-border-radius-pill);
  flex: 0 0 auto;
}

.accreditation-status-dot--success {
  background: var(--wa-color-success-fill-loud);
}

.accreditation-status-dot--warning {
  background: var(--wa-color-warning-fill-loud);
}

.accreditation-status-dot--danger {
  background: var(--wa-color-danger-fill-loud);
}

/* Door mode: one console-like card — header strip carries the big search
   input, rows below with the loud admit/refuse call on the right. */
.accreditation-door-panel {
  border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  overflow: hidden;
}

.accreditation-door-search {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  padding: var(--wa-space-m) var(--wa-space-l);
  background: var(--wa-color-neutral-fill-quiet);
  border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

.accreditation-door-search wa-input {
  flex: 1 1 auto;
  /* font-size: var(--wa-font-size-xl); */
}

.accreditation-door-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--wa-space-l);
  padding: var(--wa-space-m) var(--wa-space-l);
  border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

.accreditation-door-panel .accreditation-door-row:last-child {
  border-block-end: none;
}

.accreditation-door-empty {
  padding: var(--wa-space-l);
  margin: 0;
}

.accreditation-door-row-person {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-2xs);
  min-width: 0;
}

.accreditation-door-row-name {
  font-size: var(--wa-font-size-l);
  font-weight: var(--wa-font-weight-semibold);
}

.accreditation-door-row-status {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
}

.accreditation-approvals-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--wa-space-l);
  align-items: start;
}

@media (max-width: 900px) {
  .accreditation-approvals-layout {
    grid-template-columns: 1fr;
  }
}

.accreditation-approval-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-m);
  padding-block: var(--wa-space-xs);
  border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);

  &:last-child {
    border-block-end: none;
  }
}

.accreditation-outlet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wa-space-s);
  padding-block: var(--wa-space-xs);
  border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

.accreditation-outlet-row wa-input {
  width: 4.5rem;
  flex: 0 0 auto;
}

.accreditation-outlet-hint--reached {
  color: var(--wa-color-warning-on-quiet);
}

.accreditation-batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--wa-space-m);
}

/* Drawer detail sections (zones, handouts, exceptions) — same uppercase
   caption treatment as the records table head, so the drawer reads as
   labeled sections rather than an undifferentiated stack. */
.accreditation-drawer-section-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--wa-color-text-quiet);
}

@media (max-width: 768px) {
  .accreditation-table,
  .accreditation-table-head,
  .accreditation-row,
  .accreditation-door-row {
    grid-template-columns: 1fr;
  }

  .accreditation-filter-result-count {
    margin-inline-start: 0;
  }
}