/* Jalal admin panel — the shared components every page is built from
   (cards, tables, chips, buttons, fields, alerts, Bootstrap's widgets),
   drawn in Aram, the panel's design system. Aram's tokens and the frame
   (sidebar, top bar) live in aram.css; this file maps the older --jl-*
   tokens and Bootstrap's --bs-* variables onto them, so page stylesheets
   written against either pick Aram up without being rewritten.
   Any page that links this file must link aram.css too — without its
   tokens every colour, font and radius here resolves to nothing.
   RTL-aware via logical properties. */

/* ─── Tokens ──────────────────────────────────────────────────────────── */
/* The --jl-* names stay — fifteen page stylesheets read them — but each one
   is now an Aram token. Status colours are dark enough to work both as text
   and as a fill under white text. The *-rgb triples feed rgba() and cannot
   alias a hex, so they repeat the colour and must change with it. */
:root {
  /* Surfaces */
  --jl-bg: var(--a-canvas);
  --jl-surface: var(--a-surface);
  --jl-surface-2: var(--a-surface-subtle);
  --jl-surface-hover: var(--a-hover);

  /* Text: data reads near-black, explanations one step softer */
  --jl-heading: var(--a-text);
  --jl-text: var(--a-text-secondary);
  --jl-text-strong: var(--a-text);
  --jl-text-muted: var(--a-text-tertiary);

  /* Borders */
  --jl-border: var(--a-border);
  --jl-border-strong: var(--a-border-strong);

  /* Brand */
  --jl-primary: var(--a-accent);
  --jl-primary-hover: var(--a-accent-hover);
  --jl-primary-active: var(--a-accent-hover);
  --jl-primary-light: var(--a-accent-soft);
  --jl-primary-rgb: 15, 118, 110;

  /* Status */
  --jl-success: var(--a-success);
  --jl-success-light: var(--a-success-soft);
  --jl-danger: var(--a-danger);
  --jl-danger-light: var(--a-danger-soft);
  --jl-warning: var(--a-warning);
  --jl-warning-light: var(--a-warning-soft);
  --jl-info: var(--a-info);
  --jl-info-light: var(--a-info-soft);

  /* Effects: Aram surfaces are flat at rest; depth is for what floats */
  --jl-shadow-sm: none;
  --jl-shadow: 0 1px 2px rgb(28 25 23 / .05);
  --jl-shadow-lg: var(--a-shadow-popover);
  --jl-shadow-topbar: 0 1px 0 var(--jl-border);
  --jl-radius: var(--a-r-card);
  --jl-radius-sm: var(--a-r-control);
  --jl-radius-pill: 999px;

  /* Layout */
  /* 72px as a rail at laptop widths — see aram.css. Grows with Aram's type
     sizes, 248px up to a 1280px-wide window and 268px from 2560px. */
  --jl-sidebar-w: clamp(248px, 228px + 1.5625vw, 268px);
  --jl-topbar-h: 64px;

  /* Bootstrap, re-pointed at Aram. Bootstrap's widgets read these, and so
     do its utilities (.text-primary, .bg-success, .border, .rounded, …). */
  --bs-font-sans-serif: var(--a-font);
  --bs-body-font-family: var(--a-font);
  --bs-body-font-size: var(--a-fs-ui);
  --bs-body-line-height: var(--a-lh-ui);
  --bs-body-color: var(--a-text);
  --bs-body-color-rgb: 28, 25, 23;
  --bs-body-bg: var(--a-canvas);
  --bs-emphasis-color: var(--a-text);
  --bs-secondary-color: var(--a-text-tertiary);
  --bs-tertiary-color: var(--a-text-tertiary);
  --bs-secondary-bg: var(--a-hover);
  --bs-tertiary-bg: var(--a-surface-subtle);
  --bs-heading-color: var(--a-text);
  --bs-border-color: var(--a-border);
  --bs-border-color-translucent: var(--a-border);
  --bs-border-radius: var(--a-r-control);
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: var(--a-r-card);
  --bs-border-radius-xl: var(--a-r-dialog);
  --bs-box-shadow-sm: 0 1px 2px rgb(28 25 23 / .05);
  --bs-box-shadow: var(--a-shadow-popover);
  --bs-box-shadow-lg: var(--a-shadow-dialog);
  --bs-link-color: var(--a-accent);
  --bs-link-color-rgb: 15, 118, 110;
  --bs-link-hover-color: var(--a-accent-hover);
  --bs-link-hover-color-rgb: 17, 94, 89;
  --bs-code-color: var(--a-text);
  --bs-highlight-bg: var(--a-warning-soft);
  --bs-focus-ring-color: rgb(15 118 110 / .25);
  --bs-primary: var(--a-accent);
  --bs-primary-rgb: 15, 118, 110;
  --bs-secondary-rgb: 87, 83, 78;
  --bs-success-rgb: 30, 122, 74;
  --bs-info-rgb: 41, 82, 204;
  --bs-warning-rgb: 224, 161, 0;
  --bs-danger-rgb: 220, 38, 38;
  --bs-light-rgb: 242, 242, 240;
  --bs-dark-rgb: 28, 25, 23;
  --bs-primary-text-emphasis: var(--a-accent-hover);
  --bs-primary-bg-subtle: var(--a-accent-soft);
  --bs-primary-border-subtle: color-mix(in srgb, var(--a-accent) 30%, var(--a-surface));
  --bs-success-text-emphasis: var(--a-success);
  --bs-success-bg-subtle: var(--a-success-soft);
  --bs-warning-text-emphasis: var(--a-warning);
  --bs-warning-bg-subtle: var(--a-warning-soft);
  --bs-danger-text-emphasis: var(--a-danger-fg);
  --bs-danger-bg-subtle: var(--a-danger-soft);
  --bs-info-text-emphasis: var(--a-info);
  --bs-info-bg-subtle: var(--a-info-soft);
  --bs-secondary-text-emphasis: var(--a-text-secondary);
  --bs-secondary-bg-subtle: var(--a-hover);
  --bs-light-text-emphasis: var(--a-text-secondary);
  --bs-light-bg-subtle: var(--a-surface-subtle);
}

/* ─── Base ────────────────────────────────────────────────────────────── */
html, body { height: 100%; }

body {
  background: var(--jl-bg);
  color: var(--a-text);
  font-family: var(--a-font);
  font-size: var(--a-fs-ui);
  line-height: var(--a-lh-ui);
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Bootstrap sets headings at 1.2, which crowds Persian's ascenders and
   dots on a second line. */
h1, h2, h3, h4, h5, h6 { color: var(--a-text); font-weight: 600; line-height: 1.5; }
a { color: var(--a-accent); text-decoration: none; }
a:hover { color: var(--a-accent-hover); }
code { color: var(--a-text); background: var(--a-hover); padding: .1rem .35rem; border-radius: 4px; }
/* Code inside small print keeps the print's size (Bootstrap shrinks it again). */
:is(small, .small, .form-text) code { font-size: 1em; }
/* Bootstrap's .small is 87.5% of its parent, which drops under Aram's
   12px floor inside anything already small. */
small, .small { font-size: max(var(--a-fs-caption), .875em); }
/* Selected text must be found at a glance: the accent at 30% is a clear
   teal on white and on the dark surfaces alike — as strong as the browser's
   own default — and the ink keeps its colour (11:1 light, 9:1 dark). The
   soft tint it replaces was a near-white wash a selection vanished into. */
::selection { background: color-mix(in srgb, var(--a-accent) 30%, transparent); color: inherit; }
/* One focus ring for every keyboard stop in the content area, the same
   one the frame draws. Fields add their own border change on top. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--a-focus-ring);
  outline-offset: 2px;
}

/* ─── Layout shell ────────────────────────────────────────────────────── */
/* The frame — sidebar, top bar, drawer, collapse, header hide/restore — is
   Aram now: see aram.css. The --jl-sidebar-w / --jl-topbar-h tokens and the
   html.jl-collapsed / html.jl-header-hidden states keep their meaning. */

/* ─── Content ─────────────────────────────────────────────────────────── */
.jl-content {
  padding: var(--a-sp-6);
  flex: 1 1 auto;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 767.98px) {
  .jl-content { padding-inline: var(--a-sp-4); }
}

/* The page's own title block, under the top bar (Aram's settings head). */
.jl-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--a-sp-4);
  margin-bottom: var(--a-sp-6);
  flex-wrap: wrap;
}
.jl-page-header h1 {
  font-size: var(--a-fs-page);
  line-height: var(--a-lh-page);
  font-weight: 700;
  margin: 0;
  color: var(--a-text);
}
.jl-page-header__sub {
  color: var(--a-text-secondary);
  font-size: var(--a-fs-body);
  line-height: var(--a-lh-body);
  max-width: 72ch;
  margin-top: var(--a-sp-1);
}
.jl-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--a-sp-2); }

