/* ==========================================================================
COMPONENTS — Preline's admin-dashboard vocabulary in logical properties. Every value is a token.
========================================================================== */
/* ── App shell ────────────────────────────────────────────────────────────── */
.app-shell { min-height: 100vh; padding-inline-start: var(--sidebar-width); padding-block-start: var(--topbar-height); }
.app-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar-width); z-index: 20;
display: flex; flex-direction: column; background: var(--color-surface); border-inline-end: 1px solid var(--color-border); overflow-y: auto; }
.app-topbar { position: fixed; inset-block-start: 0; inset-inline: var(--sidebar-width) 0; height: var(--topbar-height); z-index: 10;
display: flex; align-items: center; gap: var(--space-2); padding-inline: var(--space-5);
background: var(--color-surface); border-block-end: 1px solid var(--color-border); }
.app-main { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
@media (max-width: 991px) {
.app-shell { padding-inline-start: 0; }
.app-sidebar { position: static; width: auto; border-inline-end: 0; border-block-end: 1px solid var(--color-border); }
.app-topbar { inset-inline: 0; }
}
/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.nav-brand { display: flex; align-items: center; gap: var(--space-3); height: var(--topbar-height); flex: none;
padding-inline: var(--space-5); color: var(--color-action-primary); font-size: var(--text-md); font-weight: var(--weight-semibold); text-decoration: none; }
.nav-list, .nav-sub { list-style: none; margin: 0; padding: 0; }
.nav-list { padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: var(--space-3); height: var(--nav-item); padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md); color: var(--color-text-body); font-size: var(--text-sm); text-decoration: none; cursor: pointer; list-style: none; }
.nav-item::-webkit-details-marker { display: none; }
.nav-item > .nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item svg { flex: none; color: var(--color-text-muted); }
.nav-item:hover, .nav-item.is-active, .nav-group[open] > .nav-item { background: var(--color-surface-sunken); text-decoration: none; }
.nav-item.is-active { font-weight: var(--weight-medium); }
.nav-item.is-active svg { color: var(--color-text-body); }
.nav-chevron { display: inline-flex; color: var(--color-text-muted); transition: transform var(--fast); }
.nav-group[open] > .nav-item .nav-chevron { transform: rotate(180deg); }
.nav-sub { margin-inline-start: 24px; padding-inline-start: var(--space-3); border-inline-start: 1px solid var(--color-border); padding-block: 2px 4px; }
.nav-sub-item { display: flex; align-items: center; height: var(--nav-sub-item); padding-inline: var(--space-3);
border-radius: var(--radius-md); color: var(--color-text-body); font-size: var(--text-sm); text-decoration: none; }
.nav-sub-item:hover, .nav-sub-item.is-active { background: var(--color-surface-sunken); text-decoration: none; }
.nav-sub-item.is-active { font-weight: var(--weight-medium); }
.nav-label { padding: var(--space-2) var(--space-3); margin-block-start: var(--space-4); font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted); }
.nav-foot { margin-block-start: auto; flex: none; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-block-start: 1px solid var(--color-border); }
.identity { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; color: var(--color-text-body); text-decoration: none; }
.identity-text { display: flex; flex-direction: column; min-width: 0; }
.identity-name { font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-role { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted); }
/* ── Topbar ───────────────────────────────────────────────────────────────── */
.search-field { display: flex; align-items: center; gap: var(--space-2); height: var(--control-md); width: min(400px, 100%);
padding-inline: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; }
.search-field:hover { border-color: var(--color-border-strong); text-decoration: none; }
.search-field > .search-text { flex: 1; }
.kbd { font: inherit; font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted);
border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px 6px; }
.topbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--radius-full);
background: var(--color-surface-sunken); color: var(--color-text-body); font-size: var(--text-xs); font-weight: var(--weight-semibold); overflow: hidden; }
.avatar-lg { width: var(--control-md); height: var(--control-md); border: 2px solid var(--color-border); }
.notify-dot { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 8px; height: 8px; border-radius: var(--radius-full);
background: var(--color-notify); border: 2px solid var(--color-surface); box-sizing: content-box; }
/* ── Page ─────────────────────────────────────────────────────────────────── */
.page-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.page-head h1 { margin-inline-end: auto; }
.page-lede { color: var(--color-text-muted); }
.page-center { max-width: var(--form-width); margin-inline: auto; width: 100%; display: flex; flex-direction: column; gap: var(--space-5); }
.page-center > .page-title { text-align: center; }
.page-center > .page-title h1 { font-size: var(--text-xl); }
.page-center > .page-title p { color: var(--color-text-muted); margin-block-start: var(--space-1); }
.crumbs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.crumbs a { color: var(--color-text-muted); }
.crumbs .is-current { color: var(--color-text-heading); font-weight: var(--weight-medium); }
/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--control-md); padding: var(--space-2) var(--space-3);
border: 1px solid transparent; border-radius: var(--radius-xs); font-size: var(--text-sm); font-weight: var(--weight-medium);
cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color var(--fast), border-color var(--fast); }
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--color-action-primary); color: var(--color-action-primary-on); }
.btn-primary:hover:not(:disabled) { background: var(--color-action-primary-hover); }
.btn-secondary { background: var(--color-action-secondary); border-color: var(--color-border); color: var(--color-action-secondary-on); }
.btn-secondary:hover:not(:disabled) { background: var(--color-action-secondary-hover); }
.btn-ghost { background: transparent; color: var(--color-text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--color-surface-sunken); color: var(--color-text-body); }
.btn-danger { background: var(--color-danger); color: var(--color-text-inverse); }
.btn-danger:hover:not(:disabled) { background: var(--color-danger-on); }
.btn-danger-ghost { background: var(--color-action-secondary); border-color: var(--color-border); color: var(--color-danger-ghost); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--color-danger-bg); }
.btn-sm { height: var(--control-sm); padding: var(--space-2) 10px; font-size: var(--text-xs); }
.btn-xs { height: var(--control-xs); padding: 6px var(--space-2); font-size: var(--text-xs); border-radius: var(--radius-full); }
.btn-icon { width: var(--control-md); padding: 0; }
.btn-icon.btn-sm { width: var(--control-sm); }
.btn-icon.btn-round { border-radius: var(--radius-full); }
.btn .count { display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding-inline: 4px; border-radius: var(--radius-full);
background: var(--color-badge-dark); color: var(--color-text-inverse); font-size: 10px; line-height: 1; font-weight: var(--weight-medium); }
/* ── Cards ────────────────────────────────────────────────────────────────── */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.card-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-3); }
.card-head h2 { margin-inline-end: auto; }
.card-head .card-sub { flex-basis: 100%; color: var(--color-text-muted); font-size: var(--text-sm); }
.card-actions { display: flex; align-items: center; gap: var(--space-2); }
.card-body { padding: 0 var(--space-5) var(--space-5); }
.card-body-flush { padding: 0; }
.card-foot { border-block-start: 1px solid var(--color-border); padding: var(--space-3) var(--space-5); text-align: center; }
.card-foot a { color: var(--color-text-link); }
.card-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1279px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .card-grid, .card-grid-2 { grid-template-columns: minmax(0, 1fr); } }
/* ── Stats ────────────────────────────────────────────────────────────────── */
.stat-hero { display: block; font-size: var(--text-hero); line-height: var(--leading-hero); font-weight: var(--weight-medium);
color: var(--color-action-primary); font-variant-numeric: tabular-nums; margin-block: var(--space-2); text-decoration: none; }
.stat-numeral { font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.stat-label { color: var(--color-text-muted); font-size: var(--text-sm); }
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-block-start: var(--space-4); }
.stat-tile { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md);
background: var(--color-surface-sunken); color: var(--color-text-body); text-decoration: none; }
.stat-tile:hover { background: var(--color-border); text-decoration: none; }
.stat-tile strong { font-size: var(--text-lg); line-height: var(--leading-lg); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.stat-card { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); color: var(--color-text-body); text-decoration: none; }
.trend { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); }
.trend-up { color: var(--color-success); } .trend-down { color: var(--color-danger-ghost); } .trend-none { color: var(--color-text-disabled); }
.segments { display: flex; gap: 2px; height: 8px; border-radius: var(--radius-full); overflow: hidden; margin-block: var(--space-2) var(--space-4); }
.seg { flex: 1 1 0; min-width: 0; }
.seg-1, .swatch-1 { background: var(--color-data-1); } .seg-2, .swatch-2 { background: var(--color-data-2); }
.seg-3, .swatch-3 { background: var(--color-data-3); } .seg-4, .swatch-4 { background: var(--color-data-4); } .seg-5, .swatch-5 { background: var(--color-data-5); }
.legend, .rows { list-style: none; margin: 0; padding: 0; }
.legend li > a, .rows li { display: flex; align-items: center; gap: var(--space-3); height: 40px; color: var(--color-text-body); text-decoration: none; }
.legend li > a:hover { color: var(--color-text-link); text-decoration: none; }
.legend li > a > .legend-text, .rows li > .row-text { flex: 1; }
.swatch { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.legend .num, .rows .num { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* ── Forms (users-add-user.html) ──────────────────────────────────────────── */
.form-card { padding: var(--space-6); }
.form-row { display: grid; grid-template-columns: var(--form-label-width) minmax(0, 1fr); gap: var(--space-3) var(--space-4); align-items: start; }
.form-row + .form-row { margin-block-start: var(--space-3); }
.form-label { padding-block-start: 9px; color: var(--color-text-muted); font-size: var(--text-sm); }
.form-required::after { content: " *"; color: var(--color-danger); }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.form-inline { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-2); }
.form-inline-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
/* No `outline: none` here, deliberately. It was in the drafted recipe and it is the one defect
the re-skin already shipped once: base.css's :focus-visible ring and this rule have equal
specificity, this file loads second, so the suppression wins in every state and the ring painted
on nothing. The blue border and 1px halo below are ADDED to the browser's outline, not offered
in exchange for it. */
.form-control { width: 100%; height: var(--control-md); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border);
border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-body); font-size: var(--text-sm); }
.form-control::placeholder { color: var(--color-text-placeholder); }
.form-control:hover { border-color: var(--color-border-strong); }
.form-control:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); }
textarea.form-control { height: auto; min-height: 96px; resize: vertical; }
.form-control.is-invalid, .form-control.input-validation-error { border-color: var(--color-danger); }
/* background-position has no logical keywords yet: this is the ONE allowed physical pair, mirrored below. */
.form-select { appearance: none; padding-inline-end: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a7282' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
[dir="rtl"] .form-select { background-position: left 12px center; }
.form-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.form-check input { width: 16px; height: 16px; margin: 0; border: 1px solid var(--color-border-strong); border-radius: 4px; accent-color: var(--color-action-primary); }
.form-hint { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-text-muted); }
.form-error, .field-validation-error { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-danger); }
.form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); padding-block-start: var(--space-5); }
.upload-avatar { display: flex; align-items: center; gap: var(--space-3); }
.upload-avatar .drop { display: grid; place-items: center; width: 80px; height: 80px; border: 2px dashed var(--color-border); border-radius: var(--radius-full); color: var(--color-text-muted); }
.field-machine { direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono); }
/* ── Pills, badges, chips ─────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; padding-block: var(--space-badge-block); padding-inline: var(--space-2-5);
border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-body);
font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap; }
a.pill { text-decoration: none; }
.pill svg { color: var(--color-success); } /* the white "✓ Good" pill: green tick */
.pill-success svg, .pill-warning svg, .pill-danger svg, .pill-info svg, .pill-off svg, .pill-neutral svg { color: currentColor; }
.pill-success { background: var(--color-success-bg); border-color: var(--color-success-line); color: var(--color-success-on); }
.pill-warning { background: var(--color-warning-bg); border-color: var(--color-warning-line); color: var(--color-warning-on); }
.pill-danger { background: var(--color-danger-bg); border-color: var(--color-danger-line); color: var(--color-danger-on); }
.pill-info { background: var(--color-info-bg); border-color: var(--color-info-line); color: var(--color-info-on); }
/* pill-off is what markup actually reaches for ("Inactive", "Suspended", "Untrusted", …) under the
name pill-neutral; nothing in the codebase uses the class pill-off itself. One rule for both
names rather than two that drift apart — the off/neutral tone is a fourth status, not an error. */
.pill-off, .pill-neutral { background: var(--color-off-bg); border-color: var(--color-off-line); color: var(--color-off-on); }
.pill .dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.chip { display: inline-flex; align-items: center; height: 24px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
background: var(--color-surface-sunken); color: var(--color-text-body); font-size: var(--text-xs); line-height: var(--leading-xs); }
.table .cell-code bdi { display: inline-block; padding: var(--space-0-25) var(--space-1-75); border-radius: var(--radius-2xs);
border: 1px solid var(--color-border); background: var(--color-surface-raised); color: var(--color-text-muted);
font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--text-2xs); line-height: var(--leading-xs); }
/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-card { overflow: hidden; }
.toolbar { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4); }
.toolbar .search-field { height: var(--control-sm); background: var(--color-surface-sunken); border-color: transparent; flex: 1 1 320px; max-width: 580px; }
.toolbar-end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); }
.scroller { overflow-x: auto; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
.table th { padding: var(--space-2-5) var(--space-3-5); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold);
color: var(--color-text-muted); background: var(--color-surface-raised); border-block-end: 1px solid var(--color-border);
white-space: nowrap; vertical-align: middle; user-select: none; }
.table td { padding: var(--space-2-75) var(--space-3-5); border-block-end: 1px solid var(--color-border); vertical-align: middle; }
.table tbody tr:last-child td { border-block-end: 0; }
.table tbody tr:hover td { background: var(--color-cross); }
.table .cell-primary, .table .name { font-weight: var(--weight-semibold); font-size: var(--text-name); line-height: var(--leading-name);
color: var(--color-text-heading); }
/* table-reference.html:187 pins the English subline to `text-align:right` under `direction:ltr` —
the same `text-align:end` trick .date-abs uses below. The shared `[lang="en"]` rule (D6) sets
`text-align: start`, which resolves to the physical LEFT under that same `direction:ltr` and is
correct for a form input or a facts value, both full-width fields where English prose reads from
its own left edge — but wrong here, where `.cell-sub` is ALSO a full-width block and the subline
has to land on the Arabic name's own inline-start edge instead, which in this rtl document is the
physical right. `.table .cell-sub` outranks `[lang="en"]` on class-count alone (0,2,0) > (0,1,0),
so this needs no `!important` and no change to the shared rule — which stays correct for the ~40
other `[lang="en"]` surfaces across the console (every Details page's bilingual `dd`/`span.en`,
every `NameEn`/`TitleEn` form input) that are not table cells. `.bilingual .en` is listed beside
`.cell-sub` only because it already shared this rule's other properties; `.bilingual` is an
inline-flex wrapper shrunk to its own text, so text-align never moves it and this addition is a
no-op there — the bug is exclusively `.cell-primary`/`.cell-sub`'s full-width block. */
.table .cell-sub, .table td .bilingual .en { display: block; font-size: var(--text-2xs); line-height: var(--leading-xs);
font-weight: var(--weight-regular); color: var(--color-text-muted); margin-block-start: var(--space-0-25); text-align: end; }
/* Numbers read left-to-right even in an Arabic document, on the .cell-code precedent below — and
the reference's own numeric column is set the same way (direction:ltr; text-align:left). Reading
direction:ltr locally is what makes `text-align: start` below resolve to that, rather than to
base.css's [dir="rtl"] branch. Scoped to `td` only: table-reference.html sets this treatment on
the `` INSIDE a numeric cell, never on the header — its numeric `| ` stays
plain Arabic text (IBM Plex Sans Arabic, direction:rtl) with only its alignment forced left, on
an inline style. `th.cell-num` therefore carries none of this and falls through to base.css's own
`.cell-num` pin below, which resolves physically left there too, because the header's own
direction stays rtl and "end" in rtl IS left — no ltr flip needed for a header that never
switches face. IBM Plex Mono has no Arabic glyphs, so the old unscoped rule forced a system-font
fallback onto the Arabic header and widened it. */
.table td.cell-num { font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: var(--text-num); direction: ltr; unicode-bidi: isolate; }
/* base.css:41 pins .cell-num to `text-align: end` in BOTH directions, deliberately, at specificity
(0,3,1) — matched here rather than fought, so the later file wins the tie instead of losing to
the first-loaded one. `start` is `left` because of the ltr direction set above, not because this
rule names a side; it is what the reference's own left-aligned numeric column asks for. */
[dir="rtl"] .table td.cell-num,
[dir="ltr"] .table td.cell-num { text-align: start; }
.table .cell-code { direction: ltr; unicode-bidi: isolate; }
/* Direct children only — an inline row action (), a |