/**
 * wukplace.sg — Dedicated Dark Mode Stylesheet
 * Singapore Commercial & Industrial Real Estate Marketplace
 * Version: 2.0.26 (Dark Mode Master)
 *
 * This stylesheet defines all default Dark Mode styling across the portal,
 * ensuring all pop-up windows, modals, cards, tabs, and form controls feature
 * luminous, high-contrast text on dark backgrounds with zero dark-on-dark contrast issues.
 */

/* ==========================================================================
   1. DARK THEME MASTER DESIGN TOKENS & SYSTEM VARIABLES
   ========================================================================== */
:root {
  --theme-mode: dark;

  /* Surfaces & Backgrounds */
  --dark-bg: #012B40;            /* Main Deep Ocean Blue Portal Canvas */
  --navy-card: #023D5B;          /* Elevated Card Surface */
  --navy-input: #011E2D;         /* Recessed Form Control / Input Surface */
  --navy-elevated: #03486C;      /* Highlighted Card / Floating Dropdown Surface */
  --surface: #023D5B;
  --surface-alt: #011E2D;

  /* Master Typography (High-Contrast for Dark Backgrounds) */
  --text-main: #FFFFFF;          /* Pure Crisp White Primary Text */
  --text-primary: #FFFFFF;
  --text-gold: #F5D061;          /* Luminous Golden Shimmer Text */
  --text-muted: #CBD5E1;         /* Soft Pearl Slate Secondary Text */
  --text-light: #94A3B8;         /* Tertiary / Hint Slate Text */
  --text-subtle: #64748B;
  --text-sky: #38BDF8;           /* Active / Selected Sky Blue Text */
  --text-emerald: #34D399;       /* Positive / Verified Emerald Text */

  /* Hairline Borders */
  --border: rgba(248, 250, 252, 0.22);
  --border-subtle: rgba(255, 255, 255, 0.12);
  --border-hover: #FFFFFF;
  --border-focus: #38BDF8;

  /* Modal Specific Palette */
  --modal-backdrop-bg: rgba(1, 22, 33, 0.85);
  --modal-card-bg: linear-gradient(180deg, #023D5B 0%, #012235 100%);
  --modal-header-border: rgba(255, 255, 255, 0.15);
  --modal-input-bg: #011E2D;
  --modal-input-border: rgba(255, 255, 255, 0.20);
  --modal-input-text: #FFFFFF;
  --modal-input-placeholder: #94A3B8;
  --modal-dropdown-bg: #0B192C;
}

/* ==========================================================================
   2. GLOBAL POP-UP WINDOWS & MODALS CONTAINER STYLING
   ========================================================================== */

/* Universal Modal Backdrop */
.modal-backdrop,
.admin-modal-backdrop,
.detail-lightbox-backdrop,
[id$="Modal"] {
  background-color: var(--modal-backdrop-bg) !important;
  color: #FFFFFF;
}

/* Master Modal Cards & Containers */
.modal-card,
.admin-modal-card,
.admin-credit-modal-card,
.directory-modal-card,
.admin-promo-modal-card,
.admin-social-modal-card,
.modal-details-suite,
.my-listings-modal-card,
.lightbox-content,
[id$="Modal"] > .modal-card,
[id$="Modal"] .admin-modal-card {
  background: var(--modal-card-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.8), 0 0 35px rgba(2, 61, 91, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

/* Modal Headers, Titles & Subtitles */
.modal-header,
.admin-modal-header {
  border-bottom: 1px solid var(--modal-header-border) !important;
}

.modal-title,
.admin-modal-title,
.modal-card h2,
.modal-card h3,
.modal-card h4,
.admin-modal-card h2,
.admin-modal-card h3,
.admin-modal-card h4,
[id$="Modal"] h2,
[id$="Modal"] h3,
[id$="Modal"] h4,
[id$="ModalTitle"],
.admin-section-heading {
  color: #FFFFFF !important;
}

.modal-subtitle,
.admin-modal-subtitle,
.modal-card .subtitle-text,
.modal-card p,
.admin-modal-card p,
[id$="Modal"] p:not([style*="color: #EF4444"]):not([style*="color:#EF4444"]) {
  color: #CBD5E1 !important;
}

/* Modal Close Buttons */
.modal-close-btn,
.modal-card .modal-close-btn,
.admin-modal-card .modal-close-btn,
[id$="Modal"] .modal-close-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #CBD5E1 !important;
  transition: all 0.2s ease !important;
}

.modal-close-btn:hover,
.modal-card .modal-close-btn:hover,
.admin-modal-card .modal-close-btn:hover,
[id$="Modal"] .modal-close-btn:hover {
  background: rgba(245, 208, 97, 0.18) !important;
  border-color: #F5D061 !important;
  color: #F5D061 !important;
  box-shadow: 0 0 12px rgba(245, 208, 97, 0.35) !important;
}

/* ==========================================================================
   3. MODAL FORM CONTROLS: INPUTS, SELECTS, TEXTAREAS & OPTIONS
   ========================================================================== */

/* All Text Inputs, Number Inputs, Date Inputs, Dropdowns & Textareas across Portal & Modals (Dark Mode) */
body:not(.light-theme) input[type="text"],
body:not(.light-theme) input[type="number"],
body:not(.light-theme) input[type="date"],
body:not(.light-theme) input[type="datetime-local"],
body:not(.light-theme) input[type="time"],
body:not(.light-theme) input[type="email"],
body:not(.light-theme) input[type="password"],
body:not(.light-theme) input[type="tel"],
body:not(.light-theme) input[type="search"],
body:not(.light-theme) input[type="url"],
body:not(.light-theme) input[type="color"],
body:not(.light-theme) input:not([type]),
body:not(.light-theme) .form-input,
body:not(.light-theme) .form-select,
body:not(.light-theme) .admin-form-input,
body:not(.light-theme) .admin-form-textarea,
body:not(.light-theme) .form-control-admin,
body:not(.light-theme) .directory-dark-textarea,
body:not(.light-theme) .directory-model-select,
body:not(.light-theme) .post-dropdown-select,
body:not(.light-theme) .toolbar-pill-select,
body:not(.light-theme) .filter-select,
body:not(.light-theme) .filter-pill-select,
body:not(.light-theme) .hero-search-input,
body:not(.light-theme) .search-input,
body:not(.light-theme) .nl-query-input,
body:not(.light-theme) #kwInput,
body:not(.light-theme) #nlQueryInput,
body:not(.light-theme) #districtSelect,
body:not(.light-theme) #sizeSelect,
body:not(.light-theme) #budgetSelect,
body:not(.light-theme) #pageSelect,
body:not(.light-theme) #sortSelect,
body:not(.light-theme) #socialCreditsInput,
body:not(.light-theme) #adminSocialCreditsInput,
body:not(.light-theme) #adminSocialPlatformColorPicker,
body:not(.light-theme) #socialShareCaptionText,
body:not(.light-theme) .modal-card input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="hidden"]):not([type="file"]),
body:not(.light-theme) .modal-card select,
body:not(.light-theme) .modal-card textarea,
body:not(.light-theme) .admin-modal-card input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="hidden"]):not([type="file"]),
body:not(.light-theme) .admin-modal-card select,
body:not(.light-theme) .admin-modal-card textarea,
body:not(.light-theme) [id$="Modal"] input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="hidden"]):not([type="file"]),
body:not(.light-theme) [id$="Modal"] select,
body:not(.light-theme) [id$="Modal"] textarea {
  background: #011E2D !important;
  background-color: #011E2D !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  font-family: inherit !important;
}

