/* ==========================================================================
   Absher Personal Details - Natural Page Scrolling & Layout Normalization
   Zero inner card scrollbars; uses solely the main window scrollbar
   ========================================================================== */

/* Main Document Flow & Window Scrollbar */
html,
body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background-color: #f6f9f7 !important;
  width: 100% !important;
  max-width: 100vw !important;
}

#root {
  min-height: 100vh !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: #f6f9f7 !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

/* Universal Base Container Scaling & Flow */
#root>div:not(.home-page-container) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

#root>div.home-page-container,
.home-page-container {
  width: 100% !important;
  max-width: 480px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  position: relative !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.05) !important;
}

html.dark #root>div.home-page-container,
html.dark .home-page-container,
.dark #root>div.home-page-container,
.dark .home-page-container,
body.dark-mode .home-page-container,
.dark-theme .home-page-container,
[data-theme="dark"] .home-page-container {
  background-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.4) !important;
}

.container,
.main-wrapper,
.main-section,
.page-container,
.content-area,
.personal-details-page-wrapper,
.my-passport-container,
header,
nav {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Outer Page Container - Natural Document Flow with Bottom Nav Clearance */
.personal-details-page-wrapper {
  background-color: #f6f9f7 !important;
  padding: 12px 16px 95px 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
}

/* Card Container & Accordion Sections */
.personal-details-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border: 1px solid #dcdcdc !important;
  /* Distinct, crisp outer border */
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  margin: 0 !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  transition: box-shadow 0.2s ease;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Card Content / Row Container - Completely Natural Flow (No Inner Scrollbar) */
.personal-details-card .details-list,
.personal-details-card>div:nth-child(2),
.personal-details-rows-container {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  box-sizing: border-box !important;
}

/* Card Header (Both Main Card & Collapsible Section Triggers) */
.personal-details-card-header,
.personal-details-header,
.personal-details-card>div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  padding: 0 20px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  cursor: pointer !important;
  user-select: none !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid #e2e8f0 !important;
  transition: background-color 0.15s ease;
}

.personal-details-card-header.collapsed-header,
.personal-details-header.collapsed-header {
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
}

.personal-details-card-header.with-border,
.personal-details-header.with-border,
.personal-details-card>div:first-child {
  border-bottom: 1px solid #e2e8f0 !important;
}

.personal-details-card-header:hover,
.personal-details-header:hover {
  background-color: #fbfdfc !important;
}

