/* ==========================================================================
   tnafs design system — white & gold
   One stylesheet for the landing page and the app. Layered over Tabler: we keep
   its components (modals, offcanvas, forms, toasts) and re-skin them through
   variables, so every Bootstrap/Tabler feature works and still looks like ours.
   ========================================================================== */

:root {
  /* palette — white and gold, with enough neutrals to build depth */
  /* ONE identity with the Android app (2026-08-08): violet is PRIMARY
     (AppTheme.violet #5B2E9D seeds every interactive surface, like the
     phone's FilledButtons/appbars) and gold is the warm SECONDARY accent,
     re-anchored to the phone's exact AppTheme.gold #CDAD80 family. */
  --q-violet-050: #f3eefb;
  --q-violet-100: #e5dbf5;
  --q-violet-400: #7443bd;
  --q-violet-500: #5b2e9d;   /* primary — AppTheme.violet */
  --q-violet-600: #4a2582;
  --q-violet-700: #3c1e66;   /* AppTheme.violetDeep */
  --q-violet-night: #17102a; /* AppTheme.violetNight — dark bg */
  --q-gold-050: #faf6ee;
  --q-gold-100: #f4ecdd;
  --q-gold-200: #e6d3b3;     /* AppTheme.goldLight */
  --q-gold-400: #cdad80;     /* AppTheme.gold */
  --q-gold-500: #b8935e;
  --q-gold-600: #9a7847;
  --q-gold-700: #7c5f36;
  --q-ink-900: #1c1626;
  --q-ink-700: #3b3151;
  --q-ink-500: #6b617f;
  --q-ink-300: #a79db8;
  --q-paper: #fdfbff;
  --q-surface: #ffffff;
  --q-surface-2: #f6f2fb;
  --q-line: #e7e1f0;
  --q-success: #2e9e6b;
  --q-danger: #c94f42;

  /* semantic */
  --q-bg: var(--q-paper);
  --q-card: var(--q-surface);
  --q-text: var(--q-ink-900);
  --q-dim: var(--q-ink-500);
  --q-accent: var(--q-violet-500);
  --q-accent-ink: #ffffff;

  --q-radius: 14px;
  --q-radius-sm: 9px;
  --q-shadow: 0 1px 2px rgba(25 23 18 / .05), 0 8px 28px rgba(25 23 18 / .07);
  --q-shadow-lg: 0 4px 10px rgba(25 23 18 / .08), 0 24px 60px rgba(25 23 18 / .13);
  --q-font: "Segoe UI", "Cairo", system-ui, sans-serif;

  /* Tabler/Bootstrap re-skin */
  --tblr-primary: var(--q-violet-500);
  --tblr-primary-rgb: 91, 46, 157;
  --tblr-body-bg: var(--q-bg);
  --tblr-body-color: var(--q-text);
  --tblr-font-sans-serif: var(--q-font);
  --tblr-border-radius: var(--q-radius-sm);
  --tblr-border-color: var(--q-line);
}

[data-theme="dark"] {
  /* the phone's AppTheme.violetNight world */
  --q-paper: var(--q-violet-night);
  --q-surface: #1e1737;
  --q-surface-2: #261d42;
  --q-line: #352a55;
  --q-text: #ece9f2;
  --q-dim: #a79dbe;
  --q-bg: var(--q-paper);
  --q-card: var(--q-surface);
  --q-shadow: 0 1px 2px rgba(0 0 0 / .3), 0 8px 28px rgba(0 0 0 / .35);
  --q-shadow-lg: 0 4px 10px rgba(0 0 0 / .4), 0 24px 60px rgba(0 0 0 / .5);
  --tblr-body-bg: var(--q-bg);
  --tblr-body-color: var(--q-text);
  --tblr-border-color: var(--q-line);
}

/* base ------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  background: var(--q-bg);
  color: var(--q-text);
  font-family: var(--q-font);
  -webkit-font-smoothing: antialiased;
}

/* The mushaf fonts reach their glyphs through ligatures; Tabler turns
   ligatures off globally. Re-enable them wherever Quran text appears. */
.mushaf-page, .mushaf-word, .surah-name-glyph, .basmallah-glyph, .q-ayah {
  font-feature-settings: "liga" 1, "dlig" 1, "calt" 1, "rlig" 1;
}

