/* ==========================================================================
   Rentiqa Design System v2 - COMPONENTS
   Chips, KPI tiles, toolbars/filter bars, summary strips, tables-in-cards,
   drawers, empty / loading / error states, report template.
   Tokens only. Logical properties only.
   ========================================================================== */

[data-density="compact"] { --rq-row-h: var(--rq-row-h-compact); }
[data-density="comfort"] { --rq-row-h: var(--rq-row-h-comfort); }

/* ---- Chip dialect (c1_f20): ONE component, two roles ------------------------------------
   DISPLAY chip   .rq-chip(--ok|warn|danger|info|violet|accent|neutral): FILLED tint, no visible border, 22px, never clickable.
   TOGGLE chip    .rq-chip.rq-chip--toggle (a <button>, aria-pressed): OUTLINE neutral when off (surface + 1px control border);
                  when on (.is-on / aria-pressed=true) it becomes the FILLED tint of its tone with a tone-coloured line.
                  Same height as a small control (--rq-h-sm, 32px) so a chip bar never mixes heights. No dashed borders, no focus-ring-as-selection.
   FILTER chip    .rq-chip--filter: applied-filter token with a remove button (outline, neutral). */
.rq-chip.rq-chip--toggle { min-block-size: var(--rq-h-sm); padding-inline: 12px; gap: 6px; cursor: pointer; font-family: inherit; font-size: var(--rq-fs-xs); font-weight: var(--rq-fw-semibold);
  background: var(--rq-surface); color: var(--rq-text-2); border: 1px solid var(--rq-border-control); transition: background-color var(--rq-dur-fast) var(--rq-ease), border-color var(--rq-dur-fast) var(--rq-ease); }
.rq-chip.rq-chip--toggle:hover { background: var(--rq-hover); color: var(--rq-text); }
.rq-chip.rq-chip--toggle:focus-visible { outline: 2px solid var(--rq-focus); outline-offset: 2px; }
.rq-chip.rq-chip--toggle.is-on, .rq-chip.rq-chip--toggle[aria-pressed="true"] { background: var(--rq-neutral-bg); color: var(--rq-text); border-color: var(--rq-neutral-line); }
.rq-chip.rq-chip--toggle.rq-chip--ok.is-on, .rq-chip.rq-chip--toggle.rq-chip--ok[aria-pressed="true"] { background: var(--rq-ok-bg); color: var(--rq-ok); border-color: var(--rq-ok-line); }
.rq-chip.rq-chip--toggle.rq-chip--warn.is-on, .rq-chip.rq-chip--toggle.rq-chip--warn[aria-pressed="true"] { background: var(--rq-warn-bg); color: var(--rq-warn); border-color: var(--rq-warn-line); }
.rq-chip.rq-chip--toggle.rq-chip--danger.is-on, .rq-chip.rq-chip--toggle.rq-chip--danger[aria-pressed="true"] { background: var(--rq-danger-bg); color: var(--rq-danger); border-color: var(--rq-danger-line); }
.rq-chip.rq-chip--toggle.rq-chip--info.is-on, .rq-chip.rq-chip--toggle.rq-chip--info[aria-pressed="true"] { background: var(--rq-info-bg); color: var(--rq-info); border-color: var(--rq-info-line); }
.rq-chip.rq-chip--toggle.rq-chip--violet.is-on, .rq-chip.rq-chip--toggle.rq-chip--violet[aria-pressed="true"] { background: var(--rq-violet-bg); color: var(--rq-violet); border-color: var(--rq-violet-line); }
.rq-chip.rq-chip--toggle.rq-chip--accent.is-on, .rq-chip.rq-chip--toggle.rq-chip--accent[aria-pressed="true"] { background: var(--rq-accent-soft); color: var(--rq-accent-text); border-color: var(--rq-accent-line); }
/* off state keeps the tone only on its icon so the bar reads as one family */
.rq-chip.rq-chip--toggle:not(.is-on):not([aria-pressed="true"]).rq-chip--ok i { color: var(--rq-ok); }
.rq-chip.rq-chip--toggle:not(.is-on):not([aria-pressed="true"]).rq-chip--warn i { color: var(--rq-warn); }
.rq-chip.rq-chip--toggle:not(.is-on):not([aria-pressed="true"]).rq-chip--danger i { color: var(--rq-danger); }
.rq-chip.rq-chip--toggle:not(.is-on):not([aria-pressed="true"]).rq-chip--info i { color: var(--rq-info); }
.rq-chip.rq-chip--toggle:not(.is-on):not([aria-pressed="true"]).rq-chip--violet i { color: var(--rq-violet); }
.rq-chip.rq-chip--toggle.rq-chip--ghost { background: transparent; border-color: transparent; color: var(--rq-accent-text); }
.rq-chip.rq-chip--filter { min-block-size: var(--rq-h-sm); }
.rq-summary .rq-summary__item { min-block-size: var(--rq-h-sm); align-items: center; padding-block: 0; }
.rq-summary { align-items: center; }

