/* Approved screen surfaces. Colour overrides only: layout, tracks and outcomes
   remain owned by each component; dark core/orbit graphics are not targeted. */
@media screen {
  /* Shared filter controls and their searchable option panels. */
  html:root body.prima-ui:not(#archiveReportPreview) :is([data-prima-filters],.essential-filters)
    :is(input:not([type=checkbox],[type=radio],[type=hidden],[type=range]),select,button.prima-picker-trigger):not(.prima-picker-native,.status-select),
  html:root body.prima-ui button.prima-picker-trigger,
  html:root body.prima-ui .prima-picker-panel,
  html:root body.prima-ui button.prima-picker-option,
  html:root body.prima-ui :is(#homeSalesMonth,#homeChecksMonth,#eveningCompanyDate,#weekSelect,.registry-status-filter select) {
    background:var(--prima-bg); color:var(--prima-ink); border-color:var(--prima-line);
    color-scheme:light;
  }
  html:root body.prima-ui button.prima-picker-option:is([aria-selected="true"],.is-highlighted,:hover) {
    background:var(--prima-bg); color:var(--prima-ink);
  }
  html:root body.prima-ui button.prima-picker-option[aria-selected="true"] {
    box-shadow:inset 3px 0 var(--prima-orange);
  }

  /* Vendite has a separate compact filter panel with two-ID specificity. */
  html:root body#salesPage.prima-ui #salesFilterPanel,
  html:root body#salesPage.prima-ui #salesFilterPanel :is(input,select),
  html:root body#salesPage.prima-ui #salesToolbar :is(.sales-filter-toggle,.sales-filter-done),
  html:root body#salesPage.prima-ui #salesToolbar :is(.sales-filter-toggle,.sales-filter-done):hover:not(:disabled) {
    background:var(--prima-bg); color:var(--prima-ink); border-color:var(--prima-line);
  }
  html:root body#salesPage.prima-ui #salesFilterPanel option {
    background:var(--prima-bg); color:var(--prima-ink);
  }

  /* Check Fissi's three overview cards are not generic .card widgets. */
  html:root body.prima-ui :is(.hero-main,.hero-status,.hero-side,.hero-status-row) {
    background:var(--prima-bg); color:var(--prima-ink); border-color:var(--prima-line);
  }
  html:root body.prima-ui .hero-pie::after {
    background:var(--prima-bg); border-color:var(--prima-line);
  }
  html:root body.prima-ui :is(.hero-main h1,.hero-pie-total,.hero-side-value,.hero-status-name,.hero-status-row strong) {
    color:var(--prima-ink);
  }
  html:root body.prima-ui .hero-month-select {
    background:var(--prima-bg); color:var(--prima-ink); border-color:var(--prima-line);
  }
  /* These colours describe practice outcomes, not the interface brand. */
  html:root body.prima-ui .hero-status-dot.attivato {background:#0AA174;}
  html:root body.prima-ui .hero-status-dot.in-corso {background:#FF6A00;}
  html:root body.prima-ui .hero-status-dot.reinserito {background:#285BA6;}
  html:root body.prima-ui .hero-status-dot.ask {background:#17899E;}
  html:root body.prima-ui .hero-status-dot.ko {background:#CC3B2F;}

  /* Panoramica: preserve #pcoSystem and its animated dark scene. */
  html:root body.prima-ui #directionDashboardView.dd-overview-view #ddOverview
    :is(#ddTrendPanel,#ddMonthWidget,#ddSmartphonesPanel,#ddBreakdownPanel),
  html:root body.prima-ui #directionDashboardView.dd-overview-view #ddKpis :is(.dd-kpi,.dd-kpi.dd-hero),
  html:root body.prima-ui #directionDashboardView.dd-overview-view .dd-desktop-track,
  html:root body.prima-ui #directionDashboardView.dd-overview-view .dd-desktop-track:hover,
  html:root body.prima-ui #directionDashboardView.dd-overview-view .dd-desktop-tooltip,
  html:root body.prima-ui #primaPanoramaCore .panel:not(#pcoSystem),
  html:root body.prima-ui :is(.dd-overview-dialog,.dd-overview-dialog-head) {
    background:var(--prima-bg); color:var(--prima-ink); border-color:var(--prima-line);
  }
  html:root body.prima-ui #directionDashboardView.dd-overview-view #ddKpis :is(.dd-kpi,.dd-kpi.dd-hero)>:is(span,strong,small),
  html:root body.prima-ui #directionDashboardView.dd-overview-view .dd-desktop-track :is(b,strong),
  html:root body.prima-ui #primaPanoramaCore .panel:not(#pcoSystem) h2 {
    color:var(--prima-ink);
  }
  html:root body.prima-ui #directionDashboardView.dd-overview-view #ddSmartphoneWidget .dd-phone-ring>div,
  html:root body.prima-ui #primaPanoramaCore .phone-ring::before {
    background:var(--prima-bg);
  }

  /* Staff Home uses both mobile and compact desktop component skins. */
  html:root body.prima-ui #homeView.staff-home-active #staffHome,
  html:root.staff-home-total-desktop body.prima-ui:not(#archiveReportPreview) #homeView.staff-home-active #staffHome {
    --op-purple:var(--prima-ink); --op-ink:var(--prima-ink);
    --op-muted:var(--prima-muted); --op-line:var(--prima-line);
  }
  html:root body.prima-ui #homeView.staff-home-active #staffHome :is(.hp-hero,.hp-performance,.hp-hero-checks,.hp-daily,.hp-panel,.hp-operational-welcome,.hp-activity-modal,.hp-daily-breakdown,.hp-daily-details,.hp-kpis button),
  html:root.staff-home-total-desktop body.prima-ui:not(#archiveReportPreview) #homeView.staff-home-active #staffHome :is(.hp-performance,.hp-hero-checks,.hp-daily,.hp-panel,.hp-operational-welcome,.hp-activity-modal,.hp-activity-modal .hp-daily-details,.hp-activity-modal .hp-daily-breakdown,.hp-kpis button),
  html:root.staff-home-total-desktop body.prima-ui:not(#archiveReportPreview) #homeView.staff-home-active #staffHome .hp-kpis button:hover {
    background:var(--prima-bg); color:var(--prima-ink); border-color:var(--prima-line);
  }
  html:root body.prima-ui #homeView.staff-home-active #staffHome :is(h1,h2,h3),
  html:root.staff-home-total-desktop body.prima-ui:not(#archiveReportPreview) #homeView.staff-home-active #staffHome :is(h1,h2,h3) {
    color:var(--prima-ink);
  }
  html:root body.prima-ui #homeView.staff-home-active #staffHome .hp-operational-welcome,
  html:root.staff-home-total-desktop body.prima-ui:not(#archiveReportPreview) #homeView.staff-home-active #staffHome .hp-operational-welcome {
    border-left-color:var(--prima-orange);
  }
  html:root body.prima-ui #homeView.staff-home-active #staffHome :is(.hp-performance-picker select,.hp-month-picker input),
  html:root.staff-home-total-desktop body.prima-ui:not(#archiveReportPreview) #homeView.staff-home-active #staffHome :is(.hp-performance-picker select,.hp-month-picker input) {
    background:var(--prima-bg); color:var(--prima-ink); border-color:var(--prima-line);
  }
  html:root body.prima-ui #homeView.staff-home-active #staffHome .hp-daily-categories button,
  html:root.staff-home-total-desktop body.prima-ui:not(#archiveReportPreview) #homeView.staff-home-active #staffHome .hp-daily-categories button {
    background:var(--prima-bg); color:var(--prima-ink);
  }

  /* Race forms and ordinary KPI cards; milestone and status fills are retained. */
  html:root body.prima-ui #agencyRaceView #arForm,
  html:root body.prima-ui #agencyRaceView #arKpis article,
  html:root body.prima-ui #directionDashboardView.dd-mnp-view #ddFilters,
  html:root body.prima-ui #directionDashboardView.dd-mnp-view #ddMnpKpis .mp-summary-card,
  html:root body.prima-ui #directionDashboardView.dd-network-view #ddFilters,
  html:root body.prima-ui #directionDashboardView.dd-network-view .dd-network-summary>article,
  html:root body.prima-ui #directionDashboardView.dd-network-view .dd-network-dialog,
  html:root body.prima-ui #directionDashboardView.dd-network-view .dd-network-dialog>.dd-dialog-top,
  html:root body.prima-ui :is(.ar-detail-dialog,.ar-detail-dialog>header) {
    background:var(--prima-bg); color:var(--prima-ink); border-color:var(--prima-line);
  }
  html:root body.prima-ui #agencyRaceView #arWidgets>.rh-frame {
    background:var(--prima-bg); color:var(--prima-ink);
  }
  html:root body.prima-ui #agencyRaceView #arForm>label :is(input,select,.prima-picker-trigger),
  html:root body.prima-ui #directionDashboardView.dd-mnp-view #ddFilters>label :is(input,select,.prima-picker-trigger),
  html:root body.prima-ui #directionDashboardView.dd-network-view #ddFilters>label :is(input,select,.prima-picker-trigger),
  html:root body.prima-ui #homeChecksWidget :is(#homeChecksMonth,.prima-picker-trigger) {
    background:var(--prima-bg); color:var(--prima-ink); border-color:var(--prima-line);
  }
  html:root body.prima-ui #homeChecksWidget {
    background:var(--prima-bg); color:var(--prima-ink); border-color:var(--prima-line);
  }

  /* The personal hero declares its own tokens, so override them locally as
     well as on its parent. Production track colours remain separate. */
  html:root body.prima-ui #homeView.staff-home-active #staffHome .hp-hero,
  html:root.staff-home-total-desktop body.prima-ui:not(#archiveReportPreview) #homeView.staff-home-active #staffHome .hp-hero {
    --op-purple:var(--prima-navy); --op-ink:var(--prima-navy);
    --op-muted:var(--prima-muted); --op-line:var(--prima-line);
    --op-orange:var(--prima-orange);
  }
  html:root body.prima-ui #homeView.staff-home-active #staffHome :is(.hp-date,.hp-intro,.hp-store,.hp-performance-detail p,.hp-kpis small,.hp-very-details,.hp-performance-picker),
  html:root.staff-home-total-desktop body.prima-ui:not(#archiveReportPreview) #homeView.staff-home-active #staffHome :is(.hp-date,.hp-intro,.hp-store,.hp-performance-detail p,.hp-kpis small,.hp-very-details,.hp-performance-picker) {
    color:var(--prima-muted);
  }
  html:root body.prima-ui #homeView.staff-home-active #staffHome :is(.hp-kpis strong,.hp-kpis span,.hp-daily-total strong,.hp-daily-categories button span,.hp-daily-categories button strong),
  html:root.staff-home-total-desktop body.prima-ui:not(#archiveReportPreview) #homeView.staff-home-active #staffHome :is(.hp-kpis strong,.hp-kpis span,.hp-daily-total strong,.hp-daily-categories button span,.hp-daily-categories button strong) {
    color:var(--prima-navy);
  }
  html:root body.prima-ui #homeView.staff-home-active #staffHome .hp-hero button.hp-radar-axis {
    color:var(--prima-muted)!important;
  }
  html:root body.prima-ui #homeView.staff-home-active #staffHome .hp-hero button.hp-radar-axis strong,
  html:root body.prima-ui #homeView.staff-home-active #staffHome .hp-hero button.hp-radar-axis[aria-pressed=true] strong {
    color:var(--prima-navy);
  }
}

/* Mobile fullscreen owns these higher-specificity canvases. Keep its layout
   and safe-area insets while matching the approved main surface. */
@media screen and (max-width:1100px) {
  html:root body.prima-ui:not(#archiveReportPreview)>.app>.view,
  html.workspace-document body,
  html.workspace-document body>main,
  html:root body.prima-ui:not(#archiveReportPreview).essential-page,
  html:root body.prima-ui:not(#archiveReportPreview)>main.essential-page {
    background:var(--prima-bg);
  }
}