/* -------------------------------------------------------------------
   Stage 105.0E CLEAN — UI v2 Customer 360 / Edit Customer Foundation
   Frontend-only CSS foundation for Customer 360 / Edit Customer surfaces.
   This file intentionally contains styling only. It does not change routes,
   API calls, popup behaviour, save behaviour, or customer business logic.
------------------------------------------------------------------- */

:root{
  --ui2-customer-bg: linear-gradient(135deg, rgba(15,23,42,.03), rgba(14,165,233,.045));
  --ui2-customer-card: rgba(255,255,255,.98);
  --ui2-customer-border: rgba(148,163,184,.24);
  --ui2-customer-text: #0f172a;
  --ui2-customer-muted: #64748b;
  --ui2-customer-accent: #2563eb;
  --ui2-customer-soft: #f8fafc;
  --ui2-customer-shadow: 0 18px 48px rgba(15,23,42,.09);
  --ui2-customer-shadow-soft: 0 10px 28px rgba(15,23,42,.065);
}

html[data-theme="dark"], body.dark, body.theme-dark{
  --ui2-customer-bg: linear-gradient(135deg, rgba(15,23,42,.82), rgba(30,41,59,.72));
  --ui2-customer-card: rgba(15,23,42,.94);
  --ui2-customer-border: rgba(148,163,184,.22);
  --ui2-customer-text: #e5edf8;
  --ui2-customer-muted: #9fb0c5;
  --ui2-customer-accent: #60a5fa;
  --ui2-customer-soft: rgba(30,41,59,.74);
  --ui2-customer-shadow: 0 20px 56px rgba(0,0,0,.30);
  --ui2-customer-shadow-soft: 0 12px 34px rgba(0,0,0,.24);
}

/* Customer 360 / Edit Customer page shell. */
.stage822-page{
  max-width: 1840px !important;
  margin: 0 auto !important;
  padding: clamp(18px, 1.8vw, 30px) !important;
  background: var(--ui2-customer-bg) !important;
  color: var(--ui2-customer-text) !important;
  min-height: calc(100vh - 64px) !important;
}

.stage822-page > .stage822-title-row{
  position: relative !important;
  isolation: isolate !important;
  margin-bottom: 16px !important;
  padding: 18px 20px !important;
  border-radius: 24px !important;
  border: 1px solid var(--ui2-customer-border) !important;
  background: var(--ui2-customer-card) !important;
  box-shadow: var(--ui2-customer-shadow-soft) !important;
  overflow: visible !important;
}

.stage822-page > .stage822-title-row::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 5px !important;
  border-radius: 24px 0 0 24px !important;
  background: linear-gradient(180deg, #38bdf8, #2563eb 52%, #7c3aed) !important;
  z-index: -1 !important;
}

.stage822-page > .stage822-title-row h1{
  font-size: clamp(26px, 2vw, 36px) !important;
  font-weight: 900 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  color: var(--ui2-customer-text) !important;
}

.stage822-header-card{
  border-radius: 24px !important;
  border: 1px solid var(--ui2-customer-border) !important;
  background:
    radial-gradient(circle at top right, rgba(37,99,235,.13), transparent 30%),
    var(--ui2-customer-card) !important;
  box-shadow: var(--ui2-customer-shadow) !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

.stage822-header-card .stage822-title-row{
  gap: 16px !important;
}

.stage822-customer-name{
  color: var(--ui2-customer-text) !important;
  font-size: clamp(20px, 1.6vw, 28px) !important;
  font-weight: 900 !important;
  letter-spacing: -.035em !important;
}

.stage1040x-customer-state-label{
  min-height: 34px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.12) !important;
}

.stage822-vip{
  border-radius: 16px !important;
  padding: 10px 14px !important;
  box-shadow: inset 0 0 0 1px rgba(146,64,14,.18), 0 12px 28px rgba(245,158,11,.16) !important;
}

/* Main customer grid: cleaner spacing and more demo-friendly density. */
.stage822-grid{
  gap: 16px !important;
  grid-template-columns: minmax(330px,.9fr) minmax(520px,1.28fr) minmax(330px,.92fr) !important;
}

.stage822-grid > div{
  min-width: 0 !important;
}

.stage822-card{
  border-radius: 22px !important;
  border: 1px solid var(--ui2-customer-border) !important;
  background: var(--ui2-customer-card) !important;
  box-shadow: var(--ui2-customer-shadow-soft) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.stage822-card:hover{
  transform: translateY(-1px) !important;
  border-color: rgba(37,99,235,.26) !important;
  box-shadow: 0 18px 42px rgba(15,23,42,.10) !important;
}

.stage822-card-head{
  min-height: 54px !important;
  padding: 13px 15px !important;
  background:
    linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.76)) !important;
  border-bottom: 1px solid var(--ui2-customer-border) !important;
}

html[data-theme="dark"] .stage822-card-head,
body.dark .stage822-card-head,
body.theme-dark .stage822-card-head{
  background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(15,23,42,.72)) !important;
}

.stage822-card-head h2{
  color: var(--ui2-customer-text) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: -.01em !important;
}

.stage822-card-body{
  padding: 14px 15px !important;
}

