/* ═══════════════════════════════════════════════════════════════════════════
 * Batch 20 item 5 (#101) — THE FRIENDLINESS PASS
 *
 * Sultan's bar, in his words: "someone who isn't into electronics gets put on
 * it and feels comfortable — understands everything, finds it easy."
 *
 * This is NOT a redesign. It is the same app with a warmer skin, and it lands
 * as ONE LAYER on the shared primitives rather than as edits scattered through
 * forty screens — ONE FIX, FIX IT ALL. Every rule below targets a class that
 * already exists in arbah-v3-primitives.css and is used by every surface, so a
 * change here reaches the owner's dashboard and the engineer's Today page
 * identically. Nothing here changes behaviour, data, or a single string.
 *
 * Loaded AFTER the primitives so it can soften them without editing them —
 * which also means deleting this one file reverts the whole pass.
 *
 * FIVE THINGS, in the order the directive names them:
 *
 *   1. COLOUR THAT EXPLAINS — no important state left as plain grey.
 *   2. INVITING CONTROLS    — primary actions look pressable; quiet ones quiet.
 *   3. WARMTH               — softer surfaces, rounder corners, room to breathe.
 *   4. FRIENDLY MOMENTS     — empty states read like a person wrote them.
 *   5. DISCIPLINE           — contrast holds in all four themes, EN and AR.
 *
 * Every colour is an EXISTING token. Not one new hex is introduced, which is
 * what makes the four themes follow automatically instead of needing four
 * copies of this file.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── 3 · WARMTH ────────────────────────────────────────────────────────────
 * The flat white card on a flat white page was the single biggest source of
 * "this looks like a spreadsheet". A slightly larger radius and a softer,
 * warmer shadow give a card an edge the eye can find without adding a line.
 */
.av3 .card,
.av3 .dtable-wrap,
.av3 .kpi {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 42, 67, .04), 0 6px 16px -8px rgba(16, 42, 67, .10);
}

/* Table rows get room and a soft zebra. A dense grid of identical white rows
   is exactly what a non-technical person calls "complicated" — the alternation
   is what lets the eye track across a row without a ruler. */
.av3 .dtable tbody td { padding-block: 14px; }
.av3 .dtable tbody tr:nth-child(even) td { background: var(--arbah-surface-sunken); }
.av3 .dtable tbody tr:hover td { background: var(--arbah-surface-raised); }
/* The header row stops shouting: same information, less ink. */
.av3 .dtable thead th { letter-spacing: .6px; font-size: 10.5px; padding-block: 13px; }

/* Section headings get air above them so a long page reads as parts rather
   than as one continuous wall. */
.av3 .card + .card,
.av3 .card + .dtable-wrap,
.av3 .dtable-wrap + .card { margin-top: 16px; }

/* ── 1 · COLOUR THAT EXPLAINS ──────────────────────────────────────────────
 * The chips already carry tone (Batch 17 settled the vocabulary). What was
 * missing is that a chip read as decoration rather than as meaning, because it
 * was set too quietly to compete with the text beside it. Slightly stronger
 * weight and a real dot make the state the thing you see first.
 */
.av3 .chip { font-weight: 700; padding: 4px 10px; }
.av3 .chip .cdot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }

/* A KPI whose number IS the warning says so in its number, not only in a rail
   the eye skips. `danger` already existed; the other three did not, so a
   "3 overdue" tile stated the most urgent fact on the page in default ink. */
.av3 .kpi-value.warning { color: var(--arbah-warning); }
.av3 .kpi-value.success { color: var(--arbah-success); }
.av3 .kpi-value.info    { color: var(--arbah-info); }
.av3 .kpi-label { letter-spacing: .8px; font-size: 10.5px; }

/* THE GREY-STATE SWEEP.
 * `needs-data` is the app's standing "this was never filled in" treatment. It
 * was grey italic text that looked like a rendering failure. It is a soft
 * pill now — visibly a STATE rather than a broken value — which is the same
 * move the report renderer made in Batch 18 for exactly the same reason. */
