/* /home/siisi/siisi/islam_app/static/css/islam.css
   Shared green theme for every Islam page — cards use varying green
   depths (not the site's default white/--bs-card-bg) in both light and
   dark mode, with white/mint text for contrast, per design direction:
   "most Islamic apps use green for everything". Loaded alongside
   css/image.css (for .studio-hero / .s-card structure) on every
   islam_app template; wrap page content in <div class="islam-page"> to
   pick up these overrides. */

.islam-hero {
    background: linear-gradient(135deg, #0d9d58 0%, #43DC80 100%);
    color: #fff;
    position: relative;
}

/* Card backgrounds: medium green in light mode, deeper green in dark —
   never the plain white/--bs-card-bg default from image.css. */
.islam-page .s-card {
    background: linear-gradient(160deg, #12864c 0%, #0c6238 100%);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
}
.islam-page .s-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
}
[data-bs-theme="dark"] .islam-page .s-card {
    background: linear-gradient(160deg, #0c3822 0%, #082818 100%);
    border-color: rgba(255, 255, 255, .08);
}

.islam-page .s-card-title,
.islam-page .s-card-icon { color: #fff; }
.islam-page .s-card-hint { color: rgba(255, 255, 255, .75); }
/* Scoped to .s-card, not the whole .islam-page — the light mint only
   reads on the card's always-dark-green background above. !important
   because .islam-page a below (light mode) has equal selector specificity
   and must never win inside a card regardless of source order. */
.islam-page .s-card a { color: #baffd9 !important; }
.islam-page .s-card a:hover { color: #fff !important; }
/* Same mint in both themes, by explicit request — same color regardless
   of site theme, not contrast-optimized per theme. :not(.btn) excludes
   Bootstrap-styled buttons (.btn-primary/.btn-secondary rounded-circle
   icon-btn quick links, e.g. on islam home.html) — those already have
   their own correct white icon color from Bootstrap, and this rule's
   specificity (0,2,1) beats their single-class .btn-primary/.btn-secondary
   (0,1,0), which was overriding it with green/mint. Same reasoning as the
   .swipe-fab fix elsewhere: plain-link theming must never leak into
   styled buttons. */
.islam-page a:not(.btn) { color: #baffd9; }
.islam-page a:not(.btn):hover { color: #fff; }
/* The rule above assumes a dark-green background (true for every .s-card
   link it was designed for) and breaks down for the breadcrumb ("Islam"
   trail link), which sits directly on the actual page background
   instead of a card. That background genuinely changes with site theme,
   unlike a card's, so unlike the mint rule above this one has to be
   theme-aware. !important because `.islam-page a:not(.btn)` above is
   (0,2,1) — the trailing `a` type selector survives inside :not() — and
   `.islam-page .breadcrumb-item a` alone is only (0,2,1) too, tying on
   specificity and losing the source-order tiebreak in some contexts. */
.islam-page .breadcrumb-item a { color: #0c9d58 !important; }
.islam-page .breadcrumb-item a:hover { color: #086b3c !important; }
[data-bs-theme="dark"] .islam-page .breadcrumb-item a { color: #43dc80 !important; }
[data-bs-theme="dark"] .islam-page .breadcrumb-item a:hover { color: #baffd9 !important; }
/* .text-link-contrast ("My Deed Book Open →" / "Rewards →")
   fights the same page-background problem — rather than chase per-theme
   colors on a background that keeps changing, give it its own small
   always-dark-green chip (same gradient as .s-card) so the original
   mint/white pair — proven readable in both site themes on a card — just
   works here too, once and for all. */
.islam-page .text-link-contrast {
    display: inline-block;
    background: linear-gradient(160deg, #12864c 0%, #0c6238 100%);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .5rem;
    padding: .35rem .9rem;
    color: #baffd9 !important;
}
.islam-page .text-link-contrast:hover { color: #fff !important; }
.islam-page .text-secondary { color: rgba(255, 255, 255, .75) !important; }
/* .islam-page .s-card/.islam-hero's background is always dark green
   regardless of site theme (see rule above) — but Bootstrap's
   .text-muted/.form-text both resolve to --bs-secondary-color, which is a
   DARK gray in light mode (meant for light backgrounds), making them
   nearly invisible there. Scoped to just those two always-dark
   containers, not the whole .islam-page: the page-header "welcome-text"
   subtitle (used on every islam_app page, e.g. rabbana_list.html's "by
   Surah" line) and modal bodies (surah_detail.html/surah_list.html's
   "Remove Download?" confirmation) both sit on the normal, theme-adaptive
   page/modal background — forcing white text there made them invisible
   specifically in light mode (white on white), the inverse of the bug
   being fixed here. */
.islam-page .s-card .text-muted,
.islam-page .islam-hero .text-muted,
.islam-page .s-card .form-text,
.islam-page .islam-hero .form-text { color: rgba(255, 255, 255, .75) !important; }

/* Qibla icon in the hero */
.islam-qibla-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: .4rem;
    transition: background .15s, transform .15s;
}
.islam-qibla-btn:hover {
    background: rgba(255, 255, 255, .32);
    color: #fff;
    transform: rotate(15deg);
}

.islam-hero-clock {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
}
.islam-hero-date {
    font-size: .82rem;
    opacity: .9;
    margin-top: .1rem;
}

/* Ramadan / Next Feast — always 2-up, even on mobile */
.islam-countdown-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1.25rem;
}

.islam-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}
.islam-card {
    display: flex;
    flex-direction: column;
    min-height: 150px;
    position: relative;
}
.islam-card-icon { font-size: 1.6rem; margin-bottom: .4rem; }
.islam-card-title {
    font-weight: 600;
    font-size: .85rem;
    color: rgba(255, 255, 255, .85);
    letter-spacing: .3px;
}
/* Big numbers get a distinct, lighter green so they stay clearly
   readable against the card's own green background. */
.islam-card-big {
    font-size: 2.1rem;
    font-weight: 700;
    color: #baffd9;
    line-height: 1.1;
    margin-top: .35rem;
}
/* e.g. "36,484 remaining" — the qualifying word sits on the same line as
   the number instead of stacking below it, so it reads as one phrase
   ("36484 / remaining" on separate lines was easy to misread as two
   unrelated facts). */
.islam-card-big-suffix {
    font-size: .65rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .65);
}
.islam-card-sub {
    font-size: .8rem;
    color: rgba(255, 255, 255, .75);
    margin-top: .25rem;
}

/* Next-prayer card — brightest green of all, it's the "now" card */
.islam-next-prayer-card {
    background: linear-gradient(135deg, #0d9d58 0%, #43DC80 100%) !important;
    border: none !important;
}
.islam-next-prayer-card .islam-card-big { color: #fff; }
.islam-next-prayer-bell {
    position: absolute;
    top: .9rem;
    right: 1rem;
    font-size: 1.35rem;
    color: rgba(255, 255, 255, .9);
}

/* 6 prayer-time tiles */
.islam-prayer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}
.islam-prayer-tile { text-align: center; padding: .9rem .5rem; transition: transform .15s, box-shadow .15s; }
.islam-prayer-tile.is-next {
    border-color: #baffd9 !important;
    box-shadow: 0 0 0 2px rgba(186, 255, 217, .5);
}
.islam-prayer-tile-icon { font-size: 1.3rem; }
.islam-prayer-tile-name { font-weight: 600; font-size: .82rem; margin-top: .3rem; color: rgba(255, 255, 255, .85); }
.islam-prayer-tile-time {
    font-size: 1.05rem;
    font-weight: 700;
    color: #baffd9;
    margin-top: .15rem;
    font-variant-numeric: tabular-nums;
}

/* Link cards (Deed Book / Quran / Hadith) */
.islam-link-card { justify-content: center; align-items: flex-start; text-decoration: none; }
.islam-link-card:hover { text-decoration: none; }
.islam-link-card .islam-card-title {
    text-transform: none;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0;
}
.islam-link-card .islam-card-sub { margin-top: .5rem; }
.islam-link-card .islam-card-cta { margin-top: auto; padding-top: .75rem; color: #baffd9; font-weight: 600; font-size: .85rem; }

/* Academy card — uses the same gradient "hero" treatment as the page's
   own studio-hero blocks (green for Islam, purple for Academy elsewhere),
   just in blue here to match the Academy sidebar icon's color — visually
   distinct from the plain green cards around it since it leads to a
   general learning feature, not religious content. */
.islam-academy-card {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%) !important;
    border: none !important;
}

/* Of-the-day cards */
.islam-of-day-card .islam-arabic { direction: rtl; text-align: right; font-size: 1.15rem; line-height: 2; margin: .5rem 0; color: #fff; }
.islam-of-day-card .islam-translation { font-size: .85rem; color: rgba(255, 255, 255, .85); }
.islam-of-day-card .islam-ref { font-size: .75rem; color: #baffd9; font-weight: 600; margin-top: .5rem; }

.islam-card--wide { grid-column: span 2; }
@media (max-width: 700px) { .islam-card--wide { grid-column: span 1; } }
@media (max-width: 480px) {
    .islam-countdown-row { gap: .6rem; }
    .islam-card-big { font-size: 1.6rem; }
}

/* Small audio/TTS buttons reused on green cards (Quran verses, Hadith,
   Prayer/Verse of the Day) — same shape as chat's .custom-audio-play-button
   but visible against a green card instead of the chat bubble's tint. */
.islam-audio-btn {
    background: rgba(255, 255, 255, .16);
    border: none;
    color: #fff;
    font-size: .78rem;
    border-radius: .4rem;
    padding: .3rem .6rem;
}
.islam-audio-btn:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.islam-audio-btn.is-playing { background: #fff; color: #0c6238; }

/* Bootstrap's .form-switch positions the toggle via padding-left:2.5em on
   the container + margin-left:-2.5em on the input — a trick that only
   places the switch correctly for a single-line label. On a narrow phone,
   longer translations (French, Arabic...) wrap, and that wrapped line
   isn't guaranteed to stay indented under the first line the same way
   across every label length/emoji width — reported as the switch and text
   drifting out of alignment. Building it as an explicit flex row instead
   keeps the switch a fixed-width column and the label a normal wrapping
   block beside it, so every wrapped line indents consistently under the
   label's own start, never under the switch, regardless of text length. */
.islam-adhan-switch-row {
    padding-left: 0;
}
.islam-adhan-switch-row .form-check-input {
    margin-left: 0;
}
.islam-adhan-switch-row .form-check-label {
    margin-bottom: 0;
}