/*
 * Hand-written styles for components this project adds, kept OUT of app.css.
 *
 * app.css is generated by the Gulp/SCSS pipeline and committed, so anything
 * written into it is lost the next time somebody runs the build. The rules
 * here belong to templates in this repository, not to the purchased theme, and
 * they are few enough that a separate file is cheaper than making every change
 * depend on a node toolchain being installed.
 */

/* ── Multi-answer table filters ───────────────────────────────────────────── */
/* Fixed-height button per filter, choices inside the menu. The control this
   replaced put each choice inside itself as a chip, so a row of six filters was
   as tall as whatever the reader had picked and the Apply button drifted. */
.filter-dropdown-menu {
  min-width: 15rem;
  max-height: 20rem;
  overflow-y: auto;
}

/* A carrier's legal name runs to "BUPA Mexico Compañía de Seguros, SA de CV".
   Three of those wrap the chip row onto a second line, which is the same height
   problem in a new place. The full name is on hover. */
.filter-chip {
  max-width: 14rem;
}

/* The dropdown wears form-select, which paints its own caret on the right. The
   count would sit under it, so the padding makes room for both. */
.filter-toggle { padding-right: 2.25rem; }
/* Chips are an outline, not a fill: one row of them under the bar should read
   as a sentence about the table, not as a set of buttons. */
.filter-chip { background-color: transparent; }

/* The conversation card inside a client file: a fixed reading height, so a long
   thread does not push the rest of the file off the screen. */
.conversation-card-scroll { max-height: 220px; }
.conversation-bubble { max-width: 85%; }
.conversation-bubble-time { font-size: .7rem; }

/* ── Carrier logos inside tables (#277, #279) ─────────────────────────────── */
/* A fixed box so thirty-eight logos of every proportion sit on one baseline
   and the column stays the same width whatever carrier is in the row. The
   logo scales inside it; the name is on hover. */
.carrier-logo-thumb {
  height: 22px;
  max-width: 64px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}

/* ── KPI counters over a list (#278, #279) ────────────────────────────────── */
.kpi-card-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-left: .5rem;
}
/* Feedback #298: the label is two or three words and reads on one line; the
 * period goes in the hint under the value, not in the label. */
.kpi-card-label { font-size: .78rem; line-height: 1.2; white-space: nowrap; }
/* Feedback #312: five peso figures across one row on a laptop. The value
 * scales down a little with the viewport and never wraps or spills. */
.kpi-card h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(.95rem, 1.3vw, 1.125rem); }
.kpi-card .min-width-0 { flex: 1 1 auto; }
a.kpi-card:hover { border-color: var(--promotoria-primary); }
/* Six counters across (claims, #314), or five on a laptop (CRM, #315),
 * leave no room for a one-line label: it wraps rather than being cut. */
.row-cols-xxl-6 .kpi-card-label { white-space: normal; }
@media (max-width: 1499.98px) { .kpi-card-label { white-space: normal; } }
.kpi-card-hint { font-size: .68rem; line-height: 1.2; margin-top: .15rem; }
/* The "where does this number come from" i, top-right; the bulb sits top-left (rule 5). */
.kpi-card { position: relative; }
.kpi-card-info { position: absolute; top: .35rem; right: .5rem; font-size: .85rem; z-index: 1; }
.kpi-card:has(.kpi-card-info) .kpi-card-label { padding-right: 1rem; }

/* The filter panel is an offcanvas on the right edge (feedback #295). Inside
 * it every field takes the full width, whatever column class it wears on the
 * wide layout it came from, so the fields stack instead of squeezing. */
.filter-offcanvas { width: 24rem; max-width: 92vw; }
.filter-offcanvas .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
.filter-offcanvas .offcanvas-body { padding: 1rem 1.25rem; }
.filter-offcanvas .form-label { margin-bottom: .25rem; }
/* #380: inside the panel, a field that is filtering says so: its label in bold
   with a dot, and its value in bold. No colour (house rule: nothing coloured in
   the bar beyond Apply); the count is in the panel's title. */
.filter-offcanvas [class*="col-"]:has(.filter-dropdown[data-filter-active]) > .form-label,
.filter-offcanvas [class*="col-"]:has(input[type="date"][value]:not([value=""])) > .form-label,
.filter-offcanvas [class*="col-"]:has(input[type="search"][value]:not([value=""])) > .form-label { font-weight: 600; }
.filter-offcanvas [class*="col-"]:has(.filter-dropdown[data-filter-active]) > .form-label::before,
.filter-offcanvas [class*="col-"]:has(input[type="date"][value]:not([value=""])) > .form-label::before,
.filter-offcanvas [class*="col-"]:has(input[type="search"][value]:not([value=""])) > .form-label::before {
  content: "\2022"; margin-right: .3rem;
}
.filter-offcanvas .filter-dropdown[data-filter-active] .filter-toggle { font-weight: 600; }