/* Card Header Typography */
.personal-details-card-header-title,
.personal-details-header-title,
.personal-details-card>div:first-child span {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #333333 !important;
  letter-spacing: -0.01em !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Chevron Arrow in Collapsible Headers */
.personal-details-chevron {
  font-size: 18px !important;
  color: #006838 !important;
  display: inline-block !important;
  transition: transform 0.2s ease !important;
  line-height: 1 !important;
}

/* Status Badges in Collapsible Headers */
.personal-details-badge {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #006838 !important;
  background-color: #e8f5ec !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  line-height: 1.25 !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
}

/* Avatar / Profile Picture in Main Header (Exact 40px x 40px Rounded-Square) */
.personal-details-avatar,
.personal-details-profile-picture,
.personal-details-card>div:first-child img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  border: 1px solid #dcdcdc !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* Row Spacing & Rhythm - Subtle Sliver Peeking of Religion at Fold */
.personal-details-row,
.personal-details-card .detail-row,
.personal-details-card .row-item,
.personal-details-card .details-list>div,
.personal-details-card>div:nth-child(2)>div,
.personal-details-rows-container>div {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 68px !important;
  min-height: clamp(66px, calc((100vh - 192px) / 6.12), 78px) !important;
  max-height: none !important;
  padding: 15px 20px 15.5px 20px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  /* Clear, sharp row dividers */
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

.personal-details-row:last-child,
.personal-details-card .detail-row:last-child,
.personal-details-card .row-item:last-child,
.personal-details-card .details-list>div:last-child,
.personal-details-card>div:nth-child(2)>div:last-child,
.personal-details-rows-container>div:last-child {
  border-bottom: none !important;
}

/* Row Typography: Bold Data Labels */
.personal-details-card .detail-label,
.personal-details-card .row-label,
.personal-details-card .personal-details-item-title,
.personal-details-card .row-title,
.personal-details-card label,
.personal-details-card dt,
.personal-details-card .label,
.personal-details-card .detail-row>span:first-child,
.personal-details-card>div:nth-child(2)>div>span:first-child,
.personal-details-rows-container>div>span:first-child {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: 15px !important;
  /* Increase size to match reference */
  font-weight: 700 !important;
  /* Make labels prominently bold */
  color: #111111 !important;
  /* Ensure sharp dark contrast */
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Row Typography: Data Values */
.personal-details-card .detail-value,
.personal-details-card .personal-details-item-value,
.personal-details-card dd,
.personal-details-card .value,
.personal-details-card .detail-row>span:last-child,
.personal-details-card>div:nth-child(2)>div>span:last-child,
.personal-details-rows-container>div>span:last-child {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #000000 !important;
  margin-top: 4px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding: 0 !important;
  display: block !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* ==========================================================================
   Dark Mode Harmonization - Comprehensive Theme & Background Unification
   (Supports: .dark, body.dark, body.dark-mode, .dark-theme, [data-theme="dark"], [data-mode="dark"])
   Unifies "My Personal Details" and "My Passport" dark styling
   ========================================================================== */

/* 1. CSS Variable Harmonization for Dark Theme */
.dark,
body.dark,
body.dark-mode,
.dark-mode,
.dark-theme,
[data-theme="dark"],
[data-mode="dark"],
html.dark,
html.dark-mode,
html.dark-theme,
html[data-theme="dark"],
html[data-mode="dark"] {
  --background: #121212 !important;
  --card: #18181b !important;
  --card-foreground: #ffffff !important;
  --foreground: #ffffff !important;
  --border: #27272a !important;
  --muted: #27272a !important;
  --muted-foreground: #94a3b8 !important;
}

/* 2. Body, Page Container & Outer Edge Background Fix (Eliminating conflicting white edges) */
html.dark,
html.dark-mode,
html.dark-theme,
html[data-theme="dark"],
html[data-mode="dark"],
body.dark,
body.dark-mode,
body.dark-theme,
.dark-mode,
.dark-theme,
[data-theme="dark"] body,
[data-mode="dark"] body {
  background-color: #121212 !important;
  background: #121212 !important;
}

html.dark #root,
html.dark-mode #root,
html.dark-theme #root,
html[data-theme="dark"] #root,
html[data-mode="dark"] #root,
body.dark #root,
body.dark-mode #root,
body.dark-theme #root,
.dark-mode #root,
.dark-theme #root,
[data-theme="dark"] #root,
[data-mode="dark"] #root {
  background-color: #121212 !important;
  background: #121212 !important;
}

/* Outer Page Wrappers: Matches My Passport and Personal Details background exactly */
.dark .personal-details-page-wrapper,
body.dark .personal-details-page-wrapper,
body.dark-mode .personal-details-page-wrapper,
.dark-mode .personal-details-page-wrapper,
.dark-theme .personal-details-page-wrapper,
[data-theme="dark"] .personal-details-page-wrapper,
[data-mode="dark"] .personal-details-page-wrapper,
.dark .my-passport-container,
body.dark .my-passport-container,
body.dark-mode .my-passport-container,
.dark-mode .my-passport-container,
.dark-theme .my-passport-container,
[data-theme="dark"] .my-passport-container,
[data-mode="dark"] .my-passport-container {
  background-color: #121212 !important;
  background: #121212 !important;
}

/* 3. Global Card & Border Consistency in Dark Mode */
body.dark-mode .detail-card,
body.dark-mode .personal-details-card,
body.dark-mode .passport-card,
body.dark-mode .resident-card,
body.dark-mode .amount-card,
.dark .detail-card,
.dark .personal-details-card,
.dark .passport-card,
.dark .resident-card,
.dark .amount-card,
body.dark .detail-card,
body.dark .personal-details-card,
body.dark .passport-card,
body.dark .resident-card,
body.dark .amount-card,
.dark-mode .detail-card,
.dark-mode .personal-details-card,
.dark-mode .passport-card,
.dark-mode .resident-card,
.dark-mode .amount-card,
.dark-theme .detail-card,
.dark-theme .personal-details-card,
.dark-theme .passport-card,
.dark-theme .resident-card,
.dark-theme .amount-card,
[data-theme="dark"] .detail-card,
[data-theme="dark"] .personal-details-card,
[data-theme="dark"] .passport-card,
[data-theme="dark"] .resident-card,
[data-theme="dark"] .amount-card,
[data-mode="dark"] .detail-card,
[data-mode="dark"] .personal-details-card,
[data-mode="dark"] .passport-card,
[data-mode="dark"] .resident-card,
[data-mode="dark"] .amount-card {
  background-color: #18181b !important;
  background: #18181b !important;
  border: 1px solid #27272a !important;
  border-color: #27272a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* Card Header in Dark Mode */
body.dark-mode .detail-card-header,
body.dark-mode .personal-details-card-header,
body.dark-mode .personal-details-header,
body.dark-mode .passport-card .passport-card-header,
body.dark-mode .passport-card>div:first-child,
body.dark-mode .resident-card-header,
.dark .detail-card-header,
.dark .personal-details-card-header,
.dark .personal-details-header,
.dark .personal-details-card>div:first-child,
.dark .passport-card .passport-card-header,
.dark .passport-card>div:first-child,
.dark .resident-card-header,
body.dark .detail-card-header,
body.dark .personal-details-card-header,
body.dark .passport-card .passport-card-header,
.dark-mode .detail-card-header,
.dark-mode .personal-details-card-header,
.dark-mode .passport-card .passport-card-header,
.dark-theme .detail-card-header,
.dark-theme .personal-details-card-header,
.dark-theme .passport-card .passport-card-header,
[data-theme="dark"] .detail-card-header,
[data-theme="dark"] .personal-details-card-header,
[data-theme="dark"] .personal-details-header,
[data-theme="dark"] .passport-card .passport-card-header,
[data-mode="dark"] .detail-card-header,
[data-mode="dark"] .personal-details-card-header,
[data-mode="dark"] .personal-details-header,
[data-mode="dark"] .passport-card .passport-card-header {
  background-color: #18181b !important;
  background: #18181b !important;
  border-bottom: 1px solid #27272a !important;
  border-bottom-color: #27272a !important;
}

.dark .personal-details-card-header.with-border,
.dark .personal-details-header.with-border,
body.dark-mode .personal-details-card-header.with-border,
.dark-mode .personal-details-card-header.with-border,
.dark-theme .personal-details-card-header.with-border,
[data-theme="dark"] .personal-details-card-header.with-border,
[data-mode="dark"] .personal-details-card-header.with-border {
  border-bottom: 1px solid #27272a !important;
  border-bottom-color: #27272a !important;
}

.dark .personal-details-card-header:hover,
body.dark-mode .personal-details-card-header:hover,
.dark-mode .personal-details-card-header:hover,
.dark-theme .personal-details-card-header:hover,
[data-theme="dark"] .personal-details-card-header:hover,
[data-mode="dark"] .personal-details-card-header:hover {
  background-color: #222226 !important;
}

.dark .personal-details-card-header-title,
.dark .personal-details-header-title,
.dark .personal-details-card>div:first-child span,
body.dark .personal-details-card-header-title,
body.dark-mode .personal-details-card-header-title,
.dark-mode .personal-details-card-header-title,
.dark-theme .personal-details-card-header-title,
[data-theme="dark"] .personal-details-card-header-title,
[data-mode="dark"] .personal-details-card-header-title {
  color: #ffffff !important;
}

.dark .personal-details-card-header svg,
body.dark-mode .personal-details-card-header svg,
.dark-mode .personal-details-card-header svg,
.dark-theme .personal-details-card-header svg,
[data-theme="dark"] .personal-details-card-header svg,
[data-mode="dark"] .personal-details-card-header svg {
  stroke: #94a3b8 !important;
}

.dark .personal-details-avatar,
.dark .personal-details-profile-picture,
.dark .personal-details-card>div:first-child img,
body.dark .personal-details-avatar,
body.dark-mode .personal-details-avatar,
.dark-mode .personal-details-avatar,
.dark-theme .personal-details-avatar,
[data-theme="dark"] .personal-details-avatar,
[data-mode="dark"] .personal-details-avatar {
  border-color: #27272a !important;
}

/* 4. Row Dividers Consistency in Dark Mode */
body.dark-mode .detail-row,
body.dark-mode .personal-details-row,
body.dark-mode .passport-row,
body.dark-mode .resident-row,
body.dark-mode .detail-item,
body.dark-mode .row-item,
.dark .detail-row,
.dark .personal-details-row,
.dark .passport-row,
.dark .detail-item,
.dark .row-item,
.dark .resident-row,
.dark .personal-details-card .detail-row,
.dark .personal-details-card .row-item,
.dark .personal-details-card .details-list>div,
.dark .personal-details-card>div:nth-child(2)>div,
.dark .personal-details-rows-container>div,
.dark .passport-card .passport-row,
.dark .passport-card .detail-item,
body.dark .detail-row,
body.dark .personal-details-row,
body.dark .passport-row,
.dark-mode .detail-row,
.dark-mode .personal-details-row,
.dark-mode .passport-row,
.dark-theme .detail-row,
.dark-theme .personal-details-row,
.dark-theme .passport-row,
[data-theme="dark"] .detail-row,
[data-theme="dark"] .personal-details-row,
[data-theme="dark"] .passport-row,
[data-mode="dark"] .detail-row,
[data-mode="dark"] .personal-details-row,
[data-mode="dark"] .passport-row {
  background-color: #18181b !important;
  background: #18181b !important;
  border-bottom: 1px solid #27272a !important;
  border-bottom-color: #27272a !important;
}

body.dark-mode .detail-row:last-child,
body.dark-mode .personal-details-row:last-child,
body.dark-mode .passport-row:last-child,
body.dark-mode .detail-item:last-child,
.dark .detail-row:last-child,
.dark .personal-details-row:last-child,
.dark .passport-row:last-child,
.dark .detail-item:last-child,
.dark .row-item:last-child,
.dark .personal-details-card .detail-row:last-child,
.dark .personal-details-card .row-item:last-child,
.dark .personal-details-card .details-list>div:last-child,
.dark .personal-details-card>div:nth-child(2)>div:last-child,
.dark .personal-details-rows-container>div:last-child,
.dark .passport-card .passport-row:last-child,
.dark .passport-card .detail-item:last-child,
.dark-mode .personal-details-row:last-child,
.dark-theme .personal-details-row:last-child,
[data-theme="dark"] .personal-details-row:last-child,
[data-mode="dark"] .personal-details-row:last-child {
  border-bottom: none !important;
}

/* 5. Global Dark Mode Typography: Pure White Labels */
body.dark-mode .detail-card .detail-label,
body.dark-mode .passport-card .row-label,
body.dark-mode .passport-card .detail-label,
body.dark-mode .passport-card .passport-label,
body.dark-mode .passport-card .passport-row>p:first-child,
body.dark-mode .resident-card dt,
body.dark-mode .resident-card .detail-label,
body.dark-mode .resident-card label,
body.dark-mode label,
body.dark-mode dt,
body.dark-mode .detail-label,
body.dark-mode .row-label,
body.dark-mode .personal-details-item-title,
body.dark-mode .personal-details-card .detail-label,
body.dark-mode .personal-details-card .row-label,
body.dark-mode .personal-details-card .personal-details-item-title,
body.dark-mode .personal-details-card .row-title,
body.dark-mode .personal-details-card label,
body.dark-mode .personal-details-card dt,
body.dark-mode .amount-card .amount-label,
body.dark-mode .amount-card .detail-label,
.dark .detail-card .detail-label,
.dark .passport-card .row-label,
.dark .passport-card .detail-label,
.dark .passport-card .passport-label,
.dark .passport-card .passport-row>p:first-child,
.dark .resident-card dt,
.dark .resident-card .detail-label,
.dark .resident-card label,
.dark .detail-card label,
.dark dt,
.dark .detail-label,
.dark .row-label,
.dark .personal-details-item-title,
.dark .personal-details-card .detail-label,
.dark .personal-details-card .row-label,
.dark .personal-details-card .personal-details-item-title,
.dark .personal-details-card .row-title,
.dark .personal-details-card label,
.dark .personal-details-card dt,
.dark .personal-details-card .label,
.dark .amount-card .amount-label,
.dark .amount-card .detail-label,
.dark-mode .detail-card .detail-label,
.dark-mode .passport-card .row-label,
.dark-mode .passport-card .detail-label,
.dark-mode .resident-card dt,
.dark-mode .resident-card label,
.dark-mode .detail-card label,
.dark-mode dt,
.dark-mode .detail-label,
.dark-mode .personal-details-item-title,
.dark-theme .detail-card .detail-label,
.dark-theme .passport-card .row-label,
.dark-theme .passport-card .detail-label,
.dark-theme .resident-card dt,
.dark-theme .resident-card label,
.dark-theme .detail-card label,
.dark-theme dt,
.dark-theme .detail-label,
.dark-theme .personal-details-item-title,
[data-theme="dark"] .detail-card .detail-label,
[data-theme="dark"] .passport-card .row-label,
[data-theme="dark"] .passport-card .detail-label,
[data-theme="dark"] .passport-card .passport-label,
[data-theme="dark"] .passport-card .passport-row>p:first-child,
[data-theme="dark"] .resident-card dt,
[data-theme="dark"] .resident-card label,
[data-theme="dark"] .detail-card label,
[data-theme="dark"] dt,
[data-theme="dark"] .detail-label,
[data-theme="dark"] .row-label,
[data-theme="dark"] .personal-details-item-title,
[data-theme="dark"] .amount-card .amount-label,
[data-theme="dark"] .amount-card .detail-label,
[data-mode="dark"] .detail-card .detail-label,
[data-mode="dark"] .passport-card .row-label,
[data-mode="dark"] .passport-card .detail-label,
[data-mode="dark"] .resident-card dt,
[data-mode="dark"] .resident-card label,
[data-mode="dark"] .detail-card label,
[data-mode="dark"] dt,
[data-mode="dark"] .detail-label,
[data-mode="dark"] .row-label,
[data-mode="dark"] .personal-details-item-title {
  color: #ffffff !important;
  /* Pure white labels for citizen detail cards in dark mode */
}

/* ==========================================================================
   Admin Panel Form & Modal Labels (Light & Dark Mode Full Contrast)
   ========================================================================== */
.admin-modal-label,
label.admin-modal-label,
.dark .admin-modal-label,
.dark-mode .admin-modal-label,
[data-theme="dark"] .admin-modal-label,
[data-mode="dark"] .admin-modal-label,
html.dark .admin-modal-label,
body.dark .admin-modal-label,
html.dark-mode .admin-modal-label,
body.dark-mode .admin-modal-label {
  color: #244f36 !important; /* Premium high-contrast forest green */
  font-weight: 700 !important;
  font-size: 13px !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* Any label inside any admin modal or white container */
.dark div[style*="background: #ffffff"] label,
.dark div[style*="background:#ffffff"] label,
.dark div[style*="background: rgb(255, 255, 255)"] label,
.dark-mode div[style*="background: #ffffff"] label,
.dark-mode div[style*="background:#ffffff"] label,
.dark-mode div[style*="background: rgb(255, 255, 255)"] label,
.dark div[style*="background: #fff"] label,
.dark-mode div[style*="background: #fff"] label {
  color: #244f36 !important;
  font-weight: 700 !important;
}


/* 6. Global Dark Mode Typography: Soft Gray Data Values & Info Text */
body.dark-mode .detail-card .detail-value,
body.dark-mode .passport-card .row-value,
body.dark-mode .passport-card .detail-value,
body.dark-mode .passport-card .passport-value,
body.dark-mode .passport-card span,
body.dark-mode .passport-card td,
body.dark-mode .passport-card .passport-row div>p,
body.dark-mode .passport-card .passport-row p:last-child,
body.dark-mode .resident-card dd,
body.dark-mode .resident-card .detail-value,
body.dark-mode .resident-card span.info-text,
body.dark-mode span.info-text,
body.dark-mode .info-text,
body.dark-mode dd,
body.dark-mode .detail-value,
body.dark-mode .row-value,
body.dark-mode .personal-details-item-value,
body.dark-mode .personal-details-card .detail-value,
body.dark-mode .personal-details-card .personal-details-item-value,
body.dark-mode .personal-details-card dd,
body.dark-mode .personal-details-card .value,
body.dark-mode .amount-card .detail-value,
body.dark-mode .amount-card .amount-value,
body.dark-mode .amount-card p:last-child,
.dark .detail-card .detail-value,
.dark .passport-card .row-value,
.dark .passport-card .detail-value,
.dark .passport-card .passport-value,
.dark .passport-card span,
.dark .passport-card td,
.dark .passport-card .passport-row div>p,
.dark .passport-card .passport-row p:last-child,
.dark .resident-card dd,
.dark .resident-card .detail-value,
.dark .resident-card span.info-text,
.dark span.info-text,
.dark .info-text,
.dark dd,
.dark .detail-value,
.dark .row-value,
.dark .personal-details-item-value,
.dark .personal-details-card .detail-value,
.dark .personal-details-card .personal-details-item-value,
.dark .personal-details-card dd,
.dark .personal-details-card .value,
.dark .amount-card .detail-value,
.dark .amount-card .amount-value,
.dark .amount-card p:last-child,
.dark-mode .detail-card .detail-value,
.dark-mode .passport-card .row-value,
.dark-mode .passport-card .detail-value,
.dark-mode .passport-card .passport-value,
.dark-mode .resident-card dd,
.dark-mode span.info-text,
.dark-mode .info-text,
.dark-mode dd,
.dark-mode .detail-value,
.dark-mode .personal-details-item-value,
.dark-theme .detail-card .detail-value,
.dark-theme .passport-card .row-value,
.dark-theme .passport-card .detail-value,
.dark-theme .passport-card .passport-value,
.dark-theme .resident-card dd,
.dark-theme span.info-text,
.dark-theme .info-text,
.dark-theme dd,
.dark-theme .detail-value,
.dark-theme .personal-details-item-value,
[data-theme="dark"] .detail-card .detail-value,
[data-theme="dark"] .passport-card .row-value,
[data-theme="dark"] .passport-card .detail-value,
[data-theme="dark"] .passport-card .passport-value,
[data-theme="dark"] .passport-card span,
[data-theme="dark"] .passport-card td,
[data-theme="dark"] .passport-card .passport-row div>p,
[data-theme="dark"] .passport-card .passport-row p:last-child,
[data-theme="dark"] .resident-card dd,
[data-theme="dark"] span.info-text,
[data-theme="dark"] .info-text,
[data-theme="dark"] dd,
[data-theme="dark"] .detail-value,
[data-theme="dark"] .row-value,
[data-theme="dark"] .personal-details-item-value,
[data-theme="dark"] .amount-card .detail-value,
[data-theme="dark"] .amount-card .amount-value,
[data-theme="dark"] .amount-card p:last-child,
[data-mode="dark"] .detail-card .detail-value,
[data-mode="dark"] .passport-card .row-value,
[data-mode="dark"] .passport-card .detail-value,
[data-mode="dark"] .passport-card .passport-value,
[data-mode="dark"] .resident-card dd,
[data-mode="dark"] span.info-text,
[data-mode="dark"] .detail-value,
[data-mode="dark"] .row-value,
[data-mode="dark"] .personal-details-item-value {
  color: #94a3b8 !important;
  /* Soft gray info text */
}

/* ==========================================================================
   Dedicated Dark Mode Overrides for "My Personal Details"
   ========================================================================== */
body.dark-mode .personal-details-card .detail-label,
body.dark-mode .personal-details-card .row-title,
body.dark-mode .personal-details-card .row-label,
body.dark-mode .personal-details-card .personal-details-item-title,
body.dark-mode .personal-details-card dt,
body.dark-mode .personal-details-card label,
body.dark-mode .personal-details-card .detail-row>span:first-child,
body.dark-mode .personal-details-card>div:nth-child(2)>div>span:first-child,
body.dark-mode .personal-details-rows-container>div>span:first-child,
.dark-theme .personal-details-card .detail-label,
.dark-theme .personal-details-card .row-title,
.dark-theme .personal-details-card .row-label,
.dark-theme .personal-details-card .personal-details-item-title,
.dark-theme .personal-details-card dt,
.dark-theme .personal-details-card label,
.dark-theme .personal-details-card .detail-row>span:first-child,
.dark-theme .personal-details-card>div:nth-child(2)>div>span:first-child,
.dark-theme .personal-details-rows-container>div>span:first-child,
.dark .personal-details-card .detail-label,
.dark .personal-details-card .row-title,
.dark .personal-details-card .row-label,
.dark .personal-details-card .personal-details-item-title,
.dark .personal-details-card dt,
.dark .personal-details-card label,
.dark .personal-details-card .detail-row>span:first-child,
.dark .personal-details-card>div:nth-child(2)>div>span:first-child,
.dark .personal-details-rows-container>div>span:first-child,
[data-theme="dark"] .personal-details-card .detail-label,
[data-theme="dark"] .personal-details-card .row-title,
[data-theme="dark"] .personal-details-card .row-label,
[data-theme="dark"] .personal-details-card .personal-details-item-title,
[data-theme="dark"] .personal-details-card dt,
[data-theme="dark"] .personal-details-card label,
[data-theme="dark"] .personal-details-card .detail-row>span:first-child,
[data-theme="dark"] .personal-details-card>div:nth-child(2)>div>span:first-child,
[data-theme="dark"] .personal-details-rows-container>div>span:first-child,
[data-mode="dark"] .personal-details-card .detail-label,
[data-mode="dark"] .personal-details-card .row-title,
[data-mode="dark"] .personal-details-card .row-label,
[data-mode="dark"] .personal-details-card .personal-details-item-title,
[data-mode="dark"] .personal-details-card dt,
[data-mode="dark"] .personal-details-card label,
[data-mode="dark"] .personal-details-card .detail-row>span:first-child,
[data-mode="dark"] .personal-details-card>div:nth-child(2)>div>span:first-child,
[data-mode="dark"] .personal-details-rows-container>div>span:first-child {
  color: #ffffff !important;
  /* Pure white labels */
  font-weight: 600 !important;
}

body.dark-mode .personal-details-card .detail-value,
body.dark-mode .personal-details-card .personal-details-item-value,
body.dark-mode .personal-details-card .row-value,
body.dark-mode .personal-details-card dd,
body.dark-mode .personal-details-card .value,
body.dark-mode .personal-details-card .detail-row>span:last-child,
body.dark-mode .personal-details-card>div:nth-child(2)>div>span:last-child,
body.dark-mode .personal-details-rows-container>div>span:last-child,
.dark-theme .personal-details-card .detail-value,
.dark-theme .personal-details-card .personal-details-item-value,
.dark-theme .personal-details-card .row-value,
.dark-theme .personal-details-card dd,
.dark-theme .personal-details-card .value,
.dark-theme .personal-details-card .detail-row>span:last-child,
.dark-theme .personal-details-card>div:nth-child(2)>div>span:last-child,
.dark-theme .personal-details-rows-container>div>span:last-child,
.dark .personal-details-card .detail-value,
.dark .personal-details-card .personal-details-item-value,
.dark .personal-details-card .row-value,
.dark .personal-details-card dd,
.dark .personal-details-card .value,
.dark .personal-details-card .detail-row>span:last-child,
.dark .personal-details-card>div:nth-child(2)>div>span:last-child,
.dark .personal-details-rows-container>div>span:last-child,
[data-theme="dark"] .personal-details-card .detail-value,
[data-theme="dark"] .personal-details-card .personal-details-item-value,
[data-theme="dark"] .personal-details-card .row-value,
[data-theme="dark"] .personal-details-card dd,
[data-theme="dark"] .personal-details-card .value,
[data-theme="dark"] .personal-details-card .detail-row>span:last-child,
[data-theme="dark"] .personal-details-card>div:nth-child(2)>div>span:last-child,
[data-theme="dark"] .personal-details-rows-container>div>span:last-child,
[data-mode="dark"] .personal-details-card .detail-value,
[data-mode="dark"] .personal-details-card .personal-details-item-value,
[data-mode="dark"] .personal-details-card .row-value,
[data-mode="dark"] .personal-details-card dd,
[data-mode="dark"] .personal-details-card .value,
[data-mode="dark"] .personal-details-card .detail-row>span:last-child,
[data-mode="dark"] .personal-details-card>div:nth-child(2)>div>span:last-child,
[data-mode="dark"] .personal-details-rows-container>div>span:last-child {
  color: #94a3b8 !important;
  /* Soft gray info text */
}

/* Card Header & Title in Dark Mode */
body.dark-mode .personal-details-card-header,
body.dark-mode .personal-details-header,
body.dark-mode .personal-details-card>div:first-child,
.dark-theme .personal-details-card-header,
.dark-theme .personal-details-header,
.dark-theme .personal-details-card>div:first-child,
.dark .personal-details-card-header,
.dark .personal-details-header,
.dark .personal-details-card>div:first-child,
[data-theme="dark"] .personal-details-card-header,
[data-theme="dark"] .personal-details-header,
[data-theme="dark"] .personal-details-card>div:first-child,
[data-mode="dark"] .personal-details-card-header,
[data-mode="dark"] .personal-details-header,
[data-mode="dark"] .personal-details-card>div:first-child {
  background-color: #18181b !important;
  border-bottom: 1px solid #27272a !important;
}

body.dark-mode .personal-details-card-header-title,
body.dark-mode .personal-details-header-title,
body.dark-mode .personal-details-card>div:first-child span,
.dark-theme .personal-details-card-header-title,
.dark-theme .personal-details-header-title,
.dark-theme .personal-details-card>div:first-child span,
.dark .personal-details-card-header-title,
.dark .personal-details-header-title,
.dark .personal-details-card>div:first-child span,
[data-theme="dark"] .personal-details-card-header-title,
[data-theme="dark"] .personal-details-header-title,
[data-theme="dark"] .personal-details-card>div:first-child span,
[data-mode="dark"] .personal-details-card-header-title,
[data-mode="dark"] .personal-details-header-title,
[data-mode="dark"] .personal-details-card>div:first-child span {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   My Passport & Detail Cards - Light & Dark Mode Text Color Visibility
   ========================================================================== */

/* Light Mode Defaults (Exact match with reference abhser.us) */
.passport-card,
.amount-card {
  border: 1px solid #d5e9df !important;
  border-radius: 16px !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.amount-card {
  padding: 16px 18px !important;
}

.passport-card {
  padding: 0 !important;
}

.passport-card .passport-card-header,
.passport-card > div:first-child {
  border-bottom: 1px solid #d5e9df !important;
  margin-bottom: 0 !important;
  padding: 16px 18px !important;
}

.passport-card .passport-rows-container {
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.passport-card .passport-row,
.passport-card .passport-rows-container > div,
.passport-card .detail-item {
  border-bottom: none !important;
  border-top: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.passport-card .passport-row:last-child,
.passport-card .detail-item:last-child {
  border-bottom: none !important;
}

/* Light mode info text colors */
.passport-card .detail-label,
.amount-card .detail-label,
.amount-card .amount-label,
.passport-card .passport-label,
.passport-card .passport-row > p:first-child {
  color: #58856c !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  margin: 0 0 4px 0 !important;
}

.passport-card .detail-value,
.passport-card .passport-value,
.passport-card .passport-row div > p,
.amount-card .detail-value {
  color: #141a16 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
}

.passport-card .passport-title {
  color: #141a16 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.amount-card .amount-value,
.amount-card p:last-child {
  color: #141a16 !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

/* --------------------------------------------------------------------------
   Dark Mode Overrides: Container Backgrounds & Borders
   -------------------------------------------------------------------------- */
body.dark-mode .passport-card,
body.dark-mode .amount-card,
body.dark-mode .detail-card,
body.dark-mode .resident-card,
.dark .passport-card,
.dark .amount-card,
.dark .detail-card,
.dark .resident-card,
body.dark .passport-card,
body.dark .amount-card,
.dark-mode .passport-card,
.dark-mode .amount-card,
.dark-theme .passport-card,
.dark-theme .amount-card,
[data-theme="dark"] .passport-card,
[data-theme="dark"] .amount-card,
[data-mode="dark"] .passport-card,
[data-mode="dark"] .amount-card {
  background-color: #18181b !important;
  background: #18181b !important;
  border: 1px solid #27272a !important;
  border-color: #27272a !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

body.dark-mode .passport-card .passport-card-header,
body.dark-mode .passport-card>div:first-child,
.dark .passport-card .passport-card-header,
.dark .passport-card>div:first-child,
body.dark .passport-card .passport-card-header,
.dark-theme .passport-card .passport-card-header {
  border-bottom: 1px solid #27272a !important;
}

body.dark-mode .passport-card .passport-row,
body.dark-mode .passport-card .detail-item,
body.dark-mode .passport-row,
.dark .passport-card .passport-row,
.dark .passport-card .detail-item,
body.dark .passport-card .passport-row,
.dark-mode .passport-card .passport-row,
.dark-theme .passport-card .passport-row,
[data-theme="dark"] .passport-card .passport-row,
[data-mode="dark"] .passport-card .passport-row {
  border-bottom: none !important;
  padding: 0 !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   Dark Mode Overrides: High-Contrast Pure White Labels & Soft Gray Info Values
   -------------------------------------------------------------------------- */
/* Prominent White Passport Title */
body.dark-mode .passport-card .passport-title,
.dark .passport-card .passport-title,
.dark-mode .passport-card .passport-title,
.dark-theme .passport-card .passport-title,
[data-theme="dark"] .passport-card .passport-title,
[data-mode="dark"] .passport-card .passport-title {
  color: #ffffff !important;
}

/* Pure White Labels */
body.dark-mode .passport-card .detail-label,
body.dark-mode .passport-card .passport-label,
body.dark-mode .passport-card .row-label,
body.dark-mode .passport-card .passport-row>p:first-child,
body.dark-mode .amount-card .amount-label,
body.dark-mode .amount-card .detail-label,
.dark-theme .passport-card .detail-label,
.dark-theme .passport-card .passport-label,
.dark-theme .passport-card .row-label,
.dark-theme .amount-card .detail-label,
.dark-theme .amount-card .amount-label,
.dark-mode .passport-card .detail-label,
.dark-mode .passport-card .passport-label,
.dark-mode .amount-card .detail-label,
.dark .passport-card .detail-label,
.dark .passport-card .passport-label,
.dark .passport-card .row-label,
.dark .amount-card .amount-label,
.dark .amount-card .detail-label,
.dark .passport-card .passport-row>p:first-child,
[data-theme="dark"] .passport-card .detail-label,
[data-theme="dark"] .passport-card .passport-label,
[data-theme="dark"] .passport-card .row-label,
[data-theme="dark"] .amount-card .amount-label,
[data-theme="dark"] .amount-card .detail-label,
[data-mode="dark"] .passport-card .detail-label,
[data-mode="dark"] .passport-card .passport-label,
[data-mode="dark"] .passport-card .row-label {
  color: #ffffff !important;
  /* Pure white labels */
}

/* Soft Gray Data Values & Info Text */
body.dark-mode .passport-card .detail-value,
body.dark-mode .passport-card .passport-value,
body.dark-mode .passport-card .row-value,
body.dark-mode .passport-card span,
body.dark-mode .passport-card td,
body.dark-mode .passport-card .passport-row div>p,
body.dark-mode .passport-card .passport-row p:last-child,
body.dark-mode .amount-card .detail-value,
body.dark-mode .amount-card .amount-value,
body.dark-mode .amount-card p:last-child,
.dark-theme .passport-card .detail-value,
.dark-theme .passport-card .passport-value,
.dark-theme .passport-card span,
.dark-theme .passport-card td,
.dark-theme .passport-card .passport-row div>p,
.dark-theme .amount-card .detail-value,
.dark-theme .amount-card p:last-child,
.dark-mode .passport-card .detail-value,
.dark-mode .passport-card .passport-value,
.dark-mode .passport-card span,
.dark-mode .passport-card td,
.dark-mode .passport-card .passport-row div>p,
.dark-mode .amount-card .detail-value,
.dark-mode .amount-card p:last-child,
.dark .passport-card .detail-value,
.dark .passport-card .passport-value,
.dark .passport-card span,
.dark .passport-card td,
.dark .passport-card .passport-row div>p,
.dark .passport-card .passport-row p:last-child,
.dark .amount-card .detail-value,
.dark .amount-card .amount-value,
.dark .amount-card p:last-child,
[data-theme="dark"] .passport-card .detail-value,
[data-theme="dark"] .passport-card .passport-value,
[data-theme="dark"] .passport-card span,
[data-theme="dark"] .passport-card td,
[data-theme="dark"] .passport-card .passport-row div>p,
[data-theme="dark"] .amount-card .detail-value,
[data-theme="dark"] .amount-card p:last-child,
[data-mode="dark"] .passport-card .detail-value,
[data-mode="dark"] .passport-card .passport-value,
[data-mode="dark"] .passport-card span,
[data-mode="dark"] .passport-card td,
[data-mode="dark"] .passport-card .passport-row div>p,
[data-mode="dark"] .amount-card p:last-child {
  color: #94a3b8 !important;
  /* Soft gray info text */
}

/* --------------------------------------------------------------------------
   Media Query Dark Mode Support (prefers-color-scheme: dark)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {

  html:not(.light):not([data-theme="light"]) .passport-card,
  html:not(.light):not([data-theme="light"]) .amount-card,
  html:not(.light):not([data-theme="light"]) .detail-card,
  html:not(.light):not([data-theme="light"]) .resident-card {
    background: #18181b !important;
    background-color: #18181b !important;
    border: 1px solid #27272a !important;
    border-color: #27272a !important;
  }

  html:not(.light):not([data-theme="light"]) .passport-card .passport-card-header,
  html:not(.light):not([data-theme="light"]) .passport-card>div:first-child {
    border-bottom: none !important;
  }

  html:not(.light):not([data-theme="light"]) .passport-card .passport-row,
  html:not(.light):not([data-theme="light"]) .passport-card .detail-item {
    border-bottom: none !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html:not(.light):not([data-theme="light"]) .passport-card .passport-title,
  html:not(.light):not([data-theme="light"]) .passport-card .detail-label,
  html:not(.light):not([data-theme="light"]) .passport-card .passport-label,
  html:not(.light):not([data-theme="light"]) .amount-card .amount-label,
  html:not(.light):not([data-theme="light"]) .passport-card .passport-row>p:first-child {
    color: #ffffff !important;
  }

  html:not(.light):not([data-theme="light"]) .passport-card .detail-value,
  html:not(.light):not([data-theme="light"]) .passport-card span,
  html:not(.light):not([data-theme="light"]) .passport-card td,
  html:not(.light):not([data-theme="light"]) .passport-card .passport-value,
  html:not(.light):not([data-theme="light"]) .passport-card .passport-row div>p,
  html:not(.light):not([data-theme="light"]) .passport-card .passport-row p:last-child,
  html:not(.light):not([data-theme="light"]) .amount-card .detail-value,
  html:not(.light):not([data-theme="light"]) .amount-card .amount-value,
  html:not(.light):not([data-theme="light"]) .amount-card p:last-child {
    color: #94a3b8 !important;
  }
}

/* ==========================================================================
   My Passport Section - Black Text Color (Light Mode)
   ========================================================================== */
html:not(.dark):not([data-theme="dark"]):not([data-mode="dark"]) .my-passport-container,
body:not(.dark):not(.dark-mode) .my-passport-container,
.my-passport-container {
  color: #000000;
}

html:not(.dark):not([data-theme="dark"]):not([data-mode="dark"]) .passport-card .passport-label,
html:not(.dark):not([data-theme="dark"]):not([data-mode="dark"]) .passport-card .passport-value,
html:not(.dark):not([data-theme="dark"]):not([data-mode="dark"]) .passport-card .passport-title,
html:not(.dark):not([data-theme="dark"]):not([data-mode="dark"]) .passport-card .detail-label,
html:not(.dark):not([data-theme="dark"]):not([data-mode="dark"]) .passport-card .detail-value,
html:not(.dark):not([data-theme="dark"]):not([data-mode="dark"]) .passport-card .row-label,
html:not(.dark):not([data-theme="dark"]):not([data-mode="dark"]) .passport-card .row-value,
html:not(.dark):not([data-theme="dark"]):not([data-mode="dark"]) .passport-card p,
html:not(.dark):not([data-theme="dark"]):not([data-mode="dark"]) .amount-card .amount-label,
html:not(.dark):not([data-theme="dark"]):not([data-mode="dark"]) .amount-card .amount-value,
html:not(.dark):not([data-theme="dark"]):not([data-mode="dark"]) .amount-card p {
  color: #000000 !important;
}

/* ==========================================================================
   Digital ID / Iqama QR Code Modal - Ultra-High Density Optimization
   ========================================================================== */
.qr-code-modal,
.iqama-qr-container {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 220px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 8px !important;
  box-sizing: border-box !important;
}

#digital-qr-code,
.qr-code-modal canvas,
.iqama-qr-container canvas,
.qr-code-modal img.qr-code-img,
.iqama-qr-container img.qr-code-img,
.qr-code-img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  display: block !important;
  margin: 0 auto !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  image-rendering: pixelated !important;
  object-fit: contain !important;
}

/* Center Logo Container & Vertical Bar Logo */
.qr-center-logo-container,
.qr-center-logo {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 44px !important;
  height: 44px !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  border: 1.2px solid #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

.qr-center-logo-container .qr-vertical-logo,
.qr-vertical-logo,
.qr-center-logo img {
  width: 22px !important;
  height: 30px !important;
  max-width: 75% !important;
  max-height: 75% !important;
  object-fit: contain !important;
  display: block !important;
}

/* ==========================================================================
   Responsive Layout: Separation of Desktop and Mobile Rules
   Desktop: Full-width fluid scaling (100%) without side gaps
   Mobile (<=768px): Strictly scoped mobile viewport overrides
   ========================================================================== */

/* Universal Scrollbar & Sizing Normalization */
.login-banner,
.hero-section,
.welcome-card,
.login-btn-container {
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.login-banner::-webkit-scrollbar,
.hero-section::-webkit-scrollbar,
.welcome-card::-webkit-scrollbar,
.login-btn-container::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   Reference Match: abhser.us Desktop & Mobile Clean Layout
   ========================================================================== */

/* 1. Universal Page Frame: Center 480px column on all screens */
.home-page-container {
  width: 100% !important;
  max-width: 480px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  position: relative !important;
  box-sizing: border-box !important;
  background-color: #ffffff !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.04) !important;
}

html.dark .home-page-container,
.dark .home-page-container,
body.dark-mode .home-page-container,
.dark-theme .home-page-container,
[data-theme="dark"] .home-page-container {
  background-color: #111111 !important;
  background: #111111 !important;
  color: #ffffff !important;
}

/* 2. Top Mint Login Banner: Exact Match to Reference Image 2 */
.login-banner,
.hero-section,
.welcome-card,
.login-hero-section,
.hero-banner {
  background: #e2f0ec !important;
  background-color: #e2f0ec !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 32px !important;
  border-bottom-right-radius: 32px !important;
  padding: 0 24px 32px 24px !important;
  min-height: 45vh !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  margin: 0 !important;
}

html.dark .login-banner,
html.dark .hero-section,
html.dark .welcome-card,
html.dark .login-hero-section,
html.dark .hero-banner,
.dark .login-banner,
.dark .hero-section,
.dark .welcome-card,
.dark .login-hero-section,
.dark .hero-banner,
body.dark-mode .login-banner,
body.dark-mode .hero-section,
body.dark-mode .welcome-card,
.dark-theme .login-banner,
[data-theme="dark"] .login-banner {
  background: #1a6b3a !important;
  background-color: #1a6b3a !important;
}

.login-banner h1,
.hero-section h1,
.welcome-card h1,
.login-hero-section h1,
.hero-banner h1 {
  color: #1e293b !important;
  font-size: 27px !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin: 0 0 26px 0 !important;
  letter-spacing: -0.3px !important;
}

html.dark .login-banner h1,
html.dark .hero-section h1,
html.dark .welcome-card h1,
html.dark .login-hero-section h1,
html.dark .hero-banner h1,
.dark .login-banner h1,
.dark .hero-section h1,
.dark .welcome-card h1,
.dark .login-hero-section h1,
.dark .hero-banner h1,
body.dark-mode .login-banner h1,
.dark-theme .login-banner h1,
[data-theme="dark"] .login-banner h1 {
  color: #ffffff !important;
}

/* 3. Login Button: Centered Full-Width Pill Button */
.login-btn-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

.login-btn-link,
.login-btn-container a {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  margin: 0 auto !important;
  text-decoration: none !important;
}

.login-btn,
.btn-log-in {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 auto !important;
  background: #00683a !important;
  background-color: #00683a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 16px 0 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  box-shadow: 0 4px 14px rgba(0, 104, 58, 0.25) !important;
}

.login-btn:hover,
.btn-log-in:hover {
  opacity: 0.94 !important;
}

/* Dark Mode Login Button: Exact match to abhser.us reference image (#4ade80 bg, #111111 text) */
.dark .login-btn:not(.login-btn-inactive),
.dark .btn-log-in:not(.login-btn-inactive),
html.dark .login-btn:not(.login-btn-inactive),
html.dark .btn-log-in:not(.login-btn-inactive),
body.dark .login-btn:not(.login-btn-inactive),
body.dark .btn-log-in:not(.login-btn-inactive),
body.dark-mode .login-btn:not(.login-btn-inactive),
body.dark-mode .btn-log-in:not(.login-btn-inactive),
.dark-theme .login-btn:not(.login-btn-inactive),
.dark-theme .btn-log-in:not(.login-btn-inactive),
[data-theme="dark"] .login-btn:not(.login-btn-inactive),
[data-theme="dark"] .btn-log-in:not(.login-btn-inactive),
[data-mode="dark"] .login-btn:not(.login-btn-inactive),
[data-mode="dark"] .btn-log-in:not(.login-btn-inactive) {
  background: #4ade80 !important;
  background-color: #4ade80 !important;
  color: #111111 !important;
  box-shadow: 0 4px 14px rgba(74, 222, 128, 0.25) !important;
}

.dark .login-btn:not(.login-btn-inactive):hover,
.dark .btn-log-in:not(.login-btn-inactive):hover,
html.dark .login-btn:not(.login-btn-inactive):hover,
html.dark .btn-log-in:not(.login-btn-inactive):hover,
body.dark .login-btn:not(.login-btn-inactive):hover,
body.dark .btn-log-in:not(.login-btn-inactive):hover,
body.dark-mode .login-btn:not(.login-btn-inactive):hover,
body.dark-mode .btn-log-in:not(.login-btn-inactive):hover,
.dark-theme .login-btn:not(.login-btn-inactive):hover,
.dark-theme .btn-log-in:not(.login-btn-inactive):hover,
[data-theme="dark"] .login-btn:not(.login-btn-inactive):hover,
[data-theme="dark"] .btn-log-in:not(.login-btn-inactive):hover,
[data-mode="dark"] .login-btn:not(.login-btn-inactive):hover,
[data-mode="dark"] .btn-log-in:not(.login-btn-inactive):hover {
  opacity: 0.92 !important;
  background: #4ade80 !important;
  background-color: #4ade80 !important;
  color: #111111 !important;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) .login-btn:not(.login-btn-inactive),
  :root:not(.light) .btn-log-in:not(.login-btn-inactive) {
    background: #4ade80 !important;
    background-color: #4ade80 !important;
    color: #111111 !important;
    box-shadow: 0 4px 14px rgba(74, 222, 128, 0.25) !important;
  }
  :root:not(.light) .login-btn:not(.login-btn-inactive):hover,
  :root:not(.light) .btn-log-in:not(.login-btn-inactive):hover {
    opacity: 0.92 !important;
    background: #4ade80 !important;
    background-color: #4ade80 !important;
    color: #111111 !important;
  }
}

/* 4. Public Services: 2-Row Horizontal Scroller (Exact Match to Reference Image 2) */
.public-services-section,
.home-page-container > div:nth-child(2) {
  width: 100% !important;
  max-width: 100% !important;
  padding: 28px 20px 0 20px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.public-services-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 26px !important;
  width: 100% !important;
}

.public-services-header span,
.home-page-container > div:nth-child(2) > div:first-child span {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
}

html.dark .public-services-header span,
.dark .public-services-header span,
html.dark .home-page-container > div:nth-child(2) > div:first-child span,
.dark .home-page-container > div:nth-child(2) > div:first-child span,
body.dark-mode .public-services-header span,
.dark-theme .public-services-header span,
[data-theme="dark"] .public-services-header span {
  color: #ffffff !important;
}

.public-services-header button,
.home-page-container > div:nth-child(2) > div:first-child button {
  color: #00683a !important;
}

html.dark .public-services-header button,
.dark .public-services-header button,
html.dark .home-page-container > div:nth-child(2) > div:first-child button,
.dark .home-page-container > div:nth-child(2) > div:first-child button,
body.dark-mode .public-services-header button,
.dark-theme .public-services-header button,
[data-theme="dark"] .public-services-header button {
  color: #4ade80 !important;
}

.public-services,
.public-services-wrapper,
.home-page-container .no-scrollbar {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  margin-right: -20px !important;
  padding-right: 20px !important;
  padding-bottom: 8px !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  width: calc(100% + 20px) !important;
}

.public-services::-webkit-scrollbar,
.public-services-wrapper::-webkit-scrollbar,
.home-page-container .no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.public-services-grid,
.home-page-container .no-scrollbar > div {
  display: grid !important;
  grid-template-rows: repeat(2, auto) !important;
  grid-auto-flow: column !important;
  grid-auto-columns: 134px !important;
  column-gap: 10px !important;
  row-gap: 10px !important;
  width: max-content !important;
}

.public-service-card-link,
.public-services-grid a,
.home-page-container .no-scrollbar a {
  width: 134px !important;
  display: block !important;
  text-decoration: none !important;
}

.public-service-card,
.public-services-grid button,
.home-page-container .no-scrollbar button {
  width: 134px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #e5e7eb !important;
  padding: 12px 10px !important;
  min-height: 130px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: left !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.public-service-card span,
.public-services-grid button span,
.home-page-container .no-scrollbar button span {
  color: #1e293b !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}

.public-service-card svg,
.public-services-grid button svg,
.home-page-container .no-scrollbar button svg {
  color: #00683a !important;
  stroke: #00683a !important;
}

html.dark .public-service-card,
html.dark .public-services-grid button,
html.dark .home-page-container .no-scrollbar button,
.dark .public-service-card,
.dark .public-services-grid button,
.dark .home-page-container .no-scrollbar button,
body.dark-mode .public-service-card,
body.dark-mode .public-services-grid button,
body.dark-mode .home-page-container .no-scrollbar button,
.dark-theme .public-service-card,
.dark-theme .public-services-grid button,
.dark-theme .home-page-container .no-scrollbar button,
[data-theme="dark"] .public-service-card,
[data-theme="dark"] .public-services-grid button,
[data-theme="dark"] .home-page-container .no-scrollbar button {
  background: #1c1c1e !important;
  background-color: #1c1c1e !important;
  border: 1px solid #2c2c2e !important;
  border-color: #2c2c2e !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

html.dark .public-service-card span,
html.dark .public-services-grid button span,
html.dark .home-page-container .no-scrollbar button span,
.dark .public-service-card span,
.dark .public-services-grid button span,
.dark .home-page-container .no-scrollbar button span,
body.dark-mode .public-service-card span,
body.dark-mode .public-services-grid button span,
body.dark-mode .home-page-container .no-scrollbar button span,
.dark-theme .public-service-card span,
.dark-theme .public-services-grid button span,
.dark-theme .home-page-container .no-scrollbar button span,
[data-theme="dark"] .public-service-card span,
[data-theme="dark"] .public-services-grid button span,
[data-theme="dark"] .home-page-container .no-scrollbar button span {
  color: #ffffff !important;
}

html.dark .public-service-card svg,
html.dark .public-services-grid button svg,
html.dark .home-page-container .no-scrollbar button svg,
.dark .public-service-card svg,
.dark .public-services-grid button svg,
.dark .home-page-container .no-scrollbar button svg,
body.dark-mode .public-service-card svg,
body.dark-mode .public-services-grid button svg,
body.dark-mode .home-page-container .no-scrollbar button svg,
.dark-theme .public-service-card svg,
.dark-theme .public-services-grid button svg,
.dark-theme .home-page-container .no-scrollbar button svg,
[data-theme="dark"] .public-service-card svg,
[data-theme="dark"] .public-services-grid button svg,
[data-theme="dark"] .home-page-container .no-scrollbar button svg {
  color: #4ade80 !important;
  stroke: #4ade80 !important;
}

/* 5. Auth / Login Screen Constraints */
.absher-login-screen-card {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

.absher-login-screen-wrapper {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* ==========================================================================
   Admin Panel Fixed Viewport & Sticky Sidebar Normalization
   ========================================================================== */
html:has(.admin-layout-container),
body:has(.admin-layout-container),
body:has(.admin-layout-container) #root {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}
.admin-layout-container {
  display: flex !important;
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}
.admin-sidebar {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  flex-shrink: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  position: sticky !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.admin-main-viewport {
  flex: 1 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  -webkit-overflow-scrolling: touch;
}

/* Iqama Card Modal Viewer - Solid Gray Background */
:root,
.dark,
body {
  --card-viewer-overlay-bg: #3c3c3c !important;
}

/* My Digital Documents - See All Option */
.see-all-documents-btn {
  color: #00683a !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  outline: none !important;
  text-decoration: none !important;
  transition: opacity 0.15s ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

.see-all-documents-btn:hover,
.see-all-documents-btn:active {
  opacity: 0.75 !important;
}

body.dark-mode .see-all-documents-btn,
.dark .see-all-documents-btn,
.dark-mode .see-all-documents-btn,
.dark-theme .see-all-documents-btn,
[data-theme="dark"] .see-all-documents-btn,
[data-mode="dark"] .see-all-documents-btn {
  color: #a0b1a7 !important;
}

@media (prefers-color-scheme: dark) {
  html:not(.light):not([data-theme="light"]) .see-all-documents-btn {
    color: #a0b1a7 !important;
  }
}

/* Digital Documents Page Styling */
.digital-documents-page-container {
  padding: 10px 16px 36px 16px;
}

.digital-doc-section-title {
  color: #0f172a;
}

body.dark-mode .digital-doc-section-title,
.dark .digital-doc-section-title,
.dark-mode .digital-doc-section-title,
.dark-theme .digital-doc-section-title,
[data-theme="dark"] .digital-doc-section-title,
[data-mode="dark"] .digital-doc-section-title {
  color: #ffffff !important;
}

.digital-doc-card-wrapper {
  background: var(--card, #ffffff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
}

body.dark-mode .digital-doc-card-wrapper,
.dark .digital-doc-card-wrapper,
.dark-mode .digital-doc-card-wrapper,
.dark-theme .digital-doc-card-wrapper,
[data-theme="dark"] .digital-doc-card-wrapper,
[data-mode="dark"] .digital-doc-card-wrapper {
  border-color: #27272a !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

/* Empty state for digital documents */
.digital-doc-empty-state {
  background: var(--card, #ffffff) !important;
  border: 1.5px dashed var(--border, #cbd8d0) !important;
}

body.dark-mode .digital-doc-empty-state,
.dark .digital-doc-empty-state,
.dark-mode .digital-doc-empty-state,
.dark-theme .digital-doc-empty-state,
[data-theme="dark"] .digital-doc-empty-state,
[data-mode="dark"] .digital-doc-empty-state {
  background: #18181b !important;
  border-color: #3b4a40 !important;
}

body.dark-mode .digital-doc-empty-badge,
.dark .digital-doc-empty-badge,
.dark-mode .digital-doc-empty-badge,
.dark-theme .digital-doc-empty-badge,
[data-theme="dark"] .digital-doc-empty-badge,
[data-mode="dark"] .digital-doc-empty-badge {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #cbd5e1 !important;
}

/* Hajj Status Badge - Rounded Pill Style with Status Dot */
.hajj-status-badge {
  display: inline-flex !important;
  align-items: center !important;
  background-color: #e2f0e6 !important; /* Soft green badge background */
  color: #1b5e20 !important; /* Dark green text */
  padding: 4px 12px !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  width: fit-content !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
  box-sizing: border-box !important;
}

.hajj-status-badge::before {
  content: "" !important;
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  background-color: #2e7d32 !important; /* Green status dot */
  border-radius: 50% !important;
  margin-right: 6px !important;
  flex-shrink: 0 !important;
}

[dir="rtl"] .hajj-status-badge::before,
.rtl .hajj-status-badge::before,
html[dir="rtl"] .hajj-status-badge::before {
  margin-right: 0 !important;
  margin-left: 6px !important;
}

/* Dark mode compatibility */
body.dark-mode .hajj-status-badge,
.dark .hajj-status-badge,
[data-theme="dark"] .hajj-status-badge,
[data-mode="dark"] .hajj-status-badge {
  background-color: rgba(46, 125, 50, 0.22) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.25) !important;
}

body.dark-mode .hajj-status-badge::before,
.dark .hajj-status-badge::before,
[data-theme="dark"] .hajj-status-badge::before,
[data-mode="dark"] .hajj-status-badge::before {
  background-color: #4ade80 !important;
}

/* Resident ID Card Typography */
.resident-id-card .resident-id-label,
.resident-id-label,
.resident-id-row p:first-child {
  color: #000000 !important;
  font-weight: 700 !important;
}
.resident-id-card .resident-id-value,
.resident-id-value,
.resident-id-row p:last-child {
  color: #000000 !important;
}
.dark .resident-id-card .resident-id-label,
.dark .resident-id-label,
.dark .resident-id-row p:first-child {
  color: #f8fafc !important;
}
.dark .resident-id-card .resident-id-value,
.dark .resident-id-value,
.dark .resident-id-row p:last-child {
  color: #e2e8f0 !important;
}

/* Profile Header ID & Personal Details */
.profile-id-row,
.profile-id-row span,
.profile-personal-details-btn,
.profile-personal-details-btn span {
  color: #000000 !important;
}
.profile-id-row svg,
.profile-id-row svg rect,
.profile-id-row svg path,
.profile-personal-details-btn svg,
.profile-personal-details-btn svg path {
  stroke: #000000 !important;
}
.dark .profile-id-row,
.dark .profile-id-row span,
.dark .profile-personal-details-btn,
.dark .profile-personal-details-btn span {
  color: #f8fafc !important;
}
.dark .profile-id-row svg rect,
.dark .profile-id-row svg path,
.dark .profile-personal-details-btn svg path {
  stroke: #f8fafc !important;
}