/* Components (B6, RD-1a): reusable classes with paya's computed styles. Shown together on /ui/.
   Names are ours (paya's hashed classes are never copied). Colours only from tokens.css. */

/* ---------- card ---------- */
.card { background: var(--surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); padding: var(--s4); }
.card-flat { background: var(--surface); border-radius: var(--radius-card); padding: var(--s4); }
.card-muted { background: var(--surface-muted); border: 1px solid var(--border-hairline); border-radius: var(--radius-input); padding: var(--s3); }
.card-dashed { border: 1px dashed var(--border-hairline-strong); border-radius: var(--radius-input); padding: var(--s4); }
.card-title { font-size: var(--fs-md); font-weight: 800; line-height: 28px; color: var(--text-strong); margin: 0; }
.stack { display: flex; flex-direction: column; gap: var(--s4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--s3); }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.spacer { flex: 1; }
.divider { display: flex; border-top: 1px solid var(--separator); margin: var(--s5) 0; }

/* ---------- page head: title + subtitle + «به‌روزرسانی» ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.page-head h1, .page-title { font-size: var(--fs-lg); font-weight: 700; line-height: 28px; color: var(--text-head); margin: 0; }
.page-head .title-row, .title-row { display: flex; align-items: center; gap: var(--s2) var(--s4); flex-wrap: wrap; }
.page-sub { color: var(--text-muted); font-size: var(--fs); margin: 0; }
.updated { color: var(--text-subtle); font-size: var(--fs); margin: 0; }
/* a page's own head right under <main> = paya's page bar card (lists, panels' outer pages, files, errors) */
.container > .page-head { padding: var(--s4); background: var(--surface); border-radius: var(--radius-icon); margin-top: var(--s1); }
.container > .page-head h1 { font-size: var(--fs-md); font-weight: 800; line-height: 24px; color: var(--text-strong); }
.container > .page-head h1 .muted { font-size: var(--fs); font-weight: 400; }
.page-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s4); background: var(--surface); border-radius: var(--radius-icon); margin-top: var(--s1); }
.page-bar h1, .page-bar h2 { font-size: var(--fs); font-weight: 700; line-height: 22px; color: var(--text-body); margin: 0; }
.page-bar .title-row { gap: var(--s2); }
.page-body { background: var(--surface); border-radius: var(--radius-card); padding: var(--s5); }
.page-panel { background: var(--surface); border-radius: var(--radius-card); padding: var(--s4); }
.toolbar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* ---------- breadcrumb («←») ---------- */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s1) var(--s2); font-size: var(--fs-xs); line-height: 16px; color: var(--text-subtle); margin-bottom: var(--s1); }
.crumbs a { color: var(--text-muted); }
.crumbs a:hover { color: var(--text-strong); text-decoration: none; }

