/* ─── Lady Health · Wagtail Admin Theme ─────────────────────────────────
   Uses Wagtail 7.x semantic CSS variables with theme-aware selectors.
   Palette: Vitality Core design system (Material 3 tonal).
   ───────────────────────────────────────────────────────────────────── */

/* ── Fonts (shared across themes) ──────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@400;600;700;800&display=swap");

:root {
  --w-font-sans: "Inter", system-ui, sans-serif;
  --w-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ── Static brand colours (theme-independent) ──────────────────────── */
:root {
  --w-color-primary: #0f5238;
  --w-color-primary-200: #2d6a4f;
  --w-color-secondary: #2b6485;
  --w-color-secondary-600: #064c6b;
  --w-color-secondary-400: #2b6485;
  --w-color-secondary-100: #a3d8fe;
  --w-color-secondary-75: #98cdf2;
  --w-color-secondary-50: #c7e7ff;
  --w-color-positive-100: #1b8666;
  --w-color-info-100: #2b6485;
}

/* ── Light theme ───────────────────────────────────────────────────── */
:root,
.w-theme-light {
  /* Surfaces */
  --w-color-surface-page: #f8f9fa;
  --w-color-surface-field: #ffffff;
  --w-color-surface-field-inactive: #f3f4f5;
  --w-color-surface-header: #0f5238;
  --w-color-surface-menus: #f3f4f5;
  --w-color-surface-menu-item-active: #e1e3e4;
  --w-color-surface-tooltip: #191c1d;
  --w-color-surface-button-default: #0f5238;
  --w-color-surface-button-hover: #2d6a4f;
  --w-color-surface-button-inactive: #e1e3e4;
  --w-color-surface-button-outline-hover: #b1f0ce;
  --w-color-surface-button-critical-hover: #ffdad6;
  --w-color-surface-status-label: #e1e3e4;
  --w-color-surface-info-panel: #c7e7ff;
  --w-color-surface-dashboard-panel: #ffffff;

  /* Text */
  --w-color-text-button: #ffffff;
  --w-color-text-label: #191c1d;
  --w-color-text-label-menus-default: #404943;
  --w-color-text-label-menus-active: #0f5238;
  --w-color-text-context: #191c1d;
  --w-color-text-meta: #707973;
  --w-color-text-placeholder: #707973;
  --w-color-text-link-default: #0f5238;
  --w-color-text-link-hover: #2d6a4f;
  --w-color-text-button-outline-default: #0f5238;
  --w-color-text-button-outline-hover: #0a3524;
  --w-color-text-highlight: #0f5238;
  --w-color-text-error: #ba1a1a;
  --w-color-text-button-critical-outline-hover: #93000a;
  --w-color-text-status-label: #191c1d;
  --w-color-text-link-info: #064c6b;

  /* Icons */
  --w-color-icon-primary: #0f5238;
  --w-color-icon-primary-hover: #2d6a4f;
  --w-color-icon-secondary: #707973;
  --w-color-icon-secondary-hover: #404943;

  /* Borders */
  --w-color-border-furniture: #e1e3e4;
  --w-color-border-button-small-outline-default: #bfc9c1;
  --w-color-border-field-default: #bfc9c1;
  --w-color-border-field-inactive: #e1e3e4;
  --w-color-border-field-hover: #0f5238;
  --w-color-border-button-outline-default: #0f5238;
  --w-color-border-button-outline-hover: #0a3524;
  --w-color-border-interactive-more-contrast: #404943;
  --w-color-border-interactive-more-contrast-hover: #191c1d;
  --w-color-border-interactive-more-contrast-dark-bg: #ffffff;
  --w-color-border-interactive-more-contrast-dark-bg-hover: #b1f0ce;
  --w-color-border-furniture-more-contrast: #bfc9c1;
  --w-color-focus: #2d6a4f;
  --w-color-box-shadow-md: rgba(0, 0, 0, 0.1);
}