::selection { background: var(--q-gold-200); color: var(--q-ink-900); }

/* type ------------------------------------------------------------------- */
.q-display {
  font-size: clamp(30px, 4.6vw, 52px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.5px;
}
.q-lede { font-size: clamp(15px, 1.6vw, 18px); color: var(--q-dim); line-height: 1.85; }
.q-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--q-gold-600); font-weight: 700; font-size: 13px;
  letter-spacing: 1.5px;
}
.q-kicker::before, .q-kicker::after {
  content: ""; width: 26px; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--q-gold-400));
}
.q-kicker::after { transform: scaleX(-1); }

/* gold helpers ------------------------------------------------------------ */
.q-gold-text {
  background: linear-gradient(115deg, var(--q-gold-600), var(--q-gold-400) 55%, var(--q-gold-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.q-hairline { height: 1px; border: 0;
  background: linear-gradient(90deg, transparent, var(--q-gold-400), transparent); }

/* buttons ----------------------------------------------------------------- */
.btn-q {
  /* the phone's violet hero (AppPalette.hero: violet -> violetDeep) */
  background: linear-gradient(140deg, var(--q-violet-400), var(--q-violet-600));
  color: var(--q-accent-ink); border: 1px solid var(--q-violet-700);
  font-weight: 700; border-radius: var(--q-radius-sm);
  padding: .56rem 1.25rem;
  box-shadow: inset 0 1px 0 rgba(255 255 255 / .25), 0 2px 8px rgba(91 46 157 / .35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-q:hover { filter: brightness(1.08); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255 255 255 / .25), 0 6px 16px rgba(91 46 157 / .45);
  color: var(--q-accent-ink); }
.btn-q:active { transform: translateY(0); }
.btn-q-ghost {
  background: transparent; color: var(--q-text);
  border: 1px solid var(--q-line); border-radius: var(--q-radius-sm);
  padding: .56rem 1.15rem; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.btn-q-ghost:hover { border-color: var(--q-violet-400); background: var(--q-violet-050); color: var(--q-ink-900); }
[data-theme="dark"] .btn-q-ghost:hover { background: rgba(116 67 189 / .18); color: var(--q-text); }

/* cards ------------------------------------------------------------------- */
.q-card {
  background: var(--q-card); border: 1px solid var(--q-line);
  border-radius: var(--q-radius); box-shadow: var(--q-shadow);
}
.q-card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.q-card-hover:hover { transform: translateY(-3px); box-shadow: var(--q-shadow-lg);
  border-color: var(--q-gold-200); }

/* app shell --------------------------------------------------------------- */
.q-shell { display: grid; grid-template-columns: 264px 1fr; height: 100vh; overflow: hidden; }
.q-shell.collapsed { grid-template-columns: 76px 1fr; }
.q-side {
  background: var(--q-surface); border-inline-end: 1px solid var(--q-line);
  display: flex; flex-direction: column; overflow: hidden;
}
.q-side .brand {
  display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px;
}
.q-side .brand .mark {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--q-violet-400), var(--q-violet-600));
  color: #fff; font-size: 21px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(91 46 157 / .4);
  overflow: hidden;
}
/* the real app icon (same as the phone launcher) fills any brand mark */
.mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.q-side .brand b { font-size: 19px; }
.q-side nav { flex: 1; overflow-y: auto; padding: 8px 12px 20px; }
.q-nav-label { font-size: 11px; letter-spacing: 1.2px; color: var(--q-dim);
  padding: 14px 10px 6px; font-weight: 700; }
.q-nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border: 0; background: transparent; color: var(--q-text);
  border-radius: 10px; cursor: pointer; font: inherit; font-size: 14.5px;
  text-align: start; transition: background .13s;
}
.q-nav-item i { font-size: 19px; color: var(--q-dim); transition: color .13s; }
.q-nav-item:hover { background: var(--q-surface-2); }
.q-nav-item.active {
  background: linear-gradient(90deg, var(--q-violet-050), transparent 85%);
  color: var(--q-violet-600); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--q-violet-500);
}
[data-theme="dark"] .q-nav-item.active {
  background: linear-gradient(90deg, rgba(116 67 189 / .22), transparent 85%);
  color: var(--q-gold-200);
}
.q-nav-item.active i { color: inherit; }
.q-nav-item .badge { margin-inline-start: auto; }

.q-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.q-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 22px; background: var(--q-card);
  border-bottom: 1px solid var(--q-line); min-height: 58px;
  position: relative; z-index: 90;
}
.q-topbar h1 { font-size: 17px; margin: 0; font-weight: 700; }
.q-content { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 22px 26px 46px; }
.q-phone-only { display: inline-flex; flex-shrink: 0; }
#appNav.is-hidden,
#readerTools.is-hidden { display: none !important; }
.q-shell:has(#appNav.is-hidden) { grid-template-columns: 1fr; }
#mushafHost { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
@media (max-width: 1100px) {
  .q-shell { grid-template-columns: 1fr; }
  .q-topbar { padding: 8px 10px; gap: 8px; }
  .q-content { padding: 10px 10px 8px; }
  .hifz-hero { padding: 12px 14px; margin-bottom: 10px; }
  .hifz-lede { display: none; }
  #hifzFrame { height: min(70dvh, 560px) !important; }
  #hijriLine { display: none; }
  #authLabel { display: none; }
  .q-wide-only { display: none !important; }
  .reader-toolbar {
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 8px !important;
    overflow-x: auto;
  }
  .reader-toolbar .form-control { width: 58px !important; padding-inline: 6px; }
  .reader-toolbar-actions { gap: 4px !important; flex-shrink: 0; }
  #indexBtn, #voiceBtn {
    font-size: 0; width: 38px; height: 38px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #indexBtn i, #voiceBtn i { font-size: 18px; }
  #appNav:not(.is-open),
  #readerTools:not(.is-open) { display: none !important; }
  #appNav.is-open,
  #readerTools.is-open {
    display: flex !important;
    position: fixed;
    top: 58px;
    bottom: 0;
    z-index: 80;
    overflow: auto;
  }
  #appNav.is-open { inset-inline-start: 0; width: 264px; }
  #readerTools.is-open {
    inset-inline-end: 0;
    width: min(330px, 90vw);
    background: var(--q-card);
    padding: 12px;
  }
}

