/* The Pargar visual identity, applied to the dashboard.
 *
 * Source of truth: Workshop/Pargar-Visual-Identity/Pargar-Visual-Identity-v1.1.html.
 * The colour tokens are the ones already written for the ads service
 * (Workshop/telegram-ads-automation/service/src/app/globals.css) rather than re-derived,
 * with one correction the phase prompt names: that file sets --surface-raised to pure
 * white, and the identity document forbids #FFFFFF outright. Cream tint stands in for it.
 *
 * ---------------------------------------------------------------------------------------
 * TYPOGRAPHY -- two deliberate departures from the identity document, both Barnikle's call
 * (2026-08-24), both written here so nobody "corrects" them back by reading the document.
 *
 *  1. **Kahroba is a display face here, not the body face.** The document's hierarchy table
 *     says "بدنهٔ متن: Kahroba Regular ۴۰۰، ۱۴–۱۶px", and that is what the first version of
 *     this stylesheet did. It works on a printed page and fails in a data table: Kahroba is
 *     drawn for the wordmark and for headlines, and at 13-15px in a dense grid it reads as
 *     texture rather than as text. Kahroba is therefore confined to the wordmark, the page
 *     title and the section titles -- everything at 18px and above, in 700/800, which is
 *     exactly the range the document itself assigns those weights. **Vazirmatn carries the
 *     body**, per Barnikle: "کهربا مالِ تیترهای مهم است، نه هر متنی؛ وزیرمتن برای متن‌های
 *     معمولی."
 *
 *  2. **Vazirmatn also carries the figures; Roboto is no longer used.** The document names
 *     Roboto for "اعداد، KPI، متن لاتین". Beside Kahroba on a marketing page that pairs;
 *     beside Vazirmatn in a table it does not, and Barnikle's reading of the built pages was
 *     that the numerals did not belong to the design. Vazirmatn's Latin and its digits are
 *     drawn against its own Persian, so one family now sets a Persian sentence, a Telegram
 *     username and a column of rial amounts in the same voice. Tabular figures are switched
 *     on wherever numbers stack, so a column lines up instead of shimmering.
 *     The Roboto files are still in static/fonts/ if this is ever reversed.
 *
 * Three rules from the document are load-bearing and stay:
 *
 *  1. Bronze is decorative. It never carries text and is never the background of readable
 *     text -- the document measures it at ~2.7:1 and calls it a failure even for large
 *     type. Here it is a rule and a separator, nothing else.
 *  2. No gradients, no #FFFFFF, no #000000. Every surface below is a palette colour.
 *  3. Persian line-height at least 1.7, always right-aligned. At most three typographic
 *     levels in a view: title, body, caption.
 *
 * One measured departure, deliberate: the document assigns #8C8577 to secondary text, but
 * against every light surface in this palette it lands at 3.1-3.4:1 -- under AA's 4.5:1 for
 * normal text. So secondary information is expressed by *size and weight* in the body
 * colour, and #8C8577 is kept for rules, separators and decoration. Nothing a person has to
 * read is printed in it.
 */

:root {
  --pine: #044b43;
  --pine-deep: #033832;
  --pine-tint: #edf2f1;
  --pine-tint-mid: #d9e4e2;
  --cream: #ebe3d0;
  --cream-tint: #f8f5ee;
  --bronze: #9f8151;
  --bronze-tint: #f0ece4;
  --charcoal: #17211e;
  --grey: #8c8577;
  --grey-tint: #e9e4da;

  --surface: var(--pine-tint);
  --surface-raised: var(--cream-tint);
  --surface-card: var(--bronze-tint);
  --text: var(--charcoal);
  --text-decor: var(--grey);
  --border: var(--grey-tint);

  /* Kahroba: wordmark and titles only. Vazirmatn: everything a person reads at length,
     including every figure. */
  --font-display: 'Kahroba', 'Vazirmatn', system-ui, sans-serif;
  --font-body: 'Vazirmatn', system-ui, sans-serif;

  /* Three levels, and no more, per the document's own rule. */
  --fs-page: 1.75rem;    /* 28px -- Kahroba 800 */
  --fs-section: 1.15rem; /* 18px -- Kahroba 700 */
  --fs-body: 0.9375rem;  /* 15px -- above the document's 14px floor */
  --fs-meta: 0.8125rem;  /* 13px -- above its 12px caption floor */

  --page-width: 78rem;
  --radius: 10px;
  --radius-sm: 7px;
}

