/* Sales Pipeline view styles - SCOPED.
   ------------------------------------------------------------------------
   The pipeline board, handover and leads views now live inside the main
   interface's pages rather than in a separate single-page app, so this
   stylesheet is loaded alongside static/css/style.css. Both files define
   .card, .btn, .badge and .table-wrap with different meanings, so every rule
   here is scoped under `.sp-scope`, the wrapper the views are mounted in.

   Generated from the original by scoping each selector; edit freely, just
   keep new rules inside the same wrapper.

   The token bridge in static/css/pipeline-bridge.css re-points the surface
   and text variables at the main interface's palette, so the views inherit
   one theme (including dark mode) instead of carrying a second one.
   ------------------------------------------------------------------------ */
/* Sales Pipeline App styles
   Palette follows the validated dataviz reference palette. */
.sp-scope {
  color-scheme: light;
  /* Shared brand tokens with the Cost Analysis half of the app (see
     ../../../static/css/style.css) - constant across light/dark, unlike the
     surface/text tokens below, so the topbar and primary actions read as the
     same product on both sides of the merged app. */
  --brand-navy: #16294d;
  --brand-navy-dark: #101d38;
  --brand-gold: #b8912b;
  --brand-gold-light: #d4ac4f;
  --surface-1: #f5f6fa;
  --surface-2: #f5f6fa;
  --surface-card: #ffffff;
  --text-primary: #14171f;
  --text-secondary: #667085;
  --text-muted: #667085;
  --gridline: #e6e8ef;
  --baseline: #c9cdd8;
  --border: #e6e8ef;
  --series-1: #2a78d6; /* blue */
  --series-2: #eb6834; /* orange */
  --series-3: #1baf7a; /* aqua */
  --series-4: #eda100; /* yellow */
  --series-5: #e87ba4; /* magenta */
  --series-6: #4a3aa7; /* violet */
  --good: #12805c;
  /* Amber used as FOREGROUND (overdue badges, money chips). Split from the
     amber backgrounds for the same reason --navy-ink exists on the Cost
     Analysis side: one dark value cannot serve as text in both themes. */
  --warn-ink: #8a6100;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d1373f;
  --radius: 10px;
  --font: system-ui, -apple-system, "Segoe UI", "Tahoma", sans-serif;
  --topbar-h: 60px;
}
@media (prefers-color-scheme: dark) {
.sp-scope:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-1: #14151a;
    --surface-2: #14151a;
    --surface-card: #1d1f26;
    --text-primary: #edeef2;
    --text-secondary: #9aa1b1;
    --text-muted: #9aa1b1;
    --gridline: #33353f;
    --baseline: #4a4d59;
    --border: #33353f;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #9085e9;
    --warn-ink: #e0a83a;
  }
}
.sp-scope[data-theme="dark"] {
  color-scheme: dark;
  --warn-ink: #e0a83a;
  --surface-1: #14151a;
  --surface-2: #14151a;
  --surface-card: #1d1f26;
  --text-primary: #edeef2;
  --text-secondary: #9aa1b1;
  --text-muted: #9aa1b1;
  --gridline: #33353f;
  --baseline: #4a4d59;
  --border: #33353f;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #9085e9;
}
.sp-scope, .sp-scope * { box-sizing: border-box; }
.sp-scope {
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 14.5px;
  line-height: 1.5;
}
[dir="rtl"] .sp-scope { text-align: right; }
.sp-scope button, .sp-scope input, .sp-scope select, .sp-scope textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
.sp-scope a { color: var(--series-1); }
.sp-scope .hidden { display: none !important; }
/* ---------- Login screen ---------- */
.sp-scope .login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sp-scope .login-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.sp-scope .login-card h1 {
  font-size: 20px;
  margin: 0 0 4px;
}
.sp-scope .login-card .subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 24px;
}
.sp-scope .login-lang-toggle {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}
/* ---------- Layout ---------- */
.sp-scope .app-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.sp-scope .topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  /* min-height, not height: the bar has to be free to grow when its
     contents wrap (five tab buttons in Arabic, or any phone width).
     A fixed height made the wrapped row spill out over the gold underline
     instead, leaving the last tab half-hidden behind the page below. */
  min-height: var(--topbar-h);
  flex-wrap: wrap;
  row-gap: 8px;
  padding: 8px 20px;
  /* Matches Cost Analysis's header.topbar exactly (navy + gold underline) -
     the one piece of chrome present on every screen in both modules, so
     it's what makes the merged app read as one product rather than two. */
  background: var(--brand-navy);
  color: #fff;
  border-bottom: 3px solid var(--brand-gold);
  position: sticky;
  top: 0;
  z-index: 20;
}
.sp-scope .topbar .brand {
  font-weight: 700;
  font-size: 16px;
  margin-inline-end: auto;
  color: #fff;
}
.sp-scope .topbar a.btn, .sp-scope .topbar button.btn:not(.theme-toggle):not(.notif-btn) {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}
.sp-scope .topbar a.btn:hover, .sp-scope .topbar button.btn:not(.theme-toggle):not(.notif-btn):hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.3);
}
.sp-scope .tabs {
  display: flex;
  gap: 4px;
  /* Five tabs (My Pipeline / Leads / Contacts / Dashboard / Account) do not
     fit one phone-width row: they used to run off the edge of the screen,
     which put Dashboard and Account out of reach entirely on a phone - the
     tab strip is inside the fixed topbar, so the page could not be scrolled
     sideways to get to them. Wrapping keeps every tab reachable. */
  flex-wrap: wrap;
  row-gap: 6px;
  min-width: 0;
}
.sp-scope .tab-btn {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 600;
}
.sp-scope .tab-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sp-scope .tab-btn.active {
  background: var(--brand-gold);
  color: #fff;
}
.sp-scope .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}
.sp-scope .user-chip {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}
.sp-scope .btn {
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.sp-scope .btn:hover { border-color: var(--series-1); }
/* An <a class="btn"> is a button, not body copy: without this it kept the
   link underline and sat on the text baseline. Only .export-toolbar .btn
   used to say so, so every other link-button in the app (the customer-file
   shortcut in Contacts, the prompt after registering a customer) came out
   underlined. */
.sp-scope a.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}
.sp-scope .btn-primary {
  /* Shared brand gold - same accent as Cost Analysis's .btn.gold, so the
     primary call-to-action color is identical across both modules. */
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #fff;
}
.sp-scope .btn-primary:hover { background: var(--brand-gold-light); border-color: var(--brand-gold-light); }
.sp-scope .btn-danger {
  color: var(--critical);
  border-color: var(--critical);
  background: transparent;
}
.sp-scope .btn-ghost {
  border-color: transparent;
  background: transparent;
}
.sp-scope .btn-sm { padding: 5px 10px; font-size: 13px; }
.sp-scope main.content {
  flex: 1;
  padding: 24px;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
}
.sp-scope .view { display: none; }
.sp-scope .view.active { display: block; }
.sp-scope h2.section-title {
  font-size: 18px;
  margin: 0 0 16px;
}
.sp-scope .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sp-scope .section-header .section-title { margin: 0 0 16px; }
.sp-scope .export-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.sp-scope .export-toolbar .btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.sp-scope h3.subsection-title {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 4px 0 12px;
}
.sp-scope .value-sub {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}
.sp-scope .toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sp-scope .toolbar select, .sp-scope .toolbar input {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-card);
}
/* ---------- Cards / stats ---------- */
.sp-scope .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.sp-scope .stat-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.sp-scope .stat-card .label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sp-scope .stat-card .value {
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sp-scope .stat-icon {
  font-size: 14px;
  line-height: 1;
}
.sp-scope .chart-icon {
  margin-inline-end: 6px;
}
.sp-scope .trend-badge {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* ---------- Charts (bar) ---------- */
.sp-scope .chart-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 20px;
}
.sp-scope .chart-card h3 {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--text-secondary);
}
.sp-scope .bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 90px;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
}
.sp-scope .bar-row .bar-label {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-scope .bar-track {
  background: var(--gridline);
  border-radius: 4px;
  height: 10px;
  position: relative;
  overflow: hidden;
}
.sp-scope .bar-fill {
  background: var(--series-1);
  height: 100%;
  border-radius: 4px;
  min-width: 2px;
}
.sp-scope .bar-value {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-align: end;
}
.sp-scope .bar-row-clickable {
  cursor: pointer;
  border-radius: 6px;
  margin-inline: -6px;
  padding-inline: 6px;
  transition: background 0.1s ease;
}
.sp-scope .bar-row-clickable:hover { background: var(--surface-2); }
.sp-scope .bar-row-clickable:hover .bar-label { color: var(--text-primary); }
.sp-scope .am-row-clickable { cursor: pointer; }
.sp-scope .am-row-clickable:hover td { background: var(--surface-2); }
.sp-scope .charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}
/* ---------- Table ---------- */
.sp-scope .table-wrap {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.sp-scope table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13.5px;
  min-width: 960px;
}
.sp-scope thead th {
  text-align: start;
  padding: 11px 14px;
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-card);
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
}
.sp-scope thead th.num { text-align: end; }
.sp-scope tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--gridline);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.sp-scope tbody td.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.sp-scope tbody td.wrap-cell {
  white-space: normal;
  max-width: 260px;
  overflow: visible;
  text-overflow: clip;
}
.sp-scope tbody td.nowrap-cell { overflow: visible; text-overflow: clip; }
.sp-scope tbody tr:hover { background: var(--surface-2); }
.sp-scope tbody tr:nth-child(even) { background: var(--surface-1); }
.sp-scope tbody tr:nth-child(even):hover { background: var(--surface-2); }
.sp-scope .badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.sp-scope .source-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--gridline);
}
.sp-scope .badge-prospecting { background: rgba(42,120,214,0.12); color: var(--series-1); }
.sp-scope .badge-qualification { background: rgba(74,58,167,0.12); color: var(--series-6); }
.sp-scope .badge-proposal { background: rgba(237,161,0,0.15); color: var(--warn-ink); }
.sp-scope .badge-negotiation { background: rgba(235,104,52,0.14); color: var(--series-2); }
.sp-scope .badge-po_received { background: rgba(12,163,12,0.14); color: var(--good); }
.sp-scope .badge-lost { background: rgba(208,59,59,0.12); color: var(--critical); }
.sp-scope .badge-not_applicable { background: var(--gridline); color: var(--text-muted); }
/* "something is still owed" - missing customer certificates. Same amber as
   Cost Analysis's own .badge-warn so one badge means one thing app-wide. */