/* ---- Status chips ------------------------------------------------------------ */
.rq-chip {
  display: inline-flex; align-items: center; gap: 5px; min-block-size: 22px; padding: 0 9px; border-radius: var(--rq-r-pill);
  font-size: var(--rq-fs-xs); font-weight: var(--rq-fw-medium); line-height: 1; white-space: nowrap;
  background: var(--rq-neutral-bg); color: var(--rq-neutral); border: 1px solid transparent;
}
.rq-chip i { font-size: 10px; }
.rq-chip--ok { background: var(--rq-ok-bg); color: var(--rq-ok); }
.rq-chip--warn { background: var(--rq-warn-bg); color: var(--rq-warn); }
.rq-chip--danger { background: var(--rq-danger-bg); color: var(--rq-danger); }
.rq-chip--info { background: var(--rq-info-bg); color: var(--rq-info); }
.rq-chip--violet { background: var(--rq-violet-bg); color: var(--rq-violet); }
.rq-chip--accent { background: var(--rq-accent-soft); color: var(--rq-accent-text); }
.rq-chip--lg { min-block-size: 28px; padding-inline: 12px; font-size: var(--rq-fs-sm); }

/* ---- Status marker (Meridian): colour dot + short label; the low-noise default for every status ------------
   <span class="rq-status rq-status--ok">Ready</span>              dot + label (default, no box)
   <span class="rq-status rq-status--pill rq-status--warn">..</span> tinted pill (use when the status is the row's focus)
   <span class="rq-status rq-status--dot rq-status--danger" role="img" aria-label="Overdue" title="Overdue"></span>   icon-only
   Tones: ok warn danger info violet accent neutral(default). Never rely on the colour alone: always label or aria-label. */
.rq-status { --rq-st: var(--rq-neutral-dot); display: inline-flex; align-items: center; gap: 7px; font-size: var(--rq-fs-sm); font-weight: var(--rq-fw-medium); line-height: 1.3; color: var(--rq-text-2); white-space: nowrap; max-inline-size: 100%; }
.rq-status::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--rq-st); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rq-st) 20%, transparent); }
.rq-status--ok { --rq-st: var(--rq-ok-dot); } .rq-status--warn { --rq-st: var(--rq-warn-dot); } .rq-status--danger { --rq-st: var(--rq-danger-dot); }
.rq-status--info { --rq-st: var(--rq-info-dot); } .rq-status--violet { --rq-st: var(--rq-violet-dot); } .rq-status--accent { --rq-st: var(--rq-accent); }
.rq-status--pill { padding: 3px 10px 3px 8px; border-radius: var(--rq-r-pill); background: color-mix(in srgb, var(--rq-st) 12%, var(--rq-surface)); color: var(--rq-text); font-size: var(--rq-fs-xs); }
[dir="rtl"] .rq-status--pill { padding: 3px 8px 3px 10px; }
.rq-status--pill::before { box-shadow: none; }
.rq-status--dot { gap: 0; padding: 0; inline-size: 20px; block-size: 20px; justify-content: center; font-size: 0; }
.rq-status--dot::before { inline-size: 10px; block-size: 10px; }
.rq-status--dot > * { display: none; }
.rq-status--sm { font-size: var(--rq-fs-xs); }
.rq-status-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.rq-status-count { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rq-fs-sm); color: var(--rq-text-2); font-variant-numeric: tabular-nums; }
.rq-status-count b { font-weight: var(--rq-fw-semibold); color: var(--rq-text); }
.rq-status-count::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--rq-st, var(--rq-neutral-dot)); }
.rq-status-count.rq-status--ok { --rq-st: var(--rq-ok-dot); } .rq-status-count.rq-status--warn { --rq-st: var(--rq-warn-dot); } .rq-status-count.rq-status--danger { --rq-st: var(--rq-danger-dot); } .rq-status-count.rq-status--info { --rq-st: var(--rq-info-dot); } .rq-status-count.rq-status--violet { --rq-st: var(--rq-violet-dot); }
/* Segmented fleet bar (proportional): <div class="rq-status-bar"><span class="rq-status--ok" style="flex:8" title="Ready 8"></span>... */
.rq-status-bar { display: flex; block-size: 8px; gap: 2px; border-radius: var(--rq-r-pill); overflow: hidden; background: var(--rq-sunken); }
.rq-status-bar > span { --rq-st: var(--rq-neutral-dot); background: var(--rq-st); min-inline-size: 4px; }
.rq-status-bar > .rq-status--ok { --rq-st: var(--rq-ok-dot); } .rq-status-bar > .rq-status--warn { --rq-st: var(--rq-warn-dot); } .rq-status-bar > .rq-status--danger { --rq-st: var(--rq-danger-dot); } .rq-status-bar > .rq-status--info { --rq-st: var(--rq-info-dot); } .rq-status-bar > .rq-status--violet { --rq-st: var(--rq-violet-dot); }
.rq-status-bar > span::before { content: none; }
.rq-chip--filter { cursor: default; gap: 6px; padding-inline-end: 4px; background: var(--rq-surface); color: var(--rq-text); border-color: var(--rq-border-strong); }
.rq-chip--filter button { display: inline-grid; place-items: center; inline-size: 18px; block-size: 18px; border: 0; border-radius: 50%; background: transparent; color: var(--rq-muted); cursor: pointer; }
.rq-chip--filter button:hover { background: var(--rq-hover); color: var(--rq-text); }

