/* Nightshift Admin - mobile formatting fixes.
   Served by nginx from /var/www/admin-pwa/m.css and injected into every page via the
   sub_filter in the admin.nightshiftent.ca vhost. Lives here (not admin_app.py) so it is
   immune to the concurrent live-edit clobbering of the app file. Loads AFTER the app's
   own <style>, so equal-specificity rules win. Keep everything inside the media query. */

@media (max-width:720px){

  /* --- Stop the page from being wider than the phone (root cause of the right-edge
         clipping that hit the top bar, triage chips, filters and status pills). --- */
  html,body{overflow-x:hidden;max-width:100%;}
  .wrap{max-width:100%;overflow-x:hidden;}

  /* The board header is a bare <tr><th> (not inside <thead>), so the app's
     thead{display:none} never hid it; its 10 nowrap cells forced the overflow.
     In the mobile card layout the data-labels replace the header, so drop all th. */
  th{display:none!important;}
  table,tbody,tr,td{max-width:100%;}
  td{overflow-wrap:anywhere;}

  /* --- Top bar: let logo + nav fit and wrap instead of clipping off-screen. --- */
  .top{flex-wrap:wrap;gap:6px 12px;padding:10px 14px;}
  .brandlogo{height:15px;}
  .who{font-size:10px;gap:12px;flex-wrap:wrap;row-gap:4px;}

  /* --- Page header + New/Advance buttons: stack, don't overlap the subtitle. --- */
  .head{flex-wrap:wrap;align-items:flex-start;gap:10px;}
  .head h1{font-size:23px;}

  /* --- Triage strip + filters: keep inside the viewport, wrap cleanly. --- */
  .triage,.filters,.tstrip,.tchips{max-width:100%;}
  .filters{gap:10px;}
  .filters select{max-width:100%;}

  /* --- Status flags / pills: wrap long text instead of being cut off. --- */
  td[data-label="Status"]{align-items:flex-start;}
  td .flag,td .hotf,td .pill.s,td .pill.r{white-space:normal;text-align:right;line-height:1.35;}

  /* --- Marketing plan / long URLs in the editor: break instead of overflowing. --- */
  .plan{overflow-wrap:anywhere;word-break:break-word;}
}