/* Kahroba is the brand face; Vazirmatn is the fallback the spec names (never Tahoma).
 * Both are served from this application -- no CDN, which on this network is also the only
 * choice that loads. */
@font-face { font-family: 'Kahroba'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/static/fonts/kahroba-400.woff2') format('woff2'); }
@font-face { font-family: 'Kahroba'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('/static/fonts/kahroba-500.woff2') format('woff2'); }
@font-face { font-family: 'Kahroba'; font-weight: 700; font-style: normal; font-display: swap;
  src: url('/static/fonts/kahroba-700.woff2') format('woff2'); }
@font-face { font-family: 'Kahroba'; font-weight: 800; font-style: normal; font-display: swap;
  src: url('/static/fonts/kahroba-800.woff2') format('woff2'); }

@font-face { font-family: 'Vazirmatn'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('/static/fonts/vazirmatn-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200D; }
@font-face { font-family: 'Vazirmatn'; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url('/static/fonts/vazirmatn-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  /* The document's minimum for Persian is 1.7; this is above it. */
  line-height: 1.75;
  direction: rtl;
  text-align: right;
  /* Persian needs its letterforms unsquashed; Vazirmatn's default spacing is right. */
  font-feature-settings: "ss01";
}

/* A figure -- a rial amount, a date, a tracking code, a Telegram id, a phone number.
 * Always Latin digits and always tabular, for three reasons: it is what the operator types
 * into the sale template, it is what a bank statement and an accounting sheet carry, and it
 * survives being copied out of the page into either. Persian digits are used for numbers
 * that are part of a *sentence* -- see `app/web/format.py`. */
.num {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: 0;
}
code { font-family: var(--font-body); direction: ltr; unicode-bidi: isolate; }

a { color: var(--pine); text-underline-offset: 3px; }

/* ---- the header ------------------------------------------------------------- */

.top {
  background: var(--pine);
  color: var(--cream);
  /* Bronze's whole permitted role in this design: one thin accent rule. */
  border-bottom: 3px solid var(--bronze);
}

.top-inner {
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 0.7rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  letter-spacing: 0.01em;
  padding-inline-end: 1.25rem;
  border-inline-end: 1px solid var(--bronze);
}

/* Tabs, not a row of links. The active one is seated -- inverted to cream on pine -- so the
 * page you are on is the loudest thing in the bar rather than a two-pixel underline. */
.top nav { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.top nav a {
  color: var(--cream);
  text-decoration: none;
  font-weight: 500;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}
.top nav a:hover { border-color: var(--bronze); }
.top nav a[aria-current="page"] {
  background: var(--cream);
  color: var(--pine);
  font-weight: 700;
}

.who {
  margin-inline-start: auto;
  font-size: var(--fs-meta);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.who .role { opacity: 0.85; }
.who form { margin: 0; }
.who button {
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--cream);
  padding: 0.25rem 0.85rem;
  font-size: var(--fs-meta);
  font-weight: 500;
}
.who button:hover { background: var(--cream); color: var(--pine); border-color: var(--cream); }

/* ---- layout ----------------------------------------------------------------- */

main {
  max-width: var(--page-width);
  margin-inline: auto;
  padding: 1.75rem 1.5rem 4rem;
}

h1 {
  unicode-bidi: plaintext;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-page);
  line-height: 1.4;
  margin: 0 0 1.25rem;
}
h1 .id { font-size: 1rem; font-weight: 400; color: var(--text-decor); }

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-section);
  line-height: 1.5;
  margin: 2rem 0 0.75rem;
}

p { margin: 0 0 0.75rem; }
p:last-child { margin-bottom: 0; }

.card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
}
.card h2:first-child { margin-top: 0; }

/* The licence preview: `delivery.format_preview`'s own `\n`-joined lines, rendered verbatim
   so this page and the group's transient message can never read as two different texts. */
.preview-text { white-space: pre-line; line-height: 1.7; }
.preview-text blockquote {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.9rem;
  border-inline-start: 3px solid var(--bronze);
  background: var(--surface-raised);
}

/* Secondary information: smaller and lighter in weight, never in a colour that fails AA. */
.note { font-size: var(--fs-meta); line-height: 1.7; }
.decor { color: var(--text-decor); }

/* ---- tables ----------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-card);
}

table { width: 100%; border-collapse: collapse; }

caption {
  text-align: right;
  font-size: var(--fs-meta);
  font-weight: 500;
  padding: 0 0.15rem 0.5rem;
}

th, td {
  padding: 0.65rem 0.85rem;
  text-align: right;
  /* Top, not middle. A row whose first cell wraps to two lines used to push every other
     cell to the vertical centre, which is what made these tables look adrift. */
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

thead th {
  background: var(--pine);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-meta);
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

/* Every column that holds a figure, a date or a code shrinks to its content and never
   wraps; the one text column takes what is left. This is what stops eight columns of
   different natures from being given eight equal widths. */
td.num, th.num, .shrink { white-space: nowrap; width: 1%; }

tbody tr:nth-child(even) { background: var(--cream-tint); }
tbody tr:hover { background: var(--pine-tint); }
tbody tr:last-child td { border-bottom: none; }

/* The primary cell of a row: the name, the thing you click, and one quiet line under it. */
.cell-main { min-width: 12rem; }
/* `plaintext` takes each name's direction from its own first letter, so a Persian name
   stays RTL and a Latin username like `yalan_donya` stops having its underscores reordered
   by the surrounding Persian line. */
.rowlink { font-weight: 700; text-decoration: none; unicode-bidi: plaintext; }
.rowlink:hover { text-decoration: underline; }
.cell-main .sub { font-size: var(--fs-meta); color: var(--text-decor); }

/* A warning printed in full made every row a different height and the grid unreadable. It
   is one clamped line here with the whole text in the tooltip; the record page prints it
   in full. */
.flag {
  display: block;
  max-width: 20rem;
  font-size: var(--fs-meta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.open-cell { width: 1%; white-space: nowrap; vertical-align: middle; }
.open-cell .btn { padding: 0.25rem 0.8rem; font-size: var(--fs-meta); }

/* A summary table -- six columns of comparable weight. Here the shrink-to-content rule is
   wrong: it hands every spare pixel to the first column and leaves a third of the table
   empty. The columns share the width instead, and keep their nowrap. */
.table-even td.num, .table-even th.num, .table-even .shrink { width: auto; }
.table-even th:first-child, .table-even td:first-child { width: 22%; }

/* ---- status ---------------------------------------------------------------- */

.pill {
  display: inline-block;
  border-radius: 999px;
  padding: 0.1rem 0.7rem;
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;      /* "در انتظار" was breaking across two lines inside its pill */
  border: 1px solid var(--pine);
}
.pill-pending  { background: var(--cream); color: var(--charcoal); border-color: var(--bronze); }
.pill-approved { background: var(--pine); color: var(--cream); }
.pill-rejected { background: var(--pine-tint-mid); color: var(--charcoal); }
.pill-delivered{ background: var(--pine); color: var(--cream); border-color: var(--bronze); }

.warn {
  background: var(--cream);
  border: 1px solid var(--bronze);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  margin-bottom: 1rem;
}
.error { border-inline-start: 3px solid var(--pine); padding-inline-start: 0.7rem; font-weight: 500; }

/* ---- chips ------------------------------------------------------------------ */

.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.chips a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--pine);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.95rem;
  font-size: var(--fs-meta);
  font-weight: 500;
}
.chips a:hover { border-color: var(--pine); }
.chips a[aria-current="page"] {
  background: var(--pine);
  color: var(--cream);
  border-color: var(--pine);
  font-weight: 700;
}
.chips .count { font-variant-numeric: tabular-nums; opacity: 0.85; }

/* ---- the figure band -------------------------------------------------------- */

.summary {
  background: var(--pine);
  color: var(--cream);
  border-radius: var(--radius);
  border-bottom: 3px solid var(--bronze);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}
.summary .item { display: flex; flex-direction: column; gap: 0.15rem; }
.summary .label { font-size: var(--fs-meta); opacity: 0.9; }
.summary .value { font-size: 1.3rem; font-weight: 700; line-height: 1.4; }
.summary .pill { border-color: var(--cream); }

/* ---- forms and buttons ------------------------------------------------------ */

label { display: block; font-size: var(--fs-meta); font-weight: 500; margin-bottom: 0.3rem; }

input[type="text"], input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--pine);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-family: var(--font-body);
}
textarea { min-height: 8rem; direction: ltr; text-align: left; }
input[type="checkbox"] { width: auto; display: inline-block; vertical-align: middle; }
label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; }

