/* Contract delivery terms review («شروط التسليم التعاقدية») — scoped under .cdt.
   SALES-DS-1 (Kamal 2026-10-02): on the house design system — every colour
   is a shared --lm-d-* token (tokens.css) with its dark mirror, so this sheet
   holds no colour literal and needs no dark block of its own. The local
   names below are kept as aliases so the rules under them read unchanged:
   navy ink, the blue-grey page, white ruled cards, navy pills when on, the
   orange decision. The list scrolls inside the screen (the page does not),
   with the reviewed row's detail sticky beside it. */
.cdt {
  --ink: var(--lm-d-ink); --t2: var(--lm-d-ink); --t3: var(--lm-d-muted); --t4: var(--lm-d-muted);
  --b1: var(--lm-d-border); --b2: var(--lm-d-divider); --s1: var(--lm-d-surface); --s2: var(--lm-d-page); --s3: var(--lm-d-page);
  --ok: var(--lm-d-ok); --ok-bg: var(--lm-d-ok-soft); --ok-b: var(--lm-d-ok);
  --late: var(--lm-d-danger); --late-bg: var(--lm-d-danger-soft); --late-b: var(--lm-d-gap-edge); --late-solid: var(--lm-d-danger);
  --amber: var(--lm-d-warn); --amber-bg: var(--lm-d-warn-soft); --on-amber: var(--lm-d-ink);
  --muted-bg: var(--lm-d-quiet-bg);
  --yellow: var(--lm-d-accent); --on-yellow: var(--lm-d-on-accent); --yellow-bg: var(--lm-d-row-hl); --yellow-b: var(--lm-d-accent-line);
  --purple: var(--lm-d-ai); --purple-bg: var(--lm-d-ai-bg); --purple-b: var(--lm-d-ai-bg);
  --orange-b: var(--lm-d-accent-line); --orange-bg: var(--lm-d-accent-soft);
  --solid: var(--lm-d-tab-on-bg); --on-solid: var(--lm-d-tab-on-ink);
  color: var(--t2); font-size: 13px; display: flex; flex-direction: column; gap: 12px; }
