/* WCU Bioinformatika Klubu - Rəsmi Sayt Qlobal Stilləri */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --color-wcu-maroon: #800020;
  --color-bio-teal: #0f766e;
  --color-bio-emerald: #10b981;
  --color-bio-cyan: #06b6d4;
  --color-bg-dark: #070e17;
  --color-card-dark: rgba(15, 23, 42, 0.75);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

/* ========================================================
   1. GLOBAL FOUNDATION RESET & RESPONSIVE ESSENTIALS
   Zero Horizontal Overflow, Intrinsic Flex Sizing, Subpixel
   ======================================================== */

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
  height: 100%;
  box-sizing: border-box;
  font-size: 15px; /* Base sweet spot */
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-dark);
  color: #f1f5f9;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100vw !important;
  overflow-x: clip !important;
  position: relative;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Universal Flex & Grid Child Protection against horizontal blowout */
.flex > *, .grid > * {
  min-width: 0;
  min-inline-size: 0;
}

/* Images, Canvas, SVGs, Videos, IFrames fluid containment */
img, svg, video, canvas, iframe {
  max-width: 100%;
  height: auto;
}

#dnaCanvas {
  display: none !important;
}

.app-section {
  max-width: 100%;
  overflow-x: clip;
}

main, section, header, nav, footer {
  max-width: 100% !important;
}

/* Touch Action Optimization & Form Element Containment */
button, a, input, select, textarea {
  touch-action: manipulation;
}

input, select, textarea {
  max-width: 100%;
}

