/* EasyLeasey mobile white app shell
   Forces mobile to match the clean light desktop content UI and removes dark/light controls. */
@media (max-width: 820px){
  html,
  html[data-theme],
  html[data-theme="dark"],
  body,
  body.is-auth,
  body.is-guest{
    background:#f4f7fb !important;
    color:#0f172a !important;
    color-scheme:light !important;
  }

  .theme-toggle,
  [data-theme-toggle]{
    display:none !important;
  }

  body.is-auth .app-shell,
  body.is-auth .app-main,
  body.is-auth main.app-main,
  body.is-auth .app-container,
  body.is-auth .container,
  body.is-auth .main{
    background:#f4f7fb !important;
    color:#0f172a !important;
  }

  body.is-auth .app-main,
  body.is-auth main.app-main{
    padding:72px 12px 92px !important;
    min-height:100vh !important;
  }

  body.is-auth .app-container,
  body.is-auth .app-main > .container{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:0 !important;
  }

  body.is-auth .app-topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:58px !important;
    z-index:80 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px !important;
    padding:10px 12px calc(10px + env(safe-area-inset-top, 0px)) !important;
    background:rgba(255,255,255,.96) !important;
    border-bottom:1px solid #e8edf5 !important;
    box-shadow:0 8px 24px rgba(15,23,42,.06) !important;
    backdrop-filter:blur(14px) !important;
  }

  body.is-auth .app-brand{
    max-width:44px !important;
    width:44px !important;
    min-width:44px !important;
    height:40px !important;
    padding:0 !important;
    margin:0 auto 0 0 !important;
    border:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    background:transparent !important;
  }

  body.is-auth .app-brand-logo{
    content:url('/assets/img/brand/easyleasey-mobile-mark.svg?v=20260502white') !important;
    width:36px !important;
    height:36px !important;
    max-width:36px !important;
    max-height:36px !important;
    object-fit:contain !important;
    display:block !important;
  }

  body.is-auth .topbar-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:7px !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }

  body.is-auth .topbar-icon-btn,
  body.is-auth .burger-btn,
  body.is-auth .topbar-logout-icon-btn,
  body.is-auth .icon-btn{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    border-radius:999px !important;
    border:1px solid #e2e8f0 !important;
    background:#ffffff !important;
    color:#0f172a !important;
    box-shadow:0 8px 18px rgba(15,23,42,.06) !important;
  }

  body.is-auth .topbar-icon-btn .topbar-btn-text,
  body.is-auth .userbox{
    display:none !important;
  }

  body.is-auth .card,
  body.is-auth .panel,
  body.is-auth .box,
  body.is-auth .stat-card,
  body.is-auth .kpi-card,
  body.is-auth .dream-card,
  body.is-auth .dream-panel,
  body.is-auth .tablewrap,
  body.is-auth .empty-state,
  body.is-auth form.card{
    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid rgba(226,232,240,.92) !important;
    border-radius:18px !important;
    box-shadow:0 14px 34px rgba(15,23,42,.07) !important;
  }

  body.is-auth h1,
  body.is-auth h2,
  body.is-auth h3,
  body.is-auth h4,
  body.is-auth label,
  body.is-auth .title,
  body.is-auth .page-title,
  body.is-auth .dream-page-title,
  body.is-auth .dream-kpi-value,
  body.is-auth .dream-row-title{
    color:#0f172a !important;
  }

  body.is-auth .muted,
  body.is-auth .small,
  body.is-auth .subtext,
  body.is-auth .dream-kpi-label,
  body.is-auth .dream-row-sub{
    color:#64748b !important;
  }

  body.is-auth input,
  body.is-auth select,
  body.is-auth textarea{
    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid #dbe3ee !important;
    border-radius:12px !important;
    box-shadow:none !important;
  }

  body.is-auth input::placeholder,
  body.is-auth textarea::placeholder{
    color:#94a3b8 !important;
    opacity:1 !important;
  }

  body.is-auth table,
  body.is-auth .t{
    background:#ffffff !important;
    color:#0f172a !important;
  }

  body.is-auth .mobile-drawer-backdrop{
    background:rgba(15,23,42,.36) !important;
  }

  body.is-auth .mobile-drawer{
    background:#ffffff !important;
    color:#0f172a !important;
    border-left:1px solid #e8edf5 !important;
    box-shadow:-22px 0 60px rgba(15,23,42,.18) !important;
  }

  body.is-auth .mobile-drawer-head,
  body.is-auth .mobile-drawer-group{
    background:#ffffff !important;
    color:#0f172a !important;
  }

  body.is-auth .mobile-drawer-user-card,
  body.is-auth .mobile-drawer-link,
  body.is-auth .mobile-bottom-nav,
  body.is-auth .easy-mobile-more-sheet,
  body.is-auth .l2m-fab-menu{
    background:#ffffff !important;
    color:#0f172a !important;
    border:1px solid #e8edf5 !important;
    box-shadow:0 12px 28px rgba(15,23,42,.07) !important;
  }

  body.is-auth .mobile-drawer-link.active,
  body.is-auth .mobile-bottom-link.active,
  body.is-auth button.mobile-bottom-link.active,
  body.is-auth .mobile-bottom-more[aria-expanded="true"]{
    background:#eff6ff !important;
    color:#0b66f0 !important;
    border-color:#bfdbfe !important;
  }

  body.is-auth .mobile-drawer-title,
  body.is-auth .mobile-drawer-subtitle,
  body.is-auth .mobile-bottom-label{
    color:#64748b !important;
  }

  body.is-auth .mobile-bottom-nav{
    border-top:1px solid #e8edf5 !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    background:rgba(255,255,255,.97) !important;
    backdrop-filter:blur(14px) !important;
  }

  body.is-auth .mobile-bottom-link,
  body.is-auth button.mobile-bottom-link,
  body.is-auth .mobile-bottom-more{
    color:#334155 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }
}

