/* ═══════════════════════════════════════════════════════════════════
   GP Assurances — Design System v1
   Global design tokens, 86px rail, typography, components.
   Loaded AFTER styles.css, BEFORE customer-reference.css.
   Does NOT conflict with body.gp-customer-redesign scoped styles.
   ═══════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────
   1. DESIGN TOKENS
   ─────────────────────────────────────────── */
:root {
  /* Brand */
  --gp-brand: #0B63F6;
  --gp-brand-hover: #0851D4;
  --gp-brand-bg: #EEF4FF;
  --gp-brand-bg2: #DCE9FF;

  /* Neutrals */
  --gp-text: #0F172A;
  --gp-text2: #1E293B;
  --gp-muted: #64748B;
  --gp-muted2: #94A3B8;
  --gp-border: #E8ECF2;
  --gp-border2: #EDF0F5;
  --gp-border3: #E2E8F0;
  --gp-bg: #F5F7FB;
  --gp-bg2: #F8FAFD;
  --gp-bg3: #F8FAFC;
  --gp-white: #FFFFFF;

  /* Semantic */
  --gp-green: #16A34A;
  --gp-red: #DC2626;
  --gp-orange: #EA580C;
  --gp-yellow: #CA8A04;
  --gp-purple: #7C3AED;

  /* Radius */
  --gp-radius: 12px;
  --gp-radius-sm: 8px;
  --gp-radius-xs: 6px;

  /* Shadow */
  --gp-shadow: 0 1px 3px rgba(0,0,0,0.04);
  --gp-shadow-md: 0 4px 12px rgba(0,0,0,0.06);

  /* ── Font hierarchy (Req 11) ── */
  --gp-fs-title: 22px;
  --gp-fs-subtitle: 12px;
  --gp-fs-section: 15px;
  --gp-fs-card: 13px;
  --gp-fs-th: 11px;
  --gp-fs-body: 12px;
  --gp-fs-btn: 12px;
  --gp-fs-helper: 11px;

  /* Font weights */
  --gp-fw-title: 600;
  --gp-fw-subtitle: 400;
  --gp-fw-section: 600;
  --gp-fw-card: 600;
  --gp-fw-th: 500;
  --gp-fw-body: 400;
  --gp-fw-btn: 500;
  --gp-fw-helper: 400;

  /* Rail width — overrides styles.css default (210px → 86px) */
  --rail-width: 86px;
  --ds-rail-w: 86px;
}

/* ═══════════════════════════════════════════════════════════════════
   2. GLOBAL LAYOUT — 86px rail
   ═══════════════════════════════════════════════════════════════════ */

/* Default pages use the compact rail plus workspace. The customer page adds
   its own contextual sidebar in customer-reference.css. */
.app {
  grid-template-columns: 86px minmax(0, 1fr) !important;
}
.app.rail-collapsed {
  grid-template-columns: 54px minmax(0, 1fr) !important;
}
body:not(.gp-customers-context) .list-sidebar { display: none !important; }
body:not(.gp-customers-context) .workspace { grid-column: 2 !important; }

/* ═══════════════════════════════════════════════════════════════════
   3. ICON RAIL — 86px white, blue GP wordmark, icon-above-text nav
   ═══════════════════════════════════════════════════════════════════ */
.icon-rail {
  width: 86px !important;
  min-width: 86px !important;
  background: var(--gp-white) !important;
  border-right: 1px solid var(--gp-border2) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  color: var(--gp-text) !important;
}

/* Hide collapse button globally — 86px is already compact */
.rail-collapse-btn { display: none !important; }

/* ── GP Brand: compact logo only ── */
.icon-rail .gp-brand {
  justify-content: center !important;
  padding: 14px 4px !important;
  min-height: 60px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  cursor: pointer !important;
}
.icon-rail .gp-brand-text { display: none !important; }
.icon-rail .gp-logo {
  width: 36px !important; height: 36px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: transparent !important;
}
.icon-rail .gp-logo svg.gp-wordmark-svg {
  display: block !important;
  width: 48px !important;
  height: 28px !important;
  overflow: visible !important;
  transform: skewX(-7deg) !important;
}
.icon-rail .gp-logo svg.gp-wordmark-svg path {
  fill: none !important;
  stroke: #075bc8 !important;
  stroke-width: 3.3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* ── Rail nav: vertical icon-above-text ── */
.rail-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 12px 6px !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}
.rail-item {
  width: 74px !important;
  height: 54px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 4px !important;
  color: var(--gp-muted) !important;
  background: transparent !important;
  font-size: 10px !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
  /* Override all grid/box-shadow from old styles */
  box-shadow: none !important;
  grid-template-columns: none !important;
  justify-items: center !important;
  align-content: center !important;
}
.rail-item span {
  width: 24px !important; height: 24px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 18px !important; line-height: 1 !important; color: inherit !important;
}
.rail-item span i { font-size: 18px !important; line-height: 1 !important; }
.rail-item b {
  display: block !important;
  width: 70px !important; max-width: 70px !important;
  font-size: 10px !important; font-weight: 400 !important;
  white-space: normal !important; word-break: keep-all !important;
  text-align: center !important; line-height: 1.15 !important;
}
.rail-item:hover {
  color: var(--gp-brand) !important;
  background: var(--gp-brand-bg) !important;
  box-shadow: none !important;
}
.rail-item.active {
  color: var(--gp-brand) !important;
  background: var(--gp-brand-bg) !important;
  box-shadow: none !important;
}
.rail-item.active span,
.rail-item.active b { color: var(--gp-brand) !important; }

/* ── Separator ── */
.nav-separator {
  width: 58px !important; height: 1px !important;
  margin: 6px auto !important;
  background: var(--gp-border2) !important;
}

/* ── Boss-only visibility ── */
.icon-rail.is-boss .rail-boss-only { display: flex !important; }
.icon-rail.is-boss .market-btn.rail-boss-only { display: flex !important; }
.icon-rail.is-boss .nav-separator { display: block !important; }
.icon-rail:not(.is-boss) .nav-separator { display: none !important; }
.rail-boss-only { display: none !important; }

/* ── Rail bottom: language control ── */
.rail-language-control {
  margin-top: auto !important;
  padding: 8px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  border-top: 1px solid var(--gp-border2) !important;
}
.rail-language-control i.bi-globe2 {
  font-size: 14px !important;
  color: var(--gp-muted) !important;
}
.rail-language-control button {
  border: 0 !important;
  border-radius: 4px !important;
  background: transparent !important;
  color: var(--gp-muted) !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s, color 0.15s !important;
}
.rail-language-control button.active {
  background: var(--gp-brand) !important;
  color: var(--gp-white) !important;
}

/* ── Settings button ── */
.market-btn {
  margin: 4px 8px 10px !important;
  min-height: 36px !important;
  border: 0 !important;
  border-radius: var(--gp-radius-sm) !important;
  color: var(--gp-muted) !important;
  background: #F4F6F9 !important;
  font-size: 11px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  transition: background 0.15s, color 0.15s !important;
}
.market-btn:hover {
  background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
}
.market-btn i { font-size: 13px !important; }

/* ── Collapsed rail overrides ── */
.icon-rail.collapsed .gp-brand-text { display: none !important; }
.icon-rail.collapsed .gp-brand { justify-content: center !important; padding: 10px 4px !important; min-height: 56px !important; }
.icon-rail.collapsed .rail-item b { display: none !important; }
.icon-rail.collapsed .rail-item { height: 42px !important; width: 46px !important; }
.icon-rail.collapsed .nav-separator { margin: 4px 8px !important; width: 38px !important; }
.icon-rail.collapsed .rail-language-control button { font-size: 8px !important; }
.icon-rail.collapsed .market-btn { font-size: 0 !important; min-height: 32px !important; }
.icon-rail.collapsed .market-btn::after { content: "\2699"; font-size: 14px !important; }
.icon-rail.collapsed .rail-language-control i.bi-globe2 { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   4. FONT HIERARCHY (Req 11)
   ═══════════════════════════════════════════════════════════════════ */

/* Page titles — 22px / 600 */
.page-title-area h1,
.workspace h1:not(.modal h1):not(dialog h1),
.page header h1 {
  font-size: var(--gp-fs-title) !important;
  font-weight: var(--gp-fw-title) !important;
  letter-spacing: -0.01em !important;
}

/* Subtitles — 12-13px / 400 */
.page-title-area .live-count,
.page header p,
.page .subtitle {
  font-size: var(--gp-fs-subtitle) !important;
  font-weight: var(--gp-fw-subtitle) !important;
}

/* Section headings — 15-16px / 600 */
h2, .card-head h2,
.section-title,
.stats-criteria-header h3 {
  font-size: var(--gp-fs-section) !important;
  font-weight: var(--gp-fw-section) !important;
}

/* Card titles — 13-14px / 600 */
.card h3, .dash-card h2,
.form-section-heading {
  font-size: var(--gp-fs-card) !important;
  font-weight: var(--gp-fw-card) !important;
}

/* Table headers — 11-12px / 500 */
.data-table th,
.overview-table th {
  font-size: var(--gp-fs-th) !important;
  font-weight: var(--gp-fw-th) !important;
}

/* Body / Table data — 12-13px / 400 */
body, .data-table td, .overview-table td,
p, li, label, span:not(.page-title-icon):not(.chip-count) {
  font-size: var(--gp-fs-body);
}

/* Buttons — 12px / 500 */
button, .btn, .toolbar-dropdown-btn,
.filter-chip, .side-link, .student-chip {
  font-size: var(--gp-fs-btn) !important;
  font-weight: var(--gp-fw-btn) !important;
}
/* Override for rail items (already set to 10px above) */
.rail-item, .rail-item b { font-size: 10px !important; font-weight: 400 !important; }
.rail-item button, .rail-language-control button { font-size: 10px !important; }

/* Helper text — 11px / 400 */
small, .helper, .action-note,
.pager span, .pager label,
.upload-hint, .form-grid small {
  font-size: var(--gp-fs-helper) !important;
  font-weight: var(--gp-fw-helper) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   5. BUTTONS — global restyle
   ═══════════════════════════════════════════════════════════════════ */
button.primary,
.btn.primary,
.blue-action {
  border: 1px solid var(--gp-brand) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-brand) !important;
  color: var(--gp-white) !important;
  padding: 8px 18px !important;
  font-size: var(--gp-fs-btn) !important;
  font-weight: var(--gp-fw-btn) !important;
  cursor: pointer !important;
  transition: background 0.15s !important;
}
button.primary:hover,
.blue-action:hover {
  background: var(--gp-brand-hover) !important;
}

/* Secondary / default buttons */
.list-toolbar button:not(.primary):not(.blue-action):not(.toolbar-dropdown-btn),
.toolbar-btn-columns,
.pager button,
.filter-unified-reset {
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important;
  color: #475569 !important;
  padding: 6px 14px !important;
  font-size: var(--gp-fs-btn) !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  transition: border-color 0.15s, color 0.15s, background 0.15s !important;
}
.list-toolbar button:not(.primary):not(.blue-action):hover,
.toolbar-btn-columns:hover,
.pager button:hover:not(:disabled) {
  border-color: var(--gp-brand) !important;
  color: var(--gp-brand) !important;
  background: var(--gp-white) !important;
}
.pager button:disabled {
  opacity: 0.4; cursor: default;
}

/* Destructive */
.destructive-action, .destructive-btn {
  border-color: #FCA5A5 !important;
  color: var(--gp-red) !important;
  background: var(--gp-white) !important;
}
.destructive-action:hover, .destructive-btn:hover {
  background: #FEF2F2 !important;
  border-color: var(--gp-red) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   6. INPUTS & SELECTS
   ═══════════════════════════════════════════════════════════════════ */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(.top-search input):not(.toolbar-search-input),
select,
textarea {
  height: 36px;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-sm) !important;
  padding: 0 12px !important;
  background: var(--gp-white) !important;
  font-size: var(--gp-fs-body) !important;
  color: var(--gp-text2) !important;
  outline: none !important;
  transition: border-color 0.15s !important;
}
textarea { height: auto; padding: 8px 12px !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--gp-brand) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--gp-muted2) !important;
}

/* Checkbox */
input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--gp-brand);
  cursor: pointer;
}

/* Search inputs in toolbar */
.toolbar-search-input {
  height: 34px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-sm) !important;
  padding: 0 14px !important;
  font-size: var(--gp-fs-body) !important;
  color: #334155 !important;
  background: var(--gp-white) !important;
  min-width: 200px !important;
  outline: none !important;
}
.toolbar-search-input:focus { border-color: var(--gp-brand) !important; }

/* Toolbar selects */
.toolbar-select {
  height: 34px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-sm) !important;
  padding: 0 8px !important;
  background: var(--gp-white) !important;
  font-size: var(--gp-fs-body) !important;
  color: #475569 !important;
  cursor: pointer !important;
}

/* Form-grid labels in dialogs */
.form-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--gp-fs-body) !important;
  font-weight: 400 !important;
  color: var(--gp-text2) !important;
}
.form-grid label input,
.form-grid label select,
.form-grid label textarea {
  width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════
   7. CARDS
   ═══════════════════════════════════════════════════════════════════ */
.dash-card,
.team-card,
.doc-panel,
.summary-cards > div,
.filter-card-unified {
  border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius) !important;
  background: var(--gp-white) !important;
  box-shadow: var(--gp-shadow) !important;
}

/* Card headers */
.card-head,
.dash-card .card-head,
.doc-panel > :first-child {
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.card-head h2 {
  margin: 0 !important;
  font-size: var(--gp-fs-card) !important;
  font-weight: var(--gp-fw-card) !important;
  color: var(--gp-text) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   8. TABLES — global (non-customer-specific)
   ═══════════════════════════════════════════════════════════════════ */
.table-shell {
  border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius) var(--gp-radius) 0 0 !important;
  background: var(--gp-white) !important;
  overflow: auto !important;
  box-shadow: var(--gp-shadow) !important;
}

.data-table:not(#customersTable) {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important;
}
.data-table:not(#customersTable) thead {
  position: sticky; top: 0; z-index: 2;
}
.data-table:not(#customersTable) th {
  height: 40px !important;
  padding: 0 12px !important;
  color: var(--gp-muted) !important;
  background: var(--gp-bg2) !important;
  font-size: var(--gp-fs-th) !important;
  font-weight: var(--gp-fw-th) !important;
  text-align: left !important;
  white-space: nowrap !important;
  border-bottom: 1px solid var(--gp-border2) !important;
  text-transform: none !important;
}
.data-table:not(#customersTable) td {
  height: 58px !important;
  padding: 6px 12px !important;
  color: var(--gp-text2) !important;
  font-size: var(--gp-fs-body) !important;
  border-bottom: 1px solid #F1F5F9 !important;
  vertical-align: middle !important;
}
.data-table:not(#customersTable) tbody tr:hover td {
  background: #F8FAFF !important;
}

/* ═══════════════════════════════════════════════════════════════════
   8b. CUSTOMER TABLE (Req 6) — fixed widths, horizontal scroll,
       header 40-42px, rows 58-60px, no stretch-to-fill
   ═══════════════════════════════════════════════════════════════════ */

/* Only applies to the main customer table, NOT customer-reference page
   (customer-reference.css handles that via body.gp-customer-redesign).
   These are for the customers page WITHOUT the reference redesign class. */
#customersTable {
  table-layout: fixed !important;
  min-width: 2654px !important; /* v4: sum of canonical column widths */
  width: 2654px !important;
  border-collapse: collapse !important;
}

#customersTable thead { position: sticky; top: 0; z-index: 2; }

#customersTable th {
  height: 40px !important;
  padding: 0 10px !important;
  color: var(--gp-muted) !important;
  background: var(--gp-bg2) !important;
  font-size: var(--gp-fs-th) !important;
  font-weight: var(--gp-fw-th) !important;
  text-align: left !important;
  white-space: nowrap !important;
  border-bottom: 1px solid var(--gp-border2) !important;
  text-transform: none !important;
}

#customersTable td {
  height: 58px !important;
  padding: 6px 10px !important;
  color: var(--gp-text2) !important;
  font-size: var(--gp-fs-body) !important;
  border-bottom: 1px solid #F1F5F9 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#customersTable tbody tr:hover td { background: #F8FAFF !important; }
#customersTable tbody tr.selected td { background: var(--gp-brand-bg) !important; }