/* Prevent iOS Safari auto-zoom on input focus (< 768px) */
@media screen and (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="color"]):not([type="file"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Smooth Momentum Scrolling for Touch Devices (iOS & Android) */
.overflow-x-auto, .overflow-y-auto, [data-scroll] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Table Horizontal Scrolling Containment */
.overflow-x-auto {
  scrollbar-width: thin;
  scrollbar-color: #1e293b #09111e;
}

/* Custom Scrollbar for Desktop (Windows, macOS, Linux) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #09111e;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
  border: 2px solid #09111e;
}
::-webkit-scrollbar-thumb:hover {
  background: #0f766e;
}

/* ========================================================
   2. GLASSMORPHISM, GLOWS & BACKGROUND AMBIENT EFFECTS
   ======================================================== */

.glass-panel {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-nav {
  background: rgba(7, 14, 23, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Code and Genetic font */
.font-mono-seq {
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Break words anywhere utility */
.break-words-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Glowing Bio Accents */
.bio-glow {
  box-shadow: 0 0 35px -5px rgba(16, 185, 129, 0.25);
}

.bio-glow-cyan {
  box-shadow: 0 0 35px -5px rgba(6, 182, 212, 0.25);
}

/* Subtle Animated Background Gradients (Containment Guaranteed) */
.gradient-blob {
  position: absolute;
  filter: blur(80px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.15;
  max-width: 100vw;
}

.blob-1 {
  width: min(450px, 90vw);
  height: min(450px, 90vw);
  background: radial-gradient(circle, #10b981 0%, transparent 70%);
  top: -60px;
  left: -60px;
}

.blob-2 {
  width: min(480px, 90vw);
  height: min(480px, 90vw);
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
  top: 20%;
  right: -60px;
}

/* Animations */
@keyframes pulseSubtle {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

.animate-pulse-subtle {
  animation: pulseSubtle 4s infinite ease-in-out;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinSlow 8s linear infinite;
}

/* ========================================================
   3. SAFE AREA INSETS & NOTCH SUPPORT (iOS, ANDROID, PWA)
   ======================================================== */

.safe-area-top {
  padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
}
.safe-area-bottom {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}
.safe-area-left {
  padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
}
.safe-area-right {
  padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
}

/* Offline Status Banner Dynamic Safe Area */
#offlineBanner {
  padding-top: max(0.625rem, calc(0.5rem + env(safe-area-inset-top, 0px)));
}

/* In-App Document Viewer Safe Area */
#inAppDocViewerModal header {
  padding-top: max(0.75rem, env(safe-area-inset-top, 0px));
}

#inAppDocViewerModal .sm\:hidden.fixed {
  bottom: max(1.5rem, calc(1rem + env(safe-area-inset-bottom, 0px)));
}

/* Mobile Bottom Navigation Dock Safe Area & Touch Dimensions */
#mobileBottomNav {
  padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 12px)) !important;
  min-height: calc(56px + env(safe-area-inset-bottom, 0px));
}

#mobileBottomNav .mobile-tab-btn {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* ========================================================
   4. UNIVERSAL RESPONSIVE MODAL ARCHITECTURE
   Fits mobile viewports with virtual keyboards, 100dvh
   ======================================================== */

[id$="Modal"] > div:not(.gradient-blob),
.modal-content-container,
.app-modal-dialog {
  max-height: min(92vh, 92dvh) !important;
  width: 100% !important;
  max-width: min(96vw, var(--modal-max-w, 680px));
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overscroll-behavior-y: contain;
  border-radius: 1.5rem;
}

[id$="Modal"] > div > form,
[id$="Modal"] > div > .modal-body,
[id$="Modal"] > div > div.overflow-y-auto,
.modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* ========================================================
   5. DEVICE BREAKPOINTS & FLUID TYPOGRAPHY SCALING
   4K, Desktops, Laptops, Tablets, Phones, Ultra-Compact
   ======================================================== */

/* Large Desktops & 4K Monitors (> 1440px) */
@media screen and (min-width: 1440px) {
  html {
    font-size: 15.5px;
  }
}

/* Laptops & Standard Monitors (1024px to 1439px) */
@media screen and (min-width: 1024px) and (max-width: 1439px) {
  html {
    font-size: 14.5px;
  }
  nav.glass-nav .nav-link {
    font-size: 11px !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
  }
  nav.glass-nav button {
    font-size: 11px !important;
  }
}

/* Tablets & Large Foldables (640px to 1023px) */
@media screen and (min-width: 640px) and (max-width: 1023px) {
  html {
    font-size: 14.25px;
  }
}

/* Standard Mobile Phones (<= 639px) */
@media screen and (max-width: 639px) {
  html {
    font-size: 14px;
  }
  .mobile-tap-target {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Ultra-Compact Phones (<= 380px, e.g. iPhone SE, Galaxy Fold 280-320px) */
@media screen and (max-width: 380px) {
  html {
    font-size: 13.5px;
  }
  .glass-panel {
    padding: 0.75rem !important;
    border-radius: 1rem !important;
  }
  .app-section {
    gap: 1.75rem !important;
  }
  h1 {
    font-size: 1.55rem !important;
    line-height: 1.95rem !important;
  }
  h2 {
    font-size: 1.25rem !important;
    line-height: 1.6rem !important;
  }
  #mobileBottomNav span {
    font-size: 8.5px !important;
  }
  #mobileBottomNav button {
    padding-left: 0.15rem !important;
    padding-right: 0.15rem !important;
  }
}

/* Mobile Landscape Mode (Phone rotated sideways, height <= 500px) */
@media screen and (max-height: 500px) and (orientation: landscape) {
  #mobileBottomNav {
    display: none !important; /* Hide fixed dock so landscape viewport remains usable */
  }
  body {
    padding-bottom: 1rem !important;
  }
  main {
    padding-bottom: 2rem !important;
  }
  [id$="Modal"] > div:not(.gradient-blob) {
    max-height: 94dvh !important;
  }
}

/* Tap Target Compliance for Touch Devices (Apple HIG 44px min) */
@media (pointer: coarse) {
  button, .nav-link, .mobile-tab-btn, input[type="submit"], input[type="button"] {
    min-height: 44px;
  }
  p a, span a, td a, li a {
    min-height: auto;
  }
}

/* ========================================================
   6. PWA STANDALONE MODE (iOS, Android, Chrome App, macOS)
   ======================================================== */

@media (display-mode: standalone) {
  nav.glass-nav {
    padding-top: max(0.65rem, env(safe-area-inset-top, 0px));
  }
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    user-select: none;
    -webkit-user-select: none;
  }
  input, textarea, pre, code, .font-mono-seq, #inAppDocViewerBody, [data-selectable] {
    user-select: text;
    -webkit-user-select: text;
  }
  #pwaInstallBtn,
  #mobilePwaInstallBtn {
    display: none !important;
  }
}

