/* Yusr V8.3 — structural mobile root fix. Loaded last. */

/* Universal safety rail for icons emitted by ui_icon(). This only caps runaway intrinsic SVG size. */
svg[aria-hidden="true"]{max-width:64px!important;max-height:64px!important}

/* Registration/onboarding: card icons are explicitly bounded on every viewport. */
.v8-role-card{overflow:hidden!important;isolation:isolate!important}
.v8-role-card>input[type="radio"]{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;min-width:1px!important;min-height:1px!important;max-width:1px!important;max-height:1px!important;margin:0!important;padding:0!important}
.v8-role-icon{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;flex:0 0 42px!important;display:grid!important;place-items:center!important;overflow:hidden!important}
.v8-role-icon svg[aria-hidden="true"]{width:21px!important;height:21px!important;min-width:21px!important;min-height:21px!important;max-width:21px!important;max-height:21px!important;display:block!important}
.v8-google-g{flex:0 0 28px!important}

/* Approved homepage hero is the only homepage hero. Legacy hero variants stay hidden even if nested. */
body.public-mode.v7-route-home main .hero,
body.public-mode.v7-route-home main .home-hero,
body.public-mode.v7-route-home main .public-hero,
body.public-mode.v7-route-home main [data-legacy-hero]{display:none!important}

/* Dashboard must never render the public footer / legacy brand as mobile content. */
body.dashboard-mode footer,
body.dashboard-mode .site-footer,
body.dashboard-mode .public-footer,
body.dashboard-mode .footer-grid,
body.dashboard-mode .footer-brand{display:none!important}