/* ---- Section / panel -------------------------------------------------------------- */
.rq-section { background: var(--rq-surface); border: 1px solid var(--rq-border); border-radius: var(--rq-r-xl); box-shadow: var(--rq-shadow-1); min-inline-size: 0; overflow: hidden; }
.rq-section__head { display: flex; align-items: center; justify-content: space-between; gap: var(--rq-s-3); padding: var(--rq-s-4) var(--rq-s-5); border-block-end: 1px solid var(--rq-border); flex-wrap: wrap; }
.rq-section__title { margin: 0; font-size: var(--rq-fs-md); font-weight: var(--rq-fw-semibold); letter-spacing: var(--rq-tracking-tight); }
.rq-section__sub { margin: 2px 0 0; font-size: var(--rq-fs-xs); color: var(--rq-muted); }
.rq-section__body { padding: var(--rq-s-4); }
.rq-section__body--flush { padding: 0; }

/* ---- KPI tiles ------------------------------------------------------------------------ */
.rq-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--rq-s-4); margin-block-end: var(--rq-s-4); }
.rq-kpi {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: var(--rq-s-5); min-inline-size: 0; overflow: hidden;
  background: var(--rq-surface); border: 1px solid var(--rq-border); border-radius: var(--rq-r-xl); box-shadow: var(--rq-shadow-1); color: var(--rq-text);
  transition: box-shadow var(--rq-dur) var(--rq-ease), border-color var(--rq-dur) var(--rq-ease), transform var(--rq-dur) var(--rq-ease);
}
.rq-kpi:hover { box-shadow: var(--rq-shadow-2); border-color: var(--rq-border-strong); }
.rq-kpi::before { content: none; }
/* Decorative corner tint on KPI tiles removed (owner decision 2026-10-06); the lead tile keeps its brand shadow (--rq-glow). */
.rq-kpi__label { display: flex; align-items: center; gap: 10px; font-size: var(--rq-fs-sm); font-weight: var(--rq-fw-medium); color: var(--rq-muted); }
.rq-kpi__icon { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: var(--rq-r-md); background: var(--rq-accent-soft); color: var(--rq-accent-text); font-size: 14px; }
.rq-kpi__value { font-size: var(--rq-fs-2xl); font-weight: var(--rq-fw-bold); line-height: 1.1; letter-spacing: var(--rq-tracking-tight); font-variant-numeric: tabular-nums; }
[dir="rtl"] .rq-kpi__value { line-height: 1.3; }
.rq-kpi__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--rq-fs-xs); color: var(--rq-muted); min-block-size: 22px; }
.rq-kpi--ok { --rq-kpi-line: linear-gradient(90deg, var(--rq-ok), var(--rq-chart-1)); --rq-kpi-glow: var(--rq-ok); }
.rq-kpi--info { --rq-kpi-line: linear-gradient(90deg, var(--rq-info), var(--rq-chart-4)); --rq-kpi-glow: var(--rq-info); }
.rq-kpi--warn { --rq-kpi-line: linear-gradient(90deg, var(--rq-warn), var(--rq-chart-5)); --rq-kpi-glow: var(--rq-warn); }
.rq-kpi--ok .rq-kpi__icon { background: var(--rq-ok-bg); color: var(--rq-ok); }
.rq-kpi--info .rq-kpi__icon { background: var(--rq-info-bg); color: var(--rq-info); }
.rq-kpi--warn .rq-kpi__icon { background: var(--rq-warn-bg); color: var(--rq-warn); }
.rq-kpi--hero { background: var(--rq-hero-grad); color: var(--rq-on-ink); border-color: transparent; box-shadow: var(--rq-shadow-2); }
.rq-kpi--hero::before { display: none; }
.rq-kpi--hero::after { background: radial-gradient(circle, var(--rq-on-ink-22), transparent 68%); }
.rq-kpi--hero .rq-kpi__label, .rq-kpi--hero .rq-kpi__foot { color: var(--rq-on-ink-92); }
.rq-kpi--hero .rq-kpi__icon { background: var(--rq-on-ink-18); color: var(--rq-on-ink); }
.rq-kpi a.rq-kpi__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.rq-kpi a.rq-kpi__link:focus-visible { outline: 2px solid var(--rq-focus); outline-offset: -2px; }
.rq-delta { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--rq-fw-semibold); }
.rq-delta--up { color: var(--rq-ok); }
.rq-delta--down { color: var(--rq-danger); }
.rq-kpi--hero .rq-delta { color: var(--rq-on-ink); }
.rq-kpi.is-loading .rq-kpi__value { color: transparent; border-radius: var(--rq-r-sm); background: linear-gradient(90deg, var(--rq-sunken), var(--rq-hover), var(--rq-sunken)); background-size: 200% 100%; animation: rq-shimmer 1.4s linear infinite; inline-size: 60%; }