/* Column widths for customer table (v4 checkpoint-1 canonical) */
#customersTable [data-col="_select"] { width: 44px !important; min-width: 44px !important; }
#customersTable [data-col="name"] { width: 185px !important; min-width: 185px !important; }
#customersTable [data-col="status"] { width: 125px !important; min-width: 125px !important; }
#customersTable [data-col="phone"] { width: 130px !important; min-width: 130px !important; }
#customersTable [data-col="email"] { width: 170px !important; min-width: 170px !important; }
#customersTable [data-col="wechat"] { width: 110px !important; min-width: 110px !important; }
#customersTable [data-col="dossier"] { width: 110px !important; min-width: 110px !important; }
#customersTable [data-col="address"] { width: 170px !important; min-width: 170px !important; }
#customersTable [data-col="postal_code"] { width: 100px !important; min-width: 100px !important; }
#customersTable [data-col="city"] { width: 130px !important; min-width: 130px !important; }
#customersTable [data-col="owner"] { width: 125px !important; min-width: 125px !important; }
#customersTable [data-col="contract_category"] { width: 190px !important; min-width: 190px !important; }
#customersTable [data-col="contracts_bought"] { width: 170px !important; min-width: 170px !important; }
#customersTable [data-col="need"] { width: 150px !important; min-width: 150px !important; }
#customersTable [data-col="source"] { width: 120px !important; min-width: 120px !important; }
#customersTable [data-col="followed_at"] { width: 115px !important; min-width: 115px !important; }
#customersTable [data-col="remark"] { width: 150px !important; min-width: 150px !important; }
#customersTable [data-col="created_at"],
#customersTable [data-col="updated_at"] { width: 112px !important; min-width: 112px !important; }
#customersTable [data-col="priority"] { width: 80px !important; min-width: 80px !important; }
#customersTable [data-col="_actions"] { width: 56px !important; min-width: 56px !important; }

/* Customers table shell — horizontal scroll (Req 6, 12) */
#customersPage .table-shell {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   9. MODALS & DIALOGS (Req 9) — all except customer detail
   ═══════════════════════════════════════════════════════════════════ */

/* Dialog backdrop */
dialog.modal:not(#profileDialog) {
  border: 0 !important;
  border-radius: var(--gp-radius) !important;
  padding: 0 !important;
  background: var(--gp-white) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
  max-width: 640px !important;
  width: 90vw !important;
  max-height: 85vh !important;
  overflow: hidden !important;
}
dialog.modal:not(#profileDialog)::backdrop {
  background: rgba(15,23,42,0.35) !important;
  backdrop-filter: blur(2px) !important;
}
dialog.wide-modal:not(#profileDialog) {
  max-width: 960px !important;
}

/* Modal card (form wrapper) */
dialog.modal:not(#profileDialog) .modal-card {
  display: flex !important;
  flex-direction: column !important;
  max-height: 85vh !important;
  overflow: hidden !important;
}

/* Modal head */
dialog.modal:not(#profileDialog) .modal-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
  flex-shrink: 0 !important;
}
dialog.modal:not(#profileDialog) .modal-head h2 {
  margin: 0 !important;
  font-size: var(--gp-fs-section) !important;
  font-weight: var(--gp-fw-section) !important;
  color: var(--gp-text) !important;
}
dialog.modal:not(#profileDialog) .modal-head button[data-close],
dialog.modal:not(#profileDialog) .modal-head .close-btn {
  width: 32px !important; height: 32px !important;
  border: 0 !important;
  border-radius: var(--gp-radius-xs) !important;
  background: transparent !important;
  color: var(--gp-muted2) !important;
  font-size: 18px !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background 0.15s !important;
}
dialog.modal:not(#profileDialog) .modal-head button[data-close]:hover,
dialog.modal:not(#profileDialog) .modal-head .close-btn:hover {
  background: #F1F5F9 !important;
  color: var(--gp-text) !important;
}

/* Modal body (form grid container — scrollable) */
dialog.modal:not(#profileDialog) .form-grid,
dialog.modal:not(#profileDialog) .modal-body {
  padding: 16px 20px !important;
  overflow-y: auto !important;
  flex: 1 !important;
}

/* Modal actions (sticky footer) */
dialog.modal:not(#profileDialog) .modal-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-top: 1px solid var(--gp-border2) !important;
  flex-shrink: 0 !important;
  background: var(--gp-white) !important;
}
dialog.modal:not(#profileDialog) .modal-actions button {
  height: 36px !important;
  padding: 0 20px !important;
  border-radius: var(--gp-radius-sm) !important;
  font-size: var(--gp-fs-btn) !important;
  font-weight: var(--gp-fw-btn) !important;
  cursor: pointer !important;
}
dialog.modal:not(#profileDialog) .modal-actions button:not(.primary):not(.destructive-btn) {
  border: 1px solid var(--gp-border3) !important;
  background: var(--gp-white) !important;
  color: #475569 !important;
}
dialog.modal:not(#profileDialog) .modal-actions button:not(.primary):not(.destructive-btn):hover {
  border-color: var(--gp-brand) !important;
  color: var(--gp-brand) !important;
}

/* Form section headings within modals */
dialog.modal:not(#profileDialog) .form-section-heading {
  grid-column: 1 / -1 !important;
  padding: 8px 0 4px !important;
  margin-top: 4px !important;
  font-size: var(--gp-fs-card) !important;
  font-weight: var(--gp-fw-card) !important;
  color: var(--gp-text) !important;
  border-bottom: 1px solid var(--gp-border) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   10. AVATAR CONSISTENCY (Req 4)
       Pale-blue outlined square, blue initials, NO random colors.
   ═══════════════════════════════════════════════════════════════════ */

/* Customer table avatar — pale-blue outlined square */
.customer-avatar,
.data-table .customer-avatar {
  width: 32px !important; height: 32px !important;
  border-radius: 6px !important;
  background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
  border: 1.5px solid var(--gp-brand) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  flex-shrink: 0 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

/* Override ALL color variants to use the same pale-blue */
.customer-avatar.av-1,
.customer-avatar.av-2,
.customer-avatar.av-3,
.customer-avatar.av-4,
.customer-avatar.av-5,
.customer-avatar.av-6,
.customer-avatar.av-7,
.customer-avatar.av-8 {
  background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
  border: 1.5px solid var(--gp-brand) !important;
}

/* Owner circle — also consistent blue */
.owner-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  background: #E0E7FF !important;
  color: #4338CA !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* Product page avatar */
.product-customer-avatar {
  width: 36px !important; height: 36px !important;
  border-radius: 6px !important;
  background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
  border: 1.5px solid var(--gp-brand) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   11. EMPTY & LOADING STATES
   ═══════════════════════════════════════════════════════════════════ */
.empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 60px 20px !important;
  text-align: center !important;
  color: var(--gp-muted) !important;
}
.empty-state .empty-illustration {
  width: 64px !important; height: 64px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-radius: var(--gp-radius) !important;
  background: var(--gp-bg2) !important;
  color: var(--gp-muted2) !important;
  font-size: 28px !important;
  margin-bottom: 16px !important;
}
.empty-state p {
  font-size: var(--gp-fs-body) !important;
  color: var(--gp-muted) !important;
  margin: 4px 0 !important;
}

/* Loading spinner */
.loading-spinner,
.spinner {
  width: 32px !important; height: 32px !important;
  border: 3px solid var(--gp-border3) !important;
  border-top-color: var(--gp-brand) !important;
  border-radius: 50% !important;
  animation: gp-spin 0.7s linear infinite !important;
}
@keyframes gp-spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════
   12. TOPBAR RESTYLING — white background, clean
   ═══════════════════════════════════════════════════════════════════ */
.topbar {
  background: var(--gp-white) !important;
  border-bottom: 1px solid var(--gp-border2) !important;
  color: var(--gp-text2) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   13. PAGER — match design language
   ═══════════════════════════════════════════════════════════════════ */
.pager {
  height: 58px !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border: 1px solid var(--gp-border) !important;
  border-top: 1px solid var(--gp-border2) !important;
  border-radius: 0 0 var(--gp-radius) var(--gp-radius) !important;
  background: var(--gp-white) !important;
  font-size: var(--gp-fs-helper) !important;
  flex-shrink: 0 !important;
}
.pager span { color: var(--gp-muted) !important; }
.pager span b { color: var(--gp-text2) !important; font-weight: 600 !important; }
.pager-fill { flex: 1 !important; }
.pager input {
  width: 48px !important;
  height: 30px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-xs) !important;
  text-align: center !important;
  font-size: 11px !important;
  color: var(--gp-text2) !important;
  outline: none !important;
}
.pager input:focus { border-color: var(--gp-brand) !important; }

/* ═══════════════════════════════════════════════════════════════════
   14. DASHBOARD PAGE
   ═══════════════════════════════════════════════════════════════════ */
#dashboardPage {
  padding: 20px 24px !important;
  overflow-y: auto !important;
  background: var(--gp-bg) !important;
}
.dash-tabs {
  display: flex !important;
  gap: 4px !important;
  margin-bottom: 16px !important;
}
.dash-tabs button {
  padding: 6px 18px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius) !important;
  background: var(--gp-white) !important;
  color: var(--gp-muted) !important;
  font-size: var(--gp-fs-btn) !important;
  cursor: pointer !important;
}
.dash-tabs button.active {
  background: var(--gp-brand) !important;
  color: var(--gp-white) !important;
  border-color: var(--gp-brand) !important;
}
.dash-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}
.dash-card {
  padding: 0 !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius) !important;
  background: var(--gp-white) !important;
  overflow: hidden !important;
}
.dash-card.span-2 { grid-column: span 2 !important; }
.dash-card .card-head {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
}
.dash-card .card-head h2 {
  font-size: var(--gp-fs-card) !important;
  font-weight: var(--gp-fw-card) !important;
  margin: 0 !important;
  color: var(--gp-text) !important;
  flex: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   15. PRODUCTS PAGE
   ═══════════════════════════════════════════════════════════════════ */
#productsPage {
  padding: 16px 20px !important;
  overflow-y: auto !important;
  background: var(--gp-bg) !important;
  display: none !important;
  flex-direction: column !important;
  gap: 12px !important;
  color: var(--gp-text2) !important;
}
#productsPage.active {
  display: flex !important;
}
/* Hide old oversized internal page title (shared header already says Produits) */
#productsPage .product-v2-header { display: none !important; }

/* ── Compact actions row ── */
.prod-actions {
  display: flex !important; align-items: center !important; gap: 8px !important;
  flex-wrap: wrap !important; flex-shrink: 0 !important;
}
.prod-actions button {
  height: 36px !important; min-height: 36px !important;
  padding: 0 16px !important;
  border-radius: var(--gp-radius-sm) !important;
  font-size: var(--gp-fs-btn) !important; font-weight: var(--gp-fw-btn) !important;
  cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  white-space: nowrap !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.prod-actions button.primary,
.prod-actions button#openQuote {
  border: 1px solid var(--gp-brand) !important;
  background: var(--gp-brand) !important; color: var(--gp-white) !important;
}
.prod-actions button.primary:hover,
.prod-actions button#openQuote:hover {
  background: var(--gp-brand-hover) !important;
}
.prod-actions button:not(.primary):not(#openQuote) {
  border: 1px solid var(--gp-border3) !important;
  background: var(--gp-white) !important; color: #475569 !important;
}
.prod-actions button:not(.primary):not(#openQuote):hover {
  border-color: var(--gp-brand) !important; color: var(--gp-brand) !important;
}
.prod-actions button i { font-size: 15px !important; line-height: 1 !important; }

/* ── Cards ── */
#productsPage .prod-card {
  border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius) !important;
  background: var(--gp-white) !important;
  box-shadow: var(--gp-shadow) !important;
  padding: 12px 16px !important; flex-shrink: 0 !important;
}

