/* ============================================================
   MADRASA VISUAL SYSTEM — REFINED ISLAMIC DESIGN
   Matte night theme, Arabic calligraphy texture, calm mobile-first surfaces
   ============================================================ */

:root {
    --madrasa-ink: #10191B;
    --madrasa-night: #0D1416;
    --madrasa-slate: #182225;
    --madrasa-line: #2A3938;
    --madrasa-gold: #C9A25D;
    --madrasa-gold-soft: #E9D6A8;
    --madrasa-ivory: #F7F4EC;
}

/* A subtle original geometric pattern, not a copied calligraphy image. */
body::after {
    background:
        radial-gradient(circle at 12% 9%, rgba(124,58,237,.045), transparent 31%),
        radial-gradient(circle at 88% 93%, rgba(201,162,93,.035), transparent 34%),
        linear-gradient(45deg, transparent 48%, rgba(124,58,237,.018) 49%, rgba(124,58,237,.018) 51%, transparent 52%) !important;
    background-size: auto, auto, 36px 36px !important;
}

/* ── NIGHT MADRASA MODE ────────────────────────────────────── */
body.dark-theme {
    --bg: #0D1416;
    --bg2: #141E20;
    --bg3: #1C292A;
    --w: #182225;
    --t: #F3F0E7;
    --t1: #FFFFFF;
    --t2: #D4D1C6;
    --t3: #9DA79F;
    --t4: #6E7A75;
    --b: #2A3938;
    --b1: #2A3938;
    --b2: #223231;
    --b3: #374A47;
    --p: #9A86C1;
    --p-dark: #78639F;
    --p-deep: #453562;
    --p-light: #B9A8D9;
    --p-lighter: #D6CBEA;
    --p-pale: #241E34;
    --p-glow: rgba(154,134,193,.16);
    --p-glow-strong: rgba(154,134,193,.25);
    --gold: #C9A25D;
    --gold-l: #E9D6A8;
    --gold-d: #A57F3E;
    --gold-glow: rgba(201,162,93,.14);
    --grn: #54C19A;
    --grn-bg: #12352D;
    --red: #E78787;
    --red-bg: #402326;
    --yel: #E4BA64;
    --yel-bg: #3B2D14;
    --blu: #78AEEA;
    --blu-bg: #182C43;
    background: #0D1416 !important;
    color: var(--t) !important;
}

body.dark-theme::before {
    color: var(--madrasa-gold) !important;
    opacity: .035 !important;
    filter: none !important;
}

body.dark-theme::after {
    background:
        radial-gradient(circle at 10% 5%, rgba(201,162,93,.06), transparent 34%),
        radial-gradient(circle at 88% 92%, rgba(154,134,193,.075), transparent 37%),
        linear-gradient(45deg, transparent 48%, rgba(201,162,93,.022) 49%, rgba(201,162,93,.022) 51%, transparent 52%) !important;
    background-size: auto, auto, 42px 42px !important;
}

/* Matte controls: no glossy glare, no moving shine, no plastic gradients. */
body.dark-theme .btn::after,
body.dark-theme .dashboard-app-button::after,
body.dark-theme .quick-card::before {
    display: none !important;
}

body.dark-theme .btn,
body.dark-theme .dashboard-app-button,
body.dark-theme .quick-card,
body.dark-theme .tracker-period-link,
body.dark-theme .mobile-device-control {
    box-shadow: none !important;
}

body.dark-theme .btn-primary,
body.dark-theme .tarteeb-submit .btn-primary,
body.dark-theme .feedback-submit .btn-primary,
body.dark-theme .notice-submit .btn-primary {
    background: #806A9F !important;
    border-color: #A993C9 !important;
    color: #FFFFFF !important;
}

body.dark-theme .btn-primary:hover,
body.dark-theme .tarteeb-submit .btn-primary:hover,
body.dark-theme .feedback-submit .btn-primary:hover,
body.dark-theme .notice-submit .btn-primary:hover {
    background: #927BB2 !important;
    transform: translateY(-1px) !important;
}

body.dark-theme .btn-ghost,
body.dark-theme .btn-outline {
    background: transparent !important;
    border-color: #4A5D58 !important;
    color: #E6E0D1 !important;
}

body.dark-theme .glass,
body.dark-theme .card,
body.dark-theme .glass-crystal,
body.dark-theme .matte-panel,
body.dark-theme .dashboard-app-library-head,
body.dark-theme .dashboard-app-library-tools,
body.dark-theme .dashboard-app-grid {
    background: #182225 !important;
    border-color: #2A3938 !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
}

