/* =========================================================================
   Raimon CRM — application shell
   -------------------------------------------------------------------------
   Hand-written, RTL-first, served locally. No CDN, no web font, no framework.
   Typography uses the fonts already present on a Windows machine, which
   render Persian correctly without a download. A dedicated typography pass
   (Vazirmatn) is a deliberate later step.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     Raimon brand — black, white, and a mature silver.
     -----------------------------------------------------------------------
     Silver is an *accent*, never a text colour: #b9bcc0 on white is about
     2.1:1, nowhere near readable. It earns its keep on separators, card
     headers, selected borders and restrained hover states, where contrast is
     not what it is doing. Secondary text uses --raimon-muted (≈5.1:1), which
     is a genuine improvement on the slate it replaces.
     ----------------------------------------------------------------------- */
  --raimon-black:       #0b0b0c;
  --raimon-charcoal:    #1c1d20;
  --raimon-white:       #ffffff;
  --raimon-off-white:   #fafaf9;
  --raimon-silver:      #b9bcc0;
  --raimon-silver-dark: #8c9095;
  --raimon-silver-50:   #f4f5f6;
  --raimon-border:      #e3e5e7;
  --raimon-muted:       #6b6f76;

  /* The brand tokens the whole stylesheet already reads, re-pointed rather
     than replaced. One edit here re-skins every button, active nav item and
     hover state that was written against them — which is why they were
     tokens in the first place. */
  --brand-600: var(--raimon-charcoal);
  --brand-700: var(--raimon-black);
  --brand-50:  var(--raimon-silver-50);
  --brand-100: var(--raimon-border);

  /* The neutral ramp loses its blue cast. Slate fights a silver identity;
     every step below is at least as readable as the one it replaces. */
  --ink-900: #111214;
  --ink-700: #35373b;
  --ink-500: #6b6f76;
  --ink-400: #9aa0a6;
  --ink-300: #d2d5d9;
  --ink-200: #e3e5e7;
  --ink-100: #f2f3f4;
  --ink-50:  #fafaf9;
  --white:   #ffffff;

  --ok-600:   #15803d;
  --ok-50:    #f0fdf4;
  --warn-600: #b45309;
  --warn-50:  #fffbeb;
  --danger-600: #b91c1c;
  --danger-50:  #fef2f2;
  --info-600: #0e7490;
  --info-50:  #ecfeff;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow: 0 2px 8px rgba(15, 23, 42, .08);

  --sidebar-width: 244px;
  --header-height: 56px;

  --font: "Segoe UI", Tahoma, "Iran Sans", "Nazanin", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-900);
  background: var(--ink-100);
}

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .6rem; font-weight: 600; line-height: 1.45; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .98rem; }
p  { margin: 0 0 .8rem; }

/* Latin fragments and numbers inside Persian text stay readable */
.ltr, code, .num { direction: ltr; unicode-bidi: embed; }
code, .mono { font-family: var(--font-mono); font-size: .9em; }

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

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: var(--white);
  border-inline-start: 1px solid var(--ink-200);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar__brand {
  /* A little more room above the mark so it is not pinned to the top edge.
     Only the top changes; the sidebar width and the rule below are untouched. */
  padding: 1.35rem 1.15rem .9rem;
  border-bottom: 1px solid var(--raimon-border);
}
.sidebar__brand-sub {
  /* Nudged up from .74rem/--ink-500 (≈5.1:1). Still clearly subordinate to the
     nav items at .875rem — the size gap carries the hierarchy, so the contrast
     can afford to be honest. */
  font-size: .79rem;
  color: var(--ink-700);
  margin-top: .28rem;
}

.nav { padding: .6rem .55rem; flex: 1; }
.nav__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .65rem;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-size: .875rem;
  transition: background .12s ease, color .12s ease;
}
.nav__item:hover { background: var(--ink-100); text-decoration: none; }
.nav__item--current {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}
.nav__item--disabled {
  color: var(--ink-400);
  cursor: not-allowed;
}
.nav__item--disabled:hover { background: transparent; }

.nav__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink-300);
  flex: 0 0 7px;
}
.nav__item--current .nav__dot { background: var(--brand-600); }
.nav__item--disabled .nav__dot { background: var(--ink-200); }

.nav__soon {
  margin-inline-start: auto;
  font-size: .66rem;
  color: var(--ink-400);
  background: var(--ink-100);
  padding: .05rem .35rem;
  border-radius: 999px;
}

.sidebar__foot {
  padding: .8rem 1rem;
  border-top: 1px solid var(--ink-200);
  font-size: .78rem;
  color: var(--ink-500);
}
.sidebar__user { color: var(--ink-900); font-weight: 600; font-size: .84rem; }
.sidebar__role { font-size: .72rem; color: var(--ink-500); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--header-height);
  background: var(--white);
  border-bottom: 1px solid var(--ink-200);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.4rem;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar__title { font-weight: 600; font-size: .98rem; }
.topbar__spacer { flex: 1; }
.topbar__date { font-size: .82rem; color: var(--ink-500); }

.content { padding: 1.4rem; flex: 1; }
.content--narrow { max-width: 880px; }

/* ----------------------------------------------------------------- cards */

.card {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.card__head {
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--raimon-border);
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--raimon-silver-50);
}
.card__title { font-weight: 600; font-size: .93rem; margin: 0; }
.card__body { padding: 1.1rem; }
.card__body--flush { padding: 0; }

/* ----------------------------------------------------------------- stats */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: .9rem;
  margin-bottom: 1.2rem;
}
.stat {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: .95rem 1.05rem;
  box-shadow: var(--shadow-sm);
}
.stat__label { font-size: .78rem; color: var(--ink-500); margin-bottom: .2rem; }
.stat__value { font-size: 1.6rem; font-weight: 700; line-height: 1.25; }
.stat__hint  { font-size: .72rem; color: var(--ink-400); }
.stat--ok     .stat__value { color: var(--ok-600); }
.stat--warn   .stat__value { color: var(--warn-600); }
.stat--danger .stat__value { color: var(--danger-600); }
.stat--brand  .stat__value { color: var(--brand-600); }

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