/* ── Customer context card ── */
.prod-customer-top {
  display: flex !important; align-items: center !important; gap: 16px !important;
  flex-wrap: wrap !important;
}
.prod-customer-top .product-customer-avatar {
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-brand-bg) !important; color: var(--gp-brand) !important;
  border: 1.5px solid var(--gp-brand) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase !important;
}
.prod-customer-top .product-customer-select-wrap {
  flex: 1 !important; min-width: 200px !important;
  display: flex !important; flex-direction: column !important; gap: 4px !important;
  position: relative !important;
}
.prod-customer-top .product-customer-select-wrap > span {
  font-size: 11px !important; font-weight: 500 !important; color: var(--gp-muted) !important;
  text-transform: uppercase !important; letter-spacing: 0.03em !important;
}
.prod-customer-top .product-customer-searchbox {
  display: flex !important; align-items: center !important;
  height: 36px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important; overflow: hidden !important;
  transition: border-color 0.15s !important;
}
.prod-customer-top .product-customer-searchbox:focus-within {
  border-color: var(--gp-brand) !important;
}
.prod-customer-top .product-customer-searchbox > i {
  flex-shrink: 0 !important; width: 36px !important; height: 36px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 14px !important; color: var(--gp-muted2) !important; pointer-events: none !important;
}
.prod-customer-top .product-customer-searchbox input {
  flex: 1 !important; height: 100% !important;
  border: 0 !important; outline: 0 !important; padding: 0 8px 0 0 !important;
  background: transparent !important;
  font-size: var(--gp-fs-body) !important; color: var(--gp-text2) !important; min-width: 0 !important;
}
.prod-customer-top .product-customer-searchbox input::placeholder { color: var(--gp-muted2) !important; }
.prod-customer-top .product-customer-searchbox button {
  width: 34px !important; height: 34px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: var(--gp-muted) !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.prod-customer-top .product-customer-searchbox button:hover { color: var(--gp-brand) !important; }
.prod-customer-top .product-customer-results {
  position: absolute !important; top: calc(100% + 4px) !important;
  left: 0 !important; right: 0 !important; max-height: 260px !important; overflow-y: auto !important;
  border: 1px solid var(--gp-border) !important; border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important; z-index: 50 !important;
}
.prod-customer-top .product-customer-results[hidden] { display: none !important; }
.prod-customer-top .product-customer-results button {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  width: 100% !important; padding: 8px 12px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: var(--gp-text2) !important;
  font-size: var(--gp-fs-body) !important; text-align: left !important; cursor: pointer !important;
  transition: background 0.1s !important;
}
.prod-customer-top .product-customer-results button:hover,
.prod-customer-top .product-customer-results button.active {
  background: var(--gp-brand-bg) !important; color: var(--gp-brand) !important;
}
.prod-customer-top .product-customer-results button span {
  font-weight: 500 !important; font-size: var(--gp-fs-body) !important; color: inherit !important;
}
.prod-customer-top .product-customer-results button small {
  font-size: 11px !important; color: var(--gp-muted) !important;
  flex-shrink: 0 !important; margin-left: 12px !important;
}
.product-customer-no-result {
  padding: 12px !important; color: var(--gp-muted) !important;
  font-size: 12px !important; text-align: center !important;
}
.prod-customer-top .product-customer-need {
  display: flex !important; flex-direction: column !important; gap: 3px !important;
  min-width: 120px !important; flex-shrink: 0 !important;
}
.prod-customer-top .product-customer-need span {
  font-size: 11px !important; font-weight: 500 !important; color: var(--gp-muted) !important;
  text-transform: uppercase !important; letter-spacing: 0.03em !important;
}
.prod-customer-top .product-customer-need strong {
  font-size: 13px !important; font-weight: 600 !important; color: var(--gp-text) !important;
}
.prod-customer-top .product-customer-need span em { display: none !important; }
.prod-customer-top .product-customer-actions {
  display: flex !important; align-items: center !important; gap: 6px !important; flex-shrink: 0 !important;
}
.prod-customer-top .product-customer-actions button {
  height: 32px !important; min-height: 32px !important; padding: 0 12px !important;
  border: 1px solid var(--gp-border3) !important; border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important; color: #475569 !important;
  font-size: 12px !important; font-weight: 400 !important; cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  white-space: nowrap !important; transition: border-color 0.15s, color 0.15s !important;
}
.prod-customer-top .product-customer-actions button:hover {
  border-color: var(--gp-brand) !important; color: var(--gp-brand) !important;
}
.prod-customer-top .product-customer-actions button i { font-size: 13px !important; }

/* ── Filters card ── */
.prod-filters-row {
  display: flex !important; align-items: center !important; gap: 8px !important;
  flex-wrap: wrap !important;
}
.prod-search {
  display: flex !important; align-items: center !important;
  height: 36px !important; min-width: 220px !important;
  border: 1px solid var(--gp-border3) !important; border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important; overflow: hidden !important;
  transition: border-color 0.15s !important; flex: 1 !important;
}
.prod-search:focus-within { border-color: var(--gp-brand) !important; }
.prod-search i {
  flex-shrink: 0 !important; width: 34px !important; height: 34px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 14px !important; color: var(--gp-muted2) !important; pointer-events: none !important;
}
.prod-search input {
  flex: 1 !important; height: 100% !important; border: 0 !important; outline: 0 !important;
  padding: 0 10px 0 0 !important; background: transparent !important;
  font-size: var(--gp-fs-body) !important; color: var(--gp-text2) !important; min-width: 0 !important;
}
.prod-search input::placeholder { color: var(--gp-muted2) !important; }
.prod-filters-row select {
  height: 36px !important; min-height: 36px !important;
  border: 1px solid var(--gp-border3) !important; border-radius: var(--gp-radius-sm) !important;
  padding: 0 30px 0 10px !important; background: var(--gp-white) !important;
  font-size: var(--gp-fs-body) !important; color: #475569 !important;
  cursor: pointer !important; outline: none !important;
  flex-shrink: 0 !important; min-width: 130px !important;
}
.prod-filters-row select:focus { border-color: var(--gp-brand) !important; }
.prod-filters-row button {
  height: 36px !important; min-height: 36px !important; padding: 0 14px !important;
  border: 1px solid var(--gp-border3) !important; border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important; color: #475569 !important;
  font-size: var(--gp-fs-body) !important; font-weight: 400 !important; cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
  transition: border-color 0.15s, color 0.15s !important;
}
.prod-filters-row button:hover { border-color: var(--gp-brand) !important; color: var(--gp-brand) !important; }
.prod-filters-row button i { font-size: 13px !important; }

/* ── Result badge ── */
.prod-result-badge {
  font-size: var(--gp-fs-helper) !important;
  font-weight: 500 !important;
  color: var(--gp-muted) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
.prod-result-badge span {
  font-weight: 600 !important;
  color: var(--gp-text2) !important;
}

/* ── Selection summary in actions row ── */
.prod-selection-summary {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-left: auto !important;
  padding: 0 4px 0 10px !important;
  font-size: var(--gp-fs-helper) !important;
  font-weight: 500 !important;
  color: var(--gp-text2) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.prod-selection-summary[hidden],
.prod-compare-tray[hidden] {
  display: none !important;
}
.prod-selection-summary span {
  font-weight: 600 !important;
  color: var(--gp-brand) !important;
}
.prod-selection-summary button {
  width: 24px !important; height: 24px !important; min-height: 24px !important;
  padding: 0 !important;
  border: 0 !important; border-radius: 50% !important;
  background: transparent !important; color: var(--gp-muted) !important;
  cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.prod-selection-summary button:hover {
  background: #FEE2E2 !important; color: var(--gp-red) !important;
}
.prod-selection-summary button i { font-size: 11px !important; }

/* ── Split layout: catalog + detail ── */
.prod-layout {
  display: flex !important; gap: 12px !important;
  flex: 1 !important; min-height: 0 !important; overflow: hidden !important;
}
.prod-catalog {
  flex: 1 1 0% !important; min-width: 0 !important;
  display: flex !important; flex-direction: column !important; overflow: hidden !important;
}
.prod-table-wrap {
  flex: 1 !important; min-height: 0 !important; overflow: auto !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius) var(--gp-radius) 0 0 !important;
  background: var(--gp-white) !important; box-shadow: var(--gp-shadow) !important;
}
.prod-table { width: 100% !important; border-collapse: collapse !important; table-layout: fixed !important; }
.prod-table thead { position: sticky !important; top: 0 !important; z-index: 2 !important; }
.prod-table th {
  height: 40px !important; padding: 0 12px !important;
  color: var(--gp-muted) !important; background: var(--gp-bg2) !important;
  font-size: var(--gp-fs-th) !important; font-weight: var(--gp-fw-th) !important;
  text-align: left !important; white-space: nowrap !important;
  border-bottom: 1px solid var(--gp-border2) !important; text-transform: none !important;
}
.prod-table th.product-check-col { width: 44px !important; }
.prod-table th:nth-child(2) { width: auto !important; }
.prod-table th:nth-child(3) { width: 130px !important; }
.prod-table th:nth-child(4) { width: 200px !important; }
.prod-table th:nth-child(5) { width: 110px !important; }
.prod-table th:nth-child(6) { width: 130px !important; }
.prod-table td {
  height: 58px !important; padding: 6px 12px !important;
  color: var(--gp-text2) !important; font-size: var(--gp-fs-body) !important;
  border-bottom: 1px solid #F1F5F9 !important; vertical-align: middle !important; cursor: pointer !important;
}
.prod-table tbody tr:hover td { background: #F8FAFF !important; }
.prod-table tbody tr.selected td { background: var(--gp-brand-bg) !important; }
.prod-table td.product-check-col { text-align: center !important; }
.prod-table td.product-check-col input[type="checkbox"] {
  width: 15px !important; height: 15px !important;
  accent-color: var(--gp-brand) !important; cursor: pointer !important;
}

/* Product name cell */
.product-name-cell { display: flex !important; align-items: center !important; gap: 10px !important; }
.product-name-cell span { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
.product-name-cell b {
  font-size: 13px !important; font-weight: 600 !important; color: var(--gp-text) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.product-name-cell small {
  font-size: 11px !important; font-weight: 400 !important; color: var(--gp-muted) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.product-match-cell { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.product-match-cell small {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  color: var(--gp-muted) !important;
  line-height: 1.3 !important;
}

/* Match badges */
.product-match {
  display: inline-block !important; padding: 2px 8px !important; border-radius: 4px !important;
  font-size: 11px !important; font-weight: 500 !important; white-space: nowrap !important;
  line-height: 1.5 !important; width: fit-content !important;
}
.product-match.recommended { background: #DCFCE7 !important; color: #166534 !important; }
.product-match.needs-data { background: #FEF3C7 !important; color: #92400E !important; }
.product-match.basic { background: #F1F5F9 !important; color: #475569 !important; }

/* Mode badge */
.product-mode {
  display: inline-block !important; padding: 2px 8px !important;
  border: 1px solid var(--gp-border3) !important; border-radius: 4px !important;
  font-size: 11px !important; font-weight: 500 !important; color: #475569 !important;
  background: var(--gp-bg3) !important; white-space: nowrap !important;
}

/* Premium cell */
.product-premium strong { font-size: 13px !important; font-weight: 600 !important; color: var(--gp-text) !important; white-space: nowrap !important; }
.product-premium small { display: block !important; font-size: 10px !important; color: var(--gp-muted2) !important; }

/* Carrier logo */
.product-carrier-logo {
  width: 32px !important; height: 32px !important; border-radius: 6px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; font-size: 14px !important;
}
.product-carrier-logo.large { width: 40px !important; height: 40px !important; font-size: 18px !important; }
.product-generic-logo {
  background: var(--gp-brand-bg) !important; color: var(--gp-brand) !important;
  border: 1.5px solid var(--gp-brand) !important;
}

/* Empty table */
.product-table-empty {
  text-align: center !important; padding: 32px 16px !important;
  color: var(--gp-muted) !important; font-size: var(--gp-fs-body) !important;
}

/* List footer / pagination */
.prod-list-footer {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  height: 52px !important; min-height: 52px !important; padding: 0 16px !important;
  border: 1px solid var(--gp-border) !important;
  border-top: 1px solid var(--gp-border2) !important;
  border-radius: 0 0 var(--gp-radius) var(--gp-radius) !important;
  background: var(--gp-white) !important; flex-shrink: 0 !important;
}
.product-list-summary {
  display: flex !important; align-items: center !important; gap: 8px !important;
  font-size: var(--gp-fs-helper) !important; color: var(--gp-muted) !important;
}
.product-list-summary b { font-weight: 600 !important; color: var(--gp-text2) !important; }
.product-list-summary select {
  height: 30px !important; border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-xs) !important; padding: 0 6px !important;
  font-size: 11px !important; color: #475569 !important;
  background: var(--gp-white) !important; cursor: pointer !important;
}
.product-pagination { display: flex !important; align-items: center !important; gap: 4px !important; }
.product-pagination button {
  height: 30px !important; min-width: 30px !important; padding: 0 8px !important;
  border: 1px solid var(--gp-border3) !important; border-radius: var(--gp-radius-xs) !important;
  background: var(--gp-white) !important; color: #475569 !important;
  font-size: 12px !important; cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  transition: border-color 0.15s, color 0.15s !important;
}
.product-pagination button:hover:not(:disabled) { border-color: var(--gp-brand) !important; color: var(--gp-brand) !important; }
.product-pagination button.active {
  background: var(--gp-brand) !important; border-color: var(--gp-brand) !important; color: var(--gp-white) !important;
}
.product-pagination button:disabled { opacity: 0.35 !important; cursor: default !important; }
.product-pagination span { padding: 0 4px !important; color: var(--gp-muted2) !important; font-size: 12px !important; }
#productPageNumbers { display: flex !important; align-items: center !important; gap: 3px !important; }

/* ── Detail panel ── */
.prod-detail {
  width: 380px !important; min-width: 320px !important; max-width: 420px !important;
  flex-shrink: 0 !important; overflow-y: auto !important; overflow-x: hidden !important;
  border: 1px solid var(--gp-border) !important; border-radius: var(--gp-radius) !important;
  background: var(--gp-white) !important; box-shadow: var(--gp-shadow) !important;
}
.product-detail-actions {
  flex-wrap: wrap !important;
}
.product-detail-actions button {
  flex: 1 1 160px !important;
  min-width: 0 !important;
  white-space: normal !important;
}
.product-detail-head { padding: 16px !important; border-bottom: 1px solid var(--gp-border2) !important; }
.product-detail-head > div { display: flex !important; align-items: flex-start !important; gap: 12px !important; }
.product-detail-head h2 { margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: var(--gp-text) !important; line-height: 1.3 !important; }
.product-detail-head span { display: block !important; font-size: 12px !important; color: var(--gp-muted) !important; margin-top: 2px !important; }
.product-detail-head .product-match { margin-top: 6px !important; }
.product-detail-section { padding: 14px 16px !important; border-bottom: 1px solid #F1F5F9 !important; }
.product-detail-section:last-of-type { border-bottom: 0 !important; }
.product-detail-section.two-col { display: flex !important; gap: 16px !important; }
.product-detail-section.two-col > div { flex: 1 !important; min-width: 0 !important; }
.product-detail-section h3 { margin: 0 0 8px !important; font-size: var(--gp-fs-card) !important; font-weight: 600 !important; color: var(--gp-text) !important; }
.product-detail-section ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.product-detail-section ul li {
  padding: 3px 0 3px 16px !important; font-size: 12px !important; color: var(--gp-text2) !important;
  position: relative !important; line-height: 1.5 !important;
}
.product-detail-section ul li::before {
  content: "" !important; position: absolute !important; left: 0 !important; top: 9px !important;
  width: 6px !important; height: 6px !important; border-radius: 50% !important;
  background: var(--gp-brand) !important; opacity: 0.5 !important;
}
.product-check-list li::before { background: var(--gp-green) !important; opacity: 0.7 !important; }
.product-detail-section dl { margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.product-detail-section dl div { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 8px !important; }
.product-detail-section dt { font-size: 12px !important; color: var(--gp-muted) !important; flex-shrink: 0 !important; }
.product-detail-section dd { font-size: 12px !important; font-weight: 500 !important; color: var(--gp-text2) !important; text-align: right !important; }
.product-progress {
  display: inline-block !important; width: 60px !important; height: 4px !important; border-radius: 2px !important;
  background: var(--gp-border3) !important; vertical-align: middle !important;
  margin-left: 6px !important; overflow: hidden !important;
}
.product-progress i { display: block !important; height: 100% !important; border-radius: 2px !important; background: var(--gp-brand) !important; font-style: normal !important; font-size: 0 !important; line-height: 0 !important; color: transparent !important; }
.product-detail-meta { display: flex !important; gap: 0 !important; padding: 10px 16px !important; border-top: 1px solid var(--gp-border2) !important; border-bottom: 1px solid var(--gp-border2) !important; }
.product-detail-meta div { flex: 1 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; }
.product-detail-meta div + div { border-left: 1px solid var(--gp-border2) !important; padding-left: 14px !important; }
.product-detail-meta span { font-size: 10px !important; color: var(--gp-muted2) !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; }
.product-detail-meta strong { font-size: 12px !important; font-weight: 500 !important; color: var(--gp-text2) !important; }
.product-reference-note {
  margin: 0 !important; padding: 10px 16px !important; font-size: 11px !important;
  color: var(--gp-muted) !important; line-height: 1.5 !important;
  background: #FFFBEB !important; border-bottom: 1px solid #FEF3C7 !important;
}
.product-reference-note i { color: var(--gp-yellow) !important; margin-right: 4px !important; font-size: 12px !important; }
.product-detail-actions { display: flex !important; gap: 8px !important; padding: 12px 16px !important; }
.product-detail-actions button {
  flex: 1 !important; height: 36px !important; min-height: 36px !important; padding: 0 12px !important;
  border-radius: var(--gp-radius-sm) !important; font-size: var(--gp-fs-btn) !important;
  font-weight: var(--gp-fw-btn) !important; cursor: pointer !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  gap: 5px !important; white-space: nowrap !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.product-detail-actions button.primary {
  border: 1px solid var(--gp-brand) !important; background: var(--gp-brand) !important; color: var(--gp-white) !important;
}
.product-detail-actions button.primary:hover { background: var(--gp-brand-hover) !important; }
.product-detail-actions button.secondary {
  border: 1px solid var(--gp-border3) !important; background: var(--gp-white) !important; color: #475569 !important;
}
.product-detail-actions button.secondary:hover { border-color: var(--gp-brand) !important; color: var(--gp-brand) !important; }
.product-detail-empty {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  justify-content: center !important; padding: 48px 20px !important; text-align: center !important; height: 100% !important;
}
.product-detail-empty i { font-size: 40px !important; color: var(--gp-muted2) !important; margin-bottom: 12px !important; }
.product-detail-empty strong { font-size: 13px !important; font-weight: 500 !important; color: var(--gp-muted) !important; margin-bottom: 4px !important; }
.product-detail-empty span { font-size: 12px !important; color: var(--gp-muted2) !important; }

/* ── Compare tray ── */
.prod-compare-tray {
  display: flex !important; align-items: center !important; gap: 12px !important;
  min-height: 52px !important; padding: 8px 16px !important;
  border: 1px solid var(--gp-border) !important; border-radius: var(--gp-radius) !important;
  background: var(--gp-white) !important; box-shadow: 0 -2px 8px rgba(0,0,0,0.04) !important;
  flex-shrink: 0 !important; flex-wrap: wrap !important;
}
.prod-compare-tray > strong { font-size: 12px !important; font-weight: 600 !important; color: var(--gp-text) !important; white-space: nowrap !important; flex-shrink: 0 !important; }
.prod-compare-tray > strong span { color: var(--gp-brand) !important; }
.prod-compare-tray > button {
  height: 32px !important; min-height: 32px !important; padding: 0 12px !important;
  border: 1px solid var(--gp-border3) !important; border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important; color: #475569 !important; font-size: 12px !important;
  cursor: pointer !important; white-space: nowrap !important; flex-shrink: 0 !important;
  transition: border-color 0.15s, color 0.15s !important;
}
.prod-compare-tray > button:hover { border-color: var(--gp-brand) !important; color: var(--gp-brand) !important; }
.prod-compare-tray > button.primary {
  border-color: var(--gp-brand) !important; background: var(--gp-brand) !important;
  color: var(--gp-white) !important; margin-left: auto !important;
}
.prod-compare-tray > button.primary:hover { background: var(--gp-brand-hover) !important; }
.prod-compare-tray > button.primary:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }
.product-compare-items { display: flex !important; align-items: center !important; gap: 6px !important; flex: 1 !important; min-width: 0 !important; overflow-x: auto !important; }
.product-compare-placeholder { font-size: 12px !important; color: var(--gp-muted2) !important; white-space: nowrap !important; }
.product-compare-chip {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  padding: 3px 10px 3px 4px !important; border: 1px solid var(--gp-border3) !important;
  border-radius: 20px !important; background: var(--gp-bg3) !important;
  white-space: nowrap !important; flex-shrink: 0 !important;
}
.product-compare-chip .product-carrier-logo { width: 24px !important; height: 24px !important; font-size: 11px !important; border-radius: 4px !important; }
.product-compare-chip > span { display: flex !important; flex-direction: column !important; gap: 0 !important; line-height: 1.2 !important; }
.product-compare-chip b { font-size: 11px !important; font-weight: 600 !important; color: var(--gp-text2) !important; }
.product-compare-chip small { font-size: 10px !important; color: var(--gp-muted) !important; }
.product-compare-chip button {
  width: 18px !important; height: 18px !important; border: 0 !important; border-radius: 50% !important;
  background: var(--gp-border3) !important; color: var(--gp-muted) !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 10px !important; padding: 0 !important; transition: background 0.15s, color 0.15s !important;
}
.product-compare-chip button:hover { background: #FCA5A5 !important; color: var(--gp-red) !important; }

/* ── Compare dialog ── */
.product-compare-dialog {
  border: 0 !important; border-radius: var(--gp-radius) !important; padding: 0 !important;
  background: var(--gp-white) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
  max-width: 900px !important; width: 90vw !important; max-height: 85vh !important; overflow: hidden !important;
}
.product-compare-dialog::backdrop { background: rgba(15,23,42,0.35) !important; backdrop-filter: blur(2px) !important; }
.product-compare-dialog > header {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  padding: 14px 18px !important; border-bottom: 1px solid var(--gp-border2) !important; flex-shrink: 0 !important;
}
.product-compare-dialog > header small { font-size: 11px !important; color: var(--gp-muted) !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }
.product-compare-dialog h2 { margin: 2px 0 0 !important; font-size: var(--gp-fs-section) !important; font-weight: var(--gp-fw-section) !important; color: var(--gp-text) !important; }
.product-compare-dialog > header button {
  width: 32px !important; height: 32px !important; border: 0 !important; border-radius: var(--gp-radius-xs) !important;
  background: transparent !important; color: var(--gp-muted2) !important; font-size: 18px !important;
  cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background 0.15s !important;
}
.product-compare-dialog > header button:hover { background: #F1F5F9 !important; color: var(--gp-text) !important; }
.product-compare-grid { display: flex !important; gap: 12px !important; padding: 16px !important; overflow-x: auto !important; }
.product-compare-grid article {
  flex: 1 !important; min-width: 200px !important; border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius-sm) !important; background: var(--gp-white) !important;
  padding: 16px !important; text-align: center !important; box-shadow: var(--gp-shadow) !important;
}
.product-compare-grid h3 { margin: 10px 0 4px !important; font-size: 13px !important; font-weight: 600 !important; color: var(--gp-text) !important; }
.product-compare-grid article > span { font-size: 12px !important; color: var(--gp-muted) !important; }
.product-compare-grid hr { border: 0 !important; border-top: 1px solid var(--gp-border2) !important; margin: 12px 0 !important; }
.product-compare-grid dl { text-align: left !important; display: flex !important; flex-direction: column !important; gap: 8px !important; }
.product-compare-grid dl div { display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: 8px !important; }
.product-compare-grid dt { font-size: 11px !important; color: var(--gp-muted) !important; flex-shrink: 0 !important; }
.product-compare-grid dd { font-size: 12px !important; font-weight: 500 !important; color: var(--gp-text2) !important; text-align: right !important; }
.product-compare-grid article > button {
  width: 100% !important; height: 36px !important; margin-top: 12px !important;
  border: 1px solid var(--gp-brand) !important; border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-brand) !important; color: var(--gp-white) !important;
  font-size: var(--gp-fs-btn) !important; font-weight: var(--gp-fw-btn) !important;
  cursor: pointer !important; transition: background 0.15s !important;
}
.product-compare-grid article > button:hover { background: var(--gp-brand-hover) !important; }

/* ── Simplify insurance badges (tone down colored pictograms) ── */
#productsPage .insurance-badge {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 2px 8px 2px 3px !important; border-radius: 4px !important;
  font-size: 11px !important; font-weight: 500 !important; white-space: nowrap !important;
  border: 1px solid var(--gp-border3) !important; background: var(--gp-white) !important;
}
#productsPage .insurance-mark {
  width: 20px !important; height: 20px !important; min-width: 20px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border-radius: 4px !important; background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
}
#productsPage .insurance-mark svg {
  width: 12px !important; height: 12px !important;
  fill: none !important; stroke: currentColor !important;
}
#productsPage .insurance-badge.type-auto .insurance-mark,
#productsPage .insurance-badge.type-home .insurance-mark,
#productsPage .insurance-badge.type-health .insurance-mark,
#productsPage .insurance-badge.type-accident .insurance-mark,
#productsPage .insurance-badge.type-life .insurance-mark,
#productsPage .insurance-badge.type-pension .insurance-mark,
#productsPage .insurance-badge.type-saving .insurance-mark,
#productsPage .insurance-badge.type-group .insurance-mark,
#productsPage .insurance-badge.type-other .insurance-mark {
  background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
}

/* ── Override old products-workspace-active layout styles ── */
body.products-workspace-active #productsPage { display: flex !important; }
body.products-workspace-active .product-v2-header,
body.products-workspace-active .product-v2-filters,
body.products-workspace-active .product-customer-strip,
body.products-workspace-active .product-v2-layout { display: none !important; }
body.products-workspace-active #productsPage .prod-actions,
body.products-workspace-active #productsPage .prod-card,
body.products-workspace-active #productsPage .prod-layout,
body.products-workspace-active #productsPage .prod-compare-tray { display: flex !important; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .prod-layout { flex-direction: column !important; }
  .prod-detail { width: 100% !important; max-width: none !important; max-height: 360px !important; }
  .product-detail-section.two-col { flex-direction: column !important; gap: 10px !important; }
}
@media (max-width: 768px) {
  #productsPage { padding: 10px 12px !important; gap: 8px !important; }
  .prod-actions { gap: 6px !important; }
  .prod-actions button { height: 32px !important; min-height: 32px !important; padding: 0 10px !important; font-size: 11px !important; }
  .prod-customer-top { gap: 10px !important; }
  .prod-filters-row { gap: 6px !important; }
  .prod-filters-row select { min-width: 100px !important; font-size: 11px !important; }
  .prod-search { min-width: 160px !important; }
  .product-compare-dialog { max-width: 98vw !important; }
  .product-compare-grid { flex-direction: column !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   16. CONTRACTS PAGE
   ═══════════════════════════════════════════════════════════════════ */
#contractsPage {
  padding: 16px 20px !important;
  overflow-y: auto !important;
  background: var(--gp-bg) !important;
  display: none !important;
  flex-direction: column !important;
  gap: 12px !important;
}
#contractsPage.active {
  display: flex !important;
}

/* ── Toolbar card ── */
.contracts-toolbar-card {
  border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius) !important;
  background: var(--gp-white) !important;
  box-shadow: var(--gp-shadow) !important;
  padding: 12px 16px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.contracts-toolbar-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.contracts-actions-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-height: 36px !important;
}

/* ── Inline tabs (replaces old .tabs .tab) ── */
.contracts-tabs-inline {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  flex: 1 !important;
}
.contracts-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important;
  color: #475569 !important;
  font-size: var(--gp-fs-btn) !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.contracts-tab i { font-size: 14px !important; }
.contracts-tab:hover {
  border-color: var(--gp-brand) !important;
  color: var(--gp-brand) !important;
}
.contracts-tab.active {
  background: var(--gp-brand) !important;
  color: var(--gp-white) !important;
  border-color: var(--gp-brand) !important;
}
.contracts-tab-count {
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  min-width: 18px !important;
  height: 18px !important;
  line-height: 18px !important;
  text-align: center !important;
  border-radius: 9px !important;
  padding: 0 5px !important;
  background: rgba(255,255,255,0.25) !important;
}
.contracts-tab:not(.active) .contracts-tab-count {
  background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
}

/* ── Search wrap ── */
.contracts-search-wrap {
  display: flex !important;
  align-items: center !important;
  height: 36px !important;
  min-width: 220px !important;
  max-width: 320px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important;
  overflow: hidden !important;
  transition: border-color 0.15s !important;
}
.contracts-search-wrap:focus-within { border-color: var(--gp-brand) !important; }
.contracts-search-wrap i {
  flex-shrink: 0 !important;
  width: 34px !important; height: 34px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 14px !important; color: var(--gp-muted2) !important; pointer-events: none !important;
}

/* Contract workspace: keep status, actions and search on one readable row. */
#contractsPage .contracts-toolbar-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
}
#contractsPage .contracts-toolbar-row,
#contractsPage .contracts-actions-row {
  display: contents !important;
}
#contractsPage .contracts-tabs-inline {
  order: 1;
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
}
#contractsPage #newPolicyBtn,
#contractsPage #renewalWorkspaceBtn,
#contractsPage #policyDocsDropdown,
#contractsPage #policyImportExportDropdown {
  order: 2;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
#contractsPage .contracts-spacer {
  display: none !important;
}
#contractsPage .contracts-search-wrap {
  order: 3;
  flex: 0 0 300px !important;
  margin-left: auto !important;
}
#contractsPage .contracts-result-summary {
  order: 4;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Product matching: structured customer context with an inline, working need editor. */
body.products-workspace-active #productsPage .prod-card:has(.prod-customer-top),
#productsPage .prod-card:has(.prod-customer-top) {
  display: block !important;
  padding: 14px 16px !important;
}
#productsPage .prod-customer-top {
  display: grid !important;
  grid-template-columns: 44px minmax(300px, 1.3fr) minmax(220px, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
}
#productsPage .product-customer-avatar {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid var(--gp-brand) !important;
  border-radius: 10px !important;
  background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
  font-weight: 400 !important;
}
#productsPage .product-customer-select-wrap,
#productsPage .product-customer-need {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
}
#productsPage .product-customer-select-wrap > span,
#productsPage .product-customer-need > span,
#productsPage .product-need-editor label > span {
  color: var(--gp-muted) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  text-transform: none !important;
}
#productsPage .product-customer-searchbox {
  width: 100% !important;
}
#productsPage .product-customer-meta {
  min-height: 16px;
  color: var(--gp-muted) !important;
  font-size: 11px !important;
  white-space: normal !important;
}
#productsPage .product-customer-need strong {
  width: 100%;
  color: var(--gp-text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
#productsPage .product-customer-actions {
  display: flex !important;
  gap: 8px !important;
  white-space: nowrap !important;
}
#productsPage .product-need-editor[hidden] {
  display: none !important;
}
#productsPage .product-need-editor {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) auto !important;
  align-items: end !important;
  gap: 12px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--gp-border2) !important;
}
#productsPage .product-need-editor label {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
#productsPage .product-need-editor input {
  width: 100% !important;
  height: 36px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-sm) !important;
  padding: 0 11px !important;
  font: inherit !important;
  outline: none !important;
}
#productsPage .product-need-editor input:focus {
  border-color: var(--gp-brand) !important;
  box-shadow: 0 0 0 3px rgba(11, 99, 246, .08) !important;
}
#productsPage .product-need-editor-actions {
  display: flex !important;
  gap: 8px !important;
}
#productsPage .prod-card:has(.prod-customer-top) {
  position: relative !important;
  overflow: visible !important;
}
#productsPage .prod-card:has(.prod-customer-top).is-editing {
  border-color: #9FC0F8 !important;
  box-shadow: 0 0 0 3px rgba(11, 99, 246, .08) !important;
}
#productsPage .product-customer-actions {
  position: relative !important;
  z-index: 4 !important;
  pointer-events: auto !important;
}
#productsPage .product-customer-actions button {
  pointer-events: auto !important;
}
#productsPage .product-customer-actions button:focus-visible,
#productsPage .product-need-editor-actions button:focus-visible {
  outline: 2px solid var(--gp-brand) !important;
  outline-offset: 2px !important;
}
#productsPage .product-customer-actions button:disabled,
#productsPage .product-need-editor-actions button:disabled {
  cursor: not-allowed !important;
  opacity: .5 !important;
}
#productsPage .product-customer-actions button.is-confirming {
  border-color: #F59E0B !important;
  background: #FFFBEB !important;
  color: #92400E !important;
}

