/* Firdaus module contrast contract v2: loaded after legacy visual layers so
   every rendered module page uses readable white cards and high-contrast controls. */
#mainContent .page:not(.dashboard-page) > .page-header .page-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(2, 12, 32, .54) !important;
}
#mainContent .page:not(.dashboard-page) > .page-header .page-subtitle {
  color: #e7eff8 !important;
  -webkit-text-fill-color: #e7eff8 !important;
  text-shadow: 0 2px 14px rgba(2, 12, 32, .44) !important;
}
#mainContent .page:not(.dashboard-page) :is(.content-card, .functional-card, .functional-empty, .error-state) {
  --color-text-primary: #10233f !important;
  --color-text-secondary: #365169 !important;
  --color-text-tertiary: #5c7087 !important;
  --color-bg-glass: #f2f6f9 !important;
  --color-gold-light: #805d10 !important;
  background: #ffffff !important;
  color: #10233f !important;
  -webkit-text-fill-color: #10233f !important;
  border-color: rgba(18, 59, 107, .22) !important;
}
#mainContent .page:not(.dashboard-page) :is(.content-card, .functional-card, .functional-empty, .error-state) :is(h1, h2, h3, h4, h5, strong, summary) {
  color: #10233f !important;
  -webkit-text-fill-color: #10233f !important;
  text-shadow: none !important;
}
#mainContent .page:not(.dashboard-page) :is(.content-card, .functional-card, .functional-empty, .error-state) :is(p, small, span, li, dt, dd, label, output) {
  color: #365169 !important;
  -webkit-text-fill-color: #365169 !important;
  text-shadow: none !important;
}
#mainContent .page:not(.dashboard-page) :is(.content-card, .functional-card, .functional-empty, .error-state) [lang="ar"] {
  color: #123b6b !important;
  -webkit-text-fill-color: #123b6b !important;
}
#mainContent .page:not(.dashboard-page) :is(.content-card, .functional-card, .functional-empty, .error-state) :not(button)[style*="color:#fff"],
#mainContent .page:not(.dashboard-page) :is(.content-card, .functional-card, .functional-empty, .error-state) :not(button)[style*="color: white"] {
  color: #10233f !important;
  -webkit-text-fill-color: #10233f !important;
}
#mainContent .page:not(.dashboard-page) :is(input, select, textarea) {
  background: #f5f8fa !important;
  color: #10233f !important;
  -webkit-text-fill-color: #10233f !important;
  border-color: rgba(18, 59, 107, .32) !important;
  caret-color: #10233f;
}
#mainContent .page:not(.dashboard-page) :is(input, textarea)::placeholder {
  color: #62766b !important;
  -webkit-text-fill-color: #62766b !important;
}
#mainContent .page:not(.dashboard-page) .content-card button.back-btn,
#mainContent .page:not(.dashboard-page) .functional-btn-secondary {
  background: #f5f8fa !important;
  color: #10233f !important;
  -webkit-text-fill-color: #10233f !important;
  border-color: rgba(18, 59, 107, .32) !important;
}
#mainContent .page:not(.dashboard-page) .functional-btn,
#mainContent .page:not(.dashboard-page) > .back-btn,
#mainContent .page:not(.dashboard-page) > nav .back-btn {
  background: #123b6b !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: #123b6b !important;
}
#mainContent .page:not(.dashboard-page) .functional-btn :is(span, strong, small) {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Responsive interaction contract: source citations and compact utility actions
   remain readable and have a reliable pointer/touch target at every viewport. */
#mainContent .page:not(.dashboard-page) .content-card a[href] {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 2px;
  margin: -4px -2px;
}

#mainContent .page:not(.dashboard-page) :is(.library-source-link, .library-source-detail, #tafsirClearSources) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px !important;
  padding: 8px 4px !important;
}

#mainContent .page:not(.dashboard-page) label:has(> input[type="checkbox"]) {
  min-height: 44px;
}

#mainContent .page:not(.dashboard-page) a[href^="http"] {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 2px;
  margin: -4px -2px;
}

#mainContent .page:not(.dashboard-page) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) {
  min-height: 38px;
}

#mainContent .page:not(.dashboard-page) input[type="range"] {
  min-height: 32px;
  touch-action: manipulation;
}

#sidebar .sidebar-toggle {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  touch-action: manipulation;
}

@media (max-width: 480px) {
  #mainContent .page:not(.dashboard-page) .content-card a[href] {
    min-height: 36px;
    padding-inline: 4px;
  }

  #mainContent .page:not(.dashboard-page) a[href^="http"] {
    min-height: 36px;
    padding-inline: 4px;
  }
}