/* ============================================================
   Phone tab bar (next) — phone-nav.js. Prefix: .phn-
   Under 720px the bottom bar replaces the hamburger as the main way
   around; "More" opens the existing drawer. Off on desktop, on print,
   logged out, and on the employee portal (it has its own bar).
   Colors only from ivy-refresh.css tokens.
   ============================================================ */

:root { --phn-h: 62px; }

.phn-bar { display: none; }

@media (max-width: 720px) {
  body.phn-on:not(:has(.me-tabbar)) .phn-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(var(--phn-n, 5), minmax(0, 1fr));
    padding: 4px max(4px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
    background: var(--card); border-top: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }
  .phn-tab {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-width: 0; min-height: 54px; padding: 4px 2px; margin: 0;
    border: 0; border-radius: 12px; background: none; cursor: pointer;
    color: var(--fg-soft); font: 600 var(--fs-xs)/1.1 var(--font-sans, inherit);
    -webkit-tap-highlight-color: transparent;
  }
  .phn-ic { width: 22px; height: 22px; flex: none; }
  .phn-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .phn-tab.is-active { color: var(--teal-deep); }
  .phn-tab.is-active::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: 4px; width: 54px; height: 28px; margin-left: -27px;
    border-radius: 14px; background: var(--teal-soft);
  }
  .phn-tab.is-active .phn-ic { color: var(--teal); }
  .phn-tab:active { background: var(--muted-surface); }
  .phn-tab:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

  /* The bar is the way around now: the hamburger steps aside (More opens
     the same drawer). Content and floating buttons clear the bar. */
  body.phn-on:not(:has(.me-tabbar)) #sidebar-toggle { display: none; }
  body.phn-on:not(:has(.me-tabbar)) .app-root { padding-bottom: calc(var(--phn-h) + 28px + env(safe-area-inset-bottom)); }
  body.phn-on:not(:has(.me-tabbar)) .ivy-feedback-fab,
  body.phn-on:not(:has(.me-tabbar)) .ivy-feedback-recchip,
  body.phn-on:not(:has(.me-tabbar)) .fin-chat-fab,
  body.phn-on:not(:has(.me-tabbar)) .save-toast { bottom: calc(var(--phn-h) + 14px + env(safe-area-inset-bottom)); }
  body.phn-on:not(:has(.me-tabbar)) .ask-ivy-fab { bottom: calc(var(--phn-h) + 72px + env(safe-area-inset-bottom)); }
}

html.pre-auth .phn-bar,
body.hr-employee-locked .phn-bar { display: none; }

@media print {
  .phn-bar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .phn-tab { transition: none; }
}