/* The Quran Tuition — Premium Modern Theme v18.5.0
   Chrome 109+ compatible final visual layer for public, portal and admin.
   Uses direct colour fallbacks (no color-mix dependency) and one modern font stack. */

:root {
  --premium-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;
  --premium-heading-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif;

  --navy: #0b2239;
  --navy-2: #0f5f5a;
  --gold: #dcae36;
  --ivory: #f6f2e8;
  --ink: #334155;
  --muted: #64748b;
  --line: #dfe6ec;
  --white: #ffffff;
  --danger: #b42335;
  --success: #16855b;

  --theme-body-bg: #f4f7fa;
  --theme-surface: #ffffff;
  --theme-heading: #10243a;
  --theme-topbar-bg: #071827;
  --theme-topbar-text: #e7eef3;
  --theme-header-bg: #ffffff;
  --theme-header-text: #152b3c;
  --theme-header-muted: #64748b;
  --theme-header-border: #e3e9ee;
  --theme-footer-bg: #071827;
  --theme-footer-text: #d9e5ea;
  --theme-footer-link: #f2f7f8;
  --theme-sidebar-bg: #081d2e;
  --theme-sidebar-text: #d8e5e9;
  --theme-sidebar-active-bg: #dcae36;
  --theme-sidebar-active-text: #10243a;
  --theme-on-primary: #ffffff;
  --theme-on-accent: #10243a;
  --theme-input-bg: #ffffff;
  --theme-input-text: #27384a;
  --theme-input-border: #cfd9e2;

  --premium-radius: 18px;
  --premium-radius-sm: 11px;
  --premium-shadow-xs: 0 3px 10px rgba(15, 35, 55, .06);
  --premium-shadow-sm: 0 10px 28px rgba(15, 35, 55, .09);
  --premium-shadow: 0 20px 52px rgba(15, 35, 55, .13);
  --premium-header-height: 78px;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: #f4f7fa;
}

