/* ============================================================
   Phase 21k: Customer detail page polish
   Scoped with body.p21k-customer-detail
   ============================================================ */

body.p21k-customer-detail {
  background: #f8fafc !important;
}

body.p21k-customer-detail .container {
  max-width: 1280px !important;
}

body.p21k-customer-detail .card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .055) !important;
  overflow: hidden;
}

body.p21k-customer-detail .card-title {
  color: #0f172a !important;
  font-weight: 950 !important;
  letter-spacing: -.02em;
}

body.p21k-customer-detail h1 {
  color: #0f172a !important;
  font-weight: 950 !important;
  letter-spacing: -.03em;
}

body.p21k-customer-detail .text-muted {
  color: #64748b !important;
}

body.p21k-customer-detail .badge {
  border-radius: 999px !important;
  font-weight: 850 !important;
}

body.p21k-customer-detail .customer-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .55rem;
}

body.p21k-customer-detail .btn {
  border-radius: 12px !important;
  font-weight: 850 !important;
}

body.p21k-customer-detail .form-control,
body.p21k-customer-detail .form-select {
  border-radius: 12px !important;
  border-color: #cbd5e1 !important;
}

body.p21k-customer-detail .form-control:focus,
body.p21k-customer-detail .form-select:focus {
  border-color: #334155 !important;
  box-shadow: 0 0 0 .2rem rgba(15, 23, 42, .11) !important;
}

body.p21k-customer-detail .table-responsive {
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  overflow-x: auto !important;
}

body.p21k-customer-detail table {
  margin-bottom: 0 !important;
}

body.p21k-customer-detail table th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: .72rem !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap !important;
}

body.p21k-customer-detail .border.rounded {
  border-color: #e2e8f0 !important;
  border-radius: 15px !important;
  background: #fff;
}

/* Loyalty stat boxes */
body.p21k-customer-detail .border.rounded.p-2 {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px rgba(15,23,42,.04);
}

/* Desktop */
@media (min-width: 768px) {
  body.p21k-customer-detail .card-body {
    padding: 1rem !important;
  }

  body.p21k-customer-detail .customer-detail-actions .btn {
    min-height: 34px;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  body.p21k-customer-detail .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-bottom: 92px !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body.p21k-customer-detail .container.py-4 {
    padding-top: .65rem !important;
  }

  body.p21k-customer-detail h1 {
    font-size: 1.18rem !important;
    margin-bottom: .2rem !important;
  }

  body.p21k-customer-detail .card {
    border-radius: 15px !important;
    margin-bottom: .65rem !important;
  }

  body.p21k-customer-detail .card-body {
    padding: .68rem !important;
  }

  body.p21k-customer-detail .card-title {
    font-size: .96rem !important;
    margin-bottom: .55rem !important;
  }

  body.p21k-customer-detail .badge {
    font-size: .62rem !important;
    padding: .18rem .38rem !important;
  }

  body.p21k-customer-detail .customer-detail-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .38rem !important;
    width: 100%;
  }

  body.p21k-customer-detail .customer-detail-actions .btn {
    width: 100% !important;
    min-height: 38px !important;
    font-size: .72rem !important;
    padding: .3rem .35rem !important;
  }

  body.p21k-customer-detail .d-flex.justify-content-between {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .55rem !important;
  }

  body.p21k-customer-detail form.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: .58rem !important;
  }

  body.p21k-customer-detail [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.p21k-customer-detail .form-label {
    font-size: .68rem !important;
    font-weight: 950 !important;
    color: #334155 !important;
    margin-bottom: .18rem !important;
  }

  body.p21k-customer-detail .form-control,
  body.p21k-customer-detail .form-select {
    min-height: 40px !important;
    font-size: 16px !important;
    border-radius: 11px !important;
    padding: .38rem .5rem !important;
  }

  body.p21k-customer-detail textarea.form-control {
    min-height: 88px !important;
  }

  body.p21k-customer-detail .btn {
    min-height: 38px !important;
    font-size: .76rem !important;
  }

  body.p21k-customer-detail button[type="submit"] {
    width: 100%;
  }

  /* Loyalty stats */
  body.p21k-customer-detail .row.g-2.mb-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .42rem !important;
    margin: 0 0 .6rem 0 !important;
  }

  body.p21k-customer-detail .row.g-2.mb-3 > div {
    padding: 0 !important;
  }

  body.p21k-customer-detail .border.rounded.p-2 {
    padding: .45rem .35rem !important;
    min-height: 56px;
  }

  body.p21k-customer-detail .border.rounded.p-2 .small {
    font-size: .52rem !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 900;
    line-height: 1.05;
  }

  body.p21k-customer-detail .border.rounded.p-2 .fw-semibold {
    font-size: .84rem !important;
    font-weight: 950 !important;
    margin-top: .18rem;
  }

  /* Tables scroll cleanly */
  body.p21k-customer-detail .table-responsive {
    border-radius: 13px !important;
  }

  body.p21k-customer-detail table {
    min-width: 620px !important;
    font-size: .76rem !important;
  }

  body.p21k-customer-detail table th,
  body.p21k-customer-detail table td {
    padding: .42rem .48rem !important;
    white-space: normal !important;
  }

  body.p21k-customer-detail table .btn {
    min-height: 32px !important;
    font-size: .68rem !important;
    padding: .22rem .42rem !important;
  }

  /* Address cards/forms */
  body.p21k-customer-detail form.border.rounded {
    padding: .62rem !important;
    border-radius: 14px !important;
    margin-bottom: .62rem !important;
  }

  body.p21k-customer-detail form.border.rounded .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: .45rem !important;
    margin: 0 !important;
  }

  body.p21k-customer-detail form.border.rounded .row > div {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  body.p21k-customer-detail .d-flex.gap-2.flex-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .38rem !important;
  }

  body.p21k-customer-detail .d-flex.gap-2.flex-wrap .btn {
    width: 100% !important;
  }
}