/* ---- Toolbars / filter bar / summary strip --------------------------------------------- */
.rq-toolbar { display: flex; align-items: center; gap: var(--rq-s-2); flex-wrap: wrap; margin-block-end: var(--rq-s-3); }
.rq-toolbar__spacer { flex: 1; }
.rq-search { position: relative; flex: 1 1 260px; max-inline-size: 420px; min-inline-size: 180px; }
.rq-search > i { position: absolute; inset-inline-start: 12px; inset-block-start: 50%; transform: translateY(-50%); color: var(--rq-muted); pointer-events: none; font-size: 13px; }
.rq-search input { padding-inline-start: 36px; }
.rq-filterbar { background: var(--rq-surface); border: 1px solid var(--rq-border); border-radius: var(--rq-r-lg); padding: var(--rq-s-3) var(--rq-s-4); margin-block-end: var(--rq-s-3); box-shadow: var(--rq-shadow-1); }
.rq-filterbar__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--rq-s-3); align-items: end; }
.rq-filterbar__actions { display: flex; gap: var(--rq-s-2); align-items: center; flex-wrap: wrap; padding-block-start: var(--rq-s-3); margin-block-start: var(--rq-s-3); border-block-start: 1px dashed var(--rq-border); }
.rq-applied { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-block-end: var(--rq-s-3); }
.rq-summary { display: flex; flex-wrap: wrap; gap: var(--rq-s-2); margin-block-end: var(--rq-s-3); }
.rq-summary__item { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; background: var(--rq-surface); border: 1px solid var(--rq-border); border-radius: var(--rq-r-md); font-size: var(--rq-fs-xs); color: var(--rq-text-2); }
.rq-summary__item strong { font-size: var(--rq-fs-md); color: var(--rq-text); font-variant-numeric: tabular-nums; }
.rq-summary__item--accent { border-color: var(--rq-accent-line); background: var(--rq-accent-soft); }
.rq-summary__item--danger strong { color: var(--rq-danger); }
.rq-summary__item--ok strong { color: var(--rq-ok); }
.rq-views-bar { display: flex; align-items: center; gap: var(--rq-s-2); flex-wrap: wrap; }
.rq-views__row { display: flex; align-items: center; }
.rq-views__row .dropdown-item { flex: 1; }

/* ---- Segmented control / tabs ----------------------------------------------------------- */
.rq-segmented { display: inline-flex; padding: 2px; background: var(--rq-sunken); border: 1px solid var(--rq-border); border-radius: var(--rq-r-md); gap: 2px; }
.rq-segmented button { min-block-size: 28px; padding-inline: 12px; border: 0; background: transparent; color: var(--rq-text-2); font: inherit; font-size: var(--rq-fs-sm); font-weight: var(--rq-fw-semibold); border-radius: var(--rq-r-sm); cursor: pointer; }
.rq-segmented button[aria-pressed="true"], .rq-segmented button.is-active { background: var(--rq-surface); color: var(--rq-accent-text); box-shadow: var(--rq-shadow-1); }

/* ---- Empty / loading / error ------------------------------------------------------------- */
.rq-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--rq-s-8) var(--rq-s-4); text-align: center; color: var(--rq-muted); }
.rq-empty-state__icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 16px; background: var(--rq-accent-soft); color: var(--rq-accent-text); font-size: 22px; margin-block-end: 6px; box-shadow: inset 0 0 0 1px var(--rq-accent-line); }
.rq-empty-state__title { color: var(--rq-text); font-size: var(--rq-fs-md); font-weight: var(--rq-fw-semibold); }
.rq-empty-state__hint { font-size: var(--rq-fs-sm); max-inline-size: 44ch; }
.rq-empty-state__action { margin-block-start: var(--rq-s-3); }
.rq-error-state { border: 1px solid var(--rq-danger-line); background: var(--rq-danger-bg); color: var(--rq-danger); border-radius: var(--rq-r-lg); padding: var(--rq-s-4); display: flex; gap: var(--rq-s-3); align-items: flex-start; }
.rq-skeleton { display: block; border-radius: var(--rq-r-sm); background: linear-gradient(90deg, var(--rq-sunken), var(--rq-hover), var(--rq-sunken)); background-size: 200% 100%; animation: rq-shimmer 1.4s linear infinite; min-block-size: 14px; }
@keyframes rq-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.rq-spinner { display: inline-block; inline-size: 18px; block-size: 18px; border-radius: 50%; border: 2px solid var(--rq-accent-line); border-block-start-color: var(--rq-accent); animation: rq-spin 0.8s linear infinite; }
@keyframes rq-spin { to { transform: rotate(360deg); } }

