/* FlowDesk — mobile-first, RTL-first layout (§ב.10). Uses CSS logical properties throughout so the same rules
   mirror correctly under dir=rtl. Colors/spacing come ONLY from tokens.css. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
}
h1, h2, h3 { margin: 0 0 var(--sp-3); line-height: 1.3; }
h1 { font-size: var(--fs-xl); }
h2 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-3); }
a { color: var(--color-primary); }

/* App shell — mobile-first single column, capped on larger screens */
.app { max-width: 720px; margin-inline: auto; padding: var(--sp-4); padding-block-end: var(--sp-7); }
/* Auth screens: a tighter centered column so the login block doesn't stretch on desktop (one product, one column). */
.app.auth { max-width: 460px; }
.appbar {
  position: sticky; inset-block-start: 0; z-index: 10;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface); border-block-end: 1px solid var(--color-border);
}
/* Header content shares the widest content column so brand + controls line up across all screens. */
.appbar .bar { display: flex; align-items: center; gap: var(--sp-3); max-width: 960px; margin-inline: auto; }
.appbar .brand { font-weight: 700; font-size: var(--fs-lg); margin-inline-end: auto; }
.appbar .brand .dot { color: var(--color-primary); }

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2);
  padding: var(--sp-4);
  margin-block-end: var(--sp-4);
  box-shadow: var(--shadow-1);
}
.card h2 { display: flex; align-items: center; gap: var(--sp-2); }
/* Sub-panels within a console section (appointments: approvals / members / appoint / search). */
.card.sub { border: 1px solid var(--color-border); box-shadow: none; margin-block: var(--sp-3); }
.card.sub h3 { margin-block: 0 var(--sp-3); font-size: var(--fs-lg); }
/* Section icons — one consistent inline-SVG set, tinted with the accent token (replaces ad-hoc emoji). */
.card h2 svg { inline-size: 22px; block-size: 22px; color: var(--color-primary); flex-shrink: 0; }
.card .help { color: var(--color-muted); font-size: var(--fs-sm); margin-block-start: calc(-1 * var(--sp-2)); margin-block-end: var(--sp-3); }

/* List items */
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-block-end: 1px solid var(--color-line);
}
/* Console screens (orgs, …): a wrapping cluster of row/toolbar action buttons + inline mini-forms. The cluster and
   any inline form drop to their own full-width line beneath the row (never squeezing the row content). */
.row-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.list .row-actions, .list .inline-form { flex-basis: 100%; margin-block-start: var(--sp-2); }
.row-actions .btn, .inline-form .btn { inline-size: auto; }
.inline-form { padding: var(--sp-3); margin-block: var(--sp-2); }
.inline-form .field:last-of-type { margin-block-end: var(--sp-2); }
/* Checkbox row (policy-flag toggles): the box + its label sit inline; the label is not full-width. */
.check { display: flex; align-items: center; gap: var(--sp-2); }
.check label { margin-block-end: 0; font-weight: 600; }
.check input[type="checkbox"] { inline-size: 18px; block-size: 18px; flex-shrink: 0; }
/* Inline field (label + control on one line) used in per-row capability config. */
.field.inline { display: flex; align-items: center; gap: var(--sp-2); margin-block-end: 0; }
.field.inline label { margin-block-end: 0; }
.list li:last-child { border-block-end: 0; }
.list .li-main { min-inline-size: 0; }
.list .li-title { font-weight: 600; }
.list .li-sub { color: var(--color-muted); font-size: var(--fs-sm); margin-block-start: 2px; }
.list .li-end { margin-inline-start: auto; flex-shrink: 0; }
.list .li-actions { margin-inline-start: auto; flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-2); }
/* leading accent icon for rows that have no status/action (e.g. notifications) — a real visual anchor, not a bare rule */
.list .li-ico { flex-shrink: 0; color: var(--color-primary); display: inline-flex; align-items: center; }
.list .li-ico svg { inline-size: 20px; block-size: 20px; }
.list .li-ico.dot { inline-size: 10px; block-size: 10px; border-radius: var(--radius-pill); background: var(--color-primary); align-self: center; }
.list .li-ico.dot.muted { background: var(--color-border); }        /* a READ notification: the accent dot dims */
.list li.unread .li-title { font-weight: 700; }                     /* an UNREAD notification stands out */