/* ---------- buttons (32px, radius 10, padding 0 15) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--control-h); padding: 0 15px;
  border: 1px solid transparent; border-radius: var(--radius-button); background: var(--primary); color: var(--on-primary);
  font-size: var(--fs); font-weight: 400; line-height: 22px; white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 0 var(--primary-shadow); transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.btn:hover { background: var(--primary-hover); text-decoration: none; }
.btn .ico { width: 16px; height: 16px; }
.btn.ghost, .btn.secondary, .btn.outline { background: var(--surface); border-color: var(--border-input); color: var(--text-body); box-shadow: 0 2px 0 var(--outline-shadow); }
.btn.ghost:hover, .btn.secondary:hover, .btn.outline:hover { border-color: var(--primary-hover); color: var(--primary-hover); background: var(--surface); }
.btn.dashed { background: var(--surface); border: 1px dashed var(--border-input); color: var(--text-body); font-weight: 600; box-shadow: 0 2px 0 var(--outline-shadow); }
.btn.dashed:hover { border-color: var(--primary-hover); color: var(--primary-hover); }
.btn.text { background: transparent; border-color: transparent; color: var(--text-body); box-shadow: none; }
.btn.text:hover { background: var(--surface-hover); }
.btn.link { background: transparent; border-color: transparent; color: var(--link); box-shadow: none; }
.btn.link:hover { background: transparent; opacity: .85; }
.btn.danger { background: var(--surface); border-color: var(--danger); color: var(--danger); box-shadow: none; }
.btn.danger:hover { background: var(--danger-tint); }
.btn.dark, .btn.inverse { background: var(--inverse); color: var(--text-on-inverse); border-color: transparent; border-radius: var(--radius-pill); padding: 0 var(--s4); font-weight: 700; box-shadow: 0 2px 0 var(--primary-shadow); }
.btn.dark:hover, .btn.inverse:hover { background: var(--inverse); opacity: .9; }
.btn.pill { border-radius: var(--radius-pill); }
.btn.icon { width: var(--control-h); padding: 0; }
.btn.icon .ico { width: 20px; height: 20px; }
.btn.small { height: 24px; padding: 0 7px; border-radius: 6px; font-size: var(--fs); }
.btn.large { height: 40px; padding: 0 15px; font-size: var(--fs-md); }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--select-bg); border-color: var(--border-input); color: var(--text-subtle); box-shadow: none; cursor: not-allowed; }
.btn .spin { display: none; width: 16px; height: 16px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: rot .7s linear infinite; }
.btn.loading .spin { display: inline-block; }
.btn.loading .ico { display: none; }
@keyframes rot { to { transform: rotate(360deg); } }
.icon-btn { position: relative; width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--text-body); cursor: pointer; text-decoration: none; transition: background var(--dur); }
.icon-btn:hover { background: var(--surface-hover); text-decoration: none; }
.icon-btn .ico { width: 16px; height: 16px; }
.icon-btn.accent { color: var(--accent); border-radius: var(--radius-button); }
.icon-btn.accent .ico { width: 24px; height: 24px; }
.icon-btn.square { border-radius: var(--radius-button); }
.icon-btn.square .ico { width: 20px; height: 20px; }
.icon-btn.danger { color: var(--danger-icon); }
.back-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--radius-button); border: 1px solid var(--border-input); background: var(--surface); color: var(--text-body); box-shadow: 0 2px 0 var(--outline-shadow); }
.back-btn .ico { width: 24px; height: 24px; }
.back-btn:hover { border-color: var(--primary-hover); color: var(--primary-hover); text-decoration: none; }
.linkbtn { background: none; border: 0; cursor: pointer; padding: 0; color: var(--link); }
.linkbtn:hover { text-decoration: underline; }
.hero-btn { display: inline-block; padding: 7px 18px; border-radius: var(--radius-pill); background: #ffffff; color: var(--hero-ink); font-size: 13px; font-weight: 800; line-height: 20px; text-decoration: none; border: 0; cursor: pointer; }
.hero-btn:hover { text-decoration: none; opacity: .92; }

/* ---------- chips / pill tabs (active = inverse) ---------- */
.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.pill-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill); background: var(--surface); color: var(--text-body); font-size: var(--fs-xs); font-weight: 700;
  line-height: 16px; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.pill-chip:hover { text-decoration: none; border-color: var(--border-hairline-strong); }
.pill-chip[aria-pressed="true"], .pill-chip[aria-current="page"], .pill-chip.on { background: var(--inverse); color: var(--text-on-inverse); border-color: transparent; }
.pill-chip .dot, .dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--g, currentColor); flex: none; }
.meta-chip { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border: 1px solid var(--border-hairline); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-muted); font-size: var(--fs-xs); line-height: 16px; white-space: nowrap; }
.meta-chip .ico { width: 14px; height: 14px; }
.pill-tabs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.pill-tabs a, .pill-tabs button { display: inline-flex; align-items: center; height: var(--control-h); padding: 0 var(--s4); border-radius: var(--radius-pill); border: 1px solid var(--border-hairline); background: var(--surface); color: var(--text-body); font-weight: 700; cursor: pointer; text-decoration: none; }
.pill-tabs [aria-current="page"], .pill-tabs [aria-selected="true"] { background: var(--inverse); color: var(--text-on-inverse); border-color: transparent; }
/* form choice chips (radio / checkbox lists rendered as pills) */
.chip { position: relative; display: inline-flex; align-items: center; gap: var(--s2); height: var(--control-h); padding: 0 var(--s4); border: 1px solid var(--border-input); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-body); cursor: pointer; margin: 0; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip:has(input:checked) { background: var(--inverse); border-color: transparent; color: var(--text-on-inverse); }
.chip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- segmented (paya radio group: track + thumb) ---------- */
.segmented { display: inline-flex; padding: 2px; border-radius: var(--radius-button); background: var(--segment-track); }
.segmented > a, .segmented > button, .segmented > label { display: flex; align-items: center; justify-content: center; height: 28px; padding: 0 11px; border: 0; border-radius: var(--radius-button); background: transparent; color: var(--text-body); line-height: 28px; white-space: nowrap; cursor: pointer; text-decoration: none; position: relative; }
.segmented > :hover { color: var(--text-strong); text-decoration: none; }
.segmented > [aria-current="page"], .segmented > [aria-checked="true"], .segmented > [aria-pressed="true"], .segmented > label:has(input:checked) { background: var(--segment-thumb); color: var(--text-strong); box-shadow: var(--shadow-soft); }
.segmented > label input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented.round { border-radius: var(--radius-pill); }
.segmented.round > * { border-radius: var(--radius-pill); }
.segmented.block { display: flex; }
.segmented.block > * { flex: 1; }

