/* Super WhatsApp console — base sheet.
 * Motion is keyframe-only (REQ-SW-026): the six captured keyframes below,
 * animated via the --sw-anim-* tokens. No `transition` properties anywhere;
 * hover/focus are instant attribute-driven swaps (REQ-SW-022).
 */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sw-font-sans);
  background: var(--sw-surface-page);
}
[hidden] { display: none !important; }
button { font-family: inherit; }
a { -webkit-tap-highlight-color: transparent; }

/* Captured keyframes (snapshot.html) */
@keyframes fadeUp  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn  { from { opacity:0; }                            to { opacity:1; } }
@keyframes spin    { to { transform:rotate(360deg); } }
@keyframes notifIn { from { opacity:0; transform:translateX(60px); } to { opacity:1; transform:translateX(0); } }
@keyframes scaleIn { from { opacity:0; transform:scale(0.95); }     to { opacity:1; transform:scale(1); } }
@keyframes pulse   { 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:0.5; transform:scale(0.85); } }

/* REQ-SW-026.A2: suppress all keyframe motion under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

/* REQ-SW-022.A3 / REQ-SW-027.A1: focus is always visible via the ring tokens. */
input.sw-input:focus, textarea.sw-input:focus {
  outline: none;
  border-color: var(--sw-brand-600) !important;
  box-shadow: var(--sw-ring-brand);
}
input.sw-input--danger:focus, textarea.sw-input--danger:focus {
  border-color: var(--sw-danger-600) !important;
  box-shadow: var(--sw-ring-danger);
}
:is(button, a, [role="menuitem"], [role="tab"], [role="checkbox"]):focus-visible {
  outline: none;
  box-shadow: var(--sw-ring-brand);
}

/* Mobile sidebar toggle — hidden on desktop (REQ-SW-030.A3, best-effort SHOULD). */
.sw-mobile-only { display: none !important; }

/* REQ-SW-030.A2 (SHOULD): tablet — login stacks hero above the card,
   dashboard grids reduce columns. Desktop stays pixel-parity untouched. */
@media (max-width: 900px) {
  [data-sw-tablet-stack] { flex-direction: column !important; height: auto !important; min-height: 100vh; overflow: auto !important; }
  [data-sw-tablet-stack] > div:first-child { flex: none !important; }
  [data-sw-grid="tiles"] { grid-template-columns: repeat(2, 1fr) !important; }
  [data-sw-grid="chart"] { grid-template-columns: 1fr !important; }
}

/* REQ-SW-030.A3 (SHOULD): mobile — sidebar collapses behind a toggle,
   tables reflow without horizontal page scroll. Swaps are instant. */
@media (max-width: 768px) {
  .sw-mobile-only { display: inline-flex !important; }
  [data-sw-sidebar] { position: fixed !important; inset: 0 auto 0 0; z-index: 90; width: 232px; transform: translateX(-100%); }
  #sw-shell.sw-sidebar-open [data-sw-sidebar] { transform: none; box-shadow: var(--sw-shadow-popover); }
  [data-sw-grid="cards"] { grid-template-columns: 1fr !important; }
  [data-keys-table] { display: block; overflow-x: auto; }
}