.needs-data,
.av3 .needs-data {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  background: var(--arbah-surface-raised, #F1F5F9);
  color: var(--arbah-ink-subtle, #94A3B8);
  font-style: normal; font-size: 11.5px; font-weight: 600;
}

/* ── 2 · INVITING CONTROLS ─────────────────────────────────────────────────
 * A primary action should look like something you press. Bigger tap target,
 * a lift on hover, and a shadow that reads as "raised" rather than "flat
 * rectangle". Quiet actions deliberately gain nothing — the whole point is the
 * DIFFERENCE between them.
 */
.av3 .btn-primary {
  min-height: 44px; padding: 11px 18px; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 42, 67, .18), 0 4px 12px -6px rgba(16, 42, 67, .35);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
/* ...but NOT inside a dense table cell. Growing the buttons there pushed the
   task row's Approve / Send back pair onto two lines and cost the table a
   third of its rows per screen — a friendlier app that shows less of your work
   is not friendlier. `btn-sm` keeps its own metrics wherever it is used, which
   is exactly the "quiet actions stay quiet" half of the rule. */
.av3 .dtable .btn-primary,
.av3 .tt-cell .btn-primary,
.av3 .btn-primary.btn-sm {
  min-height: 32px; padding: 6px 12px; border-radius: 8px;
}
.av3 .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16, 42, 67, .2), 0 8px 18px -8px rgba(16, 42, 67, .4);
}
.av3 .btn-primary:active { transform: translateY(0); }
.av3 .btn-secondary, .av3 .btn-ghost { border-radius: 10px; transition: background .12s ease; }
/* Focus stays obvious for anyone driving by keyboard — a friendlier app is not
   a less accessible one. */
.av3 .btn-primary:focus-visible,
.av3 .btn-secondary:focus-visible,
.av3 .btn-ghost:focus-visible,
.av3 .btn-sm:focus-visible {
  outline: 2px solid var(--arbah-info); outline-offset: 2px;
}

/* ── 4 · FRIENDLY MOMENTS ──────────────────────────────────────────────────
 * The empty state is where a person decides whether an app is on their side.
 * It gets a soft tinted ground, a calmer icon, and room — so "nothing here
 * yet" reads as a normal state of affairs rather than as a fault.
 */
.av3 .empty-state {
  padding: 26px 20px; border-radius: 12px;
  background: var(--arbah-surface-sunken);
  border: 1px dashed var(--arbah-border-strong);
  gap: 10px;
}
.av3 .empty-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--arbah-surface-raised);
  color: var(--arbah-ink-subtle);
}
.av3 .empty-title { font-size: 14px; font-weight: 600; color: var(--arbah-ink-muted); }

/* The page title carries a little more presence, and its subtitle explains
   rather than labels. */
.av3 .phead-title { display: inline-flex; align-items: center; gap: 10px; }
.av3 .phead-sub { margin-top: 6px; font-size: 13.5px; color: var(--arbah-ink-muted); line-height: 1.5; }

/* ── 5 · DISCIPLINE ────────────────────────────────────────────────────────
 * Two guards on the pass itself.
 *
 * BLACK theme: the softened shadows above are tuned for a light ground and
 * vanish on black, taking the card edges with them. The border does the work
 * there instead — the same shape, drawn the way that theme can draw it.
 */
html[data-appearance="black"] .av3 .card,
html[data-appearance="black"] .av3 .dtable-wrap,
html[data-appearance="black"] .av3 .kpi {
  box-shadow: none;
  border-color: var(--arbah-border-strong);
}
html[data-color-scheme="dark"] .av3 .btn-primary {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
html[data-color-scheme="dark"] .av3 .btn-primary:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .6);
}

/* MOTION: the hover lift is a nicety, not a requirement. Anyone who has asked
   their system for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  .av3 .btn-primary { transition: none; }
  .av3 .btn-primary:hover { transform: none; }
}