/* ATPGRDF design system.

   The mockup referenced `_ds/organic-98787a05-…/styles.css`, generated by a
   design tool and never present on disk. This file reconstructs it from how the
   mockup USES the tokens — every custom property and class below appears in
   RD-System.dc.html. Nothing here is invented decoration.

   Palette: the hue is taken from the company logo's gradient (#F3BE71 → #FFE9C9,
   hue ≈35°, "آفتاب طلایی" = golden sun), extended into a ramp. Every text/ground
   pair below was contrast-checked; ratios are noted inline. WCAG AA (4.5:1 for
   body text) is a requirement here, not an aspiration.
*/

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* Grounds — warm off-white, not grey; the mockup's scrim is rgba(20,15,10,…) */
  --color-bg:            #FDFBF7;
  --color-surface:       #FFFFFF;
  --color-text:          #2A2118;   /* 15.29:1 on bg  */
  --color-divider:       #E8E0D4;

  /* Accent ramp — gold/ochre. `--color-accent` is used as a SOLID FILL with
     --color-bg as the foreground, so it must be dark enough for light text. */
  --color-accent-100:    #FDF3E3;
  --color-accent-200:    #F7E3C4;
  --color-accent:        #A85E11;   /* bg on it: 4.75:1 */
  --color-accent-700:    #8F4E0B;   /* links:    6.23:1 */
  --color-accent-800:    #7A3F08;   /* warnings: 7.99:1 */
  --color-accent-900:    #4A2705;   /* logo disc: 12.83:1 */

  /* Secondary accent — reads as "good/passing": stage zone ۱–۳, in-spec chem
     values, passed tests, progress fill. Green against the gold. */
  --color-accent-2:      #2F7A55;   /* bg on it: 5.03:1 */
  --color-accent-2-700:  #1F5C3E;   /* 7.64:1 on bg */

  /* Warm neutrals, tinted to sit with the golds rather than fight them. */
  --color-neutral-200:   #EFE9E0;
  --color-neutral-300:   #DCD3C6;
  --color-neutral-500:   #786D5E;   /* muted text: 4.90:1 on bg */

  --radius-md: 9px;
  --radius-lg: 14px;

  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --shadow-sm: 0 1px 2px rgba(74, 39, 5, .06), 0 1px 3px rgba(74, 39, 5, .05);
  --shadow-md: 0 4px 10px rgba(74, 39, 5, .08), 0 2px 4px rgba(74, 39, 5, .05);
  --shadow-lg: 0 12px 32px rgba(74, 39, 5, .13), 0 4px 8px rgba(74, 39, 5, .06);

  --font-heading: 'Lalezar', 'Vazirmatn', system-ui, sans-serif;
  --font-body:    'Vazirmatn', system-ui, sans-serif;
}

/* ── Base ────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; direction: rtl; }
/* The `hidden` attribute is how JS shows/hides here (no innerHTML, C13). Any
   author `display:` — .btn, .field, .dialog-backdrop — outranks the UA's
   [hidden] rule, so it must be stated once, loudly, or `el.hidden = true` is
   silently ignored. */
[hidden] { display: none !important; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;      /* Lalezar ships one weight; asking for 700 fakes it */
  letter-spacing: 0;
  line-height: 1.3;
}
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); text-decoration: underline; }

/* Keyboard focus must always be visible. The mockup had no focus styling at
   all, which makes the whole app unusable without a mouse. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Numbers, codes, dates and prices stay LTR inside RTL prose. The mockup did
   this with a repeated inline style="direction:ltr;text-align:left". */
.ltr, .num { direction: ltr; unicode-bidi: isolate; }
.num-c { direction: ltr; text-align: center; }
.text-muted { color: var(--color-neutral-500); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-300); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Elevation ───────────────────────────────────────────────────────────── */
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* ── Card ────────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.card-title { font-family: var(--font-heading); font-size: 17px; line-height: 1.3; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 7px 15px;
  font-family: inherit; font-size: 14px; font-weight: 500;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--color-text);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover:not(:disabled) { background: var(--color-accent-700); }
