/* ==========================================================================
   nav.css
   Simple, dropdown-free top navigation bar + shared footer, shown on
   every page directly below/above the page's own brand-bar/content.

   Pure CSS, no JavaScript required:
   - Desktop: plain horizontal link row, active page underlined via
     .app-nav-link.is-active (set directly in each page's markup).
   - Mobile: hamburger menu uses the checkbox-trick (a hidden
     <input type="checkbox" id="app-nav-toggle"> paired with a <label>
     "hamburger" button and a CSS sibling-selector to show/hide the
     mobile panel — no click handlers needed).
   - Language toggle: same checkbox-trick, with
     <input type="checkbox" id="app-lang-toggle"> switching which of
     the paired .lang-hi / .lang-en spans are visible everywhere on
     the page via a single :checked ~ rule.
   ========================================================================== */

.app-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Softened from the original bright gold-gradient strip (2026-08-29) to
     a quieter single-tone warm cream (2026-08-30, "modernize the header"
     request) — keeps the shop's gold identity as a thin accent border
     instead of a loud fill, reads calmer on long shifts and looks less
     dated on mobile where the strip spans full width. */
  background: #fbf3e2;
  border-bottom: 1px solid #e9d9ac;
  font-family: "Be Vietnam Pro", sans-serif;
}

.app-nav-bar {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
}

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 600;
  color: #4d4635;
  background: transparent;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.app-nav-link .material-symbols-outlined {
  font-size: 19px;
}

/* Original design used a gold underline for hover/active, which relied
   on the nav bar itself being white — now that the whole strip is gold
   (see .app-nav above), that same gold underline would be invisible
   against a gold background. Switched to a solid dark-brown underline
   plus a light "pill" background on the active/hovered link so it still
   reads clearly against the gold strip. */
.app-nav-link:hover,
.app-nav-link.is-active {
  color: #3d3423;
  background: rgba(255, 255, 255, 0.35);
  border-bottom-color: #5d4200;
}

.app-nav-home {
  margin-right: 4px;
}

.app-nav-search {
  margin-left: auto;
}

/* ==========================================================================
   Nav dropdowns (Reports / Other Features) — added 2026-10-06. Pure CSS
   hover/focus reveal, same "no JS needed" posture as the rest of this
   file's checkbox-trick widgets; a dropdown's own menu width never affects
   .app-nav-bar's layout, so these can grow without ever reintroducing the
   overflow/cut-off problem the top-level links themselves had. */
.app-nav-dropdown {
  position: relative;
}

.app-nav-dropdown-caret {
  font-size: 16px !important;
  margin-left: -2px;
}

.app-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  max-width: 90vw;
  /* max-height + scroll (added 2026-10-06 alongside the Settings section)
     — Other Features now lists ~19 items, taller than some laptop
     viewports; this keeps it fully reachable instead of running off the
     bottom of the screen. */
  max-height: min(70vh, 480px);
  overflow-y: auto;
  overflow-x: hidden;
  background: #ffffff;
  border: 1px solid #e5e2e1;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  z-index: 70;
  padding: 6px;
}

.app-nav-dropdown:hover .app-nav-dropdown-menu,
.app-nav-dropdown:focus-within .app-nav-dropdown-menu {
  display: block;
}

/* Rightmost dropdown (Other Features, pushed to the bar's far right by
   .app-nav-search's margin-left:auto) — anchored from the right edge
   instead of the left, so its menu opens back toward the bar rather than
   spilling off the viewport's right edge. */
.app-nav-dropdown.app-nav-search .app-nav-dropdown-menu {
  left: auto;
  right: 0;
}

.app-nav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #1c1b1b;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.app-nav-dropdown-menu a:hover {
  background: #f6f3ea;
}

.app-nav-dropdown-menu .material-symbols-outlined {
  font-size: 18px;
  color: #735c00;
}

/* Section label inside a dropdown menu (e.g. "Settings" inside Other
   Features) — a plain divider/heading, not a link, so it needs its own
   rule rather than reusing .app-nav-dropdown-menu a. */
.app-nav-dropdown-menu-label {
  padding: 10px 12px 4px;
  margin-top: 4px;
  border-top: 1px solid #f0eded;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #9a9284;
}

.app-nav-dropdown-menu-label:first-child {
  margin-top: 0;
  border-top: none;
}

/* ==========================================================================
   Header widgets — quick search, quick-add, notifications, user badge.
   Added 2026-08-30 as part of the header modernization pass.
   ========================================================================== */