body.dark-theme .card-top,
body.dark-theme .dashboard-app-library-head,
body.dark-theme .feedback-card-head,
body.dark-theme .operations-card-head,
body.dark-theme .notice-admin-head,
body.dark-theme .tarteeb-prayer-head,
body.dark-theme .tarteeb-card-head {
    background: linear-gradient(135deg, #211C30, #172223) !important;
    border-bottom-color: #2A3938 !important;
}

body.dark-theme .dashboard-app-button {
    background: #141E20 !important;
    border-color: #2A3938 !important;
    color: #ECE9DF !important;
}

body.dark-theme .dashboard-app-button.live {
    background: #211C30 !important;
    border-color: rgba(201,162,93,.28) !important;
}

body.dark-theme .dashboard-app-button:hover {
    border-color: var(--madrasa-gold) !important;
    transform: translateY(-1px) !important;
}

body.dark-theme .page-hero,
body.dark-theme .welcome-hero {
    background: linear-gradient(135deg, #0C1517, #132124 62%, #1B1730) !important;
    border-bottom-color: rgba(201,162,93,.14) !important;
}

/* Replace glossy purple hero glare with a restrained night-madrasa surface. */
body.dark-theme .admin-command-hero,
body.dark-theme .hifz-lead,
body.dark-theme .companion-hero {
    background: linear-gradient(135deg, #142221, #1C2130 60%, #27203A) !important;
    border: 1px solid rgba(201,162,93,.20) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,.22) !important;
}
body.dark-theme .admin-command-hero::after { display:none !important; }
body.dark-theme .admin-command-hero::before,
body.dark-theme .hifz-lead::after,
body.dark-theme .companion-hero::after { color: rgba(201,162,93,.08) !important; opacity: 1 !important; }
body.dark-theme .admin-command-note,
body.dark-theme .hifz-direction,
body.dark-theme .hifz-lead-stat { background: rgba(0,0,0,.18) !important; border-color: rgba(201,162,93,.14) !important; }
body.dark-theme .hifz-progress-fill { background: linear-gradient(90deg, #C9A25D, #E9D6A8) !important; }


body.dark-theme .page-hero::before,
body.dark-theme .welcome-hero::before {
    color: var(--madrasa-gold) !important;
    opacity: .06 !important;
}

body.dark-theme .page-hero .hero-inner::after {
    content: 'رَبِّ زِدْنِي عِلْمًا';
    position: absolute;
    right: 0;
    bottom: -1.1rem;
    font-family: var(--fq);
    font-size: 2.1rem;
    color: rgba(201,162,93,.11);
    direction: rtl;
    pointer-events: none;
}

body.dark-theme .page-hero .hero-left,
body.dark-theme .page-hero .hero-inner > * { position: relative; z-index: 1; }

body.dark-theme .madrasa-notice-strip {
    background: #1A2423 !important;
    border-color: #3B4C46 !important;
}

body.dark-theme .madrasa-notice-important { background: #3B2D14 !important; }
body.dark-theme .madrasa-notice-urgent { background: #402326 !important; }

body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea,
body.dark-theme .field input,
body.dark-theme .field select,
body.dark-theme .field textarea {
    background: #10191B !important;
    border-color: #344542 !important;
    color: #F3F0E7 !important;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder { color: #77837D !important; }

body.dark-theme .premium-table th { background: #211C30 !important; color: #DED8CB !important; }
body.dark-theme .premium-table td { border-bottom-color: #263735 !important; }
body.dark-theme .premium-table tr:hover td { background: #1D2928 !important; }

/* Clean, aligned icon-only dark mode switch. */
.header-desktop-actions #themeToggle {
    background: #1A2423 !important;
    border: 1px solid #3B4C46 !important;
    color: var(--madrasa-gold) !important;
    box-shadow: none !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}
.header-desktop-actions #themeToggle:hover {
    background: #263332 !important;
    border-color: var(--madrasa-gold) !important;
    transform: translateY(-1px) !important;
}

body.dark-theme .nav,
body.dark-theme .mobile-drawer,
body.dark-theme .bottom-nav {
    background: #0C1517 !important;
    border-color: #263735 !important;
    box-shadow: none !important;
}

body.dark-theme footer {
    background: linear-gradient(180deg, #111B1D, #0B1113) !important;
}

/* ── CALM ISLAMIC LIGHT REFINEMENT ─────────────────────────── */
body:not(.dark-theme) .page-hero {
    border-bottom-color: rgba(201,162,93,.16);
}

body:not(.dark-theme) .page-hero::before {
    color: rgba(124,58,237,.16);
}

body:not(.dark-theme) .glass:hover,
body:not(.dark-theme) .card:hover {
    border-color: rgba(201,162,93,.25);
}

/* Mobile stays calm: lower decoration and remove harsh hover movement. */
@media (max-width: 768px) {
    body.dark-theme .page-hero .hero-inner::after { font-size: 1.45rem; bottom: -.8rem; }
    body.dark-theme .glass:hover,
    body.dark-theme .card:hover,
    body.dark-theme .dashboard-app-button:hover { transform: none !important; }
    body.dark-theme .btn:hover { transform: none !important; }
}

/* ── PUBLIC PAGES: ORIGINAL CALLIGRAPHIC ACCENTS ──────────── */
body.madrasa-public {
    position: relative;
    isolation: isolate;
}
/* ROUND 14: scoped with :not(.has-custom-bg). This decorative ayah shares
   `body::after` with the wallpaper dimming overlay in
   371_WALLPAPER_THEME.css.php. Only ONE ::after box exists per element, so
   the geometry below (left:50%, max-width, rotate) was being applied to the
   overlay too, turning the full-screen veil into a rotated half-width slab --
   the hard dark band down the left of the landing page. When a custom
   wallpaper is active the overlay owns ::after and this decoration stands down. */
body.madrasa-public:not(.has-custom-bg)::after {
    content: 'رَبِّ زِدْنِي عِلْمًا';
    position: fixed;
    right: -2.5rem;
    bottom: 4%;
    z-index: -1;
    color: rgba(124,58,237,.055);
    direction: rtl;
    font-family: 'Amiri Quran','Amiri',serif;
    font-size: clamp(4rem,10vw,9rem);
    line-height: 1;
    pointer-events: none;
    transform: rotate(-8deg);
}
body.madrasa-public .nav,
body.madrasa-public .top,
body.madrasa-public .nav-land {
    box-shadow: 0 12px 32px rgba(57,35,96,.07) !important;
    border-color: rgba(201,162,93,.18) !important;
}
body.madrasa-public .card,
body.madrasa-public .glass-crystal {
    border-color: rgba(124,58,237,.12) !important;
    box-shadow: 0 18px 48px rgba(57,35,96,.07) !important;
}
body.madrasa-public .badge,
body.madrasa-public .eyebrow,
body.madrasa-public .tag {
    border-color: rgba(201,162,93,.24) !important;
}
@media(max-width:600px){
    body.madrasa-public:not(.has-custom-bg)::after{font-size:4.2rem;right:-1.2rem;bottom:8%;opacity:.75}
}

@media (prefers-reduced-motion: reduce) {
    body.dark-theme *,
    body.dark-theme *::before,
    body.dark-theme *::after { transition-duration: .01ms !important; }
}

/* ── SITE-WIDE COHERENCE PASS ─────────────────────────────────
   Shared finish for every role: quieter surfaces, clearer hierarchy,
   accessible form states and a mobile-first working surface. */
:root {
    --madrasa-radius: 18px;
    --madrasa-radius-sm: 12px;
    --madrasa-shadow: 0 10px 26px rgba(34, 25, 61, .055);
    --madrasa-shadow-hover: 0 16px 34px rgba(34, 25, 61, .09);
}

/* Keyboard clarity matters just as much as visual polish. */
body:not(.madrasa-public) :focus-visible,
body.madrasa-public :focus-visible {
    outline: 3px solid rgba(201, 162, 93, .48) !important;
    outline-offset: 3px;
}

/* Internal pages share a quiet paper-and-ink surface rather than competing
   gradients. Individual dashboard styles can still add their own identity. */
body:not(.madrasa-public) .card,
body:not(.madrasa-public) .glass,
body:not(.madrasa-public) .glass-crystal {
    min-width: 0;
    border-color: rgba(92, 78, 128, .14);
    border-radius: var(--madrasa-radius);
    box-shadow: var(--madrasa-shadow);
}

body:not(.dark-theme):not(.madrasa-public) .card,
body:not(.dark-theme):not(.madrasa-public) .glass,
body:not(.dark-theme):not(.madrasa-public) .glass-crystal {
    background: rgba(255, 255, 255, .92);
}

body:not(.madrasa-public) .card-top,
body:not(.madrasa-public) .feedback-card-head,
body:not(.madrasa-public) .operations-card-head,
body:not(.madrasa-public) .notice-admin-head {
    position: relative;
    overflow: hidden;
    border-bottom-color: rgba(201, 162, 93, .17);
}

body:not(.madrasa-public) .card-top::after,
body:not(.madrasa-public) .feedback-card-head::after,
body:not(.madrasa-public) .operations-card-head::after,
body:not(.madrasa-public) .notice-admin-head::after {
    content: '۞';
    position: absolute;
    right: 1rem;
    top: 50%;
    color: rgba(201, 162, 93, .12);
    font-family: var(--fa);
    font-size: 2.25rem;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

body:not(.madrasa-public) .card-top > *,
body:not(.madrasa-public) .feedback-card-head > *,
body:not(.madrasa-public) .operations-card-head > *,
body:not(.madrasa-public) .notice-admin-head > * {
    position: relative;
    z-index: 1;
}

body:not(.madrasa-public) .card-heading,
body:not(.madrasa-public) .card-top h2,
body:not(.madrasa-public) .section-heading {
    letter-spacing: -.025em;
}

/* Preserve an elevated feel on desktop without jumpy, game-like movement. */
@media (hover: hover) and (pointer: fine) {
    body:not(.dark-theme):not(.madrasa-public) .card.glass:hover,
    body:not(.dark-theme):not(.madrasa-public) .glass-crystal:hover {
        border-color: rgba(201, 162, 93, .31);
        box-shadow: var(--madrasa-shadow-hover);
    }
}

/* Matte buttons: no shine sweep, no plastic gloss. */
body:not(.madrasa-public) .btn::after,
body:not(.madrasa-public) .dashboard-app-button::after {
    display: none !important;
}

body:not(.madrasa-public) .btn {
    border-width: 1px;
    box-shadow: 0 3px 10px rgba(36, 25, 67, .07);
}

body:not(.madrasa-public) .btn-primary {
    background: #7558A6;
    border-color: #7558A6;
    box-shadow: 0 5px 14px rgba(86, 63, 130, .16);
}

body:not(.madrasa-public) .btn-primary:hover {
    background: #684A98;
    border-color: #684A98;
    box-shadow: 0 7px 17px rgba(86, 63, 130, .20);
}

body:not(.madrasa-public) .btn-gold {
    background: #C39A55;
    border-color: #C39A55;
    box-shadow: 0 5px 14px rgba(195, 154, 85, .16);
}

body:not(.madrasa-public) .btn-gold:hover {
    background: #AA8040;
    border-color: #AA8040;
    box-shadow: 0 7px 17px rgba(170, 128, 64, .20);
}

body:not(.madrasa-public) .btn-ghost {
    background: rgba(255, 255, 255, .5);
    border-color: rgba(92, 78, 128, .16);
}

/* Form controls use a calm inset field treatment across all working pages. */
body:not(.madrasa-public) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body:not(.madrasa-public) select,
body:not(.madrasa-public) textarea {
    min-width: 0;
    border-color: rgba(92, 78, 128, .18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

body:not(.madrasa-public) input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
body:not(.madrasa-public) select:focus,
body:not(.madrasa-public) textarea:focus {
    border-color: rgba(117, 88, 166, .72) !important;
    box-shadow: 0 0 0 3px rgba(117, 88, 166, .10), inset 0 1px 0 rgba(255, 255, 255, .62) !important;
}

body:not(.madrasa-public) input[type="checkbox"]:not(.tracker-cb),
body:not(.madrasa-public) input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    appearance: auto;
    -webkit-appearance: checkbox;
    accent-color: var(--p);
}

body:not(.madrasa-public) input[type="radio"] {
    -webkit-appearance: radio;
}

body.dark-theme input[type="checkbox"]:not(.tracker-cb),
body.dark-theme input[type="radio"] {
    accent-color: var(--madrasa-gold);
}

/* Tables read more like an academic register, including on operational pages. */
body:not(.madrasa-public) .table-scroll {
    overflow-x: auto;
    border: 1px solid rgba(92, 78, 128, .12);
    border-radius: var(--madrasa-radius-sm);
    background: var(--w);
    scrollbar-color: var(--gold) transparent;
}

body:not(.madrasa-public) .premium-table th {
    letter-spacing: .055em;
    font-size: .61rem;
    text-transform: uppercase;
}

body:not(.madrasa-public) .premium-table td {
    vertical-align: middle;
}

body:not(.madrasa-public) .premium-table tr:last-child td {
    border-bottom: 0;
}

/* Shared dashboard tiles become more readable at a glance. */
body:not(.madrasa-public) .dashboard-app-button {
    border-radius: 14px;
    border-color: rgba(92, 78, 128, .15);
}

body:not(.madrasa-public) .dashboard-app-button.live {
    border-color: rgba(201, 162, 93, .34);
}

body:not(.madrasa-public) .dashboard-app-label {
    line-height: 1.18;
}

/* Header, hero and notice hierarchy is quieter but more intentional. */
body:not(.madrasa-public) .page-hero {
    border-bottom-color: rgba(201, 162, 93, .20);
}

body:not(.madrasa-public) .hero-badge,
body:not(.madrasa-public) .page-hero .hero-badge {
    border: 1px solid rgba(201, 162, 93, .25);
    background: rgba(255, 255, 255, .08);
    letter-spacing: .075em;
}

body:not(.madrasa-public) .madrasa-notice-strip {
    border-bottom-color: rgba(201, 162, 93, .18);
}

/* New staff planning surfaces and older cards both remain compact and safe. */
body:not(.madrasa-public) .review-card,
body:not(.madrasa-public) .muraajaah-card,
body:not(.madrasa-public) .tarteeb-card,
body:not(.madrasa-public) .operations-card {
    border-radius: var(--madrasa-radius);
}

/* Mobile: control density, stacking and hero actions without horizontal spill. */
@media (max-width: 700px) {
    body:not(.madrasa-public) .page-hero .hero-inner {
        align-items: flex-start;
    }

    body:not(.madrasa-public) .page-hero .hero-actions,
    body:not(.madrasa-public) .page-hero .hero-right {
        width: 100%;
        min-width: 0;
    }

    body:not(.madrasa-public) .page-hero .hero-actions {
        display: flex;
        gap: .45rem;
        flex-wrap: wrap;
    }

    body:not(.madrasa-public) .page-hero .hero-actions .btn {
        flex: 1 1 145px;
        min-width: 0;
        white-space: normal;
    }

    body:not(.madrasa-public) .card-top,
    body:not(.madrasa-public) .card-content {
        padding-left: .9rem;
        padding-right: .9rem;
    }

    body:not(.madrasa-public) .card-top::after,
    body:not(.madrasa-public) .feedback-card-head::after,
    body:not(.madrasa-public) .operations-card-head::after,
    body:not(.madrasa-public) .notice-admin-head::after {
        right: .7rem;
        font-size: 1.8rem;
    }

    body:not(.madrasa-public) .table-scroll {
        border-radius: 10px;
    }
}

@media (max-width: 420px) {
    body:not(.madrasa-public) .btn {
        min-height: 40px;
        padding-left: .8rem;
        padding-right: .8rem;
    }

    body:not(.madrasa-public) .page-hero .hero-actions .btn {
        flex-basis: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.madrasa-public) *,
    body:not(.madrasa-public) *::before,
    body:not(.madrasa-public) *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Matte role heroes replace the remaining bright application-style gradients.
   The deep ink, muted purple and gold language carries through Admin, Hifz
   and Companion spaces without relying on copied artwork. */
body:not(.dark-theme):not(.madrasa-public) .admin-command-hero,
body:not(.dark-theme):not(.madrasa-public) .hifz-lead,
body:not(.dark-theme):not(.madrasa-public) .companion-hero {
    background: linear-gradient(135deg, #211831 0%, #3A2857 58%, #263C3A 100%) !important;
    border: 1px solid rgba(201, 162, 93, .27) !important;
    box-shadow: 0 16px 34px rgba(35, 23, 58, .16) !important;
}

body:not(.dark-theme):not(.madrasa-public) .admin-command-hero::before,
body:not(.dark-theme):not(.madrasa-public) .hifz-lead::after,
body:not(.dark-theme):not(.madrasa-public) .companion-hero::after {
    color: rgba(233, 214, 168, .11) !important;
    opacity: 1 !important;
}

body:not(.dark-theme):not(.madrasa-public) .admin-command-note,
body:not(.dark-theme):not(.madrasa-public) .hifz-direction,
body:not(.dark-theme):not(.madrasa-public) .hifz-lead-stat {
    background: rgba(5, 10, 17, .19) !important;
    border-color: rgba(233, 214, 168, .18) !important;
}

body:not(.dark-theme):not(.madrasa-public) .hifz-progress-fill {
    background: linear-gradient(90deg, #C39A55, #E9D6A8) !important;
}

/* Some browser form controls retain a light native canvas even when their
   computed theme is dark. A quiet inset surface keeps every role's fields
   legible and consistent in Night Madrasa mode. */
body.dark-theme input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body.dark-theme select,
body.dark-theme textarea {
    background: #10191B !important;
    background-color: #10191B !important;
    box-shadow: inset 0 0 0 1000px #10191B !important;
    color: #F3F0E7 !important;
    -webkit-text-fill-color: #F3F0E7;
    color-scheme: dark;
}

body.dark-theme input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):focus,
body.dark-theme select:focus,
body.dark-theme textarea:focus {
    background: #141E20 !important;
    background-color: #141E20 !important;
    box-shadow: inset 0 0 0 1000px #141E20, 0 0 0 3px rgba(201,162,93,.16) !important;
}

/* ── COMPLETE, RESPECTFUL ARABIC CALLIGRAPHY ──────────────────
   Do not let Qur’anic Arabic drift off a page edge as a cropped texture.
   Every shared placement uses one complete, framed phrase instead. */
body::before {
    content: none !important;
    display: none !important;
}

/* A complete phrase sits inside, rather than beyond, every standard hero. */
body:not(.madrasa-public) .page-hero::before,
body:not(.madrasa-public) .welcome-hero::before {
    content: 'وَقُل رَّبِّ زِدْنِي عِلْمًا' !important;
    left: auto !important;
    right: 1.6rem !important;
    top: auto !important;
    bottom: .55rem !important;
    max-width: calc(100% - 3.2rem);
    overflow: visible !important;
    transform: none !important;
    color: rgba(233,214,168,.13) !important;
    font-family: var(--fq) !important;
    font-size: clamp(1.15rem, 2.7vw, 2.45rem) !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    text-align: right;
    opacity: 1 !important;
}

/* The old negative-positioned hero echoes are intentionally removed. */
body:not(.madrasa-public) .page-hero .hero-inner::after {
    content: none !important;
    display: none !important;
}

/* Role hero calligraphy: full phrase, protected margins, no bottom crop. */
.admin-command-hero::before,
.hifz-lead::after,
.companion-hero::after,
.how-hero::after,
.khatam-hero::after,
.epic-hero-bg-text {
    content: 'وَقُل رَّبِّ زِدْنِي عِلْمًا' !important;
    left: auto !important;
    right: 1.25rem !important;
    top: auto !important;
    bottom: .7rem !important;
    max-width: calc(100% - 2.5rem);
    overflow: visible !important;
    transform: none !important;
    color: rgba(233,214,168,.15) !important;
    direction: rtl !important;
    font-family: var(--fq) !important;
    font-size: clamp(1.1rem, 2.5vw, 2.35rem) !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    pointer-events: none;
}

/* A visible, fully written Quranic reminder anchors every shared footer. */
.madrasa-calligraphy-band {
    width: min(760px, calc(100% - 2rem));
    margin: 2.2rem auto 1.15rem;
    padding: .9rem 1.2rem .8rem;
    border-top: 1px solid rgba(201,162,93,.28);
    border-bottom: 1px solid rgba(201,162,93,.18);
    text-align: center;
}

.madrasa-calligraphy-band__arabic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    color: #83663A;
    direction: rtl;
    font-family: var(--fq);
    font-size: clamp(1.3rem, 3vw, 2.1rem);
    line-height: 1.55;
    white-space: nowrap;
}

.madrasa-calligraphy-band__seal {
    color: var(--madrasa-gold);
    font-family: var(--fa);
    font-size: .95em;
}

.madrasa-calligraphy-band p {
    margin: .12rem 0 0;
    color: var(--t3);
    font-size: .62rem;
    font-style: italic;
}

.madrasa-calligraphy-band p span {
    color: var(--madrasa-gold);
    font-style: normal;
    font-weight: 800;
}

body.dark-theme .madrasa-calligraphy-band {
    border-top-color: rgba(201,162,93,.32);
    border-bottom-color: rgba(201,162,93,.16);
}

body.dark-theme .madrasa-calligraphy-band__arabic { color: var(--madrasa-gold-soft); }

/* Public pages get a complete centred watermark; never a word cut at the edge. */
/* ROUND 14: scoped with :not(.has-custom-bg) -- see the note above. The
   `transform: translateX(-50%) rotate(-3deg)` here was the exact source of the
   rotated seam measured on the landing page. */
body.madrasa-public:not(.has-custom-bg)::after {
    content: 'وَقُل رَّبِّ زِدْنِي عِلْمًا' !important;
    right: auto !important;
    left: 50% !important;
    bottom: 3.5% !important;
    max-width: calc(100% - 2rem);
    overflow: visible !important;
    transform: translateX(-50%) rotate(-3deg) !important;
    color: rgba(124,58,237,.055) !important;
    font-size: clamp(1.5rem, 4vw, 3.4rem) !important;
    line-height: 1.35 !important;
    text-align: center;
    white-space: nowrap !important;
}

@media (max-width: 700px) {
    body:not(.madrasa-public) .page-hero::before,
    body:not(.madrasa-public) .welcome-hero::before,
    .admin-command-hero::before,
    .hifz-lead::after,
    .companion-hero::after,
    .how-hero::after,
    .khatam-hero::after,
    .epic-hero-bg-text {
        right: 50% !important;
        bottom: .45rem !important;
        max-width: calc(100% - 1.5rem);
        transform: translateX(50%) !important;
        font-size: clamp(1rem, 5.4vw, 1.55rem) !important;
        text-align: center;
    }

    .madrasa-calligraphy-band {
        width: calc(100% - 1.5rem);
        margin-top: 1.6rem;
        padding: .75rem .55rem .65rem;
    }

    .madrasa-calligraphy-band__arabic {
        gap: .35rem;
        font-size: clamp(1.08rem, 5.1vw, 1.45rem);
        white-space: normal;
        flex-wrap: wrap;
    }

    body.madrasa-public:not(.has-custom-bg)::after {
        left: 50% !important;
        right: auto !important;
        bottom: 2% !important;
        max-width: calc(100% - 1rem);
        font-size: clamp(1rem, 5vw, 1.55rem) !important;
        white-space: normal !important;
    }
}

/* The enrolment page previously placed a long Arabic phrase off the left edge.
   Keep its complete reminder inside the visible canvas as well. */
body.madrasa-public .page-bg::before {
    content: 'وَقُل رَّبِّ زِدْنِي عِلْمًا' !important;
    left: 50% !important;
    right: auto !important;
    top: 8% !important;
    max-width: calc(100% - 2rem);
    overflow: visible !important;
    transform: translateX(-50%) rotate(-3deg) !important;
    color: rgba(124,58,237,.05) !important;
    font-size: clamp(1.6rem, 4vw, 3.5rem) !important;
    line-height: 1.35 !important;
    text-align: center;
    white-space: nowrap !important;
}

/* The public Khatam hero keeps the complete word within its panel. */
.epic-hero-bg-text {
    right: 1.25rem !important;
    bottom: .65rem !important;
    max-width: calc(100% - 2.5rem);
    overflow: visible !important;
    font-size: clamp(1.35rem, 3vw, 2.5rem) !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

@media (max-width:700px) {
    body.madrasa-public .page-bg::before {
        top: 6% !important;
        max-width: calc(100% - 1rem);
        font-size: clamp(1rem, 5vw, 1.55rem) !important;
        white-space: normal !important;
    }

    .epic-hero-bg-text {
        right: 50% !important;
        bottom: .45rem !important;
        transform: translateX(50%) !important;
        max-width: calc(100% - 1.5rem);
        font-size: clamp(1rem, 5vw, 1.55rem) !important;
        text-align: center;
        white-space: normal !important;
    }
}

/* Mobile pages receive a real calligraphy ribbon in normal page flow.
   This avoids relying on a clipped pseudo-element on smaller screens. */
.madrasa-mobile-calligraphy,
.madrasa-public-calligraphy {
    display: none;
}

@media (max-width: 700px) {
    /* The Quranic reminder now lives in one place, the calligraphy band above
       the footer, where it rotates each time you sign in. This strip repeated
       it directly under the header and pushed the greeting down the page, so
       it is no longer shown. */
    .madrasa-mobile-calligraphy { display: none !important; }

    .madrasa-public-calligraphy {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .34rem;
        width: calc(100% - 1.5rem);
        margin: .65rem auto .1rem;
        padding: .38rem .45rem;
        border-top: 1px solid rgba(201,162,93,.22);
        border-bottom: 1px solid rgba(201,162,93,.14);
        color: #8B6B37;
        font-family: 'Amiri Quran','Amiri',serif;
        font-size: clamp(1rem, 5vw, 1.35rem);
        line-height: 1.35;
        text-align: center;
        direction: rtl;
    }

    body:not(.madrasa-public) .page-hero::before,
    body:not(.madrasa-public) .welcome-hero::before,
    .admin-command-hero::before,
    .hifz-lead::after,
    .companion-hero::after,
    .how-hero::after,
    .khatam-hero::after,
    .epic-hero-bg-text,
    body.madrasa-public::after,
    body.madrasa-public .page-bg::before {
        content: none !important;
        display: none !important;
    }
}

@media (max-width: 700px) {
    /* The landing navigation is fixed, so reserve a clean dedicated line for
       the complete Arabic phrase rather than letting the navigation cover it. */
    body.madrasa-landing .madrasa-public-calligraphy {
        margin-top: 67px;
    }
}

/* ── ORIGINAL CALLIGRAPHY-INSPIRED GLASS PATTERN ───────────────
   Original SVG strokes and violet/gold dots: inspired by Arabic rhythm,
   not copied lettering or stock artwork. */
:root { --madrasa-calligraphy-pattern: url('362_ORIGINAL_CALLIGRAPHY_GLASS_PATTERN.svg'); }

body:not(.dark-theme):not(.madrasa-public)::after {
    background:
        radial-gradient(circle at 10% 8%, rgba(167,139,250,.14), transparent 28%),
        radial-gradient(circle at 90% 92%, rgba(201,162,93,.08), transparent 30%),
        var(--madrasa-calligraphy-pattern) repeat !important;
    background-size: auto, auto, 520px 520px !important;
    opacity: .42;
}

body.dark-theme::after {
    background:
        radial-gradient(circle at 10% 8%, rgba(154,134,193,.08), transparent 30%),
        radial-gradient(circle at 90% 92%, rgba(201,162,93,.055), transparent 30%),
        var(--madrasa-calligraphy-pattern) repeat !important;
    background-size: auto, auto, 540px 540px !important;
    opacity: .16;
}

/* Light-purple transparent glass surfaces throughout internal working pages. */
body:not(.dark-theme):not(.madrasa-public) .card,
body:not(.dark-theme):not(.madrasa-public) .glass,
body:not(.dark-theme):not(.madrasa-public) .glass-crystal,
body:not(.dark-theme):not(.madrasa-public) .tracker-summary-card,
body:not(.dark-theme):not(.madrasa-public) .fees-summary-card {
    background: rgba(251,248,255,.76) !important;
    border-color: rgba(124,58,237,.16) !important;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
}

body.madrasa-public .bg-mesh {
    background:
        radial-gradient(circle at 10% 20%, rgba(139,92,246,.07), transparent 38%),
        radial-gradient(circle at 90% 80%, rgba(212,168,67,.06), transparent 38%),
        var(--madrasa-calligraphy-pattern) repeat,
        linear-gradient(180deg, var(--bg) 0%, #FFFFFF 100%) !important;
    background-size: auto, auto, 500px 500px, auto !important;
    opacity: .48;
}

/* Public cards retain readability while revealing the purple glass language. */
body.madrasa-public .glass-crystal,
body.madrasa-public .support-card,
body.madrasa-public .guidance-card {
    background-color: rgba(252,250,255,.78) !important;
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
}

@media (max-width:700px) {
    body:not(.dark-theme):not(.madrasa-public)::after { background-size: auto, auto, 360px 360px !important; opacity: .32; }
    body.dark-theme::after { background-size: auto, auto, 380px 380px !important; opacity: .13; }
    body.madrasa-public .bg-mesh { background-size: auto, auto, 350px 350px, auto !important; opacity: .38; }
}

/* Denser original ornamental calligraphy-inspired pattern, generated for this
   madrasa only. It replaces the earlier sparse line tile. */
:root { --madrasa-calligraphy-pattern: url('363_ORIGINAL_ARABIC_INSPIRED_GLASS_PATTERN.png'); }

body:not(.dark-theme):not(.madrasa-public)::after {
    background:
        radial-gradient(circle at 10% 8%, rgba(167,139,250,.10), transparent 30%),
        radial-gradient(circle at 90% 92%, rgba(201,162,93,.055), transparent 30%),
        var(--madrasa-calligraphy-pattern) repeat !important;
    background-size: auto, auto, 560px 560px !important;
    opacity: .14;
}

body.dark-theme::after {
    background:
        radial-gradient(circle at 10% 8%, rgba(154,134,193,.07), transparent 30%),
        radial-gradient(circle at 90% 92%, rgba(201,162,93,.045), transparent 30%),
        var(--madrasa-calligraphy-pattern) repeat !important;
    background-size: auto, auto, 580px 580px !important;
    opacity: .09;
}

body.madrasa-public .bg-mesh {
    background:
        radial-gradient(circle at 10% 20%, rgba(139,92,246,.06), transparent 38%),
        radial-gradient(circle at 90% 80%, rgba(212,168,67,.045), transparent 38%),
        var(--madrasa-calligraphy-pattern) repeat,
        linear-gradient(180deg, var(--bg) 0%, #FFFFFF 100%) !important;
    background-size: auto, auto, 600px 600px, auto !important;
    opacity: .20;
}

@media (max-width:700px) {
    body:not(.dark-theme):not(.madrasa-public)::after { background-size: auto, auto, 410px 410px !important; opacity: .12; }
    body.dark-theme::after { background-size: auto, auto, 430px 430px !important; opacity: .075; }
    body.madrasa-public .bg-mesh { background-size: auto, auto, 430px 430px, auto !important; opacity: .18; }
}

/* Enlarged light glass pattern: soft flowing ornament first, restrained darker
   purple dot/diamond accents above it. */
:root { --madrasa-diacritic-dots: url('364_ORIGINAL_PURPLE_DIACRITIC_DOTS.svg'); }

body::before {
    content: '' !important;
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--madrasa-diacritic-dots) repeat !important;
    background-size: 760px 760px !important;
    opacity: .24 !important;
    pointer-events: none !important;
    transform: none !important;
    animation: none !important;
}

body:not(.dark-theme):not(.madrasa-public)::after {
    background:
        radial-gradient(circle at 10% 8%, rgba(167,139,250,.075), transparent 32%),
        radial-gradient(circle at 90% 92%, rgba(201,162,93,.04), transparent 32%),
        var(--madrasa-calligraphy-pattern) repeat !important;
    background-size: auto, auto, 900px 900px !important;
    opacity: .095;
}

body.dark-theme::after {
    background-size: auto, auto, 920px 920px !important;
    opacity: .055;
}

body.madrasa-public .bg-mesh {
    background:
        radial-gradient(circle at 10% 20%, rgba(139,92,246,.045), transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(212,168,67,.035), transparent 40%),
        var(--madrasa-calligraphy-pattern) repeat,
        linear-gradient(180deg, var(--bg) 0%, #FFFFFF 100%) !important;
    background-size: auto, auto, 940px 940px, auto !important;
    opacity: .12;
}

/* More transparent lilac glass lets the pattern breathe without weakening text. */
body:not(.dark-theme):not(.madrasa-public) .card,
body:not(.dark-theme):not(.madrasa-public) .glass,
body:not(.dark-theme):not(.madrasa-public) .glass-crystal,
body:not(.dark-theme):not(.madrasa-public) .tracker-summary-card,
body:not(.dark-theme):not(.madrasa-public) .fees-summary-card {
    background: rgba(255,253,255,.64) !important;
    border-color: rgba(124,58,237,.13) !important;
    backdrop-filter: blur(22px) saturate(132%);
    -webkit-backdrop-filter: blur(22px) saturate(132%);
}

body.madrasa-public .glass-crystal,
body.madrasa-public .support-card,
body.madrasa-public .guidance-card {
    background-color: rgba(255,253,255,.66) !important;
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
}

@media (max-width:700px) {
    body::before { background-size: 520px 520px !important; opacity: .21 !important; }
    body:not(.dark-theme):not(.madrasa-public)::after { background-size: auto, auto, 650px 650px !important; opacity: .08; }
    body.dark-theme::after { background-size: auto, auto, 680px 680px !important; opacity: .045; }
    body.madrasa-public .bg-mesh { background-size: auto, auto, 690px 690px, auto !important; opacity: .11; }
}

/* Keep all public text and controls above the decorative dot layer. */
body.madrasa-public > *:not(.bg-mesh):not(.nav-land) {
    position: relative;
    z-index: 1;
}

/* Dashboard tiles join the same light-purple frosted glass system. */
body:not(.dark-theme):not(.madrasa-public) .dashboard-app-button,
body:not(.dark-theme):not(.madrasa-public) .dashboard-app-library-head,
body:not(.dark-theme):not(.madrasa-public) .dashboard-app-library-tools {
    background: rgba(255,253,255,.58) !important;
    border-color: rgba(124,58,237,.14) !important;
    backdrop-filter: blur(16px) saturate(128%);
    -webkit-backdrop-filter: blur(16px) saturate(128%);
}

/* Bolder, zoomed-in flowing ornament with the dots kept as the richer accent. */
:root { --madrasa-calligraphy-pattern: url('365_ORIGINAL_BOLD_CALLIGRAPHY_GLASS_PATTERN.png'); }

body:not(.dark-theme):not(.madrasa-public)::after {
    background-size: auto, auto, 1080px 1080px !important;
    opacity: .075;
}

body.dark-theme::after {
    background-size: auto, auto, 1100px 1100px !important;
    opacity: .045;
}

body.madrasa-public .bg-mesh {
    background-size: auto, auto, 1120px 1120px, auto !important;
    opacity: .095;
}

/* A clearer frosted-glass treatment: more transparency, white rim light and
   a soft inner highlight, while keeping Quran learning text easy to read. */
body:not(.dark-theme):not(.madrasa-public) .card,
body:not(.dark-theme):not(.madrasa-public) .glass,
body:not(.dark-theme):not(.madrasa-public) .glass-crystal,
body:not(.dark-theme):not(.madrasa-public) .tracker-summary-card,
body:not(.dark-theme):not(.madrasa-public) .fees-summary-card,
body:not(.dark-theme):not(.madrasa-public) .dashboard-app-button {
    background: rgba(255,253,255,.50) !important;
    border-color: rgba(255,255,255,.72) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 14px 34px rgba(91,68,138,.08) !important;
    backdrop-filter: blur(26px) saturate(138%);
    -webkit-backdrop-filter: blur(26px) saturate(138%);
}

body.madrasa-public .glass-crystal,
body.madrasa-public .support-card,
body.madrasa-public .guidance-card,
body.madrasa-landing .nav-land {
    background: rgba(255,253,255,.52) !important;
    border-color: rgba(255,255,255,.76) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 14px 34px rgba(91,68,138,.09) !important;
    backdrop-filter: blur(26px) saturate(138%);
    -webkit-backdrop-filter: blur(26px) saturate(138%);
}

@media (max-width:700px) {
    body:not(.dark-theme):not(.madrasa-public)::after { background-size: auto, auto, 760px 760px !important; opacity: .065; }
    body.dark-theme::after { background-size: auto, auto, 780px 780px !important; opacity: .035; }
    body.madrasa-public .bg-mesh { background-size: auto, auto, 790px 790px, auto !important; opacity: .085; }
    body::before { opacity: .28 !important; }
}



/* Original calm static glass ornament, zoomed for broader calligraphy strokes — no animated tracing layer. */
:root { --madrasa-calligraphy-pattern: url('363_ORIGINAL_ARABIC_INSPIRED_GLASS_PATTERN.png?v=3'); }

body:not(.dark-theme):not(.madrasa-public)::after {
    background-size: auto, auto, 1500px 1500px !important;
    opacity: .095;
}

body.dark-theme::after {
    background-size: auto, auto, 1520px 1520px !important;
    opacity: .055;
}

body.madrasa-public .bg-mesh {
    background-size: auto, auto, 1600px 1600px, auto !important;
    opacity: .12;
}

body::before {
    content: '' !important;
    display: block !important;
    background: var(--madrasa-diacritic-dots) repeat !important;
    background-size: 760px 760px !important;
    opacity: .24 !important;
}

body:not(.dark-theme):not(.madrasa-public) .card,
body:not(.dark-theme):not(.madrasa-public) .glass,
body:not(.dark-theme):not(.madrasa-public) .glass-crystal,
body:not(.dark-theme):not(.madrasa-public) .tracker-summary-card,
body:not(.dark-theme):not(.madrasa-public) .fees-summary-card,
body:not(.dark-theme):not(.madrasa-public) .dashboard-app-button {
    background: rgba(255,253,255,.62) !important;
    border-color: rgba(255,255,255,.76) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 14px 34px rgba(91,68,138,.075) !important;
    backdrop-filter: blur(22px) saturate(132%);
    -webkit-backdrop-filter: blur(22px) saturate(132%);
}

body.madrasa-public .glass-crystal,
body.madrasa-public .support-card,
body.madrasa-public .guidance-card,
body.madrasa-landing .nav-land {
    background: rgba(255,253,255,.64) !important;
    border-color: rgba(255,255,255,.78) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 14px 34px rgba(91,68,138,.08) !important;
    backdrop-filter: blur(22px) saturate(132%);
    -webkit-backdrop-filter: blur(22px) saturate(132%);
}

@media (max-width:700px) {
    body::before { background-size: 520px 520px !important; opacity: .21 !important; }
    body:not(.dark-theme):not(.madrasa-public)::after { background-size: auto, auto, 1100px 1100px !important; opacity: .08; }
    body.dark-theme::after { background-size: auto, auto, 1130px 1130px !important; opacity: .045; }
    body.madrasa-public .bg-mesh { background-size: auto, auto, 1200px 1200px, auto !important; opacity: .11; }
}