.table-wrap { overflow-x: auto; }

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
table.data th,
table.data td {
  padding: .58rem .8rem;
  text-align: right;
  border-bottom: 1px solid var(--ink-200);
  vertical-align: top;
}
table.data th {
  background: var(--ink-50);
  font-weight: 600;
  color: var(--ink-700);
  font-size: .8rem;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
table.data tbody tr:hover { background: var(--brand-50); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data td.num, table.data th.num { text-align: left; }

.truncate {
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.truncate--wide { max-width: 46ch; }

/* -------------------------------------------------------------- key/value */

.kv { display: grid; grid-template-columns: 190px 1fr; gap: .05rem 1rem; }
.kv__k {
  color: var(--ink-500);
  font-size: .82rem;
  padding: .38rem 0;
  border-bottom: 1px solid var(--ink-100);
}
.kv__v {
  font-size: .87rem;
  padding: .38rem 0;
  border-bottom: 1px solid var(--ink-100);
  word-break: break-word;
}
.kv__v--raw {
  font-family: var(--font-mono);
  font-size: .8rem;
  white-space: pre-wrap;
  background: var(--ink-50);
  border-radius: var(--radius-sm);
  padding: .38rem .5rem;
}

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-block;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
}
.badge--ok     { background: var(--ok-50);     color: var(--ok-600); }
.badge--warn   { background: var(--warn-50);   color: var(--warn-600); }
.badge--danger { background: var(--danger-50); color: var(--danger-600); }
.badge--info   { background: var(--info-50);   color: var(--info-600); }
.badge--muted  { background: var(--ink-100);   color: var(--ink-500); }
.badge--brand  { background: var(--brand-50);  color: var(--brand-700); }

/* --------------------------------------------------------------- notices */

.notice {
  border-radius: var(--radius);
  padding: .85rem 1.05rem;
  margin-bottom: 1.1rem;
  border: 1px solid;
  font-size: .86rem;
}
.notice__title { font-weight: 700; margin-bottom: .25rem; }
.notice--warn   { background: var(--warn-50);   border-color: #fcd34d; color: #78350f; }
.notice--info   { background: var(--info-50);   border-color: #a5f3fc; color: #155e75; }
.notice--ok     { background: var(--ok-50);     border-color: #bbf7d0; color: #14532d; }
.notice--danger { background: var(--danger-50); border-color: #fecaca; color: #7f1d1d; }
.notice p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- forms */

.field { margin-bottom: .95rem; }
.field__label {
  display: block;
  font-size: .83rem;
  font-weight: 600;
  color: var(--ink-700);
  margin-bottom: .3rem;
}
.input, .select {
  width: 100%;
  padding: .5rem .7rem;
  font-family: inherit;
  font-size: .88rem;
  color: var(--ink-900);
  background: var(--white);
  border: 1px solid var(--ink-300);
  border-radius: var(--radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--raimon-charcoal);
  /* Silver, at a weight that is genuinely visible against white. The old
     ring inherited a near-white brand tint once the palette went neutral,
     which would have quietly removed the focus indicator. */
  box-shadow: 0 0 0 3px rgba(140, 144, 149, .28);
}
.jalali-date-input { text-align: left; }

/* A textarea's default `resize: both` lets the user drag it *wider* than its
   column, so it slides over whatever sits beside it — on the follow-up form,
   over the date field — and there is no obvious way back. Vertical-only growth
   pushes the page down instead, which is recoverable and predictable. */
textarea.input {
  display: block;
  resize: vertical;
  width: 100%;
  max-width: 100%;
  min-height: 4.5rem;
  line-height: 1.7;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem 1rem;
  font-family: inherit;
  font-size: .87rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand-600); color: var(--white); }
.btn--primary:hover { background: var(--brand-700); }
.btn--ghost { background: var(--white); color: var(--ink-700); border-color: var(--ink-300); }
.btn--ghost:hover { background: var(--ink-50); }
.btn--sm { padding: .3rem .65rem; font-size: .8rem; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: flex-end;
}
.filters .field { margin-bottom: 0; }
.filters .input, .filters .select { min-width: 190px; width: auto; }

/* --- filter bar -----------------------------------------------------------
   One grid, one baseline. The older flex version sized each control by its own
   content — `width: auto` inside a `flex: 2` wrapper — so the search box never
   filled the space reserved for it and the company and status boxes ended up
   on different vertical lines. A grid gives every control the same cell width,
   the same height and the same bottom edge.

   Controls with no label of their own (the archive checkbox, the buttons) get
   an invisible spacer label so their boxes line up with the labelled ones
   instead of floating a label's height higher. */
.filterbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .7rem .8rem;
  align-items: end;
  width: 100%;
}
.filterbar .field { margin-bottom: 0; min-width: 0; }
.filterbar .input,
.filterbar .select { width: 100%; min-width: 0; }
.filterbar__search { grid-column: span 2; }
.filterbar .field--check,
.filterbar .field--actions { display: block; }
.filterbar .field--check .check,
.filterbar__buttons {
  min-height: 2.35rem;          /* the height of an .input, so the box aligns */
  display: flex;
  align-items: center;
  gap: .4rem;
}
.filterbar__buttons .btn { flex: 1; white-space: nowrap; }

/* Reserves exactly one label line without showing anything, so a control with
   no label of its own still starts at the same height as the labelled ones. */
.field__label--spacer { visibility: hidden; display: block; }

@media (max-width: 700px) {
  .filterbar { grid-template-columns: 1fr; }
  .filterbar__search { grid-column: auto; }
}

/* The card-based filter forms (opportunities, quotations) lay out with
   .form__grid; their action cell uses the same spacer trick so the buttons sit
   on the same line as the inputs rather than a label's height above them. */
.form__grid .field--actions { display: block; }
.form__grid .field--actions .filterbar__buttons { min-height: 2.35rem; }

/* ------------------------------------------------------------ pagination */

.pager {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--ink-200);
  font-size: .84rem;
  background: var(--ink-50);
}
.pager__spacer { flex: 1; }

/* ---------------------------------------------------------------- brand */
/*
   One component, two sizes. The mark is either real artwork from
   static/brand/ or the company name set in type — never a traced
   approximation. See static/brand/README.md.
*/

.brand { display: inline-flex; align-items: center; }
.brand__logo { display: block; width: auto; object-fit: contain; }
.brand__wordmark {
  font-weight: 700;
  color: var(--raimon-black);
  /* Slightly open tracking so the Persian wordmark reads as a mark rather
     than as a heading that happens to say the company name. */
  letter-spacing: .01em;
}
/* 26px -> 30px, about +15%. The mark is 889x257, so at 30px it draws ~104px
   wide — well inside the 150px cap and the 207px of usable sidebar, so the
   width is unchanged and nothing can overflow. */
.brand--sidebar .brand__logo { height: 30px; max-width: 150px; }
.brand--sidebar .brand__wordmark { font-size: 1.12rem; }
.brand--login .brand__logo { height: 44px; max-width: 210px; }
.brand--login .brand__wordmark { font-size: 1.6rem; }

/* ----------------------------------------------------------- login page */
/*
   A private business system: white ground, one brand placement, two fields.
   The previous dark-gradient panel read as a marketing splash; silver hairlines
   do the work instead.
*/

.login-body { background: var(--raimon-off-white); }
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--raimon-off-white);
  padding: 1.5rem;
}
.login-card {
  width: 100%;
  max-width: 392px;
  background: var(--raimon-white);
  border: 1px solid var(--raimon-border);
  border-radius: 14px;
  /* Restrained, not floating. A heavy drop shadow is the flashiness the
     brief rules out. */
  box-shadow: 0 1px 2px rgba(11, 11, 12, .04), 0 12px 32px rgba(11, 11, 12, .06);
  padding: 2.4rem 2rem 1.6rem;
}
.login-card__brand {
  text-align: center;
  padding-bottom: 1.35rem;
  margin-bottom: 1.6rem;
  /* The one silver detail the brief asks for, used where contrast is not
     what it is doing. */
  border-bottom: 1px solid var(--raimon-border);
}
.login-card__title {
  margin: .85rem 0 0;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.7;
  color: var(--ink-700);
}
.login-card__submit { width: 100%; margin-top: .35rem; }
.login-card__foot {
  margin-top: 1.7rem;
  padding-top: 1rem;
  border-top: 1px solid var(--raimon-border);
  text-align: center;
}
.login-card__enmark { height: 20px; width: auto; opacity: .5; }
.login-card__enmark-text {
  font-size: .78rem;
  letter-spacing: .22em;
  /* --raimon-muted, not --raimon-silver: silver on white is ~2:1 and would
     be decoration masquerading as text. */
  color: var(--raimon-muted);
}

/* --------------------------------------------------------------- helpers */

.muted { color: var(--ink-500); }
.nowrap { white-space: nowrap; }
.small { font-size: .8rem; }
.empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--ink-500);
  font-size: .88rem;
}
.segment {
  padding: .55rem .8rem;
  border-inline-start: 3px solid var(--brand-100);
  background: var(--ink-50);
  border-radius: var(--radius-sm);
  margin-bottom: .5rem;
  font-size: .86rem;
  white-space: pre-wrap;
}
.flag-list { display: flex; flex-wrap: wrap; gap: .3rem; }