/* Product catalog: balanced columns and complete, readable product copy. */
#productsPage .prod-table {
  min-width: 1040px !important;
}
#productsPage .prod-table th:nth-child(2) { width: 31% !important; }
#productsPage .prod-table th:nth-child(3) { width: 14% !important; }
#productsPage .prod-table th:nth-child(4) { width: 23% !important; }
#productsPage .prod-table th:nth-child(5) { width: 11% !important; }
#productsPage .prod-table th:nth-child(6) { width: 17% !important; }
#productsPage .prod-table td {
  height: auto !important;
  min-height: 58px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
#productsPage .product-name-cell {
  align-items: flex-start !important;
}
#productsPage .product-name-cell b,
#productsPage .product-name-cell small,
#productsPage .product-match-cell small {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#productsPage .product-match-cell {
  gap: 5px !important;
}
@media (max-width: 980px) {
  #productsPage .prod-customer-top {
    grid-template-columns: 44px minmax(240px, 1fr) auto !important;
  }
  #productsPage .product-customer-need {
    grid-column: 2 / 3;
  }
  #productsPage .product-customer-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

/* Confirmed product workspace redesign. */
#productsPage .product-customer-card {
  overflow: visible !important;
}
#productsPage .prod-customer-top {
  display: grid !important;
  grid-template-columns: 48px minmax(360px, 55fr) minmax(210px, 25fr) minmax(250px, 20fr) !important;
  align-items: center !important;
  gap: 16px !important;
}
#productsPage .product-customer-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  font-weight: 400 !important;
}
#productsPage .product-customer-select-wrap,
#productsPage .product-customer-need,
#productsPage .product-customer-actions {
  min-width: 0 !important;
}
#productsPage .product-customer-meta {
  min-height: 16px !important;
  white-space: normal !important;
}
#productsPage .product-customer-actions {
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}
#productsPage .product-customer-actions button[hidden] {
  display: none !important;
}
#productsPage .product-customer-card:not(.has-customer) .product-customer-avatar {
  background: #F8FAFC !important;
  border-color: var(--gp-border3) !important;
  color: var(--gp-muted2) !important;
}
#productsPage .product-customer-card:not(.has-customer) .product-customer-need {
  color: var(--gp-muted2) !important;
}
#productsPage .prod-filters-row {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(130px, 1fr)) auto auto !important;
  align-items: center !important;
}
#productsPage .prod-search,
#productsPage .prod-filters-row select,
#productsPage .prod-filters-row button {
  width: 100% !important;
  min-width: 0 !important;
}
#productsPage .prod-active-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding-top: 10px !important;
  margin-top: 10px !important;
  border-top: 1px solid var(--gp-border2) !important;
}
#productsPage .prod-active-filters[hidden] {
  display: none !important;
}
#productsPage .prod-active-filters button {
  height: 28px !important;
  padding: 0 9px !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 999px !important;
  background: #EFF6FF !important;
  color: #1D4ED8 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}
#productsPage .prod-layout {
  display: grid !important;
  grid-template-columns: minmax(760px, 1fr) 360px !important;
}
#productsPage .prod-table {
  min-width: 980px !important;
}
#productsPage .prod-table th:nth-child(2) { width: 28% !important; }
#productsPage .prod-table th:nth-child(3) { width: 14% !important; }
#productsPage .prod-table th:nth-child(4) { width: 30% !important; }
#productsPage .prod-table th:nth-child(5) { width: 10% !important; }
#productsPage .prod-table th:nth-child(6) { width: 14% !important; }
#productsPage .prod-table th,
#productsPage .prod-table td,
#productsPage .product-match-cell,
#productsPage .product-match-cell small {
  text-align: left !important;
}
#productsPage .product-name-cell {
  position: relative !important;
  padding-right: 28px !important;
}
#productsPage .product-favorite-btn {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 26px !important;
  height: 26px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #94A3B8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}
#productsPage .product-favorite-btn:hover,
#productsPage .product-favorite-btn.is-favorite {
  color: #D97706 !important;
  background: #FFFBEB !important;
}
#productsPage .prod-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--gp-brand) !important;
}
#productsPage .product-table-empty {
  min-height: 190px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  color: var(--gp-muted) !important;
}
#productsPage .product-table-empty i {
  font-size: 24px !important;
  color: var(--gp-muted2) !important;
}
#productsPage .product-table-empty button {
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: var(--gp-brand) !important;
  cursor: pointer !important;
}
@media (max-width: 1180px) {
  #productsPage .prod-customer-top {
    grid-template-columns: 48px minmax(300px, 1fr) minmax(200px, .55fr) !important;
  }
  #productsPage .product-customer-actions {
    grid-column: 2 / -1 !important;
  }
  #productsPage .prod-layout {
    grid-template-columns: minmax(720px, 1fr) 330px !important;
  }
  #productsPage .prod-filters-row {
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
  }
}

