/* ============================================================
   Hifzhelper — base styles
   Mobile-first: base rules target phone widths; tablet/desktop widen via
   min-width media queries, maximizing view area rather than centering a
   fixed-width column (per the "maximize view areas" instruction).
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  background: var(--color-page-bg);
  color: var(--color-ink);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
input, select, textarea {
  font-family: inherit;
  font-size: 16px; /* prevents iOS auto-zoom on focus */
}

.hidden { display: none !important; }

/* V3.44: CORE COLOR INVERSION, confirmed explicitly in chat twice
   ("Screens are surface-track" / "any sections or containers in a
   screen will have white background"). Reverses V3.43: screens are now
   --surface-track (was white), their actual content becomes white
   cards instead (see .screen-content below). Padding (10px all sides)
   and radius are new -- V3.43 gave .screen no padding/radius at all.
   Min-height mirrors #appContent's own formula, additionally
   subtracting #appContent's own padding (--appcontent-vpad,
   tokens.css) since the screen sits inside that padding -- same
   pattern already used for .log-detail-card/#dhorTimerHost. Settings
   no longer overrides this (css/settings.css) -- it's just another
   --surface-track screen now, --surface-app retired. */
.screen {
  background: var(--surface-track);
  padding: 10px;
  border-radius: var(--radius-md);
  min-height: calc(100vh - var(--auth-band-height, 60px) - (var(--appcontent-vpad) * 2));
  min-height: calc(100dvh - var(--auth-band-height, 60px) - (var(--appcontent-vpad) * 2));
}

/* V3.44: shared class for the standard "content inside a screen" look
   -- white, the 30/50 cap, centered once that cap narrows it. Used by
   Tadabbur/Haidh/Admin's new body-content wrappers and each Settings
   section (replacing their own individually-duplicated cap rules).
   Journal's header+wrap pair and Juz Tracker are the confirmed
   exceptions -- they don't use this class at all. */
.screen-content {
  background: var(--color-surface);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}
@media (min-width: 768px) and (max-width: 1179px) {
  .screen-content { width: var(--width-tablet); margin: 0 auto; }
}
@media (min-width: 1180px) {
  .screen-content { width: var(--width-desktop); margin: 0 auto; }
}

/* App shell: banner fixed at top, content fills the rest */
#appShell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#appContent {
  flex: 1;
  width: 100%;
  /* V3.43: explicit min-height, confirmed in chat -- #appContent's
     existing flex:1 (within #appShell's flex column) already fills
     available space naturally, so this is mostly making that explicit
     rather than fixing a gap; kept as min-height (not height) so
     genuinely long content can still grow past it and the page scrolls,
     never a fixed box that clips. */
  min-height: calc(100vh - var(--auth-band-height, 60px));
  min-height: calc(100dvh - var(--auth-band-height, 60px));
  /* V3.44: background changes from --surface-track to --color-page-bg
     (the existing cream token) -- confirmed in chat, part of the same
     color inversion above. Padding: left/right reduced to a flat 10px
     at every screen size (was 16px mobile / 32px tablet+) -- confirmed
     correction, superseding the old breakpoint-varying values for this
     axis specifically. Top/bottom UNCHANGED, still breakpoint-varying
     below. Border-radius new -- V3.43 never gave this element one. */
  background: var(--color-page-bg);
  padding: var(--space-md) 10px;
  border-radius: var(--radius-md);
  /* V3.4.3: a position:sticky sibling (#authBand) before a flex:1 sibling
     in a flex column is a known WebKit compositing quirk — Safari computed
     this element's layout correctly but didn't PAINT it until something
     forced a reflow (confirmed via live inspection: content was fully
     present in the DOM, just invisible until scrolling). Promoting it to
     its own compositing layer makes Safari paint it immediately instead
     of waiting. Confirmed Safari-only; doesn't affect Android/Chrome. */
  transform: translateZ(0);
}

/* Tablet and up: a bit more breathing room, content can use a wider
   max-width so long table rows/rings don't stretch uncomfortably thin,
   but still no fixed narrow column wasting screen space.
   V3.44: breakpoint corrected from 720px to 768px, confirmed in chat --
   matches every other width threshold in the app now. Only top/bottom
   padding changes here; left/right stays the flat 10px set above. */
@media (min-width: 768px) {
  #appContent {
    padding: var(--space-lg) 10px;
  }
}
/* V3.44: #appContent adopts stdstyles' own strategy for its .app-shell
   -- confirmed in chat, traced through stdstyles precisely first: its
   .screen is genuinely uncapped in its own rule, the real width cap
   lives entirely on .app-shell (the rough equivalent of #appContent
   here), individual screens just inherit whatever width their parent
   already has. Breakpoint corrected from 1200px to 1180px, matching
   every other width threshold in the app -- value stays Hifzhelper's
   own existing 1400px, not stdstyles' 1280px (confirmed explicitly). */
@media (min-width: 1180px) {
  #appContent {
    max-width: 1400px;
    margin: 0 auto;
  }
}

/* Icon + label navigation — no background, no border, per the explicit
   nav styling instruction. Used by both the Home page tiles and the
   dropdown menu list. */
.nav-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  color: var(--color-ink);
  text-align: center;
  font-size: 12px;
  background: none;
  border: none;
}
/* V3.41.1: icon now wrapped in its own span (js/auth.js's
   renderNavItemsInto) so Home can box just the icon while the label
   stays outside that box -- neutral/unstyled here (no background,
   border, sizing beyond centering the svg) so the dropdown menu's own
   plain icon+label look stays exactly as it was; only #homeGrid's own
   rules (css/nav.css) give the icon wrapper its chip treatment. */
.nav-icon-item-icon { display: flex; align-items: center; justify-content: center; }
.nav-icon-item svg { width: 28px; height: 28px; }
.nav-icon-item:active { opacity: 0.6; }
/* V3.41: whichever screen is currently open gets its nav icon (both the
   dropdown and Home) highlighted, confirmed in chat -- reuses the same
   color-language idea .log-detail-dots .dot.active already established
   (a distinct accent color signaling "current"), rather than a new
   visual pattern. currentColor on the icon means one color rule
   recolors both the svg and the label together.
   V3.41.1: corrected to lavender specifically, confirmed in chat --
   was accent/evergreen in V3.41. */
.nav-icon-item.active { color: var(--palette-lavender); }

/* A visible, simple way to surface errors — never a silent failure
   (CONVENTIONS.md principle 3). */
#errorBanner {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--color-error);
  color: #fff;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: center;
  z-index: 200;
  display: none;
}
/* Was position:fixed with a higher z-index than #authBand, so it covered
   the band and page content on every single boot (showWelcome() fires on
   every login AND every reload, not just first-login) instead of pushing
   content down — the root cause of the "content hidden behind the banner"
   bug (V3.4 item 5). Now lives in normal flow, right after #authBand in
   the #appShell markup, so showing it pushes #appContent down instead of
   overlapping it. */
#welcomeBanner {
  background: var(--color-success);
  color: #fff;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  display: none;
}