/* Hifzhelper build 5.1 | css/nav.css */
/* Academy's two banners, with local role-aware Hifz navigation. */
#authBand{position:sticky;top:0;z-index:100;background:#fffcff;color:#58305f;box-shadow:0 3px 12px #37203c10;font-family:Arial,sans-serif;--hifz-gutter:clamp(12px,3vw,28px)}
.hifz-brand-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:8px var(--hifz-gutter);padding-top:calc(8px + env(safe-area-inset-top,0px));border-bottom:1px solid #ded0e2}
.hifz-academy-brand{display:flex;align-items:center;gap:10px;color:#302936;text-decoration:none}
.hifz-academy-brand img{width:40px;height:40px;object-fit:contain}
.hifz-academy-brand strong{display:block;font:400 16px/1.06 Georgia,serif}
.hifz-academy-brand small{display:block;margin-top:4px;font:600 9px/1.2 Arial,sans-serif;color:#58305f}
.hifz-date-box{display:grid;gap:4px;flex:none;padding:6px 10px;border:1px solid #ded0e2;border-radius:10px;background:#f6eff8;text-align:right;font:11px/1.2 Arial,sans-serif}
.hifz-date-box em{font-size:10px}
.hifz-account-banner{display:grid;grid-template-columns:minmax(140px,.65fr) auto minmax(0,2fr);gap:16px;align-items:center;padding:8px var(--hifz-gutter);border-bottom:1px solid #ded0e2}
.hifz-profile{min-width:0;overflow-wrap:anywhere}
.hifz-profile>span{display:block;font-size:10px;margin-bottom:2px}
#authBand .user-name{display:block;font:700 13px/1.25 Arial,sans-serif}
.hifz-profile>small{display:block;font-size:10px;margin-top:2px}
#hifzPageActions{display:flex;align-items:center;gap:5px;flex:none}
.hifz-page-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;min-height:60px;padding:0;color:#58305f;font:500 10px/1.2 Arial,sans-serif}
.hifz-page-action .nav-icon-item-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ded0e2;border-radius:50%;background:#fff}
.hifz-page-action svg{width:22px;height:22px}
#logoutBtn{min-width:64px;min-height:44px;padding:10px;border:1px solid #ded0e2;border-radius:999px;background:#fff;font:600 12px Arial,sans-serif}
#logoutBtn .nav-icon-item-icon{display:none}
.auth-band-zoom{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:34px;padding:6px 10px;border-radius:8px;background:#0b5cff;color:#fff;font:800 12px Arial,sans-serif;letter-spacing:.04em;text-decoration:none}
.auth-band-zoom.hidden{display:none}
#authDropdownNav{display:flex;flex-wrap:wrap;gap:4px;min-width:0;padding:3px;border-radius:12px;background:#f3eaf5}
#authDropdownNav .dropdown-divider{display:none}
#authDropdownNav .nav-icon-item{display:flex;flex-direction:row;flex:0 1 auto;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;padding:10px 12px;border:0;border-radius:9px;background:transparent;color:#674270;font:700 12px/1.2 Arial,sans-serif}
#authDropdownNav .nav-icon-item-icon{display:none}
#authDropdownNav .nav-icon-item[aria-pressed=true]{background:#805088;color:#fff}
#authBand :is(button,a):focus-visible{outline:3px solid #805088;outline-offset:2px}
#authBand :is(button,a):hover{filter:brightness(.96)}
@media(max-width:1100px){.hifz-account-banner{grid-template-columns:minmax(0,1fr) auto;gap:8px}#authDropdownNav{grid-column:1/-1}}
@media(max-width:600px){#authDropdownNav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}#authDropdownNav .nav-icon-item{flex:0 0 auto;white-space:nowrap}.hifz-date-box{font-size:10px;padding:5px 7px}.hifz-academy-brand{gap:7px}.hifz-academy-brand strong{font-size:15px}.auth-band-zoom{min-width:52px;padding:6px;font-size:11px}#logoutBtn{min-width:58px;padding:8px;font-size:11px}}

/* ---- 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. */
/* V3.69.0: #homeHeaderIcon rule deleted with the element and its row. */
/* 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);
}