/* NexusPoint PWA + responsive polish */

/* Apple / iOS PWA */
html { -webkit-tap-highlight-color: rgba(255,209,0,.3); }
@supports (-webkit-touch-callout: none) { body { overscroll-behavior-y: none; } }

/* ── Mobile / tablet adjustments ── */
@media (max-width: 900px) {
  /* Sidebar collapses to top drawer */
  .side, nav.sidebar { width: 100% !important; position: sticky; top: 0; z-index: 50; overflow-x: auto; display: flex; gap: 4px; padding: 6px; background: var(--bg1); border-bottom: 1px solid var(--br); }
  .side > *, nav.sidebar > * { flex: 0 0 auto; }

  /* Main content full width */
  main, .main { width: 100% !important; padding: 10px !important; }

  /* Grids collapse */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="gridTemplateColumns"]   { grid-template-columns: 1fr !important; }

  /* Tables become horizontally scrollable */
  table { font-size: .72rem; }
  .table-wrap, [style*="overflowX"] { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Chart canvases fit narrow */
  canvas { max-width: 100% !important; height: auto !important; }

  /* Cards and panels tighter */
  .card, .panel { padding: 12px !important; }

  /* Buttons bigger tap targets */
  button { min-height: 36px; }
}

@media (max-width: 560px) {
  body { font-size: 14px; }
  h1, h2 { font-size: 1.2rem !important; }
  h3 { font-size: 1rem !important; }
  /* Hide chrome elements that don't fit */
  .hide-mobile { display: none !important; }
}

/* Dark mode scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f1216; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Print-friendly advisories */
@media print {
  nav, .side, .sidebar, .head-bar, button { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
}

/* Focus rings (accessibility) */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}

/* Skip to main content (a11y) */
.skip-link { position: absolute; top: -40px; left: 0; background: var(--ac); color: #000; padding: 8px 16px; z-index: 9999; }
.skip-link:focus { top: 0; }