/* ═══════════════════════════════════════════════════════════════════
   GP Assurances — Customer Page Reference Redesign
   Scoped to body.gp-customer-redesign (applied when customers page active)
   Loaded LAST — overrides all prior styles for the customer page only.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Root variables (local to this file) ── */
body.gp-customer-redesign {
  --cr-rail-w: 86px;
  --cr-sidebar-w: 280px;
  --cr-header-h: 78px;
  --cr-blue: #0B63F6;
  --cr-blue-hover: #0851D4;
  --cr-blue-bg: #EEF4FF;
  --cr-blue-bg2: #DCE9FF;
  --cr-text: #0F172A;
  --cr-text2: #1E293B;
  --cr-muted: #64748B;
  --cr-muted2: #94A3B8;
  --cr-border: #E8ECF2;
  --cr-border2: #EDF0F5;
  --cr-border3: #E2E8F0;
  --cr-bg: #F5F7FB;
  --cr-bg2: #F8FAFD;
  --cr-bg3: #F8FAFC;
  --cr-white: #FFFFFF;
  --cr-row-h: 58px;
  --cr-radius: 12px;
  --cr-radius-sm: 8px;
  --cr-radius-xs: 6px;
  --cr-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ═══════════════════════════════════════════════════════════════════
   1. LAYOUT GRID — 86px rail + 280px sidebar + fluid workspace
   ═══════════════════════════════════════════════════════════════════ */

/* ── Prevent width collapse: lock the viewport‑width chain ── */
/* Without these, minmax(0,1fr) + min-width:0 on every child lets the
   grid recalculate to ~370 px after auth toggles / resize / page‐switch events. */
body.gp-customer-redesign {
  width: 100% !important;
  min-width: 100vw !important;
}
body.gp-customer-redesign #mainAppContent {
  width: 100% !important;
  min-width: 100% !important;
}
body.gp-customer-redesign .app {
  width: 100% !important;
}
/* Keep the grid’s 1fr column from collapsing below a safe floor.
   480 px + 86 px rail + 280 px sidebar = 846 px, which still fits
   the ≤900 px responsive cut‑off where the sidebar is hidden anyway. */
/* Desktop (≥1200px): 3-column layout with sidebar */
@media (min-width: 1200px) {
  body.gp-customer-redesign .app {
    grid-template-columns: var(--cr-rail-w) var(--cr-sidebar-w) minmax(480px, 1fr) !important;
  }
  body.ai-product-shell.gp-customer-redesign.gp-customers-context .app {
    grid-template-columns: var(--cr-rail-w) var(--cr-sidebar-w) minmax(480px, 1fr) !important;
  }
  body.gp-customer-redesign .app.rail-collapsed {
    grid-template-columns: 54px var(--cr-sidebar-w) minmax(480px, 1fr);
  }
  body.gp-customer-redesign .app.rail-collapsed.sidebar-hidden {
    grid-template-columns: 54px minmax(480px, 1fr);
  }
  body.gp-customer-redesign .app.sidebar-hidden {
    grid-template-columns: var(--cr-rail-w) minmax(480px, 1fr);
  }
  body.gp-customer-redesign .app.sidebar-hidden .list-sidebar {
    display: none;
  }
}

/* Tablet / narrow (≤1199px): 2-column layout, sidebar hidden — aligns with base styles.css breakpoint */
@media (max-width: 1199px) {
  body.gp-customer-redesign .app {
    grid-template-columns: var(--cr-rail-w) minmax(0, 1fr) !important;
  }
  body.ai-product-shell.gp-customer-redesign.gp-customers-context .app {
    grid-template-columns: var(--cr-rail-w) minmax(0, 1fr) !important;
  }
  body.gp-customer-redesign .app.rail-collapsed {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }
  body.gp-customer-redesign .list-sidebar {
    display: none !important;
  }
}

