/* Riquo dashboard look (yalla.html (and the entry/organisations pages) only). Approved 8 Nov 2026.
   The landing page (index.html) keeps the Clay brand in brand-tokens.css; the dashboard is a separate, quieter
   product: papyrus paper, olive ink, Nile green, ochre and sage, with a halftone texture taken from old Egyptian
   prints. Halftone sits on large decorative surfaces only, never behind body text.
   Text pairs (WCAG ratio): ink on paper 12.63 · ink on sheet 13.80 · muted on paper 5.80 · muted on sheet 6.34 ·
   muted on sage 5.29 · muted on ochre-soft 5.36 · sheet on green 7.06 · sheet on deep green 11.44 ·
   ochre on deep green 6.31 · ink on ochre 7.61 · mist on deep green 7.99 · green on paper 6.47 · green on sheet 7.06 ·
   green on sage 5.89 · error on sheet 7.00 · ink on ochre-soft 11.68. All ≥ 4.5:1. */
:root {
  --d-paper: #efece2;      /* page */
  --d-sheet: #f8f6ee;      /* cards, inputs */
  --d-ink: #1f2a1c;        /* text */
  --d-muted: #585c50;      /* secondary text on light */
  --d-green: #2f5d3a;      /* Nile green: buttons, links, focus */
  --d-deep: #1f3a2a;       /* sidebar, top bar */
  --d-ochre: #e3b23c;      /* highlights on deep green, active tab */
  --d-ochre-soft: #f3e3b0; /* warnings, agency panels */
  --d-sage: #dfe4d4;       /* quiet panels */
  --d-line: #cfcab8;       /* borders (non-text) */
  --d-error: #9b2c1f;
  --d-mist: #c9d3bf;       /* muted text on deep green */
  --d-dots: radial-gradient(rgba(14, 26, 43, .14) 1.1px, transparent 1.6px);
  --d-dots-light: radial-gradient(rgba(248, 246, 238, .12) 1.1px, transparent 1.6px);
}

/* Re-map the shared tokens inside the dashboard so the existing components follow the new palette. */
body.dash {
  --rq-ink: var(--d-ink); --rq-cream: var(--d-sheet); --rq-ink-soft: var(--d-muted); --rq-coral-deep: var(--d-green);
  --rq-peach: var(--d-ochre); --rq-peach-soft: var(--d-ochre-soft); --rq-coral: var(--d-ochre); --rq-cream-soft: var(--d-mist);
  --rq-error: var(--d-error); --rq-ok: var(--d-green); --rq-link: var(--d-green); --rq-focus: var(--d-green);
  --ink: var(--d-ink); --muted: var(--d-muted); --paper: var(--d-paper); --white: var(--d-sheet); --line: var(--d-line); --soft: var(--d-sage);
  --peach: var(--d-ochre); --coral: var(--d-ochre);
  /* the former business.html's neutral tokens (page removed 14 Nov 2026) */
  --bg: var(--d-paper); --surface: var(--d-sheet); --surface-2: #eef1f5; --text: var(--d-ink); --line-strong: #8a96a8;
  --accent: var(--d-green); --accent-text: var(--d-sheet); --accent-soft: var(--d-sage);
  --ok-soft: var(--d-sage); --warn: #6b4e0e; --warn-soft: var(--d-ochre-soft); --bad: var(--d-error); --bad-soft: #f4e2dc; --info-soft: var(--d-sage);
  background: var(--d-paper); color: var(--d-ink);
}
body.dash :focus-visible { outline: 3px solid var(--d-green); outline-offset: 2px; }
body.dash .dash-top :focus-visible, body.dash .dash-nav :focus-visible { outline-color: var(--d-ochre); }
body.dash a { color: var(--d-green); }
body.dash .rq-h1, body.dash .rq-h2, body.dash .rq-h3 { font-family: var(--rq-font-body); letter-spacing: -.01em; }
body.dash .rq-h1 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 800; }
html[lang="ar"] body.dash :is(.rq-h1, .rq-h2, .rq-h3) { font-family: var(--rq-font-arabic); }