/* ---- Drawer (details panel at the inline-end edge) ------------------------------------------ */
.rq-drawer-scrim { position: fixed; inset: 0; z-index: 2000; background: var(--rq-scrim); opacity: 0; pointer-events: none; transition: opacity var(--rq-dur) var(--rq-ease); }
.rq-drawer-scrim.is-open { opacity: 1; pointer-events: auto; }
.rq-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 2001; inline-size: min(520px, calc(100 * var(--rq-vw, 1vw))); display: flex; flex-direction: column; background: var(--rq-surface); border-inline-start: 1px solid var(--rq-border); box-shadow: var(--rq-shadow-drawer); transform: translateX(104%); transition: transform var(--rq-dur-slow) var(--rq-ease); visibility: hidden; }
[dir="rtl"] .rq-drawer { transform: translateX(-104%); }
.rq-drawer.is-open { transform: none; visibility: visible; }
.rq-drawer__head { display: flex; align-items: center; gap: var(--rq-s-3); padding: var(--rq-s-4) var(--rq-s-5); border-block-end: 1px solid var(--rq-border); }
.rq-drawer__title { margin: 0; flex: 1; font-size: var(--rq-fs-md); font-weight: var(--rq-fw-semibold); }
.rq-drawer__body { flex: 1; overflow: auto; padding: var(--rq-s-5); }
.rq-drawer__foot { display: flex; gap: var(--rq-s-2); justify-content: flex-end; padding: var(--rq-s-3) var(--rq-s-5); border-block-start: 1px solid var(--rq-border); background: var(--rq-surface-2); }
.rq-dl { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 8px var(--rq-s-4); margin: 0; font-size: var(--rq-fs-sm); }
.rq-dl dt { color: var(--rq-muted); font-weight: var(--rq-fw-medium); }
.rq-dl dd { margin: 0; color: var(--rq-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ---- Lists, feeds, meters -------------------------------------------------------------------------- */
.rq-list { list-style: none; margin: 0; padding: 0; }
.rq-list__item { display: flex; align-items: center; gap: var(--rq-s-3); padding: 10px var(--rq-s-4); border-block-end: 1px solid var(--rq-border); min-block-size: 52px; }
.rq-list__item:last-child { border-block-end: 0; }
.rq-list__main { flex: 1; min-inline-size: 0; }
.rq-list__title { font-weight: var(--rq-fw-semibold); font-size: var(--rq-fs-sm); color: var(--rq-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-list__meta { font-size: var(--rq-fs-xs); color: var(--rq-muted); }
.rq-list__time { font-size: var(--rq-fs-xs); color: var(--rq-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rq-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--rq-neutral); flex: none; }
.rq-dot--ok { background: var(--rq-ok-dot); } .rq-dot--warn { background: var(--rq-warn-dot); } .rq-dot--danger { background: var(--rq-danger-dot); } .rq-dot--info { background: var(--rq-info-dot); } .rq-dot--violet { background: var(--rq-violet-dot); }
.rq-meter { display: flex; block-size: 12px; border-radius: var(--rq-r-pill); overflow: hidden; background: var(--rq-sunken); gap: 2px; }
.rq-meter > span { block-size: 100%; min-inline-size: 4px; }
.rq-legend { display: flex; flex-wrap: wrap; gap: var(--rq-s-3) var(--rq-s-5); margin: var(--rq-s-3) 0 0; padding: 0; list-style: none; font-size: var(--rq-fs-sm); }
.rq-legend li { display: inline-flex; align-items: center; gap: 8px; color: var(--rq-text-2); }
.rq-legend strong { color: var(--rq-text); font-variant-numeric: tabular-nums; }
.rq-bars { display: flex; align-items: flex-end; gap: 6px; block-size: 160px; padding-block-start: var(--rq-s-2); }
.rq-bars__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; block-size: 100%; min-inline-size: 0; }
.rq-bars__bar { inline-size: 100%; max-inline-size: 38px; border-start-start-radius: 6px; border-start-end-radius: 6px; background: linear-gradient(180deg, var(--rq-chart-1), color-mix(in srgb, var(--rq-chart-1) 55%, var(--rq-chart-2))); min-block-size: 3px; transform-origin: bottom; animation: rq-grow var(--rq-dur-slow) var(--rq-ease) both; }
.rq-bars__col:hover .rq-bars__bar { filter: brightness(1.1); }
.rq-bars__label { font-size: var(--rq-fs-2xs); color: var(--rq-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
@keyframes rq-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---- Report template (see Pages/Shared/_ReportTemplate guidance in design-system.md) ------------------ */
.rq-report { display: grid; gap: var(--rq-s-3); }
.rq-report__filters { background: var(--rq-surface); border: 1px solid var(--rq-border); border-radius: var(--rq-r-lg); box-shadow: var(--rq-shadow-1); padding: var(--rq-s-4); }
.rq-report__totals { display: flex; gap: var(--rq-s-4); flex-wrap: wrap; align-items: center; padding: var(--rq-s-3) var(--rq-s-4); background: var(--rq-accent-soft); border: 1px solid var(--rq-accent-line); border-radius: var(--rq-r-lg); }
.rq-report__totals[hidden] { display: none; }
.rq-report__total { display: flex; flex-direction: column; min-inline-size: 110px; }
.rq-report__total span { font-size: var(--rq-fs-xs); color: var(--rq-text-2); }
.rq-report__total strong { font-size: var(--rq-fs-lg); font-variant-numeric: tabular-nums; }
.rq-report__placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--rq-s-10) var(--rq-s-4); background: var(--rq-surface); border: 1px dashed var(--rq-border-strong); border-radius: var(--rq-r-lg); text-align: center; color: var(--rq-muted); }
.rq-report__placeholder[hidden] { display: none; }
.rq-report.is-pristine .rq-report__results, .rq-report.is-pristine [data-report-actions] { display: none; }

/* Pre-search report pages: the old page layout shows "Total 0.00 / No records" before a search; hide until the first search runs. */
body.rq-report-pristine .e-pager .e-pagerconstant, body.rq-report-pristine .e-gridfooter, body.rq-report-pristine .e-summaryrow { display: none; }

/* ---- Toasts (custom) --------------------------------------------------------------------------------- */
#toast_container { position: fixed; inset-block-end: var(--rq-s-4); inset-inline-end: var(--rq-s-4); z-index: 4000; display: flex; flex-direction: column; gap: var(--rq-s-2); max-inline-size: min(420px, calc(calc(100 * var(--rq-vw, 1vw)) - 32px)); }

/* ---- Utilities ------------------------------------------------------------------------------------------ */
.rq-stack { display: grid; gap: var(--rq-s-4); }
.rq-row { display: flex; align-items: center; gap: var(--rq-s-2); flex-wrap: wrap; }
.rq-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rq-s-4); }
.rq-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rq-s-4); }
.rq-grid-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--rq-s-4); }
@media (max-width: 1100px) { .rq-grid-main, .rq-grid-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .rq-grid-2 { grid-template-columns: minmax(0, 1fr); } .rq-kpi__value { font-size: var(--rq-fs-xl); } }