/* ── Dark theme ────────────────────────────────────────────────────── */
.w-theme-dark {
  /* Surfaces */
  --w-color-surface-page: #191c1d;
  --w-color-surface-field: #2e3132;
  --w-color-surface-field-inactive: #262a2b;
  --w-color-surface-header: #0a3524;
  --w-color-surface-menus: #1e2223;
  --w-color-surface-menu-item-active: #2d6a4f33;
  --w-color-surface-tooltip: #e1e3e4;
  --w-color-surface-button-default: #2d6a4f;
  --w-color-surface-button-hover: #3a7d62;
  --w-color-surface-button-inactive: #2e3132;
  --w-color-surface-button-outline-hover: #2d6a4f33;
  --w-color-surface-button-critical-hover: #93000a;
  --w-color-surface-status-label: #2e3132;
  --w-color-surface-info-panel: #064c6b;
  --w-color-surface-dashboard-panel: #1e2223;

  /* Text */
  --w-color-text-button: #ffffff;
  --w-color-text-label: #e1e3e4;
  --w-color-text-label-menus-default: #bfc9c1;
  --w-color-text-label-menus-active: #95d4b3;
  --w-color-text-context: #e1e3e4;
  --w-color-text-meta: #8a938c;
  --w-color-text-placeholder: #707973;
  --w-color-text-link-default: #95d4b3;
  --w-color-text-link-hover: #b1f0ce;
  --w-color-text-button-outline-default: #95d4b3;
  --w-color-text-button-outline-hover: #b1f0ce;
  --w-color-text-highlight: #95d4b3;
  --w-color-text-error: #ffb4ab;
  --w-color-text-button-critical-outline-hover: #ffdad6;
  --w-color-text-status-label: #e1e3e4;
  --w-color-text-link-info: #a3d8fe;

  /* Icons */
  --w-color-icon-primary: #95d4b3;
  --w-color-icon-primary-hover: #b1f0ce;
  --w-color-icon-secondary: #8a938c;
  --w-color-icon-secondary-hover: #bfc9c1;

  /* Borders */
  --w-color-border-furniture: #2e3132;
  --w-color-border-button-small-outline-default: #404943;
  --w-color-border-field-default: #404943;
  --w-color-border-field-inactive: #2e3132;
  --w-color-border-field-hover: #95d4b3;
  --w-color-border-button-outline-default: #95d4b3;
  --w-color-border-button-outline-hover: #b1f0ce;
  --w-color-border-interactive-more-contrast: #bfc9c1;
  --w-color-border-interactive-more-contrast-hover: #e1e3e4;
  --w-color-border-interactive-more-contrast-dark-bg: #ffffff;
  --w-color-border-interactive-more-contrast-dark-bg-hover: #b1f0ce;
  --w-color-border-furniture-more-contrast: #404943;
  --w-color-focus: #95d4b3;
  --w-color-box-shadow-md: rgba(0, 0, 0, 0.35);
}