/* Buttons: Nile green instead of clay. */
body.dash .btn-dark { background: var(--d-green); color: var(--d-sheet); }
body.dash .btn-dark:hover { background: var(--d-deep); }
body.dash .btn-outline { color: var(--d-green); border-color: var(--d-green); background: transparent; }
body.dash .btn-outline:hover { background: var(--d-sage); }
body.dash .text-link { color: var(--d-green); }

/* Cards and inputs on sheet, not white. */
body.dash :is(.y-card, .y-filters, .y-trip, .y-empty, .y-facts div, .y-tips li, .y-field input, .y-field select, .y-field textarea, .y-chip, .y-send textarea, .y-split-line input) { background: var(--d-sheet); }
body.dash :is(.y-field input, .y-field select, .y-field textarea, .y-chip, .y-icon, .y-empty) { border-color: #8a96a8; }
body.dash .y-notice.ok { background: var(--d-sage); }
body.dash .y-notice.warn { background: var(--d-ochre-soft); border-color: #e6cf7a; }
body.dash :is(.y-notice.error, .y-error) { background: #f4e2dc; color: var(--d-error); }
body.dash .y-tag { background: var(--d-sage); color: var(--d-ink); }
body.dash .section-kicker, body.dash .y-main .section-kicker { color: var(--d-muted); }
body.dash .test-data-note.light { color: var(--d-muted); }
body.dash dialog { background: var(--d-sheet); color: var(--d-ink); border-color: var(--d-line); }

/* ---------- Shell: top bar, sidebar (bottom bar on phones), main ---------- */
.dash-top { position: sticky; top: 0; z-index: 30; background: var(--d-deep); color: var(--d-sheet); }
.dash-top::after { content: ""; display: block; block-size: 8px; background-color: var(--d-ochre); background-image: var(--d-dots); background-size: 6px 6px; }
.dash-top-inner { display: flex; align-items: center; gap: 14px; padding: 8px clamp(16px, 3vw, 28px); min-block-size: 60px; }
.dash-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--d-sheet) !important; }
.dash-brand svg { inline-size: 76px; block-size: auto; direction: ltr; }
.dash-brand-label { font-weight: 700; color: var(--d-ochre); border-inline-start: 1px solid rgba(248, 246, 238, .3); padding-inline-start: 10px; }
.dash-account { margin-inline-start: auto; font-weight: 600; color: var(--d-mist); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 28ch; }
.dash-lang { border-color: rgba(248, 246, 238, .35); }
body.dash .dash-lang .rq-lang { color: var(--d-sheet); }
body.dash .dash-lang .rq-lang[aria-pressed="true"] { background: var(--d-ochre); color: var(--d-ink); }
.dash-back { color: var(--d-sheet) !important; font-weight: 600; text-underline-offset: 3px; text-decoration: underline; white-space: nowrap; }

.dash-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-block-size: calc(100vh - 76px); }
.dash-nav { background: var(--d-deep); color: var(--d-sheet); padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; align-self: stretch; }
/* Halftone fills the empty lower part of the sidebar: a large surface with no text on it. */
.dash-nav::after { content: ""; flex: 1 1 auto; min-block-size: 80px; border-radius: 14px; background-image: var(--d-dots-light); background-size: 6px 6px; }
.dash-group { display: grid; gap: 4px; }
.dash-group-label { margin: 0 0 4px; padding-inline: 12px; font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--d-mist); }
html[lang="ar"] .dash-group-label { text-transform: none; letter-spacing: 0; font-size: .875rem; }
.dash-link { display: flex; align-items: center; gap: 12px; min-block-size: 44px; padding: 0 12px; border-radius: 12px; color: var(--d-sheet) !important; text-decoration: none; font-weight: 600; }
.dash-link svg { inline-size: 20px; block-size: 20px; flex: none; }
.dash-link:hover { background: rgba(248, 246, 238, .08); }
.dash-link[aria-current="true"] { background: var(--d-ochre); color: var(--d-ink) !important; }
.dash-link .dash-badge { margin-inline-start: auto; font-size: .8125rem; padding: 1px 8px; border-radius: 999px; background: var(--d-sheet); color: var(--d-ink); }