/* Hide efficiency hub on customer page */
body.gp-customer-redesign .efficiency-hub {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   2. ICON RAIL — 86px white, flat blue GP wordmark, thin nav
   ═══════════════════════════════════════════════════════════════════ */
body.gp-customer-redesign .icon-rail {
  width: var(--cr-rail-w) !important;
  min-width: var(--cr-rail-w) !important;
  background: var(--cr-white);
  border-right: 1px solid var(--cr-border2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* GP wordmark — flat blue, no circle, Georgia serif */
body.gp-customer-redesign .icon-rail .gp-brand {
  justify-content: center;
  padding: 14px 4px;
  min-height: 60px;
  border-bottom: 1px solid var(--cr-border2);
}
body.gp-customer-redesign .icon-rail .gp-brand-text { display: none; }
body.gp-customer-redesign .icon-rail .gp-logo {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
}
body.gp-customer-redesign .icon-rail .gp-logo svg.gp-wordmark-svg {
  display: block !important;
  width: 48px;
  height: 28px;
  overflow: visible;
  transform: skewX(-7deg);
}
body.gp-customer-redesign .icon-rail .gp-logo svg.gp-wordmark-svg path {
  fill: none;
  stroke: #075bc8;
  stroke-width: 3.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.gp-customer-redesign .icon-rail .gp-wordmark {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  font-weight: 900;
  font-style: italic;
  color: var(--cr-blue);
  letter-spacing: -0.16em;
  line-height: 1;
  transform: skewX(-8deg);
}

/* Hide collapse button */
body.gp-customer-redesign .rail-collapse-btn { display: none; }

/* Nav items — centered icon + label */
body.gp-customer-redesign .rail-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px;
  gap: 6px;
  flex: 0 0 auto;
}
body.gp-customer-redesign .rail-item {
  width: 74px !important;
  height: 54px !important;
  display: flex !important;
  grid-template-columns: none !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  gap: 3px !important;
  border: 0;
  border-radius: 10px;
  padding: 4px !important;
  color: var(--cr-muted);
  background: transparent;
  font-size: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
body.gp-customer-redesign .rail-item span {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  line-height: 1;
}
body.gp-customer-redesign .rail-item span i {
  font-size: 18px;
  line-height: 1;
}
body.gp-customer-redesign .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;
}
body.gp-customer-redesign .rail-item:hover {
  color: var(--cr-blue);
  background: var(--cr-blue-bg);
}
body.gp-customer-redesign .rail-item.active {
  color: var(--cr-blue);
  background: var(--cr-blue-bg);
}
body.gp-customer-redesign .rail-item.active span,
body.gp-customer-redesign .rail-item.active b { color: var(--cr-blue); }

/* Hide customer-overview item on customer page */
body.gp-customer-redesign .rail-item.rail-reference-hidden,
body.gp-customer-redesign .rail-item[data-page="customer-overview"] {
  display: none !important;
}

/* Separator */
body.gp-customer-redesign .nav-separator {
  width: 58px;
  height: 1px;
  margin: 6px auto;
  background: var(--cr-border2);
}

/* Rail boss-only visibility */
body.gp-customer-redesign .icon-rail.is-boss .rail-boss-only { display: flex !important; }
body.gp-customer-redesign .icon-rail.is-boss .market-btn.rail-boss-only { display: block !important; }
body.gp-customer-redesign .icon-rail.is-boss .nav-separator { display: block; }
body.gp-customer-redesign .icon-rail:not(.is-boss) .nav-separator { display: none; }
body.gp-customer-redesign .rail-boss-only { display: none !important; }

/* ── Rail bottom: language control + settings in fixed bottom area ── */
body.gp-customer-redesign .rail-bottom-area {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  border-top: 1px solid var(--cr-border2);
  flex-shrink: 0;
}
body.gp-customer-redesign .rail-language-control {
  padding: 6px 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
body.gp-customer-redesign .rail-language-control i.bi-globe2 {
  font-size: 14px;
  color: var(--cr-muted);
}
body.gp-customer-redesign .rail-language-control button {
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--cr-muted);
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
body.gp-customer-redesign .rail-language-control button.active {
  background: var(--cr-blue);
  color: var(--cr-white);
}
/* Settings gear button in rail bottom — icon + label, consistent with rail items */
body.gp-customer-redesign .rail-settings-btn {
  width: 74px !important;
  height: 54px !important;
  margin: 2px 0 8px;
  border: 0;
  border-radius: 10px;
  color: var(--cr-muted);
  background: transparent;
  font-size: 10px;
  cursor: pointer;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 4px !important;
  transition: background 0.15s, color 0.15s;
}
body.gp-customer-redesign .rail-settings-btn span {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  line-height: 1;
}
body.gp-customer-redesign .rail-settings-btn span i {
  font-size: 18px;
  line-height: 1;
}
body.gp-customer-redesign .rail-settings-btn 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;
}
body.gp-customer-redesign .rail-settings-btn:hover {
  background: var(--cr-blue-bg);
  color: var(--cr-blue);
}
/* Boss-only visibility for settings button in rail */
body.gp-customer-redesign .icon-rail.is-boss .rail-settings-btn.rail-boss-only { display: flex !important; }
body.gp-customer-redesign .rail-settings-btn.rail-boss-only { display: none !important; }
/* Keep old .market-btn for backward compat but hide it on redesign */
body.gp-customer-redesign .market-btn {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════
   3. CLIENTS CONTEXTUAL SIDEBAR — 280px
   ═══════════════════════════════════════════════════════════════════ */
body.gp-customer-redesign .list-sidebar {
  width: var(--cr-sidebar-w) !important;
  min-width: var(--cr-sidebar-w) !important;
  background: var(--cr-bg2);
  border-right: 1px solid var(--cr-border2);
  display: flex;
  flex-direction: column;
  overflow-y: auto !important;
  overflow-x: hidden;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}
body.gp-customer-redesign .list-sidebar::before,
body.gp-customer-redesign .list-sidebar::after {
  display: none; /* remove old PRO branding pseudo-elements */
}

body.gp-customer-redesign .customer-nav-module {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
}

/* Clients heading with chevron */
body.gp-customer-redesign .sidebar-clients-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 16px 8px;
}
body.gp-customer-redesign .sidebar-clients-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cr-text);
  letter-spacing: -0.01em;
}
body.gp-customer-redesign .sidebar-collapse-chevron {
  width: 28px; height: 28px;
  border: 0;
  border-radius: var(--cr-radius-xs);
  background: transparent;
  color: var(--cr-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
body.gp-customer-redesign .sidebar-collapse-chevron:hover {
  background: var(--cr-blue-bg);
  color: var(--cr-blue);
}

/* Search */
body.gp-customer-redesign .side-search {
  padding: 8px 12px;
}
body.gp-customer-redesign .side-search input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-sm);
  padding: 0 12px;
  background: var(--cr-white);
  font-size: 12px;
  color: var(--cr-text2);
  outline: none;
  transition: border-color 0.15s;
}
body.gp-customer-redesign .side-search input::placeholder {
  color: var(--cr-muted2);
}
body.gp-customer-redesign .side-search input:focus {
  border-color: var(--cr-blue);
}

/* Section titles */
body.gp-customer-redesign .sidebar-section-title {
  padding: 12px 16px 4px;
  color: var(--cr-text2);
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
body.gp-customer-redesign .sidebar-section-divider {
  height: 1px;
  margin: 2px 16px 8px;
  background: var(--cr-border);
}

/* Sidebar links */
body.gp-customer-redesign .side-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: calc(100% - 20px);
  min-height: 34px;
  border: 0;
  border-radius: var(--cr-radius-xs);
  margin: 0 10px;
  padding: 0 10px;
  color: #334155;
  background: transparent;
  text-align: left;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.15s, color 0.15s;
}
body.gp-customer-redesign .side-link:hover {
  color: var(--cr-blue);
  background: var(--cr-blue-bg);
}
body.gp-customer-redesign .side-link.active {
  color: var(--cr-blue);
  background: var(--cr-blue-bg2);
  font-weight: 500;
}

/* Sidebar dots */
body.gp-customer-redesign .side-link .side-dot {
  width: 8px; height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
}

/* Sidebar count badges */
body.gp-customer-redesign .side-link em.side-count-badge {
  margin-left: auto;
  display: inline-flex;
  min-width: 20px;
  height: 18px;
  justify-content: center;
  align-items: center;
  border-radius: 9px;
  color: var(--cr-white);
  background: var(--cr-blue);
  font-style: normal;
  font-size: 10px;
  font-weight: 500;
  padding: 0 5px;
}

/* All customers link — slightly larger */
body.gp-customer-redesign .side-all-customers {
  font-weight: 500;
  margin: 4px 10px;
  border-radius: var(--cr-radius-sm);
  padding: 0 12px;
  min-height: 38px;
}

/* Scope group specific overrides */
body.gp-customer-redesign .scope-group {
  margin-top: 8px;
}
body.gp-customer-redesign .scope-heading {
  padding: 12px 16px 4px;
  color: var(--cr-blue);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body.gp-customer-redesign .scope-divider {
  height: 1px;
  margin: 2px 16px 8px;
  background: var(--cr-border);
}

/* Sidebar bottom: language + settings (from static HTML elements) */
body.gp-customer-redesign .sidebar-bottom-utils {
  margin-top: auto;
  padding: 10px 12px;
  border-top: 1px solid var(--cr-border2);
  display: flex;
  align-items: center;
  gap: 8px;
}
body.gp-customer-redesign .sidebar-bottom-settings {
  margin-left: auto;
  width: 28px; height: 28px;
  border: 0;
  border-radius: var(--cr-radius-xs);
  background: transparent;
  color: var(--cr-muted);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
body.gp-customer-redesign .sidebar-bottom-settings:hover {
  background: var(--cr-blue-bg);
  color: var(--cr-blue);
}

/* ═══════════════════════════════════════════════════════════════════
   4. WORKSPACE + HEADER — 78px
   ═══════════════════════════════════════════════════════════════════ */
body.gp-customer-redesign .workspace {
  grid-template-rows: var(--cr-header-h) minmax(0, 1fr) !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  background: var(--cr-bg);
}

/* Header bar — exactly 78px */
body.gp-customer-redesign .topbar {
  height: var(--cr-header-h);
  min-height: var(--cr-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 24px;
  color: var(--cr-text2);
  background: var(--cr-white);
  border-bottom: 1px solid var(--cr-border2);
  box-sizing: border-box;
  position: relative;
}

body.gp-customer-redesign #customersPage.active {
  display: grid !important;
  grid-template-rows: 88px 56px minmax(0, 1fr) 58px !important;
  gap: 12px !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 18px !important;
  align-content: stretch !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

/* Hide topbar language toggle and utility buttons on customer page */
body.gp-customer-redesign .topbar .gp-lang-toggle { display: none; }
body.gp-customer-redesign .topbar .product-top-utilities { display: none; }

/* Page title area — people icon + title + subtitle */
body.gp-customer-redesign .topbar .page-title-area {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
body.gp-customer-redesign .topbar .page-title-icon {
  font-size: 22px;
  color: var(--cr-blue);
  flex-shrink: 0;
}
body.gp-customer-redesign .topbar .page-title-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.gp-customer-redesign .topbar .page-title-area h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--cr-text);
  white-space: nowrap;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
body.gp-customer-redesign .topbar .page-title-area .live-count {
  font-size: 11px;
  color: var(--cr-muted);
  white-space: nowrap;
  line-height: 1.2;
}

/* Centered search */
body.gp-customer-redesign .top-search {
  position: absolute;
  left: calc(50% - 58px);
  transform: translateX(-50%);
  width: 460px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 460px;
  margin: 0;
}
body.gp-customer-redesign .top-search input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--cr-border3);
  border-radius: 10px;
  padding: 0 16px;
  background: var(--cr-bg3);
  font-size: 13px;
  color: #334155;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
body.gp-customer-redesign .top-search input::placeholder {
  color: var(--cr-muted2);
}
body.gp-customer-redesign .top-search input:focus {
  border-color: var(--cr-blue);
  background: var(--cr-white);
}

/* New client button */
body.gp-customer-redesign .top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
body.gp-customer-redesign .top-actions .btn-new-client {
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--cr-blue);
  color: var(--cr-white);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
body.gp-customer-redesign .top-actions .btn-new-client:hover {
  background: var(--cr-blue-hover);
}
body.gp-customer-redesign .top-actions .btn-new-client i {
  font-size: 14px;
}

/* Hide quickAdd + button */
body.gp-customer-redesign .top-actions #quickAdd { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   5. FILTER CARD — single rounded horizontal row
   ═══════════════════════════════════════════════════════════════════ */
body.gp-customer-redesign .filter-card-group { display: none; }
body.gp-customer-redesign .filter-card-unified {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 88px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius);
  background: var(--cr-white);
  overflow: hidden;
  flex-shrink: 0;
}

body.gp-customer-redesign .filter-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  flex-shrink: 0;
}
body.gp-customer-redesign .filter-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--cr-text2);
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}
body.gp-customer-redesign .filter-section-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
}
body.gp-customer-redesign .filter-section-divider {
  width: 1px;
  height: 54px;
  background: var(--cr-border);
  margin: 0 14px;
  flex-shrink: 0;
}
body.gp-customer-redesign #filterSectionPortfolio { flex: 1 1 0; min-width: 0; }
body.gp-customer-redesign #filterSectionWork { flex: 1 1 0; min-width: 0; }
body.gp-customer-redesign #filterSectionAlerts { flex: 1 1 0; min-width: 0; }
body.gp-customer-redesign .filter-unified-reset {
  flex: 0 0 auto !important;
  min-width: 82px !important;
  white-space: nowrap !important;
}

