:root {
  --systorian-navy: #062044;
  --systorian-navy-dark: #0A2854;
  --systorian-teal: #168F8A;
  --systorian-turquoise: #20C9C3;
  --systorian-light-blue: #EAF3FF;
  --systorian-light-mint: #E8F7F5;
  --systorian-white: #FFFFFF;
  --systorian-primary-text: #062044;
  --systorian-secondary-text: #53657D;
  --systorian-muted-text: #718096;
  --systorian-border: #DCE6EF;
  --systorian-soft-bg: #F5F9FC;
}

/* ==========================================================================
   Smooth Typography & Anti-Aliasing (Zero-Jerk Font Engine)
   ========================================================================== */
*, *::before, *::after {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

html, body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-feature-settings: 'liga' 1, 'kern' 1;
}

/* Page Background: 70% light neutral, clean & modern */
.member-area-page {
  background: #F5F9FC !important;
  color: var(--systorian-primary-text);
  min-height: 100vh;
}

/* Desktop Hero Section: Clean, professional, minimal */
.member-page-hero {
  background: #FFFFFF !important;
  color: var(--systorian-primary-text) !important;
  border-bottom: 1px solid var(--systorian-border);
  position: relative;
  padding: 2rem 0;
}

.member-page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #062044 0%, #168F8A 60%, #20C9C3 100%);
}

.member-page-hero h1,
.member-page-hero .member-hero-title {
  color: var(--systorian-navy) !important;
  letter-spacing: -0.025em;
  font-weight: 850;
}

.member-page-hero p,
.member-page-hero .member-hero-subtitle {
  color: var(--systorian-secondary-text) !important;
  font-weight: 500;
  font-size: 0.95rem;
}

/* Hero Avatar / Icon Badge */
.member-hero-icon {
  background: #062044 !important;
  color: #FFFFFF !important;
  border: 1px solid #DCE6EF !important;
  box-shadow: 0 4px 14px rgba(6, 32, 68, 0.12) !important;
}

/* Status Chip */
.member-hero-chip {
  background: #FFFFFF !important;
  color: var(--systorian-navy) !important;
  border: 1px solid var(--systorian-border) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 2px 8px rgba(6, 32, 68, 0.04) !important;
}