/* =========================================================================
   Migration review workbench (Phase 2)
   ========================================================================= */

/* --- two-pane review layout, desktop-first --- */
.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start;
}
.review-pane { margin-bottom: 0; }
.review-pane .card__body { max-height: calc(100vh - 230px); overflow-y: auto; }

/* --- filter chips --- */
.chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 999px;
  font-size: .78rem;
  color: var(--ink-700);
  background: var(--ink-100);
  border: 1px solid transparent;
}
.chip:hover { background: var(--ink-200); text-decoration: none; }
.chip--active {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: var(--white);
  font-weight: 600;
}
.chip--active:hover { background: var(--brand-700); }

/* --- record tabs (multi-record cases) --- */
.tabs { display: flex; gap: .3rem; padding: .6rem 1.1rem 0; border-bottom: 1px solid var(--ink-200); }
.tab {
  font-family: inherit;
  font-size: .82rem;
  padding: .4rem .8rem;
  border: 1px solid var(--ink-200);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--ink-50);
  color: var(--ink-700);
  cursor: pointer;
}
.tab--active { background: var(--white); color: var(--brand-700); font-weight: 600; }
.is-hidden { display: none; }

/* --- proposal entity blocks --- */
.entity {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 0;
  margin: 0 0 .9rem;
}
.entity__legend {
  padding: .5rem .8rem;
  margin: 0;
  width: 100%;
  background: var(--ink-50);
  border-radius: var(--radius) var(--radius) 0 0;
  font-weight: 600;
  font-size: .88rem;
}
.entity__toggle { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; }
.entity__toggle input { width: 16px; height: 16px; accent-color: var(--brand-600); }
.entity__body { padding: .85rem; border-top: 1px solid var(--ink-200); }
.entity--open .entity__legend { background: var(--brand-50); color: var(--brand-700); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }

/* --- provenance chips --- */
.prov {
  display: inline-block;
  margin-top: .2rem;
  padding: .05rem .45rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.7;
}
.prov--source-exact { background: var(--ok-50); color: var(--ok-600); }
.prov--deterministic-extraction { background: var(--warn-50); color: var(--warn-600); }
.prov--human-entered { background: var(--brand-50); color: var(--brand-700); }

/* --- confidence --- */
.conf--high { background: var(--ok-50) !important; color: var(--ok-600) !important; }
.conf--medium { background: var(--warn-50) !important; color: var(--warn-600) !important; }
.conf--low { background: var(--ink-100) !important; color: var(--ink-500) !important; }

/* --- case status badges --- */
.status--pending { background: var(--ink-100); color: var(--ink-700); }
.status--in_review { background: var(--info-50); color: var(--info-600); }
.status--needs_information { background: var(--warn-50); color: var(--warn-600); }
.status--ready { background: var(--brand-50); color: var(--brand-700); }
.status--committed { background: var(--ok-50); color: var(--ok-600); }
.status--skipped { background: var(--ink-100); color: var(--ink-500); }
.status--not_migratable { background: var(--danger-50); color: var(--danger-600); }
.status--reverted { background: var(--warn-50); color: var(--warn-600); }
.status--consolidated { background: var(--ink-200); color: var(--ink-700); }

/* --- advisory match box --- */
.match-box { margin-bottom: .8rem; }
.match-list { margin: .35rem 0 0; padding-inline-start: 1.1rem; }
.match-list li { margin-bottom: .2rem; }