/* Compact Desktop PWA Install Button */
#pwaInstallBtn {
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  max-height: 32px;
}

/* Windows High Contrast Mode & Accessibility */
@media (forced-colors: active) {
  .glass-panel, .glass-nav {
    border: 1px solid ButtonText !important;
    background: Canvas !important;
    color: CanvasText !important;
  }
  button {
    border: 1px solid ButtonText !important;
  }
}

/* Table Horizontal Containment & Scroll Indicators */
.responsive-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 1rem;
  position: relative;
  border: 1px solid rgba(51, 65, 85, 0.6);
  background: rgba(15, 23, 42, 0.6);
}

.responsive-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
}

.table-scroll-hint {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  color: #94a3b8;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .table-scroll-hint {
    display: none !important;
  }
}

/* Print styles for official letters */
@media print {
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .no-print, nav, footer, #toastContainer, #mobileBottomNav {
    display: none !important;
  }
}


/* ========================================================
   6. CARBOXMOL PURE WHITE THEME (ACADEMIC LIGHT SYSTEM)
   100% High-Contrast, Crystal-Clear Typography Everywhere
   ======================================================== */

:root {
  --color-bg-page: #ffffff;
  --color-card-bg: #ffffff;
  --color-text-title: #0f172a;
  --color-text-body: #1e293b;
  --color-text-sub: #334155;
  --color-text-muted: #475569;
  --color-border-subtle: #e2e8f0;
}

body {
  background-color: #ffffff !important;
  color: #1e293b !important;
}

/* 1. UNIVERSAL TYPOGRAPHY CONTRAST ON WHITE (WCAG AAA/AA) */

/* Headings & Bold Titles */
h1, h2, h3, h4, h5, h6,
.font-black, .font-extrabold {
  color: #0f172a;
}

/* Generic white text mapped to very dark slate */
.text-white:not([data-keep-white]):not(.bg-rose-600):not(.bg-teal-600):not(.bg-emerald-600):not(.bg-indigo-600) {
  color: #0f172a !important;
}

/* Slate Text Mappings -> High-Contrast Dark Slate */
[class*="text-slate-100"]:not([data-keep-white]),
[class*="text-slate-200"]:not([data-keep-white]),
[class*="text-slate-300"]:not([data-keep-white]) {
  color: #1e293b !important;
}

[class*="text-slate-400"] {
  color: #334155 !important;
}

[class*="text-slate-500"] {
  color: #475569 !important;
}

/* Saturated Jewel Tones for Accent Text on White Background */
[class*="text-teal-200"],
[class*="text-teal-300"],
[class*="text-teal-400"] {
  color: #0f766e !important; /* Deep Teal-700 */
}

[class*="text-cyan-200"],
[class*="text-cyan-300"],
[class*="text-cyan-400"] {
  color: #0369a1 !important; /* Deep Sky-700 */
}

[class*="text-emerald-200"],
[class*="text-emerald-300"],
[class*="text-emerald-400"] {
  color: #047857 !important; /* Deep Emerald-700 */
}

[class*="text-indigo-200"],
[class*="text-indigo-300"],
[class*="text-indigo-400"] {
  color: #4338ca !important; /* Deep Indigo-700 */
}

[class*="text-blue-200"],
[class*="text-blue-300"],
[class*="text-blue-400"] {
  color: #1d4ed8 !important; /* Deep Blue-700 */
}

[class*="text-amber-200"],
[class*="text-amber-300"],
[class*="text-amber-400"] {
  color: #b45309 !important; /* Deep Amber-700 */
}

