/* Shared premium mobile app dock - compact, predictable and thumb-safe v1.2 */
:root{
  --mobile-dock-clearance:6.55rem;
  --mobile-dock-safe-bottom:max(.55rem,env(safe-area-inset-bottom));
}

.mobile-dock{display:none}

@media(max-width:899px){
  html{
    scroll-padding-bottom:calc(var(--mobile-dock-clearance) + 1rem);
  }

  body.mobile-dock-enabled{
    padding-bottom:calc(var(--mobile-dock-clearance) + env(safe-area-inset-bottom))!important;
  }

  /* The shared dock is the single mobile navigation surface on every page. */
  body.mobile-dock-enabled .navbar-mobile-dock,
  body.mobile-dock-enabled .mobile-auth-dock,
  body.mobile-dock-enabled .portal-mobile-dock,
  body.mobile-dock-enabled .dashboard-mobile-dock{
    display:none!important;
  }

  body.mobile-dock-enabled .mobile-dock{
    display:grid!important;
  }

  body.mobile-dock-enabled #footer{
    margin-bottom:.75rem;
  }

  body.mobile-dock-enabled main,
  body.mobile-dock-enabled form,
  body.mobile-dock-enabled .modal-card,
  body.mobile-dock-enabled [role="dialog"]{
    scroll-padding-bottom:calc(var(--mobile-dock-clearance) + 1rem);
  }

  body.mobile-dock-enabled button,
  body.mobile-dock-enabled input,
  body.mobile-dock-enabled select,
  body.mobile-dock-enabled textarea,
  body.mobile-dock-enabled a{
    scroll-margin-bottom:calc(var(--mobile-dock-clearance) + 1rem);
  }

  .mobile-dock{
    position:fixed;
    z-index:160;
    left:50%;
    bottom:var(--mobile-dock-safe-bottom);
    width:min(calc(100% - 1rem),31rem);
    min-height:4.35rem;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    align-items:center;
    gap:.22rem;
    padding:.38rem;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.82);
    border-radius:1.3rem;
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,248,252,.96));
    box-shadow:
      0 24px 60px rgba(2,6,23,.34),
      0 5px 18px rgba(30,64,175,.14),
      inset 0 1px 0 rgba(255,255,255,.98);
    backdrop-filter:blur(24px) saturate(175%);
    -webkit-backdrop-filter:blur(24px) saturate(175%);
    transform:translateX(-50%);
    transform-origin:center bottom;
    opacity:1;
    visibility:visible;
    transition:
      opacity .2s ease,
      visibility .2s ease,
      transform .24s ease;
  }

  /* Prevent the dock from intercepting modal or keyboard actions. */
  body.mobile-dock-suspended .mobile-dock{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%,calc(100% + 2rem)) scale(.96);
  }

  .mobile-dock::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-top:3px solid rgba(30,64,175,.08);
    border-radius:inherit;
    background:radial-gradient(circle at 50% -110%,rgba(59,130,246,.2),transparent 62%);
    pointer-events:none;
  }

  .mobile-dock a,
  .mobile-dock button{
    position:relative;
    min-width:0;
    min-height:3.55rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.26rem;
    padding:.35rem .12rem .3rem;
    border:0;
    border-radius:.95rem;
    color:#64748b;
    background:transparent;
    font:inherit;
    font-size:.54rem;
    font-weight:850;
    line-height:1;
    text-align:center;
    text-decoration:none;
    transition:
      color .18s ease,
      background-color .18s ease,
      transform .18s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .mobile-dock a i,
  .mobile-dock button i{
    width:2rem;
    height:2rem;
    display:grid;
    place-items:center;
    border-radius:.68rem;
    color:#475569;
    background:#eef2f7;
    font-size:.86rem;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
    transition:
      color .18s ease,
      background .18s ease,
      box-shadow .18s ease,
      transform .18s ease;
  }

  .mobile-dock a span,
  .mobile-dock button span{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .mobile-dock a:hover,
  .mobile-dock a:focus-visible,
  .mobile-dock button:hover,
  .mobile-dock button:focus-visible{
    color:#1e40af;
    background:rgba(219,234,254,.48);
  }

  .mobile-dock a:hover i,
  .mobile-dock a:focus-visible i,
  .mobile-dock button:hover i,
  .mobile-dock button:focus-visible i{
    color:#1e40af;
    background:#dbeafe;
    transform:translateY(-1px);
  }

  .mobile-dock a:focus-visible,
  .mobile-dock button:focus-visible{
    outline:2px solid #38bdf8;
    outline-offset:2px;
  }

  .mobile-dock a.is-active,
  .mobile-dock a.active{
    z-index:2;
    color:#0a1e5c;
    background:linear-gradient(145deg,#e6efff,#e9fbf8);
    font-weight:900;
    box-shadow:inset 0 0 0 1px rgba(59,130,246,.11),0 8px 18px -15px rgba(30,64,175,.75);
  }

  .mobile-dock a.is-active::before,
  .mobile-dock a.active::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;
    width:1.55rem;
    height:.18rem;
    border:0;
    border-radius:0 0 999px 999px;
    background:linear-gradient(90deg,#2563eb,#0f766e);
    box-shadow:0 2px 8px rgba(37,99,235,.26);
    transform:translateX(-50%);
    pointer-events:none;
  }

  .mobile-dock a.is-active i,
  .mobile-dock a.active i{
    width:2.1rem;
    height:2.1rem;
    border-radius:.72rem;
    color:#fff;
    background:linear-gradient(145deg,#2563eb,#0f766e);
    box-shadow:0 8px 17px -10px rgba(30,64,175,.8),inset 0 1px 0 rgba(255,255,255,.28);
    font-size:.92rem;
  }
}

@media(max-width:380px){
  :root{--mobile-dock-clearance:6.35rem}
  .mobile-dock{width:calc(100% - .55rem);gap:0;padding-right:.28rem;padding-left:.28rem}
  .mobile-dock a{font-size:.49rem}
  .mobile-dock a i{width:1.82rem;height:1.82rem;font-size:.78rem}
  .mobile-dock a.is-active i,.mobile-dock a.active i{width:1.95rem;height:1.95rem;font-size:.84rem}
}

@media(max-height:540px) and (orientation:landscape) and (max-width:900px){
  :root{--mobile-dock-clearance:5.5rem}

  .mobile-dock{
    display:grid;
    min-height:3.85rem;
    max-width:35rem;
  }

  .mobile-dock a{
    min-height:2.9rem;
    flex-direction:row;
    justify-content:center;
    gap:.3rem;
    font-size:.51rem;
  }

  .mobile-dock a i{
    width:1.7rem;
    height:1.7rem;
  }

  .mobile-dock a.is-active,.mobile-dock a.active{flex-direction:row}
}

@media(prefers-reduced-motion:reduce){
  .mobile-dock,
  .mobile-dock *{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
  }
}

@media print{
  .mobile-dock{display:none!important}
}