/* DTC components. Logical properties only (AU-2); letter-spacing 0 everywhere Arabic can appear (AU-7). */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font); font-size: var(--fs-16); line-height: var(--lh-body); color: var(--ink); background: var(--canvas); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); letter-spacing: 0; }
:lang(ar) em, :lang(ar) i { font-style: normal; font-weight: 600; }
h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); font-weight: 600; letter-spacing: 0; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tnum, .num, time { font-variant-numeric: tabular-nums; }
.d-visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.d-muted { color: var(--muted); }
.d-empty-cell { color: var(--muted); }
.d-skip { position: absolute; inset-inline-start: var(--sp-3); inset-block-start: -60px; z-index: 100; background: var(--surface); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-2); }
.d-skip:focus { inset-block-start: var(--sp-3); }

/* ---------- App shell ---------- */
.d-app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-block-size: 100vh; }
.d-app::before { content: ""; position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: var(--sidebar-w); background: var(--nav-bg); }
.d-sidebar { position: sticky; z-index: 1; align-self: start; inset-block-start: 0; block-size: 100vh; overflow-y: auto; background: var(--nav-bg); color: var(--nav-ink); display: flex; flex-direction: column; }
.d-brand { display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-5) var(--sp-4); text-decoration: none; color: #ffffff; }
.d-brand__name { font-size: var(--fs-20); font-weight: 700; line-height: 1.3; }
.d-brand__org { font-size: var(--fs-13); color: var(--nav-muted); line-height: 1.6; }
.d-signin .d-brand__name { color: var(--ink); }
.d-signin .d-brand__org { color: var(--muted); }
.d-main { min-inline-size: 0; display: flex; flex-direction: column; }
.d-topbar { position: sticky; inset-block-start: 0; z-index: 20; block-size: var(--topbar-h); display: flex; align-items: center; gap: var(--sp-3); padding-inline: var(--sp-5); background: var(--surface); border-block-end: 1px solid var(--line); }
.d-topbar__spacer { flex: 1; }
.d-topbar__user { font-size: var(--fs-14); color: var(--ink-2); }
.d-btn.d-menu-btn { display: none; }
.d-page { inline-size: 100%; max-inline-size: var(--page-max); margin-inline: auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-6); }

/* ---------- Navigation ---------- */
.d-nav { padding-block: var(--sp-2) var(--sp-5); padding-inline: var(--sp-3) 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.d-nav__group { display: flex; flex-direction: column; gap: 2px; }
.d-nav__label { font-size: var(--fs-13); font-weight: 500; color: var(--nav-muted); padding: var(--sp-1) var(--sp-3); }
/* Items sit on the dark panel; the current one becomes a tab of the page itself: it takes the page colour and runs
   into the content edge, so the page reads as attached to its menu entry. */
.d-nav a { display: block; padding: 7px var(--sp-4); margin-inline-end: var(--sp-3); border-radius: var(--r-2); color: var(--nav-ink); text-decoration: none; font-size: var(--fs-16); font-weight: 500; line-height: 1.6; }
.d-nav a:hover { background: var(--nav-hover); color: #ffffff; }
.d-nav a[aria-current="page"] { background: var(--canvas); color: var(--ink); font-weight: 600; margin-inline-end: 0; border-start-end-radius: 0; border-end-end-radius: 0; }
.d-nav a[aria-current="page"]:hover { background: var(--canvas); color: var(--ink); }
.d-nav details > summary { cursor: pointer; list-style: none; font-size: var(--fs-14); font-weight: 500; color: var(--nav-muted); padding: var(--sp-1) var(--sp-3); margin-inline-end: var(--sp-3); border-radius: var(--r-2); }
.d-nav details > summary:hover { color: #ffffff; }
.d-nav details > summary::-webkit-details-marker { display: none; }
.d-nav details > summary::after { content: "+"; float: inline-end; }
.d-nav details[open] > summary::after { content: "\2212"; }
.d-nav details a { font-size: var(--fs-14); font-weight: 400; }

/* ---------- Page header ---------- */
.d-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3) var(--sp-5); }
.d-page-header__text { flex: 1 1 420px; min-inline-size: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.d-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-14); color: var(--muted); list-style: none; margin: 0; padding: 0; }
.d-breadcrumb li + li::before { content: "/"; margin-inline-end: var(--sp-2); color: var(--line-strong); }
.d-breadcrumb a { color: var(--muted); }
.d-page-header h1 { font-size: var(--fs-30); }
.d-page-header__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-14); color: var(--muted); }
.d-page-header__actions { display: flex; gap: var(--sp-2); align-items: center; }