body:has(.cdt) { background: var(--lm-d-page); }
body:has(.cdt) .fi-main-ctn { background: transparent; }
.cdt * { box-sizing: border-box; }
.cdt .c-muted { color: var(--t4); } .cdt .c-amber { color: var(--amber); }
.cdt-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.cdt-title { font-size: 26px; font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0; }
.cdt-sub { font-size: 13px; color: var(--t3); margin: 2px 0 0; max-width: 640px; }
.cdt-head-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cdt-pill { background: var(--s1); border: 1px solid var(--b1); border-radius: 999px; padding: 8px 14px; font-size: 13px; box-shadow: 0 1px 2px var(--lm-d-shadow); }
.cdt-pill b { font-variant-numeric: tabular-nums; }
.cdt-pill b { font-weight: 700; } .cdt-pill b.st-proposed { color: var(--amber); } .cdt-pill b.st-confirmed { color: var(--ok); } .cdt-pill b.st-rejected { color: var(--late); }
.cdt-toolbar { background: var(--s1); border: 1px solid var(--b1); border-block-start: 3px solid var(--lm-d-info); border-radius: 16px; padding: 10px 14px; display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; box-shadow: 0 1px 2px var(--lm-d-shadow); }
/* one line for the status pills + project + search; the priority chips under them */
.cdt-toolbar > .cdt-field { order: 1; }
.cdt-toolbar > .cdt-field:first-of-type { margin-inline-start: auto; }
.cdt-toolbar > [data-testid="priority-chips"] { order: 2; flex-basis: 100%; padding-block-start: 8px; border-block-start: 1px solid var(--b2); }
.cdt-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cdt-chip { background: var(--s2); border: 1px solid var(--b1); border-radius: 10px; min-block-size: 32px; display: inline-flex; align-items: center; padding: 4px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--t3); }
.cdt-chip.is-on { background: var(--lm-d-info-soft); border-color: var(--lm-d-info-soft); color: var(--lm-d-info); }
/* the status row is the page's pills: navy when on */
.cdt-toolbar > .cdt-chips:first-child .cdt-chip { border-radius: 18px; background: var(--s1); color: var(--ink); font-weight: 700; min-block-size: 36px; padding-inline: 14px; }
.cdt-toolbar > .cdt-chips:first-child .cdt-chip.is-on { background: var(--solid); border-color: var(--solid); color: var(--on-solid); }
.cdt-chip:focus-visible, .cdt-btn:focus-visible { outline: 2px solid var(--lm-d-info); outline-offset: 2px; }
.cdt-field { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t3); }
.cdt-field select, .cdt-field input { border: 1px solid var(--lm-d-control-edge); border-radius: 10px; min-block-size: 36px; padding: 6px 10px; font-size: 13px; background: var(--s1); color: var(--ink); }
.dark .cdt select, .dark .cdt input, .dark .cdt textarea { color-scheme: dark; }
.cdt-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); gap: 12px; align-items: start; }
.cdt-card { background: var(--s1); border: 1px solid var(--b1); border-radius: 16px; padding: 12px 14px; min-width: 0; box-shadow: 0 1px 2px var(--lm-d-shadow); }
.cdt-list { overflow: auto; max-block-size: calc(100dvh - 300px); min-block-size: 320px; padding-block-start: 0; }
.cdt-list .cdt-table th { position: sticky; inset-block-start: 0; background: var(--s1); z-index: 1; padding-block-start: 10px; }
/* the reviewed row's detail stays in view beside the list */
.cdt-layout > .cdt-detail { position: sticky; inset-block-start: 12px; max-block-size: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.cdt-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cdt-table th { text-align: start; font-size: 13px; color: var(--ink); font-weight: 700; padding: 6px; border-bottom: 1px solid var(--b1); white-space: nowrap; }
.cdt-table td { padding: 7px 6px; border-bottom: 1px solid var(--b2); vertical-align: top; white-space: nowrap; color: var(--ink); }
.cdt-table tbody tr { cursor: pointer; } .cdt-table tbody tr:hover td { background: var(--s2); } .cdt-table tr.is-selected td { background: var(--yellow-bg); }
.cdt-table tr.is-selected td:first-child { box-shadow: inset -3px 0 0 var(--lm-d-accent); }
[dir='ltr'] .cdt-table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--lm-d-accent); }
.cdt-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdt-status { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; background: var(--muted-bg); color: var(--t3); }
.cdt-status.st-proposed { background: var(--amber-bg); color: var(--amber); } .cdt-status.st-confirmed { background: var(--ok-bg); color: var(--ok); } .cdt-status.st-rejected { background: var(--late-bg); color: var(--late); }
.cdt-detail h3 { font-size: 15px; margin: 0 0 8px; color: var(--ink); display: flex; gap: 8px; align-items: center; } .cdt-detail h4 { font-size: 12px; margin: 14px 0 6px; color: var(--t2); }
.cdt-dl { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px; margin: 0; font-size: 12.5px; } .cdt-dl dt { color: var(--t4); } .cdt-dl dd { margin: 0; }
.cdt-quote { background: var(--s2); border: 1px solid var(--b2); border-radius: 8px; padding: 8px; font-size: 12px; line-height: 1.7; }
.cdt-result { margin-top: 10px; background: var(--s2); border: 1px solid var(--b2); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.cdt-siblings { margin: 0; padding-inline-start: 16px; font-size: 12px; }
.cdt-preview { border-style: dashed; }
.cdt-override { display: inline-block; font-size: 12px; font-weight: 700; color: var(--purple); background: var(--purple-bg); border: 1px solid var(--purple-b); border-radius: 999px; padding: 1px 8px; }
.cdt-reference summary { cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--t2); }
.cdt-reference { background: var(--s2); border: 1px solid var(--b2); border-radius: 9px; padding: 10px; } .cdt-reference h4 { margin: 0; font-size: 13px; }
.cdt-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.cdt-form label { display: flex; flex-direction: column; gap: 3px; color: var(--t3); }
.cdt-form input, .cdt-form select, .cdt-form textarea { border: 1px solid var(--b1); border-radius: 7px; padding: 6px 8px; font-size: 12px; background: var(--s1); color: var(--ink); }
.cdt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; } .cdt-span2 { grid-column: 1 / -1; }
.cdt-inline { display: flex; gap: 6px; } .cdt-inline input { width: 90px; }
.cdt-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cdt-btn { background: var(--s1); border: 1px solid var(--lm-d-control-edge); border-radius: 10px; min-block-size: 34px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.cdt-head-r > .cdt-btn--primary { min-block-size: 40px; border-radius: 12px; padding-inline: 16px; font-size: 14px; box-shadow: 0 4px 12px var(--lm-d-accent-soft); }
.cdt-btn--primary { background: var(--yellow); border-color: var(--yellow); color: var(--on-yellow); } .cdt-btn--danger { background: var(--late-bg); border-color: var(--late-b); color: var(--late); }
.cdt-history { margin: 0; padding-inline-start: 18px; font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.cdt-empty { border: 1px dashed var(--b1); border-radius: 10px; padding: 30px; text-align: center; color: var(--t4); }
@media (max-width: 640px) {
  /* phones: the top bar names the page; each chip row is one line that scrolls sideways */
  .cdt-head .cdt-sub { display: none; }
  .cdt-head-r { inline-size: 100%; justify-content: space-between; }
  .cdt-pill { font-size: 12px; padding: 6px 10px; }
  .cdt-toolbar > .cdt-chips { flex-wrap: nowrap; overflow-x: auto; flex-basis: 100%; padding-block-end: 2px; scrollbar-width: none; }
  .cdt-toolbar > .cdt-chips .cdt-chip { flex: 0 0 auto; white-space: nowrap; min-block-size: 40px; }
  .cdt-toolbar > .cdt-field { flex: 1 1 100%; }
  .cdt-toolbar > .cdt-field :is(select, input) { flex: 1 1 auto; min-block-size: 44px; }
  .cdt-noterm-list { columns: 1; }
  /* a term row is a card: the order, its priority and status on top; project · unit · contract · term; the basis last */
  .cdt-list { overflow: visible; padding-inline: 0; }
  .cdt-table, .cdt-table tbody { display: block; }
  .cdt-table thead { display: none; }
  .cdt-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; border-block-end: 1px solid var(--b2); }
  .cdt-table td { display: block; padding: 0; border: 0; white-space: normal; }
  .cdt-table tr.is-selected td:first-child { box-shadow: none; }
  .cdt-table td:nth-child(1) { display: none; }
  .cdt-table td:nth-child(3) { order: -3; font-weight: 700; }
  .cdt-table td:nth-child(2) { order: -2; }
  .cdt-table td:nth-child(10) { order: -1; flex-grow: 1; }
  .cdt-table td:nth-child(9) { display: none; }
  .cdt-table td:nth-child(8) { flex-basis: 100%; color: var(--t3); font-size: 12px; }
}
@media (max-width: 900px) {
  .cdt-layout { grid-template-columns: minmax(0, 1fr); }
  .cdt-list { max-block-size: none; }
  .cdt-layout > .cdt-detail { position: static; max-block-size: none; }
  .cdt-toolbar > .cdt-field:first-of-type { margin-inline-start: 0; }
}

/* review priority (product order 2026-09-04) */
.cdt-pr { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--muted-bg); color: var(--t3); }
.cdt-pr--conflict { background: var(--late-bg); color: var(--late); } .cdt-pr--unparseable { background: var(--amber-bg); color: var(--amber); }
.cdt-chip--pr-conflict.is-on { background: var(--late-bg); border-color: var(--late); color: var(--late); } .cdt-chip--pr-unparseable.is-on { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }
.cdt-chip--pr-noterm { cursor: default; background: var(--s3); }
.cdt-noterm h3 { font-size: 14px; margin: 0 0 4px; color: var(--ink); }
.cdt-noterm-list { margin: 6px 0 0; padding-inline-start: 18px; font-size: 12.5px; columns: 3; column-gap: 24px; } .cdt-noterm-list li { break-inside: avoid; margin: 2px 0; }
.cdt-btn--xs { padding: 1px 8px; font-size: 12px; margin-inline-start: 6px; }
@media (max-width: 700px) { .cdt-noterm-list { columns: 1; } }

