/*
  Al-Mahir public platform skin — light A4-paper panels.
  Teacher bag pages are intentionally excluded.
*/

:root {
    --mahir-bg: #f3f4f6;
    --mahir-bg-deep: #eceff3;
    --mahir-surface: #ffffff;
    --mahir-surface-soft: #fafafa;
    --mahir-border: #d1d5db;
    --mahir-border-strong: #9ca3af;
    --mahir-text: #111827;
    --mahir-muted: #6b7280;
    --mahir-emerald: #047857;
    --mahir-emerald-deep: #065f46;
    --mahir-amber: #b45309;
    --mahir-blue: #1d4ed8;
    --mahir-radius-lg: 6px;
    --mahir-radius-md: 4px;
    --mahir-shadow: none;
}

html,
body {
    min-height: 100%;
}

body,
body.shell-body,
body.shell-page {
    background: var(--mahir-bg) !important;
    color: var(--mahir-text) !important;
    font-family: 'Tajawal', sans-serif !important;
    letter-spacing: 0 !important;
}

body::before,
body::after {
    display: none !important;
}

h1,
h2,
h3,
h4,
h5,
.font-amiri,
[class*="font-['Amiri']"] {
    font-family: 'Tajawal', sans-serif !important;
    color: var(--mahir-text) !important;
    letter-spacing: 0 !important;
}

p,
li,
span,
label,
small {
    color: inherit;
}

main,
.content-container,
.max-w-4xl,
.max-w-5xl,
.max-w-6xl,
.max-w-7xl {
    color: var(--mahir-text) !important;
}

header,
nav,
footer,
.shell-header,
.lesson-header,
.toolbar,
#lesson-toolbar,
.sidebar,
.reader-main,
.floating-nav,
.minimal-card,
.card,
.glass-card,
.shell-panel,
.shell-panel-soft,
.shell-stat-card,
.mushaf-paper,
article,
section.bg-white,
div.bg-white,
[class*="bg-white"],
[class*="bg-slate-50"],
[class*="bg-slate-100"],
[class*="dark:bg-slate"] {
    background: var(--mahir-surface) !important;
    border-color: var(--mahir-border) !important;
    color: var(--mahir-text) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

header,
.shell-header,
#lesson-toolbar,
.toolbar,
.floating-nav {
    border: 1px solid var(--mahir-border) !important;
    border-radius: var(--mahir-radius-lg) !important;
}

header,
.shell-header {
    margin: 12px !important;
    position: sticky;
    top: 12px !important;
}

.minimal-card,
.card,
.glass-card,
.shell-panel,
.shell-panel-soft,
.shell-stat-card,
.mushaf-paper,
article,
section.bg-white,
div.bg-white,
[class*="rounded-2xl"],
[class*="rounded-3xl"],
.rounded-\[32px\],
.rounded-\[40px\] {
    border-radius: var(--mahir-radius-lg) !important;
}

.minimal-card,
.card,
.glass-card,
.shell-panel,
.shell-panel-soft,
.shell-stat-card,
.mushaf-paper,
article {
    border: 1px solid var(--mahir-border) !important;
}

.minimal-card:hover,
.card:hover,
.glass-card:hover,
.shell-panel:hover,
.shell-stat-card:hover {
    border-color: var(--mahir-border-strong) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Paper-document panels across public branches */
.glass-sidebar,
.wpf-content,
.dashboard-hero,
.books-nav,
.books-body main,
.club-shell,
.support-shell {
    background: var(--mahir-surface) !important;
    border: 1px solid var(--mahir-border) !important;
    border-radius: var(--mahir-radius-lg) !important;
    box-shadow: none !important;
}

a {
    color: var(--mahir-blue) !important;
}

a:hover {
    color: var(--mahir-emerald) !important;
}

i,
.fa-solid,
.fa-regular,
.fa-brands,
.text-emerald-500,
.text-emerald-600,
.dark\:text-orange-500,
.text-orange-500 {
    color: var(--mahir-emerald) !important;
}

.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-slate-700,
.dark\:text-slate-400 {
    color: var(--mahir-muted) !important;
}

.text-slate-800,
.text-slate-900,
.dark\:text-white,
.text-white {
    color: var(--mahir-text) !important;
}

button,
a[class*="px-"][class*="py-"],
.btn-primary,
.btn-secondary,
.tab-btn,
input,
select,
textarea {
    border-radius: var(--mahir-radius-md) !important;
    transition: border-color 0.15s ease, background 0.15s ease !important;
}

button,
.btn-primary,
.bg-emerald-600,
.bg-emerald-500,
.tab-btn.active-tab {
    background: var(--mahir-emerald) !important;
    border: 1px solid var(--mahir-emerald-deep) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-weight: 800 !important;
}

.btn-secondary,
.tab-btn,
nav a,
nav button,
a[class*="bg-slate"],
button[class*="bg-slate"] {
    background: var(--mahir-surface-soft) !important;
    border: 1px solid var(--mahir-border) !important;
    color: var(--mahir-text) !important;
    box-shadow: none !important;
}

button:hover,
a[class*="px-"][class*="py-"]:hover,
.btn-primary:hover,
.btn-secondary:hover,
.tab-btn:hover {
    transform: none !important;
    border-color: var(--mahir-emerald) !important;
    filter: none !important;
}

input,
select,
textarea {
    background: #ffffff !important;
    border: 1px solid var(--mahir-border) !important;
    color: var(--mahir-text) !important;
    box-shadow: none !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--mahir-emerald) !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12) !important;
}

select option {
    color: #0f172a;
}

.hero-gradient,
.lesson-header {
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%) !important;
    border: 1px solid var(--mahir-border) !important;
}

.signature-box {
    background: var(--mahir-surface) !important;
    border-right-color: var(--mahir-emerald) !important;
}

.shell-stat-grid {
    gap: 12px !important;
}

.shell-stat-card {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shell-stat-card::after {
    display: none !important;
}

.mushaf-paper {
    max-width: 860px;
}

.quran-text {
    color: var(--mahir-text) !important;
}

.ayah-end {
    color: var(--mahir-amber) !important;
    filter: none;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

.reveal,
.reveal.active {
    opacity: 1 !important;
    transform: none !important;
}

@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    main,
    .content-container {
        padding-inline: 12px !important;
    }

    header,
    .shell-header {
        margin: 8px !important;
        border-radius: 14px !important;
    }

    .minimal-card,
    .card,
    .glass-card,
    .shell-panel,
    .shell-panel-soft,
    .shell-stat-card,
    .mushaf-paper {
        border-radius: 14px !important;
    }
}

@media print {
    body,
    body.shell-body,
    body.shell-page,
    main,
    .content-container,
    .mushaf-paper {
        background: #ffffff !important;
        color: #111827 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    span,
    li,
    strong,
    .quran-text {
        color: #111827 !important;
    }

    .minimal-card,
    .card,
    .glass-card,
    .shell-panel,
    .shell-panel-soft,
    .shell-stat-card,
    article {
        background: #ffffff !important;
        border-color: #e5e7eb !important;
        color: #111827 !important;
        box-shadow: none !important;
    }
}