/* Filter chips */
body.gp-customer-redesign .filter-card { display: none; }
body.gp-customer-redesign .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 12px;
  border: 1px solid var(--cr-border3);
  border-radius: 16px;
  background: var(--cr-bg3);
  color: #475569;
  font-size: 11px;
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
body.gp-customer-redesign .filter-chip:hover {
  border-color: var(--cr-blue);
  color: var(--cr-blue);
  background: var(--cr-blue-bg);
}
body.gp-customer-redesign .filter-chip.active {
  border-color: var(--cr-blue);
  background: var(--cr-blue);
  color: var(--cr-white);
}
body.gp-customer-redesign .filter-chip.active .chip-count {
  color: var(--cr-white);
  opacity: 0.85;
}
body.gp-customer-redesign .filter-chip .chip-count {
  font-weight: 600;
  font-size: 10px;
  color: var(--cr-muted);
}
body.gp-customer-redesign .filter-chip i { font-size: 11px; }
body.gp-customer-redesign .filter-chip i.bi-circle-fill { font-size: 6px; }

/* Alert-specific chip accent colors */
body.gp-customer-redesign .filter-chip.filter-alert-expiry i { color: #CA8A04; }
body.gp-customer-redesign .filter-chip.filter-alert-debt i { color: #DC2626; }

/* Reset button */
body.gp-customer-redesign .filter-unified-reset {
  flex-shrink: 0;
  margin-left: auto;
  width: 28px; height: 28px;
  border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-xs);
  background: var(--cr-white);
  color: var(--cr-muted2);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
body.gp-customer-redesign .filter-unified-reset:hover {
  border-color: var(--cr-blue);
  color: var(--cr-blue);
  background: var(--cr-blue-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   6. ACTION TOOLBAR — Assigne / Maintenance / Importer / Exporter / | / Statut / Produit / spacer / search / Colonnes
   ═══════════════════════════════════════════════════════════════════ */
body.gp-customer-redesign .list-toolbar {
  height: auto;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius-sm);
  background: var(--cr-white);
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
}

/* Toolbar buttons */
body.gp-customer-redesign .list-toolbar button,
body.gp-customer-redesign .toolbar-dropdown-btn {
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-sm);
  padding: 0 14px !important;
  color: #475569;
  background: var(--cr-white);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
body.gp-customer-redesign .list-toolbar button:hover,
body.gp-customer-redesign .toolbar-dropdown-btn:hover {
  border-color: var(--cr-blue);
  color: var(--cr-blue);
}
body.gp-customer-redesign .list-toolbar button.primary,
body.gp-customer-redesign .list-toolbar .blue-action {
  border-color: var(--cr-blue);
  background: var(--cr-blue);
  color: var(--cr-white);
}
body.gp-customer-redesign .list-toolbar button i,
body.gp-customer-redesign .toolbar-dropdown-btn i {
  font-size: 13px;
}

/* Toolbar selects */
body.gp-customer-redesign .list-toolbar select,
body.gp-customer-redesign .list-toolbar .toolbar-select {
  height: 36px;
  border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-sm);
  padding: 0 8px;
  color: #475569;
  background: var(--cr-white);
  font-size: 12px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

body.gp-customer-redesign .toolbar-select-shell {
  height: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  padding-left: 10px;
  border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-sm);
  background: var(--cr-white);
  color: #475569;
  box-sizing: border-box;
}
body.gp-customer-redesign .toolbar-select-shell > i {
  width: 14px;
  flex: 0 0 14px;
  font-size: 13px;
  line-height: 1;
  text-align: center;
  color: #64748b;
  background: transparent !important;
  border-right: none !important;
}
body.gp-customer-redesign .toolbar-select-shell > select.toolbar-select {
  height: 34px;
  min-height: 34px;
  padding: 0 28px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none;
}
body.gp-customer-redesign .toolbar-select-shell:focus-within {
  border-color: var(--cr-blue);
  box-shadow: 0 0 0 2px rgba(11, 99, 246, 0.08);
}
body.gp-customer-redesign .toolbar-assignee-shell { width: 122px; }
body.gp-customer-redesign .toolbar-status-shell { width: 134px; }
body.gp-customer-redesign .toolbar-need-shell { width: 184px; }
body.gp-customer-redesign .toolbar-select-shell > select { width: 100%; min-width: 0 !important; }

body.gp-customer-redesign #btnDataMaintenance { min-width: 154px; }
body.gp-customer-redesign #btnImport,
body.gp-customer-redesign #btnExport { min-width: 96px; }
body.gp-customer-redesign #dsSortBtn { min-width: 156px; justify-content: center; }
body.gp-customer-redesign #btnColumns { min-width: 104px; justify-content: center; }
body.gp-customer-redesign .list-toolbar select:focus,
body.gp-customer-redesign .list-toolbar .toolbar-select:focus {
  border-color: var(--cr-blue);
}

/* Toolbar search */
body.gp-customer-redesign .toolbar-search-input {
  height: 36px !important;
  min-height: 36px !important;
  border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-sm);
  padding: 0 14px;
  color: #334155;
  background: var(--cr-white);
  font-size: 12px;
  outline: none;
  min-width: 200px;
  transition: border-color 0.15s;
}
body.gp-customer-redesign .toolbar-search-input::placeholder {
  color: var(--cr-muted2);
}
body.gp-customer-redesign .toolbar-search-input:focus {
  border-color: var(--cr-blue);
}

/* Toolbar spacer */
body.gp-customer-redesign .toolbar-spacer {
  flex: 1;
}

/* Toolbar separator */
body.gp-customer-redesign .toolbar-sep {
  width: 1px;
  height: 22px;
  background: var(--cr-border3);
  flex-shrink: 0;
  margin: 0 2px;
}

/* Columns button */
body.gp-customer-redesign #btnColumns {
  height: 36px;
  border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-sm);
  padding: 0 14px;
  color: #475569;
  background: var(--cr-white);
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
body.gp-customer-redesign #btnColumns:hover {
  border-color: var(--cr-blue);
  color: var(--cr-blue);
}

/* Toolbar dropdown wrapper */
body.gp-customer-redesign .toolbar-dropdown-wrapper {
  position: relative;
  display: inline-flex;
}

/* Hide the hidden Plus/more toolbar */
body.gp-customer-redesign #toolbarMore { display: none !important; }

/* Selection toolbar styling */
body.gp-customer-redesign #toolbarSelection.active {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
body.gp-customer-redesign #toolbarSelection .selection-count {
  font-size: 12px;
  font-weight: 500;
  color: var(--cr-text2);
}
body.gp-customer-redesign #toolbarSelection button {
  height: 36px;
  border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-sm);
  padding: 0 14px;
  color: #475569;
  background: var(--cr-white);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
body.gp-customer-redesign #toolbarSelection button:hover {
  border-color: var(--cr-blue);
  color: var(--cr-blue);
}
body.gp-customer-redesign #toolbarSelection .destructive-action {
  border-color: #FCA5A5;
  color: #DC2626;
}
body.gp-customer-redesign #toolbarSelection .destructive-action:hover {
  background: #FEF2F2;
  border-color: #DC2626;
}

/* ═══════════════════════════════════════════════════════════════════
   7. TABLE — rounded, dense, reference-matched
   ═══════════════════════════════════════════════════════════════════ */
body.gp-customer-redesign .table-shell {
  margin: 0;
  border: 1px solid var(--cr-border);
  border-radius: var(--cr-radius) var(--cr-radius) 0 0;
  background: var(--cr-white);
  overflow: auto;
  box-shadow: var(--cr-shadow);
  flex: 1;
  min-height: 0;
}

