/*
 * PetCare+ UI consistency layer
 *
 * This file is loaded after the legacy, page-specific, and dashboard styles.
 * It contains presentation-only guardrails for typography, spacing, focus
 * states, overflow, and responsive behavior. Existing markup and behavior
 * remain the source of truth.
 */

:root {
  --ui-font: 'Poppins', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-content-width: 1200px;
  --ui-focus-ring: 0 0 0 3px rgba(79, 70, 229, .24);
  --ui-btn-height: 42px;
  --ui-btn-sm-height: 36px;
  --ui-btn-lg-height: 48px;
}

html {
  font-family: var(--ui-font);
  color-scheme: light;
}

html[data-theme='dark'] {
  color-scheme: dark;
}

body,
button,
input,
select,
textarea {
  font-family: var(--ui-font);
}

body {
  min-width: 320px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--primary, #4f46e5);
  outline-offset: 3px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  cursor: not-allowed;
}

.container {
  max-width: var(--ui-content-width);
}

.btn {
  min-height: 42px;
  justify-content: center;
}

.btn-sm {
  min-height: 36px;
}

.card,
.card-body,
.card-header,
.form-group,
.form-row,
.input-group,
.table-wrap,
.table-responsive {
  min-width: 0;
}

.card-header {
  flex-wrap: wrap;
  gap: .75rem;
}

.card-header > * {
  min-width: 0;
}

.card-header h3,
.card-header h4 {
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.form-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-control {
  min-height: 46px;
}

textarea.form-control {
  min-height: 120px;
}

.form-check {
  min-width: 0;
}

.form-check span,
.form-label,
.form-hint,
.form-error {
  overflow-wrap: anywhere;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}

.alert > i:first-child {
  flex: 0 0 auto;
  margin-top: .18em;
}

.table-wrap,
.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.table-wrap table,
.table-responsive table {
  width: 100%;
}

.table-wrap th,
.table-responsive th {
  white-space: nowrap;
}

.table-wrap th,
.table-wrap td,
.table-responsive th,
.table-responsive td {
  vertical-align: middle;
}

.table-wrap::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-wrap::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .45);
  border-radius: 999px;
}

.empty-state {
  min-width: 0;
}

.empty-state h3,
.empty-state p {
  overflow-wrap: anywhere;
}

/* Public navigation and content surfaces. */
body:not(.is-dashboard) .nav-container {
  width: min(100%, var(--ui-content-width));
}

body:not(.is-dashboard) .nav-actions {
  gap: .6rem;
}

body:not(.is-dashboard) .nav-actions > .btn {
  min-height: 40px;
  padding-inline: 1.15rem;
}

body:not(.is-dashboard) .card:not(.clinic-card):not(.feature-card):not(.auth-card) {
  transition: box-shadow .2s ease, border-color .2s ease;
}

body:not(.is-dashboard) .card:not(.clinic-card):not(.feature-card):not(.auth-card):hover {
  transform: none;
  box-shadow: var(--shadow, 0 8px 24px rgba(15, 23, 42, .1));
}

.clinic-card-title {
  display: -webkit-box;
  min-height: 2.8em;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.clinic-card-footer {
  flex-wrap: wrap;
  gap: .65rem;
}

.clinic-card-footer .stars {
  flex: 1 1 auto;
  min-width: 0;
}

.clinic-card-footer > span {
  overflow-wrap: anywhere;
}

.site-footer-nav[aria-label='Explore PetCare'] {
  display: none;
}

.site-footer-main {
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
}

/* Dashboard guardrails sit on top of the existing dark reference system. */
body.is-dashboard .dash-main {
  min-width: 0;
}

body.is-dashboard .dash-main .card-header > div:first-child {
  flex: 1 1 240px;
}

body.is-dashboard .dash-main .card-header .btn,
body.is-dashboard .dash-main .card-header a.btn {
  flex: 0 1 auto;
  max-width: 100%;
}

body.is-dashboard .dash-main .card-header h3 {
  overflow-wrap: anywhere;
}

body.is-dashboard .dash-main .form-group,
body.is-dashboard .dash-main form,
body.is-dashboard .dash-main .modal-body,
body.is-dashboard .dash-main .modal-footer {
  min-width: 0;
  max-width: 100%;
}

body.is-dashboard .dash-main .table-wrap th,
body.is-dashboard .dash-main .table-responsive th {
  white-space: nowrap;
}

/* Authentication surfaces previously stayed white when dark mode was saved. */
[data-theme='dark'] .auth-card {
  background: rgba(26, 26, 26, .96);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .48);
}

