/* ====================================================================
   Responsive layer for the WHOLE portal (admin, staff, attendance,
   voting, library, inventory, timetable ...).
   Loaded by every header (theme/header.php, theme/timetable_header.php,
   theme/voting_header.php, theme/satt_header.php) and the login pages,
   together with javascript/responsive.js.

   DESKTOP / LAPTOP IS UNCHANGED: every rule below is inside a media
   query (tablet <= 900px, phone <= 600px). Nothing in a page's own code
   is changed; the layout is adapted on top of it.
   ==================================================================== */

/* ---------------- tablets and phones ---------------- */
@media (max-width: 900px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{min-width:0 !important;overflow-x:hidden}

  /* fixed-width layout tables (width="1000", style="width:900px" ...)
     follow the screen instead (responsive.js adds .rs-fluid) */
  table.rs-fluid{width:100% !important;max-width:100% !important}
  td.rs-fluid, th.rs-fluid{width:auto !important}
  .rs-maxw{max-width:100% !important;box-sizing:border-box}

  img{max-width:100%;height:auto}
  input, select, textarea, button{max-width:100%;box-sizing:border-box}
  input[type=text], input[type=password], input[type=email], input[type=number],
  input[type=date], input[type=tel], input[type=search], select, textarea{font-size:16px}  /* no auto-zoom on iPhone */

  /* wide data tables scroll sideways inside their own box (responsive.js
     wraps them in .rs-scroll) instead of widening the whole page */
  /* width:0 + min-width:100% = fills its box but never stretches it */
  .rs-scroll{display:block;width:0;min-width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 6px}
  .rs-scroll > table{margin:0}

  /* form tables (label | field rows) stack vertically (.rs-stack) */
  table.rs-stack, table.rs-stack > tbody, table.rs-stack > tbody > tr, table.rs-stack > tr{display:block;width:100% !important}
  table.rs-stack > tbody > tr > td, table.rs-stack > tr > td,
  table.rs-stack > tbody > tr > th, table.rs-stack > tr > th{display:block;width:100% !important;box-sizing:border-box;text-align:left !important;padding:3px 4px !important;height:auto !important}
  table.rs-stack input[type=text], table.rs-stack input[type=password], table.rs-stack input[type=email],
  table.rs-stack input[type=number], table.rs-stack input[type=date], table.rs-stack select, table.rs-stack textarea{width:100% !important}

  /* dashboard icon tiles (rows of "icon + link" cells) wrap 2-up */
  tr.rs-tiles{display:flex;flex-wrap:wrap}
  tr.rs-tiles > td{display:block;flex:1 1 50%;box-sizing:border-box;min-width:0}
  tr.rs-tiles td.rs-tileimg{width:64px !important;height:auto !important;padding:6px 4px}
  tr.rs-tiles td.rs-tileimg img{width:56px !important;height:56px !important}

  /* ---- portal header (theme/header.php) ---- */
  img[src*="logo_mail"], img[src*="founder"]{width:92px !important;height:auto !important}
  td[height="100"]{height:auto !important;padding:6px 8px !important}
  /* the long blue menu becomes a hamburger, top right of the header
     (responsive.js builds it). Until the script has run the menu is still
     usable as one row that swipes sideways. */
  td.menu{display:block;width:100vw;max-width:100vw;box-sizing:border-box;overflow-x:auto;-webkit-overflow-scrolling:touch}
  td.menu > table{width:max-content !important;max-width:none !important}
  td.menu td{white-space:nowrap;padding:0 9px}
  td.menu td[width="30"]{display:none}
  body.rs-has-burger td.menu{display:none;overflow:visible;background:none;height:auto !important;padding:0}
  body.rs-has-burger td.menu > table, body.rs-has-burger nav.sx-menubar{display:none}
  body.rs-has-burger.rs-nav-open td.menu{display:block}
  body.rs-has-burger td[height="100"]{padding-right:58px !important}
  body.rs-has-burger td[height="100"] td[align="right"]{padding-right:0 !important}
  body.rs-has-burger .sx-top{padding-right:58px}

  .rs-burger{display:block;position:absolute;top:10px;right:10px;z-index:1000;width:42px;height:42px;padding:0;margin:0;
    border:1px solid #2a9ecf;border-radius:5px;background:#38b6e8;cursor:pointer}
  .rs-burger span{display:block;width:22px;height:3px;margin:4px auto;background:#fff;border-radius:2px;transition:transform .15s,opacity .15s}
  body.rs-nav-open .rs-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.rs-nav-open .rs-burger span:nth-child(2){opacity:0}
  body.rs-nav-open .rs-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* the menu panel: part of the page, so it has no scrollbar of its own */
  .rs-nav{display:none;background:#109BD2;font-family:Verdana,Arial,Helvetica,sans-serif;text-align:left}
  body.rs-nav-open .rs-nav{display:block}
  .rs-nav ul{list-style:none;margin:0;padding:0}
  .rs-nav-top > li{border-top:1px solid rgba(255,255,255,.3)}
  .rs-nav-row{display:flex;align-items:stretch;min-height:44px}
  .rs-nav a.rs-nav-link{display:flex;flex:1 1 auto;align-items:center;min-height:44px;padding:0 14px;box-sizing:border-box;
    color:#fff !important;font-size:13px;font-weight:bold;text-decoration:none;background:none;height:auto}
  .rs-nav a.rs-nav-link.on{background:rgba(0,0,0,.18)}
  .rs-nav-sub a.rs-nav-link{text-transform:none;text-shadow:none}
  .rs-nav-toggle{flex:0 0 52px;min-height:44px;border:0;border-left:1px solid rgba(255,255,255,.3);background:none;color:#fff;
    font:bold 13px Verdana,Arial,Helvetica,sans-serif;cursor:pointer;position:relative;padding:0}
  .rs-nav-toggle:after{content:"";position:absolute;right:21px;top:50%;width:8px;height:8px;margin-top:-6px;
    border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);transition:transform .15s}
  li.open > .rs-nav-row > .rs-nav-toggle:after{transform:rotate(225deg);margin-top:-2px}
  .rs-nav-toggle.rs-nav-wide{flex:1 1 auto;border-left:0;text-align:left;padding:0 42px 0 14px}
  .rs-nav-sub{display:none;background:#0c86b6}
  li.open > .rs-nav-sub{display:block}
  .rs-nav-sub li{border-top:1px solid rgba(255,255,255,.18)}
  .rs-nav-sub a.rs-nav-link, .rs-nav-sub .rs-nav-wide{padding-left:26px;font-weight:normal}
  .rs-nav-sub .rs-nav-sub{background:#0a7199}
  .rs-nav-sub .rs-nav-sub a.rs-nav-link{padding-left:40px}
  /* "Dashboard  Welcome, Admin  My Account  Logout" row wraps */
  td[height="55"] > table > tbody > tr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
  td[height="55"] > table > tbody > tr > td{display:block}
  td[height="55"] table[width="50%"], td[height="55"] table[width="80%"]{width:auto !important}
  td[height="55"] td{font-size:12px}
  td[bgcolor="#eaeaea"]{font-size:11px;padding:6px}

  /* tab rows / tool bars that already scroll sideways: keep them inside
     the screen (a table cell would otherwise stretch to fit them) */
  .sx-tabs, .sx-menubar, .tt-tabs, .inv-tabs, .lib-tabs{width:0;min-width:100%;max-width:100%;box-sizing:border-box}
  /* hover drop-down menus (mm_menu) never wider than the screen */
  div[id^="menuItem"], div[id^="mm_menu"]{max-width:100vw}
}

/* ---------------- phones ---------------- */
@media (max-width: 600px){
  /* classic admin pages only (body.rs-legacy = page has the blue menu);
     the mobile-first attendance / staff pages keep their own sizes */
  body.rs-legacy, body.rs-legacy td, body.rs-legacy th{font-size:13px}
  body.rs-legacy .heading, body.rs-legacy .heading1{font-size:15px !important}
  tr.rs-tiles > td{flex:1 1 100%}
  tr.rs-tiles a.icon_list{font-size:15px}
  /* centred narrow boxes (width="70%") use the full width */
  table.rs-wide{width:100% !important}
  td, th{word-break:normal;overflow-wrap:break-word}
  .rs-scroll th{white-space:nowrap}
  input[type=submit], input[type=button], button, .btn{min-height:36px}
}

/* print: never apply the phone layout */
@media print{
  .rs-scroll{overflow:visible !important}
  .rs-burger, .rs-nav{display:none !important}
}
/* above 900px the hamburger does not exist on screen */
@media (min-width: 901px){
  .rs-burger, .rs-nav{display:none !important}
}