/*
 * Integration layer for features created after the V2 design branch split.
 * Keep selectors page-scoped so the approved design system can remain intact.
 */

html[data-design-theme] {
  background: var(--page-bg);
}

html[data-design-theme] body {
  min-width: 0;
}

html[data-design-theme] body:not(.crm-page) {
  overflow-x: hidden;
}

html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition:
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after {
    transition: none !important;
  }
}

/* Preserve new controls added to the current project page. */
html[data-design-theme] body.project-page .schedule-engine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* The project passport is the page header; do not duplicate it with the app bar. */
html[data-design-theme] body.project-page:not(.tech-audit-page) > header {
  display: none !important;
}

html[data-design-theme] body.project-page .schedule-engine-card,
html[data-design-theme] body.project-page .frequency-history-panel,
html[data-design-theme] body.project-page .frequency-history-card,
html[data-design-theme] body.project-page .matrix-engine-toggle,
html[data-design-theme] body.project-page .matrix-filter-popover {
  border-color: var(--border-default) !important;
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-card);
}

html[data-design-theme] body.project-page .schedule-engine-head,
html[data-design-theme] body.project-page .schedule-time-row,
html[data-design-theme] body.project-page .settings-panel-actions,
html[data-design-theme] body.project-page .frequency-history-toolbar {
  border-color: var(--border-soft) !important;
}

html[data-design-theme] body.project-page .schedule-engine-card small,
html[data-design-theme] body.project-page .schedule-field-label,
html[data-design-theme] body.project-page .schedule-status,
html[data-design-theme] body.project-page .frequency-history-meta {
  color: var(--text-secondary) !important;
}

html[data-design-theme] body.project-page .schedule-days button,
html[data-design-theme] body.project-page .matrix-engine-toggle button {
  border-color: var(--border-default) !important;
  background: var(--surface-secondary) !important;
  color: var(--text-secondary) !important;
}

html[data-design-theme] body.project-page .schedule-days button.active,
html[data-design-theme] body.project-page .matrix-engine-toggle button.active {
  border-color: color-mix(in srgb, var(--accent-secondary) 70%, var(--border-default)) !important;
  background: var(--accent-soft) !important;
  color: var(--text-primary) !important;
}

html[data-design-theme] body.project-page .schedule-engine-logo,
html[data-design-theme] body.project-page .matrix-engine-mark {
  border-color: color-mix(in srgb, var(--accent-secondary) 56%, var(--border-default)) !important;
  background: var(--surface-tertiary) !important;
  color: var(--accent-secondary) !important;
}

html[data-design-theme] body.project-page .schedule-toggle span {
  border-color: var(--border-default) !important;
  background: var(--surface-tertiary) !important;
}

html[data-design-theme] body.project-page .schedule-toggle input:checked + span {
  border-color: var(--accent-secondary) !important;
  background: var(--accent-secondary) !important;
}

html[data-design-theme] body.project-page .schedule-panel input,
html[data-design-theme] body.project-page .schedule-panel select,
html[data-design-theme] body.project-page .frequency-history-panel input,
html[data-design-theme] body.project-page .frequency-history-panel select {
  border-color: var(--input-border) !important;
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
}

/* Wordstat console: keep all new functionality, replace only its palette/surfaces. */
html[data-design-theme] body.wordstat-queue-page {
  --wq-bg: var(--page-bg);
  --wq-card: var(--surface-primary);
  --wq-line: var(--border-default);
  --wq-text: var(--text-primary);
  --wq-muted: var(--text-secondary);
  --wq-brand: var(--accent-primary);
  --wq-warn: var(--warning);
  --wq-good: var(--success);
  --wq-bad: var(--danger);
  background:
    radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--accent-primary) 9%, transparent), transparent 32rem),
    var(--page-bg) !important;
}

html[data-design-theme] body.wordstat-queue-page .wq-wrap {
  max-width: 1680px;
}

html[data-design-theme] body.wordstat-queue-page .wq-status-banner,
html[data-design-theme] body.wordstat-queue-page .wq-summary-card,
html[data-design-theme] body.wordstat-queue-page .wq-workspace,
html[data-design-theme] body.wordstat-queue-page .wq-limits-panel {
  border-color: var(--border-default) !important;
  border-radius: var(--pa-radius-card) !important;
  background: var(--surface-primary) !important;
  box-shadow: var(--shadow-card);
}

