/* ============================================================
   COMPONENTS — app shell, cards, dashboard widgets
   All values come from design-tokens.css variables.
   ============================================================ */

body {
  font-family: var(--font-body);
  background: var(--surface-app);
  color: var(--text-primary);
  margin: 0;
}

/* ── App shell: mobile-first ───────────────────────────────────────────────
   Mobile (<992px): sidebar is a Bootstrap offcanvas (hamburger in topbar);
   positioning/size come from .offcanvas-lg — do NOT override them here.
   Desktop (≥992px): static sticky sidebar docked at the inline start (right
   in RTL). Desktop-only shell styles live inside the media query. */
.app-shell { display: flex; min-height: 100vh; }

.app-sidebar {
  background: var(--surface-sidebar);
  --bs-offcanvas-width: 280px;   /* mobile drawer width */
}

@media (min-width: 992px) {
  .app-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    border-inline-end: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
  }
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  padding-inline-end: var(--sp-4);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text-primary);
  text-decoration: none;
}
.sidebar-brand .brand-mark {
  width: 32px; height: 32px;
  border-radius: var(--r-lg);
  background: var(--brand-600);
  color: var(--text-inverse);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}

.sidebar-nav { padding: var(--sp-4) var(--sp-3); flex: 1; }
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-1);
  border-radius: var(--r-md);
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-nav .nav-link:hover { background: var(--surface-hover); color: var(--text-brand); }
.sidebar-nav .nav-link.active { background: var(--surface-active); color: var(--text-brand); }

/* Group heading inside the sidebar (e.g. מחסן for the merged warehouse
   sections). Rendered only when at least one item in the group survives the
   screen gate, so it never labels an empty group. */
.sidebar-nav .nav-section-label {
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  margin-top: var(--sp-2);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-muted);
  text-transform: uppercase;
}

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

/* Working-area width cap. On a wide monitor a full-bleed content column gets
   unreadably long lines and stretched tables, so the content (and the topbar's
   inner row, so the title/actions stay aligned with it) is centred at
   --content-max-width. The topbar background and the sidebar still span the
   full window — only the working area is boxed. Below that width nothing
   changes, so the mobile-first layout is untouched. */
.app-shell { --content-max-width: 1440px; }

/* Centring note: the column is centred inside .app-main (the area beside the
   sidebar), NOT inside the window — so on a wide screen the free space is a
   little larger on the far side from the sidebar. Centring it on the window
   instead would mean pulling content under the sidebar at common desktop
   widths (at 1920 there is only ~120px of slack), so this is the trade:
   the working area stays whole and the padding reads as intentional. */
.content-width {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  min-width: 0;   /* so flex/grid children can shrink instead of overflowing */
}

/* The topbar row is a flex container; it must still fill its own height. */
.app-topbar > .content-width { height: 100%; }

.app-topbar {
  height: var(--topbar-height);
  background: var(--surface-header);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
}
.app-topbar .page-title { font-size: 1rem; font-weight: 600; margin: 0; flex: 1; }
/* Links to the profile page — styled as the plain user chip it has always
   looked like, not as a blue underlined link. */
.app-topbar .topbar-user {
  color: var(--text-secondary);
  font-size: .9rem;
  text-decoration: none;
}
.app-topbar .topbar-user:hover { color: var(--text-primary); }
.app-topbar .sidebar-toggle {
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: 1.2rem;
  line-height: 1;
  padding: var(--sp-1) var(--sp-2);
}

/* Mobile-first content padding; roomier on desktop */
.app-content { padding: var(--sp-4); flex: 1; }
@media (min-width: 992px) {
  .app-topbar { padding: 0 var(--sp-6); }
  .app-content { padding: var(--sp-6); }
}

/* ── Cards ─────────────────────────────────────────────────────────────── */
.panel-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs);
}
.panel-card .panel-header {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.panel-card .panel-body { padding: var(--sp-5); }

/* ── Dashboard stat tiles ──────────────────────────────────────────────── */
.stat-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: 100%;
}
.stat-card .stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.stat-card .stat-icon.i-brand   { background: var(--brand-50);   color: var(--brand-600);   }
.stat-card .stat-icon.i-success { background: var(--success-bg); color: var(--success-dot); }
.stat-card .stat-icon.i-warning { background: var(--warning-bg); color: var(--warning-dot); }
.stat-card .stat-icon.i-purple  { background: var(--purple-bg);  color: var(--purple-dot);  }
/* Neutral variant — for a tile the user has no access to (see .stat-card-locked) */
.stat-card .stat-icon.i-muted   { background: var(--surface-app); color: var(--text-disabled); }
.stat-card .stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-card .stat-label { color: var(--text-tertiary); font-size: .85rem; }