/* Specific styling for Dropdown Selects in Dark Mode: Native appearance removal and custom chevron */
body:not(.light-theme) select,
body:not(.light-theme) .form-select,
body:not(.light-theme) .post-dropdown-select,
body:not(.light-theme) .toolbar-pill-select,
body:not(.light-theme) .filter-select,
body:not(.light-theme) .filter-pill-select,
body:not(.light-theme) .directory-model-select,
body:not(.light-theme) .form-control-admin,
body:not(.light-theme) .modal-card select,
body:not(.light-theme) [id$="Modal"] select {
  appearance: none !important;
  -webkit-appearance: none !important;
  color-scheme: dark !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 14px !important;
  padding-right: 36px !important;
  cursor: pointer;
}

/* Readonly & Disabled Inputs / Dropdowns / Textareas in Dark Mode */
body:not(.light-theme) input[readonly],
body:not(.light-theme) input[disabled],
body:not(.light-theme) select[disabled],
body:not(.light-theme) textarea[readonly],
body:not(.light-theme) textarea[disabled],
body:not(.light-theme) .form-input[readonly],
body:not(.light-theme) .form-input[disabled],
body:not(.light-theme) .form-control-admin[readonly],
body:not(.light-theme) .form-control-admin[disabled],
body:not(.light-theme) #postPsfDisplay[readonly],
body:not(.light-theme) #profileCeaReg[readonly],
body:not(.light-theme) #profileAgency[readonly],
body:not(.light-theme) .modal-card input[readonly],
body:not(.light-theme) .modal-card input[disabled],
body:not(.light-theme) [id$="Modal"] input[readonly],
body:not(.light-theme) [id$="Modal"] input[disabled],
body:not(.light-theme) [id$="Modal"] textarea[readonly],
body:not(.light-theme) [id$="Modal"] textarea[disabled] {
  background: #011622 !important;
  background-color: #011622 !important;
  color: #94A3B8 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  cursor: not-allowed !important;
}