button, .btn {
  font: inherit;
  font-family: var(--font-body);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-radius: var(--radius-sm);
  padding: 0.45rem 1.1rem;
  background: var(--pine);
  color: var(--cream);
  border: 1px solid var(--pine);
}
button:hover, .btn:hover { background: var(--pine-deep); border-color: var(--pine-deep); }
.btn-quiet { background: var(--surface-raised); color: var(--pine); border-color: var(--border); }
.btn-quiet:hover { background: var(--pine-tint); color: var(--pine); border-color: var(--pine); }

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

.filters { display: flex; gap: 0.75rem; align-items: flex-end; }
.filters .field { flex: 1 1 auto; }
.filters .actions { display: flex; gap: 0.5rem; flex: 0 0 auto; }

/* ---- phase 7c: the action controls on a record ------------------------------ */

.actions .action + .action { margin-top: 0.85rem; }
.actions form + .btn,
.actions .btn + form { margin-top: 0.85rem; display: block; }

/* ---- login ------------------------------------------------------------------ */

/* The sign-in page has no header, so the card is centred in the viewport rather than in a
   page that starts under one. */
.login-wrap { min-height: 70vh; display: grid; place-items: center; }
.login-card {
  width: min(24rem, 100%);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-top: 3px solid var(--bronze);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.login-card h1 { text-align: center; font-size: 1.5rem; }
.login-card label { margin-top: 0.85rem; }
.login-card button { width: 100%; margin-top: 1.25rem; }
.login-card input[dir="ltr"] { text-align: left; }

/* ---- a record --------------------------------------------------------------- */

.fields { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.25rem; margin: 0; }
.fields dt { font-size: var(--fs-meta); font-weight: 500; color: var(--text); padding-top: 0.1rem; }
.fields dd { margin: 0; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  border-inline-start: 2px solid var(--pine-tint-mid);
  padding: 0 0.9rem 0.8rem;
  position: relative;
}
.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  top: 0.55rem;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--bronze);
}
.timeline li:last-child { border-inline-start-color: transparent; }
.timeline time { display: block; font-size: var(--fs-meta); color: var(--text-decor); }