html[data-design-theme] body.wordstat-queue-page .wq-btn {
  min-height: var(--pa-control-height);
  border-color: var(--border-default) !important;
  border-radius: var(--pa-radius-control) !important;
  background: var(--surface-secondary) !important;
  color: var(--text-primary) !important;
}

html[data-design-theme] body.wordstat-queue-page .wq-btn.brand {
  border-color: var(--accent-primary) !important;
  background: var(--accent-primary) !important;
  color: var(--accent-primary-text) !important;
}

html[data-design-theme] body.wordstat-queue-page .wq-table th {
  background: var(--table-header-bg) !important;
  color: var(--text-secondary) !important;
}

html[data-design-theme] body.wordstat-queue-page .wq-table td {
  background: var(--table-row-bg) !important;
  color: var(--text-primary) !important;
}

html[data-design-theme="green-retro"] body.wordstat-queue-page .wq-table th {
  background: var(--retro-sheet-head) !important;
  color: #f0ebce !important;
}

html[data-design-theme="green-retro"] body.wordstat-queue-page .wq-table td {
  background: var(--retro-sheet-bg) !important;
  color: var(--retro-sheet-text) !important;
}

/* CRM did not exist in V2. Map its complete feature set to the approved palettes. */
html[data-design-theme] body.crm-page {
  --crm-bg: var(--page-bg);
  --crm-sidebar: var(--sidebar-bg);
  --crm-surface: var(--surface-primary);
  --crm-surface-soft: var(--surface-secondary);
  --crm-surface-hover: var(--surface-hover);
  --crm-line: var(--border-soft);
  --crm-line-strong: var(--border-default);
  --crm-text: var(--text-primary);
  --crm-muted: var(--text-secondary);
  --crm-accent: var(--accent-primary);
  --crm-accent-hover: var(--accent-primary-hover);
  --crm-accent-soft: var(--accent-soft);
  --crm-gold: var(--accent-secondary);
  --crm-gold-soft: color-mix(in srgb, var(--accent-secondary) 12%, transparent);
  --crm-danger: var(--danger);
  --crm-success: var(--success);
  --crm-shadow: var(--shadow-dropdown);
  background: var(--page-bg) !important;
}

html[data-design-theme] body.crm-page .crm-sidebar {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 6%, transparent), transparent 34%),
    var(--sidebar-bg);
}

html[data-design-theme] body.crm-page .crm-brand > i,
html[data-design-theme] body.crm-page .crm-sidebar-nav a i,
html[data-design-theme] body.crm-page .crm-section-heading > i {
  color: var(--accent-secondary) !important;
}

html[data-design-theme] body.crm-page .crm-brand b,
html[data-design-theme] body.crm-page .crm-sidebar-nav a.active {
  border: 1px solid color-mix(in srgb, var(--accent-secondary) 32%, var(--border-default));
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--accent-secondary) 8%, transparent));
}

html[data-design-theme] body.crm-page .crm-titlebar {
  background: color-mix(in srgb, var(--topbar-bg) 94%, transparent) !important;
}

html[data-design-theme] body.crm-page .crm-panel,
html[data-design-theme] body.crm-page .crm-card,
html[data-design-theme] body.crm-page .crm-contact-panel,
html[data-design-theme] body.crm-page .crm-notification-popover,
html[data-design-theme] body.crm-page dialog {
  border-color: var(--border-default) !important;
  background: var(--surface-primary) !important;
  box-shadow: var(--shadow-card);
}

html[data-design-theme] body.crm-page .btn-primary {
  border-color: var(--accent-primary) !important;
  background: linear-gradient(145deg, var(--accent-primary-hover), var(--accent-primary)) !important;
  color: var(--accent-primary-text) !important;
}

html[data-design-theme] body.crm-page input,
html[data-design-theme] body.crm-page select,
html[data-design-theme] body.crm-page textarea {
  border-color: var(--input-border) !important;
  background: var(--input-bg) !important;
  color: var(--input-text) !important;
}

