/* -------------------------------------------------------------------
   Stage 105.1B CLEAN — Customer Directory Professional Layout v1
   Frontend-only CSS transformation for Customers → List Customers and
   directory-style customer pages. This file changes visual layout only.
   It does not change routes, API calls, popup behaviour, save behaviour,
   customer package/speed logic, or backend business logic.
------------------------------------------------------------------- */

:root{
  --ui2-dirpro-bg:
    radial-gradient(circle at top left, rgba(14,165,233,.16), transparent 34%),
    radial-gradient(circle at top right, rgba(99,102,241,.13), transparent 30%),
    linear-gradient(135deg, rgba(248,250,252,.98), rgba(239,246,255,.78) 56%, rgba(245,247,251,.98));
  --ui2-dirpro-hero: rgba(255,255,255,.94);
  --ui2-dirpro-hero-strong: rgba(255,255,255,.985);
  --ui2-dirpro-panel: rgba(255,255,255,.96);
  --ui2-dirpro-panel-soft: rgba(248,250,252,.88);
  --ui2-dirpro-border: rgba(148,163,184,.26);
  --ui2-dirpro-border-strong: rgba(37,99,235,.26);
  --ui2-dirpro-text: #0f172a;
  --ui2-dirpro-muted: #64748b;
  --ui2-dirpro-accent: #2563eb;
  --ui2-dirpro-accent-2: #06b6d4;
  --ui2-dirpro-accent-3: #7c3aed;
  --ui2-dirpro-success: #16a34a;
  --ui2-dirpro-warning: #d97706;
  --ui2-dirpro-danger: #dc2626;
  --ui2-dirpro-shadow: 0 24px 70px rgba(15,23,42,.11);
  --ui2-dirpro-shadow-soft: 0 14px 36px rgba(15,23,42,.075);
  --ui2-dirpro-radius-xl: 30px;
  --ui2-dirpro-radius-lg: 24px;
}

html[data-theme="dark"], body.dark, body.theme-dark{
  --ui2-dirpro-bg:
    radial-gradient(circle at top left, rgba(14,165,233,.18), transparent 34%),
    radial-gradient(circle at top right, rgba(124,58,237,.16), transparent 30%),
    linear-gradient(135deg, rgba(2,6,23,.98), rgba(15,23,42,.92) 58%, rgba(30,41,59,.84));
  --ui2-dirpro-hero: rgba(15,23,42,.92);
  --ui2-dirpro-hero-strong: rgba(15,23,42,.97);
  --ui2-dirpro-panel: rgba(15,23,42,.92);
  --ui2-dirpro-panel-soft: rgba(30,41,59,.70);
  --ui2-dirpro-border: rgba(148,163,184,.22);
  --ui2-dirpro-border-strong: rgba(96,165,250,.28);
  --ui2-dirpro-text: #e5edf8;
  --ui2-dirpro-muted: #9fb0c5;
  --ui2-dirpro-accent: #60a5fa;
  --ui2-dirpro-accent-2: #22d3ee;
  --ui2-dirpro-accent-3: #a78bfa;
  --ui2-dirpro-shadow: 0 26px 74px rgba(0,0,0,.34);
  --ui2-dirpro-shadow-soft: 0 16px 42px rgba(0,0,0,.24);
}