.receipts { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.receipts a {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.95rem;
  background: var(--surface-raised);
  text-decoration: none;
  font-size: var(--fs-meta);
}
.receipts a:hover { border-color: var(--pine); background: var(--pine-tint); }

.raw {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  line-height: 1.9;
}

.backlink { display: inline-block; margin-bottom: 0.85rem; font-size: var(--fs-meta); }
.pager { display: flex; gap: 0.75rem; align-items: center; margin-top: 1rem; font-size: var(--fs-meta); }

/* ---- the report -------------------------------------------------------------- *
 * The pending columns sit on a different surface behind a bronze rule -- the one place
 * bronze earns its keep here. Not decoration: the report's whole promise is that the
 * approved figure and the pending one are never added together, and a table where the two
 * look alike is an invitation to do exactly that with a finger. */
td.waiting { background: var(--surface-raised); }
tbody tr:nth-child(even) td.waiting { background: var(--bronze-tint); }
.waiting-start { border-inline-start: 2px solid var(--bronze); }

tfoot th, tfoot td {
  border-top: 2px solid var(--pine);
  border-bottom: none;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}
tfoot th { background: var(--pine); color: var(--cream); text-align: right; }
tfoot td { background: var(--pine-tint); }

/* A sale whose date never parsed belongs to no month. It stays in the table so the page and
 * the sale list agree on how many records exist, and is tinted so nobody reads it as one. */
tr.undated td { background: var(--cream-tint); }
tr.undated .flag { white-space: normal; }