/* ─── Cards ───────────────────────────────────────────────────────────── */
.jl-card {
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-card);
  box-shadow: none;
  overflow: hidden;
}
.jl-card + .jl-card { margin-top: var(--a-sp-4); }

.jl-card__header {
  padding: var(--a-sp-4) var(--a-sp-5);
  border-bottom: 1px solid var(--a-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-sp-4);
}
.jl-card__title {
  font-weight: 600;
  font-size: var(--a-fs-card);
  line-height: var(--a-lh-card);
  margin: 0;
  color: var(--a-text);
}
.jl-card__sub {
  display: block;
  color: var(--a-text-tertiary);
  font-size: var(--a-fs-meta);
  line-height: var(--a-lh-meta);
  font-weight: 400;
  margin-top: 2px;
}
/* A header action keeps its one line; the title gives way instead. */
.jl-card__header > .btn { flex-shrink: 0; white-space: nowrap; }
/* A header whose icon, title and count read as one label: they stay
   together at the start, and a caption takes the far end. */
.jl-card__header.jl-card__header--label { justify-content: flex-start; gap: var(--a-sp-2); }
.jl-card__header--label .jl-card__caption { margin-inline-start: auto; }
.jl-card__body { padding: var(--a-sp-5); }
.jl-card__body.p-0 { padding: 0; }
/* A table wider than its card scrolls inside it instead of being cut off
   by the card's rounded clip (phones, long rows). */
.jl-card__body:has(> table, > .jl-table) { overflow-x: auto; }
/* A phone cannot fit a wide table. From four columns up a table in a
   scrolling box keeps a readable width and scrolls sideways, rather than
   squeezing every column down to its longest word. */
@media (max-width: 767.98px) {
  :is(.jl-card__body, .table-responsive) > :is(table, .jl-table):has(> thead > tr > th:nth-child(4)) { width: max(100%, 34rem); }
  :is(.jl-card__body, .table-responsive) > :is(table, .jl-table):has(> thead > tr > th:nth-child(5)) { width: max(100%, 42rem); }
  :is(.jl-card__body, .table-responsive) > :is(table, .jl-table):has(> thead > tr > th:nth-child(7)) { width: max(100%, 54rem); }
  /* …and no column but the first (an id or a checkbox) narrower than a short phrase. */
  :is(.jl-card__body, .table-responsive) > :is(table, .jl-table):has(> thead > tr > th:nth-child(4)) > tbody > tr > td:not(:first-child) { min-width: 5.5rem; }
}

/* ─── Dashboard ───────────────────────────────────────────────────────── */
/* Three bands in the order a day uses them: the teams and their tools, what
   was worked on lately, and — last — what it cost. */
.jl-dash { display: flex; flex-direction: column; gap: var(--a-sp-10); }
.jl-dash__section { min-width: 0; }

.jl-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-sp-4);
  margin: 0 0 var(--a-sp-4);
}
.jl-section-title {
  margin: 0;
  font-size: var(--a-fs-section);
  line-height: var(--a-lh-section);
  font-weight: 600;
  color: var(--a-text);
}

/* Teams. A team wears the tint its tile has in the sidebar (id mod 6). A
   lone team spans the row and lays itself out sideways. */
.jl-teams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--a-sp-4);
}
.jl-team {
  container-type: inline-size;
  min-width: 0;
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-card);
}
.jl-team__inner {
  display: flex;
  flex-direction: column;
  gap: var(--a-sp-5);
  height: 100%;
  padding: var(--a-sp-5);
}
.jl-team__main { flex: 1 1 auto; min-width: 0; }
.jl-team__head { display: flex; align-items: center; gap: var(--a-sp-3); }
.jl-team__tile {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--tint-bg, var(--a-tint0-bg));
  color: var(--tint-fg, var(--a-tint0-fg));
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.jl-team__id { flex: 1 1 auto; min-width: 0; }
.jl-team__name {
  margin: 0;
  font-size: var(--a-fs-card);
  line-height: var(--a-lh-card);
  font-weight: 600;
  color: var(--a-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jl-team__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--a-sp-4);
  margin: 0;
  font-size: var(--a-fs-meta);
  line-height: var(--a-lh-meta);
  color: var(--a-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.jl-team__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.jl-team__meta .a-ic { width: 14px; height: 14px; }
.jl-team__manage {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding-block: 2px;
  font-size: var(--a-fs-meta);
  font-weight: 500;
  color: var(--a-accent);
}
.jl-team__manage .a-ic { width: 14px; height: 14px; }
.jl-team__manage:hover { color: var(--a-accent-hover); text-decoration: underline; text-underline-offset: 4px; }
.jl-team__desc {
  margin: var(--a-sp-3) 0 0;
  font-size: var(--a-fs-ui);
  line-height: var(--a-lh-ui);
  color: var(--a-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jl-team__desc.is-empty { color: var(--a-text-tertiary); }

/* The tools: one joined bar, the same three for every team. */
.jl-team__tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-control);
  overflow: hidden;
  background: var(--a-surface-subtle);
}
.jl-team__tool {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-sp-2);
  min-height: 48px;
  padding: 0 var(--a-sp-3);
  color: var(--a-text);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--a-dur-hover) var(--a-ease);
}
.jl-team__tool + .jl-team__tool { border-inline-start: 1px solid var(--a-border); }
.jl-team__tool .a-ic { color: var(--a-accent); }
.jl-team__tool:hover { background: var(--a-hover); color: var(--a-text); }
.jl-team__tool:active { background: var(--a-border); }
.jl-team__tool:focus-visible { outline: 2px solid var(--a-focus-ring); outline-offset: -2px; }
@container (min-width: 720px) {
  .jl-team__inner { flex-direction: row; align-items: center; gap: var(--a-sp-8); }
  .jl-team__tools { flex: 0 0 min(400px, 45%); }
}

/* Recent work: four lists, two by two where there is room. A row is one
   link; «باز کردن» shows on hover or focus, and always on touch. */
.jl-feeds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: var(--a-sp-4);
}
.jl-feed {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-card);
  overflow: hidden;
}
.jl-feed__head {
  display: flex;
  align-items: center;
  gap: var(--a-sp-3);
  min-height: 64px;
  padding: var(--a-sp-3) var(--a-sp-5);
  border-bottom: 1px solid var(--a-border);
}
.jl-feed__glyph {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 8px;
  background: var(--a-hover);
  color: var(--a-text-secondary);
}
.jl-feed__glyph .a-ic { width: 16px; height: 16px; }
.jl-feed__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: var(--a-fs-card);
  line-height: var(--a-lh-card);
  font-weight: 600;
  color: var(--a-text);
}
.jl-feed__all {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--a-fs-meta);
  font-weight: 500;
  color: var(--a-accent);
  white-space: nowrap;
}
.jl-feed__all .a-ic { width: 14px; height: 14px; }
.jl-feed__all:hover { color: var(--a-accent-hover); text-decoration: underline; text-underline-offset: 4px; }
.jl-feed__list { list-style: none; margin: 0; padding: 0; }
.jl-feed__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--a-sp-3);
  padding: var(--a-sp-3) var(--a-sp-5);
  transition: background-color var(--a-dur-hover) var(--a-ease);
}
.jl-feed__row + .jl-feed__row { border-top: 1px solid var(--a-border); }
.jl-feed__row:hover,
.jl-feed__row:focus-within { background: var(--a-surface-subtle); }
.jl-feed__main { flex: 1 1 auto; min-width: 0; }
.jl-feed__name {
  display: block;
  color: var(--a-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jl-feed__name:hover { color: var(--a-text); }
.jl-feed__name::after { content: ""; position: absolute; inset: 0; }
.jl-feed__name:focus-visible { outline: none; }
.jl-feed__row:has(.jl-feed__name:focus-visible) { box-shadow: inset 0 0 0 2px var(--a-focus-ring); }
.jl-feed__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--a-sp-3);
  margin: 2px 0 0;
  font-size: var(--a-fs-meta);
  line-height: var(--a-lh-meta);
  color: var(--a-text-tertiary);
}
.jl-feed__who { color: var(--a-text-secondary); }
.jl-feed__meta .jl-chip { margin: 0; }
.jl-feed__open {
  position: relative;
  z-index: 1;
  flex: none;
  opacity: 0;
  transition: opacity var(--a-dur-hover) var(--a-ease);
}
.jl-feed__row:hover .jl-feed__open,
.jl-feed__row:focus-within .jl-feed__open { opacity: 1; }
@media (hover: none) { .jl-feed__open { opacity: 1; } }
.jl-feed__empty { flex: 1 1 auto; justify-content: center; padding: var(--a-sp-8) var(--a-sp-6); }
.jl-dash-date {
  white-space: nowrap;
  font-size: var(--a-fs-meta);
  color: var(--a-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.jl-link-strong { color: var(--jl-text-strong); font-weight: 500; }
.jl-link-strong:hover { color: var(--jl-primary); }

/* ─── Stat tiles ──────────────────────────────────────────────────────── */
.jl-stat {
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-card);
  box-shadow: none;
  padding: var(--a-sp-4) var(--a-sp-5);
  display: flex;
  align-items: flex-start;
  gap: var(--a-sp-3);
  height: 100%;
}
.jl-stat__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--a-r-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  background: var(--a-accent-soft);
  color: var(--a-accent);
}
/* Stat tile rendered as an anchor (dashboard quick links). */
.jl-stat--link {
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--a-dur-hover) var(--a-ease), border-color var(--a-dur-hover) var(--a-ease);
}
.jl-stat--link:hover {
  box-shadow: var(--a-shadow-card-hover);
  border-color: var(--a-border-strong);
  color: inherit;
}
.jl-stat__icon > .a-ic { inline-size: 20px; block-size: 20px; vertical-align: 0; }
.jl-stat__icon--success { background: var(--a-success-soft); color: var(--a-success); }
.jl-stat__icon--warning { background: var(--a-warning-soft); color: var(--a-warning); }
.jl-stat__icon--info    { background: var(--a-info-soft);    color: var(--a-info); }
.jl-stat__icon--danger  { background: var(--a-danger-soft);  color: var(--a-danger-fg); }