.btn-secondary { background: var(--color-surface); border-color: var(--color-divider); }
.btn-secondary:hover:not(:disabled) { background: var(--color-accent-100); border-color: var(--color-accent-200); }
.btn-ghost { background: transparent; color: var(--color-neutral-500); padding: 6px 10px; }
.btn-ghost:hover:not(:disabled) { background: var(--color-neutral-200); color: var(--color-text); }
.btn-danger { background: transparent; color: var(--color-accent-800); border-color: var(--color-divider); }
.btn-danger:hover:not(:disabled) { background: var(--color-accent-100); }
/* 36×36 — the mockup's icon buttons were 20px, below the WCAG 2.5.8 minimum. */
.btn-icon { min-width: 36px; width: 36px; height: 36px; padding: 0; }
.btn-block { display: flex; width: 100%; }

/* ── Tags / badges ───────────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.7;
  white-space: nowrap; border: 1px solid transparent;
}
.tag-accent   { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: #E3F2EA; color: var(--color-accent-2-700); }
.tag-neutral  { background: var(--color-neutral-200); color: var(--color-neutral-500); }
.tag-outline  { background: transparent; color: var(--color-accent-800); border-color: var(--color-accent-800); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 12.5px; color: var(--color-neutral-500); font-weight: 500; }
.input {
  font-family: inherit; font-size: 14px;
  padding: 8px 11px; min-height: 36px; width: 100%;
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  transition: border-color .15s, box-shadow .15s;
}
.input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-100);
}
.input[readonly], .input:disabled {
  background: var(--color-neutral-200); color: var(--color-neutral-500); cursor: not-allowed;
}
textarea.input { min-height: 72px; resize: vertical; line-height: 1.7; }
select.input { appearance: none; padding-inline-end: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23786D5E' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 11px center;
}
.hint  { font-size: 11.5px; color: var(--color-neutral-500); }
.error { font-size: 12px; color: var(--color-accent-800); font-weight: 500; }
.input[aria-invalid="true"] { border-color: var(--color-accent-800); }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { text-align: right; padding: 9px 10px; vertical-align: middle; }
.table thead th {
  font-size: 12px; font-weight: 600; color: var(--color-neutral-500);
  border-bottom: 1px solid var(--color-divider); white-space: nowrap;
}
.table tbody tr { border-bottom: 1px solid var(--color-divider); }
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background: var(--color-accent-100); }
/* Wide tables scroll inside their own box; the page body never scrolls sideways. */
.table-wrap { overflow-x: auto; }

/* ── Dialog ──────────────────────────────────────────────────────────────── */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(42, 33, 24, .48);
  display: grid; place-items: center; padding: 20px;
}
.dialog {
  background: var(--color-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
  padding: var(--space-6);
}
.dialog-title { font-family: var(--font-heading); font-size: 19px; margin-bottom: var(--space-4); }
.dialog-body { display: flex; flex-direction: column; gap: 10px; }
.dialog-actions {
  display: flex; gap: 8px; justify-content: flex-start;
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
}
/* Data-entry dialogs (macros/dialog.html). A form here is the same field/input
   pair the pages use — the dialog is a container, not a second design. */
.dialog-wide { width: min(720px, 100%); }
.dialog { animation: dialogIn .18s ease; }
@keyframes dialogIn { from { opacity: 0; transform: translateY(8px) scale(.99); }
                      to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dialog { animation: none; } }
/* The scrim covers the viewport, so the page behind it must not scroll under
   the finger/wheel — that reads as the dialog itself being broken. */
.has-dialog, .has-dialog body { overflow: hidden; }

.dialog-message { margin: 0; font-size: 14px; line-height: 1.8; }
.dialog-sub { margin: -6px 0 0; font-size: 12.5px; }
/* Two fields per line above 560px; one below. `min-width:0` because an <input>
   carries an intrinsic ~20ch width that otherwise blows the grid open. */
.dialog-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dialog-row > * { min-width: 0; }
@media (max-width: 560px) { .dialog-row { grid-template-columns: 1fr; } }

.dialog .field > label .req { color: var(--color-accent-800); }
.field-error { margin: 0; font-size: 12px; font-weight: 500; color: var(--color-accent-800); }
.dialog-error {
  margin: var(--space-4) 0 0; padding: 8px 11px; border-radius: var(--radius-md);
  background: var(--color-accent-100); border: 1px solid var(--color-accent-200);
}

/* Checkbox group (`dchecks`) — a real <fieldset>, so the group has one name. */
.dialog-checks { border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: 10px 12px; gap: 8px; }
.dialog-checks > legend { font-size: 12.5px; color: var(--color-neutral-500);
  font-weight: 500; padding: 0 4px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.check-opt { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }

/* ── Toggle switch ───────────────────────────────────────────────────────── */
/* The mockup used <span onClick> — unreachable by keyboard. This is a real
   <button role="switch">, and the knob follows the RTL writing direction. */
.switch {
  position: relative; width: 42px; height: 24px; flex: none; padding: 0;
  border: none; border-radius: 999px; cursor: pointer;
  background: var(--color-neutral-300); transition: background .2s;
}
.switch[aria-checked="true"] { background: var(--color-accent); }
.switch::after {
  content: ""; position: absolute; top: 3px; inset-inline-end: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-sm); transition: inset-inline-end .2s;
}
.switch[aria-checked="true"]::after { inset-inline-end: 21px; }
.switch:disabled { opacity: .55; cursor: not-allowed; }

/* ── Progress bar ────────────────────────────────────────────────────────── */
.bar { height: 8px; background: var(--color-neutral-200); border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--color-accent); }
.bar.ok > span { background: var(--color-accent-2); }

