/* ═══════════════════════════════════════════════════════════
   BuildSmart Design System v2
   Unified Shell v3 — Token Bridge (Legacy ↔ Tailwind ↔ Theme)
   See docs/UNIFIED_SHELL_V3_SPEC.md
   --bg/--shell-bg     → bg-slate-950  → #020617
   --s1/--shell-s1     → bg-slate-900  → #0f172a
   --s2/--shell-s2     → bg-slate-800  → #1e293b
   --br/--shell-br     → border-slate-800
   --blue              → bg-blue-600   → #2563eb
   --tx                → text-slate-50 → #f8fafc
   --mu                → text-slate-400 → #94a3b8
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Shell v3 slate bridge (scoped overrides on .project-page) */
  --shell-bg:  #020617;
  --shell-s1:  #0f172a;
  --shell-s2:  #1e293b;
  --shell-s3:  #334155;
  --shell-br:  #1e293b;
  --shell-tx:  #f8fafc;
  --shell-mu:  #94a3b8;
  --font-ui:   'Montserrat', 'Space Grotesk', system-ui, sans-serif;
  --font-he:   'Heebo', 'Montserrat', sans-serif;
  --font-mono: 'IBM Plex Mono', 'JetBrains Mono', monospace;

  --brand-navy:     #1E3A8A;
  --brand-teal:     #14B8A6;
  --brand-concrete: #F3F4F6;

  --text-xs:   0.688rem;
  --text-sm:   0.75rem;
  --text-base: 0.875rem;
  --text-lg:   1rem;
  --text-xl:   1.125rem;
  --text-2xl:  1.375rem;
  --text-3xl:  1.75rem;

  /* Dark (default) — Unified Shell v3 slate bridge */
  --bg:    #020617;  /* slate-950 */
  --s1:    #0f172a;  /* slate-900 */
  --s2:    #1e293b;  /* slate-800 */
  --s3:    #334155;  /* slate-700 */
  --s4:    #475569;  /* slate-600 */

  --br:    #1e293b;  /* border-slate-800 */
  --br2:   #334155;
  --br3:   #475569;

  --tx:    #fafafa;
  --tx2:   #e4e4e7;
  --mu:    #71717a;
  --mu2:   #52525b;

  /* Primary action — v3 token bridge: bg-blue-600 / theme.accent.primary */
  --blue:  #2563eb;
  --blue2: #1d4ed8;
  --green: #14B8A6;
  --green2:#0d9488;
  --amber: #f59e0b;
  --amber2:#d97706;
  --red:   #ef4444;
  --red2:  #dc2626;
  --purple:#8b5cf6;
  --coral: #f97316;

  --blueprint:     #1e3a5f;
  --blueprint-line:rgba(59,130,246,.08);
  --mono-accent:   #60a5fa;

  --on-primary: #ffffff;
  --on-accent:  #020617;
  --blue-light: #93c5fd;
  --blue-bright:#7ab8ff;
  --blue-deep:  #2563eb;
  --blue-tint:  #1e2a45;
  --blue-border:#2a6db5;
  --green-light:#86efac;
  --green-bright:#4ade80;
  --green-mint: #6ee7b7;
  --green-dark: #14532d;
  --green-deep: #0d2b1f;
  --red-light:  #fca5a5;
  --red-dark:   #7f1d1d;
  --red-deep:   #991b1b;
  --amber-light:#fcd34d;
  --amber-pale: #fde68a;
  --amber-dark: #78350f;
  --amber-deep: #854d0e;
  --amber-brown:#92400e;
  --purple-bright:#a855f7;
  --purple-light:#c4b5fd;
  --purple-deep:#1f1535;
  --cyan:       #06b6d4;
  --cyan2:      #0ea5e9;
  --teal:       #2dd4bf;
  --gold:       #eab308;
  --orange:     #fdba74;
  --orange-deep:#fb923c;
  --stone:      #78716c;
  --slate:      #94a3b8;
  --ink:        #374151;
  --surface-deep:#0f172a;
  --surface-mid:#1e293b;
  --surface-line:#334155;
  --surface-hover:#3a3d4e;
  --surface-card:#252840;
  --surface-panel:#1e2235;
  --surface-alt:#363952;
  --surface-ink:#1f2233;
  --bg-deep:    #0a0c14;
  --bg-print:   #060810;
  --trade-elec: #1c1a0f;
  --trade-hvac: #1a2a1a;
  --trade-flor: #1f1a12;
  --indigo:     #4338ca;
  --pink:       #f9a8d4;
  --lavender:   #a5b4fc;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.6);

  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  10px;
  --r-xl:  14px;

  --fast:  150ms ease;
  --med:   250ms ease;

  /* Legacy aliases */
  --bl:  var(--blue);
  --bl2: var(--blue2);
  --gr:  var(--green);
  --gr2: var(--green2);
  --am:  var(--amber);
  --re:  var(--red);
  --pu:  var(--purple);
  --co:  var(--coral);
}

[data-theme="light"] {
  --bg:    #ffffff;
  --s1:    #fafafa;
  --s2:    #f4f4f5;
  --s3:    #e4e4e7;
  --s4:    #d4d4d8;

  --br:    rgba(0,0,0,.07);
  --br2:   rgba(0,0,0,.12);
  --br3:   rgba(0,0,0,.18);

  --tx:    #09090b;
  --tx2:   #18181b;
  --mu:    #71717a;
  --mu2:   #a1a1aa;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 28px rgba(0,0,0,.12);

  --blueprint-line: rgba(59,130,246,.05);
  --blueprint:     #dbeafe;
  --blue-light:    #1d4ed8;
  --blue-tint:     #eff6ff;
  --green-dark:    #dcfce7;
  --green-deep:    #ecfdf5;
  --red-dark:      #fee2e2;
  --red-light:     #dc2626;
  --amber-dark:    #fef3c7;
  --amber-pale:    #92400e;
  --amber-light:   #b45309;
  --purple-deep:   #ede9fe;
  --purple-light:  #6d28d9;
  --surface-deep:  #f8fafc;
  --surface-mid:   #f1f5f9;
  --surface-line:  #e2e8f0;
  --surface-hover: #e4e4e7;
  --surface-card:  #ffffff;
  --surface-panel: #f4f4f5;
  --surface-alt:   #f4f4f5;
  --trade-elec:    #fef9c3;
  --trade-hvac:    #ecfdf5;
  --trade-flor:    #fff7ed;
}

html {
  direction: rtl;
  -webkit-font-smoothing: antialiased;
}

html, body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--tx);
  transition: background var(--med), color var(--med);
}

body.bs-theme,
body {
  background: var(--bg);
  color: var(--tx);
}

[lang="he"], .he, :lang(he) {
  font-family: var(--font-he);
}

.mono, .bs-mono,
[class*="price"], [class*="amount"],
[class*="pct"], [class*="qty"],
.kpi-val, .kpi-value, .stat-value, .tl-kpi-val {
  font-family: var(--font-mono) !important;
}

/* ── Logo ── */
.bs-logo {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  min-width: 0;
  max-width: min(100%, 480px);
  direction: ltr;
  unicode-bidi: isolate;
}

@media (max-width: 480px) {
  .bs-logo {
    max-width: 14rem;
  }
}

.bs-logo-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.bs-logo-text {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-navy, var(--tx));
}

.bs-logo-text span {
  color: var(--brand-teal, var(--blue));
}

/* ── Topbar ── */
.topbar, .bs-topbar, .navbar {
  height: 56px;
  background: var(--s1);
  border-bottom: 1px solid var(--br);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

.navbar .bs-logo {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  z-index: 1;
}

.navbar .nav-center {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.navbar .nav-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.topbar-divider {
  width: 1px;
  height: 16px;
  background: var(--br2);
}

.topbar-breadcrumb {
  font-size: 11px;
  color: var(--mu);
  display: flex;
  align-items: center;
  gap: 5px;
}

.topbar-breadcrumb .current {
  color: var(--tx);
  font-weight: 500;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  border: 1px solid var(--br);
  background: var(--s2);
  color: var(--mu);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--fast);
  font-size: 14px;
}

.btn-icon:hover {
  border-color: var(--br2);
  color: var(--tx);
  background: var(--s3);
}

.theme-toggle-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-inline-end: 8px;
}

.navbar .nav-right .theme-toggle-wrap,
.topbar .theme-toggle-wrap {
  margin-inline-end: 0;
}

.navbar #themeToggle,
.navbar .theme-toggle-btn,
.topbar #themeToggle,
.topbar .theme-toggle-btn {
  position: static;
}

.theme-toggle-floating {
  position: fixed;
  top: 12px;
  inset-inline-start: auto;
  inset-inline-end: 12px;
  z-index: 9998;
  box-shadow: var(--shadow-md);
}

body.bs-has-demo-bar .theme-toggle-floating {
  top: 48px;
}

body.bs-has-floating-theme-toggle .app-main,
body.bs-has-floating-theme-toggle .main:first-child {
  padding-top: 52px;
}

/* ── Buttons ── */
.btn, .bs-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all var(--fast);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary, .bs-btn-primary {
  background: linear-gradient(135deg, var(--blue2), var(--green2));
  color: white;
  border-color: transparent;
}
.btn-primary:hover, .bs-btn-primary:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--s2);
  color: var(--tx2);
  border-color: var(--br);
}
.btn-secondary:hover { border-color: var(--br2); background: var(--s3); }

.btn-ghost, .bs-btn-ghost {
  background: transparent;
  color: var(--mu);
  border-color: var(--br);
}
.btn-ghost:hover, .bs-btn-ghost:hover {
  color: var(--tx);
  border-color: var(--br2);
  background: var(--s2);
}

.btn-danger {
  background: rgba(239,68,68,.1);
  color: var(--red);
  border-color: rgba(239,68,68,.25);
}
.btn-danger:hover { background: rgba(239,68,68,.18); }

.btn-sm { padding: 4px 10px; font-size: 11px; }
.btn-lg { padding: 10px 20px; font-size: 14px; }

/* ── Cards ── */
.card, .bs-card {
  background: var(--s1);
  border: 1px solid var(--br);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.card-blueprint {
  position: relative;
}

.card-blueprint::before,
.card-blueprint::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: .5;
  transition: opacity var(--fast);
  pointer-events: none;
}