.sp-scope .badge-warn { background: rgba(250,178,25,0.18); color: var(--warn-ink); }
.sp-scope .badge-pending { background: rgba(250,178,25,0.18); color: var(--warn-ink); }
.sp-scope .badge-received { background: rgba(12,163,12,0.14); color: var(--good); }
.sp-scope .badge-invoiced { background: rgba(27,175,122,0.15); color: var(--series-3); }
.sp-scope .badge-cancelled { background: rgba(208,59,59,0.12); color: var(--critical); }

/* A deal's figure here is the engineer's quotation, not the Account
   Manager's own estimate - this marks that so the difference between the
   pipeline table and the number the manager typed in isn't read as an error.
   Same amber family as the other status badges above. */
.sp-scope .badge-quoted {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(184,145,43,0.16);
  color: var(--accent, #b8912b);
  vertical-align: middle;
  cursor: help;
}
.sp-scope .quoted-hint { color: var(--accent, #b8912b); }

/* Estimate-accuracy table (dashboard, admin only): the difference column
   reads as a color, not just a sign, the same way the rest of the dashboard
   uses --good/--critical for "on target" vs. "off". */
.sp-scope .diff-over { color: var(--critical); font-weight: 600; }
.sp-scope .diff-under { color: var(--good); font-weight: 600; }
.sp-scope .status-select {
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
}
/* The main stylesheet gives every <select> width: 100% and a 38px
   minimum height (right for a form). In a table cell whose width is
   decided by its content, 100% collapsed this control to a 35px circle
   showing two letters of the stage name. Inside a table it takes its own
   width; the full width is kept for the stacked card layout on a phone. */
.sp-scope table .status-select { width: auto; max-width: none; }
.sp-scope .status-select { min-height: 0; padding-inline-end: 24px; }
.sp-scope .status-select:hover { border-color: var(--border); }
.sp-scope .status-select:focus {
  outline: 2px solid var(--series-1);
  outline-offset: 1px;
}
.sp-scope .row-actions { display: flex; gap: 6px; }
/* Three actions per row (Edit / Files / Delete) no longer fit the content
   column at its 1180px max-width, and the last one was cut off at the edge
   of the table. Tighter horizontal padding on the buttons in this cell only
   buys back the ~25px needed; every other .btn-sm keeps its own size. */
.sp-scope .row-actions { gap: 4px; }
.sp-scope .row-actions .btn-sm { padding: 5px 7px; }
.sp-scope .empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-muted);
}
/* ---------- Modal / form ---------- */
.sp-scope .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 50;
}
.sp-scope .modal {
  background: var(--surface-card);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 640px;
}
.sp-scope .modal h3 { margin: 0; font-size: 17px; }
/* A short confirmation/prompt modal (e.g. "customer registered - now attach
   its certificates"): narrower than a form modal, since a 640px box around
   two sentences reads as an empty screen. */
