/* MAX-Cloud authenticated mobile UI — scoped ONLY to data-app="max-cloud". */
.mobile-nav,.inapp-system-bar{display:none}
body:has(.shell[data-app="max-cloud"]){overflow:hidden!important}
body:has(.shell[data-app="max-cloud"]) .global-info-cluster,
body:has(.shell[data-app="max-cloud"]) .system-work-tools{display:none!important}

@media(max-width:900px){
  html:has(.shell[data-app="max-cloud"]),
  body:has(.shell[data-app="max-cloud"]){height:100%!important}
  body:has(.shell[data-app="max-cloud"]) #app{
    height:100dvh!important;min-height:0!important;padding-bottom:0!important;overflow:hidden!important
  }
  .shell[data-app="max-cloud"]{
    width:100%!important;height:100dvh!important;min-height:0!important;
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    padding:0!important;overflow:hidden!important
  }
  .shell[data-app="max-cloud"] .main{
    grid-column:1!important;grid-row:1!important;min-width:0!important;min-height:0!important;
    height:auto!important;display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;
    overflow:hidden!important;background:var(--soft)!important
  }
  .shell[data-app="max-cloud"] .topbar{
    position:relative!important;top:auto!important;z-index:4!important;
    min-height:58px!important;max-height:none!important;padding:8px 10px!important;
    display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;
    overflow:visible!important
  }
  .shell[data-app="max-cloud"] .mobile-brand{
    display:block!important;flex:0 0 auto!important;width:38px!important;height:38px!important;
    max-width:38px!important;object-fit:contain!important
  }
  .shell[data-app="max-cloud"] .title-block{
    display:block!important;flex:1 1 100px!important;min-width:70px!important;overflow:hidden!important;margin:0!important
  }
  .shell[data-app="max-cloud"] .title-block h1{
    display:block!important;margin:0!important;font-size:.95rem!important;line-height:1.15!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
  }
  .shell[data-app="max-cloud"] .title-block p{display:none!important}
  .shell[data-app="max-cloud"] .tenant-select{
    flex:0 1 42vw!important;max-width:42vw!important;min-width:105px!important;
    min-height:42px!important;font-size:.75rem!important;padding:.42rem .5rem!important
  }
  .shell[data-app="max-cloud"] .topbar>.hint{
    font-size:.7rem!important;max-width:42vw!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important
  }
  .shell[data-app="max-cloud"] .master-preview-switch{
    order:5!important;width:100%!important;min-height:42px!important;justify-content:flex-start!important;
    flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;padding:4px!important;
    scrollbar-width:thin!important
  }
  .shell[data-app="max-cloud"] .master-preview-switch>span{flex:0 0 auto!important}
  .shell[data-app="max-cloud"] .master-preview-switch button{
    flex:0 0 auto!important;min-height:36px!important;padding:6px 10px!important
  }

  .shell[data-app="max-cloud"] .content{
    min-width:0!important;min-height:0!important;width:100%!important;max-width:none!important;
    margin:0!important;padding:12px 12px 20px!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;
    scroll-padding-block:12px 24px!important;scrollbar-gutter:stable!important;
    scrollbar-width:thin!important;scrollbar-color:color-mix(in srgb,var(--accent) 70%,#777) transparent!important
  }
  .shell[data-app="max-cloud"] .content::-webkit-scrollbar{width:8px!important}
  .shell[data-app="max-cloud"] .content::-webkit-scrollbar-track{background:transparent!important}
  .shell[data-app="max-cloud"] .content::-webkit-scrollbar-thumb{
    background:color-mix(in srgb,var(--accent) 70%,#777)!important;border-radius:10px!important
  }
  .shell[data-app="max-cloud"] .content :is(h1,h2,h3,h4,p,strong,span,small,label,a){overflow-wrap:anywhere!important}
  .shell[data-app="max-cloud"] .content>*{max-width:100%!important}
  .shell[data-app="max-cloud"] .content table{
    display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;
    white-space:nowrap!important;-webkit-overflow-scrolling:touch!important
  }
  .shell[data-app="max-cloud"] .cards,
  .shell[data-app="max-cloud"] .split{grid-template-columns:minmax(0,1fr)!important}
  .shell[data-app="max-cloud"] .form-grid{grid-template-columns:minmax(0,1fr)!important}
  .shell[data-app="max-cloud"] .field.span-2{grid-column:1!important}
  .shell[data-app="max-cloud"] .field input,
  .shell[data-app="max-cloud"] .field select,
  .shell[data-app="max-cloud"] .field textarea,
  .shell[data-app="max-cloud"] .button,
  .shell[data-app="max-cloud"] .quiet-button{min-height:44px!important;max-width:100%!important}
  .shell[data-app="max-cloud"] .row{
    grid-template-columns:minmax(0,1fr)!important;align-items:start!important;gap:.65rem!important
  }
  .shell[data-app="max-cloud"] .row-actions{justify-content:flex-start!important;width:100%!important}
  .shell[data-app="max-cloud"] .row-actions>*{max-width:100%!important}
  .shell[data-app="max-cloud"] .panel-title{
    align-items:flex-start!important;flex-direction:column!important;gap:.5rem!important
  }
  .shell[data-app="max-cloud"] .role-preview-banner{
    align-items:flex-start!important;flex-direction:column!important;gap:4px!important
  }
  .shell[data-app="max-cloud"] .role-preview-banner span{text-align:left!important}
  .shell[data-app="max-cloud"] .hero{padding:1rem!important}
  .shell[data-app="max-cloud"] .hero h2{font-size:clamp(1.25rem,6vw,1.7rem)!important}

  .shell[data-app="max-cloud"]>.sidebar{
    grid-column:1!important;grid-row:2!important;position:relative!important;inset:auto!important;
    z-index:20!important;width:100%!important;
    height:calc(112px + env(safe-area-inset-bottom))!important;
    min-height:calc(112px + env(safe-area-inset-bottom))!important;
    max-height:calc(112px + env(safe-area-inset-bottom))!important;
    display:grid!important;grid-template-rows:62px calc(50px + env(safe-area-inset-bottom))!important;
    gap:0!important;padding:0!important;margin:0!important;overflow:visible!important;
    background:var(--deep)!important;background-image:none!important;
    border-top:1px solid rgba(255,255,255,.16)!important
  }
  .shell[data-app="max-cloud"]>.sidebar::before,
  .shell[data-app="max-cloud"]>.sidebar>.brand,
  .shell[data-app="max-cloud"]>.sidebar>.sidebar-foot,
  .shell[data-app="max-cloud"]>.sidebar>.nav-desktop{display:none!important}

  .shell[data-app="max-cloud"] .mobile-nav{
    display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch!important;
    gap:5px!important;width:100%!important;height:62px!important;min-width:0!important;padding:7px 8px!important;
    overflow:visible!important;background:rgba(0,0,0,.14)!important
  }
  .shell[data-app="max-cloud"] .mobile-nav>button,
  .shell[data-app="max-cloud"] .mobile-nav>a,
  .shell[data-app="max-cloud"] .mobile-more-nav>summary{
    min-width:0!important;width:100%!important;min-height:48px!important;padding:6px 5px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    border:0!important;border-radius:12px!important;background:rgba(255,255,255,.08)!important;color:#fff!important;
    font:700 .68rem/1.12 Lexend,Arial,sans-serif!important;text-align:center!important;text-decoration:none!important;
    white-space:normal!important;overflow-wrap:anywhere!important;text-shadow:none!important;list-style:none!important
  }
  .shell[data-app="max-cloud"] .mobile-nav>button.is-active,
  .shell[data-app="max-cloud"] .mobile-nav>a.is-active,
  .shell[data-app="max-cloud"] .mobile-more-nav.is-active>summary{
    background:var(--accent)!important;color:var(--deep)!important;box-shadow:none!important
  }
  .shell[data-app="max-cloud"] .mobile-more-nav{position:relative!important;min-width:0!important}
  .shell[data-app="max-cloud"] .mobile-more-nav>summary::-webkit-details-marker{display:none!important}
  .shell[data-app="max-cloud"] .mobile-more-sheet{
    position:fixed!important;left:8px!important;right:8px!important;
    bottom:calc(116px + env(safe-area-inset-bottom))!important;z-index:60!important;
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important;
    max-height:min(62dvh,520px)!important;padding:10px!important;overflow-y:auto!important;
    overscroll-behavior:contain!important;border:1px solid rgba(255,255,255,.18)!important;
    border-radius:18px!important;background:rgba(8,15,22,.98)!important;
    box-shadow:0 -16px 40px rgba(0,0,0,.32)!important;scrollbar-width:thin!important
  }
  .shell[data-app="max-cloud"] .mobile-more-sheet>.master-nav-divider{
    grid-column:1/-1!important;margin:4px 0!important;padding:6px 4px!important;
    color:rgba(255,255,255,.66)!important;font-size:.68rem!important
  }
  .shell[data-app="max-cloud"] .mobile-more-sheet>button,
  .shell[data-app="max-cloud"] .mobile-more-sheet>a{
    min-height:48px!important;width:100%!important;padding:8px 10px!important;border:0!important;
    border-radius:12px!important;background:rgba(255,255,255,.08)!important;color:#fff!important;
    font:650 .73rem/1.2 Lexend,Arial,sans-serif!important;text-align:left!important
  }
  .shell[data-app="max-cloud"] .mobile-more-sheet>button.is-active,
  .shell[data-app="max-cloud"] .mobile-more-sheet>a.is-active{
    background:var(--accent)!important;color:var(--deep)!important
  }

  .shell[data-app="max-cloud"] .inapp-system-bar{
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:stretch!important;
    width:100%!important;min-height:50px!important;
    padding:4px 5px max(4px,env(safe-area-inset-bottom))!important;
    background:color-mix(in srgb,var(--deep) 96%,#000)!important;
    border-top:1px solid rgba(255,255,255,.10)!important
  }
  .shell[data-app="max-cloud"] .inapp-system-action{
    position:relative!important;display:flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;gap:2px!important;
    min-width:0!important;min-height:42px!important;margin:0!important;padding:2px!important;
    border:0!important;border-radius:10px!important;background:transparent!important;color:#fff!important;
    font:600 .61rem/1 Lexend,Arial,sans-serif!important;text-decoration:none!important;list-style:none!important
  }
  .shell[data-app="max-cloud"] .inapp-system-action>img{
    width:22px!important;height:22px!important;object-fit:contain!important
  }
  .shell[data-app="max-cloud"] .inapp-system-action>span:first-child{
    font-size:20px!important;line-height:20px!important
  }
  .shell[data-app="max-cloud"] .inapp-info-menu{position:relative!important;min-width:0!important}
  .shell[data-app="max-cloud"] .inapp-info-menu>summary::-webkit-details-marker{display:none!important}
  .shell[data-app="max-cloud"] .inapp-info-menu>nav{
    position:fixed!important;left:8px!important;right:8px!important;
    bottom:calc(116px + env(safe-area-inset-bottom))!important;z-index:61!important;
    display:grid!important;gap:6px!important;padding:10px!important;border-radius:16px!important;
    background:rgba(8,15,22,.98)!important;border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:0 -14px 34px rgba(0,0,0,.28)!important
  }
  .shell[data-app="max-cloud"] .inapp-info-menu:not([open])>nav{display:none!important}
  .shell[data-app="max-cloud"] .inapp-info-menu>nav a{
    min-height:44px!important;display:flex!important;align-items:center!important;padding:8px 12px!important;
    border-radius:10px!important;background:rgba(255,255,255,.07)!important;color:#fff!important;
    text-decoration:none!important;font-size:.78rem!important
  }
  .shell[data-app="max-cloud"] .inapp-language{cursor:pointer!important}
  .shell[data-app="max-cloud"] .inapp-language select{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    opacity:0!important;cursor:pointer!important
  }
}

/* MAX-Cloud login only: Android/Chrome autofill keeps the intended dark field. */
body:has(.max-public) .central-login-modal .field input:-webkit-autofill,
body:has(.max-public) .central-login-modal .field input:-webkit-autofill:hover,
body:has(.max-public) .central-login-modal .field input:-webkit-autofill:focus,
body:has(.max-public) .central-login-modal .field input:-webkit-autofill:active{
  -webkit-text-fill-color:#fff!important;caret-color:#fff!important;
  -webkit-box-shadow:0 0 0 1000px rgb(17,27,38) inset!important;
  box-shadow:0 0 0 1000px rgb(17,27,38) inset!important
}