body.gp-customer-redesign .data-table {
  width: max-content !important;
  min-width: max-content !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  height: auto !important;
  align-self: flex-start !important;
}
body.ai-product-shell.gp-customer-redesign.gp-customers-context #customersPage .data-table {
  width: max-content !important;
  min-width: max-content !important;
  table-layout: auto !important;
  height: auto !important;
}
/* ── Canonical column widths removed — columns size to intrinsic content per single-line rule ── */

/* Stable sticky offsets — left: _select + name only (v4) */
body.gp-customer-redesign #customersTable [data-col="_select"] { left: 0 !important; }
body.gp-customer-redesign #customersTable [data-col="name"] { left: 44px !important; }
body.gp-customer-redesign #customersTable [data-col="name"] {
  min-width: 190px !important;
  padding-right: 22px !important;
  box-shadow: inset -1px 0 0 #d7e0ea !important;
}
/* _actions is right-sticky (set via JS), no static left offset needed */

/* Sticky header — solid background above sticky columns, horizontally syncs with table-shell overflow */
body.gp-customer-redesign .data-table thead {
  position: static !important;
  z-index: auto !important;
}
body.gp-customer-redesign .data-table thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  background-color: #f5f7fa !important;
}
body.gp-customer-redesign #customersTable thead th[data-col="_select"],
body.gp-customer-redesign #customersTable thead th[data-col="name"],
body.gp-customer-redesign #customersTable thead th[data-col="status"] {
  z-index: 70 !important;
}
body.gp-customer-redesign #customersTable thead th[data-col="_actions"] {
  z-index: 71 !important;
}

/* Header cells — single-line, no wrapping */
body.gp-customer-redesign .data-table th {
  height: 38px;
  padding: 0 12px;
  color: var(--cr-muted);
  background: var(--cr-bg2);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  text-align: left;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  border-bottom: 1px solid var(--cr-border2);
  letter-spacing: 0.01em;
}
body.gp-customer-redesign .data-table th.cell-center { text-align: center; }
body.gp-customer-redesign .data-table th i { font-size: 12px; color: var(--cr-muted2); }
body.gp-customer-redesign .data-table th .sort-arrow {
  font-size: 9px;
  color: var(--cr-muted2);
  margin-left: 2px;
}

/* Data cells — single-line, no wrapping, columns expand to intrinsic width */
body.gp-customer-redesign .data-table td {
  min-height: var(--cr-row-h) !important;
  padding: 6px 12px;
  color: var(--cr-text2);
  font-size: 12px;
  border-bottom: 1px solid #F1F5F9;
  vertical-align: middle;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
/* Remove all wrapping overrides — every enabled cell stays on ONE line */
body.gp-customer-redesign .data-table td,
body.ai-product-shell.gp-customer-redesign #customersPage #customersTable td,
body.ai-product-shell.gp-customer-redesign.gp-customers-context #customersTable td {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}
/* Remove cell-ellipsis wrapping from all fields */
body.gp-customer-redesign .data-table .cell-ellipsis {
  display: inline;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
body.gp-customer-redesign .data-table td .cell-ellipsis,
body.gp-customer-redesign .data-table td:is([data-col]) .cell-ellipsis {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}
body.gp-customer-redesign #customerRows,
body.gp-customer-redesign #customerRows tr {
  height: auto !important;
}
body.gp-customer-redesign #customerRows tr:not(:has([data-empty-state])) {
  height: var(--cr-row-h) !important;
}

/* Right-sticky _actions column (v4) — shadow from JS, no static last-child rule */
body.ai-product-shell.gp-customer-redesign #customersPage #customersTable [data-col="_actions"] {
  position: sticky;
  right: 0;
  z-index: 2;
}
body.gp-customer-redesign .data-table td.cell-center { text-align: center; }
body.gp-customer-redesign .data-table td.cell-left { text-align: left; }

/* Row hover */
body.gp-customer-redesign .data-table tbody tr:hover td {
  background: #F8FAFF;
}
/* Row selected */
body.gp-customer-redesign .data-table tbody tr.selected td {
  background: var(--cr-blue-bg);
}

/* Column widths removed — columns size to intrinsic content for single-line behavior */

/* ── Client name cell with avatar — single line, no wrapping ── */
body.gp-customer-redesign .data-table .customer-avatar-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.gp-customer-redesign .data-table .customer-avatar {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--cr-blue);
  color: var(--cr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
  letter-spacing: 0;
  text-transform: uppercase;
}
body.gp-customer-redesign .data-table .customer-avatar.av-1 { background: #0B63F6; }
body.gp-customer-redesign .data-table .customer-avatar.av-2 { background: #7C3AED; }
body.gp-customer-redesign .data-table .customer-avatar.av-3 { background: #059669; }
body.gp-customer-redesign .data-table .customer-avatar.av-4 { background: #DC2626; }
body.gp-customer-redesign .data-table .customer-avatar.av-5 { background: #EA580C; }
body.gp-customer-redesign .data-table .customer-avatar.av-6 { background: #0891B2; }
body.gp-customer-redesign .data-table .customer-avatar.av-7 { background: #4F46E5; }
body.gp-customer-redesign .data-table .customer-avatar.av-8 { background: #BE185D; }

/* Client name line — single line, no wrapping */
body.gp-customer-redesign .data-table .customer-name-line {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: visible;
}
body.gp-customer-redesign .data-table .customer-name-line .cust-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--cr-text2);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

/* Client link (name button) */
body.gp-customer-redesign .data-table .client-link {
  color: var(--cr-blue);
  font-weight: 500;
  text-decoration: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  padding: 0;
}
body.gp-customer-redesign .data-table .client-link:hover {
  text-decoration: underline;
}
body.gp-customer-redesign .data-table .plus-box { display: none; }

/* ── Owner circle ── */
body.gp-customer-redesign .data-table .owner-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #E0E7FF;
  color: #4338CA;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
}
body.gp-customer-redesign .data-table .owner-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.gp-customer-redesign .data-table .owner-row .owner-name {
  font-size: 12px;
  color: var(--cr-text2);
}

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

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

/* ── Priority badge ── */
body.gp-customer-redesign .priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
}
body.gp-customer-redesign .priority-badge.high   { color: #DC2626; background: #FEF2F2; }
body.gp-customer-redesign .priority-badge.medium { color: #EA580C; background: #FFF7ED; }
body.gp-customer-redesign .priority-badge.low    { color: #16A34A; background: #F0FDF4; }

/* ── Row action button ── */
body.gp-customer-redesign .row-action-btn {
  width: 28px; height: 28px;
  border: 0;
  border-radius: var(--cr-radius-xs);
  background: transparent;
  color: var(--cr-muted2);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
body.gp-customer-redesign .row-action-btn:hover {
  background: var(--cr-blue-bg);
  color: var(--cr-blue);
}

/* Row more trigger (⋮) */
body.gp-customer-redesign .row-more-trigger {
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--cr-muted);
  font-weight: 400;
  font-size: 16px;
  transition: all 0.15s;
}
body.gp-customer-redesign .row-more-trigger:hover {
  background: var(--cr-blue-bg);
  color: var(--cr-blue);
}

/* Expiry alarm badge */
body.gp-customer-redesign .expiry-alarm-badge {
  font-size: 10px;
  margin-left: 4px;
  font-weight: 500;
}

/* Empty state placeholder */
body.gp-customer-redesign .empty-placeholder {
  color: var(--cr-muted2);
  font-style: italic;
}

/* Checkbox styling */
body.gp-customer-redesign .data-table input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--cr-blue);
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   8. PAGER — integrated, matching reference
   ═══════════════════════════════════════════════════════════════════ */
body.gp-customer-redesign .pager {
  height: 58px;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: -12px;
  padding: 8px 16px;
  border: 1px solid var(--cr-border);
  border-top: 1px solid var(--cr-border2);
  border-radius: 0 0 var(--cr-radius) var(--cr-radius);
  background: var(--cr-white);
  font-size: 12px;
  flex-shrink: 0;
}
body.gp-customer-redesign .pager button {
  height: 30px;
  border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-xs);
  padding: 0 12px;
  color: #475569;
  background: var(--cr-white);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
body.gp-customer-redesign .pager button:hover {
  border-color: var(--cr-blue);
  color: var(--cr-blue);
}
body.gp-customer-redesign .pager button:disabled {
  opacity: 0.4;
  cursor: default;
}
body.gp-customer-redesign .pager button:disabled:hover {
  border-color: var(--cr-border3);
  color: #475569;
}
body.gp-customer-redesign .pager input[type="text"],
body.gp-customer-redesign .pager input:not([type]) {
  width: 48px;
  height: 30px;
  border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-xs);
  text-align: center;
  font-size: 11px;
  color: var(--cr-text2);
  outline: none;
  transition: border-color 0.15s;
}
body.gp-customer-redesign .pager input:focus {
  border-color: var(--cr-blue);
}
body.gp-customer-redesign .pager span {
  color: var(--cr-muted);
  font-size: 11px;
}
body.gp-customer-redesign .pager span b {
  color: var(--cr-text2);
  font-weight: 600;
}
body.gp-customer-redesign .pager-fill { flex: 1; }
body.gp-customer-redesign .pager label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--cr-muted);
}
body.gp-customer-redesign .pager label select {
  height: 30px;
  border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-xs);
  padding: 0 8px;
  font-size: 11px;
  color: var(--cr-text2);
  background: var(--cr-white);
  outline: none;
}

/* Pager controls row (enhanced pager) */
body.gp-customer-redesign .pager .pager-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
body.gp-customer-redesign .pager .pager-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
body.gp-customer-redesign .pager .pager-sep {
  color: var(--cr-border3);
  font-size: 12px;
}

/* Page number buttons (enhanced pager uses .page-num and .active-page) */
body.gp-customer-redesign .pager .page-num {
  min-width: 30px; height: 30px;
  border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-xs);
  background: var(--cr-white);
  color: #475569;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  transition: all 0.15s;
}
body.gp-customer-redesign .pager .page-num:hover {
  border-color: var(--cr-blue);
  color: var(--cr-blue);
}
body.gp-customer-redesign .pager .page-num.active-page {
  border-color: var(--cr-blue);
  background: var(--cr-blue);
  color: var(--cr-white);
}
body.gp-customer-redesign .pager .pager-ellipsis {
  min-width: 30px; height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cr-muted2);
  font-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════════
   9. HIDE LEGACY ELEMENTS
   ═══════════════════════════════════════════════════════════════════ */
body.gp-customer-redesign #customerTabs { display: none; }
body.gp-customer-redesign .mobile-bottom-nav { display: none; }
/* Blacklist restored per Req 5 — visible with consistent dot/count styling */

/* ═══════════════════════════════════════════════════════════════════
   10. RESPONSIVE (≤900px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body.gp-customer-redesign .app {
    grid-template-columns: var(--cr-rail-w) minmax(0, 1fr) !important;
  }
  body.gp-customer-redesign .list-sidebar { display: none; }
  body.gp-customer-redesign .filter-card-unified {
    flex-wrap: wrap;
    margin: 8px 12px;
    padding: 8px 12px;
  }
  body.gp-customer-redesign .filter-section-divider { display: none; }
  body.gp-customer-redesign .table-shell { margin: 0 8px 8px; }
  body.gp-customer-redesign .list-toolbar { padding: 8px 12px; flex-wrap: nowrap; }
  body.gp-customer-redesign .topbar { padding: 0 12px; }
  body.gp-customer-redesign .pager { padding: 6px 12px; flex-wrap: wrap; }
}

/* Section 11 removed — width-collapse prevention is now handled in Section 1
   (layout grid) with viewport‑width chain locking and minmax(480px, 1fr). */

/* ═══════════════════════════════════════════════════════════════════
   11. PROFILE DIALOG RESTYLING (Req 8) — compact header, icon tabs,
   68/32 overview, consistent cards, sticky footer
   ═══════════════════════════════════════════════════════════════════ */

/* Profile dialog: flex column layout, no jump between tabs */
body.gp-customer-redesign #profileDialog .modal-card {
  display: flex !important;
  flex-direction: column !important;
  max-height: min(90vh, calc(100dvh - 24px)) !important;
  overflow: hidden !important;
}
body.gp-customer-redesign #profileDialog .modal-head {
  flex-shrink: 0;
}

