/* CIFACI Mobile Full-Fit v2 — 2026-10-07
   Additive responsive layer. Goal: no horizontal page scrolling and no pinch-zoom required.
*/
*,*::before,*::after{box-sizing:border-box}
html{width:100%;max-width:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
body{width:100%;max-width:100%;margin:0;overflow-x:hidden!important;overscroll-behavior-x:none}
img,svg,video,canvas,iframe,object,embed{max-width:100%!important;height:auto}
pre,code,kbd,samp{max-width:100%;white-space:pre-wrap!important;overflow-wrap:anywhere;word-break:break-word}
p,li,dd,dt,span,a,strong,b,small,label,h1,h2,h3,h4,h5,h6{overflow-wrap:anywhere}
button,a,input,select,textarea{touch-action:manipulation}
input,select,textarea,button{max-width:100%}
.container,.dash-shell,.dash-main,.content,.section,.page-hero,.hero,.auth-wrap,.auth-panel,.auth-box,.modal-card,.mail-center-shell,.mail-message-page{max-width:100%}
.flex,.row,[class*="flex"],.dash-top,.admin-top,.mail-card-head,.mail-actions,.admin-actions,.top-actions{min-width:0}
.grid-2,.grid-3,.grid-4,.form-grid,.v4-form-grid,.admin-grid,.mail-two,.mail-status-grid{min-width:0}

/* Never allow wide child elements to force the document canvas. */
main,section,article,aside,header,footer,nav,form,fieldset,.card,.callout,.panel,.stat,.ops-card,.v4-case-card,.v4-intent-group,.table-wrap,.v4-table-wrap{min-width:0;max-width:100%}

@media(max-width:980px){
  .container{width:calc(100% - 28px)!important;max-width:1180px!important;margin-left:auto!important;margin-right:auto!important}
  .nav .container{min-height:70px;position:relative}
  .logo{height:50px!important;max-width:180px!important;object-fit:contain}
  .hamb{display:grid!important;place-items:center;width:46px;height:46px;border-radius:13px!important;background:var(--bg)!important;border:1px solid var(--line)!important;font-size:23px!important;flex:0 0 auto}
  .menu{top:100%!important;left:0!important;right:0!important;width:100%!important;max-width:100%!important;max-height:calc(100dvh - 70px);overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;padding:10px 14px 20px!important;gap:2px!important;border-top:1px solid var(--line);box-shadow:0 20px 45px rgba(0,45,52,.18);z-index:100}
  .menu.open{display:flex!important}
  .menu>a{width:100%;min-height:46px;padding:11px 12px;border-radius:10px;display:flex;align-items:center;white-space:normal!important}
  .menu>a.current:after{display:none!important}
  .menu .btn,.menu .pill{width:100%;justify-content:center;margin-top:4px;white-space:normal!important}

  .dash-shell{display:block!important;min-width:0!important;width:100%!important;max-width:100%!important}
  .sidebar,.portal-sidebar,.admin-sidebar{position:sticky!important;top:0!important;z-index:90!important;min-height:0!important;height:auto!important;width:100%!important;max-width:100%!important;padding:10px 14px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;gap:10px!important;overflow:visible!important;box-shadow:0 10px 26px rgba(0,0,0,.16)!important}
  .sidebar>a:first-child{display:block;line-height:0;min-width:0}
  .sidebar>a:first-child img{width:88px!important;max-width:88px!important;max-height:48px;object-fit:contain;padding:4px!important;border-radius:10px!important}
  .admin-role-chip{display:none!important}
  .mobile-sidebar-toggle{display:inline-flex!important;justify-self:end;align-items:center;justify-content:center;min-width:0!important;width:auto!important;max-width:140px!important;min-height:44px;margin:0!important;font-size:14px;padding:9px 12px!important}
  .sidebar-quick-actions,.sidebar-scroll-area,.side-nav{display:none!important;grid-column:1/-1;width:100%;max-width:100%;margin:0!important;min-width:0}
  .sidebar.sidebar-open .sidebar-quick-actions{display:grid!important;margin-top:4px!important}
  .sidebar.sidebar-open .sidebar-scroll-area,.sidebar.sidebar-open .side-nav{display:flex!important;max-height:58dvh!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;padding:8px 2px 10px!important;border-top:1px solid rgba(255,255,255,.15)}
  .sidebar-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .admin-sidebar .sidebar-quick-actions{grid-template-columns:1fr!important}
  .sidebar-quick-link,.side-nav a{min-height:46px!important;font-size:14px!important;white-space:normal!important;overflow-wrap:anywhere}

  .dash-main{padding:18px!important;min-width:0!important;width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  .dash-top,.admin-top{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;margin-bottom:18px!important;width:100%!important}
  .dash-top>*,.admin-top>*{width:100%;max-width:100%;min-width:0}
  .dash-top h1,.admin-top h1{font-size:clamp(24px,7vw,32px)!important;line-height:1.12!important;margin:4px 0!important;overflow-wrap:anywhere}
  .admin-user{align-items:flex-start!important;max-width:100%;overflow-wrap:anywhere}
  .admin-quick-ref,.admin-quick-ref form{width:100%!important;max-width:100%!important}
  .admin-quick-ref form{display:flex!important;min-width:0}
  .admin-quick-ref input{min-width:0!important;flex:1 1 0!important;width:auto!important}
  .admin-quick-ref button{flex:0 0 auto}
  .cifaci-language-switch{align-self:flex-start!important;width:auto!important}

  /* Data grids no longer request a fixed desktop width. */
  .table-wrap,.v4-table-wrap{width:100%!important;max-width:100%!important;overflow:visible!important}
  .table,.v4-table,.admin-table{min-width:0!important;width:100%!important;max-width:100%!important;table-layout:fixed}
  .table th,.table td,.v4-table th,.v4-table td,.admin-table th,.admin-table td{padding:10px 9px!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word}
  .admin-toolbar{align-items:stretch!important;flex-wrap:wrap!important;width:100%!important}
  .admin-toolbar .field{min-width:0!important;width:100%!important;flex:1 1 100%}
  .admin-actions{width:100%!important;flex-wrap:wrap!important}
  .admin-actions .btn{min-height:44px;max-width:100%;white-space:normal}

  .v4-two,.v4-form-grid,.admin-grid{grid-template-columns:minmax(0,1fr)!important}
  .v4-form-grid .full{grid-column:auto!important}
  .v4-case-head{display:block!important}
  .v4-supplier-status{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Mail center */
  .mail-center-shell,.mail-message-page{width:100%!important;max-width:100%!important}
  .mail-tabs{width:100%!important;max-width:100%!important;gap:6px!important}
  .mail-tabs a{flex:1 1 140px;min-width:0;justify-content:center;text-align:center;white-space:normal!important}
  .mail-card-head{flex-direction:column!important;align-items:stretch!important}
  .mail-card-head>*,.personal-mailbox-banner>*{max-width:100%;min-width:0}
  .mail-search,.mailbox-admin-selector{min-width:0!important;width:100%!important;max-width:100%!important}
  .mail-list-row{max-width:100%!important;min-width:0!important}
  .mail-list-main,.mail-list-meta{min-width:0!important;max-width:100%!important}
  .mail-list-main small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;overflow-wrap:anywhere}
}

@media(max-width:760px){
  body{font-size:15.5px}
  .container{width:calc(100% - 22px)!important;max-width:100%!important}
  .topbar{padding:6px 0!important;font-size:11.5px!important}
  .topbar .container{display:block!important}
  .topbar .container>span{display:block;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;margin-bottom:4px;overflow-wrap:anywhere}
  .top-actions{display:flex!important;gap:8px!important;flex-wrap:wrap!important;overflow:visible!important;padding-bottom:1px;width:100%!important}
  .top-actions a{white-space:normal!important;font-size:11.5px;max-width:100%}

  .hero{min-height:auto!important;padding:44px 0 40px!important;overflow:hidden!important}
  .hero-grid{grid-template-columns:minmax(0,1fr)!important;gap:24px!important;width:100%!important}
  .hero-grid>*{min-width:0;max-width:100%}
  .hero h1{font-size:clamp(30px,9.2vw,40px)!important;line-height:1.05!important;letter-spacing:-.03em!important;overflow-wrap:anywhere}
  .hero p,.page-hero p{font-size:16px!important;line-height:1.55!important}
  .hero-panel{padding:18px!important;border-radius:20px!important;max-width:100%!important}
  .hero-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:10px!important;width:100%!important}
  .hero-actions .btn{width:100%!important;max-width:100%!important;white-space:normal!important}
  .page-hero{padding:46px 0 40px!important;overflow:hidden!important}
  .page-hero h1{font-size:clamp(28px,8.7vw,37px)!important;line-height:1.08!important;overflow-wrap:anywhere}

  .section,.content{padding:42px 0!important;overflow:hidden!important}
  .section-title{display:block!important;margin-bottom:20px!important}
  .section h2,.section-title h2{font-size:clamp(26px,7.8vw,34px)!important;overflow-wrap:anywhere}
  .lead{font-size:16px!important}
  .grid-2,.grid-3,.grid-4,.contact-rail,.footer-grid,.stats,.sector-directory,.opportunity-grid,.steps,.dashboard-primary-actions,.ecosystem-dashboard,.mail-status-grid,.mail-two{grid-template-columns:minmax(0,1fr)!important}
  .grid-2>*,.grid-3>*,.grid-4>*,.contact-rail>*,.footer-grid>*,.stats>*,.sector-directory>*,.opportunity-grid>*,.steps>*{min-width:0!important;max-width:100%!important}
  .card,.callout,.v4-case-card,.v4-intent-group,.ops-card,.stat{padding:17px!important;border-radius:17px!important;max-width:100%!important;min-width:0!important}
  .callout{display:block!important}

  .form-grid,.v4-form-grid{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;width:100%!important}
  .field,.field.full,.v4-form-grid .full{grid-column:auto!important;min-width:0!important;width:100%!important;max-width:100%!important}
  input,select,textarea,.field input,.field select,.field textarea,.v4-form-grid input,.v4-form-grid select,.v4-form-grid textarea{font-size:16px!important;min-height:46px;width:100%!important;max-width:100%!important;min-width:0!important}
  textarea,.field textarea{min-height:120px}
  input[type=file]{padding:10px!important;max-width:100%!important;white-space:normal!important}
  .btn,.pill,button:not(.theme-btn):not(.hamb){min-height:44px;max-width:100%;white-space:normal!important;overflow-wrap:anywhere}
  form[style*="display:flex"],div[style*="display:flex"]{max-width:100%;min-width:0;flex-wrap:wrap}

  .modal{padding:8px!important;align-items:end!important;overflow-x:hidden!important}
  .modal-card{width:100%!important;max-width:100%!important;max-height:92dvh!important;border-radius:22px 22px 0 0!important;padding:18px!important;overflow-x:hidden!important}
  .modal-head{gap:10px!important;align-items:flex-start!important;max-width:100%}
  .modal-head>*{min-width:0;max-width:100%}

  .auth-wrap{display:block!important;min-height:100dvh!important;width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  .auth-brand{min-height:auto!important;padding:20px 16px!important;width:100%!important;max-width:100%!important}
  .auth-brand img{width:140px!important;max-width:50vw!important;max-height:86px;object-fit:contain}
  .auth-brand h1{font-size:clamp(25px,7.8vw,34px)!important;overflow-wrap:anywhere}
  .auth-panel{padding:12px!important;display:block!important;width:100%!important;max-width:100%!important}
  .auth-box{width:100%!important;max-width:560px!important;margin:0 auto;border-radius:18px!important;padding:18px!important;box-shadow:0 12px 34px rgba(0,63,73,.10)!important;overflow-x:hidden!important}
  .cifaci-password-field{width:100%!important;min-width:0!important}
  .cifaci-password-field input{min-width:0!important;flex:1 1 0!important}
  .cifaci-password-eye{flex:0 0 46px!important;width:46px!important}

  .global-contact{padding:32px 0!important}
  .global-contact .container{display:block!important}
  .global-contact h2{font-size:27px!important}
  .global-contact-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;margin-top:16px;width:100%!important}
  .global-contact-actions .btn{width:100%;max-width:100%}

  .footer-legal{display:block!important}
  .footer-legal small{display:block!important;text-align:left!important;margin-top:8px}
  .footer-logo{width:165px!important;max-width:65vw!important}

  .cifaci-processing-overlay{padding:8px!important;overflow-x:hidden!important}
  .cifaci-processing-card{width:100%!important;max-width:100%!important;max-height:92dvh!important;overflow-y:auto!important;overflow-x:hidden!important;border-radius:18px!important}
  .cifaci-processing-card__top{padding:16px!important}
  .cifaci-processing-card__body{padding:17px!important}
  .cifaci-processing-card__body p{font-size:15px!important;line-height:1.55!important}
  .cifaci-important-tab{left:10px!important;right:auto!important;bottom:10px!important;width:68px!important;height:68px!important;max-width:68px!important;padding:6px!important;font-size:8.2px!important;border-width:2px!important}

  /* Convert data tables to readable vertical cards. mobile-fit.js supplies labels. */
  table.cifaci-mobile-table{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;border:0!important;background:transparent!important}
  table.cifaci-mobile-table thead{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
  table.cifaci-mobile-table tbody{display:block!important;width:100%!important;max-width:100%!important}
  table.cifaci-mobile-table tr{display:block!important;width:100%!important;max-width:100%!important;margin:0 0 12px!important;padding:5px 12px!important;border:1px solid rgba(0,92,103,.16)!important;border-radius:14px!important;background:#fff!important;box-shadow:0 5px 16px rgba(0,45,52,.05)!important}
  table.cifaci-mobile-table td{display:grid!important;grid-template-columns:minmax(92px,38%) minmax(0,1fr)!important;gap:10px!important;width:100%!important;max-width:100%!important;min-width:0!important;padding:9px 0!important;border:0!important;border-bottom:1px solid rgba(0,92,103,.09)!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  table.cifaci-mobile-table td:last-child{border-bottom:0!important}
  table.cifaci-mobile-table td::before{content:attr(data-mobile-label);font-weight:800;color:#075f68;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
  table.cifaci-mobile-table td[data-mobile-label=""]{grid-template-columns:minmax(0,1fr)!important}
  table.cifaci-mobile-table td[data-mobile-label=""]::before{display:none!important}
  table.cifaci-mobile-table td>*{max-width:100%!important;min-width:0!important}
  table.cifaci-mobile-table td .btn,table.cifaci-mobile-table td button,table.cifaci-mobile-table td input,table.cifaci-mobile-table td select{width:100%!important;max-width:100%!important}
  table.cifaci-mobile-table td form{width:100%!important;max-width:100%!important}

  /* Mail rows are also forced to one phone column. */
  .mail-list-row{display:grid!important;grid-template-columns:8px minmax(0,1fr)!important;gap:8px!important;padding:12px 2px!important;width:100%!important}
  .inbox-row .mail-list-main{display:flex!important;flex-direction:column!important;gap:4px!important;min-width:0!important}
  .mail-list-meta{grid-column:2!important;justify-content:flex-start!important;flex-wrap:wrap!important;text-align:left!important;min-width:0!important}
  .mail-message-card{padding:15px!important;max-width:100%!important;overflow-x:hidden!important}
  .mail-message-body,.mail-message-meta{max-width:100%!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  .personal-mailbox-banner{align-items:stretch!important;flex-direction:column!important}

  /* QR / verification pages and generated canvases */
  canvas[id*="qr" i],img[id*="qr" i],.qr-code,.qr-preview{max-width:min(100%,320px)!important;height:auto!important;margin-left:auto!important;margin-right:auto!important}
}

@media(max-width:520px){
  .container{width:calc(100% - 18px)!important}
  .nav .container{min-height:62px!important}
  .logo{height:43px!important;max-width:145px!important}
  .hamb{width:43px;height:43px}
  .menu{max-height:calc(100dvh - 62px)!important;padding-left:9px!important;padding-right:9px!important}

  .dash-main{padding:13px 10px 20px!important}
  .sidebar,.portal-sidebar,.admin-sidebar{padding:8px 9px!important;grid-template-columns:auto minmax(0,1fr)!important}
  .sidebar>a:first-child img{width:74px!important;max-width:74px!important;max-height:42px}
  .mobile-sidebar-toggle{max-width:105px!important;padding:8px 9px!important}
  .sidebar-quick-actions{grid-template-columns:minmax(0,1fr)!important}

  .stats{grid-template-columns:minmax(0,1fr)!important}
  .stat strong,.ops-card strong{font-size:25px!important}
  .v4-supplier-status,.v4-stepper{grid-template-columns:minmax(0,1fr)!important}

  .card,.v4-case-card,.v4-intent-group,.ops-card,.stat{padding:15px!important}
  .auth-panel{padding:8px!important}
  .auth-box{padding:15px!important;border-radius:15px!important}
  .page-hero{padding:40px 0 35px!important}
  .section,.content{padding:36px 0!important}

  table.cifaci-mobile-table tr{padding:4px 10px!important}
  table.cifaci-mobile-table td{grid-template-columns:minmax(82px,36%) minmax(0,1fr)!important;gap:8px!important;font-size:13.5px!important}
  table.cifaci-mobile-table td::before{font-size:11px!important}
}

@media(max-width:380px){
  .container{width:calc(100% - 14px)!important}
  .dash-main{padding-left:8px!important;padding-right:8px!important}
  .auth-panel{padding:6px!important}
  .auth-box{padding:13px!important}
  .hero h1{font-size:29px!important}
  .page-hero h1{font-size:27px!important}
  table.cifaci-mobile-table td{grid-template-columns:minmax(74px,34%) minmax(0,1fr)!important;gap:7px!important}
}

@media(hover:none) and (pointer:coarse){
  .btn:hover,.card:hover,.sidebar-quick-link:hover,.v4-intent-card:hover{transform:none!important}
  a,button,.btn,.pill,.side-nav a{-webkit-tap-highlight-color:rgba(0,92,103,.12)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* CIFACI Mobile Performance v3 — 2026-10-07
   Rendering optimizations for small screens. Keeps layout/functionality unchanged.
*/
@media(max-width:760px){
  html{scroll-behavior:auto!important}
  body{background-attachment:scroll!important}

  /* Reduce expensive paint effects on low-power mobile GPUs. */
  .nav,.menu,.sidebar,.portal-sidebar,.admin-sidebar,.modal-card,.auth-box,
  .card,.callout,.panel,.stat,.ops-card,.v4-case-card,.v4-intent-group,
  .mail-message-card,.cifaci-processing-card,.cifaci-important-card{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  .card,.callout,.panel,.stat,.ops-card,.v4-case-card,.v4-intent-group,
  .auth-box,.mail-message-card{
    box-shadow:0 4px 14px rgba(0,45,52,.06)!important;
  }
  .cifaci-processing-overlay,.modal{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

  /* Avoid running decorative motion while users scroll/tap on phones. */
  .hero::before,.hero::after,.page-hero::before,.page-hero::after,
  [class*="orb"],[class*="pulse"],[class*="float"],[class*="glow"]{
    animation:none!important;
  }
  .btn,.pill,a,button,input,select,textarea{
    transition-property:background-color,color,border-color,opacity!important;
    transition-duration:.14s!important;
  }

  /* Let the browser skip rendering off-screen public sections until needed. */
  .section,.global-contact,footer.footer,.footer{
    content-visibility:auto;
    contain-intrinsic-size:auto 620px;
  }

  /* Lighter table cards while preserving full-fit behavior. */
  table.cifaci-mobile-table tr{box-shadow:0 2px 8px rgba(0,45,52,.04)!important}

  /* Immediate visual feedback during form/file submissions. */
  .cifaci-submit-busy{opacity:.78!important;cursor:wait!important;pointer-events:none!important}
  .cifaci-submit-busy::after{
    content:"";display:inline-block;width:14px;height:14px;margin-left:9px;vertical-align:-2px;
    border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
    animation:cifaciBusySpin .65s linear infinite!important;
  }
  @keyframes cifaciBusySpin{to{transform:rotate(360deg)}}
}

@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .cifaci-submit-busy::after{animation:none!important;border-right-color:currentColor}
}