/* Excel import workbench. */
.import-preview-dialog {
  width: 92vw !important;
  max-width: 1240px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.import-preview-dialog .import-workbench {
  width: 100% !important;
  max-width: none !important;
  height: min(84vh, 820px) !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .2) !important;
}
.import-workbench-head {
  min-height: 72px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
}
.import-workbench-head > div {
  min-width: 0 !important;
}
.import-workbench-head h2 {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 400 !important;
}
.import-workbench-head p {
  margin: 4px 0 0 !important;
  color: var(--gp-muted) !important;
  font-size: 11px !important;
}
.import-workbench-head > button {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  color: var(--gp-text2) !important;
}
.import-steps {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  margin: 0 !important;
  padding: 10px 20px !important;
  list-style: none !important;
  border-bottom: 1px solid var(--gp-border2) !important;
}
.import-steps li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  color: var(--gp-muted2) !important;
  font-size: 11px !important;
}
.import-steps li::after {
  content: "" !important;
  position: absolute !important;
  left: calc(50% + 48px) !important;
  right: calc(-50% + 48px) !important;
  top: 50% !important;
  height: 1px !important;
  background: var(--gp-border3) !important;
}
.import-steps li:last-child::after { display: none !important; }
.import-steps li.is-complete,
.import-steps li.is-active { color: var(--gp-brand) !important; }
.import-steps li.is-active { font-weight: 400 !important; }
.import-preview-dialog .preview-stats {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(110px, 1fr)) !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
}
.import-stat-card {
  min-height: 62px !important;
  padding: 9px 10px !important;
  display: grid !important;
  grid-template-columns: 22px 1fr auto !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 9px !important;
  background: #FFFFFF !important;
  color: var(--gp-text2) !important;
  text-align: left !important;
  cursor: pointer !important;
}
.import-stat-card:hover,
.import-stat-card.is-active {
  border-color: #93B4F8 !important;
  background: #F8FAFF !important;
  color: var(--gp-brand) !important;
}
.import-stat-card i { font-size: 16px !important; }
.import-stat-card span { font-size: 10px !important; font-weight: 400 !important; }
.import-stat-card strong { font-size: 18px !important; font-weight: 400 !important; }
.import-preview-dialog .import-preview-toolbar {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) 220px auto !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
}
.import-preview-search {
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: 7px !important;
  background: #FFFFFF !important;
}
.import-preview-search i {
  width: 36px !important;
  text-align: center !important;
  color: var(--gp-muted2) !important;
}
.import-preview-search input {
  min-width: 0 !important;
  flex: 1 !important;
  height: 34px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  font: inherit !important;
}
.import-preview-dialog #importMatchFilter {
  width: 100% !important;
  height: 36px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: 7px !important;
  background: #FFFFFF !important;
}
.import-preview-dialog .import-check-all {
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
  font-size: 11px !important;
}
.import-workbench-body {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 250px !important;
  overflow: hidden !important;
}
.import-preview-dialog .import-preview-table-wrap {
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  scrollbar-gutter: stable both-edges !important;
  border: 0 !important;
  border-right: 1px solid var(--gp-border2) !important;
}
.import-preview-dialog .import-preview-table {
  width: 100% !important;
  min-width: 980px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
.import-preview-dialog .import-preview-table thead {
  position: sticky !important;
  top: 0 !important;
  z-index: 3 !important;
}
.import-preview-dialog .import-preview-table th,
.import-preview-dialog .import-preview-table td {
  padding: 9px 10px !important;
  text-align: left !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-weight: 400 !important;
  border-bottom: 1px solid #EEF2F7 !important;
  background: #FFFFFF !important;
}
.import-preview-dialog .import-preview-table th {
  background: #F8FAFC !important;
  color: var(--gp-muted) !important;
}
.import-preview-dialog .import-preview-table .import-check-column,
.import-preview-dialog .import-preview-table td.row-badge { width: 38px !important; text-align: center !important; }
.import-preview-dialog .import-preview-table tr.row-pending_info td { background: #FFFCF3 !important; }
.import-preview-dialog .import-preview-table tr.row-duplicate td { background: #FFF8F1 !important; }
.import-preview-dialog .import-preview-table tr.row-unparseable td { background: #F8FAFC !important; color: #94A3B8 !important; }
.import-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: #F1F5F9 !important;
  color: #475569 !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}
.import-status-badge.is-new { background: #ECFDF5 !important; color: #047857 !important; }
.import-status-badge.is-update { background: #EFF6FF !important; color: #1D4ED8 !important; }
.import-status-badge.is-pending_info { background: #FFFBEB !important; color: #B45309 !important; }
.import-status-badge.is-duplicate { background: #FFF7ED !important; color: #C2410C !important; }
.import-status-badge.is-unparseable { background: #FEF2F2 !important; color: #B91C1C !important; }
.import-review-panel {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 16px !important;
  background: #FAFCFF !important;
}
.import-review-panel h3 {
  margin: 0 0 14px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
.import-review-panel dl { margin: 0 !important; }
.import-review-panel dl div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 9px 0 !important;
  border-bottom: 1px solid var(--gp-border2) !important;
}
.import-review-panel dt,
.import-review-panel dd { margin: 0 !important; font-size: 11px !important; font-weight: 400 !important; }
.import-review-panel dd { color: var(--gp-text) !important; }
.import-review-panel p {
  margin: 14px 0 !important;
  color: var(--gp-muted) !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
}
.import-review-panel > button {
  width: 100% !important;
  min-height: 34px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: 7px !important;
  background: #FFFFFF !important;
  color: var(--gp-brand) !important;
  font-size: 11px !important;
}
.import-workbench-footer {
  min-height: 62px !important;
  padding: 10px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-top: 1px solid var(--gp-border2) !important;
  background: #FFFFFF !important;
}
.import-selection-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.import-selection-copy span { font-size: 14px !important; color: var(--gp-text) !important; }
.import-selection-copy small { font-size: 10px !important; color: var(--gp-muted) !important; }
.import-footer-actions { display: flex !important; align-items: center !important; gap: 8px !important; }
.import-footer-actions button {
  height: 36px !important;
  min-width: 112px !important;
  padding: 0 14px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: 7px !important;
  background: #FFFFFF !important;
  color: var(--gp-text2) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  transform: none !important;
  transition: border-color .15s, background-color .15s, color .15s !important;
}
.import-footer-actions #confirmImportBtn {
  min-width: 184px !important;
  border-color: var(--gp-brand) !important;
  background: var(--gp-brand) !important;
  color: #FFFFFF !important;
}
.import-footer-actions .button-count {
  min-width: 24px !important;
  height: 20px !important;
  padding: 0 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.18) !important;
}
.import-footer-actions button:hover { transform: none !important; }
.import-footer-actions button:disabled { cursor: not-allowed !important; opacity: .55 !important; }
.import-preview-dialog .import-progress {
  margin: 0 !important;
  padding: 10px 20px !important;
  min-height: 48px !important;
  border-top: 1px solid var(--gp-border2) !important;
}
@media (prefers-reduced-motion: reduce) {
  .import-preview-dialog *,
  .import-preview-dialog *::before,
  .import-preview-dialog *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 900px) {
  .import-preview-dialog .preview-stats { grid-template-columns: repeat(3, 1fr) !important; }
  .import-workbench-body { grid-template-columns: 1fr !important; }
  .import-review-panel { display: none !important; }
  .import-preview-dialog .import-preview-toolbar { grid-template-columns: 1fr 1fr !important; }
}

/* Global rail footer: settings uses the same item geometry on every page. */
.icon-rail .rail-bottom-area {
  width: 84px !important;
  min-height: 66px !important;
  height: 66px !important;
  box-sizing: border-box !important;
  margin-top: auto !important;
  padding: 6px 5px 8px !important;
  border-top: 1px solid var(--gp-border) !important;
  background: var(--gp-white) !important;
  flex: 0 0 66px !important;
}
.icon-rail > nav,
.icon-rail .rail-nav {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none;
}
.icon-rail > nav::-webkit-scrollbar,
.icon-rail .rail-nav::-webkit-scrollbar {
  display: none;
}
.icon-rail .rail-settings-btn,
.icon-rail.is-boss .rail-settings-btn.rail-boss-only {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: 72px !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 4px 2px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--gp-text2) !important;
  box-shadow: none !important;
  appearance: none !important;
  cursor: pointer !important;
}
.icon-rail .rail-settings-btn:hover {
  background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
}
.icon-rail .rail-settings-btn span {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 17px !important;
}
.icon-rail .rail-settings-btn b {
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 400 !important;
  text-align: center !important;
}
.contracts-search-wrap input {
  flex: 1 !important; height: 100% !important; min-width: 0 !important;
  border: 0 !important; outline: 0 !important; padding: 0 10px 0 0 !important;
  background: transparent !important;
  font-size: var(--gp-fs-body) !important; color: var(--gp-text2) !important;
}
.contracts-search-wrap input::placeholder { color: var(--gp-muted2) !important; }

/* ── Action buttons ── */
.contracts-btn-primary {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  height: 36px !important; padding: 0 14px !important;
  border: 1px solid var(--gp-brand) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-brand) !important; color: var(--gp-white) !important;
  font-size: var(--gp-fs-btn) !important; font-weight: 500 !important;
  cursor: pointer !important; white-space: nowrap !important;
  transition: background 0.15s !important;
}
.contracts-btn-primary:hover { background: var(--gp-brand-hover) !important; }
.contracts-btn-primary i { font-size: 15px !important; }

.contracts-btn-outline {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  height: 36px !important; padding: 0 13px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important; color: #475569 !important;
  font-size: var(--gp-fs-btn) !important; font-weight: 400 !important;
  cursor: pointer !important; white-space: nowrap !important;
  transition: border-color 0.15s, color 0.15s !important;
}
.contracts-btn-outline:hover { border-color: var(--gp-brand) !important; color: var(--gp-brand) !important; }
.contracts-btn-outline i { font-size: 14px !important; }
.contracts-btn-outline i.bi-chevron-down { font-size: 10px !important; margin-left: 2px !important; }
.contracts-btn-badge {
  font-style: normal !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-width: 20px !important; height: 20px !important;
  border-radius: 10px !important; padding: 0 6px !important;
  background: var(--gp-brand-bg) !important; color: var(--gp-brand) !important;
  font-size: 11px !important; font-weight: 600 !important;
}
.contracts-spacer { flex: 1 !important; }
.contracts-result-summary {
  font-size: var(--gp-fs-helper) !important; color: var(--gp-muted) !important;
  white-space: nowrap !important;
}

/* ── Table card ── */
.contracts-table-card {
  flex: 1 !important; min-height: 0 !important;
  display: flex !important; flex-direction: column !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius) !important;
  background: var(--gp-white) !important;
  box-shadow: var(--gp-shadow) !important;
  overflow: hidden !important;
}
.contracts-table-card .table-shell {
  flex: 1 !important; min-height: 0 !important; overflow: auto !important;
}

/* ── Year break rows ── */
#contractsPage .year-break {
  background: var(--gp-bg2) !important;
}
#contractsPage .year-break td {
  padding: 8px 16px !important;
  font-size: var(--gp-fs-card) !important;
  font-weight: 600 !important;
  color: var(--gp-text) !important;
  border-bottom: 1px solid var(--gp-border) !important;
}
#contractsPage .year-break .year-arrow {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 20px !important; height: 20px !important;
  margin-right: 4px !important;
  color: var(--gp-muted) !important;
  font-size: 12px !important;
  transition: transform 0.2s !important;
}
#contractsPage .year-break .year-arrow i { font-size: 12px !important; }
#contractsPage .year-stats {
  font-size: var(--gp-fs-helper) !important;
  font-weight: 400 !important;
  color: var(--gp-muted) !important;
  margin-left: 10px !important;
}

/* ── Policy table rows ── */
#contractsDataTable th {
  background: var(--gp-bg2) !important;
  font-size: var(--gp-fs-th) !important;
  font-weight: var(--gp-fw-th) !important;
  color: var(--gp-muted) !important;
  border-bottom: 1px solid var(--gp-border) !important;
  height: 40px !important;
  padding: 0 12px !important;
  text-align: left !important;
  white-space: nowrap !important;
}
#contractsDataTable td {
  padding: 8px 12px !important;
  font-size: var(--gp-fs-body) !important;
  color: var(--gp-text2) !important;
  border-bottom: 1px solid #F1F5F9 !important;
  vertical-align: middle !important;
}
#contractsDataTable tbody tr:hover td { background: #F8FAFF !important; }