/* Paired bar chart (income vs expense) */
.rq-bars--pairs { block-size: 200px; gap: 8px; }
.rq-bars__pair { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; inline-size: 100%; min-block-size: 0; }
.rq-bars__pair .rq-bars__bar { inline-size: 42%; max-inline-size: 20px; }
.rq-bars__bar--exp { background: linear-gradient(180deg, var(--rq-chart-5), color-mix(in srgb, var(--rq-chart-5) 55%, var(--rq-chart-4))); }
.rq-meter { block-size: 14px; }

/* Legacy empty-state markup emitted by lookup-crud.js / lookups.js (same visual as .rq-empty-state) */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: var(--rq-s-8) var(--rq-s-4); text-align: center; color: var(--rq-muted); font-size: var(--rq-fs-sm); }
.empty-state h6, .empty-state .empty-title { margin: 0; color: var(--rq-text); font-size: var(--rq-fs-md); font-weight: var(--rq-fw-semibold); }
.empty-state .empty-icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; margin-block-end: 6px; border-radius: 16px; background: var(--rq-accent-soft); color: var(--rq-accent-text); box-shadow: inset 0 0 0 1px var(--rq-accent-line); }
.empty-state .empty-icon svg { inline-size: 24px; block-size: 24px; }
.empty-state .empty-icon svg path { fill: none; stroke: currentColor; }
.empty-state .empty-action { margin-block-start: var(--rq-s-3); }

/* ---- Row action menu (kebab) ---- */
.rq-rowmenu { display: inline-flex; }
.rq-popmenu { position: fixed; z-index: 3500; min-inline-size: 190px; padding: 6px; background: var(--rq-surface); border: 1px solid var(--rq-border); border-radius: var(--rq-r-lg); box-shadow: var(--rq-shadow-pop); animation: rq-pop var(--rq-dur-fast) var(--rq-ease); }
.rq-popmenu__item { display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: var(--rq-h); padding: 0 10px; border: 0; border-radius: var(--rq-r-md); background: transparent; color: var(--rq-text); font: inherit; font-size: var(--rq-fs-base); text-align: start; cursor: pointer; }
.rq-popmenu__item i { inline-size: 16px; text-align: center; color: var(--rq-muted); }
.rq-popmenu__item:hover, .rq-popmenu__item:focus-visible { background: var(--rq-hover); outline-offset: -2px; }
.rq-popmenu__item:hover i { color: var(--rq-accent-text); }

/* Phones: hero KPI spans the row, the rest sit two-up */
@media (max-width: 640px) {
  .rq-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rq-s-3); }
  .rq-kpi--hero { grid-column: 1 / -1; }
  .rq-kpi--hero ~ .rq-kpi:last-child:nth-child(even) { grid-column: 1 / -1; }
  .rq-kpi { padding: var(--rq-s-3); }
  .rq-kpi__foot { flex-wrap: wrap; }
}

/* Pre-search report state: win over component display rules (grid/flex) declared later in page CSS */
body .rq-pre-search-hidden { display: none; }

/* ---- w3_forms: legacy Bootstrap list pages put a wide <table> straight into a card; scroll the card, never the page (1024px and below) ---- */
main .card-surface:has(> table), main .card-surface:has(> .table), main .card-surface:has(> div > table.table) { overflow-x: auto; max-inline-size: 100%; position: relative; }
.rq-lines-wrap { overflow-x: auto; position: relative; }