/* Compact profile header v4 */
body.gp-customer-redesign .profile-header-v4 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--cr-bg3);
  border-bottom: 1px solid var(--cr-border2);
  flex-shrink: 0;
  flex-wrap: wrap;
}
body.gp-customer-redesign .ph4-tile {
  width: 40px; height: 40px;
  border-radius: var(--cr-radius-sm);
  background: var(--cr-blue-bg);
  color: var(--cr-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
body.gp-customer-redesign .ph4-id-group,
body.gp-customer-redesign .ph4-client-group {
  display: flex; flex-direction: column; gap: 1px;
}
body.gp-customer-redesign .ph4-dossier-label,
body.gp-customer-redesign .ph4-client-label {
  font-size: 10px; color: var(--cr-muted); text-transform: uppercase; letter-spacing: 0.03em;
}
body.gp-customer-redesign .ph4-dossier-value {
  font-size: 12px; color: var(--cr-text2); font-weight: 400;
}
body.gp-customer-redesign .ph4-client-value {
  font-size: 15px; color: var(--cr-text); font-weight: 400;
}
body.gp-customer-redesign .ph4-status-badge {
  font-size: 11px; font-weight: 400; padding: 3px 10px; border-radius: 12px;
  white-space: nowrap; flex-shrink: 0;
}
body.gp-customer-redesign .ph4-meta {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 0 8px; border-left: 1px solid var(--cr-border3);
}
body.gp-customer-redesign .ph4-meta-lbl {
  font-size: 10px; color: var(--cr-muted); text-transform: uppercase; letter-spacing: 0.02em;
}
body.gp-customer-redesign .ph4-meta-val {
  font-size: 12px; color: var(--cr-text2); font-weight: 400;
}
body.gp-customer-redesign .ph4-actions {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
}
body.gp-customer-redesign .ph4-edit-btn {
  height: 32px; border: 1px solid var(--cr-border3); border-radius: var(--cr-radius-xs);
  background: var(--cr-white); color: #475569; font-size: 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; padding: 0 12px;
  transition: all 0.15s;
}
body.gp-customer-redesign .ph4-edit-btn:hover {
  border-color: var(--cr-blue); color: var(--cr-blue); background: var(--cr-blue-bg);
}
body.gp-customer-redesign .ph4-more-summary {
  width: 32px; height: 32px; border: 1px solid var(--cr-border3); border-radius: var(--cr-radius-xs);
  background: var(--cr-white); color: var(--cr-muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; list-style: none;
}
body.gp-customer-redesign .ph4-more-summary::-webkit-details-marker { display: none; }
body.gp-customer-redesign .ph4-dropdown-menu {
  position: absolute; right: 0; top: 100%; margin-top: 4px;
  background: var(--cr-white); border: 1px solid var(--cr-border3); border-radius: var(--cr-radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08); min-width: 180px; z-index: 100;
  padding: 4px;
}
body.gp-customer-redesign .ph4-dropdown-btn {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  border: 0; border-radius: 6px; background: transparent; color: var(--cr-text2);
  font-size: 12px; cursor: pointer;
}
body.gp-customer-redesign .ph4-dropdown-btn:hover {
  background: var(--cr-blue-bg); color: var(--cr-blue);
}

/* Linear icon tab bar */
body.gp-customer-redesign .profile-tab-bar {
  display: flex; align-items: center; gap: 2px;
  padding: 8px 16px; border-bottom: 1px solid var(--cr-border2);
  background: var(--cr-white); flex-shrink: 0;
  overflow-x: auto; scrollbar-width: thin;
}
body.gp-customer-redesign .profile-tab {
  height: 34px; border: 0; border-radius: var(--cr-radius-xs);
  background: transparent; color: var(--cr-muted); font-size: 12px;
  cursor: pointer; padding: 0 14px; display: inline-flex; align-items: center;
  gap: 6px; white-space: nowrap; transition: all 0.15s;
}
body.gp-customer-redesign .profile-tab:hover {
  color: var(--cr-blue); background: var(--cr-blue-bg);
}
body.gp-customer-redesign .profile-tab.is-active {
  color: var(--cr-blue); background: var(--cr-blue-bg); font-weight: 400;
}
body.gp-customer-redesign .profile-tab i { font-size: 14px; }

/* Tab panels: scrollable flex area */
body.gp-customer-redesign .profile-tab-panels {
  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
  min-height: 0; padding: 16px 20px;
}
body.gp-customer-redesign .profile-tab-panel.is-active {
  display: block;
}

/* 68/32 Overview split layout */
body.gp-customer-redesign .profile-overview-split {
  display: flex; gap: 20px; align-items: stretch;
}
body.gp-customer-redesign .profile-overview-left {
  flex: 0 0 68%; min-width: 0;
}
body.gp-customer-redesign .profile-overview-right {
  flex: 0 0 32%; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
}

/* Overview page title */
body.gp-customer-redesign .ov-page-title-row { margin-bottom: 16px; }
body.gp-customer-redesign .ov-page-title {
  font-size: 16px; font-weight: 600; color: var(--cr-text); margin: 0;
}

/* Left overview sections */
body.gp-customer-redesign .ov-left-section {
  margin-bottom: 20px;
}
body.gp-customer-redesign .ov-section-title {
  font-size: 13px; font-weight: 600; color: var(--cr-text2);
  margin: 0 0 10px; display: flex; align-items: center; gap: 6px;
}
/* Two-column label:value grid — labels right-aligned, values left-aligned */
body.gp-customer-redesign .ov-left-grid {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
}
body.gp-customer-redesign .ov-field {
  display: contents;
}
body.gp-customer-redesign .ov-field-lbl {
  font-size: 11px; color: var(--cr-muted); text-align: right; white-space: nowrap;
  padding: 3px 0; font-weight: 400;
}
body.gp-customer-redesign .ov-field-val {
  font-size: 12px; color: var(--cr-text2); text-align: left;
  padding: 3px 0; font-weight: 400;
  word-break: break-word; overflow-wrap: anywhere;
}
body.gp-customer-redesign .ov-field-val.ov-empty {
  color: var(--cr-muted2); font-style: italic;
}
/* Remove bold from all overview fields — use regular weight */
body.gp-customer-redesign .ov-strong .ov-field-val {
  font-weight: 400 !important; color: var(--cr-text2);
}

/* Right summary cards — consistent heights, top-aligned content */
body.gp-customer-redesign .ov-summary-card {
  background: var(--cr-white); border: 1px solid var(--cr-border2);
  border-radius: var(--cr-radius-sm); padding: 14px 16px;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
}
body.gp-customer-redesign .ov-summary-card[data-ov-card="relations"] {
  flex: 1 0 auto;
}
body.gp-customer-redesign .ov-card-head {
  margin-bottom: 10px; flex-shrink: 0;
}
body.gp-customer-redesign .ov-card-head h5 {
  font-size: 13px; font-weight: 600; color: var(--cr-text2); margin: 0;
  display: flex; align-items: center; gap: 6px;
}
body.gp-customer-redesign .ov-card-body {
  flex: 1 1 auto;
}
body.gp-customer-redesign .ov-card-kv {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-size: 11px;
}
body.gp-customer-redesign .ov-card-kv span {
  color: var(--cr-muted);
}
body.gp-customer-redesign .ov-card-kv b {
  color: var(--cr-text2); font-weight: 400; text-align: right;
}
body.gp-customer-redesign .ov-card-kv-strong b {
  color: var(--cr-blue); font-weight: 400;
}
body.gp-customer-redesign .ov-warn { color: #DC2626 !important; }
body.gp-customer-redesign .ov-card-view-all {
  display: block; width: 100%; margin-top: 10px; padding: 6px 0;
  border: 0; border-top: 1px solid var(--cr-border2);
  background: transparent; color: var(--cr-blue); font-size: 11px;
  font-weight: 500; cursor: pointer; text-align: center; flex-shrink: 0;
}
body.gp-customer-redesign .ov-card-view-all:hover { text-decoration: underline; }

/* Actions to treat section */
body.gp-customer-redesign .ov-actions-panel {
  border: 1px solid var(--cr-border2); border-radius: var(--cr-radius-sm);
  padding: 14px 16px; background: var(--cr-white);
}
body.gp-customer-redesign .ov-actions-body {
  display: flex; flex-direction: column; gap: 8px;
}
body.gp-customer-redesign .ov-actions-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 10px; border-radius: var(--cr-radius-xs);
  background: var(--cr-bg3); border: 1px solid var(--cr-border2);
}
body.gp-customer-redesign .ov-actions-row.ov-actions-warn {
  border-color: #FED7AA; background: #FFF7ED;
}
body.gp-customer-redesign .ov-actions-info {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
body.gp-customer-redesign .ov-actions-label {
  font-size: 12px; font-weight: 500; color: var(--cr-text2);
}
body.gp-customer-redesign .ov-actions-detail {
  font-size: 10px; color: var(--cr-muted);
}
body.gp-customer-redesign .ov-actions-btn {
  height: 28px; padding: 0 10px; border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-xs); background: var(--cr-white);
  color: var(--cr-text2); font-size: 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  flex-shrink: 0;
}
body.gp-customer-redesign .ov-actions-btn:hover {
  border-color: var(--cr-blue); color: var(--cr-blue); background: var(--cr-blue-bg);
}
body.gp-customer-redesign .ov-actions-ok {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  color: #16A34A; font-size: 12px;
}
body.gp-customer-redesign .ov-actions-ok i { font-size: 16px; }

/* Audit metadata row below actions */
body.gp-customer-redesign .ov-audit-row {
  display: flex; gap: 20px; padding: 8px 0; font-size: 11px; color: var(--cr-muted);
  border-top: 1px solid var(--cr-border2); margin-top: 8px;
}
body.gp-customer-redesign .ov-audit-row b { color: var(--cr-text2); font-weight: 500; }

/* Remark edit area */
body.gp-customer-redesign .ov-remark-edit-area {
  display: flex; flex-direction: column; gap: 8px;
}
body.gp-customer-redesign .ov-remark-textarea {
  width: 100%; min-height: 72px; padding: 10px 12px;
  border: 1px solid var(--cr-border3); border-radius: var(--cr-radius-xs);
  font-size: 12px; color: var(--cr-text2); resize: vertical; outline: none;
  font-family: inherit;
}
body.gp-customer-redesign .ov-remark-textarea:focus { border-color: var(--cr-blue); }
body.gp-customer-redesign .ov-remark-save-btn {
  align-self: flex-start; height: 30px; padding: 0 14px;
  border: 1px solid var(--cr-blue); border-radius: var(--cr-radius-xs);
  background: var(--cr-blue); color: var(--cr-white); font-size: 11px;
  cursor: pointer; transition: all 0.15s;
}
body.gp-customer-redesign .ov-remark-save-btn:hover { background: var(--cr-blue-hover); }

/* Sticky aligned footer actions */
body.gp-customer-redesign #profileDialog .profile-bottom-bar {
  flex-shrink: 0 !important;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-top: 1px solid var(--cr-border2);
  background: var(--cr-white); position: sticky !important; bottom: 0;
  z-index: 20;
}
body.gp-customer-redesign .pbb-btn {
  height: 36px; padding: 0 18px; border: 1px solid var(--cr-border3);
  border-radius: var(--cr-radius-sm); background: var(--cr-white);
  color: #475569; font-size: 12px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all 0.15s;
}
body.gp-customer-redesign .pbb-btn:hover {
  border-color: var(--cr-blue); color: var(--cr-blue); background: var(--cr-blue-bg);
}
body.gp-customer-redesign .pbb-btn.primary {
  border-color: var(--cr-blue); background: var(--cr-blue); color: var(--cr-white);
}
body.gp-customer-redesign .pbb-btn.primary:hover { background: var(--cr-blue-hover); }

/* Responsive: 68/32 stacks on narrow screens */
@media (max-width: 900px) {
  body.gp-customer-redesign .profile-overview-split {
    flex-direction: column;
  }
  body.gp-customer-redesign .profile-overview-left,
  body.gp-customer-redesign .profile-overview-right {
    flex: 1 1 auto;
  }
  body.gp-customer-redesign .ov-left-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   12. DISPLAY SETTINGS MODAL — language toggle in footer (Req 1)
   ═══════════════════════════════════════════════════════════════════ */
.display-settings-modal .ds-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.display-settings-modal .ds-footer-left {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  flex-shrink: 0;
}
.display-settings-modal .ds-lang-icon {
  font-size: 15px;
  color: #64748B;
  flex-shrink: 0;
}
.display-settings-modal .ds-lang-btn {
  height: 28px;
  min-width: 36px;
  padding: 0 8px;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  background: #FFFFFF;
  color: #64748B;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.display-settings-modal .ds-lang-btn:hover {
  border-color: #0B63F6;
  color: #0B63F6;
  background: #EEF4FF;
}
.display-settings-modal .ds-lang-btn.active {
  border-color: #0B63F6;
  background: #0B63F6;
  color: #FFFFFF;
}

/* Final alignment guarantees for the customer-detail workspace. */
body.gp-customer-redesign .profile-overview-left {
  display: flex;
  flex-direction: column;
}
body.gp-customer-redesign .profile-overview-left .ov-actions-panel {
  flex: 1 0 auto;
}
body.gp-customer-redesign #profileDialog .profile-bottom-bar {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   13. CONTRACT CARD — evenly distributed, regular weight
   ═══════════════════════════════════════════════════════════════════ */
/* Contract row: 4 equal columns instead of catprod + grid */
body.gp-customer-redesign #profileDialog .ppc-row-main {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}
body.gp-customer-redesign #profileDialog .ppc-col-catprod {
  min-width: 0 !important;
  flex-shrink: 1 !important;
}
body.gp-customer-redesign #profileDialog .ppc-row-grid {
  grid-column: 2 / 5 !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px 12px !important;
  min-width: 0 !important;
}
/* Regular text weight for all contract fields */
body.gp-customer-redesign #profileDialog .ppc-field em {
  font-weight: 400 !important;
  color: #64748B !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
body.gp-customer-redesign #profileDialog .ppc-field .ppc-field-value {
  font-weight: 400 !important;
}
body.gp-customer-redesign #profileDialog .ppc-cat {
  font-weight: 400 !important;
}
body.gp-customer-redesign #profileDialog .ppc-product {
  font-weight: 400 !important;
  font-size: 12px !important;
}
/* Late fee editor: ensure collapsed by default, visible on edit */
body.gp-customer-redesign #profileDialog .ppc-latefee-editor {
  display: none !important;
}
body.gp-customer-redesign #profileDialog .ppc-latefee-editor.is-expanded {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #FFFBEB;
  border-top: 1px solid #FEF3C7;
}
/* Penalty/late-fee summary row, edit row, coverage/actions row vertically centered */
body.gp-customer-redesign #profileDialog .ppc-latefee-panel {
  align-items: center !important;
}
body.gp-customer-redesign #profileDialog .ppc-row-meta-bottom {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 16px !important;
  flex-wrap: wrap !important;
}
body.gp-customer-redesign #profileDialog .ppc-row-meta-bottom .ppc-row-actions-inline {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* Final customer-list integrity rules: preserve complete labels and click targets. */
body.gp-customer-redesign .data-table .customer-avatar-cell {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: inherit !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
}
body.gp-customer-redesign .data-table .customer-avatar-cell:hover .cust-name {
  color: var(--cr-blue) !important;
}
body.gp-customer-redesign .data-table td[data-col="city"],
body.gp-customer-redesign .data-table td[data-col="contract_category"],
body.gp-customer-redesign .data-table td[data-col="contracts_bought"],
body.gp-customer-redesign .data-table td[data-col="need"] {
  overflow: visible !important;
  text-overflow: clip !important;
}
body.gp-customer-redesign .data-table td[data-col="city"] {
  min-width: 150px !important;
  white-space: nowrap !important;
}

/* Customer detail: every label and value starts from a stable left edge. */
body.gp-customer-redesign #profileDialog .ov-left-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 28px !important;
}
body.gp-customer-redesign #profileDialog .ov-field {
  display: grid !important;
  grid-template-columns: minmax(96px, 118px) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 10px !important;
  min-width: 0 !important;
  padding: 5px 0 !important;
}
body.gp-customer-redesign #profileDialog .ov-field-lbl,
body.gp-customer-redesign #profileDialog .ov-field-val {
  text-align: left !important;
}
body.gp-customer-redesign #profileDialog .ov-card-kv {
  display: grid !important;
  grid-template-columns: minmax(110px, 42%) minmax(0, 1fr) !important;
  justify-content: initial !important;
  gap: 10px !important;
  align-items: start !important;
}
body.gp-customer-redesign #profileDialog .ov-card-kv span,
body.gp-customer-redesign #profileDialog .ov-card-kv b {
  text-align: left !important;
  overflow-wrap: anywhere !important;
}

/* Customer contract card: compact left-to-right information flow. */
body.gp-customer-redesign #profileDialog .ppc-row-main {
  grid-template-columns: minmax(150px, .9fr) minmax(0, 3.1fr) !important;
  gap: 20px !important;
  align-items: start !important;
}
body.gp-customer-redesign #profileDialog .ppc-row-grid {
  grid-column: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) !important;
  gap: 12px 24px !important;
  align-items: start !important;
}
body.gp-customer-redesign #profileDialog .ppc-field,
body.gp-customer-redesign #profileDialog .ppc-field em,
body.gp-customer-redesign #profileDialog .ppc-field .ppc-field-value {
  text-align: left !important;
}
body.gp-customer-redesign #profileDialog .ppc-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px !important;
  min-width: 0 !important;
}
body.gp-customer-redesign #profileDialog .ppc-field .ppc-field-value {
  width: 100% !important;
  overflow-wrap: anywhere !important;
}
body.gp-customer-redesign #profileDialog .ppc-row-grid > .ppc-field:nth-child(3),
body.gp-customer-redesign #profileDialog .ppc-row-grid > .ppc-field:nth-child(6) {
  width: min(100%, 220px) !important;
  justify-self: end !important;
}
body.gp-customer-redesign #profileDialog .ppc-latefee-editor[hidden] {
  display: none !important;
}