/* ---------- Sections and cards (cards only where the data needs a boundary) ---------- */
.d-section { display: flex; flex-direction: column; gap: var(--sp-3); }
.d-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-1) var(--sp-4); }
.d-section__head h2 { font-size: var(--fs-20); }
.d-section__head p { font-size: var(--fs-14); color: var(--muted); }
.d-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-5); }
.d-panel--flush { padding: 0; overflow: hidden; }
.d-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.d-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-14); margin: 0; }
.d-dl dt { color: var(--muted); }
.d-dl dd { margin: 0; }

/* ---------- Metrics: one primary per view, secondaries visibly smaller ---------- */
.d-metric-primary { display: flex; flex-direction: column; gap: var(--sp-1); }
.d-metric-primary__label { font-size: var(--fs-14); color: var(--muted); }
.d-metric-primary__value { font-size: var(--fs-hero); font-weight: 600; line-height: var(--lh-figure); font-variant-numeric: tabular-nums; }
.d-metric-primary__compare { font-size: var(--fs-14); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.d-metrics { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); }
.d-metric { display: flex; flex-direction: column; min-inline-size: 120px; }
.d-metric__value { font-size: var(--fs-20); font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.d-metric__label { font-size: var(--fs-13); color: var(--muted); }

/* ---------- Buttons ---------- */
.d-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-block-size: 40px; padding: 0 var(--sp-4); border-radius: var(--r-2); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-14); font-weight: 500; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; }
.d-btn:hover { background: var(--hover); color: var(--ink); }
.d-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.d-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.d-btn--danger { background: var(--surface); border-color: var(--bad); color: var(--bad); }
.d-btn--danger:hover { background: var(--bad-bg); color: var(--bad); }
.d-btn--quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.d-btn--quiet:hover { background: var(--hover); }
.d-btn--sm { min-block-size: 32px; padding: 0 var(--sp-3); font-size: var(--fs-13); }
.d-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Segmented control (language, density) ---------- */
.d-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-2); overflow: hidden; }
.d-seg button { font: inherit; font-size: var(--fs-13); padding: 4px var(--sp-3); min-block-size: 32px; border: 0; background: var(--surface); color: var(--ink-2); cursor: pointer; }
.d-seg button + button { border-inline-start: 1px solid var(--line-strong); }
.d-seg button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* ---------- Status badges (words always; colour is never the only signal) ---------- */
.d-badge { display: inline-flex; align-items: center; gap: 6px; padding: 1px var(--sp-2); border-radius: var(--r-1); font-size: var(--fs-13); font-weight: 500; line-height: 1.7; white-space: nowrap; }
.d-badge::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.d-badge--good { color: var(--good); background: var(--good-bg); }
.d-badge--warn { color: var(--warn); background: var(--warn-bg); }
.d-badge--bad { color: var(--bad); background: var(--bad-bg); }
.d-badge--info { color: var(--info); background: var(--info-bg); }
.d-badge--done { color: var(--done); background: var(--done-bg); }
.d-badge--idle { color: var(--idle); background: var(--idle-bg); }

/* ---------- OKR progress: bar fills from the start edge, expected pace as a tick ---------- */
.d-progress { display: grid; grid-template-columns: minmax(80px, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-3); min-inline-size: 160px; }
.d-progress__track { position: relative; block-size: 8px; background: var(--surface-2); border-radius: var(--r-1); overflow: visible; }
.d-progress__fill { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: var(--r-1); background: var(--accent); }
.d-progress--behind .d-progress__fill { background: var(--warn); }
.d-progress__expected { position: absolute; inset-block: -4px; inline-size: 2px; background: var(--ink-2); }
.d-progress__value { font-size: var(--fs-14); font-weight: 600; font-variant-numeric: tabular-nums; min-inline-size: 4ch; text-align: end; }
.d-progress__note { grid-column: 1 / -1; font-size: var(--fs-13); color: var(--muted); font-variant-numeric: tabular-nums; }

.d-spark { display: block; overflow: visible; }
.d-spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.d-spark circle { fill: var(--accent); }