html[data-design-theme="green-retro"] body.crm-page .crm-table thead th {
  background: var(--retro-sheet-head) !important;
  color: #f0ebce !important;
}

html[data-design-theme="green-retro"] body.crm-page .crm-table tbody td {
  background: var(--retro-sheet-bg) !important;
  color: var(--retro-sheet-text) !important;
}

@media (max-width: 980px) {
  html[data-design-theme] body.project-page .schedule-engine-grid {
    grid-template-columns: 1fr;
  }
}

/*
 * The base design system switches the desktop sidebar to a bottom dock on
 * phones. Its desktop height is declared with !important, so the responsive
 * value must use the same priority or the dock expands to the full viewport.
 */
@media (max-width: 760px) {
  html[data-design-theme] .premium-sidebar {
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
  }
}

/*
 * Compact desktop navigation. Keep the Wordstat slot at effectively the same
 * content width while reducing only the surrounding navigation chrome.
 */
@media (min-width: 1241px) {
  html[data-design-theme] {
    --pa-sidebar-width: 222px;
  }

  html[data-design-theme] body.home-page,
  html[data-design-theme] body.project-page {
    padding-left: calc(var(--pa-sidebar-width) + 20px) !important;
  }

  html[data-design-theme] .premium-sidebar {
    inset: 12px auto 12px 12px !important;
    height: auto !important;
    padding: 14px 6px 10px !important;
    border: 1px solid var(--border-default) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-card) !important;
  }

  html[data-design-theme] .premium-sidebar-brand {
    padding: 0 8px 12px !important;
  }

  html[data-design-theme] .premium-sidebar-brand a {
    gap: 9px;
    font-size: 17px !important;
  }

  html[data-design-theme] .premium-sidebar-nav {
    gap: 1px !important;
    scrollbar-width: thin;
  }

  html[data-design-theme] .premium-sidebar-nav a,
  html[data-design-theme] .premium-sidebar-bottom a,
  html[data-design-theme] .premium-sidebar-bottom button {
    min-height: 32px !important;
    padding: 0 10px !important;
    gap: 9px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  html[data-design-theme] .premium-sidebar-nav a i,
  html[data-design-theme] .premium-sidebar-bottom a > i:first-child,
  html[data-design-theme] .premium-sidebar-bottom button > i:first-child {
    width: 16px;
    flex-basis: 16px;
    font-size: 14px;
  }

  html[data-design-theme] .premium-sidebar-bottom {
    gap: 2px !important;
    margin-top: 6px;
    padding-top: 6px !important;
  }
}

/*
 * Keep the complete project dynamics card inside a 100%-zoom laptop viewport.
 * The graph itself is not reduced; space comes from the passport and KPI chrome.
 */
@media (min-width: 1121px) and (max-height: 900px) {
  html[data-design-theme] body.project-page:not(.tech-audit-page) > .container {
    padding-top: 8px !important;
  }

  html[data-design-theme] body.project-page:not(.tech-audit-page) .project-passport-reference {
    min-height: 0 !important;
    margin-bottom: 8px !important;
    padding: 10px 14px !important;
    border-radius: 15px !important;
  }

  html[data-design-theme] body.project-page .project-passport-reference > section {
    min-height: 132px !important;
  }

  html[data-design-theme] body.project-page .passport-identity {
    grid-template-columns: 72px minmax(0, 1fr);
    padding-right: 12px;
    gap: 11px;
  }

  html[data-design-theme] body.project-page .project-avatar {
    width: 68px !important;
    min-width: 68px !important;
    height: 68px !important;
    border-radius: 14px !important;
    font-size: 24px !important;
  }

  html[data-design-theme] body.project-page .project-domain-link {
    margin: 5px 0 6px !important;
  }

  html[data-design-theme] body.project-page .passport-column,
  html[data-design-theme] body.project-page .project-passport-reference .project-status-side {
    padding-inline: 12px !important;
  }

  html[data-design-theme] body.project-page .passport-column > h3,
  html[data-design-theme] body.project-page .passport-status-head > h3 {
    margin-bottom: 2px !important;
  }

  html[data-design-theme] body.project-page .passport-row {
    min-height: 27px !important;
    padding-block: 1px !important;
  }

  html[data-design-theme] body.project-page .passport-status-head {
    min-height: 24px;
  }

  html[data-design-theme] body.project-page .project-update-row {
    margin: 3px 0 4px !important;
    gap: 1px;
  }

  html[data-design-theme] body.project-page .project-info-actions {
    gap: 4px !important;
  }

  html[data-design-theme] body.project-page .project-info-actions .btn {
    min-height: 29px !important;
  }

  html[data-design-theme] body.project-page .analytics-summary {
    margin-bottom: 8px !important;
    gap: 8px !important;
  }

  html[data-design-theme] body.project-page .analytics-summary .summary-item {
    min-height: 84px !important;
    padding: 10px 12px !important;
    border-radius: 13px !important;
  }

  html[data-design-theme] body.project-page .analytics-summary .summary-item b {
    font-size: clamp(19px, 1.4vw, 23px) !important;
  }
}