/* Autofill Protection in Dark Mode (prevents white browser autofill) */
body:not(.light-theme) input:-webkit-autofill,
body:not(.light-theme) input:-webkit-autofill:hover,
body:not(.light-theme) input:-webkit-autofill:focus,
body:not(.light-theme) textarea:-webkit-autofill,
body:not(.light-theme) select:-webkit-autofill {
  -webkit-text-fill-color: #FFFFFF !important;
  -webkit-box-shadow: 0 0 0px 1000px #011E2D inset !important;
  box-shadow: 0 0 0px 1000px #011E2D inset !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: #011E2D !important;
  color: #FFFFFF !important;
}

/* Explicit Standardization for Add / Edit Administrator Modal (#adminUserModal) */
#adminUserModal .form-input,
#adminUserModal input[type="text"],
#adminUserModal input[type="tel"],
#adminUserModal input[type="email"],
#adminUserModal input[type="password"],
#adminUserModal #adminInputContact,
#adminUserModal #adminInputName,
#adminUserModal #adminInputIc,
#adminUserModal #adminInputEmail,
#adminUserModal #adminInputPassword,
#adminUserModal #adminInputConfirmPassword {
  background: #011E2D !important;
  background-color: #011E2D !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 8px !important;
}

/* Focus State on Form Controls in Dark Mode */
body:not(.light-theme) input:focus:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="hidden"]):not([type="file"]),
body:not(.light-theme) select:focus,
body:not(.light-theme) textarea:focus,
body:not(.light-theme) .modal-card input:focus,
body:not(.light-theme) .modal-card select:focus,
body:not(.light-theme) .modal-card textarea:focus,
body:not(.light-theme) .form-control-admin:focus,
body:not(.light-theme) .admin-form-input:focus,
body:not(.light-theme) .admin-form-textarea:focus,
body:not(.light-theme) .directory-dark-textarea:focus,
body:not(.light-theme) .directory-model-select:focus,
body:not(.light-theme) .post-dropdown-select:focus,
body:not(.light-theme) .toolbar-pill-select:focus,
body:not(.light-theme) .form-select:focus,
body:not(.light-theme) #postModal select:focus,
body:not(.light-theme) #adminModal .form-control-admin:focus,
body:not(.light-theme) [id$="Modal"] input:focus,
body:not(.light-theme) [id$="Modal"] select:focus,
body:not(.light-theme) [id$="Modal"] textarea:focus {
  border-color: #38BDF8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.28), inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
  outline: none !important;
  color: #FFFFFF !important;
}

/* Placeholder Styling for Dark Mode */
body:not(.light-theme) input::placeholder,
body:not(.light-theme) textarea::placeholder,
body:not(.light-theme) .modal-card input::placeholder,
body:not(.light-theme) .modal-card textarea::placeholder,
body:not(.light-theme) .form-control-admin::placeholder,
body:not(.light-theme) .admin-form-input::placeholder,
body:not(.light-theme) .admin-form-textarea::placeholder,
body:not(.light-theme) [id$="Modal"] input::placeholder,
body:not(.light-theme) [id$="Modal"] textarea::placeholder {
  color: #94A3B8 !important;
  opacity: 1 !important;
}

/* Dropdown Menu Options & Optgroups in Dark Mode */
body:not(.light-theme) select option,
body:not(.light-theme) select optgroup,
body:not(.light-theme) select optgroup option,
body:not(.light-theme) .modal-card select option,
body:not(.light-theme) .form-control-admin option,
body:not(.light-theme) .post-dropdown-select option,
body:not(.light-theme) .toolbar-pill-select option,
body:not(.light-theme) .form-select option,
body:not(.light-theme) [id$="Modal"] select option {
  background: #0B192C !important;
  background-color: #0B192C !important;
  color: #FFFFFF !important;
}

/* Modal Form Labels */
.modal-card label,
.admin-modal-card label,
.admin-form-label,
.form-label-admin,
.directory-modal-card label,
[id$="Modal"] label {
  color: #CBD5E1 !important;
  font-weight: 700;
}

/* Required Asterisks */
.modal-card label span[style*="color: #EF4444"],
.modal-card label span[style*="color:#EF4444"],
.admin-modal-card label span[style*="color: #EF4444"],
.form-label-admin span[style*="color: #EF4444"],
[id$="Modal"] label span[style*="color: #EF4444"],
[id$="Modal"] span[style*="color: #EF4444"],
[id$="Modal"] span[style*="color:#EF4444"] {
  color: #F87171 !important; /* Luminous light coral for high contrast */
}

/* Helper Notes & Syntax Explanations */
.modal-card .helper-text,
.modal-card .form-hint,
.admin-bcast-schedule-hint,
.admin-bcast-gateway-note,
.form-group-admin div[style*="color: #64748B"],
.form-group-admin div[style*="color:#64748B"],
.modal-card [style*="color: #64748B"],
.modal-card [style*="color:#64748B"],
.admin-modal-card [style*="color: #64748B"],
.admin-modal-card [style*="color:#64748B"],
[id$="Modal"] [style*="color: #64748B"],
[id$="Modal"] [style*="color:#64748B"] {
  color: #94A3B8 !important; /* Brightened from dim slate #64748B */
}

