/* static/css/customer-card.css */
/* Light surface inside a dark modal */
/* Make customer search modal content use the full modal width */
#customerSearchModal .modal-body {
  display: block !important;          /* cancels any flex centering */
  text-align: left !important;        /* cancels any centering */
}

#customerSearchModal #modalCustomerResultsContainer {
  width: 100% !important;
}

#customerSearchModal .customer-results-surface {
  width: 100% !important;
  max-width: none !important;         /* important: remove any implicit max width */
  margin: 0 !important;               /* stop auto-centering */
}
.customer-results-surface {
  background: #ffffff;
  color: #111827;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 12px;
  width: 100%;
}

/* Make Bootstrap list-group items match the surface */
.customer-results-list .list-group-item {
  background-color: #ffffff;
  color: #111827;
  border-color: rgba(0,0,0,0.08);
}

.customer-results-list .list-group-item:nth-child(even) {
  background-color: #f8fafc; /* or var(--color-bg-widget) if that’s light */
}

/* Muted meta text inside surface */
.customer-results-surface .customer-result-meta,
.customer-results-surface .text-muted {
  color: #6b7280 !important;
}

/* Debug alert doesn't look neon on white */
.customer-results-debug {
  margin-bottom: 12px;
}


/* Improve readability of small text, especially in dark backgrounds or modals */
.customer-card small,
.customer-card .text-muted {
  color: #e80909 !important;  /* override Bootstrap muted gray */
}

/* Optional: Adjust spacing in small text */
.customer-card small {
  line-height: 1.4;
  display: block;
  margin-top: 4px;
}
.customer-card {
  background-color: inherit;
  color: inherit;
}

/* Better badge visibility in modals */
.customer-card .badge.bg-secondary {
  background-color: #014a89;
  color: #fff;
}

/* Button responsiveness */
.customer-card .btn-sm {
  min-width: 90px;
}



/* Fix for all muted text in customer-related UI */
.customer-card .text-muted,
.customer-profile .text-muted,
.customer-card small,
.customer-profile small {
  color: var(--color-text-main) !important;
}

/* Just to be safe */
.card .text-muted {
  color: var(--color-text-main) !important;
}
/* Customer name link should not be black */
.customer-card a {
  color: var(--color-primary) !important;   /* your pink scheme */
  text-decoration: none;
}

.customer-card a:hover {
  color: var(--color-primary-hover) !important;
  text-decoration: underline;
}

/* =========================================
   CUSTOMER SEARCH BUTTON
========================================= */

.customer-btn {
  background-color: #22c55e;
  border-color: #22c55e;
  color: #111;
  font-weight: 600;
}

.customer-btn:hover,
.customer-btn:focus {
  background-color: #16a34a;
  border-color: #16a34a;
  color: #111;
  transform: translateY(-1px);
}

.customer-btn:active {
  background-color: #15803d;
  border-color: #15803d;
  color: #111;
}
/* =========================================
   GIFT CARD CUSTOM STYLES
========================================= */

.giftcard-card {
  background-color: var(--color-bg-main); /* dark surface */
  color: var(--color-text-on-dark);
  border: 1px solid rgba(255,255,255,0.08);
}

.giftcard-card h1,
.giftcard-card h2,
.giftcard-card h3,
.giftcard-card h4,
.giftcard-card h5,
.giftcard-card h6,
.giftcard-card label,
.giftcard-card p {
  color: var(--color-text-on-dark);
}

.giftcard-card .form-control,
.giftcard-card .form-select {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-on-dark);
  border: 1px solid rgba(255,255,255,0.15);
}

.giftcard-card .form-control:focus,
.giftcard-card .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem var(--color-primary-soft);
}