/* The chips of what is filtering sit under the title row, and they need air
 * between the buttons above and the table below (feedback #295). */
.filter-chips { margin-top: .75rem !important; padding-top: .75rem !important; margin-bottom: 1rem; }

/* ── Topbar: the title gives way, the tools never do (feedback #311) ──────── */
/* Both clusters were content sized, so a long page title ran under the search
   box and the chips. The lead cluster may shrink and its title truncates with
   an ellipsis (the full title is on hover); the tools keep their width. */
.min-width-0 { min-width: 0; }
.app-topbar .topbar-menu .topbar-lead { min-width: 0; flex: 1 1 auto; }
.app-topbar .topbar-menu .topbar-tools { flex: 0 0 auto; }
.app-topbar .topbar-menu .topbar-title-wrap { min-width: 0; }
.app-topbar .topbar-menu .topbar-title-wrap .breadcrumb { overflow: hidden; }
.app-topbar .topbar-menu .topbar-title-wrap .breadcrumb-item { white-space: nowrap; }

/* ── Quote projects: one bar per carrier, seven steps ─────────────────────── */
/* The bar says where each carrier is: invited, request sent, waiting,
   responded, proposal received, changes requested, conforming. A carrier that
   left the flow (winner, discarded, declined, silent, waiting on the broker)
   keeps the last step it reached and wears its state as a badge on top. */
.pjt-progress { display: flex; gap: 3px; }
.pjt-progress .pjt-step { flex: 1 1 0; height: 8px; border-radius: 4px; background: var(--ct-border-color, #dee2e6); }
.pjt-progress .pjt-step.done { background: var(--promotoria-primary, #02c0ce); }
.pjt-progress .pjt-step.current { background: var(--promotoria-primary, #02c0ce); box-shadow: 0 0 0 2px rgba(2,192,206,.25); }
.pjt-progress.is-winner .pjt-step.done, .pjt-progress.is-winner .pjt-step.current { background: var(--ct-success, #0acf97); }
.pjt-progress.is-discarded .pjt-step.done, .pjt-progress.is-declined .pjt-step.done,
.pjt-progress.is-discarded .pjt-step.current, .pjt-progress.is-declined .pjt-step.current { background: var(--ct-secondary-color, #98a6ad); }
.pjt-progress.is-timed_out .pjt-step.current { background: var(--ct-danger, #fa5c7c); }
.pjt-progress.is-needs_decision .pjt-step.current { background: var(--ct-warning, #f7b84b); box-shadow: 0 0 0 2px rgba(247,184,75,.35); }
.pjt-steps { display: flex; gap: 3px; margin-top: .25rem; }
.pjt-steps small { flex: 1 1 0; font-size: .62rem; line-height: 1.1; color: var(--ct-secondary-color, #98a6ad); text-align: center; }
.pjt-steps small.current { color: var(--ct-body-color, #313a46); font-weight: 600; }
.pjt-carrier-card .carrier-logo-thumb { max-height: 28px; max-width: 90px; }
.pjt-issue { border-left: 3px solid var(--ct-warning, #f7b84b); padding-left: .6rem; }
.pjt-issue.blocking { border-left-color: var(--ct-danger, #fa5c7c); }

/* The colour strip above the topbar never moves (Jonathan, 2026-10-04).
   It was `position: sticky` inside `.wrapper` (app.css), so the rubber-band
   at the top and bottom of a page dragged it along with the content. It is
   fixed to the viewport now; the topbar keeps the 5px it sat under, and the
   page no longer bounces vertically. The detached layout hides the strip
   and keeps its own topbar offset. */
html, body { overscroll-behavior-y: none; }
.wrapper > .color-line { position: fixed; top: 0; left: 0; right: 0; width: 100%; }
.wrapper > .color-line + .app-topbar { margin-top: 5px; }
html[data-layout-mode=detached]:not([data-layout=topnav]) .wrapper > .color-line + .app-topbar { margin-top: 0; }

/* The policy alert pop-up keeps the lines it was written with: a SICAS
   PDF check lists one difference per line (sicas.alerts). */
.policy-alert-text { white-space: pre-line; text-align: left; }