/* All subscribed policies: visible table, full data rows and responsive filters. */
body.gp-customer-redesign #profileCardAllPolicies .all-policies-filters {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.8fr) repeat(4, minmax(130px, 1fr)) auto auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cr-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #FFFFFF !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-filters input,
body.gp-customer-redesign #profileCardAllPolicies .all-policies-filters select,
body.gp-customer-redesign #profileCardAllPolicies .all-policies-filters button {
  width: 100% !important;
  min-width: 0 !important;
  height: 34px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--cr-border3) !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
  color: var(--cr-text) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-filters button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  color: var(--cr-blue) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
body.gp-customer-redesign #profileCardAllPolicies .apf-result-count {
  color: var(--cr-muted) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  text-align: right !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table-wrap {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table {
  display: table !important;
  width: 100% !important;
  min-width: 980px !important;
  table-layout: fixed !important;
  border-collapse: collapse !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table thead {
  display: table-header-group !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table tbody {
  display: table-row-group !important;
  padding: 0 !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table tr {
  display: table-row !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table th,
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table td {
  display: table-cell !important;
  height: auto !important;
  padding: 10px 12px !important;
  border-right: 1px solid #EEF2F7 !important;
  border-bottom: 1px solid #EEF2F7 !important;
  color: var(--cr-text) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table th {
  background: var(--cr-bg2) !important;
  color: var(--cr-muted) !important;
  text-align: left !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table td::before {
  display: none !important;
  content: none !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table th:nth-child(1) { width: 14% !important; }
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table th:nth-child(2) { width: 25% !important; }
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table th:nth-child(3) { width: 15% !important; }
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table th:nth-child(4) { width: 10% !important; }
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table th:nth-child(5) { width: 20% !important; }
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table th:nth-child(6) { width: 10% !important; }
body.gp-customer-redesign #profileCardAllPolicies .all-policies-table th:nth-child(7) { width: 6% !important; }
body.gp-customer-redesign #profileCardAllPolicies .ap-policy-product {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
body.gp-customer-redesign #profileCardAllPolicies .ap-policy-product small {
  color: var(--cr-muted) !important;
  font-size: 11px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body.gp-customer-redesign #profileCardAllPolicies .ap-policy-dates {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  white-space: nowrap !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-empty-cell {
  height: 150px !important;
  text-align: center !important;
  color: var(--cr-muted) !important;
}
body.gp-customer-redesign #profileCardAllPolicies .all-policies-empty-cell > i,
body.gp-customer-redesign #profileCardAllPolicies .all-policies-empty-cell > span,
body.gp-customer-redesign #profileCardAllPolicies .all-policies-empty-cell > button {
  margin: 0 5px !important;
}
@media (max-width: 920px) {
  body.gp-customer-redesign #profileDialog .ov-left-grid {
    grid-template-columns: 1fr !important;
  }
  body.gp-customer-redesign #profileDialog .ppc-row-main {
    grid-template-columns: 1fr !important;
  }
  body.gp-customer-redesign #profileDialog .ppc-row-grid {
    grid-column: 1 !important;
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }
  body.gp-customer-redesign #profileDialog .ppc-row-grid > .ppc-field:nth-child(3),
  body.gp-customer-redesign #profileDialog .ppc-row-grid > .ppc-field:nth-child(6) {
    width: 100% !important;
    justify-self: stretch !important;
  }
  body.gp-customer-redesign #profileCardAllPolicies .all-policies-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
body.gp-customer-redesign .data-table td[data-col="contract_category"],
body.gp-customer-redesign .data-table td[data-col="contracts_bought"] {
  min-width: 280px !important;
  white-space: normal !important;
}
body.gp-customer-redesign .data-table td[data-col="need"] {
  min-width: 220px !important;
  white-space: normal !important;
}
body.gp-customer-redesign .contract-icon-pills,
body.gp-customer-redesign .product-tags-cell {
  display: flex !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  overflow: visible !important;
}
body.gp-customer-redesign .contract-outline-pill,
body.gp-customer-redesign .product-tag {
  flex: 0 0 auto !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body.gp-customer-redesign .customer-cell-empty {
  color: #94a3b8 !important;
  font-size: 11px !important;
  font-style: normal !important;
  white-space: nowrap !important;
}
body.gp-customer-redesign .city-only-value {
  white-space: nowrap !important;
}

/* Confirmed customer-detail alignment pass. */
body.gp-customer-redesign .profile-tab-bar {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(96px, 1fr)) !important;
  gap: 4px !important;
  padding: 6px 10px !important;
}
body.gp-customer-redesign .profile-tab {
  width: 100% !important;
  height: 58px !important;
  padding: 6px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
}
body.gp-customer-redesign .profile-tab i {
  font-size: 17px !important;
  line-height: 1 !important;
}
body.gp-customer-redesign .profile-tab span {
  display: block !important;
  font-weight: 400 !important;
}
body.gp-customer-redesign .profile-overview-left .ov-actions-panel,
body.gp-customer-redesign .profile-overview-right .ov-summary-lower {
  margin-top: auto !important;
}
body.gp-customer-redesign .profile-overview-left .ov-actions-panel {
  flex: 0 0 auto !important;
}
body.gp-customer-redesign .profile-overview-right .ov-summary-lower {
  display: grid !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}
body.gp-customer-redesign .profile-overview-right .ov-summary-lower .ov-summary-card {
  min-height: 0 !important;
}
body.gp-customer-redesign #profileDialog .ov-field-val {
  text-align: right !important;
  border-bottom: 1px solid var(--cr-border2) !important;
  min-height: 22px !important;
}
body.gp-customer-redesign #profileDialog .ov-card-kv b {
  text-align: right !important;
}
body.gp-customer-redesign #profileDialog .ppc-row-grid {
  width: 100% !important;
}
body.gp-customer-redesign #profileDialog .ppc-row-grid > .ppc-field:nth-child(3),
body.gp-customer-redesign #profileDialog .ppc-row-grid > .ppc-field:nth-child(6) {
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}
@media (max-width: 820px) {
  body.gp-customer-redesign .profile-tab-bar {
    grid-template-columns: repeat(7, minmax(76px, 1fr)) !important;
  }
}

