/* Global scale to 90% across app */
html { zoom:0.9; }
/* Firefox fallback: scale main content wrappers; adjust selectors as needed */
@-moz-document url-prefix() {
  html { zoom:1; }
  body { transform:scale(.9); transform-origin:top center; }
}
/* Disable the desktop 90% zoom on mobile widths so touch targets/text render at natural size */
@media (max-width:768px) {
  html { zoom:1; }
  @-moz-document url-prefix() {
    body { transform:none; }
  }
}

/* Standardized Navigation Drawer Styles */
.nav-drawer {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  max-height: calc(100% - 40px);
  width: 240px !important;
  background: #ffffff;
  box-shadow: 0 4px 22px -6px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  transform: translateX(-260px) !important;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  z-index: 240;
  display: inline-flex;
  flex-direction: column;
  border-radius: 0 18px 18px 0;
  overflow: hidden;
}

.nav-drawer.open {
  transform: translateX(0) !important;
}

.nav-drawer-header {
  padding: 18px 20px 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-drawer-title {
  font-size: 15px !important;
  font-weight: 600;
  color: #1d1d1f;
}

.nav-drawer-close {
  background: none;
  border: none;
  font-size: 22px !important;
  line-height: 1;
  cursor: pointer;
  color: #555;
}

.nav-drawer-nav {
  padding: 0 12px 24px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-drawer-link {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px !important;
  font-weight: 500;
  text-decoration: none;
  color: #222;
  background: #f5f7fa;
  transition: all 0.2s ease;
}

.nav-drawer-link:hover {
  background: #e8f2ff;
}

.nav-drawer-link.active {
  font-weight: 600 !important;
  background: #007aff;
  color: #fff;
}

.nav-drawer-footer {
  margin-top: 12px;
  padding: 12px 18px 16px;
  font-size: 12px !important;
  color: #888;
  border-top: 1px solid #eef1f4;
}

.nav-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: saturate(140%) blur(10px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(10px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.3s ease !important;
  z-index: 230 !important;
}

/* Hamburger Button Styles */
.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.hamburger-btn:hover {
  background: rgba(0,0,0,0.05);
}

.hamburger-icon {
  width: 24px;
  height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.hamburger-line {
  width: 100%;
  height: 2px;
  background: #1d1d1f;
  border-radius: 1px;
  transition: all 0.3s ease;
}

/* ── Icon rail on wide viewports, expands to full sidebar on hover ──
   Below this breakpoint the nav stays as a hamburger-triggered overlay
   drawer (unchanged behavior). At/above it, a slim icon-only rail floats
   with a top/bottom inset and rounded corners (not edge-to-edge), always
   visible. The page reserves just enough space for that collapsed rail
   (plus its left inset) so it never sits on top of tiles/content — but
   only on pages that actually render #navDrawer (login and other
   nav-less pages are unaffected via :has()). Hovering it expands to the
   full labeled sidebar (240px), which floats as a true overlay beyond
   that reserved strip without shifting content further. Works
   regardless of which per-page toggle mechanism (inline style vs .open
   class) drives #navDrawer, since the !important transform below
   overrides both. Label text is hidden in the collapsed state via
   font-size:0 (inherited by the bare text nodes after each .nav-ico),
   while .nav-ico keeps its own explicit font-size so icons stay visible
   — no markup changes needed across the 6 pages that share this nav. */
@media (min-width:900px) {
  #navDrawer {
    transform: translateX(0) !important;
    left: 12px !important;
    top: 16px !important;
    height: calc(100vh - 32px) !important;
    max-height: calc(100vh - 32px) !important;
    width: 72px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(15,23,42,0.06);
    box-shadow: 0 8px 24px -8px rgba(0,0,0,0.2);
    transition: width .5s cubic-bezier(.4,0,.2,1), box-shadow .5s !important;
    overflow: hidden;
    z-index: 500;
  }
  #navDrawer:hover {
    width: 240px !important;
    box-shadow: 0 16px 40px -10px rgba(0,0,0,0.3);
  }
  #navToggle, #navClose, #navBackdrop {
    display: none !important;
  }
  body:has(#navDrawer) {
    padding-left: 96px;
  }
  /* Collapsed state: center icons, hide labels/title/footer text */
  #navDrawer .nav-drawer-head {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }
  #navDrawer .drawer-link {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0 !important;
  }
  #navDrawer .nav-drawer-title,
  #navDrawer .drawer-link,
  #navDrawer .nav-drawer-footer {
    font-size: 0 !important;
    white-space: nowrap;
    transition: font-size .35s;
  }
  #navDrawer .nav-ico {
    font-size: 16px !important;
  }
  /* Hover / expanded state: restore normal layout and label text */
  #navDrawer:hover .nav-drawer-head {
    justify-content: flex-start;
    padding-left: 18px !important;
    padding-right: 18px !important;
    gap: 11px !important;
  }
  #navDrawer:hover .drawer-link {
    justify-content: flex-start;
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 11px !important;
  }
  #navDrawer:hover .nav-drawer-title,
  #navDrawer:hover .drawer-link {
    font-size: 14px !important;
  }
  #navDrawer:hover .nav-drawer-footer {
    font-size: 11.5px !important;
  }
}