/* ── App shell ───────────────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; }
.app-side {
  width: 250px; flex: none; padding: 18px 14px;
  display: flex; flex-direction: column; gap: 5px;
  background: var(--color-surface); border-inline-start: 1px solid var(--color-divider);
}
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 20px; position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(8px);
}
/* The cap used to be 1200px, which on a 1080p screen left ~450px of dead space
   at the inline end (the left, in RTL) while wide tables — the catalog's is
   1180px on its own — scrolled inside their card. The content now takes the
   width it is given; the cap only stops line lengths running away on ultra-wide
   monitors, and `margin-inline: auto` splits what is left evenly instead of
   piling it all on one side. */
.app-content {
  flex: 1; padding: var(--space-6);
  width: 100%; max-width: 1700px; margin-inline: auto;
}

.navlink {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--radius-md);
  font-size: 14.5px; color: var(--color-text); cursor: pointer; transition: .15s;
}
.navlink:hover { background: var(--color-accent-100); text-decoration: none; }
.navlink.is-active { background: var(--color-accent); color: var(--color-bg); }
.nav-section {
  font-size: 10.5px; letter-spacing: .06em;
  color: var(--color-neutral-500); padding: 12px 12px 4px;
}

.avatar {
  border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg);
  font-family: var(--font-heading);
}

/* ── Utilities used by the page templates ────────────────────────────────── */
.row { display: flex; align-items: center; gap: 10px; }
.grid { display: grid; gap: var(--space-4); }
.spacer { margin-inline-start: auto; }   /* replaces the mockup's margin-right:auto */
.view { animation: fadeUp .3s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .view { animation: none; }
  * { transition-duration: .01ms !important; }
}
.empty { color: var(--color-neutral-500); font-size: 13px; padding: 12px 4px; }

/* Compact table density (the mockup's `dense` prop). */
.dense .card { padding: var(--space-2); }
.dense .table td, .dense .table th { padding: 6px 8px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
.app-hamb { display: none; }
.scrim { display: none; }
@media (max-width: 880px) {
  .app-side {
    position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 50;
    transform: translateX(-100%);          /* RTL: drawer sits on the right */
    transition: transform .25s ease; box-shadow: var(--shadow-lg);
  }
  .app-side.open { transform: none; }
  .app-hamb { display: inline-flex; }
  .scrim.open {
    display: block; position: fixed; inset: 0; z-index: 45;
    background: rgba(42, 33, 24, .45);
  }
  .topbar-id { display: none; }
  .app-content { padding: var(--space-4); }
}

/* ── Print (formula sheets get printed and taken to the factory) ─────────── */
@media print {
  .app-side, .app-topbar, .btn, .scrim { display: none !important; }
  .app-content { max-width: none; padding: 0; }
  .card { box-shadow: none; border: 1px solid var(--color-divider); }
}

/* ── Toasts (static/js/toast.js) ─────────────────────────────────────────── */
.toast-host {
  position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 90;
  display: flex; flex-direction: column; gap: 8px; max-width: min(380px, 90vw);
}
.toast {
  padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--color-text); color: var(--color-bg);
  font-size: 13.5px; line-height: 1.6; box-shadow: var(--shadow-lg);
  animation: toastIn .2s ease;
}
.toast-error { background: var(--color-accent-800); }
.toast-info  { background: var(--color-accent-2-700); }
.toast.is-out { opacity: 0; transition: opacity .25s ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }