/*
 * DOK-271 — shared scaffold for interior listing pages.
 * Canonical pattern (see Users): header + monochrome stat cards + Jira-style
 * multi-select filter bar + table (no cards). Colour is reserved for state.
 * Reused by every listing page so the layout stays consistent.
 */

.dok-list { margin-top: -1rem; padding-bottom: 2rem; }
.dok-list__head { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-bottom: 1rem; }
/* DOK-271: flatten the shared DokPageHeader "hero" (gradient box + accent line) so detail/settings
   pages match the flat listing header. App-level override — does not touch BuildingBlocks. */
.dok-page-header-wrapper .dok-page-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 1rem 0 !important;
}
.dok-page-header-wrapper .dok-page-header::before { display: none !important; }

/* Match DokPageHeader so listing and detail pages share one header look. */
.dok-list__title { color: var(--mud-palette-text-primary); font-weight: 800; letter-spacing: -0.035em; }
.dok-list__subtitle { max-width: 760px; margin-top: .2rem; color: var(--mud-palette-text-secondary); font-size: .95rem; line-height: 1.55; }
.dok-list__head-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

.dok-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.dok-stat { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: .85rem; padding: 1rem; border: 1px solid rgba(148, 163, 184, .2); border-radius: 10px; background: var(--mud-palette-surface); }
/* Monochrome stat icon — adapts to light/dark via text-primary; colour reserved for state. */
.dok-stat__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 8px; background: rgba(148, 163, 184, .16); color: var(--mud-palette-text-primary); }
.dok-stat__label { color: var(--mud-palette-text-secondary); font-size: .82rem; font-weight: 600; }
.dok-stat__value { margin-top: .15rem; color: var(--mud-palette-text-primary); font-size: 1.7rem; font-weight: 800; line-height: 1; }

.dok-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1rem; padding: .7rem .85rem; border: 1px solid rgba(148, 163, 184, .2); border-radius: 10px; background: var(--mud-palette-surface); }
.dok-filterbar__search { flex: 1 1 18rem; min-width: 14rem; }
.dok-filterbar__select { flex: 0 0 11rem; }
.dok-filterbar__daterange { flex: 0 1 22rem; min-width: 16rem; }
.dok-filterbar__actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

.dok-list__bulkbar { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; padding: .4rem .75rem; border: 1px solid rgba(var(--mud-palette-primary-rgb), .35); border-radius: 8px; background: rgba(var(--mud-palette-primary-rgb), .06); }

.dok-list-table { border: 1px solid rgba(148, 163, 184, .2); border-radius: 10px; }
.dok-list-table .mud-table-head th { color: var(--mud-palette-text-secondary); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }

/* Reusable table cell helpers. */
.dok-cell-user { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.dok-cell-user__avatar { background: rgba(148, 163, 184, .22); color: var(--mud-palette-text-primary); font-size: .72rem; font-weight: 700; }
.dok-cell-user__copy { display: flex; flex-direction: column; min-width: 0; }
.dok-cell-user__name { color: var(--mud-palette-text-primary); font-weight: 700; font-size: .9rem; }
.dok-cell-user__sub { color: var(--mud-palette-text-secondary); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dok-cell-primary { color: var(--mud-palette-text-primary); font-weight: 700; font-size: .9rem; }

/* Status pill — colour communicates state (ok / off / warn / error). */
.dok-status { padding: .2rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.dok-status--ok { color: var(--mud-palette-success); background: rgba(var(--mud-palette-success-rgb), .12); }
.dok-status--off { color: var(--mud-palette-text-secondary); background: rgba(148, 163, 184, .18); }
.dok-status--warn { color: var(--mud-palette-warning); background: rgba(var(--mud-palette-warning-rgb), .14); }
.dok-status--error { color: var(--mud-palette-error); background: rgba(var(--mud-palette-error-rgb), .12); }

.dok-rolechip { margin: 0 .2rem 0 0; }
.dok-muted { color: var(--mud-palette-text-secondary); font-size: .8rem; }
.dok-empty { display: grid; place-items: center; gap: .5rem; padding: 2.5rem 1rem; color: var(--mud-palette-text-secondary); }

@media (max-width: 960px) { .dok-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .dok-list__head { flex-direction: column; align-items: flex-start; } .dok-filterbar__select { flex: 1 1 100%; } }