.jl-stat__body { flex: 1 1 auto; min-width: 0; }
.jl-stat__label {
  font-size: var(--a-fs-meta);
  line-height: var(--a-lh-meta);
  color: var(--a-text-tertiary);
  margin-bottom: 2px;
}
/* Proportional figures: one number has nothing to line up with, and tabular
   widths open Persian digits (a dot for zero) into gaps. */
.jl-stat__value {
  font-size: var(--a-fs-page);
  font-weight: 700;
  color: var(--a-text);
  line-height: 1.3;
}
.jl-stat__link {
  display: inline-block;
  margin-top: var(--a-sp-1);
  font-size: var(--a-fs-meta);
  color: var(--a-accent);
}
.jl-stat__link:hover { color: var(--a-accent-hover); }

/* ─── Tables ──────────────────────────────────────────────────────────── */
/* Persian has no letter case, and letter-spacing pulls its joined letters
   apart, so headers are set small and quiet instead. */
.jl-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--a-fs-ui);
  line-height: 1.7;
}
.jl-table thead th {
  background: var(--a-surface-subtle);
  color: var(--a-text-tertiary);
  font-weight: 600;
  font-size: var(--a-fs-caption);
  line-height: var(--a-lh-caption);
  border-bottom: 1px solid var(--a-border);
  padding: 10px var(--a-sp-4);
  text-align: start;
  white-space: nowrap;
}
.jl-table thead th:first-child { padding-inline-start: var(--a-sp-5); }
.jl-table thead th:last-child  { padding-inline-end: var(--a-sp-5); }

.jl-table tbody td {
  padding: var(--a-sp-3) var(--a-sp-4);
  border-bottom: 1px solid var(--a-border);
  vertical-align: middle;
  color: var(--a-text);
}
.jl-table tbody td:first-child { padding-inline-start: var(--a-sp-5); }
.jl-table tbody td:last-child  { padding-inline-end: var(--a-sp-5); }
.jl-table tbody tr:last-child td { border-bottom: 0; }
.jl-table tbody tr { transition: background-color var(--a-dur-hover) var(--a-ease); }
.jl-table tbody tr:hover { background: var(--a-surface-subtle); }
/* Sortable column header — the whole cell is the link target. */
.jl-table thead th.jl-sort { padding: 0; }
.jl-table thead th.jl-sort > a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--a-sp-4);
  color: inherit;
  text-decoration: none;
}
.jl-table thead th.jl-sort:first-child > a { padding-inline-start: var(--a-sp-5); }
.jl-table thead th.jl-sort:last-child  > a { padding-inline-end: var(--a-sp-5); }
.jl-table thead th.jl-sort > a:hover { color: var(--a-text); }
.jl-table thead th.jl-sort--active > a { color: var(--a-text); }
.jl-table thead th.jl-sort .a-ic { inline-size: 13px; block-size: 13px; vertical-align: 0; }
/* The idle both-ways arrow only hints that the column is clickable. */
.jl-table thead th.jl-sort .jl-sort__idle { opacity: .35; }
.jl-table thead th.jl-sort > a:hover .jl-sort__idle { opacity: .75; }

/* AI queue: the prompt column. A prompt is the widest thing in the table,
   so it is boxed to a readable measure — the cell shows the first line and
   the tooltip (and the details modal) carry the rest. */
.jl-table .jl-req-prompt { min-width: 16rem; max-width: 26rem; }
.jl-table .jl-req-prompt > div:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jl-table .jl-actions { white-space: nowrap; text-align: end; }
.jl-table .jl-actions .btn-sm { --bs-btn-padding-x: 10px; }
.jl-table .jl-actions .btn + .btn,
.jl-table .jl-actions .btn + form { margin-inline-start: var(--a-sp-1); }

/* Empty state: an icon in a quiet disc, then one line that says what to do. */
.jl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--a-sp-3);
  padding: var(--a-sp-10) var(--a-sp-6);
  color: var(--a-text-secondary);
  text-align: center;
  font-size: var(--a-fs-ui);
  line-height: var(--a-lh-ui);
}
.jl-empty > i:first-child,
.jl-empty > .a-ic:first-child {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 50%;
  background: var(--a-hover);
  color: var(--a-text-secondary);
  font-size: 20px;
  line-height: 1;
  box-sizing: border-box;
}
.jl-empty > .mt-2 { margin-top: 0 !important; }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
/* Aram's four kinds — primary (one per view), secondary, ghost, danger —
   mapped onto Bootstrap's class names. Heights come from the control
   scale: 40px, 32px for -sm (44px / 40px under a coarse pointer). Every
   variant sets Bootstrap's own --bs-btn-* variables, so :hover, :active,
   .active, :disabled and .btn-check states all follow. */
.btn {
  --bs-btn-padding-x: var(--a-sp-4);
  --bs-btn-padding-y: 6px;
  --bs-btn-font-family: var(--a-font);
  --bs-btn-font-size: var(--a-fs-ui);
  --bs-btn-font-weight: 500;
  --bs-btn-line-height: 1.5;
  --bs-btn-border-radius: var(--a-r-control);
  --bs-btn-box-shadow: none;
  --bs-btn-focus-box-shadow: none;
  --bs-btn-disabled-opacity: 1;
  --bs-btn-disabled-bg: var(--a-hover);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-color: var(--a-text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--a-sp-2);
  min-height: var(--a-ctl);
  transition: background-color var(--a-dur-hover) var(--a-ease), border-color var(--a-dur-hover) var(--a-ease),
              color var(--a-dur-hover) var(--a-ease);
}
.btn:focus-visible {
  outline: 2px solid var(--a-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}
.btn > .a-ic { width: 16px; height: 16px; }
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-x: var(--a-sp-3);
  --bs-btn-padding-y: 3px;
  --bs-btn-font-size: var(--a-fs-meta);
  --bs-btn-border-radius: 8px;
  gap: 6px;
  min-height: 32px;
}
@media (pointer: coarse) { .btn-sm, .btn-group-sm > .btn { min-height: 40px; } }
.btn-lg {
  --bs-btn-padding-x: var(--a-sp-5);
  --bs-btn-font-size: var(--a-fs-body);
  min-height: 48px;
}

/* Primary: the one solid action of a view. */
.btn-primary {
  --bs-btn-color: var(--a-on-accent);
  --bs-btn-bg: var(--a-accent);
  --bs-btn-border-color: var(--a-accent);
  --bs-btn-hover-color: var(--a-on-accent);
  --bs-btn-hover-bg: var(--a-accent-hover);
  --bs-btn-hover-border-color: var(--a-accent-hover);
  --bs-btn-active-color: var(--a-on-accent);
  --bs-btn-active-bg: var(--a-accent-hover);
  --bs-btn-active-border-color: var(--a-accent-hover);
}

/* Secondary: white with a border — every other action. */
.btn-secondary,
.btn-outline-secondary {
  --bs-btn-color: var(--a-text);
  --bs-btn-bg: var(--a-surface);
  --bs-btn-border-color: var(--a-border-strong);
  --bs-btn-hover-color: var(--a-text);
  --bs-btn-hover-bg: var(--a-hover);
  --bs-btn-hover-border-color: var(--a-border-strong);
  --bs-btn-active-color: var(--a-text);
  --bs-btn-active-bg: var(--a-border);
  --bs-btn-active-border-color: var(--a-border-strong);
}

