/* ENTEREGO Hosting 0.8.45 — narrow-screen layout. All layout overrides are
 * scoped to the hosting application. Wide engineering tables scroll inside a
 * panel instead of changing the width of the entire browser viewport. */
.mobile-menu-toggle,.mobile-nav-backdrop,.mobile-nav-close,.mobile-brand{display:none}
.app main,.content,#pagecontent,.panel,.ux-detail,.ux-console,.template-shell,.fs-workspace{min-width:0}
:where(.panel,.ux-card,.template-card,.fs-top,.b-chart,.ux-project-item,.inventory-group) :where(pre,code){overflow-wrap:anywhere}
:where(.panel,.ux-card,.template-card) :where(img,svg,canvas){max-width:100%}
:where(.panel,.ux-card,.template-card) :where(input,select,textarea){max-width:100%}
.tablewrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
:where(.logs,#terminaloutput,#template-compose,.pool-log){overflow:auto;max-width:100%}

@media(max-width:900px){
  .tablewrap table{min-width:560px}
  html{scroll-padding-top:78px}body{overflow-x:hidden}
  .app{display:block;min-width:0;min-height:100dvh}
  .app>main{display:block;min-width:0;width:100%}
  .app>aside{position:fixed;top:0;bottom:0;left:0;z-index:102;display:flex;flex-direction:column;
    width:min(328px,calc(100vw - 54px));max-width:100%;height:100dvh;max-height:100dvh;
    padding:calc(16px + env(safe-area-inset-top,0px)) 15px calc(15px + env(safe-area-inset-bottom,0px));
    overflow-y:auto;overscroll-behavior:contain;box-shadow:15px 0 45px #0b183366;
    transform:translateX(-110%);visibility:hidden;transition:transform .22s ease,visibility .22s;
    gap:10px;
  }
  .app>aside .brand{padding:5px 9px 12px;display:flex;flex-direction:column;align-items:flex-start;max-width:220px}
  .app>aside .brand img{max-height:44px;max-width:155px}
  .app>aside .brand small{margin-top:5px!important}
  .app>aside .nav{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;overflow:visible;flex:1;align-content:start}
  .app>aside .nav button{font-size:14px;min-height:44px;padding:10px 13px;white-space:normal;line-height:1.25;gap:13px}
  .app>aside .nav button .ico{min-width:22px;text-align:center}
  .app>aside .nav button:focus-visible,.mobile-menu-toggle:focus-visible,.mobile-nav-close:focus-visible{outline:3px solid #7edbd9;outline-offset:2px}
  .app>aside .asidefoot{display:block;margin-top:6px;font-size:11px;padding:7px 12px}
  .mobile-nav-open .app>aside{visibility:visible;transform:none}
  .mobile-nav-backdrop{position:fixed;inset:0;z-index:101;display:block;opacity:0;visibility:hidden;
    border:0;border-radius:0;background:rgba(7,18,38,.62);transition:opacity .2s ease,visibility .2s;cursor:pointer}
  .mobile-nav-open .mobile-nav-backdrop{opacity:1;visibility:visible}
  .mobile-nav-open{overflow:hidden;touch-action:pan-y}
  .mobile-menu-toggle,.mobile-nav-close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;
    font:700 23px/1 system-ui;background:#eff4fc;border:1px solid #dfe7f2;border-radius:12px;color:#243c60;cursor:pointer}
  .mobile-nav-close{position:absolute;right:12px;top:calc(18px + env(safe-area-inset-top,0px));color:#fff;background:#263856;border-color:#415475}
  .app header{position:sticky;top:0;z-index:20;padding:10px 17px;gap:11px;min-height:68px;
    padding-top:calc(10px + env(safe-area-inset-top,0px));box-shadow:0 2px 12px #172c4710}
  .app header .eyebrow{display:none}
  .app header .head{font-size:12px;line-height:1.3;font-weight:650;max-width:48vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-header-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
  .mobile-brand{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px;font-size:13px;font-weight:850;letter-spacing:.04em;color:#19385c}
  .mobile-brand b{color:#118c89;font-size:11px}
  .mobile-brand .mobile-version{letter-spacing:0;font-weight:650;color:#71839f;font-size:10px}
  .app header .user{gap:8px;min-width:0}
  .app header .user #loggeduser{display:none}
  .app header .avatar{width:32px;height:32px;border-radius:10px}
  .app header #logout{font-size:11px;padding:9px 10px;min-height:37px;margin:0;white-space:nowrap}
  .content{width:100%;max-width:100%;padding:22px 17px 26px}
  .content h1{font-size:clamp(22px,5.2vw,28px);line-height:1.15;margin-bottom:7px;overflow-wrap:anywhere}
  .hero{margin-bottom:18px;flex-wrap:wrap;align-items:start;gap:9px}
  .hero .pill{font-size:11px;padding:6px 10px;max-width:100%;overflow-wrap:anywhere}
  p.sub{font-size:12px;line-height:1.5}
  .panel{padding:17px;border-radius:15px}
  .ptop,.pool-sec-head,.pool-head{align-items:flex-start;gap:9px;flex-wrap:wrap;margin-bottom:16px}
  .ptop>*,.pool-sec-head>*,.pool-head>*{min-width:0}
  .tile{padding:15px;border-radius:13px}.tile strong{font-size:26px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:12px}
  .projects{margin-top:12px}
  .pool-detail,.pool-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ux-console,.template-shell,.access-layout,.b-usage-grid{grid-template-columns:minmax(0,1fr)!important}
  .ux-company-side{position:static;max-height:min(42dvh,360px);overflow:auto;overscroll-behavior:contain;border-radius:14px}
  .ux-detail{min-width:0}
  .ux-tabs{overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .ux-tabs button{flex:0 0 auto;white-space:nowrap;padding:12px 14px}
  .ux-client-head{flex-direction:column;align-items:flex-start}
  .ux-header-meta{max-width:100%}
  .ux-forms,.ux-create-user,.ux-picker,.b-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ux-billing{grid-column:span 2;max-width:100%}
  .ux-card,.template-card{padding:16px}
  .ux-action-bar,.ux-card-head,.ux-pool-top{align-items:flex-start;flex-wrap:wrap;gap:10px}
  .ux-create-user>div{grid-column:1/-1}
  .template-actions,.fs-toolbar,.fs-top,.fs-editor-actions,.fs-archive{gap:9px;flex-wrap:wrap}
  .fs-top,.fs-toolbar{padding:14px}
  .fs-toolbar input{min-width:0;max-width:100%;margin-left:0;flex:1 1 180px}
  #template-compose{min-height:300px;font-size:12px}
  .inventory-group>summary,.inventory-client-group>summary,.access-client>summary,.access-project>summary{overflow-wrap:anywhere}
  .pool-project,.b-plan,.b-charge{flex-wrap:wrap;overflow-wrap:anywhere}
  .pool-project>*,.b-plan>*,.b-charge>*{min-width:0}
  .ux-diag-project-head,.ux-diag-client summary{flex-wrap:wrap}
  footer{line-height:1.7}
}
@media(max-width:560px){
  .content{padding:15px 12px 24px}
  .app header{padding-left:12px;padding-right:12px}
  .app header .head{max-width:42vw}
  .app header .user .avatar{display:none}
  .panel{padding:13px;border-radius:13px}
  .pool-detail,.pool-form,.ux-forms,.ux-picker,.b-grid,.ux-create-user{grid-template-columns:minmax(0,1fr)}
  .ux-billing,.ux-create-user>div{grid-column:auto}
  .ux-client-head h2{font-size:21px}
  .ux-project-row,.ux-project-item .ux-project-row{flex-wrap:wrap;align-items:flex-start}
  .ux-project-item .ux-project-row>.btn,.ux-project-actions .btn{max-width:100%;white-space:normal}
  .ux-user-head,.ux-user-access label,.ux-project-actions{flex-wrap:wrap}
  .ux-user-access select{max-width:100%}
  .ux-create-user,.ux-card,.template-card{padding:13px}
  .ux-client-actions,.ux-action-bar{gap:7px}
  .ux-client-actions .btn,.ux-action-bar>.btn{max-width:100%;white-space:normal;text-align:center}
  .pool-actions .btn{max-width:100%;white-space:normal}
  .fs-editor-actions .btn,.template-actions .btn{max-width:100%;white-space:normal}
  .access-toolbar,.domain-toolbar{grid-template-columns:minmax(0,1fr)!important}
  .access-client>summary,.access-project>summary{padding:12px}
  .inventory-scope{padding:10px}
  .inventory-group-metrics{width:100%}
  .chart{min-height:220px}.chart svg{height:210px}
  .auth{width:calc(100% - 24px);margin:6vh auto;padding:22px 18px}
}
@media(max-width:355px){
  .mobile-brand{font-size:12px}.mobile-brand b{font-size:10px}
  .app header #logout{padding:8px}
  .stats{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  .app>aside,.mobile-nav-backdrop{transition:none!important}
}

/* 0.8.47: native phone layout for the actual client -> project -> container tree.
   Desktop tables remain available and are not replaced with horizontally clipped cards. */
.inventory-mobile-list-v0847{display:none}
@media(max-width:720px){
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .inventory-desktop-table-v0847{display:none!important}
  .inventory-mobile-list-v0847{display:grid;gap:9px;min-width:0}
  .inventory-client-group>summary{padding:12px;gap:5px}
  .inventory-client-body{padding:0 8px 9px;gap:8px}
  .inventory-client-name{font-size:14px;min-width:0;overflow-wrap:anywhere}
  .inventory-group{padding:10px;min-width:0}
  .inventory-group>summary{display:grid;gap:4px;justify-content:stretch;min-width:0}
  .inventory-group-title{font-size:14px;overflow-wrap:anywhere}
  .inventory-group-metrics{font-size:11px;line-height:1.35;overflow-wrap:anywhere}
  .inventory-group-actions{gap:6px;padding:9px 0}
  .inventory-group-actions .btn{padding:7px 9px;font-size:11px;white-space:normal}
  .inventory-mobile-card-v0847{display:grid;gap:7px;padding:12px;border:1px solid #e1e8f2;border-radius:11px;background:#f9fbff;min-width:0}
  .inventory-mobile-card-head-v0847{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;min-width:0}
  .inventory-mobile-identity-v0847{display:grid;gap:3px;min-width:0;overflow-wrap:anywhere}
  .inventory-mobile-identity-v0847 strong{font-size:14px;color:#1b2c4b}
  .inventory-mobile-identity-v0847 small{font-size:11px;color:#75839c}
  .inventory-mobile-card-head-v0847 .pill{flex-shrink:0;max-width:42%;font-size:10px;padding:5px 7px}
  .inventory-mobile-image-v0847,.inventory-mobile-version-v0847{font-size:11px;line-height:1.35;color:#60718b;overflow-wrap:anywhere}
  .inventory-mobile-metrics-v0847{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:#5b6c84}
  .inventory-mobile-metrics-v0847 b{color:#213a5d}
  .inventory-mobile-actions-v0847{border-top:1px solid #e3eaf4;padding-top:9px;min-width:0}
  .inventory-mobile-actions-v0847 .container-quick-actions-v0840{min-width:0;flex-wrap:wrap;gap:7px}
  .inventory-mobile-actions-v0847 .container-icon-btn-v0840{width:40px;height:40px}
  /* The existing-container overlay is a scrollable phone sheet, not a giant page. */
  .existing-container-dialog-v0837{inset:0;display:block;overflow:hidden;overscroll-behavior:contain;background:rgba(10,20,40,.68)}
  .existing-container-card-v0837{box-sizing:border-box;width:100%;height:100dvh;min-height:0;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;padding:12px 15px calc(24px + env(safe-area-inset-bottom,0px));font-size:13px}
  .existing-container-card-v0837>button:first-child{position:sticky;top:0;z-index:3;display:block;margin:0 0 12px auto;min-height:40px;background:#fff;box-shadow:0 2px 8px #152b4d20}
  .existing-container-card-v0837 h2{font-size:18px;line-height:1.25;margin:8px 0 12px;overflow-wrap:anywhere}
  .existing-container-card-v0837 h3{font-size:14px;margin:18px 0 7px;line-height:1.35}
  .existing-container-card-v0837 p{font-size:12px;line-height:1.45;margin:8px 0;overflow-wrap:anywhere}
  .existing-container-card-v0837 .legacy-preflight-v0828{min-width:0;gap:8px}
  .existing-container-card-v0837 :is(input,select,textarea,button){font-size:16px;max-width:100%;min-width:0}
  .existing-container-card-v0837 :is(input,select,textarea){width:100%;box-sizing:border-box}
  .existing-container-card-v0837 .legacy-preflight-v0828 pre{font-size:11px;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere}
  .existing-container-warning-v0837{font-size:12px!important;line-height:1.45!important;padding:10px!important}
  :is(.ux-secret-dialog,.ux-user-delete-dialog){width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;margin:auto}
  .ux-secret-form{padding:16px;gap:10px}
  .ux-secret-actions{position:sticky;bottom:0;background:#fff;padding:9px 0;flex-wrap:wrap}
  .ux-secret-actions>.btn{flex:1 1 130px;white-space:normal}
}
@media(max-width:360px){
  .inventory-mobile-card-head-v0847{flex-wrap:wrap}
  .inventory-mobile-card-head-v0847 .pill{max-width:100%}
}

/* v0.9.24: dashboard incident banner and heading must not widen iPhone viewport. */
@media(max-width:900px){
  html,body,#app,.app,.app>main,.content,#pagecontent{max-width:100%;min-width:0;box-sizing:border-box}
  .content :is(.hero,.alert,.panel,h1,p.sub){min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal}
  .content h1{font-size:clamp(21px,5.1vw,29px);hyphens:auto}
}