/* =============================================================
   SalatiPal — HD-quality polish (global, scoped to root)
   Tightens font rendering, kerning, ligatures, image scaling.
   No color overrides — purely fidelity improvements. Safe to
   remove by dropping the <link> from index.html.
   ============================================================= */

html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* OpenType features for higher-quality text */
body, button, input, textarea, select {
  font-feature-settings:
    "kern" 1,     /* kerning */
    "liga" 1,     /* standard ligatures */
    "calt" 1,     /* contextual alternates */
    "ss01" 1;     /* stylistic set 1 — used by Outfit / Plus Jakarta for alt 'a' */
  font-variant-ligatures: contextual common-ligatures;
  font-optical-sizing: auto;
}

/* Tabular numbers wherever times / counters are shown — keeps prayer-time
   columns aligned and stops digits from jumping around mid-tick. */
.font-mono,
[class*="time"], [class*="Time"],
[class*="countdown"], [class*="Countdown"],
[class*="counter"], [class*="Counter"],
.tabular,
[class*="text-mono"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 1;
}

/* Headings: tighter tracking + better optical sizing for premium feel */
h1, h2, h3, .font-heading {
  letter-spacing: -0.012em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}
h1, .text-3xl, .text-4xl, .text-5xl {
  letter-spacing: -0.022em;
}

/* Arabic text: better rendering of Naskh-style script */
[lang="ar"], .arabic, .font-amiri, [class*="font-arabic"] {
  font-feature-settings: "calt" 1, "liga" 1, "rlig" 1;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
}

/* SVG icons: stop blurry edges on low-DPI scaling */
svg {
  shape-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}
img, video, picture {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: high-quality;
}

/* Avoid sub-pixel layout jitter on transforms (cards, nav, sliders) */
.elevated-card,
[class*="card"],
[role="slider"],
button,
[role="button"] {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Edge-to-edge: the WebView fills the screen, both system bars are
   transparent (set by MainActivity). The bundle's own header already
   reserves env(safe-area-inset-top); the bottom-nav reserves the bottom
   inset below. DO NOT pad body itself or the hero gradient gets pushed
   off the top of the screen, leaving the (transparent) status bar over
   nothing. */

/* Bottom-nav: extend its background fully through the navigation-bar
   safe area so the system gesture pill / 3-button nav has a contrasting
   surface to render on. Content (tabs) is padded up by inset so it
   doesn't sit under the OS gestures. */
.bottom-nav, [class*="bottom-nav"] {
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
}

/* Top scrim: a thin dark fade pinned behind the status bar. Lets the
   hero gradient show through at the top edge while guaranteeing white
   time/battery/signal icons remain legible — even after the user
   scrolls past the hero and the page background is white. Sized to the
   status-bar inset so it never extends below it. */
@supports (padding: env(safe-area-inset-top)) {
  body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 6px);
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.36) 0%,
      rgba(0, 0, 0, 0.18) 60%,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 2147483646;  /* under modals (max-int-1) but above app */
  }
}

/* Sharper focus rings on interactive elements (keyboard + a11y). */
:focus-visible {
  outline: 2px solid rgba(16,185,129,0.7);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Reduce blur banding on backdrop-filter glass cards */
[class*="backdrop-blur"] {
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

/* =============================================================
   PASS 2 — deeper HD/modern polish
   These rules carefully AVOID input/select/textarea backgrounds
   (the prior UI lift broke readability there).
   ============================================================= */

/* Sharper headings: heavier weight at large sizes, tighter line-height. */
h1, .text-3xl, .text-4xl, .text-5xl,
[class*="text-heading-2xl"], [class*="text-display"] {
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
}
h2, .text-2xl, [class*="text-heading-xl"] {
  font-weight: 750 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.018em !important;
}
h3, .text-xl, [class*="text-heading-lg"] {
  font-weight: 700 !important;
  letter-spacing: -0.012em !important;
}

/* Body / paragraph readability — increase contrast without recolouring tokens. */
body, p, li, span:not([class*="bg-"]):not([class*="border-"]) {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Primary emerald — push saturation a touch via brand-coloured backgrounds.
   Targets backgrounds with "emerald-500"/"emerald-600" only — does NOT touch
   neutral surfaces or input fields. */
[class*="bg-emerald-500"]:not(input):not(textarea):not(select),
[class*="bg-emerald-600"]:not(input):not(textarea):not(select) {
  background-image: linear-gradient(135deg, #10B981 0%, #059669 60%, #047857 100%);
}
[class*="from-emerald"][class*="to-emerald"],
[class*="from-emerald"][class*="to-teal"],
[class*="from-emerald-500"][class*="to-emerald-600"] {
  background-image: linear-gradient(135deg, #10B981 0%, #14B8A6 45%, #047857 100%) !important;
}

/* Crisper buttons: more depth on hover, snappier press. */
button:not(input):not(textarea):not(select),
[role="button"]:not([role="switch"]):not([role="slider"]) {
  transition: transform .12s cubic-bezier(.2,.7,.2,1),
              box-shadow .18s ease,
              filter .18s ease,
              background-color .18s ease !important;
}
button:active:not([role="switch"]):not([role="slider"]),
[role="button"]:active:not([role="switch"]):not([role="slider"]) {
  transform: translateY(1px) scale(0.985);
}

/* Modern card shadows — softer, longer, more material-3 feel. */
.elevated-card,
.shadow-md,
.shadow-lg {
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px -8px rgba(6, 78, 59, 0.10),
    0 4px 10px -4px rgba(6, 78, 59, 0.06) !important;
}
.shadow-xl, .shadow-2xl {
  box-shadow:
    0 4px 8px -2px rgba(15, 23, 42, 0.06),
    0 24px 48px -12px rgba(6, 78, 59, 0.18),
    0 12px 24px -6px rgba(6, 78, 59, 0.10) !important;
}

/* Prayer-time / countdown digits: bigger, tighter tracking, tabular. */
[class*="countdown"], [class*="Countdown"],
[class*="prayer-time"], [class*="PrayerTime"],
.font-mono.text-2xl, .font-mono.text-3xl,
[class*="text-display"] .font-mono {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "kern" 1;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* Smooth scrolling everywhere (helps the Arabic Quran scroll feel premium). */
html { scroll-behavior: smooth; }

/* Polished focus ring (replaces the default browser dotted outline). */
*:focus-visible {
  outline: 2px solid rgba(16, 185, 129, 0.7);
  outline-offset: 2px;
}
button:focus-visible, [role="button"]:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 4px rgba(16, 185, 129, 0.25),
    0 6px 14px -3px rgba(6, 95, 70, 0.45) !important;
}

/* Dark mode — slightly deeper bg so cards/text have more contrast. */
html.dark body, .dark body {
  background-color: #06120F !important;
}
html.dark .elevated-card, .dark .elevated-card {
  border-color: rgba(148, 163, 184, 0.10) !important;
}