.app-header-search {
  position: relative;
  flex: 1;
  max-width: 360px;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #e5e2e1;
  border-radius: 9999px;
  padding: 0 14px;
  height: 40px;
  gap: 8px;
}

.app-header-search-icon {
  font-size: 19px;
  color: #948a72;
  flex-shrink: 0;
}

.app-header-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: #1c1b1b;
  width: 100%;
  min-width: 0;
}

.app-header-search-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e5e2e1;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 340px;
  overflow-y: auto;
  z-index: 70;
  padding: 6px;
}

.app-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: #1c1b1b;
}

.app-search-result:hover {
  background: #f6f3ea;
}

.app-search-result .material-symbols-outlined {
  font-size: 20px;
  color: #735c00;
  flex-shrink: 0;
}

.app-search-result-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-search-result-label {
  font-size: 13px;
  font-weight: 600;
  color: #1c1b1b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-search-result-sub {
  font-size: 11px;
  color: #7f7663;
}

.app-search-empty {
  padding: 14px 10px;
  font-size: 12px;
  color: #7f7663;
  text-align: center;
}

.app-header-iconbtn {
  height: 40px;
  width: 40px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4d4635;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
  flex-shrink: 0;
  position: relative;
}

.app-header-iconbtn:hover {
  background: #efe6cb;
}

.app-header-logoutbtn {
  color: #8c1d18;
}

.app-header-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 9999px;
  background: #b3261e;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* Quick-add + notifications share the same "checkbox-driven popover"
   pattern used elsewhere in this app — no JS needed to show/hide. */
.app-header-popover-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app-header-quickadd,
.app-header-notif {
  position: relative;
}

.app-header-popover {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid #e5e2e1;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  z-index: 70;
  overflow: hidden;
}

.app-header-popover-toggle:checked ~ .app-header-popover {
  display: block;
}

.app-header-quickadd-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  text-decoration: none;
  color: #1c1b1b;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #f0eded;
}

.app-header-quickadd-menu a:last-child {
  border-bottom: none;
}

.app-header-quickadd-menu a:hover {
  background: #f6f3ea;
}

.app-header-quickadd-menu .material-symbols-outlined {
  font-size: 19px;
  color: #735c00;
}

.app-header-notif-menu {
  min-width: 280px;
  max-width: 92vw;
}

.app-header-quickadd-menu {
  max-width: 92vw;
}

.app-header-popover-title {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #735c00;
  border-bottom: 1px solid #f0eded;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.app-header-notif-list {
  max-height: 300px;
  overflow-y: auto;
}

.app-header-notif-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  text-decoration: none;
  border-bottom: 1px solid #f0eded;
}

.app-header-notif-item:hover {
  background: #f6f3ea;
}

.app-header-notif-icon {
  font-size: 20px;
  color: #b3261e;
  flex-shrink: 0;
}

.app-header-notif-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-header-notif-item-name {
  font-size: 13px;
  font-weight: 600;
  color: #1c1b1b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header-notif-item-days {
  font-size: 11px;
  color: #b3261e;
  font-weight: 600;
}

.app-header-notif-empty {
  padding: 20px 14px;
  text-align: center;
  font-size: 12px;
  color: #7f7663;
}

.app-header-popover-footer {
  display: block;
  padding: 12px 14px;
  text-align: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  color: #735c00;
  background: #fbf3e2;
}

.app-header-popover-footer:hover {
  background: #f0e4bf;
}

.app-header-userbadge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 9999px;
  background: #f6f3ea;
  flex-shrink: 0;
}

.app-header-userbadge .material-symbols-outlined {
  font-size: 26px;
  color: #735c00;
}

.app-header-userbadge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.app-header-userbadge-name {
  font-size: 12px;
  font-weight: 700;
  color: #1c1b1b;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header-userbadge-role {
  font-size: 10px;
  color: #7f7663;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.app-nav-mobile-search {
  margin: 12px 16px;
  max-width: none;
}

.app-nav-mobile-userbadge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #f6f3ea;
}

.app-nav-mobile-userbadge .material-symbols-outlined {
  font-size: 30px;
  color: #735c00;
}

/* ==========================================================================
   Bottom tab bar — phones only (see @media block below for activation).
   Puts the 4 most-used destinations one thumb-tap away since most
   shopkeepers' primary/only device is a phone, not a desktop.
   ========================================================================== */
.app-bottom-tabbar {
  display: none;
}

