/* Mobile overrides follow the feature styles so they survive the cascade. */
@media (max-width: 900px) {
  .hub { min-height: 100dvh; }
  .content {
    --mobile-left: max(16px, env(safe-area-inset-left, 0px));
    --mobile-right: max(16px, env(safe-area-inset-right, 0px));
    padding: 0 var(--mobile-right) calc(32px + env(safe-area-inset-bottom, 0px)) var(--mobile-left);
  }
  .mobile-topbar {
    margin: 0 calc(-1 * var(--mobile-right)) 4px calc(-1 * var(--mobile-left));
    padding-left: var(--mobile-left);
    padding-right: var(--mobile-right);
  }
  .sidebar {
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    visibility: hidden;
    transition: transform .26s cubic-bezier(.22, 1, .36, 1), visibility .26s;
  }
  body.nav-open .sidebar { visibility: visible; }
  .sidebar-nav { overscroll-behavior: contain; }
  .sidebar :is(.nav-item, .app-switch-btn, .app-switch-opt, .logout-btn, .sidebar-close) { min-height: 44px; }
  .sidebar-close { min-width: 44px; flex-shrink: 0; }
  .content > .page-header::before { display: none; }
}

@media (max-width: 640px) {
  .page-header { gap: 12px; padding: 20px 0 16px; margin-bottom: 18px; }
  .page-header-text { min-width: 0; }
  #dashboard-tab :is(.dash-toolbar, .dash-toolbar-actions) { gap: 10px; }
  #dashboard-tab .dash-toolbar-actions { flex-wrap: wrap; }
  #dashboard-tab .ov-snapshot { white-space: normal; overflow-wrap: anywhere; }
  #dashboard-tab .kpi,
  #dashboard-tab :is(#dash-kpis, #dash-cac-kpis) .kpi,
  #dashboard-tab #dash-kpis .kpi-cluster-primary .kpi {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
    row-gap: 8px;
  }
  #dashboard-tab .kpi > :is(.kpi-value, .kpi-delta) { grid-column: 1; min-width: 0; }
  #dashboard-tab .kpi > .kpi-delta { padding-bottom: 0; }
  #dashboard-tab .kpi .kpi-label { margin-bottom: 4px; }
  #dashboard-tab .kpi .kpi-value { flex-wrap: wrap; overflow-wrap: anywhere; line-height: 1.15; }
  #dashboard-tab .kpi .kpi-sub { white-space: normal; overflow: visible; overflow-wrap: anywhere; margin-top: 4px; }
  #dashboard-tab .kpi.has-ring { padding-right: 64px; }
  #dashboard-tab .kpi .help-tip,
  #overview-money .mv-kpi .help-tip { opacity: 1; width: 24px; height: 24px; }
  #dashboard-tab .ov-more button,
  #dashboard-tab .subscriber-view-controls button { min-height: 44px; }
  #overview-money { min-width: 0; }
  #overview-money :is(.mv-card, .mv-hero-main, .mv-app-head > div, .mv-app-money > div) { min-width: 0; }
  #overview-money .mv-hero { padding: 20px 18px; gap: 20px; }
  #overview-money :is(.mv-hero-value, .mv-kpi-value, .mv-flow-head, .mv-result) { flex-wrap: wrap; gap: 8px; }
  #overview-money .mv-xl { font-size: clamp(36px, 11vw, 56px); overflow-wrap: anywhere; }
  #overview-money .mv-section { flex-wrap: wrap; white-space: normal; gap: 6px 10px; }
  #overview-money .mv-section small { flex-basis: 100%; overflow: visible; }
  #overview-money .mv-section::after { display: none; }
  #overview-money .mv-app-head { grid-template-columns: auto minmax(0, 1fr); }
  #overview-money .mv-app-head .mv-roi { grid-column: 2; justify-self: start; }
  #overview-money .mv-app-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  #overview-money .mv-app-money { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #overview-money :is(.mv-md, .mv-lg, .mv-kpi-num) { overflow-wrap: anywhere; }
  #overview-money .mv-app-foot > .mv-small:first-child { flex-wrap: wrap; gap: 6px; }
  #overview-money .mv-table-wrap { max-width: 100%; overscroll-behavior-x: contain; }
  #dashboard-tab .reliability-heading { flex-wrap: wrap; gap: 12px; }
  #dashboard-tab .reliability-total { text-align: left; }
  /* Feature-specific fonts otherwise override the shared input baseline. */
  #app-view :is(input:not([type=checkbox]):not([type=radio]), textarea, select) { font-size: 16px; }
}

@media (pointer: coarse) {
  #app-view :is(button, [role=button], .nav-item) { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
  #app-view button:active { opacity: .72; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* 06/11 (cards da Overview, pedido do dono): o anel ficava em cima do texto nas seções que recebem padding:20px
   de uma regra mais específica, o "comparação indisponível" vazava do card e o subtítulo era cortado com "…". */
#dashboard-tab.overview-v3 :is(#dash-kpis,#dash-cac-kpis,#dash-aso-kpis,#dash-value-kpis,#dash-active-kpis) .kpi.has-ring,
#dashboard-tab :is(#dash-kpis,#dash-cac-kpis,#dash-aso-kpis,#dash-value-kpis,#dash-active-kpis) .kpi.has-ring { padding-right: 66px; }
#dashboard-tab .kpi > .kpi-delta { min-width: 0; overflow: hidden; }
#dashboard-tab .kpi > .kpi-delta.is-na,
#dashboard-tab.overview-v3 .kpi > .kpi-delta.is-na { font-weight: 500; color: var(--muted); background: none; width: auto; min-width: 0; padding-inline: 0; }
#dashboard-tab :is(#dash-kpis,#dash-cac-kpis,#dash-aso-kpis,#dash-value-kpis,#dash-active-kpis) .kpi .kpi-sub { white-space: normal; overflow: visible; text-overflow: clip; }