/* A stat tile that is itself a link (whole card is the tap target — mobile) */
a.stat-card-link {
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
}
a.stat-card-link:hover,
a.stat-card-link:focus-visible {
  box-shadow: var(--shadow-md);
  border-color: var(--border-default);
}

/* A tile the user lacks the capability for: present but visibly inert, so the
   dashboard layout stays stable across users instead of losing a tile. */
.stat-card-locked { background: var(--surface-app); box-shadow: none; }
.stat-card-locked .stat-value { color: var(--text-disabled); }

/* ── Empty states (icon + message, per admin standard) ─────────────────── */
.empty-state {
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  color: var(--text-tertiary);
}
.empty-state .empty-icon { font-size: 2rem; display: block; margin-bottom: var(--sp-3); color: var(--text-disabled); }
.empty-state .empty-title { font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1); }
.empty-state .empty-hint { font-size: .85rem; }

/* ── Loading spinner row ───────────────────────────────────────────────── */
.loading-row {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8);
  color: var(--text-tertiary);
}

/* ── Notifications (fixed top-center alert, auto-dismiss) ──────────────── */
.notify {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  min-width: min(320px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}

/* ── Clickable cell values ─────────────────────────────────────────────── */
.cell-link { color: var(--text-brand); text-decoration: none; cursor: pointer; }
.cell-link:hover { text-decoration: underline; }

/* ── Status badges (project status — colors per tools standard) ────────── */
.badge-status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 600;
}
.badge-status.s-draft     { background: #e9ecef; color: #495057; }
.badge-status.s-active    { background: #d1f0e0; color: #1a7a47; }
.badge-status.s-pending   { background: #e7e9fd; color: #4338ca; }
.badge-status.s-on_hold   { background: #fff3cd; color: #856404; }
.badge-status.s-completed { background: #cfe2ff; color: #084298; }
.badge-status.s-cancelled { background: #f8d7da; color: #842029; }

/* ── Project cards (mobile-first list) ─────────────────────────────────── */
.project-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-4) var(--sp-5);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.project-card .project-title { font-weight: 600; font-size: 1rem; color: var(--text-primary); }
.project-card .project-meta { color: var(--text-tertiary); font-size: .85rem; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.project-card .project-dates { color: var(--text-tertiary); font-size: .8rem; margin-top: auto; }

/* Whole card is the tap target (mobile-first) — plain link wrapper, no
   per-field links inside the card. */
a.project-card-link { display: block; height: 100%; text-decoration: none; }
a.project-card-link .project-card {
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
a.project-card-link:hover .project-card,
a.project-card-link:focus-visible .project-card {
  border-color: var(--brand-600);
  box-shadow: var(--shadow-sm);
}

/* ── Project detail page ───────────────────────────────────────────────── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text-secondary);
  font-size: .9rem;
  text-decoration: none;
  min-height: 44px;             /* touch target */
}
.back-link:hover { color: var(--text-brand); }

.detail-header .detail-title { font-size: 1.2rem; font-weight: 700; }
.detail-header .detail-dates { color: var(--text-tertiary); font-size: .85rem; }
/* Reuse the card meta vocabulary outside .project-card */
.project-meta { color: var(--text-tertiary); font-size: .85rem; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* Label/value list for general + technical sections */
.info-list dt { font-size: .8rem; font-weight: 600; color: var(--text-tertiary); margin-bottom: var(--sp-1); }
.info-list dd {
  margin: 0 0 var(--sp-4);
  color: var(--text-primary);
  white-space: pre-wrap;        /* long API text keeps its line breaks */
  overflow-wrap: break-word;
}
.info-list dd:last-child { margin-bottom: 0; }

/* Team member rows */
.team-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  min-height: 44px;             /* touch target */
}
.team-row + .team-row { border-top: 1px solid var(--border-subtle); }
.team-row .team-icon { font-size: 1.3rem; color: var(--text-disabled); }
.team-row .team-name { font-weight: 500; }
.team-row .team-role { color: var(--text-tertiary); font-size: .85rem; margin-inline-start: auto; }

/* ── Detail tabs (v6) — sticky bar, lazy-loaded panes ──────────────────── */
.detail-tabs {
  position: sticky;
  top: 0;
  z-index: 5;                    /* above panel content, below the offcanvas */
  display: flex;
  overflow-x: auto;              /* 4 tabs fit at 390px, but never overflow the page */
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs);
}
.detail-tabs .tab-btn {
  flex: 1;
  min-height: 44px;              /* touch target */
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: .9rem;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.detail-tabs .tab-btn.active {
  color: var(--text-brand);
  border-bottom-color: var(--brand-600);
  font-weight: 600;
}

/* Task status badge — project statuses cover pending/completed already */
.badge-status.s-in_progress { background: #e7f1fd; color: #0b5ed7; }

/* Slim progress bar (tasks + plan) */
.progress-slim {
  height: 6px;
  border-radius: var(--r-full);
  background: var(--border-subtle);
  overflow: hidden;
}
.progress-slim .progress-slim-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--brand-600);
  transition: width var(--t-fast);
}

/* Task rows — <details>: summary is the 44px tap target, body is the editor */
.task-row { border-top: 1px solid var(--border-subtle); }
.task-row:first-child { border-top: none; }
.task-row summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-3) 0;
  min-height: 44px;              /* touch target */
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.task-row summary::-webkit-details-marker { display: none; }
.task-row .task-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.task-row .task-title { font-weight: 500; }
.task-row .task-meta { color: var(--text-tertiary); font-size: .8rem; }
.task-row .task-edit { padding: 0 0 var(--sp-4); }
.task-row .task-desc {
  color: var(--text-secondary);
  font-size: .9rem;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  margin-bottom: var(--sp-3);
}
.task-row .task-controls {
  display: flex;
  flex-direction: column;        /* mobile-first: controls stack */
  gap: var(--sp-3);
}
.task-row .task-controls .btn { min-height: 44px; }
@media (min-width: 992px) {
  .task-row .task-controls {
    flex-direction: row;
    align-items: flex-end;
  }
  .task-row .task-controls > div { flex: 1; }
}

/* Inline task-create form sits between header and list */
.task-create { border-bottom: 1px solid var(--border-subtle); }
.task-create .btn { min-height: 44px; }

/* File rows */
.file-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  min-height: 44px;              /* touch target */
}
.file-row + .file-row { border-top: 1px solid var(--border-subtle); }
.file-row .file-icon { font-size: 1.4rem; color: var(--text-disabled); }
.file-row .file-info { flex: 1; min-width: 0; }
.file-row .file-name {
  font-weight: 500;
  color: var(--text-brand);
  text-decoration: none;
  overflow-wrap: break-word;
  display: block;
  unicode-bidi: plaintext;      /* LTR filenames keep their real char order in RTL */
}
.file-row a.file-name:hover { text-decoration: underline; }
.file-row .file-meta { color: var(--text-tertiary); font-size: .8rem; }
.file-row .file-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;               /* touch target */
  min-height: 44px;
  color: var(--text-secondary);
}

/* Filter chips (files section filter) */
.filter-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.filter-chips .chip {
  min-height: 44px;              /* touch target */
  padding: var(--sp-1) var(--sp-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-full);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: .85rem;
}
.filter-chips .chip.active {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
  font-weight: 600;
}

/* Updates feed */
.update-compose { border-bottom: 1px solid var(--border-subtle); }
.update-compose-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;               /* mobile-first: wraps when tight */
}
.update-compose-actions .form-select { flex: 1; min-width: 0; min-height: 44px; }
.update-compose-actions .btn { min-height: 44px; }

.update-row { padding: var(--sp-3) 0; }
.update-row + .update-row { border-top: 1px solid var(--border-subtle); }
.update-row .update-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-1);
}
.update-row .update-author { font-weight: 600; font-size: .9rem; }
.update-row .update-time {
  color: var(--text-tertiary);
  font-size: .8rem;
  margin-inline-start: auto;
}
.update-row .visibility-tag {
  padding: 1px 8px;
  border-radius: var(--r-full);
  font-size: .72rem;
  font-weight: 600;
  background: #fff3cd;           /* internal — amber, matches s-on_hold family */
  color: #856404;
}
.update-row .update-body {
  color: var(--text-primary);
  font-size: .92rem;
  white-space: pre-wrap;         /* multi-line updates keep their line breaks */
  overflow-wrap: break-word;
}