.card-blueprint::before {
  top: 8px;
  right: 8px;
  border-top: 1.5px solid var(--blue);
  border-right: 1.5px solid var(--blue);
}

.card-blueprint::after {
  top: 8px;
  left: 8px;
  border-top: 1.5px solid var(--blue);
  border-left: 1.5px solid var(--blue);
}

.card-blueprint:hover::before,
.card-blueprint:hover::after,
.card-blueprint:hover .corner-br,
.card-blueprint:hover .corner-bl {
  opacity: .9;
}

/* ── Status dots ── */
.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  border: 1px solid;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.status-dot::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.active {
  color: var(--green);
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.08);
}
.status-dot.active::before {
  background: var(--green);
  box-shadow: 0 0 5px var(--green);
}

.status-dot.pending {
  color: var(--amber);
  border-color: rgba(245,158,11,.25);
  background: rgba(245,158,11,.08);
  animation: blink-status 2s infinite;
}
.status-dot.pending::before { background: var(--amber); }

.status-dot.blocked {
  color: var(--red);
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.06);
}
.status-dot.blocked::before {
  background: var(--red);
  animation: blink-status 1s infinite alternate;
}

.status-dot.idle {
  color: var(--mu);
  border-color: var(--br);
  background: transparent;
}
.status-dot.idle::before { background: var(--mu2); }

.status-dot.review {
  color: var(--purple);
  border-color: rgba(139,92,246,.25);
  background: rgba(139,92,246,.08);
}
.status-dot.review::before { background: var(--purple); }

@keyframes blink-status {
  from { opacity: 1; }
  to   { opacity: .25; }
}

/* ── Tech chips ── */
.chip-tech {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.chip-tech.blue {
  color: var(--mono-accent);
  border-color: rgba(59,130,246,.25);
  background: rgba(59,130,246,.08);
}

.chip-tech.amber {
  color: var(--amber);
  border-color: rgba(245,158,11,.25);
  background: rgba(245,158,11,.08);
}

.chip-tech.green {
  color: var(--green);
  border-color: rgba(34,197,94,.2);
  background: rgba(34,197,94,.07);
}

.chip-tech.muted {
  color: var(--mu);
  border-color: var(--br);
  background: transparent;
}

/* ── Blueprint backgrounds ── */
.bg-blueprint {
  background-color: var(--s1);
  background-image:
    linear-gradient(var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--blueprint-line) 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-blueprint-subtle {
  background-image:
    radial-gradient(var(--blueprint-line) 1px, transparent 1px);
  background-size: 16px 16px;
}


/* Legacy KPI aliases (non-dashboard pages) */
.kpi, .bs-kpi, .stat-card {
  background: var(--s2);
  border: 1px solid var(--s3);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--fast), transform var(--fast);
}

.kpi::before, .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--kpi-color, var(--blue));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.kpi:hover, .stat-card:hover {
  border-color: var(--br2);
  transform: translateY(-1px);
}

.kpi-val, .bs-kpi-val, .stat-value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--kpi-color, var(--blue));
  line-height: 1.25;
  margin-bottom: 5px;
  letter-spacing: -.5px;
}

.kpi-label, .stat-label, .kpi-lbl {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--mu);
  font-weight: 400;
}

/* Developer dashboard */
.dev-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.dev-dash-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dev-dash-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.dev-dash-greeting {
  font-size: 18px;
  font-weight: 600;
  color: var(--tx);
}
.dev-dash-subtitle {
  font-size: 12px;
  color: var(--mu);
  margin-top: 2px;
}
.dev-dash-projects {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dev-dash-project-link {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid var(--s3);
  color: var(--mu);
}
.dev-dash-project-link.active {
  border-color: var(--blue);
  color: var(--blue);
  background: rgba(59,130,246,.1);
}
.dev-progress-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--s3);
}
.dev-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mu);
  margin-bottom: 6px;
}
.dev-progress-track {
  height: 6px;
  background: var(--s3);
  border-radius: 3px;
  overflow: hidden;
}
.dev-progress-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 3px;
}
.empty-inline {
  font-size: 12px;
  color: var(--mu);
  padding: 8px 0;
  text-align: center;
}
.data-row.muted { opacity: .85; }
.card-title .badge-amber { margin-inline-start: auto; }
.mt-4 { margin-top: 16px; }

/* ── Sidebar ── */
.sidebar, .nav-sidebar {
  background:   var(--s1, #111113);
  border-inline-end: 1px solid var(--s3, #27272a);
  height:       100vh;
  overflow-y:   auto;
  width:        220px;
  flex-shrink:  0;
  display: flex;
  flex-direction: column;
}

.sidebar-section-label,
.nav-section-title,
.nav-section,
.nav-sec-label {
  font-size:      9px;
  font-weight:    500;
  color:          var(--mu, #71717a);
  letter-spacing: .5px;
  padding:        12px 16px 4px;
  text-transform: uppercase;
}

.nav-divider {
  height: 1px;
  margin: 8px 14px;
  background: var(--br);
}

.nav-item .ti, .nav-item i, .sidebar-item i {
  font-size: 18px;
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}

.nav-locked {
  opacity: 0.38;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  margin: 1px 6px;
  border-radius: var(--r-md);
  font-size: 12px;
  font-family: var(--font-ui);
  color: var(--mu);
}

.nav-locked:hover {
  opacity: 0.55;
  background: var(--s2);
}

.nav-badge {
  margin-right: auto;
  margin-inline-start: auto;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
}

.sidebar-item, .nav-item {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        9px 16px;
  font-size:      13px;
  color:          var(--mu, #71717a);
  text-decoration:none;
  cursor:         pointer;
  border-inline-end: 3px solid transparent;
  transition:     color .15s, background .15s;
  position:       relative;
}

.sidebar-item:hover, .nav-item:hover {
  background: rgba(255,255,255,.04);
  color:      var(--tx, #fafafa);
}

.sidebar-item.active, .nav-item.active {
  color:           var(--blue, #3b82f6);
  background:      rgba(59,130,246,.08);
  border-inline-end: 3px solid var(--blue, #3b82f6);
}

.sidebar-item.active::after, .nav-item.active::after {
  display: none;
}

.nav-item .nav-text, .sidebar-item .nav-text { flex: 1; }

/* ── Language selector ── */
.lang-selector { position: relative; }

.lang-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-md);
  border: 1px solid var(--br);
  background: var(--s2);
  cursor: pointer;
  font-size: 11px;
  font-family: var(--font-ui);
  color: var(--tx);
  transition: all var(--fast);
}

.lang-btn:hover {
  border-color: var(--br2);
  background: var(--s3);
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 200px;
  background: var(--s1);
  border: 1px solid var(--br2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  z-index: 100;
}

/* ── Legacy badges → status mapping helpers ── */
.badge-green, .bs-badge-green {
  color: var(--green);
  border-color: rgba(34,197,94,.25);
  background: rgba(34,197,94,.08);
}

.badge-amber, .bs-badge-amber {
  color: var(--amber);
  border-color: rgba(245,158,11,.25);
  background: rgba(245,158,11,.08);
}

.badge-blue, .bs-badge-blue {
  color: var(--blue);
  border-color: rgba(59,130,246,.25);
  background: rgba(59,130,246,.08);
}

.badge-red, .bs-badge-red {
  color: var(--red);
  border-color: rgba(239,68,68,.25);
  background: rgba(239,68,68,.06);
}

.badge-green, .badge-amber, .badge-blue, .badge-red, .badge-purple, .bs-badge-green, .bs-badge-amber, .bs-badge-blue, .bs-badge-red, .bs-badge-purple {
  border-radius: var(--r-sm);
  padding: 2px 9px;
  font-size: 9px;
  font-weight: 700;
  display: inline-block;
  border: 1px solid;
  font-family: var(--font-mono);
}

/* ── Contract model badge ── */
.model-badge {
  font-size:     10px;
  padding:       2px 10px;
  border-radius: 20px;
  font-weight:   500;
  display:       inline-block;
  margin-inline-start: 6px;
  vertical-align: middle;
}
.model-A {
  background: rgba(139, 92, 246, .1);
  color:      #8b5cf6;
}
.model-B {
  background: rgba(59, 130, 246, .1);
  color:      var(--blue);
}
.model-C {
  background: rgba(34, 197, 94, .1);
  color:      var(--green);
}

/* ── Attendance counter ── */
.count-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--s3);
  background: var(--s1);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tx);
  font-family: inherit;
  transition: background .15s;
}
.count-btn:hover {
  background: rgba(79, 142, 247, .12);
  color: var(--blue);
}

/* ── Blocked tasks ── */
.task-row.blocked {
  opacity: 0.7;
  background: rgba(239, 68, 68, .04);
  border-inline-end: 3px solid var(--red);
}
.task-row.blocked input[type="checkbox"] {
  cursor: not-allowed;
  opacity: 0.4;
}
.blocked-banner {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--red);
  margin-top: 3px;
}
.badge.blocked {
  background: rgba(239, 68, 68, .12);
  color: var(--red);
}


/* ── Light theme overrides for common inline-dark pages ── */
[data-theme="light"] body,
[data-theme="light"] .panel,
[data-theme="light"] .main,
[data-theme="light"] .app-main,
[data-theme="light"] .sidebar,
[data-theme="light"] .landing-body,
[data-theme="light"] .auth-page {
  background: var(--bg);
  color: var(--tx);
}

[data-theme="light"] .sidebar-item:hover,
[data-theme="light"] .nav-item:hover {
  background: rgba(0, 0, 0, .04);
  color: var(--tx);
}

[data-theme="light"] #userMenu,
[data-theme="light"] #userChip {
  background: var(--s2);
  border-color: var(--s3);
  box-shadow: var(--shadow-md);
}

[data-theme="light"] .plc-kpi {
  background: var(--s2);
  border-color: var(--s3);
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: var(--s2);
  color: var(--tx);
  border-color: var(--br2);
}

.stepbar, .bs-stepbar {
  height: 38px;
  background: var(--s1);
  border-bottom: 1px solid var(--br);
}

.bottom-nav, .bs-bottom-nav {
  height: 40px;
  background: var(--s1);
  border-top: 1px solid var(--br);
}

/* ── Global form + table theming ── */
input, select, textarea, button {
  font-family: var(--font-he);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select, textarea {
  background: var(--s2);
  color: var(--tx);
  border: 1px solid var(--br);
  border-radius: var(--r-md);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

table {
  border-color: var(--br);
}

th {
  background: var(--s2);
  color: var(--mu);
}

td {
  border-color: var(--br);
  color: var(--tx2);
}

.modal, .modal-box, .modal-content, .dv-modal, .pm-modal {
  background: var(--s1);
  color: var(--tx);
  border-color: var(--br);
}

.modal-overlay, .overlay, .dv-overlay {
  background: rgba(0,0,0,.55);
}

[data-theme="light"] .modal-overlay,
[data-theme="light"] .overlay,
[data-theme="light"] .dv-overlay {
  background: rgba(0,0,0,.35);
}

[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(var(--br) 1px, transparent 1px),
    linear-gradient(90deg, var(--br) 1px, transparent 1px);
}

[data-theme="light"] .card-wrap {
  box-shadow: var(--shadow-lg);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--s1); }
::-webkit-scrollbar-thumb { background: var(--s3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--s4); }

#themeToggle { flex-shrink: 0; }

/* ── Payment block release ── */
.br-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 200; }
.br-overlay.hidden, .br-modal.hidden { display: none !important; }
.br-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(440px, 94vw); background: var(--s1); border: 1px solid var(--br2);
  border-radius: 14px; z-index: 201; box-shadow: var(--shadow-lg);
}
.br-hd { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--br); font-weight: 800; }
.br-close { background: none; border: none; color: var(--mu); cursor: pointer; font-size: 16px; }
.br-body { padding: 16px; font-size: 12px; }
.br-foot { padding: 12px 16px; border-top: 1px solid var(--br); display: flex; gap: 8px; justify-content: flex-end; }
.br-lbl { color: var(--mu); font-size: 11px; display: block; margin-bottom: 4px; }
.br-row { margin-bottom: 8px; }
.br-reason-box { background: var(--s2); border: 1px solid var(--br); border-radius: 8px; padding: 10px; margin: 6px 0 12px; }
.br-amt { font-family: var(--font-mono); font-weight: 700; color: var(--green); }
.br-warn { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: var(--amber); padding: 8px 10px; border-radius: 8px; margin: 10px 0; font-size: 11px; }
.br-ta { width: 100%; background: var(--s2); border: 1px solid var(--br2); color: var(--tx); border-radius: 8px; padding: 10px; font-family: var(--font-he); font-size: 12px; resize: vertical; }
.br-hint { font-size: 10px; color: var(--red); margin-top: 4px; min-height: 14px; }
.br-btn-ghost { background: transparent; border: 1px solid var(--br2); color: var(--mu); padding: 8px 14px; border-radius: 8px; cursor: pointer; }
.br-btn-primary { background: linear-gradient(135deg, var(--green2), var(--green)); color: var(--on-primary); border: none; padding: 8px 16px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.br-btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.br-release-btn { background: transparent; border: 1px solid var(--amber); color: var(--amber); font-size: 10px; padding: 3px 10px; border-radius: 6px; cursor: pointer; }
.br-release-btn:hover { background: rgba(245,158,11,.1); }
.br-hist-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 8px; }
.br-hist-table th { background: var(--s2); color: var(--mu); padding: 8px; text-align: right; }
.br-hist-table td { padding: 8px; border-bottom: 1px solid var(--br); }
.br-color-amber td:nth-child(3) { color: var(--amber); }
.br-color-red td:nth-child(3) { color: var(--red); }
.br-color-blue td:nth-child(3) { color: var(--blue); }
.br-color-gray td:nth-child(3) { color: var(--mu); }
.br-empty { color: var(--mu); font-size: 12px; padding: 12px; }

/* ── Project detail page ── */
.alert-banner {
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.alert-banner.danger {
  background: rgba(239, 68, 68, .08);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, .2);
}
.project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--s3);
  margin-bottom: 20px;
}
.project-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--tx);
}
.project-meta {
  font-size: 12px;
  color: var(--mu);
  margin-top: 3px;
}
.section-grid { display: grid; gap: 14px; }
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.two-col { grid-template-columns: 1fr 1fr; }
.card {
  background: var(--s2, #18181b);
  border: 1px solid var(--s3, #27272a);
  border-radius: 10px;
  padding: 14px 16px;
}
.card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-title i { color: var(--mu); }
.data-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--s3);
  font-size: 12px;
}
.data-row:last-child { border-bottom: none; }
.data-label { color: var(--mu); }
.data-value { font-family: 'IBM Plex Mono', monospace; }
.data-row.green .data-value { color: var(--green); }
.data-row.red   .data-value { color: #ef4444; }
.data-row.strong .data-label,
.data-row.strong .data-value {
  font-weight: 600;
  color: var(--tx);
}
.progress-mini {
  height: 4px;
  background: var(--s3);
  border-radius: 2px;
  overflow: hidden;
  width: 60px;
}
.progress-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
}
.contractor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--s3);
}
.contractor-row:last-child { border-bottom: none; }
.contractor-trade { color: var(--mu); width: 80px; }
.contractor-name  { color: var(--tx); flex: 1; }
.milestone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--s3);
}
.milestone-row:last-child { border-bottom: none; }
.milestone-name   { flex: 1; color: var(--tx); }
.milestone-amount {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--tx);
}
.btn-approve {
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.3);
  color: var(--green);
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}
.btn-dispute {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  color: #ef4444;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}
.upgrade-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(59,130,246,.06);
  border: 1px solid rgba(59,130,246,.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--mu);
  margin-top: 14px;
}
.btn-upgrade {
  margin-right: auto;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: 5px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.photo-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 5px;
}
.invoice-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--s3);
}
.invoice-row:last-child { border-bottom: none; }
.invoice-info { flex: 1; min-width: 0; }
.invoice-name, .invoice-contractor {
  font-size: 12px;
  color: var(--tx);
}
.invoice-meta {
  font-size: 11px;
  color: var(--mu);
  margin-top: 2px;
}
.invoice-amount {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--tx);
}
.invoice-actions { display: flex; gap: 5px; margin-right: auto; }
.mt-4 { margin-top: 14px; }
.card-footer {
  padding-top: 10px;
  border-top: 1px solid var(--s3);
  margin-top: 10px;
}
.card-link {
  font-size: 11px;
  color: var(--blue);
  text-decoration: none;
  margin-right: auto;
}
.empty-state {
  text-align: center;
  padding: 40px;
  color: var(--mu);
}
.empty-state i { font-size: 40px; margin-bottom: 10px; display: block; }
.empty-state p { margin: 8px 0 12px; }
.empty-state-sm {
  text-align: center;
  padding: 20px;
  color: var(--mu);
  font-size: 12px;
}

.morning-pulse-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.morning-pulse-list li {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
  font-family: var(--font-he);
  line-height: 1.45;
}

.empty-state .empty-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
  color: var(--mu);
}
.empty-state .empty-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tx);
  margin: 0 0 4px;
}
.empty-state .empty-subtitle {
  font-size: 12px;
  color: var(--mu);
  margin: 0 0 12px;
}

/* ── Dashboard project row cards ── */
.project-row-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--s3, #27272a);
  border-radius: 8px;
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
  background: var(--s1, #111113);
  transition: border-color .15s, background .15s;
}
.project-row-card:last-child { margin-bottom: 0; }
.project-row-card:hover {
  border-color: var(--blue, #3b82f6);
  background: rgba(59,130,246,.04);
}
.prc-main { flex: 1; min-width: 0; }
.prc-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx, #fafafa);
}
.prc-meta {
  font-size: 11px;
  color: var(--mu, #71717a);
  margin-top: 2px;
}
.prc-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.prc-progress {
  display: flex;
  align-items: center;
  gap: 6px;
}
.prc-bar {
  width: 60px;
  height: 4px;
  background: var(--s3, #27272a);
  border-radius: 2px;
  overflow: hidden;
}
.prc-fill {
  height: 100%;
  background: var(--blue, #3b82f6);
  border-radius: 2px;
}
.prc-pct {
  font-size: 11px;
  color: var(--mu, #71717a);
  font-family: 'IBM Plex Mono', monospace;
}
.stat-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.stat-badge.red {
  background: rgba(239,68,68,.12);
  color: #ef4444;
}
.stat-badge.amber {
  background: rgba(245,158,11,.12);
  color: #f59e0b;
}
.stat-badge.green {
  background: rgba(34,197,94,.12);
  color: var(--green, #22c55e);
}

.rejection-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--s3);
  text-decoration: none;
  color: inherit;
}
.rejection-row:last-child { border-bottom: none; }
.rejection-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.rejection-badge.P1 {
  background: rgba(239,68,68,.15);
  color: #ef4444;
}
.rejection-info { flex: 1; }
.rejection-title { font-size: 12px; color: var(--tx); }
.rejection-meta { font-size: 11px; color: var(--mu); }

.task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--s3);
  font-size: 12px;
}
.task-row:last-child { border-bottom: none; }
.task-priority {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--s3);
  color: var(--mu);
}

.mb-3 { margin-bottom: 14px; }

/* ── Date picker ─────────────────────────────────────────── */
.bs-date-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.bs-date-wrap .bs-date-input {
  flex: 1;
  cursor: pointer;
  padding-inline-end: 40px !important;
}
.bs-date-trigger {
  position: absolute;
  inset-inline-end: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--s3);
  color: var(--blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.bs-date-trigger:hover { background: var(--s4); }
.bs-date-input::placeholder { color: var(--mu); }

.bs-date-popup {
  position: fixed;
  z-index: 12000;
  inset: 0;
  pointer-events: none;
}
.bs-date-popup:not([hidden]) { pointer-events: auto; }
.bs-dp-panel {
  position: fixed;
  width: min(300px, calc(100vw - 16px));
  background: var(--s2);
  border: 1px solid var(--br2);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
  padding: 14px;
  pointer-events: auto;
  font-family: var(--font-he), var(--font-ui), sans-serif;
}
.bs-dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.bs-dp-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  text-align: center;
}
.bs-dp-sub {
  font-size: 12px;
  color: var(--mu);
  text-align: center;
  margin-top: 2px;
}
.bs-dp-nav {
  width: 34px;
  height: 34px;
  border: 1px solid var(--br);
  border-radius: 10px;
  background: var(--s1);
  color: var(--tx2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bs-dp-nav:hover { border-color: var(--blue); color: var(--blue); }
.bs-dp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--mu);
}
.bs-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.bs-dp-day {
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--tx2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.bs-dp-day:hover { background: var(--s3); color: var(--tx); }
.bs-dp-day.is-out { color: var(--mu2); opacity: .55; }
.bs-dp-day.is-today { box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue); }
.bs-dp-day.is-selected {
  background: var(--blue);
  color: var(--on-primary);
}
.bs-dp-time {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--br);
}
.bs-dp-time label { font-size: 12px; color: var(--mu); font-weight: 600; }
.bs-dp-time-input {
  flex: 1;
  background: var(--s1);
  border: 1px solid var(--br);
  color: var(--tx);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
}
.bs-dp-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.bs-dp-btn {
  flex: 1;
  border-radius: 10px;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--br);
  background: var(--s1);
  color: var(--tx2);
}
.bs-dp-btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-primary);
  flex: 1.4;
}
.bs-dp-btn.ghost:hover { border-color: var(--br2); color: var(--tx); }

