/*
 * EwoooC V3 Page Guard
 * Loaded after page-level CSS to keep migrated Flask/Jinja pages aligned with
 * the production design spec while old page files are cleaned incrementally.
 */

.momo-app:not(.momo-observability-mode) {
  --momo-page-title-size: 1.8rem;
  --momo-page-section-title-size: 1.4rem;
  --momo-page-card-title-size: 1rem;
  --momo-page-kpi-size: 1.85rem;
}

.momo-app:not(.momo-observability-mode) :is(
  .home-hero__title,
  .ai-recommend-title,
  .ar-hero__title h1,
  .monthly-analysis-title,
  .ms-page-head__title,
  .edm-head__title,
  .edm-page .page-head h2,
  .edm-page .campaign-title,
  .sa-page-head__title,
  .daily-hero__title,
  .ga-page-head__h1,
  .vendor-title,
  .page-logs .page-header h4
) {
  color: var(--momo-text-primary) !important;
  font-family: var(--momo-font-display) !important;
  font-size: var(--momo-page-title-size) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-wrap: pretty;
}

.momo-app:not(.momo-observability-mode) :is(
  .fn-card__title,
  .edm-slotpanel__title,
  .ms-chart-card__title,
  .ms-special__title,
  .ms-data-table__title,
  .dashboard-section-label .title,
  .dashboard-table-title,
  .dashboard-focus-title,
  .sa-filter-head__title,
  .sa-filter-group__title,
  .sa-empty__title,
  .sa-panel__title,
  .ga-empty-state h2,
  .ga-chart-card__title,
  .ai-card__title,
  .ai-notice__title,
  .home-manual__title,
  .home-manual__subhead,
  .crawler-title,
  .page-logs .control-section-title,
  .card-title
) {
  color: var(--momo-text-primary) !important;
  font-family: var(--momo-font-display) !important;
  font-size: var(--momo-page-card-title-size) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}

.momo-app:not(.momo-observability-mode) :is(
  .stat-card h2,
  .stat-number,
  .dashboard-kpi-value,
  .dashboard-focus-number,
  .dashboard-ai-summary-value,
  .kpi-item-value,
  .kpi-value,
  .kpi-card__value,
  .sa-yoy-card__value,
  .sa-insights__value,
  .ga-kpi__value,
  .monthly-analysis-page .kpi-value,
  .vendor-pulse-value,
  .vendor-metric-value,
  .page-logs .stat-value,
  .daily-mobile-day__value
) {
  font-family: var(--momo-font-mono) !important;
  font-size: var(--momo-page-kpi-size) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}

.momo-app:not(.momo-observability-mode) :is(
  .home-hero,
  .fn-card,
  .dashboard-kpi-grid,
  .dashboard-focus-card,
  .dashboard-filter-card,
  .dashboard-table-card,
  .ai-recommend-hero,
  .ar-hero,
  .monthly-analysis-hero,
  .ms-page-head,
  .edm-head,
  .edm-promonav,
  .edm-statusbar,
  .edm-slotpanel,
  .edm-page .table-container,
  .edm-page .campaign-hero,
  .edm-page .campaign-kpi-panel,
  .edm-page .campaign-hero-content,
  .sa-page-head,
  .sa-filter-card,
  .sa-panel,
  .sa-kpi,
  .daily-hero,
  .daily-kpi-grid,
  .kpi-card,
  .daily-calendar,
  .ga-page-head,
  .ga-kpi,
  .ga-chart-card,
  .vendor-hero-panel,
  .vendor-card,
  .vendor-table-card,
  .vendor-pulse,
  .crawler-card,
  .home-manual,
  .page-logs .page-header,
  .page-logs .stat-card,
  .page-logs .control-panel,
  .page-logs .log-container-wrapper,
  .momo-app .card
) {
  border-radius: 8px !important;
}