/* Plan tab */
.plan-pct { font-size: 1.6rem; font-weight: 700; margin-bottom: var(--sp-2); }
.plan-caption { color: var(--text-tertiary); font-size: .85rem; margin-top: var(--sp-2); }
.phase-name { font-weight: 600; font-size: 1.05rem; margin-bottom: var(--sp-1); }

/* ══ Workflow tasks (משימות) ═══════════════════════════════════════════════
   The Trac-style Task: created→assigned→solved/cancelled→closed, returned to
   its issuer. Distinct from the plan-task rows above. Mobile-first: cards on
   the inbox, a stacked action sheet on the detail page. */

/* Workflow status badges — reuse the .badge-status shape, own palette.
   Green = the ball is in the issuer's court (done, awaiting their check). */
.badge-status.s-created   { background: #e9ecef; color: #495057; }
.badge-status.s-assigned  { background: #e7f1fd; color: #0b5ed7; }
.badge-status.s-solved    { background: #d1f0e0; color: #1a7a47; }
.badge-status.s-closed    { background: #cfe2ff; color: #084298; }
/* s-cancelled is already defined with the project statuses */

/* Scope tabs on the inbox — horizontally scrollable, never wrap on mobile */
.scope-tabs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-3);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scope-tabs::-webkit-scrollbar { display: none; }
.scope-tabs .chip {
  flex: 0 0 auto;
  min-height: 44px;              /* touch target */
  display: inline-flex;
  align-items: center;
  padding: 0 var(--sp-4);
  border-radius: var(--r-full);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: .9rem;
  cursor: pointer;
  white-space: nowrap;
}
.scope-tabs .chip.active {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
  font-weight: 600;
}

/* Task cards in the inbox — the whole card is the tap target */
.task-card-link { text-decoration: none; color: inherit; display: block; }
.task-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.task-card-link:hover .task-card { border-color: var(--brand-600); }
.task-card .tc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
}
.task-card .tc-title {
  font-weight: 600;
  overflow-wrap: break-word;
  min-width: 0;                  /* let long Hebrew titles wrap, not overflow */
}
.task-card .tc-meta {
  color: var(--text-tertiary);
  font-size: .82rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
}
/* "Waiting for you" marker — the reason this task is in your inbox */
.task-card .tc-flag {
  font-size: .78rem;
  font-weight: 600;
  color: var(--warning-text);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--r-full);
  padding: 1px 8px;
  align-self: flex-start;
}

/* Detail page: the workflow panel is the primary affordance on mobile */
.task-detail-head { display: flex; flex-direction: column; gap: var(--sp-3); }
.task-detail-head .td-title {
  font-size: 1.15rem;
  font-weight: 700;
  overflow-wrap: break-word;
}
.task-detail-head .td-badges {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.task-desc-block {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: var(--text-secondary);
}

/* Action buttons stack full-width on mobile, sit inline on desktop */
.task-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.task-actions .btn { min-height: 44px; }
@media (min-width: 992px) {
  .task-actions { flex-direction: row; flex-wrap: wrap; }
  .task-actions .btn { flex: 0 1 auto; }
}
/* Hint under an action that hands the task back to whoever opened it */
.action-hint {
  color: var(--text-tertiary);
  font-size: .82rem;
  margin-top: var(--sp-1);
}

/* History timeline — newest first */
.tl-row {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border-subtle);
}
.tl-row:first-child { border-top: none; }
.tl-dot {
  flex: 0 0 auto;
  width: 10px; height: 10px;
  border-radius: var(--r-full);
  background: var(--brand-600);
  margin-top: 6px;
}
.tl-body { min-width: 0; flex: 1; }
.tl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  font-size: .85rem;
  margin-bottom: var(--sp-1);
}
.tl-actor { font-weight: 600; }
.tl-time { color: var(--text-tertiary); margin-inline-start: auto; }
.tl-note {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  font-size: .9rem;
  color: var(--text-primary);
}
.tl-transition { color: var(--text-tertiary); font-size: .8rem; }

