@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 }

/* The period options are <a>s, and they sit inside .filters — so the pill
   styling for that row (`.bd-dash .filters a`, 0-2-1) out-specifies `.ddopt`
   (0-2-0) and rendered the list as a WRAP OF PILLS rather than a menu. Reset
   them to the plain rows the Member picker's <div> options get for free.
   Three classes deep, so these win on specificity rather than on order.

   Note both selectors carry `.on`: `.bd-dash .filters a.on` paints the applied
   one navy, which inside a panel reads as a pressed pill. The TICK marks it
   instead, exactly as a tick marks a selected member. */
.bd-dash .periodfilter .ddopt,
.bd-dash .periodfilter .ddopt.on {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: transparent; border: 0; border-radius: 7px;
  padding: 7px 9px; line-height: 1.35;
  font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.bd-dash .periodfilter .ddopt:hover { background: #eef2ff }
.bd-dash .periodfilter .ddopt .tick { margin-left: auto; color: var(--accent) }

/* PERIOD PICKER ONLY. The Tag and Member pickers keep the sizing above,
   untouched. An absolutely-positioned panel does not push its siblings around,
   but it DOES add to the document's scroll height — so this one, which sits at
   the end of the row and can open low on the page, is additionally bounded by
   the VIEWPORT. Whichever bound is smaller wins, so it can never grow the page.
   The search box sits OUTSIDE .ddopts, hence the cap on the panel as well. */
.bd-dash .periodfilter .ddopts  { max-height: min(15rem, 45vh) }
/* Stays ABSOLUTE, like the other two pickers, so it travels with its trigger.
   (It was briefly position:fixed to keep it out of the document's scroll height;
   that pinned it to the viewport instead, and since this page scrolls an inner
   container the panel hung in mid-air while the page moved under it.)

   RIGHT-aligned, so it grows LEFTWARD rather than off the right edge: this pill
   sits at the end of the row. `left: auto` is what beats the base rule's
   `left: 0`. Height is capped against the viewport as well as in rem, so a tall
   panel scrolls internally instead of reaching for more page. */
.bd-dash .periodfilter .ddpanel {
  right: 0; left: auto;
  max-height: min(22rem, 70vh); 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 ----------------------------------- */
/* A titled strip of named figures (Meeting conversion on Meetings done). The
   title is what stops three percentages reading as meeting counts. */
.bd-dash .mnamed { margin-top:10px }
.bd-dash .mnamed .msplit { margin-top:4px }
.bd-dash .mnamed-t { font-size:11px; font-weight:800; text-transform:uppercase;
                     letter-spacing:.04em; color:var(--faint);
                     display:flex; align-items:center; gap:5px }
.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(5,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 ---------------------------------- */
/* ONE COLUMN, TWO ROWS: the heroes across the top, the tiles beneath.
   Was 1.15fr/2fr with a single hero beside the tiles; Fresh calls and Follow-up
   calls are now a pair — the two halves of Total calls, each with its own donut
   — and they sit SIDE BY SIDE, which needs the full width. */
.bd-dash .actgrid { display:grid; grid-template-columns:1fr; gap:14px; align-items:stretch }
.bd-dash .heroes { display:grid; grid-template-columns:1fr 1fr; 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 }
/* ONE ROW: count block, connected breakdown beside it, pie closing the card.
   Each hero used to stack those three, which made the pair far taller than the
   tiles below them. */
.bd-dash .hrow { display:flex; align-items:center; gap:16px; text-align:left }
/* The count block is centred on itself — label, figure and sub-line stacked and
   aligned to the middle — while the breakdown beside it stays left-aligned. */
.bd-dash .hmain { flex:0 0 auto; min-width:0; text-align:center }
.bd-dash .hrow .dleg { flex:1; min-width:0 }
.bd-dash .hrow .hpie { flex-shrink:0 }
/* TABULAR NUMERALS on every figure in these cards. Proportional digits made the
   legend's counts ragged — 80 / 88 / 14 did not line up — which is exactly the
   comparison the column exists to support. */
.bd-dash .hero .hn, .bd-dash .dleg .n, .bd-dash .hero .msplit .sv {
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1 }
.bd-dash .hero .hn { font-size:30px; font-weight:800; color:var(--navy);
                     letter-spacing:-1px; line-height:1; margin-top:4px }
.bd-dash .hero .hk { display:flex; align-items:center; justify-content:center; gap:6px;
                     font-size:13px; font-weight:800; text-transform:uppercase;
                     letter-spacing:.05em; color:var(--blue) }
.bd-dash .hero .hd { font-size:13.5px; color:var(--muted) }
.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 }
/* "Still unconnected" counts LEADS while the rows above it count CALLS. The
   dashed rule marks the break; this names the unit so the three are never read
   as one addable column. */
.bd-dash .dleg .u { font-size:11px; font-weight:700; color:var(--faint);
                    text-transform:uppercase; letter-spacing:.04em }
/* The legend rows are drill-downs, so they get a real hit area — and a visible
   keyboard focus ring, which did not exist. No hover tint: the card's palette is
   left exactly as it was. */
.bd-dash .hrow .dleg div { padding:3px 6px; margin:2px -6px; border-radius:7px }
.bd-dash .hrow .dleg a:focus-visible { outline:2px solid var(--blue);
  outline-offset:2px; border-radius:5px }
/* Four tiles now the Meeting conversion one has moved into Meetings done, and
   they have the full width to sit in. */
.bd-dash .actright { display:grid; grid-template-columns:repeat(4,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) }

/* ---- pipeline: four plain counts ---------------------------------------
   SEPARATED, not joined (2026-09-03, D-359). Edge-to-edge with a shared radius
   read as one continuous funnel bar, which is exactly the claim the section
   stopped making: the four blocks count different events and are no longer
   subsets of each other. A gap and a radius on every block say so. */
.bd-dash .funnel { display:flex; align-items:stretch; gap:8px; margin-top:6px }
.bd-dash .fstep { flex:1; text-align:center; padding:13px 8px; color:#fff;
  position:relative; font-weight:800; border-radius:10px }
.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 }

/* ---- 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.c, .bd-dash td.c { text-align:center }
.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: ten rows, the rest on scroll --------------------------- */
/* Height is ten rows plus the header rather than a round number, so the
   eleventh 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.
   Raised from five rows (16.5rem) on 2026-08-22: a five-row window turned an
   ordinary team into a scroll box on every page load. A row is ~2.56rem
   (14.5px text + 9px padding either side + the divider), so five more rows is
   the ~12.8rem added here. */
.bd-dash .team-scroll { max-height: 29.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 ten 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) }
  /* Side by side needs room for two donuts; below this they stack. */
  .bd-dash .heroes { grid-template-columns:1fr }
}
@media (max-width:640px) {
  .bd-dash .kpis, .bd-dash .mgrid, .bd-dash .mgrid.loss,
  .bd-dash .mgrid.wide, .bd-dash .actright, .bd-dash .heroes { 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); }
.ic-console .ic-kpis--three { grid-template-columns: repeat(3, 1fr); }
.ic-console .ic-kpi--link { display: block; color: var(--ic-ink); text-decoration: none; }
.ic-console .ic-kpi--link:hover,
.ic-console .ic-kpi--link.is-active { border-color: var(--ic-brand); }
.ic-console .ic-kpi--link:focus-visible { outline: 3px solid var(--ic-brand); outline-offset: 2px; }

/* ---------- 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; }

/* ---------- sign-off tabs (S7) ----------
   Plain links, never a frame — see _scope_tabs.html.erb. The dot says what
   state the tab's sign-off is in: green signed, amber still to sign, grey
   nothing to sign. */