[data-theme='dark'] .auth-card .form-label,
[data-theme='dark'] .auth-card .auth-title,
[data-theme='dark'] .auth-card h1,
[data-theme='dark'] .auth-card h2,
[data-theme='dark'] .auth-card h3 {
  color: #f8fafc;
}

[data-theme='dark'] .auth-card .form-control {
  background: #161a23;
  border-color: #31384a;
  color: #f8fafc;
}

[data-theme='dark'] .auth-card .form-control::placeholder {
  color: #8b96ab;
}

[data-theme='dark'] .auth-card .form-control:focus {
  background: #161a23;
  border-color: #7b83ff;
  box-shadow: 0 0 0 3px rgba(123, 131, 255, .2);
}

.auth-container {
  min-height: 100svh;
}

.auth-card-wrapper {
  min-width: 0;
}

/* The original mobile menu had competing light and dark declarations. */
@media (max-width: 768px) {
  .container {
    padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
  }

  body:not(.is-dashboard) .mobile-menu.open,
  body:not(.is-dashboard) #mobileMenu.open {
    background: rgba(15, 20, 32, .98);
    border: 1px solid rgba(148, 163, 184, .22);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .36);
  }

  body:not(.is-dashboard) .mobile-menu .mobile-link {
    color: #f8fafc;
    border-bottom-color: rgba(255, 255, 255, .08);
  }

  body:not(.is-dashboard) .mobile-menu .mobile-link:hover {
    transform: none;
    background: rgba(99, 102, 241, .14);
  }

  body:not(.is-dashboard) .mobile-menu-auth {
    border-top-color: rgba(255, 255, 255, .1);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .card-header {
    align-items: flex-start;
  }

  .pagination {
    flex-wrap: wrap;
    gap: .45rem;
  }

  .pagination .page-btn {
    min-width: 40px;
    min-height: 40px;
  }

  body.is-dashboard .dash-main .form-row {
    grid-template-columns: 1fr;
  }

  body.is-dashboard .dash-main .card-header > .btn,
  body.is-dashboard .dash-main .card-header > a.btn {
    max-width: 100%;
  }
}