/* Policy product cell */
.policy-product-cell { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.policy-product-cell b {
  font-size: var(--gp-fs-body) !important; font-weight: 600 !important; color: var(--gp-text) !important;
}
.policy-product-cell span {
  font-size: var(--gp-fs-helper) !important; color: var(--gp-muted) !important;
}
.policy-premium {
  font-size: var(--gp-fs-body) !important; font-weight: 600 !important; color: var(--gp-text) !important;
  white-space: nowrap !important;
}
.policy-number {
  font-size: var(--gp-fs-helper) !important; font-weight: 500 !important; color: var(--gp-text2) !important;
  font-family: "SF Mono", "Cascadia Code", monospace !important;
}
.policy-cat-label {
  font-size: var(--gp-fs-body) !important; font-weight: 500 !important; color: var(--gp-text2) !important;
}
.policy-year {
  display: block !important;
  font-size: 10px !important; color: var(--gp-muted2) !important;
}
.policy-days-left {
  font-size: 10px !important; color: var(--gp-muted2) !important;
}

/* Status chips — consistent with customer page */
.status-chip-mini {
  display: inline-block !important;
  padding: 3px 9px !important;
  border-radius: 4px !important;
  font-size: 11px !important; font-weight: 500 !important;
  white-space: nowrap !important;
}
.status-chip-mini.is-active { background: #DCFCE7 !important; color: #166534 !important; }
.status-chip-mini.is-expired { background: #FEE2E2 !important; color: #991B1B !important; }
.status-chip-mini.is-terminated { background: #F1F5F9 !important; color: #475569 !important; }
.status-chip-mini.is-pending { background: #FEF3C7 !important; color: #92400E !important; }

/* Mini action buttons in policy rows */
.policy-actions {
  display: flex !important; gap: 4px !important; flex-wrap: wrap !important;
}
.mini-action {
  display: inline-flex !important; align-items: center !important; gap: 3px !important;
  height: 28px !important; padding: 0 8px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-xs) !important;
  background: var(--gp-white) !important; color: #475569 !important;
  font-size: 11px !important; font-weight: 400 !important;
  cursor: pointer !important; white-space: nowrap !important;
  transition: border-color 0.15s, color 0.15s !important;
}
.mini-action:hover { border-color: var(--gp-brand) !important; color: var(--gp-brand) !important; }
.mini-action i { font-size: 12px !important; }

/* ── Policy table column widths (8-column compact layout) ── */
#contractsDataTable .cell-yearcat { min-width: 95px; white-space: nowrap; }
#contractsDataTable .cell-number { min-width: 85px; white-space: nowrap; font-family: "SF Mono","Cascadia Code",monospace; font-size: 11px; }
#contractsDataTable .cell-client { min-width: 130px; }
#contractsDataTable .cell-carrierprod { min-width: 180px; }
#contractsDataTable .cell-premium { min-width: 85px; white-space: nowrap; text-align: right; }
#contractsDataTable .cell-dates { min-width: 130px; white-space: nowrap; font-size: 12px; }
#contractsDataTable .cell-status { min-width: 95px; white-space: nowrap; }
#contractsDataTable .cell-actions { min-width: 80px; white-space: nowrap; }

/* Policy stats bar */
.policy-stats-bar {
  padding: 8px 16px !important;
  font-size: var(--gp-fs-helper) !important;
  color: var(--gp-muted) !important;
  border-top: 1px solid var(--gp-border2) !important;
  background: var(--gp-bg2) !important;
  flex-shrink: 0 !important;
}

/* Policy AI bar / analytics */
.policy-ai-bar {
  display: flex !important; gap: 8px !important; align-items: center !important;
  padding: 10px 16px !important;
}
.policy-ai-bar input {
  flex: 1 !important; height: 36px !important;
  padding: 0 10px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-sm) !important;
  font-size: var(--gp-fs-body) !important; color: var(--gp-text2) !important;
  outline: none !important;
}
.policy-ai-bar input:focus { border-color: var(--gp-brand) !important; }
.policy-ai-bar button {
  height: 36px !important; padding: 0 14px !important;
  border: 1px solid var(--gp-brand) !important; border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-brand) !important; color: var(--gp-white) !important;
  font-size: var(--gp-fs-btn) !important; cursor: pointer !important;
  white-space: nowrap !important;
}
.policy-ai-result { font-size: var(--gp-fs-helper) !important; color: var(--gp-muted) !important; }

/* Analytics panel tabs */
.analytics-tabs {
  display: flex !important; gap: 3px !important; padding: 0 16px 8px !important;
  flex-wrap: wrap !important;
}
.analytics-tab {
  height: 32px !important; padding: 0 11px !important;
  border: 1px solid var(--gp-border3) !important; border-radius: var(--gp-radius-xs) !important;
  background: var(--gp-white) !important; color: #475569 !important;
  font-size: 11px !important; font-weight: 400 !important; cursor: pointer !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.analytics-tab:hover { border-color: var(--gp-brand) !important; color: var(--gp-brand) !important; }
.analytics-tab.active {
  background: var(--gp-brand) !important; border-color: var(--gp-brand) !important; color: var(--gp-white) !important;
}
.analytics-content {
  padding: 12px 16px !important;
  font-size: var(--gp-fs-body) !important; color: var(--gp-text2) !important;
  max-height: 320px !important; overflow-y: auto !important;
}

/* ── Legacy tabs (keep for backward compat, hidden) ── */
#contractsPage .tabs {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   16b. STATISTICAL ANALYSIS (Customer Overview Stats Tab)
   ═══════════════════════════════════════════════════════════════════ */
.stats-analysis-layout {
  display: flex !important;
  gap: 12px !important;
  height: 100% !important;
  min-height: 400px !important;
}
.stats-criteria-panel {
  width: 260px !important;
  min-width: 260px !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius) !important;
  background: var(--gp-white) !important;
  box-shadow: var(--gp-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.stats-criteria-header {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
  flex-shrink: 0 !important;
}
.stats-criteria-header h3 {
  margin: 0 !important;
  font-size: var(--gp-fs-card) !important;
  font-weight: 600 !important;
  color: var(--gp-text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.stats-criteria-header h3 i {
  font-size: 15px !important;
  color: var(--gp-brand) !important;
}
.stats-criteria-body {
  padding: 12px 14px !important;
  overflow-y: auto !important;
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.stats-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.stats-field span {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--gp-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}
.stats-field select,
.stats-field input {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important;
  font-size: var(--gp-fs-body) !important;
  color: var(--gp-text2) !important;
  outline: none !important;
  cursor: pointer !important;
}
.stats-field select:focus,
.stats-field input:focus {
  border-color: var(--gp-brand) !important;
}
.stats-custom-range {
  display: flex !important;
  gap: 8px !important;
}
.stats-custom-range .stats-field {
  flex: 1 !important;
}
.stats-run-btn {
  height: 36px !important;
  min-height: 36px !important;
  margin-top: 4px !important;
  border: 1px solid var(--gp-brand) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-brand) !important;
  color: var(--gp-white) !important;
  font-size: var(--gp-fs-btn) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: background 0.15s !important;
}
.stats-run-btn:hover { background: var(--gp-brand-hover) !important; }
.stats-run-btn i { font-size: 14px !important; }
.stats-export-btn {
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important;
  color: #475569 !important;
  font-size: var(--gp-fs-btn) !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: border-color 0.15s, color 0.15s !important;
}
.stats-export-btn:hover {
  border-color: var(--gp-brand) !important;
  color: var(--gp-brand) !important;
}

/* ── Results panel ── */
.stats-results-panel {
  flex: 1 !important;
  min-width: 0 !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius) !important;
  background: var(--gp-white) !important;
  box-shadow: var(--gp-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.stats-results-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
  flex-shrink: 0 !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.stats-view-tabs {
  display: flex !important;
  gap: 3px !important;
}
.stats-view-tab {
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: var(--gp-radius-xs) !important;
  background: var(--gp-white) !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
.stats-view-tab:hover {
  border-color: var(--gp-brand) !important;
  color: var(--gp-brand) !important;
}
.stats-view-tab.active {
  background: var(--gp-brand) !important;
  border-color: var(--gp-brand) !important;
  color: var(--gp-white) !important;
}
.stats-view-tab i { font-size: 13px !important; }
.stats-results-summary {
  font-size: var(--gp-fs-helper) !important;
  color: var(--gp-muted) !important;
  white-space: nowrap !important;
}
.stats-results-body {
  flex: 1 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  display: flex !important;
  align-items: stretch !important;
}

/* ── Stats placeholder ── */
.stats-placeholder-msg {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 40px 20px !important;
}
.stats-placeholder-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--gp-brand-bg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 8px !important;
}
.stats-placeholder-icon i {
  font-size: 26px !important;
  color: var(--gp-brand) !important;
}
.stats-placeholder-msg strong {
  font-size: var(--gp-fs-card) !important;
  font-weight: 600 !important;
  color: var(--gp-text) !important;
}
.stats-placeholder-msg p {
  font-size: var(--gp-fs-body) !important;
  color: var(--gp-muted) !important;
  margin: 0 !important;
  text-align: center !important;
  max-width: 320px !important;
  line-height: 1.5 !important;
}
.stats-chart-container {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}
.stats-table-container {
  flex: 1 !important;
  padding: 0 !important;
  overflow: auto !important;
}
.stats-details-container {
  flex: 1 !important;
  overflow: auto !important;
  padding: 12px 16px !important;
}
.stats-loading {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px !important;
  font-size: var(--gp-fs-body) !important;
  color: var(--gp-muted) !important;
}

/* Hide boss-only metric options for non-boss */
.stats-boss-only { display: none !important; }
.is-boss .stats-boss-only { display: block !important; }
.is-boss select .stats-boss-only { display: block !important; }

/* ═══════════════════════════════════════════════════════════════════
   17. TEAM PAGE
   ═══════════════════════════════════════════════════════════════════ */
#teamPage {
  padding: 20px 24px !important;
  overflow-y: auto !important;
  background: var(--gp-bg) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   18. DOCUMENTS PAGE
   ═══════════════════════════════════════════════════════════════════ */
#documentsPage {
  padding: 16px 20px !important;
  overflow-y: auto !important;
  background: var(--gp-bg) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   19. SETTINGS PAGE/MODAL (Req 10)
   ═══════════════════════════════════════════════════════════════════ */

/* Display settings modal restructure */
.display-settings-modal {
  max-width: 780px !important;
}

.display-settings-modal .modal-card {
  max-height: 82vh !important;
}

/* Settings sections */
.settings-section {
  margin-bottom: 20px !important;
}
.settings-section-title {
  font-size: var(--gp-fs-section) !important;
  font-weight: var(--gp-fw-section) !important;
  color: var(--gp-text) !important;
  padding: 0 0 8px !important;
  margin: 0 0 12px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
}

/* Settings row: label + control */
.settings-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #F8FAFC !important;
}
.settings-row .settings-label {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
}
.settings-row .settings-label strong {
  font-size: var(--gp-fs-body) !important;
  font-weight: 500 !important;
  color: var(--gp-text2) !important;
}
.settings-row .settings-label small {
  font-size: var(--gp-fs-helper) !important;
  color: var(--gp-muted) !important;
}
.settings-row .settings-control {
  flex-shrink: 0 !important;
}

/* Settings toggle switch */
.settings-toggle {
  position: relative !important;
  width: 40px !important; height: 22px !important;
  border-radius: 11px !important;
  background: var(--gp-border3) !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  border: 0 !important;
}
.settings-toggle.active {
  background: var(--gp-brand) !important;
}
.settings-toggle::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important; left: 2px !important;
  width: 18px !important; height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: transform 0.2s !important;
}
.settings-toggle.active::after {
  transform: translateX(18px) !important;
}

/* Settings sticky footer */
.settings-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-top: 1px solid var(--gp-border2) !important;
  background: var(--gp-white) !important;
  flex-shrink: 0 !important;
}

/* Unsaved indicator */
.settings-unsaved-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: var(--gp-orange) !important;
  font-size: var(--gp-fs-helper) !important;
  margin-right: auto !important;
}
.settings-unsaved-indicator::before {
  content: "" !important;
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--gp-orange) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   20. TOOLBAR DROPDOWN MENUS
   ═══════════════════════════════════════════════════════════════════ */
.dropdown-menu {
  border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
  padding: 6px !important;
  min-width: 200px !important;
  z-index: 100 !important;
}
.dropdown-menu button {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: var(--gp-radius-xs) !important;
  background: transparent !important;
  color: var(--gp-text2) !important;
  font-size: var(--gp-fs-body) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.1s !important;
}
.dropdown-menu button:hover {
  background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
}
.dropdown-menu .dropdown-sep {
  height: 1px !important;
  margin: 4px 8px !important;
  background: var(--gp-border) !important;
}
.dropdown-menu .dm-section-label {
  padding: 4px 12px 2px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--gp-muted2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Sort dropdown specific */
.sort-dropdown-label {
  padding: 4px 12px 2px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--gp-muted2) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.sort-dropdown-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: var(--gp-radius-xs) !important;
  background: transparent !important;
  color: var(--gp-text2) !important;
  font-size: var(--gp-fs-body) !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.1s !important;
}
.sort-dropdown-item:hover {
  background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
}
.sort-dropdown-item .sort-active-mark {
  margin-left: auto !important;
  color: var(--gp-brand) !important;
  font-size: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   21. FILTER CHIPS & STATUS CHIPS
   ═══════════════════════════════════════════════════════════════════ */
.filter-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 4px 12px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: 16px !important;
  background: var(--gp-bg3) !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}
.filter-chip:hover {
  border-color: var(--gp-brand) !important;
  color: var(--gp-brand) !important;
  background: var(--gp-brand-bg) !important;
}
.filter-chip.active {
  border-color: var(--gp-brand) !important;
  background: var(--gp-brand) !important;
  color: var(--gp-white) !important;
}
.filter-chip.active .chip-count { color: var(--gp-white) !important; opacity: 0.85 !important; }
.filter-chip .chip-count { font-weight: 600 !important; font-size: 10px !important; color: var(--gp-muted) !important; }
.filter-chip i { font-size: 11px !important; }

/* Status chips */
.status-chip {
  display: inline-block !important;
  padding: 2px 10px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  line-height: 1.6 !important;
}

/* Priority badges */
.priority-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
}
.priority-badge.high   { color: var(--gp-red) !important; background: #FEF2F2 !important; }
.priority-badge.medium { color: var(--gp-orange) !important; background: #FFF7ED !important; }
.priority-badge.low    { color: var(--gp-green) !important; background: #F0FDF4 !important; }

/* Contract outline pills */
.contract-outline-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 9px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: 12px !important;
  background: var(--gp-white) !important;
  color: #475569 !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  line-height: 1.4 !important;
}
.contract-outline-pill i { font-size: 11px !important; line-height: 1 !important; }
.contract-outline-pill.auto   { border-color: #BFDBFE !important; color: #1D4ED8 !important; }
.contract-outline-pill.home   { border-color: #FDE68A !important; color: #B45309 !important; }
.contract-outline-pill.health { border-color: #A7F3D0 !important; color: #047857 !important; }
.contract-outline-pill.pro    { border-color: #C7D2FE !important; color: #4338CA !important; }
.contract-outline-pill.life   { border-color: #FBCFE8 !important; color: #BE185D !important; }
.contract-outline-pill.other  { border-color: var(--gp-border3) !important; color: var(--gp-muted) !important; }
.contract-outline-pill.more {
  border-color: var(--gp-border3) !important;
  color: var(--gp-muted) !important;
  font-size: 10px !important;
  padding: 3px 7px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   22. SIDEBAR (CUSTOMER CONTEXT FILTER)
   ═══════════════════════════════════════════════════════════════════ */
.list-sidebar {
  background: var(--gp-bg2) !important;
  border-right: 1px solid var(--gp-border2) !important;
}
.side-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: calc(100% - 20px) !important;
  min-height: 34px !important;
  border: 0 !important;
  border-radius: var(--gp-radius-xs) !important;
  margin: 0 10px !important;
  padding: 0 10px !important;
  color: #334155 !important;
  background: transparent !important;
  text-align: left !important;
  font-size: var(--gp-fs-body) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: background 0.15s, color 0.15s !important;
}
.side-link:hover {
  color: var(--gp-brand) !important;
  background: var(--gp-brand-bg) !important;
}
.side-link.active {
  color: var(--gp-brand) !important;
  background: var(--gp-brand-bg2) !important;
  font-weight: 500 !important;
}
.side-link .side-dot {
  width: 8px !important; height: 8px !important;
  flex: 0 0 8px !important;
  border-radius: 50% !important;
}
.side-link em.side-count-badge {
  margin-left: auto !important;
  display: inline-flex !important;
  min-width: 20px !important;
  height: 18px !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 9px !important;
  color: var(--gp-white) !important;
  background: var(--gp-brand) !important;
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  padding: 0 5px !important;
}
.sidebar-section-title {
  padding: 12px 16px 4px !important;
  color: var(--gp-text2) !important;
  font-size: var(--gp-fs-body) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
.sidebar-section-divider {
  height: 1px !important;
  margin: 2px 16px 8px !important;
  background: var(--gp-border) !important;
}

/* ── Sidebar collapse chevron ── */
.sidebar-collapse-chevron {
  width: 28px !important; height: 28px !important;
  border: 0 !important;
  border-radius: var(--gp-radius-xs) !important;
  background: transparent !important;
  color: var(--gp-muted) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.sidebar-collapse-chevron:hover {
  background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   23. TOAST NOTIFICATIONS — compact top-right white card
   ═══════════════════════════════════════════════════════════════════ */
.toast {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 380px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-white) !important;
  color: var(--gp-text2) !important;
  font-size: var(--gp-fs-body) !important;
  font-weight: 400 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  z-index: 10000 !important;
  transition: opacity 0.25s, transform 0.25s !important;
  line-height: 1.35 !important;
}
.toast.success {
  border-left: 3px solid var(--gp-green) !important;
}
.toast.error {
  border-left: 3px solid var(--gp-red) !important;
}
.toast.warning {
  border-left: 3px solid var(--gp-orange) !important;
}
.toast.info {
  border-left: 3px solid var(--gp-brand) !important;
}
.toast .toast-icon {
  flex-shrink: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}
.toast.success .toast-icon { color: var(--gp-green) !important; }
.toast.error .toast-icon { color: var(--gp-red) !important; }
.toast.warning .toast-icon { color: var(--gp-orange) !important; }
.toast.info .toast-icon { color: var(--gp-brand) !important; }
.toast .toast-msg {
  flex: 1 !important;
  min-width: 0 !important;
}
.toast.hidden {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   24. RESPONSIVE (Req 12) — horizontal table scroll, no overlap
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .app {
    grid-template-columns: 86px minmax(0, 1fr) !important;
  }
  .list-sidebar { display: none !important; }
  .efficiency-hub { display: none !important; }
}
@media (max-width: 768px) {
  .app {
    grid-template-columns: 86px minmax(0, 1fr) !important;
  }
  .list-sidebar { display: none !important; }
  .efficiency-hub { display: none !important; }
  .topbar { padding: 0 12px !important; }
  .top-search { display: none !important; }
  #customerPageTitle h1 { font-size: 16px !important; }
  .dash-grid { grid-template-columns: 1fr !important; }
  .dash-card.span-2 { grid-column: span 1 !important; }
  .filter-card-unified { flex-wrap: wrap !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   25. STANDARDIZED HEADER — shared across all pages
   ═══════════════════════════════════════════════════════════════════ */

/* Topbar: white background, consistent height, full-width flex */
#topbarHeader.topbar,
.topbar {
  height: 60px !important;
  min-height: 60px !important;
  padding: 0 20px !important;
  gap: 16px !important;
  background: var(--gp-white) !important;
  border-bottom: 1px solid var(--gp-border2) !important;
  color: var(--gp-text) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-shrink: 0 !important;
}

/* Page title area — always visible, left-aligned */
.page-title-area {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.page-title-area .page-title-icon {
  font-size: 22px !important;
  color: var(--gp-brand) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.page-title-area .page-title-text h1 {
  margin: 0 !important;
  font-size: var(--gp-fs-title) !important;
  font-weight: var(--gp-fw-title) !important;
  color: var(--gp-text) !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.page-title-area .page-title-text .live-count {
  font-size: var(--gp-fs-subtitle) !important;
  font-weight: var(--gp-fw-subtitle) !important;
  color: var(--gp-muted) !important;
  white-space: nowrap !important;
}

/* ── Seamless search control (520×40 desktop, icon INSIDE border) ── */
#topSearchBar.top-search {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.search-control {
  display: flex !important;
  align-items: center !important;
  width: 520px !important;
  max-width: 100% !important;
  height: 40px !important;
  border: 1px solid var(--gp-border3) !important;
  border-radius: 10px !important;
  background: var(--gp-white) !important;
  overflow: hidden !important;
  transition: border-color 0.15s !important;
}

.search-control:focus-within {
  border-color: var(--gp-brand) !important;
  box-shadow: 0 0 0 3px rgba(11, 99, 246, 0.08) !important;
}

.search-control .search-icon-inside {
  flex-shrink: 0 !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  color: var(--gp-muted2) !important;
  pointer-events: none !important;
}

.search-control input {
  flex: 1 !important;
  height: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 0 14px 0 0 !important;
  background: transparent !important;
  font-size: var(--gp-fs-body) !important;
  color: var(--gp-text2) !important;
  min-width: 0 !important;
}

.search-control input::placeholder {
  color: var(--gp-muted2) !important;
}

/* ── Nuke old detached search icon pseudo-element ── */
.top-search::before { content: none !important; display: none !important; }

/* ── Header action buttons ── */
#topActions.top-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.header-action-btn,
#topNewClientBtn.header-action-btn {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  border: 1px solid var(--gp-brand) !important;
  border-radius: var(--gp-radius-sm) !important;
  background: var(--gp-brand) !important;
  color: var(--gp-white) !important;
  font-size: var(--gp-fs-btn) !important;
  font-weight: var(--gp-fw-btn) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  transition: background 0.15s !important;
}
#topNewClientBtn[hidden] {
  display: none !important;
}

.header-action-btn:hover,
#topNewClientBtn.header-action-btn:hover {
  background: var(--gp-brand-hover) !important;
}

/* Secondary header action (outline style) */
.header-action-btn.header-action-secondary {
  border-color: var(--gp-border3) !important;
  background: var(--gp-white) !important;
  color: #475569 !important;
}

.header-action-btn.header-action-secondary:hover {
  border-color: var(--gp-brand) !important;
  color: var(--gp-brand) !important;
  background: var(--gp-white) !important;
}

/* ── Hide ALL language controls globally ── */
.gp-lang-toggle,
.rail-language-control,
#gpLangToggleSidebar,
#gpLangToggleHeader {
  display: none !important;
}

/* ── Remove old product-top-utilities (unused in shared header) ── */
.product-top-utilities { display: none !important; }

/* ── Remove quick add (replaced by topNewClientBtn) ── */
#quickAdd { display: none !important; }

/* ── Override old blue topbar in styles.css ── */
.ai-product-shell .topbar {
  padding: 0 20px !important;
  color: var(--gp-text) !important;
  background: var(--gp-white) !important;
  border-bottom: 1px solid var(--gp-border2) !important;
}

/* Override the old products-workspace topbar search styles */
body.products-workspace-active .topbar {
  height: 60px !important;
  padding: 0 20px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
  background: var(--gp-white) !important;
  color: var(--gp-text2) !important;
}

body.products-workspace-active .topbar .top-search input {
  width: auto !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ── Responsive: shrink search on narrow screens ── */
@media (max-width: 900px) {
  .search-control {
    width: 100% !important;
  }
  #topbarHeader.topbar,
  .topbar {
    gap: 10px !important;
    padding: 0 12px !important;
  }
}

@media (max-width: 768px) {
  .page-title-area .page-title-text .live-count {
    display: none !important;
  }
  .page-title-area .page-title-text h1 {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   26. MISC — hide floating buttons, clean utility bars
   ═══════════════════════════════════════════════════════════════════ */
.floating-actions { display: none !important; }

/* Customer detail: keep the existing modal, only normalize its sticky footer. */
#profileDialog .profile-bottom-bar {
  min-height: 64px !important;
  padding: 12px 24px !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
}
#profileDialog .profile-bottom-bar .pbb-left,
#profileDialog .profile-bottom-bar .pbb-right {
  min-height: 36px !important;
  align-items: center !important;
  gap: 8px !important;
}
#profileDialog .profile-bottom-bar .pbb-btn {
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Read-only customer overview: same surfaces, rhythm and controls as the
   all-customers page while retaining its read-only tables and drawer. */
#customerOverviewPage {
  padding: 16px 18px 18px !important;
  background: var(--gp-bg) !important;
  color: var(--gp-text) !important;
}
#customerOverviewPage .overview-readonly-banner {
  min-height: 42px !important;
  margin: 0 0 12px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border: 1px solid #F3D39A !important;
  border-radius: 10px !important;
  background: #FFF9ED !important;
  color: #9A5A08 !important;
  box-shadow: none !important;
}
#customerOverviewPage .overview-banner-icon {
  color: #D97706 !important;
  font-size: 14px !important;
}
#customerOverviewPage .overview-tabs {
  min-height: 46px !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: end !important;
  gap: 26px !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 12px 12px 0 0 !important;
  background: var(--gp-white) !important;
}
#customerOverviewPage .overview-tab {
  height: 45px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--gp-muted) !important;
  font-weight: 500 !important;
}
#customerOverviewPage .overview-tab i {
  font-size: 14px !important;
  margin-right: 6px !important;
  vertical-align: -0.125em !important;
}
#customerOverviewPage .overview-tab.active {
  color: var(--gp-brand) !important;
  border-bottom-color: var(--gp-brand) !important;
}
#customerOverviewPage .overview-toolbar {
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--gp-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  background: var(--gp-white) !important;
  box-shadow: var(--gp-shadow-sm) !important;
}
#customerOverviewPage .overview-toolbar-row {
  min-height: 36px !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
#customerOverviewPage .overview-search-input,
#customerOverviewPage .overview-filter-select,
#customerOverviewPage .overview-toolbar-btn {
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 8px !important;
  background: var(--gp-white) !important;
  font-size: 12px !important;
}
#customerOverviewPage .overview-search-input { width: 250px !important; padding: 0 12px !important; }
#customerOverviewPage .overview-filter-select { min-width: 124px !important; padding: 0 30px 0 10px !important; }
#customerOverviewPage .overview-toolbar-btn {
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
}
#customerOverviewPage .overview-go-main {
  background: var(--gp-brand) !important;
  border-color: var(--gp-brand) !important;
  color: #fff !important;
}
#customerOverviewPage .overview-content,
#customerOverviewPage .overview-tab-panel {
  min-height: 0 !important;
  background: transparent !important;
}
#customerOverviewPage .overview-table-wrap {
  border: 1px solid var(--gp-border) !important;
  border-radius: 12px 12px 0 0 !important;
  background: var(--gp-white) !important;
  box-shadow: var(--gp-shadow-sm) !important;
}
#customerOverviewPage .overview-table thead th {
  height: 40px !important;
  padding: 0 12px !important;
  background: var(--gp-bg2) !important;
  color: var(--gp-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}
