/* ========================================================================== 
   i-Form AMS — Cross-screen responsive & app-view layer
   Loaded after page styles. It does not replace page logic or visual identity.
   ========================================================================== */

:root{
  --ifdf-safe-top:env(safe-area-inset-top,0px);
  --ifdf-safe-right:env(safe-area-inset-right,0px);
  --ifdf-safe-bottom:env(safe-area-inset-bottom,0px);
  --ifdf-safe-left:env(safe-area-inset-left,0px);
  --ifdf-fluid-gutter:clamp(12px,2vw,22px);
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
html,body{max-width:100%;}
img,svg,video,canvas{max-width:100%;}
img,video{height:auto;}
iframe{max-width:100%;}
button,input,select,textarea{max-width:100%;}
:where(.main,.content,.card,.grid,.tools,.topbar,.top,.tb-r,.tb-bc,.shell)>*{min-width:0;}
:where(p,span,div,td,th,label,a,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;}
:where(code,pre,.mono,[class*="key"],[class*="token"],[class*="url"]){overflow-wrap:anywhere;word-break:break-word;}

/* Horizontal data remains usable instead of clipping. */
:where(.table,.tbl,.data-table,.info-tbl){max-width:100%;}
:where(.table,.tbl,.data-table){scrollbar-width:thin;}


:where(.pmodal-overlay,.modal-overlay,.overlay,[class*="modal-overlay"]){padding:max(12px,var(--ifdf-safe-top)) max(12px,var(--ifdf-safe-right)) max(12px,var(--ifdf-safe-bottom)) max(12px,var(--ifdf-safe-left));}
:where(.pmodal,.modal,[role="dialog"]){max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;}
:where(.data-drawer,[class*="drawer"]){max-width:100vw;}




/*
  1100px is intentional. At 200% browser zoom a common 1920px desktop exposes
  roughly a 960px CSS viewport, so it enters the safe app layout instead of
  preserving a cramped desktop shell.
*/
@media (max-width:1100px){
  html,body{
    width:100%!important;
    min-height:100%!important;
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  body{
    min-height:100dvh!important;
    padding-left:var(--ifdf-safe-left)!important;
    padding-right:var(--ifdf-safe-right)!important;
  }
  

  /* Shell / 200%-zoom mode */
  body.ifdf-app-view .shell,body.ifdf-app-view.fallback-shell{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    overflow:visible!important;
  }
  body.ifdf-app-view .main,body.ifdf-app-view.fallback-shell .main{
    flex:1 1 auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    min-height:100dvh!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  body.ifdf-app-view .content{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:clamp(12px,2.2vw,20px)!important;
    overflow:visible!important;
  }
  body.ifdf-app-view .main>.grid,body.ifdf-app-view .main>.card{
    margin:clamp(12px,2vw,20px)!important;
  }

  /* Sticky app header */
  body.ifdf-app-view :where(.topbar,.top){
    position:sticky!important;
    top:0!important;
    z-index:900!important;
    width:100%!important;
    height:auto!important;
    min-height:58px!important;
    padding:calc(9px + var(--ifdf-safe-top)) clamp(12px,2vw,18px) 9px!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    margin:0!important;
  }
  body.ifdf-app-view .tb-bc{
    flex:1 1 180px!important;
    min-width:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  body.ifdf-app-view .tb-bc>*{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.ifdf-app-view .tb-div{display:none!important;}
  body.ifdf-app-view .tb-r{
    min-width:0!important;
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:7px!important;
  }
  body.ifdf-app-view :where(.tbbtn,.btn,.pbtn,button){
    min-height:42px;
    max-width:100%;
  }

  
  
  
  
  
  
  
  
  

  /* Fluid grids — preserve two columns where readable, then stack below 700px. */
  body.ifdf-app-view :where(.grid,.stats-grid,.metrics-grid,.dashboard-grid,.kpi-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.ifdf-app-view :where(.builder-hero,.builder-grid,.form-grid,.g2c,.ccx-row2){
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.ifdf-app-view :where(.hero-metrics,.preview-grid){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.ifdf-app-view .dynamic-field-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }
  body.ifdf-app-view .snapshot-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body.ifdf-app-view #cmdGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}

  /* Command Centre: retain the visual system, remove width pressure. */
  body.ifdf-app-view #p4Host .cc-assets-head{grid-template-columns:minmax(0,1fr)!important;gap:12px!important;}
  body.ifdf-app-view #p4Host .cc-head-actions{justify-content:flex-start!important;flex-wrap:wrap!important;}
  body.ifdf-app-view #p4Host .cc-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body.ifdf-app-view #p5Wrap .ccx-groups{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  body.ifdf-app-view #p5Wrap :where(.ccx-cmds,.ccx-row2){grid-template-columns:minmax(0,1fr)!important;}
  body.ifdf-app-view #p5Wrap :where(.ccx-aw-b,.ccx-rwrap){max-width:100%!important;width:100%!important;}

  /* Tables/data use an internal horizontal scroller, never the page viewport. */
  body.ifdf-app-view :where(.table,.tbl,.data-table){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
  }
  body.ifdf-app-view :where(.table,.tbl,.data-table) :where(th,td){white-space:nowrap;}
  body.ifdf-app-view :where(.table,.tbl,.data-table)::-webkit-scrollbar{height:5px;}
  body.ifdf-app-view :where(.table,.tbl,.data-table)::-webkit-scrollbar-thumb{background:rgba(67,83,216,.22);border-radius:999px;}

  /* Toolbars, tabs, filters and actions can wrap/scroll without breaking cards. */
  body.ifdf-app-view :where(.tools,.toolbar,.filters,.filter-row,.action-row,.hero-actions,.form-actions,.quick-actions,.pbtn-row){
    max-width:100%!important;
    flex-wrap:wrap!important;
  }
  body.ifdf-app-view :where(.tabs,.tabbar,.tab-bar,.ptab-bar,[class*="tabs"]){
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  body.ifdf-app-view :where(.tabs,.tabbar,.tab-bar,.ptab-bar,[class*="tabs"])::-webkit-scrollbar{display:none;}
  body.ifdf-app-view :where(.inp,.finp,.fsel,.ftxt,.finp-date,input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    max-width:100%!important;
    min-width:0!important;
  }

  
  body.ifdf-app-view :where(.pmodal-overlay,.modal-overlay,.overlay,[class*="modal-overlay"]){
    align-items:flex-start!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
  }
  body.ifdf-app-view :where(.pmodal,.modal,[role="dialog"]){
    width:min(100%,620px)!important;
    min-width:0!important;
    margin:auto!important;
    max-height:calc(var(--ifdf-visual-height,100dvh) - 24px)!important;
  }
  body.ifdf-app-view .data-drawer{
    width:100vw!important;
    max-width:100vw!important;
  }

  /* Fixed toast/countdown positions remain clear of the safe area. */
  body.ifdf-app-view :where(.toast,.cc-countdown){
    max-width:calc(100vw - 24px)!important;
    right:12px!important;
    bottom:calc(var(--ifdf-safe-bottom) + 12px)!important;
  }

  
  
  
  
  
  
  
}

@media (max-width:700px){
  body.ifdf-app-view :where(.topbar,.top){align-items:flex-start!important;}
  body.ifdf-app-view .tb-r{
    flex:1 1 100%!important;
    width:100%!important;
    margin-left:0!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding-bottom:2px!important;
    scrollbar-width:none;
  }
  body.ifdf-app-view .tb-r::-webkit-scrollbar{display:none;}
  body.ifdf-app-view .tb-r :where(.tbbtn,.btn){flex:0 0 auto!important;white-space:nowrap!important;}
  body.ifdf-app-view :where(.grid,.stats-grid,.metrics-grid,.dashboard-grid,.kpi-grid,.hero-metrics,.preview-grid){
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.ifdf-app-view :where(.frow.cols2,.frow.cols3,.dynamic-field-grid){grid-template-columns:minmax(0,1fr)!important;}
  body.ifdf-app-view .snapshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body.ifdf-app-view #cmdGrid{grid-template-columns:minmax(0,1fr)!important;}
  body.ifdf-app-view #p5Wrap .ccx-groups{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body.ifdf-app-view #p4Host .cc-filter-grid{grid-template-columns:minmax(0,1fr)!important;}
  body.ifdf-app-view :where(.tools,.toolbar,.filters,.filter-row){align-items:stretch!important;}
  body.ifdf-app-view :where(.tools,.toolbar,.filters,.filter-row)>*{flex:1 1 100%!important;width:100%!important;}
  body.ifdf-app-view .pbtn-row{justify-content:stretch!important;}
  body.ifdf-app-view .pbtn-row>*{flex:1 1 auto!important;}
  body.ifdf-app-view :where(.card,.pmodal,.modal){border-radius:15px!important;}
  body.ifdf-app-view :where(.pmodal-head,.pmodal-body){padding-left:16px!important;padding-right:16px!important;}

  /* Authentication pages: no fixed footer overlap at high zoom/small height. */
  body:not(.ifdf-console-page) .footer{position:static!important;margin-top:18px!important;}
  body:not(.ifdf-console-page) .login-card{max-width:100%!important;}
}

@media (max-width:420px){
  :root{}
  body.ifdf-app-view .snapshot-grid{grid-template-columns:minmax(0,1fr)!important;}
  body.ifdf-app-view #p5Wrap .ccx-groups{grid-template-columns:minmax(0,1fr)!important;}
  body.ifdf-app-view :where(.content,.main>.grid,.main>.card){margin-left:0!important;margin-right:0!important;}
  
  
}

/* Short landscape phones and high desktop zoom need vertical space efficiency. */
@media (max-height:620px) and (max-width:1100px){
  body.ifdf-app-view :where(.topbar,.top){position:relative!important;padding-top:8px!important;}
  
  
  body:not(.ifdf-console-page) .footer{position:static!important;}
}

@media (hover:none) and (pointer:coarse){
  :where(a,button,input,select,textarea,[role="button"]){touch-action:manipulation;}
  
}

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

@media print{
  
  .main,.content{width:100%!important;margin:0!important;padding:0!important;overflow:visible!important;}
  html,body{height:auto!important;overflow:visible!important;background:#fff!important;}
}

/* Verified narrow-screen edge cases. */
@media (max-width:1100px){
  body.ifdf-app-view .stat-row{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
  }
  body.ifdf-app-view .stat-pill{
    min-width:0!important;
    width:100%!important;
    padding:10px 12px!important;
  }
  body.ifdf-app-view .publish-form{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    max-width:100%!important;
  }
  body.ifdf-app-view .publish-form>*{min-width:0!important;max-width:100%!important;}
  body.ifdf-app-view .publish-form .field{min-width:0!important;width:100%!important;}
}
@media (max-width:700px){
  body.ifdf-app-view .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body.ifdf-app-view .publish-form{grid-template-columns:minmax(0,1fr)!important;}
  body:not(.ifdf-console-page).ifdf-app-view{
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    padding:90px 16px 18px!important;
  }
  body:not(.ifdf-console-page).ifdf-app-view .login-card{
    flex:0 0 auto!important;
    width:min(100%,390px)!important;
    max-width:390px!important;
  }
  body:not(.ifdf-console-page).ifdf-app-view .footer{
    position:static!important;
    flex:0 0 auto!important;
    width:calc(100% + 32px)!important;
    margin:24px -16px -18px!important;
  }
  body:not(.ifdf-console-page).ifdf-app-view .footer-row{
    flex-direction:column!important;
    align-items:center!important;
    gap:8px!important;
    text-align:center!important;
  }
  body:not(.ifdf-console-page).ifdf-app-view :where(.footer-left,.footer-right){
    width:100%!important;
    max-width:100%!important;
    justify-content:center!important;
    white-space:normal!important;
    text-align:center!important;
  }
}
@media (max-width:420px){
  body.ifdf-app-view .stat-row{grid-template-columns:minmax(0,1fr)!important;}
}


/* ==========================================================================
   MOBILE UI BUG FIXES — 2026-07-02
   Higher-specificity overrides that repair issues the earlier responsive
   layer could not win against project-ui-standard.css / management CSS.
   ========================================================================== */

/* ── FIX 1: Data tables must scroll horizontally on mobile, never clip. ──
   project-ui-standard.css forces `.main table{min-width:720px}` and
   `.main table:not(.cc-table){overflow:hidden}`, which clipped every table
   on phones. These selectors carry higher specificity so they win, and the
   block-level scroll pattern (with nowrap cells) restores full access. */
@media (max-width:1100px){
  body.ifdf-design-system.ifdf-app-view .main table:not(.cc-table){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    white-space:nowrap!important;
    scrollbar-width:thin;
  }
  body.ifdf-design-system.ifdf-app-view .main table:not(.cc-table) :where(thead,tbody){
    min-width:max-content!important;
  }
  body.ifdf-design-system.ifdf-app-view .main table:not(.cc-table) :where(th,td){
    white-space:nowrap!important;
  }
  body.ifdf-design-system.ifdf-app-view .main table:not(.cc-table)::-webkit-scrollbar{height:6px;}
  body.ifdf-design-system.ifdf-app-view .main table:not(.cc-table)::-webkit-scrollbar-thumb{
    background:rgba(67,83,216,.28);border-radius:999px;
  }
  /* Wrappers that used to clip the table now let it scroll inside. */
  body.ifdf-design-system.ifdf-app-view .main :where(.tbl-wrap,.table-wrap){
    overflow:visible!important;
  }
}

/* ── FIX 2: Legacy console pages (.top with a page title + Refresh) lost their
   header entirely on phones because enterprise-navigation.css hides
   `:where(.topbar,.top)` at <=700px and nothing relocated the .top content.
   New pages use .topbar (actions relocate to the drawer); legacy pages use
   .top, so re-show only `.main>.top` as a compact in-flow page header. */
@media (max-width:700px){
  body.ifdf-enterprise-nav .main>.top{
    display:flex!important;
    position:static!important;
    top:auto!important;
    z-index:auto!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:14px 16px 2px!important;
    align-items:center!important;
    gap:10px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
  body.ifdf-enterprise-nav .main>.top>div:first-child{
    min-width:0!important;flex:1 1 auto!important;
  }
  body.ifdf-enterprise-nav .main>.top .title{font-size:17px!important;}
  body.ifdf-enterprise-nav .main>.top .btn{flex:0 0 auto!important;}
}

/* ── FIX 3: Search / filter bars stack cleanly and stay tappable on phones. ── */
@media (max-width:700px){
  body.ifdf-app-view .main :where(.filter-bar,.fsrch,.tools){
    flex-wrap:wrap!important;
    width:100%!important;
    max-width:100%!important;
  }
  body.ifdf-app-view .main .fsrch{
    flex:1 1 100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
  }
  body.ifdf-app-view .main .fsrch input{
    flex:1 1 auto!important;
    min-width:0!important;
    width:100%!important;
  }
  body.ifdf-app-view .main :where(.inp,#q,#searchInp){
    min-height:44px!important;   /* comfortable touch target */
  }
}