/* ==========================================================================
   4. MODAL TABS, PILLS & SEGMENTED CONTROLS
   ========================================================================== */

/* Agent Auth Modal (#agentAuthModal, #agentForgotPasswordModal) */
#agentAuthModal .modal-card,
#agentForgotPasswordModal .modal-card {
  background: linear-gradient(180deg, #023D5B 0%, #012235 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #FFFFFF !important;
}

#agentAuthModal .agent-auth-tab-bar {
  background: rgba(1, 30, 45, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.agent-auth-tab {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #E2E8F0 !important; /* Bright high contrast text */
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.agent-auth-tab:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.agent-auth-tab.active,
#tabAgentSignIn.active,
#tabAgentRegister.active {
  background: linear-gradient(135deg, #F5D061 0%, #D97706 100%) !important;
  border: 1px solid #F5D061 !important;
  color: #080E21 !important; /* Crisp dark text on luminous golden background */
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(245, 208, 97, 0.35) !important;
}

#agentAuthModal .form-input,
#agentAuthModal input[type="text"],
#agentAuthModal input[type="email"],
#agentAuthModal input[type="password"],
#agentAuthModal input[type="tel"],
#agentForgotPasswordModal .form-input,
#agentForgotPasswordModal input[type="text"],
#agentForgotPasswordModal input[type="email"],
#loginCea,
#loginEmail,
#loginPassword {
  background: #011E2D !important;
  background-color: #011E2D !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

#agentAuthModal input:-webkit-autofill,
#agentAuthModal input:-webkit-autofill:hover,
#agentAuthModal input:-webkit-autofill:focus,
#loginCea:-webkit-autofill,
#loginEmail:-webkit-autofill,
#loginPassword:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #011E2D inset !important;
  -webkit-text-fill-color: #FFFFFF !important;
  caret-color: #FFFFFF !important;
  transition: background-color 5000s ease-in-out 0s !important;
  background-color: #011E2D !important;
}

/* Admin Main Tabs Bar (#adminModal) */
.admin-main-tab-btn {
  background: #011E2D !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #CBD5E1 !important;
  font-weight: 700 !important;
}

.admin-main-tab-btn:hover {
  background: #023D5B !important;
  color: #FFFFFF !important;
  border-color: #38BDF8 !important;
}

.admin-main-tab-btn.active {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  border: 1px solid #38BDF8 !important;
  color: #FFFFFF !important; /* Pure crisp white text */
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}

.admin-main-tab-btn.active span,
.admin-main-tab-btn.active i {
  color: #FFFFFF !important;
}

/* Admin Subtabs Bar (#adminModal Subtab Navigation) */
.admin-subtabs-bar {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.admin-subtab-btn {
  background: #011E2D !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #CBD5E1 !important;
  font-weight: 700 !important;
}

.admin-subtab-btn:hover {
  background: #023D5B !important;
  color: #FFFFFF !important;
  border-color: #38BDF8 !important;
}

.admin-subtab-btn.active {
  background: linear-gradient(135deg, #0284C7 0%, #02537A 100%) !important;
  border: 1px solid #38BDF8 !important;
  color: #FFFFFF !important; /* Crisp white text, no dark on white */
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(56, 189, 248, 0.3) !important;
}

.admin-subtab-btn.active span {
  color: #FFFFFF !important;
}

/* Category Filter Pills & Preset Chips inside Modals */
.category-pill-btn,
.preset-chip,
.metrics-preset-pill {
  background: #011E2D !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #CBD5E1 !important;
}

.category-pill-btn:hover,
.preset-chip:hover,
.metrics-preset-pill:hover {
  background: #023D5B !important;
  color: #FFFFFF !important;
  border-color: #38BDF8 !important;
}

.category-pill-btn.active,
.preset-chip.active,
.metrics-preset-pill.active {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  border-color: #38BDF8 !important;
  color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.25) !important;
}

/* ==========================================================================
   5. MODAL INNER PANELS, RULE BOXES & CARD SURFACES
   ========================================================================== */

.modal-card .inner-card,
.modal-card .credit-rules-banner,
.modal-card .directory-prompt-box,
.modal-card .cea-box,
.modal-card .guideline-box,
.admin-bcast-gateway-card,
.admin-bcast-composer-card,
.admin-kpi-card,
.metrics-kpi-card,
.metrics-chart-card,
.directory-dataset-card,
.security-status-card {
  background: #011E2D !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.modal-card .inner-card strong,
.modal-card .credit-rules-banner strong,
.modal-card .cea-box strong {
  color: #FFFFFF !important;
}

/* Tables inside Modals */
.modal-card table,
.admin-modal-card table,
[id$="Modal"] table {
  color: #FFFFFF !important;
}

.modal-card th,
.admin-modal-card th,
[id$="Modal"] th {
  background: #011622 !important;
  color: #CBD5E1 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  font-weight: 800 !important;
}

.modal-card td,
.admin-modal-card td,
[id$="Modal"] td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #F8FAFC !important;
}

.modal-card tr:hover td,
.admin-modal-card tr:hover td,
[id$="Modal"] tr:hover td {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================================
   6. SPECIFIC MODAL OVERRIDES & AUDIT FIXES
   ========================================================================== */

/* 6.1 Inactivity Security Lock Modal (#resInactivityLockModal) */
#resInactivityLockModal .modal-card {
  background: linear-gradient(180deg, #023D5B 0%, #012235 100%) !important;
}

#resInactivityLockModal #btnResInactivityContinue {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  border: 1px solid #38BDF8 !important;
  color: #FFFFFF !important; /* Replaces dark navy text #012B40 */
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4) !important;
}

#resInactivityLockModal #btnResInactivityContinue:hover {
  background: linear-gradient(135deg, #0284C7 0%, #02537A 100%) !important;
  border-color: #FFFFFF !important;
}

#resInactivityLockModal #btnResInactivityLogout {
  color: #F87171 !important; /* Bright coral instead of dim red */
  border-color: rgba(248, 113, 113, 0.35) !important;
}