/* landing ----------------------------------------------------------------- */
.q-navbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--q-bg) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--q-line);
}
.q-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 82% -8%, var(--q-gold-100), transparent 62%),
    radial-gradient(700px 380px at 8% 108%, var(--q-gold-050), transparent 55%);
}
[data-theme="dark"] .q-hero {
  background:
    radial-gradient(900px 420px at 82% -8%, rgba(217 178 90 / .12), transparent 62%),
    radial-gradient(700px 380px at 8% 108%, rgba(217 178 90 / .06), transparent 55%);
}
.q-hero-art {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: repeating-conic-gradient(from 22.5deg,
    transparent 0 40deg, rgba(196 154 60 / .05) 40deg 45deg);
  mask-image: radial-gradient(closest-side at 80% 20%, #000, transparent);
}
.q-store-badge {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--q-line); border-radius: 13px; padding: 10px 18px;
  background: var(--q-card); text-decoration: none; color: var(--q-text);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.q-store-badge:hover { border-color: var(--q-gold-400); transform: translateY(-2px);
  box-shadow: var(--q-shadow); color: var(--q-text); }
.q-store-badge i { font-size: 26px; color: var(--q-gold-600); }
.q-store-badge small { display: block; color: var(--q-dim); font-size: 11px; }
.q-store-badge b { font-size: 15px; }

.q-feature-ico {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--q-gold-050); color: var(--q-gold-600); font-size: 22px;
  border: 1px solid var(--q-gold-100);
}
[data-theme="dark"] .q-feature-ico { background: rgba(217 178 90 / .1);
  border-color: rgba(217 178 90 / .2); color: var(--q-gold-400); }

.q-footer { border-top: 1px solid var(--q-line); background: var(--q-surface-2); }
.q-footer a { color: var(--q-dim); text-decoration: none; }
.q-footer a:hover { color: var(--q-gold-600); }

/* mushaf surface + reading themes (point 15) ------------------------------ */
.q-mushaf-frame {
  border-radius: var(--q-radius); box-shadow: var(--q-shadow-lg);
  border: 1px solid var(--q-line); overflow: hidden;
  transition: background .25s, color .25s;
}
.q-mushaf-frame .inner {
  padding: 16px 12px 16px 6px; height: 100%; min-height: 0;
  overflow: hidden;
}
#mushafHost {
  height: 100%;
  min-height: 0;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