[class*="text-rose-200"],
[class*="text-rose-300"],
[class*="text-rose-400"],
[class*="text-rose-500"] {
  color: #be123c !important; /* Deep Rose-700 */
}

[class*="text-red-200"],
[class*="text-red-300"],
[class*="text-red-400"] {
  color: #b91c1c !important; /* Deep Red-700 */
}

[class*="text-purple-200"],
[class*="text-purple-300"],
[class*="text-purple-400"] {
  color: #7e22ce !important; /* Deep Purple-700 */
}

/* Paragraphs, Spans, Labels, List Items inherit readable text */
body p, body span:not([class*="bg-"]):not([data-keep-white]),
body li, body label, body td, body th {
  color: inherit;
}

/* 2. SOLID BUTTONS & BADGES (KEEP LEGIBLE TEXT) */

/* Buttons with Dark / Vibrant Saturated Backgrounds -> WHITE TEXT */
button.bg-teal-600, button.bg-teal-700,
button.bg-emerald-600, button.bg-emerald-700,
button.bg-rose-600, button.bg-rose-700,
button.bg-indigo-600, button.bg-indigo-700,
button.bg-blue-600, button.bg-blue-700,
button.bg-red-600, button.bg-red-700,
button[class*="bg-teal-600"], button[class*="bg-teal-700"],
button[class*="bg-emerald-600"], button[class*="bg-emerald-700"],
button[class*="bg-rose-600"], button[class*="bg-rose-700"],
button[class*="bg-indigo-600"], button[class*="bg-indigo-700"],
button[class*="bg-blue-600"], button[class*="bg-blue-700"],
.bg-rose-600, .bg-teal-600, .bg-emerald-600, .bg-indigo-600,
.bg-rose-600 *, .bg-teal-600 *, .bg-emerald-600 *, .bg-indigo-600 *,
[data-keep-white], [data-keep-white] * {
  color: #ffffff !important;
}

/* Primary Teal/Emerald Gradient Action Buttons -> CRISP DARK TEAL TEXT */
button[class*="from-teal"],
button[class*="from-teal"] *,
[class*="from-teal-500"][class*="to-emerald-500"],
[class*="from-teal-500"][class*="to-emerald-500"] * {
  color: #042f2e !important; /* Very dark rich teal on neon button */
  font-weight: 700 !important;
}

/* Secondary / Dark Buttons -> TURN TO WHITE BUTTONS WITH DARK TEXT */
button[class*="bg-slate-900"]:not([class*="from-"]):not([class*="bg-rose"]):not([class*="bg-teal"]):not([class*="bg-emerald"]):not([class*="bg-indigo"]),
button[class*="bg-slate-800"]:not([class*="from-"]):not([class*="bg-rose"]):not([class*="bg-teal"]):not([class*="bg-emerald"]):not([class*="bg-indigo"]),
button[class*="bg-slate-950"]:not([class*="from-"]):not([class*="bg-rose"]):not([class*="bg-teal"]):not([class*="bg-emerald"]):not([class*="bg-indigo"]) {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

button[class*="bg-slate-900"]:hover,
button[class*="bg-slate-800"]:hover,
button[class*="bg-slate-950"]:hover {
  background-color: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f766e !important;
}

button[class*="bg-slate-900"] *,
button[class*="bg-slate-800"] *,
button[class*="bg-slate-950"] * {
  color: inherit !important;
}

/* 3. CARD & PANEL BACKGROUND INVERSIONS */

/* Glass Panels and Cards */
.glass-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05) !important;
}