/* ---- c1_f11: attached-document badge (paperclip + count) in list grids. Tokens only, logical properties only, 44px touch target on narrow screens ---- */
.rq-doc-col { text-align: center; padding-inline: 4px; }
.e-grid td.e-rowcell.rq-doc-col { padding-inline: 4px; text-overflow: clip; overflow: visible; }
.rq-doc-col .e-headertext { color: var(--rq-muted); font-size: var(--rq-fs-sm); }
.rq-doc-badge-slot { display: inline-flex; align-items: center; justify-content: center; min-block-size: 24px; }
.rq-doc-badge {
  display: inline-flex; align-items: center; gap: 4px; min-block-size: 24px; padding: 0 8px; border-radius: var(--rq-r-pill);
  border: 1px solid var(--rq-accent-line); background: var(--rq-accent-soft); color: var(--rq-accent-text);
  font: inherit; font-size: var(--rq-fs-xs); font-weight: var(--rq-fw-medium); line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.rq-doc-badge i { font-size: 11px; }
.rq-doc-badge:hover { background: var(--rq-accent); border-color: var(--rq-accent); color: var(--rq-on-accent); }
.rq-doc-badge:focus-visible { outline: 2px solid var(--rq-focus); outline-offset: 2px; }
@media (max-width: 767.98px) {
  .rq-doc-badge { min-block-size: 32px; min-inline-size: 44px; justify-content: center; }
  .rq-doc-col .rq-doc-badge-slot { min-block-size: 44px; }
}

/* ---- ONE list toolbar pattern (c1_f20) -------------------------------------------------
   Title on the start side; search + filters + secondary actions (History) + ONE primary action on the end side.
   Producers: _LookupPageShell (header actions slot, [data-rq-toolbar-actions]) and Components/LookupGrid (.rq-toolbar-search-row).
   Wraps gracefully (search drops to its own full-width row on phones); logical properties only so RTL mirrors. All controls share --rq-h. */
[data-rq-toolbar-actions], .rq-toolbar-search-row { align-items: center; gap: var(--rq-s-2); }
.rq-toolbar__search { flex: 1 1 280px; max-inline-size: 360px; min-inline-size: 200px; margin: 0; }
[data-rq-toolbar-actions] .btn, [data-rq-toolbar-actions] .rq-action-button,
.rq-toolbar-search-row .btn, .rq-toolbar-search-row .rq-action-button,
[data-rq-toolbar-actions] .form-control, .rq-toolbar-search-row .form-control { min-block-size: var(--rq-h); block-size: var(--rq-h); }
.rq-toolbar-search-row .rq-toolbar__secondary { margin-inline-start: auto; }
.rq-toolbar-search-row .rq-toolbar__secondary + .btn { margin-inline-start: 0; }
.rq-toolbar-search-row .rq-toolbar__spacer { display: block; }
@media (max-width: 640px) {
  .rq-toolbar__search, .rq-toolbar-search-row .rq-search { flex-basis: 100%; max-inline-size: none; order: -1; }
  [data-rq-toolbar-actions] .btn, [data-rq-toolbar-actions] .rq-action-button { flex: 1 1 auto; }
}

/* ---- KPI tiles: balanced rows, never an orphan tile (c1_f20) -------------------------------
   The grid is a 60-column track so 2/3/4/5/6 tiles divide evenly; spans are chosen by the grid's OWN width (container query),
   not the viewport, because the sidebar changes the content width. Rows: n<=6 sit on one row when wide; 4 -> 2x2, 5 -> 3+2, 6 -> 3x2 when medium;
   two-up on phones with an odd last tile stretched. Applies to .rq-kpi-grid and the payroll .rq-hp-kpis. */
:is(.rq-kpi-grid, .rq-hp-kpis)[class] { --rq-kpi-gap: var(--rq-s-3); grid-template-columns: repeat(60, minmax(0, 1fr)); gap: 0; container-type: inline-size; margin-inline: calc(var(--rq-kpi-gap) / -2); }
/* 60 tracks cannot carry a gap (59 gaps); the visual gap is a half-gap margin on every tile and the negative margin above */
:is(.rq-kpi-grid, .rq-hp-kpis)[class] > * { grid-column: span 20; margin: calc(var(--rq-kpi-gap) / 2); min-inline-size: 0; }
@container (min-width: 900px) {
  :is(.rq-kpi-grid, .rq-hp-kpis)[class]:has(> :nth-child(2):last-child) > * { grid-column: span 30; }
  :is(.rq-kpi-grid, .rq-hp-kpis)[class]:has(> :nth-child(4):last-child) > * { grid-column: span 15; }
  :is(.rq-kpi-grid, .rq-hp-kpis)[class]:has(> :nth-child(5):last-child) > * { grid-column: span 12; }
  :is(.rq-kpi-grid, .rq-hp-kpis)[class]:has(> :nth-child(n+7)) > * { grid-column: span 15; }
}
@container (min-width: 560px) and (max-width: 899.98px) {
  :is(.rq-kpi-grid, .rq-hp-kpis)[class]:has(> :nth-child(2):last-child) > * { grid-column: span 30; }
  :is(.rq-kpi-grid, .rq-hp-kpis)[class]:has(> :nth-child(4):last-child) > * { grid-column: span 30; }
  :is(.rq-kpi-grid, .rq-hp-kpis)[class]:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 30; }
  :is(.rq-kpi-grid, .rq-hp-kpis)[class]:has(> :nth-child(n+7)) > * { grid-column: span 20; }
}
@container (max-width: 559.98px) {
  :is(.rq-kpi-grid, .rq-hp-kpis)[class] > * { grid-column: span 30; }
  :is(.rq-kpi-grid, .rq-hp-kpis)[class] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  :is(.rq-kpi-grid, .rq-hp-kpis)[class] > .rq-kpi--hero { grid-column: 1 / -1; }
}