#customerOverviewPage .overview-table td {
  height: 52px !important;
  padding: 7px 12px !important;
  border-color: #EEF2F7 !important;
  color: var(--gp-text2) !important;
}
#customerOverviewPage .overview-pager {
  min-height: 52px !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 1px solid var(--gp-border) !important;
  border-top: 0 !important;
  border-radius: 0 0 12px 12px !important;
  background: var(--gp-white) !important;
}
#customerOverviewPage .overview-pager-btn {
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 7px !important;
  background: #fff !important;
}
#customerOverviewPage .overview-drawer-overlay {
  background: rgba(15, 23, 42, .28) !important;
  backdrop-filter: blur(2px) !important;
}
#customerOverviewPage .overview-drawer {
  width: min(560px, 92vw) !important;
  border-left: 1px solid var(--gp-border) !important;
  background: var(--gp-bg) !important;
  box-shadow: -18px 0 45px rgba(15, 23, 42, .16) !important;
}
#customerOverviewPage .overview-drawer-head,
#customerOverviewPage .overview-drawer-foot {
  min-height: 62px !important;
  padding: 12px 18px !important;
  border-color: var(--gp-border) !important;
  background: var(--gp-white) !important;
}
#customerOverviewPage .overview-drawer-body { padding: 14px !important; }
#customerOverviewPage .ov-dr-card {
  margin-bottom: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 10px !important;
  background: var(--gp-white) !important;
  box-shadow: none !important;
}
#customerOverviewPage .ov-dr-card-title {
  min-height: 38px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  background: var(--gp-bg2) !important;
  border-bottom: 1px solid var(--gp-border) !important;
  color: var(--gp-text) !important;
  font-weight: 600 !important;
}
#customerOverviewPage .ov-dr-card-body { padding: 12px !important; }

/* Final typography rule: the product uses one regular UI weight everywhere. */
#mainAppContent,
#mainAppContent :where(
  h1, h2, h3, h4, h5, h6,
  p, span, b, strong, em, small, label,
  button, a, th, td, input, select, textarea
) {
  font-weight: 400 !important;
}

/* Contract register: actions stay readable instead of collapsing vertically. */
#contractsDataTable th:last-child,
#contractsDataTable td.policy-actions {
  width: 280px !important;
  min-width: 200px !important;
}
#contractsDataTable td.policy-actions {
  display: table-cell !important;
  white-space: nowrap !important;
}
#contractsDataTable td.policy-actions .client-link {
  display: inline-flex !important;
  align-items: center !important;
  min-width: auto !important;
  margin-right: 8px !important;
  white-space: nowrap !important;
}

/* Hide old wide PRO sidebar pseudo-elements */
.list-sidebar::before,
.list-sidebar::after { display: none !important; }

/* Overview page readonly banner */
.overview-readonly-banner {
  background: #FFF7ED !important;
  border: 1px solid #FED7AA !important;
  border-radius: var(--gp-radius-sm) !important;
  padding: 10px 16px !important;
  margin-bottom: 12px !important;
  font-size: var(--gp-fs-body) !important;
  color: var(--gp-orange) !important;
}

/* Display settings: one stable 920x680 workspace for every section. */
dialog[open].modal.display-settings-modal:not(#profileDialog) {
  box-sizing: border-box !important;
  width: min(920px, calc(100vw - 40px)) !important;
  max-width: 920px !important;
  height: min(680px, calc(100vh - 40px)) !important;
  max-height: 680px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(15, 23, 42, .22) !important;
}
dialog.display-settings-modal::backdrop {
  background: rgba(15, 23, 42, .36) !important;
  backdrop-filter: blur(3px) !important;
}
.display-settings-modal .ds-shell {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  background: #fff !important;
}
.display-settings-modal .ds-head {
  box-sizing: border-box !important;
  min-height: 76px !important;
  padding: 12px 20px !important;
  border-color: var(--gp-border) !important;
}
.display-settings-modal .ds-head-copy {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.display-settings-modal .ds-head-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 10px !important;
  background: var(--gp-brand-bg) !important;
  color: var(--gp-brand) !important;
  font-size: 17px !important;
}
.display-settings-modal .ds-head h2 {
  margin: 0 0 3px !important;
  color: var(--gp-text) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}
.display-settings-modal .ds-head p {
  margin: 0 !important;
  color: var(--gp-muted) !important;
  font-size: 11px !important;
}
.display-settings-modal .ds-close {
  position: relative !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
}
.display-settings-modal .ds-close::before {
  content: "\00d7" !important;
  color: #64748b !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
.display-settings-modal .ds-close:hover { background: #f1f5f9 !important; border-color: var(--gp-border) !important; }
.display-settings-modal .ds-body {
  height: calc(100% - 138px) !important;
  min-height: 0 !important;
}
.display-settings-modal .ds-left-nav {
  width: 210px !important;
  box-sizing: border-box !important;
  padding: 14px 10px !important;
  border-color: var(--gp-border) !important;
  background: #f7f9fc !important;
}
.display-settings-modal .ds-cat {
  box-sizing: border-box !important;
  min-height: 42px !important;
  margin-bottom: 4px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 9px !important;
  color: #52627a !important;
  font-weight: 500 !important;
}
.display-settings-modal .ds-cat i { width: 17px !important; text-align: center !important; font-size: 14px !important; }
.display-settings-modal .ds-cat:hover { background: #eef3fb !important; }
.display-settings-modal .ds-cat.active {
  background: #eaf2ff !important;
  color: var(--gp-brand) !important;
  box-shadow: inset 3px 0 0 var(--gp-brand) !important;
}
.display-settings-modal .ds-right-panel {
  box-sizing: border-box !important;
  padding: 18px 20px !important;
  background: #fff !important;
}
.display-settings-modal .ds-panel-body { min-height: 100% !important; }
.display-settings-modal .ds-panel-intro {
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.display-settings-modal .ds-panel-intro h3 { margin: 0 0 3px !important; font-size: 15px !important; color: var(--gp-text) !important; }
.display-settings-modal .ds-hint { margin: 0 !important; color: var(--gp-muted) !important; }
.display-settings-modal .ds-column-search {
  width: 244px !important;
  height: 36px !important;
  box-sizing: border-box !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 8px !important;
  color: var(--gp-muted) !important;
  background: #fff !important;
}
.display-settings-modal .ds-column-search:focus-within { border-color: #8bb7ff !important; box-shadow: 0 0 0 3px rgba(15,98,254,.08) !important; }
.display-settings-modal .ds-column-search input {
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  border: 0 !important;
  outline: 0 !important;
  font: inherit !important;
  color: var(--gp-text2) !important;
}
.display-settings-modal .ds-column-summary {
  min-height: 34px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.display-settings-modal .ds-column-summary span {
  height: 28px !important;
  padding: 0 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border-radius: 14px !important;
  background: #f2f5f9 !important;
  color: #64748b !important;
  font-size: 11px !important;
}
.display-settings-modal .ds-column-summary span.active { background: #eaf2ff !important; color: var(--gp-brand) !important; }
.display-settings-modal .ds-column-summary b { font-weight: 600 !important; }
.display-settings-modal .ds-col-list {
  padding: 4px !important;
  border: 1px solid #e6ecf4 !important;
  border-radius: 10px !important;
  background: #fbfcfe !important;
}
.display-settings-modal .ds-col-item {
  box-sizing: border-box !important;
  min-height: 38px !important;
  margin: 1px 0 !important;
  padding: 0 8px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: #fff !important;
}
.display-settings-modal .ds-col-item.checked { border-color: #e0e8f4 !important; }
.display-settings-modal .ds-col-item:hover { border-color: #bdd3f7 !important; background: #f5f9ff !important; }
.display-settings-modal .ds-col-item[hidden] { display: none !important; }
.display-settings-modal .ds-col-actions { justify-content: flex-end !important; }
.display-settings-modal .ds-radio-row {
  box-sizing: border-box !important;
  min-height: 88px !important;
  margin-bottom: 10px !important;
  padding: 14px 16px 14px 62px !important;
  position: relative !important;
  border-color: var(--gp-border) !important;
  border-radius: 10px !important;
  background: #fff !important;
}
.display-settings-modal .ds-radio-row::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  top: 20px !important;
  width: 30px !important;
  height: 38px !important;
  border-radius: 5px !important;
  background: repeating-linear-gradient(to bottom,#9bb7e9 0 2px,transparent 2px 7px),#eef4ff !important;
}
.display-settings-modal .ds-radio-row.active { border-color: var(--gp-brand) !important; background: #f3f7ff !important; box-shadow: 0 0 0 2px rgba(15,98,254,.07) !important; }
.display-settings-modal .ds-theme-grid { gap: 14px !important; }
.display-settings-modal .ds-theme-card {
  min-height: 190px !important;
  padding: 14px !important;
  justify-content: flex-start !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 11px !important;
}
.display-settings-modal .ds-theme-preview {
  width: 100% !important;
  height: 92px !important;
  box-sizing: border-box !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: 22px 1fr !important;
  grid-template-rows: 16px 1fr !important;
  gap: 7px !important;
  border: 1px solid #dfe7f2 !important;
  border-radius: 8px !important;
  background: #f7f9fc !important;
}
.display-settings-modal .ds-theme-preview i { grid-row: 1 / 3 !important; border-radius: 4px !important; background: #dce8fb !important; }
.display-settings-modal .ds-theme-preview b { border-radius: 3px !important; background: #fff !important; }
.display-settings-modal .ds-theme-preview em { border-radius: 4px !important; background: #fff !important; }
.display-settings-modal .ds-theme-preview-dark { background: #182236 !important; border-color: #2d3a50 !important; }
.display-settings-modal .ds-theme-preview-dark i { background: #274268 !important; }
.display-settings-modal .ds-theme-preview-dark b,
.display-settings-modal .ds-theme-preview-dark em { background: #253249 !important; }
.display-settings-modal .ds-theme-card.active { border-color: var(--gp-brand) !important; background: #f3f7ff !important; box-shadow: 0 0 0 2px rgba(15,98,254,.07) !important; }
.display-settings-modal .ds-footer {
  box-sizing: border-box !important;
  min-height: 62px !important;
  padding: 10px 18px !important;
  gap: 8px !important;
  border-color: var(--gp-border) !important;
  background: #fff !important;
}
.display-settings-modal .ds-unsaved {
  margin-right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: #b26a08 !important;
  font-size: 11px !important;
  opacity: 0 !important;
  transition: opacity .15s !important;
}
.display-settings-modal .ds-unsaved.visible { opacity: 1 !important; }
.display-settings-modal .ds-unsaved i { color: #f59e0b !important; font-size: 6px !important; }
.display-settings-modal .ds-btn,
.display-settings-modal .ds-btn-sm {
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 13px !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
  color: #475569 !important;
  font-weight: 500 !important;
}
.display-settings-modal .ds-btn-primary { background: var(--gp-brand) !important; border-color: var(--gp-brand) !important; color: #fff !important; }
.display-settings-modal .ds-btn-outline { border-color: #9cbcf0 !important; color: var(--gp-brand) !important; }
@media (max-width: 720px) {
  dialog[open].modal.display-settings-modal:not(#profileDialog) { width: calc(100vw - 20px) !important; height: calc(100vh - 20px) !important; max-height: none !important; }
  .display-settings-modal .ds-body { flex-direction: column !important; }
  .display-settings-modal .ds-left-nav { width: 100% !important; min-height: 54px !important; display: flex !important; overflow-x: auto !important; }
  .display-settings-modal .ds-cat { width: auto !important; flex: 0 0 auto !important; }
  .display-settings-modal .ds-head p { display: none !important; }
}
body.ai-product-shell .rail-item:focus {
  outline: none;
}

body.ai-product-shell .rail-item:focus-visible {
  outline: 2px solid rgba(11, 99, 246, 0.35);
  outline-offset: -2px;
}

body #mainAppContent,
body #mainAppContent :where(
  h1, h2, h3, h4, h5, h6,
  p, span, b, strong, em, small, label,
  button, a, th, td, input, select, textarea
) {
  font-weight: 400 !important;
}

/* Confirmed contract workspace: one readable toolbar without horizontal scrolling. */
#contractsPage .contracts-toolbar-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}
#contractsPage .contracts-toolbar-row,
#contractsPage .contracts-actions-row {
  display: contents !important;
}
#contractsPage .contracts-tabs-inline {
  order: 1 !important;
  flex: 1 1 620px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}
#contractsPage #newPolicyBtn,
#contractsPage #policyDocsDropdown,
#contractsPage #policyImportExportDropdown,
#contractsPage #policyMoreDropdown {
  order: 2 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}
#contractsPage .contracts-search-wrap {
  order: 3 !important;
  flex: 1 1 260px !important;
  max-width: 360px !important;
  margin-left: auto !important;
}
#contractsPage .contracts-spacer {
  display: none !important;
}
#contractsPage .contracts-table-footer {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 6px 12px !important;
  border-top: 1px solid var(--gp-border2) !important;
  background: #FFFFFF !important;
}
#contractsPage .contracts-table-footer .policy-stats-bar {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  border: 0 !important;
  padding: 0 !important;
}
#contractsPage .contracts-result-summary {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  color: var(--gp-muted) !important;
}
#policyMoreDropdownMenu #renewalWorkspaceBtn {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#policyMoreDropdownMenu #renewalWorkspaceBtn .contracts-btn-badge {
  margin-left: auto !important;
}

/* Contract register: center row content and keep long values inside their cells. */
#contractsPage #contractsDataTable thead th {
  text-align: center !important;
  vertical-align: middle !important;
}
#contractsPage #contractsDataTable tr[data-policy-year-row] > td {
  text-align: center !important;
  vertical-align: middle !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#contractsPage #contractsDataTable tr[data-policy-year-row] .policy-category-with-icon,
#contractsPage #contractsDataTable tr[data-policy-year-row] .policy-product-cell,
#contractsPage #contractsDataTable tr[data-policy-year-row] .cell-client,
#contractsPage #contractsDataTable tr[data-policy-year-row] .cell-status {
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#contractsPage #contractsDataTable tr[data-policy-year-row] .policy-product-cell {
  display: flex !important;
}
#contractsPage #contractsDataTable tr[data-policy-year-row] .cell-premium,
#contractsPage #contractsDataTable tr[data-policy-year-row] .cell-dates {
  text-align: center !important;
}
/* Some fallback renderers add .rh and omit data-policy-year-row. Keep the
   premium centered against the full column in every contract row. */
#contractsPage #contractsDataTable tbody td.cell-premium,
#contractsPage #contractsDataTable tbody td.cell-premium.rh {
  text-align: center !important;
}
#contractsPage #contractsDataTable tbody td.cell-premium .policy-premium {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#contractsPage #contractsDataTable tr[data-policy-year-row] .cell-dates {
  white-space: normal !important;
}
#contractsPage #contractsDataTable tr[data-policy-year-row] .policy-date-stack {
  min-height: 40px !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  line-height: 1.25 !important;
  text-align: center !important;
}
#contractsPage #contractsDataTable tr[data-policy-year-row] .policy-date-empty {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
}
#contractsPage #contractsDataTable tr[data-policy-year-row] .policy-row-actions,
#contractsPage #contractsDataTable tr[data-policy-year-row] .policy-actions {
  justify-content: center !important;
  align-items: center !important;
}
#contractsPage #contractsDataTable tr[data-policy-year-row] .client-link {
  max-width: 100% !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#contractsPage #policyToolbar .dropdown-menu.open,
#contractsPage #policyToolbar .dropdown-menu.show {
  display: block !important;
}

/* Product comparison column: use the marked column edge as a shared left axis. */
#productsPage .prod-table thead th:nth-child(4),
#productsPage .prod-table tbody td:nth-child(4),
#productsPage .prod-table tbody td:nth-child(4) .product-match-cell,
#productsPage .prod-table tbody td:nth-child(4) .product-match-cell small {
  text-align: left !important;
}
#productsPage .prod-table tbody td:nth-child(4) .product-match-cell {
  width: 100% !important;
  align-items: flex-start !important;
}
#productsPage .prod-table tbody td:nth-child(4) .product-match {
  align-self: flex-start !important;
}