/* All dark slate background classes become pure white */
[class*="bg-slate-950"]:not([id$="Modal"]):not(#mobileMenu):not(button),
[class*="bg-slate-900"]:not([id$="Modal"]):not(#mobileMenu):not(button),
[class*="bg-[#070e17]"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Subtle secondary nested card containers */
[class*="bg-slate-950/80"],
[class*="bg-slate-950/70"],
[class*="bg-slate-950/60"],
[class*="bg-slate-900/90"],
[class*="bg-slate-900/80"],
[class*="bg-slate-900/60"],
[class*="bg-slate-800/80"],
[class*="bg-slate-800/60"] {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Borders */
[class*="border-slate-800"],
[class*="border-slate-700"] {
  border-color: #e2e8f0 !important;
}

/* 4. GRADIENT BANNERS IN LIGHT MODE */

/* Top synchronous live banner */
#globalLiveMeetingBanner {
  background: linear-gradient(135deg, #fff1f2 0%, #ffffff 45%, #f0fdfa 100%) !important;
  border: 2px solid #fecdd3 !important;
  box-shadow: 0 10px 30px -5px rgba(225, 29, 72, 0.08) !important;
}
#globalLiveMeetingBanner h3,
#globalLiveMeetingBanner p,
#globalLiveMeetingBanner span {
  color: #1e293b !important;
}
#globalLiveMeetingBanner .bg-rose-600,
#globalLiveMeetingBanner .bg-rose-600 * {
  color: #ffffff !important;
}

/* PWA Sync Banner */
[class*="from-teal-950"] {
  background: linear-gradient(135deg, #f0fdfa 0%, #ffffff 50%, #ecfeff 100%) !important;
  border: 1px solid #99f6e4 !important;
  box-shadow: 0 4px 20px -2px rgba(13, 148, 136, 0.08) !important;
}
[class*="from-teal-950"] h3,
[class*="from-teal-950"] p,
[class*="from-teal-950"] span {
  color: #0f172a !important;
}

/* Garib Murshudov seminar showcase */
#garibSeminarShowcase {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 50%, #ffffff 100%) !important;
  border: 1px solid #ccfbf1 !important;
}

/* Insignia / Emblem card */
[class*="from-slate-950"] {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f0fdfa 100%) !important;
  border: 1px solid #e2e8f0 !important;
}

/* 5. BADGES & PILLS IN LIGHT MODE */
[class*="bg-teal-950"] {
  background-color: #f0fdfa !important;
  border: 1px solid #99f6e4 !important;
  color: #0f766e !important;
}
[class*="bg-cyan-950"] {
  background-color: #ecfeff !important;
  border: 1px solid #a5f3fc !important;
  color: #0369a1 !important;
}
[class*="bg-emerald-950"] {
  background-color: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  color: #047857 !important;
}
[class*="bg-indigo-950"] {
  background-color: #eef2ff !important;
  border: 1px solid #c7d2fe !important;
  color: #4338ca !important;
}
[class*="bg-amber-950"] {
  background-color: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #b45309 !important;
}
[class*="bg-rose-950"] {
  background-color: #fff1f2 !important;
  border: 1px solid #fecdd3 !important;
  color: #be123c !important;
}
[class*="bg-purple-950"] {
  background-color: #faf5ff !important;
  border: 1px solid #e9d5ff !important;
  color: #7e22ce !important;
}

/* 6. NAVIGATION & HEADER */
.glass-nav {
  background: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.glass-nav .nav-link {
  color: #334155 !important;
  font-weight: 600 !important;
}

.glass-nav .nav-link:hover {
  color: #0f766e !important;
}

.glass-nav .nav-link.border-teal-400,
.glass-nav .nav-link.text-teal-400 {
  color: #0f766e !important;
  border-color: #0f766e !important;
}

.glass-nav span {
  color: #0f172a !important;
}

.glass-nav p {
  color: #0f766e !important;
}

/* Signature Header Portal Login Buttons */
#navMemberLoginBtn, #mobileMemberLoginBtn {
  background-color: #ffffff !important;
  border: 1.5px solid #0f766e !important;
  color: #0f766e !important;
}
#navMemberLoginBtn *, #mobileMemberLoginBtn * {
  color: #0f766e !important;
}
#navMemberLoginBtn:hover, #mobileMemberLoginBtn:hover {
  background-color: #f0fdfa !important;
}