/* Scope: only directory-style Customer pages marked by the 105.1B marker. */
body.ispforge-ui-v2-customer-directory-professional-active #page,
body.ispforge-ui-v2-customer-directory-professional-active main,
body.ispforge-ui-v2-customer-directory-professional-active .main-content,
body.ispforge-ui-v2-customer-directory-professional-active .content,
body.ispforge-ui-v2-customer-directory-professional-active .page{
  background: var(--ui2-dirpro-bg) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active #page,
body.ispforge-ui-v2-customer-directory-professional-active .page,
body.ispforge-ui-v2-customer-directory-professional-active .main-content{
  max-width: 1640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Professional directory hero. */
body.ispforge-ui-v2-customer-directory-professional-active .page-title-row{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: center !important;
  position: relative !important;
  isolation: isolate !important;
  margin: 2px 0 20px !important;
  padding: clamp(22px, 2.2vw, 34px) clamp(22px, 2.4vw, 38px) !important;
  border: 1px solid var(--ui2-dirpro-border-strong) !important;
  border-radius: var(--ui2-dirpro-radius-xl) !important;
  background:
    radial-gradient(circle at 86% 16%, rgba(37,99,235,.20), transparent 24%),
    radial-gradient(circle at 4% 80%, rgba(6,182,212,.14), transparent 30%),
    linear-gradient(135deg, var(--ui2-dirpro-hero-strong), var(--ui2-dirpro-hero)) !important;
  box-shadow: var(--ui2-dirpro-shadow) !important;
  overflow: hidden !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .page-title-row::before{
  content: "" !important;
  position: absolute !important;
  inset: auto 28px 0 28px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--ui2-dirpro-accent-2), var(--ui2-dirpro-accent), var(--ui2-dirpro-accent-3)) !important;
  opacity: .90 !important;
  z-index: 0 !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .page-title-row::after{
  content: "Customer Directory" !important;
  position: absolute !important;
  right: 24px !important;
  top: 18px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(37,99,235,.22) !important;
  border-radius: 999px !important;
  background: rgba(37,99,235,.085) !important;
  color: var(--ui2-dirpro-accent) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .085em !important;
  text-transform: uppercase !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .page-title-row > *{
  position: relative !important;
  z-index: 1 !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .page-title-row h1{
  margin: 0 0 8px !important;
  color: var(--ui2-dirpro-text) !important;
  font-size: clamp(32px, 3vw, 48px) !important;
  font-weight: 950 !important;
  letter-spacing: -.064em !important;
  line-height: .98 !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .page-title-row p{
  max-width: 820px !important;
  margin: 0 !important;
  color: var(--ui2-dirpro-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.62 !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .page-actions{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  max-width: 460px !important;
  padding-top: 18px !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .page-actions button,
body.ispforge-ui-v2-customer-directory-professional-active .page-actions .button,
body.ispforge-ui-v2-customer-directory-professional-active .page-actions a.button{
  min-height: 42px !important;
  padding: 10px 15px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
}

/* Professional KPI rail: looks more like a SaaS workbench. */
body.ispforge-ui-v2-customer-directory-professional-active .kpi-row{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  margin: 0 0 20px !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .kpi{
  position: relative !important;
  min-height: 122px !important;
  padding: 20px 20px 18px !important;
  border-radius: 26px !important;
  border: 1px solid var(--ui2-dirpro-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.70), transparent),
    var(--ui2-dirpro-panel) !important;
  box-shadow: var(--ui2-dirpro-shadow-soft) !important;
  overflow: hidden !important;
}

html[data-theme="dark"] body.ispforge-ui-v2-customer-directory-professional-active .kpi,
body.dark.ispforge-ui-v2-customer-directory-professional-active .kpi,
body.theme-dark.ispforge-ui-v2-customer-directory-professional-active .kpi{
  background: linear-gradient(180deg, rgba(30,41,59,.62), rgba(15,23,42,.92)) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .kpi::before{
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  top: 18px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, rgba(6,182,212,.24), rgba(37,99,235,.16)) !important;
  border: 1px solid rgba(37,99,235,.18) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .kpi::after{
  content: "" !important;
  position: absolute !important;
  width: 132px !important;
  height: 132px !important;
  right: -54px !important;
  bottom: -64px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(37,99,235,.16), transparent 68%) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .kpi span{
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  margin-bottom: 12px !important;
  color: var(--ui2-dirpro-muted) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .kpi strong{
  position: relative !important;
  z-index: 1 !important;
  color: var(--ui2-dirpro-text) !important;
  font-size: clamp(26px, 2.35vw, 38px) !important;
  font-weight: 950 !important;
  letter-spacing: -.055em !important;
  line-height: 1 !important;
}

/* List panel becomes a proper workbench card. */
body.ispforge-ui-v2-customer-directory-professional-active .panel{
  position: relative !important;
  border-radius: var(--ui2-dirpro-radius-xl) !important;
  border: 1px solid var(--ui2-dirpro-border) !important;
  background: var(--ui2-dirpro-panel) !important;
  box-shadow: var(--ui2-dirpro-shadow) !important;
  overflow: hidden !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .panel::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.42), transparent) !important;
  z-index: 2 !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .panel-header{
  display: grid !important;
  grid-template-columns: minmax(180px, auto) minmax(280px, 560px) !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 78px !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--ui2-dirpro-border) !important;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.12), transparent 34%),
    var(--ui2-dirpro-panel-soft) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .panel-header h2{
  margin: 0 !important;
  color: var(--ui2-dirpro-text) !important;
  font-size: 19px !important;
  font-weight: 950 !important;
  letter-spacing: -.035em !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .panel-header h2::after{
  content: "Manage customer records, status, balances and quick actions" !important;
  display: block !important;
  margin-top: 4px !important;
  color: var(--ui2-dirpro-muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

body.ispforge-ui-v2-customer-directory-professional-active #customer-search,
body.ispforge-ui-v2-customer-directory-professional-active .panel-header input[type="search"],
body.ispforge-ui-v2-customer-directory-professional-active .panel-header input[type="text"]{
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid var(--ui2-dirpro-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.90)) !important;
  color: var(--ui2-dirpro-text) !important;
  padding: 11px 18px 11px 44px !important;
  font-weight: 750 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 12px 28px rgba(15,23,42,.07) !important;
}

html[data-theme="dark"] body.ispforge-ui-v2-customer-directory-professional-active #customer-search,
body.dark.ispforge-ui-v2-customer-directory-professional-active #customer-search,
body.theme-dark.ispforge-ui-v2-customer-directory-professional-active #customer-search{
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(30,41,59,.82)) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active .panel-header:has(#customer-search)::after{
  content: "⌕" !important;
  position: absolute !important;
  right: min(536px, calc(100% - 56px)) !important;
  color: var(--ui2-dirpro-muted) !important;
  font-size: 19px !important;
  transform: translateX(30px) !important;
  pointer-events: none !important;
}

body.ispforge-ui-v2-customer-directory-professional-active #customer-search:focus{
  outline: none !important;
  border-color: rgba(37,99,235,.54) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.13), 0 16px 34px rgba(15,23,42,.11) !important;
}

/* Table turns into a cleaner customer grid with sticky headings and action lane. */
body.ispforge-ui-v2-customer-directory-professional-active .table-wrap{
  max-height: min(68vh, 760px) !important;
  overflow: auto !important;
  border-radius: 0 0 var(--ui2-dirpro-radius-xl) var(--ui2-dirpro-radius-xl) !important;
  background: var(--ui2-dirpro-panel) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table thead th{
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  padding: 15px 13px !important;
  border-bottom: 1px solid var(--ui2-dirpro-border) !important;
  background:
    linear-gradient(180deg, rgba(248,250,252,.98), rgba(241,245,249,.95)) !important;
  color: var(--ui2-dirpro-muted) !important;
  font-size: 10.8px !important;
  font-weight: 950 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  backdrop-filter: blur(10px) !important;
}

html[data-theme="dark"] body.ispforge-ui-v2-customer-directory-professional-active table thead th,
body.dark.ispforge-ui-v2-customer-directory-professional-active table thead th,
body.theme-dark.ispforge-ui-v2-customer-directory-professional-active table thead th{
  background: linear-gradient(180deg, rgba(30,41,59,.98), rgba(15,23,42,.94)) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table tbody td{
  padding: 14px 13px !important;
  border-bottom: 1px solid rgba(148,163,184,.15) !important;
  color: var(--ui2-dirpro-text) !important;
  vertical-align: middle !important;
  background: transparent !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table tbody tr{
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table tbody tr:hover{
  background: rgba(37,99,235,.055) !important;
  box-shadow: inset 4px 0 0 rgba(37,99,235,.50) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table tbody td:nth-child(3) strong{
  color: var(--ui2-dirpro-text) !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  letter-spacing: -.012em !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table tbody td:nth-child(2),
body.ispforge-ui-v2-customer-directory-professional-active table tbody td:nth-child(10){
  font-weight: 900 !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table tbody td:nth-child(6),
body.ispforge-ui-v2-customer-directory-professional-active table tbody td:nth-child(7),
body.ispforge-ui-v2-customer-directory-professional-active table tbody td:nth-child(8),
body.ispforge-ui-v2-customer-directory-professional-active table tbody td:nth-child(9){
  color: var(--ui2-dirpro-muted) !important;
  font-size: 12.5px !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table thead th:last-child,
body.ispforge-ui-v2-customer-directory-professional-active table tbody td:last-child{
  position: sticky !important;
  right: 0 !important;
  z-index: 3 !important;
  min-width: 220px !important;
  background: color-mix(in srgb, var(--ui2-dirpro-panel) 92%, transparent) !important;
  box-shadow: -12px 0 24px rgba(15,23,42,.055) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table thead th:last-child{
  z-index: 5 !important;
  background: var(--ui2-dirpro-panel-soft) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table tbody td:last-child{
  white-space: nowrap !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table tbody td:last-child button{
  min-height: 34px !important;
  margin: 2px 3px 2px 0 !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table tbody td:last-child button.secondary:first-child{
  border-color: rgba(37,99,235,.28) !important;
  color: var(--ui2-dirpro-accent) !important;
  background: rgba(37,99,235,.075) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active table tbody td:last-child button.danger{
  background: rgba(220,38,38,.08) !important;
  color: var(--ui2-dirpro-danger) !important;
  border-color: rgba(220,38,38,.22) !important;
}

/* Status badges: stronger pill language for demo screens. */
body.ispforge-ui-v2-customer-directory-professional-active .badge,
body.ispforge-ui-v2-customer-directory-professional-active [class*="badge"],
body.ispforge-ui-v2-customer-directory-professional-active table tbody td:nth-child(5) span{
  border-radius: 999px !important;
  padding: 5px 9px !important;
  font-size: 10.8px !important;
  font-weight: 950 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
}

/* Related customer directory utility pages get the same professional surfaces. */
body.ispforge-ui-v2-customer-directory-professional-active .card,
body.ispforge-ui-v2-customer-directory-professional-active .form-card,
body.ispforge-ui-v2-customer-directory-professional-active .settings-card,
body.ispforge-ui-v2-customer-directory-professional-active .customer-card{
  border-radius: 26px !important;
  border: 1px solid var(--ui2-dirpro-border) !important;
  background: var(--ui2-dirpro-panel) !important;
  box-shadow: var(--ui2-dirpro-shadow-soft) !important;
}

body.ispforge-ui-v2-customer-directory-professional-active input,
body.ispforge-ui-v2-customer-directory-professional-active select,
body.ispforge-ui-v2-customer-directory-professional-active textarea{
  border-radius: 14px !important;
}

@media (max-width: 1180px){
  body.ispforge-ui-v2-customer-directory-professional-active .kpi-row{
    grid-template-columns: repeat(2, minmax(180px, 1fr)) !important;
  }
  body.ispforge-ui-v2-customer-directory-professional-active .page-title-row{
    grid-template-columns: 1fr !important;
  }
  body.ispforge-ui-v2-customer-directory-professional-active .page-actions{
    justify-content: flex-start !important;
    max-width: none !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 760px){
  body.ispforge-ui-v2-customer-directory-professional-active #page,
  body.ispforge-ui-v2-customer-directory-professional-active .page,
  body.ispforge-ui-v2-customer-directory-professional-active .main-content{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  body.ispforge-ui-v2-customer-directory-professional-active .page-title-row{
    padding: 20px 18px 24px !important;
    border-radius: 24px !important;
  }
  body.ispforge-ui-v2-customer-directory-professional-active .page-title-row::after{
    display: none !important;
  }
  body.ispforge-ui-v2-customer-directory-professional-active .kpi-row{
    grid-template-columns: 1fr !important;
  }
  body.ispforge-ui-v2-customer-directory-professional-active .panel-header{
    grid-template-columns: 1fr !important;
  }
  body.ispforge-ui-v2-customer-directory-professional-active table thead th:last-child,
  body.ispforge-ui-v2-customer-directory-professional-active table tbody td:last-child{
    position: static !important;
    min-width: 190px !important;
    box-shadow: none !important;
  }
}