/* each reading theme sets the page surface + highlight colours */
.q-mushaf-frame[data-mtheme="paper"]  { background: linear-gradient(#fbf6ea, #f4ecd9); color: #241c10; --word-highlight: #e7c26d; }
.q-mushaf-frame[data-mtheme="white"]  { background: #ffffff; color: #17140e; --word-highlight: #f3d488; }
.q-mushaf-frame[data-mtheme="sepia"]  { background: #f4e8d0; color: #3a2d18; --word-highlight: #dfb15e; }
.q-mushaf-frame[data-mtheme="night"]  { background: #0b0e14; color: #ffffff; --word-highlight: #c9a227; --word-highlight-fg: #0b0e14; }
.q-mushaf-frame[data-mtheme="green"]  { background: #eef5ec; color: #1d2b1f; --word-highlight: #b8d3a7; }
.q-mushaf-frame[data-mtheme="rose"]   { background: #f9eff0; color: #2e2022; --word-highlight: #e5b8bd; }
.q-mushaf-frame[data-mtheme="grey"]   { background: #eceef1; color: #23262b; --word-highlight: #c3cad6; }
.q-mushaf-frame[data-mtheme="royal"]  { background: #0c1020; color: #ffffff; --word-highlight: #c9a227; --word-highlight-fg: #0c1020; }
/* Dark pages: CSS color must paint the glyphs (plain Uthmani). QCF tajweed
   colour is baked into the font and stays black on a black page. */
.q-mushaf-frame[data-ink="light"],
.q-mushaf-frame[data-ink="light"] .mushaf-page,
.q-mushaf-frame[data-ink="light"] .mushaf-word,
.q-mushaf-frame[data-ink="light"] .surah-name-glyph,
.q-mushaf-frame[data-ink="light"] .basmallah-glyph,
.q-mushaf-frame[data-ink="light"] .q-ayah {
  color: #ffffff;
}

.q-mtheme-dot {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--q-line); transition: transform .13s, border-color .13s;
}
.q-mtheme-dot:hover { transform: scale(1.12); }
.q-mtheme-dot.active { border-color: var(--q-gold-500); box-shadow: 0 0 0 3px var(--q-gold-100); }

/* voice panel ------------------------------------------------------------- */
.q-voice-live {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--q-gold-050); color: var(--q-gold-700);
  border: 1px solid var(--q-gold-200);
}
[data-theme="dark"] .q-voice-live { background: rgba(217 178 90 / .1); color: var(--q-gold-400);
  border-color: rgba(217 178 90 / .25); }
.q-voice-live .pulse {
  width: 9px; height: 9px; border-radius: 50%; background: var(--q-success);
  animation: q-pulse 1.6s ease-out infinite;
}
@keyframes q-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46 158 107 / .5); }
  70% { box-shadow: 0 0 0 9px rgba(46 158 107 / 0); }
  100% { box-shadow: 0 0 0 0 rgba(46 158 107 / 0); }
}
.q-meter { height: 7px; border-radius: 999px; background: var(--q-surface-2); overflow: hidden; }
.q-meter > i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--q-gold-400), var(--q-gold-600));
  transition: width .3s ease; }

/* auth modals ------------------------------------------------------------- */
.modal-content { border-radius: var(--q-radius); border-color: var(--q-line);
  background: var(--q-card); color: var(--q-text); box-shadow: var(--q-shadow-lg); }
.q-modal-head {
  text-align: center; padding: 26px 24px 0;
}
.q-modal-head .mark {
  width: 52px; height: 52px; border-radius: 15px; margin: 0 auto 12px;
  display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, var(--q-violet-400), var(--q-violet-600));
  box-shadow: 0 6px 18px rgba(91 46 157 / .4);
  overflow: hidden;
}

/* misc -------------------------------------------------------------------- */
.q-fade-up { animation: q-fade-up .5s ease both; }
@keyframes q-fade-up { from { opacity: 0; transform: translateY(14px); } }
.q-stagger > * { animation: q-fade-up .5s ease both; }
.q-stagger > *:nth-child(2) { animation-delay: .07s; }
.q-stagger > *:nth-child(3) { animation-delay: .14s; }
.q-stagger > *:nth-child(4) { animation-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .q-fade-up, .q-stagger > * { animation: none; }
}