/* Bottom bar and hub pages below 992px (owner: nav-kit). Spec: docs/plan/20261028-dpro-mobile-nav/plan.md 3.1. */

/* Bottom bar: hidden at 992px and up; the rules below show it on phones and tablets. */
.bottom-nav { display: none; }

@media not all and (min-width: 992px) {
  .bottom-nav {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 30;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 0 max(var(--space-2), var(--safe-r)) var(--safe-b) max(var(--space-2), var(--safe-l));
  }
  .bottom-nav-list { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; }
  .bottom-nav-item { position: relative; min-width: 0; }
  .bottom-nav-link {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
    width: 100%; min-height: var(--bottomnav-h); padding: var(--space-1) var(--space-1);
    color: var(--ink-muted); font: inherit; font-size: var(--fs-1); line-height: 1.2; text-decoration: none;
    background: none; border: 0; cursor: pointer;
  }
  .bottom-nav-link:hover { color: var(--ink); }
  .bottom-nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-md); }
  .bottom-nav-icon { display: inline-grid; place-items: center; width: 3.5rem; height: 2rem; border-radius: var(--radius-pill); }
  .bottom-nav-icon .icon { width: 1.375rem; height: 1.375rem; }
  .bottom-nav-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Current item: a soft pill behind the icon and a bold label. */
  .bottom-nav-link[aria-current="page"] { color: var(--ink); }
  .bottom-nav-link[aria-current="page"] .bottom-nav-icon { background: var(--accent-wash); color: var(--accent); }
  .bottom-nav-link[aria-current="page"] .bottom-nav-label { font-weight: 600; }

  /* Featured item (Calendar): the pill is always filled (owner Q1 = A); a ring when it is current. */
  .is-featured .bottom-nav-icon { width: 4rem; height: 2.5rem; background: var(--accent); color: var(--accent-ink); }
  .is-featured .bottom-nav-link[aria-current="page"] .bottom-nav-icon { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 0.1875rem var(--accent-border); }

  /* Disabled item (Reports for Dentist and Assistant): a details/summary, so a tap (also on iOS), click or Enter opens the reason. */
  .bottom-nav-disabled > summary { list-style: none; }
  .bottom-nav-disabled > summary::-webkit-details-marker { display: none; }
  .bottom-nav-link.is-disabled { cursor: not-allowed; color: var(--ink-muted); }
  .bottom-nav-link.is-disabled:hover { color: var(--ink-muted); }
  .bottom-nav-link.is-disabled .bottom-nav-icon { color: var(--border-strong); }
  .bottom-nav-hint {
    display: none; position: absolute; bottom: calc(100% + var(--space-1)); right: 0; z-index: 50;
    width: max-content; max-width: 12rem; padding: var(--space-2) var(--space-3);
    background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-1); font-size: var(--fs-2); line-height: 1.3; white-space: normal; text-align: left;
  }
  .bottom-nav-disabled[open] > .bottom-nav-hint { display: block; }

  /* The shell around a visible bar: content and toasts stay above it; the hamburger hides (owner Q3 = A). */
  body:has(.bottom-nav:not([hidden])) .shell-main { padding-bottom: calc(var(--bottomnav-h) + var(--safe-b)); }
  body:has(.bottom-nav:not([hidden])) .toasts { bottom: calc(var(--bottomnav-h) + var(--safe-b) + var(--space-3)); }
  body:has(.bottom-nav:not([hidden])) .nav-toggle { display: none; }

  /* The on-screen keyboard is open: hide the bar while a text field has focus. */
  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="file"], [type="range"], [type="color"]), textarea, select, [contenteditable="true"]):focus) .bottom-nav { display: none; }
}

@media print {
  .bottom-nav { display: none !important; }
  body .shell-main { padding-bottom: 0; }
}

/* Hub pages (all widths): one card per group, rows of links. */
.nav-hub { display: grid; gap: var(--space-4); }
.nav-hub-card { overflow: hidden; }
.nav-hub-card .card-body.flush { padding: var(--space-2) 0 0; }
.nav-hub-list { margin: 0; padding: 0; list-style: none; }
.nav-hub-item + .nav-hub-item { border-top: 1px solid var(--border); }
.nav-hub-link {
  display: flex; align-items: center; gap: var(--space-3); min-height: var(--touch);
  padding: var(--space-2) var(--space-5); color: var(--ink); text-decoration: none;
}
.nav-hub-link:hover { background: var(--surface-2); }
.nav-hub-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.nav-hub-link[aria-current="page"] { background: var(--accent-wash); }
.nav-hub-link > .icon { flex: none; color: var(--ink-muted); }
.nav-hub-label { flex: 1 1 auto; min-width: 0; }
.nav-hub-chevron { display: inline-grid; flex: none; color: var(--ink-muted); }
.nav-hub-signout-form { margin: 0; }
.nav-hub-signout { justify-content: center; }
@media not all and (min-width: 640px) { .nav-hub-signout { width: 100%; } }