/* ==========================================================================
   Language toggle (Hindi / English) — pure CSS checkbox trick.
   The checkbox lives once in the header markup; every .lang-hi/.lang-en
   pair anywhere in the DOM (header AND page body) responds to it via the
   general sibling combinator, since the checkbox is placed as an early
   sibling of <body>'s content.
   ========================================================================== */
#app-lang-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app-lang-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 44px;
  border-radius: 9999px;
  background: #eae7e7;
  color: #4d4635;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.app-lang-toggle-btn:hover {
  background: #d0c5af;
}

.app-lang-toggle-btn .app-lang-toggle-hi-label {
  display: inline;
}

.app-lang-toggle-btn .app-lang-toggle-en-label {
  display: none;
}

#app-lang-toggle:checked ~ * .app-lang-toggle-btn .app-lang-toggle-hi-label,
#app-lang-toggle:checked ~ .app-lang-toggle-btn .app-lang-toggle-hi-label {
  display: none;
}

#app-lang-toggle:checked ~ * .app-lang-toggle-btn .app-lang-toggle-en-label,
#app-lang-toggle:checked ~ .app-lang-toggle-btn .app-lang-toggle-en-label {
  display: inline;
}

.lang-en {
  display: none;
}

#app-lang-toggle:checked ~ * .lang-hi {
  display: none;
}

#app-lang-toggle:checked ~ * .lang-en {
  display: inline;
}

/* ---- Mobile hamburger menu — pure CSS checkbox trick ---- */
#app-nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app-nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  color: #4d4635;
  margin-left: 4px;
  user-select: none;
}

.app-nav-hamburger:hover {
  background: #f0eded;
}

.app-nav-mobile-backdrop {
  display: none;
}

.app-nav-mobile-panel {
  display: none;
}

/* ---- Tablet & phone ---- */
@media (max-width: 900px) {
  .app-nav-desktop-only {
    display: none;
  }

  .app-nav-hamburger {
    display: flex;
    margin-left: auto;
  }

  .app-nav-bar {
    padding: 6px 12px;
  }

  /* The whole horizontal link row collapses into the hamburger panel +
     bottom tab bar on tablet/phone widths — .app-nav itself would just
     be an empty sticky bar otherwise. */
  .app-nav {
    display: none;
  }

  #app-nav-toggle:checked ~ * .app-nav-mobile-backdrop,
  #app-nav-toggle:checked ~ .app-nav-mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 60;
  }

  .app-nav-mobile-panel {
    display: block;
    position: fixed;
    top: 0;
    right: -100%;
    width: min(85vw, 360px);
    height: 100%;
    background: #ffffff;
    z-index: 61;
    overflow-y: auto;
    transition: right 0.25s ease;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.2);
  }

  #app-nav-toggle:checked ~ * .app-nav-mobile-panel,
  #app-nav-toggle:checked ~ .app-nav-mobile-panel {
    right: 0;
  }

  .app-nav-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #e5e2e1;
    position: sticky;
    top: 0;
    background: #ffffff;
  }

  .app-nav-mobile-title {
    font-weight: 700;
    font-size: 16px;
    color: #735c00;
  }

  .app-nav-mobile-close {
    border: none;
    background: transparent;
    cursor: pointer;
    color: #4d4635;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .app-nav-mobile-close:hover {
    background: #f0eded;
  }

  .app-nav-mobile-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: #1c1b1b;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #f0eded;
  }

  .app-nav-mobile-link .material-symbols-outlined {
    font-size: 20px;
    color: #735c00;
  }

  .app-nav-mobile-link.is-active {
    background: #f6f3f2;
  }

  /* Section headers ("Notifications", "Quick Add") introduced 2026-09-14
     when those two moved out of the header into this panel — same
     visual language as .app-nav-mobile-title, but sits inline in the
     list rather than the panel's own sticky top bar. */
  .app-nav-mobile-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 16px 6px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #7f7663;
  }

  .app-nav-mobile-notif-list {
    max-height: 240px;
    overflow-y: auto;
  }

  .app-nav-mobile-notif-list .app-header-notif-item {
    padding: 10px 16px;
    border-bottom: 1px solid #f0eded;
  }

  .app-nav-mobile-notif-list .app-header-notif-empty {
    padding: 10px 16px;
    font-size: 13px;
    color: #7f7663;
  }
}

@media (min-width: 901px) {
  .app-nav-mobile-only {
    display: none;
  }
}