/* ---------- inputs / select / date / search ---------- */
.input, .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea,
.filters-body input:not([type=checkbox]):not([type=radio]), .filters-body select,
.section-actions select, .section-actions input[type=text], .rtable-grid input:not([type=checkbox]):not([type=file]), .rtable-grid select, .rtable-grid textarea,
.filter-field input:not([type=checkbox]):not([type=radio]), .filter-field select, select.input {
  width: 100%; height: var(--control-h); min-height: var(--control-h); padding: 4px 11px; border: 1px solid var(--border-input); border-radius: var(--radius-button);
  background: var(--surface); color: var(--text-body); font-size: var(--fs); line-height: 22px; transition: border-color var(--dur), box-shadow var(--dur);
}
.field textarea, .rtable-grid textarea, textarea.input { height: auto; min-height: 76px; resize: vertical; border-radius: var(--radius-button); }
.field select, .filters-body select, .filter-field select, .section-actions select, .rtable-grid select, select.input {
  appearance: none; -webkit-appearance: none; padding-inline-end: 30px;
  background-image: var(--select-arrow); background-position: left 11px center; background-size: 12px 12px; background-repeat: no-repeat;
}
.input:hover, .field input:hover:not([readonly]), .field select:hover, .field textarea:hover, .filters-body input:hover, .filters-body select:hover,
.filter-field input:hover, .filter-field select:hover, .rtable-grid input:hover:not([readonly]), .rtable-grid select:hover { border-color: var(--primary-hover); }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus, .filters-body input:focus, .filters-body select:focus,
.filter-field input:focus, .filter-field select:focus, .section-actions select:focus, .section-actions input:focus,
.rtable-grid input:focus, .rtable-grid select:focus, .rtable-grid textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 2px var(--accent-tint); }
.field input[readonly], .field input.locked, .rtable-grid input[readonly], .rtable-grid input.locked { background: var(--select-bg); color: var(--text-muted); border-style: dashed; cursor: not-allowed; }
.field input[type=file], .rtable-grid input[type=file] { width: 100%; padding: var(--s2); border: 1px dashed var(--border-input); border-radius: var(--radius-button); background: var(--surface); font-size: var(--fs); }
.field input[type=checkbox], .field input[type=radio], .field-check input, .inline-check input { accent-color: var(--primary); width: 16px; height: 16px; }
.input-icon { position: relative; display: flex; align-items: center; height: var(--control-h); padding: 4px 11px; gap: var(--s1); border: 1px solid var(--border-input); border-radius: var(--radius-button); background: var(--surface); }
.input-icon:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--accent-tint); }
.input-icon input { flex: 1; min-width: 0; height: 22px; padding: 0; border: 0; background: transparent; outline: 0; color: var(--text-body); }
.input-icon .ico { width: 14px; height: 14px; color: var(--text-subtle); }
.search { position: relative; display: flex; align-items: center; gap: var(--s1); height: var(--control-h); padding: 4px 11px; border: 1px solid var(--border-input); border-radius: var(--radius-input); background: var(--surface); }
.search.round { border-radius: var(--radius-pill); }
.search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 2px var(--accent-tint); }
.search .ico { width: 16px; height: 16px; color: var(--text-subtle); }
.search input { flex: 1; min-width: 0; height: 22px; padding: 0; border: 0; background: transparent; outline: 0; color: var(--text-body); font-family: var(--font-sans); }
.input-icon input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),
.search input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]) {
  height: 22px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.date-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }

/* labels above fields (filters: 12px muted; forms: 14px) */
.filter-field, .ffield { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.filter-field > label, .filter-field > .lbl, .ffield > label { margin: 0; font-size: var(--fs-xs); line-height: 16px; color: var(--text-muted); font-weight: 400; }
.field { min-width: 0; }
.field label, .field .lbl { display: block; margin: 0 0 var(--s1); font-size: var(--fs); font-weight: 500; color: var(--text-body); line-height: 22px; }
.field .req, .req { color: var(--danger-icon); margin-inline-start: 4px; }
.field .help, .help { margin-top: var(--s1); font-size: var(--fs-xs); color: var(--text-subtle); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--danger); }
.err-msg { display: flex; gap: 6px; align-items: flex-start; margin-top: var(--s1); color: var(--err); font-size: var(--fs-xs); }
.err-msg .ico { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.field-check { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-height: var(--control-h); }
.field-check label { margin: 0; }
.field-check .help, .field-check .err-msg { flex-basis: 100%; }

/* ---------- filter bar ---------- */
.filter-bar { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s3); background: var(--surface-muted); border: 1px solid var(--border-hairline); border-radius: var(--radius-input); }
.filter-bar .f-row { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; }
.filter-bar .f-grid, .filter-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); align-items: end; }
.filter-card { padding: var(--s4); background: var(--surface); border: 1px solid var(--border-hairline); border-radius: var(--radius-card); }
.total-line { color: var(--text-muted); line-height: 20px; margin: 0; }

/* ---------- table ---------- */
.data-table { position: relative; background: var(--surface); border: 1px solid var(--border-table); border-radius: var(--radius-table) var(--radius-table) 8px 8px; overflow-x: auto; }
.data-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs); }
.data-table th { position: relative; text-align: start; padding: var(--s4); background: var(--th-bg); color: var(--text-head); font-weight: 700; white-space: nowrap; border-bottom: 1px solid var(--row-line); }
.data-table th:first-child { border-start-start-radius: var(--radius-table); }
.data-table th:last-child { border-start-end-radius: var(--radius-table); }
.data-table th + th::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: 1px; height: 1.6em; transform: translateY(-50%); background: var(--border-hairline-soft); }
.data-table td { padding: var(--s4); border-bottom: 1px solid var(--row-line); vertical-align: middle; color: var(--text-body); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover > td { background: var(--surface-hover); }
.data-table.compact th, .data-table.compact td { padding: var(--s2); }
.data-table .c-num, .data-table th.c-num { text-align: center; width: 64px; }
.data-table .c-sorted, .data-table th[aria-sort] { background: var(--th-sorted); }
.data-table td.c-sorted { background: var(--th-bg); }
.data-table .sort { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); color: inherit; text-decoration: none; }
.data-table .sort .ico { width: 12px; height: 12px; color: var(--sort-icon); }
.data-table .c-expand { width: 48px; text-align: center; }
.data-table .c-act { white-space: nowrap; }
.data-table .two-line { display: flex; flex-direction: column; line-height: 19px; }
.data-table .two-line small, .cell-sub { font-size: var(--fs-xs); line-height: 16px; color: var(--text-muted); }
.expand-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 1px solid var(--row-line); border-radius: 4px; background: var(--surface); color: var(--text-body); cursor: pointer; line-height: 1; }
.expand-btn .ico { width: 10px; height: 10px; stroke-width: 2.5; }
.expand-btn[aria-expanded="true"] .i-plus, .expand-btn:not([aria-expanded="true"]) .i-minus { display: none; }
.data-table tr.row-detail > td { background: var(--row-open); color: var(--text-subtle); padding: var(--s4) var(--s6); }
.data-table tr.row-detail[hidden] { display: none; }
.row-actions { display: flex; align-items: center; gap: 2px; }
.table-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) 0 0; }
.avatar-cell { display: flex; align-items: center; gap: var(--s4); }
.avatar-cell .ico { width: 32px; height: 32px; color: var(--text-muted); stroke-width: 1.5; }

