/* Mobile navigation floats above content; loaded after the existing UI layers. */
@media screen and (max-width: 900px) {
  body.vbs-app {
    --vbs-mobile-nav-height: 76px;
    --vbs-floating-nav-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  html { scroll-padding-bottom: calc(102px + env(safe-area-inset-bottom, 0px)); }
  body.vbs-app.has-sidebar .main-content {
    padding-bottom: calc(var(--vbs-mobile-nav-height) + var(--vbs-floating-nav-bottom) + 16px);
  }
  body.vbs-app.has-sidebar .main-page-flow { padding-bottom: 16px; }
  body.vbs-app .mobile-tabbar {
    position: fixed;
    display: grid;
    left: max(10px, env(safe-area-inset-left, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    bottom: var(--vbs-floating-nav-bottom);
    z-index: 60;
    width: auto;
    max-width: 560px;
    height: var(--vbs-mobile-nav-height);
    margin: 0 auto;
    box-sizing: border-box;
    padding: 6px;
    gap: 4px;
    border: 1px solid #475569;
    border-radius: 22px !important;
    background: #1e293b;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .28);
    backdrop-filter: none;
  }
  body.vbs-app .mobile-tabbar .mobile-tabbar-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 4px 2px;
    box-sizing: border-box;
    border-radius: 16px !important;
    background: transparent;
    color: #cbd5e1 !important;
    box-shadow: none;
    text-align: center;
    text-decoration: none;
  }
  body.vbs-app .mobile-tabbar .mobile-tabbar-link strong {
    display: block;
    max-width: 100%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.vbs-app .mobile-tabbar .mobile-tabbar-link:hover { background: #334155; }
  body.vbs-app .mobile-tabbar .mobile-tabbar-link.is-active,
  body.vbs-app .mobile-tabbar .mobile-tabbar-link[aria-current="page"] {
    background: #1557b0;
    color: #fff !important;
  }
  body.vbs-app .mobile-tabbar .mobile-tabbar-link:focus-visible {
    outline: 3px solid #fbbf24;
    outline-offset: -3px;
  }
  body.vbs-app .mobile-tabbar .mobile-tabbar-icon {
    display: block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    background: currentColor;
    -webkit-mask: var(--vbs-tab-icon) center / contain no-repeat;
    mask: var(--vbs-tab-icon) center / contain no-repeat;
  }
  body.vbs-app .mobile-tabbar .mobile-tabbar-icon::before { content: none; }
  body.vbs-app .request-submit-bar {
    bottom: calc(var(--vbs-mobile-nav-height) + var(--vbs-floating-nav-bottom) + 12px);
  }
  body.vbs-app.is-virtual-keyboard-open .request-submit-bar { bottom: 8px; }
  body.vbs-app.sidebar-lock .mobile-tabbar { visibility: hidden; pointer-events: none; }
}
@media screen and (min-width: 901px) {
  body.vbs-app .mobile-tabbar { display: none; }
}
@media print {
  body.vbs-app .mobile-tabbar { display: none !important; }
}
body.vbs-app .mobile-tabbar .icon-dashboard { --vbs-tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%2010%209-7%209%207M5%209v12h5v-7h4v7h5V9%22%2F%3E%3C%2Fsvg%3E"); }
body.vbs-app .mobile-tabbar .icon-requests { --vbs-tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%225%22%20y%3D%223%22%20width%3D%2214%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%208h6M9%2012h6M9%2016h4%22%2F%3E%3C%2Fsvg%3E"); }
body.vbs-app .mobile-tabbar .icon-add { --vbs-tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%207v10M7%2012h10%22%2F%3E%3C%2Fsvg%3E"); }
body.vbs-app .mobile-tabbar .icon-profile { --vbs-tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M4%2021v-2a8%208%200%200%201%2016%200v2%22%2F%3E%3C%2Fsvg%3E"); }
body.vbs-app .mobile-tabbar .icon-approval { --vbs-tab-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2216%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m8%2012%203%203%205-6%22%2F%3E%3C%2Fsvg%3E"); }