/* A secondary button that leads somewhere in the brand colour. */
.btn-outline-primary {
  --bs-btn-color: var(--a-accent);
  --bs-btn-bg: var(--a-surface);
  --bs-btn-border-color: var(--a-border-strong);
  --bs-btn-hover-color: var(--a-accent-hover);
  --bs-btn-hover-bg: var(--a-accent-soft);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--a-accent) 30%, var(--a-surface));
  --bs-btn-active-color: var(--a-accent-hover);
  --bs-btn-active-bg: var(--a-accent-soft);
  --bs-btn-active-border-color: var(--a-accent);
}

/* Ghost: no frame until hovered. */
.btn-light,
.btn-ghost {
  --bs-btn-color: var(--a-text-secondary);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--a-text);
  --bs-btn-hover-bg: var(--a-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--a-text);
  --bs-btn-active-bg: var(--a-border);
  --bs-btn-active-border-color: transparent;
}

/* Danger: solid only where it confirms; outlined where it is one of several. */
.btn-danger {
  --bs-btn-color: var(--a-on-danger);
  --bs-btn-bg: var(--a-danger);
  --bs-btn-border-color: var(--a-danger);
  --bs-btn-hover-color: var(--a-on-danger);
  --bs-btn-hover-bg: var(--a-danger-hover);
  --bs-btn-hover-border-color: var(--a-danger-hover);
  --bs-btn-active-color: var(--a-on-danger);
  --bs-btn-active-bg: var(--a-danger-hover);
  --bs-btn-active-border-color: var(--a-danger-hover);
}
.btn-outline-danger {
  --bs-btn-color: var(--a-danger-fg);
  --bs-btn-bg: var(--a-surface);
  --bs-btn-border-color: var(--a-border-strong);
  --bs-btn-hover-color: var(--a-danger-fg);
  --bs-btn-hover-bg: var(--a-danger-soft);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--a-danger) 35%, var(--a-surface));
  --bs-btn-active-color: var(--a-on-danger);
  --bs-btn-active-bg: var(--a-danger);
  --bs-btn-active-border-color: var(--a-danger);
}

/* Success / warning / info keep their meaning (approve, caution, note). */
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--a-success);
  --bs-btn-border-color: var(--a-success);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--a-success) 85%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--a-success) 85%, #000);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--a-success) 85%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--a-success) 85%, #000);
}
.btn-warning {
  --bs-btn-color: #1C1917;
  --bs-btn-bg: var(--a-st-review-dot);
  --bs-btn-border-color: var(--a-st-review-dot);
  --bs-btn-hover-color: #1C1917;
  --bs-btn-hover-bg: color-mix(in srgb, var(--a-st-review-dot) 88%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--a-st-review-dot) 88%, #000);
  --bs-btn-active-color: #1C1917;
  --bs-btn-active-bg: color-mix(in srgb, var(--a-st-review-dot) 88%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--a-st-review-dot) 88%, #000);
}
.btn-outline-success,
.btn-outline-warning,
.btn-outline-info {
  --bs-btn-bg: var(--a-surface);
  --bs-btn-border-color: var(--a-border-strong);
  --bs-btn-hover-border-color: var(--a-border-strong);
  --bs-btn-active-border-color: var(--a-border-strong);
}
.btn-outline-success {
  --bs-btn-color: var(--a-success);
  --bs-btn-hover-color: var(--a-success);
  --bs-btn-hover-bg: var(--a-success-soft);
  --bs-btn-active-color: var(--a-success);
  --bs-btn-active-bg: var(--a-success-soft);
}
.btn-outline-warning {
  --bs-btn-color: var(--a-warning);
  --bs-btn-hover-color: var(--a-warning);
  --bs-btn-hover-bg: var(--a-warning-soft);
  --bs-btn-active-color: var(--a-warning);
  --bs-btn-active-bg: var(--a-warning-soft);
}
.btn-outline-info {
  --bs-btn-color: var(--a-info);
  --bs-btn-hover-color: var(--a-info);
  --bs-btn-hover-bg: var(--a-info-soft);
  --bs-btn-active-color: var(--a-info);
  --bs-btn-active-bg: var(--a-info-soft);
}

/* Link: an action that reads as text. */
.btn-link {
  --bs-btn-color: var(--a-accent);
  --bs-btn-hover-color: var(--a-accent-hover);
  --bs-btn-active-color: var(--a-accent-hover);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-padding-x: var(--a-sp-2);
  text-decoration: none;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ─── Forms ───────────────────────────────────────────────────────────── */
.form-label {
  font-weight: 500;
  font-size: var(--a-fs-meta);
  line-height: var(--a-lh-meta);
  color: var(--a-text-secondary);
  margin-bottom: 6px;
}
.form-text {
  font-size: var(--a-fs-caption);
  line-height: var(--a-lh-caption);
  color: var(--a-text-tertiary);
}

.form-control, .form-select {
  min-height: var(--a-ctl);
  border: 1px solid var(--a-border-strong);
  border-radius: var(--a-r-control);
  padding: 7px var(--a-sp-3);
  font-size: var(--a-fs-ui);
  line-height: 1.6;
  color: var(--a-text);
  background-color: var(--a-surface);
  transition: border-color var(--a-dur-hover) var(--a-ease), background-color var(--a-dur-hover) var(--a-ease);
}
/* A value longer than its field ends in «…» while the field is idle;
   focusing it shows the rest. */
.form-control { text-overflow: ellipsis; }
.form-control:hover:not(:disabled):not([readonly]):not(:focus),
.form-select:hover:not(:disabled):not(:focus) { border-color: var(--a-text-tertiary); }

/* RTL: chevron sits on the physical left; reserve padding on the left
   (inline-end in RTL) so the dropdown text doesn't collide with it. */
.form-select {
  padding-inline-start: var(--a-sp-3);
  padding-inline-end: 36px;
  background-position: left 12px center;
}
.form-select-sm {
  padding-inline-start: 10px;
  padding-inline-end: 30px;
  background-position: left 9px center;
}
.form-control:focus, .form-select:focus {
  border-color: var(--a-accent);
  box-shadow: none;
  color: var(--a-text);
  outline: 2px solid var(--a-focus-ring);
  outline-offset: 2px;
}
.form-control::placeholder { color: var(--a-text-tertiary); opacity: 1; }
.form-control[readonly] { background: var(--a-surface-subtle); }
.form-control:disabled, .form-select:disabled {
  background-color: var(--a-hover);
  border-color: var(--a-border);
  color: var(--a-text-tertiary);
}
.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--a-danger);
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  outline-color: var(--a-danger);
  box-shadow: none;
}
.form-control-sm, .form-select-sm {
  min-height: 32px;
  padding-block: 4px;
  font-size: var(--a-fs-meta);
  border-radius: 8px;
}
.form-control-sm { padding-inline: 10px; }
/* A small field beside a small button keeps their height on a touch screen. */
@media (pointer: coarse) { .form-control-sm, .form-select-sm { min-height: 40px; } }
textarea.form-control { line-height: 1.8; }
.form-control-color { min-height: var(--a-ctl); padding: 4px; }
.input-group > .form-control:focus,
.input-group > .form-select:focus { z-index: 5; }

.invalid-feedback { color: var(--a-danger-fg); font-size: var(--a-fs-caption); }
.valid-feedback { color: var(--a-success); font-size: var(--a-fs-caption); }

.form-check-input {
  border-color: var(--a-control-border);
  background-color: var(--a-surface);
}
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--a-accent);
  border-color: var(--a-accent);
}
.form-check-input:focus {
  box-shadow: none;
  border-color: var(--a-accent);
}
.form-check-input:focus-visible {
  outline: 2px solid var(--a-focus-ring);
  outline-offset: 2px;
}
.form-check-input:disabled { opacity: .45; }
.form-check-label { color: var(--a-text); }
.form-range::-webkit-slider-thumb { background-color: var(--a-accent); }
.form-range::-moz-range-thumb { background-color: var(--a-accent); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--a-accent-soft); }

/* Bootstrap draws these icons as data: URIs, which production's
   `default-src 'self'` CSP blocks — a checked box became a plain blue
   square. The same SVGs, served from our own origin. */
.form-check-input:checked[type=checkbox] { --bs-form-check-bg-image: url("/admin/static/img/bootstrap/check.svg"); }
.form-check-input[type=checkbox]:indeterminate { --bs-form-check-bg-image: url("/admin/static/img/bootstrap/indeterminate.svg"); }
.form-check-input:checked[type=radio] { --bs-form-check-bg-image: url("/admin/static/img/bootstrap/radio.svg"); }
.form-switch .form-check-input { --bs-form-switch-bg: url("/admin/static/img/bootstrap/switch.svg"); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("/admin/static/img/bootstrap/switch-focus.svg"); }
.form-switch .form-check-input:checked { --bs-form-switch-bg: url("/admin/static/img/bootstrap/switch-checked.svg"); }
[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) { --bs-form-switch-bg: url("/admin/static/img/bootstrap/switch-dark.svg"); }
.form-select { --bs-form-select-bg-img: url("/admin/static/img/bootstrap/select.svg"); }
[data-bs-theme=dark] .form-select { --bs-form-select-bg-img: url("/admin/static/img/bootstrap/select-dark.svg"); }
.btn-close { --bs-btn-close-bg: url("/admin/static/img/bootstrap/close.svg"); }
.form-control.is-invalid { background-image: url("/admin/static/img/bootstrap/invalid.svg"); }
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"] { --bs-form-select-bg-icon: url("/admin/static/img/bootstrap/invalid.svg"); }