/* ---------- Data table (DT-1 to DT-6) ---------- */
.d-table-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.d-table-wrap { position: relative; /* contains absolutely positioned labels so they cannot stretch the page */ overflow: auto; max-block-size: 70vh; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); }
.d-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-14); line-height: 1.7; }
.d-table th, .d-table td { block-size: var(--row-h); padding: 0 var(--sp-3); text-align: start; vertical-align: middle; white-space: nowrap; border-block-end: 1px solid var(--line); background: var(--surface); }
.d-table thead th { position: sticky; inset-block-start: 0; z-index: 2; font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); white-space: nowrap; background: var(--surface); border-block-end-color: var(--line-strong); }
.d-table thead th:first-child { inset-inline-start: 0; z-index: 3; }
.d-table tbody th { position: sticky; inset-inline-start: 0; z-index: 1; font-weight: 500; white-space: nowrap; }
.d-table tbody tr:hover > * { background: var(--hover); }
.d-table tbody tr:last-child > * { border-block-end: 0; }
.d-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; min-inline-size: 7ch; }
.d-table .code { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Dates written with month names read as text in Arabic tables (AU-19): start-aligned, tabular digits, never wrapped. */
.d-table .date { text-align: start; white-space: nowrap; font-variant-numeric: tabular-nums; }
.d-table .trunc { max-inline-size: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-table .trunc > a, .d-table .trunc > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.d-table .actions { inline-size: 1%; text-align: start; }
.d-table th[aria-sort] .d-sort { margin-inline-start: var(--sp-1); }
.d-row-menu { opacity: 0; }
.d-table tr:hover .d-row-menu, .d-table tr:focus-within .d-row-menu, .d-row-menu:focus { opacity: 1; }
@media (hover: none) { .d-row-menu { opacity: 1; } }
.d-table-foot { font-size: var(--fs-13); color: var(--muted); }

/* ---------- Form fields (AU-15 to AU-17) ---------- */
.d-form { display: flex; flex-direction: column; gap: var(--sp-4); max-inline-size: 560px; }
.d-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.d-field label { font-size: var(--fs-14); font-weight: 500; color: var(--ink); }
.d-field .d-optional { color: var(--muted); font-weight: 400; }
.d-input, .d-select, .d-textarea { font: inherit; font-size: var(--fs-16); color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-2); padding: 8px var(--sp-3); min-block-size: 40px; inline-size: 100%; }
.d-textarea { min-block-size: 96px; resize: vertical; line-height: var(--lh-body); }
.d-input:focus, .d-select:focus, .d-textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
[dir="rtl"] .d-input[dir="ltr"] { text-align: end; }   /* LTR value inside an RTL form keeps to the form edge (AU-16) */
.d-input[aria-invalid="true"] { border-color: var(--bad); }
.d-help { font-size: var(--fs-13); color: var(--muted); line-height: 1.7; }
.d-error { font-size: var(--fs-13); color: var(--bad); line-height: 1.7; }
.d-form__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---------- Empty states ---------- */
.d-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-6) var(--sp-5); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-3); }
.d-empty h3 { font-size: var(--fs-18); }
.d-empty p { font-size: var(--fs-14); color: var(--muted); max-inline-size: 60ch; }
.d-empty .d-btn { margin-block-start: var(--sp-2); }

/* ---------- Dialogs (floating: shadow allowed) ---------- */
.d-dialog { border: 1px solid var(--line); border-radius: var(--r-4); padding: 0; inline-size: min(520px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: var(--e-2); }
.d-dialog::backdrop { background: rgb(20 20 15 / 0.45); }
.d-dialog__head { padding: var(--sp-5) var(--sp-5) 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.d-dialog__head h2 { font-size: var(--fs-20); }
.d-dialog__body { padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.d-dialog__foot { padding: 0 var(--sp-5) var(--sp-5); display: flex; gap: var(--sp-2); justify-content: flex-end; }

/* ---------- Toasts (floating, bottom inline-end, AU-21) ---------- */
.d-toasts { position: fixed; inset-block-end: var(--sp-5); inset-inline-end: var(--sp-5); z-index: 60; display: flex; flex-direction: column; gap: var(--sp-2); }
.d-toast { display: flex; align-items: center; gap: var(--sp-3); min-inline-size: 280px; max-inline-size: 420px; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-3); background: var(--ink); color: var(--canvas); font-size: var(--fs-14); box-shadow: var(--e-1); }
.d-toast--static { position: static; }
.d-toast__close { margin-inline-start: auto; background: transparent; border: 0; color: inherit; font: inherit; font-size: var(--fs-13); cursor: pointer; text-decoration: underline; }

/* ---------- Lists inside panels (home screens) ---------- */
.d-list { list-style: none; margin: 0; padding: 0; }
.d-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); border-block-end: 1px solid var(--line); }
.d-list > li:last-child { border-block-end: 0; }
.d-list__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-list__meta { font-size: var(--fs-13); color: var(--muted); }