/* --- proposed activities --- */
.activity {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  padding: .7rem;
  margin-bottom: .6rem;
  background: var(--ink-50);
}
.activity .field { margin-bottom: .5rem; }

/* --- raw payload disclosure --- */
.raw-details { margin-top: .9rem; }
.raw-details summary {
  cursor: pointer;
  font-size: .82rem;
  color: var(--brand-600);
  padding: .3rem 0;
}

/* --- action bar --- */
.actionbar { margin-top: 1.1rem; }
.actionbar__row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.actionbar__row form { margin: 0; }
.actionbar__more { margin-top: .9rem; }
.actionbar__more summary { cursor: pointer; font-size: .84rem; color: var(--ink-500); }
.actionbar__more .grid-3 { margin-top: .7rem; }
.actionbar__more textarea { margin-bottom: .4rem; }

/* --- progress bar --- */
.progress {
  height: 14px;
  background: var(--ink-200);
  border-radius: 999px;
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--brand-600);
  border-radius: 999px;
  transition: width .3s ease;
}

.stat--info .stat__value { color: var(--info-600); }

/* =========================================================================
   Phase 2.1 — review workbench UX refinement
   ========================================================================= */

/* --- focus mode: reclaim the sidebar width for the two panes --- */
body.focus-mode .sidebar { display: none; }
body.focus-mode .content { padding: 1rem 1.2rem 5.5rem; }

/* Room for the sticky bar so it never covers the last field. */
.content { padding-bottom: 5.5rem; }

/* --- entity decision cards --- */
.entity {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: 0;
  margin: 0 0 .7rem;
  background: var(--white);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.entity__legend {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .8rem;
  margin: 0;
  width: 100%;
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink-700);
}
.entity__name { flex: 0 0 auto; }

.entity__decision {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  padding: 0 .8rem .6rem;
}
.decision {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .6rem;
  border: 1px solid var(--ink-200);
  border-radius: 999px;
  font-size: .8rem;
  cursor: pointer;
  background: var(--white);
  transition: background .12s ease, border-color .12s ease;
}
.decision:hover { background: var(--ink-50); }
.decision input { accent-color: var(--brand-600); margin: 0; }
.decision:has(input:checked) {
  background: var(--brand-50);
  border-color: var(--brand-600);
  color: var(--brand-700);
  font-weight: 600;
}
.decision__input { display: inline-flex; }

/* An unused entity stays a single quiet row; an active one steps forward. */
.entity--active {
  border-color: var(--brand-200, #bfdbfe);
  box-shadow: var(--shadow-sm);
}
.entity--active > .entity__legend { color: var(--brand-700); }
.entity--later > .entity__legend::after {
  content: "بعداً";
  font-size: .68rem;
  font-weight: 600;
  color: var(--warn-600);
  background: var(--warn-50);
  padding: .05rem .4rem;
  border-radius: 999px;
}
.entity__body {
  padding: .8rem;
  border-top: 1px solid var(--ink-200);
}
.entity__body[hidden] { display: none; }
.entity__body.is-open { display: block; }

/* Activity stays visually present because nearly every case uses it. */
.entity--prominent { border-color: var(--brand-100); }
.entity--prominent > .entity__legend { background: var(--brand-50); color: var(--brand-700); border-radius: var(--radius) var(--radius) 0 0; }

.entity--meta > .entity__legend { cursor: pointer; }
.entity--meta[open] > .entity__legend { border-bottom: 1px solid var(--ink-200); }

/* --- live summary --- */
.summary {
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  margin-bottom: 1rem;
}
.summary__head { font-weight: 700; font-size: .88rem; color: var(--brand-700); margin-bottom: .5rem; }
.summary__lines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .15rem .8rem;
}
.summary__line {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  padding: .12rem 0;
  border-bottom: 1px dotted rgba(29, 78, 216, .15);
}
.summary__line.is-zero { color: var(--ink-400); }
.summary__count { font-weight: 700; }
.summary__line.is-zero .summary__count { font-weight: 400; }
.summary__blockers { margin-top: .6rem; display: grid; gap: .2rem; }
.blocker {
  font-size: .8rem;
  color: #78350f;
  background: var(--warn-50);
  border: 1px solid #fcd34d;
  border-radius: var(--radius-sm);
  padding: .3rem .5rem;
}
.summary__ok { margin-top: .6rem; font-size: .8rem; color: var(--ok-600); font-weight: 600; }

.anchor-warning {
  font-size: .82rem;
  color: #78350f;
  background: var(--warn-50);
  border: 1px solid #fcd34d;
  border-radius: var(--radius-sm);
  padding: .45rem .6rem;
  margin-bottom: .6rem;
}
.anchor-warning[hidden] { display: none; }

/* --- source pane --- */
.src-head { margin-bottom: .7rem; }
.src-title { font-size: 1.02rem; font-weight: 700; line-height: 1.6; }
.src-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; align-items: center; }
.phone-local {
  font-family: var(--font-mono);
  font-size: .88rem;
  font-weight: 600;
  background: var(--ink-100);
  padding: .1rem .45rem;
  border-radius: var(--radius-sm);
  /* `0915 123 4567` is one value, and the spaces in it are grouping, not word
     breaks. Without this a narrow column splits it across two lines and the
     tinted background makes the break look like two separate numbers. */
  white-space: nowrap;
  display: inline-block;
}

/* Give the number its own column width rather than letting the table squeeze
   it — the cell stops shrinking below a readable width and the neighbouring
   text columns absorb the difference instead. */
table.data td .phone-local { max-width: none; }
.col-phone { white-space: nowrap; width: 1%; }
.src-date {
  background: var(--warn-50);
  border: 1px solid #fcd34d;
  border-radius: var(--radius-sm);
  padding: .5rem .6rem;
  margin-bottom: .7rem;
}
.src-desc__label { font-size: .78rem; color: var(--ink-500); margin-bottom: .2rem; }
.src-desc__body {
  white-space: pre-wrap;
  background: var(--ink-50);
  border-radius: var(--radius-sm);
  padding: .55rem .65rem;
  font-size: .87rem;
  line-height: 1.85;
  max-height: 16rem;
  overflow-y: auto;
}

/* --- duplicate call-to-action --- */
.dup-callout { display: flex; gap: 1rem; align-items: center; }
.dup-callout__text { flex: 1; }
.dup-callout .btn { flex: 0 0 auto; }
.notice.compact { padding: .6rem .85rem; margin-bottom: .8rem; }
.notice.compact p { margin: 0; }