/* Status pills */
.pill { display: inline-block; padding: 2px var(--sp-3); border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600; background: var(--color-surface-2); color: var(--color-muted); }
.pill.ok { background: var(--color-primary-soft); color: var(--color-on-primary-soft); }
.pill.done { background: color-mix(in srgb, var(--color-success) 18%, transparent); color: var(--color-success); }
.pill.warn { background: color-mix(in srgb, var(--color-warning) 18%, transparent); color: var(--color-warning); }

/* Buttons */
.btn {
  font: inherit; cursor: pointer; border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text); text-decoration: none;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-1); min-block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
}
/* row-level action buttons (open/resolve) are compact so they read as one consistent control, not a text-link */
.list .btn.ghost { min-block-size: 36px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
.btn.primary { background: var(--color-primary); color: var(--color-primary-text); border-color: transparent; inline-size: 100%; font-weight: 600; }
.btn.ghost { background: transparent; }
.btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.btn.icon { min-inline-size: 44px; padding: var(--sp-2); }
/* Back button — icon + text, sits inline (not full-width), ≥44px tap target from .btn. */
.btn.back { inline-size: auto; margin-block-end: var(--sp-3); color: var(--color-muted); }
.btn.back svg { inline-size: 20px; block-size: 20px; }

/* Forms */
.field { margin-block-end: var(--sp-4); }
.field label { display: block; font-weight: 600; margin-block-end: var(--sp-2); }
.field .hint { color: var(--color-muted); font-size: var(--fs-sm); margin-block-start: var(--sp-1); }
.input, .select, textarea.input {
  inline-size: 100%; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-1); padding: var(--sp-3); min-block-size: 44px;
}
.input:focus-visible, .select:focus-visible, textarea.input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-primary); }

/* States */
.state { text-align: center; color: var(--color-muted); padding: var(--sp-6) var(--sp-4); }
.state .emoji { font-size: 2rem; display: block; margin-block-end: var(--sp-2); }
.banner { border-radius: var(--radius-1); padding: var(--sp-3) var(--sp-4); margin-block-end: var(--sp-4); font-size: var(--fs-sm); }
.banner.error { background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent); }
.banner.info { background: var(--color-primary-soft); color: var(--color-on-primary-soft); }
.skeleton { background: linear-gradient(90deg, var(--color-surface-2), var(--color-surface), var(--color-surface-2)); border-radius: var(--radius-1); block-size: 18px; margin-block-end: var(--sp-3); animation: sk 1.2s ease-in-out infinite; }
@keyframes sk { 0%,100% { opacity: .6 } 50% { opacity: 1 } }

/* Stepper (login) */
.steps { display: flex; gap: var(--sp-2); margin-block-end: var(--sp-4); }
.steps .step { flex: 1; block-size: 4px; border-radius: var(--radius-pill); background: var(--color-border); }
.steps .step.on { background: var(--color-primary); }

/* Form-runtime stage stepper (slice H) — an ordered list of stages (done / current / remaining), RTL-native, wraps on
   mobile so long Hebrew stage names never clip or scroll. The current stage is filled with the accent; done stages get
   a success dot; remaining stay muted. */
.stepper { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; }
.stepper .step { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-muted); font-size: var(--fs-sm); min-block-size: 40px; }
.stepper .step-no { display: inline-flex; align-items: center; justify-content: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--color-border); color: var(--color-text); font-weight: 600; flex: none; }
.stepper .step.current { background: var(--color-primary-soft); color: var(--color-on-primary-soft); font-weight: 600; }
.stepper .step.current .step-no { background: var(--color-primary); color: var(--color-primary-text); }
.stepper .step.done { color: var(--color-text); }
.stepper .step.done .step-no { background: var(--color-success); color: var(--color-primary-text); }