/* Footer position fix for mobile white app UI.
   Keeps the app shell in normal document flow so the footer cannot float up above content. */
@media (max-width: 820px){
  body.is-auth .app-shell{
    min-height:100dvh !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    position:relative !important;
    overflow-x:hidden !important;
  }

  body.is-auth .app-main,
  body.is-auth main.app-main{
    flex:1 0 auto !important;
    min-height:calc(100dvh - 58px) !important;
    padding-bottom:calc(112px + env(safe-area-inset-bottom, 0px)) !important;
    position:relative !important;
    z-index:1 !important;
  }

  body.is-auth .app-footer{
    position:relative !important;
    inset:auto !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    flex:0 0 auto !important;
    width:100% !important;
    margin:0 !important;
    padding:14px 12px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    background:#ffffff !important;
    color:#64748b !important;
    border-top:1px solid #e8edf5 !important;
    box-shadow:none !important;
    z-index:0 !important;
  }

  body.is-auth .app-footer .container{
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
    margin:0 !important;
  }

  body.is-auth .footer-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
  }

  body.is-auth .footer-mark{
    background:#eff6ff !important;
    color:#0b66f0 !important;
    border:1px solid #bfdbfe !important;
    box-shadow:none !important;
  }
}


/* FAB polish: quiet premium dark action button instead of loud blue. */
@media (max-width: 980px){
  body.is-auth .l2m-fab-wrap.l2m-fab-mobile,
  body.is-auth .l2m-fab-mobile{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    right:16px !important;
    bottom:calc(var(--easy-mobile-nav-h, 66px) + 20px + var(--safe-b, env(safe-area-inset-bottom, 0px))) !important;
  }

  body.is-auth .l2m-fab-btn,
  body.is-auth html[data-theme="dark"] .l2m-fab-btn{
    width:54px !important;
    height:54px !important;
    min-width:54px !important;
    min-height:54px !important;
    max-width:54px !important;
    max-height:54px !important;
    background:#111827 !important;
    background-image:none !important;
    color:#ffffff !important;
    border:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 12px 26px rgba(15,23,42,.24) !important;
    font-size:32px !important;
    font-weight:700 !important;
    transform:translateZ(0) !important;
  }

  body.is-auth .l2m-fab-btn:hover,
  body.is-auth .l2m-fab-btn:focus-visible{
    background:#0f172a !important;
    box-shadow:0 14px 30px rgba(15,23,42,.28) !important;
    transform:translateY(-1px) !important;
  }

  body.is-auth .l2m-fab-btn:active{
    transform:translateY(0) scale(.98) !important;
  }

  body.is-auth #l2mFabMenu.l2m-fab-menu,
  body.is-auth .l2m-fab-menu.card{
    bottom:calc(var(--easy-mobile-nav-h, 66px) + 86px + var(--safe-b, env(safe-area-inset-bottom, 0px))) !important;
  }
}