/* --- sticky action bar --- */
.stickybar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .55rem 1.4rem;
  background: var(--white);
  border-top: 1px solid var(--ink-200);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, .07);
}
body:not(.focus-mode) .stickybar { inset-inline-start: var(--sidebar-width); }
.stickybar__nav { display: flex; gap: .4rem; }
.stickybar__actions { display: flex; gap: .5rem; align-items: center; margin-inline-start: auto; }
.stickybar__actions form { margin: 0; }
.stickybar__more { position: relative; }
.stickybar__more summary { list-style: none; }
.stickybar__more summary::-webkit-details-marker { display: none; }
.stickybar__menu {
  position: absolute;
  bottom: 2.4rem;
  inset-inline-end: 0;
  width: 300px;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .7rem;
  display: grid;
  gap: .7rem;
}
.stickybar__menu textarea { margin-bottom: .3rem; }

/* --- identity screen --- */
.verdict-choices { display: grid; gap: .5rem; max-width: 420px; }


/* =========================================================================
   Phase 3 — operational CRM
   ========================================================================= */

/* --- top bar search --- */
.topsearch { flex: 0 1 380px; margin-inline-start: 1.2rem; }
.topsearch__input { width: 100%; }

/* --- stat cards as links --- */
a.stat { text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
a.stat:hover { border-color: var(--brand-600); transform: translateY(-1px); }
.stat--danger .stat__value { color: var(--danger-600); }
.stat--warn .stat__value { color: var(--warn-600); }

/* --- profile layout: header, main column, sidebar --- */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-areas: "head head" "main side";
  gap: 1rem;
  align-items: start;
}
.profile__head { grid-area: head; }
.profile__main { grid-area: main; display: grid; gap: 1rem; align-content: start; }
.profile__side { grid-area: side; display: grid; gap: 1rem; align-content: start; }

@media (max-width: 1100px) {
  .profile { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "main" "side"; }
}

.profile__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .9rem 1.4rem;
}
.profile__value { font-weight: 600; color: var(--ink-900); margin-top: .15rem; }
.profile__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--ink-200);
  font-size: .87rem;
  color: var(--ink-700);
}

/* --- small key/value rows in sidebars --- */
.kv { display: flex; justify-content: space-between; gap: .8rem; padding: .28rem 0; border-bottom: 1px dashed var(--ink-200); }
.kv:last-child { border-bottom: none; }
.kv > span:first-child { color: var(--ink-500); flex: 0 0 auto; }
.kv > span:last-child { text-align: end; }

/* --- compact list item --- */
.mini { padding: .5rem 0; border-bottom: 1px solid var(--ink-100); }
.mini:last-child { border-bottom: none; }
.mini__title { font-weight: 600; font-size: .9rem; }
.mini__meta { font-size: .8rem; color: var(--ink-500); margin-top: .2rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* --- timeline: three regions kept visually distinct --- */
.timeline { display: grid; gap: 1.3rem; }
.timeline__region { display: grid; gap: .1rem; }
.timeline__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.timeline__title { font-weight: 700; color: var(--ink-900); }
.timeline__hint { font-size: .8rem; color: var(--ink-500); }

.timeline__region--undated {
  background: var(--ink-50);
  border: 1px dashed var(--ink-300);
  border-radius: var(--radius);
  padding: .9rem 1rem;
}

.tl {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: .9rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--ink-100);
  align-items: start;
}
.tl:last-child { border-bottom: none; }
.tl__when { font-size: .82rem; color: var(--ink-500); padding-top: .15rem; }
.tl__title { font-weight: 600; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.tl__text { font-size: .87rem; color: var(--ink-700); margin-top: .25rem; white-space: pre-wrap; }
.tl__meta { font-size: .8rem; color: var(--ink-500); margin-top: .3rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.tl__actions { display: flex; gap: .35rem; }
.tl--future { border-inline-start: 3px solid var(--brand-600); padding-inline-start: .7rem; }
.tl--undated .tl__when { font-style: italic; }

@media (max-width: 720px) {
  .tl { grid-template-columns: minmax(0, 1fr); }
}

/* --- duplicate advisory --- */
.dupes { display: grid; gap: .5rem; margin-top: .7rem; }
.dupe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: .8rem;
  align-items: center;
  padding: .6rem .8rem;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
}
.dupe__name { font-weight: 600; }
.dupe__meta { margin-top: .2rem; display: flex; gap: .4rem; flex-wrap: wrap; }

@media (max-width: 720px) {
  .dupe { grid-template-columns: minmax(0, 1fr); }
}

/* --- search results --- */
.searchgroup { margin-top: 1.1rem; }
.searchgroup__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.searchhit {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: .8rem;
  align-items: center;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--ink-100);
  text-decoration: none;
  color: inherit;
}
.searchhit:hover { background: var(--brand-50); }
.searchhit__name { font-weight: 600; }

@media (max-width: 720px) {
  .searchhit { grid-template-columns: minmax(0, 1fr); }
}

/* --- forms --- */
.form { padding-bottom: 4.5rem; }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem 1.1rem; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem 1.1rem; }
.form--compact { max-width: 900px; }
.field--check { display: flex; align-items: flex-end; }
.check { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; cursor: pointer; }
.field__error { color: var(--danger-600); font-size: .8rem; margin-top: .25rem; }
.field--error .input { border-color: var(--danger-600); }
.input--date { max-width: 190px; }

.radio-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .2rem; }
.radio-row ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
.radio-row label { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; cursor: pointer; }

/* Sticky action bar for the operational forms, matching the Phase 2.1 pattern. */
.sticky-actions {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  gap: .6rem;
  align-items: center;
  padding: .6rem 1.4rem;
  background: var(--white);
  border-top: 1px solid var(--ink-200);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, .07);
}
body:not(.focus-mode) .sticky-actions { inset-inline-start: var(--sidebar-width); }

/* --- focus bar: what am I editing, pinned above the form --- */
.focusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem;
  padding: .6rem .9rem;
  margin-bottom: 1rem;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius);
}

/* --- today --- */
.today__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; }
.filters--inline { margin-bottom: 1rem; }
.card__spacer { flex: 1; }
.actions { display: flex; gap: .3rem; flex-wrap: wrap; }