/* ── System preference ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .w-theme-system {
    --w-color-surface-page: #191c1d;
    --w-color-surface-field: #2e3132;
    --w-color-surface-field-inactive: #262a2b;
    --w-color-surface-header: #0a3524;
    --w-color-surface-menus: #1e2223;
    --w-color-surface-menu-item-active: #2d6a4f33;
    --w-color-surface-tooltip: #e1e3e4;
    --w-color-surface-button-default: #2d6a4f;
    --w-color-surface-button-hover: #3a7d62;
    --w-color-surface-button-inactive: #2e3132;
    --w-color-surface-button-outline-hover: #2d6a4f33;
    --w-color-surface-button-critical-hover: #93000a;
    --w-color-surface-status-label: #2e3132;
    --w-color-surface-info-panel: #064c6b;
    --w-color-surface-dashboard-panel: #1e2223;

    --w-color-text-button: #ffffff;
    --w-color-text-label: #e1e3e4;
    --w-color-text-label-menus-default: #bfc9c1;
    --w-color-text-label-menus-active: #95d4b3;
    --w-color-text-context: #e1e3e4;
    --w-color-text-meta: #8a938c;
    --w-color-text-placeholder: #707973;
    --w-color-text-link-default: #95d4b3;
    --w-color-text-link-hover: #b1f0ce;
    --w-color-text-button-outline-default: #95d4b3;
    --w-color-text-button-outline-hover: #b1f0ce;
    --w-color-text-highlight: #95d4b3;
    --w-color-text-error: #ffb4ab;
    --w-color-text-button-critical-outline-hover: #ffdad6;
    --w-color-text-status-label: #e1e3e4;
    --w-color-text-link-info: #a3d8fe;

    --w-color-icon-primary: #95d4b3;
    --w-color-icon-primary-hover: #b1f0ce;
    --w-color-icon-secondary: #8a938c;
    --w-color-icon-secondary-hover: #bfc9c1;

    --w-color-border-furniture: #2e3132;
    --w-color-border-button-small-outline-default: #404943;
    --w-color-border-field-default: #404943;
    --w-color-border-field-inactive: #2e3132;
    --w-color-border-field-hover: #95d4b3;
    --w-color-border-button-outline-default: #95d4b3;
    --w-color-border-button-outline-hover: #b1f0ce;
    --w-color-border-interactive-more-contrast: #bfc9c1;
    --w-color-border-interactive-more-contrast-hover: #e1e3e4;
    --w-color-border-interactive-more-contrast-dark-bg: #ffffff;
    --w-color-border-interactive-more-contrast-dark-bg-hover: #b1f0ce;
    --w-color-border-furniture-more-contrast: #404943;
    --w-color-focus: #95d4b3;
    --w-color-box-shadow-md: rgba(0, 0, 0, 0.35);
  }
}

/* ── Dashboard header overrides ────────────────────────────────────── */

.w-dashboard {
  margin-top: 1.5rem !important;
}
/* Hide welcome title */
.w-dashboard header h1.w-h1 {
  display: none !important;
}

/* Hide avatar / account info section */
.w-dashboard header > .w-hidden.lg\:w-flex {
  display: none !important;
}

/* Center the search form container */
.w-dashboard header {
  display: flex !important;
  justify-content: right !important;
  padding-inline: 1.25rem !important;
}

@media (min-width: 50em) {
  .w-dashboard header {
    padding-inline: 5rem !important;
  }
}

.w-dashboard header > div:first-child {
  flex-grow: 0 !important;
  width: 100% !important;
  max-width: 640px !important;
  padding-right: 0 !important;
}

/* Hide sidebar top controls (toggle + nav buttons) */
[data-wagtail-sidebar] > div > div > *:first-child,
#wagtail-sidebar > div > div > *:first-child,
.sidebar-inner > *:first-child {
  display: none !important;
}

/* ── Component refinements ─────────────────────────────────────────── */
.w-panel {
  border-radius: 14px;
}
.w-panel--dashboard {
  margin: 0 1.25rem;
}
@media (min-width: 50em) {
  .w-panel--dashboard {
    margin: 0 5rem;
  }
}

.w-menu .w-menu-item a {
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}

/* ── Sidebar inner menu glass blur ────────────────────────────────── */
[data-wagtail-sidebar] [data-explorer-menu],
[data-wagtail-sidebar] .sidebar-panel,
#wagtail-sidebar .sidebar-panel {
  background-color: rgba(30, 34, 35, 0.75) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.w-theme-light [data-wagtail-sidebar] [data-explorer-menu],
.w-theme-light [data-wagtail-sidebar] .sidebar-panel,
.w-theme-light #wagtail-sidebar .sidebar-panel {
  background-color: rgba(243, 244, 245, 0.75) !important;
}

/* ── Main action button (save/publish) ────────────────────────────── */
.w-dropdown-button .button.action-save,
.w-dropdown-button .w-dropdown__toggle.button {
  background-color: #0f5238 !important;
  color: #ffffff !important;
}
.w-dropdown-button .button.action-save:hover,
.w-dropdown-button .w-dropdown__toggle.button:hover {
  background-color: #2d6a4f !important;
}
.w-dropdown-button .button.action-save .icon,
.w-dropdown-button .w-dropdown__toggle.button .icon {
  color: #ffffff !important;
}
.w-theme-dark .w-dropdown-button .button.action-save,
.w-theme-dark .w-dropdown-button .w-dropdown__toggle.button {
  background-color: #2d6a4f !important;
}
.w-theme-dark .w-dropdown-button .button.action-save:hover,
.w-theme-dark .w-dropdown-button .w-dropdown__toggle.button:hover {
  background-color: #3a7d62 !important;
}