.momo-app:not(.momo-observability-mode) :is(
  .home-hero,
  .ai-recommend-hero,
  .ar-hero,
  .monthly-analysis-hero,
  .ms-page-head,
  .edm-head,
  .edm-page .campaign-hero,
  .edm-page .campaign-hero-content,
  .sa-page-head,
  .daily-hero,
  .ga-page-head,
  .vendor-hero-panel
) {
  background-color: var(--momo-bg-surface) !important;
  background-image: none !important;
  border: 1px solid var(--momo-border-strong) !important;
  box-shadow: var(--momo-shadow-soft) !important;
}

.momo-app:not(.momo-observability-mode) :is(
  .monthly-analysis-page .filter-section,
  .sa-filter-card,
  .ms-filter-card,
  .filter-section
) {
  background-color: var(--momo-bg-paper) !important;
  background-image: none !important;
  color: var(--momo-text-primary) !important;
}

.momo-app:not(.momo-observability-mode) :is(
  .monthly-analysis-page .form-label,
  .filter-section .form-label,
  .sa-filter-group__title,
  .kpi-item-label,
  .kpi-card__label,
  .ga-kpi__label,
  .stat-label,
  .vendor-eyebrow
) {
  color: var(--momo-text-secondary) !important;
  font-family: var(--momo-font-display) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

.momo-app:not(.momo-observability-mode) :is(
  .btn,
  .form-control,
  .form-select,
  .input-group-text,
  .dashboard-search,
  .dashboard-select,
  .dashboard-segmented,
  .dashboard-action-link,
  .dashboard-action-button
) {
  border-radius: 8px !important;
  font-family: var(--momo-font-family) !important;
  letter-spacing: 0 !important;
}

.momo-app:not(.momo-observability-mode) .page-logs :is(
  .btn-control,
  .btn-filter,
  .btn-font-size,
  .search-box input
) {
  border-radius: 8px !important;
  font-family: var(--momo-font-family) !important;
  letter-spacing: 0 !important;
}

.momo-app:not(.momo-observability-mode) :is(.btn-primary, .vendor-action.is-primary, .fn-card__cta) {
  background-color: var(--momo-page-accent) !important;
  background-image: none !important;
  border-color: var(--momo-page-accent-dark) !important;
  color: var(--momo-page-inverse) !important;
}

.momo-app:not(.momo-observability-mode) :is(.table thead th, table thead th) {
  background-color: var(--momo-bg-paper) !important;
  color: var(--momo-text-secondary) !important;
  font-family: var(--momo-font-mono) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

.momo-app:not(.momo-observability-mode) :is(.table-responsive, .table-container) {
  max-width: 100%;
  overflow-x: auto;
}

.momo-app:not(.momo-observability-mode) :is(.home-hero__decor, .stat-icon, .kpi-card__icon-bg) {
  opacity: 0.22;
}

@media (max-width: 768px) {
  .momo-app:not(.momo-observability-mode) {
    --momo-page-title-size: 1.55rem;
    --momo-page-section-title-size: 1.18rem;
    --momo-page-card-title-size: 0.98rem;
    --momo-page-kpi-size: 1.35rem;
  }

  .momo-app:not(.momo-observability-mode) :is(
    .home-hero,
    .ai-recommend-hero,
    .ar-hero,
    .monthly-analysis-hero,
    .ms-page-head,
    .edm-head,
    .edm-page .campaign-hero,
    .sa-page-head,
    .daily-hero,
    .ga-page-head,
    .vendor-hero-panel
  ) {
    padding: 0.9rem !important;
  }

  .momo-app:not(.momo-observability-mode) :is(
    .monthly-analysis-hero,
    .ms-page-head,
    .vendor-hero,
    .edm-page .campaign-hero-grid,
    .edm-page .campaign-hero,
    .sa-page-head,
    .ga-page-head
  ) {
    grid-template-columns: 1fr !important;
  }

  .momo-app:not(.momo-observability-mode) :is(
    .home-hero__title,
    .ai-recommend-title,
    .ar-hero__title h1,
    .monthly-analysis-title,
    .ms-page-head__title,
    .edm-head__title,
    .sa-page-head__title,
    .daily-hero__title,
    .ga-page-head__h1,
    .vendor-title,
    .page-logs .page-header h4
  ) {
    align-items: flex-start;
    overflow-wrap: anywhere;
  }
}