/* An overdue row must be noticeable without becoming an alarm. */
.row--overdue td { background: var(--danger-50); }

.empty--sm { padding: .8rem; font-size: .87rem; }


/* =========================================================================
   Jalali date picker
   -------------------------------------------------------------------------
   Progressive enhancement: without JavaScript the input below is an ordinary
   Persian text field and everything here is simply unused.
   ========================================================================= */

.jdp-wrap { position: relative; display: inline-block; }
.jdp-wrap .input--date { padding-inline-end: 2rem; }

.jdp-trigger {
  position: absolute;
  inset-inline-end: .35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: .2rem;
  opacity: .65;
}
.jdp-trigger:hover { opacity: 1; }

/* Fixed and attached to <body>: .card sets overflow:hidden, which clips any
   descendant regardless of z-index, and that is what cropped the last week of
   the month. Placement is computed in jalali-picker.js. */
.jdp {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 268px;
  padding: .6rem;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.jdp__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .5rem;
}
.jdp__title { font-weight: 700; font-size: .92rem; }
.jdp__nav {
  border: 1px solid var(--ink-200);
  background: var(--white);
  border-radius: var(--radius-sm);
  width: 26px;
  height: 26px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-700);
}
.jdp__nav:hover { background: var(--brand-50); border-color: var(--brand-600); }

.jdp__weekdays,
.jdp__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.jdp__weekday {
  text-align: center;
  font-size: .72rem;
  color: var(--ink-500);
  padding: .2rem 0;
}
.jdp__blank { height: 30px; }
.jdp__day {
  height: 30px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .82rem;
  color: var(--ink-900);
  font-family: inherit;
}
.jdp__day:hover { background: var(--brand-50); }
.jdp__day--today { border-color: var(--brand-600); font-weight: 700; }
.jdp__day--selected { background: var(--brand-600); color: var(--white); }
.jdp__day--selected:hover { background: var(--brand-700); }

.jdp__foot {
  display: flex;
  gap: .4rem;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--ink-200);
}


/* =========================================================================
   Company selector with inline creation
   -------------------------------------------------------------------------
   The native <select> stays in the DOM as the submitting field and is hidden
   only once JavaScript has built the replacement UI around it.
   ========================================================================= */

.orgp { position: relative; }
.orgp__native { display: none; }

.orgp__row { display: flex; gap: .4rem; align-items: stretch; }
.orgp__search { flex: 1; }
.orgp__new { white-space: nowrap; }

.orgp__chosen { margin-top: .4rem; min-height: 1.5rem; }
.orgp__none { font-size: .8rem; color: var(--ink-500); }

.orgp__tag {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .2rem .55rem;
  background: var(--brand-50);
  border: 1px solid var(--brand-600);
  border-radius: 999px;
  font-size: .84rem;
}
.orgp__remove {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-600);
  padding: 0;
}
.orgp__remove:hover { color: var(--danger-600); }

/* The results list is absolutely positioned but its parent field is not an
   overflow:hidden box, so it needs no portal — unlike the calendar. */
.orgp__results {
  display: none;
  position: absolute;
  z-index: 60;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: calc(100% + .2rem);
  max-height: 240px;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.orgp__results.is-open { display: block; }

.orgp__result {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  width: 100%;
  text-align: start;
  padding: .45rem .6rem;
  border: 0;
  border-bottom: 1px solid var(--ink-100);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.orgp__result:last-child { border-bottom: 0; }
.orgp__result:hover,
.orgp__result:focus { background: var(--brand-50); }
.orgp__result-name { font-size: .87rem; color: var(--ink-900); }
.orgp__result-meta { font-size: .75rem; color: var(--ink-500); }
.orgp__empty { padding: .55rem .6rem; font-size: .8rem; color: var(--ink-500); }

.orgp__candidate {
  display: flex;
  align-items: center;
  gap: .5rem;
  justify-content: space-between;
  padding: .4rem 0;
  border-bottom: 1px solid var(--ink-200);
}
.orgp__candidate:last-of-type { border-bottom: 0; }
.orgp__candidate-name { display: flex; flex-direction: column; gap: .15rem; font-size: .84rem; }
.orgp__candidate-reason {
  font-size: .72rem;
  color: var(--warn-700, var(--ink-600));
  font-weight: 600;
}
.orgp__candidate-phone { font-size: .75rem; color: var(--ink-500); }


/* =========================================================================
   Pipeline board
   ========================================================================= */

.pipeline__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
}
.stat { font-size: 1.05rem; font-weight: 700; color: var(--ink-900); }
.stat--muted { font-weight: 600; color: var(--ink-500); font-size: .9rem; }

.pipeline {
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  padding-bottom: .6rem;
  align-items: flex-start;
}

.pipecol {
  flex: 0 0 250px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 300px);
}
.pipecol__head {
  padding: .55rem .65rem;
  border-bottom: 1px solid var(--ink-200);
  position: sticky;
  top: 0;
  background: var(--ink-50);
  border-radius: var(--radius) var(--radius) 0 0;
}
.pipecol__name { font-weight: 700; font-size: .88rem; }
.pipecol__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: .74rem;
  color: var(--ink-500);
  margin-top: .15rem;
}
.pipecol__body {
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow-y: auto;
  min-height: 80px;
}
.pipecol__body.is-over { background: var(--brand-50); outline: 2px dashed var(--brand-600); }

.pcard {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius-sm);
  padding: .55rem .6rem;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
.pcard.is-dragging { opacity: .45; }
.pcard__title { display: block; font-weight: 600; font-size: .87rem; margin-bottom: .2rem; }
.pcard__context { font-size: .76rem; color: var(--ink-600); }
.pcard__cat { font-size: .72rem; color: var(--ink-500); margin-top: .1rem; }
.pcard__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .4rem;
  margin-top: .35rem;
}
.pcard__amount { font-size: .82rem; font-weight: 700; }
.pcard__prob { font-size: .76rem; color: var(--ink-600); }
.pcard__muted { font-size: .73rem; color: var(--ink-500); }
.pcard__foot {
  display: flex;
  justify-content: space-between;
  gap: .4rem;
  font-size: .72rem;
  color: var(--ink-500);
  margin-top: .3rem;
}
.pcard__next { margin-top: .35rem; font-size: .74rem; color: var(--ink-600); }
.pcard__next--overdue { color: var(--danger-600); }
.pcard__error {
  margin-top: .35rem;
  font-size: .74rem;
  color: var(--danger-600);
  background: var(--danger-50);
  padding: .25rem .35rem;
  border-radius: var(--radius-sm);
}