/* 6.2 CEA Register Verification Link in Edit Subscriber Modal */
#editSubscriberModal #editSubCeaLink,
.btn-jewel-sky,
[id$="Modal"] a.btn-jewel-sky {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  border: 1px solid #38BDF8 !important;
  text-decoration: none !important;
}

#editSubscriberModal #editSubCeaLink:hover {
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
}

/* 6.3 Email Message Preview Modal (#emailMessagePreviewModal) */
#emailMessagePreviewModal .modal-card {
  background: linear-gradient(180deg, #023D5B 0%, #012235 100%) !important;
}

#emailMessagePreviewModal span[style*="color: #64748B"],
#emailMessagePreviewModal span[style*="color:#64748B"] {
  color: #94A3B8 !important;
}

#emailMessagePreviewModal pre,
#emailMessagePreviewModal #emailPreviewBody {
  background: #011E2D !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* 6.4 Statutory Print Preview Modals (#adminAcraReportModal, #adminIrasEciModal, #adminCyberThreatReportModal) */
#acraStatementsPrintArea,
#irasEciPrintArea,
#cyberReportPrintArea {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border: 2px solid #CBD5E1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

#acraStatementsPrintArea *,
#irasEciPrintArea *,
#cyberReportPrintArea * {
  color: #0F172A !important;
}

#acraStatementsPrintArea th,
#irasEciPrintArea th,
#cyberReportPrintArea th {
  background: #F1F5F9 !important;
  color: #0F172A !important;
  border-bottom: 2px solid #94A3B8 !important;
}

/* 6.5 Photo Guidelines Modal (#photoGuidelinesModal) */
#photoGuidelinesModal .guideline-alert-danger,
#photoGuidelinesModal [style*="color: #EF4444"],
#photoGuidelinesModal [style*="color: #F43F5E"] {
  color: #F87171 !important; /* Bright luminous coral */
}

/* 6.6 Performance Modal (#myPerformanceModal) */
#myPerformanceModal .perf-kpi-card {
  background: #011E2D !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
}

#myPerformanceModal .perf-kpi-val {
  color: #F5D061 !important;
}

/* 6.7 Post Modal (#postModal) */
#postModal .modal-card {
  background: linear-gradient(180deg, #023D5B 0%, #012235 100%) !important;
}

#postModal .form-group label {
  color: #CBD5E1 !important;
}

#postModal #postPsfDisplay {
  background: #011622 !important;
  color: #F5D061 !important;
  font-weight: 800 !important;
  border-color: rgba(245, 208, 97, 0.35) !important;
}

