/* ============================================================
   Hifzhelper — navigation: auth band, dropdown menu, home tiles
   ============================================================ */

/* ---- Auth band across the top ---- */
#authBand {
  background: var(--color-banner);
  color: var(--color-banner-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* padding-top adds the device's safe-area inset (the iOS notch/status
     bar) on top of the normal spacing — confirmed Safari-only issue
     (Android was fine): viewport-fit=cover lets the band's background
     extend under the status bar for a full-bleed look, but without this
     the actual TEXT inside it (and by extension #welcomeBanner/#appContent
     right below it) rendered under the notch too. env() falls back to 0px
     on browsers/devices without a safe area, so this is a no-op there. */
  padding: var(--space-sm) var(--space-md);
  padding-top: calc(var(--space-sm) + env(safe-area-inset-top, 0px));
  position: sticky;
  top: 0;
  z-index: 100;
}
#authBand .user-name {
  font-weight: 600;
  font-size: 15px;
}
#authBandToggle {
  color: var(--color-banner-text);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
}
#authBandToggle svg { width: 20px; height: 20px; transition: transform 0.15s; }
#authBandToggle.open svg { transform: rotate(180deg); }

/* Slide-down menu — appears directly under the band.
   2026-08-03: now fixed to the viewport rather than sitting in normal
   document flow. #authBand is sticky, so it correctly stays pinned to
   the top as the page scrolls -- but this element had no positioning of
   its own, so it opened at its original spot near the top of the
   document. Once scrolled past, tapping the (still-reachable) toggle
   looked like it did nothing: the menu genuinely opened, just off-screen
   above the current view. --auth-band-height is set live in JS
   (js/auth.js's toggleAuthDropdown) rather than hardcoded here, since
   the band's real height varies by device (env(safe-area-inset-top) for
   a notch) -- the fallback below only matters before that JS has run
   for the first time. */
#authDropdown {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-table-border);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--auth-band-height, 60px);
  z-index: 99;
}
#authDropdown.open {
  max-height: 400px;
}
#authDropdown .dropdown-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  padding: var(--space-md);
}
@media (min-width: 720px) {
  #authDropdown .dropdown-inner { grid-template-columns: repeat(6, 1fr); }
}
#authDropdown .dropdown-divider {
  grid-column: 1 / -1;
  border-top: 1px solid var(--color-table-border);
  margin: var(--space-xs) 0;
}
/* Sets it apart as the one different-in-kind action in this menu — only
   the icon turns red, the "Log out" label stays the normal ink color. */
#logoutBtn svg { color: var(--color-error); }

/* ---- Home page (V3.41.1 restructure, V3.43 reconsidered) ---- */
/* V3.43: Home's own olive/sage screen background (V3.41.1) is REMOVED
   -- every screen is white by default now (css/base.css's .screen
   rule), Home is no longer a special case. Its header TEXT is deleted
   entirely too (index.html) -- just the lavender icon remains, so the
   white-heading-text color fix from V3.41.1 (needed for contrast
   against the old olive) is removed as dead code along with it. */
#homeHeaderIcon { color: var(--palette-lavender); }
/* V3.41.2: standard 30%/50% width cap on larger screens, confirmed in
   chat -- same pattern as #screen-settings/#screen-admin/
   #screen-haidhDetail. Home had never been given this. */
@media (min-width: 768px) and (max-width: 1179px) {
  #screen-home { width: var(--width-tablet); margin: 0 auto; }
}
@media (min-width: 1180px) {
  #screen-home { width: var(--width-desktop); margin: 0 auto; }
}

/* The tile grid is now its own white container sitting on the olive
   background, confirmed in chat -- tiles arranged inside it.
   V3.41.2: switched from a stretching grid (equal 1fr columns, tiles
   grew/shrank with viewport width) to flex-wrap with a fixed tile
   size, confirmed in chat, per a reference image -- tiles stay a
   constant size regardless of screen size and simply wrap onto a new
   row if there isn't room, rather than stretching to fill the
   container. */
#homeGrid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-top: var(--space-md);
}
#homeGrid .nav-icon-item {
  font-size: 13px;
  gap: 6px;
  width: 76px;
  flex: 0 0 auto;
}
#homeGrid .nav-icon-item:active .nav-icon-item-icon { transform: scale(0.96); }
/* V3.41.1: the square/border/shadow/background chip wraps the ICON
   ONLY now (was the whole tile in V3.41) -- confirmed in chat as a
   structural correction, matching a phone-home-screen convention
   (icon in its own box, label below it, outside that box, not sharing
   backgrounds). Tiles keep their own white background even though the
   container is already white (confirmed) -- the thin border is what
   visually separates them either way.
   V3.41.2: icon box is now a FIXED size (was width:100% of its
   flex-item parent, which itself no longer stretches either) -- and
   the border darkened from --color-table-border (--palette-lavender,
   #E3DADE, barely visible) to --color-ink-faint (#9A9A90), confirmed
   in chat against a reference image showing a clearly visible
   medium-gray outline. */
#homeGrid .nav-icon-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: var(--color-surface);
  border: 1px solid var(--color-ink-faint);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
#homeGrid .nav-icon-item-icon svg { width: 36px; height: 36px; }
/* V3.41.2: the permanent "Home" tile (js/home.js) gets its own
   distinct treatment, matching the reference image precisely -- the
   BOX goes lavender (fill + a visibly darker lavender-toned border),
   but the icon and label stay dark ink, NOT lavender text like the
   generic cross-screen .active highlight elsewhere (css/base.css)
   would otherwise give it. These more-specific #homeGrid selectors
   override that generic rule for this one tile. border-color is
   derived directly from the same --palette-lavender token via
   color-mix() rather than a new hardcoded hex, so it stays a real
   "darker lavender", not an arbitrary color. */
#homeGrid .nav-icon-item.active { color: var(--color-ink); }
#homeGrid .nav-icon-item.active .nav-icon-item-icon {
  background: var(--palette-lavender);
  border-color: color-mix(in srgb, var(--palette-lavender) 55%, black);
}