.actions-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.field--actions { display: flex; align-items: flex-end; gap: .4rem; }

.probmode {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: .6rem .7rem;
  margin: .6rem 0;
}
.probmode legend { padding: 0 .3rem; }
.probmode__choices { display: flex; gap: 1rem; margin-bottom: .5rem; }

/* Stage history is a system event, not a customer interaction. */
.row--system td { background: var(--ink-50); }

.status--open { background: var(--brand-50); color: var(--brand-700); }
.status--won { background: var(--ok-50, #ecfdf5); color: var(--ok-700, #047857); }
.status--lost { background: var(--danger-50); color: var(--danger-600); }
.status--on_hold { background: var(--warn-50, #fffbeb); color: var(--warn-700, #b45309); }
.status--cancelled { background: var(--ink-100); color: var(--ink-600); }


/* =========================================================================
   Modal dialog
   -------------------------------------------------------------------------
   Used by the «شرکت جدید» quick-create from both the contact and the project
   form. Lives on <body>: the parent form sits inside .card (overflow:hidden),
   and an inline panel competed with the form's own grid for the same space.
   ========================================================================= */

body.has-modal { overflow: hidden; }

.modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 1rem;
  overflow-y: auto;
  /* The parent form stays visible but clearly secondary. */
  background: rgba(15, 23, 42, .45);
}

.modal {
  width: 100%;
  max-width: 520px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .25);
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--ink-200);
}
.modal__title { margin: 0; font-size: 1rem; font-weight: 700; }
.modal__close {
  border: 0;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-500);
  padding: 0 .25rem;
}
.modal__close:hover { color: var(--ink-900); }

.modal__body { padding: 1rem; overflow-y: auto; }
.modal__feedback { padding: 0 1rem; }
.modal__feedback:empty { display: none; }

.modal__foot {
  display: flex;
  gap: .5rem;
  padding: .85rem 1rem;
  border-top: 1px solid var(--ink-200);
  background: var(--ink-50);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Two columns on a laptop, one on anything narrow. The notes box always
   spans, so the dialog never ends up with a lonely half-width textarea. */
.quickorg__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .75rem .9rem;
}
.quickorg__fields .field--wide { grid-column: 1 / -1; }
.quickorg__fields .field__error:empty { display: none; }
.field__req { color: var(--danger-600); }
.verdict {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .92rem;
}
.verdict:hover { background: var(--ink-50); }
.verdict:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); font-weight: 600; }
.verdict input { accent-color: var(--brand-600); }

.group-rows { display: grid; gap: .5rem; }
.group-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: .6rem .8rem;
}
.group-row__info { flex: 1; min-width: 0; }
.group-row__title { font-weight: 600; font-size: .88rem; }
.group-row__meta { display: flex; gap: .5rem; margin-top: .2rem; }
.group-row__pick { display: flex; gap: .3rem; flex: 0 0 auto; }
.group-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .6rem;
  border: 1px solid var(--ink-300);
  border-radius: 999px;
  font-size: .8rem;
  cursor: pointer;
}
.group-chip:has(input:checked) {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: var(--white);
  font-weight: 600;
}
.group-chip input { accent-color: var(--white); }

table.compare th.compare__label { background: var(--ink-50); text-align: right; font-weight: 600; width: 16%; }
table.compare .cell--differs { background: var(--warn-50); font-weight: 600; }
.desc-toggle summary { cursor: pointer; font-size: .82rem; }
.desc-full { white-space: pre-wrap; font-size: .84rem; margin-top: .4rem; background: var(--ink-50); padding: .5rem; border-radius: var(--radius-sm); }

/* --- queue --- */
.badge.multi { font-weight: 700; }
.audit-details { margin-top: 1.1rem; }
.audit-details__summary {
  cursor: pointer;
  font-size: .86rem;
  color: var(--brand-600);
  padding: .5rem 0;
}

@media (max-width: 1200px) {
  .review-grid { grid-template-columns: 1fr; }
  .review-pane .card__body { max-height: none; }
  .stickybar { position: static; box-shadow: none; }
  body:not(.focus-mode) .stickybar { inset-inline-start: 0; }
}

@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%;
    flex: none;
    height: auto;
    position: static;
    border-inline-start: none;
    border-bottom: 1px solid var(--ink-200);
  }
  .nav { display: flex; flex-wrap: wrap; gap: .25rem; }
  .kv { grid-template-columns: 1fr; }
  .kv__k { padding-bottom: 0; border-bottom: none; }
}


/* =========================================================================
   Phase 5 — quotations (پیش‌فاکتور)
   -------------------------------------------------------------------------
   Only the screen styles live here. The printed A4 document is a standalone
   page with its own stylesheet (css/quotation-print.css) and deliberately
   shares nothing with the application shell — a customer-facing document must
   not inherit a sidebar's margins.
   ========================================================================= */

/* --- status badges ---
   «پیش‌نویس» is muted rather than brand-coloured on purpose: a draft is not an
   achievement, and colouring it like one is how an unnumbered document ends up
   being treated as a real offer. */
