/* ============================================================
   RESPONSIVE — tablet & mobile adaptations
   ============================================================ */

@media (max-width: 900px) {
  .dashboard { grid-template-columns: 1fr; }
  .dashboard .span-2 { grid-column: span 1; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

  .menu-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Toolbar & bars scroll horizontally instead of wrapping */
  .bb-toolbar { overflow-x: auto; }
  .bb-tbtn { flex-shrink: 0; }
  .bb-clock { display: none; }

  .bb-relbar { font-size: var(--fs-xs); padding: 0 6px; }
  .bb-rel-left { gap: 5px; overflow-x: auto; }
  .bb-rel-link { font-size: var(--fs-xs); }
  .bb-msg span:not(.bb-msg-ico) { display: none; }

  .bb-sec-desc { display: none; }
}

@media (max-width: 600px) {
  :root { --fs-base: 12px; }

  body { overflow: auto; }
  .app-container { height: auto; min-height: 100vh; }
  .main-content { overflow: visible; }

  .skill-row { grid-template-columns: 100px 1fr 34px; }
  .kv-key { min-width: 88px; }

  .card-grid { grid-template-columns: 1fr; }
  .pdf-frame { height: 50vh; }

  .menu-row { grid-template-columns: 22px 60px 1fr; }
  .func-menu { padding: 40px 8px 8px; }
}

/* Touch: bigger tap targets */
@media (hover: none) {
  .bb-tbtn, .btn { min-height: 28px; }
}