/* preliminary vs final comparison (reviewer view) */
.cdt-compare { margin-top: 12px; border: 1px solid var(--b1); border-radius: 10px; padding: 10px 12px; background: var(--s2); }
.cdt-compare h4 { margin: 0 0 6px; }
.cdt-dl--facts { margin-bottom: 8px; }
.cdt-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cdt-side { background: var(--s1); border: 1px solid var(--b1); border-radius: 9px; padding: 8px 10px; min-width: 0; }
.cdt-side--final { border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.cdt-side-head { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.cdt-side .cdt-dl { grid-template-columns: 78px 1fr; }
.cdt-diff { background: var(--amber-bg); color: var(--amber); font-weight: 700; border-radius: 6px; padding: 0 6px; }
.cdt-batch { background: var(--yellow-bg); border-color: var(--yellow-b); font-size: 13px; }
@media (max-width: 800px) { .cdt-compare-grid { grid-template-columns: 1fr; } }

/* Version history (2026-09-04): historical proposals + governing-final selection */
.cdt .cdt-hist { display: inline-block; font-size: 12px; padding: .05rem .4rem; border-radius: 999px; background: var(--muted-bg); color: var(--t2); border: 1px solid var(--b1); vertical-align: middle; }
.cdt .cdt-hist.is-governing { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-b); }
.cdt .cdt-hist-hint { font-size: .86rem; color: var(--t2); background: var(--s2); border-style: dashed; }
.cdt .cdt-finals { border-color: var(--orange-b); background: var(--orange-bg); }
.cdt .cdt-finals-list { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .5rem; }
.cdt .cdt-finals-list li { padding: .55rem .7rem; border: 1px solid var(--b1); border-radius: .6rem; background: var(--s1); }
.cdt .cdt-finals-list li.is-governing { border-color: var(--ok-b); background: var(--ok-bg); }
.cdt .cdt-finals-list label { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; cursor: pointer; }
.cdt .cdt-governing { font-weight: 600; color: var(--ok); margin: .3rem 0; }