/* Product rows: all primary values share one horizontal baseline. Secondary
   descriptions stay below and no longer shift their primary value upward. */
#productsPage .prod-table tbody tr {
  height: 64px !important;
}
#productsPage .prod-table tbody td {
  height: 64px !important;
  padding-top: 17px !important;
  padding-bottom: 7px !important;
  vertical-align: top !important;
}
#productsPage .prod-table tbody td.product-check-col {
  padding-top: 23px !important;
}
#productsPage .prod-table tbody .product-name-cell,
#productsPage .prod-table tbody .product-match-cell,
#productsPage .prod-table tbody .product-premium {
  align-content: start !important;
}
#productsPage .prod-table tbody .product-name-cell > span,
#productsPage .prod-table tbody .product-match-cell {
  gap: 3px !important;
}
#productsPage .prod-table tbody .product-name-cell b,
#productsPage .prod-table tbody .product-match,
#productsPage .prod-table tbody .product-mode,
#productsPage .prod-table tbody .product-premium strong {
  line-height: 23px !important;
}

/* Product register: subtle vertical separators for every column. */
#productsPage .prod-table thead th,
#productsPage .prod-table tbody td {
  border-right: 1px solid #EEF2F7 !important;
}
#productsPage .prod-table thead th:last-child,
#productsPage .prod-table tbody td:last-child {
  border-right: 0 !important;
}

/* Contract detail: wide, centered and consistent with the product system. */
dialog.policy-detail-dlg {
  width: min(820px, calc(100vw - 32px)) !important;
  max-width: 820px !important;
  max-height: 75vh !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  overflow: hidden !important;
}
dialog.policy-detail-dlg::backdrop {
  background: rgba(15, 23, 42, .42) !important;
  backdrop-filter: blur(2px) !important;
}
.policy-detail-card {
  width: 100% !important;
  max-height: 75vh !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .22) !important;
}
.policy-detail-head {
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) auto 36px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
  background: #F8FBFF !important;
}
.policy-detail-title-icon {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid #BFDBFE !important;
  border-radius: 10px !important;
  color: var(--gp-brand) !important;
  background: #EFF6FF !important;
  font-size: 18px !important;
}
.policy-detail-head h2 { margin: 0 !important; font-size: 17px !important; font-weight: 400 !important; }
.policy-detail-head p { margin: 4px 0 0 !important; color: var(--gp-muted) !important; font-size: 12px !important; }
.policy-detail-status {
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #DCFCE7 !important;
  color: #15803D !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}
.policy-detail-head .icon-only {
  width: 36px !important; height: 36px !important; padding: 0 !important;
  border: 1px solid var(--gp-border3) !important; border-radius: 8px !important;
  background: #FFFFFF !important; color: var(--gp-text2) !important;
}
.policy-detail-body { min-height: 0 !important; overflow-y: auto !important; padding: 18px !important; }
.policy-detail-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
.policy-detail-summary > div {
  min-height: 76px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 10px !important;
  background: #FFFFFF !important;
}
.policy-detail-summary span,
.policy-detail-field span { color: var(--gp-muted) !important; font-size: 11px !important; }
.policy-detail-summary b { color: var(--gp-text) !important; font-size: 16px !important; font-weight: 400 !important; }
.policy-detail-information {
  margin-top: 16px !important;
  padding: 16px !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 10px !important;
}
.policy-detail-information h3 { margin: 0 0 12px !important; font-size: 14px !important; font-weight: 400 !important; }
.policy-detail-columns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 28px !important; }
.policy-detail-field {
  min-height: 40px !important;
  display: grid !important;
  grid-template-columns: 120px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--gp-border2) !important;
}
.policy-detail-field b { min-width: 0 !important; overflow-wrap: anywhere !important; font-weight: 400 !important; }
.policy-detail-footer {
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 18px !important;
  border-top: 1px solid var(--gp-border2) !important;
  background: #FFFFFF !important;
}
.policy-detail-footer button { min-height: 36px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; }
.policy-detail-footer-spacer { flex: 1 1 auto !important; }
dialog.policy-detail-history-dialog {
  width: min(760px, calc(100vw - 32px)) !important;
  max-width: 760px !important;
  max-height: 70vh !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
dialog.policy-detail-history-dialog::backdrop { background: rgba(15, 23, 42, .38) !important; }
.policy-detail-history-dialog > div { max-height: 70vh !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) !important; background: #FFFFFF !important; }
.policy-detail-history-dialog header { min-height: 58px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 12px 16px !important; border-bottom: 1px solid var(--gp-border2) !important; background: #F8FBFF !important; }
.policy-detail-history-dialog h3 { margin: 0 !important; font-size: 15px !important; font-weight: 400 !important; }
.policy-detail-history-dialog header button { width: 34px !important; height: 34px !important; border: 1px solid var(--gp-border3) !important; border-radius: 8px !important; background: #FFFFFF !important; }
.policy-detail-history-body { min-height: 0 !important; overflow: auto !important; padding: 14px 16px !important; }
.policy-detail-history-body table { width: 100% !important; border-collapse: collapse !important; font-size: 12px !important; }
.policy-detail-history-body th,
.policy-detail-history-body td { padding: 8px 10px !important; border-bottom: 1px solid var(--gp-border2) !important; text-align: left !important; font-weight: 400 !important; }
.policy-detail-history-body th { color: var(--gp-muted) !important; background: #F8FAFC !important; }
.policy-detail-history-body p { margin: 36px 0 !important; text-align: center !important; color: var(--gp-muted) !important; }

/* Product customer actions stay together as one right-aligned control group. */
#productsPage .prod-customer-top {
  grid-template-columns: 48px minmax(320px, 1.45fr) minmax(190px, .75fr) minmax(380px, auto) !important;
}
#productsPage .product-customer-actions {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  min-width: max-content !important;
  white-space: nowrap !important;
}
#productsPage .product-customer-actions button {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

/* Product detail: compact summary, four tabs and fixed actions. */
#productsPage .prod-detail {
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  align-self: stretch !important;
}
#productsPage .product-detail-head { padding: 14px !important; }
#productsPage .product-detail-kpis {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1px !important;
  background: var(--gp-border2) !important;
  border-bottom: 1px solid var(--gp-border2) !important;
}
#productsPage .product-detail-kpis > div {
  min-width: 0 !important;
  padding: 10px !important;
  background: #FFFFFF !important;
}
#productsPage .product-detail-kpis span { display: block !important; color: var(--gp-muted) !important; font-size: 10px !important; }
#productsPage .product-detail-kpis b { display: block !important; margin-top: 4px !important; color: var(--gp-text) !important; font-size: 12px !important; font-weight: 400 !important; overflow-wrap: anywhere !important; }
#productsPage .product-detail-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-bottom: 1px solid var(--gp-border2) !important;
}
#productsPage .product-detail-tabs button {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 7px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: #FFFFFF !important;
  color: var(--gp-muted) !important;
  font-size: 10px !important;
  cursor: pointer !important;
}
#productsPage .product-detail-tabs button i { font-size: 15px !important; }
#productsPage .product-detail-tabs button.active { color: var(--gp-brand) !important; border-bottom-color: var(--gp-brand) !important; background: #F8FBFF !important; }
#productsPage .product-detail-pane {
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 14px 16px !important;
}
#productsPage .product-detail-pane section { min-width: 0 !important; }
#productsPage .product-detail-pane h3 { margin: 0 0 8px !important; font-size: 13px !important; font-weight: 400 !important; }
#productsPage .product-detail-pane h3:not(:first-child) { margin-top: 14px !important; }
#productsPage .product-detail-pane ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#productsPage .product-detail-pane li { position: relative !important; padding: 3px 0 3px 15px !important; font-size: 12px !important; line-height: 1.45 !important; }
#productsPage .product-detail-pane li::before { content: "" !important; position: absolute !important; left: 0 !important; top: 9px !important; width: 5px !important; height: 5px !important; border-radius: 50% !important; background: #93C5FD !important; }
#productsPage .product-detail-pane dl { margin: 14px 0 0 !important; padding-top: 12px !important; border-top: 1px solid var(--gp-border2) !important; }
#productsPage .product-detail-pane dl > div { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 4px 0 !important; }
#productsPage .product-detail-pane dt,
#productsPage .product-detail-pane dd { margin: 0 !important; font-size: 11px !important; font-weight: 400 !important; }
#productsPage .product-detail-pane dt { color: var(--gp-muted) !important; }
#productsPage .product-detail-actions {
  flex-wrap: nowrap !important;
  border-top: 1px solid var(--gp-border2) !important;
  background: #FFFFFF !important;
}
#productsPage .product-detail-actions button { min-width: 0 !important; white-space: normal !important; line-height: 1.15 !important; }
#productsPage .product-detail-actions button.compact { flex: 0 1 auto !important; }

dialog.product-full-detail-dialog {
  width: min(920px, calc(100vw - 32px)) !important;
  max-width: 920px !important;
  max-height: 80vh !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
dialog.product-full-detail-dialog::backdrop { background: rgba(15, 23, 42, .42) !important; backdrop-filter: blur(2px) !important; }
.product-full-detail-card { max-height: 80vh !important; display: grid !important; grid-template-rows: auto minmax(0, 1fr) auto !important; overflow: hidden !important; background: #FFFFFF !important; }
.product-full-detail-card > header { min-height: 72px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 14px 18px !important; border-bottom: 1px solid var(--gp-border2) !important; background: #F8FBFF !important; }
.product-full-detail-card > header > div { display: flex !important; align-items: center !important; gap: 12px !important; }
.product-full-detail-card h2 { margin: 0 !important; font-size: 17px !important; font-weight: 400 !important; }
.product-full-detail-card header p { margin: 4px 0 0 !important; color: var(--gp-muted) !important; }
.product-full-detail-card header button { width: 36px !important; height: 36px !important; border: 1px solid var(--gp-border3) !important; border-radius: 8px !important; background: #FFFFFF !important; }
.product-full-detail-body { min-height: 0 !important; overflow-y: auto !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; padding: 18px !important; }
.product-full-detail-body section { padding: 14px !important; border: 1px solid var(--gp-border) !important; border-radius: 10px !important; }
.product-full-detail-body h3 { margin: 0 0 10px !important; font-size: 13px !important; font-weight: 400 !important; }
.product-full-detail-body ul { margin: 0 !important; padding-left: 18px !important; }
.product-full-detail-body li { padding: 3px 0 !important; font-size: 12px !important; }
.product-full-detail-body dl { margin: 0 !important; }
.product-full-detail-body dl > div { display: flex !important; justify-content: space-between !important; gap: 12px !important; padding: 5px 0 !important; border-bottom: 1px solid var(--gp-border2) !important; }
.product-full-detail-body dt, .product-full-detail-body dd { margin: 0 !important; font-size: 12px !important; font-weight: 400 !important; }
.product-full-detail-card > footer { min-height: 62px !important; display: flex !important; justify-content: flex-end !important; gap: 8px !important; padding: 12px 18px !important; border-top: 1px solid var(--gp-border2) !important; }
.product-full-detail-card > footer button { min-height: 36px !important; padding: 0 14px !important; border-radius: 8px !important; }
.product-full-detail-card > footer .secondary { border: 1px solid var(--gp-border3) !important; background: #FFFFFF !important; color: var(--gp-text2) !important; }
.product-full-detail-card > footer .primary { border: 1px solid var(--gp-brand) !important; background: var(--gp-brand) !important; color: #FFFFFF !important; }

@media (max-width: 1180px) {
  #productsPage .prod-customer-top {
    grid-template-columns: 48px minmax(300px, 1fr) minmax(200px, .55fr) !important;
  }
  #productsPage .product-customer-actions {
    grid-column: 2 / -1 !important;
    grid-row: auto !important;
    justify-self: end !important;
  }
}
@media (max-width: 720px) {
  .policy-detail-summary,
  .policy-detail-columns,
  .product-full-detail-body { grid-template-columns: 1fr !important; }
}

/* 13:17 confirmed fixes: modal centering and product-detail hierarchy. */
dialog[open].policy-detail-dlg {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: auto !important;
  transform: none !important;
}

.annual-expand-collapse-row > td {
  padding: 0 !important;
}
.annual-expand-collapse-bar {
  min-height: 62px !important;
  width: 100% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#productsPage .product-detail-head {
  padding: 16px !important;
  border-bottom: 0 !important;
  background: #F8FBFF !important;
}
#productsPage .product-detail-identity {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
}
#productsPage .product-detail-identity > .carrier-logo,
#productsPage .product-detail-identity > .product-carrier-logo,
#productsPage .product-detail-identity > img {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 10px !important;
}
#productsPage .product-detail-identity > .product-carrier-logo.product-generic-logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  color: var(--gp-brand) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}
#productsPage .product-detail-identity > .product-carrier-logo.product-generic-logo > i {
  display: block !important;
  margin: 0 !important;
  line-height: 1 !important;
}
#productsPage .product-detail-title {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
}
#productsPage .product-detail-title h2 {
  width: 100% !important;
  margin: 0 !important;
  color: var(--gp-text) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
#productsPage .product-detail-title p {
  width: 100% !important;
  margin: 0 !important;
  color: var(--gp-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
#productsPage .product-detail-badges {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 2px !important;
}
#productsPage .product-detail-badges > * {
  margin: 0 !important;
}
#productsPage .product-detail-kpis {
  margin: 0 14px 12px !important;
  border: 1px solid var(--gp-border) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: var(--gp-border2) !important;
}
#productsPage .product-detail-kpis > div {
  min-height: 58px !important;
  padding: 10px 11px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
#productsPage .product-detail-kpis span {
  font-size: 11px !important;
  line-height: 1.2 !important;
}
#productsPage .product-detail-kpis b {
  margin-top: 5px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
}
#productsPage .product-detail-pane {
  min-height: 0 !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
  scroll-padding-bottom: 28px !important;
  padding: 14px 16px 30px !important;
}
#productsPage .product-detail-pane section {
  padding-bottom: 2px !important;
}
#productsPage .product-detail-pane section::after {
  content: "" !important;
  display: block !important;
  height: 12px !important;
}
#productsPage .product-detail-actions {
  position: relative !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  box-shadow: 0 -4px 12px rgba(15, 23, 42, .04) !important;
}
/* Product detail actions: keep all labels readable on one line. */
#productsPage .product-detail-actions button {
  min-width: max-content !important;
  white-space: nowrap !important;
}

/* Team search: reserve a dedicated icon gutter. */
#teamPage .team-input-shell input {
  padding-left: 40px !important;
}
#teamPage .team-input-shell i {
  left: 14px !important;
  width: 16px;
  text-align: center;
}

/* Product register: align the annual amount and its reference note on one axis. */
#productsPage .prod-table tbody td.product-premium {
  text-align: center !important;
}
#productsPage .prod-table tbody td.product-premium strong,
#productsPage .prod-table tbody td.product-premium small {
  width: 100% !important;
  text-align: center !important;
}