/* Green theme: keep frequency content centered inside its actual table column. */
html[data-design-theme="green-retro"] body.project-page .matrix-table td.matrix-frequency {
  padding: 7px 4px !important;
  overflow: hidden !important;
  vertical-align: middle !important;
  text-align: center !important;
}

html[data-design-theme="green-retro"] body.project-page .matrix-frequency .frequency-summary-cell {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  place-items: center;
  overflow: hidden;
  text-align: center;
}

html[data-design-theme="green-retro"] body.project-page .frequency-summary-cell strong,
html[data-design-theme="green-retro"] body.project-page .frequency-summary-cell small,
html[data-design-theme="green-retro"] body.project-page .frequency-summary-cell .frequency-history-link,
html[data-design-theme="green-retro"] body.project-page .frequency-summary-cell .frequency-delta-badge {
  max-width: 100%;
  margin-inline: auto !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-design-theme="green-retro"] body.project-page .frequency-summary-cell .frequency-delta-badge {
  display: inline-flex;
  padding-inline: 4px;
  justify-content: center;
  font-size: 10px;
}

/* Green theme: dynamics badges need stronger contrast than the workbook text. */
html[data-design-theme="green-retro"] body.project-page .matrix-delta-cell {
  vertical-align: middle !important;
  text-align: center !important;
}

html[data-design-theme="green-retro"] body.project-page .matrix-delta-cell .rank-change {
  min-width: 42px;
  margin-left: 0 !important;
  justify-content: center;
  font-weight: 850;
}

html[data-design-theme="green-retro"] body.project-page .matrix-delta-cell .change-up {
  border-color: #7fbd87 !important;
  background: #d7f2d9 !important;
  color: #145b2a !important;
}

html[data-design-theme="green-retro"] body.project-page .matrix-delta-cell .change-down {
  border-color: #d78f78 !important;
  background: #ffe0d4 !important;
  color: #7f201b !important;
}

html[data-design-theme="green-retro"] body.project-page .matrix-delta-cell .change-muted {
  border-color: #aebba5 !important;
  background: #e4eadc !important;
  color: #374334 !important;
}

/*
 * The first project viewport ends on the graph row. Its bottom gutter mirrors
 * the passport's top gutter, while the "Changes" card begins below the fold.
 */
@media (min-width: 1121px) {
  html[data-design-theme] body.project-page:not(.tech-audit-page) .premium-project-dashboard {
    --pa-first-view-card-height: max(310px, calc(100vh - 294.3px - 0.677vw));
  }

  html[data-design-theme] body.project-page:not(.tech-audit-page) .premium-project-chart-card,
  html[data-design-theme] body.project-page:not(.tech-audit-page) .premium-project-donut-card {
    height: var(--pa-first-view-card-height) !important;
    min-height: var(--pa-first-view-card-height) !important;
  }

  html[data-design-theme] body.project-page:not(.tech-audit-page) .premium-project-chart-card .premium-line-chart {
    height: calc(var(--pa-first-view-card-height) - 90px) !important;
  }

  html[data-design-theme] body.project-page:not(.tech-audit-page) .premium-project-donut-card .premium-donut-wrap {
    min-height: calc(var(--pa-first-view-card-height) - 90px) !important;
  }
}