/* ==========================================================================
   Page-owned sticky footers (e.g. the Girvi Entry wizard's Back/Next
   action bar) are `position: fixed; bottom: 0` in their own page markup.
   On phones, that collides with .app-bottom-tabbar (also fixed at
   bottom:0, on top thanks to its higher z-index) — the wizard's own
   Back/Next buttons end up hidden behind the tab bar, nearly unusable
   (reported 2026-09-06). Any page-footer that opts into this class gets
   pushed up to sit ABOVE the tab bar on phones, and drops back to
   bottom:0 everywhere the tab bar doesn't exist (tablet/desktop).
   ========================================================================== */
.app-page-sticky-footer {
  z-index: 50;
}

@media (max-width: 640px) {
  .app-page-sticky-footer {
    bottom: 64px !important;
  }
}

/* Bottom tab bar activates only on phone-width screens — tablets get the
   hamburger panel but keep the header's own icon row uncluttered since
   there's more width to work with. */
@media (max-width: 640px) {
  .app-bottom-tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 55;
    background: #ffffff;
    border-top: 1px solid #e5e2e1;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
    /* Promotes this bar to its own GPU compositor layer so mobile
       Safari/Chrome doesn't have to repaint it against the page on every
       scroll frame — without this, the bar can visibly lag/overlap page
       content for a moment right as the browser's address bar
       shrinks/grows mid-scroll (reported 2026-09-06: button briefly
       hidden behind the tab bar right after a scroll settles). */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
  }

  .app-bottom-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 4px 6px;
    text-decoration: none;
    color: #7f7663;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
  }

  .app-bottom-tab .material-symbols-outlined {
    font-size: 22px;
  }

  .app-bottom-tab.is-active {
    color: #735c00;
  }

  .app-bottom-tab.is-active .material-symbols-outlined {
    font-variation-settings: "FILL" 1;
  }

  /* Keep page content (and this app's own sticky footer) clear of the
     fixed bottom tab bar so nothing renders underneath it. 80px (not
     just the bar's own ~64px height) leaves real breathing room for
     the brief moment mid-scroll when a mobile browser's address bar is
     animating in/out and the fixed bar's effective position can lag by
     a few pixels — reported 2026-09-06 as a button briefly tucking
     behind the tab bar right as a scroll settles. Pages that need extra
     clearance (e.g. a page ending in a large button) can still add
     their own larger pb-* on top of this. */
  body {
    padding-bottom: 80px;
  }
}

@media (min-width: 641px) {
  .app-bottom-tabbar {
    display: none !important;
  }
}

/* ==========================================================================
   Shared footer — compact, 2 rows total, mirrors the header's own
   row-based layout instead of a tall multi-column block.
   Row 1: brand + a horizontally-scrollable quick-links strip (same
          overflow-x pattern as .app-nav-bar).
   Row 2: address + phone + copyright, all on one line (wraps on very
          narrow phones only).
   ========================================================================== */
.app-footer {
  background: #fcf9f8;
  border-top: 1px solid #e5e2e1;
  margin-top: 32px;
  font-family: "Be Vietnam Pro", sans-serif;
}

.app-footer-row {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
}

.app-footer-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #735c00;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

.app-footer-brand .material-symbols-outlined {
  font-size: 18px;
}

.app-footer-links {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}

.app-footer-links::-webkit-scrollbar {
  display: none;
}

.app-footer-links a {
  color: #4d4635;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}

.app-footer-links a:hover {
  color: #735c00;
  background: #f0eded;
}

.app-footer-bottom {
  border-top: 1px solid #e5e2e1;
  padding: 8px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  text-align: center;
  color: #7f7663;
  font-size: 11px;
}

.app-footer-bottom .app-footer-dot {
  opacity: 0.6;
}

@media (max-width: 767px) {
  .app-footer-row {
    padding: 8px 12px;
  }

  .app-footer-brand span:last-child {
    display: none;
  }
}

/* ==========================================================================
   Breadcrumb — plain HTML/CSS, no JS. Shows the path from Home down to
   the current page inside a section (currently only Reports & Accounts:
   Home > Reports > Daily Cash Book, etc.).
   ========================================================================== */
.app-breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
  color: #7f7663;
}

.app-breadcrumb a {
  color: #7f7663;
  text-decoration: none;
}

.app-breadcrumb a:hover {
  color: #735c00;
  text-decoration: underline;
}

.app-breadcrumb .app-breadcrumb-current {
  color: #735c00;
  font-weight: 600;
}

.app-breadcrumb .material-symbols-outlined {
  font-size: 16px;
  color: #c9bfa0;
}