/* Keep settings as a normal rail item fixed at the bottom. */
body.gp-customer-redesign .rail-bottom-area {
  width: 84px !important;
  min-height: 66px !important;
  margin-top: auto !important;
  padding: 6px 5px 8px !important;
  border-top: 1px solid var(--cr-border) !important;
  background: var(--cr-white) !important;
}
body.gp-customer-redesign .rail-settings-btn,
body.gp-customer-redesign .icon-rail.is-boss .rail-settings-btn.rail-boss-only {
  display: flex !important;
  width: 72px !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 5px 2px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
}

/* Final overview alignment: both lower card groups share the same bottom edge. */
body.gp-customer-redesign .profile-overview-split {
  align-items: stretch !important;
}
body.gp-customer-redesign .profile-overview-left,
body.gp-customer-redesign .profile-overview-right {
  align-self: stretch !important;
}
body.gp-customer-redesign .profile-overview-left .ov-actions-panel {
  margin-bottom: 0 !important;
}
body.gp-customer-redesign .profile-overview-right .ov-summary-lower {
  margin-bottom: 0 !important;
}

/* Contract/product tags remain inside their own cell and wrap only between tags. */
body.gp-customer-redesign #customersTable td[data-col="contracts_bought"] {
  display: table-cell !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  height: auto !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  vertical-align: top !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}
body.gp-customer-redesign #customersTable .product-tags-wrap {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  overflow: hidden !important;
}
body.gp-customer-redesign #customersTable td[data-col="contracts_bought"] .product-tag {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body.gp-customer-redesign #customersTable tbody tr,
body.gp-customer-redesign #customersTable tbody td {
  height: auto !important;
}

/* 13:17 confirmed customer-contract refinements. */
body.gp-customer-redesign #profileDialog .ppc-empty-state {
  width: 100% !important;
  min-height: 210px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 28px 24px !important;
  text-align: center !important;
}
body.gp-customer-redesign #profileDialog .ppc-empty-state .pe-shield-icon {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto !important;
}
body.gp-customer-redesign #profileDialog .ppc-empty-state .pe-shield-icon i {
  font-size: 28px !important;
}
body.gp-customer-redesign #profileDialog .ppc-empty-state .pe-empty-content {
  width: min(100%, 390px) !important;
  max-width: 390px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 auto !important;
  text-align: center !important;
}
body.gp-customer-redesign #profileDialog .ppc-empty-state .pe-empty-main {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  text-align: center !important;
}
body.gp-customer-redesign #profileDialog .ppc-empty-state .pe-empty-hint {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
body.gp-customer-redesign #profileDialog .ppc-empty-state .empty-policy-add-btn {
  min-width: 240px !important;
  justify-content: center !important;
  margin-top: 4px !important;
}

body.gp-customer-redesign #profileDialog .ppc-row-main {
  grid-template-columns: minmax(220px, .72fr) minmax(0, 3.28fr) !important;
  gap: 28px !important;
  align-items: start !important;
}
body.gp-customer-redesign #profileDialog .ppc-col-catprod {
  min-width: 0 !important;
  max-width: none !important;
  gap: 7px !important;
  align-items: flex-start !important;
  text-align: left !important;
}
body.gp-customer-redesign #profileDialog .ppc-cat {
  font-size: 15px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}
body.gp-customer-redesign #profileDialog .ppc-cat .insurance-icon-only {
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px !important;
}
body.gp-customer-redesign #profileDialog .ppc-product {
  width: 100% !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}
body.gp-customer-redesign #profileDialog .ppc-status-badge {
  font-size: 13px !important;
  line-height: 1.4 !important;
  padding: 5px 12px !important;
}
body.gp-customer-redesign #profileDialog .ppc-row-grid {
  grid-column: 2 !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(170px, 1fr)) !important;
  justify-content: end !important;
  gap: 14px 28px !important;
}
body.gp-customer-redesign #profileDialog .ppc-row-grid > .ppc-field,
body.gp-customer-redesign #profileDialog .ppc-row-grid > .ppc-field:nth-child(3n+1),
body.gp-customer-redesign #profileDialog .ppc-row-grid > .ppc-field:nth-child(3n+2),
body.gp-customer-redesign #profileDialog .ppc-row-grid > .ppc-field:nth-child(3n) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
  align-items: flex-end !important;
  text-align: right !important;
}
body.gp-customer-redesign #profileDialog .ppc-row-grid .ppc-field em,
body.gp-customer-redesign #profileDialog .ppc-row-grid .ppc-field .ppc-field-value {
  width: 100% !important;
  min-width: 0 !important;
  text-align: right !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}
body.gp-customer-redesign #profileDialog .ppc-row-grid .ppc-field em {
  min-height: 20px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}
body.gp-customer-redesign #profileDialog .ppc-row-grid .ppc-field .ppc-field-value {
  min-height: 23px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

@media (max-width: 980px) {
  body.gp-customer-redesign #profileDialog .ppc-row-main {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  body.gp-customer-redesign #profileDialog .ppc-row-grid {
    grid-column: 1 !important;
    grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
  }
}