/* ============================================================
   People First - phone layout
   ------------------------------------------------------------
   The admin side was built for a desk. On a phone every table
   turned into a sideways scroll: you had to drag the table left
   to read the third column, and drag it back to read the name.
   Below 640px each row becomes a card instead, with the column
   heading printed beside its value, so nothing is ever hidden
   off the side of the screen.

   Tables too wide to make sense as cards - an attendance matrix
   with a column per day - keep the sideways scroll on purpose.
   mobile.js decides which is which by counting the columns.
   ============================================================ */

@media (max-width:640px){

  /* --- the tab strip ---------------------------------------------
     The HR app's tabs sit inside a navy sidebar, so on a phone they
     already read as one dark strip of chips. The recruitment app's
     tabs sit on the page, so the same markup came out as a pale card
     of wrapped text - the leftovers of a desktop layout. Both apps
     now get the same strip: one swipeable row of chips on a navy
     bar, the current tab in red. One product, one gesture. */
  .sidebar .nav,
  #staffView > .nav,
  #candView > .nav,
  .admin-content > .nav{
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
  }
  .sidebar .nav::-webkit-scrollbar,
  #staffView > .nav::-webkit-scrollbar,
  #candView > .nav::-webkit-scrollbar,
  .admin-content > .nav::-webkit-scrollbar{display:none}

  /* the recruitment tabs get the navy bar the HR ones inherit */
  #staffView > .nav,
  #candView > .nav,
  .admin-content > .nav{
    background:linear-gradient(168deg,#12004E 0%,#1D0074 52%,#2A0C9A 100%);
    border-radius:16px;
    padding:8px;
    gap:6px;
    margin-bottom:14px;
    box-shadow:0 10px 26px rgba(29,0,116,.22);
  }

  .sidebar .nav button,
  #staffView > .nav button,
  #candView > .nav button,
  .admin-content > .nav button{
    flex:0 0 auto;
    scroll-snap-align:start;
    white-space:nowrap;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    border:0;
    border-radius:999px;
    padding:0 15px;
    font-weight:700;
    font-size:13px;
    background:transparent;
    color:rgba(255,255,255,.80);
  }
  #staffView > .nav button.active,
  #candView > .nav button.active,
  .admin-content > .nav button.active{
    background:linear-gradient(135deg,#EA2227 0%,#FF4A4F 100%);
    color:#fff;
    box-shadow:0 5px 14px rgba(234,34,39,.34);
  }
  .sidebar .nav button.active{border-radius:999px;padding:0 15px}

  /* --- tables that read better as cards --- */
  table.pf-cards{
    display:block;
    overflow:visible !important;
    white-space:normal !important;
    border-collapse:separate;
    border-spacing:0;
  }
  table.pf-cards thead{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  }
  table.pf-cards tbody{display:block}
  table.pf-cards tbody tr{
    display:block;
    border:1px solid var(--line,#dfe3ea);
    border-radius:12px;
    padding:10px 12px;
    margin-bottom:10px;
    background:#fff;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
  }
  table.pf-cards tbody tr:last-child{margin-bottom:0}

  table.pf-cards tbody td{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    width:auto !important;
    padding:5px 0 !important;
    border:0 !important;
    border-bottom:1px solid rgba(16,24,40,.06) !important;
    font-size:13px;
    white-space:normal !important;
    text-align:right;
  }
  table.pf-cards tbody tr td:last-child{border-bottom:0 !important}

  /* the column heading, printed where the eye expects a label */
  table.pf-cards tbody td[data-col]::before{
    content:attr(data-col);
    flex:0 0 40%;
    text-align:left;
    font-size:11px;
    font-weight:700;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:#6b7280;
    padding-top:1px;
  }

  /* the first cell is the row's name - make it the card's title */
  table.pf-cards tbody tr td:first-child{
    display:block;
    text-align:left;
    font-size:15px;
    font-weight:700;
    padding-bottom:7px !important;
    margin-bottom:4px;
  }
  table.pf-cards tbody tr td:first-child::before{display:none}

  /* a cell holding only controls gets the full width, no label */
  table.pf-cards tbody td.pf-actions{
    display:flex;justify-content:flex-start;flex-wrap:wrap;gap:6px;
    padding-top:9px !important;text-align:left;
  }
  table.pf-cards tbody td.pf-actions::before{display:none}
  table.pf-cards tbody td.pf-actions .btn{margin:0}

  /* "no rows yet" spans the card on its own */
  table.pf-cards tbody td[colspan]{
    display:block;text-align:left;color:#6b7280;border-bottom:0 !important;
  }
  table.pf-cards tbody td[colspan]::before{display:none}

  /* a labelled cell whose value is a control: heading left, control right */
  table.pf-cards tbody td input,
  table.pf-cards tbody td select{max-width:58%;min-width:0;margin-left:auto}
  table.pf-cards tbody td input[type="checkbox"],
  table.pf-cards tbody td input[type="radio"]{width:20px;height:20px;min-height:0}
  table.pf-cards tbody tr td:first-child input,
  table.pf-cards tbody tr td:first-child select{max-width:100%;width:100%}

  /* --- tables that stay wide: make the scroll obvious --- */
  table.pf-wide{
    display:block;overflow-x:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  .pf-scroll-note{
    font-size:11px;color:#6b7280;margin:0 0 6px;
  }



  /* --- the number tiles ---
     Labels like "MATCHES OUR SOP (GULF)" run to two lines while their
     neighbour runs to one, which left the row of cards ragged. Each
     card is now the same height, the label sits on a fixed two-line
     base, and the icon and number keep a steady rhythm down the page. */
  #staffView .kpi-grid{grid-template-columns:repeat(2,1fr) !important;gap:10px !important}
  #staffView .kpi-card{
    display:grid !important;
    grid-template-columns:auto 1fr;
    align-items:center;
    column-gap:9px;row-gap:1px;
    min-height:92px;align-content:center;
    padding:12px !important;border-radius:16px !important;
  }
  #staffView .kpi-card .kpi-ic{
    grid-column:1;grid-row:1;
    width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  }
  #staffView .kpi-card .kpi-ic svg{width:16px;height:16px}
  #staffView .kpi-card .kpi-tx{grid-column:2;grid-row:1;min-width:0}
  #staffView .kpi-n{font-size:25px !important;line-height:1.05;margin:0}
  #staffView .kpi-l{
    font-size:9.5px !important;line-height:1.28;letter-spacing:.04em;
    display:block;margin-top:2px;
  }
  /* The HR dashboard's own tiles are left exactly as they are: Sayid
     checked that screen on his phone and it reads correctly already.
     Only the recruitment tiles, which did not, are restyled above. */

  /* section headings get the red rule the HR dashboard already uses,
     so the two apps read as one product */
  #staffView h2{
    font-size:19px !important;margin:2px 0 12px !important;
    padding-left:11px;border-left:4px solid #EA2227;line-height:1.25;
  }

  /* --- nothing may run off the side of the screen ---
     Two things pushed these pages sideways on a phone. A grid written as
     "1fr 1fr" keeps two columns at any width, and a grid or flex child
     will not shrink below its content unless it is told it may - so a
     <canvas>, which carries an intrinsic width of 300px, held each column
     open and the page ended up nearly twice the width of the screen. */
  .grid, .kpi-grid, .statcards, .row{min-width:0}
  .grid > *, .kpi-grid > *, .row > *{min-width:0}
  .grid[style*="1fr 1fr"],
  .grid[style*="360px"],
  .grid[style*="repeat(2"]{grid-template-columns:1fr !important}
  canvas{max-width:100% !important}
  .card canvas{width:100% !important}
  .card, .kpi-card, .ovcard{max-width:100%;overflow-wrap:anywhere}

  /* a long id, e-mail or file name should wrap, not widen the page */
  td, th, .who, .det{overflow-wrap:anywhere}

  /* backstop: if anything new ever overflows, the page still does not
     slide sideways under the reader's thumb */
  html, body{overflow-x:hidden;max-width:100%}

  /* --- touch targets --- */
  .btn{min-height:38px}
  .btn.sm{min-height:32px}
  input,select,textarea{min-height:38px}

  /* A message nobody can read is not a message. The toast was anchored to
     the right edge with no left bound, so on a phone a long line ran off
     the screen and the floating assistant button sat on top of the rest.
     It now spans the screen with a gutter, wraps, and stands clear of the
     button. */
  .toast{
    left:12px;right:12px;bottom:84px;max-width:none;width:auto;
    text-align:center;line-height:1.35;white-space:normal;overflow-wrap:anywhere;
    z-index:2500;
  }
}