/* ─── Login screen ────────────────────────────────────────────────────── */
/* The panel's own frame before you are in it: a column in the sidebar's
   tone where the sidebar will be, the form where the page will be. Every
   colour, size and control is Aram's — the same primary button as every
   other page. NooshDaroo appears as its name and its logo (the dark-ground
   version in dark mode), not as a second palette. */
.jl-login {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(340px, 40%) minmax(0, 1fr);
  background: var(--a-canvas);
  color: var(--a-text);
}
.jl-login__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--a-sp-10);
  padding: var(--a-sp-6) var(--a-sp-8);
  background: var(--a-sidebar);
  border-inline-end: 1px solid var(--a-border);
}
.jl-login__intro { display: flex; flex-direction: column; gap: var(--a-sp-2); max-width: 30rem; }
.jl-login__kicker {
  margin: 0;
  font-size: var(--a-fs-meta);
  line-height: var(--a-lh-meta);
  font-weight: 500;
  color: var(--a-text-tertiary);
}
/* The headline («ابزارهای هوش مصنوعی») in NooshDaroo's own face (Doran,
   600 — its brand book never goes heavier), like a wordmark; the words
   around it stay Vazirmatn. */
.jl-login__name {
  margin: 0;
  font-family: var(--a-font-brand);
  font-size: 38px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--a-text);
}
.jl-login__lead {
  margin: var(--a-sp-1) 0 0;
  font-size: var(--a-fs-body);
  line-height: var(--a-lh-body);
  color: var(--a-text-secondary);
}
.jl-login__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--a-sp-4);
  padding-top: var(--a-sp-5);
  border-top: 1px solid var(--a-border);
}
.jl-login__site { font-size: var(--a-fs-meta); color: var(--a-text-tertiary); }
.jl-login__logo { display: block; height: auto; }
.jl-login__logo--light { width: 64px; }
.jl-login__logo--dark { display: none; width: 124px; }
html[data-theme="dark"] .jl-login__logo--light { display: none; }
html[data-theme="dark"] .jl-login__logo--dark { display: block; }

.jl-login__main {
  display: grid;
  place-items: center;
  padding: var(--a-sp-12) var(--a-sp-6);
}
.jl-login__card { width: 100%; max-width: 360px; }
.jl-login__head {
  display: flex;
  flex-direction: column;
  gap: var(--a-sp-2);
  margin-bottom: var(--a-sp-8);
}
.jl-login__head h1 {
  margin: 0;
  font-size: var(--a-fs-page);
  line-height: var(--a-lh-page);
  font-weight: 700;
  color: var(--a-text);
}
.jl-login__head p {
  margin: 0;
  font-size: var(--a-fs-body);
  line-height: var(--a-lh-body);
  color: var(--a-text-secondary);
}
.jl-login .form-control { min-height: 44px; }
.jl-login__remember { margin: var(--a-sp-4) 0 var(--a-sp-6); }
.jl-login .alert { margin-bottom: var(--a-sp-5); }

/* Phones: the side column folds into one ruled line above the form. */
.jl-login__mini {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--a-sp-3);
  margin-bottom: var(--a-sp-8);
  padding-bottom: var(--a-sp-4);
  border-bottom: 1px solid var(--a-border);
}
.jl-login__mini-name { font-family: var(--a-font-brand); font-size: var(--a-fs-ui); font-weight: 600; color: var(--a-text-secondary); }
@media (max-width: 899.98px) {
  .jl-login { grid-template-columns: minmax(0, 1fr); }
  .jl-login__side { display: none; }
  .jl-login__mini { display: flex; }
}

/* ─── Chips ───────────────────────────────────────────────────────────── */
/* Aram's chip: a tint and its ink, no outline. Each variant only sets the
   pair, so hover and the linkable form derive from it. */
.jl-chip {
  --chip-bg: var(--a-hover);
  --chip-fg: var(--a-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 8px;
  border: 0;
  border-radius: var(--a-r-chip);
  background: var(--chip-bg);
  color: var(--chip-fg);
  font-size: var(--a-fs-caption);
  font-weight: 500;
  line-height: 1.5;
  margin-inline-end: var(--a-sp-1);
  vertical-align: middle;
  white-space: nowrap;
}
.jl-chip > i, .jl-chip > .a-ic { font-size: 13px; width: 13px; height: 13px; flex: none; }
.jl-chip--admin  { --chip-bg: var(--a-accent-soft);  --chip-fg: var(--a-accent); }
.jl-chip--good   { --chip-bg: var(--a-success-soft); --chip-fg: var(--a-success); }
.jl-chip--warn   { --chip-bg: var(--a-warning-soft); --chip-fg: var(--a-warning); }
.jl-chip--info   { --chip-bg: var(--a-info-soft);    --chip-fg: var(--a-info); }
.jl-chip--danger { --chip-bg: var(--a-danger-soft);  --chip-fg: var(--a-danger-fg); }
/* A team's own tint, the one its tile wears in the sidebar. */
.jl-chip[data-tint] { --chip-bg: var(--tint-bg); --chip-fg: var(--tint-fg); }

/* ─── Linkable chip (used in tables to filter by value) ──────────────── */
a.jl-chip { transition: background-color var(--a-dur-hover) var(--a-ease); }
a.jl-chip:hover {
  text-decoration: none;
  color: var(--chip-fg);
  background: color-mix(in srgb, var(--chip-fg) 14%, var(--chip-bg));
}
.jl-chip--link { cursor: pointer; }

/* ─── Tag bar (settings list filter pills) ───────────────────────────── */
.jl-tagbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--a-sp-4);
  padding: 10px var(--a-sp-3);
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-card);
  box-shadow: none;
}
.jl-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 2px var(--a-sp-3);
  border-radius: 8px;
  font-size: var(--a-fs-meta);
  font-weight: 500;
  background: var(--a-surface);
  color: var(--a-text-secondary);
  border: 1px solid var(--a-border-strong);
  text-decoration: none;
  transition: background-color var(--a-dur-hover) var(--a-ease), color var(--a-dur-hover) var(--a-ease),
              border-color var(--a-dur-hover) var(--a-ease);
}
.jl-tag:hover {
  background: var(--a-hover);
  color: var(--a-text);
  border-color: var(--a-border-strong);
}
.jl-tag--active,
.jl-tag--active:hover {
  background: var(--a-accent);
  color: var(--a-on-accent);
  border-color: var(--a-accent);
}
.jl-tag--active:hover { background: var(--a-accent-hover); border-color: var(--a-accent-hover); }
.jl-tag__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--a-r-chip);
  background: var(--a-hover);
  color: inherit;
  font-size: var(--a-fs-caption);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.jl-tag:hover .jl-tag__count { background: var(--a-border); }
/* A darker well, not a lighter one: white on a lightened teal drops under 4.5:1. */
.jl-tag--active .jl-tag__count,
.jl-tag--active:hover .jl-tag__count { background: rgb(0 0 0 / .22); }
.jl-tag--clear {
  background: transparent;
  color: var(--a-text-tertiary);
  border-color: transparent;
}
.jl-tag--clear:hover {
  background: var(--a-danger-soft);
  color: var(--a-danger-fg);
  border-color: transparent;
}

/* ─── Avatars ─────────────────────────────────────────────────────────── */
/* Tinted like the sidebar's; a data-tint on the element picks the pair. */
.jl-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tint-bg, var(--a-tint0-bg));
  color: var(--tint-fg, var(--a-tint0-fg));
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}
.jl-user-cell {
  display: flex;
  align-items: center;
  gap: var(--a-sp-3);
}
.jl-user-cell__name { color: var(--a-text); font-weight: 500; }
.jl-user-cell__sub { color: var(--a-text-tertiary); font-size: var(--a-fs-caption); line-height: var(--a-lh-caption); }

/* ─── Helpers ─────────────────────────────────────────────────────────── */
/* Code faces carry no Persian, so Persian digits and words in a .jl-mono
   cell fall through to Vazirmatn instead of the system's Arabic face. */