/* ── Profile page (portal/profile.html) ─────────────────────────────────────
   Mobile-first: single column, label above value. Splits into label/value
   columns only from 576px up. Read-only identity + change-password form.
   ────────────────────────────────────────────────────────────────────────── */
.profile-wrap {
  max-width: 640px;
}

/* The panel header is space-between for title+action rows; the profile header
   is just an icon and a title, so keep them together with a real gap. */
.profile-wrap .panel-header {
  justify-content: flex-start;
  gap: var(--sp-2);
}

.profile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--r-full);
  object-fit: cover;
  border: 1px solid var(--border-subtle);
  background: var(--surface-app);
  flex-shrink: 0;
}
.profile-avatar-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text-disabled);
}
.profile-head-text { min-width: 0; }
.profile-head-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.profile-head-role {
  font-size: 13px;
  color: var(--text-tertiary);
}

.profile-rows {
  margin: var(--sp-5) 0 0;
}
.profile-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.profile-row:last-child { border-bottom: none; }
.profile-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 400;
}
.profile-value {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  /* Usernames/emails are LTR inside an RTL page — keep them intact */
  unicode-bidi: plaintext;
  overflow-wrap: anywhere;
}
.profile-value.is-empty {
  color: var(--text-disabled);
  font-weight: 400;
}
@media (min-width: 576px) {
  .profile-row {
    grid-template-columns: 140px 1fr;
    align-items: baseline;
    gap: var(--sp-4);
  }
}