/* 6.8 Button Text Contrast inside Modals */
.modal-card .btn-jewel-gold,
.admin-modal-card .btn-jewel-gold,
[id$="Modal"] .btn-jewel-gold,
.modal-card .btn-primary,
[id$="Modal"] .btn-primary {
  background: linear-gradient(135deg, #F5D061 0%, #D97706 100%) !important;
  border: 1px solid #92400E !important;
  color: #080E21 !important; /* Deep dark obsidian on shimmering gold for WCAG AAA contrast */
  font-weight: 800 !important;
}

.modal-card .btn-jewel-gold span,
.modal-card .btn-jewel-gold i,
[id$="Modal"] .btn-jewel-gold span,
[id$="Modal"] .btn-jewel-gold i {
  color: #080E21 !important;
}

.modal-card .btn-secondary,
.admin-modal-card .btn-secondary,
[id$="Modal"] .btn-secondary {
  background: #011E2D !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

.modal-card .btn-secondary:hover,
.admin-modal-card .btn-secondary:hover,
[id$="Modal"] .btn-secondary:hover {
  background: #023D5B !important;
  border-color: #FFFFFF !important;
}

/* ==========================================================================
   7. LUMINOUS ACCENT COLOR REFINEMENTS (WCAG AAA DARK MODE CONTRAST)
   ========================================================================== */

/* 7.1 AI Search & Tool Buttons */
.btn-ai-title-search {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #38BDF8 !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}

.btn-ai-title-search i {
  color: #FFFFFF !important;
}

/* 7.2 Luminous Emerald for Positive / Verified States */
.admin-online-pill,
.admin-module-pill.badge-full-authority,
.pill-count-badge,
.badge-active,
.status-pill.status-active,
.cea-verified-pill,
#postModalRemainingCredits,
#hrModalPrevErCpf,
#revInputGross {
  color: #34D399 !important;
  border-color: rgba(52, 211, 153, 0.45) !important;
}

/* 7.3 Luminous Coral & Amber for Alerts & Urgency */
.guideline-alert-danger,
.badge-danger,
.threat-critical,
.threat-high,
#hrModalPrevEeCpf,
#expInputGross,
.perf-kpi-val.text-danger,
#myPerformanceModal strong[style*="color: #EF4444"],
#myPerformanceModal strong[style*="color:#EF4444"] {
  color: #F87171 !important;
}

/* 7.4 About Us Modal Zoning Color Highlights */
#aboutUsModal strong[style*="color: #EA580C"],
#aboutUsModal strong[style*="color:#EA580C"] {
  color: #FB923C !important;
}

#aboutUsModal strong[style*="color: #0284C7"],
#aboutUsModal strong[style*="color:#0284C7"] {
  color: #38BDF8 !important;
}

#aboutUsModal strong[style*="color: #8B5CF6"],
#aboutUsModal strong[style*="color:#8B5CF6"] {
  color: #C084FC !important;
}

/* 7.5 Privacy Modal Guarantee Highlights */
#privacyModal div[style*="color: #10B981"],
#privacyModal div[style*="color:#10B981"] {
  color: #34D399 !important;
}

/* 7.6 Social Handles & API Modals */
#agentSocialHandlesModal #socialModalAgentCea {
  color: #38BDF8 !important;
}

#adminPaymentApiModal span[style*="color: #6366F1"],
#adminPaymentApiModal span[style*="color:#6366F1"] {
  color: #818CF8 !important;
}

#adminSocialPlatformColorPicker {
  background: #011E2D !important;
  color: #FFFFFF !important;
}

/* 7.7 Inline Color Contrast Harmonization across All Modals */
.modal-card [style*="color:#10B981"],
.modal-card [style*="color: #10B981"],
.admin-modal-card [style*="color:#10B981"],
.admin-modal-card [style*="color: #10B981"],
[id$="Modal"] [style*="color:#10B981"],
[id$="Modal"] [style*="color: #10B981"],
[id$="Modal"] .agent-status-pill {
  color: #34D399 !important;
}

.modal-card [style*="color:#F43F5E"],
.modal-card [style*="color: #F43F5E"],
[id$="Modal"] [style*="color:#F43F5E"],
[id$="Modal"] [style*="color: #F43F5E"] {
  color: #FB7185 !important;
}

.modal-card [style*="color:#EF4444"],
.modal-card [style*="color: #EF4444"],
[id$="Modal"] [style*="color:#EF4444"],
[id$="Modal"] [style*="color: #EF4444"] {
  color: #F87171 !important;
}

/* Case-insensitive attribute matching for inline colors */
[id$="Modal"] [style*="#10b981" i],
.modal-card [style*="#10b981" i] {
  color: #34D399 !important;
}

/* ==========================================================================
   8. MASTER THEME CASCADE FOR ALL ADMIN & POPUP MODALS (DARK OCEAN BLUE)
   ========================================================================== */