@media(max-width:820px){
  html,body{max-width:100%!important;overflow-x:hidden!important}

  /* Public header */
  body.public-mode .v7-public-header{padding:9px 0 0!important;background:transparent!important;position:relative!important}
  body.public-mode .v7-header-shell{height:58px!important;min-height:58px!important;padding:6px 9px!important;border-radius:18px!important;display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;overflow:hidden!important}
  body.public-mode .v7-brand{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:82px!important;max-width:82px!important;height:42px!important;overflow:hidden!important;padding:0!important;margin:0!important}
  body.public-mode .v7-brand img{display:block!important;width:76px!important;height:38px!important;min-width:0!important;max-width:76px!important;max-height:38px!important;object-fit:contain!important;margin:0!important}
  body.public-mode .v7-public-nav{display:none!important}
  body.public-mode .v7-header-actions{display:flex!important;grid-column:1!important;grid-row:1!important;align-items:center!important;justify-content:flex-end!important;gap:6px!important}
  body.public-mode .v7-desktop-only{display:none!important}

  /* PUBLIC bottom bar: every child uses one and only one component contract. */
  body.public-mode nav.v5-public-bottom{
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    right:8px!important;left:8px!important;bottom:max(8px,env(safe-area-inset-bottom))!important;
    height:72px!important;padding:7px 6px!important;overflow:hidden!important;
  }
  body.public-mode nav.v5-public-bottom>a,
  body.public-mode nav.v5-public-bottom>button,
  body.public-mode nav.v5-public-bottom .v5-bottom-item,
  body.public-mode nav.v5-public-bottom .v8-bottom-item{
    min-width:0!important;max-width:100%!important;height:58px!important;padding:0!important;margin:0!important;
    border:0!important;background:transparent;color:#8792a4!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
    border-radius:17px!important;font-size:9.8px!important;font-weight:800!important;line-height:1.15!important;overflow:hidden!important;
  }
  body.public-mode nav.v5-public-bottom .active{color:var(--navy)!important;background:linear-gradient(180deg,#eafafa,#f7fbfb)!important}
  body.public-mode nav.v5-public-bottom svg[aria-hidden="true"]{
    display:block!important;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;max-width:20px!important;max-height:20px!important;flex:0 0 20px!important;color:currentColor!important
  }
  body.public-mode nav.v5-public-bottom .active svg[aria-hidden="true"]{color:var(--teal)!important}
  body.public-mode nav.v5-public-bottom span{display:block!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  /* Dashboard mobile shell: explicit fallback styles so the header/nav cannot fall into document flow even if another stylesheet conflicts. */
  body.dashboard-mode .sidebar,
  body.dashboard-mode .dash-topbar,
  body.dashboard-mode .v5-dashboard-bottom,
  body.dashboard-mode .v5-mobile-sheet,
  body.dashboard-mode .v5-sheet-backdrop{display:none!important}
  body.dashboard-mode main,
  body.dashboard-mode .app-dashboard,
  body.dashboard-mode .dash-layout,
  body.dashboard-mode .dash-content,
  body.dashboard-mode .dash-content-inner{width:100%!important;max-width:100%!important;min-width:0!important}
  body.dashboard-mode .dash-content{margin:0!important;padding-top:72px!important}
  body.dashboard-mode .dash-content-inner{padding:14px 12px 100px!important;overflow:hidden!important}

  body.dashboard-mode .v8-mobile-dash-header{
    display:flex!important;position:fixed!important;z-index:135!important;
    top:calc(8px + env(safe-area-inset-top))!important;right:10px!important;left:10px!important;
    width:auto!important;height:56px!important;min-height:56px!important;max-height:56px!important;
    border:1px solid rgba(218,230,237,.94)!important;border-radius:18px!important;
    background:rgba(255,255,255,.95)!important;backdrop-filter:blur(20px) saturate(170%)!important;
    box-shadow:0 12px 34px rgba(8,36,64,.10)!important;
    align-items:center!important;justify-content:space-between!important;padding:5px 8px 5px 10px!important;overflow:hidden!important
  }
  body.dashboard-mode .v8-mobile-logo{display:flex!important;align-items:center!important;width:78px!important;height:42px!important;min-width:78px!important;max-width:78px!important;flex:0 0 78px!important;overflow:hidden!important}
  body.dashboard-mode .v8-mobile-logo img{display:block!important;width:72px!important;height:38px!important;min-width:0!important;max-width:72px!important;max-height:38px!important;object-fit:contain!important;margin:0!important}
  body.dashboard-mode .v8-mobile-head-actions{display:flex!important;gap:6px!important;align-items:center!important;height:44px!important;overflow:hidden!important}
  body.dashboard-mode .v8-mobile-head-actions>a,
  body.dashboard-mode .v8-mobile-head-actions>button{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;flex:0 0 42px!important;padding:0!important;margin:0!important;overflow:hidden!important}
  body.dashboard-mode .v8-mobile-head-actions svg[aria-hidden="true"]{display:block!important;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;max-width:20px!important;max-height:20px!important}
  body.dashboard-mode .v8-mobile-head-actions .avatar{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important;overflow:hidden!important;font-size:10px!important}

  body.dashboard-mode .v8-dashboard-bottom{
    display:grid!important;position:fixed!important;z-index:140!important;
    right:9px!important;left:9px!important;bottom:calc(9px + env(safe-area-inset-bottom))!important;
    width:auto!important;height:72px!important;min-height:72px!important;max-height:72px!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:4px!important;padding:6px!important;
    border-radius:22px!important;background:linear-gradient(135deg,#071e37,#0b304d)!important;
    border:1px solid rgba(255,255,255,.08)!important;box-shadow:0 18px 45px rgba(5,25,46,.28),inset 0 1px 0 rgba(255,255,255,.06)!important;
    overflow:hidden!important
  }
  body.dashboard-mode .v8-dashboard-bottom .v8-bottom-item{
    min-width:0!important;max-width:100%!important;height:60px!important;margin:0!important;padding:0 2px!important;
    border:0!important;background:transparent!important;color:rgba(255,255,255,.72)!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;
    border-radius:16px!important;font-size:9.5px!important;font-weight:800!important;line-height:1.12!important;overflow:hidden!important
  }
  body.dashboard-mode .v8-dashboard-bottom .v8-bottom-item.active{color:#fff!important;background:rgba(255,255,255,.10)!important}
  body.dashboard-mode .v8-dashboard-bottom .v8-bottom-item svg[aria-hidden="true"]{display:block!important;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;max-width:20px!important;max-height:20px!important;flex:0 0 20px!important;color:#fff!important}
  body.dashboard-mode .v8-dashboard-bottom .v8-bottom-item span{display:block!important;max-width:100%!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

  /* Dashboard sheet */
  body.dashboard-mode .v8-mobile-sheet{max-width:100vw!important;overflow-x:hidden!important}
  body.dashboard-mode .v8-sheet-link{overflow:hidden!important}
  body.dashboard-mode .v8-sheet-link svg[aria-hidden="true"]{display:block!important;width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;max-width:22px!important;max-height:22px!important}

  /* All reusable dashboard ui_icon containers get deterministic dimensions. */
  body.dashboard-mode .metric-icon svg[aria-hidden="true"],
  body.dashboard-mode .quick-action-icon svg[aria-hidden="true"],
  body.dashboard-mode .btn svg[aria-hidden="true"],
  body.dashboard-mode .badge svg[aria-hidden="true"],
  body.dashboard-mode .eyebrow svg[aria-hidden="true"],
  body.dashboard-mode .dash-date svg[aria-hidden="true"]{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;max-width:18px!important;max-height:18px!important}

  /* Onboarding mobile cards */
  .v8-register-shell{padding:22px 0 94px!important}
  .v8-register-card{width:calc(100% - 18px)!important;max-width:720px!important;padding:17px!important;overflow:hidden!important}
  .v8-role-cards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;align-items:stretch!important}
  .v8-role-card{min-width:0!important;min-height:118px!important;padding:13px 11px!important;gap:6px!important}
  .v8-role-icon{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;max-width:38px!important;max-height:38px!important;flex:0 0 38px!important}
  .v8-role-icon svg[aria-hidden="true"]{width:19px!important;height:19px!important;min-width:19px!important;min-height:19px!important;max-width:19px!important;max-height:19px!important}
  .v8-role-card strong{font-size:12px!important;line-height:1.35!important}.v8-role-card small{font-size:9.5px!important;line-height:1.45!important}

  /* General responsive guard across every role. */
  body.dashboard-mode .profile-shell,
  body.dashboard-mode .dash-panels,
  body.dashboard-mode .entity-grid,
  body.dashboard-mode .grid,
  body.dashboard-mode .grid-2,
  body.dashboard-mode .grid-3,
  body.dashboard-mode .grid-4,
  body.dashboard-mode .detail-grid,
  body.dashboard-mode .admin-quick-grid,
  body.dashboard-mode .form-grid,
  body.dashboard-mode .filter-grid{grid-template-columns:minmax(0,1fr)!important;max-width:100%!important;min-width:0!important}
  body.dashboard-mode .profile-main,
  body.dashboard-mode .profile-aside,
  body.dashboard-mode .dash-panel,
  body.dashboard-mode .card,
  body.dashboard-mode .entity-card,
  body.dashboard-mode .modern-form,
  body.dashboard-mode .form-section,
  body.dashboard-mode form{width:100%!important;max-width:100%!important;min-width:0!important}
  body.dashboard-mode input,
  body.dashboard-mode select,
  body.dashboard-mode textarea,
  body.dashboard-mode button{max-width:100%!important}
  body.dashboard-mode .table-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
}

@media(max-width:390px){
  body.public-mode nav.v5-public-bottom{right:6px!important;left:6px!important;height:70px!important}
  body.public-mode nav.v5-public-bottom>a,body.public-mode nav.v5-public-bottom>button{font-size:9px!important}
  body.dashboard-mode .v8-dashboard-bottom{right:6px!important;left:6px!important}
  body.dashboard-mode .v8-dashboard-bottom .v8-bottom-item{font-size:8.7px!important}
  .v8-role-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Runtime tripwire fallback */
.v83-runaway-icon{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;max-width:22px!important;max-height:22px!important}
