@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .text-last-center {
    text-align-last: center;
  }
}

/* Pagy Pagination Styles */
nav.pagy.series-nav {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.25rem;
}

nav.pagy.series-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #374151;
  border-radius: 0.375rem;
  transition: all 0.15s ease-in-out;
  min-width: 2.5rem;
  text-decoration: none;
}

nav.pagy.series-nav a:hover:not([aria-disabled="true"]) {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

nav.pagy.series-nav a:focus:not([aria-disabled="true"]) {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #6366f1;
}

/* Current page */
nav.pagy.series-nav a[aria-current="page"] {
  background-color: #0A2261;
  border-color: #0A2261;
  color: #ffffff;
  font-weight: 600;
}

/* Disabled states (previous on first page, next on last page) */
nav.pagy.series-nav a[aria-disabled="true"]:not([aria-current="page"]) {
  color: #9ca3af;
  cursor: not-allowed;
  background-color: #f9fafb;
}

/* Gap separator */
nav.pagy.series-nav a[role="separator"] {
  border-color: transparent;
  background-color: transparent;
  cursor: default;
}

/* AI Assistant — markdown rendering inside chat bubbles */
.ai-markdown > *:first-child { margin-top: 0; }
.ai-markdown > *:last-child  { margin-bottom: 0; }
.ai-markdown p { margin: 0.5rem 0; }
.ai-markdown h1 { font-size: 1.05rem; font-weight: 600; margin: 0.75rem 0 0.4rem; }
.ai-markdown h2 { font-size: 1.0rem;  font-weight: 600; margin: 0.7rem 0 0.35rem; }
.ai-markdown h3 { font-size: 0.95rem; font-weight: 600; margin: 0.6rem 0 0.3rem; }
.ai-markdown h4, .ai-markdown h5, .ai-markdown h6 { font-size: 0.9rem; font-weight: 600; margin: 0.5rem 0 0.25rem; }
.ai-markdown ul { list-style: disc; padding-left: 1.25rem; margin: 0.4rem 0; }
.ai-markdown ol { list-style: decimal; padding-left: 1.5rem; margin: 0.4rem 0; }
.ai-markdown li { margin: 0.15rem 0; }
.ai-markdown li > p { margin: 0.15rem 0; }
.ai-markdown a { color: #0A2261; text-decoration: underline; }
.ai-markdown a:hover { color: #0c2d7a; }
.ai-markdown blockquote {
  border-left: 3px solid #d1d5db;
  padding: 0.1rem 0.75rem;
  color: #4b5563;
  margin: 0.5rem 0;
  background: rgba(0,0,0,0.02);
}
.ai-markdown code {
  background: rgba(0,0,0,0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}
.ai-markdown pre {
  background: #1f2937;
  color: #f3f4f6;
  padding: 0.75rem 0.9rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.6rem 0;
  font-size: 0.8rem;
  line-height: 1.45;
}
.ai-markdown pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
.ai-markdown table {
  border-collapse: collapse;
  margin: 0.6rem 0;
  width: 100%;
  font-size: 0.85rem;
}
.ai-markdown th, .ai-markdown td {
  border: 1px solid #e5e7eb;
  padding: 0.35rem 0.6rem;
  text-align: left;
  vertical-align: top;
}
.ai-markdown th {
  background: #f3f4f6;
  font-weight: 600;
}
.ai-markdown hr { border: 0; border-top: 1px solid #e5e7eb; margin: 0.75rem 0; }
.ai-markdown del { color: #6b7280; }

/* AI Assistant — typing indicator dots (animated). Defined here so Tailwind
   purge doesn't drop it and CSP doesn't block JS-injected styles. */
.ai-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.ai-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background-color: #6b7280;
  opacity: 0.3;
  animation: ai-typing-blink 1.2s infinite ease-in-out;
  display: inline-block;
}
.ai-typing-dot:nth-child(1) { animation-delay: 0s; }
.ai-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.ai-typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes ai-typing-blink {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.3; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

/* AUD-U7: submit busy-state feedback. Toggled by the turbo:submit-start /
   turbo:submit-end listener in application.js. Opacity+cursor (not a
   ::after spinner) because many submitters are <input type="submit">
   (f.submit), and ::after doesn't render on replaced input elements. */
.turbo-submitting {
  opacity: 0.6;
  cursor: wait !important;
}
/* ==========================================================================
   BUSINESS DEVELOPMENT DASHBOARD — design system
   ==========================================================================
   Faithful port of the client-approved prototype
   (~/Downloads/Sales_PreSales_Dashboard_Mockup.html <style> block).

   HARD RULE: every selector in this file is scoped under `.bd-dash`.
   Nothing here targets bare `body`, `table`, `th`, `td`, `h1`, etc. — the
   prototype does, and left unscoped those rules would restyle every table in
   the CRM. Same rule the incentive console file follows.

   The page's root element must carry `class="bd-dash"` or none of this
   applies. Layout/colour values are the prototype's, unchanged.
   ========================================================================== */

.bd-dash {
  --navy:#0A2261; --ink:#1e293b; --muted:#64748b; --faint:#94a3b8;
  --line:#e7ebf0; --bg:#f1f5f9; --card:#fff;
  --accent:#4f46e5; --green:#16a34a; --green-bg:#dcfce7;
  --amber:#b45309; --amber-bg:#fef9c3; --blue:#1d4ed8; --blue-bg:#dbeafe;
  --red:#dc2626; --red-bg:#fee2e2; --purple:#6d28d9; --purple-bg:#ede9fe;
  --orange:#ea580c; --orange-bg:#ffedd5; --teal:#0d9488; --teal-bg:#ccfbf1;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.07);

  color: var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  /* The prototype sets 13.5px. Scaled up here — and proportionally through
     the rest of the file — because it read too small inside the CRM's own
     chrome. ONLY type was scaled: padding, radii and every grid track are
     the prototype's untouched, so the layout still matches it. */
  font-size:16px;
}
.bd-dash * { box-sizing: border-box }

/* ---- header ------------------------------------------------------------ */
.bd-dash .head { display:flex; align-items:flex-start; justify-content:space-between;
                 gap:14px; margin-bottom:16px; flex-wrap:wrap }
/* The page title — deliberately much larger than the prototype's 21px (and than
   the file-wide type bump), on request: it is the page's name, not a section
   head, and it is the first thing the room reads on a shared screen. */
.bd-dash .head h1 { font-size:38px; font-weight:800; color:var(--navy); margin:0; letter-spacing:-.5px }
.bd-dash .sub { font-size:15px; color:var(--muted); margin-top:3px }

.bd-dash .filters { display:flex; gap:6px; flex-wrap:wrap; align-items:center }
.bd-dash .filters a, .bd-dash .filters button {
  background:#fff; border:1px solid var(--line); color:var(--muted); font-weight:700;
  font-size:13.5px; padding:6px 12px; border-radius:8px; cursor:pointer;
  text-decoration:none; display:inline-block; line-height:1.35 }
.bd-dash .filters a.on, .bd-dash .filters button.on {
  background:var(--navy); color:#fff; border-color:var(--navy) }
.bd-dash .filters .range { display:inline-flex; align-items:center; gap:6px; background:#fff;
  border:1px solid var(--line); border-radius:8px; padding:4px 8px; margin-left:4px }
.bd-dash .filters .range input { width:120px; height:28px; border:1px solid #d7dde5;
  border-radius:6px; padding:0 8px; font-size:13px; outline:none }
.bd-dash .filters .range input:focus { border-color:var(--accent); box-shadow:0 0 0 2px #eef2ff }
.bd-dash .filters .range .to { font-size:12.5px; font-weight:700; color:var(--faint) }
.bd-dash .filters .apply { padding:6px 12px !important; font-size:13px !important }

/* ---- filter pickers: tags and members ---------------------------------- */
/* One dropdown serving both, so the two behave and read the same: a pill that
   opens a searchable panel, multi-select, selected options floating to the top.
   A selection is a blue tick and nothing else — several can be picked at once,
   and a run of filled rows would read as a block of colour rather than a list. */
.bd-dash .ddfilter { position: relative; display: inline-block }
.bd-dash .ddbtn { display: inline-flex; align-items: center; gap: 6px }
.bd-dash .ddbtn .caret { font-size: 9px; opacity: .7 }
.bd-dash .swatch { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0 }
.bd-dash .ddpanel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; width: 236px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(16,24,40,.14); padding: 8px }
/* The search box sits above the list rather than inside the scroll area, so it
   stays put while the options scroll under it. */
.bd-dash .ddsearch { width: 100%; height: 30px; margin-bottom: 6px; padding: 0 9px;
  border: 1px solid #d7dde5; border-radius: 7px; font-size: 13.5px; outline: none }
.bd-dash .ddsearch:focus { border-color: var(--accent); box-shadow: 0 0 0 2px #eef2ff }
/* Roughly seven rows before it scrolls — enough to browse, short enough to stay a menu. */
.bd-dash .ddopts { max-height: 15rem; overflow-y: auto }
.bd-dash .ddopt { display: flex; align-items: center; gap: 7px; padding: 7px 9px;
  border-radius: 7px; font-size: 13.5px; font-weight: 700; color: var(--ink); cursor: pointer }
.bd-dash .ddopt:hover { background: #eef2ff }
.bd-dash .ddopt.selectall { color: var(--accent); border-bottom: 1px solid var(--line);
  border-radius: 7px 7px 0 0; margin-bottom: 4px }
.bd-dash .ddopt .tick { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--accent) }
.bd-dash .ddempty { padding: 8px 9px; font-size: 13px; font-weight: 700; color: var(--faint) }
.bd-dash [x-cloak] { display: none !important }

/* ---- side toggle ------------------------------------------------------- */
.bd-dash .seg { display:inline-flex; background:#e2e8f0; border-radius:8px; padding:3px }
.bd-dash .seg a, .bd-dash .seg button {
  border:0; background:transparent; height:30px; padding:0 15px; border-radius:7px;
  font-weight:800; color:var(--muted); cursor:pointer; font-size:13px;
  display:inline-flex; align-items:center; text-decoration:none }
.bd-dash .seg a.on, .bd-dash .seg button.on {
  background:#fff; color:var(--navy); box-shadow:var(--shadow) }

/* ---- split strip inside metric cards ----------------------------------- */
.bd-dash .msplit { display:flex; gap:8px; margin-top:10px;
                   border-top:1px dashed var(--line); padding-top:9px }
.bd-dash .msplit div { flex:1; text-align:center }
.bd-dash .msplit .sk { font-size:11px; font-weight:800; text-transform:uppercase; color:var(--faint) }
.bd-dash .msplit .sv { font-size:14px; font-weight:800; color:var(--navy) }

/* ---- view (eye) links -------------------------------------------------- */
.bd-dash .view { border:1px solid var(--line); background:#fff; color:var(--accent);
  border-radius:7px; width:26px; height:26px; padding:0; display:inline-grid;
  place-items:center; cursor:pointer; flex-shrink:0 }
.bd-dash .view svg { width:14px; height:14px }
.bd-dash .view:hover { background:#eef2ff; border-color:#c7d2fe }
.bd-dash .cardtop { display:flex; align-items:flex-start; justify-content:space-between; gap:8px }
.bd-dash .veye { border:0; background:transparent; color:var(--accent); width:19px; height:19px;
  padding:0; display:inline-grid; place-items:center; border-radius:5px; cursor:pointer;
  vertical-align:middle; opacity:0; transition:opacity .12s }
.bd-dash .veye svg { width:12px; height:12px }
.bd-dash .veye:hover { background:#eef2ff }
.bd-dash .msplit div:hover .veye,
.bd-dash .kpi .split div:hover .veye,
.bd-dash .dleg div:hover .veye,
.bd-dash .fstep:hover .veye { opacity:1 }
.bd-dash .dleg .veye, .bd-dash .fstep .veye { opacity:.55 }
.bd-dash .fstep .veye { color:#fff }
.bd-dash .fstep .veye:hover { background:rgba(255,255,255,.2) }
.bd-dash .hide { display:none !important }

/* ---- cards ------------------------------------------------------------- */
.bd-dash .card { background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:18px 20px; margin-bottom:16px }
/* Section headings — Activity, Pipeline, Losses, By team member. Enlarged on
   request: with the subtitles removed these are the only labels separating
   one band of the page from the next. */
.bd-dash .card h2 { margin:0 0 12px; font-size:24px; font-weight:800; color:var(--navy);
  letter-spacing:-.3px }
.bd-dash .card .h2sub { font-size:13.5px; color:var(--faint); margin:-8px 0 14px }

/* ---- top KPI row ------------------------------------------------------- */
.bd-dash .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:16px }
.bd-dash .kpi { background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:15px 16px; position:relative; overflow:hidden; text-align:center }
.bd-dash .kpi .edge { position:absolute; left:0; top:0; bottom:0; width:4px }
.bd-dash .kpi .k { font-size:13px; font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; color:var(--faint) }
.bd-dash .kpi .v { font-size:35px; font-weight:800; margin:5px 0 2px; letter-spacing:-.5px }
.bd-dash .kpi .d { font-size:13px; color:var(--muted); font-weight:600 }
.bd-dash .kpi .split { display:flex; gap:8px; margin-top:9px;
  border-top:1px dashed var(--line); padding-top:9px }
.bd-dash .kpi .split div { flex:1; text-align:center }
.bd-dash .kpi .split .sk { font-size:11px; font-weight:800; text-transform:uppercase; color:var(--faint) }
.bd-dash .kpi .split .sv { font-size:17.5px; font-weight:800; color:var(--navy) }

/* ---- metric grids ------------------------------------------------------ */
.bd-dash .mgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px }
.bd-dash .mgrid.wide { grid-template-columns:2fr 1fr 1fr }
.bd-dash .mgrid.loss { grid-template-columns:1fr 1.9fr 1fr 1fr }

/* ---- activity: hero + supporting grid ---------------------------------- */
.bd-dash .actgrid { display:grid; grid-template-columns:1.15fr 2fr; gap:14px; align-items:stretch }
.bd-dash .hero { position:relative; border:1px solid #dbeafe;
  background:linear-gradient(160deg,#f8fbff,#eff6ff); border-radius:13px;
  padding:17px 19px; text-align:center }
.bd-dash .hero .hk { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--blue); display:flex; align-items:center; justify-content:center; gap:6px }
.bd-dash .hero .hv { font-size:44px; font-weight:800; color:var(--navy); letter-spacing:-1px; margin:6px 0 2px }
.bd-dash .hero .hd { font-size:13.5px; color:var(--muted) }
.bd-dash .donut { display:flex; align-items:center; gap:16px; margin-top:15px; text-align:left }
.bd-dash .donut svg { flex-shrink:0 }
.bd-dash .dleg { flex:1 }
.bd-dash .dleg div { display:flex; align-items:center; gap:8px; font-size:13.5px;
  font-weight:700; color:var(--ink); margin:5px 0 }
.bd-dash .dleg .dot { width:9px; height:9px; border-radius:3px; flex-shrink:0 }
.bd-dash .dleg .n { margin-left:auto; font-weight:800; color:var(--navy); font-size:15px }
.bd-dash .dleg .last { border-top:1px dashed #cbd5e1; padding-top:7px; margin-top:7px }
.bd-dash .actright { display:grid; grid-template-columns:repeat(3,1fr); gap:11px }
.bd-dash .sc { border:1px solid var(--line); border-radius:12px; background:#fff;
  padding:13px 14px; display:flex; flex-direction:column; text-align:center }
.bd-dash .sc .k { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  color:var(--faint); display:flex; align-items:center; justify-content:center; gap:5px }
.bd-dash .sc .v { font-size:27px; font-weight:800; color:var(--navy); margin:5px 0 1px; letter-spacing:-.4px }
.bd-dash .sc .v small { font-size:14px; font-weight:700; color:var(--muted) }
.bd-dash .sc .d { font-size:12.5px; color:var(--muted) }
.bd-dash .sc .msplit { margin-top:auto; padding-top:9px }
.bd-dash .sc .msplit .sv { font-size:15px }
.bd-dash .sc.meet { border-color:#ddd6fe; background:#fbfaff }
.bd-dash .sc.total { background:#f8fafc; justify-content:center }
.bd-dash .subsetnote { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  color:var(--faint); background:#f1f5f9; border-radius:5px; padding:2px 7px;
  display:inline-block; margin-top:7px }

/* ---- connected / not-connected split ----------------------------------- */
.bd-dash .cnsplit { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:11px }
.bd-dash .cn { border:1px solid var(--line); border-radius:9px; padding:8px 11px; text-align:center }
.bd-dash .cn.ok { background:#f0fdf4; border-color:#bbf7d0 }
.bd-dash .cn.no { background:#fef2f2; border-color:#fecaca }
.bd-dash .cn .ck { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em }
.bd-dash .cn.ok .ck { color:#15803d } .bd-dash .cn.no .ck { color:#b91c1c }
.bd-dash .cn .cv { font-size:22px; font-weight:800; margin-top:2px }
.bd-dash .cn.ok .cv { color:#15803d } .bd-dash .cn.no .cv { color:#b91c1c }
.bd-dash .cn .cd { font-size:11px; color:var(--muted); margin-top:1px }
.bd-dash .backlog { margin-top:10px; border:1px dashed #fcd34d; background:#fffbeb;
  border-radius:9px; padding:8px 11px; display:flex; flex-direction:column;
  align-items:center; gap:1px; text-align:center }
.bd-dash .backlog .bk { font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; color:#b45309 }
.bd-dash .backlog .bv { font-size:21px; font-weight:800; color:#b45309 }
.bd-dash .backlog .bd { font-size:11px; color:#92400e; opacity:.85 }

/* ---- generic metric tile ----------------------------------------------- */
.bd-dash .m { border:1px solid var(--line); border-radius:12px; padding:14px 15px;
  background:#fff; text-align:center }
.bd-dash .m .k { font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  color:var(--faint); display:flex; align-items:center; justify-content:center; gap:6px }
.bd-dash .m .v { font-size:30px; font-weight:800; color:var(--navy); margin:5px 0 2px }
.bd-dash .m .d { font-size:13px; color:var(--muted) }
.bd-dash .m .bar { height:5px; border-radius:4px; background:#eef1f5; margin-top:9px; overflow:hidden }
.bd-dash .m .bar i { display:block; height:100%; border-radius:4px }
.bd-dash .up { color:var(--green) } .bd-dash .down { color:var(--red) }
/* The `i` badge. A real button since 2026-08-20 — it opens the "How we
   calculate this" modal rather than relying on a hover-only `title`. */
.bd-dash .i { width:14px; height:14px; border-radius:50%; background:#eef2ff; color:var(--accent);
  font-size:11px; display:inline-grid; place-items:center; font-weight:800; cursor:pointer;
  border:0; padding:0; font-family:inherit; line-height:1; flex:none;
  -webkit-appearance:none; appearance:none }
.bd-dash .i:hover { background:var(--accent); color:#fff }
.bd-dash .i:focus-visible { outline:2px solid var(--accent); outline-offset:2px }

/* ---- pills ------------------------------------------------------------- */
.bd-dash .pill { display:inline-flex; align-items:center; gap:5px; font-weight:700;
  font-size:12.5px; padding:3px 9px; border-radius:999px }
.bd-dash .pill.green { background:var(--green-bg); color:#15803d }
.bd-dash .pill.amber { background:var(--amber-bg); color:var(--amber) }
.bd-dash .pill.red { background:var(--red-bg); color:var(--red) }
.bd-dash .pill.blue { background:var(--blue-bg); color:var(--blue) }
.bd-dash .pill.grey { background:#eef1f5; color:var(--muted) }
.bd-dash .pill.purple { background:var(--purple-bg); color:var(--purple) }

/* ---- funnel ------------------------------------------------------------ */
.bd-dash .funnel { display:flex; align-items:stretch; gap:0; margin-top:6px }
.bd-dash .fstep { flex:1; text-align:center; padding:13px 8px; color:#fff;
  position:relative; font-weight:800 }
.bd-dash .fstep .fk { font-size:12px; text-transform:uppercase; letter-spacing:.03em;
  opacity:.9; font-weight:800 }
.bd-dash .fstep .fv { font-size:26px; margin-top:3px }
.bd-dash .fstep .fp { font-size:12px; opacity:.85; font-weight:600 }
.bd-dash .fstep:first-child { border-radius:10px 0 0 10px }
.bd-dash .fstep:last-child { border-radius:0 10px 10px 0 }

/* ---- team table -------------------------------------------------------- */
.bd-dash table { width:100%; border-collapse:collapse; font-size:14.5px }
.bd-dash th { text-align:left; font-size:12.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; color:#fff; background:var(--navy); padding:9px 10px }
.bd-dash th.r, .bd-dash td.r { text-align:right }
.bd-dash td { padding:9px 10px; border-bottom:1px solid #f1f5f9 }
.bd-dash tr:last-child td { border-bottom:0 }
.bd-dash .note { font-size:13.5px; color:var(--faint); margin-top:11px; line-height:1.5 }

/* ---- team table: five rows, the rest on scroll -------------------------- */
/* Height is five rows plus the header rather than a round number, so the sixth
   row is always half-visible — that is what tells the reader to scroll. The
   header sticks so the columns stay named on the way down. */
.bd-dash .team-scroll { max-height: 16.5rem; overflow-y: auto; overflow-x: auto }
.bd-dash .team-scroll thead th { position: sticky; top: 0; z-index: 1 }

/* ---- team table: the closing total row ---------------------------------- */
/* Sticky to the BOTTOM the way the header is sticky to the top. The scroller
   shows five rows, so a total sitting below the fold is a total nobody reads.
   Sticky goes on the cells, not the <tfoot> — same reason it is on `thead th`.
   The opaque background is load-bearing: without it the rows scroll through. */
.bd-dash .team-scroll tfoot td {
  position: sticky; bottom: 0; z-index: 1;
  background: #f8fafc; border-top: 2px solid var(--navy); border-bottom: 0;
  font-weight: 800; color: var(--ink);
}
/* Not `.sub` — `.bd-dash .sub` (line 42) is the card-subtitle style at 15px, and
   a td carrying it renders a size larger than the numbers beside it. */
.bd-dash .team-scroll tfoot td.members { font-weight: 700; color: var(--faint) }

/* ---- responsive (the prototype's own breakpoints) ---------------------- */
@media (max-width:1100px) {
  .bd-dash .mgrid.loss { grid-template-columns:repeat(2,1fr) }
  .bd-dash .mgrid.wide { grid-template-columns:repeat(2,1fr) }
  .bd-dash .actgrid { grid-template-columns:1fr }
}
@media (max-width:1000px) {
  .bd-dash .kpis { grid-template-columns:repeat(2,1fr) }
  .bd-dash .mgrid { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:900px) { .bd-dash .actright { grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px) {
  .bd-dash .kpis, .bd-dash .mgrid, .bd-dash .mgrid.loss,
  .bd-dash .mgrid.wide, .bd-dash .actright { grid-template-columns:1fr }
}
/* ==========================================================================
   INCENTIVE & RATING CONSOLE — design system
   ==========================================================================
   Faithful port of the client-approved prototype
   (~/Downloads/Incentive_Rating_System/Incentive_Console.html <style> block).

   HARD RULE: every selector in this file is scoped under `.ic-console`.
   Nothing here targets bare `body`, `table`, `select`, `th`, `td`, etc. —
   that would leak into the rest of the CRM. Builder-E: wrap every console
   page's root element in `<div class="ic-console">…</div>` or none of this
   will apply.

   CLASS VOCABULARY (what to use where)
   --------------------------------------------------------------------------
   SHELL / LAYOUT
     .ic-console          root wrapper — REQUIRED on every page. Sets fonts,
                           base colors, and hosts the --ic-* custom properties.
     .ic-shell             flex row: sidebar + main content
     .ic-sidebar            dark gradient sidebar, sticky, full height
     .ic-brand                sidebar header (small eyebrow + h1 title)
     .ic-nav                 vertical nav button stack
     .ic-nav-item               nav button; add `.is-active` for current page
     .ic-nav-icon                  leading icon glyph span inside a nav item
     .ic-sidebar-foot          bottom-pinned sidebar footer (text + button)

   TOP AREA
     .ic-topbar             page heading row (title + subtitle, flex-wrap)
     .ic-periodbar           the period-control bar (segmented + prev/next)
     .ic-seg                    segmented control track (Month/Quarter/…)
     .ic-seg-btn                   segment button; `.is-on` = selected
     .ic-navp                   prev/next-arrow + center select group
     .ic-label                  small uppercase label ("Period", "Show", …)
     .ic-spacer                  flex:1 filler to push following items right

   CONTENT
     .ic-page                section-level page container; `.is-on` = visible
                              (display:none otherwise, fades in on show)
     .ic-kpis                4-col KPI tile grid (collapses to 2 col ≤1100px)
     .ic-kpi                   one KPI tile; combine with an accent modifier:
                                `.ic-kpi--brand` `.ic-kpi--good`
                                `.ic-kpi--brand2` `.ic-kpi--warn`
     .ic-kpi-lab                 label text (uppercase, muted)
     .ic-kpi-val                 big value text
     .ic-kpi-sub                 secondary caption under the value
     .ic-kpi-accent               decorative corner circle (needs accent mod.
                                   on the parent `.ic-kpi` to pick a color)
     .ic-grid                 generic gap grid; pair with a column modifier:
                               `.ic-grid-2` (1fr 1fr) `.ic-grid-3` (1.4fr 1fr)
     .ic-card                 white panel: rounded, bordered, shadowed
     .ic-card-hint               muted helper line under a card's h3
     .ic-chart-wrap            canvas/chart container, `position:relative`;
                                modifiers `.ic-chart-wrap--tall` (330px),
                                `.ic-chart-wrap--short` (200px), default 280px
     .ic-chart-host              full-size div an ECharts instance mounts on
                                  directly, inside `.ic-chart-wrap` (P4)
     .ic-gap                  margin-bottom:16px spacer — put on a standalone
                                `.ic-card`/`.ic-grid` between sections instead
                                of an inline style (D7, P4)
     .ic-tools                toolbar row above a table (search/filters)
     .ic-empty-row             "no rows" placeholder <tr>'s single wide <td>
                                (P4, replaces an inline-styled empty state)

   DATA / TABLES
     .ic-tbl-scroll           scroll container around a table — ALWAYS wrap
                               wide tables in this; overflow:auto, own radius.
                               Prevents page-level horizontal scroll.
     .ic-table                the table itself: sticky header, hover rows;
                                add `.num` to any `th`/`td` that should
                                right-align (money/numeric columns)
     .ic-money                tabular-nums, semibold — use on money cells
     .ic-barcell               inline progress-bar cell wrapper (flex)
     .ic-barcell-track            bar track (background rail)
     .ic-barcell-fill               bar fill (set width % + a background)
     .ic-row-clickable         <tr> that opens a drill-down modal on click
                                 (cursor:pointer; Sourcing Incentives #13)
     .ic-link                  plain-text clickable cell VALUE (not a whole
                                 row) that opens a drill-down modal — strips
                                 <button> chrome, underlined brand-color text
                                 (Task-ID/Total/Rating drill-downs, C1/C2/C6)

   CHIPS (status / class / grade)
     .ic-chip                 base pill shape; combine with exactly one:
       .ic-chip--elig            eligible/payable (green)
       .ic-chip--pending         pending (amber)
       .ic-chip--cls1..--cls5    difficulty-class bands (indigo/sky/purple/
                                  rose/lime — cls4/cls5 included for future
                                  classes beyond the 3 seeded ones)
       .ic-chip--grade-ap         grade A+ (green)
       .ic-chip--grade-a          grade A (teal-green)
       .ic-chip--grade-b          grade B (blue)
       .ic-chip--grade-c          grade C (amber)
       .ic-chip--grade-d          grade D (red)
     .ic-pill                 neutral small pill (counts, source tags)
     .ic-pill--score           inline indigo mini-pill (e.g. "+10" in rule text)
     .ic-pill--unit             inline green mini-pill (e.g. "₹" unit callouts)
     .ic-pill--warn             inline amber mini-pill (e.g. "N unpaid" on a
                                 share column whose slice includes someone with
                                 no difficulty class)

   FORMS
     .ic-input / .ic-select   text/number input & select styling (also
                               applied automatically to bare `select`,
                               `input[type=text]`, `input[type=number]`
                               *inside* `.ic-console` — use the classes on
                               anything else, e.g. a styled wrapper)
     .ic-select--manual        narrower select for a manual per-task input cell
     .ic-input--manual-num     narrow centered number input for the same
     .ic-inline-error          small red validation line under a live-edit
                                 input/select (Task Incentives #update, 422/403)

   BUTTONS
     .ic-btn                  primary filled button; modifiers:
       .ic-btn--ghost            outlined, brand-colored text
       .ic-btn--gray             neutral gray, for "discard"-type actions
       .ic-btn--danger           white bg, red border/text
       .ic-btn--sm               smaller padding/font size
                               (`:disabled` is handled automatically)

   SECTIONS / PARAMETERS PAGE
     .ic-section-title         uppercase section divider label with icon
     .ic-param-grid             3-col grid of parameter cards (≥1100px)
     .ic-pcard                    one parameter card
     .ic-prow                       label+input row inside a pcard
     .ic-note                  info callout box (indigo tinted)
     .ic-save-bar               sticky bottom action bar (discard/save)

   CLASSES & PEOPLE PAGE
     .ic-clstabs                class-selector tab row
     .ic-clstab                    one tab; `.is-active` = selected class,
                                    `.ic-clstab--add` = dashed "+ add" tab
     .ic-thr-grid                2-col grid of threshold cards (1-col ≤900px)
     .ic-tcard                     one threshold card
     .ic-tcard-h                      card heading
     .ic-tcard-rule                   muted rule-description paragraph
     .ic-tcard-ins                    flex row of input groups
     .ic-tcard-field                     one label+input group
     .ic-name-row                  class-name label+input row (left-aligned,
                                     wide) — NOT `.ic-prow` (that's the
                                     narrow right-aligned Parameters-page
                                     convention; #16)
     .ic-input--slab                narrow number input for the sourcing-slab
                                      from/to/incentive editor (#15)

   MODAL (task/employee detail drill-down)
     .ic-modal-bg              fixed full-screen overlay; `.is-on` = shown
     .ic-modal                    the modal panel itself
     .ic-modal-head                  header row (title + close button)
     .ic-modal-close                    close (×) button
     .ic-modal-body                  scrollable body padding
     .ic-breakdown                 key/value breakdown list (grid);
                                    `.k` = label cell, `.v` = value cell,
                                    add `.is-total` on the final row for the
                                    bold divider-topped grand total

   Design tokens (--ic-*) are declared on `.ic-console` itself (not `:root`)
   so this file has zero global footprint — see block below.
   ========================================================================== */

.ic-console,
.ic-console *,
.ic-console *::before,
.ic-console *::after {
  box-sizing: border-box;
}

.ic-console {
  --ic-panel: #ffffff;
  --ic-ink: #0f172a;
  --ic-muted: #64748b;
  --ic-line: #e5e9f0;
  --ic-brand: #4f46e5;
  --ic-brand2: #0ea5e9;
  --ic-good: #10b981;
  --ic-warn: #f59e0b;
  --ic-bad: #ef4444;
  --ic-soft: #f1f5f9;
  --ic-bg: #f6f7fb;
  --ic-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
  --ic-sidebar: linear-gradient(180deg, #111827, #1e293b);

  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  background: var(--ic-bg);
  color: var(--ic-ink);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---------- shell / sidebar ---------- */
.ic-console .ic-shell { display: flex; min-height: 100vh; }

.ic-console .ic-sidebar {
  width: 238px;
  background: var(--ic-sidebar);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  flex-shrink: 0;
}

.ic-console .ic-brand { padding: 22px 20px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ic-console .ic-brand h1 { font-size: 16px; margin: 0; color: #fff; letter-spacing: .2px; }
.ic-console .ic-brand small { color: #94a3b8; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; }

/* Back-to-CRM button, top of sidebar (#19) — reuses .ic-btn--ghost (white
   bg) so it stands out against the dark sidebar without new button styles. */
.ic-console .ic-sidebar-top-action { padding: 12px 20px 0; }
.ic-console .ic-btn--block { display: block; width: 100%; text-align: center; text-decoration: none; }

.ic-console .ic-nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.ic-console .ic-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: #cbd5e1;
  padding: 11px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
}
.ic-console .ic-nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.ic-console .ic-nav-item.is-active { background: var(--ic-brand); color: #fff; box-shadow: 0 4px 12px rgba(79, 70, 229, .35); }
.ic-console .ic-nav-icon { width: 18px; text-align: center; font-size: 15px; }

.ic-console .ic-sidebar-foot { margin-top: auto; padding: 16px 18px; font-size: 11px; color: #64748b; border-top: 1px solid rgba(255, 255, 255, .08); }
.ic-console .ic-sidebar-foot button {
  margin-top: 8px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #cbd5e1;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  font-size: 11.5px;
  width: 100%;
  font-family: inherit;
}
.ic-console .ic-sidebar-foot button:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.ic-console .ic-main { flex: 1; min-width: 0; padding: 22px 30px 60px; }

/* ---------- topbar ---------- */
.ic-console .ic-topbar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.ic-console .ic-topbar h2 { margin: 0; font-size: 22px; letter-spacing: -.3px; }
.ic-console .ic-topbar p { margin: 4px 0 0; color: var(--ic-muted); font-size: 13px; }

/* ---------- forms ---------- */
.ic-console select,
.ic-console input[type="text"],
.ic-console input[type="number"],
.ic-console .ic-input,
.ic-console .ic-select {
  border: 1px solid var(--ic-line);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 13px;
  background: #fff;
  color: var(--ic-ink);
  outline: none;
  font-family: inherit;
}
.ic-console select:focus,
.ic-console input:focus {
  border-color: var(--ic-brand);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

/* ---------- period bar ---------- */
.ic-console .ic-periodbar-right { display: inline-flex; align-items: center; }
.ic-console .ic-periodbar-right form { margin: 0; }
.ic-console .ic-periodbar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--ic-line);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 18px;
  box-shadow: var(--ic-shadow);
}
.ic-console .ic-seg { display: inline-flex; background: var(--ic-soft); border-radius: 10px; padding: 3px; }
.ic-console .ic-seg-btn { border: 0; background: transparent; padding: 7px 14px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ic-muted); cursor: pointer; font-family: inherit; }
.ic-console .ic-seg-btn.is-on { background: #fff; color: var(--ic-brand); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ic-console .ic-navp { display: flex; align-items: center; gap: 6px; }
.ic-console .ic-navp button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--ic-line); background: #fff; cursor: pointer; font-size: 16px; color: var(--ic-ink); }
.ic-console .ic-navp button:hover { background: var(--ic-soft); }
.ic-console .ic-navp select { font-weight: 700; min-width: 140px; text-align: center; }
.ic-console .ic-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ic-muted); font-weight: 700; }
.ic-console .ic-spacer { flex: 1; }

/* ---------- page transitions ---------- */
.ic-console .ic-page { display: none; animation: ic-fade .25s ease; }
.ic-console .ic-page.is-on { display: block; }
@keyframes ic-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- KPI tiles ---------- */
.ic-console .ic-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.ic-console .ic-kpi { background: var(--ic-panel); border: 1px solid var(--ic-line); border-radius: 16px; padding: 18px 18px 16px; box-shadow: var(--ic-shadow); position: relative; overflow: hidden; }
.ic-console .ic-kpi-lab { font-size: 12px; color: var(--ic-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.ic-console .ic-kpi-val { font-size: 26px; font-weight: 700; margin-top: 8px; letter-spacing: -.5px; }
.ic-console .ic-kpi-sub { font-size: 12px; color: var(--ic-muted); margin-top: 4px; }
.ic-console .ic-kpi-accent { position: absolute; right: -14px; top: -14px; width: 64px; height: 64px; border-radius: 50%; opacity: .12; }
.ic-console .ic-kpi--brand .ic-kpi-accent { background: var(--ic-brand); }
.ic-console .ic-kpi--good .ic-kpi-accent { background: var(--ic-good); }
.ic-console .ic-kpi--brand2 .ic-kpi-accent { background: var(--ic-brand2); }
.ic-console .ic-kpi--warn .ic-kpi-accent { background: var(--ic-warn); }

/* ---------- grid / card system ---------- */
.ic-console .ic-grid { display: grid; gap: 16px; }
.ic-console .ic-grid-2 { grid-template-columns: 1fr 1fr; }
.ic-console .ic-grid-3 { grid-template-columns: 1.4fr 1fr; }
.ic-console .ic-card { background: var(--ic-panel); border: 1px solid var(--ic-line); border-radius: 16px; padding: 18px; box-shadow: var(--ic-shadow); }
.ic-console .ic-card h3 { margin: 0 0 2px; font-size: 14.5px; }
.ic-console .ic-card-hint { color: var(--ic-muted); font-size: 12px; margin: 0 0 14px; }
.ic-console .ic-chart-wrap { position: relative; height: 280px; }
.ic-console .ic-chart-wrap--tall { height: 330px; }
.ic-console .ic-chart-wrap--short { height: 200px; }
.ic-console .ic-chart-host { width: 100%; height: 100%; }
.ic-console .ic-gap { margin-bottom: 16px; }
.ic-console .ic-empty-row { text-align: center; color: var(--ic-muted); padding: 22px; }

/* ---------- toolbar ---------- */
.ic-console .ic-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.ic-console .ic-signoff { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.ic-console .ic-signoff form.inline { display: inline; }

/* ---------- tables ---------- */
.ic-console .ic-tbl-scroll { max-height: 560px; overflow: auto; border: 1px solid var(--ic-line); border-radius: 14px; }
.ic-console .ic-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ic-console .ic-table th,
.ic-console .ic-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--ic-line); white-space: nowrap; }
.ic-console .ic-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ic-muted);
  font-weight: 600;
  position: sticky;
  top: 0;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.ic-console .ic-table th.num,
.ic-console .ic-table td.num { text-align: right; }
.ic-console .ic-table tbody tr:hover { background: var(--ic-soft); }
.ic-console .ic-row-clickable { cursor: pointer; }
.ic-console .ic-money { font-variant-numeric: tabular-nums; font-weight: 600; }
/* Plain-text clickable table cell that opens a drill-down modal (C1/C2/C6) —
   NOT `.ic-btn` (that's chrome-heavy, for standalone actions); this strips a
   <button>'s default chrome so it reads as underlined link-style text inline
   in a table cell. */
.ic-console .ic-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ic-brand); text-decoration: underline; cursor: pointer; }
.ic-console .ic-link:hover { color: var(--ic-ink); }

/* ---------- summary blocks (TIS-2: type/member totals below the task list) ---------- */
.ic-console .ic-summary-block { margin-top: 22px; }
.ic-console .ic-summary-block h3 { margin-bottom: 4px; }

/* ---------- inline progress bar cell ---------- */
.ic-console .ic-barcell { display: flex; align-items: center; gap: 8px; }
.ic-console .ic-barcell-track { flex: 1; height: 7px; background: var(--ic-soft); border-radius: 6px; overflow: hidden; min-width: 60px; }
.ic-console .ic-barcell-fill { height: 100%; border-radius: 6px; }

/* ---------- chips ---------- */
.ic-console .ic-chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; }
.ic-console .ic-chip--elig { background: #dcfce7; color: #15803d; }
.ic-console .ic-chip--pending { background: #fef3c7; color: #b45309; }
.ic-console .ic-chip--cls1 { background: #eef2ff; color: #4338ca; }
.ic-console .ic-chip--cls2 { background: #e0f2fe; color: #0369a1; }
.ic-console .ic-chip--cls3 { background: #f3e8ff; color: #7e22ce; }
.ic-console .ic-chip--cls4 { background: #ffe4e6; color: #be123c; }
.ic-console .ic-chip--cls5 { background: #ecfccb; color: #4d7c0f; }
.ic-console .ic-chip--grade-ap { background: #dcfce7; color: #15803d; }
.ic-console .ic-chip--grade-a { background: #d1fae5; color: #047857; }
.ic-console .ic-chip--grade-b { background: #dbeafe; color: #1d4ed8; }
.ic-console .ic-chip--grade-c { background: #fef3c7; color: #b45309; }
.ic-console .ic-chip--grade-d { background: #fee2e2; color: #b91c1c; }

/* ---------- buttons ---------- */
.ic-console .ic-btn { background: var(--ic-brand); color: #fff; border: 0; border-radius: 9px; padding: 9px 15px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ic-console .ic-btn:hover { filter: brightness(1.06); }
.ic-console .ic-btn--ghost { background: #fff; color: var(--ic-brand); border: 1px solid var(--ic-brand); }
.ic-console .ic-btn--sm { padding: 6px 11px; font-size: 12px; }
.ic-console .ic-btn--danger { background: #fff; color: var(--ic-bad); border: 1px solid #fecaca; }
.ic-console .ic-btn--gray { background: var(--ic-soft); color: var(--ic-ink); border: 1px solid var(--ic-line); }
.ic-console .ic-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- pills ---------- */
.ic-console .ic-pill { font-size: 11px; color: var(--ic-muted); background: var(--ic-soft); padding: 3px 8px; border-radius: 6px; }
.ic-console .ic-pill--score { display: inline-block; background: #eef2ff; color: #4338ca; border-radius: 5px; padding: 1px 7px; font-size: 11px; font-weight: 700; margin: 0 1px; }
.ic-console .ic-pill--unit { display: inline-block; background: #ecfdf5; color: #047857; border-radius: 5px; padding: 1px 7px; font-size: 11px; font-weight: 700; margin: 0 1px; }
.ic-console .ic-pill--warn { display: inline-block; background: #fffbeb; color: #b45309; border-radius: 5px; padding: 1px 7px; font-size: 11px; font-weight: 700; margin: 0 1px; }

/* ---------- section title ---------- */
.ic-console .ic-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--ic-muted); font-weight: 700; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }

/* ---------- parameters page ---------- */
.ic-console .ic-param-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ic-console .ic-pcard { border: 1px solid var(--ic-line); border-radius: 14px; padding: 16px; background: #fff; }
.ic-console .ic-pcard h4 { margin: 0 0 12px; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.ic-console .ic-prow { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; }
.ic-console .ic-prow label { font-size: 12.5px; color: #334155; }
.ic-console .ic-prow input { width: 96px; text-align: right; }

.ic-console .ic-note { background: #eef2ff; border: 1px solid #dbe0ff; border-radius: 12px; padding: 13px 15px; color: #3730a3; font-size: 12.5px; line-height: 1.5; }

.ic-console .ic-save-bar {
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(246, 247, 251, 0), var(--ic-bg) 30%);
  padding: 16px 0 4px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* ---------- modal ---------- */
.ic-console .ic-modal-bg { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.ic-console .ic-modal-bg.is-on { display: flex; }
/* Fit the modal to its content, but never exceed the page: max-width caps at
   the overlay's padded width (100% = viewport − the .ic-modal-bg 20px gutters),
   min-width keeps small modals readable, 90vh + overflow handles tall/wide. */
.ic-console .ic-modal { background: #fff; border-radius: 18px; width: max-content; max-width: min(1100px, 100%); min-width: min(480px, 100%); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); max-height: 90vh; overflow: auto; }
.ic-console .ic-modal-head { padding: 18px 22px; border-bottom: 1px solid var(--ic-line); display: flex; justify-content: space-between; align-items: center; }
.ic-console .ic-modal-head h3 { margin: 0; font-size: 16px; }
.ic-console .ic-modal-body { padding: 20px 22px; }
.ic-console .ic-modal-close { cursor: pointer; font-size: 20px; color: var(--ic-muted); background: none; border: 0; }

.ic-console .ic-breakdown { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; font-size: 13px; }
.ic-console .ic-breakdown .k { color: var(--ic-muted); }
.ic-console .ic-breakdown .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ic-console .ic-breakdown .is-total { border-top: 2px solid var(--ic-ink); padding-top: 8px; margin-top: 4px; font-size: 15px; }

/* ---------- classes & people page ---------- */
.ic-console .ic-clstabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.ic-console .ic-clstab { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--ic-line); background: #fff; cursor: pointer; font-weight: 600; font-size: 13px; font-family: inherit; }
.ic-console .ic-clstab.is-active { background: var(--ic-brand); color: #fff; border-color: var(--ic-brand); }
.ic-console .ic-clstab--add { border-style: dashed; color: var(--ic-brand); font-weight: 600; }

.ic-console .ic-thr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }
.ic-console .ic-tcard { border: 1px solid var(--ic-line); border-radius: 13px; padding: 15px 16px 16px; background: #fbfcff; }
.ic-console .ic-tcard-h { font-size: 13.5px; font-weight: 700; }
.ic-console .ic-tcard-rule { font-size: 11.5px; color: var(--ic-muted); margin: 5px 0 13px; line-height: 1.55; }
.ic-console .ic-tcard-ins { display: flex; gap: 12px; flex-wrap: wrap; }
.ic-console .ic-tcard-field { display: flex; flex-direction: column; gap: 5px; }
.ic-console .ic-tcard-field label { font-size: 10px; color: #475569; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.ic-console .ic-tcard-field input { width: 118px; text-align: left; font-weight: 600; }

/* #16: class-name row — left-aligned, reasonably wide, near its heading.
   Deliberately NOT `.ic-prow` (Parameters-page convention: flex
   space-between + a 96px right-aligned input, which is why the name box
   used to end up tiny and shoved to the far right of the card). */
.ic-console .ic-name-row { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ic-console .ic-name-row label { font-size: 12.5px; color: #334155; }
.ic-console .ic-name-row input { width: 100%; max-width: 320px; text-align: left; }

/* #15: sourcing-slab editor (from/to/incentive rows on the class form) */
.ic-console .ic-input--slab { width: 110px; text-align: right; }
.ic-console .ic-slab-add-btn { margin-top: 10px; }

/* Section C: per-band Points + Range grid inside an .ic-tcard (rating
   thresholds — 3 or 4 rows depending on the parameter; incentive
   thresholds reuse the same row shape but wider, with a leading label
   instead of a Points column). */
.ic-console .ic-band-tbl { display: flex; flex-direction: column; gap: 7px; }
/* Rating cards: Min./Mid./Max. label · Points · Range (PDF §5 order). */
.ic-console .ic-band-row { display: grid; grid-template-columns: 46px 76px 1fr; gap: 10px; align-items: center; }
.ic-console .ic-band-row--head { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #475569; font-weight: 700; }
.ic-console .ic-band-label { font-size: 12px; color: #334155; font-weight: 600; }
/* Incentive cards keep the 2-col wide shape (leading label, no Points). */
.ic-console .ic-band-row--wide { grid-template-columns: 160px 1fr; }
.ic-console .ic-band-row--wide label { font-size: 12px; color: #334155; font-weight: 600; }
.ic-console .ic-band-range { display: flex; align-items: center; gap: 6px; }
.ic-console .ic-band-from { font-size: 12.5px; color: var(--ic-muted); font-variant-numeric: tabular-nums; min-width: 40px; }
.ic-console .ic-band-sep { color: var(--ic-muted); }
.ic-console .ic-band-open { font-size: 12px; color: var(--ic-muted); font-style: italic; }
.ic-console .ic-input--band { width: 100%; text-align: left; }
.ic-console .ic-assign-search { max-width: 320px; margin-bottom: 12px; }

/* Stacked Project / Entity in the breakdown modals (project on top, entity
   below, muted) — Raj 2026-07-15, matches the CRM's stacked layout. */
.ic-console .ic-entity-sub { font-size: 12px; color: var(--ic-muted); margin-top: 2px; }

/* CRM-style members button (person icon + count pill) on Task Incentives. */
.ic-console .ic-members-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 0; background: none; color: var(--ic-brand); font-weight: 600; font-size: 13px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.ic-console .ic-members-btn:hover { background: #eef2ff; }
.ic-console .ic-members-btn svg { width: 18px; height: 18px; }
.ic-console .ic-members-count { background: var(--ic-brand); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; line-height: 1.6; }

/* ---------- manual per-task inputs (Task Incentives inline edit) ---------- */
.ic-console .ic-select--manual { min-width: 150px; }
.ic-console .ic-input--manual-num { width: 90px; text-align: center; }
/* Live per-keystroke recompute (#update): small red validation line under an
   input/select whose PATCH came back 422/403 — non-blocking, the field
   itself is reverted to its previous value by the Stimulus controller. */
.ic-console .ic-inline-error { display: block; color: #b91c1c; font-size: 11px; margin-top: 3px; }
/* Sourcing drill-down (V2-8): the slab-computed value shown alongside the
   editable per-task override input, so a CEO can see what a blank/revert
   restores before clearing the field. */
.ic-console .ic-slab-default { color: var(--ic-muted); font-size: 11px; margin-top: 3px; }

/* ---------- accessibility: keyboard focus ring ---------- */
.ic-console :focus-visible {
  outline: 2px solid var(--ic-brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
  border-radius: 4px;
}

/* ---------- accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ic-console *,
  .ic-console *::before,
  .ic-console *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ic-console .ic-kpis { grid-template-columns: repeat(2, 1fr); }
  .ic-console .ic-grid-2,
  .ic-console .ic-grid-3 { grid-template-columns: 1fr; }
  .ic-console .ic-param-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .ic-console .ic-thr-grid { grid-template-columns: 1fr; }
}

/* Sidebar collapses into a horizontal top bar instead of disappearing, so
   the console stays navigable on a narrow screen (deviation from the
   prototype's `.side{display:none}` — see report). */
@media (max-width: 768px) {
  .ic-console .ic-shell { flex-direction: column; }
  .ic-console .ic-sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; }
  .ic-console .ic-brand { border-bottom: 0; border-right: 1px solid rgba(255, 255, 255, .08); flex-shrink: 0; }
  .ic-console .ic-nav { flex-direction: row; padding: 8px; overflow-x: auto; }
  .ic-console .ic-sidebar-foot { display: none; }
  .ic-console .ic-main { padding: 16px; }
  .ic-console .ic-param-grid { grid-template-columns: 1fr; }
}
/*
 * Test environment overrides.
 * Loaded only when RAILS_ENV=test (see application.html.erb).
 * Disables all animations and transitions to prevent flaky tests.
 */
*, *::before, *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */