/*
 * Redesign — Etapa 3: Cards.
 *
 * Escopado a body[data-theme-preset="dark"] (preset claro intocado) E a
 * @media (min-width: 901px) — o mobile tem seu proprio override de
 * .card/.metric-card dentro de @media (max-width:900px) em index.php,
 * que fica 100% intocado por este arquivo (regra explicita do cliente:
 * nao alterar o comportamento responsivo atual). 901px e' o breakpoint
 * "oficial" ja usado pelo grid principal do app-layout.css.
 *
 * Mesmo grupo de seletores que ja existe em app-layout.css:462-467
 * (.card:not(.app-page), .metric-card, .os-page-form-panel,
 * .dash-completo-panel/tiles/tile) - so troca as cores/radius/sombra
 * pelos tokens --ds-*, sem inventar selector novo.
 */

@media (min-width: 901px) {
  body[data-theme-preset="dark"] .card:not(.app-page),
  body[data-theme-preset="dark"] .metric-card,
  body[data-theme-preset="dark"] .os-page-form-panel,
  body[data-theme-preset="dark"] .dash-completo-panel,
  body[data-theme-preset="dark"] .dash-completo-tiles,
  body[data-theme-preset="dark"] .dash-completo-tile {
    background: var(--ds-card) !important;
    border-color: var(--ds-border) !important;
    border-radius: var(--ds-radius-xl) !important;
    box-shadow: none !important;
  }

  body[data-theme-preset="dark"] .card:not(.app-page):hover,
  body[data-theme-preset="dark"] .metric-card:hover {
    background: color-mix(in srgb, var(--ds-card) 88%, white) !important;
  }
}