/* Grill Oppenheim — Design System */

:root {
  --bg:           #FAF7F2;
  --bg-2:         #F4EFE7;
  --bg-3:         #ECE4D5;
  --surface:      #FFFFFF;
  --surface-2:    #FBF9F4;
  --border:       #E5DDD0;
  --border-2:     #D9CFBE;
  --border-strong:#B8AB95;

  --ink:          #1F1B16;
  --ink-2:        #3D362D;
  --ink-3:        #524B44;
  --ink-4:        #706962;
  --ink-5:        #B0A89A;

  --accent:       #C44536;
  --accent-2:     #8B3A2E;

  --pr-high:    #C44536;
  --pr-high-bg: #F8E7E2;
  --pr-med:     #C68A2E;
  --pr-med-bg:  #FBF1DC;
  --pr-low:     #4F8A6B;
  --pr-low-bg:  #E4F0E8;
  --pr-watch:   #8AB89A;
  --pr-watch-bg:#EDF5EF;
  --pr-hold:    #9A958C;
  --pr-hold-bg: #ECE9E3;

  --side-bg:    #1F1B16;
  --side-bg-2:  #2A241D;
  --side-ink:   #F4EFE7;
  --side-ink-2: #D4C9B8;
  --side-ink-3: #9A9085;
  --side-border:#3D362D;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  --shadow-1: 0 1px 2px rgba(31, 27, 22, 0.04), 0 1px 1px rgba(31, 27, 22, 0.06);
  --shadow-2: 0 4px 12px rgba(31, 27, 22, 0.06), 0 1px 3px rgba(31, 27, 22, 0.08);
  --shadow-3: 0 12px 32px rgba(31, 27, 22, 0.12), 0 2px 6px rgba(31, 27, 22, 0.08);

  --font-sans: 'Noto Sans Hebrew', 'Google Sans Text', 'Google Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Noto Sans Hebrew', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* LVT subsidiary (added 2026-05-25) */
  --lvt:     #3D6F8A;
  --lvt-bg:  #E5EEF4;
  --lvt-ink: #2C5468;
}

* { box-sizing: border-box; }
html, body, #app { margin: 0; padding: 0; height: 100%; }
body {
  direction: rtl;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

.app { display: grid; grid-template-columns: 248px 1fr; height: 100vh; background: var(--bg); }

/* Sidebar */
.side { background: var(--side-bg); color: var(--side-ink); display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid var(--side-border); }
.side-head { padding: 16px 14px 12px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--side-border); }
.side-logo { width: 28px; height: 28px; border-radius: 6px; background: var(--accent); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.side-logo--mark { background: transparent; border-radius: 0; }
.side-logo--mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.side-title { font-size: 13px; font-weight: 600; color: var(--side-ink); line-height: 1.2; }
.side-sub { font-size: 11px; color: var(--side-ink-3); margin-top: 1px; }
.side-backup-btn { margin-inline-start: auto; background: none; border: none; cursor: pointer; color: var(--side-ink, #F4EFE7); opacity: .7; padding: 6px; border-radius: 8px; display: grid; place-items: center; }
.side-backup-btn:hover { opacity: 1; background: rgba(255,255,255,.12); }
/* Backup/export popup */
.be-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.be-pop { background: #fff; color: var(--ink-2); border-radius: 14px; padding: 22px; width: min(92vw,380px); box-shadow: 0 12px 40px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 12px; direction: rtl; }
.be-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 18px; color: var(--ink-2); }
.be-x { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--ink-4); }
.be-row { width: 100%; justify-content: center; }
.be-msg { font-size: 13px; padding: 8px; border-radius: 8px; background: var(--bg-2); text-align: center; color: var(--ink-2); }
.be-status { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.be-note { font-size: 12px; color: var(--ink-4); }
.side-search { margin: 10px 12px; position: relative; }
.side-search input { width: 100%; background: var(--side-bg-2); border: 1px solid var(--side-border); color: var(--side-ink); padding: 6px 28px 6px 8px; border-radius: 5px; font-size: 12px; outline: none; }
.side-search input:focus { border-color: #5d534a; }
.side-search input::placeholder { color: var(--side-ink-3); }
.side-search-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--side-ink-3); pointer-events: none; }
.side-search-kbd { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 10px; color: var(--side-ink-3); background: rgba(255,255,255,0.04); padding: 1px 4px; border-radius: 3px; }
.side-section { padding: 10px 12px 4px; font-size: 10.5px; font-weight: 600; color: var(--side-ink-3); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: space-between; }
.side-projs-toggle { position: relative; }
.side-projs-chevron { display: flex; align-items: center; padding: 2px 4px; border-radius: 3px; color: var(--side-ink-3); margin-inline-start: 2px; }
.side-projs-chevron:hover { background: rgba(255,255,255,0.08); color: var(--side-ink); }
.side-nav { padding: 0 8px; }
.side-link { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 5px; color: var(--side-ink-2); font-size: 12.5px; cursor: pointer; margin-bottom: 1px; transition: background 0.12s, color 0.12s; border: none; background: none; width: 100%; text-align: right; }
.side-link:hover { background: var(--side-bg-2); color: var(--side-ink); }
.side-link.active { background: var(--side-bg-2); color: var(--side-ink); }
.side-link.active .side-link-icon { color: var(--accent); }
.side-link-icon { color: var(--side-ink-3); flex-shrink: 0; transition: color 0.12s; }
.side-link-label { flex: 1; }
.side-link-count { font-size: 11px; color: var(--side-ink-3); font-variant-numeric: tabular-nums; }
.side-projs-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.side-projs-section--collapsed { flex: 0 0 auto; }
.side-projs-section--collapsed::after { display: none; }
.side-proj-search-wrap { position: relative; padding: 4px 8px 2px; flex-shrink: 0; }
.side-proj-search { width: 100%; box-sizing: border-box; background: var(--side-bg-2); border: none; border-radius: 5px; padding: 5px 24px 5px 8px; font-size: 12px; color: var(--side-ink); outline: none; font-family: inherit; direction: rtl; }
.side-proj-search::placeholder { color: var(--side-ink-3); }
.side-proj-search-clear { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--side-ink-3); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.side-proj-search-clear:hover { color: var(--side-ink); }
.side-projs-section { position: relative; }
.side-projs-section::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60px; pointer-events: none; background: linear-gradient(to top, var(--side-bg), transparent); }
.side-projects { padding: 0 8px 60px; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--side-bg-2) var(--side-bg); }
.side-projects::-webkit-scrollbar { width: 4px; }
.side-projects::-webkit-scrollbar-track { background: var(--side-bg); }
.side-projects::-webkit-scrollbar-thumb { background: var(--side-bg-2); border-radius: 2px; }
.side-project { display: flex; align-items: center; gap: 9px; padding: 4px 8px; border-radius: 5px; color: var(--side-ink-2); font-size: 12.5px; cursor: pointer; margin-bottom: 1px; border: none; background: none; width: 100%; text-align: right; }
.side-project:hover { background: var(--side-bg-2); color: var(--side-ink); }
.side-project.active { background: var(--side-bg-2); color: var(--side-ink); }
.side-project-num { font-family: var(--font-mono); font-size: 12px; color: var(--side-ink-2); }
.side-project-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.side-project-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-project-chevron { display: inline-flex; align-items: center; justify-content: center; color: var(--side-ink-3); flex-shrink: 0; padding: 3px 4px; margin-inline-start: 2px; border-radius: 3px; cursor: pointer; }
.side-project-chevron:hover { background: rgba(255,255,255,0.08); color: var(--side-ink); }
.side-project-dot--blank { background: transparent; position: relative; }
.side-project-dot--blank::before, .side-project-dot--blank::after { content: ''; position: absolute; left: 0; right: 0; height: 2.5px; background: var(--side-ink-2); border-radius: 1px; }
.side-project-dot--blank::before { top: 0.5px; }
.side-project-dot--blank::after  { bottom: 0.5px; }
.side-project-childcount { font-family: var(--font-mono); font-size: 10.5px; color: var(--side-ink-3); background: var(--side-bg-2); padding: 1px 6px; border-radius: 8px; flex-shrink: 0; line-height: 1.4; }
.side-project--parent { font-weight: 500; }
.side-project--parent .side-project-num { color: var(--side-ink); }
.side-project--child { padding-inline-start: 26px; font-size: 11.5px; }
.side-project--child .side-project-num { font-size: 11px; }
.side-foot { margin-top: auto; padding: 10px 12px; border-top: 1px solid var(--side-border); display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.side-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.side-foot-info { flex: 1; line-height: 1.2; }
.side-foot-name { font-size: 12px; color: var(--side-ink); font-weight: 500; }
.side-foot-role { font-size: 10.5px; color: var(--side-ink-3); }
.side-foot-icon { color: var(--side-ink-3); cursor: pointer; padding: 4px; border-radius: 4px; background: none; border: none; }
.side-foot-icon:hover { background: var(--side-bg-2); color: var(--side-ink); }

/* Main */
.main { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }

.topbar { display: flex; align-items: center; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--bg); gap: 10px; flex-shrink: 0; }
.topbar-title { font-size: 14px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.topbar-crumb { color: var(--ink-3); font-weight: 400; }
.topbar-crumb-btn { background: none; border: none; padding: 0; color: var(--ink-3); font-weight: 400; font-size: 14px; font-family: inherit; cursor: pointer; }
.topbar-crumb-btn:hover { color: var(--accent); text-decoration: underline; }
.topbar-crumb-sep { color: var(--ink-4); margin: 0 2px; }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }

.filters { position: relative; display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--bg); flex-shrink: 0; }
.filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; font-size: 12px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.filter-chip:hover { background: var(--bg-2); border-color: var(--border-2); }
.filter-chip.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; font-size: 12.5px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--bg-2); border-color: var(--border-2); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn.danger { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.btn.danger:hover { background: #FEE2E2; border-color: #FCA5A5; }
.btn.danger:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.icon { padding: 5px 6px; }
.btn-kbd { font-family: var(--font-mono); font-size: 10px; color: var(--ink-4); background: var(--bg-2); padding: 1px 4px; border-radius: 3px; margin-inline-start: 2px; }
.btn-danger { color: var(--accent); border-color: var(--border); background: transparent; }
.btn-danger:hover { background: #FBEDE9; border-color: #E9C5BD; }

/* ==== Gantt (member rows × project subrows) ==== */
/* Wrap = vertical scroll only. Horizontal scroll lives inside each card + head row.
   The wrap bg shows BETWEEN cards as a uniform "behind cards" backdrop. */
.gantt-wrap { flex: 1; overflow-y: auto; overflow-x: hidden; background: var(--bg-3); }
.gantt2 { padding: 12px 24px 16px; }

/* Each card has its own horizontal scroll. Card's right edge is INSIDE the viewport,
   so border-radius on the card actually shows. */
.gantt-card { margin-bottom: 10px; border-radius: 10px; overflow: clip; border: 1px solid var(--border-2); box-shadow: var(--shadow-1); background: var(--bg-2); }
.g2-card-scroll { overflow-x: auto; overflow-y: visible; scrollbar-width: none; }
.g2-card-scroll::-webkit-scrollbar { display: none; }
/* Sticky cells stick to the card-scroll's inline-start edge (= card right edge in RTL). */
.gantt-card .g2-member-cell { border-inline-start: none; inset-inline-start: 0; }
.gantt-card .g2-project-cell { border-inline-start: none; inset-inline-start: 0; }
.gantt-card .g2-expired-toggle-cell { border-inline-start: none; inset-inline-start: 0; }
.gantt-card .g2-section-label-cell { inset-inline-start: 0; }
.g2-row { display: grid; grid-template-columns: 340px repeat(var(--week-count, 15), 124px); min-width: max-content; }
.g2-head-row { position: sticky; top: 0; z-index: 20; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 10px; overflow: clip; margin-bottom: 10px; box-shadow: var(--shadow-1); }
.g2-head-scroll { overflow-x: auto; overflow-y: visible; scrollbar-width: none; }
.g2-head-scroll::-webkit-scrollbar { display: none; }
.g2-head-corner { padding: 8px 14px; border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; gap: 4px; position: sticky; inset-inline-start: 0; background: var(--bg-2); z-index: 21; }
.g2-year-nav { display: flex; gap: 4px; align-items: center; }
.g2-year-btn { font-size: 11.5px; font-weight: 600; padding: 2px 10px; border-radius: 10px; border: 1px solid var(--border-2); background: transparent; cursor: pointer; color: var(--ink-3); transition: all 0.12s; letter-spacing: 0.01em; }
.g2-year-btn:hover { background: var(--bg-3); color: var(--ink); }
.g2-year-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.g2-corner-sub { font-size: 10px; color: var(--ink-4); font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
/* Centered on the page (same line as the filter bar) to de-crowd the top-end corner */
.gantt-nav-btns { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 4px; align-items: center; }
.gantt-nav-btn { width: 44px; height: 28px; border-radius: 6px; border: 1px solid var(--border-2); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ink-3); transition: background 0.12s, color 0.12s; padding: 0; }
.gantt-nav-btn:hover { background: var(--bg-2); color: var(--ink); }
.g2-head-cell.past { color: var(--ink-4); background: var(--bg-2); }
.g2-member-cell, .g2-project-cell { position: sticky; inset-inline-start: 0; z-index: 5; box-shadow: 1px 0 0 var(--border); }
.g2-member-cell { background: var(--bg-2); }
.g2-project-cell { background: var(--bg); }
.g2-member-row:hover .g2-member-cell,
.g2-member-row:hover .g2-member-week { background: var(--bg-3); }
.g2-project-row:hover,
.g2-project-row:hover .g2-project-cell,
.g2-project-row:hover .g2-cell { background: var(--bg-2); }
.g2-head-cell { padding: 8px 10px; border-inline-start: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; min-height: 56px; position: relative; background: var(--bg-2); }
.g2-head-cell.future { color: var(--ink-3); }
.g2-head-cell.current { background: #F4ECDB; color: var(--ink); }
.g2-head-cell.current::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.g2-head-week { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.g2-head-range { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); margin-top: 1px; }
.g2-head-now-tag { position: absolute; top: 6px; left: 8px; font-size: 9.5px; font-weight: 700; color: var(--accent); background: var(--bg); padding: 1px 5px; border-radius: 3px; letter-spacing: 0.02em; }
.g2-next-year-cell { padding: 0; display: flex; align-items: center; justify-content: center; min-width: 64px; background: var(--bg-2); border-inline-start: 1px solid var(--border); }
.g2-next-year-btn { background: transparent; border: none; cursor: pointer; padding: 8px 12px; color: var(--ink-3); border-radius: 4px; transition: all 0.12s; display: flex; align-items: center; justify-content: center; }
.g2-next-year-btn:hover { background: var(--bg-3); color: var(--accent); }

/* Member band */
.g2-member-row { background: var(--bg-2); border-bottom: 1px solid var(--border-2); cursor: pointer; transition: background 0.12s; }
.g2-member-row:hover { background: var(--bg-3); }
.g2-member-cell { display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-inline-start: 1px solid var(--border); }
.g2-member-avatar { width: 26px; height: 26px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
.g2-member-info { flex: 1; min-width: 0; }
.g2-member-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.g2-member-title { font-size: 13px; font-weight: 400; color: var(--ink-3); margin-inline-end: 4px; }
.g2-member-role { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.g2-member-managed { font-size: 12px; color: var(--ink-4); margin-top: 1px; }
/* Summary chips shown in member week cells when collapsed */
.g2-member-week { border-inline-start: 1px solid var(--border); display: flex; align-items: center; gap: 4px; padding: 6px 8px; flex-wrap: wrap; min-height: 44px; background: var(--bg-2); }
.g2-member-week.current { background: #EFE4CB; }
.g2-member-week.past-strip { background: var(--bg-2); border-inline-start-color: var(--border); }
.g2-past-strip-label { font-size: 10.5px; color: var(--ink-5); white-space: nowrap; font-weight: 400; }
.g2-week-count { font-size: 10.5px; font-weight: 400; color: var(--ink-5); white-space: nowrap; }
.g2-summary-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 18px; padding: 0 6px; border-radius: 3px; font-size: 10.5px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.g2-summary-chip.high   { background: var(--pr-high); }
.g2-summary-chip.medium { background: var(--pr-med); }
.g2-summary-chip.low    { background: var(--pr-low); }
.g2-summary-chip.watch  { background: var(--pr-watch-bg); color: #2F5C42; border: 1.5px solid #4F8A6B; }
.g2-summary-chip.hold   { background: var(--pr-hold-bg);  color: #5C5750; border: 1.5px solid #706962; }

/* Project subrow */
.g2-project-row { background: var(--surface); border-bottom: 1px solid var(--border); }
.g2-project-row .g2-cell { background: var(--surface); }
.g2-project-row .g2-cell.current { background: #FBF7EE; }
.g2-project-row--managed { background: var(--bg); }
.g2-project-row--managed .g2-cell { background: var(--bg); }
.g2-project-row--managed .g2-cell.current { background: #EFE4CB; }
.g2-project-cell { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-inline-start: 1px solid var(--border); cursor: pointer; transition: background 0.12s; min-height: 44px; position: sticky; inset-inline-start: 0; z-index: 5; box-shadow: 1px 0 0 var(--border); background: inherit; }
.g2-project-cell:hover { background: var(--bg-2) !important; }
.g2-project-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.g2-project-num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); flex-shrink: 0; font-weight: 600; }
.g2-project-name { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.g2-project-staff-name { flex-shrink: 0; margin-inline-start: auto; font-size: 11px; font-weight: 600; opacity: 0.85; }

/* Section label rows (פרויקטים שלי / פרויקטים בניהולי) — matched to project-row bg so they flow with the project list, not a separator strip. */
.g2-section-label-row { background: var(--surface); }
.g2-section-label-cell { position: sticky; inset-inline-start: 0; z-index: 5; background: var(--surface); display: flex; align-items: center; padding: 4px 14px 4px 10px; font-size: 10.5px; font-weight: 600; color: var(--ink-4); letter-spacing: 0.04em; text-transform: uppercase; }
.g2-section-label-count { margin-inline-start: 8px; }
.g2-section-label-week { background: var(--surface); min-height: 24px; }
.g2-section-label-week.current { background: #FBF7EE; }
.g2-section-label-row--managed { background: var(--bg); }
.g2-section-label-row--managed .g2-section-label-cell { background: var(--bg); }
.g2-section-label-row--managed .g2-section-label-week { background: var(--bg); }
.g2-section-label-row--managed .g2-section-label-week.current { background: #EFE4CB; }

.g2-cell { border-inline-start: 1px solid var(--border); padding: 5px 6px; min-height: 44px; position: relative; transition: background 0.12s; background: var(--bg); }
.g2-cell.current { background: #FBF7EE; }
.g2-cell.drag-over { background: #F0E9DA; box-shadow: inset 0 0 0 2px var(--accent); }
.g2-tasks { display: flex; flex-direction: column; gap: 8px; }
.g2-task-placeholder { font-size: 12.5px; min-height: 22px; padding: 5px 8px; border: 1px solid transparent; pointer-events: none; }
.g2-task-placeholder::before { content: '\200B'; }
.g2-task-placeholder + .g2-task { margin-top: 4px; }

.g2-task { display: flex; align-items: center; gap: 5px; padding: 5px 8px; font-size: 12.5px; font-weight: 500; border-radius: 4px; cursor: grab; user-select: none; border: 1px solid transparent; transition: transform 0.08s, box-shadow 0.12s, opacity 0.12s; position: relative; min-height: 22px; }
.g2-task:hover { box-shadow: var(--shadow-1); transform: translateY(-1px); }
.g2-task.g2-task-flash { animation: g2-task-flash 1.6s ease-out; outline: 2px solid var(--accent); outline-offset: 1px; }
@keyframes g2-task-flash { 0%,100% { box-shadow: 0 0 0 0 rgba(202,80,53,0); } 30% { box-shadow: 0 0 0 6px rgba(202,80,53,0.35); } }
.g2-task:active { cursor: grabbing; }
.g2-task.dragging { opacity: 0.4; }
.g2-task.high   { background: var(--pr-high);  color: #FFF1ED; }
.g2-task.medium { background: var(--pr-med);   color: #FFF8EC; }
.g2-task.low    { background: var(--pr-low);   color: #EEF7F1; }
.g2-task.watch  { background: var(--pr-watch-bg); color: #2F5C42; border-color: #4F8A6B; }
.g2-task.hold   { background: var(--pr-hold-bg);  color: #5C5750; border-color: #706962; }
.g2-task.done   { opacity: 0.55; text-decoration: line-through; }
.g2-task.span   { font-weight: 500; z-index: 2; }
.g2-project-row--managed .g2-task { opacity: 0.5; font-weight: 400; }
.g2-project-row--managed .g2-task:hover { opacity: 0.75; transform: none; }
/* Span chip relies on its own z-index:2 (line above) to render over neighbor
   cell backgrounds. Don't elevate the cell — when two adjacent cells both
   contain spans, equal cell z-index lets the later one's background occlude
   the earlier span's overflow. */
.g2-task-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
/* Multi-week span: keep the label visible (pinned past the 340px frozen name
   column) when the bar's start week scrolls off-screen. flex:0 1 auto shrinks
   the text box to content so sticky has room to slide within the bar. */
.g2-task.span .g2-task-text { position: sticky; inset-inline-start: 348px; flex: 0 1 auto; }
.g2-task-dur { font-size: 9.5px; font-weight: 600; background: rgba(255,255,255,0.25); padding: 1px 4px; border-radius: 2px; font-family: var(--font-mono); flex-shrink: 0; }
.g2-task.watch .g2-task-dur, .g2-task.hold .g2-task-dur { background: rgba(0,0,0,0.06); }

.g2-add { position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 4px; border: 1px dashed var(--border-2); background: transparent; color: var(--ink-4); display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s, border-color 0.12s; }
.g2-cell:hover .g2-add { opacity: 1; }
.g2-add:hover { background: var(--surface); color: var(--ink); border-color: var(--ink-3); border-style: solid; }
.g2-add-corner { align-self: center; width: 16px; height: 16px; border-radius: 3px; border: 1px solid transparent; background: transparent; color: var(--ink-5); display: grid; place-items: center; cursor: pointer; opacity: 0; padding: 0; margin-top: -5px; position: relative; z-index: 2; transition: opacity 0.12s, background 0.12s; flex-shrink: 0; }
.g2-cell:hover .g2-add-corner { opacity: 1; }
.g2-add-corner:hover { background: var(--surface); border-color: var(--border-2); color: var(--ink-2); }

/* Detail panel */
.panel-overlay { position: fixed; inset: 0; background: rgba(31, 27, 22, 0.18); z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.18s; }
.panel-overlay.open { opacity: 1; pointer-events: auto; }
.panel { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: 460px; max-width: 90vw; background: var(--surface); box-shadow: var(--shadow-3); z-index: 51; transform: translateX(-100%); transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column; }
.panel.open { transform: translateX(0); }
.panel-head { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 10px; }
.panel-head-info { flex: 1; min-width: 0; }
.panel-header { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
.panel-header .panel-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.panel-id { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); margin-bottom: 4px; }
.panel-title { font-size: 17px; font-weight: 600; color: var(--ink); line-height: 1.3; border: 1px solid transparent; padding: 2px 4px; margin: -2px -4px; border-radius: 4px; background: transparent; width: 100%; font-family: inherit; outline: none; resize: none; }
.panel-title:hover { background: var(--bg-2); }
.panel-title:focus { background: var(--surface); border-color: var(--border-2); box-shadow: 0 0 0 3px rgba(196,69,54,0.08); }
.panel-close { background: none; border: none; color: var(--ink-3); width: 28px; height: 28px; border-radius: 5px; cursor: pointer; display: grid; place-items: center; }
.panel-close:hover { background: var(--bg-2); color: var(--ink); }
.panel-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.panel-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 8px 0; font-size: 12.5px; align-items: center; }
.panel-label { color: var(--ink-3); font-size: 12px; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.panel-input { width: 100%; border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; color: var(--ink); background: var(--surface); font-family: inherit; outline: none; direction: rtl; margin-bottom: 12px; box-sizing: border-box; }
.panel-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,69,54,0.08); }
input[type="date"] { -webkit-appearance: none; appearance: none; font-family: inherit; }
.panel-value input[type="date"] { width: 100%; border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; color: var(--ink); background: var(--surface); font-family: inherit; outline: none; direction: rtl; box-sizing: border-box; }
.panel-value input[type="date"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,69,54,0.08); }
.panel-select { width: 100%; border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 7px 10px; font-size: 13px; color: var(--ink); background: var(--surface); font-family: inherit; outline: none; direction: rtl; cursor: pointer; margin-bottom: 12px; box-sizing: border-box; appearance: none; }
.panel-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,69,54,0.08); }
.panel-footer { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.panel-value select, .panel-value input { border: 1px solid transparent; padding: 4px 8px; border-radius: 4px; background: transparent; color: var(--ink); font-size: 12.5px; width: 100%; font-family: inherit; }
.panel-value select:hover, .panel-value input:hover { background: var(--bg-2); }
.panel-value select:focus, .panel-value input:focus { background: var(--surface); border-color: var(--border-2); outline: none; box-shadow: 0 0 0 3px rgba(196,69,54,0.08); }
.panel-section-title { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin: 16px 0 8px; }
.panel-week-range { font-size: 11.5px; color: var(--accent); font-weight: 600; margin-top: 5px; letter-spacing: 0.02em; }
.panel-duration-row { display: flex; align-items: center; gap: 8px; }
.panel-duration-val { font-size: 13px; font-weight: 500; color: var(--ink); min-width: 60px; }
.panel-dur-btn { width: 24px; height: 24px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-2); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: background 0.1s; }
.panel-dur-btn:hover { background: var(--bg-3); }
.panel-desc { width: 100%; min-height: 80px; padding: 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-2); resize: vertical; font-size: 12.5px; color: var(--ink); outline: none; font-family: inherit; }
.panel-desc:focus { border-color: var(--border-strong); box-shadow: 0 0 0 3px rgba(196,69,54,0.08); }
.panel-foot { border-top: 1px solid var(--border); padding: 12px 20px; display: flex; align-items: center; gap: 8px; }
.panel-foot .grow { flex: 1; }
.panel-done-row { display: flex; align-items: center; gap: 10px; padding: 14px 0 4px; border-top: 1px solid var(--border); margin-top: 8px; cursor: pointer; }
.panel-done-check { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; accent-color: var(--accent); }
.panel-done-label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.panel-done-label.is-done { color: var(--ink-2); font-weight: 500; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; }
.activity { display: flex; gap: 8px; padding: 8px 0; font-size: 12px; }
.activity-avatar { width: 22px; height: 22px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 600; flex-shrink: 0; }
.activity-text { color: var(--ink-2); line-height: 1.4; }
.activity-time { color: var(--ink-4); font-size: 11px; margin-top: 1px; }

/* Kanban */
.kanban { flex: 1; overflow: auto; padding: 16px; display: flex; gap: 12px; background: var(--bg); }
.kan-col { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--bg-2); border-radius: 8px; padding: 10px; max-height: 100%; }
.kan-col-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.kan-col-count { color: var(--ink-4); font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; }
.kan-cards { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1; min-height: 60px; padding: 2px; }
.kan-card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 9px 10px 9px 14px; font-size: 12.5px; color: var(--ink); cursor: grab; transition: box-shadow 0.12s, border-color 0.12s; position: relative; }
.kan-card:hover { box-shadow: var(--shadow-2); border-color: var(--border-2); }
.kan-card.dragging { opacity: 0.4; }
.kan-card::before { content: ''; position: absolute; inset-inline-start: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; }
.kan-card.high::before   { background: var(--pr-high); }
.kan-card.medium::before { background: var(--pr-med); }
.kan-card.low::before    { background: var(--pr-low); }
.kan-card.watch::before  { background: var(--pr-watch); }
.kan-card.hold::before   { background: var(--pr-hold); }
.kan-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 7px; color: var(--ink-3); font-size: 11px; }
.kan-card-proj { display: inline-flex; align-items: center; gap: 4px; }
.kan-col.drag-over { background: var(--bg-3); }

/* Calendar */
.calendar { flex: 1; overflow: auto; padding: 16px 20px; background: var(--bg); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.cal-head { background: var(--bg-2); padding: 8px 10px; font-size: 11px; color: var(--ink-3); font-weight: 600; text-align: center; }
.cal-day { background: var(--surface); min-height: 120px; min-width: 0; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.cal-day.other { background: var(--bg-2); color: var(--ink-4); }
.cal-day.today { background: #FBF7EE; }
.cal-day-num { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 500; }
.cal-day.today .cal-day-num { color: var(--accent); font-weight: 700; }
.cal-event { font-size: 12px; line-height: 1.35; padding: 5px 8px; border-radius: 4px; color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
.cal-event-proj { font-weight: 700; }

/* Project view */
.proj-view { flex: 1; overflow: auto; padding: 24px 32px; background: var(--bg); }

/* Parent project view (e.g. #300 / #400) */
.parent-pill { display: inline-flex; align-items: center; padding: 3px 10px; background: var(--bg-2); color: var(--ink-3); font-size: 11.5px; font-weight: 500; border-radius: 12px; align-self: flex-start; }
.parent-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 28px; }
.parent-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; }
.parent-stat-label { font-size: 11.5px; color: var(--ink-3); font-weight: 500; margin-bottom: 6px; }
.parent-stat-val { font-size: 19px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.parent-stat-val.over { color: #dc2626; }
.parent-stat-val.warn { color: #d97706; }
.parent-stat-val.paid { color: #16a34a; }
.parent-stat-pct { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.parent-children { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 4px 0; }
.parent-children-header { font-size: 11px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.04em; padding: 12px 16px 8px; border-bottom: 1px solid var(--border); }
.parent-children-empty { padding: 20px 16px; color: var(--ink-3); font-size: 13px; text-align: center; }
.parent-child-row { display: grid; grid-template-columns: 60px 1fr 200px 100px; gap: 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; }
.parent-child-row:last-child { border-bottom: none; }
.parent-child-row:hover { background: var(--bg-2); }
.parent-child-name { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parent-child-lead { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parent-child-hours { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; text-align: end; }
.parent-child-hours-unit { font-size: 11px; color: var(--ink-3); font-weight: 400; margin-inline-start: 2px; }

.parent-progress { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; margin-bottom: 28px; }
.parent-progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.parent-progress-label { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.parent-progress-val { font-size: 14px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.parent-progress-val.warn { color: #d97706; }
.parent-progress-val.over { color: #dc2626; }
.parent-progress-bar { height: 12px; background: var(--bg-2); border-radius: 999px; overflow: hidden; position: relative; }
.parent-progress-fill { height: 100%; background: #16a34a; border-radius: 999px; transition: width 0.3s; }
.parent-progress-fill.warn { background: #d97706; }
.parent-progress-fill.over { background: #dc2626; }
.parent-progress-bar.striped { background: repeating-linear-gradient(45deg, #fee2e2 0 8px, #fff 8px 16px); }
.parent-progress-bar.striped .parent-progress-fill { width: 100% !important; background: #dc2626; }

.proj-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.pv-parent-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 5px 11px 5px 13px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; color: var(--ink-3); cursor: pointer; font-size: 12px; font-weight: 500; transition: background 0.12s, color 0.12s; user-select: none; }
.pv-parent-link:hover { background: var(--bg-3, #e8e4de); color: var(--ink); }
.pv-parent-link svg { transform: scaleX(-1); }
.pv-parent-link-num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); padding: 0 4px; }
.pv-parent-link-name { color: var(--ink-2); font-weight: 600; }
.pv-parent-link:hover .pv-parent-link-num,
.pv-parent-link:hover .pv-parent-link-name { color: var(--ink); }
.proj-hero-num-badge { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--ink); background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: 6px 14px; flex-shrink: 0; letter-spacing: -0.02em; }
.proj-hero-num-badge.editable-hero { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.proj-hero-num-badge.editable-hero:hover { background: var(--bg-3); border-color: var(--accent); }
.proj-hero-name { font-size: 22px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj-hero-name.editable-hero { cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s; }
.proj-hero-name.editable-hero:hover { background: var(--bg-2); }
.proj-hero-num-edit { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--ink); background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius-lg); padding: 4px 12px; flex-shrink: 0; letter-spacing: -0.02em; width: 100px; outline: none; }
.proj-hero-name-edit { font-size: 22px; font-weight: 600; color: var(--ink); background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius-sm); padding: 2px 6px; width: 100%; outline: none; font-family: var(--font-sans); }
.proj-hero-meta { display: flex; gap: 16px; margin-top: 6px; color: var(--ink-3); font-size: 12.5px; flex-wrap: wrap; }
.proj-people-row { display: flex; gap: 24px; margin-bottom: 20px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); flex-wrap: wrap; }
.proj-people-item { display: flex; flex-direction: column; gap: 5px; min-width: 160px; }
.proj-people-label { font-size: 10.5px; font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.05em; }
.proj-people-select { font-size: 13px; font-family: var(--font-sans); padding: 4px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-2); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.proj-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px; }
.stat-card-label { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.stat-card-value { font-size: 24px; font-weight: 600; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-card-sub { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.stat-bar { margin-top: 8px; height: 4px; background: var(--bg-2); border-radius: 2px; overflow: hidden; }
.stat-bar-fill { height: 100%; background: var(--ink); }
.proj-section-title { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin: 0 0 12px; }
.task-list { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.task-row { display: grid; grid-template-columns: 14px 1fr 140px 90px 24px; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--border); align-items: center; font-size: 12.5px; cursor: pointer; }
.task-row:last-child { border-bottom: none; }
.task-row:hover { background: var(--bg-2); }
.task-row-status { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid var(--ink-4); display: grid; place-items: center; }
.task-row-status.done { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.task-row-title { color: var(--ink); }
.task-row.done .task-row-title { text-decoration: line-through; color: var(--ink-3); }

/* My Tasks view */
.mytasks-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.mytasks-controls { display: flex; gap: 12px; align-items: center; }
.mytasks-toggle { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); cursor: pointer; user-select: none; }
.mytasks-toggle input { cursor: pointer; }
.mytasks-section-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--ink-2); display: flex; align-items: baseline; gap: 8px; }
.mytasks-section-count { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.task-row.mytasks-row { grid-template-columns: 1fr 1.5fr 72px 110px 90px; }
.task-row.mytasks-row:has(.mytasks-assignee) { grid-template-columns: 1fr 1.4fr 1.4fr 72px 110px 90px; }
.task-row.mytasks-row.expired .task-row-title { color: var(--ink-3); text-decoration: line-through; }
.mytasks-project { display: flex; align-items: center; gap: 6px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mytasks-assignee { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; overflow: hidden; }
.mytasks-week { display: flex; align-items: center; }
.mytasks-week .mt-wk { font-size: 11px; font-weight: 500; border-radius: 10px; padding: 1px 8px; white-space: nowrap; color: var(--ink-3); background: var(--bg-3); }
.mytasks-week .mt-wk.dragged { color: #b45309; background: #FBEAD2; }
.mytasks-deadline { color: var(--ink-3); font-size: 12px; font-variant-numeric: tabular-nums; }

/* Project Select dropdown */
.ps-wrap { position: relative; width: 100%; }
.ps-trigger { width: 100%; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--ink); font-size: 12.5px; font-family: inherit; cursor: pointer; text-align: start; overflow: hidden; }
.ps-trigger:hover { background: var(--bg-2); }
.ps-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); background: var(--bg-3); padding: 1px 4px; border-radius: 3px; flex-shrink: 0; }
.ps-dropdown { position: absolute; top: calc(100% + 4px); right: 0; left: 0; min-width: 280px; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-3); z-index: 200; overflow: hidden; }
.ps-controls { padding: 8px 8px 6px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.ps-search { width: 100%; padding: 6px 10px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; outline: none; background: var(--bg-2); color: var(--ink); }
.ps-search:focus { border-color: var(--accent); background: var(--surface); }
.ps-sort-row { display: flex; align-items: center; gap: 6px; }
.ps-sort-label { font-size: 11px; color: var(--ink-4); font-weight: 500; }
.ps-sort-btn { padding: 2px 10px; border-radius: 4px; border: 1px solid var(--border); background: none; font-size: 11.5px; font-family: inherit; cursor: pointer; color: var(--ink-3); }
.ps-sort-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ps-list { max-height: 240px; overflow-y: auto; }
.ps-item { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: none; background: none; font-size: 12.5px; font-family: inherit; cursor: pointer; text-align: start; color: var(--ink); }
.ps-item:hover { background: var(--bg-2); }
.ps-item.selected { background: var(--bg-3); }
.ps-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-empty { padding: 14px; text-align: center; color: var(--ink-4); font-size: 12.5px; }

/* Project View — new pv- layout */
/* Stage progress — segmented bar */
.pv-segs-wrap { display: flex; flex-direction: column; gap: 9px; margin-bottom: 20px; padding: 14px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pv-segs-bar { display: flex; gap: 4px; }
.pv-seg { flex: 1; height: 22px; border-radius: 5px; background: var(--bg-3); transition: background 0.2s; display: flex; align-items: center; justify-content: center; min-width: 0; position: relative; }
/* Stage tooltip is rendered via a body portal (see ContractCard segTipNode) so it can
   never be clipped by an overflow:hidden ancestor. The CSS pseudo-tooltip was replaced
   because z-index cannot escape a clipping ancestor — only a fixed-position body portal can. */
.pv-seg-tip-portal { background: #1F1B16; color: #FAF7F2; padding: 6px 11px; border-radius: 7px; font-size: 11.5px; font-weight: 500; line-height: 1.4; white-space: normal; max-width: 240px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.28); }
.pv-seg.done   { background: var(--ink-2); }
.pv-seg.active { background: var(--accent); }
.pv-seg-num { font-size: 10px; font-weight: 700; line-height: 1; color: var(--ink-4); }
.pv-seg.done .pv-seg-num   { color: rgba(255,255,255,0.85); }
.pv-seg.active .pv-seg-num { color: white; }
.pv-segs-info { display: flex; align-items: center; gap: 10px; }
.pv-segs-label { font-size: 12px; font-weight: 700; color: var(--ink-3); white-space: nowrap; flex-shrink: 0; }
.pv-segs-stage-name { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.pv-segs-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.pv-segs-stack .pv-segs-wrap { margin-bottom: 0; padding: 10px 16px; gap: 7px; }
.pv-segs-stack .pv-segs-wrap.collapsed { padding: 7px 16px; gap: 0; }
.pv-segs-stack .pv-segs-wrap.collapsed .pv-seg { height: 6px; border-radius: 3px; }
.pv-segs-name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pv-segs-contract-name { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.pv-segs-collapse-btn { background: none; border: none; padding: 0 4px; font-size: 12px; color: var(--ink-4); cursor: pointer; line-height: 1; }
.pv-segs-collapse-btn:hover { color: var(--ink-2); }
.pv-segs-placeholder { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; padding: 14px 20px; background: var(--bg-2); border: 1px dashed var(--border-2); border-radius: var(--radius-lg); opacity: 0.6; }
.pv-segs-placeholder-bar { height: 10px; border-radius: 5px; background: var(--border-2); width: 100%; }
.pv-segs-placeholder-label { font-size: 11.5px; color: var(--ink-4); text-align: center; }

/* Active segment partial fill — driven by --stage-progress on the .seg element.
   Fills from the "done" side (right in RTL) toward the "future" side as progressPct grows.
   The faded color is pre-mixed (22% #C44536 + 78% #FAF7F2 = #EED0C9) so the gradient
   doesn't depend on color-mix() — works on Chrome <111, Safari <16.2, older Firefox. */
.pv-seg.active {
  background: linear-gradient(
    to left,
    var(--accent) var(--stage-progress, 100%),
    #EED0C9 var(--stage-progress, 100%)
  );
}

/* Embedded segmented bar inside ContractCard (re-uses .pv-segs-wrap) */
.pv-contract-card .pv-segs-wrap.in-card {
  margin: 0;
  padding: 12px 13px 10px;
  gap: 6px;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}
/* Collapsed contract: slim bar, no border-bottom, hide labels/info */
.pv-contract-card:not(.is-open) .pv-segs-wrap.in-card {
  padding: 8px 13px 10px;
  gap: 0;
  border-bottom: 0;
}
.pv-contract-card:not(.is-open) .pv-segs-wrap.in-card .pv-seg { height: 10px; border-radius: 3px; }
.pv-contract-card:not(.is-open) .pv-segs-wrap.in-card .pv-seg-num { display: none; }
.pv-contract-card:not(.is-open) .pv-segs-wrap.in-card .pv-segs-info { display: none; }

/* Contract drag handle (replaces ▲▼ reorder buttons) */
.pv-contract-drag-handle {
  width: 18px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-5);
  cursor: grab; font-size: 14px; line-height: 1;
  user-select: none; flex-shrink: 0;
  background: none; border: none; padding: 0;
}
.pv-contract-drag-handle:hover { color: var(--ink-3); }
.pv-contract-drag-handle:active { cursor: grabbing; }
.pv-contract-card.dragging { opacity: 0.4; }
/* inset (not outset) so it isn't clipped by the card's contain:paint */
.pv-contract-card.drag-over { box-shadow: inset 0 3px 0 0 var(--accent); }

/* Contract total ("N שלבים · ₪value") — stays in the header at all times (open AND
   collapsed) so the contract summary never moves. No footer strip below. */
.pv-contract-total {
  display: inline-flex; align-items: baseline; gap: 6px;
}
.pv-contract-total-label { font-size: 11px; font-weight: 500; color: var(--ink-4); }
.pv-contract-total-val   { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }


.pv-layout { display: flex; gap: 20px; align-items: flex-start; }
.pv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.pv-sidebar { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }

.pv-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.pv-section-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; border-bottom: 1px solid var(--border); }
.pv-section-title { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.pv-section-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600; background: var(--bg-3); color: var(--ink-3); margin-inline-start: 2px; }
.pv-section-badge.current { background: var(--accent); color: #fff; }
.pv-week-label { padding: 8px 16px 4px; font-size: 11px; font-weight: 600; color: var(--ink-3); display: flex; align-items: center; gap: 6px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.pv-week-past, .pv-week-future { font-size: 10px; padding: 1px 5px; border-radius: 4px; font-weight: 500; }
.pv-week-past { background: var(--bg-3); color: var(--ink-4); }
.pv-week-future { background: var(--pr-med-bg); color: var(--pr-med); }
.pv-empty { padding: 16px; color: var(--ink-4); font-size: 12.5px; }
.pv-person-row { display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px; }
.pv-person-name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.pv-person-count { font-size: 11.5px; color: var(--ink-4); margin-inline-start: 4px; }

.pv-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 16px; }
.pv-card-title { font-size: 10.5px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }

.pv-team-list { display: flex; flex-direction: column; gap: 8px; }
.pv-team-row { display: flex; align-items: center; gap: 10px; }
.pv-team-name { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.2; }
.pv-team-meta { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.pv-team-hours { font-size: 11.5px; font-weight: 600; color: var(--ink-3); background: var(--bg-2); padding: 2px 6px; border-radius: 4px; white-space: nowrap; }

.pv-hours-block { display: flex; flex-direction: column; gap: 4px; }
.pv-hours-row { display: flex; justify-content: space-between; align-items: center; }
.pv-hours-label { font-size: 12px; color: var(--ink-3); }
.pv-hours-val { font-size: 13px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-hours-bar-wrap { height: 5px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin: 6px 0 4px; }
.pv-hours-bar { height: 100%; border-radius: 3px; transition: width 0.3s; }
.pv-hours-status { font-size: 11.5px; font-weight: 600; }
.pv-hours-status.ok { color: var(--pr-low); }
.pv-hours-status.over { color: var(--pr-high); }
.pv-hours-pending { display: flex; align-items: center; gap: 6px; color: var(--ink-4); font-size: 12.5px; padding: 4px 0; }
.pv-budget-input-wrap { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pv-budget-input { width: 100%; padding: 5px 8px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: 12.5px; color: var(--ink); background: var(--surface); outline: none; }
.pv-budget-input:focus { border-color: var(--accent); }

.pv-hours-derived { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-4); margin-top: 6px; }
.pv-map-card { padding: 14px 16px 0; overflow: hidden; }
.pv-map-frame { display: block; width: calc(100% + 32px); margin: 10px -16px 0; height: 160px; border: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.pv-map-link { font-size: 11px; color: var(--accent); text-decoration: none; display: flex; align-items: center; gap: 4px; font-weight: 500; }
.pv-map-link:hover { text-decoration: underline; }

.pv-details-grid { display: flex; flex-direction: column; gap: 7px; }
.pv-detail-row { display: flex; align-items: baseline; gap: 8px; }
.pv-detail-label { font-size: 11px; color: var(--ink-4); flex-shrink: 0; min-width: 56px; }
.pv-detail-val { font-size: 13px; color: var(--ink-2); }
.pv-detail-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0 10px; }
.pv-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pv-media-item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; }
.pv-media-item.has  { color: var(--ink-2); }
.pv-media-item.missing { color: var(--ink-5); }
.pv-media-dot { font-size: 10px; }
.pv-media-item.has .pv-media-dot  { color: #4CAF50; }
.pv-media-item.missing .pv-media-dot { color: var(--ink-5); }

.pv-notes-ta { width: 100%; padding: 8px 10px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink); background: var(--surface); outline: none; resize: vertical; font-family: inherit; line-height: 1.5; }
.pv-notes-ta:focus { border-color: var(--accent); }
.pv-notes-text { font-size: 13px; color: var(--ink-2); line-height: 1.6; white-space: pre-wrap; }
.pv-edit-btn { font-size: 11px; font-weight: 500; color: var(--accent); background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.pv-edit-btn:hover { text-decoration: underline; }

/* Project info grid (view mode) */
.pv-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.pv-info-cell { display: flex; flex-direction: column; gap: 2px; }
.pv-info-label { font-size: 10.5px; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.pv-info-val { font-size: 13px; color: var(--ink-2); font-weight: 500; }

/* Edit form */
.pv-edit-form { display: flex; flex-direction: column; gap: 10px; }
.pv-edit-row { display: flex; flex-direction: column; gap: 3px; }
.pv-edit-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pv-edit-label { font-size: 11px; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.pv-edit-input { width: 100%; padding: 6px 9px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink); background: var(--surface); outline: none; font-family: inherit; box-sizing: border-box; }
.pv-edit-input:focus { border-color: var(--accent); }
.pv-edit-input::placeholder { color: var(--ink-5); opacity: 0.7; font-weight: 400; }
/* Contract edit form — sectioned redesign (ownership split) */
.pv-edit-sec { font-size: 11px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.04em; margin: 18px 0 10px; display: flex; align-items: center; gap: 10px; }
.pv-edit-sec:first-of-type { margin-top: 4px; }
.pv-edit-sec::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.pv-edit-sec-tag { font-size: 10px; font-weight: 600; color: #7a5c12; background: #FBF1DC; border: 1px solid #E8D6A8; border-radius: 20px; padding: 1px 8px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.pv-lockline { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding: 9px 0; cursor: pointer; border-top: 1px solid var(--border-2); user-select: none; }
.pv-lock-lbl { font-size: 11px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.04em; }
.pv-lock-upd { font-size: 11px; color: var(--ink-5); margin-inline-start: auto; font-weight: 500; }
.pv-lock-car { font-size: 11px; color: var(--ink-4); }
.pv-ro-wrap { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 13px 15px; margin-top: 2px; }
.pv-ro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; }
.pv-ro { display: flex; flex-direction: column; gap: 2px; }
.pv-ro.full { grid-column: 1 / -1; }
.pv-ro-k { font-size: 11.5px; color: var(--ink-4); font-weight: 600; }
.pv-ro-v { font-size: 14px; color: var(--ink-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-ro-v.sub { font-weight: 500; font-size: 13px; color: var(--ink-3); }
.pv-ro-foot { font-size: 11px; color: var(--ink-5); margin-top: 11px; display: flex; align-items: flex-start; gap: 6px; border-top: 1px dashed var(--border-2); padding-top: 9px; line-height: 1.5; }
.pv-edit-danger-zone { display: flex; align-items: center; gap: 6px; padding-inline-start: 10px; border-inline-start: 1px solid var(--border); }
/* Inline click-to-edit details card [bug #7] */
.pv-inline-hint { font-size: 10px; font-weight: 500; color: var(--ink-5); text-transform: none; letter-spacing: 0; }
.pv-saved-flash { font-size: 10px; font-weight: 700; color: #4CAF50; margin-inline-start: 6px; text-transform: none; letter-spacing: 0; animation: pv-saved-fade 1.4s ease-out; }
@keyframes pv-saved-fade { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.pv-info-val.pv-editable { cursor: text; border-radius: var(--radius-sm); padding: 2px 6px; margin: -2px -6px; border: 1px solid transparent; transition: background 0.12s, border-color 0.12s; }
.pv-info-val.pv-editable:hover { background: var(--bg-2); border-color: var(--border); }
.pv-media-toggle { font: inherit; font-size: 11.5px; background: none; border: none; padding: 2px 4px; margin: -2px -4px; border-radius: var(--radius-sm); cursor: default; text-align: start; transition: background 0.12s; }
.pv-media-toggle.editable { cursor: pointer; }
.pv-media-toggle.editable:hover { background: var(--bg-2); }

/* GoDateInput — dd/mm/yyyy text + calendar trigger.
   The hidden native input only exists to invoke the OS date picker (whose result we
   normalize to ISO). Keeps display format consistent across English/Hebrew Mac locales. */
.go-date-wrap { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.go-date-text { padding: 6px 9px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); font-size: 13px; color: var(--ink); background: var(--surface); outline: none; font-family: inherit; box-sizing: border-box; min-width: 110px; }
.go-date-text:focus { border-color: var(--accent); }
.go-date-text::placeholder { color: var(--ink-5); opacity: 0.7; }
.go-date-btn { background: none; border: none; padding: 4px 6px; cursor: pointer; color: var(--ink-4); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
.go-date-btn:hover { color: var(--ink-2); background: var(--bg-2); }
.go-date-hidden { position: absolute; inset-inline-end: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: none; padding: 0; }
.ms-amount-row { display: flex; gap: 8px; align-items: stretch; }
.ms-unit-toggle { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 2px; gap: 2px; flex-shrink: 0; }
.ms-unit-btn { padding: 4px 12px; background: transparent; border: none; border-radius: 4px; font: 600 12px var(--font-sans); color: var(--ink-4); cursor: pointer; transition: background 0.12s, color 0.12s; }
.ms-unit-btn:hover { color: var(--ink-2); }
.ms-unit-btn.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.ms-amount-input { flex: 1; }

/* Media edit checkboxes */
.pv-media-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pv-media-check { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.pv-media-check input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; accent-color: var(--accent); }

/* Task summary card */
/* Task card — inline in ProjectView */
.pv-task-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.pv-task-card-header { display: flex; align-items: baseline; gap: 7px; padding: 12px 13px 10px; border-bottom: 1px solid var(--border); }
.pv-task-card-count { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.pv-task-card-title { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.pv-task-card-body { padding: 4px 0; }
.pv-task-inline-row { display: flex; align-items: center; gap: 6px; padding: 6px 13px; cursor: pointer; }
.pv-task-inline-row:hover { background: var(--bg-2); }
.pv-task-person { font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; flex-shrink: 0; }
.pv-task-inline-sep { font-size: 11px; color: var(--ink-5); flex-shrink: 0; }
.pv-task-inline-title { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-task-history { border-top: 1px solid var(--border); }
.pv-task-history-toggle { display: flex; align-items: center; gap: 7px; width: 100%; padding: 9px 13px; background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink-3); text-align: right; }
.pv-task-history-toggle:hover { background: var(--bg-2); }
.pv-task-history-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; font-weight: 600; background: var(--bg-3); color: var(--ink-4); }
.pv-task-history-body { border-top: 1px solid var(--border); padding: 4px 0; }

/* Team */
.team-grid { flex: 1; overflow: auto; padding: 24px 32px; background: var(--bg); }
.team-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.team-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.team-card:hover { box-shadow: var(--shadow-2); border-color: var(--border-2); }
.team-card-head { display: flex; align-items: center; gap: 12px; }
.team-card-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 600; }
.team-card-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.team-card-role { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.team-card-mgr  { font-size: 11px; color: var(--ink-4); margin-top: 2px; }
.team-card-stats { display: flex; gap: 16px; }
.team-card-stat-label { font-size: 11px; color: var(--ink-4); }
.team-card-stat-value { font-size: 16px; font-weight: 600; color: var(--ink); }
.team-card-auth { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 8px; }
.team-card-auth-email { font-size: 11.5px; color: var(--ink-3); }

.dropdown { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-2); padding: 4px; z-index: 100; min-width: 200px; max-height: 300px; overflow-y: auto; }
.dropdown-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12.5px; color: var(--ink-2); border-radius: 4px; cursor: pointer; }
.dropdown-item:hover { background: var(--bg-2); }
.dropdown-check { width: 14px; height: 14px; flex-shrink: 0; display: grid; place-items: center; }

.toast { position: fixed; bottom: 16px; inset-inline-start: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--bg); padding: 8px 14px; border-radius: 6px; font-size: 12.5px; box-shadow: var(--shadow-3); opacity: 0; transition: opacity 0.18s, transform 0.18s; z-index: 200; pointer-events: none; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.avatar-inline { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 9px; font-weight: 600; flex-shrink: 0; }

body.density-compact .g2-cell { min-height: 36px; }
body.density-compact .g2-task { font-size: 11px; padding: 3px 6px; min-height: 20px; }
body.density-comfy .g2-cell { min-height: 56px; }

/* Projects List */
.proj-list-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.proj-list-header h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.fin-wrap .proj-list-header, .qt-wrap .proj-list-header, .tech-wrap .proj-list-header { padding: 24px 32px 0; margin-bottom: 0; }
.proj-tabs { display: flex; gap: 2px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.proj-tab { background: none; border: none; padding: 8px 16px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.12s, border-color 0.12s; font-family: inherit; }
.proj-tab:hover { color: var(--ink); }
.proj-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.proj-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600; background: var(--bg-3); color: var(--ink-3); margin-inline-start: 6px; }
.proj-tab.active .proj-tab-count { background: var(--accent); color: #fff; }
.proj-table { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; min-width: 1240px; }
.proj-table-head { display: grid; grid-template-columns: 72px 1.6fr 1.1fr 0.95fr 0.65fr 0.9fr 1fr 0.7fr 1.2fr 1.2fr 50px 36px; gap: 0; padding: 9px 16px; background: var(--bg-2); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.proj-table-row { display: grid; grid-template-columns: 72px 1.6fr 1.1fr 0.95fr 0.65fr 0.9fr 1fr 0.7fr 1.2fr 1.2fr 50px 36px; gap: 0; padding: 12px 16px; border-bottom: 1px solid var(--border); align-items: center; font-size: 13px; cursor: pointer; transition: background 0.1s; }
.proj-table-row:last-child { border-bottom: none; }
.proj-table-row:hover { background: var(--bg-2); }
.proj-num-badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 7px; border-radius: 5px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; white-space: nowrap; }
.proj-num-badge--orphan { background: var(--bg-3); color: var(--ink-4); font-weight: 500; }
.proj-num-badge--label { font-size: 9.5px; padding: 3px 6px; letter-spacing: 0.02em; }
.proj-table-name { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.proj-table-num-cell { display: flex; align-items: center; gap: 4px; }
.proj-table-chevron { display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3); padding: 2px; border-radius: 3px; cursor: pointer; }
.proj-table-chevron:hover { background: var(--bg-2); color: var(--ink); }
.proj-table-row--parent { background: var(--bg-2); }
.proj-table-row--parent:hover { background: var(--bg-3, #e8dfd0); }
.proj-table-row--parent .proj-num-badge { background: var(--ink-2) !important; color: var(--bg) !important; }
.proj-table-childcount { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-3); background: var(--bg); padding: 1px 6px; border-radius: 8px; }
.proj-table-childcount-wrap { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 6px; padding: 2px 4px 2px 2px; border-radius: 4px; cursor: pointer; color: var(--ink-3); }
.proj-table-childcount-wrap:hover { background: var(--bg); color: var(--ink); }
.proj-table-row--child .proj-table-name { padding-inline-start: 28px; }
.proj-table-row--child { background: var(--bg); }
.proj-person { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.proj-table-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.proj-table-empty { padding: 40px; text-align: center; color: var(--ink-4); font-size: 13px; }

/* Project search + filters */
.proj-filters-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.proj-search-wrap { position: relative; display: flex; align-items: center; flex: 0 0 400px; margin-left: auto; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 0 10px; gap: 8px; }
.proj-search-wrap:focus-within { border-color: var(--accent); }
.proj-search-input { flex: 1; border: none; background: none; padding: 7px 0; font-size: 13px; color: var(--ink); outline: none; font-family: inherit; direction: rtl; min-width: 0; }
.proj-search-input::placeholder { color: var(--ink-4); }
.proj-search-clear { background: none; border: none; color: var(--ink-3); cursor: pointer; padding: 0; display: flex; align-items: center; flex-shrink: 0; }
.proj-search-clear:hover { color: var(--ink); }
.proj-filter-select { flex: 0 0 115px; border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12.5px; color: var(--ink-2); background: var(--surface); font-family: inherit; cursor: pointer; outline: none; direction: rtl; }
.proj-filter-select:focus { border-color: var(--accent); }
/* Searchable filter dropdown */
.fss-wrap { position: relative; flex: 0 0 115px; }
.fss-trigger { display: flex; align-items: center; width: 100%; box-sizing: border-box; border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 12.5px; color: var(--ink-2); background: var(--surface); font-family: inherit; cursor: pointer; direction: rtl; }
.fss-trigger.has-value { border-color: var(--accent); color: var(--ink); }
.fss-trigger-label { flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fss-dropdown { position: absolute; top: calc(100% + 4px); right: 0; width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 4px 16px rgba(0,0,0,0.12); z-index: 300; overflow: hidden; }
.fss-search-wrap { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.fss-search { flex: 1; border: none; background: none; font-size: 12.5px; color: var(--ink); outline: none; font-family: inherit; direction: rtl; }
.fss-search::placeholder { color: var(--ink-4); }
.fss-list { max-height: 220px; overflow-y: auto; }
.fss-item { display: block; width: 100%; text-align: right; padding: 8px 12px; font-size: 12.5px; color: var(--ink-2); background: none; border: none; cursor: pointer; font-family: inherit; direction: rtl; }
.fss-item:hover { background: var(--bg-2); color: var(--ink); }
.fss-item.selected { color: var(--accent); font-weight: 600; }
.fss-empty { padding: 12px; text-align: center; font-size: 12px; color: var(--ink-4); }
.proj-filter-chips { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.proj-filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; background: var(--accent); color: #fff; border: none; cursor: pointer; font-family: inherit; }
.proj-filter-chip:hover { opacity: 0.85; }
.proj-filter-chip-clear { background: none; border: none; font-size: 12px; color: var(--ink-3); cursor: pointer; font-family: inherit; padding: 3px 6px; }
.proj-filter-chip-clear:hover { color: var(--ink); text-decoration: underline; }
.proj-status-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 4px; font-size: 10.5px; font-weight: 600; flex-shrink: 0; }
.proj-status-badge.active  { background: #e6f4ea; color: #1e7e34; }
.proj-status-badge.orphan  { background: #fff3cd; color: #856404; }
.proj-status-badge.archive { background: var(--bg-3); color: var(--ink-3); }
.proj-search-count { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }

.readonly-banner { background: #FBF1DC; border-bottom: 1px solid #E8D5A8; padding: 6px 16px; font-size: 12px; color: #6B4F1A; display: flex; align-items: center; gap: 8px; }

/* Expired tasks — collapsed mini bar */
.g2-task.expired {
  opacity: 0.5;
  height: 6px;
  min-height: 6px;
  padding: 0 6px;
  border-radius: 3px;
  cursor: default;
  transform: none !important;
  box-shadow: none !important;
  transition: opacity 0.12s, height 0.15s;
}
.g2-task.expired .g2-task-text { display: none; }
.g2-task.expired .g2-task-dur  { display: none; }
.g2-task.expired .g2-extend-btn { display: none !important; }
.g2-task.expired:hover {
  opacity: 0.75;
  height: 22px;
  min-height: 22px;
}
.g2-task.expired:hover .g2-task-text {
  display: block;
  text-decoration: line-through;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Done tasks — mini bar with green checkmark on hover */
.g2-task.done {
  opacity: 0.5;
  height: 6px;
  min-height: 6px;
  padding: 0 6px;
  border-radius: 3px;
  cursor: pointer;
  transform: none !important;
  box-shadow: none !important;
  transition: opacity 0.12s, height 0.15s;
}
.g2-task.done .g2-task-text { display: none; }
.g2-task.done .g2-task-dur  { display: none; }
.g2-task.done .g2-extend-btn { display: none !important; }
.g2-task.done:hover {
  opacity: 0.8;
  height: 22px;
  min-height: 22px;
}
.g2-task.done:hover .g2-task-text {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.g2-task.done:hover .g2-task-text::before {
  content: '✓ ';
  color: #10b981;
  font-weight: 700;
}

/* Resize (+/− week) buttons — visible on task chip hover */
.g2-task { position: relative; }
.g2-resize-btns {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  bottom: 0;
  display: none;
  align-items: stretch;
  border-radius: 0 3px 3px 0;
  overflow: hidden;
}
.g2-task:hover .g2-resize-btns { display: flex; }
.g2-extend-btn {
  width: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.18);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: background 0.1s;
}
.g2-shrink-btn { border-inline-end: 1px solid rgba(255,255,255,0.2); }
.g2-extend-btn:hover { background: rgba(0,0,0,0.32); }

/* Expired tasks toggle row — matched to project-row bg so it doesn't form a beige strip between sections. */
.g2-expired-toggle-row {
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.12s;
  background: var(--surface);
}
.g2-expired-toggle-row .g2-expired-toggle-cell,
.g2-expired-toggle-row .g2-expired-toggle-week { background: var(--surface); }
.g2-expired-toggle-row:hover { opacity: 1; background: var(--bg-2); }
.g2-expired-toggle-cell {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px 4px 8px;
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
  padding-inline-start: 40px;
}
.g2-expired-toggle-week {
  border-bottom: 1px dashed var(--border);
}
.g2-expired-toggle-week.current { background: var(--gantt-current-col); }

/* ── Auth loading ──────────────────────────────────────────────────────────── */
.auth-loading {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; width: 100vw; background: var(--bg);
}
.auth-loading-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Login screen ──────────────────────────────────────────────────────────── */
.login-screen {
  display: flex; align-items: center; justify-content: center;
  height: 100vh; width: 100vw; background: var(--bg);
}
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 40px 36px; width: 340px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.login-logo {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.login-logo--mark { background: transparent; border-radius: 0; }
.login-logo--mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.login-title { font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.login-sub   { font-size: 13px; color: var(--ink-3); margin-bottom: 20px; }
.login-form  { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.login-input {
  width: 100%; padding: 9px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg);
  font-size: 14px; color: var(--ink); text-align: right;
  box-sizing: border-box;
}
.login-input:focus { outline: none; border-color: var(--accent); }
.login-btn   { width: 100%; padding: 10px; font-size: 14px; margin-top: 4px; }
.login-forgot {
  background: none; border: none; cursor: pointer;
  color: var(--ink-3); font-size: 12.5px; padding: 4px 0;
  text-decoration: underline; margin-top: 4px;
}
.login-forgot:hover { color: var(--ink); }
.login-error {
  color: #C0392B; background: #FDECEA; border-radius: 6px;
  padding: 7px 10px; font-size: 13px; text-align: right;
}
.login-success {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  color: var(--ink-2); font-size: 13.5px; padding: 12px 0;
}

/* ── User management view ─────────────────────────────────────────────────── */
.um-table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-top: 4px; }
.um-table-head {
  display: grid; grid-template-columns: 1.4fr 1.6fr 110px 1fr 80px 40px;
  padding: 8px 14px; background: var(--bg-2);
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
  border-bottom: 1px solid var(--border); gap: 10px;
}
.um-table-row {
  display: grid; grid-template-columns: 1.4fr 1.6fr 110px 1fr 80px 40px;
  padding: 10px 14px; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border); font-size: 13px;
  transition: background 0.1s;
}
.um-table-row:last-child { border-bottom: none; }
.um-table-row:hover { background: var(--bg); }
.um-table-row--inactive { opacity: 0.6; }
.um-name { display: flex; align-items: center; font-weight: 500; color: var(--ink); }
.um-role-select {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; font-size: 12.5px; font-weight: 600;
  background: var(--surface); cursor: pointer; width: 100%;
}
.um-role-select:focus { outline: none; border-color: var(--accent); }
.role-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
  white-space: nowrap; flex-shrink: 0;
}
.um-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px;
}
.um-status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.um-status-badge.active  { background: #E8F5E9; color: #2E7D32; }
.um-status-badge.active::before  { background: #4CAF50; }
.um-status-badge.inactive { background: var(--bg-2); color: var(--ink-3); }
.um-status-badge.inactive::before { background: var(--ink-4); }
.um-email-notice {
  display: flex; gap: 10px; align-items: flex-start;
  background: #FBF7EE; border: 1px solid #E8D5A8; border-radius: 8px;
  padding: 10px 12px; font-size: 12.5px; color: var(--ink-2); margin: 4px 0 8px;
}
.um-console-link {
  display: inline-block; margin-top: 5px; font-size: 12px; font-weight: 500;
  color: var(--accent); text-decoration: underline;
}

/* ── Financial card ─────────────────────────────────────────────── */
.pv-admin-badge { font-size: 10px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 4px; padding: 1px 6px; margin-right: 8px; letter-spacing: 0.03em; vertical-align: middle; }
.pv-fin-section-title { font-size: 11px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.pv-fin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin-bottom: 6px; }
.pv-fin-cell { display: flex; flex-direction: column; gap: 3px; }
.pv-fin-label { font-size: 10.5px; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.pv-fin-val { font-size: 14px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pv-fin-val.ok      { color: #2a7a3d; }
.pv-fin-val.warn    { color: #c07800; }
.pv-fin-val.danger  { color: var(--pr-high); }
.pv-fin-bar-wrap { height: 5px; background: var(--bg-3); border-radius: 3px; margin: 4px 0 10px; overflow: hidden; }
.pv-fin-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.pv-fin-billing { display: flex; flex-direction: column; gap: 7px; }
.pv-fin-billing-row { display: flex; align-items: center; justify-content: space-between; }
.pv-fin-billing-val { font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pv-fin-invoice-text { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }

/* ── Contracts section ───────────────────────────────────────────── */
.pv-contracts-action-count { margin-right: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 5px; background: #fee2e2; color: #dc2626; }

/* Summary strip */
.pv-contracts-summary { display: flex; align-items: center; gap: 0; padding: 14px 0 8px; }
.pv-cs-item { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pv-cs-sep { width: 1px; height: 48px; background: var(--border); margin: 0 18px; flex-shrink: 0; }
.pv-cs-label { font-size: 12px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.05em; }
.pv-cs-val { font-size: 20px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1.2; }
.pv-cs-val.ok   { color: #166534; }
.pv-cs-val.warn { color: #b45309; }
.pv-cs-val.over { color: #dc2626; }
.pv-cs-pct { font-size: 13px; font-weight: 500; color: var(--ink-4); }
.pv-cs-pct-big { font-size: 22px; font-weight: 800; color: inherit; }
.pv-cs-sub { font-size: 12px; color: var(--ink-4); margin-top: 2px; }
.pv-cs-val.red    { color: #dc2626; }
.pv-cs-val.orange { color: #b45309; }

/* Contract cards list */
.pv-contracts-list { display: flex; flex-direction: column; gap: 8px; }

/* Contract grouping — two+ sub-contracts nested under one parent-contract header */
.pv-contract-group { border: 1px solid var(--border-2); border-radius: 12px; overflow: hidden; background: var(--bg-2); }
.pv-contract-group-head { display: flex; align-items: center; gap: 8px; padding: 9px; padding-inline: 14px 21px; border-bottom: 1px solid var(--border); }
.pv-contract-group-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.pv-contract-group-total { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pv-contract-group-body { display: flex; flex-direction: column; gap: 8px; padding: 8px; }

/* Individual contract card */
/* contain:paint isolates painting to the card box — without it, a strongly-colored
   descendant (the red "גבייה פתוחה" segment) GPU-smears pink to the rounded edges
   on a border-radius+overflow:hidden box. See feedback_thick_border_radius_overflow_paint_bleed. */
/* Card tinted bg-2 (like the approved mockup) so the overall progress bar in the
   header sits on the tint — not a white strip — and the white stage cards pop. */
.pv-contract-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-2); contain: paint; width: 80%; margin-inline: auto; }
.pv-contract-card.is-open { border-color: var(--border); }

/* Card header */
.pv-contract-header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: transparent; cursor: pointer; user-select: none; }
.pv-contract-header:hover { background: var(--bg-3); }
.pv-contract-num { font-size: 11.5px; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pv-contract-name { font-size: 13px; font-weight: 700; color: var(--ink); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-contract-type { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; }
.pv-contract-type.milestone { background: var(--bg-3); color: var(--ink-3); }
.pv-contract-type.hourly { background: #dbeafe; color: #1d4ed8; }
/* Inline header edit (name + billing-type) — replaces duplicate form fields */
.pv-contract-name-edit { font-size: 13px; font-weight: 700; color: var(--ink); background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 3px 8px; font-family: inherit; outline: none; flex: 1 1 auto; min-width: 120px; }
.pv-ctype-edit { position: relative; display: inline-flex; }
.pv-ctype-btn { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--border-2); cursor: pointer; font-family: inherit; }
.pv-ctype-btn:hover { border-color: var(--accent); }
.pv-ctype-car { font-size: 8px; }
.pv-ctype-backdrop { position: fixed; inset: 0; z-index: 40; }
.pv-ctype-menu { position: absolute; top: calc(100% + 4px); inset-inline-start: 0; z-index: 41; background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow-2); padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.pv-ctype-opt { font-size: 12px; font-weight: 600; color: var(--ink-2); background: none; border: none; border-radius: var(--radius-sm); padding: 6px 10px; text-align: start; cursor: pointer; font-family: inherit; white-space: nowrap; }
.pv-ctype-opt:hover { background: var(--bg-2); }
.pv-ctype-opt.on { background: var(--bg-3); color: var(--ink); }
/* pricing-basis toggle (פיקס/אחוז) in the contract edit form */
.pv-pricing-seg { display: inline-flex; align-self: flex-start; background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 7px; padding: 3px; gap: 2px; }
.pv-pricing-opt { font-size: 12px; font-weight: 600; color: var(--ink-4); background: none; border: none; border-radius: 5px; padding: 5px 14px; cursor: pointer; font-family: inherit; }
.pv-pricing-opt.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.pv-pricing-seg.locked { opacity: 0.6; background: var(--bg-3); }
.pv-pricing-opt:disabled { cursor: default; }
.pv-pricing-seg.locked .pv-pricing-opt.on { background: var(--bg-2); box-shadow: none; }
/* contract-document chip in the card header — visible collapsed AND open */
.pv-doc-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 20px; border: 1px solid; cursor: pointer; text-decoration: none; font-family: inherit; white-space: nowrap; }
.pv-doc-chip.has { color: #2F6B4F; background: #E9F2EC; border-color: #C9E0D2; }
.pv-doc-chip.has:hover { background: #DDEBE1; }
.pv-doc-chip.none { color: var(--ink-4); background: var(--surface); border-color: var(--border-2); border-style: dashed; }
.pv-doc-chip.none:hover { color: var(--ink-2); border-color: var(--border-strong); }
.pv-contract-stage { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 4px; background: var(--bg-3); color: var(--ink-4); white-space: nowrap; }
.pv-contract-badge { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px; }
.pv-contract-badge.red    { background: #fee2e2; color: #dc2626; }
.pv-contract-badge.orange { background: #ffedd5; color: #c2410c; }
.pv-contract-badge.yellow { background: #fef9c3; color: #854d0e; }
.pv-contract-badge.green  { background: #dcfce7; color: #166534; }
.pv-contract-toggle { font-size: 11px; color: var(--ink-4); }
.pv-contract-move-btn { display: flex; align-items: center; justify-content: center; width: 16px; height: 14px; padding: 0; background: none; border: none; cursor: pointer; font-size: 8px; color: var(--ink-4); line-height: 1; }
.pv-contract-move-btn:hover:not(:disabled) { color: var(--ink-2); }
.pv-contract-move-btn:disabled { opacity: 0.25; cursor: default; }
.pv-contract-edit-btn { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; background: none; border: none; border-radius: 5px; cursor: pointer; color: var(--ink-4); }
.pv-contract-edit-btn:hover { background: var(--bg-3); color: var(--ink-2); }
/* Hover-only: edit icon hidden until you hover the contract header */
.pv-contract-header .pv-contract-edit-btn.pv-row-hover-btn { opacity: 0; transition: opacity 0.15s; }
.pv-contract-header:hover .pv-contract-edit-btn.pv-row-hover-btn { opacity: 1; }

/* Body: dual progress bars */
.pv-contract-body { padding: 10px 13px; display: flex; flex-direction: column; gap: 8px; }
.pv-dual-row { display: grid; grid-template-columns: 44px 1fr 160px; align-items: center; gap: 10px; }
.pv-dual-label { font-size: 10.5px; font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.04em; text-align: right; }
.pv-dual-track-wrap { display: flex; align-items: center; width: 100%; }
.pv-dual-track { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; transition: width 0.4s ease; }
.pv-dual-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.pv-dual-val { font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.pv-dual-val.warn   { color: #854d0e; }
.pv-dual-val.danger { color: #9a3412; }
.pv-dual-val.over   { color: #dc2626; }
.pv-dual-of     { font-weight: 400; color: var(--ink-4); }
.pv-dual-remain { font-weight: 400; color: var(--ink-3); }
.pv-dual-pct    { font-weight: 700; }

/* Milestones compact list */
.pv-ms-compact { border-top: 1px solid var(--border); }
.pv-ms-compact-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 13px; border-bottom: 1px solid var(--border); cursor: grab; }
.pv-ms-compact-row:last-child { border-bottom: none; }
.pv-ms-compact-row.done { opacity: 0.6; }
.pv-ms-compact-row.drag-over { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); border-top: 2px solid var(--accent); }
.pv-ms-compact-row.dragging { opacity: 0.35; }
.pv-ms-compact-row:active { cursor: grabbing; }
.pv-ms-num { font-size: 11px; font-weight: 700; color: var(--ink-4); min-width: 18px; text-align: center; flex-shrink: 0; }
.pv-ms-compact-row.active .pv-ms-num { color: var(--accent); }
.pv-ms-compact-name { flex: 1; font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.pv-ms-weight { font-size: 10.5px; color: var(--ink-4); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; background: var(--bg-3); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }
.pv-ms-drag-handle { font-size: 14px; color: var(--ink-4); opacity: 0.4; flex-shrink: 0; line-height: 1; user-select: none; margin-right: 2px; }
.pv-ms-compact-row:hover .pv-ms-drag-handle { opacity: 0.7; }
/* Right col: total value */
.pv-ms-total { font-size: 11.5px; font-weight: 400; color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; width: 80px; text-align: left; flex-shrink: 0; }
/* Left col: badge wrapper — fixed width keeps alignment even when empty */
.pv-ms-badge-col { width: 104px; flex-shrink: 0; display: flex; justify-content: flex-start; align-items: center; }
/* Payment badge — single row */
.pv-ms-amount { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.pv-ms-amount.paid     { background: #dcfce7; }
.pv-ms-amount.invoiced { background: #fef3c7; }
.pv-ms-amount-btn { cursor: pointer; border: none; font-family: inherit; transition: filter 0.12s; }
.pv-ms-amount-btn:hover { filter: brightness(0.93); }
.pv-ms-amount-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pv-ms-amount.paid     .pv-ms-amount-label { color: #166534; }
.pv-ms-amount.invoiced .pv-ms-amount-label { color: #92400e; }
.pv-ms-amount-val { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pv-ms-amount.paid     .pv-ms-amount-val { color: #166534; }
.pv-ms-amount.invoiced .pv-ms-amount-val { color: #92400e; }

/* Hours row (hourly contracts) */
.pv-contract-hours-row { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-top: 1px solid var(--border); background: var(--bg); }
.pv-contract-hours-label { font-size: 11px; color: var(--ink-4); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-left: auto; }
.pv-contract-hours-val { font-size: 13px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pv-contract-hours-of { font-weight: 400; color: var(--ink-4); }
.pv-contract-hours-pct { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; font-variant-numeric: tabular-nums; background: var(--bg-3); color: var(--ink-3); }
.pv-contract-hours-pct.warn   { background: #fef9c3; color: #854d0e; }
.pv-contract-hours-pct.danger { background: #ffedd5; color: #9a3412; }
.pv-contract-hours-pct.over   { background: #fee2e2; color: #dc2626; }

.pv-add-ms-btn { background: none; border: 1px dashed var(--border-2); padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; font-family: inherit; border-radius: 5px; }
.pv-add-ms-btn:hover { color: var(--ink); border-color: var(--border-strong); }

/* Milestones-management panel — edit mode only (add/list/delete stages) */
.pv-ms-edit-panel { padding: 10px 13px; border-top: 1px solid var(--border); background: var(--surface); }
.pv-ms-edit-title { font-size: 10px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.pv-ms-edit-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.pv-ms-edit-row { display: flex; align-items: center; gap: 10px; padding: 6px 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; }
.pv-ms-edit-num { font-size: 11px; font-weight: 700; color: var(--ink-4); min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.pv-ms-edit-name { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-ms-edit-val { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pv-ms-edit-pct { font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 40px; text-align: left; }
.pv-ms-edit-del { border: none; background: none; color: var(--ink-4); cursor: pointer; padding: 3px; display: flex; border-radius: 5px; }
.pv-ms-edit-del:hover { color: var(--pr-high); background: var(--bg-2); }
.pv-ms-edit-sum { font-size: 11px; color: var(--ink-4); margin-top: 5px; padding: 0 2px; }
.pv-ms-edit-empty { font-size: 12px; color: var(--ink-4); margin-bottom: 8px; }

/* ── Hourly contract body (rich layout — replaces old minimal pv-dual-row variant) ── */
.pv-hourly-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.pv-hourly-overage {
  background: #fee2e2; border: 1px solid #dc2626; border-radius: 6px;
  padding: 12px 14px; color: #991b1b;
}
.pv-hourly-overage-title { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: #991b1b; }
.pv-hourly-overage-detail { font-size: 11.5px; line-height: 1.6; margin-bottom: 10px; }
.pv-hourly-overage-detail strong { color: #991b1b; font-weight: 800; }
.pv-hourly-overage-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #dc2626; color: #fff; border: none;
  padding: 6px 12px; border-radius: 5px;
  font: 600 11.5px var(--font-sans); cursor: pointer; font-family: inherit;
}
.pv-hourly-overage-btn:hover { background: #991b1b; }

.pv-hourly-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.pv-hourly-rate-cell { background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 6px; padding: 12px 14px; }
.pv-hourly-rate-label { font-size: 11px; color: var(--ink-4); margin-bottom: 6px; font-weight: 500; }
.pv-hourly-rate-val { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

.pv-hourly-progress { }
.pv-hourly-progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.pv-hourly-progress-label { font-size: 11px; color: var(--ink-3); }
.pv-hourly-progress-val { font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pv-hourly-progress-val.over { color: #dc2626; }
.pv-hourly-bar { height: 9px; background: var(--bg-3); border-radius: 999px; overflow: hidden; position: relative; }
.pv-hourly-bar-fill { height: 100%; background: #16a34a; border-radius: 999px; transition: width 0.3s; }
.pv-hourly-bar-fill.warn { background: #d97706; }
.pv-hourly-bar-fill.over { background: #dc2626; }
.pv-hourly-bar.striped { background: repeating-linear-gradient(45deg, #fee2e2 0 8px, #fff 8px 16px); }
.pv-hourly-bar.striped .pv-hourly-bar-fill { width: 100% !important; background: #dc2626; }
.pv-hourly-accrual { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; }
.pv-hourly-accrual strong { color: var(--ink); font-weight: 700; }
.pv-hourly-accrual .over-amt { color: #dc2626; font-weight: 700; }

.pv-hourly-money-row {
  display: flex; gap: 18px; padding: 14px 16px;
  background: var(--surface-2, #FBF9F4); border: 1px solid var(--border); border-radius: 6px;
}
.pv-hourly-money-item { flex: 1; }
.pv-hourly-money-label { font-size: 11px; color: var(--ink-4); font-weight: 500; }
.pv-hourly-money-val { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 5px; font-variant-numeric: tabular-nums; }
.pv-hourly-money-val.paid { color: #16a34a; }
.pv-hourly-money-val.open { color: #d97706; }

.pv-hourly-stages-title {
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  display: flex; align-items: center; gap: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pv-hourly-stages { border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.pv-hourly-stage { display: grid; grid-template-columns: 20px 78px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.pv-hourly-stage:last-child { border-bottom: none; }
.pv-hourly-stage.pending { background: var(--bg-2); }
.pv-hourly-stage-icon { color: var(--ink-3); display: flex; align-items: center; justify-content: center; }
.pv-hourly-stage-icon.green { color: #16a34a; }
.pv-hourly-stage-icon.amber { color: #d97706; }
.pv-hourly-stage-icon.red { color: #dc2626; }
.pv-hourly-stage-icon.muted { color: var(--ink-4); }
.pv-hourly-stage-date { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); }
.pv-hourly-stage-desc { font-size: 12px; color: var(--ink); }
.pv-hourly-stage-sub { font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }
.pv-hourly-stage-amt { font-size: 12.5px; font-weight: 700; color: var(--ink); text-align: left; font-variant-numeric: tabular-nums; }
.pv-hourly-stage-amt-sub { font-size: 10px; font-weight: 400; color: var(--ink-4); }

/* Action signal bar */
.pv-contract-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; border-top: 1px solid var(--border); }
.pv-contract-action.red    { background: #fff5f5; }
.pv-contract-action.orange { background: #fffbf5; }
.pv-contract-action.yellow { background: #fefce8; }
.pv-contract-action-text { font-size: 12px; color: var(--ink-2); line-height: 1.4; }
.pv-contract-action-text strong { color: var(--ink); }
.pv-contract-action-btn { padding: 5px 12px; border-radius: 6px; border: none; cursor: pointer; font-size: 11.5px; font-weight: 700; font-family: inherit; white-space: nowrap; }
.pv-contract-action-btn.red    { background: #fee2e2; color: #dc2626; }
.pv-contract-action-btn.orange { background: #ffedd5; color: #c2410c; }
.pv-contract-action-btn.red:hover    { background: #fecaca; }
.pv-contract-action-btn.orange:hover { background: #fed7aa; }

/* ── Milestone track (many dots, scrollable) ─────────────────────── */

/* ── Milestone list (collapsible) ────────────────────────────────── */
.pv-ms-toggle { background: none; border: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-4); padding: 4px 0; display: flex; align-items: center; gap: 5px; font-family: inherit; }
.pv-ms-toggle:hover { color: var(--ink-2); }
.pv-ms-list { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.pv-ms-row { display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 8px; border-radius: 6px; background: var(--bg); }
.pv-ms-row.done   { opacity: 0.55; }
.pv-ms-row.active { background: #eef6f0; }
.pv-ms-icon { font-size: 13px; text-align: center; color: var(--ink-4); }
.pv-ms-row.done   .pv-ms-icon { color: #2a7a3d; }
.pv-ms-row.active .pv-ms-icon { color: var(--accent); }
.pv-ms-name { color: var(--ink-2); font-weight: 500; }
.pv-ms-pct  { font-size: 11.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; min-width: 32px; text-align: end; }
.pv-ms-val  { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 72px; text-align: end; }

/* ══════════════════════════════════════════════════
   Finance View
   ══════════════════════════════════════════════════ */

.fin-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg); }

/* Header */
.fin-header { display: flex; align-items: center; justify-content: space-between; padding: 22px 32px 0; flex-shrink: 0; }
.fin-title { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--ink); }
.fin-title-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.fin-inject-link { font-size: 12px; color: var(--ink-4); text-decoration: none; padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); display:inline-flex; align-items:center; }
.fin-inject-link:hover { background: var(--bg-2); color: var(--ink-2); }
.fin-inject-link.fin-sync-link { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.fin-inject-link.fin-sync-link:hover { background: var(--accent-2, #8B3A2E); color: #fff; }

/* KPI strip */
.fin-kpi-strip { display: flex; align-items: stretch; gap: 0; padding: 20px 28px; flex-shrink: 0; background: var(--surface); margin: 16px 32px 0; border-radius: 12px; border: 1px solid var(--border); }
.fin-kpi { display: flex; flex-direction: column; gap: 3px; flex: 1; padding: 4px 0; }
.fin-kpi-sep { width: 1px; background: var(--border); margin: 4px 20px; flex-shrink: 0; }
.fin-kpi-label { font-size: 10.5px; font-weight: 700; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.05em; }
.fin-kpi-val { font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.fin-kpi-val.ok     { color: #166534; }
.fin-kpi-val.warn   { color: #b45309; }
.fin-kpi-val.danger { color: #dc2626; }
.fin-kpi-sub { font-size: 11px; color: var(--ink-4); }

/* Toolbar */
.fin-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px 0; flex-shrink: 0; }
.fin-tabs { display: flex; gap: 4px; background: var(--bg-2); border-radius: 8px; padding: 3px; }
.fin-tab { padding: 5px 14px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink-3); background: transparent; font-family: inherit; display: flex; align-items: center; gap: 6px; }
.fin-tab.active { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.fin-tab-count { font-size: 11px; font-weight: 700; background: var(--bg-3); color: var(--ink-3); padding: 1px 6px; border-radius: 10px; }
.fin-tab.active .fin-tab-count { background: var(--accent); color: #fff; }
.fin-toolbar-count { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.fin-sort { display: flex; align-items: center; gap: 6px; }
.fin-sort-label { font-size: 11.5px; color: var(--ink-4); }
.fin-sort-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border); background: transparent; cursor: pointer; font-size: 12px; font-family: inherit; color: var(--ink-3); }
.fin-sort-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Table */
.fin-table-wrap { flex: 1; overflow-y: auto; padding: 16px 32px 32px; }
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; width: 100%; box-sizing: border-box; display: block; }
.fin-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.fin-table thead th { background: var(--bg-2); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; padding: 9px 14px; text-align: right; white-space: nowrap; }
/* Table rows */
.fin-row { cursor: pointer; transition: background 0.12s; }
.fin-row:hover td, .fin-row:hover th { background: var(--bg-2); }
.fin-row td { padding: 12px 14px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.fin-row:last-child td { border-bottom: none; }
.fin-num { font-size: 12px; font-weight: 700; color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 20px !important; width: 48px; }
.fin-name { max-width: 220px; }
.fin-name-text { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-bar-wrap { height: 4px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.fin-bar { height: 100%; border-radius: 2px; transition: width 0.3s; }
.fin-contracts-count { font-size: 12px; color: var(--ink-4); text-align: center; width: 52px; }
.fin-money { font-size: 13px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-money.ok   { color: #166534; }
.fin-money.warn { color: #b45309; }
.fin-pct { font-size: 11px; font-weight: 400; color: var(--ink-4); }
.fin-hours { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-3); }
.fin-hours.ok     { color: #166534; }
.fin-hours.warn   { color: #854d0e; }
.fin-hours.danger { color: #9a3412; }
.fin-hours.over   { color: #dc2626; }
.fin-hours-actual { color: inherit; }
.fin-hours-budget { font-weight: 400; color: var(--ink-4); }
.fin-hours-pct    { font-size: 11px; font-weight: 400; color: var(--ink-4); }
.fin-hours-empty  { color: var(--ink-5); }
.fin-arrow { color: var(--ink-4); font-size: 18px; text-align: center; width: 28px; }

/* ── Salary table ── */
.sal-table .sal-name-cell { display: flex; align-items: center; gap: 10px; }
.sal-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.sal-markup { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sal-date { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.sal-tenure { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.sal-study { font-size: 12.5px; }
.sal-totals-row td { border-top: 2px solid var(--border); background: var(--bg-2); padding: 10px 14px; }
.sal-totals-row:hover td { background: var(--bg-2); }

/* Status badges */
.fin-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 5px; white-space: nowrap; }
.fin-badge.red    { background: #fee2e2; color: #dc2626; }
.fin-badge.orange { background: #ffedd5; color: #c2410c; }
.fin-badge.yellow { background: #fef9c3; color: #854d0e; }
.fin-badge.green  { background: #dcfce7; color: #166534; }
.fin-badge.gray   { background: var(--bg-3); color: var(--ink-4); }

/* Empty state */
.fin-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--ink-4); font-size: 14px; padding: 60px; text-align: center; gap: 8px; }

/* ── Add Project Modal ───────────────────────────────────────────── */
.add-proj-modal-ov { position: fixed; inset: 0; background: rgba(31,27,22,0.45); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.add-proj-modal { background: var(--bg); border-radius: 16px; width: 100%; max-width: 860px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0,0,0,0.28); overflow: hidden; }
.add-proj-modal-hero { padding: 18px 24px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.add-proj-lvt-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}
.add-proj-lvt-toggle input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--lvt, #3D6F8A); }
.add-proj-lvt-toggle--on { background: var(--lvt-bg, #E5EEF4); color: var(--lvt-ink, #2C5468); }
.add-proj-modal-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; gap: 20px; align-items: flex-start; }
.add-proj-modal-foot { padding: 12px 24px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; flex-shrink: 0; background: var(--surface); }
.add-proj-num-input { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--ink); background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: 4px 10px; width: 72px; text-align: center; outline: none; }
.add-proj-num-input:focus { border-color: var(--accent); }
.add-proj-num-input::placeholder { color: var(--ink-5); font-weight: 400; opacity: 0.7; }
.add-proj-num-input--locked { color: var(--ink-4); background: var(--bg-3); cursor: not-allowed; }
.add-proj-num-input--err { border-color: #c0392b; background: #fef2f2; }
.add-proj-num-conflict { padding: 8px 24px; background: #fef2f2; color: #c0392b; font-size: 12.5px; border-bottom: 1px solid #fecaca; flex-shrink: 0; }
.add-proj-orphan-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
  user-select: none;
}
.add-proj-orphan-toggle input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--ink-3); }
.add-proj-orphan-toggle--on { background: var(--bg-3); color: var(--ink); }
.orphan-mini-tag { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--bg); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border-2); margin-inline-start: auto; }

/* ── Promote Orphan Modal ─────────────────────────────────────────── */
.promote-modal-ov { position: fixed; inset: 0; background: rgba(31,27,22,0.5); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.promote-modal { background: var(--bg); border-radius: 14px; width: 100%; max-width: 440px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; }
.promote-modal-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
.promote-modal-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.promote-modal-sub { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.promote-modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 16px; }
.promote-field { display: flex; flex-direction: column; gap: 6px; }
.promote-label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.promote-required { color: #c0392b; }
.promote-input { font-size: 14px; color: var(--ink); background: var(--bg-2); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 8px 10px; outline: none; font-family: inherit; }
.promote-input:focus { border-color: var(--accent); }
.promote-input--num { font-family: var(--font-mono); font-weight: 600; }
.promote-input--err { border-color: #c0392b; background: #fef2f2; }
.promote-error { font-size: 12px; color: #c0392b; padding: 6px 8px; background: #fef2f2; border-radius: 6px; border: 1px solid #fecaca; }
.promote-modal-foot { padding: 12px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; background: var(--surface); }
.btn.primary:disabled { opacity: 0.4; cursor: not-allowed; }
/* Wrapper shows a custom CSS tooltip on hover. The disabled button ignores pointer events
   so the wrapper receives the hover; we don't rely on the native `title` (unreliable +
   delayed over disabled controls). */
.btn-disabled-wrap { position: relative; display: inline-flex; cursor: not-allowed; }
.btn-disabled-wrap > .btn:disabled { pointer-events: none; }
.btn-disabled-wrap::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 6px); left: 0;
  background: #1F1B16; color: #FAF7F2; padding: 5px 10px; border-radius: 6px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.12s; z-index: 9999;
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.btn-disabled-wrap:hover::after { opacity: 1; }
.add-proj-name-input { font-size: 19px; font-weight: 600; color: var(--ink); border: none; border-bottom: 2px solid var(--border-2); background: transparent; outline: none; flex: 1; padding: 2px 0; font-family: inherit; min-width: 0; }
.add-proj-name-input:focus { border-bottom-color: var(--accent); }
.add-proj-name-input::placeholder { color: var(--ink-5); font-weight: 400; opacity: 0.7; }

/* ── Delete Project Modal ─────────────────────────────────────────── */
.btn-delete-proj { background: none; border: none; cursor: pointer; color: var(--ink-4); padding: 6px; border-radius: var(--radius); line-height: 0; transition: color 0.15s, background 0.15s; }
.btn-delete-proj:hover { color: #c0392b; background: #fef2f2; }
.del-proj-ov { position: fixed; inset: 0; background: rgba(31,27,22,0.5); z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.del-proj-modal { background: var(--bg); border-radius: 14px; width: 100%; max-width: 380px; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; gap: 12px; }
.del-proj-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.del-proj-warn { font-size: 13px; color: var(--ink-2); line-height: 1.55; background: #fef2f2; border-radius: 8px; padding: 10px 12px; }
/* Success-toned body for the invoice-issued popup (InvoiceIssuedModal) */
.issued-note { font-size: 13px; color: var(--ink-2); line-height: 1.6; background: #f0fdf4; border: 1px solid #dcfce7; border-radius: 8px; padding: 11px 13px; }
.del-proj-err { font-size: 12px; color: #c0392b; }
.del-proj-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.btn.danger { background: #c0392b; color: white; }
.btn.danger:hover { background: #a93226; }
.btn.danger:disabled { background: #e4b3ae; cursor: default; }

/* ── Milestone Timeline ──────────────────────────────────────────── */
.pv-ms-timeline { padding: 4px 0 8px; }

.pv-ms-tl-row { display: flex; align-items: flex-start; gap: 0; position: relative; padding: 0 13px; }
.pv-ms-tl-row:last-child .pv-ms-tl-line { display: none; }

/* Dot */
.pv-ms-tl-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; z-index: 1; }
.pv-ms-tl-dot.done { background: #16a34a; color: white; }
.pv-ms-tl-dot.active { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.pv-ms-tl-dot.future { background: var(--bg-3); border: 2px solid var(--border-2); }

/* Vertical connector line */
.pv-ms-tl-line { width: 2px; background: var(--border-2); position: absolute; right: 21px; top: 20px; bottom: -8px; }
.pv-ms-tl-line.active-line { background: var(--accent); opacity: 0.3; }

/* Body */
.pv-ms-tl-body { flex: 1; padding: 0 0 12px 10px; min-width: 0; }
.pv-ms-tl-body.current-body { padding-bottom: 8px; }

/* Single-row content */
.pv-ms-tl-body:not(.current-body) { display: flex; align-items: center; gap: 6px; padding-top: 1px; flex-wrap: wrap; }
.pv-ms-tl-current-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }

.pv-ms-tl-num { font-size: 10px; font-weight: 700; color: var(--ink-4); min-width: 14px; font-family: var(--font-mono); }
.pv-ms-tl-num.future { color: var(--ink-5); }
.pv-ms-tl-name { font-size: 12.5px; font-weight: 500; color: var(--ink-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-ms-tl-name.current { font-weight: 700; color: var(--ink); font-size: 13px; }
.pv-ms-tl-name.future { color: var(--ink-4); font-size: 12px; }
.pv-ms-tl-pct { font-size: 11px; color: var(--ink-4); font-family: var(--font-mono); }
.pv-ms-tl-pct.future { color: var(--ink-5); }
.pv-ms-tl-val { font-size: 12px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pv-ms-tl-val.future { color: var(--ink-4); font-weight: 400; }

/* Past badge */
.pv-ms-tl-badge.done { font-size: 10px; color: #16a34a; font-weight: 600; margin-right: 4px; white-space: nowrap; }

/* Milestone row action buttons — visible on row hover */
.pv-ms-row-actions { display: flex; align-items: center; gap: 1px; opacity: 0; transition: opacity 0.12s; flex-shrink: 0; margin-right: 4px; }
.pv-ms-compact-row:hover .pv-ms-row-actions { opacity: 1; }
.pv-ms-compact-row.editing .pv-ms-row-actions { opacity: 1; }
.pv-ms-row-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; background: none; border: none; border-radius: 4px; cursor: pointer; color: var(--ink-4); font-size: 9px; flex-shrink: 0; }
.pv-ms-row-btn.pv-ms-edit-btn { width: 24px; height: 24px; color: var(--ink-3); }
.pv-ms-row-btn.pv-ms-edit-btn:hover { background: var(--bg-3); color: var(--ink); }
.pv-ms-row-btn:hover:not(:disabled) { background: var(--bg-3); color: var(--ink-2); }
.pv-ms-row-btn:disabled { opacity: 0.2; cursor: default; }
.pv-ms-row-btn.danger:hover { background: #fee2e2; color: #dc2626; }
.pv-stage-open-btn { color: var(--accent); font-size: 13px; font-weight: 700; }
.pv-stage-open-btn:hover:not(:disabled) { background: var(--accent); color: white; }
.pv-stage-close-btn { color: var(--ink-4); font-size: 12px; font-weight: 700; }
.pv-stage-close-btn:hover:not(:disabled) { background: var(--bg-3); color: var(--ink-2); }

/* Milestone inline edit */
.pv-ms-compact-row.editing { cursor: default; background: var(--bg-2); padding-top: 7px; padding-bottom: 2px; }
.pv-ms-edit-input { height: 26px; border: 1px solid var(--border-2); border-radius: 5px; padding: 0 8px; font-size: 12px; font-family: inherit; background: var(--bg); color: var(--ink); outline: none; width: 100%; box-sizing: border-box; }
.pv-ms-edit-input:focus { border-color: var(--accent); }
.pv-ms-edit-input:invalid, .pv-ms-edit-input:invalid:focus { border-color: #dc2626; }
.pv-ms-edit-name { flex: 1; min-width: 0; }
.pv-ms-edit-val { width: 90px; flex-shrink: 0; }

/* Floating-label wrapper: label sits inside the field when empty,
   floats above the field when focused or filled. */
.pv-ms-edit-field { position: relative; }
.pv-ms-edit-floating-label {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--ink-dim, #888);
  pointer-events: none;
  transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease, transform 0.15s ease;
  background: var(--bg);
  padding: 0 4px;
  white-space: nowrap;
  z-index: 2;
}
.pv-ms-edit-field .pv-ms-edit-input:focus + .pv-ms-edit-floating-label,
.pv-ms-edit-field .pv-ms-edit-input:not(:placeholder-shown) + .pv-ms-edit-floating-label {
  top: 0;
  font-size: 10px;
  color: var(--accent);
  transform: translateY(-50%) scale(1);
  background: var(--bg-2);
}

/* Active milestone row — subtle accent highlight */
.pv-ms-compact-row.active { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.pv-ms-compact-row.active .pv-ms-num { color: var(--accent); font-weight: 700; }
.pv-ms-compact-row.active .pv-ms-compact-name { font-weight: 600; color: var(--ink); }

/* Slider label */
.pv-ms-tl-slider-label { font-size: 10.5px; font-weight: 600; color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 5px; }

/* Slider row */
.pv-ms-tl-slider-wrap { display: flex; align-items: center; gap: 8px; }
.pv-ms-slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 5px; border-radius: 99px; outline: none; cursor: pointer;
  background: linear-gradient(to left, var(--border-2) 0%, var(--border-2) calc(100% - var(--pct,0%)), var(--fill, var(--accent)) calc(100% - var(--pct,0%)), var(--fill, var(--accent)) 100%);
}
.pv-ms-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: white; border: 2px solid var(--fill, var(--accent)); box-shadow: 0 1px 4px rgba(0,0,0,0.2); cursor: pointer; transition: transform 0.1s; }
.pv-ms-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.pv-ms-slider-pct { font-size: 12px; font-weight: 700; font-family: var(--font-mono); min-width: 32px; text-align: center; }

/* Invoice CTA */
.pv-ms-invoice-cta { display: inline-block; margin-top: 8px; padding: 7px 14px; background: #16a34a; color: white; border: none; border-radius: var(--radius); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.1s; font-family: inherit; }
.pv-ms-invoice-cta:hover { background: #15803d; transform: translateY(-1px); }

/* btn.small */
.btn.small { padding: 3px 8px; font-size: 11px; }

/* ── Notification Bell Bar ────────────────────────────────────────── */
.notif-bell-bar { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.notif-bell-trigger { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--radius); background: #fef3c7; border: 1px solid #fde68a; color: #92400e; cursor: pointer; font-size: 12.5px; font-weight: 600; font-family: inherit; transition: background 0.15s; }
.notif-bell-trigger:hover, .notif-bell-trigger.open { background: #fde68a; }
.notif-bell-trigger.pulse { animation: notif-bell-pulse 1.1s ease-in-out; }
.notif-bell-trigger.pulse svg:first-child { animation: notif-bell-shake 0.7s ease-in-out; transform-origin: top center; }
@keyframes notif-bell-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.55); }
  60%  { box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}
@keyframes notif-bell-shake {
  0%, 100% { transform: rotate(0); }
  15%      { transform: rotate(-14deg); }
  30%      { transform: rotate(12deg); }
  45%      { transform: rotate(-10deg); }
  60%      { transform: rotate(8deg); }
  75%      { transform: rotate(-4deg); }
}
.notif-bell-count { background: #d97706; color: white; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 1px 6px; min-width: 18px; text-align: center; transition: background 0.15s; }
.notif-bell-trigger.pulse .notif-bell-count { animation: notif-bell-count-pop 0.5s ease-out; }
/* Two-category count chips on the invoices button: amber = להוציא (action), red = לתשלום (owed) */
.notif-bell-chip { color: white; font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 1px 7px; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: filter 0.12s; }
.notif-bell-chip:hover { filter: brightness(1.08); }
.notif-bell-chip.issue { background: #d97706; }
.notif-bell-chip.pay   { background: var(--accent); }
.notif-bell-trigger.pulse .notif-bell-chip { animation: notif-bell-count-pop 0.5s ease-out; }
@keyframes notif-bell-count-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); background: #b45309; }
  100% { transform: scale(1); }
}

/* Drawer overlay */
.notif-overlay { position: fixed; inset: 0; z-index: 149; }

/* Left-side drawer */
.notif-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 340px; background: var(--bg); border-right: 1px solid var(--border-2); box-shadow: 4px 0 24px rgba(0,0,0,0.14); z-index: 150; display: flex; flex-direction: column; }
.notif-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); font-size: 14px; font-weight: 700; color: var(--ink); flex-shrink: 0; }
.notif-drawer-close { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--ink-3); line-height: 1; padding: 0 4px; }
.notif-drawer-close:hover { color: var(--ink); }
.notif-drawer-list { flex: 1; overflow-y: auto; padding: 8px 0; }

/* Drawer items */
.notif-drawer-item { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.notif-drawer-item:last-child { border-bottom: none; }
.notif-drawer-item.untreated { background: #fffbeb; }
.notif-drawer-item.untreated:hover { background: #fef3c7; }
.notif-drawer-item.highlighted { animation: notif-row-flash 1.4s ease-out; box-shadow: inset 3px 0 0 var(--accent); }
@keyframes notif-row-flash {
  0%   { background: #fde68a; }
  100% { background: var(--surface); }
}
.notif-drawer-item.untreated.highlighted { animation: notif-row-flash-untreated 1.4s ease-out; }
@keyframes notif-row-flash-untreated {
  0%   { background: #fcd34d; }
  100% { background: #fffbeb; }
}
.notif-item-time { font-size: 10.5px; color: var(--ink-4); margin-top: 4px; font-variant-numeric: tabular-nums; }
.notif-item-project { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-family: inherit; padding: 0 0 4px; width: 100%; text-align: right; color: var(--ink); }
.notif-item-project:hover .notif-item-name { color: var(--accent); text-decoration: underline; }
.notif-item-num { font-size: 11px; font-weight: 700; color: var(--ink-4); font-family: var(--font-mono); }
.notif-item-name { font-size: 13px; font-weight: 600; flex: 1; }
.notif-item-detail { font-size: 11.5px; color: var(--ink-3); margin-bottom: 8px; line-height: 1.5; }
.notif-item-done { background: none; border: 1px solid #16a34a; color: #16a34a; border-radius: var(--radius); padding: 4px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s; }
.notif-item-done:hover { background: #16a34a; color: white; }
.notif-item-actions { display: flex; gap: 6px; }
.notif-item-mail { background: none; border: 1px solid var(--accent); color: var(--accent); border-radius: var(--radius); padding: 4px 12px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s, color 0.15s; }
.notif-item-mail:hover { background: var(--accent); color: white; }
.notif-item-confirm { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 0; }
.notif-confirm-row { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); }
.notif-confirm-row > span { min-width: 56px; }
.notif-confirm-input { flex: 1; padding: 4px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius); font-family: inherit; }
.notif-confirm-buttons { display: flex; gap: 6px; margin-top: 4px; }
.notif-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); padding: 0 16px; }
.notif-tab { flex: 1; background: none; border: none; padding: 10px 8px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-4); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.notif-tab:hover { color: var(--ink-2); }
.notif-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.notif-tab-count { background: var(--accent); color: white; font-size: 10.5px; padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; }
.notif-empty { padding: 32px 16px; text-align: center; color: var(--ink-4); font-size: 12.5px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.notif-empty-link { background: none; border: none; color: var(--accent); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.notif-empty-link:hover { text-decoration: underline; }

/* ── Milestone stage bar ─────────────────────────────────────────── */
.pv-stage-bar { border-top: 1px solid var(--border); padding: 0 13px; }

/* Compact stage row (done / future) */
.pv-stage-item { display: grid; grid-template-columns: 26px 1fr auto 50px 100px 28px; align-items: center; column-gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); cursor: grab; font-size: 12.5px; }
.pv-stage-item:last-child { border-bottom: none; }
.pv-stage-item-pct { font-size: 11.5px; font-weight: 600; color: var(--ink-4); font-variant-numeric: tabular-nums; text-align: end; }
.pv-stage-item.drag-over { background: color-mix(in srgb, var(--accent) 8%, var(--bg)); border-top: 2px solid var(--accent); }
.pv-stage-item.future { opacity: 0.7; }
.pv-stage-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 10.5px; font-weight: 700; }
.pv-stage-dot.done    { background: #dcfce7; color: #166534; }
.pv-stage-dot.future  { background: var(--bg-2); color: var(--ink-4); border: 1px solid var(--border-2); }
.pv-stage-dot.current { background: var(--accent); color: #fff; box-shadow: 0 0 0 3px rgba(196,69,54,0.16); }
.pv-stage-item-name { font-size: 12.5px; color: var(--ink-2); font-weight: 600; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-stage-item-name.done { color: var(--ink-4); font-weight: 500; }
.pv-stage-badge-cell { display: flex; align-items: center; }
.pv-stage-item-val { font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.pv-stage-item-actions { display: flex; align-items: center; gap: 2px; }
.pv-stage-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 5px; white-space: nowrap; }
.pv-stage-badge.paid     { background: #dcfce7; color: #166534; }
.pv-stage-badge.invoiced { background: #fef3c7; color: #92400e; }
.pv-row-hover-btn { opacity: 0; transition: opacity 0.12s; }
.pv-stage-item:hover .pv-row-hover-btn { opacity: 1; }

/* Expanded current stage */
.pv-stage-current { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); padding: 12px 0; display: flex; flex-direction: column; gap: 12px; }
.pv-stage-current-header { display: grid; grid-template-columns: 26px 1fr auto 50px 100px 28px; align-items: center; column-gap: 12px; }
.pv-stage-current-name { font-size: 13px; font-weight: 700; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-stage-current-val  { font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: end; }

/* Confirmed invoice row (shown after Meital marks it done) */
.pv-invoice-confirmed { display: flex; align-items: center; gap: 7px; margin: 0 28px; padding: 7px 12px; background: #dcfce7; border: 1px solid #bbf7d0; border-radius: 7px; font-size: 12px; font-weight: 600; color: #166534; }
.pv-invoice-confirmed svg { flex-shrink: 0; color: #16a34a; }
.pv-invoice-confirmed span:nth-child(2) { flex: 1; }
.pv-invoice-confirmed-date { font-size: 11px; font-weight: 400; color: #15803d; white-space: nowrap; }
.pv-invoice-confirmed.paid { background: #dcfce7; border-color: #86efac; color: #14532d; }
.pv-invoice-confirmed.paid svg { color: #15803d; }
.pv-invoice-undo-btn { margin-right: auto; background: none; border: none; color: #15803d; opacity: 0.5; font-size: 11px; cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0; }
.pv-invoice-undo-btn:hover { opacity: 1; color: #dc2626; }

/* Prominent "הוצאתי חשבונית" button — for Meital to confirm */
.pv-issue-invoice-btn { display: flex; align-items: center; gap: 8px; width: calc(100% - 56px); margin: 0 28px; padding: 9px 14px; background: var(--pr-high-bg); border: 1.5px solid var(--accent); border-radius: 8px; color: var(--accent); font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; text-align: right; transition: background 0.15s, border-color 0.15s; }
.pv-issue-invoice-btn:hover { background: color-mix(in srgb, var(--accent) 12%, var(--bg)); border-color: var(--accent-2); }
.pv-issue-invoice-btn svg { flex-shrink: 0; }
.pv-issue-invoice-hint { margin-inline-start: auto; font-size: 11px; font-weight: 500; opacity: 0.75; }

/* Inline date confirmation row */
.pv-invoice-confirm-row { display: flex; align-items: center; gap: 8px; margin: 0 28px; padding: 8px 12px; background: var(--pr-high-bg); border: 1.5px solid var(--accent); border-radius: 8px; flex-wrap: wrap; }
.pv-invoice-confirm-label { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.pv-invoice-date-input { flex: 1; min-width: 110px; border: 1px solid var(--border); border-radius: 5px; padding: 4px 8px; font-size: 12px; font-family: inherit; background: white; color: var(--ink-1); }

/* Progress slider */
.pv-progress-section { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 0 28px; }
.pv-progress-label { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; min-width: 110px; }
.pv-progress-pct { font-size: 13px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 38px; text-align: end; }

.pv-progress-track-wrap { position: relative; flex: 1; height: 18px; }
.pv-progress-track-bg   { position: absolute; left: 0; right: 0; top: 6px; height: 6px; background: var(--bg-3); border-radius: 3px; pointer-events: none; z-index: 1; }
.pv-progress-track-fill { position: absolute; right: 0; top: 6px; height: 6px; background: var(--ink-3); border-radius: 3px; pointer-events: none; max-width: 100%; z-index: 2; }

.pv-progress-slider {
  position: absolute; left: 0; right: 0; top: 0;
  width: 100%; height: 18px; margin: 0; padding: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: none; outline: none;
  cursor: pointer;
  z-index: 3;
}
.pv-progress-slider::-webkit-slider-runnable-track { background: transparent; height: 6px; border: none; }
.pv-progress-slider::-moz-range-track             { background: transparent; height: 6px; border: none; }
.pv-progress-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid white;
  box-shadow: 0 0 0 1px var(--accent);
  cursor: pointer; margin-top: -4px;
}
.pv-progress-slider::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 2px solid white;
  box-shadow: 0 0 0 1px var(--accent); cursor: pointer;
}

.pv-progress-ticks { position: absolute; top: 2px; left: 0; right: 0; height: 14px; pointer-events: none; z-index: 4; }
.pv-progress-tick  { position: absolute; transform: translateX(-50%); }
.pv-tick-line      { width: 2px; height: 14px; background: var(--accent); border-radius: 1px; }
.pv-progress-tick.acked .pv-tick-line { background: #16a34a; }

/* Payment splits selector */
.pv-splits-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 28px; }
.pv-splits-label { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; min-width: 110px; }
.pv-split-btn { width: 28px; height: 24px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-2); color: var(--ink-3); font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.pv-split-btn:hover { border-color: var(--accent); color: var(--accent); }
.pv-split-btn.active { background: var(--accent); border-color: var(--accent); color: white; }
.pv-splits-amount { font-size: 11.5px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-right: 4px; }

/* ── Finance zone (top of project page) ─────────────────────────── */
.pv-finance-zone { border-bottom: 2px solid var(--border-2); margin-bottom: 4px; }

/* ── Quotes View ────────────────────────────────────────────────── */
.qt-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg); }
.qt-title-icon { background: #065F46 !important; }
/* (qt-add-btn size override removed — all primary add buttons now share .btn.primary sizing) */

.qt-top-bar { display: flex; align-items: flex-end; justify-content: space-between; padding: 14px 32px 0; gap: 12px; border-bottom: 1px solid var(--border); }
.qt-tabs-row { display: flex; gap: 0; flex-shrink: 0; }
.qt-tab { padding: 8px 16px; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: 500 13.5px var(--font-sans); color: var(--ink-3); background: transparent; cursor: pointer;
  transition: color 0.12s, border-color 0.12s; }
.qt-tab:hover { color: var(--ink); }
.qt-tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.qt-tab .proj-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600; background: var(--bg-3); color: var(--ink-3); margin-inline-start: 6px; }
.qt-tab.active .proj-tab-count { background: var(--accent); color: #fff; }

.qt-filters { display: flex; gap: 8px; flex-shrink: 0; }
.qt-filter-select, .qt-filter-search {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 6px;
  font: 400 13px var(--font-sans); background: var(--surface); color: var(--ink);
}
.qt-filter-select { cursor: pointer; }
.qt-filter-search { width: 200px; }
.qt-filter-search:focus, .qt-filter-select:focus { outline: none; border-color: var(--ink); }

.qt-table-wrap { margin-top: 0; }
.qt-table { cursor: default; }
.qt-row { cursor: default !important; }
.qt-num  { font-size: 12px; font-weight: 600; color: var(--ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qt-date { font-size: 12px; color: var(--ink-4); white-space: nowrap; }
.qt-name-row { display: flex; align-items: center; gap: 10px; }
.qt-name-content { display: flex; flex-direction: column; gap: 2px; }
.qt-name-text { font-size: 14px; font-weight: 500; color: var(--ink); }
.qt-file-icon { display: flex; align-items: center; flex-shrink: 0; }
.qt-file-icon.has-file { color: var(--accent); }
.qt-file-icon.has-file:hover { opacity: 0.8; }
.qt-file-icon.no-file { color: var(--ink-4); opacity: 0.3; cursor: default; }
.qt-note { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.qt-client-name { font-size: 13px; color: var(--ink-2); }
.qt-contact { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.qt-closed-amt { font-size: 11.5px; color: #166534; margin-top: 3px; font-weight: 600; }

/* Status badge */
.qt-badge { display: inline-block; padding: 3px 9px; border-radius: 6px;
  font: 600 11.5px var(--font-sans); white-space: nowrap; }
.qt-s-pending   { background: #E8E0D6; color: #6B6258; }
.qt-s-active    { background: #FEF3C7; color: #92400E; }
.qt-s-approved  { background: #D1FAE5; color: #065F46; }
.qt-s-rejected  { background: #F3F4F6; color: #9CA3AF; }
.qt-s-cancelled { background: #FEE2E2; color: #991B1B; }

.qt-status-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.qt-status-btn { padding: 3px 9px; border-radius: 6px; font: 600 11.5px var(--font-sans);
  cursor: pointer; border: 2px solid transparent; transition: border-color 0.12s; white-space: nowrap; }
.qt-status-btn.selected { border-color: currentColor; }
.qt-status-cell { position: relative; cursor: pointer; }
.qt-status-cell:hover .qt-badge { opacity: 0.8; }

.qt-status-dd { position: absolute; top: calc(100% + 4px); right: 0; z-index: 200;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-3); min-width: 130px; padding: 4px; }
.qt-status-dd.qt-status-dd--up { top: auto; bottom: calc(100% + 4px); }
.qt-status-dd-item { display: block; width: 100%; text-align: right; padding: 7px 12px;
  background: none; border: none; font: 400 13px var(--font-sans); color: var(--ink); cursor: pointer;
  border-radius: 6px; }
.qt-status-dd-item:hover { background: var(--bg-2); }
.qt-status-dd-item.active { font-weight: 700; }

/* Row actions */
.qt-actions-cell { width: 1px; white-space: nowrap; }
.qt-row-actions { display: flex; gap: 4px; align-items: center; opacity: 0; transition: opacity 0.1s; }
.fin-row.qt-row:hover .qt-row-actions { opacity: 1; }
.qt-action-btn { display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; background: none; border: 1px solid transparent; border-radius: 5px;
  font: 400 12px var(--font-sans); color: var(--ink-4); cursor: pointer; }
.qt-action-btn:hover { background: var(--bg-2); border-color: var(--border); color: var(--ink); }
.qt-action-trash:hover { color: #991B1B; background: #FEE2E2; border-color: #FEE2E2; }
.qt-action-proj { color: #065F46; }
.qt-action-proj:hover { background: #D1FAE5; border-color: #A7F3D0; color: #065F46; }

.qt-del-confirm { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-2); }
.qt-del-yes { padding: 4px 10px; background: #991B1B; color: white; border: none; border-radius: 5px; cursor: pointer; font: 600 12px var(--font-sans); }
.qt-del-no  { padding: 4px 10px; background: none; border: 1px solid var(--border); border-radius: 5px; cursor: pointer; font: 400 12px var(--font-sans); color: var(--ink-3); }

.qt-empty-add { background: none; border: none; color: var(--accent); cursor: pointer;
  font: 600 14px var(--font-sans); text-decoration: underline; }

/* Add/Edit slide panel */
.qt-panel-overlay { position: fixed; inset: 0; background: rgba(31,27,22,0.3); z-index: 300;
  display: flex; justify-content: flex-start; align-items: stretch; }
.qt-panel { width: 400px; background: var(--surface); height: 100%; overflow-y: auto;
  display: flex; flex-direction: column; box-shadow: var(--shadow-3); }
.qt-panel-header { display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; border-bottom: 1px solid var(--border); font: 700 15px var(--font-sans); flex-shrink: 0; }
.qt-panel-form { flex: 1; padding: 14px 20px; display: flex; flex-direction: column; gap: 10px; }
.qt-form-row { display: flex; flex-direction: column; gap: 4px; }
.qt-form-pair { display: flex; gap: 12px; }
.qt-form-pair .qt-form-row { flex: 1; }
.qt-form-row label { font: 600 11px var(--font-sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.qt-form-row input, .qt-form-row select, .qt-form-row textarea {
  padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
  font: 400 13px var(--font-sans); color: var(--ink); background: var(--surface); }
.qt-form-row input:focus, .qt-form-row select:focus, .qt-form-row textarea:focus { outline: none; border-color: var(--ink); }
.qt-form-row textarea { resize: vertical; font-family: var(--font-sans); }
.qt-panel-footer { padding: 12px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 8px; flex-shrink: 0; margin-top: auto; }

.qt-close-btn { background: none; border: none; cursor: pointer; color: var(--ink-4);
  font-size: 18px; line-height: 1; padding: 0 4px; }
.qt-close-btn:hover { color: var(--ink); }

/* Create Project modal */
.qt-proj-overlay { position: fixed; inset: 0; background: rgba(31,27,22,0.45); z-index: 400;
  display: flex; align-items: center; justify-content: center; }
.qt-proj-modal { background: var(--surface); border-radius: 12px; width: 400px;
  box-shadow: var(--shadow-3); overflow: hidden; }
.qt-proj-modal-header { display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px; border-bottom: 1px solid var(--border); font: 700 15px var(--font-sans); }
.qt-proj-prefill { padding: 16px 24px; display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-2); border-bottom: 1px solid var(--border); }
.qt-prefill-row { display: flex; gap: 10px; font-size: 13px; align-items: baseline; }
.qt-prefill-row span { color: var(--ink-4); min-width: 78px; flex-shrink: 0; }
.qt-prefill-row strong { color: var(--ink); font-weight: 500; }
.qt-proj-num-section { padding: 18px 24px; display: flex; flex-direction: column; gap: 7px; }
.qt-proj-num-label { font: 700 12px var(--font-sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.qt-proj-num-input { padding: 10px 14px; border: 2px solid var(--ink); border-radius: 7px;
  font: 600 18px var(--font-sans); color: var(--ink); width: 100%; box-sizing: border-box; }
.qt-proj-num-input:focus { outline: none; border-color: var(--accent); }
.qt-proj-modal-footer { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; gap: 8px; }

/* Month separator rows in quotes table */
.qt-month-sep td { padding: 8px 14px; border: none; background: var(--bg-2); cursor: pointer; }
.qt-month-sep:hover td { background: var(--bg-3, #e8e4de); }
.qt-month-sep.is-collapsed td { border-bottom: 1px solid var(--border, #e0dbd4); }
.qt-month-sep + .qt-row td { border-top: none; }
.qt-month-sep-inner { display: flex; align-items: center; justify-content: space-between; }
.qt-month-sep-start { display: flex; align-items: center; gap: 6px; }
.qt-sep-amount { text-align: right; white-space: nowrap; }
.qt-sep-status { white-space: nowrap; padding-inline-start: 8px !important; }
.qt-sep-status-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qt-month-sep-title { display: flex; align-items: center; gap: 6px; }
.qt-month-total { font: 600 11px var(--font-sans); color: var(--ink-2); }
.qt-month-chevron { font-size: 13px; color: var(--ink-4); display: inline-block;
  transition: transform 0.15s; line-height: 1; }
.qt-month-chevron.collapsed { transform: rotate(-90deg); }
.qt-month-label { font: 600 11px var(--font-sans); color: var(--ink-3); text-transform: uppercase;
  letter-spacing: 0.06em; }
.qt-month-count { font: 400 11px var(--font-sans); color: var(--ink-4); }
.qt-month-summary { font: 500 12px var(--font-sans); color: var(--ink-3); }

/* Quote Detail Modal */
.qt-detail-overlay { position: fixed; inset: 0; background: rgba(31,27,22,0.45); z-index: 400;
  display: flex; align-items: center; justify-content: center; }
.qt-detail-modal { background: var(--surface); border-radius: 12px; width: 580px; max-width: 95vw;
  box-shadow: var(--shadow-3); overflow: hidden; }
.qt-file-section { padding: 12px 24px; border-top: 1px solid var(--border); }
.qt-file-link { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--border); color: var(--ink); text-decoration: none;
  font: 500 13px var(--font-sans); transition: background 0.15s; cursor: pointer; width: 100%; }
.qt-file-link:hover { background: var(--bg-3); }
.qt-file-link svg { flex-shrink: 0; color: var(--ink-3); }
.qt-file-placeholder { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px;
  background: var(--bg-1); border: 1px dashed var(--border); color: var(--ink-4);
  font: 400 12px var(--font-sans); }
.qt-form-file-wrap { display: flex; align-items: center; gap: 8px; }
.qt-form-file-name { font: 400 12px var(--font-sans); color: var(--ink-3); flex: 1; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.qt-detail-header { display: flex; justify-content: space-between; align-items: flex-start;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
.qt-detail-num { font: 700 13px var(--font-sans); color: var(--ink-3); margin-bottom: 3px; letter-spacing: 0.02em; }
.qt-detail-project { font: 600 17px var(--font-sans); color: var(--ink); }
.qt-detail-body { padding: 16px 24px; display: flex; flex-direction: column; gap: 10px; }
.qt-detail-row { display: flex; align-items: baseline; gap: 12px; }
.qt-detail-label { font: 400 12px var(--font-sans); color: var(--ink-4); min-width: 80px; flex-shrink: 0; }
.qt-detail-val { font: 500 13px var(--font-sans); color: var(--ink); }
.qt-detail-notes-row { align-items: flex-start; }
.qt-detail-notes-val { font-weight: 400; color: var(--ink-2); line-height: 1.5; }
.qt-detail-footer { display: flex; gap: 8px; padding: 14px 24px; border-top: 1px solid var(--border);
  align-items: center; flex-wrap: wrap; }
.qt-detail-delete { color: var(--danger, #b91c1c) !important; margin-inline-start: auto; }

/* ============================================================
   TechView — ציוד טכני
   ============================================================ */
.tech-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg); }
.tech-tabs { display: flex; gap: 0; padding: 16px 32px 0; border-bottom: 1px solid var(--border); }
.tech-tab { padding: 6px 16px; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: 500 13px var(--font-sans); cursor: pointer; background: transparent; color: var(--ink-3);
  transition: color 0.12s, border-color 0.12s; }
.tech-tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.tech-tab .proj-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 600; background: var(--bg-3); color: var(--ink-3); margin-inline-start: 6px; }
.tech-tab.active .proj-tab-count { background: var(--accent); color: #fff; }
.tech-table-wrap { flex: 1; overflow-y: auto; padding: 16px 32px 32px; }

/* ============== Clients page ============== */
.clients-wrap { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--bg); }
.clients-wrap .proj-list-header { padding: 24px 32px 0; margin-bottom: 0; }
.clients-search-wrap { padding: 14px 32px 0; }
.clients-search { width: 400px; max-width: 100%; padding: 9px 14px; border: 1px solid var(--border-2); border-radius: 6px;
  font: 400 13.5px var(--font-sans); background: var(--surface); color: var(--ink); }
.clients-search::placeholder { color: var(--ink-4); }
.clients-search:focus { outline: none; border-color: var(--accent); }
.clients-tabs { display: flex; gap: 0; padding: 14px 32px 0; border-bottom: 1px solid var(--border); }
.clients-tab { padding: 6px 16px; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: 500 13px var(--font-sans); cursor: pointer; background: transparent; color: var(--ink-3);
  transition: color 0.12s, border-color 0.12s; }
.clients-tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.clients-tab.active .proj-tab-count { background: var(--accent); color: #fff; }
.clients-table-wrap { flex: 1; overflow-y: auto; padding: 16px 32px 32px; }
.clients-row { cursor: pointer; }
.clients-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.clients-chev { color: var(--ink-4); display: inline-flex; align-items: center; transition: transform 0.15s; }
.clients-chev.open { transform: rotate(90deg); }
.clients-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.clients-chip { font-size: 11px; color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
/* Expanded detail — darker cream backdrop so the white active card pops against it */
.clients-detail td { padding: 0; background: var(--bg-2); }
.clients-detail:hover td { background: var(--bg-2); }
.clients-detail-inner { padding: 6px 14px 16px 38px; }
.clients-detail-title { font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 6px; }
.clients-proj-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-top: 8px; }
.clients-proj-table thead th { font-size: 10.5px; padding: 7px 12px; }
.clients-proj-table .fin-row td { padding: 9px 12px; font-size: 13px; }
/* Active projects: bright WHITE card (explicit cell bg) so it lifts off the cream backdrop */
.clients-proj-active { background: var(--surface); border-color: var(--border-2); box-shadow: 0 1px 3px rgba(26,22,20,0.05); }
.clients-proj-active thead th { background: var(--surface); border-bottom: 1px solid var(--border); color: var(--ink-3); }
.clients-proj-active .fin-row td { background: var(--surface); }
.clients-proj-active .fin-row:hover td { background: var(--bg-2); }
/* Inactive projects: muted cream so the eye reads them as history */
.clients-proj-inactive { background: var(--bg-3); }
.clients-proj-inactive thead th { background: var(--bg-3); }
.clients-proj-inactive .fin-row td { background: var(--bg-3); color: var(--ink-4); }
.clients-proj-inactive .fin-row:hover td { background: var(--border); }
.tenders-table .fin-row td { height: 100px; }
.tender-year-row { cursor: pointer; }
.tender-year-row td { background: var(--bg-2); padding: 6px 14px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.03em; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); }
.tender-year-row:first-child td { border-top: none; }
.tender-year-row:hover td { background: var(--bg-3); }
.tender-year-cell { display: flex; align-items: center; justify-content: space-between; }
.tech-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.tech-table thead th { background: var(--bg-2); }
.tech-table th { font-size: 10.5px; font-weight: 700; color: var(--ink-4); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 16px 12px 8px; text-align: right; white-space: nowrap; }
.tech-name-cell { display: flex; flex-direction: column; gap: 2px; }
.tech-item-name { font: 500 13px var(--font-sans); color: var(--ink); }
.tech-notes-preview { font: 400 11px var(--font-sans); color: var(--ink-4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.tech-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font: 500 11px var(--font-sans);
  background: var(--bg-2); color: var(--ink-3); white-space: nowrap; }
.tech-os { background: #e8f5e9; color: #2e7d32; }
.tech-actions { white-space: nowrap; text-align: left; }
.tech-actions > * { opacity: 0; transition: opacity 0.15s; }
.fin-row:hover .tech-actions > *,
.tech-actions.confirming > * { opacity: 1; }
.tech-action-btn { font: 500 12px var(--font-sans); padding: 3px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); margin-inline-start: 4px;
  transition: background 0.1s; }
.tech-action-btn:hover { background: var(--bg-2); }
.tech-action-btn.danger { color: var(--danger,#b91c1c); border-color: var(--danger,#b91c1c); }
.tech-action-btn.danger-soft { color: var(--danger,#b91c1c); }

/* Autodesk badges in table */
.tech-ad-badges { display: flex; gap: 4px; flex-wrap: nowrap; }
.tech-ad-badge { display: inline-block; padding: 2px 6px; border-radius: 6px; font: 600 10px var(--font-sans); white-space: nowrap; }
.tech-ad-badge.ac { background: #fde68a; color: #78350f; }
.tech-ad-badge.rv { background: #bfdbfe; color: #1e40af; }
.tech-ad-badge.bm { background: #d9f99d; color: #166534; }

/* Autodesk toggle buttons in panel */
.tech-ad-toggles { display: flex; gap: 8px; }
.tech-ad-btn { padding: 4px 12px; border-radius: 6px; font: 500 12px var(--font-sans); cursor: pointer;
  border: 1.5px solid var(--border); background: var(--bg); color: var(--ink-4); transition: all 0.1s; }
.tech-ad-btn:hover { border-color: var(--ink-4); }
.tech-ad-btn.active { border-color: transparent; color: #fff; }
.tech-ad-btn.ac.active { background: #b45309; border-color: #b45309; }
.tech-ad-btn.rv.active { background: #1d4ed8; border-color: #1d4ed8; }
.tech-ad-btn.bm.active { background: #15803d; border-color: #15803d; }

/* Office floor plan modal */
.tech-plan-overlay { position: fixed; inset: 0; background: rgba(31,27,22,0.55); z-index: 700;
  display: flex; align-items: center; justify-content: center; }
.tech-plan-modal { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  max-width: 90vw; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.tech-plan-header { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); }
.tech-plan-header h3 { font: 600 16px var(--font-sans); color: var(--ink); margin: 0; }
.tech-plan-body { overflow: auto; padding: 20px; }
.tech-plan-body img { display: block; max-width: 100%; }

/* ============ Member detail page (admin-only) ============ */
.member-view { flex: 1; overflow-y: auto; padding: 16px 24px 80px; background: var(--bg); }
.member-view > * { max-width: 1180px; margin-inline: auto; }
.team-card-clickable { cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.team-card-clickable:hover { background: var(--bg-2); border-color: var(--border-strong); }

.mp-back-row { display: flex; margin-bottom: 16px; }
.back-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; color: var(--ink-3); font-size: 13px; font-family: inherit; }
.back-chip:hover { background: var(--bg-2); }

.mp-hero { display: flex; gap: 24px; align-items: flex-start; padding: 28px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 16px; }
.mp-avatar { width: 110px; height: 110px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; color: #fff; flex-shrink: 0; }
.mp-hero-info { flex: 1; min-width: 0; }
.mp-hero-name { font-size: 28px; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.mp-hero-role { font-size: 15px; color: var(--ink-3); margin-bottom: 12px; }
.mp-hero-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); align-items: center; }
.mp-status { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.mp-status.active { background: var(--pr-low-bg); color: var(--pr-low); }
.mp-status.former { background: var(--bg-3); color: var(--ink-3); }
.mp-status.admin  { background: var(--pr-high-bg); color: var(--pr-high); }
.mp-hero-actions { display: flex; gap: 8px; }
.mp-edit-btn { padding: 8px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); cursor: pointer; font-family: inherit; font-size: 13px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.mp-edit-btn:hover { background: var(--bg-2); }

.mp-stats { display: flex; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 16px; overflow: hidden; cursor: pointer; transition: background 0.15s, border-color 0.15s; position: relative; }
.mp-stats:hover { background: var(--bg-2); border-color: var(--border-strong); }
.mp-stats::after { content: 'פתח בגאנט ←'; position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--ink-4); opacity: 0; transition: opacity 0.15s; pointer-events: none; }
.mp-stats:hover::after { opacity: 1; }
.mp-stat { flex: 1; padding: 18px 22px; border-inline-end: 1px solid var(--border); }
.mp-stat:last-child { border-inline-end: none; }
.mp-stat-val { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.mp-stat-val.urgent { color: var(--accent); }
.mp-stat-label { font-size: 12px; color: var(--ink-4); }

.mp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 26px; margin-bottom: 16px; }
.mp-card-title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 18px; display: flex; align-items: center; gap: 8px; }
.mp-admin-tag { background: var(--pr-high-bg); color: var(--pr-high); padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; margin-inline-start: auto; }

.mp-salary-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.mp-salary-tile { padding: 18px; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius); }
.mp-salary-label { font-size: 12px; color: var(--ink-4); margin-bottom: 6px; }
.mp-salary-amount { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.mp-salary-amount .currency { font-size: 16px; color: var(--ink-3); margin-inline-start: 2px; }
.mp-salary-sub { font-size: 11px; color: var(--ink-4); margin-top: 4px; }

.mp-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 24px; }
.mp-info-cell { display: flex; flex-direction: column; gap: 4px; }
.mp-info-key { font-size: 11px; color: var(--ink-4); }
.mp-info-val { font-size: 14px; color: var(--ink); font-weight: 500; }
.mp-info-val .badge { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--pr-low-bg); color: var(--pr-low); font-size: 11px; font-weight: 600; }
.mp-info-val .badge.no { background: var(--bg-3); color: var(--ink-4); }

.mp-text-block { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border); }
.mp-text-key { font-size: 11px; color: var(--ink-4); margin-bottom: 4px; }
.mp-text-val { font-size: 13px; color: var(--ink-2); line-height: 1.6; }

.mp-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-edit-field { display: flex; flex-direction: column; gap: 4px; }
.mp-edit-field.full { grid-column: 1 / -1; }
.mp-edit-field > span { font-size: 11px; color: var(--ink-4); }

.mp-timeline-wrap { overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; }
.mp-timeline { position: relative; padding: 26px 8px 12px; min-width: 100%; width: max-content; }
.mp-timeline-line { position: absolute; top: 48px; right: 24px; left: 24px; height: 2px; background: var(--border-2); }
.mp-timeline-dots { display: flex; gap: 32px; position: relative; }
.mp-timeline-dot { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; min-width: 100px; }
.mp-timeline-dot .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--accent); }
.mp-timeline-dot.start .dot { background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.mp-timeline-dot.future .dot { background: var(--surface); box-shadow: 0 0 0 1px var(--border-strong); }
.mp-timeline-date { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.mp-timeline-label { font-size: 10px; color: var(--ink-4); }
.mp-timeline-amount { font-size: 12px; color: var(--ink); font-weight: 700; margin-top: 2px; }
.mp-timeline-amount.placeholder { color: var(--ink-5); font-weight: 500; font-style: italic; }
.mp-timeline-future-label { color: var(--accent); font-weight: 700; }

.mp-period-details summary { cursor: pointer; list-style: none; }
.mp-period-details summary::-webkit-details-marker { display: none; }
.mp-period-details summary::marker { content: ''; }
.mp-raises-list { border-top: 1px dashed var(--border); padding-top: 16px; }
.mp-raises-list-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mp-raises-list-title h3 { font-size: 12px; font-weight: 600; color: var(--ink-3); margin: 0; }
.mp-add-raise-btn { padding: 5px 12px; border-radius: var(--radius-sm); background: var(--ink); color: var(--side-ink); border: none; font-family: inherit; font-size: 12px; cursor: pointer; }
.mp-add-raise-btn:hover { background: var(--ink-2); }
.mp-raise-row { display: grid; grid-template-columns: 110px 1fr 140px 100px 32px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); }
.mp-raise-row:last-child { border-bottom: none; }
.mp-raise-row.future { background: linear-gradient(95deg, #FBF1DC 0%, transparent 100%); margin: 0 -10px; padding: 8px 10px; border-radius: var(--radius-sm); border-bottom: none; }
.mp-raise-date { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.mp-raise-label { font-size: 13px; color: var(--ink); }
.mp-raise-amount-cell { font-size: 13px; color: var(--ink); font-weight: 700; text-align: end; }
.mp-raise-amount-cell.placeholder { color: var(--ink-5); font-style: italic; font-weight: 500; }
.mp-raise-tag { font-size: 10px; padding: 2px 8px; border-radius: 999px; background: var(--bg-3); color: var(--ink-3); justify-self: end; }
.mp-raise-tag.future { background: var(--pr-med-bg); color: var(--pr-med); }
.mp-raise-tag.start { background: var(--ink); color: var(--side-ink); }

.mp-reminder { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; background: linear-gradient(95deg, #FBF1DC 0%, #FFFDF6 100%); border: 1px solid #E8C879; border-radius: var(--radius); margin-bottom: 16px; }
.mp-reminder-icon { font-size: 20px; }
.mp-reminder-body { flex: 1; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.mp-reminder-body strong { color: var(--ink); }

.mp-task-row { display: grid; grid-template-columns: 8px 1fr 100px 120px 32px; gap: 12px; padding: 10px 12px; align-items: center; border-bottom: 1px solid var(--border); font-size: 13px; cursor: pointer; }
.mp-task-row:hover { background: var(--bg-2); }
.mp-task-row:last-child { border-bottom: none; }
.mp-task-pri { width: 8px; height: 28px; border-radius: 2px; }
.mp-task-pri.high { background: var(--pr-high); }
.mp-task-pri.med  { background: var(--pr-med); }
.mp-task-pri.low  { background: var(--pr-low); }
.mp-task-title { font-weight: 500; color: var(--ink); }
.mp-task-proj { color: var(--ink-3); font-size: 12px; }
.mp-task-deadline { color: var(--ink-3); font-size: 12px; text-align: end; }
.mp-task-week { color: var(--ink-4); font-size: 11px; text-align: center; }

@media (max-width: 880px) {
  .mp-info-grid { grid-template-columns: repeat(2, 1fr); }
  .mp-salary-tiles { grid-template-columns: 1fr; }
  .mp-edit-grid { grid-template-columns: 1fr; }
}

/* ─── LVT subsidiary visuals (spec §5) ─────────────────────────────────── */

/* Mini-tag — appears next to project name in MIXED-context lists only */
.lvt-mini-tag {
  display: inline-flex; align-items: center;
  padding: 1px 5px; border-radius: 3px;
  font-size: 9.5px; font-weight: 700;
  background: var(--lvt-bg); color: var(--lvt-ink);
  margin-inline-start: 8px;
  letter-spacing: 0.04em;
}

/* ProjectsList — collapsible LVT group row */
.lvt-group-row {
  display: grid;
  grid-template-columns: 70px 1fr 80px;
  gap: 0;
  padding: 14px 16px;
  background: var(--lvt-bg);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  align-items: center;
  cursor: pointer;
  position: relative;
  scroll-margin-top: 140px;
}
.lvt-group-row:hover { background: #DDE6ED; }
.lvt-group-row::before {
  content: ''; position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 3px; background: var(--lvt);
}
.lvt-group-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; border-radius: 5px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--lvt); color: #fff; letter-spacing: 0.04em;
}
.lvt-group-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--lvt-ink); font-size: 14px; }
.lvt-group-title-sub { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.lvt-group-count {
  font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 6px; justify-content: flex-start;
}

/* LVT child row in mixed projects-list */
.proj-table-row--lvt-child { background: #FBFCFD; position: relative; }
.proj-table-row--lvt-child::before {
  content: ''; position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 3px; background: var(--lvt); opacity: 0.4;
}

/* ProjectView LVT badge — sits next to the project number in the hero */
.pv-lvt-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  background: var(--lvt); color: #fff;
  padding: 1px 6px; border-radius: 4px;
  margin-inline-start: 8px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.pv-orphan-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700;
  background: var(--ink-3); color: #fff;
  padding: 1px 6px; border-radius: 4px;
  margin-inline-start: 8px;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.proj-hero-num-badge--orphan { color: var(--ink-4); background: var(--bg-3); border-color: var(--border); font-weight: 500; }
.proj-hero-num-wrap { position: relative; flex-shrink: 0; }
.proj-hero-num-error {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0;
  background: #c0392b; color: #fff;
  padding: 6px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(192,57,43,0.3);
  z-index: 10;
  animation: pn-err-pop 0.2s ease-out;
}
.proj-hero-num-error::before {
  content: ''; position: absolute; top: -5px; inset-inline-start: 16px;
  width: 10px; height: 10px; background: #c0392b;
  transform: rotate(45deg);
}
@keyframes pn-err-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

/* Sidebar — collapsible LVT subsection for unscoped users */
.side-lvt-section {
  border-top: 1px solid var(--side-border);
  margin-top: 16px;
  padding-top: 8px;
  flex-shrink: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.side-lvt-header {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 12px 14px;
  color: var(--side-ink-2);
  font-size: 12.5px;
  cursor: pointer;
  border: none; background: none; width: 100%;
  text-align: right; font-family: inherit;
}
.side-lvt-header:hover { background: var(--side-bg-2); color: var(--side-ink); }
.side-lvt-header-badge {
  background: var(--lvt); color: #fff;
  padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
}
.side-lvt-list { padding: 0 8px 10px; overflow-y: auto; max-height: 240px; }
.side-project--lvt .side-project-dot { background: var(--lvt) !important; }

/* Sidebar variant for scope=LVT users — steel-blue accent above project section */
body.app--scope-lvt .side-projs-wrap { border-top: 2px solid var(--lvt); margin-top: 4px; padding-top: 4px; }
.side-logo--lvt { background: var(--lvt); }

/* Gantt — LVT marker on task chip (stripe + pip) */
.g2-task--lvt {
  box-shadow: inset 3px 0 0 0 var(--lvt);
  padding-right: 11px;
}
.g2-lvt-pip {
  display: inline-flex; align-items: center;
  font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(255,255,255,0.85); color: var(--lvt-ink);
  padding: 1px 4px; border-radius: 2px;
  margin-inline-start: 2px;
}
/* For scope=LVT users — hide the pip (stripe stays, spec §5.4) */
body.app--scope-lvt .g2-lvt-pip { display: none; }

/* =====================================================   Bug report widget
   ============================================================ */

/* FAB (topbar) */
.bug-fab {
  background: transparent; border: none; cursor: pointer;
  padding: 6px; border-radius: 6px; color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.bug-fab:hover { background: var(--bg-2); color: var(--ink-1); }

/* ───────────────────────────── Consulting Revenue tab ──────────────────── */
.consulting-toolbar { display: flex; justify-content: flex-end; padding: 12px 32px; }
.consulting-toolbar .btn.primary {
  background: var(--accent); color: #fff; border: none;
  padding: 8px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;
}
.consulting-toolbar .btn.primary:hover { background: #993a23; }

.consulting-table th { text-align: right; padding: 10px 14px; font-weight: 600; color: var(--ink-2); }
.consulting-table td { padding: 10px 14px; border-top: 1px solid var(--border); }
.consulting-row:hover { background: var(--bg-2); }
.consulting-row-draft { background: rgba(212, 167, 58, 0.06); }
.consulting-row-editing { background: rgba(180, 165, 130, 0.08); }

.consulting-row input[type="text"],
.consulting-row input[type="date"],
.consulting-row input[type="number"],
.consulting-row select,
.consulting-row-draft input[type="text"],
.consulting-row-draft input[type="date"],
.consulting-row-draft input[type="number"],
.consulting-row-draft select {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--border, #d8d0c0); border-radius: 4px;
  font: inherit; box-sizing: border-box; background: var(--bg-1);
}

.consulting-desc { color: var(--ink-2); max-width: 360px; overflow: hidden; text-overflow: ellipsis; }
.consulting-amount { font-family: var(--font-mono, monospace); font-weight: 600; }

.consulting-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

.consulting-actions { white-space: nowrap; text-align: left; }
.consulting-actions > * { opacity: 0; transition: opacity 0.15s; }
.consulting-row:hover .consulting-actions > *,
.consulting-row-editing .consulting-actions > *,
.consulting-row-draft .consulting-actions > * { opacity: 1; }
.consulting-edit, .consulting-delete {
  background: transparent; border: 1px solid var(--border); cursor: pointer;
  padding: 6px 12px; font-size: 12px; color: var(--ink-3);
  border-radius: 4px; font-family: inherit; margin-inline-start: 4px;
}
.consulting-edit:hover { background: var(--bg-2); color: var(--ink-1); }
.consulting-delete { color: var(--accent); border-color: rgba(181,67,42,0.3); }
.consulting-delete:hover { background: rgba(181,67,42,0.1); color: var(--accent); }

.consulting-save {
  background: #2a5a3a !important; color: #fff; border: none;
  padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; margin-inline-end: 4px;
}
.consulting-save:hover { background: #1e4429 !important; }
.consulting-cancel {
  background: transparent; color: var(--ink-3); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 12px;
}
.consulting-cancel:hover { color: var(--ink-1); background: var(--bg-2); }

/* Minimal text-only topbar link to bug review queue (replaces sidebar entry) */
.bugs-nav-link {
  background: transparent; border: none; cursor: pointer;
  padding: 6px 10px; border-radius: 6px;
  color: var(--ink-3); font-size: 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.bugs-nav-link:hover { color: var(--ink-1); background: var(--bg-2); }
.bugs-nav-link-text { letter-spacing: 0.01em; }
.bugs-nav-link-count {
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 8px; line-height: 1.4;
}


/* Mark mode overlay */
.bug-mark-portal { position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.bug-mark-portal > * { pointer-events: auto; }
.bug-mark-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.12); cursor: crosshair;
}
.bug-mark-banner {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  background: var(--bg-1, #faf6ee); color: var(--ink-1, #1a1612);
  border: 1px solid var(--border, #d8d0c0); border-radius: 8px;
  padding: 10px 18px; font-size: 14px;
  display: flex; gap: 10px; align-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.bug-mark-sep { color: var(--ink-3, #888); }
.bug-mark-link {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--accent, #b5432a); font: inherit; text-decoration: underline;
}
.bug-mark-outline {
  position: fixed; pointer-events: none;
  outline: 2px solid var(--accent, #b5432a); outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(181, 67, 42, 0.15);
  border-radius: 2px; z-index: 10000;
}
.bug-mark-pin {
  position: absolute; top: -10px; right: -10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent, #b5432a); color: white;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid white;
}

/* Bug form popup */
.bug-form-popup {
  position: fixed; width: 360px;
  background: var(--bg-1, #faf6ee);
  border: 1px solid var(--border, #d8d0c0);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 14px; z-index: 10001;
  display: flex; flex-direction: column; gap: 10px;
}
.bug-form-header { font-size: 14px; font-weight: 600; color: var(--ink-1); }
.bug-form-textarea {
  width: 100%; min-height: 80px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px;
  font: inherit; resize: vertical; box-sizing: border-box;
}
.bug-form-checkbox {
  font-size: 12px; color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
}
.bug-form-error {
  font-size: 12px; color: var(--accent);
  background: rgba(181, 67, 42, 0.08);
  padding: 6px 8px; border-radius: 4px;
}
.bug-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.bug-form-popup .btn-primary {
  background: var(--accent, #b5432a); color: white; border: none;
  padding: 8px 14px; border-radius: 6px; cursor: pointer;
}
.bug-form-popup .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.bug-form-popup .btn-ghost {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 6px; cursor: pointer;
}

/* Review queue */
.bug-queue {
  padding: 24px;
  max-width: 800px;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
}
.bug-queue-header { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.bug-queue-header h2 { margin: 0; font-size: 20px; color: var(--ink-1); }
.bug-queue-count {
  background: var(--accent); color: white;
  font-size: 12px; padding: 2px 10px; border-radius: 10px;
}
.bug-queue-empty {
  padding: 60px 24px; text-align: center;
  color: var(--ink-3); font-size: 14px;
}
.bug-queue-loading, .bug-queue-error { padding: 24px; color: var(--ink-3); }
.bug-queue-error { color: var(--accent); }

.bug-card {
  background: var(--bg-1, #faf6ee);
  border: 1px solid var(--border, #d8d0c0);
  border-radius: 8px;
  padding: 14px; margin-bottom: 12px;
}
.bug-card-meta {
  display: flex; gap: 8px; align-items: center;
  font-size: 11px; color: var(--ink-3); margin-bottom: 8px;
}
.bug-card-who { color: var(--ink-2); }
.bug-card-sub { color: var(--ink-3); font-style: italic; }
.bug-card-desc { color: var(--ink-1); font-size: 14px; margin-bottom: 8px; white-space: pre-wrap; }
.bug-card-where {
  font-size: 12px; color: var(--ink-3); margin-bottom: 10px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.bug-card-goto {
  background: var(--bg-2); border: 1px solid var(--border);
  color: var(--ink-2); padding: 3px 8px; border-radius: 4px;
  font: inherit; cursor: pointer; font-size: 11px;
}
.bug-card-goto:hover { background: var(--bg-3); color: var(--ink-1); }
.bug-card-selector {
  background: var(--bg-2); padding: 2px 6px; border-radius: 3px;
  color: var(--accent); font-size: 11px;
}
.bug-card-shot { display: block; margin: 10px 0; }
.bug-card-shot img {
  max-width: 100%; max-height: 200px;
  border: 1px solid var(--border); border-radius: 4px;
  object-fit: contain; background: var(--bg-2);
}
.bug-card-errors { margin-top: 8px; font-size: 11px; }
.bug-card-errors-toggle {
  background: none; border: none; padding: 0;
  color: var(--ink-3); cursor: pointer; font: inherit;
}
.bug-card-errors-list {
  background: #1a1612; color: #d4cfc4;
  padding: 8px 10px; border-radius: 4px;
  font-size: 10px; max-height: 200px; overflow: auto;
  white-space: pre-wrap; margin-top: 6px;
}

.bug-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10px; letter-spacing: 0.3px;
}
.badge-fresh      { background: var(--accent); color: white; }
.badge-processing { background: var(--bg-3); color: var(--ink-2); }
.badge-manual     { background: var(--bg-2); color: var(--ink-3); }
.badge-resolved   { background: transparent; color: #2a5a3a; border: 1px solid #2a5a3a; }
.badge-failed     { background: rgba(181,67,42,0.2); color: var(--accent); }
.badge-default    { background: var(--bg-3); color: var(--ink-3); }

.bug-queue-resolved { margin-top: 24px; }
.bug-queue-resolved summary {
  cursor: pointer; font-size: 13px; color: var(--ink-3);
  padding: 8px; border-radius: 4px;
}

.bug-card-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border, #d8d0c0);
}
.bug-card-resolve {
  background: #2a5a3a; color: white; border: none;
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font-size: 12px;
}
.bug-card-resolve:hover { background: #1e4429; }
.bug-card-resolve:disabled { opacity: 0.5; cursor: not-allowed; }

/* ───────────────────────────── Wave 3 — review-queue UI ───────────────── */

.badge-review          { background: #fff3d4; color: #6b4500; }
.badge-merging         { background: #ffeb99; color: #6b4500; }
.badge-pending-deploy  { background: #d4ebff; color: #2a4a6e; }
.badge-retry           { background: var(--bg-3); color: var(--ink-2); margin-inline-start: 4px; }

.bug-card-pending-review        { border-right: 3px solid #d4a73a; }
.bug-card-merging               { border-right: 3px solid #d4a73a; }
.bug-card-merged-pending-deploy { border-right: 3px solid #4a7eb5; }
.bug-card-manual                { border-right: 3px solid var(--ink-3); }
.bug-card-failed                { border-right: 3px solid var(--accent); }

.bug-card-retry-note,
.bug-card-manual-reason {
  background: var(--bg-2);
  border-right: 3px solid var(--accent);
  padding: 8px 10px;
  margin: 6px 0;
  font-size: 12px;
  border-radius: 4px;
  color: var(--ink-2);
}
.bug-card-retry-note strong,
.bug-card-manual-reason strong { color: var(--ink-1); }

.bug-card-summary {
  background: var(--bg-2);
  border: 1px solid var(--border, #d8d0c0);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0;
  font-size: 13px;
  color: var(--ink-1);
}
.bug-card-summary-warning {
  background: rgba(212, 167, 58, 0.12);
  color: #6b4500;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 8px;
}
.bug-card-summary-body { white-space: pre-wrap; line-height: 1.5; }

.bug-card-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.bug-card-link {
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  background: var(--bg-2);
  color: var(--ink-1);
  border: 1px solid var(--border, #d8d0c0);
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none;
}
.bug-card-link:hover { background: var(--bg-3); }
.bug-card-preview { font-weight: 600; }
.bug-card-pr { color: var(--ink-2); }

.btn-approve {
  background: #2a5a3a; color: white; border: none;
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 600;
}
.btn-approve:hover { background: #1e4429; }
.btn-approve:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-reject {
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent);
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font-size: 12px;
}
.btn-reject:hover { background: rgba(181,67,42,0.08); }
.btn-reject:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-deployed {
  background: #4a7eb5; color: white; border: none;
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font-size: 12px; font-weight: 600;
}
.btn-deployed:hover { background: #3a6694; }
.btn-deployed:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-retry-failed {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--border, #d8d0c0);
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  font-size: 12px;
}
.btn-retry-failed:hover { background: var(--bg-2); }
.btn-retry-failed:disabled { opacity: 0.5; cursor: not-allowed; }

/* ───────────────────────────── RejectBugFixModal ───────────────────────── */

.bug-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 10100;
  display: flex; align-items: center; justify-content: center;
}
.bug-modal {
  background: var(--bg-1, #faf6ee);
  border: 1px solid var(--border, #d8d0c0);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.2);
  padding: 18px;
  width: 460px;
  max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 12px;
}
.bug-modal-header { font-size: 16px; font-weight: 700; color: var(--ink-1); }
.bug-modal-hint   { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.bug-modal-textarea {
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border: 1px solid var(--border, #d8d0c0);
  border-radius: 6px;
  font: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.bug-modal-error {
  font-size: 12px;
  color: var(--accent);
  background: rgba(181,67,42,0.08);
  padding: 6px 10px;
  border-radius: 4px;
}
.bug-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.bug-modal .btn-retry {
  background: var(--accent); color: white; border: none;
  padding: 8px 16px; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-weight: 600;
}
.bug-modal .btn-retry:hover { background: #993a23; }
.bug-modal .btn-retry:disabled { opacity: 0.5; cursor: not-allowed; }
.bug-modal .btn-manual {
  background: var(--bg-2); color: var(--ink-1);
  border: 1px solid var(--border, #d8d0c0);
  padding: 8px 16px; border-radius: 6px; cursor: pointer;
  font-size: 13px;
}
.bug-modal .btn-manual:hover { background: var(--bg-3); }
.bug-modal .btn-manual:disabled { opacity: 0.5; cursor: not-allowed; }
.bug-modal .btn-ghost {
  background: transparent; color: var(--ink-3);
  border: none; padding: 8px 12px;
  cursor: pointer; font-size: 13px;
}
.bug-modal .btn-ghost:hover { color: var(--ink-1); }

/* ════════════════════════════════════════════════════════════════════
   INVOICE OVERLAY (Meital) — full-screen invoice management
   Ported from output/invoice-mockup.html. Shell + KPI + toolbar (Task 3).
   Buttons/pill namespaced .iv-btn/.iv-pill to avoid app .btn/.pill collisions.
   ════════════════════════════════════════════════════════════════════ */

/* ── Overlay shell ── */
.ov-scrim{position:fixed;inset:0;z-index:1000;background:rgba(31,27,22,.45);
   display:flex;align-items:flex-start;justify-content:center;padding:32px 24px}
.ov{width:min(1280px,96vw);height:calc(100vh - 64px);background:var(--bg);border:1px solid var(--border-2);
   border-radius:var(--radius-lg);box-shadow:var(--shadow-3);display:flex;flex-direction:column;overflow:hidden}
.ov-head{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--border);background:var(--surface)}
.ov-head h1{font-size:17px;font-weight:700;letter-spacing:-.01em}
.ov-head .sub{color:var(--ink-4);font-size:12px}
.ov-close{margin-inline-start:auto;width:30px;height:30px;border:1px solid var(--border-2);background:var(--surface);
   border-radius:var(--radius);font-size:17px;color:var(--ink-3);cursor:pointer;line-height:1}
.ov-close:hover{background:var(--bg-2)}

/* ── KPI strip ── */
.kpis{display:flex;gap:12px;padding:14px 22px;background:var(--surface);border-bottom:1px solid var(--border)}
.kpi{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:12px 15px;
   font-variant-numeric:tabular-nums}
.kpi.grow{flex:2.2}
.kpi-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.kpi-top .lab{font-size:13.5px;color:var(--ink-3);font-weight:600}
.kpi-top .cnt2{font-size:12.5px;color:var(--ink-5)}
.kpi-amt{font-size:26px;font-weight:700;color:var(--ink);margin-top:8px;display:flex;align-items:baseline;gap:7px;letter-spacing:-.01em}
.kpi-amt .net-lab{font-size:12px;font-weight:500;color:var(--ink-5)}
.kpi-gross{font-size:12.5px;color:var(--ink-4);margin-top:3px}
.kpi-stuck{margin-top:11px;padding-top:9px;border-top:1px dashed var(--border-2);font-size:13px;color:var(--accent-2)}
.kpi-stuck b{font-weight:700}
.kpi-stuck .amt{font-size:12.5px;opacity:.9}

/* ── toolbar: tabs + grouping ── */
.ov-toolbar{display:flex;align-items:center;gap:18px;padding:12px 22px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.tabs{display:flex;gap:4px}
.tab{padding:7px 16px;border:none;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-4);
   cursor:pointer;border-bottom:2px solid transparent;position:relative}
.tab.active{color:var(--ink);border-bottom-color:var(--accent)}
.tab .cnt{display:inline-block;min-width:18px;padding:0 5px;margin-inline-start:6px;font-size:11px;border-radius:9px;
   background:var(--bg-3);color:var(--ink-3);font-weight:600;line-height:17px;text-align:center}
.tab.active .cnt{background:var(--accent);color:#fff}
.group-wrap{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.group-wrap .lab{font-size:12px;color:var(--ink-4)}
.seg{display:flex;border:1px solid var(--border-2);border-radius:var(--radius);overflow:hidden}
.seg button{padding:6px 12px;border:none;background:var(--surface);font-family:inherit;font-size:12px;color:var(--ink-3);cursor:pointer}
.seg button+button{border-inline-start:1px solid var(--border-2)}
.seg button.active{background:var(--ink);color:var(--bg)}
.search{padding:7px 11px;border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);
   font-family:inherit;font-size:12px;width:200px}

/* ── list area ── */
.ov-body{flex:1;overflow-y:auto;padding:16px 22px 28px}
.grp{margin-bottom:18px}
.grp-head{display:flex;align-items:center;gap:10px;padding:7px 4px;margin-bottom:7px;border-bottom:1px solid var(--border-2)}
.grp-head .gname{font-weight:700;font-size:13.5px}
.grp-head .gmeta{color:var(--ink-4);font-size:12px}
.grp-head .gsum{margin-inline-start:auto;font-weight:700;font-size:13px}
.grp-head .gsum small{color:var(--ink-4);font-weight:500;font-size:11px}
.ov-empty{text-align:center;color:var(--ink-4);padding:60px 20px;font-size:14px}

/* ── Invoice card — two zones: descriptive (right) + framed money panel (left) (Task 4) ── */
.inv{display:grid;grid-template-columns:1fr 216px;align-items:stretch;background:var(--surface);
   border:1px solid var(--border);border-radius:var(--radius);margin-bottom:9px;overflow:hidden;position:relative;contain:paint}
.inv.flag{border-color:#E7C4BC}
.inv.flag::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--accent);z-index:2;pointer-events:none}
.inv-main{min-width:0;padding:13px 16px}
.inv-proj{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pnum{font-weight:700;font-size:13px;background:var(--bg-3);color:var(--ink-2);padding:1px 7px;border-radius:var(--radius-sm)}
.pname{font-weight:600;font-size:14px}
.client-chip{font-size:11.5px;color:var(--ink-3);background:var(--bg-2);border:1px solid var(--border);padding:1px 8px;border-radius:20px}
.hdr-badge{margin-inline-start:auto;font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;
   background:var(--bg-3);color:var(--ink-4);white-space:nowrap}
.hdr-badge.stuck{background:var(--pr-high-bg);color:var(--accent-2)}
.inv-contract{font-size:12.5px;color:var(--ink-2);margin-top:6px}
.inv-contract b,.inv-stage b{font-weight:700}
.inv-stage{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.inv-div{border:none;border-top:1px solid var(--border);margin:9px 0}
.inv-details{display:flex;flex-wrap:wrap;gap:7px 12px;align-items:center;font-size:12px;color:var(--ink-4)}
.inv-details .iv-pill{background:var(--bg-3);color:var(--ink-2);font-weight:600;padding:1px 9px;border-radius:20px}
.inv-fields{margin-top:9px;line-height:30px}
.field{display:inline;margin-inline-end:20px;font-size:12px;white-space:nowrap}
.field label{color:var(--ink-5);font-size:11px;margin-inline-end:6px}
.field input{border:1px solid var(--border);border-radius:var(--radius-sm);padding:3px 8px;font-family:inherit;font-size:12px;background:var(--surface-2)}
.field input.num{width:104px}
.contact{font-size:12px;color:var(--ink-3);white-space:nowrap}
.contact .phone{direction:ltr;color:var(--ink-4)}
.contact.empty{color:var(--ink-4);cursor:pointer}
.contact.empty:hover{color:var(--accent)}
.note-box{display:flex;align-items:center;gap:7px;margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
.note-box .ic{color:var(--ink-5);font-size:12px}
.note-box input{flex:1;border:1px dashed var(--border-2);border-radius:var(--radius-sm);padding:5px 9px;
   font-family:inherit;font-size:12px;background:none;color:var(--ink-3)}

/* ── left: framed money + action panel ── */
.pay-panel{background:var(--bg-2);border-inline-start:1px solid var(--border);padding:13px 15px;
   display:flex;flex-direction:column;font-variant-numeric:tabular-nums}
.pp-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--ink-4);padding:2px 0}
.pp-row b{color:var(--ink-2);font-weight:600}
.pp-row.total{border-top:1px solid var(--border-2);margin-top:5px;padding-top:6px;font-size:15px;color:var(--ink)}
.pp-row.total b{font-weight:700;color:var(--ink)}
.pp-paid{font-size:12px;margin-top:9px}
.pp-paid .rem{color:var(--accent-2);font-weight:600}
.pp-paid .netnote{display:block;color:var(--ink-4);font-size:11px;margin-top:2px}
.pay-panel.paid{justify-content:flex-start}
.pp-net{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pp-net .pp-net-lab{font-size:11px;color:var(--ink-4)}
.pp-net b{font-size:19px;font-weight:700;color:var(--ink)}
.pp-gross{font-size:11.5px;color:var(--ink-4);margin-top:3px}
.ps.none{color:var(--ink-5)}
.ps.full{color:#16a34a;font-weight:700}
.pp-bar{height:5px;border-radius:3px;background:var(--bg-3);overflow:hidden;margin-top:5px}
.pp-bar > i{display:block;height:100%;background:#16a34a}
.pp-actions{margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:6px}
.pp-form{display:flex;flex-direction:column;gap:7px}
.pp-form label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--ink-4)}
.pp-form input{border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:5px 8px;font-family:inherit;font-size:12px;background:var(--surface)}
.pp-form input.err{border-color:var(--accent);background:var(--pr-high-bg)}
.pp-form-btns{display:flex;gap:6px;margin-top:2px}
.pp-form-btns .iv-btn{flex:1;padding:6px 8px}
.pp-paidfull{background:var(--pr-low-bg);color:#16a34a;border:1px solid #BFE0CC;border-radius:var(--radius);
   text-align:center;font-weight:700;font-size:12.5px;padding:9px}
.pp-done{font-size:12px;color:#16a34a;font-weight:600;line-height:1.55;text-align:center;padding:8px 4px}
.pp-done small{display:block;color:var(--ink-4);font-weight:400;margin-top:2px}
.inv.moved{opacity:.55}
.iv-btn{font-family:inherit;font-size:12px;font-weight:600;padding:7px 10px;border-radius:var(--radius);cursor:pointer;border:1px solid var(--border-2);background:var(--surface);color:var(--ink-2);text-align:center}
.iv-btn:hover{background:var(--bg)}
.iv-btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.iv-btn.ok{background:#16a34a;color:#fff;border-color:#16a34a}
/* inline client-contact editor */
.iv-contact-edit{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap;vertical-align:middle}
.iv-contact-edit input{width:96px;border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:3px 7px;font-family:inherit;font-size:12px;background:var(--surface)}
.iv-contact-edit .iv-btn{padding:4px 9px;font-size:11px}

/* ── Collapsed rows + company filter + uniform money column (2026-06-06 redesign) ── */
.ov{--money-w:400px}
/* company (subsidiary) filter in the header */
.ov-head .ov-close{margin-inline-start:12px}
.company-seg{margin-inline-start:auto;display:flex;border:1px solid var(--border-2);border-radius:var(--radius);overflow:hidden}
.company-seg button{padding:6px 14px;border:none;background:var(--surface);font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-4);cursor:pointer;display:flex;align-items:center;gap:6px}
.company-seg button+button{border-inline-start:1px solid var(--border-2)}
.company-seg button.active{background:var(--ink);color:#fff}
.company-seg button.lvt.active{background:var(--lvt);color:#fff}
.company-seg .cc{min-width:16px;padding:0 5px;font-size:10.5px;border-radius:8px;background:rgba(31,27,22,.10);line-height:16px;text-align:center;font-weight:600}
.company-seg button.active .cc{background:rgba(255,255,255,.22)}
/* title on top (right); below it the subtitle (right) + גריל/לבנטין toggle (left) share a 400px row,
   bottom-aligned, so the toggle's left edge lines up with the 400px search box below */
.proj-list-header .hdr-title-row{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.proj-list-header .hdr-sub-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;width:400px;max-width:100%;margin-top:4px}
/* with a toggle the row is toggle-height tall; pull it up so the subtitle keeps a normal gap under the title */
.proj-list-header .hdr-sub-row.has-toggle{margin-top:-11px}

/* new-client dialog (clients page) */
.cl-newclient-scrim{position:fixed;inset:0;z-index:95;background:rgba(31,27,22,.42);display:flex;align-items:flex-start;justify-content:center;padding-top:18vh}
.cl-newclient{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;width:360px;max-width:90vw;box-shadow:0 24px 64px rgba(31,27,22,.28),0 8px 24px rgba(31,27,22,.18)}
.cl-newclient-title{font-size:16px;font-weight:700;color:var(--ink);margin-bottom:12px}
.cl-newclient-input{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--border-2);border-radius:7px;background:var(--bg)}
.cl-newclient-input:focus{outline:none;border-color:var(--border-strong)}
.cl-newclient-actions{display:flex;gap:8px;margin-top:14px}
/* steel-blue accent when viewing Levantin */
.ov.lvt .tab.active{border-bottom-color:var(--lvt)}
.ov.lvt .tab.active .cnt{background:var(--lvt)}
.ov.lvt .kpi-amt{color:var(--lvt-ink)}

/* expanded card: fixed money column + clickable header + indented secondary text */
.ov .inv{grid-template-columns:1fr var(--money-w)}
.inv-proj{cursor:pointer}
.inv-proj .chev{font-size:11px;color:var(--ink-5);margin-inline-end:2px;display:inline-block}
.chev.up{transform:rotate(180deg)}
.pnum{direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.inv-contract,.inv-stage,.inv-details,.inv-fields,.note-box{padding-inline-start:70px}

/* collapsed row */
.crow{display:grid;grid-template-columns:1fr var(--money-w);align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px;overflow:hidden;position:relative;contain:paint}
.crow.flag{border-color:#E7C4BC}
.crow.flag::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--accent);z-index:2;pointer-events:none}
.crow-desc{display:grid;grid-template-columns:248px 190px 64px 92px 1fr;align-items:center;gap:9px;padding:0 16px;min-height:52px;cursor:pointer;user-select:none}
.crow-desc:hover{background:var(--surface-2)}
.crow-desc>*{min-width:0}
.crow-desc .cell{display:flex;align-items:center;min-width:0}
.crow-desc .cell.proj{gap:9px}
.crow-desc .cell.age{justify-self:end}
.crow .chev{color:var(--ink-5);font-size:11px;flex:none}
.crow .pnum{flex:none}
.crow .pname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600;font-size:14px}
.crow .client-chip{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .stagepill{font-size:11px;color:var(--ink-4);background:none;border:1px solid var(--border-2);padding:1px 8px;border-radius:20px;white-space:nowrap}
.crow .splitpill{font-size:11px;color:var(--ink-3);background:var(--bg-3);padding:1px 8px;border-radius:20px;font-weight:600;white-space:nowrap}
.crow .age{font-size:11px;color:var(--ink-4);white-space:nowrap}
/* זיכוי (credit) line — negative billable, read-only, visually muted with red accent */
.crow.credit{background:var(--surface-2);border-style:dashed}
.crow.credit .crow-desc{cursor:default}
.crow.credit .amt-net b{color:#C0392B}
.crow .stagepill.credit{color:#C0392B;border-color:#E7C4BC;background:rgba(192,57,43,.06);font-weight:600}
.crow .age.flag{color:var(--accent-2);font-weight:700}
.crow-money{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:8px 14px;border-inline-start:1px solid var(--border);background:var(--bg-2)}
.crow-money .amt-wrap{min-width:118px;text-align:start;line-height:1.15;font-variant-numeric:tabular-nums}
.crow-money .amt-net{display:flex;align-items:baseline;gap:5px}
.crow-money .amt-net b{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.crow-money .amt-net small{font-size:10.5px;color:var(--ink-5);font-weight:500}
.crow-money .amt-gross{font-size:10.5px;color:var(--ink-5);margin-top:1px}
.crow-money .cnum{display:flex;flex-direction:column;gap:2px;flex:none}
.crow-money .cnum label{font-size:9.5px;color:var(--ink-5)}
.crow-money .cnum input{width:88px;border:1px solid var(--border-2);border-radius:var(--radius-sm);padding:4px 7px;font-family:inherit;font-size:12px;background:var(--surface);font-variant-numeric:tabular-nums}
.crow-money .paiddate{font-size:12px;color:#16a34a;font-weight:600;white-space:nowrap}
.crow-money .iv-btn{flex:none}


/* ============================================================
   CLIENT POPUP (ClientOverlay) — ported from client-page-mockup.html
   Namespaced cl-* to avoid colliding with existing .tab/.btn rules.
   ============================================================ */

/* clients list row → navigates to popup */
.clients-row--nav { cursor: pointer; }

/* scrim */
.cl-scrim { position: fixed; inset: 0; background: rgba(31,27,22,.42); z-index: 90; }

/* overlay panel (full-screen popup over the list) */
.cl-overlay-wrap { position: fixed; inset: 0; z-index: 91; display: flex; justify-content: center; align-items: flex-start; padding: 32px 20px; overflow: hidden; }
.cl-overlay {
  position: relative; width: 100%; max-width: 960px; background: var(--bg);
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; max-height: calc(100vh - 64px);
  box-shadow: 0 24px 64px rgba(31,27,22,.28), 0 8px 24px rgba(31,27,22,.18);
}

/* overlay top bar — sticky (never scrolls) */
.cl-overlay .ov-top {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 24px 28px 18px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.cl-overlay .ov-name { font-size: 26px; font-weight: 700; color: var(--ink); margin: 0 0 12px; letter-spacing: -.2px; }
.cl-overlay .ov-close {
  flex: none; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-3); font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cl-overlay .ov-close:hover { background: var(--bg-2); color: var(--ink); border-color: var(--border-2); }

/* hero chips */
.cl-overlay .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-overlay .chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: 13px; font-size: 12.5px; font-weight: 600; }
.cl-overlay .chip--dark { background: var(--ink); color: #fff; }
.cl-overlay .chip--city { background: var(--surface); color: var(--ink-3); border: 1px solid var(--border); }

/* body — stacked flat sections; scrolls inside the panel while ov-top stays fixed */
.cl-overlay .ov-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 28px 32px; }
/* date inputs fill their column so labels + fields align (GoDateInput is an inline span by default) */
.cl-overlay .cl-field .go-date-wrap { display: flex; width: 100%; }
.cl-overlay .cl-field .go-date-text { flex: 1; min-width: 0; }
.cl-overlay .section { padding: 22px 0; border-bottom: 1px solid var(--border); }
.cl-overlay .section:last-child { border-bottom: none; padding-bottom: 4px; }
.cl-overlay .section-head { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 0 0 14px; letter-spacing: .01em; }

/* ===== FRAMEWORK ===== */
.cl-overlay .fw-block { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.cl-overlay .fw-titlerow { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.cl-overlay .fw-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.cl-overlay .fw-edit { margin-inline-start: auto; }
.cl-overlay .fw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
.cl-overlay .fw-meta .dot { color: var(--ink-5); }
.cl-overlay .fw-val { font-weight: 700; color: var(--ink-2); }
.cl-overlay .fw-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.cl-overlay .fw-link:hover { text-decoration: underline; }
.cl-overlay .fw-note { font-size: 12.5px; color: var(--ink-4); line-height: 1.55; }
.cl-overlay .fw-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cl-overlay .fw-empty-txt { font-size: 13.5px; color: var(--ink-4); }

/* add button */
.cl-overlay .btn-add {
  background: var(--surface); border: 1px solid var(--border-2); color: var(--ink-2);
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
}
.cl-overlay .btn-add:hover { border-color: var(--border-strong); background: var(--surface-2); }

/* status pills */
.cl-overlay .pill { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 11px; font-size: 12px; font-weight: 700; }
.cl-overlay .pill--ok { background: #E4F0E8; color: #4F8A6B; }
.cl-overlay .pill--muted { background: var(--bg-3); color: var(--ink-3); }

/* ===== CONTACTS ===== */
.cl-overlay .contact {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 13px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); margin-bottom: 10px;
}
.cl-overlay .contact-main { flex: 1; min-width: 0; }
.cl-overlay .contact-toprow { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.cl-overlay .contact-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.cl-overlay .badge-primary { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 9px; font-size: 10.5px; font-weight: 700; background: var(--accent); color: #fff; }
.cl-overlay .contact-role { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.cl-overlay .contact-resp { font-size: 12px; color: var(--ink-4); margin-top: 1px; }
.cl-overlay .contact-comm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 7px; font-size: 12.5px; }
.cl-overlay .contact-tel { color: var(--ink-2); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 5px; }
.cl-overlay .contact-mail { color: var(--accent); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.cl-overlay .contact-mail:hover { text-decoration: underline; }
.cl-overlay .contact-note { font-size: 11.5px; color: var(--ink-5); margin-top: 6px; line-height: 1.5; }
.cl-overlay .contact-edit { flex: none; background: none; border: none; cursor: pointer; color: var(--ink-5); font-size: 13px; padding: 4px; border-radius: 4px; line-height: 1; }
.cl-overlay .contact-edit:hover { color: var(--ink-2); background: var(--bg-3); }
.cl-overlay .cl-contact-actions { flex: none; display: flex; gap: 2px; }
.cl-overlay .contacts-foot { margin-top: 12px; }

/* ===== INLINE FORMS (framework + contacts) ===== */
.cl-overlay .cl-form { display: flex; flex-direction: column; gap: 12px; }
.cl-overlay .cl-field { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cl-overlay .cl-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.cl-overlay .cl-label { font-size: 11.5px; font-weight: 600; color: var(--ink-4); }
.cl-overlay .cl-input {
  font-family: inherit; font-size: 13px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm); padding: 7px 9px; width: 100%;
}
.cl-overlay .cl-input:focus { outline: none; border-color: var(--border-strong); }
.cl-overlay .cl-textarea { min-height: 56px; resize: vertical; line-height: 1.5; }
.cl-overlay .cl-filecur { font-size: 11.5px; color: var(--ink-4); margin-bottom: 4px; }
.cl-overlay .cl-check { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.cl-overlay .cl-form-actions { display: flex; gap: 8px; margin-top: 4px; }
.cl-overlay .cl-btn {
  font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: var(--radius);
  cursor: pointer; background: var(--surface); border: 1px solid var(--border-2); color: var(--ink-2);
}
.cl-overlay .cl-btn:hover { border-color: var(--border-strong); }
.cl-overlay .cl-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cl-overlay .cl-btn--primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.cl-overlay .cl-btn:disabled { opacity: .6; cursor: default; }
.cl-overlay .cl-contact-form { display: block; }

/* ===== PROJECTS — tabs (namespaced) ===== */
.cl-overlay .cl-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin: 0 0 16px; }
.cl-overlay .cl-tab {
  background: none; border: none; padding: 8px 16px; font-family: inherit; font-size: 13.5px; font-weight: 500;
  color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cl-overlay .cl-tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.cl-overlay .cl-tab-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 5px;
  border-radius: 9px; font-size: 11px; font-weight: 600; background: var(--bg-3); color: var(--ink-3); margin-inline-start: 6px;
}
.cl-overlay .cl-tab.active .cl-tab-count { background: var(--accent); color: #fff; }

/* projects table */
.cl-overlay .cl-proj-table { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-1); }
.cl-overlay .cl-proj-table table { width: 100%; border-collapse: collapse; }
.cl-overlay .cl-proj-table thead th {
  text-align: right; font-size: 11px; font-weight: 700; color: var(--ink-5); letter-spacing: .03em;
  padding: 11px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.cl-overlay .cl-proj-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--ink-2); vertical-align: middle; }
.cl-overlay .cl-proj-table tbody tr:last-child td { border-bottom: none; }
.cl-overlay .cl-proj-table tbody tr:hover { background: var(--surface-2); }
.cl-overlay .cl-proj-table .c-num { width: 54px; color: var(--ink-5); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.cl-overlay .cl-proj-table .c-name { font-weight: 600; color: var(--ink); }
.cl-overlay .cl-proj-table .c-chev { width: 24px; text-align: left; color: var(--ink-5); }
.cl-overlay .cl-proj-table.past td { color: var(--ink-3); }
.cl-overlay .cl-proj-table.past .c-name { color: var(--ink-2); }

/* ===== two-line money line (account status) ===== */
.cl-overlay .money { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cl-overlay .money .money-paid { color: var(--ink-2); font-weight: 700; font-size: 14px; }
.cl-overlay .money .money-of { color: var(--ink-4); font-size: 12px; }
.cl-overlay .acct { display: flex; align-items: center; gap: 12px; width: 100%; }
.cl-overlay .acct-right { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cl-overlay .acct-left { display: inline-flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.cl-overlay .open-amt { color: #b45309; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== stage billing UI (2026-06-06) — all scoped under .sbv ===== */
/* Color tokens for stage-billing. No collision with existing --prog/--paid/--billed/--empty (none defined). */
/* --ink2/--ink3/--bg2 are no-hyphen aliases used by the approved mockup; defined here so scoped rules resolve regardless of app token naming. */
:root{
  --paid:#4E4840;          /* dark gray: paid & closed */
  --billed:#2F6B4F;        /* green: invoiced, awaiting payment */
  --prog:#B23A2E;          /* red: done, needs invoice */
  --prog-dk:#8A2A20;       /* darker red: drag handle */
  --empty:#DAD4C8;         /* light gray: not started */
}
.sbv{
  --bg2:#F2ECE1; --line:#E6DBC9;
  --ink2:#6B6253; --ink3:#A29985;
  --shadow:0 1px 2px rgba(33,29,23,.06),0 2px 10px rgba(33,29,23,.05);
}

/* ===== contract ===== */
.sbv .contract{background:var(--surface);border:1px solid var(--line);border-radius:13px;
      box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.sbv .c-head{display:flex;align-items:center;gap:14px;padding:15px 18px;cursor:pointer;user-select:none}
.sbv .c-head:hover{background:#FCFAF4}
.sbv .c-chev{color:var(--ink3);font-size:13px;transition:transform .15s;flex:none}
.sbv .contract.open .c-chev{transform:rotate(90deg)}
.sbv .c-title{flex:none;min-width:150px}
.sbv .c-title .t{font-weight:600;font-size:14.5px}
.sbv .c-title .v{font-size:12px;color:var(--ink2)}

/* glance: each STAGE = its own separated segment, filled by state */
/* breathing room between the contract header and the collapsed glance bar */
.sbv .glance{flex:1;min-width:0;margin-top:16px}
.sbv .gbar{display:flex;height:24px;gap:3px;border-radius:6px;overflow:hidden}
.sbv .gseg{position:relative;background:var(--empty);overflow:hidden;border-radius:3px;min-width:6px}
.sbv .gseg .gf{position:absolute;top:0;bottom:0;right:0}
.sbv .gf.prog{background:var(--prog);z-index:1}
.sbv .gf.billed{background:var(--billed);z-index:2}
.sbv .gf.paid{background:var(--paid);z-index:3}
.sbv .gseg .ginv{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--ink);z-index:4}
.sbv .gsum{font-size:11.5px;color:var(--ink2);margin-top:6px;display:flex;gap:12px;flex-wrap:wrap}
.sbv .gsum .pd{color:var(--paid);font-weight:600}.sbv .gsum .bl{color:var(--billed);font-weight:600}.sbv .gsum .gp{color:var(--prog);font-weight:600}
.sbv .c-right{flex:none;text-align:left;min-width:88px}
.sbv .c-right .big{font-weight:700;font-size:15px}
.sbv .c-right .lbl{font-size:11px;color:var(--ink3)}

/* completed-work % beside the always-on glance bar (Adar's at-a-glance signal) */
.sbv .cglance-row{display:flex;align-items:flex-start;gap:14px}
.sbv .cglance-bar{flex:1;min-width:0}
.sbv .cglance-pct{flex:none;text-align:left;min-width:58px;margin-top:16px}
.sbv .cglance-pct .big{font-weight:700;font-size:18px;color:var(--ink);line-height:1.05}
.sbv .cglance-pct .lbl{font-size:11px;color:var(--ink3);margin-top:1px}

/* ===== operate (expanded) ===== */
.sbv .ops{border-top:1px solid var(--line);background:#FCFAF4;padding:8px 10px 14px;display:none}
.sbv .contract.open .ops{display:block}
/* breathing room between the contract header and the first bar/stage in operate view */
.sbv .contract.open .ops > :first-child{margin-top:16px}
.sbv .ops-hd{font-size:11.5px;color:var(--ink3);padding:10px 8px 6px;display:flex;align-items:center;gap:6px}

/* collapsed "handled stages" summary — header + body share one frame */
.sbv .handled-group{background:var(--bg);border:1px solid var(--line);border-radius:9px;margin:0 18px 6px;overflow:hidden}
.sbv .handled{display:flex;align-items:center;gap:9px;padding:11px 20px;font-size:12.5px;color:var(--ink2);cursor:pointer}
.sbv .handled:hover{background:var(--bg-3)}
.sbv .handled .chev{color:var(--ink3);transition:transform .15s}
.sbv .handled-group.open .chev{transform:rotate(90deg)}
.sbv .handled-group.open .handled{border-bottom:1px solid var(--line)}
.sbv .handled b{color:var(--ink)} .sbv .handled .pd{color:var(--paid);font-weight:600}.sbv .handled .bl{color:var(--billed);font-weight:600}
.sbv .handled-body{display:none;padding:4px 10px} .sbv .handled-group.open .handled-body{display:block}
.sbv .handled-body .srow + .srow{border-top:1px solid var(--line)}

/* Flat 1→N redesign: EVERY stage is its own white card so it pops on the bg-2
   contract body. Active card = stronger shadow + extra inline-end padding; its
   title row is pulled back so %/₪ stay aligned with the other cards. done/ns muted. */
.sbv .srow{position:relative;padding:12px 16px;border-radius:8px;background:#fff;
  border:1px solid var(--border);box-shadow:0 1px 2px rgba(31,27,22,.05)}
.sbv .srow.act{box-shadow:0 3px 12px rgba(31,27,22,.12)}
.sbv .srow.done .srow-stage-name,.sbv .srow.done .srow-meta .amt{color:var(--ink-4);font-weight:500}
.sbv .srow.ns .srow-stage-name,.sbv .srow.ns .srow-meta .amt,.sbv .srow.ns .srow-meta .pct{color:var(--ink-5)}
/* ALL stage cards are the same width + centered (active included), leaving a
   symmetric gutter each side. The active card's "הוצא חשבונית" pill bulges out
   into the (visual) left gutter — past the other cards' edge — via .issue-sq, and
   the gutter keeps it clear of the .pv-contract-card overflow clip. */
.sbv .ops > .srow{width:min(980px, calc(100% - 400px));margin-inline:auto;margin-bottom:10px}
.sbv .ops > .srow:last-child{margin-bottom:0}
.sbv .srow-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:2px}
.sbv .srow-name{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px;flex-wrap:wrap}
.sbv .srow-meta{display:flex;align-items:center;gap:10px;flex:none}
/* Fixed-width %/₪ columns so they (and the chips to their right) line up across
   stage rows like a table. Chips don't shrink. */
.sbv .srow-meta .pct{font-size:12.5px;color:var(--ink2);min-width:42px;text-align:left}
.sbv .srow-meta .amt{font-size:14px;font-weight:700;color:var(--ink);min-width:80px;text-align:left}
.sbv .srow-meta .chip{flex:none}
.sbv .chip{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;background:var(--bg2);display:inline-flex;align-items:center;gap:5px}
.sbv .chip .cdot{width:7px;height:7px;border-radius:50%;flex:none}
.sbv .chip.paid{background:#ECEAE6;color:var(--paid)} .sbv .chip.paid .cdot{background:var(--paid)}
.sbv .chip.billed{background:#E4F0E8;color:var(--billed)} .sbv .chip.billed .cdot{background:var(--billed)}
.sbv .chip.prog{color:var(--prog)} .sbv .chip.prog .cdot{background:var(--prog)}
/* active "פעיל" tag — was inline-styled in mockup; scoped class for JSX */
.sbv .stage-active-tag{font-weight:400;color:var(--prog);font-size:11px;border:1px solid var(--prog);border-radius:20px;padding:1px 8px}
.sbv .start-link{color:var(--prog);font-weight:600;font-size:12px;cursor:pointer}
.sbv .start-link:hover{text-decoration:underline}
.sbv .stage-close-link{color:var(--ink3);font-weight:600;font-size:11px;cursor:pointer;white-space:nowrap}
.sbv .stage-close-link:hover{color:var(--prog);text-decoration:underline}

/* Numbered stage circle — replaces the "שלב N" text label, colored by state */
.sbv .srow-cnum{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;
  border-radius:50%;font-size:12px;font-weight:700;flex:none;font-variant-numeric:tabular-nums;line-height:1}
.sbv .srow-cnum.empty{background:#EFEAE0;color:#A29985}        /* not started — light empty */
.sbv .srow-cnum.prog{background:#F3DCD8;color:#8A2A20}         /* in work — light red */
.sbv .srow-cnum.billed{background:#DCE9E1;color:#235C42}       /* invoice issued — light green */
.sbv .srow-cnum.paid{background:#E5E2DD;color:#4E4840}         /* paid — light gray */
.sbv .srow-stage-name{font-weight:600;font-size:14px}

.sbv .barwrap{position:relative;margin:12px 0 4px}
.sbv .flags{position:relative;height:44px}
.sbv .flag{position:absolute;bottom:0;transform:translateX(50%);white-space:nowrap}
.sbv .flag .fmain{display:flex;flex-direction:column;align-items:center;gap:2px;justify-content:flex-end}
.sbv .flag .famt{font-weight:700;color:var(--ink);font-size:11.5px}
.sbv .flag .fdate{font-size:9.5px;color:var(--ink2);background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:0 7px;line-height:1.6}
.sbv .flag .tri{width:0;height:0;margin:2px auto 0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--ink)}
.sbv .flag.fl-left{transform:none;right:auto;left:0}
.sbv .flag.fl-left .fmain{align-items:flex-start}
.sbv .flag.fl-left .tri{margin:2px auto 0 4px}
.sbv .bar{position:relative;height:26px;background:var(--empty);border-radius:7px;overflow:hidden}
.sbv .bar.has-handle{overflow:visible}
.sbv .barclip{position:absolute;inset:0;overflow:hidden;border-radius:7px}
.sbv .seg-fill{position:absolute;top:0;bottom:0;right:0}
.sbv .fill-prog{background:var(--prog);z-index:1}
.sbv .fill-billed{background:var(--billed);z-index:2}
.sbv .fill-paid{background:var(--paid);z-index:3}
.sbv .ticks{position:absolute;inset:0;pointer-events:none;z-index:4}
.sbv .tick{position:absolute;top:20%;bottom:20%;width:1px;background:#ffffff80}
.sbv .invmark{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink);border-radius:2px;z-index:5}
.sbv .handle{position:absolute;top:-4px;width:15px;height:34px;background:var(--prog-dk);
        border-radius:5px;transform:translateX(50%);cursor:grab;box-shadow:0 1px 5px rgba(0,0,0,.3);z-index:6}
.sbv .handle::after{content:"";position:absolute;top:9px;bottom:9px;right:50%;transform:translateX(50%);width:2px;background:#ffffffcc;border-radius:2px}
.sbv .handle:active{cursor:grabbing}
/* % bubble sits BELOW the bar (covers the matching scale tick; keeps the last
   invoice flag above the bar readable) — approved mockup. Arrow points up. */
.sbv .handle .pct{position:absolute;top:40px;right:50%;transform:translateX(50%);background:var(--ink);color:#fff;
        font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.22)}
.sbv .handle .pct::after{content:"";position:absolute;top:-4px;right:50%;transform:translateX(50%);border-left:3px solid transparent;border-right:3px solid transparent;border-bottom:4px solid var(--ink)}
.sbv .scale{position:relative;height:15px;margin-top:3px}
.sbv .scale span{position:absolute;transform:translateX(50%);font-size:10.5px;color:var(--ink2);font-weight:500}

.sbv .srow-foot{position:relative;display:flex;justify-content:center;align-items:center;margin-top:14px;min-height:34px}
.sbv .srow-foot .issue-btn{position:absolute;left:0;top:50%;transform:translateY(-50%)}
.sbv .moneyline{font-size:12px;color:var(--ink2)}
.sbv .moneyline .pd{color:var(--paid);font-weight:600}.sbv .moneyline .bl{color:var(--billed);font-weight:600}.sbv .moneyline .gp{color:var(--prog);font-weight:600}
.sbv .step{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-inline-end:8px;background:#fff}
.sbv .step button{font-family:inherit;border:none;background:none;width:30px;height:33px;font-size:16px;cursor:pointer;color:var(--ink2)}
.sbv .step button:active{background:var(--bg2)}
.sbv .issue-btn{font-family:inherit;font-weight:600;font-size:12.5px;border:none;border-radius:8px;padding:8px 15px;cursor:pointer;background:var(--prog);color:#fff;white-space:nowrap}
.sbv .issue-btn:disabled{background:var(--bg2);color:var(--ink3);cursor:default}
.sbv .issue-btn.ghost{background:#fff;border:1px solid var(--prog);color:var(--prog)}
/* Square "issue invoice" pill — absolutely placed OUTSIDE the active card, in the
   (visual) left gutter, aligned to the bar row. The .ops > .srow gutter guarantees
   room so .pv-contract-card overflow never clips it. */
.sbv .srow.act .issue-sq{position:absolute;top:90px;right:calc(100% + 16px);height:28px;padding:0 14px;border:none;
  border-radius:6px;background:var(--accent);color:#fff;font-size:12px;font-weight:600;font-family:inherit;
  white-space:nowrap;cursor:pointer;display:flex;align-items:center;box-shadow:0 2px 8px rgba(196,69,54,.30)}
.sbv .srow.act .issue-sq:disabled{background:var(--bg-3);color:var(--ink-5);box-shadow:none;cursor:default}
.sbv .donebadge{font-size:11.5px;color:var(--paid);font-weight:600}

/* future stage thin row */
.sbv .future{display:flex;align-items:center;gap:9px;padding:9px 14px;font-size:12.5px;color:var(--ink2);
      margin:4px;border-radius:8px;cursor:pointer}
.sbv .future:hover{background:#fff}
.sbv .future .fdot{width:8px;height:8px;border-radius:50%;background:var(--empty);border:1px solid var(--ink3);flex:none}
.sbv .future b{color:var(--ink)} .sbv .future .gray{color:var(--ink3);margin-inline-start:auto}
.sbv .confirm{font-size:11px;color:var(--ink3);margin-top:12px;padding:0 8px}

/* ── Invoices full page (Meital) — scoped tokens kept local like .sbv ─ */
.inv-page{flex:1;min-height:0;overflow-y:auto;padding:22px 26px 60px;--green:#16a34a;--amber:#d97706;--red:#dc2626;--line:#E6DBC9}
.inv-page .hdr-row{display:flex;align-items:flex-end;gap:16px;margin-bottom:16px}
.inv-page .hdr h1{font-size:21px;font-weight:700}
.inv-page .hdr .sub{color:var(--ink-4);font-size:13px;margin-top:2px}
/* company toggle inherits the global .company-seg design (black active / steel-blue lvt)
   so the Invoices page matches Clients/Finance/Projects — no per-page override. */
.inv-page .kpis{display:flex;gap:14px;margin-bottom:18px}
.inv-page .kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;flex:1}
.inv-page .kpi .lab{font-size:12px;color:var(--ink-4)}
.inv-page .kpi .cnt{font-size:11.5px;color:var(--ink-5);float:left}
.inv-page .kpi .amt{font-size:22px;font-weight:700;margin-top:6px}
.inv-page .kpi .amt small{font-size:11px;color:var(--ink-5);font-weight:500;margin-inline-start:4px}
.inv-page .kpi .gross{font-size:11.5px;color:var(--ink-4);margin-top:2px}
.inv-page .kpi.warn{border-color:#f0c9a8;background:#fdf6ee}
.inv-page .kpi .stuck{margin-top:8px;font-size:12px;color:var(--amber);font-weight:600}
.inv-page .ip-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px}
.inv-page .ip-tabs button{font-family:inherit;font-size:14px;padding:9px 16px;border:0;background:transparent;cursor:pointer;color:var(--ink-4);border-bottom:2px solid transparent;margin-bottom:-1px}
.inv-page .ip-tabs button.active{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)}
.inv-page .ip-tabs button .c{background:var(--bg-3);border-radius:10px;padding:0 7px;font-size:11px;margin-inline-start:6px;color:var(--ink-3)}
.inv-page .filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:14px}
.inv-page .filters input,.inv-page .filters select{font-family:inherit;font-size:13px;border:1px solid var(--line);border-radius:7px;padding:7px 10px;background:#fff;color:var(--ink)}
.inv-page .filters .search{flex:1;min-width:220px}
.inv-page .filters .amt-in{width:96px}
.inv-page .filters .seg{display:flex;background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.inv-page .filters .seg button{font-family:inherit;font-size:12px;padding:7px 11px;border:0;background:transparent;cursor:pointer;color:var(--ink-3);border-inline-start:1px solid var(--line)}
.inv-page .filters .seg button:first-child{border-inline-start:0}
.inv-page .filters .seg button.active{background:var(--accent);color:#fff;font-weight:600}
.inv-page .filters label{font-size:12px;color:var(--ink-4)}
.inv-page .filters .clear{margin-inline-start:auto;font-size:12px;color:var(--accent);background:none;border:0;cursor:pointer;font-family:inherit;font-weight:600}
.inv-page .fcount{font-size:12.5px;color:var(--ink-4);margin:0 0 10px 2px}
.inv-page table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.inv-page thead th{background:var(--bg-2);text-align:right;font-size:12px;font-weight:600;color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;user-select:none}
.inv-page thead th:hover{background:var(--bg-3)}
.inv-page thead th .ar{color:var(--accent);margin-inline-start:4px;display:inline-flex;vertical-align:middle}
.inv-page thead th .ar.up{transform:rotate(180deg)}
.inv-page tbody td{padding:11px 12px;border-bottom:1px solid var(--bg-2);font-size:13px;vertical-align:middle}
.inv-page .fcount.total{font-size:14px;color:var(--ink);font-weight:600;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;padding:9px 14px;margin-bottom:12px}
.inv-page .fcount.total b{font-size:15px}
.inv-page tbody tr.irow{cursor:pointer}
.inv-page tbody tr.irow:hover{background:var(--bg-2)}
.inv-page tbody tr.irow.open{background:var(--bg-2)}
.inv-page tbody tr.irow.open td{border-bottom-color:transparent}
.inv-page tbody tr.lvt td:first-child{box-shadow:inset 3px 0 0 var(--lvt)}
.inv-page .num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;display:inline-block}
.inv-page .pnum{color:var(--ink-4);font-size:12px}
.inv-page .money{font-weight:600;font-variant-numeric:tabular-nums}
.inv-page .gross-c{color:var(--ink-4);font-size:12px;font-variant-numeric:tabular-nums}
.inv-page .age{font-variant-numeric:tabular-nums;font-weight:600}
.inv-page .age.ok{color:var(--ink-4);font-weight:500}
.inv-page .age.warn{color:var(--amber)}
.inv-page .age.bad{color:var(--red)}
.inv-page .pill{display:inline-block;border-radius:20px;padding:2px 10px;font-size:11.5px;font-weight:600}
.inv-page .pill.issued{background:#e7f0e9;color:#1d6b3a}
.inv-page .pill.paid{background:var(--bg-3);color:var(--ink-3)}
.inv-page .pill.credit{background:#fde8e6;color:var(--accent-2)}
.inv-page tr.exp{background:var(--bg-2)}
.inv-page tr.exp td{padding:16px 20px}
.inv-page .exp .acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.inv-page .exp .btn{font-family:inherit;font-size:13px;border-radius:8px;padding:8px 16px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:600;color:var(--ink-2)}
.inv-page .exp .btn.primary{background:var(--green);color:#fff;border-color:var(--green)}
.inv-page .exp .btn.ghost{color:var(--accent)}
.inv-page .exp .meta{color:var(--ink-4);font-size:12.5px;margin-bottom:10px}
.inv-page .exp .meta b{color:var(--ink-2)}
.inv-page .exp .pinput{font-family:inherit;font-size:13px;border:1px solid var(--line);border-radius:7px;padding:7px 10px;background:#fff;color:var(--ink);width:120px}
.inv-page .empty{text-align:center;color:var(--ink-5);padding:50px;font-size:14px}

/* ── Per-project payment history block (ProjectPaymentHistory, app-views) ── */
.pmh { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); margin-top: 12px; overflow: clip; }
.pmh-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; background: var(--bg-2); }
.pmh-head:hover { background: #EFE8DB; }
.pmh-title { font-size: 13.5px; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.pmh-chev { margin-inline-start: auto; color: var(--ink-4); display: inline-flex; transition: transform .15s; }
.pmh.open .pmh-chev { transform: rotate(180deg); }
.pmh-sum { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 12px; }
.pmh-sum b { color: var(--ink-2); }
.pmh-sum .paid b { color: #16a34a; }
.pmh-sum .open b { color: #B45309; }
.pmh-body { padding: 0 0 6px; }
.pmh-colhead, .pmh-row { display: grid; grid-template-columns: 78px 100px 1fr auto; align-items: center; gap: 12px; padding: 8px 16px; }
.pmh-colhead { font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-4); padding-top: 10px; padding-bottom: 6px; }
.pmh-grp-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-4); padding: 12px 16px 6px; display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--border); }
.pmh-grp-label.first { border-top: none; }
.pmh-grp-label .gtot { margin-inline-start: auto; color: var(--ink-3); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: 12px; }
.pmh-row { border-top: 1px solid var(--border); font-size: 13px; }
.pmh-date { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pmh-date.open { color: #B45309; font-weight: 600; }
.pmh-amt { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pmh-meta { color: var(--ink-3); font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmh-meta b { color: var(--ink-2); font-weight: 600; }
.pmh-pill { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; justify-self: end; }
.pmh-pill.paid { background: #E3F2E8; color: #16803c; }
.pmh-pill.open { background: #FBEEDD; color: #92500a; }
.pmh-empty { padding: 16px; text-align: center; color: var(--ink-4); font-size: 13px; }

/* payment history as its own white card (placement v2 — sibling under contracts) */
.pmh-card { margin-top: 10px; }
.pmh-card-title { cursor: pointer; }
.pmh-titleside { display: flex; align-items: center; gap: 10px; }
.pmh-card-title .pmh-sum { font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); display: flex; gap: 12px; }
.pmh-card-title .pmh-chev { margin-inline-start: 0; }
.pmh-card.open .pmh-chev { transform: rotate(180deg); }
.pmh-body-card { width: 70%; margin: 6px auto 4px; }
.pmh-body-card .pmh-row,
.pmh-body-card .pmh-colhead,
.pmh-body-card .pmh-grp-label { padding-inline: 4px; }

/* ── Payment detail modal (PaymentDetailModal) + trigger ── */
.pv-contracts-summary .pd-trigger { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 6px 12px; cursor: pointer; white-space: nowrap; align-self: center; }
.pv-contracts-summary .pd-trigger:hover { background: var(--bg-2); border-color: var(--border-2); }
.pd-ov { position: fixed; inset: 0; z-index: 200; background: rgba(40,34,28,.34); display: flex; align-items: center; justify-content: center; padding: 30px; }
.pd-modal { background: var(--bg); width: 100%; max-width: 680px; border-radius: 14px; box-shadow: 0 18px 60px rgba(0,0,0,.28); overflow: clip; display: flex; flex-direction: column; max-height: 86vh; }
.pd-head { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--border); flex: none; }
.pd-head .pd-title { font-size: 16px; font-weight: 700; color: var(--ink-2); }
.pd-head .pd-sub { font-size: 12.5px; color: var(--ink-4); }
.pd-x { margin-inline-start: auto; width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent; color: var(--ink-4); font-size: 17px; cursor: pointer; }
.pd-x:hover { background: var(--bg-2); }
.pd-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 20px 10px; flex: none; }
.pd-tile { border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; background: var(--surface); }
.pd-tile .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-4); }
.pd-tile .amt { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; line-height: 1.1; }
.pd-tile .cnt { font-size: 11.5px; color: var(--ink-4); margin-top: 2px; }
.pd-tile.paid { border-top: 3px solid #16a34a; } .pd-tile.paid .amt { color: #16803c; }
.pd-tile.open { border-top: 3px solid #B45309; } .pd-tile.open .amt { color: #92500a; }
.pd-tile.future { border-top: 3px solid #9b948a; } .pd-tile.future .amt { color: #57514a; }
.pd-body { overflow-y: auto; padding: 4px 20px 18px; }
.pd-grp { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; color: var(--ink-3); padding: 14px 2px 6px; display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--border); margin-top: 4px; }
.pd-grp:first-child { border-top: none; margin-top: 0; }
.pd-grp .dot { width: 8px; height: 8px; border-radius: 50%; }
.pd-grp.paid .dot { background: #16a34a; } .pd-grp.open .dot { background: #B45309; } .pd-grp.future .dot { background: #9b948a; }
.pd-grp .gtot { margin-inline-start: auto; font-weight: 600; color: var(--ink-3); font-size: 12px; }
.pd-body .pmh-row { padding-inline: 2px; }
.pmh-pill.future { background: #ECE8E1; color: #6b645b; }
.pmh-date.none { color: var(--ink-5, #9a938a); }

/* ── Color rethink (David): open=green · paid=gray · future=lighter gray · zero amber ── */
.pv-cs-val.green { color: #166534; }
.pv-cs-val.gray  { color: #6b645b; }
.pv-cs-empty { color: #9a938a; font-weight: 400; }
/* detail popup: pills */
.pmh-pill.paid   { background: #ECE8E1; color: #5f594f; }
.pmh-pill.open   { background: #E3F2E8; color: #16803c; }
.pmh-pill.future { background: #F2EFE9; color: #8a847b; }
.pmh-date.open   { color: #16803c; }
/* detail popup: tiles + group dots */
.pd-tile.paid   { border-top-color: #9b948a; } .pd-tile.paid .amt   { color: #5f594f; }
.pd-tile.open   { border-top-color: #16a34a; } .pd-tile.open .amt   { color: #16803c; }
.pd-tile.future { border-top-color: #ccc6bb; } .pd-tile.future .amt { color: #8a847b; }
.pd-grp.paid .dot   { background: #9b948a; }
.pd-grp.open .dot   { background: #16a34a; }
.pd-grp.future .dot { background: #ccc6bb; }

/* ── Estimate→supplement panel (Phase 2, percent contracts) — eb- scoped ───────── */
.eb-panel { padding: 14px 0 4px; }
.eb-preview-note { font-size: 11.5px; color: #7a5c12; background: #FBF1DC; border: 1px solid #E8D6A8;
  border-radius: 6px; padding: 7px 11px; margin-bottom: 14px; }
/* estimate-change callout */
.eb-callout { border: 1.5px solid #BCD4E0; background: linear-gradient(180deg,#EFF5F8,#E8F0F4);
  border-radius: 11px; overflow: hidden; margin-bottom: 18px; }
.eb-top { padding: 11px 16px; background: #DCEAF1; border-bottom: 1px solid #C5DCE7;
  font-size: 13px; font-weight: 700; color: #1d3f4f; }
.eb-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: #C5DCE7; }
.eb-cell { background: #EFF5F8; padding: 12px 15px; }
.eb-cell .lbl { font-size: 11.5px; color: #4a7287; font-weight: 600; margin-bottom: 5px; }
.eb-cell .big { font-size: 15px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.eb-supp-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; background: #E4F0E8; border-top: 1px solid #C2DECF; }
.eb-supp-bar .sl { font-size: 13px; color: #1f5c3d; }
.eb-supp-bar .sl b { font-size: 18px; font-weight: 800; color: #15803d; font-variant-numeric: tabular-nums; }
.eb-btn-issue, .eb-btn-supp { font-family: inherit; font-weight: 700; color: #fff; background: #2F6B4F;
  border: none; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.eb-btn-issue { font-size: 13px; padding: 9px 16px; }
.eb-btn-supp  { font-size: 12.5px; padding: 7px 13px; border-radius: 6px; }
.eb-btn-issue:disabled, .eb-btn-supp:disabled, .eb-btn-credit:disabled { opacity: .55; cursor: default; }
/* per-stage rows */
.eb-stages-title { font-size: 12px; font-weight: 700; color: var(--ink-4); margin: 4px 0 8px; }
.eb-stage { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 2px; border-bottom: 1px solid var(--bg-3); }
.eb-stage:last-child { border-bottom: none; }
.eb-dot { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.eb-dot.done { background: #4E4840; }
.eb-dot.prog { background: #B23A2E; }
.eb-dot.future { background: #DAD4C8; color: var(--ink-4); }
.eb-mid .nm { font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.eb-mid .wt { font-size: 11.5px; color: var(--ink-4); margin-top: 1px; }
.eb-mid .calc { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.eb-mid .calc .new { color: #2C5468; font-weight: 700; }
.eb-act { text-align: left; min-width: 140px; }
.eb-tag { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.eb-tag.paid { color: #4E4840; background: #ECE9E3; border: 1px solid #D8D2C7; }
.eb-tag.prog { color: #7a5c12; background: #FBF1DC; border: 1px solid #E8D6A8; }
.eb-tag.future { color: var(--ink-4); background: var(--bg-2); border: 1px solid var(--border); }
/* reconciliation footer */
.eb-recon { display: flex; margin-top: 16px; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.eb-recon .r { flex: 1; padding: 11px 8px; text-align: center; border-inline-start: 1px solid var(--border); }
.eb-recon .r:first-child { border-inline-start: none; }
.eb-recon .r .l { font-size: 11px; color: var(--ink-4); font-weight: 600; }
.eb-recon .r .n { font-size: 15px; font-weight: 800; color: var(--ink-2); margin-top: 3px; font-variant-numeric: tabular-nums; }
.eb-recon .r.paid .n { color: #4E4840; }
.eb-recon .r.supp .n { color: #15803d; }
.eb-recon .r.future .n { color: var(--ink-3); }
.eb-recon .r.total { background: var(--bg-2); }
.eb-recon .r.total .n { color: var(--ink); }
.eb-recon .eq { display: flex; align-items: center; padding: 0 4px; color: var(--ink-5); font-weight: 700; }
/* over-billing / credit card */
.eb-down { background: #FCF3F1; border: 1px solid #E7C4BC; border-radius: 11px; padding: 15px; margin-top: 14px; }
.eb-down .h { font-size: 13px; font-weight: 700; color: #9c3b2e; margin-bottom: 8px; }
.eb-down .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.eb-down .row .t { font-size: 13px; color: var(--ink-3); }
.eb-down .row .t b { color: #9c3b2e; }
.eb-btn-credit { font-family: inherit; font-size: 12.5px; font-weight: 700; color: #9c3b2e; background: #fff;
  border: 1px solid #E7C4BC; border-radius: 6px; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.eb-cap { font-size: 12px; color: var(--ink-4); margin-top: 10px; line-height: 1.6; }

/* ═══════════ DashboardView — "מבט-על" exec overview (db- prefix) ═══════════ */
.db-wrap { flex: 1; min-height: 0; overflow-y: auto; background: var(--bg); padding: 14px 16px; }
.db-grid { display: grid; grid-template-columns: 1.05fr 1fr 1fr; grid-auto-rows: min-content; gap: 11px;
  min-height: calc(100vh - 120px); }
.db-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(31,27,22,.04), 0 1px 1px rgba(31,27,22,.06);
  padding: 12px 15px; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.db-th { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex: 0 0 auto; }
.db-th .db-n { font-size: 10.5px; color: var(--ink-4); font-weight: 600; background: var(--bg-2); padding: 1px 8px; border-radius: 20px; }

/* verdict — full-width banner: title row (greeting | date) + counts subline */
.db-verdict { grid-column: 1 / 4; justify-content: center; position: relative; padding: 10px 20px; }
.db-verdict::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.db-vtop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.db-v { font-size: 16px; font-weight: 700; color: var(--ink); }
.db-v b { color: var(--accent); }
.db-vdate { font-size: 12px; color: var(--ink-4); font-weight: 500; white-space: nowrap; flex: 0 0 auto; }
.db-vsub { font-size: 12px; color: var(--ink-4); font-weight: 500; margin-top: 3px; }

/* RIGHT — team */
.db-team { grid-column: 1; grid-row: 2 / 4; }
.db-toggle { display: flex; gap: 3px; background: var(--bg-2); border-radius: 7px; padding: 2px; }
.db-toggle span { font-size: 10.5px; font-weight: 600; padding: 3px 10px; border-radius: 5px; color: var(--ink-4); cursor: pointer; }
.db-toggle span.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(31,27,22,.08); }
.db-tsub { font-size: 9.5px; color: var(--ink-4); margin: -1px 0 4px; }
.db-pie { flex: 0 0 auto; display: flex; justify-content: center; height: 320px; margin: 8px 0 14px; }
.db-svg { height: 320px; max-width: 100%; }
.db-svg text { font-family: var(--font-sans); text-anchor: middle; dominant-baseline: middle; }
.db-cv { font-size: 25px; font-weight: 800; fill: var(--ink); }
.db-cl { font-size: 11px; fill: var(--ink-4); font-weight: 600; }
.db-il { font-size: 11px; font-weight: 700; fill: #fff; }
.db-ol { font-size: 9px; font-weight: 600; fill: var(--ink); }
.db-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; min-height: 0;
  border-top: 1px solid var(--bg-2); padding-top: 10px; }
.db-prow { display: grid; grid-template-columns: 58px 54px 1fr auto; align-items: center; gap: 6px; padding: 3px 4px; font-size: 11px; }
.db-pn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-pchip { font-size: 9px; font-weight: 700; color: var(--blue, #4A6B8A); background: #E8EEF4; border-radius: 10px; padding: 1px 5px; text-align: center; white-space: nowrap; }
.db-pchip.empty { background: transparent; }
.db-pbar { height: 7px; background: var(--bg-3); border-radius: 5px; overflow: hidden; }
.db-pbar i { display: block; height: 100%; background: #4A6B8A; border-radius: 5px; }
.db-pbig { font-weight: 800; direction: ltr; font-size: 11.5px; white-space: nowrap; }

/* CENTER — money + health stacked */
.db-center { grid-column: 2; grid-row: 2 / 4; display: flex; flex-direction: column; gap: 11px; min-height: 0; }
.db-money { background: #F8E7E2; border-color: #E9C9C0; flex: 0 0 auto; }
.db-blab { font-size: 11.5px; color: #8a3a2e; font-weight: 600; }
.db-big { font-size: 28px; font-weight: 800; color: #8B3A2E; direction: ltr; text-align: right; letter-spacing: -.5px; margin-top: 2px; }
.db-toplist { margin-top: 4px; }
.db-lrow { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 0; color: var(--ink-4); gap: 10px; }
.db-lrow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-lrow b { color: var(--ink); direction: ltr; white-space: nowrap; }
.db-sub { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-2);
  padding: 5px 0; border-top: 1px solid #EAD0C8; margin-top: 3px; gap: 10px; }
.db-sub b { direction: ltr; font-weight: 700; white-space: nowrap; }
.db-sub.muted { opacity: .6; }
.db-sub small { color: #a06a2a; font-size: 9px; }
.db-cav { font-size: 9px; color: #a06a2a; }
.db-health { flex: 1; min-height: 0; }
.db-hbig { display: flex; align-items: baseline; gap: 7px; }
.db-hv { font-size: 28px; font-weight: 800; direction: ltr; }
.db-hl { font-size: 12px; color: var(--ink-4); font-weight: 600; }
.db-hbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin: 8px 0 4px; background: var(--bg-3); }
.db-hbar i { display: block; height: 100%; }
.db-hsub { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-4); margin-bottom: 9px; }
.db-hflags { display: flex; flex-direction: column; gap: 5px; }
.db-hf { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-2); }
.db-hfd { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.db-hf b { margin-inline-start: auto; direction: ltr; font-weight: 700; }

/* LEFT — decisions */
.db-decide { grid-column: 3; grid-row: 2 / 4; overflow-y: auto; }
.db-empty { font-size: 12px; color: var(--ink-4); padding: 16px 4px; text-align: center; }
.db-drow { display: flex; gap: 9px; padding: 10px 0; border-bottom: 1px solid var(--bg-2); align-items: flex-start; }
.db-drow:last-child { border: none; }
.db-dd { font-size: 12px; flex: 0 0 auto; }
.db-db { flex: 1; min-width: 0; }
.db-dt { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.db-ds { font-size: 11px; color: var(--ink-4); margin-top: 1px; }
.db-dc { font-size: 11px; color: var(--accent); font-weight: 700; white-space: nowrap; align-self: center;
  cursor: pointer; background: #F8E7E2; padding: 4px 10px; border-radius: 6px; }
.db-dc:hover { background: #f3d9d2; }