/* Nexus-Vox portal — responsive breakpoints (tablet/phone). Loaded after
   style.css. Never touches assets/js/script.js's DOM hooks. */

@media (max-width: 1023px){
  .mobile-nav-toggle{ display:block; }
  .main-search-bar .mobile-menu-btn{ display:flex; align-items:center; }

  .sidebar{
    position:fixed; inset:0 auto 0 0; width:280px; max-width:82vw;
    transform:translateX(-100%); transition:transform 0.28s cubic-bezier(0.22,1,0.36,1);
    z-index:40; overflow-y:auto;
  }
  .sidebar.mobile-open{ transform:translateX(0); }

  .grid{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }

  .kanban-column{ min-width:180px; max-width:180px; }
  .kanban-board{ -webkit-overflow-scrolling:touch; }
}

@media (max-width: 767px){
  .main{ padding:18px 16px; }

  .main-search-bar{ padding:10px 16px; }
  .main-search-bar input{ max-width:none; }

  .grid{ grid-template-columns:1fr 1fr; gap:10px; }

  .topbar{ flex-direction:column; align-items:flex-start; gap:8px; }

  .drawer{ width:100%; max-width:100%; }

  .home-head{ flex-direction:row; align-items:flex-start; flex-wrap:wrap; }
  .todo{ grid-template-columns:44px 1fr; gap:4px 12px; }
  .todo-count{ font-size:20px; text-align:left; }
  .todo-action{ grid-column:2; justify-self:start; margin-top:6px; }
  .home-campaigns td:first-child{ display:block; text-align:left; padding-top:4px; }
  .home-campaigns td:first-child::before{ display:none; }
  .home-campaigns td.mix-cell{ display:block; text-align:left; }
  .home-campaigns td.mix-cell::before{ display:block; margin-bottom:8px; }
  .home-campaigns .month-cell{ text-align:right; }
  .home-campaigns .meter{ width:120px; margin-left:auto; }
  .preview-banner{ flex-direction:column; align-items:flex-start; padding:10px 16px; }

  .cb-row{ grid-template-columns:1fr; gap:3px; }
  .setup-steps{ flex-direction:column; }
  .setup-actions{ flex-wrap:wrap; }
  .ld-table tfoot{ display:block; }
  .ld-table .ld-foot td{ display:flex; justify-content:space-between; text-align:right; }
  .ld-table .ld-foot td.ld-foot-label{ text-align:left; }
  .ld-table td.ld-code, .ld-table td.ld-name{ text-align:left; }

  .fb-row-head{ flex-wrap:wrap; row-gap:2px; }
  .fb-row-toggle{ flex-basis:calc(100% - 60px); flex-direction:column; gap:2px; position:relative; padding-right:24px; }
  .fb-row-toggle .fb-chevron{ position:absolute; right:2px; top:9px; }
  .fb-row-label{ white-space:normal; }
  .fb-library > summary > .fb-hint{ display:none; }
  .fb-req{ margin-left:28px; }
  .fb-actions{ margin-left:auto; }
  .fb-row-body{ padding:4px 12px 14px; }
  .modal-overlay{ padding:0; }
  .modal-card{ max-width:100%; width:100%; height:100%; border-radius:0; overflow-y:auto; }

  .filters{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  .filter-btn{ flex-shrink:0; }

  /* Table -> stacked card pattern. Requires [data-label] on <td>,
     injected at runtime by ui-enhancements.js (Task 8) from each
     table's own <th> text — no script.js edit needed. */
  .table-scroll table, table{
    display:block;
  }
  .table-scroll thead, table thead{ display:none; }
  .table-scroll tbody, table tbody{ display:block; }
  .table-scroll tr, table tr{
    display:block; border:1px solid var(--border); border-radius:10px;
    margin-bottom:10px; padding:6px 12px; background:var(--card);
  }
  .table-scroll td, table td{
    display:flex; justify-content:space-between; align-items:center;
    gap:12px; border-bottom:1px solid var(--border); padding:8px 0;
    text-align:right;
  }
  .table-scroll td:last-child, table td:last-child{ border-bottom:none; }
  .table-scroll td[data-label]::before, table td[data-label]::before{
    content:attr(data-label); font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.5px; color:var(--slate);
    text-align:left;
  }
}