.jl-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, var(--a-font), monospace;
  font-variant-numeric: tabular-nums;
}
.jl-truncate {
  display: inline-block;
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.jl-flash { margin-bottom: var(--a-sp-4); }
.text-muted { color: var(--a-text-tertiary) !important; }
/* Bootstrap's amber is a fill; as text it needs Aram's darker ink. */
.text-warning { color: var(--a-warning) !important; }
.text-danger { color: var(--a-danger-fg) !important; }
.text-success { color: var(--a-success) !important; }

/* ─── Alerts ──────────────────────────────────────────────────────────── */
/* Inline notices: a tint and its ink, with a hairline in the same ink. */
.alert {
  --bs-alert-padding-x: var(--a-sp-4);
  --bs-alert-padding-y: var(--a-sp-3);
  --bs-alert-border-radius: var(--a-r-control);
  --bs-alert-link-color: inherit;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  font-size: var(--a-fs-ui);
  line-height: 1.7;
}
.alert-success   { --bs-alert-bg: var(--a-success-soft); --bs-alert-color: var(--a-success); }
.alert-danger    { --bs-alert-bg: var(--a-danger-soft);  --bs-alert-color: var(--a-danger-fg); }
.alert-warning   { --bs-alert-bg: var(--a-warning-soft); --bs-alert-color: var(--a-warning); }
.alert-info      { --bs-alert-bg: var(--a-info-soft);    --bs-alert-color: var(--a-info); }
.alert-primary   { --bs-alert-bg: var(--a-accent-soft);  --bs-alert-color: var(--a-accent-hover); }
.alert-secondary,
.alert-light     { --bs-alert-bg: var(--a-surface-subtle); --bs-alert-color: var(--a-text-secondary); }
.alert-link { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* RTL: Bootstrap pins .btn-close to right:0; flip to start (left in RTL). */
.alert-dismissible {
  padding-inline-start: var(--a-sp-4);
  padding-inline-end: 3rem;
}
.alert-dismissible .btn-close {
  right: auto;
  left: 0;
  padding: 1rem;
}

/* ─── Bootstrap widgets ───────────────────────────────────────────────── */
/* Badges become Aram chips: a solid badge is loud for a count or a state,
   and white on Bootstrap's amber never reached 4.5:1. The pair beats the
   .bg-* / .text-bg-* / .text-white utilities, which are !important. */
.badge {
  --bs-badge-padding-x: 8px;
  --bs-badge-padding-y: 3px;
  --bs-badge-font-size: var(--a-fs-caption);
  --bs-badge-font-weight: 500;
  --bs-badge-color: var(--a-text-secondary);
  --bs-badge-border-radius: var(--a-r-chip);
  line-height: 1.5;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.badge.rounded-pill { --bs-badge-border-radius: 999px; }
.badge:is(.bg-primary, .text-bg-primary, .bg-primary-subtle) { background-color: var(--a-accent-soft) !important; color: var(--a-accent) !important; }
.badge:is(.bg-success, .text-bg-success)     { background-color: var(--a-success-soft) !important; color: var(--a-success) !important; }
.badge:is(.bg-warning, .text-bg-warning)     { background-color: var(--a-warning-soft) !important; color: var(--a-warning) !important; }
.badge:is(.bg-danger, .text-bg-danger)       { background-color: var(--a-danger-soft) !important; color: var(--a-danger-fg) !important; }
.badge:is(.bg-info, .text-bg-info)           { background-color: var(--a-info-soft) !important; color: var(--a-info) !important; }
.badge:is(.bg-secondary, .text-bg-secondary, .bg-light, .text-bg-light) { background-color: var(--a-hover) !important; color: var(--a-text-secondary) !important; }
.badge:is(.bg-dark, .text-bg-dark)           { background-color: var(--a-border-strong) !important; color: var(--a-text) !important; }
.badge.border { border-color: var(--a-border-strong) !important; }

/* Pagination: separate rounded keys, so RTL never gets the LTR build's
   first/last corners wrong. */
.pagination {
  --bs-pagination-padding-x: var(--a-sp-3);
  --bs-pagination-padding-y: 6px;
  --bs-pagination-font-size: var(--a-fs-ui);
  --bs-pagination-color: var(--a-text-secondary);
  --bs-pagination-bg: var(--a-surface);
  --bs-pagination-border-color: var(--a-border);
  --bs-pagination-border-radius: var(--a-r-control);
  --bs-pagination-hover-color: var(--a-text);
  --bs-pagination-hover-bg: var(--a-hover);
  --bs-pagination-hover-border-color: var(--a-border-strong);
  --bs-pagination-focus-color: var(--a-text);
  --bs-pagination-focus-bg: var(--a-hover);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: var(--a-on-accent);
  --bs-pagination-active-bg: var(--a-accent);
  --bs-pagination-active-border-color: var(--a-accent);
  --bs-pagination-disabled-color: var(--a-text-tertiary);
  --bs-pagination-disabled-bg: var(--a-surface-subtle);
  --bs-pagination-disabled-border-color: var(--a-border);
  gap: var(--a-sp-1);
  flex-wrap: wrap;
}
.pagination-sm {
  --bs-pagination-padding-x: 10px;
  --bs-pagination-padding-y: 3px;
  --bs-pagination-font-size: var(--a-fs-meta);
  --bs-pagination-border-radius: 8px;
}
.page-link {
  min-width: 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  border-radius: var(--bs-pagination-border-radius) !important;
}
.page-item:not(:first-child) .page-link { margin-left: 0; }
.page-link:focus-visible { outline: 2px solid var(--a-focus-ring); outline-offset: 2px; }

/* The shared pager (components/pagination.html): where you are, then the keys. */
.a-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--a-sp-2) var(--a-sp-3);
  margin-block: var(--a-sp-4);
}
.a-pager__info { color: var(--a-text-secondary); font-size: var(--a-fs-meta); }

/* Dialogs */
.modal {
  --bs-modal-color: var(--a-text);
  --bs-modal-bg: var(--a-surface);
  --bs-modal-border-color: var(--a-border);
  --bs-modal-border-radius: var(--a-r-dialog);
  --bs-modal-inner-border-radius: calc(var(--a-r-dialog) - 1px);
  --bs-modal-box-shadow: var(--a-shadow-dialog);
  --bs-modal-padding: var(--a-sp-6);
  --bs-modal-header-padding: var(--a-sp-5) var(--a-sp-6);
  --bs-modal-header-border-color: var(--a-border);
  --bs-modal-footer-border-color: var(--a-border);
  --bs-modal-footer-gap: var(--a-sp-2);
  --bs-modal-title-line-height: var(--a-lh-section);
}
.modal-content { box-shadow: var(--bs-modal-box-shadow); }
.modal-title { font-size: var(--a-fs-card); font-weight: 600; }
.modal-backdrop { --bs-backdrop-bg: #1C1917; --bs-backdrop-opacity: .28; }

/* Menus */
.dropdown-menu {
  --bs-dropdown-font-size: var(--a-fs-ui);
  --bs-dropdown-color: var(--a-text);
  --bs-dropdown-bg: var(--a-surface);
  --bs-dropdown-border-color: var(--a-border);
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-inner-border-radius: 11px;
  --bs-dropdown-padding-x: 6px;
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-box-shadow: var(--a-shadow-popover);
  --bs-dropdown-divider-bg: var(--a-border);
  --bs-dropdown-divider-margin-y: 6px;
  --bs-dropdown-link-color: var(--a-text);
  --bs-dropdown-link-hover-color: var(--a-text);
  --bs-dropdown-link-hover-bg: var(--a-hover);
  --bs-dropdown-link-active-color: var(--a-text);
  --bs-dropdown-link-active-bg: var(--a-accent-soft);
  --bs-dropdown-link-disabled-color: var(--a-text-tertiary);
  --bs-dropdown-item-padding-x: 10px;
  --bs-dropdown-item-padding-y: 6px;
  --bs-dropdown-item-border-radius: 8px;
  --bs-dropdown-header-color: var(--a-text-tertiary);
  box-shadow: var(--bs-dropdown-box-shadow);
  text-align: start;
}
.dropdown-item { line-height: 1.7; }

/* Bootstrap's own .table (most lists use .jl-table) */
.table {
  --bs-table-color: var(--a-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--a-border);
  --bs-table-striped-color: var(--a-text);
  --bs-table-striped-bg: var(--a-surface-subtle);
  --bs-table-hover-color: var(--a-text);
  --bs-table-hover-bg: var(--a-surface-subtle);
  --bs-table-active-color: var(--a-text);
  --bs-table-active-bg: var(--a-hover);
  font-size: var(--a-fs-ui);
  line-height: 1.7;
}
.table > thead th {
  font-size: var(--a-fs-caption);
  font-weight: 600;
  color: var(--a-text-tertiary);
  white-space: nowrap;
}
.table-primary { --bs-table-color: var(--a-text); --bs-table-bg: var(--a-accent-soft); --bs-table-border-color: var(--a-border); }
.table-warning { --bs-table-color: var(--a-text); --bs-table-bg: var(--a-warning-soft); --bs-table-border-color: var(--a-border); }
.table-success { --bs-table-color: var(--a-text); --bs-table-bg: var(--a-success-soft); --bs-table-border-color: var(--a-border); }
.table-danger  { --bs-table-color: var(--a-text); --bs-table-bg: var(--a-danger-soft);  --bs-table-border-color: var(--a-border); }

/* Tabs and pills */
.nav-link { color: var(--a-text-secondary); }
.nav-link:hover, .nav-link:focus { color: var(--a-text); }
.nav-pills { --bs-nav-pills-border-radius: var(--a-r-control); --bs-nav-pills-link-active-bg: var(--a-accent); --bs-nav-pills-link-active-color: var(--a-on-accent); }
.nav-tabs {
  --bs-nav-tabs-border-color: var(--a-border);
  --bs-nav-tabs-link-hover-border-color: transparent;
  --bs-nav-tabs-link-active-color: var(--a-text);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-border-color: transparent transparent var(--a-accent);
}

/* Progress, tooltips, popovers, close button */
.progress {
  --bs-progress-bg: var(--a-hover);
  --bs-progress-bar-bg: var(--a-accent);
  --bs-progress-border-radius: 999px;
}
.tooltip {
  --bs-tooltip-bg: var(--a-text);
  --bs-tooltip-color: var(--a-canvas);
  --bs-tooltip-border-radius: var(--a-r-chip);
  --bs-tooltip-font-size: var(--a-fs-caption);
  --bs-tooltip-padding-x: 8px;
  --bs-tooltip-padding-y: 4px;
  --bs-tooltip-opacity: 1;
  font-family: var(--a-font);
  line-height: 1.6;
}
.popover {
  --bs-popover-bg: var(--a-surface);
  --bs-popover-border-color: var(--a-border);
  --bs-popover-border-radius: 12px;
  --bs-popover-box-shadow: var(--a-shadow-popover);
  --bs-popover-font-size: var(--a-fs-ui);
  --bs-popover-header-bg: var(--a-surface-subtle);
  --bs-popover-body-color: var(--a-text);
  font-family: var(--a-font);
}
.btn-close { border-radius: 8px; }
.btn-close:focus { box-shadow: none; }
.btn-close:focus-visible { outline: 2px solid var(--a-focus-ring); outline-offset: 2px; opacity: 1; }
.spinner-border, .spinner-grow { color: var(--a-accent); }
.spinner-border.text-light, .btn .spinner-border, .btn .spinner-grow { color: inherit; }

/* ─── Select2 (vendored, default theme) ──────────────────────────────── */
/* Colours and edges only — the single-select boxes that pages size
   themselves (chat, translator, index monitor) keep their geometry.
   Pages load select2.css after this file, so each rule is raised by an
   `html` to win on specificity rather than on load order. */
html .select2-container--default .select2-selection--multiple {
  min-height: var(--a-ctl);
  border: 1px solid var(--a-border-strong);
  border-radius: var(--a-r-control);
  background: var(--a-surface);
}
html .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--a-accent);
  outline: 2px solid var(--a-focus-ring);
  outline-offset: 2px;
}
html .select2-container--default .select2-selection--multiple .select2-selection__choice {
  border: 0;
  border-radius: var(--a-r-chip);
  background: var(--a-hover);
  color: var(--a-text);
  font-size: var(--a-fs-meta);
}
html .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--a-text-secondary);
  border-color: var(--a-border-strong);
}
html .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
html .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
  background: var(--a-border);
  color: var(--a-text);
}
html .select2-container--default .select2-search--inline .select2-search__field { font-family: inherit; }
html .select2-dropdown {
  border-color: var(--a-border);
  background: var(--a-surface);
  color: var(--a-text);
  box-shadow: var(--a-shadow-popover);
}
html .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--a-accent-soft);
  color: var(--a-text);
}
html .select2-container--default .select2-results__option--selected { background: var(--a-hover); }
html .select2-container--default .select2-search--dropdown .select2-search__field {
  border-color: var(--a-border-strong);
  border-radius: 8px;
}

