/*
  Beauty Botox Bar - Central Theme Coverage
  This file loads LAST and maps legacy hard-coded UI colours
  to the central theme variables controlled by Administration.
*/

html[data-bbb-theme],
html[data-bbb-theme] body {
  background: var(--bbb-bg) !important;
  color: var(--bbb-text) !important;
}

/* General surfaces */
html[data-bbb-theme] :is(
  main,
  section,
  article,
  aside,
  .page,
  .shell,
  .content,
  .content-shell,
  .page-shell,
  .app-shell,
  .member-shell,
  .dashboard-shell
) {
  border-color: var(--bbb-border);
}

/* Cards, panels, boxes, dialogs */
html[data-bbb-theme] :is(
  .card,
  .box,
  .panel,
  .modal-panel,
  .dialog,
  .dialog-card,
  .auth-panel,
  .profile-card,
  .profile-section,
  .appointment-card,
  .treatment-card,
  .journey-card,
  .journey-panel,
  .article-card,
  .service-card,
  .trip-card,
  .planner-card,
  .request-card,
  .notification-card,
  .message-card,
  .conversation-card,
  .settings-card,
  .offer-card,
  .package-card,
  .price-card,
  .comparison-card,
  .clinical-photo-card,
  .push-notification-settings,
  .staff-alert-panel,
  .unified-notification-panel,
  [class*="card"],
  [class*="panel"]
) {
  background-color: var(--bbb-surface) !important;
  color: var(--bbb-text) !important;
  border-color: var(--bbb-border) !important;
}

/* Secondary / soft areas */
html[data-bbb-theme] :is(
  .soft,
  .muted-box,
  .sub-panel,
  .inner-card,
  .empty,
  .empty-admin,
  .status-box,
  .form-note,
  .security-note,
  [class*="soft"],
  [class*="empty"]
) {
  background-color: var(--bbb-surface-alt) !important;
  color: var(--bbb-muted) !important;
  border-color: var(--bbb-border) !important;
}

/* Typography */
html[data-bbb-theme] :is(
  h1,h2,h3,h4,h5,h6,
  strong,
  .title,
  .heading,
  .brand-copy strong
) {
  color: var(--bbb-text) !important;
}

html[data-bbb-theme] :is(
  p,
  small,
  .muted,
  .subtitle,
  .description,
  .meta,
  .form-note,
  .helper,
  .hint
) {
  border-color: var(--bbb-border);
}

html[data-bbb-dark="true"] :is(
  p,
  small,
  .muted,
  .subtitle,
  .description,
  .meta,
  .form-note,
  .helper,
  .hint
) {
  color: var(--bbb-muted) !important;
}

/* Gold / accent elements */
html[data-bbb-theme] :is(
  .eyebrow,
  .category,
  .card-category,
  .accent,
  .gold,
  .brand-copy strong,
  [class*="eyebrow"],
  [class*="accent"],
  [class*="gold"]
) {
  color: var(--bbb-accent) !important;
}

/* Header and menus */
html[data-bbb-theme] :is(
  .site-header,
  .unified-mobile-menu,
  .mobile-menu,
  .bbb-member-dropdown,
  .unified-notification-panel,
  .staff-alert-panel
) {
  background-color: var(--bbb-surface) !important;
  color: var(--bbb-text) !important;
  border-color: var(--bbb-border) !important;
}

html[data-bbb-theme] :is(
  .site-header a,
  .site-header button,
  .unified-mobile-menu a,
  .mobile-menu a,
  .unified-notification-panel button
) {
  color: var(--bbb-text) !important;
  border-color: var(--bbb-border) !important;
}

/* Inputs */
html[data-bbb-theme] :is(
  input,
  select,
  textarea
) {
  background-color: var(--bbb-surface-alt) !important;
  color: var(--bbb-text) !important;
  border-color: var(--bbb-border) !important;
}

html[data-bbb-theme] :is(input,textarea)::placeholder {
  color: var(--bbb-muted) !important;
  opacity: .8 !important;
}

/* Default buttons */
html[data-bbb-theme] :is(
  button,
  .button,
  .btn,
  [role="button"]
) {
  border-color: var(--bbb-border) !important;
}

/* Primary / gold actions */
html[data-bbb-theme] :is(
  .primary,
  .primary-action,
  .button-primary,
  .btn-primary,
  .submit-button,
  .booking-button,
  button[type="submit"]
) {
  background: var(--bbb-accent) !important;
  color: #050505 !important;
  border-color: var(--bbb-accent) !important;
  box-shadow: var(--bbb-gold-glow) !important;
}

html[data-bbb-theme] :is(
  .primary:hover,
  .primary-action:hover,
  .button-primary:hover,
  .btn-primary:hover,
  .submit-button:hover,
  .booking-button:hover,
  button[type="submit"]:hover
) {
  background: var(--bbb-accent-hover) !important;
  border-color: var(--bbb-accent-hover) !important;
}

/* Secondary actions */
html[data-bbb-theme] :is(
  .secondary,
  .button-secondary,
  .btn-secondary
) {
  background: var(--bbb-surface-alt) !important;
  color: var(--bbb-text) !important;
  border-color: var(--bbb-border) !important;
}

/* Lines and borders */
html[data-bbb-theme] :is(
  hr,
  table,
  th,
  td,
  .divider,
  .separator
) {
  border-color: var(--bbb-border) !important;
}

/* Tables */
html[data-bbb-dark="true"] :is(table,thead,tbody,tr,th,td) {
  color: var(--bbb-text) !important;
}

html[data-bbb-dark="true"] th {
  background: var(--bbb-surface-alt) !important;
}

html[data-bbb-dark="true"] td {
  background: var(--bbb-surface) !important;
}

/* Notification controls */
html[data-bbb-theme] :is(
  .unified-notification-button,
  .unified-menu-button,
  .staff-alert-bell
) {
  background: var(--bbb-surface-alt) !important;
  color: var(--bbb-text) !important;
  border-color: var(--bbb-border) !important;
}

html[data-bbb-theme] :is(
  .unified-notification-count,
  .staff-alert-badge
) {
  background: var(--bbb-accent) !important;
  color: #050505 !important;
  border-color: var(--bbb-surface) !important;
}

/* Footer */
html[data-bbb-theme] .site-footer,
html[data-bbb-theme] footer {
  border-color: var(--bbb-border) !important;
}

html[data-bbb-dark="true"] .site-footer {
  background: #020202 !important;
  color: var(--bbb-text) !important;
}

/* Focus */
html[data-bbb-theme] :is(
  input:focus,
  select:focus,
  textarea:focus,
  button:focus-visible,
  a:focus-visible
) {
  outline-color: var(--bbb-accent) !important;
  border-color: var(--bbb-accent) !important;
  box-shadow:
    0 0 0 3px rgba(var(--bbb-accent-rgb), .18),
    var(--bbb-gold-glow) !important;
}

/* Keep images/media untouched */
html[data-bbb-theme] :is(img,video,canvas,svg) {
  filter: none;
}

/* Fluorescent text glow */
html[data-bbb-theme] :is(
  h1,h2,h3,
  .brand-copy strong
) {
  text-shadow: var(--bbb-text-glow) !important;
}