#navTeacherLoginBtn, #mobileTeacherLoginBtn {
  background-color: #ffffff !important;
  border: 1.5px solid #4338ca !important;
  color: #4338ca !important;
}
#navTeacherLoginBtn *, #mobileTeacherLoginBtn * {
  color: #4338ca !important;
}
#navTeacherLoginBtn:hover, #mobileTeacherLoginBtn:hover {
  background-color: #eef2ff !important;
}

#navPresidentLoginBtn, #mobilePresidentLoginBtn {
  background-color: #ffffff !important;
  border: 1.5px solid #b45309 !important;
  color: #b45309 !important;
}
#navPresidentLoginBtn *, #mobilePresidentLoginBtn * {
  color: #b45309 !important;
}
#navPresidentLoginBtn:hover, #mobilePresidentLoginBtn:hover {
  background-color: #fffbeb !important;
}

#mobileMenu {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08) !important;
}

#mobileMenu button {
  color: #1e293b !important;
}

#mobileMenu button:hover {
  background-color: #f1f5f9 !important;
  color: #0f766e !important;
}

/* 7. INPUTS, SELECTS & FORMS */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  background-color: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-weight: 500 !important;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #0f766e !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
  outline: none !important;
}

label {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* 8. MODALS & DIALOGS */
[id$="Modal"] {
  background-color: rgba(15, 23, 42, 0.6) !important;
  backdrop-filter: blur(6px) !important;
}

[id$="Modal"] > div:not(.gradient-blob),
.modal-content-container,
.app-modal-dialog {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.22) !important;
  color: #0f172a !important;
}

[id$="Modal"] h1, [id$="Modal"] h2, [id$="Modal"] h3,
[id$="Modal"] h4, [id$="Modal"] h5, [id$="Modal"] p,
[id$="Modal"] span, [id$="Modal"] label {
  color: #1e293b !important;
}

/* 9. PROSE & DOCUMENT VIEWER */
.prose, .prose-invert,
.prose *, .prose-invert * {
  color: #1e293b !important;
}

.prose h1, .prose-invert h1,
.prose h2, .prose-invert h2,
.prose h3, .prose-invert h3,
.prose h4, .prose-invert h4,
.prose strong, .prose-invert strong {
  color: #0f172a !important;
}

/* 10. TABLES & CODE BLOCKS */
.responsive-table-wrapper {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

.responsive-table th {
  background: #f8fafc !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-weight: 700 !important;
}

.responsive-table td {
  border-bottom: 1px solid #f1f5f9 !important;
  color: #334155 !important;
}

.responsive-table tr:hover td {
  background: #f8fafc !important;
}

pre, code, .font-mono-seq {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* 11. FOOTER & DOCK */
footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #334155 !important;
}

footer p, footer li, footer a {
  color: #475569 !important;
}

footer strong, footer h5, footer span {
  color: #0f172a !important;
}

footer a:hover, footer li button:hover {
  color: #0f766e !important;
}

#mobileBottomNav {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-top: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
}

#mobileBottomNav .mobile-tab-btn {
  color: #475569 !important;
}

#mobileBottomNav .mobile-tab-btn:hover,
#mobileBottomNav .mobile-tab-btn.text-teal-400 {
  color: #0f766e !important;
}

/* 12. TOASTS & SCROLLBAR */
#toastContainer > div {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
}

::-webkit-scrollbar-track {
  background: #ffffff;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
  border: 2px solid #ffffff;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 13. CARBOXMOL 3D MACROMOLECULAR STUDIO ISOLATED SCOPE
   High-contrast, crystal-clear typography on dark crystallographic canvas */
#molStudioWrapper {
  background: #090d16 !important;
  border: 1.5px solid rgba(6, 182, 212, 0.45) !important;
  border-radius: 24px !important;
  box-shadow: 0 20px 50px -10px rgba(6, 182, 212, 0.25) !important;
  color: #f1f5f9 !important;
  overflow: hidden !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}

#molStudioWrapper * {
  box-sizing: border-box;
}