/* ─── Jalali date picker (vendored) ──────────────────────────────────── */
/* Its colours are variables, so it takes Aram's — and the dark theme — by
   redefining them. Pages load its stylesheet after this file, so the rules
   are raised by an `html` prefix. --jdp-color-0 is both the surface and the
   ink on the accent (selected day, buttons), as Aram's on-accent would be. */
html jdp-container {
  --jdp-color-0: var(--a-surface);
  --jdp-color-1: var(--a-surface-subtle);
  --jdp-color-2: var(--a-hover);
  --jdp-color-3: var(--a-border-strong);
  --jdp-color-4: var(--a-text-tertiary);
  --jdp-color-5: var(--a-text);
  --jdp-primary: var(--a-accent);
  --jdp-red: var(--a-danger-fg);
  border-radius: var(--a-r-card);
  box-shadow: 0 0 0 1px var(--a-border), var(--a-shadow-popover);
  font-family: var(--a-font);
  font-size: var(--a-fs-ui);
}
html jdp-container .jdp-days-header { color: var(--a-text-tertiary); }
html jdp-container .jdp-day:not(.disabled-day) { border-radius: var(--a-r-chip); }
html jdp-container .jdp-icon-plus,
html jdp-container .jdp-icon-minus { border-color: var(--a-border); border-radius: var(--a-r-chip); }
html jdp-container .jdp-btn-today,
html jdp-container .jdp-btn-empty,
html jdp-container .jdp-btn-close { border-radius: 8px; font-weight: 500; }
@media (max-width: 481px) {
  html jdp-container { border-radius: var(--a-r-dialog) var(--a-r-dialog) 0 0; }
}

/* ─── Row-based JSON object editor ────────────────────────────────────── */
.jl-jsoneditor__rows {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.jl-jsoneditor__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7.5rem minmax(0, 1.6fr) auto;
  gap: .5rem;
  align-items: center;
  padding: .5rem;
  background: var(--jl-surface-2);
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius-sm);
}
.jl-jsoneditor__row .jl-jsoneditor__value > * { width: 100%; }
.jl-jsoneditor__rm { line-height: 1; padding: .3rem .55rem; }
@media (max-width: 575.98px) {
  .jl-jsoneditor__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "key   rm"
      "type  type"
      "value value";
  }
  .jl-jsoneditor__row .jl-jsoneditor__key   { grid-area: key; }
  .jl-jsoneditor__row .jl-jsoneditor__rm    { grid-area: rm; }
  .jl-jsoneditor__row .jl-jsoneditor__type  { grid-area: type; }
  .jl-jsoneditor__row .jl-jsoneditor__value { grid-area: value; }
}

/* ─── Settings JSON editor (object/array) ─────────────────────────────── */
.jl-settingsjson__shape {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: .5rem .75rem;
  background: var(--jl-surface-2);
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius-sm);
}
.jl-settingsjson__rows {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.jl-settingsjson__row {
  display: grid;
  gap: .5rem;
  align-items: start;
  padding: .55rem;
  background: var(--jl-surface-2);
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius-sm);
}
.jl-settingsjson__row--object {
  grid-template-columns: minmax(0, .5fr) 7.5rem minmax(0, 2fr) auto;
}
.jl-settingsjson__row--array {
  grid-template-columns: 3rem 7.5rem minmax(0, 1fr) auto;
}
.jl-settingsjson__row > * { min-width: 0; }
.jl-settingsjson__row .jl-settingsjson__value > * { width: 100%; }
.jl-settingsjson__index {
  align-self: center;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--jl-text-muted);
  background: var(--jl-surface);
  border: 1px solid var(--jl-border);
  border-radius: 6px;
  padding: .35rem 0;
  direction: ltr;
}
.jl-settingsjson__textarea { resize: vertical; min-height: 2.1rem; }
.jl-settingsjson__ops .btn { line-height: 1; padding: .3rem .55rem; }

/* Nested container — when a row's type is object/array, the value cell
   hosts another rows-editor at one indentation level deeper. The left
   accent bar makes depth visible at a glance; RTL-safe via logical
   `border-inline-start`. */
.jl-settingsjson__nested {
  padding: .4rem .55rem .55rem;
  background: var(--jl-surface);
  border: 1px solid var(--jl-border);
  border-radius: var(--jl-radius-sm);
  border-inline-start: 3px solid var(--jl-primary-light);
}
.jl-settingsjson__nested .jl-settingsjson__rows {
  gap: .35rem;
}
.jl-settingsjson__nested .jl-settingsjson__row {
  padding: .4rem;
  background: var(--jl-surface-2);
}
.jl-settingsjson__nested--array { border-inline-start-color: var(--a-tint5-bg); }
.jl-settingsjson__nested--object { border-inline-start-color: var(--jl-primary-light); }
.jl-settingsjson__nested .jl-settingsjson__nested {
  /* Slightly stronger accent at deeper levels so 3+ levels stay legible. */
  border-inline-start-color: var(--jl-primary);
  background: var(--jl-surface-2);
}

