/*
  Formaspace Rep Portal — phone/tablet layout fixes.
  Loaded site-wide by fs-header-nav.php. Page templates set many styles inline
  (style="" attributes and <style> blocks printed in the body), so some rules
  below need !important to win; each is scoped to a small-screen media query.
*/

/* ---------- Header (logo + contact strip) ---------- */
@media (max-width: 991px){
  /* Template uses Bootstrap 4's d-none/d-lg-block but the theme ships Bootstrap 3,
     so the "desktop" phone/social strip was showing and wrapping under the logo. */
  .site-header .desktop-contacts{display:none !important;}
  .site-header .heading-row{justify-content:flex-start;}
  .site-header .logo_description{flex:1 1 auto;}
  .site-header .header-top-right{display:none;}
}
@media (max-width: 767px){
  .site-header{padding:10px 0;border-top-width:4px;}
  .site-header > .container{padding-left:16px;padding-right:16px;}
  .site-header .heading-row div{margin-top:0;}
  .site-header .custom-logo-link{display:block;line-height:0;}
  .site-header .custom-logo{width:auto;max-width:210px;height:auto;max-height:56px;}

  /* Decorative background art is fixed-position, which iOS ignores and
     paints behind tables/forms at odd offsets. */
  body.custom-background{background-image:none !important;}
}

/* ---------- Page shell ---------- */
@media (max-width: 767px){
  body{-webkit-text-size-adjust:100%;overflow-x:hidden;}

  /* Report templates (quotes / orders / commission / co-op) hard-code 30px side padding */
  [role="main"][style*="padding: 0 30px"]{padding:0 16px !important;}
  .main-container{padding-left:16px;padding-right:16px;}
  .page-area > .row{margin-left:0;margin-right:0;}
  .page-area > .row[style*="padding-left"]{padding-left:0 !important;}
  .page-area article[class*="col-"]{padding-left:0;padding-right:0;}

  h1.page-title,
  .page-area h1{font-size:24px;line-height:1.25;margin:18px 0 12px;word-wrap:break-word;}
  .page-area h2{font-size:21px;line-height:1.3;}
  .page-area h3{font-size:18px;line-height:1.3;}

  /* Stop iOS zooming into form fields (it zooms when font-size < 16px) */
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="search"], input[type="date"], input[type="password"], input[type="url"],
  select, textarea{font-size:16px !important;max-width:100%;}
}

/* ---------- Company filter ("Filter by rep company" / "View as company") ---------- */
@media (max-width: 767px){
  .fs-am-filter{flex-direction:column;align-items:stretch !important;gap:6px !important;}
  .fs-am-filter select{min-width:0 !important;width:100%;padding:10px 12px !important;}
  .fs-am-members form input[name="fs_search"]{min-width:0 !important;flex:1 1 100% !important;}
  .fs-am-members form select,
  .fs-am-members form button{flex:1 1 auto;}
}

/* ---------- Report tables (My Quotes / Orders / Commission / Co-op / Members) ---------- */
@media (max-width: 767px){
  /* Search + date filter were floated left/right and collided */
  #tableSearch{float:none !important;display:block;width:100% !important;max-width:none !important;
               margin:12px 0 8px !important;padding:10px 12px !important;box-sizing:border-box;}
  .site-main > div[style*="float: right"]{float:none !important;display:grid !important;
               grid-template-columns:1fr 1fr;gap:8px !important;margin:0 0 12px !important;}
  .site-main > div[style*="float: right"] input[type="date"]{width:100% !important;min-width:0;padding:8px !important;box-sizing:border-box;}
  .site-main > div[style*="float: right"] button{width:100%;padding:10px 12px !important;}
  #downloadCSV{float:none !important;margin:0 0 8px !important;padding:8px 0 !important;}
  .site-main::after{content:"";display:block;clear:both;}

  /* Only the inner wrapper scrolls; the outer one just holds it. */
  .u-wrapper.table-container{max-height:none !important;overflow:visible !important;border:0 !important;background:none !important;}
  .table-container{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    max-height:70vh !important;
    border:1px solid #ddd;
    margin-left:0;margin-right:0;
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat local,
      linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.15), rgba(0,0,0,0)) left center / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.15), rgba(0,0,0,0)) right center / 10px 100% no-repeat scroll;
  }
  .styled-table{font-size:13px !important;}
  .styled-table th,
  .styled-table td{padding:8px 10px !important;}
  .styled-table th{white-space:nowrap;}
  .styled-table td{min-width:90px;}
  .styled-table td:first-child,
  .styled-table th:first-child{min-width:0;}

  .fs-am-members table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* Co-op page reserves 200px under the table */
  .main-content-page[style*="margin-bottom: 200px"]{margin-bottom:40px !important;}
}

/* ---------- Contact My Manager ---------- */
@media (max-width: 767px){
  .manager-block{gap:20px !important;margin-bottom:36px !important;}
  .profile-info{max-width:none !important;}
  .manager-block img{max-width:160px;height:auto;}
}

/* ---------- My Territory ---------- */
@media (max-width: 767px){
  .state-list{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;gap:4px 12px !important;}
  .state-item{padding:6px 0 !important;}
  .state-item label{display:flex;align-items:center;gap:8px;font-weight:500;margin:0;}
  .save-button{display:block !important;width:100%;text-align:center;}
}

/* ---------- Sample order ---------- */
@media (max-width: 767px){
  #sample-order .container{padding-left:16px;padding-right:16px;}
  #sample-order h1{font-size:24px;}
  #sample-order h2{font-size:20px;}
  #sample-order h3{font-size:17px;}
  #sample-order .image-container{height:auto !important;min-height:42px;margin-bottom:6px;}
  #sample-order .image-label{font-size:14px !important;gap:8px;}
  #sample-order .image-checkbox{width:18px;height:18px;flex-shrink:0;margin:0 8px 0 0;}
  #sample-order br{display:none;}
  #sample-order .row + .row{margin-top:4px;}
  #sample-order input[type="submit"],
  #sample-order button[type="submit"]{width:100%;padding:12px 16px;}
}

/* ---------- Project registration ---------- */
@media (max-width: 767px){
  .prf-container{margin:16px auto !important;}
  .prf-field,
  .prf-field.half-width{flex:1 1 100% !important;min-width:0 !important;}
  .prf-container table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* ---------- Footer ---------- */
@media (max-width: 600px){
  .fs-portal-footer{padding:28px 0 20px !important;}
  .fs-portal-footer .fs-pf-inner{padding:0 16px !important;}
  .fs-portal-footer .fs-pf-grid{grid-template-columns:1fr !important;gap:20px !important;padding-bottom:24px !important;}
  .fs-portal-footer h2{font-size:20px !important;margin-bottom:4px !important;}
  .fs-portal-footer h3{font-size:15px !important;margin-bottom:6px !important;}
  .fs-portal-footer .fs-pf-bottom{flex-direction:column;align-items:flex-start !important;gap:12px !important;}
}