/* ============================================
   BOTTOM NOTCH — mobile navigation
   The sidebar laid flat. Shown below md (where the
   sidebar is display:none) and built from the same nav
   data as the sidebar via partials/nav-items.ejs.

   Brand: charcoal surface on black, hairline borders,
   Syne for the wordmark, amber as the only accent —
   the sidebar's `border-left: 3px solid var(--amber)`
   active rule turned horizontal.
   ============================================ */

:root {
  --notch-h: 60px;
  --notch-safe-b: env(safe-area-inset-bottom, 0px);
  --notch-bg: rgba(26, 26, 26, .94);
  --notch-line: rgba(255, 255, 255, .08);
}

/* ── The bar ─────────────────────────────────────── */
.bottom-notch {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1200;
  display: flex;
  justify-content: center;
  /* ties the bar's own height to --notch-h, which the body inset below is
     derived from, so the two can never drift apart */
  min-height: var(--notch-h);
  background: var(--notch-bg);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--notch-line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .45);
  padding-bottom: var(--notch-safe-b);
  font-family: 'DM Sans', sans-serif;
}

.notch-inner {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 560px;
  min-width: 0;
}

/* ── A destination in the bar ────────────────────── */
.notch-link {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 9px 2px 7px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .45);
  text-decoration: none;
  cursor: pointer;
  transition: color .16s ease;
  -webkit-tap-highlight-color: transparent;
}

/* the sidebar's amber active rule, turned horizontal */
.notch-link::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 0;
  height: 2px;
  transform: translateX(-50%);
  background: var(--amber, #F97316);
  border-radius: 0 0 2px 2px;
  transition: width .18s ease;
}

.notch-link:hover { color: rgba(255, 255, 255, .8); }
.notch-link.active,
.notch-link[aria-current="page"] { color: var(--amber, #F97316); }
.notch-link.active::before,
.notch-link[aria-current="page"]::before { width: 22px; }

.notch-icon {
  position: relative;
  display: block;
  width: 24px;
  font-size: 19px;
  line-height: 1;
  text-align: center;
}

.notch-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notch-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 100px;
  border: 1.5px solid var(--charcoal, #1A1A1A);
  background: var(--red, #f87171);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 12px;
  text-align: center;
}

/* ── "All sections" sheet ────────────────────────── */
.notch-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(10, 10, 10, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.notch-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1310;
  display: flex;
  flex-direction: column;
  max-height: min(78vh, 620px);
  background: var(--charcoal, #1A1A1A);
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, .6);
  padding-bottom: var(--notch-safe-b);
  font-family: 'DM Sans', sans-serif;
  animation: notchSheetIn .22s ease;
}

@keyframes notchSheetIn {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.notch-grabber {
  flex: 0 0 auto;
  width: 36px;
  height: 4px;
  margin: 10px auto 4px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .18);
}

.notch-panel-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.notch-panel-logo {
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -1px;
  color: var(--white, #FFFFFF);
}
.notch-panel-logo .ova { color: var(--amber, #F97316); }

.notch-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.notch-close:hover { color: var(--white, #FFFFFF); border-color: rgba(255, 255, 255, .3); }
.notch-close:focus-visible { outline: 2px solid var(--amber, #F97316); outline-offset: 2px; }

.notch-panel-inner {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 6px 0 10px;
}

/* the sheet reuses the sidebar's own link styling, with
   touch-sized rows instead of the sidebar's 4px padding */
.notch-panel .nav-item {
  padding: 11px 20px;
  font-size: 14px;
}
.notch-panel .nav-icon { font-size: 18px; width: 24px; }

.notch-panel .sidebar-section-label { padding: 0 20px; margin-top: 6px; }

.notch-panel-user {
  margin: 8px 16px 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

/* ── Tablet and up: the sidebar is the navigation, so the
   sheet can never overlay it even if left open. ─────── */
@media (min-width: 768px) {
  .notch-panel,
  .notch-backdrop { display: none !important; }
}

/* Every view wraps the sidebar in `.d-none.d-md-block`, so from md up the
   sidebar is meant to be on screen. A dozen page stylesheets still carry a
   copy-pasted `@media (max-width: 960px) { .sidebar { display: none } }`
   (admin-manage-user, audit-logs, customer, messages-archived, newExpense,
   notifications, settings-index, team, unpaid, …) which hid it far past the
   point where it disappears. Those pages had no navigation at all between
   768–991px: the sidebar was gone and the notch is `d-md-none` there. This
   reinstates the sidebar across that band without touching every page file —
   as the 72px icon rail defined in sidebar.css, so it costs the content only
   72px instead of 240px. `!important` is required because page stylesheets
   load after this file. */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .sidebar-container .sidebar { display: flex !important; }
}

/* ── Narrow phones: keep five tabs legible ────────── */
@media (max-width: 359px) {
  :root { --notch-h: 56px; }
  .notch-link { font-size: 9px; }
  .notch-icon { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .notch-panel { animation: none; }
  .notch-link,
  .notch-link::before { transition: none; }
}


/* ── More (opens the sheet) ──────────────────────── */
.notch-more[aria-expanded="true"] { color: var(--amber, #F97316); }
.notch-more[aria-expanded="true"]::before { width: 22px; }
.notch-more .notch-icon { font-size: 21px; }

.notch-link:focus-visible {
  color: var(--amber, #F97316);
  outline: 2px solid var(--amber, #F97316);
  outline-offset: -3px;
  border-radius: 10px;
}

/* ── Content inset so the bar never covers the page ──
   body is a column flexbox, so one padding keeps main
   content AND the site footer clear of the fixed bar.
   !important: per-page stylesheets (messages, POS, …)
   are linked after this file and set body padding. */
@media (max-width: 767.98px) {
  body.has-bottom-notch {
    padding-bottom: calc(var(--notch-h) + var(--notch-safe-b)) !important;
  }

  /* Toasts and confirmation modals vs. the bar.
     Toasts are `fixed; bottom:20px` and a few pages re-declare the rack at
     `z-index:999`, so on a phone they used to land on — or behind — the notch;
     `.modal-overlay` (z-index 1000) painted *under* the bar, which left the
     bottom 60px of an open dialog looking like part of the page. Both are
     lifted above the bar from here, so no page stylesheet has to know about
     the notch. Sheet backdrop/panel (1300/1310) stay above modals — they are
     never open at the same time, and the sheet must win if they ever were. */
  body.has-bottom-notch #toastRack {
    bottom: calc(var(--notch-h) + var(--notch-safe-b) + 12px);
    z-index: 9999;
  }
  body.has-bottom-notch .modal-overlay {
    z-index: 1250;
  }
}