/*
 * Receptionist Max — Launch Polish (dark surfaces, v1.4.0)
 * ---------------------------------------------------------
 * Applied to the public auth/portal pages and the sales theme.
 * Loaded AFTER the surface's own stylesheet so it overrides
 * legacy layered overrides without rewriting them.
 * ---------------------------------------------------------
 */

/* ---------- Typography ---------- */
.mhd-auth-page,
.mhd-customer-portal,
body.mhd-aicc-sales-theme {
  font-family: var(--mhd-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Buttons: shared brand gradient + hover lift ---------- */
.mhd-auth-page .mhd-btn,
.mhd-customer-portal .mhd-btn,
body.mhd-aicc-sales-theme .mhd-btn {
  transition: transform var(--mhd-dur) var(--mhd-ease),
              box-shadow var(--mhd-dur) var(--mhd-ease),
              filter     var(--mhd-dur) var(--mhd-ease),
              border-color var(--mhd-dur) var(--mhd-ease),
              color var(--mhd-dur) var(--mhd-ease);
  letter-spacing: -.005em;
  will-change: transform;
}
.mhd-auth-page .mhd-btn:hover,
.mhd-customer-portal .mhd-btn:hover,
body.mhd-aicc-sales-theme .mhd-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.mhd-auth-page .mhd-btn:focus-visible,
.mhd-customer-portal .mhd-btn:focus-visible,
body.mhd-aicc-sales-theme .mhd-btn:focus-visible,
.mhd-auth-page .mhd-portal-tabs button:focus-visible,
.mhd-customer-portal .mhd-portal-tabs button:focus-visible,
.mhd-auth-page .mhd-auth-tabs button:focus-visible {
  outline: 0;
  box-shadow: var(--mhd-focus-ring);
}

/* ---------- Inputs: unified focus state ---------- */
.mhd-auth-page input:focus,
.mhd-auth-page select:focus,
.mhd-auth-page textarea:focus,
.mhd-customer-portal input:focus,
.mhd-customer-portal select:focus,
.mhd-customer-portal textarea:focus {
  outline: 0;
  border-color: rgba(61, 123, 245, .65) !important;
  box-shadow: var(--mhd-focus-ring) !important;
  background: rgba(255, 255, 255, .09) !important;
}

/* ---------- Cards: subtle hover-glow ---------- */
.mhd-auth-page .mhd-auth-card,
.mhd-customer-portal .mhd-portal-form,
.mhd-customer-portal .mhd-table-wrap {
  transition: border-color var(--mhd-dur) var(--mhd-ease),
              box-shadow   var(--mhd-dur) var(--mhd-ease);
}
.mhd-auth-page .mhd-auth-card:hover {
  border-color: rgba(61, 123, 245, .22);
}

/* ---------- Status chips for the dark portal tables ---------- */
.mhd-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--mhd-r-pill);
  font-size: var(--mhd-fs-xs);
  font-weight: 800;
  line-height: 1;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: var(--mhd-text-2);
  text-transform: capitalize;
  letter-spacing: .01em;
  white-space: nowrap;
}
.mhd-status-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: .9;
}
.mhd-status-chip.is-success,
.mhd-status-chip.is-active,
.mhd-status-chip.is-connected,
.mhd-status-chip.is-completed,
.mhd-status-chip.is-ready,
.mhd-status-chip.is-ok {
  background: rgba(16, 185, 129, .12);
  color: #34d399;
  border-color: rgba(16, 185, 129, .28);
}
.mhd-status-chip.is-warning,
.mhd-status-chip.is-pending,
.mhd-status-chip.is-trial,
.mhd-status-chip.is-review {
  background: rgba(245, 158, 11, .12);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, .28);
}
.mhd-status-chip.is-danger,
.mhd-status-chip.is-failed,
.mhd-status-chip.is-cancelled,
.mhd-status-chip.is-suspended,
.mhd-status-chip.is-past-due,
.mhd-status-chip.is-error {
  background: rgba(239, 68, 68, .12);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, .30);
}
.mhd-status-chip.is-info,
.mhd-status-chip.is-syncing,
.mhd-status-chip.is-checking {
  background: rgba(61, 123, 245, .14);
  color: #93c5fd;
  border-color: rgba(61, 123, 245, .32);
}

/* ---------- Skeleton loader (dark) ---------- */
.mhd-skeleton {
  display: block;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, .04) 0%,
    rgba(255, 255, 255, .10) 50%,
    rgba(255, 255, 255, .04) 100%
  );
  background-size: 200% 100%;
  animation: mhd-shimmer-dark 1.4s ease-in-out infinite;
}
@keyframes mhd-shimmer-dark {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Tabs: smoother active state ---------- */
.mhd-portal-tabs button,
.mhd-auth-tabs button {
  transition: background var(--mhd-dur) var(--mhd-ease),
              color      var(--mhd-dur) var(--mhd-ease),
              box-shadow var(--mhd-dur) var(--mhd-ease);
}

/* ---------- Tables: zebra and hover ---------- */
.mhd-table-wrap table tbody tr {
  transition: background var(--mhd-dur-fast) var(--mhd-ease);
}
.mhd-table-wrap table tbody tr:hover {
  background: rgba(255, 255, 255, .035);
}
.mhd-table-wrap table tbody tr:nth-child(2n) {
  background: rgba(255, 255, 255, .015);
}
.mhd-table-wrap table tbody tr:nth-child(2n):hover {
  background: rgba(255, 255, 255, .045);
}

/* ---------- Sales theme: button gradient sync ---------- */
body.mhd-aicc-sales-theme .mhd-btn-primary {
  background: var(--mhd-gradient-rich);
  box-shadow: 0 16px 38px rgba(61, 123, 245, .28);
}

/* ---------- Selection highlight ---------- */
.mhd-auth-page ::selection,
.mhd-customer-portal ::selection,
body.mhd-aicc-sales-theme ::selection {
  background: rgba(61, 123, 245, .35);
  color: #fff;
}

/* ---------- Reduced-motion overrides ---------- */
@media (prefers-reduced-motion: reduce) {
  .mhd-auth-page *,
  .mhd-customer-portal *,
  body.mhd-aicc-sales-theme * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}