/* ---------- Responsive: sidebar becomes a drawer from the start edge ---------- */
@media (max-width: 960px) {
  .d-app { grid-template-columns: minmax(0, 1fr); }
  .d-app::before { display: none; }
  .d-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50; inline-size: min(300px, 86vw); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
  [dir="rtl"] .d-sidebar { transform: translateX(100%); }
  .d-app[data-nav-open] .d-sidebar { transform: none; visibility: visible; box-shadow: var(--e-2); transition: transform .2s ease; }
  .d-btn.d-menu-btn { display: inline-flex; }
  .d-page { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .d-page-header h1 { font-size: var(--fs-24); }
  .d-topbar { padding-inline: var(--sp-4); }
  .d-topbar__user { display: none; }
}
@media (prefers-reduced-motion: reduce) { .d-sidebar { transition: none !important; } }

/* ---------- Sign-in page ---------- */
.d-signin { min-block-size: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-5) var(--sp-4); }
.d-signin .d-form { inline-size: min(400px, 100%); }
.d-signin__brand { display: flex; flex-direction: column; align-items: center; }
/* Demo servers only (DTC_DEMO_SIGNIN): the account list under the sign-in form. */
.d-demo { inline-size: min(760px, 100%); display: flex; flex-direction: column; gap: var(--sp-2); margin-block-start: var(--sp-4); }
.d-demo__title { font-size: var(--fs-18); font-weight: 600; }
.d-demo .d-table-wrap { max-block-size: none; }
.d-demo__password { font-size: var(--fs-16); font-weight: 600; }
.d-demo__password bdi { user-select: all; }
.d-demo__use { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.d-demo__use:hover { color: var(--accent-hover); }
.d-demo__use:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-1); }
.d-more { font-size: var(--fs-14); color: var(--muted); padding-inline: var(--sp-1); }

/* ---------- Strategy map ---------- */
.d-pillars { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); align-items: start; }
.d-pillar__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, 200px); gap: var(--sp-2) var(--sp-4); align-items: center; padding: var(--sp-4); border-block-end: 1px solid var(--line); background: var(--surface-2); }
.d-list__end { display: grid; grid-template-columns: 140px 7.5rem; align-items: center; gap: var(--sp-3); }
.d-list__end .d-badge { justify-self: start; }
.d-list__end .d-progress { min-inline-size: 120px; inline-size: 140px; }
a.d-list__title { color: var(--ink); text-decoration: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.6; }
a.d-list__title:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 560px) { .d-list > li, .d-pillar__head { grid-template-columns: minmax(0, 1fr); } .d-list__end { justify-content: space-between; } }

/* ---------- Filters and OKR tree ---------- */
.d-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-3); align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-4); }
.d-filters__actions { display: flex; gap: var(--sp-2); }
.d-table--tree .d-tree__objective > * { background: var(--surface-2); font-weight: 600; }
.d-table--tree .d-tree__objective a { color: var(--ink); }
.d-table--tree .d-tree__kr td.trunc { padding-inline-start: var(--sp-6); }
.d-table--tree .d-tree__kr th { font-weight: 400; color: var(--ink-2); }
.d-columns { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.d-due { font-size: var(--fs-13); font-weight: 600; color: var(--warn); white-space: nowrap; }

/* ---------- Task board ---------- */
.d-board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: var(--sp-3); align-items: start; overflow-x: auto; }
.d-board__col { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-3); padding: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); min-block-size: 160px; }
.d-board__col[data-over] { outline: 2px dashed var(--accent); outline-offset: -4px; }
.d-board__head { font-size: var(--fs-16); display: flex; justify-content: space-between; padding-inline: var(--sp-1); }
.d-board__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); max-block-size: 70vh; overflow-y: auto; }
.d-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2); padding: var(--sp-3); display: flex; flex-direction: column; gap: 2px; }
.d-card[draggable="true"] { cursor: grab; }
.d-card__title { color: var(--ink); text-decoration: none; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.d-card__title:hover { color: var(--accent); text-decoration: underline; }
.d-card .d-task-move { display: flex; gap: var(--sp-1); margin-block-start: var(--sp-2); }
.d-board__empty { font-size: var(--fs-14); color: var(--muted); padding: var(--sp-2); }
.d-field__label { font-size: var(--fs-14); font-weight: 500; }
@media (max-width: 960px) { .d-board { grid-template-columns: repeat(4, minmax(260px, 82vw)); scroll-snap-type: inline mandatory; } .d-board__col { scroll-snap-align: start; } }
.d-print-only { display: none; }
.d-row-actions { display: flex; gap: var(--sp-1); align-items: center; justify-content: flex-start; }
.d-inline-form { display: inline-flex; gap: var(--sp-1); align-items: center; }
.d-select--sm { min-block-size: 32px; padding: 2px var(--sp-2); font-size: var(--fs-13); inline-size: auto; }