/* Phones: each row names its own children's areas (child selectors) — a row
   nested in an array row must not take its parent's «ops» area. */
@media (max-width: 767.98px) {
  .jl-settingsjson__row--object {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "key   rm"
      "type  type"
      "value value";
  }
  .jl-settingsjson__row--object > .jl-settingsjson__key   { grid-area: key; }
  .jl-settingsjson__row--object > .jl-settingsjson__type  { grid-area: type; }
  .jl-settingsjson__row--object > .jl-settingsjson__value { grid-area: value; }
  .jl-settingsjson__row--object > .jl-settingsjson__ops   { grid-area: rm; }

  .jl-settingsjson__row--array {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "idx   ops"
      "type  type"
      "value value";
  }
  .jl-settingsjson__row--array > .jl-settingsjson__index { grid-area: idx; }
  .jl-settingsjson__row--array > .jl-settingsjson__type  { grid-area: type; }
  .jl-settingsjson__row--array > .jl-settingsjson__value { grid-area: value; }
  .jl-settingsjson__row--array > .jl-settingsjson__ops   { grid-area: ops; }
}

/* The LTR-direction toggle on string textareas — line up the switch with
   the label and keep it tight. */
.jl-dir-textarea { transition: none; }

/* ─── Audit logs table ────────────────────────────────────────────────── */
.jl-audit-row:hover { background: var(--a-surface-subtle); }
.jl-card__footer {
  border-top: 1px solid var(--a-border);
  background: var(--a-surface-subtle);
}
.jl-pre {
  background: var(--a-surface-subtle);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-control);
  padding: 10px var(--a-sp-3);
  font-size: var(--a-fs-caption);
  line-height: 1.7;
  color: var(--a-text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  max-height: 260px;
  overflow: auto;
}
.jl-detail-label { color: var(--a-text-tertiary); font-weight: 500; }

/* Force the modal close button to the visual left in our RTL admin —
   Bootstrap's default `.btn-close` uses physical `margin-left: auto`
   which fights with RTL flex placement. Override with logical margins. */
.jl-modal-header--close-start { gap: .75rem; }
.jl-modal-header--close-start .btn-close {
  margin: 0 !important;
  margin-inline-start: auto !important;
}

/* ═══ Dark theme ══════════════════════════════════════════════════════════
   Applies when <html> carries data-theme="dark", which only the viewer's
   own choice from the top bar sets (localStorage jl-theme = dark): the
   panel is light by default and the system's setting plays no part. It is
   set before first paint by base.html (and login.html) and mirrored onto
   data-bs-theme so Bootstrap's own widgets — select chevrons, switches,
   close buttons — flip with us.

   Every --jl-* and --bs-* colour above is an Aram token, and aram.css
   gives those their dark values, so surfaces, text, borders and the
   accent follow on their own. What is left here: the rgb() triples, which
   cannot alias, and the status fills, which page stylesheets still put
   under white text and so keep the brighter steps they were tuned with.
   ══════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  color-scheme: dark;

  --jl-primary-rgb: 43, 179, 163;

  --jl-success: #32d16d;
  --jl-success-light: rgba(50, 209, 109, .14);
  --jl-danger: #ff5c80;
  --jl-danger-light: rgba(255, 92, 128, .14);
  --jl-warning: #f0bf3c;
  --jl-warning-light: rgba(240, 191, 60, .14);
  --jl-info: #9b6bff;
  --jl-info-light: rgba(155, 107, 255, .14);

  --bs-body-color-rgb: 245, 245, 244;
  --bs-link-color-rgb: 43, 179, 163;
  --bs-link-hover-color-rgb: 76, 201, 186;
  --bs-focus-ring-color: rgb(43 179 163 / .3);
  --bs-primary-rgb: 43, 179, 163;
  --bs-secondary-rgb: 168, 162, 158;
  --bs-success-rgb: 50, 209, 109;
  --bs-info-rgb: 169, 193, 255;
  --bs-warning-rgb: 240, 191, 60;
  --bs-danger-rgb: 248, 113, 113;
  --bs-light-rgb: 42, 40, 38;
  --bs-dark-rgb: 245, 245, 244;
}
/* Light ink on the light dark-mode greens. */
html[data-theme="dark"] .btn-success {
  --bs-btn-color: #0B2B1A;
  --bs-btn-hover-color: #0B2B1A;
  --bs-btn-active-color: #0B2B1A;
}
html[data-theme="dark"] .modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .55; }
/* Inline code sits in a darker well, where the tertiary ink still reads. */
html[data-theme="dark"] code { background: var(--a-surface-subtle); }
/* A white well behind the active tag's dark ink, not a black one. */
html[data-theme="dark"] .jl-tag--active .jl-tag__count { background: rgb(255 255 255 / .3); }
/* Bootstrap's .bg-white is literal; on a dark page it means the surface. */
html[data-theme="dark"] .bg-white { background-color: var(--a-surface) !important; }

/* Spinner for a button that is waiting on a fetch (the AI-queue worker
   board's «استعلام»). Only the icon turns, so the label stays readable
   and the button keeps its width — no layout jump on every refresh. */
.jl-spin { display: inline-block; animation: jl-spin 900ms linear infinite; }
@keyframes jl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jl-spin { animation: none; } }

/* ─── Member access page ──────────────────────────────────────────────── */
/* teams/member_access.html and the blocks of components/access_blocks.html:
   one block per feature — its name on the start side, a box per permission
   beside it. Tokens only, so dark mode follows. Under ~640px of the form's
   own width the name sits above its boxes. */
.jl-access { container-type: inline-size; }
.jl-access__group {
  margin: var(--a-sp-6) 0 0;
  padding-block-end: var(--a-sp-2);
  border-block-end: 1px solid var(--a-border);
  color: var(--a-text-tertiary);
  font-size: var(--a-fs-meta);
  line-height: var(--a-lh-meta);
  font-weight: 600;
}
.jl-access__group:first-child { margin-block-start: 0; }

.jl-access__feature {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--a-sp-2) var(--a-sp-6);
  padding-block: var(--a-sp-4);
  border-block-end: 1px solid var(--a-border);
}
.jl-access__feature:last-child { padding-block-end: 0; border-block-end: 0; }
.jl-access__title {
  margin: 0;
  color: var(--a-text);
  font-size: var(--a-fs-body);
  line-height: var(--a-lh-body);
  font-weight: 600;
}
.jl-access__desc {
  margin: 0;
  color: var(--a-text-tertiary);
  font-size: var(--a-fs-meta);
  line-height: var(--a-lh-meta);
}
.jl-access__perms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--a-sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.jl-access__perm {
  display: flex;
  align-items: flex-start;
  gap: var(--a-sp-2);
  block-size: 100%;
  min-block-size: var(--a-ctl);
  margin: 0;
  padding: var(--a-sp-2) var(--a-sp-3);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-control);
  background: var(--a-surface);
  cursor: pointer;
  transition: background-color var(--a-dur-hover) var(--a-ease), border-color var(--a-dur-hover) var(--a-ease);
}
.jl-access__perm:hover { background: var(--a-hover); }
.jl-access__perm:has(input:checked) { border-color: var(--a-border-strong); }
.jl-access__perm:has(input:focus-visible) { outline: 2px solid var(--a-focus-ring); outline-offset: 2px; }
.jl-access__perm input {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  margin-block-start: 5px;
  accent-color: var(--a-accent);
}
.jl-access__text { min-inline-size: 0; }
.jl-access__text b {
  display: block;
  color: var(--a-text);
  font-weight: 500;
  line-height: var(--a-lh-ui);
}
.jl-access__note {
  display: block;
  color: var(--a-text-tertiary);
  font-size: var(--a-fs-caption);
  line-height: var(--a-lh-caption);
}

/* Save: in view while the list scrolls under it. */
.jl-access__bar {
  position: sticky;
  inset-block-end: var(--a-sp-3);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--a-sp-3);
  margin-block-start: var(--a-sp-4);
  padding: var(--a-sp-3) var(--a-sp-4);
  border: 1px solid var(--a-border);
  border-radius: var(--a-r-card);
  background: var(--a-surface);
}

@container (max-width: 640px) {
  .jl-access__feature { grid-template-columns: minmax(0, 1fr); }
  /* A short bar, so the list keeps most of a phone's height. */
  .jl-access__bar { gap: var(--a-sp-2); padding: var(--a-sp-2) var(--a-sp-3); }
  .jl-access__bar .btn { flex: 1 1 auto; }
}