/* ---------- tags / status / RAG / priority ---------- */
.tag { display: inline-block; padding: 0 7px; border-radius: var(--radius-tag); font-size: var(--fs-xs); line-height: 20px; background: var(--select-bg); color: var(--text-body); white-space: nowrap; }
.tag.in { color: var(--tag-in); background: var(--tag-in-bg); }
.tag.out { color: var(--tag-out); background: var(--tag-out-bg); }
.status { display: inline-block; padding: 0 7px; border: 1px solid var(--border-input); border-radius: var(--radius-button); font-size: var(--fs-xs); line-height: 20px; white-space: nowrap; color: var(--text-body); background: var(--select-bg); }
.status.ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-bg); }
.status.warn { color: var(--rag-amber); border-color: var(--rag-amber); background: var(--rag-amber-bg); }
.status.err { color: var(--rag-red); border-color: var(--rag-red); background: var(--rag-red-bg); }
.status.info { color: var(--tag-in); border-color: var(--tag-in); background: var(--tag-in-bg); }
.status.muted { color: var(--text-subtle); }
.badge, .dot-tag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 500; line-height: 16px; background: var(--select-bg); color: var(--text-body); white-space: nowrap; }
.badge::before, .dot-tag::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--text-subtle); flex: none; }
.badge.ok, .dot-tag.green, .badge.complete, .badge.st-approved, .badge.op-agree { background: var(--rag-green-bg); }
.badge.ok::before, .dot-tag.green::before, .badge.complete::before, .badge.st-approved::before, .badge.op-agree::before { background: var(--rag-green); }
.badge.warn, .dot-tag.amber, .badge.draft, .badge.st-filled { background: var(--rag-amber-bg); }
.badge.warn::before, .dot-tag.amber::before, .badge.draft::before, .badge.st-filled::before { background: var(--rag-amber); }
.badge.err, .dot-tag.red { background: var(--rag-red-bg); }
.badge.err::before, .dot-tag.red::before { background: var(--rag-red); }
.badge.review, .badge.st-needs_review, .badge.op-revise { background: var(--review-bg); }
.badge.review::before, .badge.st-needs_review::before, .badge.op-revise::before { background: var(--review); }
.badge.info, .badge.noref, .badge.legacy, .dot-tag.blue { background: var(--info-bg); }
.badge.info::before, .badge.noref::before, .badge.legacy::before, .dot-tag.blue::before { background: var(--tag-in); }
.badge.empty, .badge.st-empty, .badge.inactive { background: var(--select-bg); color: var(--text-muted); }
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); }
.prio::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.prio.low { color: var(--priority-low); } .prio.medium { color: var(--priority-medium); } .prio.urgent { color: var(--priority-urgent); }
.busy-tag { display: inline-block; padding: 1px 10px; border-radius: var(--radius-pill); background: var(--busy-bg); color: var(--busy-ink); font-size: 11.5px; font-weight: 800; line-height: 15px; }

/* ---------- counters ---------- */
.count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--select-bg); color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; line-height: 1; }
.count-badge, .bell-badge { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--radius-pill); background: var(--badge-count); color: #ffffff; font-size: 10px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 1px var(--surface); }

/* ---------- underline tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin-bottom: var(--s2); border-bottom: 1px solid var(--separator); }
.tab { position: relative; display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s4) 0 var(--s2); color: var(--text-body); text-decoration: none; font-size: var(--fs); }
.tab:hover { color: var(--text-strong); text-decoration: none; }
.tab[aria-current="page"], .tab[aria-selected="true"] { color: var(--text-head); }
.tab[aria-current="page"]::after, .tab[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--text-head); }

/* ---------- modal (native <dialog>) ---------- */
.modal { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 20px 24px; border: 0; border-radius: var(--radius-modal); background: var(--surface-raised); color: var(--text-body); box-shadow: var(--shadow-pop); }
.modal::backdrop { background: var(--scrim); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.modal-head h2 { font-size: var(--fs-md); font-weight: 700; line-height: 24px; }
.modal-foot { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s5); }