.ic-console .ic-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; border-bottom: 1px solid var(--ic-line); padding-bottom: 8px; }
.ic-console .ic-tab { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--ic-muted); background: var(--ic-soft); text-decoration: none; }
.ic-console .ic-tab:hover { color: var(--ic-ink); }
.ic-console .ic-tab--on { background: var(--ic-ink); color: #fff; }
.ic-console .ic-tab--on:hover { color: #fff; }
.ic-console .ic-tab-count { font-size: 11px; font-weight: 700; opacity: .75; }
.ic-console .ic-dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }
.ic-console .ic-dot--signed { background: #16a34a; }
.ic-console .ic-dot--pending { background: #f59e0b; }
.ic-console .ic-dot--empty { background: #cbd5e1; }

/* ---------- Employee Incentives sign-off checklist (S7) ---------- */
.ic-console .ic-checklist { display: grid; gap: 6px; margin: 10px 0 14px; }
.ic-console .ic-checklist-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 5px 10px; border-radius: 7px; background: var(--ic-soft); }
.ic-console .ic-checklist-row .ic-spacer { flex: 1; }
.ic-console .ic-checklist-note { font-size: 11.5px; color: var(--ic-muted); }

/* ---------- 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; }
}

@media (max-width: 620px) {
  .ic-console .ic-kpis--three { grid-template-columns: 1fr; }
}
/* RERA Easy Quotation Builder — the tool's styles.css (v111) and its Warm Studio skin (v9),
   ported and scoped under .qb (generated; do not hand-edit — regenerate from the tool files).
   Recoloured to the CRM theme; the A4 proposal's own print theme is unchanged. */

:root {
  --brand: #3a63ff;
  --brand-2: #5b4bff;
  --brand-grad: linear-gradient(135deg, #3a63ff, #6c4cff);
  --bg: #0a0a0f;

  
  --glass: rgba(255, 255, 255, 0.07);
  --glass-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-blur: blur(22px) saturate(160%);

  
  --txt: #f4f4f6;
  --txt-soft: #a1a1aa;

  
  --ink: #1f2937;
  --ink-soft: #6b7280;
  --line: #e5e7eb;

  --danger: #ff5d5d;
  --radius: 18px;
  font-size: 15px;
}
.qb * { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.qb {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--txt);
  min-height: 100vh;
  overflow-x: hidden;
}
.qb::before,
.qb::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
}
.qb::before {
  background: radial-gradient(circle, #3a63ff 0%, transparent 65%);
  top: -18vw;
  left: -12vw;
  animation: blobA 18s ease-in-out infinite alternate;
}
.qb::after {
  background: radial-gradient(circle, #6c4cff 0%, transparent 65%);
  bottom: -20vw;
  right: -14vw;
  animation: blobB 22s ease-in-out infinite alternate;
}
@keyframes blobA {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(9vw, 7vh) scale(1.15); }
}
@keyframes blobB {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-8vw, -6vh) scale(0.95); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.qb #welcomeSplash {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(135deg, #07070c, #141634 48%, #211a4a);
  transition: opacity .55s ease, visibility .55s ease;
  cursor: pointer;
}
.qb #welcomeSplash::before {
  content: ""; position: absolute; inset: -25%; pointer-events: none;
  background:
    radial-gradient(34% 34% at 28% 30%, rgba(58,99,255,.60), transparent 60%),
    radial-gradient(34% 34% at 76% 58%, rgba(108,76,255,.58), transparent 60%),
    radial-gradient(30% 30% at 60% 86%, rgba(91,203,255,.40), transparent 60%);
  filter: blur(40px);
  animation: wsDrift 9s ease-in-out infinite alternate;
}
.qb #welcomeSplash .ws-inner {
  position: relative; text-align: center; color: #fff;
  padding: 44px 62px; border-radius: 28px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid rgba(255,255,255,.30);
  box-shadow: 0 26px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.55);
  animation: wsPop 1s cubic-bezier(.22,1,.36,1) both;
}
.qb #welcomeSplash .ws-kicker {
  font-size: 13px; letter-spacing: 6px; text-transform: uppercase;
  opacity: .78; margin-bottom: 6px;
  animation: wsFade .8s ease .2s both;
}
.qb #welcomeSplash .ws-title {
  font-size: 54px; font-weight: 800; letter-spacing: 1px; line-height: 1;
  background: linear-gradient(100deg, #fff 18%, #b9c8ff 40%, #6c4cff 54%, #fff 76%);
  background-size: 230% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: wsShine 2.8s linear infinite;
}
.qb #welcomeSplash .ws-sub {
  font-size: 14px; letter-spacing: 4px; text-transform: uppercase;
  opacity: .8; margin-top: 10px;
  animation: wsFade .8s ease .35s both;
}
.qb #welcomeSplash .ws-bar {
  margin: 22px auto 0; width: 190px; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.2); overflow: hidden;
}
.qb #welcomeSplash .ws-bar > span {
  display: block; height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, #3a63ff, #6c4cff, #5bcbff);
  animation: wsLoad 2.3s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes wsDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2.5%,-2%,0) scale(1.08); }
  100% { transform: translate3d(-2%,2.5%,0) scale(1.05); }
}
@keyframes wsPop {
  from { opacity: 0; transform: translateY(20px) scale(.93); filter: blur(8px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes wsShine { to { background-position: 230% center; } }
@keyframes wsFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: .8; transform: none; }
}
@keyframes wsLoad { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
.qb #welcomeSplash *,
.qb #welcomeSplash::before { animation: none !important; }


}
.qb .appbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 10px;
  padding: 12px 24px;
  background: rgba(10, 10, 15, 0.55);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  animation: fadeIn .5s ease both;
}
.qb .appbar-left { display: flex; align-items: center; gap: 12px; }
.qb .brand-logo { height: 44px; width: auto; display: block; }
.qb .brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.qb .brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}
.qb .app-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.1; color: var(--txt); }
.qb .app-subtitle { font-size: 11.5px; color: var(--txt-soft); }
.qb .appbar-actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 10px; row-gap: 8px; }
.qb .divider-v { width: 1px; height: 24px; background: var(--glass-border); margin: 0 6px; }
.qb .tb-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}
.qb .btn.btn-icon {
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  color: var(--txt);
  border-color: transparent;
  border-radius: 9px;
}
.qb .btn.btn-icon .ico { width: 18px; height: 18px; vertical-align: middle; }
.qb .btn.btn-icon:hover { background: var(--glass-strong); }
.qb .btn.btn-icon[disabled] { opacity: .3; }
.qb .btn.btn-icon.on { background: rgba(233, 179, 8, .18); color: var(--gold, #e9b308); }
.qb .tb-group .btn-pdf { height: 38px; padding: 0 14px; border-radius: 9px; }
.qb .tb-menu { position: relative; display: inline-flex; }
.qb .add-dropdown { right: auto; left: 0; min-width: 210px; }
.qb .tb-account { position: relative; }
.qb .acct-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: rgba(22, 22, 32, 0.97);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qb .acct-dropdown[hidden] { display: none; }
.qb .acct-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 11px;
  background: none; border: none; border-radius: 8px;
  color: var(--txt); font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
}
.qb .acct-item:hover { background: rgba(255, 255, 255, 0.08); }
.qb .acct-item .ico { width: 16px; height: 16px; color: #9db4c8; flex: none; }
.qb .item-target-picker { padding: 7px 4px 2px; border-top: 1px solid var(--ws-border); }
.qb .item-target-picker > p { margin: 0 7px 4px; color: var(--ws-ink-3); font-size: 11px; }
.qb .item-target-picker .acct-item { padding: 7px 9px; font-size: 12px; }
.qb .btn {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: background .2s, border-color .2s, transform .15s, box-shadow .25s;
}
.qb .ico {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  vertical-align: -0.15em;
  pointer-events: none;
}
.qb .row-del .ico,
.qb .doc-del .ico,
.qb .saved-del .ico { width: 15px; height: 15px; }
.qb input[readonly] { opacity: .72; cursor: default; }
.qb .btn[disabled] { opacity: .38; cursor: default; pointer-events: none; }
.qb .btn:hover { transform: translateY(-1px); }
.qb .btn:active { transform: translateY(1px) scale(.98); }
.qb .btn-primary {
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 4px 18px rgba(58, 99, 255, 0.4);
}
.qb .btn-primary:hover { box-shadow: 0 6px 26px rgba(58, 99, 255, 0.6); }
.qb .btn-outline {
  background: var(--glass);
  color: var(--txt);
  border-color: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.qb .btn-outline:hover { background: var(--glass-strong); }
.qb .btn-ghost { background: transparent; color: var(--txt); }
.qb .btn-ghost:hover { background: var(--glass); }
.qb .btn-add {
  margin: 10px 0 0;
  background: rgba(58, 99, 255, 0.08);
  color: var(--brand);
  border: 1px dashed rgba(58, 99, 255, 0.55);
  width: 100%;
  border-radius: 10px;
}
.qb .btn-add:hover { background: rgba(58, 99, 255, 0.16); }
.qb .workspace {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  padding: 24px;
  max-width: 1420px;
  margin: 0 auto;
  align-items: start;
}
.qb .side-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  
  top: calc(var(--appbar-h, 64px) + 20px);
  
  max-height: calc(100vh - var(--appbar-h, 64px) - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .3s ease;
}
.qb .side-panel:hover { scrollbar-color: rgba(255, 255, 255, 0.25) transparent; }
.qb .side-panel::-webkit-scrollbar { width: 6px; }
.qb .side-panel::-webkit-scrollbar-track { background: transparent; }
.qb .side-panel::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background .3s ease;
}
.qb .side-panel:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.25); }
.qb .side-panel::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }
.qb .panel-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: fadeUp .55s ease both;
  transition: border-color .25s, box-shadow .25s;
}
.qb .panel-card:hover { border-color: rgba(255, 255, 255, 0.24); }
.qb .side-panel .panel-card:nth-child(1) { animation-delay: .05s; }
.qb .side-panel .panel-card:nth-child(2) { animation-delay: .12s; }
.qb .side-panel .panel-card:nth-child(3) { animation-delay: .19s; }
.qb .side-panel .panel-card:nth-child(4) { animation-delay: .26s; }
.qb .panel-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--txt-soft);
}
.qb .field { display: block; margin-bottom: 12px; }
.qb .field:last-child { margin-bottom: 0; }
.qb .field-row { display: flex; gap: 10px; }
.qb .field-row .field { flex: 1; min-width: 0; }
.qb .field-row .field input,
.qb .field-row .field select { min-width: 0; max-width: 100%; }
.qb .field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-soft);
  margin-bottom: 5px;
}
.qb .field input,
.qb .field select,
.qb .field textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--txt);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.qb .field select option { background: #15151d; color: var(--txt); }
.qb .field textarea { resize: vertical; }
.qb .field input::placeholder,
.qb .field textarea::placeholder { color: rgba(255,255,255,.35); }
.qb .field input:focus,
.qb .field select:focus,
.qb .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(58, 99, 255, 0.25);
}
.qb .field input[type="date"] { color-scheme: dark; }
.qb .field input[type="number"] { color-scheme: dark; }
.qb .panel-highlight {
  border: 1px solid rgba(58, 99, 255, 0.55);
  box-shadow: 0 8px 32px rgba(58, 99, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.qb .svc-group {
  margin: 14px 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9db4ff;
}
.qb #svcPicker .svc-group:first-child { margin-top: 0; }
.qb .svc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background .15s;
}
.qb .svc-row:hover { background: rgba(255, 255, 255, 0.05); }
.qb .svc-row.on { background: rgba(58, 99, 255, 0.14); }
.qb .svc-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  min-width: 0;
}
.qb .svc-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
  cursor: pointer;
  flex: none;
}
.qb .svc-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--txt);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qb .svc-row.on .svc-name { color: #cdd9ff; font-weight: 600; }
.qb .svc-amt {
  width: 96px;
  flex: none;
  font: inherit;
  font-size: 12.5px;
  padding: 5px 8px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  text-align: right;
  background: rgba(255, 255, 255, 0.06);
  color: var(--txt);
  transition: border-color .2s, box-shadow .2s;
}
.qb .svc-amt:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(58, 99, 255, 0.25);
}
.qb .svc-amt[hidden] { display: none; }
.qb .svc-sub-btn {
  display: none;
  flex: none;
  background: none;
  border: none;
  color: #9db4ff;
  cursor: pointer;
  padding: 2px;
}
.qb .svc-row.on .svc-sub-btn { display: inline-flex; }
.qb .svc-sub-btn .ico { transition: transform .15s; }
.qb .svc-sub-btn.open .ico { transform: rotate(180deg); }
.qb .svc-subs {
  margin: 2px 4px 8px 26px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qb .svc-subs[hidden] { display: none; }
.qb .svc-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qb .svc-sub-name {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qb .svc-sub-amt {
  width: 78px;
  flex: none;
  font: inherit;
  font-size: 12px;
  text-align: right;
  padding: 3px 7px;
  border-radius: 7px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--txt);
}
.qb .svc-sub-amt:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(58, 99, 255, 0.25);
}
.qb .svc-sub-inc { font-size: 10.5px; color: #8fa3c8; }
.qb .card-pill input.i-amt[readonly] { pointer-events: none; }
.qb .svc-card[data-key] .pill-toggle { display: none; }
.qb .svc-flip {
  display: none;
  flex: none;
  background: none;
  border: none;
  color: #9db4ff;
  cursor: pointer;
  padding: 2px;
}
.qb .svc-row.on .svc-flip { display: inline-flex; }
.qb .svc-flip:hover { color: #cdd9ff; }
.qb .svc-amt:disabled { opacity: .45; }
.qb .svc-sub-flip {
  flex: none;
  display: inline-flex;
  background: none;
  border: none;
  color: #9db4ff;
  cursor: pointer;
  padding: 2px;
}
.qb .svc-sub-flip:hover { color: #cdd9ff; }
.qb .svc-sub-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.qb .svc-sub-check {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.qb .svc-sub-row .svc-sub-toggle + .svc-sub-name { flex: 1 1 auto; }
.qb .svc-sub-row.off .svc-sub-name { opacity: .5; text-decoration: line-through; }
.qb .calc-preview {
  margin: 14px 0 0;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.04);
}
.qb .calc-preview > div {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--glass-border);
}
.qb .calc-preview > div:last-child { border-bottom: none; }
.qb .calc-preview span { color: var(--txt-soft); }
.qb .calc-preview strong { color: var(--txt); transition: color .2s; }
.qb .calc-preview .calc-total { background: rgba(58, 99, 255, 0.18); }
.qb .calc-preview .calc-total span,
.qb .calc-preview .calc-total strong { color: #9db4ff; font-weight: 700; }
.qb .calc-grand-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 9px 12px;
  cursor: pointer;
  user-select: none;
}
.qb .calc-grand-toggle input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--brand);
  cursor: pointer;
  flex: none;
}
.qb .calc-grand-toggle span { font-size: 12.5px; }
.qb .calc-grand-toggle:hover span { color: var(--txt); }
.qb .btn-block { display: block; width: 100%; margin-bottom: 8px; text-align: center; }
.qb .rates-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 6px;
  animation: fadeUp .3s ease both;
}
.qb .rates-grid th {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--txt-soft);
  text-align: left;
  padding: 4px 6px;
}
.qb .rates-grid td { padding: 3px 4px; color: var(--txt); }
.qb .rates-grid td:first-child { font-weight: 600; }
.qb .rates-grid input {
  width: 100%;
  min-width: 56px;
  font: inherit;
  font-size: 12px;
  padding: 6px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  text-align: right;
  background: rgba(255, 255, 255, 0.06);
  color: var(--txt);
  color-scheme: dark;
  transition: border-color .2s, box-shadow .2s;
}
.qb .rates-grid input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(58, 99, 255, 0.25);
}
.qb .rates-grid .bracket-lbl {
  font-weight: 600;
  font-size: 11.5px;
}
.qb .rates-grid-onb input { min-width: 100px; }
.qb .edits-card { padding: 0; overflow: hidden; }
.qb .edits-card {
  border: 1px solid rgba(58, 99, 255, 0.55);
  position: fixed;
  top: 84px;
  right: 24px;
  bottom: 24px;
  width: 400px;
  max-width: 92vw;
  z-index: 90;
  background: rgba(16, 16, 26, 0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  display: flex;
  flex-direction: column;
  padding: 14px 0 0;
  margin: 0;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  animation: slideIn .3s cubic-bezier(.2, .8, .3, 1) both;
}
.qb .edits-card[hidden] { display: none !important; }
.qb .edits-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 8px 18px;
}
.qb .edits-title { margin: 0; color: #cdd9ff; }
.qb .edits-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  padding: 0 18px 18px;
  animation: fadeUp .3s ease both;
}
.qb .edits-body::-webkit-scrollbar { width: 6px; }
.qb .edits-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.22); border-radius: 3px; }
.qb .sub-title {
  margin: 18px 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #9db4ff;
  letter-spacing: .03em;
}
.qb .sub-title:first-of-type { margin-top: 4px; }
.qb .sub-title small { color: var(--txt-soft); font-weight: 500; }
.qb .rates-hint { font-size: 11.5px; color: var(--txt-soft); margin: 8px 0 0; }
.qb .rules-note {
  margin-top: 14px;
  font-size: 12.5px;
  background: rgba(255, 200, 60, 0.09);
  border: 1px solid rgba(255, 200, 60, 0.3);
  border-radius: 12px;
  padding: 10px 12px;
  color: #ffd97a;
}
.qb .rules-note ul { margin: 6px 0 0; padding-left: 18px; }
.qb .rules-note li { margin-bottom: 2px; }
.qb .sheet-area {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 60px;   
}
body.locked .qb #pagesContainer input,
body.locked .qb #pagesContainer [contenteditable],
body.locked .qb #pagesContainer button { pointer-events: none; }
body.locked .qb #pagesContainer .no-print { opacity: 0.35; }
.qb .sheet.fixed-page { padding: 0; overflow: hidden; min-height: 0; }
.qb .sheet.fixed-page img { display: block; width: 100%; height: auto; }
@media screen {
.qb .sheet.fixed-page { display: none; }


}
.qb #pagesContainer {
  display: flex;
  flex-direction: column;
  gap: 34px;
  align-items: center;
  width: 210mm;
  margin: 0 auto;
  
  zoom: var(--preview-scale, 1);
}
html.measuring .qb #pagesContainer { zoom: 1 !important; }
html.measuring .qb .sheet-area { display: block !important; }
@media print {
.qb #pagesContainer { zoom: 1 !important; }
 
}
.qb .sheet {
  background: #fff;
  color: var(--ink);
  width: 210mm;
  min-height: 297mm;
  padding: 15mm 14mm;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  animation: fadeUp .6s ease .15s both;
}
.qb [contenteditable="true"]:hover { outline: 1px dashed #c7d2fe; outline-offset: 2px; }
.qb [contenteditable="true"]:focus { outline: 2px solid rgba(58, 99, 255, 0.35); outline-offset: 2px; }
.qb .sheet-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--brand);
}
.qb .company-block { display: flex; gap: 14px; }
.qb .wordmark {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1;
}
.qb .wordmark span {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.qb .company-info p { margin: 1px 0; font-size: 12.5px; color: var(--ink-soft); }
.qb .company-info .company-tag { color: var(--brand); font-weight: 600; }
.qb .doc-badge { text-align: right; }
.qb .doc-title {
  display: inline-block;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .12em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.qb .doc-meta { margin-top: 8px; margin-left: auto; font-size: 12.5px; border-collapse: collapse; }
.qb .doc-meta td { padding: 2px 0 2px 14px; text-align: right; color: var(--ink); }
.qb .doc-meta td:first-child { color: var(--ink-soft); font-weight: 600; }
.qb .billto-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
}
.qb .section-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand);
  margin-bottom: 4px;
}
.qb .annex-label { margin-top: 6px; margin-bottom: 8px; }
.qb .billto h3 { margin: 0 0 3px; font-size: 15px; color: var(--ink); }
.qb .billto p,
.qb .prepared-by p { margin: 1px 0; font-size: 12.5px; color: var(--ink-soft); }
.qb .prepared-by { text-align: right; }
.qb .items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.qb .items-table thead th {
  background: var(--brand-grad);
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 9px 10px;
  font-size: 12px;
  letter-spacing: .03em;
}
.qb .items-table thead th:first-child { border-radius: 8px 0 0 0; }
.qb .items-table thead th:last-child { border-radius: 0 8px 0 0; }
.qb .items-table tbody td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  vertical-align: top;
  color: var(--ink);
}
.qb .items-table tbody td.col-sno { padding-top: 10px; }
.qb .items-table tbody tr { transition: background .2s; }
.qb .items-table tbody tr:nth-child(even) { background: #f8fafc; }
.qb .items-table tbody tr:hover { background: #eef2ff; }
.qb .items-table tbody tr[data-key] { background: #f4f7ff; }
.qb .col-sno { width: 34px; }
.qb .col-amount { width: 140px; text-align: right; }
.qb .col-del { width: 30px; }
.qb .items-table th.col-amount { text-align: right; }
.qb .i-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink);
}
.qb .i-sub {
  font-size: 11px;
  color: var(--ink-soft);
  padding-top: 3px;
  line-height: 1.55;
}
.qb .i-sub:empty { display: none; }
.qb .i-sub:hover { outline: 1px dashed #c7d2fe; outline-offset: 1px; border-radius: 4px; }
.qb .i-sub:focus { outline: 2px solid rgba(58, 99, 255, 0.35); border-radius: 4px; }
.qb .items-table input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 6px;
  background: transparent;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}
.qb .items-table input:hover { border-color: var(--line); background: #fff; }
.qb .items-table input:focus { outline: none; border-color: var(--brand); background: #fff; }
.qb .items-table .i-amt { text-align: right; font-weight: 600; }
.qb .items-table .i-desc { font-weight: 600; }
.qb .row-del {
  border: none; background: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  border-radius: 8px;
  transition: color .15s, background .15s, transform .15s;
}
.qb .row-del:hover { color: var(--danger); background: #fee2e2; transform: scale(1.15); }
.qb .totals-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-top: 18px;
}
.qb .amount-words { flex: 1; }
.qb .amount-words p { margin: 2px 0 0; font-size: 12.5px; font-style: italic; color: var(--ink-soft); }
.qb .totals-table {
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 260px;
}
.qb .totals-table td { padding: 6px 10px; color: var(--ink); }
.qb .totals-table td:last-child { text-align: right; font-weight: 600; min-width: 110px; }
.qb .totals-table tr { border-bottom: 1px solid var(--line); }
.qb .totals-table tr.grand {
  border: none;
  background: var(--brand-grad);
  color: #fff;
}
.qb .totals-table tr.grand td { font-size: 15px; font-weight: 800; padding: 11px 10px; color: #fff; border-radius: 0; }
.qb .totals-table tr.grand td:first-child { border-radius: 10px 0 0 10px; }
.qb .totals-table tr.grand td:last-child { border-radius: 0 10px 10px 0; }
.qb .docs-block { margin-top: 22px; }
.qb .docs-block.empty { display: none; }
.qb .docs-list {
  margin: 4px 0 0;
  padding-left: 22px;
  font-size: 12.5px;
  color: var(--ink);
  columns: 2;
  column-gap: 28px;
}
.qb .docs-list li {
  margin-bottom: 4px;
  break-inside: avoid;
  padding-right: 4px;
}
.qb .docs-list .doc-del {
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 11px;
  padding: 0 4px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.qb .docs-list .doc-del:hover { color: var(--danger); background: #fee2e2; }
.qb .doc-add { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.qb .doc-add input {
  flex: 1;
  font: inherit;
  font-size: 12.5px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink);
}
.qb .doc-add input:focus { outline: none; border-color: var(--brand); }
.qb .doc-add .btn-add { width: auto; margin: 0; padding: 7px 14px; }
.qb .sheet-footer { margin-top: auto; padding-top: 26px; }
.qb .foot-block { margin-bottom: 14px; }
.qb .foot-block p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.qb .pre-line { white-space: pre-line; }
.qb .signature {
  margin-top: 34px;
  margin-left: auto;
  width: 220px;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.qb .sign-line { border-top: 1px solid var(--ink); margin-bottom: 6px; }
.qb .drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  animation: fadeIn .2s ease both;
}
.qb .drawer-overlay[hidden] { display: none !important; }
.qb .drawer {
  width: 370px;
  max-width: 90vw;
  height: 100%;
  background: rgba(20, 20, 30, 0.75);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-left: 1px solid var(--glass-border);
  box-shadow: -18px 0 50px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  animation: slideIn .3s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes slideIn {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.qb .drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--glass-border);
}
.qb .drawer-head h3 { margin: 0; font-size: 15px; color: var(--txt); }
.qb .saved-list { list-style: none; margin: 0; padding: 12px; overflow-y: auto; }
.qb .saved-list li {
  position: relative;
  padding: 13px 34px 13px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--txt);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color .2s, background .2s, transform .15s;
}
.qb .saved-list li:hover {
  border-color: var(--brand);
  background: rgba(58, 99, 255, 0.14);
  transform: translateX(-3px);
}
.qb .saved-list li small { color: var(--txt-soft); }
.qb .saved-empty { color: var(--txt-soft); cursor: default !important; text-align: center; }
.qb .saved-empty:hover {
  border-color: var(--glass-border) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transform: none !important;
}
.qb .status-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: 1px;
}
.qb .status-draft { background: rgba(161, 161, 170, 0.2); color: #c9c9d1; }
.qb .status-sent { background: rgba(58, 99, 255, 0.22);  color: #9db4ff; }
.qb .status-accepted { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; }
.qb .status-expired { background: rgba(255, 93, 93, 0.18);  color: #ff9d9d; }
.qb .saved-del {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: none;
  color: var(--txt-soft);
  cursor: pointer;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.qb .saved-del:hover { color: var(--danger); background: rgba(255, 93, 93, 0.15); }
.qb .saved-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.qb .row-status-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--txt-soft);
}
.qb .row-status {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--txt);
  cursor: pointer;
}
.qb .row-trail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: none;
  color: var(--txt-soft);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.qb .row-trail:hover { color: var(--brand); border-color: var(--brand); background: rgba(58, 99, 255, 0.12); }
.qb .row-trail .ico { width: 13px; height: 13px; }
.qb .trail-card { max-width: 420px; }
.qb .trail-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 60vh; overflow-y: auto; }
.qb .trail-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 2px;
  border-bottom: 1px solid #eef1f5;
  font-size: 13px;
}
.qb .trail-list li:last-child { border-bottom: none; }
.qb .trail-act { font-weight: 600; color: #111; }
.qb .trail-meta { color: #6b7280; font-size: 11.5px; white-space: nowrap; }
.qb .trail-empty { color: #6b7280; justify-content: center; }
.qb .mob-switch { display: none; }
.qb .mob-switch button {
  border: none;
  background: none;
  color: var(--txt-soft);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.qb .mob-switch button.on { background: var(--brand); color: #fff; }
@media screen and (max-width: 1000px) {
.qb .workspace { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
.qb .side-panel {
    position: static;
    max-height: none;      
    overflow: visible;
    padding-right: 0;
  }
body:not(.mob-preview) .qb .sheet-area { display: none; }
body.mob-preview .qb .side-panel { display: none; }
.qb .workspace { padding-bottom: 88px; }
.qb .mob-switch {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 60;
    gap: 4px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(10, 14, 26, 0.92);
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
  }


}
@media screen and (max-width: 720px) {
.qb .appbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
.qb .app-subtitle { display: none; }
.qb .appbar-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
.qb .appbar-actions .btn { padding: 8px 11px; font-size: 12.5px; }
.qb .divider-v { display: none; }
.qb .workspace { padding: 14px; gap: 14px; }
.qb .edits-card {
    top: auto; left: 12px; right: 12px; bottom: 0;
    width: auto; max-width: none;
    max-height: 84vh;
    border-radius: 20px 20px 0 0;
  }
.qb #welcomeSplash .ws-inner { padding: 36px 34px; }
.qb #welcomeSplash .ws-title { font-size: 40px; }


}
@media screen and (max-width: 460px) {
.qb .app-title { font-size: 15px; }
.qb .brand-mark { width: 30px; height: 30px; font-size: 12px; }
.qb .brand-logo { height: 32px; }
.qb .appbar-actions .btn { font-size: 12px; padding: 8px 9px; }
.qb .field-row { flex-direction: column; gap: 0; }
.qb .drawer { width: 100%; max-width: 100%; }
.qb #welcomeSplash .ws-inner { padding: 30px 22px; border-radius: 22px; }
.qb #welcomeSplash .ws-title { font-size: 32px; letter-spacing: .5px; }
.qb #welcomeSplash .ws-sub { font-size: 12px; letter-spacing: 3px; }
.qb #welcomeSplash .ws-bar { width: 150px; }


}
@page { size: A4; margin: 0; }
@media print {
.qb { background: #fff; }
.qb::before,
.qb::after { display: none; }
.qb .appbar,
.qb .side-panel,
.qb .no-print,
.qb .drawer-overlay,
.qb .edits-card { display: none !important; }
.qb .workspace { display: block; padding: 0; max-width: none; }
.qb .sheet-area { display: block; }
.qb #pagesContainer { display: block; }
html,
.qb { margin: 0; padding: 0; }
.qb .sheet {
    width: 210mm;
    height: 296.6mm;
    min-height: 0;
    max-width: none;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 15mm 14mm;         
    animation: none;
    display: flex;              
    flex-direction: column;
    overflow: hidden;
    page-break-after: always;
    break-after: page;
  }
.qb #pagesContainer .sheet:last-child { page-break-after: auto; break-after: auto; }
.qb .items-table thead th,
.qb .totals-table tr.grand,
.qb .sheet-header {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
.qb .items-table tbody tr[data-key] { background: #f4f7ff !important; }
.qb [contenteditable="true"]:hover { outline: none; }


}
:root {
  --gold: #e9b308;
  --gold-dark: #b8860b;
  --gold-deep: #a16207;
  --gold-soft: #fdf3d7;
  --cream: #fdf6e0;
}
.qb .sheet.proposal { padding: 0; }
.qb .sheet.proposal > * { margin-left: 12mm; margin-right: 12mm; }
.qb .sheet.proposal > .prop-topbar,
.qb .sheet.proposal > .prop-footer { margin-left: 0; margin-right: 0; }
.qb .sheet.proposal > .prop-footer { margin-top: auto; }
.qb .sheet.proposal > .page-letterhead + * { margin-top: 8mm; }
.qb .prop-topbar {
  margin: 0;
  padding: 8mm 12mm 5mm;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1.5px solid #111;   
}
.qb .prop-doctype {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #8a8a8a;
}
.qb .logo-img { height: 48px; width: auto; display: block; flex: none; }
.qb .prop-topbar .logo-img { height: 102px; margin-top: -27px; margin-bottom: -27px; margin-left: -0.25cm; }
.qb .logo-sm { height: 54px; margin-top: -14px; margin-bottom: -14px; }
.qb .proposal .wordmark { color: #111; margin-bottom: 0; }
.qb .proposal .wordmark span {
  background: linear-gradient(135deg, #e9b308, #c98f06);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;      
}
.qb .wordmark-sm { font-size: 15px; }
.qb .prop-kicker {
  margin-top: 11mm;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.qb .prop-kicker .kicker-line { flex: 1; height: 1px; background: #111; opacity: .22; }
.qb .prop-titlerow {
  margin-top: 4mm;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.qb .prop-title {
  margin: 0;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.08;
  color: #111;
}
.qb .prop-meta { text-align: right; font-size: 12px; flex: none; }
.qb .prop-meta p { margin: 2px 0; }
.qb .prop-meta span { color: #9aa0a6; margin-right: 8px; }
.qb .prop-meta span.meta-label-black { color: #111; }
.qb .prop-meta b { color: #111; font-weight: 600; }
.qb .prop-letter { margin-top: 9mm; font-size: 13px; color: #1f2937; line-height: 1.65; }
.qb .prop-letter p { margin: 0 0 12px; text-align: justify; }
.qb .prop-callout {
  margin-top: 6mm;
  background: var(--cream);
  border-left: 4px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: #1f2937;
}
.qb .prop-callout b { font-weight: 600; }
.qb .prop-refer { margin-top: 6mm; font-size: 12.5px; color: #6b7280; }
.qb .prop-refer b { color: #111; }
.qb .prop-annex-head {
  margin-top: 7mm;
  margin-bottom: 4mm;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #111;
}
.qb .prop-annex-head i { width: 26px; height: 4px; background: var(--gold); border-radius: 2px; flex: none; }
.qb .index-block { display: none !important; }
.qb .prop-callout { display: none !important; }
.qb .index-block.empty { display: none; }
.qb .index-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qb .index-table td { padding: 8px 10px; border-bottom: 1px solid #f0f1f3; color: #1f2937; }
.qb .index-table td.ix-no { width: 34px; color: #b8860b; font-weight: 700; }
.qb .index-table td.ix-amt { text-align: right; font-weight: 700; color: #000; white-space: nowrap; }
.qb .index-note { margin: 6px 0 0; font-size: 10.5px; color: #9ca3af; }
.qb .head-hidden { display: none !important; }
.qb .offering-head { margin-top: 3mm; margin-bottom: 4mm; }
.qb .offering-head .prop-annex-head { margin: 0 0 2.5mm; }
.qb .offering-head .prop-title { margin: 0; }
.qb .svc-card {
  border: 1px solid #ece3d3;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 4mm;
  box-shadow: 0 1px 3px rgba(31, 22, 8, 0.05);
}
.qb .card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, #fdf9f0, #f6efdd);
  color: #1a1206;
  border: 0;
  border-left: 4px solid var(--gold, #e9b308);
  border-radius: 0;
  padding: 9px 14px;
}
.qb .card-head .i-amt { color: #1a1206; -webkit-text-fill-color: #1a1206; -webkit-text-stroke: 0; }
.qb .card-title {
  flex: 1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #1a1206;
}
.qb .card-head .i-desc {
  flex: 1;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: transparent;
  border: 1px dashed rgba(26, 18, 6, 0.25);
  border-radius: 8px;
  color: #1a1206;
  padding: 6px 10px;
}
.qb .card-head .i-desc::placeholder { color: rgba(26, 18, 6, 0.4); }
.qb .card-head .i-desc:focus { outline: none; border-color: var(--gold); }
.qb .card-pill {
  flex: none;
  background: transparent;
  color: #1a1206;
  font-weight: 800;
  font-size: 15px;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}
.qb .card-pill .i-amt {
  
  field-sizing: content;
  width: auto;
  min-width: 2ch;
  max-width: 92px;
  border: none;
  background: transparent;
  font: inherit;
  font-weight: 800;
  text-align: right;
  color: #1a1206;
  -webkit-text-fill-color: #1a1206;
  -webkit-text-stroke: 0;
  padding: 0 1px;
}
.qb .card-pill .i-amt:focus { outline: none; }
.qb .excl-block.empty { display: none; }
.qb .card-pill-outline {
  background: transparent;
  border: 0;
  color: var(--gold-deep, #a16207);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0;
  white-space: nowrap;
}
.qb .card-head .row-del { color: #fff; }
.qb .card-head .row-del:hover { color: #fff; background: rgba(255, 255, 255, 0.14); transform: none; }
.qb .card-head .custom-row-del {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 4px;
  border: 0;
  background: transparent;
  color: #fff;
  opacity: 1;
}
.qb .card-head .custom-row-del .ico { width: 14px; height: 14px; stroke-width: 3; }
.qb .card-head .custom-row-del:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.qb .card-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: scope;
}
.qb .card-list li {
  counter-increment: scope;
  position: relative;
  padding: 5px 14px 5px 40px;   
  font-size: 12px;
  line-height: 1.35;
  color: #374151;
}
.qb .card-list li:nth-child(even) { background: #faf5ea; }
.qb .card-list li::before {
  content: counter(scope);
  position: absolute;
  left: 14px;
  top: 5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-deep);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qb .card-list li b { color: #000; font-weight: 700; }
.qb .card-list li.pp-sub { counter-increment: none; padding-left: 64px; }
.qb .card-list li.pp-sub::before { content: none; }
.qb .svc-group.osvc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qb .osvc-mode {
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  color: #9db4c8;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
  transition-property: color, background-color, border-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.qb .osvc-mode.on {
  color: #10131c;
  background: linear-gradient(135deg, #f5c518, #e9b308);
  border-color: transparent;
}
.qb .svc-row .other-mode { flex: none; }
.qb .osvc-mode[hidden] { display: none; }
.qb .other-price { font-variant-numeric: tabular-nums; }
.qb .card-list:focus { outline: 2px solid rgba(233, 179, 8, 0.4); border-radius: 6px; }
.qb .card-list:hover { outline: 1px dashed #f0dfa0; border-radius: 6px; }
.qb .proposal > .btn-add { margin: 0 12mm 2mm; width: auto; display: block; }
.qb .fee-box {
  margin-top: 5mm;
  margin-bottom: 18px; 
  background: linear-gradient(180deg, #fdf9f0, #f6efdd);
  border: 1px solid #ece3d3;
  border-left: 4px solid var(--gold, #e9b308);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(31, 22, 8, 0.05);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.qb .offering-fee {
  margin-top: 14px;
  margin-bottom: 18px; 
  background: linear-gradient(180deg, #fdf9f0, #f6efdd);
  border: 1px solid #ece3d3;
  border-left: 4px solid var(--gold, #e9b308);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(31, 22, 8, 0.05);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.qb .offering-fee .of-label { font-weight: 800; font-size: 13.5px; letter-spacing: .4px; text-transform: uppercase; color: #1a1206; }
.qb .offering-fee .of-note { font-size: 9.5px; color: #8a6d1a; margin-top: 2px; }
.qb .offering-fee .of-amt { font-size: 21px; font-weight: 800; color: #000; white-space: nowrap; }
.qb .offering-fee .of-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.qb .offering-fee .of-per {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: #8a6d1a;
  margin-top: 2px;
}
.qb .offering-fee .of-line { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; }
.qb .offering-fee .of-line span { font-size: 11px; font-weight: 700; color: #6b5310; }
.qb .offering-fee .of-line b { font-size: 17px; font-weight: 800; color: #000; }
.qb .pill-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--gold-deep, #a16207);
  padding: 3px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  opacity: .55;
  transition: opacity .15s, background .15s;
}
.qb .pill-toggle:hover { opacity: 1; background: rgba(0, 0, 0, .06); }
.qb .pill-toggle .ico { width: 15px; height: 15px; }
.qb .yr-toggle {
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: #6b5310;
  background: var(--gold-soft, #fdf3d7);
  border: 1px solid #e6c76b;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.qb .yr-toggle:hover { background: #fbe9b0; }
.qb .offering-add { margin-top: 10px; }
.qb .drag-handle {
  background: transparent;
  border: none;
  cursor: grab;
  color: #c9c9c9;
  padding: 2px;
  display: inline-flex;
  align-items: center;
}
.qb .drag-handle:hover { color: var(--gold-dark, #b8860b); }
.qb .drag-handle:active { cursor: grabbing; }
.qb .drag-handle .ico { width: 15px; height: 15px; }
.qb .svc-card.dragging { opacity: .45; }
.qb .svc-card.drop-above { box-shadow: 0 -3px 0 0 var(--gold, #e9b308); }
.qb .svc-card.drop-below { box-shadow: 0 3px 0 0 var(--gold, #e9b308); }
.qb .restore-bar {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1.5px dashed #d9b62c;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.qb .restore-bar .rb-label { font-size: 12px; font-weight: 700; color: #8a6d1a; }
.qb .restore-bar .rb-btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #6b5310;
  background: var(--gold-soft, #fdf3d7);
  border: 1px solid #e6c76b;
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
}
.qb .restore-bar .rb-btn:hover { background: #fbe9b0; }
.qb .fee-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #111;
}
.qb .fee-note { margin-top: 3px; font-size: 9.5px; color: var(--gold-deep); }
.qb .fee-words { margin-top: 6px; font-size: 11.5px; font-style: italic; color: #6b7280; }
.qb .fee-amount { font-size: 27px; font-weight: 800; color: #000; white-space: nowrap; }
.qb .fee-box.grand {
  background: #fff;
  border: 1px solid #ece3d3;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(31, 22, 8, 0.05);
}
.qb .fee-box.grand .fee-label {
  color: #111;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  position: relative;
  padding-left: 36px;
}
.qb .fee-box.grand .fee-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 3.5px;
  border-radius: 2px;
  background: var(--gold, #e9b308);
}
.qb .fee-box.grand .fee-note { color: #8a7a45; }
.qb .fee-box.grand .fee-words { display: none; }
.qb .fee-box.grand .fee-amount { color: #000; }
.qb .fee-box.grand .fee-line b { color: #000; }
.qb .fee-box.grand .fee-line span { color: #374151; }
.qb .fee-box.grand { display: block; }
.qb .fee-box.grand .fee-left { display: none; }
.qb .fee-box.grand .fee-right { padding: 0; }
.qb .fee-box.grand .fee-amount.fee-combined { border: 0; }
.qb .fee-box.grand .fee-thead {
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg, #fdf9f0, #f6efdd);
  border-left: 4px solid var(--gold, #e9b308);
  color: #1a1206;
}
.qb .fee-box.grand .fee-thead span {
  flex: 1;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.qb .fee-box.grand .fee-thead b {
  width: 150px;
  padding: 9px 14px;
  text-align: right;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.qb .fee-box.grand .fee-note { display: none; }
.qb .fee-foot-note { margin: 0; padding: 6px 12px; background: transparent; font-size: 9.5px; font-weight: 400; color: #6b7280; letter-spacing: .2px; }
.qb .fee-box.grand .fee-right { text-align: left; }
.qb .fee-box.grand .fee-amount.fee-combined { text-align: left; font-size: 15px; }
.qb .fee-box.grand .fee-combined .fee-line {
  justify-content: space-between;
  align-items: stretch;
  padding: 0;
}
.qb .fee-box.grand .fee-combined .fee-line > span {
  flex: 1;
  padding: 7px 12px;
}
.qb .fee-box.grand .fee-combined .fee-line > b {
  width: 150px;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.qb .fee-box.grand .fee-combined .fee-line:nth-of-type(even) { background: #faf5ea; }
.qb .fee-box.grand .fee-combined .fee-line.fee-opt {
  padding-left: 26px;
}
.qb .fee-box.grand .fee-or {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 26px;
}
.qb .fee-box.grand .fee-or::before,
.qb .fee-box.grand .fee-or::after {
  content: "";
  flex: 1;
  border-top: 1px dashed #d1d5db;
}
.qb .fee-box.grand .fee-or span {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #6b7280;
}
.qb .fee-box.grand .fee-combined .fee-line span { font-size: 12.5px; }
.qb .fee-box.grand .fee-combined .fee-line b { font-size: 15px; }
.qb .fee-box.grand .fee-combined .fee-line-gov {
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 8px;
}
.qb .fee-box.grand .fee-choose-head {
  font-size: 12px;
  font-weight: 800;
  color: #000;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 12px 2px;
}
.qb .fee-box.grand .fee-combined .fee-line:not(.fee-opt) span { color: #000; }
.qb .fee-box.grand .fee-combined .fee-line.fee-opt span { font-weight: 700; padding-left: 16px; }
.qb .fee-box.grand .fee-combined .fee-line.fee-opt em {
  font-style: normal;
  font-weight: 800;
  color: #000;
  display: inline-block;
  width: 24px;
  text-align: right;
  margin-right: 6px;
}
.qb .fee-box.grand .fee-combined .fee-line.fee-opt + .fee-line:not(.fee-opt) {
  margin-top: 2px;
}
.qb .fee-box.gov-box {
  display: block;
  
  margin-top: -8px;
  background: #fff;
  border: 1px solid #ece3d3;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(31, 22, 8, 0.05);
  padding: 0;
}
.qb .fee-box.gov-box .fee-left {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  background: linear-gradient(180deg, #fdf9f0, #f6efdd);
  border-left: 4px solid var(--gold, #e9b308);
  border-bottom: 0;
  padding: 9px 14px;
  margin-bottom: 0;
}
.qb .fee-box.gov-box .fee-label { color: #1a1206; font-size: 12px; letter-spacing: .08em; }
.qb .fee-box.gov-box .fee-note { margin-top: 0; }
.qb .fee-box.gov-box .fee-right { text-align: left; }
.qb .fee-box.gov-box .fee-amount { font-size: 19px; }
.qb .fee-box.gov-box .fee-amount.fee-combined { text-align: left; font-size: 15px; white-space: normal; }
.qb .fee-box.gov-box .fee-combined .fee-line { justify-content: space-between; align-items: stretch; padding: 0; }
.qb .fee-box.gov-box .fee-combined .fee-line > span { flex: 1; padding: 7px 12px; }
.qb .fee-box.gov-box .fee-combined .fee-line > b {
  width: 150px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.qb .fee-box.gov-box .fee-combined .fee-line:nth-of-type(even) { background: #faf5ea; }
.qb .fee-box.gov-box .fee-combined .fee-line span { font-size: 12.5px; color: #374151; }
.qb .fee-box.gov-box .fee-combined .fee-line b { font-size: 15px; color: #000; }
.qb .pending-picker {
  margin: 4px 0 6px;
  border: 1px solid rgba(233, 179, 8, .4);
  border-radius: 14px; 
  padding: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: #cfd8ea;
}
.qb .pending-picker .pp-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e9b308;
  margin: 0 2px 8px;
  text-wrap: balance;
}
.qb .pp-tabs {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 8px;
}
.qb .pp-tab {
  flex: 1;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #9db4c8;
  background: none;
  border: none;
  border-radius: 7px;
  padding: 6px;
  cursor: pointer;
  transition-property: color, background-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.qb .pp-tab.on {
  color: #10131c;
  background: linear-gradient(135deg, #f5c518, #e9b308);
}
.qb .pp-form {
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  margin-bottom: 6px;
  transition-property: border-color, background-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.qb .pp-form:last-child { margin-bottom: 0; }
.qb .pp-form.has-sel { border-color: rgba(233, 179, 8, .45); }
.qb .pp-form.open { background: rgba(255, 255, 255, 0.06); }
.qb .pp-fhead {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 2px;
  min-height: 40px;
}
.qb .pp-ftoggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: #e6edf7;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 8px 4px 8px 6px;
  cursor: pointer;
  text-align: left;
}
.qb .pp-chev {
  width: 13px;
  height: 13px;
  flex: none;
  color: #9db4c8;
  transition-property: transform, color;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}
.qb .pp-form.open .pp-chev { transform: rotate(90deg); color: #e9b308; }
.qb .pp-fname {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qb .pp-fcount { flex: none; }
.qb .pp-fcount {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #10131c;
  background: #e9b308;
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}
.qb .pp-fprice {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: #9db4c8;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 5px 8px;
  cursor: text;
  transition-property: border-color, color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.qb .pp-fprice:focus-within { border-color: rgba(233, 179, 8, .7); color: #e9b308; }
.qb .pp-fee {
  width: 58px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #f5c518;
  background: none;
  border: none;
  outline: none;
  text-align: right;
}
.qb .pp-fee::placeholder { color: #5c6f85; font-weight: 600; }
.qb .pp-fbody { padding: 0 8px 8px; }
.qb .pp-yscroll { max-height: 190px; overflow-y: auto; overflow-x: hidden; padding-right: 2px; }
.qb .pp-yr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.qb .pp-yr:last-child { border-bottom: none; }
.qb .pp-ychip {
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  width: 64px;
  flex: none;
  text-align: center;
  color: #cfd8ea;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  padding: 5px 0;
  cursor: pointer;
  transition-property: color, background-color, border-color, transform;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}
.qb .pp-ychip:active { transform: scale(0.96); }
.qb .pp-ychip.on {
  color: #10131c;
  background: linear-gradient(135deg, #f5c518, #e9b308);
  border-color: transparent;
  font-weight: 700;
}
.qb .pp-qchips { display: flex; gap: 4px; }
.qb .pp-qchip {
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  width: 28px;
  color: #9db4c8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  padding: 5px 0;
  cursor: pointer;
  transition-property: color, background-color, border-color, transform;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}
.qb .pp-qchip:active { transform: scale(0.96); }
.qb .pp-qchip.on {
  color: #10131c;
  background: #e9b308;
  border-color: transparent;
}
.qb .pkg-compare { margin: 6mm 0 18px; }
.qb .pkg-compare .pc-heading { margin: 0 0 5mm; }
.qb .pkg-compare .pc-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #111;
  border-left: 4px solid var(--gold, #e9b308);
  padding-left: 10px;
  margin-bottom: 8px;
}
.qb .pkg-compare table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  font-size: 11.5px;
}
.qb .pkg-compare th,
.qb .pkg-compare td {
  border: 0;
  border-right: 1px solid #e2ddcc;
  border-bottom: 1px solid #e2ddcc;
  padding: 5px 8px;
  text-align: center;
}
.qb .pkg-compare th:last-child,
.qb .pkg-compare td:last-child { border-right: 0; }
.qb .pkg-compare tfoot .pc-fee td { border-bottom: 0; }
.qb .pkg-compare thead th {
  background: #141414;
  color: var(--gold, #e9b308);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.qb .pkg-compare .pc-svc { text-align: left; }
.qb .pkg-compare tbody .pc-svc { font-weight: 600; color: #222; }
.qb .pkg-compare tbody tr:nth-child(even) td { background: #f5f7fa; }
.qb .pkg-compare .pc-yes { color: #1a7f37; font-weight: 800; }
.qb .pkg-compare .pc-no { color: #b91c1c; font-weight: 800; }
.qb .pkg-compare tfoot .pc-fee td {
  background: #141414;
  color: var(--gold, #e9b308);
  font-weight: 800;
  font-size: 12px;
  border-top: 2px solid var(--gold, #e9b308);
}
.qb .pkg-compare tfoot .pc-fee .pc-svc { color: #fff; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.qb .drawer { width: 100vw; max-width: 100vw; display: flex; flex-direction: column; }
.qb .drawer-tabs {
  display: flex;
  gap: 4px;
  width: min(1200px, 100% - 28px);
  margin: 0 auto 12px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}
.qb .dtab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #9db4c8;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.qb .dtab:hover { color: #dbe4ff; }
.qb .dtab.active {
  color: #10131c;
  background: linear-gradient(135deg, #f5c518, var(--gold, #e9b308));
  box-shadow: 0 4px 14px rgba(233, 179, 8, .35);
}
.qb .drawer-pane { flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 16px; width: min(1200px, 100%); margin: 0 auto; }
.qb .drawer-pane[hidden] { display: none; }
.qb .an-filters {
  display: grid;
  grid-template-columns: 1fr 150px 150px 150px 190px;
  gap: 8px;
  margin-bottom: 12px;
}
.qb .an-filters input,
.qb .an-filters select {
  font: inherit;
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.06);
  color: var(--txt);
  color-scheme: dark;
}
.qb .an-filters input:focus,
.qb .an-filters select:focus { outline: none; border-color: var(--brand); }
.qb .an-filters select option { background: #fff; color: #111; }
.qb .an-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
.qb .an-stat {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px 14px 10px;
  text-align: left;
}
.qb .an-stat i {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
}
.qb .an-stat b { display: block; font-size: 19px; color: #fff; white-space: nowrap; }
.qb .an-stat span { font-size: 10px; color: #9db4c8; text-transform: uppercase; letter-spacing: .09em; }
.qb .an-stat.ac-gold { border-top: 2px solid #e9b308; }
.qb .an-stat.ac-gold i { color: #e9b308; background: rgba(233, 179, 8, .14); }
.qb .an-stat.ac-blue { border-top: 2px solid #5b8def; }
.qb .an-stat.ac-blue i { color: #5b8def; background: rgba(91, 141, 239, .14); }
.qb .an-stat.ac-green { border-top: 2px solid #22c55e; }
.qb .an-stat.ac-green i { color: #22c55e; background: rgba(34, 197, 94, .14); }
.qb .an-stat.ac-purple { border-top: 2px solid #a78bfa; }
.qb .an-stat.ac-purple i { color: #a78bfa; background: rgba(167, 139, 250, .14); }
.qb .an-stat.ac-teal { border-top: 2px solid #14b8a6; }
.qb .an-stat.ac-teal i { color: #14b8a6; background: rgba(20, 184, 166, .14); }
.qb .an-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 46px 20px;
  text-align: center;
  border: 1px dashed var(--glass-border);
  border-radius: 14px;
  color: #9db4c8;
}
.qb .an-empty .ico { width: 34px; height: 34px; color: var(--gold, #e9b308); }
.qb .an-empty p { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: #dbe4ff; }
.qb .an-empty span { font-size: 12px; }
.qb .an-empty[hidden] { display: none; }
.qb .an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qb .an-chart {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px 14px;
  height: 230px;
  display: flex;
  flex-direction: column;
}
.qb .an-chart.wide { grid-column: 1 / -1; }
.qb .an-chart h4 {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #dbe4ff;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.qb .an-chart h4::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold, #e9b308);
  box-shadow: 0 0 8px rgba(233, 179, 8, .8);
}
.qb .an-grid[hidden] { display: none; }
.qb .an-chart canvas { flex: 1; min-height: 0; }
@media (max-width: 700px) {
.qb .an-filters { grid-template-columns: 1fr 1fr; }
.qb .an-stats { grid-template-columns: 1fr 1fr; }
.qb .an-grid { grid-template-columns: 1fr; }


}
body.modal-open .qb { overflow: hidden; }
.qb .user-row { display: flex; align-items: center; gap: 10px; }
.qb .user-id { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.qb .user-id span { font-size: 12px; color: #6b7280; }
.qb .user-role { width: auto !important; flex: none; padding: 5px 8px !important; font-size: 12.5px !important; }
.qb .user-role-tag { font-size: 12px; color: #6b7280; text-transform: capitalize; }
@media print {
 
}
.qb .fee-amount.fee-combined { font-size: 19px; white-space: normal; text-align: right; }
.qb .fee-combined .fee-line { display: flex; justify-content: flex-end; align-items: baseline; gap: 12px; }
.qb .fee-combined .fee-line span { font-size: 12px; font-weight: 700; color: #6b5310; }
.qb .fee-combined .fee-line b { font-size: 19px; font-weight: 800; color: #000; }
.qb .fee-combined .fee-line-total { border-top: 1.5px solid rgba(233, 179, 8, .6); margin-top: 5px; padding-top: 5px; }
.qb .fee-amount .fee-line-gov,
.qb .fee-combined .fee-line-gov {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 10px;
  white-space: normal;
  border-top: 1.5px dashed rgba(233, 179, 8, .5);
  margin-top: 5px;
  padding-top: 5px;
}
.qb .fee-amount .fee-line-gov span,
.qb .fee-combined .fee-line-gov span { font-size: 11px; font-weight: 700; color: #6b5310; }
.qb .fee-amount .fee-line-gov b,
.qb .fee-combined .fee-line-gov b { font-size: 17px; font-weight: 800; color: #000; }
.qb .fee-box.grand .fee-line-gov span { color: #8a6a06; }
.qb .fee-box.grand .fee-line-gov b { color: #000; }
.qb .fee-right { text-align: right; }
.qb .fee-yearly { font-size: 12px; font-weight: 700; color: var(--gold-deep, #a16207); margin-top: 4px; }
.qb .proposal .docs-block { margin-top: 0; }
.qb .proposal .docs-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  columns: 1;   
}
.qb .proposal .docs-list li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  font-size: 12.5px;
  color: #1f2937;
  line-height: 1.55;
}
.qb .proposal .docs-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--gold);
  font-size: 10px;
}
.qb .terms-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: term;
}
.qb .terms-list li {
  counter-increment: term;
  position: relative;
  padding: 4px 0 4px 28px;
  font-size: 10.5px;
  line-height: 1.5;
  color: #1f2937;
}
.qb .terms-list li::before {
  content: counter(term);
  position: absolute;
  left: 0;
  top: 5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #1f2d3d;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qb .terms-list li.excl-head { font-weight: 700; color: #111; }
.qb .terms-list li.excl-sub {
  counter-increment: none;
  padding: 3px 0 3px 28px;
}
.qb .terms-list li.excl-sub::before {
  content: "–";
  background: none;
  color: #111;
  border-radius: 0;
  width: auto;
  height: auto;
  top: 3px;
  left: 12px;
  font-weight: 400;
}
.qb .prop-notes { margin-top: 4mm; font-size: 12.5px; color: #6b7280; }
.qb .prop-notes:empty { display: none; }
.qb .prop-signoff {
  margin: auto 12mm 0;
  padding-top: 6mm;
  border-top: 1.5px solid #111;   
}
.qb .prop-signoff {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}
.qb .prop-signoff.no-rule {
  border-top: none;
  padding-top: 0;
}
.qb .prop-signoff { margin-top: 10mm; }
.qb .signoff-left p { margin: 0 0 6px; font-size: 12.5px; color: #6b7280; }
.qb .signoff-name { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: #111; }
.qb .signoff-right { text-align: right; font-size: 12.5px; color: #374151; line-height: 1.7; }
.qb .signoff-right b { color: #111; }
.qb .prop-footer {
  margin: 8mm 0 0;
  padding: 5mm 12mm;
  background: #fff;
  border-top: 1.5px solid #111;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  
  border-radius: 0 0 14px 14px;
}
.qb .prop-footer p { margin: 0; font-size: 10.5px; color: #8a8a8a; text-align: center; }
.qb .prop-footer { position: relative; }
.qb .prop-footer .page-num {
  position: absolute;
  left: 50%;
  top: -5.5mm;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 600;
  color: #8a8a8a;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;   
}
@media print {
.qb .sheet.proposal { padding: 0; }
.qb .sheet.fixed-page { padding: 0; }
.qb .prop-footer { border-radius: 0; }
.qb .prop-topbar,
.qb .card-head,
.qb .card-pill,
.qb .prop-callout,
.qb .fee-box,
.qb .offering-fee,
.qb .pkg-compare thead th,
.qb .pkg-compare tbody td,
.qb .prop-annex-head i,
.qb .prop-footer,
.qb .card-list li::before,
.qb .card-list li:nth-child(even),
.qb .terms-list li::before,
.qb .proposal .docs-list li::before,
.qb .summary-card,
.qb .summary-card .sum-li-name::before,
.qb .summary-card .sum-top,
.qb .summary-card .sum-list li:nth-child(even),
.qb .fee-box.grand,
.qb .fee-box.grand .fee-thead,
.qb .fee-box.gov-box,
.qb .fee-box.gov-box .fee-left,
.qb .fee-box.grand .fee-combined .fee-line:nth-of-type(even),
.qb .fee-box.gov-box .fee-combined .fee-line:nth-of-type(even),
.qb .fee-thead,
.qb .fee-foot-note,
.qb .fee-box .fee-left,
.qb .fee-box,
.qb .offering-fee,
.qb .svc-card,
.qb .summary-card,
.qb .card-list li:nth-child(even),
.qb .summary-card .sum-list li:nth-child(even),
.qb .prop-annex-head i,
.qb .proposal .wordmark span {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }


}
body.no-annexure .qb #annexAHead,
body.no-annexure .qb .offering-head,
body.no-annexure .qb .svc-card,
body.no-annexure .qb .offering-fee,
body.no-annexure .qb .restore-bar,
body.no-annexure .qb .offering-add,
body.no-annexure .qb .prop-refer,
body.no-annexure .qb #btnAddRow { display: none !important; }
.qb #summariesHead { margin-top: 18px; }
.qb .sum-opt {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-deep, #a16207);
  border: 1px solid var(--gold, #e9b308);
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 8px;
}
.qb .sum-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
}
.qb .sum-or::before,
.qb .sum-or::after {
  content: "";
  flex: 1;
  border-top: 1px dashed #d1d5db;
}
.qb .sum-or span {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #6b7280;
}
.qb .pkg-compare .pc-note { margin-top: 6px; font-size: 10.5px; color: #6b7280; }
.qb .sum-choose {
  font-size: 12px;
  font-weight: 800;
  color: #000;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 8px 0 2px;
}
.qb .summary-card {
  border: 1px solid #ece3d3;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  margin: 10px 0;
  background: #fff;
  box-shadow: 0 1px 3px rgba(31, 22, 8, 0.05);
  break-inside: avoid;
  page-break-inside: avoid;
}
.qb .summary-card .sum-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: linear-gradient(180deg, #fdf9f0, #f6efdd);
  border: 0;
  border-left: 4px solid var(--gold, #e9b308);
  border-radius: 0;
  padding: 9px 14px;
}
.qb .summary-card .sum-title {
  font-size: 14px; font-weight: 800; color: #1a1206; letter-spacing: -.2px;
}
.qb .summary-card .sum-amt {
  font-size: 14px; font-weight: 800; color: var(--gold-deep, #a16207); white-space: nowrap;
}
.qb .summary-card .sum-opt { color: var(--gold-deep, #a16207); border-color: var(--gold, #e9b308); }
.qb .summary-card .sum-list { list-style: none; margin: 0; padding: 0; }
.qb .summary-card .sum-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 5px 14px;
  font-size: 12px; color: var(--ink, #1f2937);
}
.qb .summary-card .sum-list li:nth-child(even) { background: #faf5ea; }
.qb .summary-card .sum-li-name {
  font-weight: 600;
  position: relative;
  padding-left: 14px;
}
.qb .summary-card .sum-li-name::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold, #e9b308);
}
.qb .summary-card .sum-li-tag { color: var(--ink-soft, #6b7280); white-space: nowrap; font-weight: 600; }
:root {
  --qt-ink: #22303f;        
  --qt-amber: #b8912e;      
  --qt-amber-ink: #8f6f1d;  
  --qt-band: #1f2d3d;       
  --qt-line: #dfe3ea;       
  --qt-hair: #eef1f5;       
  --qt-zebra: #f5f7fa;      
  --qt-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
}
.qb .svc-card,
.qb .summary-card,
.qb .fee-box.grand,
.qb .fee-box.gov-box {
  border: 1px solid var(--qt-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
.qb .fee-box:not(.grand):not(.gov-box),
.qb .offering-fee {
  background: #fff !important;
  border: 1px solid var(--qt-line) !important;
  border-left: 4px solid var(--qt-amber) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
.qb .card-head,
.qb .summary-card .sum-top,
.qb .fee-box.grand .fee-thead,
.qb .fee-box.gov-box .fee-left {
  background: linear-gradient(135deg, #2b3d52 0%, #1f2d3d 55%, #17222f 100%) !important;
  border-left: 4px solid var(--qt-amber) !important;
  border-bottom: 0 !important;
  color: #fff !important;
}
.qb .card-title,
.qb .card-head .i-desc,
.qb .card-pill,
.qb .card-head .i-amt,
.qb .card-pill .i-amt,
.qb .summary-card .sum-title,
.qb .fee-box.grand .fee-thead span,
.qb .fee-box.grand .fee-thead b,
.qb .fee-box.gov-box .fee-label {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 0 !important;
}
.qb .offering-fee .of-label,
.qb .offering-fee .of-amt,
.qb .fee-box .fee-label,
.qb .fee-box .fee-amount {
  color: var(--qt-ink) !important;
}
.qb .fee-box.grand .fee-combined .fee-line span,
.qb .fee-box.grand .fee-combined .fee-line b,
.qb .fee-box.grand .fee-choose-head,
.qb .fee-box.grand .fee-combined .fee-line.fee-opt em,
.qb .fee-box.gov-box .fee-combined .fee-line span,
.qb .fee-box.gov-box .fee-combined .fee-line b {
  color: var(--qt-ink) !important;
  -webkit-text-fill-color: var(--qt-ink) !important;
}
.qb .card-list li:nth-child(even),
.qb .summary-card .sum-list li:nth-child(even),
.qb .fee-box.grand .fee-combined .fee-line:nth-of-type(even),
.qb .fee-box.gov-box .fee-combined .fee-line:nth-of-type(even) {
  background: var(--qt-zebra) !important;
}
.qb .card-head .card-pill,
.qb .card-head .card-pill *,
.qb .card-head .card-pill .i-amt {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 0 !important;
  opacity: 1 !important;
}
.qb .card-list li::before { background: linear-gradient(135deg, #2b3d52, #17222f) !important; color: #fff !important; }
.qb .summary-card .sum-li-name::before { background: var(--qt-amber) !important; }
.qb .summary-card .sum-amt { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.qb .summary-card .sum-opt { color: #fff !important; border-color: var(--qt-amber) !important; }
.qb .card-pill-outline { color: var(--qt-amber) !important; }
.qb .offering-fee .of-per,
.qb .fee-box .fee-note { color: var(--qt-amber-ink) !important; }
.qb .prop-annex-head i { background: var(--qt-amber) !important; }
.qb .prop-annex-head span { color: var(--qt-ink) !important; }
.qb .pkg-compare thead th,
.qb .pkg-compare tfoot .pc-fee td { background: linear-gradient(135deg, #2b3d52, #17222f) !important; color: #fff !important; }
.qb .pkg-compare .pc-fee td { color: #fff !important; }
.qb .pkg-compare .pc-yes { color: #2e8b57 !important; }
.qb .pkg-compare .pc-no { color: #c0392b !important; }



:root {
  
  --ws-accent:      #0a2261;
  --ws-accent-dark: #081b4e;
  --ws-accent-tint: #eef2fa;
  --ws-accent-line: #c9d3ea;
  --ws-page:   #f9fafb;
  --ws-card:   #ffffff;
  --ws-rail:   #f3f4f6;
  --ws-header: #ffffff;
  --ws-ink:    #111827;
  --ws-ink-2:  #4b5563;
  --ws-ink-3:  #9ca3af;
  --ws-line:   #e5e7eb;
  --ws-border: #e5e7eb;
  --ws-rail-border: #e5e7eb;
  --ws-radius: 8px;
  --ws-radius-sm: 6px;
  --ws-shadow: 0 1px 2px rgba(0,0,0,.05);
  --ws-shadow-lift: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  
  --ws-s1: #2a78d6; --ws-s2: #eb6834; --ws-s3: #1baf7a; --ws-s4: #eda100; --ws-s5: #7c5cd6;
}
.qb { background: var(--ws-page) !important; color: var(--ws-ink); }
.qb::before,
.qb::after { display: none !important; content: none !important; }
.qb #welcomeSplash { display: none !important; }
.qb .appbar {
  background: var(--ws-header) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--ws-rail-border);
  animation: none;
}
.qb .app-title { color: var(--ws-ink); }
.qb .app-subtitle { color: var(--ws-ink-3); }
.qb .divider-v { background: var(--ws-border); }
.qb .tb-group {
  background: var(--ws-card);
  border: 1px solid var(--ws-border);
  border-radius: 12px;
}
.qb .btn.btn-icon { color: var(--ws-ink-2); }
.qb .btn.btn-icon:hover { background: var(--ws-accent-tint); color: var(--ws-accent); }
.qb .btn.btn-icon.on { background: var(--ws-accent-tint); color: var(--ws-accent); }
.qb .acct-dropdown {
  background: var(--ws-card);
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 1px solid var(--ws-border);
  box-shadow: var(--ws-shadow-lift);
}
.qb .acct-item { color: var(--ws-ink); }
.qb .acct-item:hover { background: var(--ws-accent-tint); }
.qb .acct-item .ico { color: var(--ws-ink-3); }
.qb .add-dropdown { background: var(--ws-card); }
.qb .btn-primary {
  background: var(--ws-accent) !important;
  color: #fff;
  box-shadow: var(--ws-shadow) !important;
}
.qb .btn-primary:hover { background: var(--ws-accent-dark) !important; box-shadow: var(--ws-shadow-lift) !important; }
.qb .btn-outline {
  background: var(--ws-card); color: var(--ws-ink);
  border-color: var(--ws-border);
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.qb .btn-outline:hover { background: var(--ws-accent-tint); border-color: var(--ws-accent-line); }
.qb .btn-ghost { color: var(--ws-ink-2); }
.qb .btn-ghost:hover { background: var(--ws-accent-tint); color: var(--ws-accent); }
.qb .btn-add {
  background: var(--ws-accent-tint); color: var(--ws-accent);
  border: 1px dashed var(--ws-accent-line);
}
.qb .btn-add:hover { background: #e0e7f5; }
.qb .panel-card {
  background: var(--ws-card);
  border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius);
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: var(--ws-shadow);
  animation: none;
}
.qb .panel-card:hover { border-color: var(--ws-accent-line); }
.qb .panel-title { color: var(--ws-ink-3); }
.qb .panel-highlight { border-color: var(--ws-accent-line); background: var(--ws-accent-tint); }
.qb .field-label { color: var(--ws-ink-2); }
.qb .field input,
.qb .field select,
.qb .field textarea {
  background: var(--ws-card); color: var(--ws-ink);
  border: 1px solid var(--ws-border); border-radius: var(--ws-radius-sm);
}
.qb .field select option { background: #fff; color: var(--ws-ink); }
.qb .field input::placeholder,
.qb .field textarea::placeholder { color: var(--ws-ink-3); }
.qb .field input:focus,
.qb .field select:focus,
.qb .field textarea:focus {
  outline: none; border-color: var(--ws-accent);
  box-shadow: 0 0 0 3px rgba(10, 34, 97,.12);
}
.qb .field input[type="date"],
.qb .field input[type="number"] { color-scheme: light; }
.qb input[readonly] { opacity: .8; }
.qb .svc-group { color: var(--ws-ink-3); }
.qb .svc-row { border-color: var(--ws-border); }
.qb .svc-row:hover { background: var(--ws-accent-tint); }
.qb .svc-row.on { background: var(--ws-accent-tint); }
.qb .svc-name { color: var(--ws-ink); }
.qb .svc-row.on .svc-name { color: var(--ws-accent); font-weight: 600; }
.qb .svc-amt,
.qb .svc-sub-amt {
  background: var(--ws-card); color: var(--ws-ink);
  border: 1px solid var(--ws-border);
}
.qb .svc-amt:focus,
.qb .svc-sub-amt:focus { border-color: var(--ws-accent); box-shadow: 0 0 0 3px rgba(10, 34, 97,.12); }
.qb .svc-sub-name { color: var(--ws-ink-2); }
.qb .svc-sub-inc,
.qb .svc-sub-flip:hover,
.qb .svc-flip:hover,
.qb .svc-row.on .svc-sub-btn { color: var(--ws-accent); }
.qb .svc-sub-check { accent-color: var(--ws-accent); }
.qb .saved-list li { color: var(--ws-ink); background: var(--ws-card); border-color: var(--ws-border); }
.qb .saved-list li:hover { color: var(--ws-ink); background: var(--ws-accent-tint); border-color: var(--ws-accent); transform: none; }
.qb .saved-list li strong { color: var(--ws-ink); }
.qb .saved-list li small { color: var(--ws-ink-2); }
.qb .saved-empty { color: var(--ws-ink-3); }
.qb .pending-picker { background: var(--ws-accent-tint) !important; border: 1px solid var(--ws-accent-line) !important; color: var(--ws-ink); }
.qb .pending-picker .pp-title { color: var(--ws-accent) !important; }
.qb .pp-tabs { background: var(--ws-header) !important; border: 1px solid var(--ws-border) !important; }
.qb .pp-tab { color: var(--ws-ink-3) !important; }
.qb .pp-tab.on { color: var(--ws-accent) !important; background: var(--ws-card) !important; box-shadow: var(--ws-shadow) !important; }
.qb .pp-form { background: var(--ws-card) !important; border: 1px solid var(--ws-border) !important; }
.qb .pp-form.has-sel { border-color: var(--ws-accent-line) !important; }
.qb .pp-form.open { background: var(--ws-card) !important; }
.qb .pp-ftoggle { color: var(--ws-ink) !important; }
.qb .pp-chev { color: var(--ws-ink-3) !important; }
.qb .pp-form.open .pp-chev { color: var(--ws-accent) !important; }
.qb .pp-fcount { color: #fff !important; background: var(--ws-accent) !important; }
.qb .pp-fprice { color: var(--ws-ink-2) !important; background: var(--ws-card) !important; border: 1px solid var(--ws-border) !important; }
.qb .pp-fprice:focus-within { border-color: var(--ws-accent) !important; color: var(--ws-accent) !important; }
.qb .pp-fee { color: var(--ws-ink) !important; }
.qb .pp-fee::placeholder { color: var(--ws-ink-3) !important; }
.qb .pp-yr { border-bottom-color: var(--ws-line) !important; }
.qb .pp-ychip,
.qb .pp-qchip { color: var(--ws-ink-2) !important; background: var(--ws-card) !important; border: 1px solid var(--ws-border) !important; }
.qb .pp-ychip.on,
.qb .pp-qchip.on { color: #fff !important; background: var(--ws-accent) !important; border-color: transparent !important; }
.qb .calc-preview span { color: var(--ws-ink-3); }
.qb .calc-preview strong { color: var(--ws-ink); }
.qb .calc-preview > div { border-color: var(--ws-line); }
.qb .calc-preview .calc-total { background: var(--ws-accent-tint); }
.qb .calc-preview .calc-total span,
.qb .calc-preview .calc-total strong { color: var(--ws-accent); font-weight: 700; }
.qb .calc-grand-toggle span { color: var(--ws-ink-2); }
.qb .calc-grand-toggle:hover span { color: var(--ws-ink); }
.qb .edits-card {
  background: var(--ws-card) !important;
  border: 1px solid var(--ws-border) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: var(--ws-shadow-lift) !important;
}
.qb .edits-title { color: var(--ws-ink) !important; }
.qb .sub-title { color: var(--ws-accent) !important; }
.qb .sub-title small { color: var(--ws-ink-3) !important; }
.qb .rules-note {
  background: var(--ws-accent-tint) !important;
  border: 1px solid var(--ws-accent-line) !important;
  color: var(--ws-ink-2) !important;
}
.qb .rules-note strong { color: var(--ws-ink) !important; }
.qb .edits-body .sub-title:first-of-type,
.qb .edits-body .rates-grid-onb,
.qb .edits-body .rates-hint,
.qb .rules-note,
.qb .edits-body .field:has(#terms) {        
  display: none !important;
}
.qb .rates-grid th { color: var(--ws-ink-3); }
.qb .rates-grid td { color: var(--ws-ink); }
.qb .rates-grid input {
  background: var(--ws-card); color: var(--ws-ink); border: 1px solid var(--ws-border);
}
.qb .rates-grid input:focus { border-color: var(--ws-accent); }
.qb .rates-hint { color: var(--ws-ink-3); }
.qb .svc-toggle input[type="checkbox"],
.qb .calc-grand-toggle input { accent-color: var(--ws-accent); }
.qb .drawer { background: var(--ws-page); }
.qb .drawer-head { border-color: var(--ws-rail-border); }
.qb .drawer-head h3 { color: var(--ws-ink); }
.qb .drawer-tabs { background: var(--ws-header) !important; border: 1px solid var(--ws-border) !important; }
.qb .dtab { color: var(--ws-ink-3) !important; background: none !important; box-shadow: none !important; }
.qb .dtab:hover { color: var(--ws-ink) !important; }
.qb .dtab.active { color: var(--ws-accent) !important; background: var(--ws-card) !important; box-shadow: var(--ws-shadow) !important; }
.qb .saved-list li { background: var(--ws-card); border: 1px solid var(--ws-border); }
.qb .saved-list li:hover { border-color: var(--ws-accent-line); background: var(--ws-accent-tint); }
.qb .saved-list li small { color: var(--ws-ink-3); }
.qb .saved-empty,
.qb .saved-empty:hover {
  color: var(--ws-ink-2) !important;
  background: transparent !important;
  border-color: transparent !important;
}
.qb .row-status-wrap { color: var(--ws-ink-3) !important; }
.qb .row-status {
  color: var(--ws-ink) !important;
  background: var(--ws-card) !important;
  border: 1px solid var(--ws-border) !important;
}
.qb .row-status:focus { border-color: var(--ws-accent) !important; }
.qb .row-trail {
  color: var(--ws-ink-2) !important;
  background: var(--ws-card) !important;
  border: 1px solid var(--ws-border) !important;
}
.qb .row-trail:hover {
  color: var(--ws-accent) !important;
  border-color: var(--ws-accent) !important;
  background: var(--ws-accent-tint) !important;
}
.qb .an-filters input,
.qb .an-filters select {
  background: var(--ws-card); color: var(--ws-ink); border: 1px solid var(--ws-border);
  color-scheme: light;
}
.qb .an-filters input:focus,
.qb .an-filters select:focus {
  border-color: var(--ws-accent); box-shadow: 0 0 0 3px rgba(10, 34, 97,.12);
}
.qb .an-filters select option { background: #fff; color: var(--ws-ink); }
.qb .an-stats { gap: 16px; margin-bottom: 18px; }
.qb .an-stat {
  background: var(--ws-card); border: 1px solid var(--ws-border) !important;
  border-radius: var(--ws-radius); box-shadow: var(--ws-shadow); padding: 16px 20px;
}
.qb .an-stat i { display: none !important; }
.qb .an-stat b {
  font-size: 23px; font-weight: 700; color: var(--ws-ink);
  letter-spacing: -.4px; font-variant-numeric: tabular-nums;
}
.qb .an-stat span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; color: var(--ws-ink-3);
}
.qb .an-grid { gap: 16px; }
.qb .an-chart {
  background: var(--ws-card); border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius); box-shadow: var(--ws-shadow);
  padding: 18px 20px; height: 250px;
}
.qb .an-chart h4 {
  color: var(--ws-ink-3); font-size: 11.5px; font-weight: 700;
  letter-spacing: .7px; margin: 0 0 14px;
}
.qb .an-chart h4::before { display: none !important; }
.qb .an-empty { border-color: var(--ws-border); }
.qb .an-empty p { color: var(--ws-ink); }
.qb .an-empty span { color: var(--ws-ink-3); }
.qb .an-empty .ico { color: var(--ws-accent); }
.qb .user-role,
.qb .user-role-tag { color: var(--ws-ink-2); }
.qb .mob-switch button.on { background: var(--ws-accent); color: #fff; }
.qb .appbar-left { display: none !important; }
.qb #acctMenu,
.qb .tb-account { display: none !important; }
@media screen {
.qb #pagesContainer { gap: 40px; }
.qb .sheet {
    box-shadow: 0 2px 10px rgba(40, 36, 31, 0.06), 0 0 0 1px var(--ws-border) !important;
  }
.qb [contenteditable="true"]:hover { outline-color: var(--ws-accent-line) !important; }
.qb [contenteditable="true"]:focus { outline-color: rgba(10, 34, 97, 0.40) !important; }


}
body.list-mode .qb .appbar,
body.list-mode .qb .workspace,
body.list-mode .qb #mobSwitch { display: none !important; }
.qb #listPage { display: none; }
body.list-mode .qb #listPage { display: block; }
body.dash-mode .qb .appbar,
body.dash-mode .qb .workspace,
body.dash-mode .qb #mobSwitch,
body.dash-mode .qb #listPage { display: none !important; }
.qb #dashPage { display: none; }
body.dash-mode .qb #dashPage { display: block; }
.qb #dashBody .drawer-pane { display: block !important; }
.qb #dashBody { margin-top: 4px; }
.qb #btnBackToList { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
body.list-mode .qb #btnBackToList { display: none !important; }
.qb .qlist-wrap { max-width: 1440px; margin: 0 auto; padding: 26px 30px 60px; }
.qb .qlist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.qb .qlist-head-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.qb .qlist-title { font-size: 26px; font-weight: 800; letter-spacing: -.01em; color: var(--ws-ink); margin: 0; }
.qb .qlist-sub { margin: 4px 0 0; color: var(--ws-ink-2); font-size: 13.5px; }
.qb .qlist-toolbar { margin-bottom: 16px; }
.qb .qlist-search {
  position: relative; display: flex; align-items: center; gap: 4px;
  background: var(--ws-card); border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius); box-shadow: var(--ws-shadow); padding: 0 14px;
}
.qb .qlist-search:focus-within { border-color: var(--ws-accent-line); box-shadow: var(--ws-shadow-lift); }
.qb .qlist-search .ico { width: 18px; height: 18px; color: var(--ws-ink-3); flex: 0 0 auto; }
.qb .qlist-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  padding: 13px 10px; font-size: 14px; color: var(--ws-ink); font-family: inherit;
}
.qb .qlist-search input::placeholder { color: var(--ws-ink-3); }
.qb .qlist-tablewrap {
  background: var(--ws-card); border: 1px solid var(--ws-border);
  border-radius: var(--ws-radius); box-shadow: var(--ws-shadow); overflow: hidden;
}
.qb .qlist-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.qb .qlist-table thead th {
  text-align: left; font-weight: 700; font-size: 12px; letter-spacing: .02em;
  color: var(--ws-ink-2); background: var(--ws-header);
  padding: 13px 16px; border-bottom: 1px solid var(--ws-border); white-space: nowrap;
}
.qb .qlist-table thead th.qc-num,
.qb .qlist-table thead th.qc-actions { text-align: right; }
.qb .qlist-table tbody td {
  padding: 14px 16px; border-bottom: 1px solid var(--ws-line);
  color: var(--ws-ink); vertical-align: middle;
}
.qb .qlist-table tbody tr:last-child td { border-bottom: 0; }
.qb .qlist-table tbody tr { cursor: pointer; transition: background .12s; }
.qb .qlist-table tbody tr:hover { background: var(--ws-accent-tint); }
.qb .qcell-created,
.qb .qcell-valid { white-space: nowrap; color: var(--ws-ink-2); }
.qb .qcell-no { font-weight: 700; color: var(--ws-accent); }
.qb .qcell-proj b { display: block; font-weight: 700; color: var(--ws-ink); }
.qb .qcell-proj span { display: block; color: var(--ws-ink-3); font-size: 12px; }
.qb .qcell-svc { max-width: 340px; color: var(--ws-ink-2); }
.qb .qcell-svc-in { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb .qcell-dept { color: var(--ws-ink-3); }
.qb .qcell-amt { text-align: right; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qb .qstatus { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.qb .qstatus::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, #8a8074); }
.qb .qstatus.s-draft { --dot: #8a8074; color: #6b6257; }
.qb .qstatus.s-sent { --dot: #2a78d6; color: #1f5fa8; }
.qb .qstatus.s-accepted { --dot: #1baf7a; color: #137a56; }
.qb .qstatus.s-expired { --dot: #dc2626; color: #b1201f; }
.qb .qactions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.qb .qact {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; border: 0;
  background: transparent; color: var(--ws-ink-3); cursor: pointer;
  transition: background .12s, color .12s;
}
.qb .qact .ico { width: 17px; height: 17px; }
.qb .qact:hover { background: var(--ws-rail); color: var(--ws-ink); }
.qb .qact.qact-del:hover { background: #fdecea; color: #dc2626; }
.qb .qlist-empty { text-align: center; padding: 60px 20px; color: var(--ws-ink-3); }
.qb .qlist-empty .ico { width: 34px; height: 34px; margin-bottom: 10px; opacity: .7; }
.qb .qlist-empty p { margin: 0 0 4px; font-weight: 700; color: var(--ws-ink-2); font-size: 15px; }
.qb .qlist-empty span { font-size: 13px; }
@media (max-width: 900px) {
.qb .qlist-wrap { padding: 18px 14px 44px; }
.qb .qcell-svc { max-width: 150px; }
.qb .qlist-tablewrap { overflow-x: auto; }


}



/* ---------- CRM fit: the builder inside the CRM layout (navbar + sidebar + main) ---------- */
.qb {
  min-height: 0;
  overflow: visible;             /* the tool's body rule set overflow-x: hidden, which breaks sticky */
  /* the CRM's Tailwind base sets html { line-height: 1.5 }; the tool never set one, so its text
     used the browser default. Inheriting 1.5 made every proposal block taller and pushed the
     printed PDF onto an extra page — restore the tool's spacing so page breaks match. */
  line-height: normal;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Tailwind's base also makes every svg display:block and every button inherit its parent's font
   (line-height included); the tool relies on the browser defaults — inline icons, buttons at
   line-height normal. Left alone, each Annexure B document row (text + its remove icon) grew 1px,
   ten rows pushed Exclusions onto the next page, and the PDF broke pages differently. */
.qb svg { display: inline; }
.qb button { line-height: normal; }
.qb .layout, .qb .main { display: block; min-height: 0; }
/* User, 2026-09-15: "cover whole page, dont add this much gaps" — the tool centred a 1420px
   workspace with 24px padding, which inside the CRM's padded <main> left wide empty margins.
   Span the full content width; the A4 preview then scales to fill its column (fitPreview).
   padding-bottom is left alone so the mobile Editor/Preview switch keeps its clearance. */
.qb .workspace { max-width: none; margin: 0; padding-top: 0; padding-left: 0; padding-right: 0; gap: 20px; }
/* User, 2026-09-15: "increase size of this section", then "increase Client Details and reduce
   pdf" — the controls panel column grows from the tool's 340px to 560px, and the A4 preview
   (which fills the remaining column) shrinks with it. Desktop only: at <= 1000px the tool stacks
   to one column and that stays. */
@media screen and (min-width: 1001px) {
  .qb .workspace { grid-template-columns: 560px 1fr; }
}
/* the A4 proposal keeps the tool's own typeface */
.qb #pagesContainer { font-family: "Inter", "Segoe UI", system-ui, sans-serif; }
/* sticky inside the CRM's scrolling <main>: under the 4rem navbar and main's 1.5rem padding */
/* the Back button moved to the CRM page header, so the toolbar is only its icon groups: a compact,
   right-aligned sticky strip instead of a full-width white bar with an empty left side */
.qb .appbar {
  top: 0;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  justify-content: flex-end;
  padding: 0 0 12px;
  background: transparent !important;
  border-bottom: 0;
  box-shadow: none;
}
/* the toolbar is a compact strip on the right now, so the controls panel sticks at the very top
   instead of leaving room under a full-width bar (that room read as an empty gap when scrolled) */
.qb .side-panel {
  top: 0;
  max-height: calc(100vh - 4rem - 3rem);
}

@media print {
  body:has(.qb) nav,
  body:has(.qb) aside[data-sidebar-target="sidebar"],
  body:has(.qb) [data-sidebar-target="overlay"] { display: none !important; }
  /* User, 2026-09-15: the PDF's first page showed only the CRM page header ("New Quotation" + the
     Quotations button) and pushed the proposal to page 2 — the header sits outside .qb, so hide it */
  body:has(.qb) [data-quotation-page-header] { display: none !important; }
  body:has(.qb) .h-screen,
  body:has(.qb) .overflow-hidden,
  body:has(.qb) main { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
  body:has(.qb) { background: #fff !important; }
  .qb { background: #fff !important; }
  /* the on-screen shadow gutter would spill past the last sheet into a blank page */
  .qb .sheet-area { padding-bottom: 0 !important; max-height: none !important; overflow: visible !important; }
}

/* ============================================================
   CRM: PDF preview with page-level reordering.

   Download > PDF opens this overlay instead of going straight to the print
   dialog. Pagination is frozen while it is open, so every .sheet is a settled
   page: the rail reorders WHOLE pages and nothing inside a page is touched.

   The thumbnails and the stage are CLONES — the live #pagesContainer keeps its
   natural order, because repaginateCore() addresses flow sheets by index and
   would redistribute content into a reordered container. The chosen order is
   applied to the real sheets only for the moment of printing.
   ============================================================ */
/* a centred dialog over a dimmed page, not a full-screen takeover */
.qb .pdf-preview {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 11, 18, .72);
  backdrop-filter: blur(2px);
}
.qb .pdf-preview[hidden] { display: none; }
.qb .pdfp-dialog {
  display: flex;
  flex-direction: column;
  width: min(980px, 100%);
  height: min(660px, 100%);
  overflow: hidden;
  border-radius: 14px;
  background: #0f1420;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6);
}
.qb .pdfp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: none;
  padding: 10px 14px;
  background: #161d2d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.qb .pdfp-title {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #f4f6fb;
}
.qb .pdfp-count { margin-left: 10px; font-weight: 600; opacity: .6; text-transform: none; letter-spacing: 0; }
.qb .pdfp-actions { display: flex; align-items: center; gap: 8px; }
.qb .pdfp-bar .btn-ghost { color: #d7deeb; }
.qb .pdfp-bar .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.qb .pdfp-body { display: flex; flex: 1; min-height: 0; }

/* left: the selected page at its true A4 proportions, fitted to the space */
.qb .pdfp-stage {
  flex: 1;
  min-width: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
/* sized to the DRAWN page, so a scaled-down page leaves no phantom scroll below it */
/* the page is one unit: nothing inside the enlarged copy can be picked up or dragged */
.qb .pdfp-page-box { flex: none; pointer-events: none; }
.qb .pdfp-stage .sheet {
  flex: none;
  animation: none;
  transform-origin: top left;
  transform: scale(var(--pdfp-stage-scale, 1));
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

/* right: one draggable thumbnail per page */
.qb .pdfp-rail {
  flex: none;
  width: 190px;
  overflow-y: auto;
  padding: 12px 10px 24px;
  background: #131a28;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}
.qb .pdfp-hint {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8e9bb4;
}
.qb .pdfp-thumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.qb .pdfp-thumb {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  cursor: grab;
  border-radius: 8px;
  padding: 4px;
  border: 2px solid transparent;
}
.qb .pdfp-thumb:hover { background: rgba(255, 255, 255, 0.05); }
.qb .pdfp-thumb.on { border-color: #6b8cff; background: rgba(107, 140, 255, 0.12); }
.qb .pdfp-thumb.dragging { opacity: .45; cursor: grabbing; }
.qb .pdfp-thumb.drop-above { box-shadow: 0 -3px 0 0 #6b8cff; }
.qb .pdfp-thumb.drop-below { box-shadow: 0 3px 0 0 #6b8cff; }
.qb .pdfp-thumb-no { flex: none; width: 18px; padding-top: 2px; font-size: 11px; font-weight: 700; color: #8e9bb4; text-align: right; }
/* the clone keeps its 210mm layout and is scaled down as one block, so the
   thumbnail is a true miniature of the page rather than a reflowed copy */
.qb .pdfp-thumb-frame {
  flex: none;
  width: 118px;
  height: 167px;
  overflow: hidden;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.qb .pdfp-thumb-frame .sheet {
  animation: none;
  transform-origin: top left;
  transform: scale(.1489);   /* 118px / 792.6px (210mm) */
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
/* the cover / Our Clients / Contact pages are screen-hidden in the editor
   (they only exist for print) — inside the preview they are real pages */
.qb .pdf-preview .sheet.fixed-page { display: flex !important; }
.qb .pdf-preview .no-print { display: none !important; }
/* the page behind must not scroll under the overlay */
body.pdfp-open { overflow: hidden; }

/* ============================================================
   CRM: read-only sheet (the quotation SHOW page).

   The show page renders the builder's own markup through the same stylesheet, with the
   editing chrome hidden — so its layout, boxes, margins, spacing and page breaks are
   identical to the downloaded PDF by construction, not by a second implementation of it.

   Only the AUTHORED pages appear. The cover / Our Clients / Contact pages are fixed company
   boilerplate that nobody edits per quotation; they stay hidden here exactly as they do in
   the editor, and join the document at print time. The view answers "what did we quote",
   not "what does the whole brochure look like".
   ============================================================ */
.qb.qb-readonly .appbar,
.qb.qb-readonly .side-panel,
.qb.qb-readonly .mob-switch,
.qb.qb-readonly .edits-card,
.qb.qb-readonly .pdf-preview,
.qb.qb-readonly #welcomeSplash { display: none !important; }
/* nothing in the sheet is a control any more: no add buttons, grips, delete crosses or pills */
.qb.qb-readonly .no-print { display: none !important; }
.qb.qb-readonly .workspace { display: block; padding: 0; max-width: none; }
.qb.qb-readonly .sheet-area {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 28px 0 32px;
}
/* the editor's pages float on a dark backdrop, so they carry a deep shadow and rounded
   corners. On the show page they sit on white, where that reads as a smudge — here they
   are sheets of paper: square, hairline-edged, and a shadow you only notice at the edge. */
.qb.qb-readonly .sheet {
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .1), 0 0 0 1px rgba(16, 24, 40, .08);
  animation: none;
}
.qb.qb-readonly #pagesContainer { gap: 24px; }
/* the dashed/solid hover outlines advertise editing that is not available here */
.qb.qb-readonly [contenteditable]:hover,
.qb.qb-readonly [contenteditable]:focus { outline: none !important; }
.qb.qb-readonly input { cursor: default; }
/*
 * 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.
 *


 */