/* ==========================================================================
   System Designer V2 — Responsividade, acessibilidade e preferências do SO
   Breakpoints iguais aos do protótipo: 1050px, 760px e 460px.
   ========================================================================== */

@media (max-width: 1050px) {
  .v2-kpis { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .v2-upgrade-banner { grid-template-columns: 1fr; }
  .v2-upgrade-copy { padding: 18px; }
  .v2-upgrade-offer { padding: 18px; }
  .v2-upgrade-recommendation { align-items: flex-start; flex-wrap: wrap; }
  .v2-upgrade-recommendation a { width: 100%; padding-left: 22px; }

  .v2-notification-modal-ai {
    max-height: calc(100dvh - 1rem) !important;
    border-radius: var(--r-lg) !important;
  }
  .v2-notification-markdown { font-size: 13px; line-height: 1.62; }
  .v2-notification-markdown table { min-width: 38rem; }

  /* No mobile a sidebar vira drawer: nunca rail. */
  .v2-sidebar { position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw); transform: translateX(-100%); }
  .v2-sidebar.is-mobile-open { transform: none; }
  .v2-sidebar[data-collapsed="true"] { width: min(280px, 86vw); }
  .v2-sidebar[data-collapsed="true"] .v2-brand-copy,
  .v2-sidebar[data-collapsed="true"] .v2-sidebar-search,
  .v2-sidebar[data-collapsed="true"] .v2-nav-label,
  .v2-sidebar[data-collapsed="true"] .v2-nav-item > span,
  .v2-sidebar[data-collapsed="true"] .v2-nav-item .v2-chevron,
  .v2-sidebar[data-collapsed="true"] .v2-user-meta { display: block; }
  .v2-sidebar[data-collapsed="true"] .v2-nav-sub { display: grid; }
  .v2-sidebar[data-collapsed="true"] .v2-nav-item,
  .v2-sidebar[data-collapsed="true"] .v2-user-chip { justify-content: flex-start; padding: 0 9px; }
  .v2-sidebar[data-collapsed="true"] .v2-sidebar-toggle { position: static; box-shadow: none; }
  .v2-sidebar[data-collapsed="true"] .v2-sidebar-toggle .v2-collapse-icon { display: block; }
  .v2-sidebar[data-collapsed="true"] .v2-sidebar-toggle .v2-expand-icon { display: none; }
  .v2-sidebar[data-collapsed="true"] .v2-sidebar-nav { padding: 4px 8px 12px; overflow-y: auto; }
  .v2-sidebar[data-collapsed="true"] .v2-nav-item { height: 34px; border-radius: var(--r-md); }
  .v2-sidebar[data-collapsed="true"] .v2-nav-label { height: auto; margin: 13px 10px 5px; color: var(--text-3); background: transparent; }
  .v2-sidebar[data-collapsed="true"] .v2-nav-label:first-child { display: block; }
  .v2-sidebar[data-collapsed="true"] .v2-nav-group.has-active > [data-nav-group]::after { display: none; }

  .v2-rail-tip, .v2-rail-flyout { display: none; }
  .v2-mobile-overlay {
    display: block; position: fixed; inset: 0; z-index: 35;
    background: rgba(0, 0, 0, .42);
    opacity: 0; pointer-events: none; transition: opacity 160ms;
  }
  .v2-mobile-overlay.is-open { opacity: 1; pointer-events: auto; }
  .v2-mobile-menu { display: inline-grid; }
  .v2-top-search { display: none; }
  .v2-topbar { padding-inline: 10px; }
  .v2-nav-hub-disclosure[open] > .v2-nav-hub-panel { position: fixed; top: 70px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 84px); overflow-y: auto; }
  .v2-nav-hub-grid { grid-template-columns: 1fr; gap: 14px; }
  .v2-nav-hub-favorite { display: none; }
  .v2-content { padding: 16px 12px 32px; }
  .v2-page-head { align-items: stretch; flex-direction: column; }
  .v2-page-head > div:last-child { display: flex; }
  .v2-page-head .v2-btn { flex: 1; }
  .v2-invoice-edit-actions { flex-wrap: wrap; }
  .v2-invoice-edit-actions > .v2-btn,
  .v2-invoice-edit-actions > .v2-invoice-edit-actions-menu { flex: 1 1 calc(50% - 4px); }
  .v2-grid-2, .v2-grid-3 { grid-template-columns: 1fr; }
  .v2-form-grid > .v2-field, .v2-form-grid > [class*="v2-col-"] { grid-column: span 12; }
  .v2-show-grid { grid-template-columns: 1fr; }
  .v2-toolbar .v2-search { width: 100%; }
  .v2-toolbar .v2-push { margin-left: 0; }
  .v2-notification-channel-grid { grid-template-columns: 1fr; }
  .v2-notification-setting-row { align-items: stretch; flex-direction: column; }
  .v2-notification-setting-actions { justify-content: flex-end; }
  .v2-notification-setting-actions .v2-icon-btn { width: 34px; height: 34px; }
  .v2-notification-log-table { display: none; }
  .v2-notification-log-cards { display: block; }
  .v2-notification-variable-group > span { width: 100%; }
  .v2-notification-menu { position: fixed; top: 58px; right: 12px; left: 12px; width: auto; }
  .v2-card-head > .v2-segmented { width: 100%; }
  .v2-segmented-btn { flex: 1; min-height: 36px; }
  .v2-table-footer { flex-wrap: wrap; }
  .v2-table-footer .v2-scroll-hint { display: none; }
  .v2-table-pagination { margin-left: auto; }
  .v2-crumbs span:first-child, .v2-top-sep { display: none; }
}

@media (max-width: 460px) {
  .v2-kpis { grid-template-columns: 1fr; }
  .v2-top-actions .v2-optional { display: none; }
  turbo-frame.v2-notification-item { grid-template-columns: 30px minmax(0, 1fr); }
  .v2-notification-item-actions { grid-column: 2; flex-direction: row; justify-content: flex-end; }
  .v2-notification-page-list turbo-frame.v2-notification-item { grid-template-columns: 34px minmax(0, 1fr); }
  .v2-formbar { align-items: stretch; flex-direction: column; }
  .v2-formbar .v2-btn { width: 100%; }
}

/* Vidro custa caro em telas pequenas e atrapalha quem pediu menos
   transparência: nesses casos as superfícies viram sólidas. */
@media (max-width: 760px), (prefers-reduced-transparency: reduce) {
  .v2-sidebar, .v2-topbar, .v2-card, .v2-menu, .v2-modal, .v2-drawer, .v2-toast,
  .v2-alert, .v2-input, .v2-select, .v2-textarea, .v2-btn {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .v2-sidebar, .v2-topbar, .v2-card, .v2-menu, .v2-modal, .v2-drawer, .v2-toast { background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  body.sysv2 *, body.sysv2 *::before, body.sysv2 *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .v2-sidebar, .v2-topbar, .v2-toast-stack, .v2-rail-tip, .v2-rail-flyout { display: none !important; }
  .v2-app { display: block; padding: 0; background: #fff; }
  .v2-content { overflow: visible; padding: 0; }
}