/* Header & Top Bar */
#molStudioWrapper .studio-header {
  background: rgba(12, 18, 33, 0.98) !important;
  border-bottom: 1px solid rgba(6, 182, 212, 0.25) !important;
  border-top-left-radius: 22px !important;
  border-top-right-radius: 22px !important;
}

#molStudioWrapper .brand-title {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-shadow: 0 0 12px rgba(6, 182, 212, 0.5) !important;
}

#molStudioWrapper .brand-subtitle,
#molStudioWrapper .brand-subtitle * {
  color: #38bdf8 !important;
}

#molStudioWrapper .brand-engine-pill {
  background: rgba(8, 47, 73, 0.95) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  font-weight: 700 !important;
}

/* Action Controls (Fırlat, Sıfırla, Tam Ekran) */
#molStudioWrapper .studio-ctrl-btn {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(56, 189, 248, 0.35) !important;
  color: #f8fafc !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
#molStudioWrapper .studio-ctrl-btn:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: #38bdf8 !important;
  color: #38bdf8 !important;
}
#molStudioWrapper .studio-ctrl-btn i,
#molStudioWrapper .studio-ctrl-btn span {
  color: inherit !important;
}
#molStudioWrapper .studio-ctrl-btn i.fa-play,
#molStudioWrapper .studio-ctrl-btn i.fa-pause,
#molStudioWrapper .studio-ctrl-btn i.fa-crosshairs {
  color: #38bdf8 !important;
}

/* Molecule Selector Tabs */
#molStudioWrapper .mol-tabs-row {
  background: rgba(3, 7, 18, 0.95) !important;
  border: 1px solid rgba(30, 41, 59, 0.8) !important;
}

#molStudioWrapper .mol-tab-btn {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(51, 65, 85, 0.8) !important;
  color: #cbd5e1 !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}
#molStudioWrapper .mol-tab-btn:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
}
#molStudioWrapper .mol-tab-btn.active,
#molStudioWrapper .mol-tab-btn[data-active="true"] {
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.85), rgba(13, 148, 136, 0.8)) !important;
  border: 1px solid #38bdf8 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.4), inset 0 0 8px rgba(56, 189, 248, 0.2) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

/* Canvas Viewport */
#molStudioWrapper .studio-canvas-area {
  background: #090d16 !important;
}
#molViewerContainer canvas {
  background: #090d16 !important;
}

/* Floating Crystallographic HUD Card (Top-Left) */
#molStudioWrapper .hud-card {
  background: rgba(12, 18, 33, 0.95) !important;
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
#molStudioWrapper .hud-card #molInfoTitle {
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
}
#molStudioWrapper .hud-card #molInfoBadge {
  background: rgba(8, 47, 73, 0.95) !important;
  border: 1px solid rgba(56, 189, 248, 0.55) !important;
  color: #38bdf8 !important;
  font-weight: 700 !important;
}
#molStudioWrapper .hud-card #molInfoSubtitle {
  color: #7dd3fc !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-weight: 600 !important;
}

/* Watermark Badge (Bottom-Right) */
#molStudioWrapper .signature-pill {
  background: rgba(10, 16, 30, 0.95) !important;
  border: 1px solid rgba(56, 189, 248, 0.45) !important;
  color: #38bdf8 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
}
#molStudioWrapper .signature-pill span {
  color: #38bdf8 !important;
  font-weight: 600 !important;
}

/* Drag Guide Hint (Bottom-Left) */
#molStudioWrapper .drag-hint {
  background: rgba(15, 23, 42, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
}
#molStudioWrapper .drag-hint i {
  color: #38bdf8 !important;
}

/* Bottom Molecular Style Bar & Info */
#molStudioWrapper .style-bar {
  background: rgba(12, 18, 33, 0.98) !important;
  border-top: 1px solid rgba(6, 182, 212, 0.25) !important;
  border-bottom-left-radius: 22px !important;
  border-bottom-right-radius: 22px !important;
}
#molStudioWrapper .style-label {
  color: #cbd5e1 !important;
  font-weight: 700 !important;
}
#molStudioWrapper .mol-style-btn {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(51, 65, 85, 0.9) !important;
  color: #e2e8f0 !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}