.stage822-card-actions{
  gap: 7px !important;
}

.stage822-mini-actions{
  gap: 8px !important;
  margin-bottom: 12px !important;
}

/* Buttons inside Customer 360. */
.stage822-btn,
.stage822-icon{
  min-height: 32px !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 9px 20px rgba(15,23,42,.11) !important;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease !important;
}

.stage822-icon{
  min-width: 34px !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.stage822-btn:hover,
.stage822-icon:hover{
  filter: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(15,23,42,.15) !important;
}

.stage822-btn.light,
.stage822-icon.light{
  background: var(--ui2-customer-soft) !important;
  border-color: var(--ui2-customer-border) !important;
  color: var(--ui2-customer-text) !important;
}

/* Info and list tables inside Customer 360. */
.stage822-info-table,
.stage822-list-table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.stage822-info-table th,
.stage822-info-table td,
.stage822-list-table th,
.stage822-list-table td{
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
}

.stage822-info-table th{
  width: 40% !important;
  padding: 9px 10px 9px 0 !important;
  color: var(--ui2-customer-muted) !important;
  font-size: 12px !important;
}

.stage822-info-table td{
  padding: 9px 0 !important;
  color: var(--ui2-customer-text) !important;
  font-size: 12.5px !important;
}

.stage822-list-table{
  overflow: hidden !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148,163,184,.16) !important;
}

.stage822-list-table th{
  background: var(--ui2-customer-soft) !important;
  color: var(--ui2-customer-muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.stage822-list-table th,
.stage822-list-table td{
  padding: 9px 10px !important;
  color: var(--ui2-customer-text) !important;
}

.stage822-session-row{
  border-bottom: 1px solid rgba(148,163,184,.18) !important;
  padding: 11px 0 !important;
  gap: 10px !important;
}

.stage822-muted{
  color: var(--ui2-customer-muted) !important;
}

.stage822-link{
  color: var(--ui2-customer-accent) !important;
  font-weight: 850 !important;
}

.stage822-usage,
.stage822-pill{
  border-radius: 999px !important;
  font-weight: 900 !important;
  border-color: rgba(37,99,235,.22) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25) !important;
}

.stage822-usage{
  background: rgba(37,99,235,.08) !important;
  color: var(--ui2-customer-accent) !important;
}

.stage822-empty,
.stage822-map-placeholder,
.stage822-chart-placeholder{
  border-radius: 18px !important;
  border-color: rgba(148,163,184,.32) !important;
  background: var(--ui2-customer-soft) !important;
  color: var(--ui2-customer-muted) !important;
}

.stage822-map-placeholder,
.stage822-chart-placeholder{
  min-height: 118px !important;
}

.stage822-loading{
  color: var(--ui2-customer-muted) !important;
  background: var(--ui2-customer-card) !important;
  border: 1px solid var(--ui2-customer-border) !important;
  border-radius: 22px !important;
  box-shadow: var(--ui2-customer-shadow-soft) !important;
}

/* Quick customer switcher. */
.stage822-quick-switch{
  gap: 10px !important;
}

.stage822-quick-switch-label{
  color: var(--ui2-customer-muted) !important;
  font-weight: 900 !important;
}

.stage822-page .stage822-switch-wrap .stage833-search-input{
  height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid var(--ui2-customer-border) !important;
  background: var(--ui2-customer-soft) !important;
  color: var(--ui2-customer-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 8px 18px rgba(15,23,42,.06) !important;
}

.stage822-page .stage822-switch-wrap .stage833-results{
  top: 42px !important;
  border-radius: 16px !important;
  border-color: rgba(37,99,235,.28) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.16) !important;
}

/* Customer 360 modal/popup surfaces that are opened from this area. */
.stage822-page ~ .modal,
.stage822-page ~ .popup,
.stage822-page ~ .overlay,
.customer-modal,
.customer-popup{
  backdrop-filter: blur(10px) !important;
}

/* Responsive customer layout. */
@media(max-width:1500px){
  .stage822-grid{
    grid-template-columns: minmax(320px,1fr) minmax(460px,1.18fr) !important;
  }
  .stage822-grid > div:nth-child(3){
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 16px !important;
  }
  .stage822-grid > div:nth-child(3) .stage822-card{
    margin-bottom: 0 !important;
  }
}

@media(max-width:1080px){
  .stage822-page{
    padding: 14px !important;
  }
  .stage822-grid,
  .stage822-grid > div:nth-child(3){
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  .stage822-page > .stage822-title-row,
  .stage822-header-card .stage822-title-row{
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .stage822-top-actions{
    justify-content: flex-start !important;
  }
  .stage822-quick-switch{
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }
  .stage822-page .stage822-switch-wrap{
    max-width: none !important;
    width: 100% !important;
  }
}

@media(max-width:720px){
  .stage822-page > .stage822-title-row,
  .stage822-header-card{
    border-radius: 18px !important;
    padding: 14px !important;
  }
  .stage822-card{
    border-radius: 18px !important;
  }
  .stage822-card-head{
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  .stage822-card-actions,
  .stage822-top-actions,
  .stage822-mini-actions{
    width: 100% !important;
    justify-content: flex-start !important;
  }
}