.status--draft        { background: var(--ink-100); color: var(--ink-600); }
.status--issued       { background: var(--brand-50); color: var(--brand-700); }
.status--under_review { background: var(--info-50); color: var(--info-600); }
.status--accepted     { background: var(--ok-50, #ecfdf5); color: var(--ok-700, #047857); }
.status--rejected     { background: var(--danger-50); color: var(--danger-600); }
.status--expired      { background: var(--warn-50); color: var(--warn-600); }
.status--superseded   { background: var(--ink-200); color: var(--ink-600); }

/* --- totals block --- */
.totals {
  max-width: 34rem;
  margin-inline-start: auto;
  font-size: .9rem;
}
.totals > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .38rem .1rem;
  border-bottom: 1px dashed var(--ink-200);
}
.totals > div:last-child { border-bottom: none; }
.totals > div > span:last-child { font-variant-numeric: tabular-nums; }
.totals__strong { font-weight: 600; }
.totals__final {
  margin-top: .3rem;
  padding: .5rem .6rem !important;
  background: var(--brand-50);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 1rem;
  border-bottom: none !important;
}
/* A preview whose inputs the server would refuse must not look authoritative. */
.totals--invalid { opacity: .5; }
.totals--invalid::after {
  content: "مقادیر واردشده معتبر نیستند — سرور این محاسبه را نمی‌پذیرد.";
  display: block;
  margin-top: .4rem;
  font-size: .8rem;
  color: var(--danger-600);
  opacity: 1;
}

/* --- line editor ---
   Rows, not a fourteen-column table. The table version fitted every field on
   one line by making each one too narrow to use: the description — the field a
   salesperson types most and reads most — ended up the same width as «کد/مدل».

   Each row now leads with what is actually being sold and what it costs, and
   keeps the occasional fields (brand, model, category, discount, tax, note) on
   a quieter second line. Nothing is hidden; the ordering just matches how a
   quotation is written. */
.lines-editor { display: flex; flex-direction: column; gap: .75rem; }

.lrow {
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  background: var(--white);
  padding: .7rem .85rem .75rem;
}
.lrow--removed { opacity: .5; background: var(--ink-50); }

.lrow__head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .55rem;
}
.lrow__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: .8rem;
  font-weight: 700;
}
.lrow__spacer { flex: 1; }
.lrow__net { font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.lrow__net-label { font-size: .76rem; color: var(--ink-500); font-weight: 400; }

.lrow__main {
  display: grid;
  grid-template-columns: minmax(240px, 3fr) 6rem 8rem 10rem;
  gap: .55rem .7rem;
  align-items: start;
}
.lrow__more {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .5rem .7rem;
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--ink-200);
}
.lrow .field { margin-bottom: 0; min-width: 0; }
.lrow .field__label { font-size: .76rem; color: var(--ink-500); margin-bottom: .2rem; }
.lrow .input { font-size: .85rem; padding: .38rem .5rem; }
.lrow textarea.input { min-height: 3.6rem; }
.lrow .field__error { font-size: .74rem; }
.lrow__remove { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; }

@media (max-width: 900px) {
  .lrow__main { grid-template-columns: 1fr 1fr; }
  .lrow__main .field--desc { grid-column: 1 / -1; }
}

/* --- the current revision in the lineage table --- */
.row--current td { background: var(--brand-50); font-weight: 600; }

/* --- the one-line quotation indicator on a pipeline card --- */
.pcard__quotation {
  margin-top: .3rem;
  font-size: .76rem;
  color: var(--ink-600);
  display: flex;
  align-items: center;
  gap: .3rem;
}
.pcard__quotation .badge { font-size: .68rem; }

/* --- actionable blocker list ---
   A list of what is missing, each row carrying the button that fixes it. The
   earlier version was prose in a red box: it named the problem and left the
   user to find the screen. */
.todo-list { list-style: none; margin: .3rem 0 0; padding: 0; }
.todo-list__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding: .45rem 0;
  border-bottom: 1px dashed var(--ink-200);
}
.todo-list__item:last-child { border-bottom: none; }
.todo-list__text { flex: 1; min-width: 14rem; }

/* --- Phase 7: commission recipient picker and negotiation flag ---------- */

/* The two native selects are one logical field. Without JavaScript they show
   as a labelled pair inside the fieldset; with it, .orgp__native hides them
   and the fieldset collapses to nothing so exactly one control is visible. */
.field--recipient { border: 0; padding: 0; margin-bottom: .95rem; }
.field--recipient > legend { padding: 0; }
.field__label--sub { font-size: .78rem; color: var(--ink-500); margin-bottom: .2rem; }
.recipient-group { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.recipient-group--enhanced { display: none; }
.orgp__actions { display: flex; gap: .35rem; margin-top: .4rem; }

/* Amount inputs carry grouped digits while typing; the value posted is plain. */
.input--money { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
/* ------------------------------------------------------- version + health */
/*
   Gate 8.3. Two additions, both deliberately quiet.

   The sidebar version sits below the user block: an administrator on the
   telephone to support can find it in one glance, and everyone else never
   notices it. It must not compete with the Raimon wordmark at the top of the
   same column, so it is the smallest and faintest text in the shell.
*/

.sidebar__version {
  margin-top: .55rem;
  font-size: .68rem;
  color: var(--ink-400);
  letter-spacing: .01em;
}
/* The number itself is Latin-script inside a Persian sentence. `bdi` isolates
   it so RTL reordering cannot render 1.0.0-rc.1 as something else. */
.sidebar__version bdi { direction: ltr; unicode-bidi: isolate; }

.health__identity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.health__identity-label { font-size: .75rem; color: var(--ink-500); }
.health__identity-value { font-size: 1.05rem; font-weight: 700; direction: ltr; text-align: right; }
.health__identity-sub   { font-size: .72rem; color: var(--ink-400); margin-top: .15rem; }

.health__summary { display: flex; gap: .45rem; margin: 0 0 1.1rem; flex-wrap: wrap; }

.health__badge {
  display: inline-block;
  min-width: 5.4rem;
  text-align: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .2rem .5rem;
  border-radius: 999px;
  border: 1px solid var(--ink-200);
  background: var(--ink-100);
  color: var(--ink-700);
  direction: ltr;
}
.health__badge--pass     { background: var(--ok-50);     border-color: #bbf7d0; color: var(--ok-600); }
.health__badge--warn     { background: var(--warn-50);   border-color: #fcd34d; color: var(--warn-600); }
.health__badge--fail     { background: var(--danger-50); border-color: #fecaca; color: var(--danger-600); }
.health__badge--deferred { background: var(--info-50);   border-color: #a5f3fc; color: var(--info-600); }

.health__table td { vertical-align: top; }
.health__severity { width: 6.6rem; }
.health__check-label  { font-weight: 600; }
.health__check-detail { color: var(--ink-500); font-size: .82rem; margin-top: .1rem; }
.health__check-path   { color: var(--ink-400); font-size: .74rem; direction: ltr; text-align: right; }

.health__support p { margin: 0 0 .6rem; font-size: .84rem; }
.health__command {
  direction: ltr;
  text-align: left;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: var(--radius);
  padding: .6rem .75rem;
  font-size: .78rem;
  overflow-x: auto;
}
.health__warning { color: var(--danger-600); font-weight: 600; }