/* ── Project wizard + client quotes ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--s3, #27272a);
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--tx);
  margin: 0;
}
.page-sub {
  font-size: 12px;
  color: var(--mu);
  margin-top: 4px;
}
.step-bar{display:flex;margin-bottom:18px;border-radius:8px;overflow:hidden;border:1px solid var(--s3)}
.step{flex:1;padding:8px;text-align:center;font-size:11px;background:var(--s2);color:var(--mu);border-left:1px solid var(--s3)}
.step:last-child{border-left:none}
.step.on{background:rgba(59,130,246,.1);color:var(--blue);font-weight:500}
.step.done{background:rgba(34,197,94,.1);color:var(--green)}
.type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.type-card{border:1px solid var(--s3);border-radius:8px;padding:12px;text-align:center;cursor:pointer;transition:all .15s}
.type-card:hover,.type-card.active{border-color:var(--blue);background:rgba(59,130,246,.05)}
.type-icon{font-size:22px;margin-bottom:4px}
.type-name{font-size:12px;font-weight:600;color:var(--tx)}
.type-sub{font-size:10px;color:var(--mu)}
.wizard-form .form-group,.form-group{margin-bottom:12px}
.form-label{font-size:11px;color:var(--mu);display:block;margin-bottom:4px}
.form-input{width:100%;background:var(--s2);border:1px solid var(--s3);border-radius:6px;padding:7px 10px;font-size:12px;color:var(--tx);box-sizing:border-box;font-family:inherit}
.form-input:focus{outline:none;border-color:var(--blue)}
.form-select{width:100%;background:var(--s2);border:1px solid var(--s3);border-radius:6px;padding:7px 10px;font-size:12px;color:var(--tx);font-family:inherit}
.form-grid{display:grid;gap:12px}
.two-col{grid-template-columns:1fr 1fr}
.three-col{grid-template-columns:1fr 1fr 1fr}
@media(max-width:640px){
  .two-col,.three-col,.dashboard-grid{grid-template-columns:1fr}
}
.boq-header{display:flex;gap:6px;padding:4px 0;font-size:10px;font-weight:500;color:var(--mu);border-bottom:1px solid var(--s3);margin-bottom:6px;align-items:center}
.boq-header .bh-desc{flex:1;min-width:120px}
.boq-header .bh-unit{width:80px}
.boq-header .bh-qty{width:70px;text-align:center}
.boq-header .bh-market{width:100px;text-align:center}
.boq-header .bh-price{width:100px;text-align:center}
.boq-header .bh-total{width:90px;text-align:left}
.boq-header .bh-del{width:32px;flex-shrink:0}
.boq-item-row{display:flex;gap:6px;align-items:flex-start;padding:4px 0;border-bottom:1px solid var(--s3);flex-wrap:wrap}
.boq-desc{flex:1!important;min-width:120px;font-size:11px!important}
.boq-unit{width:80px!important;font-size:11px!important}
.boq-qty{width:70px!important;text-align:center!important;font-size:11px!important}
.my-price-wrap{width:100px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.boq-price{width:100%!important;text-align:center!important;font-size:11px!important}
.boq-total{width:90px;font-family:var(--font-mono);font-size:11px;color:var(--tx);text-align:left;padding-top:6px}
.market-price-cell{
  width:100px;flex-shrink:0;text-align:center;font-size:10px;color:var(--mu);
  padding:6px 2px;line-height:1.3;min-height:28px;
}
.market-price-cell.mp-loaded{color:var(--tx);cursor:pointer}
.market-price-cell.mp-loaded:hover{background:var(--s2);border-radius:var(--r-sm)}
.mp-price{display:block;font-family:var(--font-mono);font-weight:600;font-size:11px;color:var(--blue)}
.mp-range{display:block;font-family:var(--font-mono);font-size:9px;color:var(--mu);margin-top:1px}
.mp-meta{display:block;font-size:9px;color:var(--mu);margin-top:1px}
.diff-indicator{font-size:9px;font-weight:600;line-height:1.2;white-space:nowrap}
.diff-indicator.diff-high{color:var(--red)}
.diff-indicator.diff-low{color:var(--green)}
.diff-indicator.diff-ok{color:var(--mu)}
.boq-table .market-price-cell{padding:4px 6px;vertical-align:middle}
.boq-table .market-price-cell .mp-price{font-size:10px}
.btn-remove-row{background:none;border:none;color:#ef4444;cursor:pointer;font-size:16px;width:28px;padding:0;line-height:1}
.quote-summary{background:var(--s2);border-radius:8px;padding:12px 14px;margin-top:14px}
.sum-row{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;color:var(--tx)}
.total-row{font-weight:600;font-size:13px;border-top:1px solid var(--s3);padding-top:8px;margin-top:4px;color:var(--blue)}
.invite-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--s3);font-size:12px}
.invite-row:last-child{border-bottom:none}
.invite-email{flex:1;color:var(--tx)}
.role-badge{font-size:10px;padding:1px 8px;border-radius:8px;background:rgba(59,130,246,.1);color:var(--blue)}
.invite-form-row{padding-top:10px;margin-top:6px;border-top:1px solid var(--s3)}
.role-legend{background:var(--s2);border-radius:8px;padding:12px 14px;margin-top:10px;font-size:11px}
.legend-title{color:var(--mu);margin-bottom:8px;font-size:10px;font-weight:500}
.legend-row{display:flex;align-items:center;gap:8px;padding:3px 0;color:var(--mu);flex-wrap:wrap}
.quote-preview-card{background:var(--s1);border:1px solid var(--s3);border-radius:12px;padding:24px;max-width:720px}
.quote-doc-header{display:flex;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--s3);margin-bottom:16px;flex-wrap:wrap;gap:12px}
.org-name{font-size:16px;font-weight:700;color:var(--tx)}
.org-details{font-size:11px;color:var(--mu);margin-top:4px;line-height:1.6}
.quote-doc-title{font-size:20px;font-weight:700;color:var(--tx)}
.quote-doc-num{font-size:12px;color:var(--mu)}
.quote-doc-dates{font-size:11px;color:var(--mu);margin-top:4px;line-height:1.6}
.client-info-block{background:var(--s2);border-radius:8px;padding:10px 12px;margin-bottom:14px}
.client-info-label{font-size:10px;color:var(--mu);margin-bottom:3px}
.client-info-name{font-size:13px;font-weight:600;color:var(--tx)}
.client-info-detail{font-size:11px;color:var(--mu)}
.quote-description{font-size:12px;color:var(--mu);margin-bottom:14px}
.quote-items-table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:14px}
.quote-items-table th{background:var(--s2);padding:6px 8px;text-align:right;font-weight:500;color:var(--mu)}
.quote-items-table td{padding:6px 8px;border-bottom:1px solid var(--s3)}
.quote-totals{display:flex;flex-direction:column;align-items:flex-end;gap:3px;margin-bottom:16px}
.totals-row{display:flex;gap:40px;font-size:12px;color:var(--tx)}
.totals-row.grand{font-size:14px;font-weight:700;color:var(--blue);border-top:1px solid var(--s3);padding-top:6px;margin-top:3px}
.payment-terms-block{background:var(--s2);border-radius:8px;padding:10px 14px;font-size:11px;color:var(--mu);margin-bottom:16px;line-height:1.7}
.payment-terms-title{font-weight:600;color:var(--tx);margin-bottom:4px}
.signatures-block{display:flex;justify-content:space-between;padding-top:16px;border-top:1px solid var(--s3);flex-wrap:wrap;gap:16px}
.sig-box{display:flex;flex-direction:column;gap:16px}
.sig-label{font-size:11px;color:var(--mu)}
.sig-line{width:160px;height:1px;background:var(--s3)}
.btn-row{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.btn-primary{background:var(--blue);color:#fff;border:none;border-radius:6px;padding:8px 18px;font-size:12px;font-weight:500;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn-secondary{background:transparent;border:1px solid var(--s3);border-radius:6px;padding:8px 14px;font-size:12px;cursor:pointer;font-family:inherit;color:var(--tx);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.btn-remove{background:none;border:none;color:#ef4444;cursor:pointer;font-size:16px}
.projects-list{display:flex;flex-direction:column;gap:8px}
.project-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  background:var(--s2,#18181b);
  border:1px solid var(--s3,#27272a);
  border-radius:10px;
  text-decoration:none;
  color:inherit;
  transition:border-color .15s;
  width:100%;
  box-sizing:border-box;
}
.project-row:hover{border-color:var(--blue,#3b82f6)}
.project-row-main{flex:1;min-width:0}
.project-row-name{
  font-size:13px;
  font-weight:500;
  color:var(--tx);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-bottom:3px;
}
.project-row-meta{font-size:11px;color:var(--mu)}
.project-row-stats{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  flex-wrap:wrap;
}
.progress-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:72px;
}
.progress-bar-sm{
  width:70px;
  height:4px;
  background:var(--s3,#27272a);
  border-radius:2px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  background:var(--blue,#3b82f6);
  border-radius:2px;
}
.progress-pct{
  font-size:10px;
  color:var(--mu);
  font-family:var(--font-mono,'IBM Plex Mono',monospace);
}
.stat-badge{
  font-size:10px;
  padding:2px 8px;
  border-radius:10px;
  flex-shrink:0;
  white-space:nowrap;
}
.stat-badge.red{background:rgba(239,68,68,.1);color:#ef4444}
.stat-badge.amber{background:rgba(245,158,11,.1);color:#f59e0b}
.project-status{font-size:10px;padding:2px 8px;border-radius:6px;background:var(--s2);color:var(--mu);flex-shrink:0}
.project-status.ok,.project-status.active{background:rgba(34,197,94,.1);color:var(--green)}
.empty-state{text-align:center;padding:40px 20px;color:var(--mu)}
.empty-state p{margin:12px 0}

/* ── Projects list cards (/projects) ─────────────────────────────────────── */
.plc-list{display:flex;flex-direction:column;gap:12px}
.plc-card{
  background:var(--s2,#18181b);
  border:1px solid var(--s3,#27272a);
  border-radius:12px;
  overflow:hidden;
  transition:border-color .15s;
}
.plc-card:hover{border-color:color-mix(in srgb,var(--plc-accent,#3b82f6) 55%,var(--s3))}
.plc-main-link{display:block;text-decoration:none;color:inherit;padding:14px 14px 10px}
.plc-header{display:flex;align-items:flex-start;gap:8px}
.plc-chevron{color:var(--mu);font-size:14px;flex-shrink:0;margin-top:6px;order:-1}
.plc-header-body{flex:1;min-width:0}
.plc-title-row{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.plc-icon-wrap{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--plc-accent,#3b82f6) 18%,transparent);
  color:var(--plc-accent,#3b82f6);
}
.plc-icon{font-size:18px}
.plc-titles{flex:1;min-width:0}
.plc-name{font-size:14px;font-weight:600;color:var(--tx);line-height:1.35;margin-bottom:3px}
.plc-subline{font-size:11px;color:var(--mu);line-height:1.4}
.plc-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-right:auto}
.plc-badge{font-size:10px;padding:3px 9px;border-radius:20px;white-space:nowrap}
.plc-badge-status.active{background:rgba(34,197,94,.12);color:#22c55e}
.plc-badge-status.done{background:rgba(113,113,122,.15);color:#a1a1aa}
.plc-badge-status.warn{background:rgba(245,158,11,.12);color:#f59e0b}
.plc-badge-status.crit{background:rgba(239,68,68,.12);color:#ef4444}
.plc-badge-model{background:color-mix(in srgb,var(--plc-accent,#3b82f6) 15%,transparent);color:var(--plc-accent,#3b82f6)}
.plc-badge-trade{background:var(--s3,#27272a);color:var(--mu)}
.plc-progress{display:flex;align-items:center;gap:10px;margin-top:12px}
.plc-progress-pct{
  font-size:11px;color:var(--mu);font-family:var(--font-mono,'IBM Plex Mono',monospace);
  min-width:32px;flex-shrink:0;
}
.plc-progress-track{flex:1;height:6px;background:var(--s3,#27272a);border-radius:3px;overflow:hidden}
.plc-progress-fill{height:100%;border-radius:3px;background:var(--plc-accent,#3b82f6);transition:width .3s}
.plc-kpi-grid{
  display:grid;gap:8px;padding:0 14px 12px;
}
.plc-kpi-4{grid-template-columns:repeat(4,1fr)}
.plc-kpi-3{grid-template-columns:repeat(3,1fr)}
.plc-kpi{
  background:var(--s1,#0f0f10);border:1px solid var(--s3,#27272a);
  border-radius:8px;padding:10px 8px;text-align:center;min-width:0;
}
.plc-kpi-val{display:block;font-size:13px;font-weight:600;color:var(--tx);margin-bottom:3px;font-family:var(--font-mono,'IBM Plex Mono',monospace)}
.plc-kpi-lbl{display:block;font-size:10px;color:var(--mu)}
.plc-kpi-alert{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25)}
.plc-kpi-alert .plc-kpi-val{color:#ef4444}
.plc-kpi-warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.25)}
.plc-kpi-warn .plc-kpi-val{color:#f59e0b}
.plc-kpi-blue{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.2)}
.plc-kpi-blue .plc-kpi-val{color:#60a5fa}
.plc-kpi-green{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.2)}
.plc-kpi-green .plc-kpi-val{color:#4ade80}
.plc-kpi-gold{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.2)}
.plc-kpi-gold .plc-kpi-val{color:#fbbf24}
.plc-kpi-muted{opacity:.65}
.plc-footer{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px 14px;border-top:1px solid var(--s3,#27272a);flex-wrap:wrap;
}
.plc-footer-sub{justify-content:flex-end;border-top:none;padding-top:0}
.plc-updated{font-size:10px;color:var(--mu);flex-shrink:0}
.plc-actions{display:flex;flex-wrap:wrap;gap:6px;margin-right:auto}
.plc-action{
  font-size:11px;padding:6px 12px;border-radius:20px;text-decoration:none;
  border:1px solid var(--s3,#27272a);color:var(--mu);background:transparent;
  transition:border-color .15s,color .15s;
}
.plc-action:hover{border-color:var(--plc-accent,#3b82f6);color:var(--tx)}
.plc-action-primary{
  background:var(--plc-accent,#3b82f6);border-color:var(--plc-accent,#3b82f6);color:#fff;
}
.plc-action-primary:hover{color:#fff;filter:brightness(1.08)}
.plc-theme-blue{--plc-accent:#3b82f6}
.plc-theme-purple{--plc-accent:#a855f7}
.plc-theme-teal{--plc-accent:#14b8a6}
.plc-theme-green{--plc-accent:#22c55e}
.plc-collapsed .plc-progress-fill{background:var(--plc-accent,#22c55e)}
.plc-slots-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;margin-bottom:14px;
  background:var(--s2,#18181b);border:1px solid var(--s3,#27272a);border-radius:10px;
  flex-wrap:wrap;
}
.plc-slots-label{font-size:12px;color:var(--mu)}
.plc-slot-dots{display:flex;gap:6px}
.plc-slot-dot{width:28px;height:8px;border-radius:4px;background:var(--s3,#27272a)}
.plc-slot-dot.on{background:var(--blue,#3b82f6)}
.plc-upgrade{font-size:12px;color:var(--blue,#3b82f6);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
@media(max-width:720px){
  .plc-kpi-4{grid-template-columns:repeat(2,1fr)}
  .plc-title-row{flex-direction:column}
  .plc-badges{margin-right:0}
}

/* ── Renovation Lite home cards ──────────────────────────────────────────── */
.rhc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.rhc-card{
  background:var(--s2,#18181b);border:1px solid var(--s3,#27272a);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
}
.rhc-main-link{display:block;text-decoration:none;color:inherit;padding:14px 14px 10px}
.rhc-header{display:flex;align-items:flex-start;gap:10px}
.rhc-icon{font-size:20px;color:#14b8a6;flex-shrink:0;margin-top:2px}
.rhc-titles{flex:1;min-width:0}
.rhc-name{font-size:14px;font-weight:600;color:var(--tx);line-height:1.35}
.rhc-sub{font-size:11px;color:var(--mu);margin-top:3px}
.rhc-badge{font-size:10px;padding:3px 9px;border-radius:20px;flex-shrink:0}
.rhc-badge.active{background:rgba(34,197,94,.12);color:#22c55e}
.rhc-badge.done{background:rgba(113,113,122,.15);color:#a1a1aa}
.rhc-progress{margin-top:12px}
.rhc-progress-pct{font-size:12px;font-weight:700;color:#14b8a6;font-family:var(--font-mono,'IBM Plex Mono',monospace)}
.rhc-progress-track{height:6px;background:var(--s3,#27272a);border-radius:3px;overflow:hidden;margin:6px 0 4px}
.rhc-progress-fill{height:100%;background:#14b8a6;border-radius:3px}
.rhc-progress-lbl{font-size:10px;color:var(--mu)}
.rhc-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 14px 14px;border-top:1px solid var(--s3,#27272a)}
.rhc-action{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;font-weight:600;padding:10px 8px;border-radius:8px;text-decoration:none;
  border:1px solid var(--s3,#27272a);color:var(--tx);transition:border-color .15s;
}
.rhc-action-ocr:hover{border-color:#f59e0b;color:#f59e0b}
.rhc-action-feed:hover{border-color:#3b82f6;color:#3b82f6}

.bs-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--tx);color:var(--s1);padding:10px 18px;border-radius:8px;font-size:12px;
  opacity:0;transition:opacity .2s,transform .2s;z-index:9999;pointer-events:none}
.bs-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.bs-toast-error{background:#ef4444;color:#fff}
.data-row{display:flex;justify-content:space-between;padding:6px 0;font-size:12px;border-bottom:1px solid var(--s3)}
.data-row:last-child{border-bottom:none}
.data-label{color:var(--mu)}
.data-value{color:var(--tx);font-weight:500}
.import-from-plan-bar{
  background:var(--blue-tint);
  border:1px solid var(--blue-border);
  border-radius:8px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
  font-size:12px;
  color:var(--blue-light);
}
.import-plan-info{
  flex:1;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:180px;
}
.btn-import{
  background:var(--blue);
  color:var(--on-primary);
  border:none;
  border-radius:6px;
  padding:5px 14px;
  font-size:11px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
}
.btn-import:disabled{opacity:.6;cursor:wait}
.import-success-msg{
  width:100%;
  margin-top:4px;
  font-size:11px;
  color:var(--green);
  display:flex;
  align-items:center;
  gap:5px;
}
.boq-price-pending{border-color:var(--amber)!important}
.boq-total.conf-low{color:var(--red)}
.boq-total.conf-medium{color:var(--amber)}
.boq-total.conf-high{color:var(--tx)}

.quick-quote-btn{
  background:linear-gradient(135deg,var(--green2),var(--green));
  color:#fff;border:none;border-radius:6px;padding:8px 18px;
  font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 2px 8px rgba(34,197,94,.25);
  transition:transform .15s,box-shadow .15s;
}
.quick-quote-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(34,197,94,.35);
  color:#fff;
}

/* Price intelligence suggestions */
.price-input-wrap{
  position:relative;
  width:90px;
  flex-shrink:0;
}
.price-suggestion{
  position:absolute;
  top:calc(100% + 4px);
  right:0;
  z-index:100;
  background:var(--s1);
  border:1px solid var(--blue);
  border-radius:var(--r-md);
  padding:7px 10px;
  min-width:240px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.ps-inner{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  flex-wrap:wrap;
}
.ps-icon{font-size:13px}
.ps-avg{
  font-family:var(--font-mono);
  font-weight:500;
  color:var(--blue);
  font-size:13px;
}
.ps-range{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--mu);
}
.ps-meta{
  font-size:10px;
  color:var(--mu);
  flex:1;
}
.ps-apply{
  background:rgba(59,130,246,.12);
  color:var(--blue);
  border:none;
  border-radius:var(--r-sm);
  padding:2px 10px;
  font-size:10px;
  font-weight:500;
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;
}
.ps-apply:hover{opacity:.85}

/* Subcontractor BOQ change requests */
.change-req-page,.change-req-review-page{max-width:960px;margin:0 auto}
.change-req-type{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.change-req-type label{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--s3);border-radius:var(--r-md);cursor:pointer;font-size:12px}
.change-req-type label:has(input:checked){border-color:var(--blue);background:rgba(59,130,246,.08)}
.change-req-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 0;border-bottom:.5px solid var(--s3);font-size:11px}
.change-req-row:last-child{border-bottom:none}
.change-req-table .badge.pending{color:var(--amber)}
.change-req-table .badge.approved{color:var(--green)}
.change-req-table .badge.rejected{color:var(--red)}
.change-req-actions .btn-sm{font-size:10px;padding:4px 10px}

/* Subcontractor interim claim */
.boq-claim-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:.5px solid var(--s3);font-size:12px}
.boq-claim-row:last-child{border-bottom:none}
.claim-summary{background:var(--s2);border-radius:var(--r-md);padding:12px 14px;margin-top:14px}
.claim-history-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-bottom:.5px solid var(--s3);font-size:11px}
.claim-history-row:last-child{border-bottom:none}

/* ═══════════════════════════════════════════════
   DESIGN AUDIT FIXES — June 2026
   ═══════════════════════════════════════════════ */

/* Fix 1: Legacy var aliases
   Fixes 11 templates (~500 broken declarations)
   field_manager, agents, takeoff, contractor_finance,
   site_walk, contractor_update, progress_update,
   contractor_documents, contractor_projects,
   contractor_project_view, contractor_update_entry */
:root {
  --muted:   var(--mu);
  --border:  var(--br, var(--s3));
  --success: var(--green);
  --danger:  var(--red);
  --accent:  var(--blue);
  --accent2: var(--green);
}

/* Fix 2: Global muted utility
   Fixes project_detail, change_requests, boq */
.muted {
  color:     var(--mu);
  font-size: var(--text-sm, 11px);
}

/* Fix 3: Mono numbers — fixes 10+ templates */
.mono,
.font-mono {
  font-family:  var(--font-mono,
                'IBM Plex Mono', monospace);
  direction:    ltr;
  unicode-bidi: isolate;
  text-align:   start;
}

/* Fix 4: LTR inputs — fixes 15+ templates */
input[type="email"],
input[type="tel"],
input[type="url"],
.form-input[type="email"],
.form-input[type="tel"] {
  direction:  ltr;
  text-align: start;
}

/* Fix 5: Alert banner variants
   Fixes claim, setup_team, change_requests,
   project_detail (removes inline duplicates) */
.alert-banner {
  display:     flex;
  align-items: center;
  gap:         8px;
  border-radius: var(--r-md, 8px);
  padding:     10px 14px;
  font-size:   12px;
  margin-bottom: 12px;
  border-width: 1px;
  border-style: solid;
}
.alert-banner.green {
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .35);
  color: var(--green);
}
.alert-banner.amber {
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .35);
  color: var(--amber, #f59e0b);
}
.alert-banner.danger,
.alert-banner.red {
  background: rgba(239, 68, 68, .08);
  border-color: rgba(239, 68, 68, .2);
  color: var(--red, #ef4444);
}
.alert-banner.blue {
  background: rgba(59, 130, 246, .08);
  border-color: rgba(59, 130, 246, .2);
  color: var(--blue);
}

/* Fix 6: Responsive tables
   Fixes change_requests, contracts,
   procurement, index, boq */
.table-wrap {
  overflow-x:               auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom:            12px;
  border-radius:            var(--r-md, 8px);
}
.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-sm, 12px);
}
.data-table th {
  color:         var(--mu);
  font-weight:   600;
  text-align:    start;
  padding:       8px 12px;
  border-bottom: 1px solid var(--s3);
  white-space:   nowrap;
}
.data-table td {
  padding:        8px 12px;
  border-bottom:  1px solid var(--s3);
  vertical-align: top;
}
.data-table tr:last-child td {
  border-bottom: none;
}
@media (max-width: 640px) {
  .data-table--stack thead {
    display: none;
  }
  .data-table--stack td {
    display: block;
    padding: 4px 8px;
  }
  .data-table--stack tr {
    display:       block;
    padding:       8px 0;
    border-bottom: 1px solid var(--s3);
  }
}

/* Fix 7: Page title hierarchy
   Fixes dashboard + 15 inline overrides */
.page-sub {
  font-size:  var(--text-sm, 12px);
  color:      var(--mu);
  margin:     4px 0 0;
  line-height: 1.4;
}
.page-title--lg {
  font-size:   var(--text-2xl, 24px);
  font-weight: 800;
  color:       var(--tx);
}

/* Fix 8: Mobile touch targets
   Fixes all .btn-sm + mobile nav (20+ pages) */
@media (max-width: 640px) {
  .btn-sm,
  .btn-remove,
  .btn-remove-row {
    min-height: 44px;
    min-width:  44px;
    display:    inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-nav-item {
    min-height: 44px;
    font-size:  10px;
    padding:    8px 4px;
  }
}

/* Fix 9: Public auth cards — dark theme
   Fixes accept_invite, error_public */
.auth-card {
  background:    var(--s1);
  border:        1px solid var(--s3);
  border-radius: var(--r-xl, 12px);
  padding:       32px;
  color:         var(--tx);
  max-width:     480px;
  margin:        0 auto;
}

/* Fix 10: BOQ / claim row mobile stack
   Fixes claim.html + similar flex tables */
@media (max-width: 640px) {
  .boq-claim-row {
    flex-wrap: wrap;
    gap:       6px;
    padding:   8px 0;
  }
  .boq-claim-row input.form-input {
    width:     100% !important;
    max-width: 100%;
  }
  .boq-claim-header {
    display: none;
  }
  .boq-header {
    display: none;
  }
  .boq-item-row {
    flex-wrap: wrap;
    gap:       6px;
  }
  .boq-item-row .boq-desc {
    width: 100% !important;
    flex:  unset !important;
  }
}

/* Bonus: type-grid responsive
   Fixes change_request.html on small screens */
@media (max-width: 480px) {
  .type-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Bonus: form-grid responsive
   Fixes two-col forms on mobile */
@media (max-width: 480px) {
  .form-grid.two-col,
  .form-grid.three-col,
  .g2, .g3 {
    grid-template-columns: 1fr !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE NAV — June 2026
   ═══════════════════════════════════════════════════════════ */

/* (Removed old .mobile-nav in favor of universal .bottom-nav in nav_styles.html) */

.mobile-more-menu {
  position:   fixed;
  bottom:     64px;
  right:      0;
  left:       0;
  background: var(--s1);
  border-top: 1px solid var(--s3);
  padding:    12px 0;
  z-index:    199;
  display:    none;
}

.mobile-more-menu.open {
  display: block;
}

.mobile-more-item {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         14px 20px;
  color:           var(--tx);
  font-size:       14px;
  text-decoration: none;
  border-bottom:   1px solid var(--s3);
}

.mobile-more-item:last-child {
  border-bottom: none;
}

.mobile-more-item i {
  font-size: 18px;
  color:     var(--mu);
  width:     24px;
}

/* ═══════════════════════════════════════════════════════════
   AUTH PAGES — June 2026
   ═══════════════════════════════════════════════════════════ */

.auth-page {
  min-height:      100vh;
  background:      var(--bg, #09090b);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         24px 16px;
  direction:       rtl;
}

.auth-logo {
  font-size:     22px;
  font-weight:   700;
  color:         var(--tx);
  margin-bottom: 32px;
  text-align:    center;
}

.auth-logo span {
  color: var(--blue);
}

.auth-box {
  width:         100%;
  max-width:     420px;
  background:    var(--s1);
  border:        1px solid var(--s3);
  border-radius: 12px;
  padding:       32px;
}

.auth-box h1,
.auth-box .form-title {
  font-size:   20px;
  font-weight: 600;
  color:       var(--tx);
  margin:      0 0 6px;
}

.auth-box .auth-sub,
.auth-box .form-sub {
  font-size:  13px;
  color:      var(--mu);
  margin:     0 0 24px;
}

.auth-tabs,
.auth-box .tab-row {
  display:       flex;
  gap:           0;
  background:    var(--s2);
  border-radius: 8px;
  padding:       3px;
  margin-bottom: 24px;
}

.auth-tab,
.auth-box .tab-btn {
  flex:            1;
  padding:         8px;
  text-align:      center;
  font-size:       13px;
  font-weight:     500;
  color:           var(--mu);
  border-radius:   6px;
  cursor:          pointer;
  border:          none;
  background:      none;
  font-family:     inherit;
  transition:      all .15s;
}

.auth-tab.active,
.auth-box .tab-btn.active {
  background: var(--s1);
  color:      var(--tx);
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.auth-divider,
.auth-box .divider {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin:      16px 0;
  color:       var(--mu);
  font-size:   11px;
}

.auth-divider::before,
.auth-divider::after,
.auth-box .divider::before,
.auth-box .divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--s3);
}

.auth-footer {
  text-align:  center;
  margin-top:  20px;
  font-size:   12px;
  color:       var(--mu);
}

.auth-footer a {
  color:           var(--blue);
  text-decoration: none;
}

.auth-box .field {
  margin-bottom: 16px;
}

.auth-box .field label {
  display:       block;
  font-size:     12px;
  font-weight:   600;
  color:         var(--mu);
  margin-bottom: 6px;
}

.auth-box .field input,
.auth-box .field select {
  width:         100%;
  background:    var(--s2);
  border:        1px solid var(--s3);
  border-radius: 8px;
  padding:       11px 14px;
  font-size:     14px;
  color:         var(--tx);
  outline:       none;
  transition:    border-color .15s;
  direction:     rtl;
  font-family:   inherit;
}

.auth-box .field input:focus,
.auth-box .field select:focus {
  border-color: var(--blue);
  box-shadow:   0 0 0 3px rgba(59,130,246,.12);
}

.auth-box .field-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

.auth-box .show-pass {
  position: relative;
}

.auth-box .show-pass input {
  padding-left: 40px;
}

.auth-box .show-pass-btn {
  position:   absolute;
  left:       12px;
  top:        50%;
  transform:  translateY(-50%);
  background: none;
  border:     none;
  color:      var(--mu);
  cursor:     pointer;
  font-size:  16px;
  padding:    0;
}

.auth-box .btn-submit {
  width:         100%;
  padding:       13px;
  border:        none;
  border-radius: 10px;
  background:    linear-gradient(135deg, var(--blue2), var(--green2));
  color:         #fff;
  font-size:     15px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all .15s;
  margin-top:    8px;
}

.auth-box .btn-submit:hover:not(:disabled) {
  transform:  translateY(-1px);
  box-shadow: 0 6px 20px rgba(29,78,216,.35);
}

.auth-box .btn-submit:disabled {
  opacity: .6;
  cursor:  not-allowed;
}

.auth-box .btn-submit .spinner {
  display:       inline-block;
  width:         16px;
  height:        16px;
  border:        2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation:     bs-spin .7s linear infinite;
  vertical-align: middle;
  margin-left:   6px;
}

@keyframes bs-spin {
  to { transform: rotate(360deg); }
}

.auth-box .alert {
  padding:       12px 14px;
  border-radius: 10px;
  font-size:     13px;
  margin-bottom: 16px;
  display:       none;
  align-items:   flex-start;
  gap:           8px;
}

.auth-box .alert.error {
  background: rgba(239,68,68,.1);
  border:     1px solid rgba(239,68,68,.3);
  color:      #fca5a5;
  display:    flex;
}

.auth-box .alert.success {
  background: rgba(16,185,129,.1);
  border:     1px solid rgba(16,185,129,.3);
  color:      #6ee7b7;
  display:    flex;
}

.auth-box .setup-banner {
  background:    rgba(245,158,11,.1);
  border:        1px solid rgba(245,158,11,.3);
  border-radius: 10px;
  padding:       14px;
  margin-bottom: 20px;
  font-size:     12px;
  color:         #fcd34d;
  display:       none;
}

.auth-box .setup-banner code {
  background:    var(--s2);
  padding:       2px 6px;
  border-radius: 4px;
  font-size:     11px;
}

.auth-box .terms-note {
  text-align: center;
  font-size:  11px;
  color:      var(--mu2);
  margin-top: 12px;
  line-height: 1.5;
}

.auth-box .terms-note a,
.auth-box .forgot-link {
  color:           var(--blue);
  text-decoration: none;
  background:      none;
  border:          none;
  cursor:          pointer;
  font-size:       inherit;
  font-family:     inherit;
}

.auth-box .forgot-link:hover,
.auth-box .terms-note a:hover {
  text-decoration: underline;
}

.auth-box .role-desc {
  font-size:  11px;
  color:      var(--mu);
  margin-top: 4px;
}

.auth-plans {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   10px;
  margin-top:            32px;
  max-width:             680px;
  width:                 100%;
}

.auth-plans .plan-mini,
.auth-plan-card {
  background:    var(--s1);
  border:        1px solid var(--s3);
  border-radius: 10px;
  padding:       16px;
  text-align:    center;
  cursor:        pointer;
  transition:    border-color .15s;
}

.auth-plans .plan-mini:hover,
.auth-plan-card:hover,
.auth-plan-card.selected {
  border-color: var(--blue);
}

.auth-plans .plan-mini.popular,
.auth-plan-card.featured {
  border-color: var(--blue);
  background:   rgba(59,130,246,.05);
}

.auth-plan-name,
.auth-plans .plan-mini-name {
  font-size:     12px;
  color:         var(--mu);
  margin-bottom: 6px;
}

.auth-plan-price,
.auth-plans .plan-mini-price {
  font-size:   22px;
  font-weight: 700;
  color:       var(--tx);
}

.auth-plan-price span,
.auth-plans .plan-mini-price span {
  font-size:   12px;
  font-weight: 400;
  color:       var(--mu);
}

.auth-plan-for,
.auth-plans .plan-mini-tagline {
  font-size:  11px;
  color:      var(--mu);
  margin-top: 4px;
}

.auth-plans-section {
  width:     100%;
  max-width: 680px;
}

.auth-plans-title {
  text-align:    center;
  font-size:     14px;
  color:         var(--mu);
  margin:        24px 0 12px;
}

.auth-plans-link {
  display:         block;
  text-align:      center;
  margin-top:      12px;
  font-size:       12px;
  color:           var(--blue);
  text-decoration: none;
}

.auth-plans .plan-mini {
  position: relative;
}

.auth-plans .plan-mini-tag {
  position:      absolute;
  top:           -10px;
  right:         50%;
  transform:     translateX(50%);
  background:    var(--blue);
  color:         #fff;
  font-size:     10px;
  font-weight:   700;
  padding:       3px 10px;
  border-radius: 20px;
  white-space:   nowrap;
}

.auth-plans .plan-mini-badge {
  font-size:     26px;
  margin-bottom: 6px;
}

.auth-plans .plan-mini-limit {
  font-size:     10px;
  font-weight:   600;
  color:         var(--mu);
  background:    var(--s2);
  padding:       4px 8px;
  border-radius: 6px;
  display:       inline-block;
  margin:        8px 0 12px;
}

.auth-plans .plan-mini-price.free {
  font-size:   18px;
  font-weight: 800;
  color:       var(--green);
}

.auth-plans .plan-mini-cta {
  width:         100%;
  padding:       8px;
  border-radius: 8px;
  border:        1px solid var(--s3);
  background:    var(--s2);
  color:         var(--tx);
  font-size:     11px;
  font-weight:   700;
  cursor:        pointer;
  transition:    all .15s;
}

.auth-plans .plan-mini-cta:hover {
  background:   var(--s3);
  border-color: var(--blue);
  color:        var(--blue);
}

@media (max-width: 640px) {
  .auth-box {
    padding: 24px 16px;
  }
  .auth-plans {
    grid-template-columns: 1fr;
    max-width:             100%;
  }
  .auth-box .field-row {
    grid-template-columns: 1fr;
  }
}

/* ══ KPI CARDS ══════════════════════════════ */
.kpi-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.kpi-2 { grid-template-columns: 1fr 1fr; }
.kpi-3 { grid-template-columns: 1fr 1fr 1fr; }
.kpi-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.kpi-card {
  background: var(--s2);
  border: 1px solid var(--s3);
  border-radius: 10px;
  padding: 16px;
  display: block;
}
.kpi-card .kpi-value {
  font-size: 26px;
  font-weight: 600;
  color: var(--tx);
  font-family: 'IBM Plex Mono', monospace;
  margin-bottom: 6px;
  display: block;
  line-height: 1.1;
}
.kpi-card .kpi-label {
  font-size: 12px;
  color: var(--mu);
  display: block;
  line-height: 1.4;
}
.kpi-card .kpi-sub {
  font-size: 11px;
  margin-top: 5px;
  display: block;
}
.kpi-card.blue {
  border-color: rgba(59,130,246,.35);
  background: rgba(59,130,246,.07);
}
.kpi-card.blue .kpi-value {
  color: var(--blue);
}
.kpi-card.green {
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.07);
}
.kpi-card.green .kpi-value {
  color: var(--green);
}
.kpi-card.red {
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.07);
}
.kpi-card.red .kpi-value {
  color: #ef4444;
}
.kpi-card.amber {
  border-color: rgba(245,158,11,.35);
  background: rgba(245,158,11,.07);
}
.kpi-card.amber .kpi-value {
  color: #f59e0b;
}

/* ══ PROJECT ROW CARDS ══════════════════════ */
.project-row-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--s2);
  border: 1px solid var(--s3);
  border-radius: 10px;
  margin-bottom: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s;
}
.project-row-card:hover {
  border-color: var(--blue);
}
.prc-main  { flex: 1; min-width: 0; }
.prc-name  {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 3px;
}
.prc-meta { font-size: 11px; color: var(--mu); }
.prc-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.prc-bar {
  width: 70px;
  height: 4px;
  background: var(--s3);
  border-radius: 2px;
  overflow: hidden;
}
.prc-fill {
  height: 100%;
  background: var(--blue);
  border-radius: 2px;
}
.prc-pct {
  font-size: 10px;
  color: var(--mu);
  font-family: 'IBM Plex Mono', monospace;
  min-width: 26px;
}

/* ══ CARDS ══════════════════════════════════ */
.card {
  background: var(--s2);
  border: 1px solid var(--s3);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--tx);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-title i {
  font-size: 16px;
  color: var(--mu);
}

/* ══ PAGE HEADER ═════════════════════════════ */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--s3);
  margin-bottom: 20px;
}
.page-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--tx);
  margin: 0;
}
.page-sub {
  font-size: 12px;
  color: var(--mu);
  margin-top: 4px;
}

/* ══ DATA ROWS ═══════════════════════════════ */
.data-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--s3);
  font-size: 12px;
}
.data-row:last-child { border-bottom: none; }
.data-label { color: var(--mu); flex: 1; }
.data-value {
  color: var(--tx);
  font-family: 'IBM Plex Mono', monospace;
}
.data-row.strong .data-label,
.data-row.strong .data-value {
  font-weight: 500;
  font-size: 13px;
}

/* ══ BADGES ══════════════════════════════════ */
.stat-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
.stat-badge.red, .badge.red {
  background: rgba(239,68,68,.1);
  color: #ef4444;
}
.stat-badge.amber, .badge.amber {
  background: rgba(245,158,11,.1);
  color: #f59e0b;
}
.stat-badge.green, .badge.green {
  background: rgba(34,197,94,.1);
  color: var(--green);
}
.stat-badge.blue, .badge.blue {
  background: rgba(59,130,246,.1);
  color: var(--blue);
}

/* ══ BUTTONS ═════════════════════════════════ */
.btn-primary {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-secondary {
  background: transparent;
  color: var(--tx);
  border: 1px solid var(--s3);
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-approve {
  background: rgba(34,197,94,.1);
  color: var(--green);
  border: 1px solid rgba(34,197,94,.3);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.btn-dispute {
  background: var(--s3);
  color: var(--mu);
  border: 1px solid var(--s3);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════
   ConKore.AI Design System — Patch v3
   Bridges base.css variables, adds PWA zero-scroll layout,
   enforces component consistency across all templates.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. CSS Variable Bridge
   Aliases from base.css / Tailwind naming → buildsmart tokens
   This makes templates using either naming convention work correctly. ── */
:root {
  --text-primary:   var(--tx);
  --text-secondary: var(--mu);
  --border-color:   var(--br);
  --bg-primary:     var(--bg);
  --bg-secondary:   var(--s2);
  --surface:        var(--s1);
  --surface-raised: var(--s2);
  --muted:          var(--mu);
  --muted2:         var(--mu2);
}

/* ── 2. PWA Zero-Scroll App Shell
   Core operational layout: sidebar + main content,
   100vh height, internal scroll only. ── */
html, body {
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
  height: 100%;
}

.app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* dynamic viewport on mobile */
  overflow: hidden;
  background: var(--bg);
}

.app-shell-row {
  display: flex;
  flex: 1;
  min-height: 0; /* critical: allows children to shrink below content size */
  overflow: hidden;
}

.app-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--tx);
  /* Smooth momentum scroll on iOS */
  -webkit-overflow-scrolling: touch;
}

/* Prevent text selection on tap for native-feel PWA */
.navbar, .sidebar, .topbar, .mobile-nav, .stepbar {
  user-select: none;
  -webkit-user-select: none;
}

/* ── 3. Card System (Shadcn/ui inspired)
   Use .card for elevated surfaces, .card-flat for flush panels ── */
.card {
  background:    var(--s2);
  border:        1px solid var(--s3);
  border-radius: var(--r-lg);
  padding:       16px;
  transition:    border-color var(--fast), box-shadow var(--fast);
}
.card:hover {
  border-color:  var(--br2);
  box-shadow:    var(--shadow-sm);
}
.card-flat {
  background:    var(--s1);
  border:        1px solid var(--br);
  border-radius: var(--r-md);
  padding:       12px 16px;
}
.card-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   12px;
  padding-bottom:  10px;
  border-bottom:   1px solid var(--br);
}
.card-title {
  font-size:   13px;
  font-weight: 700;
  color:       var(--tx);
}

/* Bridge: templates using card-conkore-dashboard get dark-mode styling */
.card-conkore-dashboard {
  background:    var(--s2) !important;
  border:        1px solid var(--s3) !important;
  border-radius: var(--r-lg) !important;
  color:         var(--tx) !important;
  transition:    border-color var(--fast), box-shadow var(--fast);
}
.card-conkore-dashboard:hover {
  border-color: var(--br2) !important;
  box-shadow:   var(--shadow-sm) !important;
}

/* ── 4. KPI Cards ── */
.kpi-card {
  background:    var(--s2);
  border:        1px solid var(--s3);
  border-radius: var(--r-lg);
  padding:       14px 16px;
  display:       flex;
  flex-direction: column;
  gap:           4px;
}
.kpi-card-value,
.kpi-val, .kpi-value, .stat-value {
  font-family:          var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size:            22px;
  font-weight:          700;
  color:                var(--tx);
  line-height:          1.1;
}
.kpi-card-label,
.kpi-label {
  font-size:  11px;
  color:      var(--mu);
  font-family: var(--font-he);
}
.kpi-hint {
  font-size: 10px;
  color: var(--mu2);
  line-height: 1.45;
  font-family: var(--font-he);
}
.kpi-card-sub {
  font-family:          var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size:            11px;
  color:                var(--mu);
}
/* Colour-coded left border for status */
.kpi-card.success { border-inline-start: 3px solid var(--green); }
.kpi-card.warning { border-inline-start: 3px solid var(--amber); }
.kpi-card.danger  { border-inline-start: 3px solid var(--red);   }
.kpi-card.info    { border-inline-start: 3px solid var(--cyan);  }

/* ── 5. Status dots — unified ── */
.status-dot {
  display:       inline-block;
  width:         8px;
  height:        8px;
  border-radius: 50%;
  flex-shrink:   0;
}
.status-dot.green,  .status-dot.success  { background: var(--green); }
.status-dot.amber,  .status-dot.warning  { background: var(--amber); }
.status-dot.red,    .status-dot.danger   { background: var(--red);   }
.status-dot.blue,   .status-dot.info     { background: var(--cyan);  }
.status-dot.purple, .status-dot.ai       { background: var(--purple);}
.status-dot.grey,   .status-dot.inactive { background: var(--mu2);   }

/* ── 6. Monospace enforcement for financial / numeric data ── */
.mono,
[class*="price"], [class*="amount"], [class*="total"],
[class*="pct"], [class*="qty"], [class*="balance"],
.boq-number, .fin-num, .gantt-date,
td.num, th.num {
  font-family:          var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing:       -0.01em;
}

/* ── 7. Table system ── */
.bs-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       12px;
}
.bs-table th {
  background:    var(--s1);
  color:         var(--mu);
  font-size:     10px;
  font-weight:   600;
  letter-spacing:.5px;
  text-transform: uppercase;
  padding:       8px 12px;
  border-bottom: 1px solid var(--br);
  white-space:   nowrap;
  font-family:   var(--font-ui);
  position:      sticky;
  top:           0;
  z-index:       1;
}
.bs-table td {
  padding:       9px 12px;
  border-bottom: 1px solid var(--br);
  color:         var(--tx2);
  vertical-align: middle;
}
.bs-table td.num,
.bs-table th.num {
  text-align: left; /* numbers LTR in RTL layout */
  direction:  ltr;
}
.bs-table tr:hover td {
  background: var(--s2);
}
.bs-table tr:last-child td {
  border-bottom: none;
}

/* ── 8. Section header (page titles inside content) ── */
.section-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             10px;
  padding-bottom:  14px;
  border-bottom:   1px solid var(--br);
  margin-bottom:   18px;
}
.section-title {
  font-size:   18px;
  font-weight: 700;
  color:       var(--tx);
  font-family: var(--font-he);
}
.section-subtitle {
  font-size:  12px;
  color:      var(--mu);
  margin-top: 2px;
}

/* ── 9. Pill badges — unified across templates ── */
.pill {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       2px 8px;
  border-radius: 100px;
  font-size:     10px;
  font-weight:   500;
  white-space:   nowrap;
}
.pill-green  { background: rgba(20,184,166,.12); color: var(--green);  border: 1px solid rgba(20,184,166,.25);  }
.pill-amber  { background: rgba(245,158,11,.12); color: var(--amber);  border: 1px solid rgba(245,158,11,.25);  }
.pill-red    { background: rgba(239,68,68,.12);  color: var(--red);    border: 1px solid rgba(239,68,68,.25);   }
.pill-blue   { background: rgba(30,58,138,.25);  color: var(--cyan);   border: 1px solid rgba(6,182,212,.25);   }
.pill-purple { background: rgba(139,92,246,.12); color: var(--purple); border: 1px solid rgba(139,92,246,.25);  }
.pill-grey   { background: var(--s3);            color: var(--mu);     border: 1px solid var(--br);             }

/* ── 10. AI-specific colour tokens (workspace, plan viewer) ── */
:root {
  --ai-structural:  #22d3ee;  /* Cyan-400  — שלד */
  --ai-plumbing:    #e879f9;  /* Fuchsia-400 — אינסטלציה */
  --ai-electrical:  #fde047;  /* Yellow-300 — חשמל */
  --ai-clash:       #ef4444;  /* Red-500 — התנגשות */
  --ai-verified:    #22c55e;  /* Green-500 — אומת */
  --ai-unverified:  #f59e0b;  /* Amber-500 — לא אומת */
}

/* ── 11. Gantt / BOQ table monospace consistency ── */
.gantt-cell, .gantt-header-cell,
.boq-cell-qty, .boq-cell-price, .boq-cell-total {
  font-family:          var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size:            11px;
}

/* ── 12. Ghost/Outline button variant (missing from base) ── */
.btn-ghost {
  background:  transparent;
  color:       var(--mu);
  border:      1px solid var(--br);
  border-radius: var(--r-md);
}
.btn-ghost:hover {
  background:  var(--s2);
  color:       var(--tx);
  border-color: var(--br2);
}
.btn-danger {
  background: rgba(239,68,68,.12);
  color:      var(--red);
  border:     1px solid rgba(239,68,68,.25);
  border-radius: var(--r-md);
}
.btn-danger:hover {
  background: rgba(239,68,68,.2);
}

/* ── 13. Mobile-first responsive grid for KPI rows ── */
.kpi-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:                   10px;
}
@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .card      { padding: 12px; }
  .kpi-card  { padding: 10px 12px; }
  .kpi-card-value, .kpi-val { font-size: 18px; }
}

/* ── 14. Scrollable inner panels (sidebar, lists) ── */
.inner-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.inner-scroll::-webkit-scrollbar { width: 4px; }
.inner-scroll::-webkit-scrollbar-track { background: transparent; }
.inner-scroll::-webkit-scrollbar-thumb { background: var(--s4); border-radius: 4px; }
.inner-scroll::-webkit-scrollbar-thumb:hover { background: var(--mu2); }

/* ── 15. Empty state ── */
.empty-state {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  padding:         40px 20px;
  text-align:      center;
  color:           var(--mu);
}
.empty-state-icon { font-size: 32px; opacity: .4; }
.empty-state-title { font-size: 14px; font-weight: 600; color: var(--tx2); }
.empty-state-sub   { font-size: 12px; color: var(--mu); }