/* ---- Disabled buttons keep the brand colours (c1_f20) --------------------------------------
   Bootstrap's .btn:disabled paints --bs-btn-disabled-bg (the Bootstrap primary blue) which is a foreign blue next to the indigo brand
   in every theme (e.g. a disabled Save on the settings cards). Keep the token colour; the .5 opacity from rq-base signals the state. */
.btn-primary:disabled, .btn-primary.disabled, fieldset:disabled .btn-primary { background: var(--rq-accent); border-color: var(--rq-accent); color: var(--rq-on-accent); }
.btn-secondary:disabled, .btn-outline-secondary:disabled, .btn-light:disabled, .btn-secondary.disabled, .btn-outline-secondary.disabled, .btn-light.disabled { background: var(--rq-surface); border-color: var(--rq-border-strong); color: var(--rq-text); }
.btn-danger:disabled, .btn-danger.disabled { background: var(--rq-danger); border-color: var(--rq-danger); color: var(--rq-on-accent); }
.btn-outline-danger:disabled, .btn-outline-danger.disabled { background: var(--rq-surface); border-color: var(--rq-danger-line); color: var(--rq-danger); }

/* One height per size token (c1_f20): link-style buttons and in-row controls follow the same sm/md/lg heights as .btn */
.btn.btn-link, .btn-link.btn-sm { min-block-size: var(--rq-h-sm); }
.rq-toolbar .form-select, .rq-toolbar .form-control, .rq-toolbar .btn:not(.btn-sm):not(.btn-lg) { min-block-size: var(--rq-h); }
.rq-title-bar > [data-rq-toolbar-actions] { flex: 1 1 auto; justify-content: flex-end; flex-wrap: nowrap; min-inline-size: 0; max-inline-size: none; }
.rq-title-bar > [data-rq-toolbar-actions] .rq-toolbar__search { flex: 1 1 240px; }
@media (max-width: 640px) { .rq-title-bar > [data-rq-toolbar-actions] { flex-wrap: wrap; inline-size: 100%; } }

/* ---- c1_f22: popups promoted to the top layer by wwwroot/js/rq/rq-popup.js (never clipped by an ancestor overflow) ---------------------- */
:where([popover].rq-popup-layer) { margin: 0; inset: auto; color: var(--rq-text); background-color: var(--rq-surface); max-inline-size: calc(calc(100 * var(--rq-vw, 1vw)) - 16px); box-sizing: border-box; overscroll-behavior: contain; }
.rq-popup-layer { z-index: 3600; }
.rq-popup-layer--sheet { border-radius: var(--rq-r-xl); box-shadow: var(--rq-shadow-pop); }

/* ---- c1_f31: toolbar filter select + grouped grid caption (car models by producer) -------------------------------------------- */
.rq-toolbar__filter { flex: 0 1 230px; min-inline-size: 160px; margin: 0; }
.rq-toolbar__filter .e-input-group, .rq-toolbar__filter .e-ddl.e-input-group { min-block-size: var(--rq-h); }
@media (max-width: 640px) { .rq-toolbar__filter { flex-basis: 100%; order: -1; } }
.rq-group-caption { display: inline-flex; align-items: center; gap: var(--rq-s-2); font-weight: 600; color: var(--rq-text); }
.rq-group-caption__count { display: inline-block; min-inline-size: 1.6em; padding: 0 var(--rq-s-2); border-radius: var(--rq-r-pill); background: var(--rq-accent-soft); color: var(--rq-accent-text); font-size: var(--rq-fs-sm); font-weight: 600; text-align: center; }

/* ---- c1_f37: shared combobox list (AX.picker of the accounting workspace, R.combobox of the rental workspace) ------------------------------------------------------
   One definition for every search-as-you-type picker. The panel is promoted to the top layer and sized to the field by RqPopup (matchWidth); here: the options wrap instead of
   being clipped (long Arabic names), the scrollbar gets its own gutter so it never overlaps the text, the typed match is marked, RTL follows the document direction. */
.rq-combo { position: relative; }
.rq-combo__list { position: absolute; inset-inline: 0; inset-block-start: calc(100% + 4px); z-index: 30; margin: 0; padding: 4px; list-style: none; box-sizing: border-box; min-inline-size: 0; max-block-size: 280px; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; text-align: start; background: var(--rq-surface); border: 1px solid var(--rq-border); border-radius: var(--rq-r-lg); box-shadow: var(--rq-shadow-pop); }
.rq-combo__opt { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rq-s-3); min-block-size: var(--rq-h); padding: 6px 10px; border-radius: var(--rq-r-md); cursor: pointer; color: var(--rq-text); line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.rq-combo__main { min-inline-size: 0; flex: 1 1 auto; }
.rq-combo__code { font-variant-numeric: tabular-nums; color: var(--rq-muted); }
.rq-combo__opt.is-active, .rq-combo__opt:hover { background: var(--rq-accent-soft); }
.rq-combo__opt mark { padding: 0; background: transparent; color: var(--rq-accent-text, inherit); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.rq-combo__sub { flex: 0 0 auto; color: var(--rq-muted); white-space: nowrap; }
.rq-combo__empty, .rq-combo__more { padding: 10px; color: var(--rq-muted); font-size: var(--rq-fs-sm); }