/* ---------- dropdown menu (details/summary, no JS needed) ---------- */
.dropdown { position: relative; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown > summary::-webkit-details-marker { display: none; }
.dropdown-menu { position: absolute; z-index: 50; top: calc(100% + 4px); inset-inline-end: 0; min-width: 180px; padding: 4px; background: var(--surface-raised); border-radius: 8px; box-shadow: var(--shadow-pop); }
.dropdown.start .dropdown-menu { inset-inline-end: auto; inset-inline-start: 0; }
.dropdown-menu a, .dropdown-menu button { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 32px; padding: 5px 12px; border: 0; border-radius: 4px; background: none; color: var(--text-body); text-align: start; text-decoration: none; cursor: pointer; white-space: nowrap; }
.dropdown-menu a:hover, .dropdown-menu button:hover { background: var(--surface-hover); text-decoration: none; }
.dropdown-menu .ico { width: 16px; height: 16px; color: var(--text-muted); }
.dropdown-menu form { margin: 0; }
.dropdown-menu .danger { color: var(--danger-icon); }
.dropdown-menu .dm-head { display: flex; flex-direction: column; padding: 5px 12px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--separator); }
.dropdown-menu .dm-head b { color: var(--text-strong); }

/* ---------- empty state ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--s1); text-align: center; padding: var(--s7) var(--s4); color: var(--text-muted); }
.empty-state > .ico { width: 40px; height: 40px; color: var(--text-faint); stroke-width: 1.5; margin-bottom: var(--s2); }
.empty-state h3 { margin: 0; color: var(--text-body); font-weight: 700; }
.empty-state p { margin: 0; }
.empty-state .btn { margin-top: var(--s3); }
.empty-state.boxed { border: 1px dashed var(--border-hairline-strong); border-radius: var(--radius-card); background: var(--surface); }

/* ---------- pagination ---------- */
.pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.pager a, .pager span.page { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; color: var(--text-body); text-decoration: none; }
.pager a:hover { background: var(--surface-hover); text-decoration: none; }
.pager [aria-current="page"] { border-color: var(--primary); color: var(--accent); font-weight: 600; }
.pager [aria-disabled="true"] { opacity: .35; pointer-events: none; }
.pager .pg-info { color: var(--text-muted); padding: 0 var(--s2); }

/* ---------- messages (Django) / toast / alert ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 var(--s4); display: grid; gap: var(--s2); }
.messages li, .toast { display: flex; align-items: flex-start; gap: var(--s2); padding: 9px 12px; border-radius: 8px; background: var(--surface-raised); color: var(--text-body); box-shadow: var(--shadow-pop); border-inline-start: 3px solid var(--tag-in); }
.messages .msg-success { border-inline-start-color: var(--rag-green); }
.messages .msg-error { border-inline-start-color: var(--rag-red); }
.messages .msg-warning { border-inline-start-color: var(--rag-amber); }
.toast { position: fixed; inset-inline: var(--s4); bottom: calc(var(--nav-h) + 24px); z-index: 60; }
.alert { display: flex; gap: var(--s2); align-items: flex-start; padding: 8px 12px; margin-bottom: var(--s3); border-radius: 8px; border: 1px solid var(--info-bg); background: var(--info-bg); color: var(--text-body); font-size: var(--fs); }
.alert .ico { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--info); }
.alert.ok { background: var(--rag-green-bg); border-color: var(--rag-green-bg); }
.alert.ok .ico { color: var(--rag-green); }
.alert.warn { background: var(--warn-bg); border-color: var(--warn-bg); }
.alert.warn .ico { color: var(--rag-amber); }
.alert.err { background: var(--err-bg); border-color: var(--err-bg); }
.alert.err .ico { color: var(--rag-red); }
.alert b { color: var(--text-strong); }

/* ---------- skeleton ---------- */
.skeleton { background: linear-gradient(90deg, var(--surface-muted) 25%, var(--surface-raised) 37%, var(--surface-muted) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-button); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

@media (min-width: 700px) { .toast { inset-inline: auto var(--s5); max-width: 380px; } }
@media (min-width: 1024px) { .toast { bottom: var(--s5); } }
.badge.turn { background: var(--tag-out-bg); color: var(--tag-out); }
.badge.turn::before { background: var(--tag-out); }
.badge.waiting { background: var(--select-bg); color: var(--text-muted); }
.page-head.page-bar { margin-bottom: 0; }
.page-head.page-bar h1 { font-size: var(--fs); font-weight: 800; line-height: 22px; color: var(--text-strong); }