.sp-scope .modal-narrow { max-width: 460px; }
.sp-scope .modal-narrow p { margin: 12px 0 0; line-height: 1.6; }
.sp-scope .badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sp-scope .modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.sp-scope .modal-close-x {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0 4px;
}
.sp-scope .modal-close-x:hover { color: var(--text-primary); }
.sp-scope .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sp-scope .form-grid .full { grid-column: 1 / -1; }
.sp-scope .field label {
  display: block;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.sp-scope .field input, .sp-scope .field select, .sp-scope .field textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-1);
}
.sp-scope .field textarea { resize: vertical; min-height: 60px; }
.sp-scope .field-hint { font-size: 11.5px; color: var(--text-secondary); margin: 4px 0 0; }
.sp-scope .field-hint a { color: var(--accent, #b8912b); }
.sp-scope .modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.sp-scope .form-error {
  color: var(--critical);
  font-size: 13px;
  margin-top: 10px;
}
.sp-scope .import-summary {
  font-weight: 600;
  margin: 14px 0 6px;
  color: var(--text-primary);
}
.sp-scope .import-issue-list {
  max-height: 160px;
  overflow-y: auto;
  margin: 0 0 10px;
  padding-inline-start: 20px;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.sp-scope .form-success {
  color: var(--good);
  font-size: 13px;
  margin-top: 10px;
}
/* Lang toggle */
.sp-scope .lang-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.sp-scope .lang-toggle button {
  border: none;
  background: transparent;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-secondary);
}
.sp-scope .lang-toggle button.active {
  background: var(--series-1);
  color: #fff;
}
.sp-scope .card-section {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  max-width: 480px;
}
.sp-scope .user-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--gridline);
  flex-wrap: wrap;
}
.sp-scope .user-list-item .name { font-weight: 600; }
.sp-scope .user-list-item .meta { color: var(--text-muted); font-size: 12.5px; }
.sp-scope .user-list-item .grow { flex: 1; min-width: 140px; }
/* ---------- Theme toggle ---------- */
.sp-scope .theme-toggle {
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-scope .theme-toggle:hover { border-color: var(--series-1); }
/* ---------- Notifications ---------- */
.sp-scope .notif-wrap { position: relative; }
.sp-scope .notif-btn {
  border: 1px solid var(--border);
  background: var(--surface-card);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.sp-scope .notif-btn:hover { border-color: var(--series-1); }
.sp-scope .notif-dot {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  background: var(--critical);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
.sp-scope .notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  z-index: 60;
}
.sp-scope .notif-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--gridline);
  font-weight: 700;
  font-size: 13px;
}
.sp-scope .notif-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gridline);
  font-size: 13px;
  cursor: pointer;
}
.sp-scope .notif-item:hover { background: var(--surface-2); }
.sp-scope .notif-item.unread { background: rgba(42,120,214,0.06); }
.sp-scope .notif-item .notif-msg { color: var(--text-primary); margin-bottom: 3px; }
.sp-scope .notif-item .notif-meta { color: var(--text-muted); font-size: 11px; }
.sp-scope .notif-item.notif-type-stale_deal { border-inline-start: 3px solid var(--critical); }
.sp-scope .notif-item.notif-type-stale_deal_warning { border-inline-start: 3px solid var(--warning); }
.sp-scope .notif-empty { padding: 24px 14px; text-align: center; color: var(--text-muted); font-size: 13px; }
/* ---------- Sortable table headers / search ---------- */
.sp-scope th.sortable { cursor: pointer; user-select: none; }
.sp-scope th.sortable:hover { color: var(--text-secondary); }
.sp-scope th.sortable .sort-arrow { margin-inline-start: 4px; opacity: 0.6; }
.sp-scope .search-input {
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-card);
  min-width: 200px;
  flex: 1;
}
.sp-scope .saved-views-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.sp-scope .saved-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-card);
  font-size: 12.5px;
  cursor: pointer;
}
.sp-scope .saved-view-chip:hover { border-color: var(--series-1); }
.sp-scope .saved-view-chip .remove-view { color: var(--text-muted); font-weight: 700; }
.sp-scope .saved-view-chip .remove-view:hover { color: var(--critical); }
/* ---------- Modal tabs (entry detail: form / history / attachments) ---------- */
.sp-scope .modal-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--gridline);
  margin-bottom: 16px;
}
.sp-scope .modal-tab-btn {
  border: none;
  background: transparent;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.sp-scope .modal-tab-btn.active {
  color: var(--series-1);
  border-bottom-color: var(--series-1);
}
.sp-scope .modal-tab-panel { display: none; }
.sp-scope .modal-tab-panel.active { display: block; }
.sp-scope .history-item, .sp-scope .attachment-item {
  padding: 9px 0;
  border-bottom: 1px solid var(--gridline);
  font-size: 13px;
}
.sp-scope .history-item:last-child, .sp-scope .attachment-item:last-child { border-bottom: none; }
.sp-scope .history-item .h-meta, .sp-scope .attachment-item .a-meta { color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
.sp-scope .attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.sp-scope .dup-warning {
  background: rgba(250,178,25,0.14);
  border: 1px solid rgba(250,178,25,0.4);
  color: var(--warn-ink);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}
.sp-scope[data-theme="dark"] .dup-warning { color: #f0c05a; }
@media (prefers-color-scheme: dark) {
.sp-scope:not([data-theme="light"]) .dup-warning { color: #f0c05a; }
}
/* ---------- Settings / Audit ---------- */
.sp-scope .settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.sp-scope .rate-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.sp-scope .rate-row .rate-code { width: 50px; font-weight: 700; }
.sp-scope .rate-row input { flex: 1; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-1); }
.sp-scope .target-row {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
}
.sp-scope .progress-track {
  background: var(--gridline);
  border-radius: 4px;
  height: 8px;
  overflow: hidden;
  margin-top: 4px;
}
.sp-scope .progress-fill { background: var(--good); height: 100%; }
.sp-scope .progress-fill.over { background: var(--series-1); }
/* ---------- Follow-up / loss reason badges in table ---------- */
.sp-scope .followup-flag { color: var(--warning); font-weight: 700; margin-inline-start: 4px; }
.sp-scope .stale-flag { color: var(--critical); font-weight: 700; margin-inline-start: 4px; }
.sp-scope .stale-flag-warning { color: var(--warning); }
/* ---------- Two-tier stale-deal row indicator ---------- */
/* The whole row is shaded (not just a thin edge line) so a stalled deal is
   obvious at a glance in the main pipeline table: red once a deal has had
   no activity for stale_days+ (critical), yellow once it has had no
   activity for stale_warning_days+ but hasn't reached the critical
   threshold yet. A left accent bar reinforces it for quick scanning.
   Selectors are written as "tbody tr.row-stale-*" so they win over the
   plain ":nth-child(even)" zebra-striping rules above, regardless of
   source order. */
.sp-scope table tbody tr.row-stale-critical, .sp-scope table tbody tr.row-stale-warning {
  border-inline-start: 4px solid transparent;
}
.sp-scope table tbody tr.row-stale-critical {
  background: rgba(208,59,59,0.14);
  border-inline-start-color: var(--critical);
}
.sp-scope table tbody tr.row-stale-warning {
  background: rgba(250,178,25,0.20);
  border-inline-start-color: var(--warning);
}
.sp-scope table tbody tr.row-stale-critical:hover { background: rgba(208,59,59,0.22); }
.sp-scope table tbody tr.row-stale-warning:hover { background: rgba(250,178,25,0.30); }
.sp-scope .row-stale-critical td:first-child, .sp-scope .row-stale-warning td:first-child { padding-inline-start: 10px; }
/* ---------- Force password change gate ---------- */
.sp-scope .gate-note {
  background: rgba(250,178,25,0.14);
  border: 1px solid rgba(250,178,25,0.4);
  color: var(--warn-ink);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
.sp-scope .form-grid { grid-template-columns: 1fr; }
.sp-scope .topbar { flex-wrap: wrap; height: auto; padding: 8px 20px; }
.sp-scope .notif-panel { width: calc(100vw - 32px); inset-inline-end: -8px; }
/* Card-based responsive layout for wide data tables on narrow screens */
.sp-scope .table-wrap.responsive-cards table, .sp-scope .table-wrap.responsive-cards thead, .sp-scope .table-wrap.responsive-cards tbody, .sp-scope .table-wrap.responsive-cards tr, .sp-scope .table-wrap.responsive-cards td {
    display: block;
    width: 100%;
  }
.sp-scope .table-wrap.responsive-cards { overflow-x: visible; }
.sp-scope .table-wrap.responsive-cards table { min-width: 0; }
.sp-scope .table-wrap.responsive-cards thead { display: none; }
.sp-scope .table-wrap.responsive-cards tr {
    border-bottom: 1px solid var(--gridline);
    padding: 10px 14px;
  }
.sp-scope .table-wrap.responsive-cards td {
    border-bottom: none;
    padding: 4px 0;
    white-space: normal;
    max-width: none;
    text-align: start !important;
  }
.sp-scope .table-wrap.responsive-cards td.num { text-align: start; }
.sp-scope .table-wrap.responsive-cards td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 2px;
  }
/* A genuinely empty cell is filler and gets hidden. An ACTIONS cell also
     carries no label (data-label="") but is not filler - hiding it left a
     phone with no way to edit or delete a deal or a contact at all, since
     those buttons live nowhere else. It is laid out as a button row
     instead, and its nowrap is lifted so the buttons wrap rather than
     running off the card. */
.sp-scope .table-wrap.responsive-cards td:empty { display: none; }
.sp-scope .table-wrap.responsive-cards td.row-actions,
.sp-scope .table-wrap.responsive-cards td.actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    white-space: normal;
  }
}
/* ---------------------------------------------------------------
   Dashboard: attention bar, funnel, and the Leads view.
   All colors come from the tokens at the top of this file, so the
   dark-mode blocks there cover these with no extra rules.
   --------------------------------------------------------------- */
.sp-scope .sales-command-center {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--series-1) 30%, var(--border));
  border-radius: calc(var(--radius) + 4px);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--series-1) 16%, transparent), transparent 42%),
    linear-gradient(135deg, var(--surface-card), var(--surface-2));
  box-shadow: 0 12px 30px rgba(17, 38, 73, .08);
}
.sp-scope .sales-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.sp-scope .sales-command-kicker {
  margin: 0 0 5px;
  color: var(--series-1);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sp-scope .sales-command-head h2 { margin: 0; font-size: clamp(20px, 3vw, 28px); }
.sp-scope .sales-command-head p:not(.sales-command-kicker) {
  max-width: 620px;
  margin: 7px 0 0;
  color: var(--text-secondary);
  line-height: 1.6;
}
.sp-scope .sales-command-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.sp-scope .sales-command-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.sp-scope .sales-command-action:hover {
  transform: translateY(-1px);
  border-color: var(--series-1);
  box-shadow: 0 6px 16px rgba(17, 38, 73, .08);
}
.sp-scope .sales-command-action.is-primary {
  color: #fff;
  border-color: var(--series-1);
  background: var(--series-1);
}
.sp-scope .sales-command-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.sp-scope .sales-command-metric {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-card);
  color: var(--text-primary);
  text-decoration: none;
  transition: transform .15s, border-color .15s;
}
.sp-scope .sales-command-metric:hover { transform: translateY(-2px); border-color: var(--series-1); }
.sp-scope .sales-command-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 18px;
}
.sp-scope .sales-command-metric small {
  display: block;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-scope .sales-command-metric strong { display: block; margin-top: 3px; font-size: 18px; }
.sp-scope .sales-command-arrow { color: var(--text-muted); }
.sp-scope .sales-command-metric.tone-warn { border-inline-start: 3px solid var(--warning); }
.sp-scope .sales-command-metric.tone-good { border-inline-start: 3px solid var(--good); }
.sp-scope .sales-command-metric.tone-focus { border-inline-start: 3px solid var(--series-1); }
.sp-scope .attention-bar {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.sp-scope .attention-bar.attention-clear {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-secondary);
  border-inline-start: 3px solid var(--good);
}
.sp-scope .attention-title {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.sp-scope .attention-cards { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-scope .attention-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-inline-start-width: 3px;
  border-radius: var(--radius);
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
  transition: border-color .15s, transform .15s;
}
.sp-scope .attention-card:hover { transform: translateY(-1px); }
.sp-scope .attention-card:focus-visible { outline: 2px solid var(--series-1); outline-offset: 2px; }
.sp-scope .attention-card.attention-warning { border-inline-start-color: var(--warning); }
.sp-scope .attention-card.attention-critical { border-inline-start-color: var(--critical); }
.sp-scope .attention-count { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-scope .attention-label { font-size: 13px; color: var(--text-secondary); }
.sp-scope .attention-icon { font-size: 17px; }
.sp-scope .attention-detail { margin-bottom: 16px; }
.sp-scope .attention-row { cursor: pointer; }
.sp-scope .attention-row:hover { background: var(--surface-2); }
/* The stage list ("قائمة الفرص المتنوعة"). Six columns and an expandable
   table of deals underneath, so it takes the full width of the charts grid
   rather than sharing a row with a chart - squeezed into one column the bar
   collapsed and the detail table lost half its columns.

   One grid template is shared by the header strip and every row so the
   columns line up; the bar column is the only flexible one, so the numbers
   never shift as counts change. */
.sp-scope .funnel-card { grid-column: 1 / -1; }
.sp-scope .funnel-row,
.sp-scope .funnel-legend {
  display: grid;
  grid-template-columns: minmax(96px, 1.1fr) 3fr 44px 52px minmax(84px, auto) 52px;
  gap: 10px; align-items: center;
}
.sp-scope .funnel-legend {
  font-size: 11px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: .04em; margin-bottom: 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
/* The first two grid cells (label + bar) have no legend of their own. */
.sp-scope .funnel-legend > span { text-align: end; }
.sp-scope .funnel-legend > span:first-child { grid-column: 3; }
.sp-scope .funnel-step { border-radius: 8px; }
.sp-scope .funnel-step.is-open { background: var(--surface-2); }
.sp-scope .funnel-row { margin-bottom: 7px; padding: 4px 6px; border-radius: 8px; }
.sp-scope .funnel-row-clickable { cursor: pointer; }
.sp-scope .funnel-row-clickable:hover,
.sp-scope .funnel-row-clickable:focus-visible { background: var(--surface-2); outline: none; }
.sp-scope .funnel-step.is-open .funnel-row { background: transparent; }
.sp-scope .funnel-label {
  font-size: 13px; color: var(--text-secondary);
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.sp-scope .funnel-age {
  font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums;
  background: var(--surface-2); border-radius: 999px; padding: 1px 6px;
}
.sp-scope .funnel-step.is-open .funnel-age { background: var(--surface-card); }
.sp-scope .funnel-track { background: var(--surface-2); border-radius: 999px; height: 15px; overflow: hidden; }
.sp-scope .funnel-step.is-open .funnel-track { background: var(--surface-card); }
.sp-scope .funnel-fill { height: 100%; border-radius: 999px; transition: width .3s; }
.sp-scope .funnel-count { font-variant-numeric: tabular-nums; font-weight: 600; text-align: end; }
.sp-scope .funnel-here {
  font-variant-numeric: tabular-nums; font-weight: 600; text-align: end;
  color: var(--text-primary);
}
.sp-scope .funnel-value {
  font-variant-numeric: tabular-nums; font-size: 12px; text-align: end;
  color: var(--text-secondary); white-space: nowrap;
}
.sp-scope .funnel-pct { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-muted); text-align: end; }
.sp-scope .funnel-detail { padding: 0 6px 10px; }
.sp-scope .funnel-detail table { font-size: 12.5px; }
.sp-scope .funnel-deal { cursor: pointer; }
.sp-scope .funnel-deal:hover,
.sp-scope .funnel-deal:focus-visible { background: var(--surface-card); outline: none; }
.sp-scope .funnel-overall {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-secondary);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}
.sp-scope .funnel-lost { color: var(--text-muted); }
.sp-scope .hint-text { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; line-height: 1.65; }
.sp-scope .lead-total { font-size: 13px; color: var(--text-secondary); margin-inline-end: auto; }
/* Wraps instead of forcing the row wider than its container - a nowrap
   actions column pushed the buttons off the visible width entirely. */
.sp-scope .actions-cell { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-scope .actions-cell .btn { margin-inline-end: 4px; }
@media (max-width: 640px) {
.sp-scope .sales-command-center { padding: 15px; }
.sp-scope .sales-command-head { flex-direction: column; }
.sp-scope .sales-command-actions { width: 100%; justify-content: flex-start; }
.sp-scope .sales-command-action { flex: 1 1 calc(50% - 7px); justify-content: center; }
.sp-scope .sales-command-metrics { grid-template-columns: 1fr; }
.sp-scope .attention-cards { flex-direction: column; }
.sp-scope .attention-card { width: 100%; }
/* No room for the bar or the carry-over percentage on a phone - the stage,
   how many are parked in it and what they are worth is what survives. Three
   columns, and the template has to say three: leaving the bar's own column
   in place kept its width and pushed the row off the side of the card. */
.sp-scope .funnel-track, .sp-scope .funnel-pct { display: none; }
.sp-scope .funnel-row,
.sp-scope .funnel-legend { grid-template-columns: minmax(0, 1fr) auto minmax(0, auto); gap: 8px; }
.sp-scope .funnel-legend > span:first-child { grid-column: 2; }
.sp-scope .funnel-legend > span:nth-child(2) { display: none; }
.sp-scope .funnel-legend > span:nth-child(4) { display: none; }
.sp-scope .funnel-value { font-size: 11px; }
.sp-scope .funnel-detail { padding-inline: 0; }
}
/* Period comparison picker: two independent period selectors so any period
   can be compared with any other (Jan 2025 vs Jan 2026, Q1 vs Q1, ...). */
.sp-scope .period-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sp-scope .period-picker { display: flex; align-items: center; gap: 6px; }
.sp-scope .period-picker select { min-width: 84px; }
.sp-scope .period-side-label { font-size: 12px; color: var(--text-muted); }
.sp-scope .period-vs { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
@media (max-width: 640px) {
.sp-scope .period-bar { flex-direction: column; align-items: stretch; }
.sp-scope .period-picker { flex-wrap: wrap; }
}
/* ---------- Handover & collection (what happens after a deal is won) ----
   One CARD PER WON DEAL. Every milestone's date, amount and note boxes used
   to be open at once - five deals put twenty-five inputs on screen and the
   state of a deal had to be decoded from a wall of form fields. Each step is
   now a single line that states where it stands, with its fields opening
   only on the step being changed. */
.sp-scope .handover-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.sp-scope .kpi-tile {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.sp-scope .kpi-tile-label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.sp-scope .kpi-tile-value { font-size: 19px; font-weight: 700; line-height: 1.2; }
.sp-scope .kpi-tile-value.is-good { color: var(--good); }
.sp-scope .kpi-tile-value.is-warn { color: var(--warn-ink); }
.sp-scope .kpi-tile-sub { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.sp-scope .handover-cards { display: grid; gap: 14px; }
.sp-scope .handover-card { padding: 16px 18px; }
.sp-scope .handover-card.has-overdue { border-color: var(--critical); }
.sp-scope .handover-card.is-complete { border-color: var(--good); }
.sp-scope .handover-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.sp-scope .handover-title strong { font-size: 15px; }
.sp-scope .handover-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.sp-scope .handover-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.sp-scope .handover-po { font-weight: 700; white-space: nowrap; font-size: 15px; }
.sp-scope .badge-late { background: rgba(208,59,59,0.12); color: var(--critical); }
.sp-scope .badge-neutral { background: var(--gridline); color: var(--text-muted); }
.sp-scope .milestone-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sp-scope .milestone-bar {
  flex: 1;
  height: 8px;
  background: var(--gridline);
  border-radius: 999px;
  overflow: hidden;
}
.sp-scope .milestone-bar-fill {
  height: 100%;
  background: var(--brand-gold);
  border-radius: 999px;
  transition: width .25s;
}
.sp-scope .milestone-bar-fill.is-full { background: var(--good); }
.sp-scope .milestone-progress-text { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.sp-scope .milestone-next { margin: 0 0 12px; }
/* The steps, as a list of single lines. */
.sp-scope .milestone-list {
  border: 1px solid var(--gridline);
  border-radius: 10px;
  overflow: hidden;
}
.sp-scope .milestone-row { border-top: 1px solid var(--gridline); }
.sp-scope .milestone-row:first-child { border-top: 0; }
.sp-scope .milestone-row.is-editing { background: var(--surface-2); }
.sp-scope .milestone-row.is-saving { opacity: .55; pointer-events: none; }
.sp-scope .milestone-row.is-overdue { background: rgba(208, 59, 59, 0.05); }
.sp-scope .milestone-row.is-done .milestone-name { color: var(--text-muted); }
.sp-scope .milestone-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  min-height: 44px;
}
/* The step number doubles as the tick: unticked it is a numbered circle,
   ticked it turns into a check - so the checklist reads as a sequence rather
   than five identical boxes. */
.sp-scope .milestone-tick { position: relative; display: inline-flex; cursor: pointer; flex: 0 0 auto; }
.sp-scope .milestone-tick input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sp-scope .milestone-step {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.sp-scope .milestone-tick input:checked + .milestone-step {
  background: var(--good);
  border-color: var(--good);
  color: #fff;
  font-size: 0;
}
.sp-scope .milestone-tick input:checked + .milestone-step::after { content: "✓"; font-size: 13px; }
.sp-scope .milestone-tick input:focus-visible + .milestone-step { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.sp-scope .milestone-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.sp-scope .milestone-name { font-weight: 600; font-size: 13.5px; }
.sp-scope .milestone-summary { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sp-scope .ms-chip {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--gridline);
  color: var(--text-muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sp-scope .ms-chip.is-done { background: rgba(12,163,12,0.13); color: var(--good); }
.sp-scope .ms-chip.is-late { background: rgba(208,59,59,0.12); color: var(--critical); }
.sp-scope .ms-chip.is-money { background: rgba(250,178,25,0.18); color: var(--warn-ink); font-weight: 600; }
.sp-scope .milestone-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 0 12px 12px;
  border-top: 1px dashed var(--gridline);
  padding-top: 12px;
}
.sp-scope .milestone-fields[hidden] { display: none; }
.sp-scope .milestone-fields label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.sp-scope .milestone-fields input { font-size: 13px; }
.sp-scope .milestone-fields .milestone-note { flex: 1 1 200px; }
@media (max-width: 640px) {
.sp-scope .milestone-line { flex-wrap: wrap; }
.sp-scope .milestone-main { flex: 1 1 100%; order: 2; }
.sp-scope .milestone-fields { flex-direction: column; align-items: stretch; }
.sp-scope .milestone-fields label { width: 100%; }
.sp-scope .milestone-fields input { width: 100%; }
.sp-scope .handover-right { align-items: flex-start; flex-direction: row; }
}
/* ---------- The company target, shown while a manager's goal is typed ----
   The two used to be set on two unconnected screens (this form wrote a
   monthly goal while the company target lived in Cost Analysis as an annual
   figure), and neither ever mentioned the other. */
.sp-scope .target-coverage {
  margin: 4px 0 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--gridline);
  border-radius: 8px;
}
.sp-scope .target-coverage:empty { display: none; }
.sp-scope .coverage-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 3px 0;
}
.sp-scope .coverage-row.is-under strong { color: var(--warn-ink); }
.sp-scope .coverage-row.is-over strong { color: var(--critical); }
.sp-scope .coverage-row.is-balanced strong { color: var(--good); }
.sp-scope .target-coverage .field-hint { margin: 6px 0 0; }
/* ---------- Targets against actuals, per manager -------------------------
   This was a list of stat cards, one per stored target row in whatever
   cadence it happened to be written in. It is one table for one period now,
   so the managers can actually be compared with each other. */
.sp-scope .targets-period-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.sp-scope .targets-table th, .sp-scope .targets-table td { vertical-align: middle; }
.sp-scope .targets-table tfoot th {
  border-top: 2px solid var(--gridline);
  font-weight: 700;
  background: var(--surface-2);
}
.sp-scope .targets-table .is-remaining { color: var(--warn-ink); }
.sp-scope .target-meter {
  display: inline-block;
  vertical-align: middle;
  width: 90px;
  height: 8px;
  background: var(--gridline);
  border-radius: 999px;
  overflow: hidden;
}
.sp-scope .target-meter-fill { height: 100%; background: var(--brand-gold); }
.sp-scope .target-meter-fill.is-full { background: var(--good); }
.sp-scope .target-meter-text { font-size: 12px; margin-inline-start: 6px; color: var(--text-muted); }
.sp-scope .basis-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--gridline);
  border-radius: 999px;
  padding: 1px 7px;
  margin-inline-start: 6px;
  white-space: nowrap;
}
.sp-scope .basis-tag.is-estimate { font-style: italic; }

/* =====================================================================
   Shared page furniture for the four Sales views
   (see the same-named comment block in static/js/app.js)

   Before this, each view drew its own heading under the one the host page
   already draws, put its filters and its actions on one unlabelled line,
   and ended an empty screen with the sentence "no data yet". These rules
   are the four pieces that replaced that, and all four tabs use them, so
   the tabs now differ only in what they show.

   Everything here uses logical properties (inline-start/inline-end), so
   the whole block mirrors from the one dir="rtl" on <html> with no
   Arabic-specific rules.
   ===================================================================== */

/* ---- The dashboard's "you are looking at <person>" context line ---- */
.sp-scope .view-context {
  margin: 0 0 var(--sp-4, 16px);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ---- KPI strip: the few numbers that answer "how am I doing" ---- */
.sp-scope .kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
/* A tone colours the whole tile's edge, not just the figure, so the one
   tile that wants attention is findable without reading four labels. */
.sp-scope .kpi-tile.tone-good { border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
.sp-scope .kpi-tile.tone-good .kpi-tile-value { color: var(--good); }
.sp-scope .kpi-tile.tone-warn { border-color: color-mix(in srgb, var(--warn-ink) 45%, var(--border)); }
.sp-scope .kpi-tile.tone-warn .kpi-tile-value { color: var(--warn-ink); }
.sp-scope .kpi-tile.tone-bad { border-color: color-mix(in srgb, var(--critical) 45%, var(--border)); }
.sp-scope .kpi-tile.tone-bad .kpi-tile-value { color: var(--critical); }
.sp-scope .kpi-tile.is-clickable { cursor: pointer; }
.sp-scope .kpi-tile.is-clickable:hover { border-color: var(--series-1); }

/* ---- Filter bar: labelled controls on one side, tools on the other --- */
.sp-scope .filterbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.sp-scope .filterbar-fields {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1 1 340px;
  min-width: 0;
}
.sp-scope .filterbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
/* The exports were their own little toolbar with a bottom margin of its
   own; inside the filter bar they are simply two more buttons. */
.sp-scope .filterbar-actions .export-toolbar { margin-bottom: 0; }
/* The count and the saved views sit on their own line under both groups. */
.sp-scope .filterbar-meta {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.sp-scope .filterbar-meta:empty,
.sp-scope .filterbar-actions:empty,
.sp-scope .filterbar-fields:empty { display: none; }
/* Nothing but a count is not worth a rule above it. */
.sp-scope .filterbar-fields:empty ~ .filterbar-meta { border-top: 0; padding-top: 0; }

.sp-scope .filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.sp-scope .filter-field.grow { flex: 1 1 220px; }
/* This is the whole point of the redesign of this bar: every control says
   what it filters. The screenshots showed two identical-looking selects
   reading only "all account managers" / "all stages". */
.sp-scope .filter-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.sp-scope .filter-field select,
.sp-scope .filter-field input {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-card);
  color: inherit;
  font: inherit;
  max-width: 100%;
}
.sp-scope .filter-field select { min-width: 150px; }
.sp-scope .filter-field .search-input { width: 100%; min-width: 0; }

.sp-scope .result-count { font-size: 12.5px; color: var(--text-muted); }
.sp-scope .result-count.is-filtered { color: var(--text-secondary); font-weight: 600; }
.sp-scope .btn-quiet { background: none; border-color: transparent; color: var(--text-secondary); }
.sp-scope .btn-quiet:hover { border-color: var(--border); }

/* ---- Empty state: says what belongs here, and offers the way in ---- */
.sp-scope .empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-muted);
  background: var(--surface-card);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.sp-scope .empty-state-icon { font-size: 30px; line-height: 1; margin-bottom: 12px; }
.sp-scope .empty-state-title {
  font-size: 15px;
  font-weight: 650;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.sp-scope .empty-state-body {
  margin: 0 auto;
  max-width: 46ch;
  font-size: 13px;
  line-height: 1.7;
}
.sp-scope .empty-state-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* On a phone the two groups stack, and the filters go full width rather
   than three controls squeezed onto one line. */
@media (max-width: 720px) {
  .sp-scope .filterbar { align-items: stretch; }
  .sp-scope .filterbar-fields { flex-direction: column; align-items: stretch; }
  /* The search field's flex-basis is a WIDTH in the row layout above; in a
     column it would become a 220px-tall box. */
  .sp-scope .filter-field.grow { flex-basis: auto; }
  .sp-scope .filterbar-fields, .sp-scope .filterbar-actions { flex: 1 1 auto; }
  .sp-scope .filter-field select,
  .sp-scope .filter-field input { width: 100%; }
  .sp-scope .filterbar-actions { justify-content: flex-start; }
  .sp-scope .kpi-strip { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* ---- Table rows back to one line high ----
   Two things made every pipeline row 99px tall. The actions cell was a
   flex container - a <td> that is display:flex stops being a table cell,
   and once its column was squeezed the two buttons stacked. And .btn is
   38px tall in the main stylesheet (right for a form), which .btn-sm
   inherited, so a "small" button was as tall as a text field. On a desktop
   the cell is a cell again and small buttons are small; the flex layout is
   still used for the stacked card view on a phone (see .responsive-cards
   above), where the rule below is overridden by that media block. */
.sp-scope td.row-actions,
.sp-scope td.actions-cell { display: table-cell; white-space: nowrap; }
.sp-scope td.row-actions .btn,
.sp-scope td.actions-cell .btn { vertical-align: middle; }
.sp-scope .btn-sm { height: auto; min-height: 30px; line-height: 1.2; }
/* A follow-up that is due today or overdue, in the column that says when. */
.sp-scope td.is-due { color: var(--warn-ink); font-weight: 650; }

/* ---- Offer follow-up / closing centre ---- */
.sp-scope .closing-form-heading {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding: 14px 0 2px;
  border-top: 1px solid var(--border);
}
.sp-scope .closing-form-heading strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
}
.sp-scope .closing-form-heading small,
.sp-scope .closing-sub {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
  margin-top: 3px;
}
.sp-scope .closing-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 650;
  white-space: normal;
}
.sp-scope .closing-status.awaiting_customer { background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.28); color: var(--primary); }
.sp-scope .closing-status.follow_up_scheduled { background: rgba(14,165,233,.10); border-color: rgba(14,165,233,.28); color: #0369a1; }
.sp-scope .closing-status.negotiating { background: rgba(124,58,237,.10); border-color: rgba(124,58,237,.28); color: #6d28d9; }
.sp-scope .closing-status.revision_requested { background: rgba(234,88,12,.10); border-color: rgba(234,88,12,.28); color: #c2410c; }
.sp-scope .closing-status.awaiting_po { background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.28); color: var(--good); }
.sp-scope .closing-status.on_hold { background: rgba(107,114,128,.12); color: var(--text-secondary); }
.sp-scope tr.closing-entry-row { border-inline-start: 4px solid transparent; }
.sp-scope tr.closing-overdue { background: rgba(208,59,59,.10); border-inline-start-color: var(--critical); }
.sp-scope tr.closing-expired { background: rgba(208,59,59,.07); border-inline-start-color: var(--critical); }
.sp-scope tr.closing-due_today { background: rgba(250,178,25,.16); border-inline-start-color: var(--warning); }
.sp-scope tr.closing-expiring { background: rgba(250,178,25,.09); border-inline-start-color: var(--warning); }
.sp-scope tr.closing-entry-row.is-highlighted {
  outline: 3px solid rgba(37,99,235,.38);
  outline-offset: -3px;
  animation: closing-highlight 1.8s ease-out 1;
}
@keyframes closing-highlight {
  from { background: rgba(37,99,235,.24); }
  to { background: inherit; }
}
.sp-scope .closing-legend { display: flex; gap: 12px; flex-wrap: wrap; color: var(--text-muted); font-size: 12px; }
.sp-scope .closing-legend span { display: inline-flex; align-items: center; gap: 5px; }
.sp-scope .closing-legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.sp-scope .closing-legend .is-critical { background: var(--critical); }
.sp-scope .closing-legend .is-warning { background: var(--warning); }

@media (max-width: 640px) {
  .sp-scope .closing-entry-row { border-inline-start-width: 4px; border-radius: 10px; margin-bottom: 10px; }
  .sp-scope .closing-entry-row td:first-child { padding-top: 4px; }
  .sp-scope .closing-entry-row .actions-cell .btn { min-height: 44px; flex: 1 1 135px; }
  .sp-scope .closing-status { min-height: 30px; }
  .sp-scope .closing-legend { gap: 8px 14px; }
}

/* ---- Renewable licences and services on won projects ---- */
.sp-scope tr.renewal-row { border-inline-start: 4px solid transparent; }
.sp-scope tr.renewal-opportunity { background: rgba(37,99,235,.07); border-inline-start-color: var(--primary); }
.sp-scope tr.renewal-urgent { background: rgba(250,178,25,.14); border-inline-start-color: var(--warning); }
.sp-scope tr.renewal-expired { background: rgba(208,59,59,.10); border-inline-start-color: var(--critical); }
.sp-scope tr.renewal-renewed { background: rgba(22,163,74,.07); border-inline-start-color: var(--good); }
.sp-scope tr.renewal-not_renewing { opacity: .72; }
.sp-scope tr.renewal-row.is-highlighted {
  outline: 3px solid rgba(37,99,235,.38);
  outline-offset: -3px;
  animation: closing-highlight 1.8s ease-out 1;
}
.sp-scope .renewal-badge {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--text-secondary);
  font-size: 11.5px;
  font-weight: 650;
  white-space: normal;
}
.sp-scope .renewal-badge.opportunity { color: var(--primary); border-color: rgba(37,99,235,.28); background: rgba(37,99,235,.10); }
.sp-scope .renewal-badge.urgent { color: var(--warn-ink); border-color: rgba(250,178,25,.42); background: rgba(250,178,25,.14); }
.sp-scope .renewal-badge.expired { color: var(--critical); border-color: rgba(208,59,59,.35); background: rgba(208,59,59,.10); }
.sp-scope .renewal-badge.renewed { color: var(--good); border-color: rgba(22,163,74,.30); background: rgba(22,163,74,.10); }
.sp-scope .renewal-money-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 8px; }
.sp-scope .renewal-money-row select { min-width: 0; }

@media (max-width: 640px) {
  .sp-scope .renewal-row { border-inline-start-width: 4px; border-radius: 10px; margin-bottom: 10px; }
  .sp-scope .renewal-row .actions-cell .btn { min-height: 44px; flex: 1 1 145px; }
  .sp-scope .renewal-badge { min-height: 30px; }
  .sp-scope .renewal-money-row { grid-template-columns: minmax(0, 1fr) 84px; }
}
/* Fitting the working columns on a 1024px content column without a
   horizontal scroll: a header may take two lines (they are long noun
   phrases in both languages), cells are a little tighter, and the stage
   control - a <select> sized by its longest option, "PO Received (Won)" -
   is capped and shows an ellipsis when closed. The option list itself is
   never clipped; that is the browser's own popup. */
.sp-scope thead th { white-space: normal; line-height: 1.3; vertical-align: bottom; }
.sp-scope thead th, .sp-scope tbody td { padding-inline: 11px; }
.sp-scope table .status-select { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.sp-scope table { min-width: 880px; }
/* An actions cell holds buttons, not text: the 200px cap and ellipsis every
   other cell gets turned its fourth button into "..." */
.sp-scope tbody td.row-actions,
.sp-scope tbody td.actions-cell { max-width: none; overflow: visible; text-overflow: clip; }
.sp-scope .next-action-inline { display:block; max-width:220px; margin-top:3px; color:var(--text-muted); white-space:normal; line-height:1.25; }

/* Won-project cockpit: delivery readiness, execution context and renewal
   capture stay in the same card as collection, without crowding the daily
   pipeline. */
.sp-scope .post-sales-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.sp-scope .project-handover-details { margin:14px 0; border:1px solid var(--border); border-radius:14px; background:var(--surface-muted); overflow:hidden; }
.sp-scope .project-handover-details > summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:64px; padding:12px 14px; }
.sp-scope .project-handover-details > summary::-webkit-details-marker { display:none; }
.sp-scope .project-handover-details > summary small { display:block; color:var(--text-muted); margin-top:4px; max-width:760px; }
.sp-scope .handover-readiness { white-space:nowrap; font-weight:750; color:var(--warn-ink); }
.sp-scope .handover-readiness.is-ready { color:var(--good); }
.sp-scope .handover-readiness-bar { height:4px; background:var(--border); }
.sp-scope .handover-readiness-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--primary),var(--good)); transition:width .25s ease; }
.sp-scope .project-handover-details form { padding:16px; }
.sp-scope .project-handover-details textarea { min-height:76px; }
.sp-scope .handover-renewal-title { margin:16px 0 10px; padding-top:14px; border-top:1px solid var(--border); color:var(--primary); }
.sp-scope .handover-detail-actions { display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-top:14px; }

@media (max-width: 900px) {
  .sp-scope .post-sales-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .sp-scope .post-sales-summary { grid-template-columns:1fr 1fr; gap:8px; }
  .sp-scope .project-handover-details > summary { align-items:flex-start; flex-direction:column; }
  .sp-scope .project-handover-details form { padding:12px; }
  .sp-scope .handover-detail-actions .btn { flex:1 1 150px; min-height:44px; }
}