.profile-managed-note {
  margin: var(--sp-4) 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--info-bg);
  border: 1px solid var(--info-border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}

/* Full-width primary action on phones, natural width from 576px (Bootstrap
   has no w-sm-auto, so it is defined here). */
.profile-wrap .btn { min-height: 44px; }
@media (min-width: 576px) {
  .w-sm-auto { width: auto !important; }
}

/* ── Material orders (הזמנות חומרים) ──────────────────────────────────────
   Senior technicians request products per project; the warehouse fulfils each
   LINE. Mobile-first: cards on a phone, a table from lg up. */

/* Line status badges. `s-created` and `s-cancelled` already exist above with
   the workflow/project palettes and are reused deliberately — one status
   colour vocabulary across the portal. Only the two new states are added.
   Amber = waiting on the warehouse; green = done. */
.badge-status.s-ready    { background: #fff3cd; color: #856404; }
.badge-status.s-supplied { background: #d1f0e0; color: #1a7a47; }

/* Order rollup badges — deliberately a DIFFERENT shade from the line states,
   so a header badge is never mistaken for a line badge at a glance. */
.badge-status.s-open               { background: #e7f1fd; color: #0b5ed7; }
.badge-status.s-partially_supplied { background: #fff3cd; color: #856404; }
.badge-status.s-closed             { background: #cfe2ff; color: #084298; }

/* A compact per-status tally on the list row ("3 סופקו · 1 ממתין"). */
.mo-tally {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  font-size: 12px;
  color: var(--text-secondary);
}
.mo-tally .mo-tally-item { display: inline-flex; align-items: center; gap: 4px; }
.mo-tally .dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.mo-tally .dot-created   { background: #adb5bd; }
.mo-tally .dot-ready     { background: #e0a800; }
.mo-tally .dot-supplied  { background: #1a7a47; }
.mo-tally .dot-cancelled { background: #dc3545; }

/* Line rows. Cards on a phone (the default), a real table from lg up — the
   warehouse works from a phone on the floor, so the card view is the one that
   has to be right first. */
.mo-line {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
}
.mo-line:last-child { border-bottom: 0; }
.mo-line.is-selected { background: var(--info-bg); }
.mo-line-body { flex: 1 1 auto; min-width: 0; }
.mo-line-name {
  font-weight: 600;
  /* SKUs are latin inside an RTL line — plaintext keeps them readable
     without forcing the whole row LTR. */
  unicode-bidi: plaintext;
}
.mo-line-meta {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-top: 2px;
}
.mo-line-sku { unicode-bidi: plaintext; }
.mo-line-qty { font-variant-numeric: tabular-nums; font-weight: 600; }

/* The select checkbox — a ≥44px touch target on a phone even though the box
   itself is small. */
.mo-line-check {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: calc(var(--sp-2) * -1) 0 0 calc(var(--sp-2) * -1);
}
/* The <input> itself stays 20px (a 44px checkbox looks broken); the LABEL
   around it provides the 44px hit area, which is what the finger actually
   needs. Auditing tools measure the input, so the label is what matters. */
.mo-line-check input { width: 20px; height: 20px; }

/* Row actions (מחק) — a link-style button still needs a real touch target. */
.mo-line .btn-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
}
@media (min-width: 992px) {
  /* On a mouse-driven screen the 44px floor just adds dead space. */
  .mo-line .btn-link { min-height: 0; }
}

/* Sticky action bar for batch fulfilment. Sits above the mobile nav, spans the
   content column on desktop. Hidden until something is selected. */
.mo-actionbar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-card);
  border-top: 1px solid var(--border-default);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
}
.mo-actionbar .mo-selected-count {
  font-weight: 600;
  margin-inline-end: auto;
}
.mo-actionbar .btn { min-height: 44px; }

/* Product picker results inside the add-line panel. */
.mo-picker-results {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.mo-picker-item {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  text-align: start;
  min-height: 44px;
}
.mo-picker-item:last-child { border-bottom: 0; }
.mo-picker-item:hover,
.mo-picker-item:focus-visible { background: var(--info-bg); }
.mo-picker-sku {
  font-size: 12px;
  color: var(--text-secondary);
  unicode-bidi: plaintext;
}

/* Per-line history timeline (inside the modal).
   A dot-and-rail list: the rail is drawn on the ITEM, not a separate element,
   so a one-event trail has no orphan line hanging below it. */
.mo-history { display: flex; flex-direction: column; }
.mo-history-item {
  position: relative;
  display: flex;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
}
.mo-history-item:last-child { padding-bottom: 0; }
/* The connector, drawn from each dot down to the next — suppressed on the last
   item so the timeline ends at its final event. */
.mo-history-item:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 5px;      /* centres under the 12px dot, RTL-safe */
  top: 16px;
  bottom: 0;
  width: 2px;
  background: var(--border-subtle);
}
.mo-history-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--surface-card);  /* punches through the rail */
}
.mo-history-dot.dot-created   { background: #adb5bd; }
.mo-history-dot.dot-ready     { background: #e0a800; }
.mo-history-dot.dot-supplied  { background: #1a7a47; }
.mo-history-dot.dot-cancelled { background: #dc3545; }
.mo-history-content { min-width: 0; }
.mo-history-status { font-weight: 600; }
.mo-history-meta { font-size: 12px; color: var(--text-secondary); }
.mo-history-note {
  font-size: 13px;
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-app);
  border-radius: var(--r-md);
}

/* ── Issued documents (תעודת משלוח / הזמנת רכש פנימית) ───────────────────
   ⚠️ NO MONEY anywhere in here by design — these are internal documents, and
   the schema carries no price to render even if a column were added later. */
.mo-doc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--border-default);
}
.mo-doc-type { font-size: 1.25rem; font-weight: 700; }
.mo-doc-number {
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.mo-doc-date { margin-inline-start: auto; color: var(--text-secondary); font-size: 13px; }

/* Party + meta side by side from sm up, stacked on a phone. */
.mo-doc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
@media (min-width: 576px) {
  .mo-doc-grid { grid-template-columns: 2fr 1fr; }
}
.mo-doc-party-name { font-weight: 600; font-size: 1.05rem; margin-bottom: var(--sp-2); }
.mo-doc-field { margin-bottom: var(--sp-1); }
.mo-doc-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
}
.mo-doc-value { font-size: 14px; unicode-bidi: plaintext; }

.mo-doc-table { margin-bottom: var(--sp-4); }
.mo-doc-table th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.mo-doc-sku { unicode-bidi: plaintext; font-size: 13px; color: var(--text-secondary); }
.mo-doc-qty { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }

.mo-doc-notes {
  padding: var(--sp-3);
  background: var(--surface-app);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
}

/* Signature strip — a delivery note is signed on receipt. */
.mo-doc-sign {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
@media (min-width: 576px) {
  .mo-doc-sign { grid-template-columns: repeat(3, 1fr); }
}
.mo-doc-sign-line {
  margin-top: var(--sp-4);
  border-bottom: 1px solid var(--text-secondary);
}

/* Printing: drop the app shell so the sheet is the document alone. Page
   furniture (sidebar, topbar, buttons) has no business on a signed delivery
   note. */
@media print {
  .app-sidebar,
  .app-topbar,
  .mo-doc-actions,
  .notify { display: none !important; }
  .app-main, .app-content { margin: 0 !important; padding: 0 !important; }
  .mo-doc.panel-card {
    border: 0 !important;
    box-shadow: none !important;
  }
  .mo-doc-sign { break-inside: avoid; }
}