/* A one-time code shown to a manager (enrollment temp code) — monospace, LTR, selectable at a glance for hand-off. */
.code-block { display: inline-block; direction: ltr; unicode-bidi: isolate; user-select: all; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-lg); letter-spacing: .08em; background: var(--color-surface-2); color: var(--color-text); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-1); }

/* Segmented tabs — WRAP so long RTL labels never clip (no horizontal scroll). Each pill grows to fill its row, so
   they sit side-by-side when they fit and stack full-width on narrow screens (down to 320px). §mobile-pill-fix */
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tabs .tab { flex: 1 1 auto; white-space: nowrap; text-align: center; min-block-size: 44px; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-pill); background: var(--color-surface-2); color: var(--color-muted); border: 1px solid transparent; cursor: pointer; }
/* Selected segment — solid accent fill so the active choice is unmistakable (was a low-contrast soft tint). */
.tabs .tab[aria-selected="true"] { background: var(--color-primary); color: var(--color-primary-text); border-color: transparent; font-weight: 600; }

.muted { color: var(--color-muted); }
.center { text-align: center; }
/* Console shells (S1): page header row (title + action) + the capability-driven nav chips. */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.page-head h1 { margin-block-end: var(--sp-3); }
.head-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* topics / user↔org chat — a scrollable stack of bubbles; my messages hug the inline-end, the org's the inline-start */
.chat { display: flex; flex-direction: column; gap: var(--sp-2); margin-block-end: var(--sp-3); max-block-size: 46vh; overflow-y: auto; }
.chat-msg { max-inline-size: 80%; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-1); background: var(--color-surface-2); }
/* RTL cross-axis: flex-start hugs the inline-start (right in RTL) → my messages on the right, the org's on the left */
.chat-msg.mine { align-self: flex-start; background: var(--color-primary-soft); color: var(--color-on-primary-soft); }
.chat-msg.org { align-self: flex-end; }
.chat-msg .who { display: block; font-size: var(--fs-sm); color: var(--color-muted); margin-block-end: 2px; }
.chat-msg .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.console-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block: var(--sp-3) var(--sp-4); }
.console-nav .nav-item { min-block-size: 40px; padding: var(--sp-2) var(--sp-4); }
.stack > * + * { margin-block-start: var(--sp-3); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Desktop density — the control-plane screens (home/mgmt) widen and lay their card sections in two columns so the
   width isn't wasted; each .grid-2 cell keeps its own margin-block-end:0 card so the grid gap owns the spacing. */
.grid-2 { display: grid; gap: var(--sp-4); }
.grid-2 > .card { margin-block-end: 0; }
@media (min-width: 900px) {
  .app.wide { max-width: 960px; }
  .app.wide .grid-2 { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ===== M1.2 — workflow inbox + request-detail (Hebrew/RTL) ===== */
.wf-inbox h1 { margin: 8px 0 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filter-chip { border: 1px solid var(--line, #d5d9e2); background: var(--surface, #fff); color: inherit; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.filter-chip.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.inbox-list { display: flex; flex-direction: column; gap: 8px; }
.inbox-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: start; border: 1px solid var(--line, #d5d9e2); background: var(--surface, #fff); border-radius: 10px; padding: 12px 14px; font: inherit; cursor: pointer; }
.inbox-row:hover { border-color: #2563eb; }
.ir-title { font-weight: 700; }
.ir-sub { color: var(--muted, #667); font-size: 12.5px; margin-top: 3px; }
.panel { border: 1px solid var(--line, #d5d9e2); border-radius: 12px; padding: 14px; margin: 12px 0; background: var(--surface, #fff); }
.panel h3 { margin: 0 0 10px; font-size: 15px; }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dh-sub { color: var(--muted, #667); font-size: 13px; margin-top: 4px; }
.kv { font-size: 13.5px; padding: 3px 0; }
/* P1 FIX-C: a label/value kv row must SEPARATE its two spans — without this they render touching (e.g. the person
   card read "אדם"+"דנה כהן" as one word, "מזהה"+"900112233" as one). The label gets a muted colour + a trailing gap
   + a min-width so the value column aligns; a plain-text .kv row (no .kv-label span) is unaffected. */
.kv .kv-label { color: var(--muted, #667); margin-inline-end: var(--sp-3, 12px); display: inline-block; min-width: 8.5em; }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.reason-wrap { margin-top: 10px; }
.reason-wrap[hidden] { display: none; }
.reason-input { width: 100%; box-sizing: border-box; border: 1px solid var(--line, #d5d9e2); border-radius: 8px; padding: 8px; font: inherit; font-size: 13px; resize: vertical; }
.timeline { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-step { border: 1px solid var(--line, #d5d9e2); border-radius: 999px; padding: 3px 10px; font-size: 12px; color: var(--muted, #667); }
.tl-step.cur { background: #eef4ff; border-color: #2563eb; color: #1e3a8a; font-weight: 700; }
.audit-row { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; border-bottom: 1px dashed var(--line, #eee); }
.at-time { color: var(--muted, #889); white-space: nowrap; font-variant-numeric: tabular-nums; }
.at-actor { font-weight: 700; }
.back-link { border: none; background: none; color: #2563eb; cursor: pointer; font: inherit; font-weight: 700; padding: 0; margin-bottom: 8px; }
.soon-tag { background: #f0eef7; color: #3b2f6b; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; }
.pill.info { background: #e6f0ff; color: #1e3a8a; }
.pill.warn { background: #fdf0d5; color: #7a5200; }
.pill.ok { background: #e6f4ea; color: #14532d; }
.pill.closed { background: #ece7f6; color: #5b3fa0; }

/* ===== M2.2 — task attachments ===== */
.attach-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line, #d5d9e2); border-radius: 9px; padding: 8px 10px; margin-bottom: 8px; background: #fbfcff; }
.att-name { font-weight: 700; font-size: 13.5px; }
.att-meta { display: flex; gap: 6px; align-items: center; margin-top: 3px; }
.att-kind { color: var(--muted, #667); font-size: 12px; }
.att-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line, #eee); }
.att-file { font-size: 12.5px; }

/* ===== M2.3 — 3A submit form ===== */
.wf-submit h1 { margin: 8px 0 10px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.field > label { font-size: 13px; font-weight: 700; color: #33405c; }
.field input, .field textarea { border: 1px solid var(--line, #d5d9e2); border-radius: 8px; padding: 8px; font: inherit; font-size: 13.5px; box-sizing: border-box; }
.field-err { color: var(--danger, #b42318); font-size: 12.5px; font-weight: 600; margin: -4px 0 8px; }
.field-err[hidden] { display: none; }
.banner.danger { background: #fde8e8; color: #8a2f2f; border: 1px solid #f4c7c7; border-radius: 8px; padding: 8px 10px; margin-top: 10px; font-size: 13px; }
.banner.danger[hidden] { display: none; }

/* ===== M2.4 — administrative close / appeal (distinct from approve/reject) ===== */
.close-panel { border-inline-start: 4px solid #b45309; background: #fffbeb; }
.close-panel h3 { color: #92400e; }
.banner.warn { background: #fef3c7; color: #7a5200; border: 1px solid #f0d9a8; border-radius: 8px; padding: 8px 10px; margin-top: 10px; font-size: 13px; }
.banner.info { background: #e6f0ff; color: #1e3a8a; border: 1px solid #cfe0ff; border-radius: 8px; padding: 8px 10px; margin-top: 10px; font-size: 13px; }