/* 8.1 Modal Card Base Styles */
.modal-backdrop,
div[id$="Modal"].modal-backdrop {
  background: rgba(1, 15, 25, 0.78) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.modal-card,
.admin-modal-card,
.directory-modal-card,
.admin-credit-modal-card,
.admin-promo-modal-card,
.admin-social-modal-card,
[id$="Modal"] > .modal-card,
[id$="Modal"] > div:not(.modal-backdrop):first-child {
  background: linear-gradient(180deg, #023D5B 0%, #012235 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

/* 8.2 Modal Typography */
.admin-modal-title,
.modal-card h3,
.modal-card h4,
[id$="Modal"] h3,
[id$="Modal"] h4,
[id$="Modal"] .admin-modal-title {
  color: #FFFFFF !important;
}

.admin-modal-subtitle,
.modal-card p,
.modal-subtitle,
[id$="Modal"] p,
[id$="Modal"] .admin-modal-subtitle {
  color: #CBD5E1 !important;
}

.admin-form-label,
.modal-card label,
.form-group label,
.admin-field-label,
[id$="Modal"] label {
  color: #CBD5E1 !important;
}

/* 8.3 Form Inputs, Selects & Textareas */
.form-control-admin,
.admin-form-input,
.admin-form-textarea,
.admin-form-select,
.directory-dark-textarea,
.directory-model-select,
.modal-card input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]),
.modal-card select,
.modal-card textarea,
[id$="Modal"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]),
[id$="Modal"] select,
[id$="Modal"] textarea {
  background: #011E2D !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.form-control-admin:focus,
.admin-form-input:focus,
.admin-form-textarea:focus,
.admin-form-select:focus,
.directory-dark-textarea:focus,
.directory-model-select:focus,
.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus,
[id$="Modal"] input:focus,
[id$="Modal"] select:focus,
[id$="Modal"] textarea:focus {
  border-color: #38BDF8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
  outline: none !important;
}

/* 8.4 Inner Cards, Toolbars, and Summary Containers */
.admin-section-card,
.directory-prompt-box,
.admin-gst-banner-box,
.admin-gst-radio-box,
.admin-summary-box,
.admin-preview-sheet,
.benefits-quick-chips,
.admin-authority-grid,
.admin-auth-check-item,
[id$="Modal"] .section-box,
[id$="Modal"] .admin-box {
  background: #011E2D !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
}

.directory-prompt-toolbar,
.modal-footer,
.admin-modal-footer,
[id$="Modal"] .modal-footer {
  background: #011622 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* 8.5 Modal Close Buttons */
.modal-close-btn,
.modal-card .modal-close-btn,
[id$="Modal"] .modal-close-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  transition: all 0.2s ease !important;
}

.modal-close-btn:hover,
.modal-card .modal-close-btn:hover,
[id$="Modal"] .modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

/* 8.6 Administrator Login Gateway & Inactivity Lock Modals */
#adminLoginModal .modal-card,
#adminInactivityLockModal .modal-card,
.admin-inactivity-modal-card {
  background: linear-gradient(180deg, #023D5B 0%, #012235 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}

#adminLoginModal .modal-title,
#adminInactivityLockModal h3,
.admin-inactivity-title {
  color: #FFFFFF !important;
}

#adminLoginModal .subtitle-text,
#adminLoginModal label,
#adminInactivityLockModal label {
  color: #CBD5E1 !important;
}

#adminLoginModal .form-input,
#adminLoginModal input[type="email"],
#adminLoginModal input[type="password"],
#adminLoginEmail,
#adminLoginPassword {
  background: #011E2D !important;
  background-color: #011E2D !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
}

#adminLoginModal .admin-totp-container-box {
  background: #011E2D !important;
  border: 1.5px solid rgba(245, 208, 97, 0.45) !important;
}

#adminLoginModal .admin-totp-label,
#adminInactivityLockModal .admin-totp-label {
  color: #F5D061 !important;
}

#adminLoginModal .admin-totp-help,
.admin-inactivity-desc {
  color: #94A3B8 !important;
}

#adminLoginTotpPasskey,
#adminInactivityTotpInput,
.admin-totp-input {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 2px solid rgba(245, 208, 97, 0.60) !important;
  color: #F5D061 !important;
}

.admin-inactivity-icon-wrap {
  background: rgba(245, 208, 97, 0.15) !important;
  border: 2px solid #F5D061 !important;
  color: #F5D061 !important;
  box-shadow: 0 0 20px rgba(245, 208, 97, 0.3) !important;
}

.admin-inactivity-identity-box {
  background: rgba(1, 30, 45, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

#adminInactivityName {
  color: #FFFFFF !important;
}

#adminInactivityEmail {
  color: #38BDF8 !important;
}

/* Themed Alert & Confirm Modal Popup */
#customAlertModal .modal-card,
#customConfirmModal .modal-card {
  background: linear-gradient(180deg, #023D5B 0%, #012235 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #FFFFFF !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
}
#customAlertModal #customAlertTitle,
#customConfirmModal #customConfirmTitle {
  color: #FFFFFF !important;
}
#customAlertModal #customAlertMessage,
#customConfirmModal #customConfirmMessage {
  color: #E2E8F0 !important;
}

/* ==========================================================================
   26. SCHEDULE REPOSTING MODAL (#scheduleRepostModal / Repost Later)
   ========================================================================== */
body:not(.light-theme) #scheduleRepostModal .modal-card,
body:not(.light-theme) #scheduleRepostModal .schedule-repost-modal-card,
body:not(.light-theme) .schedule-repost-modal-card {
  background: var(--modal-card-bg, linear-gradient(180deg, #023D5B 0%, #012235 100%)) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.8), 0 0 35px rgba(2, 61, 91, 0.45), inset 0 1px 2px rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
}

body:not(.light-theme) #scheduleRepostModal .schedule-repost-header,
body:not(.light-theme) .schedule-repost-header {
  background: var(--modal-header-bg, linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(0, 0, 0, 0.08) 100%)) !important;
  border-bottom: 1px solid var(--modal-header-border, rgba(255, 255, 255, 0.15)) !important;
}

body:not(.light-theme) #scheduleRepostModal .schedule-repost-header .modal-title {
  color: #FFFFFF !important;
}