@media (max-width: 560px) {
  body.is-dashboard .dash-main .card-header > .btn,
  body.is-dashboard .dash-main .card-header > a.btn {
    flex: 1 1 100%;
    width: 100%;
  }

  body.is-dashboard .dash-main .btn {
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 480px) {
  body:not(.is-dashboard) .auth-container {
    align-items: flex-start;
    padding: 2.75rem .75rem 2rem;
  }

  body:not(.is-dashboard) .auth-card-body {
    padding-inline: 1rem;
  }

  .site-footer-main {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 380px) {
  .site-footer-main {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
  }

  .card,
  .auth-card,
  .featured-clinic,
  .clinic-card,
  .btn {
    animation: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------------------------
   Button sizing normalization

   Several older dashboard and page-specific styles set different padding,
   heights, and mobile minimums for the same .btn variants. Keep the visual
   variants intact, but give every standard action a predictable box.
   ------------------------------------------------------------------------- */
.btn,
.btn-hero-primary,
.btn-hero-secondary,
.social-btn,
.page-btn {
  box-sizing: border-box;
}

.btn {
  height: auto !important;
  min-height: var(--ui-btn-height);
  padding: 0 1rem;
  justify-content: center;
  line-height: 1.25;
  white-space: nowrap;
}

.btn-sm {
  height: auto !important;
  min-height: var(--ui-btn-sm-height);
  padding: 0 .75rem;
  font-size: .8125rem;
}

.btn-lg {
  height: auto !important;
  min-height: var(--ui-btn-lg-height);
  padding: 0 1.25rem;
  font-size: .95rem;
}

.btn-block {
  width: 100%;
}

.btn > i,
.btn > svg,
.btn-hero-primary > i,
.btn-hero-secondary > i,
.social-btn > i {
  flex: 0 0 auto;
  line-height: 1;
}

/* Dashboard-specific selectors are more specific than the legacy base .btn
   rules, so repeat only the sizing contract here. */
body.is-dashboard .dash-main .btn,
body.is-dashboard .modal .btn {
  height: auto !important;
  min-height: var(--ui-btn-height) !important;
  padding: 0 1rem !important;
  line-height: 1.25;
}

body.is-dashboard .dash-main .btn-sm,
body.is-dashboard .modal .btn-sm {
  min-height: var(--ui-btn-sm-height) !important;
  padding: 0 .75rem !important;
  font-size: .8125rem;
}

body.is-dashboard .dash-main .btn-lg,
body.is-dashboard .modal .btn-lg {
  min-height: var(--ui-btn-lg-height) !important;
  padding: 0 1.25rem !important;
  font-size: .95rem;
}

/* Generic dashboard button rules previously enlarged these compact controls. */
body.is-dashboard .dash-main .appointment-action {
  box-sizing: border-box;
  height: auto !important;
  min-height: 34px !important;
  padding: 0 .6rem !important;
  line-height: 1.2;
}

body.is-dashboard .dash-main .clinic-application-credential-button,
body.is-dashboard .dash-main .clinic-application-review-actions .btn,
body.is-dashboard .dash-main .tab-btn.btn-sm {
  min-height: var(--ui-btn-sm-height) !important;
  padding: 0 .75rem !important;
}

.appointment-filter-submit,
.appointment-filter-clear {
  height: auto !important;
  min-height: var(--ui-btn-height) !important;
}

.clinic-application-credential-button,
.clinic-application-review-actions .btn {
  box-sizing: border-box;
  height: auto !important;
  min-height: var(--ui-btn-sm-height) !important;
  padding: 0 .75rem !important;
  line-height: 1.25;
}

.tab-btn.btn-sm {
  height: auto !important;
  min-height: var(--ui-btn-sm-height) !important;
  padding: 0 .75rem !important;
  line-height: 1.25;
}

.review-actions .btn {
  height: auto !important;
  min-height: var(--ui-btn-height) !important;
  padding: 0 1rem !important;
}

.auth-submit-btn {
  height: auto !important;
  min-height: var(--ui-btn-lg-height) !important;
  padding: 0 1.25rem !important;
}

.btn-outline-secondary {
  background: transparent;
  color: var(--secondary, #0891b2);
  border: 1.5px solid currentColor;
}

.btn-outline-secondary:hover {
  background: var(--secondary, #0891b2);
  color: #fff;
}

/* Fixed icon controls use one compact footprint across the header and modal. */
.nav-actions > .theme-toggle,
.nav-actions > .notif-bell,
.notif-bell-wrap .notif-bell,
body.is-dashboard .theme-toggle,
body.is-dashboard .notif-bell {
  box-sizing: border-box;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
}

.modal-close {
  box-sizing: border-box;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  flex: 0 0 36px;
}

.sidebar-collapse-btn {
  box-sizing: border-box;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
}

.input-group .toggle-pw,
.auth-form .toggle-pw {
  box-sizing: border-box;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
}

.otp-btn {
  box-sizing: border-box;
  height: auto !important;
  min-height: var(--ui-btn-lg-height) !important;
  padding: 0 1.5rem !important;
  line-height: 1.2;
}

.otp-resend-btn,
.notif-dp-markall {
  height: auto !important;
  min-height: 0 !important;
  padding-block: 4px !important;
}

.social-btn {
  height: auto !important;
  min-height: var(--ui-btn-sm-height);
  padding: 0 1rem;
  line-height: 1.25;
}

.page-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  transform: none;
  box-shadow: none;
}

@media (max-width: 680px) {
  body.is-dashboard .dash-main .appointment-action {
    min-height: 36px !important;
    padding-inline: .7rem !important;
  }
}

@media (max-width: 560px) {
  .btn,
  body.is-dashboard .dash-main .btn,
  body.is-dashboard .modal .btn {
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 420px) {
  .nav-actions > .theme-toggle,
  .nav-actions > .notif-bell,
  .notif-bell-wrap .notif-bell,
  body.is-dashboard .theme-toggle,
  body.is-dashboard .notif-bell {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .pagination .page-btn,
  .page-btn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }
}

/*
 * Dashboard light theme
 *
 * dashboard-reference.css is intentionally dark-first and contains several
 * !important declarations. Keep that design for dark mode, but provide a
 * complete light palette at the end of the cascade so the theme toggle also
 * updates the dashboard shell, cards, controls, tables, and mobile nav.
 */
html:not([data-theme='dark']) body.is-dashboard {
  --dash-bg: #f6f8fc !important;
  --dash-shell: #ffffff !important;
  --dash-panel: #ffffff !important;
  --dash-panel-soft: #f8faff !important;
  --dash-input: #ffffff !important;
  --dash-border: #e2e8f0 !important;
  --dash-border-strong: #cbd5e1 !important;
  --dash-text: #202b3d !important;
  --dash-text-muted: #68768b !important;
  --dash-primary: #4f67df !important;
  --dash-primary-strong: #3f57c8 !important;
  --dash-secondary: #6258e8 !important;
  --dash-primary-soft: #eef2ff !important;
  --dash-success: #16835f !important;
  --dash-warning: #a76500 !important;
  --dash-danger: #d74350 !important;
  --dash-info: #3f78d8 !important;
  --dash-shadow: 0 14px 32px rgba(31, 41, 55, .10) !important;
  --bg: var(--dash-bg) !important;
  --card: var(--dash-panel) !important;
  --card-bg: var(--dash-panel) !important;
  --border: var(--dash-border) !important;
  --text: var(--dash-text) !important;
  --text-muted: var(--dash-text-muted) !important;
  --primary: var(--dash-primary) !important;
  --secondary: var(--dash-secondary) !important;
  --success: var(--dash-success) !important;
  --warning: var(--dash-warning) !important;
  --danger: var(--dash-danger) !important;
  --info: var(--dash-info) !important;
  background: var(--dash-bg) !important;
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard #mainNav,
html:not([data-theme='dark']) body.is-dashboard .dash-main {
  background: var(--dash-bg) !important;
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .navbar {
  background: var(--dash-shell) !important;
  border-bottom-color: var(--dash-border) !important;
}

html:not([data-theme='dark']) body.is-dashboard .nav-logo,
html:not([data-theme='dark']) body.is-dashboard .logo-text,
html:not([data-theme='dark']) body.is-dashboard .user-avatar-name,
html:not([data-theme='dark']) body.is-dashboard .user-avatar-chevron {
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .logo-plus {
  color: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .theme-toggle {
  border-color: var(--dash-border) !important;
  background: var(--dash-panel) !important;
  color: var(--dash-text-muted) !important;
}

html:not([data-theme='dark']) body.is-dashboard .theme-toggle:hover {
  border-color: var(--dash-primary) !important;
  background: var(--dash-primary-soft) !important;
  color: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .notif-bell {
  border-color: #dfe5ff !important;
  background: #eef2ff !important;
  color: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .notif-bell:hover,
html:not([data-theme='dark']) body.is-dashboard .notif-bell.active,
html:not([data-theme='dark']) body.is-dashboard .notif-bell[aria-expanded='true'] {
  background: #e1e8ff !important;
  color: var(--dash-primary-strong) !important;
}

html:not([data-theme='dark']) body.is-dashboard .notif-badge {
  border-color: var(--dash-shell) !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar {
  background: var(--dash-shell) !important;
  border-right-color: var(--dash-border) !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar-logo,
html:not([data-theme='dark']) body.is-dashboard .sidebar-header,
html:not([data-theme='dark']) body.is-dashboard .sidebar-footer {
  border-color: var(--dash-border) !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar-logo-text,
html:not([data-theme='dark']) body.is-dashboard .sidebar-user-name {
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar-user-role,
html:not([data-theme='dark']) body.is-dashboard .sidebar-user > div > div[style*='font-size'] {
  color: var(--dash-text-muted) !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar-collapse-btn {
  border-color: var(--dash-border) !important;
  background: var(--dash-primary-soft) !important;
  color: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar-collapse-btn:hover {
  border-color: var(--dash-primary) !important;
  background: #e1e8ff !important;
  color: var(--dash-primary-strong) !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar-section {
  color: #607aa8 !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar-link,
html:not([data-theme='dark']) body.is-dashboard .sidebar-link i {
  color: #34445d !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar-link:hover {
  background: #f1f5ff !important;
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar-link:hover i {
  color: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar-link.active {
  background: var(--dash-primary-soft) !important;
  color: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar-link.active i {
  color: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .sidebar-logout,
html:not([data-theme='dark']) body.is-dashboard .sidebar-logout i {
  color: #dc3545 !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-breadcrumb,
html:not([data-theme='dark']) body.is-dashboard .dash-header p,
html:not([data-theme='dark']) body.is-dashboard .admin-dash-title p {
  color: var(--dash-text-muted) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-breadcrumb a {
  color: #34445d !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-breadcrumb span,
html:not([data-theme='dark']) body.is-dashboard .dash-header h1 i,
html:not([data-theme='dark']) body.is-dashboard .admin-dash-title h1 i {
  color: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-breadcrumb i {
  color: var(--dash-text-muted) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-header h1,
html:not([data-theme='dark']) body.is-dashboard .admin-dash-title h1,
html:not([data-theme='dark']) body.is-dashboard .dash-main h2,
html:not([data-theme='dark']) body.is-dashboard .dash-main h3,
html:not([data-theme='dark']) body.is-dashboard .dash-main h4,
html:not([data-theme='dark']) body.is-dashboard .dash-main .card-header h3,
html:not([data-theme='dark']) body.is-dashboard .dash-main .empty-state h3 {
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .card,
html:not([data-theme='dark']) body.is-dashboard .dash-main .stat-widget,
html:not([data-theme='dark']) body.is-dashboard .dash-main .clinic-card,
html:not([data-theme='dark']) body.is-dashboard .dash-main .pet-card,
html:not([data-theme='dark']) body.is-dashboard .dash-main .table-wrap {
  border-color: var(--dash-border) !important;
  background: var(--dash-panel) !important;
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .card-header {
  border-bottom-color: var(--dash-border) !important;
  background: transparent !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .card-header h3 i {
  color: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .stat-widget-info strong {
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .stat-widget-icon {
  background: var(--dash-primary-soft) !important;
  color: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .stat-widget-icon.sw-blue {
  background: #eaf2ff !important;
  color: #3478d4 !important;
}

html:not([data-theme='dark']) body.is-dashboard .stat-widget-icon.sw-green {
  background: #e7f8f0 !important;
  color: #16835f !important;
}

html:not([data-theme='dark']) body.is-dashboard .stat-widget-icon.sw-orange {
  background: #fff4dc !important;
  color: #a76500 !important;
}

html:not([data-theme='dark']) body.is-dashboard .stat-widget-icon.sw-purple {
  background: #f0ebff !important;
  color: #6258e8 !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .empty-state {
  color: var(--dash-text-muted) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .empty-state > i {
  background: var(--dash-primary-soft) !important;
  color: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .empty-state p {
  color: var(--dash-text-muted) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .form-label,
html:not([data-theme='dark']) body.is-dashboard .dash-main label {
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .form-control,
html:not([data-theme='dark']) body.is-dashboard .dash-main .form-select,
html:not([data-theme='dark']) body.is-dashboard .dash-main input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
html:not([data-theme='dark']) body.is-dashboard .dash-main select,
html:not([data-theme='dark']) body.is-dashboard .dash-main textarea,
html:not([data-theme='dark']) body.is-dashboard .modal input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
html:not([data-theme='dark']) body.is-dashboard .modal select,
html:not([data-theme='dark']) body.is-dashboard .modal textarea {
  border-color: var(--dash-border) !important;
  background: var(--dash-input) !important;
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .form-control::placeholder,
html:not([data-theme='dark']) body.is-dashboard .dash-main input::placeholder,
html:not([data-theme='dark']) body.is-dashboard .dash-main textarea::placeholder,
html:not([data-theme='dark']) body.is-dashboard .modal input::placeholder,
html:not([data-theme='dark']) body.is-dashboard .modal textarea::placeholder {
  color: #8290a5 !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .form-control:focus,
html:not([data-theme='dark']) body.is-dashboard .dash-main .form-select:focus,
html:not([data-theme='dark']) body.is-dashboard .dash-main input:focus,
html:not([data-theme='dark']) body.is-dashboard .dash-main select:focus,
html:not([data-theme='dark']) body.is-dashboard .dash-main textarea:focus,
html:not([data-theme='dark']) body.is-dashboard .modal input:focus,
html:not([data-theme='dark']) body.is-dashboard .modal select:focus,
html:not([data-theme='dark']) body.is-dashboard .modal textarea:focus {
  border-color: var(--dash-primary) !important;
  box-shadow: 0 0 0 3px rgba(79, 103, 223, .16) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .btn-outline,
html:not([data-theme='dark']) body.is-dashboard .modal .btn-outline {
  border-color: var(--dash-border-strong) !important;
  background: transparent !important;
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .btn-outline:hover,
html:not([data-theme='dark']) body.is-dashboard .modal .btn-outline:hover {
  border-color: var(--dash-primary) !important;
  background: var(--dash-primary-soft) !important;
  color: var(--dash-primary-strong) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .btn-secondary,
html:not([data-theme='dark']) body.is-dashboard .modal .btn-secondary {
  border-color: #14799f !important;
  background: #197da4 !important;
  color: #fff !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .btn-danger,
html:not([data-theme='dark']) body.is-dashboard .modal .btn-danger {
  border-color: #c43d4a !important;
  background: #d74350 !important;
  color: #fff !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .admin-range-select {
  border-color: var(--dash-border) !important;
  background: var(--dash-input) !important;
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main thead tr {
  background: var(--dash-panel-soft) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main thead th {
  border-bottom-color: var(--dash-border) !important;
  color: var(--dash-text-muted) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main tbody td {
  border-bottom-color: var(--dash-border) !important;
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main tbody tr:hover {
  background: #f5f7ff !important;
}

/* Status badges need a light palette of their own. The legacy dashboard
   stylesheet uses its dark-mode badge colors without a theme scope. */
html:not([data-theme='dark']) body.is-dashboard .dash-main .badge-primary {
  border-color: #a9b2ee !important;
  background: #eef2ff !important;
  color: #3f3caa !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .badge-info {
  border-color: #9cc1ef !important;
  background: #eaf3ff !important;
  color: #2459a6 !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .badge-success {
  border-color: #8acdaf !important;
  background: #e8f7f1 !important;
  color: #126b4e !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .badge-warning {
  border-color: #d8a13e !important;
  background: #fff4d6 !important;
  color: #8a5200 !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .badge-danger {
  border-color: #e58b96 !important;
  background: #fff0f1 !important;
  color: #a12637 !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .badge-secondary {
  border-color: #a8b4c3 !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .table-tab,
html:not([data-theme='dark']) body.is-dashboard .dash-main .page-btn {
  border-color: var(--dash-border-strong) !important;
  background: transparent !important;
  color: var(--dash-text-muted) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .table-tab:hover,
html:not([data-theme='dark']) body.is-dashboard .dash-main .table-tab.active,
html:not([data-theme='dark']) body.is-dashboard .dash-main .page-btn:hover,
html:not([data-theme='dark']) body.is-dashboard .dash-main .page-btn.active {
  border-color: var(--dash-primary) !important;
  background: var(--dash-primary-soft) !important;
  color: var(--dash-primary-strong) !important;
}

html:not([data-theme='dark']) body.is-dashboard .user-dropdown-panel,
html:not([data-theme='dark']) body.is-dashboard .notif-dropdown,
html:not([data-theme='dark']) body.is-dashboard .dash-main .dropdown-menu {
  border-color: var(--dash-border) !important;
  background: var(--dash-panel) !important;
  color: var(--dash-text) !important;
  box-shadow: var(--dash-shadow) !important;
}

html:not([data-theme='dark']) body.is-dashboard .udp-item,
html:not([data-theme='dark']) body.is-dashboard .notif-dp-item,
html:not([data-theme='dark']) body.is-dashboard .dash-main .dropdown-menu a,
html:not([data-theme='dark']) body.is-dashboard .dash-main .dropdown-menu button {
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .udp-item:hover,
html:not([data-theme='dark']) body.is-dashboard .notif-dp-item:hover,
html:not([data-theme='dark']) body.is-dashboard .dash-main .dropdown-menu a:hover,
html:not([data-theme='dark']) body.is-dashboard .dash-main .dropdown-menu button:hover {
  background: var(--dash-primary-soft) !important;
}

html:not([data-theme='dark']) body.is-dashboard .modal-overlay {
  background: rgba(15, 23, 42, .35) !important;
}

html:not([data-theme='dark']) body.is-dashboard .modal {
  background: var(--dash-panel) !important;
  color: var(--dash-text) !important;
  box-shadow: 0 22px 70px rgba(31, 41, 55, .18) !important;
}

html:not([data-theme='dark']) body.is-dashboard .modal-header h3,
html:not([data-theme='dark']) body.is-dashboard .modal-header h4 {
  color: var(--dash-text) !important;
}

html:not([data-theme='dark']) body.is-dashboard .modal-close {
  background: var(--dash-input) !important;
  color: var(--dash-text-muted) !important;
}

html:not([data-theme='dark']) body.is-dashboard .modal-close:hover {
  background: var(--dash-primary-soft) !important;
  color: var(--dash-primary-strong) !important;
}

html:not([data-theme='dark']) body.is-dashboard .notif-dp-header,
html:not([data-theme='dark']) body.is-dashboard .notif-dp-footer {
  border-color: var(--dash-border) !important;
  background: var(--dash-panel-soft) !important;
}

html:not([data-theme='dark']) body.is-dashboard .notif-dp-title,
html:not([data-theme='dark']) body.is-dashboard .notif-dp-footer a {
  color: var(--dash-primary-strong) !important;
}

html:not([data-theme='dark']) body.is-dashboard .mobile-bottom-nav {
  background: var(--dash-shell) !important;
  border-top-color: var(--dash-border) !important;
  box-shadow: 0 -8px 26px rgba(31, 41, 55, .10) !important;
}

html:not([data-theme='dark']) body.is-dashboard .mbn-item {
  color: var(--dash-text-muted) !important;
}

html:not([data-theme='dark']) body.is-dashboard .mbn-item.active,
html:not([data-theme='dark']) body.is-dashboard .mbn-item:hover {
  color: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .mbn-item.active::before {
  background: var(--dash-primary) !important;
}

html:not([data-theme='dark']) body.is-dashboard .mbn-badge {
  border-color: var(--dash-shell) !important;
}

@media (max-width: 900px) {
  html:not([data-theme='dark']) body.is-dashboard .nav-sidebar-toggle span {
    background: var(--dash-text) !important;
  }

  html:not([data-theme='dark']) body.is-dashboard .sidebar-overlay {
    background: rgba(15, 23, 42, .32) !important;
  }
}

/*
 * Public light theme corrections
 *
 * main.css contains a few legacy dark-first component rules that are loaded
 * before this file. Keep the dark palette untouched, but give public pages a
 * single readable light surface and restore white text on gradient hero areas.
 */
html:not([data-theme='dark']) body:not(.is-dashboard) {
  --card-bg: var(--card);
  background: var(--bg) !important;
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-directory-page,
html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-detail-page {
  background: var(--bg) !important;
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.hero-page):not(.is-dashboard) .navbar {
  background: #fff !important;
  border-bottom-color: var(--border) !important;
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.hero-page):not(.is-dashboard) .nav-logo,
html:not([data-theme='dark']) body:not(.hero-page):not(.is-dashboard) .logo-text,
html:not([data-theme='dark']) body:not(.hero-page):not(.is-dashboard) .nav-link,
html:not([data-theme='dark']) body:not(.hero-page):not(.is-dashboard) .user-avatar-name,
html:not([data-theme='dark']) body:not(.hero-page):not(.is-dashboard) .user-avatar-chevron {
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.hero-page):not(.is-dashboard) .logo-plus {
  color: var(--primary) !important;
}

/* Gradient hero copy must stay white even though the global light palette
   intentionally makes regular page headings dark. */
html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-directory-hero h1,
html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-directory-hero p {
  color: #fff !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-detail-hero-copy,
html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-detail-hero-copy h1,
html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-detail-hero-copy div,
html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-detail-hero-copy span,
html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-detail-hero-copy i {
  color: #fff !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-detail-hero-copy .stars,
html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-detail-hero-copy .stars i {
  color: var(--warning) !important;
}

/* Public forms, cards, and clinic results */
html:not([data-theme='dark']) body:not(.is-dashboard) .form-control,
html:not([data-theme='dark']) body:not(.is-dashboard) input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
html:not([data-theme='dark']) body:not(.is-dashboard) select,
html:not([data-theme='dark']) body:not(.is-dashboard) textarea {
  background: #fff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .form-control::placeholder,
html:not([data-theme='dark']) body:not(.is-dashboard) input::placeholder,
html:not([data-theme='dark']) body:not(.is-dashboard) textarea::placeholder {
  color: var(--text-muted) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .form-label,
html:not([data-theme='dark']) body:not(.is-dashboard) label {
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-directory-page .card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-directory-page .clinic-card,
html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-directory-page .clinic-card-body,
html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-directory-page .clinic-card-title {
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-directory-page .clinic-card-addr,
html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-directory-page .clinic-card-footer > span {
  color: var(--text-muted) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-directory-page .clinic-card-footer {
  border-top-color: var(--border) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .clinic-directory-page .clinic-tag {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .empty-state {
  color: var(--text-muted) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .empty-state h2,
html:not([data-theme='dark']) body:not(.is-dashboard) .empty-state h3,
html:not([data-theme='dark']) body:not(.is-dashboard) .empty-state h4 {
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .empty-state p {
  color: var(--text-muted) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .empty-state > i {
  background: rgba(79, 70, 229, .10) !important;
  color: var(--primary) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .pagination .page-btn,
html:not([data-theme='dark']) body:not(.is-dashboard) .page-btn {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .pagination .page-btn:hover,
html:not([data-theme='dark']) body:not(.is-dashboard) .page-btn:hover {
  background: #eef2ff !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .pagination .page-btn.active,
html:not([data-theme='dark']) body:not(.is-dashboard) .page-btn.active {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

/* Account and legacy dropdown surfaces */
html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown-panel,
html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown,
html:not([data-theme='dark']) body:not(.is-dashboard) .dropdown-menu {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .14) !important;
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown-panel .udp-header {
  border-bottom-color: var(--border) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown-panel .udp-name,
html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown-panel .udp-item,
html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown-panel .udp-darkmode-row,
html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown-panel .udp-darkmode-row span {
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown-panel .udp-icon,
html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown-panel .udp-close-chevron {
  color: var(--text-muted) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown-panel .udp-item:hover,
html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown a:hover,
html:not([data-theme='dark']) body:not(.is-dashboard) .dropdown-menu a:hover,
html:not([data-theme='dark']) body:not(.is-dashboard) .dropdown-menu button:hover {
  background: #f1f5ff !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown-panel .udp-divider,
html:not([data-theme='dark']) body:not(.is-dashboard) .dropdown-divider {
  background: var(--border) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown-panel .udp-toggle-switch {
  background: #cbd5e1 !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .user-dropdown-panel .udp-toggle-switch.on {
  background: var(--primary) !important;
}

/* The footer used hard-coded dark colors in the public theme. */
html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer {
  background: #fff !important;
  border-top-color: var(--border) !important;
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer-logo,
html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer-nav h2 {
  color: var(--text) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer-brand > p,
html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer-location,
html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer-nav p,
html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer-bottom p {
  color: var(--text-muted) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer-nav a,
html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer-bottom a {
  color: #52627a !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer-nav a:hover,
html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer-bottom a:hover,
html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer a:hover {
  color: var(--primary) !important;
}

html:not([data-theme='dark']) body:not(.is-dashboard) .site-footer-bottom {
  border-top-color: var(--border) !important;
}

/* Preserve semantic dashboard title colors and keep empty-state icons compact. */
html:not([data-theme='dark']) body.is-dashboard .dash-header h1 i.fa-heart {
  color: var(--dash-danger) !important;
}

html:not([data-theme='dark']) body.is-dashboard .dash-main .empty-state > i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem !important;
  border-radius: 50%;
}

@media (max-width: 768px) {
  html:not([data-theme='dark']) body:not(.is-dashboard) .mobile-menu.open,
  html:not([data-theme='dark']) body:not(.is-dashboard) #mobileMenu.open {
    background: #fff !important;
    border-color: var(--border) !important;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18) !important;
  }

  html:not([data-theme='dark']) body:not(.is-dashboard) .mobile-menu .mobile-link {
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
  }

  html:not([data-theme='dark']) body:not(.is-dashboard) .mobile-menu .mobile-link:hover {
    background: #f1f5ff !important;
    color: var(--text) !important;
    transform: none;
  }

  html:not([data-theme='dark']) body:not(.is-dashboard) .mobile-menu .mobile-link.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: #fff !important;
  }

  html:not([data-theme='dark']) body:not(.is-dashboard) .mobile-menu .mobile-icon {
    background: #f1f5ff !important;
    border-color: #dbe4f0 !important;
  }

  html:not([data-theme='dark']) body:not(.is-dashboard) .mobile-menu .mobile-link.active .mobile-icon {
    background: rgba(255, 255, 255, .2) !important;
    border-color: rgba(255, 255, 255, .3) !important;
  }

  html:not([data-theme='dark']) body:not(.is-dashboard) .mobile-menu-auth {
    border-top-color: var(--border) !important;
  }

  html:not([data-theme='dark']) body:not(.is-dashboard) .mobile-menu-auth .btn-outline {
    background: transparent !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
  }
}