body.public-body,
body.admin-body,
body.portal-body,
body[data-theme-font="classic"],
body[data-theme-font="modern"],
body[data-theme-font="soft"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: #334155 !important;
  background: #f4f7fa !important;
  font-family: var(--premium-font) !important;
  font-size: 15px;
  line-height: 1.62;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body :is(h1, h2, h3, h4, h5, h6),
body[data-theme-font="classic"] :is(h1, h2, h3, h4, h5, h6),
body[data-theme-font="modern"] :is(h1, h2, h3, h4, h5, h6),
body[data-theme-font="soft"] :is(h1, h2, h3, h4, h5, h6) {
  color: #10243a;
  font-family: var(--premium-heading-font) !important;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -.035em;
}

body :is(p, li, a, span, small, label, button, input, select, textarea, th, td) {
  font-family: var(--premium-font) !important;
}

body a { color: #0d6964; }
body a:hover { color: #0a4f4c; }
body :is(.muted, .form-hint, .field-help, .card-body p, .section-heading p, .admin-page-head p, .panel-head p) {
  color: #64748b !important;
}

::selection { color: #10243a; background: #f3d987; }
:focus-visible { outline: 3px solid rgba(220, 174, 54, .65); outline-offset: 3px; }

.shell {
  width: min(1220px, calc(100% - 42px));
  margin-left: auto;
  margin-right: auto;
}

/* Forms and controls */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 11px 13px;
  color: #27384a !important;
  background: #ffffff !important;
  border: 1px solid #cfd9e2 !important;
  border-radius: 11px !important;
  box-shadow: 0 1px 2px rgba(15, 35, 55, .03);
}

textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #94a3b8; opacity: 1; }
input:focus, select:focus, textarea:focus {
  border-color: #0f766e !important;
  outline: 0 !important;
  box-shadow: 0 0 0 4px rgba(15, 118, 110, .13) !important;
}

/* Buttons */
.btn,
button.btn,
input[type="submit"] {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 11px !important;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover, button.btn:hover, input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 35, 55, .14);
}
.btn-gold {
  color: #10243a !important;
  background: linear-gradient(135deg, #e4b943, #d5a52d) !important;
  border-color: #c99520 !important;
}
.btn-navy {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0b2239, #0f5f5a) !important;
  border-color: #0b3f4b !important;
}
.btn-outline, .btn-ghost {
  color: #17334a !important;
  background: #ffffff !important;
  border-color: #cfd9e2 !important;
}
.btn-outline:hover, .btn-ghost:hover { background: #f0f5f7 !important; border-color: #9fb2c1 !important; }
.btn-danger { color: #fff !important; background: #b42335 !important; border-color: #991b2e !important; }

/* Public header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  color: #152b3c !important;
  background: rgba(255, 255, 255, .98) !important;
  border-bottom: 1px solid #e3e9ee !important;
  box-shadow: 0 8px 28px rgba(15, 35, 55, .08) !important;
  backdrop-filter: blur(16px);
}
.nav-wrap { min-width: 0; min-height: 78px; gap: 22px; }
.site-header .brand strong { color: #152b3c !important; font-weight: 850; }
.site-header .brand small { color: #64748b !important; }
.site-header .brand-mark {
  color: #10243a !important;
  background: #e4b943 !important;
  border: 1px solid #cf9e22 !important;
  box-shadow: 0 8px 18px rgba(220, 174, 54, .25);
}
.site-nav > .nav-item > a,
.site-header .text-link,
.site-header .nav-logout {
  color: #263c4d !important;
  font-size: .88rem;
  font-weight: 750;
}
.site-nav > .nav-item > a:hover,
.site-header .text-link:hover { color: #0f6b66 !important; }
.nav-submenu {
  color: #334155;
  background: #ffffff !important;
  border: 1px solid #dfe6ec !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 48px rgba(15, 35, 55, .16) !important;
}
.nav-submenu a { color: #334155 !important; }
.nav-submenu a:hover { color: #0f5f5a !important; background: #edf7f5 !important; }

.nav-toggle,
.header-more-toggle {
  width: 44px;
  height: 44px;
  color: #17334a !important;
  background: #ffffff !important;
  border: 1px solid #d7e0e7 !important;
  border-radius: 12px !important;
  box-shadow: 0 7px 18px rgba(15, 35, 55, .08) !important;
}
.header-more-menu {
  color: #334155 !important;
  background: #ffffff !important;
  border: 1px solid #dfe6ec !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(15, 35, 55, .22) !important;
}
.header-more-heading {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0b2239, #0f5f5a) !important;
  border-radius: 12px !important;
}
.header-more-heading span, .header-more-heading small { color: #ffffff !important; }
.header-more-links a {
  color: #263c4d !important;
  background: #f7fafb !important;
  border: 1px solid #e5ebf0 !important;
  border-radius: 10px !important;
}
.header-more-links a:hover { color: #0b534f !important; background: #eaf6f4 !important; border-color: #b7dad5 !important; }

/* Public hero and dark sections */
.hero,
.page-hero,
.course-hero,
.article-hero,
.trial-page-hero,
.premium-page-hero,
.section-navy {
  color: #ffffff !important;
  background: radial-gradient(circle at 86% 12%, rgba(220, 174, 54, .24), transparent 31%), linear-gradient(135deg, #0b2239 0%, #0c3445 52%, #0f5f5a 100%) !important;
}
.hero :is(h1, h2, h3),
.page-hero :is(h1, h2, h3),
.course-hero :is(h1, h2, h3),
.article-hero :is(h1, h2, h3),
.trial-page-hero :is(h1, h2, h3),
.premium-page-hero :is(h1, h2, h3),
.section-navy :is(h1, h2, h3, h4) { color: #ffffff !important; }
.hero :is(p, li),
.page-hero :is(p, li),
.course-hero :is(p, li),
.article-hero :is(p, li),
.trial-page-hero :is(p, li),
.premium-page-hero :is(p, li),
.section-navy :is(p, li) { color: #dce8ec !important; }
.hero .eyebrow, .page-hero .eyebrow, .gold { color: #eac85f !important; }
.hero-card, .hero-card-glass, .hero-progress-badge {
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .10) !important;
  box-shadow: 0 20px 48px rgba(2, 14, 25, .22) !important;
  backdrop-filter: blur(12px);
}
.hero-card :is(h2, h3), .hero-card-glass :is(h2, h3) { color: #ffffff !important; }

.section { padding-top: 84px; padding-bottom: 84px; }
.section-ivory { background: #f6f2e8 !important; }
.section-heading h2 { font-size: clamp(1.8rem, 3.2vw, 3rem); }

/* Public cards and content surfaces */
.public-body :is(.feature-card, .course-card, .teacher-card, .blog-card, .price-card, .testimonial-card, .testimonial, .content-card, .form-card, .auth-card, .contact-panel, .aside-panel, .course-summary, .split-callout, .note-card),
.portal-body :is(.admin-panel, .detail-card, .admin-stat-card, .form-card, .admin-form, .invoice-card),
.admin-body :is(.admin-panel, .detail-card, .admin-stat-card, .form-card, .admin-form, .settings-nav, .maintenance-action-card, .maintenance-manual-card, .maintenance-section) {
  color: #334155 !important;
  background: #ffffff !important;
  border: 1px solid #dfe6ec !important;
  border-radius: 18px !important;
  box-shadow: var(--premium-shadow-sm) !important;
}
.public-body :is(.feature-card, .course-card, .teacher-card, .blog-card, .price-card, .testimonial-card, .testimonial) {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
@media (hover: hover) {
  .public-body :is(.feature-card, .course-card, .teacher-card, .blog-card, .price-card, .testimonial-card, .testimonial):hover {
    transform: translateY(-4px);
    border-color: #b9c9d4 !important;
    box-shadow: var(--premium-shadow) !important;
  }
}
.public-body :is(.feature-card, .course-card, .teacher-card, .blog-card, .price-card, .testimonial-card, .content-card, .form-card, .auth-card) :is(h2, h3, h4) {
  color: #10243a !important;
}
.feature-icon, .course-visual-symbol, .blog-visual-symbol {
  color: #0b2239 !important;
  background: #f4df9e !important;
  border-color: #e0bd52 !important;
}

/* Footer */
.site-footer {
  color: #d9e5ea !important;
  background: linear-gradient(145deg, #071827, #0a2636) !important;
  border-top: 1px solid #183d4d !important;
}
.site-footer :is(h2, h3, h4, strong) { color: #ffffff !important; }
.site-footer :is(p, small) { color: #bfcfd6 !important; }
.site-footer a { color: #eef6f7 !important; }
.site-footer a:hover { color: #eac85f !important; }

/* Admin and portal application shells */
.admin-shell, .portal-shell { min-height: 100vh; background: #f4f7fa !important; }
.admin-main, .portal-content { min-width: 0; background: #f4f7fa !important; }
.admin-content, .portal-content { color: #334155 !important; }

.admin-sidebar,
.portal-sidebar {
  color: #d8e5e9 !important;
  background: linear-gradient(180deg, #071827 0%, #092637 52%, #0b3d46 100%) !important;
  border-right: 1px solid #173d4d !important;
  box-shadow: 14px 0 42px rgba(8, 25, 39, .15) !important;
}
.admin-brand, .portal-sidebar .admin-brand { border-bottom: 1px solid rgba(255, 255, 255, .10) !important; }
.admin-brand a, .admin-brand b, .portal-sidebar .admin-brand a, .portal-sidebar .admin-brand b { color: #ffffff !important; }
.admin-brand small, .sidebar-user small { color: #9fb7c1 !important; }
.admin-brand > button { color: #ffffff !important; background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .12) !important; }

.admin-nav .nav-group { border-bottom: 1px solid rgba(255, 255, 255, .06); }
.admin-nav .nav-group-toggle {
  color: #c9d8de !important;
  background: transparent !important;
  border: 0 !important;
  font-weight: 850;
  letter-spacing: .05em;
}
.admin-nav .nav-group-toggle:hover { color: #ffffff !important; background: rgba(255, 255, 255, .07) !important; }
.admin-nav .nav-group-chevron { color: #e4bd4f !important; }
.admin-nav .nav-group-links a {
  color: #c9d8de !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-weight: 680;
}
.admin-nav .nav-group-links a:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .09) !important;
  border-color: rgba(255, 255, 255, .06) !important;
}
.admin-nav .nav-group-links a.active {
  color: #10243a !important;
  background: linear-gradient(135deg, #e5bb49, #d3a32b) !important;
  border-color: #e9c760 !important;
  box-shadow: 0 9px 22px rgba(0, 0, 0, .17) !important;
}
.sidebar-user { color: #ffffff !important; background: rgba(0, 0, 0, .10) !important; border-top-color: rgba(255, 255, 255, .10) !important; }

.admin-topbar,
.portal-topbar {
  color: #263c4d !important;
  background: rgba(255, 255, 255, .98) !important;
  border-bottom: 1px solid #dfe6ec !important;
  box-shadow: 0 5px 18px rgba(15, 35, 55, .06) !important;
  backdrop-filter: blur(14px);
}
.topbar-title span { color: #718096 !important; font-weight: 850; letter-spacing: .09em; }
.topbar-title strong { color: #10243a !important; font-weight: 850; }
.topbar-actions a { color: #17334a !important; font-weight: 750; }
.topbar-actions a:hover { color: #0f6b66 !important; }
.topbar-avatar {
  color: #10243a !important;
  background: #e4b943 !important;
  border: 1px solid #cf9e22 !important;
}
.sidebar-collapse, .sidebar-toggle {
  color: #17334a !important;
  background: #ffffff !important;
  border: 1px solid #d7e0e7 !important;
  border-radius: 11px !important;
  box-shadow: 0 6px 16px rgba(15, 35, 55, .07) !important;
}

.admin-content { padding: clamp(20px, 3vw, 38px) !important; }
.admin-page-head,
.portal-body .admin-page-head {
  padding: clamp(22px, 3vw, 34px) !important;
  color: #334155 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f7fafb 100%) !important;
  border: 1px solid #dfe6ec !important;
  border-left: 5px solid #dcae36 !important;
  border-radius: 18px !important;
  box-shadow: var(--premium-shadow-sm) !important;
}
.admin-page-head h1 { color: #10243a !important; font-size: clamp(1.8rem, 3.2vw, 2.75rem); }
.admin-page-head .eyebrow { color: #9b7110 !important; }

.admin-stats, .statistics-grid { gap: 18px !important; }
.admin-stat-card, .statistics-card {
  position: relative;
  overflow: hidden;
  padding: 22px !important;
  border-top: 4px solid #0f766e !important;
}
.admin-stat-card::after, .statistics-card::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -30px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(220, 174, 54, .13);
}
.admin-stat-card small, .statistics-card small { color: #6b7c8e !important; font-weight: 750; }
.admin-stat-card strong, .statistics-card strong { color: #10243a !important; font-weight: 900; }

.admin-panel, .detail-card, .admin-form { padding: clamp(18px, 2.4vw, 28px) !important; }
.panel-head { border-bottom-color: #e7edf1 !important; }
.panel-head h2, .admin-panel h2, .detail-card h2 { color: #10243a !important; }

/* Tables */
.admin-table-wrap,
.portal-table-wrap,
.responsive-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  background: #ffffff !important;
  border: 1px solid #dfe6ec !important;
  border-radius: 14px !important;
  box-shadow: var(--premium-shadow-xs) !important;
}
.admin-table,
.portal-table,
.responsive-table table { width: 100%; color: #334155 !important; background: #ffffff !important; }
.admin-table thead th,
.portal-table thead th,
.responsive-table thead th {
  color: #17334a !important;
  background: #eef3f6 !important;
  border-bottom: 1px solid #d7e0e7 !important;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .045em;
}
.admin-table tbody td,
.portal-table tbody td,
.responsive-table tbody td { color: #334155 !important; border-bottom-color: #e7edf1 !important; }
.admin-table tbody tr:nth-child(even), .portal-table tbody tr:nth-child(even) { background: #fbfcfd !important; }
.admin-table tbody tr:hover, .portal-table tbody tr:hover { background: #f1f7f7 !important; }

/* Status badges */
[class*="status-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 850;
  line-height: 1.2;
  text-decoration: none;
}
.status-active, .status-approved, .status-paid, .status-completed, .status-pass, .status-present, .status-resolved, .status-published {
  color: #096342 !important; background: #ddf5e9 !important; border: 1px solid #a5dfc4 !important;
}
.status-pending, .status-review, .status-under_review, .status-payment_pending, .status-awaiting_student, .status-trial_requested {
  color: #8a5c00 !important; background: #fff3cf !important; border: 1px solid #edd38a !important;
}
.status-rejected, .status-fail, .status-cancelled, .status-absent {
  color: #9f1f32 !important; background: #fde6e9 !important; border: 1px solid #f1b6c0 !important;
}
.status-draft, .status-inactive, .status-archived, .status-hold, .status-paused {
  color: #526273 !important; background: #edf1f4 !important; border: 1px solid #d5dde4 !important;
}

/* Admin settings and maintenance page compatibility */
.settings-nav a { color: #334155 !important; border-radius: 10px !important; }
.settings-nav a:hover, .settings-nav a.active { color: #0b534f !important; background: #eaf6f4 !important; }
.maintenance-hero {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0b2239, #0f5f5a) !important;
  border-color: #214d58 !important;
}
.maintenance-hero :is(h2, p, strong) { color: #ffffff !important; }
.maintenance-head-badge, .maintenance-note-info {
  color: #334155 !important;
  background: #fff8e7 !important;
  border-color: #ead28e !important;
}
.maintenance-card-icon { color: #8b6200 !important; background: #fff3cf !important; border-color: #edd38a !important; }
.maintenance-file-field input[type="file"] { color: #334155 !important; background: #f8fafb !important; border: 1px dashed #aebdca !important; }

/* Auth pages */
.auth-shell { background: radial-gradient(circle at 15% 15%, rgba(220,174,54,.17), transparent 28%), linear-gradient(135deg, #eef4f6, #f8fafb) !important; }
.auth-card { border-top: 5px solid #0f766e !important; }

/* Responsive */
@media (max-width: 1100px) {
  .shell { width: min(100% - 32px, 1220px); }
  .site-nav { gap: 13px; }
  .site-nav > .nav-item > a { font-size: .82rem; }
}

@media (max-width: 920px) {
  body.public-body, body.admin-body, body.portal-body { font-size: 14.5px; }
  .site-header .nav-wrap { min-height: 70px; }
  .site-nav {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    z-index: 1300 !important;
    display: flex !important;
    width: min(88vw, 360px) !important;
    max-width: 100% !important;
    height: 100vh !important;
    padding: 84px 20px 24px !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    color: #334155 !important;
    background: #ffffff !important;
    border-left: 1px solid #dfe6ec !important;
    box-shadow: -20px 0 60px rgba(15, 35, 55, .24) !important;
    transform: translateX(105%) !important;
    visibility: hidden !important;
    transition: transform .24s ease, visibility .24s ease !important;
  }
  body.public-nav-open .site-nav,
  .site-nav.open,
  .site-nav.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
  .site-nav > .nav-item > a { color: #263c4d !important; font-size: .96rem; }
  .site-nav .nav-item { width: 100%; }
  .site-nav .nav-submenu { position: static !important; width: 100% !important; margin-top: 6px; box-shadow: none !important; }
  .mobile-nav-actions { display: grid !important; gap: 10px; width: 100%; }
  .nav-actions { display: none !important; }
  .nav-toggle { display: grid !important; }
  .header-more { display: none !important; }

  .admin-content { padding: 18px !important; }
  .admin-topbar, .portal-topbar { padding-left: 14px !important; padding-right: 14px !important; }
  .topbar-actions > a { display: none !important; }
  .admin-page-head { padding: 22px !important; }
  .admin-sidebar, .portal-sidebar { box-shadow: 18px 0 56px rgba(8, 25, 39, .34) !important; }
}

@media (max-width: 680px) {
  .shell { width: calc(100% - 24px); }
  .section { padding-top: 58px; padding-bottom: 58px; }
  .hero, .page-hero, .course-hero, .article-hero, .trial-page-hero, .premium-page-hero { padding-top: 58px !important; padding-bottom: 58px !important; }
  .hero h1, .page-hero h1, .course-hero h1, .article-hero h1, .trial-page-hero h1, .premium-page-hero h1 { font-size: clamp(2rem, 10vw, 3rem) !important; }
  .feature-grid, .courses-grid, .teacher-grid, .blog-grid, .testimonial-grid, .pricing-grid, .admin-stats, .statistics-grid, .quick-actions { grid-template-columns: 1fr !important; }
  .public-body :is(.feature-card, .course-card, .teacher-card, .blog-card, .price-card, .testimonial-card, .testimonial, .content-card, .form-card, .auth-card, .contact-panel),
  .admin-body :is(.admin-panel, .detail-card, .admin-stat-card, .form-card, .admin-form),
  .portal-body :is(.admin-panel, .detail-card, .admin-stat-card, .form-card, .admin-form) { border-radius: 14px !important; }
  .admin-content { padding: 13px !important; }
  .admin-page-head { padding: 18px !important; border-radius: 14px !important; }
  .admin-page-head h1 { font-size: 1.8rem; }
  .topbar-title span { display: none !important; }
  .topbar-title strong { font-size: .95rem !important; }
  .btn, button.btn, input[type="submit"] { width: auto; max-width: 100%; }
  .button-row, .hero-actions, .head-actions, .form-actions { align-items: stretch; }
  .hero-actions .btn, .form-actions .btn { flex: 1 1 100%; justify-content: center; }
}

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