/* ============================================================
   MEGA LIMITED — Responsive layer (every page: public site AND the
   staff / member / shareholder / partner / admin portals).
   Loaded after mega.css (and public-pro.css). Adapts layout to phones,
   tablets, laptops and large monitors without changing any content.
   Breakpoints:  <=420 small phone · <=640 phone · <=980 tablet ·
                 <=1200 small laptop · >=1600 large monitor · >=2200 ultra-wide
   ============================================================ */

/* ---------- global safety net ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html,body{overflow-x:clip;}               /* no sideways page scroll (clip keeps position:sticky working) */
img,video,canvas,iframe,embed,object{max-width:100%;}
img,video{height:auto;}
/* canvases: only capped in width — Chart.js and the PDF reader size them via inline styles */
h1,h2,h3,h4,h5,h6,p,li,.kpi .v,.req-row-msg{overflow-wrap:break-word;}
input,select,textarea,button{max-width:100%;}
.table-wrap{-webkit-overflow-scrolling:touch;}
/* Comfortable touch targets on touch devices */
@media(pointer:coarse){
  .pnav a,.ceo-sec-head,.ceo-sec-item,.pmenu-drop a{min-height:44px;}
  .pnav a,.ceo-sec-head,.ceo-sec-item,.pmenu-drop a{display:flex;align-items:center;}
  .form-control,.ceo-input,select{font-size:16px;}   /* stops iOS zooming into focused fields */
}

/* ---------- tables: scroll horizontally instead of breaking the page ---------- */
@media(max-width:980px){
  table.tbl,table.compare-tbl,table.routetbl,.pbody table,.ceo-modal-body table,.card-body table{
    display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  }
  table.tbl thead th,.pbody table th{white-space:nowrap;}
  table.tbl tbody td,.pbody table td{min-width:96px;}
  .table-wrap>table{display:table;} /* already inside a scroller */
}

/* ---------- dialogs ---------- */
@media(max-width:640px){
  .ceo-modal,.modal-backdrop,.pub-info-overlay{padding:10px;align-items:flex-end;}
  .ceo-modal-content,.modal-card,.pub-info-modal{
    max-width:100% !important;width:100% !important;max-height:92svh;border-radius:16px 16px 12px 12px;
  }
  .ceo-modal-header,.ceo-modal-body,.ceo-modal-footer{padding-left:16px;padding-right:16px;}
  .ceo-modal-footer{flex-wrap:wrap;}
  .ceo-modal-footer>*{flex:1 1 auto;justify-content:center;}
  .calc-grid .calc-btn{padding:12px 4px;}
}

/* ---------- inline grids/flex rows written by the portal scripts ---------- */
@media(max-width:900px){
  .pbody [style*="grid-template-columns:repeat(3"],.pbody [style*="grid-template-columns:repeat(4"],
  .pbody [style*="grid-template-columns:repeat(5"],.pbody [style*="grid-template-columns:repeat(6"],
  .pbody [style*="grid-template-columns:1fr 1fr 1fr"],
  .ceo-modal-body [style*="grid-template-columns:repeat(3"],.ceo-modal-body [style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:640px){
  .pbody [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]),
  .ceo-modal-body [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]),
  .site-public main [style*="grid-template-columns"],.site-public section [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr) !important;
  }
  .pbody [style*="display:flex"]:not([style*="nowrap"]),.ceo-modal-body [style*="display:flex"]:not([style*="nowrap"]),
  .site-public section [style*="display:flex"]:not([style*="nowrap"]){flex-wrap:wrap;}
  .pbody [style*="min-width:2"],.pbody [style*="min-width:3"],.pbody [style*="min-width:4"]{min-width:0 !important;}
  .role-select-wrap{flex-wrap:wrap;}
  .role-select-wrap select{min-width:0;width:100%;}
  .guar-photo{width:100%;}
}

/* ---------- portal shell: off-canvas sidebar on tablets & phones ---------- */
.pdrawer-btn,.pdrawer-backdrop,.pdrawer-close{display:none;}
@media(max-width:980px){
  .portal{display:block;height:auto;overflow:visible;}
  .pmain{height:auto;min-height:100svh;overflow:visible;}
  .psidebar{
    position:fixed;top:0;left:0;bottom:0;z-index:1300;width:min(300px,86vw);height:100svh;
    overflow:hidden;transform:translateX(-104%);transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s;
    padding:18px 12px;
  }
  .pnav,.ceo-navmode .pnav{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
  .pnav a{white-space:normal;}
  body.pnav-open{overflow:hidden;}
  body.pnav-open .psidebar{transform:none;box-shadow:24px 0 60px -20px rgba(0,0,0,.55);}
  .pdrawer-backdrop{
    display:block;position:fixed;inset:0;z-index:1250;background:rgba(6,20,26,.5);
    opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  }
  body.pnav-open .pdrawer-backdrop{opacity:1;visibility:visible;}
  .pdrawer-btn{
    display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;margin-right:12px;
    border-radius:11px;border:1px solid var(--border);background:var(--surface);color:var(--green);font-size:17px;cursor:pointer;
  }
  .pdrawer-btn:hover{border-color:var(--gold);}
  .pdrawer-close{
    position:absolute;top:14px;right:12px;z-index:3;width:36px;height:36px;border-radius:10px;border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.08);color:#fff;font-size:16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  }
  .ptop{position:sticky;top:0;z-index:60;padding:10px 16px;gap:10px;flex-wrap:nowrap;}
  .ptop>h2,.ptop>div:first-child h2{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:16px;min-width:0;flex:1 1 auto;}
  .ptop>h2 .accessflag{margin:0;font-size:11px;padding:4px 9px;}
  .pbody{padding:18px 16px;}
  .kpi-row,.kpi-row.c6{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .ceo-dash-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
  .ceo-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;}
  .ceo-tab{flex:0 0 auto;}
  .ceo-toolbar>*{flex:1 1 180px;}
  .chart-zone{height:220px;}
}
@media(max-width:560px){
  .pmenu-name{display:none;}
  .pmenu-btn{padding:4px;}
  .ptop>h2{font-size:15px;}
  .kpi{padding:14px;}
  .kpi .v{font-size:18px;}
  .pmenu-drop{position:fixed;left:10px;right:10px;top:62px;min-width:0;}
  .pager{flex-wrap:wrap;justify-content:center;}
}
@media(max-width:380px){
  .kpi-row,.kpi-row.c6{grid-template-columns:1fr 1fr;}
}

/* ---------- small laptops ---------- */
@media(min-width:981px) and (max-width:1200px){
  .psidebar{width:220px;}
  .kpi-row{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));}
  .pbody{padding:22px;}
}

/* ---------- large & ultra-wide monitors (portals) ---------- */
@media(min-width:1600px){
  .psidebar{width:264px;}
  .pbody{padding:30px 40px;}
  .chart-zone{height:300px;}
}
@media(min-width:2200px){
  .pbody{max-width:2000px;}
  .kpi .v{font-size:24px;}
  .chart-zone{height:340px;}
}

/* ---------- print ---------- */
@media print{
  .psidebar,.pdrawer-btn,.pdrawer-backdrop,#protoBar,nav.sitenav,.pp-progress,.pp-top{display:none !important;}
  .portal{display:block;height:auto;}
  .pmain{height:auto;overflow:visible;}
}