/* ==========================================================================
   THE PROJECT MBBS - THEMES & DESIGN TOKENS
   Palettes: Light (Navy Mint), Midnight Navy, MedixPrep Portal (Dark)
   ========================================================================== */

:root {
  color-scheme: light dark;
  --bg: #f8f0e7;
  --surface: #fffaf5;
  --surface-2: #f2e7db;
  --ink: #14343d;
  --muted: #52636a;
  --line: #e3d5c6;
  --brand: #14343d;
  --brand-hover: #0f272e;
  --brand-contrast: #bef0d9;
  --brand-contrast-hover: #a6e8cb;
  --teal: #13766c;
  --teal-soft: #d8f3ec;
  --rose: #f43f5e;
  --rose-soft: #ffe4e6;
  --amber: #f59e0b;
  --amber-soft: #fef3c7;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(20,52,61,0.06);
  --shadow: 0 8px 24px rgba(20,52,61,0.09);
  --shadow-lg: 0 18px 48px rgba(20,52,61,0.13);
  --nav-active-bg: #14343d;
  --nav-active-ink: #bef0d9;
}

/* Light / Navy Mint Theme */
.theme-navy,
.theme-light,
html[data-portal-theme="light"],
.app.theme-light,
.app.theme-navy {
  --bg: #f8f0e7;
  --surface: #fffaf5;
  --surface-2: #f2e7db;
  --ink: #14343d;
  --muted: #52636a;
  --line: #e3d5c6;
  --brand: #14343d;
  --brand-contrast: #bef0d9;
  --teal: #13766c;
  --teal-soft: #d8f3ec;
  --rose: #f43f5e;
  --rose-soft: #ffe4e6;
  --shadow-sm: 0 1px 2px rgba(20,52,61,0.06);
  --shadow: 0 8px 24px rgba(20,52,61,0.09);
  --shadow-lg: 0 18px 48px rgba(20,52,61,0.13);
  --nav-active-bg: #14343d;
  --nav-active-ink: #bef0d9;
}

/* Dark Theme - MedixPrep Portal Dark */
.theme-dark,
html[data-portal-theme="dark"],
[data-theme="dark"],
.app.theme-dark {
  color-scheme: dark;
  --bg: #090e17;
  --surface: #0f172a;
  --surface-2: #1e293b;
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --line: #334155;
  --brand: #2dd4bf;
  --brand-hover: #14b8a6;
  --brand-contrast: #0f172a;
  --teal: #2dd4bf;
  --teal-soft: rgba(45, 212, 191, 0.15);
  --rose: #f43f5e;
  --rose-soft: rgba(244, 63, 94, 0.15);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow: 0 10px 30px rgba(0,0,0,0.6);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.7);
  --nav-active-bg: #2dd4bf;
  --nav-active-ink: #0f172a;
}

/* Signature Mint-Navy Gradient for Profile Badges (Light, Navy, and Dark themes) */
.profile-dot:not(.has-photo),
.side-profile-dot:not(.has-photo),
.profile-dot-lg:not(.has-photo),
#profileBtn:not(.has-photo),
#homeProfileBtn:not(.has-photo),
#sideProfileDot:not(.has-photo),
#profileMenuDot:not(.has-photo),
#stAvatarPreview:not(.has-photo) {
  background: linear-gradient(135deg, #2dd4bf 0%, #14343d 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 3px 10px rgba(20, 52, 61, 0.28) !important;
  display: grid !important;
  place-items: center !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.profile-dot.has-photo,
.side-profile-dot.has-photo,
.profile-dot-lg.has-photo,
#profileBtn.has-photo,
#homeProfileBtn.has-photo,
#sideProfileDot.has-photo,
#profileMenuDot.has-photo,
#stAvatarPreview.has-photo {
  background-color: transparent !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}

/* Profile Icon Circle Outline: Black for Light Theme, White for Dark Theme */
.profile-dot,
.side-profile-dot,
.profile-dot-lg,
#profileBtn,
#homeProfileBtn,
#sideProfileDot,
#profileMenuDot,
#stAvatarPreview {
  border: 2px solid #000000 !important;
  border-radius: 50% !important;
}

body.dark-mode .profile-dot,
body.dark-mode .side-profile-dot,
body.dark-mode .profile-dot-lg,
body.dark-mode #profileBtn,
body.dark-mode #homeProfileBtn,
body.dark-mode #sideProfileDot,
body.dark-mode #profileMenuDot,
body.dark-mode #stAvatarPreview,
.theme-dark .profile-dot,
.theme-dark .side-profile-dot,
.theme-dark .profile-dot-lg,
.theme-dark #profileBtn,
.theme-dark #homeProfileBtn,
.theme-dark #sideProfileDot,
.theme-dark #profileMenuDot,
.theme-dark #stAvatarPreview,
html[data-portal-theme="dark"] .profile-dot,
html[data-portal-theme="dark"] .side-profile-dot,
html[data-portal-theme="dark"] .profile-dot-lg,
html[data-portal-theme="dark"] #profileBtn,
html[data-portal-theme="dark"] #homeProfileBtn,
html[data-portal-theme="dark"] #sideProfileDot,
html[data-portal-theme="dark"] #profileMenuDot,
html[data-portal-theme="dark"] #stAvatarPreview,
html[data-theme="dark"] .profile-dot,
html[data-theme="dark"] .side-profile-dot,
html[data-theme="dark"] .profile-dot-lg,
html[data-theme="dark"] #profileBtn,
html[data-theme="dark"] #homeProfileBtn,
html[data-theme="dark"] #sideProfileDot,
html[data-theme="dark"] #profileMenuDot,
html[data-theme="dark"] #stAvatarPreview {
  border: 2px solid #ffffff !important;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25) !important;
}