/* ══════════════════════════════════════════════════════════════════
   Workbase Responsive — mobile & tablet support
   Loaded on every page after the page's own <style>
   ══════════════════════════════════════════════════════════════════ */

/* ───────── TABLET (≤1024px) ───────── */
@media (max-width: 1024px) {
  .nav-tabs { gap: 0; }
  .ntab { padding: 7px 11px; font-size: 12px; }
  .spill { width: 150px !important; }

  /* Grids that are 2-col become 1-col */
  .g2, .g3 { grid-template-columns: 1fr !important; }

  /* Member profile side panel narrower */
  #member-profile-panel { width: 400px !important; }
}

/* ───────── MOBILE (≤768px) ───────── */
@media (max-width: 768px) {
  /* Nav: hide the tab labels' text, show icons only OR collapse to hamburger */
  .topnav {
    padding: 0 14px !important;
    gap: 6px !important;
    flex-wrap: nowrap;
  }
  .brand { font-size: 17px !important; margin-right: 8px !important; }
  .brand small { display: none; }

  /* Hide the full tab bar; show hamburger instead */
  .nav-tabs {
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 8px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    display: none;
    z-index: 99;
    gap: 2px;
  }
  .nav-tabs.mobile-open { display: flex; }
  .ntab { padding: 12px 16px; font-size: 14px; border-radius: 10px; width: 100%; }

  /* Hamburger button (injected by JS) */
  .mobile-hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--cream-deep);
    border: 1px solid var(--border);
    cursor: pointer;
    flex-shrink: 0;
  }

  /* Search: hide on mobile to save space */
  .spill { display: none !important; }

  /* Compact the right side */
  .nav-r { gap: 6px !important; }
  .btn-rose-nav, .nav-r > button.btn { padding: 7px 10px !important; font-size: 12px !important; }
  .upill-name { display: none; }
  .upill { padding: 5px !important; }

  /* Page padding tighter */
  #page, #page-body, #dash-body, .pad, .pcontent {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* All multi-col grids stack */
  .g2, .g3,
  [style*="grid-template-columns:280px"],
  [style*="grid-template-columns: 280px"],
  [style*="grid-template-columns:300px"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Cards full width */
  .card, .mcard, .pcard, .tcard { width: 100% !important; }

  /* Team cards: single column */
  .team-grid, [style*="grid-template-columns:repeat(auto-fill"] {
    grid-template-columns: 1fr !important;
  }

  /* Member profile panel = full screen */
  #member-profile-panel { width: 100vw !important; }

  /* Modals fit screen */
  .modal, .moverlay .modal { max-width: 94vw !important; padding: 18px !important; }

  /* Hero sections */
  .dhero { margin: 16px !important; padding: 18px !important; }

  /* Tables scroll horizontally */
  table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Kanban boards scroll */
  .kboard { overflow-x: auto; }

  /* Headings smaller */
  h1, .page-title { font-size: 24px !important; }

  /* Week calendar: allow horizontal scroll */
  #prof-cal-content > div > div:last-child { overflow-x: auto; }
}

/* ───────── SMALL MOBILE (≤420px) ───────── */
@media (max-width: 420px) {
  .brand { font-size: 15px !important; }
  #page, #page-body, #dash-body { padding-left: 10px !important; padding-right: 10px !important; }
  .cb, .mcb { padding: 16px !important; }
}