:root {
  --bg-canvas: #F4F5F7;
  --bg-surface: #FFFFFF;
  --bg-surface-raised: #FFFFFF;
  --bg-surface-sunken: #ECEEF2;
  --bg-overlay: rgba(0,0,0,0.40);
  --border-subtle: #E1E4EA;
  --border-default: #C9CDD6;
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-tertiary: #9CA3AF;
  --accent-primary: #3B6FFF;
  
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
}

/* Premium Dark Theme Overrides */
html.dark, [data-theme="dark"] {
  --bg-canvas: #090D16;
  --bg-surface: #101622;
  --bg-surface-raised: #172033;
  --bg-surface-sunken: #1C263C;
  --bg-overlay: rgba(0, 0, 0, 0.65);
  --border-subtle: #1F2B48;
  --border-default: #2E3F66;
  --text-primary: #F3F4F6;
  --text-secondary: #D1D5DB;
  --text-tertiary: #9CA3AF;
  --accent-primary: #3B6FFF;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--bg-canvas);
  color: var(--text-primary);
}

.font-title { font-family: 'DM Serif Display', serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

.bg-canvas { background-color: var(--bg-canvas); }
.bg-surface { background-color: var(--bg-surface); }
.bg-surface-raised { background-color: var(--bg-surface-raised); }
.bg-surface-sunken { background-color: var(--bg-surface-sunken); }
.border-subtle { border-color: var(--border-subtle); }
.border-default { border-color: var(--border-default); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: var(--radius-full); }
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* Universal Form Control Styling for Perfect Light/Dark Contrast */
input, textarea, select {
  background-color: var(--bg-surface);
  color: var(--text-primary) !important;
  border-color: var(--border-default) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-tertiary) !important;
  opacity: 0.8;
}
input:focus, textarea:focus, select:focus {
  background-color: var(--bg-surface-raised);
  outline: none !important;
  box-shadow: none !important;
}

/* Autofill fixes in browsers */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--bg-surface-sunken) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Custom Navy Theme Palette (#0D3B66) */
.bg-brand-navy { background-color: #0D3B66 !important; }
.text-brand-navy { color: #0D3B66 !important; }
.from-brand-navy { --tw-gradient-from: #0D3B66 !important; --tw-gradient-to: rgba(13, 59, 102, 0) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.to-brand-navy { --tw-gradient-to: #0D3B66 !important; }
.via-brand-navy { --tw-gradient-stops: var(--tw-gradient-from), #0D3B66, var(--tw-gradient-to) !important; }

/* Bulletproof Popup Scroll Fixes */
#profile-modal-container {
    display: flex;
    flex-direction: column;
    height: 85vh;
    max-height: 700px;
    overflow: hidden;
}
@media (min-width: 768px) {
    #profile-modal-container {
        flex-direction: row;
    }
}
#profile-modal aside, 
#profile-modal .flex-1.flex.flex-col {
    height: 100%;
    min-height: 0;
    overflow: hidden;
}
#profile-modal .overflow-y-auto {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Momentum scroll for iOS */
}

/* Premium SweetAlert2 Light/Dark Theme Overrides */
body .swal2-container,
.swal2-container {
  background-color: var(--bg-overlay) !important;
}
body .swal2-popup,
.swal2-popup {
  background: var(--bg-surface) !important;
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
}
html.dark body .swal2-popup,
html.dark .swal2-popup {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
body .swal2-title,
.swal2-title {
  color: var(--text-primary) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 800 !important;
}
body .swal2-html-container,
.swal2-html-container {
  color: var(--text-secondary) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
body .swal2-confirm,
.swal2-confirm {
  background-color: #3b82f6 !important; /* Premium Blue confirmation */
  color: #ffffff !important;
  border-radius: 12px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.2) !important;
  transition: all 0.2s !important;
}
body .swal2-confirm:hover,
.swal2-confirm:hover {
  background-color: #2563eb !important;
}
body .swal2-cancel,
.swal2-cancel {
  background-color: var(--bg-surface-sunken) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  transition: all 0.2s !important;
}
body .swal2-cancel:hover,
.swal2-cancel:hover {
  background-color: var(--border-subtle) !important;
}
body .swal2-success-circular-line-left,
body .swal2-success-circular-line-right,
body .swal2-success-fix,
.swal2-success-circular-line-left,
.swal2-success-circular-line-right,
.swal2-success-fix {
  background: var(--bg-surface) !important;
  background-color: var(--bg-surface) !important;
}
body .swal2-timer-progress-bar,
.swal2-timer-progress-bar {
  background-color: #3b82f6 !important;
}
body .swal2-input, body .swal2-textarea, body .swal2-select,
.swal2-input, .swal2-textarea, .swal2-select {
  background-color: var(--bg-surface-sunken) !important;
  color: var(--text-primary) !important;
  border-radius: 12px !important;
  border: 1px solid var(--border-default) !important;
  font-size: 0.8125rem !important;
}
body .swal2-input:focus, body .swal2-textarea:focus, body .swal2-select:focus,
.swal2-input:focus, .swal2-textarea:focus, .swal2-select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* Hide navigation menu when screen width is less than 990px */
@media (max-width: 989px) {
  .header-nav {
    display: none !important;
  }
}