.dash-main { padding: clamp(20px, 3vw, 36px) clamp(16px, 3vw, 40px) 48px; min-inline-size: 0; max-inline-size: 1180px; inline-size: 100%; }
.dash-main .y-head { border-block-end: 4px solid var(--d-ochre); padding-block-end: 14px; margin-block-end: 24px; }
.dash-main .y-lead { color: var(--d-muted); }
.dash-foot { border-block-start: 1px solid var(--d-line); padding: 18px clamp(16px, 3vw, 40px); color: var(--d-muted); font-size: .9375rem; display: grid; gap: 4px; }
.dash-foot p { margin: 0; }

/* Panels used by the role dashboards. */
.dash-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; margin-block-end: 20px; }
.dash-stat > div { background: var(--d-sheet); border: 1px solid var(--d-line); border-radius: 16px; padding: 16px; display: grid; gap: 4px; }
.dash-stat span { color: var(--d-muted); font-size: .9375rem; }
.dash-stat strong { font-size: 1.25rem; }
.dash-status { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: .9375rem; }
.dash-status.pending { background: var(--d-ochre-soft); color: var(--d-ink); }
.dash-status.verified { background: var(--d-green); color: var(--d-sheet); }
.dash-status.rejected, .dash-status.suspended { background: #f4e2dc; color: var(--d-error); }
.dash-choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.dash-choice { display: grid; gap: 8px; padding: 22px; border-radius: 18px; text-decoration: none; color: var(--d-ink) !important; border: 2px solid var(--d-green); background: var(--d-sage); }
.dash-choice strong { font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }
.dash-choice span { color: var(--d-muted); }
.dash-choice.agency { border-color: #b8891f; background: var(--d-ochre-soft); }
.dash-choice:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(14, 26, 43, .12); }
.dash-choice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 6px; }
.dash-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; border-block-end: 1px solid var(--d-line); }
.dash-offer:last-child { border-block-end: 0; }
.dash-offer p { margin: 2px 0 0; color: var(--d-muted); font-size: .9375rem; }
.dash-support { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

@media (prefers-reduced-motion: reduce) { .dash-choice:hover { transform: none; } }

/* Phones and small tablets: the sidebar becomes a bottom bar. */
@media (max-width: 860px) {
  .dash-shell { grid-template-columns: minmax(0, 1fr); }
  .dash-nav { position: fixed; inset: auto 0 0 0; top: auto; block-size: auto; z-index: 40; flex-direction: row; gap: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); overflow-x: auto; border-block-start: 4px solid var(--d-ochre); }
  .dash-nav::after, .dash-group-label { display: none; }
  .dash-group { display: contents; }
  .dash-link { flex: 1 0 auto; flex-direction: column; justify-content: center; gap: 2px; min-inline-size: 64px; padding: 6px 8px; font-size: .8125rem; text-align: center; white-space: nowrap; }
  .dash-link .dash-badge { display: none; }
  body.dash { padding-block-end: 84px; }
  .dash-brand-label, .dash-account { display: none; }
  .dash-top-inner { gap: 10px; }
  .dash-lang { margin-inline-start: auto; }
}
@media (max-width: 420px) { .dash-back { font-size: .875rem; } .dash-brand svg { inline-size: 64px; } }

/* Contrast fixes found by the 8 Nov audit. */
body.dash .skip-link { color: var(--d-ink); }                                 /* ink on ochre 7.61 */
body.dash .avatar { background: var(--d-sage); color: var(--d-ink); }          /* former business page, 11.51 */
body.dash .thumb { color: var(--d-ink); }

/* Agency checklist */
.dash-steps { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; gap: 8px; }
.dash-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--d-line); border-radius: 12px; background: var(--d-paper); font-weight: 600; }
.dash-steps li.done { background: var(--d-sage); }
.dash-steps svg { inline-size: 20px; block-size: 20px; color: var(--d-green); }
.dash-step-state { color: var(--d-muted); font-weight: 400; font-size: .9375rem; }