/* ── Dropdown menus (standardized to panel style) ────────────────── */
.tippy-box[data-theme="dropdown-button"],
.tippy-box[data-theme="dropdown"] {
  background-color: var(--w-color-surface-menus) !important;
  border: 1px solid var(--w-color-border-furniture);
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--w-color-box-shadow-md);
}
.tippy-box[data-theme="dropdown-button"] .w-dropdown__content .button,
.tippy-box[data-theme="dropdown-button"] .w-dropdown__content a,
.tippy-box[data-theme="dropdown"] .w-dropdown__content .button,
.tippy-box[data-theme="dropdown"] .w-dropdown__content a {
  background: transparent !important;
  color: var(--w-color-text-label) !important;
  border: none;
  border-radius: 6px;
}
.tippy-box[data-theme="dropdown-button"] .w-dropdown__content .button:hover,
.tippy-box[data-theme="dropdown-button"] .w-dropdown__content a:hover,
.tippy-box[data-theme="dropdown"] .w-dropdown__content .button:hover,
.tippy-box[data-theme="dropdown"] .w-dropdown__content a:hover {
  background-color: var(--w-color-surface-menu-item-active) !important;
  color: var(--w-color-text-label-menus-active) !important;
}
.tippy-box[data-theme="dropdown-button"] .w-dropdown__content .button .icon,
.tippy-box[data-theme="dropdown-button"] .w-dropdown__content a .icon,
.tippy-box[data-theme="dropdown"] .w-dropdown__content .button .icon,
.tippy-box[data-theme="dropdown"] .w-dropdown__content a .icon {
  color: var(--w-color-icon-secondary);
}
.tippy-box[data-theme="dropdown-button"] .w-dropdown__content .button:hover .icon,
.tippy-box[data-theme="dropdown-button"] .w-dropdown__content a:hover .icon,
.tippy-box[data-theme="dropdown"] .w-dropdown__content .button:hover .icon,
.tippy-box[data-theme="dropdown"] .w-dropdown__content a:hover .icon {
  color: var(--w-color-icon-primary);
}
.tippy-box[data-theme="dropdown-button"] > .tippy-arrow::before,
.tippy-box[data-theme="dropdown"] > .tippy-arrow::before {
  border-bottom-color: var(--w-color-surface-menus) !important;
}

/* ── Tooltip contrast fix (dark theme has light tooltip bg) ───────── */
/* Exclude dropdown-themed tippy-boxes (page actions, etc.) */
.w-theme-dark .tippy-box[role="tooltip"]:not([data-theme*="dropdown"]) {
  background-color: #e1e3e4 !important;
  color: #191c1d !important;
}
.w-theme-dark .tippy-box[role="tooltip"]:not([data-theme*="dropdown"]) .tippy-content,
.w-theme-dark .tippy-box[role="tooltip"]:not([data-theme*="dropdown"]) * {
  color: #191c1d !important;
}
.w-theme-dark .tippy-box[role="tooltip"]:not([data-theme*="dropdown"]) > .tippy-arrow::before {
  color: #e1e3e4 !important;
}

@media (prefers-color-scheme: dark) {
  .w-theme-system .tippy-box[role="tooltip"]:not([data-theme*="dropdown"]) {
    background-color: #e1e3e4 !important;
    color: #191c1d !important;
  }
  .w-theme-system .tippy-box[role="tooltip"]:not([data-theme*="dropdown"]) .tippy-content,
  .w-theme-system .tippy-box[role="tooltip"]:not([data-theme*="dropdown"]) * {
    color: #191c1d !important;
  }
  .w-theme-system .tippy-box[role="tooltip"]:not([data-theme*="dropdown"]) > .tippy-arrow::before {
    color: #e1e3e4 !important;
  }
}