#molStudioWrapper .mol-style-btn:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}
#molStudioWrapper .mol-style-btn.active,
#molStudioWrapper .mol-style-btn[data-active="true"] {
  background: rgba(14, 116, 144, 0.75) !important;
  border: 1px solid #38bdf8 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
}

#molStudioWrapper #molInfoToggleBtn {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(56, 189, 248, 0.4) !important;
  color: #38bdf8 !important;
  font-weight: 700 !important;
}
#molStudioWrapper #molInfoToggleBtn:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  color: #ffffff !important;
}
#molStudioWrapper #molInfoToggleBtn * {
  color: inherit !important;
}

/* Expandable Drawer */
#molStudioWrapper #molInfoDrawer {
  background: #090d16 !important;
  border-top: 1px solid rgba(6, 182, 212, 0.25) !important;
  border-bottom-left-radius: 22px !important;
  border-bottom-right-radius: 22px !important;
}
#molStudioWrapper #molInfoDesc {
  color: #e2e8f0 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}
#molStudioWrapper .drawer-meta,
#molStudioWrapper .drawer-meta * {
  color: #38bdf8 !important;
}

/* 14. CARBOXMOL OFFICIAL PLATFORM & ACADEMIC REFERENCE CARD
   Scholarly publication citation block below 3D Studio */
#carboxmolRefCard {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #f0fdfa 100%) !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.07), 0 2px 6px -1px rgba(13, 148, 136, 0.05) !important;
}

#carboxmolRefCard:hover {
  border-color: #0d9488 !important;
  box-shadow: 0 10px 28px -6px rgba(13, 148, 136, 0.14) !important;
}

#carboxmolRefCard .ref-icon-box {
  background: #f0fdfa !important;
  border: 1px solid #99f6e4 !important;
  color: #0f766e !important;
}

#carboxmolRefCard .ref-icon-box i {
  color: #0f766e !important;
}

#carboxmolRefCard .ref-header-label {
  color: #0f172a !important;
  letter-spacing: 0.04em !important;
}

#carboxmolRefCard .carboxmol-url-pill {
  background: #090d16 !important;
  border: 1px solid #0284c7 !important;
  color: #38bdf8 !important;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2) !important;
  text-decoration: none !important;
}

#carboxmolRefCard .carboxmol-url-pill span,
#carboxmolRefCard .carboxmol-url-pill i {
  color: #38bdf8 !important;
}

#carboxmolRefCard .carboxmol-url-pill:hover {
  background: #0c192c !important;
  border-color: #38bdf8 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3) !important;
}

#carboxmolRefCard .carboxmol-url-pill:hover span,
#carboxmolRefCard .carboxmol-url-pill:hover i {
  color: #ffffff !important;
}

#carboxmolRefCard .ref-citation-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 3.5px solid #0f766e !important;
  color: #1e293b !important;
}

#carboxmolRefCard .ref-inline-link {
  color: #0f766e !important;
}

#carboxmolRefCard .ref-inline-link:hover {
  color: #0284c7 !important;
}

#carboxmolRefCard .carboxmol-copy-btn {
  background: #ffffff !important;
  border: 1px solid #99f6e4 !important;
  color: #0f766e !important;
  min-height: 26px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

#carboxmolRefCard .carboxmol-copy-btn span,
#carboxmolRefCard .carboxmol-copy-btn i {
  color: #0f766e !important;
}

#carboxmolRefCard .carboxmol-copy-btn:hover {
  background: #f0fdfa !important;
  border-color: #0d9488 !important;
}

/* Ambient Blobs in Light Theme */
.gradient-blob {
  opacity: 0.08 !important;
}

/* Gradient Heading Enhancement on White */
h1 .bg-clip-text,
h2 .bg-clip-text,
h3 .bg-clip-text {
  background-image: linear-gradient(to right, #0f766e, #059669, #0891b2) !important;
}