/* Premium Clean Cards: White background, subtle border, light shadow */
.member-card,
.member-area-page .bg-white.dark\:bg-gray-800,
.member-area-page .desktop-bookings-toolbar,
.member-area-page .desktop-bookings-table-wrap {
  background: #FFFFFF !important;
  border: 1px solid var(--systorian-border) !important;
  border-radius: 1rem !important;
  box-shadow: 0 4px 16px rgba(6, 32, 68, 0.04) !important;
  color: var(--systorian-primary-text) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.member-card:hover {
  box-shadow: 0 8px 24px rgba(6, 32, 68, 0.08) !important;
  border-color: rgba(22, 143, 138, 0.35) !important;
}

/* Explicit High-Contrast Headings Inside Member Area & Cards */
.member-area-page h1:not(.text-white):not([class*="text-white"]):not([class*="text-teal-"]):not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-yellow-"]):not([class*="text-cyan-"]):not([class*="text-orange-"]),
.member-area-page h2:not(.text-white):not([class*="text-white"]):not([class*="text-teal-"]):not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-yellow-"]):not([class*="text-cyan-"]):not([class*="text-orange-"]),
.member-area-page h3:not(.text-white):not([class*="text-white"]):not([class*="text-teal-"]):not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-yellow-"]):not([class*="text-cyan-"]):not([class*="text-orange-"]),
.member-area-page h4:not(.text-white):not([class*="text-white"]):not([class*="text-teal-"]):not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-yellow-"]):not([class*="text-cyan-"]):not([class*="text-orange-"]),
.member-card h1:not(.text-white):not([class*="text-white"]),
.member-card h2:not(.text-white):not([class*="text-white"]),
.member-card h3:not(.text-white):not([class*="text-white"]),
.member-card h4:not(.text-white):not([class*="text-white"]) {
  color: #062044 !important;
  font-weight: 850 !important;
  opacity: 1 !important;
}

/* High-Contrast Body & Description Text Inside Cards */
.member-card p:not(.text-white):not([class*="text-white"]):not([class*="text-teal-"]):not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-yellow-"]):not([class*="text-cyan-"]):not([class*="text-orange-"]),
.member-card .text-slate-500:not(.text-white):not([class*="text-white"]),
.member-card .text-slate-600:not(.text-white):not([class*="text-white"]),
.member-card .text-gray-500:not(.text-white):not([class*="text-white"]),
.member-card .text-gray-600:not(.text-white):not([class*="text-white"]) {
  color: #53657D !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* Muted Meta Text */
.member-area-page .text-gray-400:not(.text-white):not([class*="text-white"]),
.member-area-page .text-slate-400:not(.text-white):not([class*="text-white"]),
.member-card .text-gray-400:not(.text-white):not([class*="text-white"]),
.member-card .text-slate-400:not(.text-white):not([class*="text-white"]) {
  color: #718096 !important;
  font-weight: 600 !important;
}

/* Highlighted Accent Elements */
.member-highlight,
.text-highlight,
.member-area-page .text-teal-600,
.member-area-page .text-teal-700 {
  color: #168F8A !important;
}

/* Universal Crisp White Text Guarantee on Dark Containers */
.member-area-page .text-white,
.member-card-dark,
.member-card-dark h1,
.member-card-dark h2,
.member-card-dark h3,
.member-card-dark h4,
.member-card-dark .font-black,
.member-card-dark .font-bold,
.member-btn-primary,
.member-btn-primary span,
.member-btn-primary i,
.btn-primary,
.btn-primary * {
  color: #FFFFFF !important;
}

.member-card-dark {
  background: #062044 !important;
  border: 1px solid rgba(32, 201, 195, 0.3) !important;
}

.member-card-dark p,
.member-card-dark span:not(.text-teal-300):not(.text-cyan-300):not(.text-yellow-300),
.member-area-page .member-card-dark p {
  color: #EAF3FF !important;
}

/* Primary Button: #062044 background, #FFFFFF text */
.member-btn-primary,
.btn-primary,
.member-area-page a.bg-blue-600,
.member-area-page button.bg-blue-600,
.member-area-page a.bg-green-600,
.member-area-page button.bg-green-600 {
  background: #062044 !important;
  color: #FFFFFF !important;
  border: 1px solid #062044 !important;
  border-radius: 0.625rem !important;
  box-shadow: 0 4px 12px rgba(6, 32, 68, 0.15) !important;
  font-weight: 750 !important;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.member-btn-primary:hover,
.btn-primary:hover,
.member-area-page a.bg-blue-600:hover,
.member-area-page button.bg-blue-600:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(6, 32, 68, 0.22) !important;
  background: #0A2854 !important;
}

/* Secondary Button: #FFFFFF background, #062044 text, #DCE6EF border */
.member-btn-secondary,
.btn-secondary,
.member-area-page a.member-btn-secondary,
.member-area-page button.member-btn-secondary,
.member-area-page a.bg-gray-600,
.member-area-page button.bg-gray-600 {
  background: #FFFFFF !important;
  color: #062044 !important;
  border: 1px solid #DCE6EF !important;
  border-radius: 0.625rem !important;
  box-shadow: 0 2px 6px rgba(6, 32, 68, 0.03) !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  transition: all 160ms ease !important;
}

.member-btn-secondary:hover,
.btn-secondary:hover,
.member-area-page a.member-btn-secondary:hover,
.member-area-page button.member-btn-secondary:hover {
  border-color: #168F8A !important;
  color: #168F8A !important;
  background: #F5F9FC !important;
  transform: translateY(-1px) !important;
}

/* Accent Button: #168F8A background, #FFFFFF text */
.btn-accent,
.member-btn-accent {
  background: #168F8A !important;
  color: #FFFFFF !important;
  border: 1px solid #168F8A !important;
  border-radius: 0.625rem !important;
  font-weight: 750 !important;
  box-shadow: 0 4px 12px rgba(22, 143, 138, 0.2) !important;
  transition: all 160ms ease !important;
}

.btn-accent:hover,
.member-btn-accent:hover {
  background: #127571 !important;
  transform: translateY(-1px) !important;
}

/* Promotional Button: #20C9C3 background, #062044 text */
.btn-promo,
.member-btn-promo {
  background: #20C9C3 !important;
  color: #062044 !important;
  border: 1px solid #20C9C3 !important;
  border-radius: 0.625rem !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(32, 201, 195, 0.25) !important;
  transition: all 160ms ease !important;
}

.btn-promo:hover,
.member-btn-promo:hover {
  background: #1bb3ad !important;
  transform: translateY(-1px) !important;
}

/* Form Controls & Inputs */
.member-area-page label {
  color: #062044 !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  margin-bottom: 0.375rem !important;
}

.member-area-page input[type="text"],
.member-area-page input[type="email"],
.member-area-page input[type="password"],
.member-area-page input[type="tel"],
.member-area-page input[type="date"],
.member-area-page input[type="number"],
.member-area-page select,
.member-area-page textarea {
  background: #FFFFFF !important;
  border: 1px solid #DCE6EF !important;
  border-radius: 0.625rem !important;
  color: #062044 !important;
  font-weight: 600 !important;
  font-size: 0.925rem !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

.member-area-page input:focus,
.member-area-page select:focus,
.member-area-page textarea:focus {
  border-color: #168F8A !important;
  box-shadow: 0 0 0 3px rgba(22, 143, 138, 0.15) !important;
  outline: none !important;
}

/* Stat Icons Container */
.member-stat-icon {
  background: #E8F7F5 !important;
  color: #168F8A !important;
  border: 1px solid rgba(22, 143, 138, 0.2) !important;
  border-radius: 0.75rem !important;
}

/* Badges & Active Filters */
.member-badge,
.member-area-page .desktop-filter-btn.active,
.member-area-page .filter-chip.active {
  background: #062044 !important;
  color: #FFFFFF !important;
  border-color: #062044 !important;
  box-shadow: 0 2px 8px rgba(6, 32, 68, 0.12) !important;
}

.member-area-page .text-blue-600,
.member-area-page .dark\:text-blue-400,
.member-area-page .text-indigo-600,
.member-area-page .dark\:text-indigo-400 {
  color: var(--systorian-green) !important;
}

.member-area-page .text-purple-600,
.member-area-page .dark\:text-purple-400 {
  color: var(--systorian-navy) !important;
}

.member-area-page .from-blue-600,
.member-area-page .from-indigo-600,
.member-area-page .from-purple-600,
.member-area-page .to-indigo-700,
.member-area-page .to-purple-700 {
  --tw-gradient-from: var(--systorian-navy) !important;
  --tw-gradient-to: var(--systorian-green) !important;
}

.member-area-page table th {
  color: var(--systorian-navy) !important;
  font-weight: 800 !important;
  background: #f8fbff !important;
}

.member-area-page .desktop-bookings-table tbody tr {
  background: #FFFFFF !important;
}

.member-area-page .desktop-bookings-table tbody tr:hover {
  background: #F8FAFC !important;
}

.member-area-page .desktop-bookings-table tbody td {
  color: #062044 !important;
}

.member-area-page .desktop-bookings-table tbody td p,
.member-area-page .desktop-bookings-table tbody td span:not([class*="bg-"]):not([class*="text-"]):not([class*="badge"]) {
  color: #062044 !important;
}


@media (max-width: 768px) {
  .member-area-page .member-page-hero {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* ==========================================================================
   Mobile App-Like Experience & Text Contrast Engine
   ========================================================================== */

/* Direct color utilities matching project palette */
.text-systorian-navy,
.text-\[\#0C2959\],
[class*="text-[#0C2959]"] {
  color: #0C2959 !important;
}

.text-systorian-teal,
.text-\[\#28867A\],
[class*="text-[#28867A]"] {
  color: #28867A !important;
}

.bg-systorian-navy,
.bg-\[\#0C2959\],
[class*="bg-[#0C2959]"] {
  background-color: #0C2959 !important;
}

.bg-systorian-teal,
.bg-\[\#28867A\],
[class*="bg-[#28867A]"] {
  background-color: #28867A !important;
}

/* Mobile Dashboard Container */
.mobile-dashboard {
  color: #071938;
}

.mobile-dashboard .member-card,
.mobile-dashboard .mobile-stat-card {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid rgba(40, 134, 122, 0.18) !important;
  border-radius: 1.25rem !important;
  box-shadow: 0 8px 24px rgba(12, 41, 89, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

/* Mobile Headings (unless inside a dark/gradient button) */
.mobile-dashboard h1:not([class*="text-white"]),
.mobile-dashboard h2:not([class*="text-white"]),
.mobile-dashboard h3:not([class*="text-white"]),
.mobile-dashboard h4:not([class*="text-white"]),
.mobile-dashboard .mobile-heading {
  color: #0C2959 !important;
  font-weight: 850 !important;
}

/* High Contrast Descriptions & Paragraphs */
.mobile-dashboard p:not([class*="text-white"]):not([class*="text-teal-"]):not([class*="text-amber-"]):not([class*="text-orange-"]),
.mobile-dashboard .mobile-text-secondary {
  color: #334155 !important;
  font-weight: 500 !important;
}

/* High Contrast Labels / Subtitles (eliminate washed-out slate-400 / slate-500) */
.mobile-dashboard .text-slate-400,
.mobile-dashboard .text-slate-500,
.mobile-dashboard .text-gray-400,
.mobile-dashboard .text-gray-500,
.dark .mobile-dashboard .text-slate-400,
.dark .mobile-dashboard .text-slate-500,
.dark .mobile-dashboard .text-gray-400,
.dark .mobile-dashboard .text-gray-500 {
  color: #475569 !important;
  font-weight: 600 !important;
}

/* Mobile Bottom Navigation Luxury Polish */
.mobile-bottom-nav {
  background: rgba(255, 255, 255, 0.96) !important;
  border-top: 1px solid rgba(40, 134, 122, 0.18) !important;
  box-shadow: 0 -4px 25px rgba(12, 41, 89, 0.07) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  padding: 6px 0 10px !important;
}

.mobile-bottom-nav .nav-item {
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  transition: all 180ms ease !important;
}

.mobile-bottom-nav .nav-item i {
  color: #1D61F2 !important;
  font-size: 19px !important;
  margin-bottom: 3px !important;
  transition: transform 180ms ease, color 180ms ease !important;
}

.mobile-bottom-nav .nav-item.active {
  color: #1D61F2 !important;
  font-weight: 850 !important;
}

.mobile-bottom-nav .nav-item.active i {
  color: #1D61F2 !important;
  transform: translateY(-2px) scale(1.1) !important;
}

.mobile-bottom-nav .nav-item:active {
  transform: scale(0.92) !important;
}

/* Mobile Side Drawer Menu Luxury Polish */
#mobile-menu-panel {
  background: #ffffff !important;
  color: #071938 !important;
}

#mobile-menu-panel .mobile-card {
  background: #f8fbff !important;
  border: 1px solid rgba(40, 134, 122, 0.16) !important;
  border-radius: 1rem !important;
  box-shadow: 0 4px 14px rgba(12, 41, 89, 0.04) !important;
  color: #0C2959 !important;
  font-weight: 750 !important;
  transition: all 180ms ease !important;
}

#mobile-menu-panel .mobile-card:hover,
#mobile-menu-panel .mobile-card:active {
  border-color: #28867A !important;
  background: #f0fdfa !important;
  transform: translateY(-1px) !important;
}

/* ========================================================
   SYSTORIAN DESIGN SYSTEM BRAND COLOR UTILITIES
   Ensures arbitrary Tailwind classes always resolve properly
   across all templates and components.
   ======================================================== */
.bg-\[\#062044\],
.bg-\[\#071938\],
.bg-\[\#0C2959\],
.bg-\[\#071731\],
.bg-\[\#0A2854\] {
  background-color: #062044 !important;
}

.bg-\[\#168F8A\],
.bg-\[\#28867A\],
.bg-\[\#23776D\] {
  background-color: #168F8A !important;
}

.bg-\[\#20C9C3\],
.bg-\[\#2dd4bf\] {
  background-color: #20C9C3 !important;
}

.bg-\[\#8FFBF4\] {
  background-color: #8FFBF4 !important;
}

.bg-\[\#E8F7F5\],
.bg-\[\#EEF7F5\],
.bg-\[\#e6f7f5\],
.bg-\[\#eef7f5\] {
  background-color: #E8F7F5 !important;
}

.bg-\[\#EAF3FF\],
.bg-\[\#F5F9FC\],
.bg-\[\#F8FAFC\],
.bg-\[\#F8FBFF\],
.bg-\#f8fafc {
  background-color: #F5F9FC !important;
}

.bg-\[\#FACC15\] {
  background-color: #FACC15 !important;
}

.bg-\[\#F8F3D2\] {
  background-color: #FBF6D9 !important;
}

/* Text Colors */
.text-\[\#062044\],
.text-\[\#071938\],
.text-\[\#0C2959\],
.text-\[\#0B1220\],
.text-\[\#0A2854\] {
  color: #062044 !important;
}

.text-\[\#168F8A\],
.text-\[\#28867A\] {
  color: #168F8A !important;
}

.text-\[\#20C9C3\],
.text-\[\#2dd4bf\] {
  color: #20C9C3 !important;
}

.text-\[\#8FFBF4\] {
  color: #8FFBF4 !important;
}

.text-\[\#53657D\],
.text-\[\#475569\] {
  color: #53657D !important;
}

.text-\[\#718096\],
.text-\[\#64748b\] {
  color: #718096 !important;
}

.text-\[\#FACC15\] {
  color: #B45309 !important; /* Accessible gold/amber for high contrast on light bgs */
}

/* Border Colors */
.border-\[\#DCE6EF\] {
  border-color: #DCE6EF !important;
}

.border-\[\#168F8A\],
.border-\[\#28867A\] {
  border-color: #168F8A !important;
}

.border-\[\#062044\],
.border-\[\#0C2959\] {
  border-color: #062044 !important;
}

/* Hover States */
.hover\:bg-\[\#12366F\]:hover,
.hover\:bg-\[\#0C2959\]:hover,
.hover\:bg-\[\#0A2854\]:hover,
.hover\:bg-\[\#062044\]:hover {
  background-color: #0A2854 !important;
}

.hover\:bg-\[\#23776D\]:hover,
.hover\:bg-\[\#28867A\]:hover,
.hover\:bg-\[\#168F8A\]:hover {
  background-color: #127571 !important;
}

/* Ensure text-white on dark backgrounds is always razor-sharp */
.bg-\[\#062044\] .text-white,
.bg-\[\#0C2959\] .text-white,
.bg-\[\#071938\] .text-white,
.bg-\[\#168F8A\] .text-white,
.bg-\[\#28867A\] .text-white,
.member-card-dark .text-white,
.member-btn-primary {
  color: #FFFFFF !important;
}

/* Date input high contrast & mobile picker fix */
input[type="date"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="time"],
select,
textarea {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

input[type="date"] {
  color: #064e3b !important;
  -webkit-text-fill-color: #064e3b !important;
  background-color: #ffffff !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: #064e3b !important;
  -webkit-text-fill-color: #064e3b !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(0.3) sepia(1) saturate(5) hue-rotate(120deg);
  opacity: 1 !important;
}