body:not(.light-theme) #scheduleRepostModal .schedule-repost-header .caption-text {
  color: #CBD5E1 !important;
}

body:not(.light-theme) #scheduleRepostModal .schedule-repost-balance-strip,
body:not(.light-theme) .schedule-repost-balance-strip {
  background: rgba(1, 30, 45, 0.75) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body:not(.light-theme) #scheduleRepostModal .schedule-controls-panel,
body:not(.light-theme) .schedule-controls-panel {
  background: rgba(1, 30, 45, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body:not(.light-theme) #scheduleRepostModal .btn-schedule-preset,
body:not(.light-theme) .btn-schedule-preset {
  background: rgba(1, 30, 45, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #CBD5E1 !important;
}

body:not(.light-theme) #scheduleRepostModal .btn-schedule-preset:hover,
body:not(.light-theme) .btn-schedule-preset:hover {
  background: rgba(2, 61, 91, 0.9) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

body:not(.light-theme) #scheduleRepostModal .btn-schedule-preset.active,
body:not(.light-theme) .btn-schedule-preset.active {
  background: rgba(16, 185, 129, 0.22) !important;
  border-color: #10B981 !important;
  color: #34D399 !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3) !important;
}

body:not(.light-theme) #scheduleRepostModal .btn-day-pill,
body:not(.light-theme) .btn-day-pill {
  background: rgba(1, 30, 45, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #CBD5E1 !important;
}

body:not(.light-theme) #scheduleRepostModal .btn-day-pill:hover,
body:not(.light-theme) .btn-day-pill:hover {
  background: rgba(2, 61, 91, 0.9) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
}

body:not(.light-theme) #scheduleRepostModal .btn-day-pill.active,
body:not(.light-theme) .btn-day-pill.active {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #10B981 !important;
  color: #34D399 !important;
  font-weight: 800 !important;
}

body:not(.light-theme) #scheduleRepostModal .schedule-table-responsive,
body:not(.light-theme) .schedule-table-responsive,
body:not(.light-theme) #scheduleRepostModal .scheduled-queue-table-responsive,
body:not(.light-theme) .scheduled-queue-table-responsive {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(1, 30, 45, 0.6) !important;
}

body:not(.light-theme) #scheduleRepostModal .schedule-listings-table thead tr,
body:not(.light-theme) .schedule-listings-table thead tr,
body:not(.light-theme) #scheduleRepostModal .scheduled-queue-table thead tr,
body:not(.light-theme) .scheduled-queue-table thead tr {
  background: rgba(1, 22, 33, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body:not(.light-theme) #scheduleRepostModal .schedule-listings-table thead th,
body:not(.light-theme) .schedule-listings-table thead th,
body:not(.light-theme) #scheduleRepostModal .scheduled-queue-table thead th,
body:not(.light-theme) .scheduled-queue-table thead th {
  color: #FFFFFF !important;
}

body:not(.light-theme) #scheduleRepostModal .schedule-listings-table tbody tr,
body:not(.light-theme) .schedule-listings-table tbody tr,
body:not(.light-theme) #scheduleRepostModal .scheduled-queue-table tbody tr,
body:not(.light-theme) .scheduled-queue-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
}

body:not(.light-theme) #scheduleRepostModal .schedule-listings-table tbody tr:hover,
body:not(.light-theme) .schedule-listings-table tbody tr:hover,
body:not(.light-theme) #scheduleRepostModal .scheduled-queue-table tbody tr:hover,
body:not(.light-theme) .scheduled-queue-table tbody tr:hover {
  background-color: rgba(2, 61, 91, 0.45) !important;
}

body:not(.light-theme) #scheduleRepostModal .schedule-calculation-card,
body:not(.light-theme) .schedule-calculation-card {
  background: rgba(1, 30, 45, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

body:not(.light-theme) #scheduleRepostModal .scheduled-queue-section,
body:not(.light-theme) .scheduled-queue-section {
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
}

body:not(.light-theme) #scheduleRepostModal .btn-cancel-schedule,
body:not(.light-theme) .btn-cancel-schedule {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  color: #CBD5E1 !important;
}

body:not(.light-theme) #scheduleRepostModal .btn-cancel-schedule:hover,
body:not(.light-theme) .btn-cancel-schedule:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

body:not(.light-theme) #scheduleRepostModal input[type="date"],
body:not(.light-theme) #scheduleRepostModal input[type="time"] {
  background: #011E2D !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}