/* Scriptorium Style Sheet */

/* Custom Typography Import */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', sans-serif;
}

body {
  font-family: var(--font-sans);
  background-color: #020617; /* slate-950 */
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #020617; /* slate-950 */
}

::-webkit-scrollbar-thumb {
  background: #1e293b; /* slate-800 */
  border-radius: 9999px;
  border: 2px solid #020617;
}

::-webkit-scrollbar-thumb:hover {
  background: #b45309; /* amber-700 */
}

/* Scrollbar inside container panels */
.panel-scrollbar::-webkit-scrollbar-thumb {
  background: #334155; /* slate-700 */
}
.panel-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #4f46e5; /* indigo-600 */
}

/* Glassmorphism Panel styles */
.glass-panel {
  background: rgba(15, 23, 42, 0.55); /* slate-900 / 55% */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(51, 65, 85, 0.5); /* slate-700 / 50% */
}

.glass-panel-light {
  background: rgba(15, 23, 42, 0.3); /* slate-900 / 30% */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(51, 65, 85, 0.3); /* slate-700 / 30% */
}

/* Premium Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-in-up {
  animation: slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Gradient glows */
.glow-amber {
  box-shadow: 0 0 25px -5px rgba(245, 158, 11, 0.2);
}

.glow-indigo {
  box-shadow: 0 0 25px -5px rgba(99, 102, 241, 0.2);
}

/* Dialog Overlay Styles */
dialog {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}

dialog[open] {
  opacity: 1;
  transform: scale(1);
}

dialog::backdrop {
  background-color: rgba(2, 6, 23, 0.85); /* slate-950 with opacity */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

dialog[open]::backdrop {
  opacity: 1;
}

/* Custom Grid cells hover effect */
.grid-day-cell {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.grid-day-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(2, 6, 23, 0.5);
}

/* Smooth Theme Transition */
body, header, nav, main, section, button, div, span, h1, h2, h3, h4, h5, h6, p, a, input, dialog {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* --- LIGHT MODE SPECIFIC OVERRIDES --- */
body.light {
  background-color: #f5efe2 !important; /* soft, warm cream/parchment background */
  color: #2b251e !important; /* dark slate-sepia */
}

/* General Utility Overrides for Light Mode */
body.light .bg-slate-900,
body.light [class*="bg-slate-900"] {
  background-color: #fcfbfa !important; /* soft warm alabaster white for cards */
}
body.light [class*="bg-slate-900/35"],
body.light [class*="bg-slate-900/40"],
body.light [class*="bg-slate-900/55"],
body.light [class*="bg-slate-900/60"] {
  background-color: rgba(252, 251, 250, 0.75) !important;
}
body.light .bg-slate-950,
body.light [class*="bg-slate-950"] {
  background-color: #eae3d2 !important; /* muted beige background for inputs/pre */
}
body.light .border-slate-800,
body.light [class*="border-slate-800"],
body.light .border-slate-700,
body.light [class*="border-slate-700"] {
  border-color: #e3dbc9 !important; /* soft warm border */
}
body.light .text-slate-50,
body.light .text-slate-100 {
  color: #2b251e !important; /* dark slate-sepia */
}
body.light .text-slate-200 {
  color: #3b3329 !important; /* deep sepia */
}
body.light .text-slate-300 {
  color: #4c4235 !important; /* medium sepia */
}
body.light .text-slate-400 {
  color: #6d5e4b !important; /* muted sepia */
}
body.light .text-slate-500 {
  color: #8c7b64 !important; /* light warm gray */
}
body.light .text-indigo-100 {
  color: #312e81 !important; /* indigo-900 */
}
body.light .text-amber-100,
body.light [class*="text-amber-100"],
body.light [class*="text-amber-400"],
body.light [class*="text-amber-500"],
body.light [class*="text-yellow-400"],
body.light [class*="text-yellow-500"] {
  color: #b45309 !important; /* amber-700 (dark gold/orange) */
}

/* Scrollbar overrides in light mode */
body.light::-webkit-scrollbar-track {
  background: #f5efe2 !important;
}
body.light::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-color: #f5efe2 !important;
}
body.light::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* Header elements in light mode */
body.light header {
  background-color: rgba(252, 251, 250, 0.95) !important;
  border-color: rgba(227, 219, 201, 0.9) !important;
}

body.light header h1 {
  background-image: linear-gradient(to right, #d97706, #4f46e5) !important;
}

body.light header p {
  color: #6d5e4b !important;
}

body.light button[onclick="openProfileModal()"] {
  background-color: #fcfbfa !important;
  border-color: #e3dbc9 !important;
}
body.light button[onclick="openProfileModal()"]:hover {
  border-color: #cbd5e1 !important;
  background-color: #f5efe2 !important;
}
body.light #header-name {
  color: #2b251e !important;
}

body.light [class*="from-amber-500/10"] {
  background-image: linear-gradient(to right, rgba(217, 119, 6, 0.08), rgba(234, 88, 12, 0.08)) !important;
  border-color: rgba(217, 119, 6, 0.2) !important;
}

/* Navigation sidebar in light mode */
body.light nav {
  background-color: rgba(252, 251, 250, 0.85) !important;
  border-color: rgba(227, 219, 201, 0.9) !important;
  box-shadow: 0 4px 15px rgba(140, 123, 100, 0.05) !important;
}

body.light nav button[data-tab] {
  color: #6d5e4b !important;
}
body.light nav button[data-tab]:hover {
  color: #2b251e !important;
  background-color: rgba(234, 229, 216, 0.6) !important;
}

body.light nav button[class*="bg-indigo-"] {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4338ca !important;
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.25) !important;
}

/* Modules sidebar container */
body.light #modules-sidebar-container {
  background-color: rgba(252, 251, 250, 0.65) !important;
  border-color: rgba(227, 219, 201, 0.9) !important;
}

/* Modules sidebar card list */
body.light #modules-sidebar-wrapper > div {
  background-color: rgba(252, 251, 250, 0.55) !important;
  border-color: #e3dbc9 !important;
}
body.light #modules-sidebar-wrapper > div:hover {
  background-color: rgba(252, 251, 250, 0.9) !important;
}
body.light #modules-sidebar-wrapper div {
  color: #2b251e !important; /* slate-850 sepia */
}

/* Global progress bar */
body.light .bg-slate-800 {
  background-color: #e2e8f0 !important;
}

/* Central Workspace: Today's Study Banner Card */
body.light section[data-view="study"] .bg-gradient-to-r.from-slate-900 {
  background-image: linear-gradient(to right, #ffffff, rgba(238, 242, 255, 0.55), #ffffff) !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 10px 30px rgba(148, 163, 184, 0.05) !important;
}

body.light #study-day-count {
  color: #64748b !important;
}
body.light #study-title {
  color: #0f172a !important;
}
body.light #picker-current-day-label {
  color: #334155 !important;
}
body.light #btn-prev-day, body.light #btn-next-day {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}
body.light #btn-prev-day:hover, body.light #btn-next-day:hover {
  background-color: #f1f5f9 !important;
}

/* OT & NT Cards */
body.light section[data-view="study"] .grid-cols-1 > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(148, 163, 184, 0.02) !important;
}
body.light section[data-view="study"] .grid-cols-1 > div:hover {
  border-color: #cbd5e1 !important;
}

body.light section[data-view="study"] .grid-cols-1 > div[class*="bg-slate-900/60"] {
  background-color: rgba(238, 242, 255, 0.4) !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
}

body.light #study-ot-passage, body.light #study-nt-passage {
  color: #1e293b !important;
}

body.light #btn-checkbox-ot, body.light #btn-checkbox-nt {
  border-color: #cbd5e1 !important;
  color: #64748b !important;
}
body.light #btn-checkbox-ot:hover, body.light #btn-checkbox-nt:hover {
  border-color: #94a3b8 !important;
}
body.light #btn-checkbox-ot.bg-indigo-600, body.light #btn-checkbox-nt.bg-indigo-600 {
  background-color: #4f46e5 !important;
  border-color: #4338ca !important;
  color: #ffffff !important;
}

body.light section[data-view="study"] .bg-slate-900\/30 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(148, 163, 184, 0.02) !important;
}
body.light #study-historical-brief {
  color: #334155 !important;
}

body.light #btn-ai-summary {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #1e293b !important;
}
body.light #btn-ai-summary:hover {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

/* AI Terminal styling */
body.light #ai-terminal-wrapper > div {
  background-color: #ffffff !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
  box-shadow: 0 15px 35px rgba(148, 163, 184, 0.1) !important;
}

body.light #ai-terminal-wrapper h4 {
  color: #1e293b !important;
  border-bottom-color: #f1f5f9 !important;
}
body.light #ai-terminal-wrapper p {
  color: #334155 !important;
}

/* 90-Day Path Grid in Light Mode */
body.light section[data-view="path"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(148, 163, 184, 0.05) !important;
}
body.light section[data-view="path"] h2 {
  color: #0f172a !important;
}
body.light section[data-view="path"] .grid-day-cell {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #64748b !important;
}
body.light section[data-view="path"] .grid-day-cell:hover {
  border-color: #cbd5e1 !important;
  background-color: #f1f5f9 !important;
  color: #334155 !important;
}
body.light section[data-view="path"] .grid-day-cell.bg-indigo-950\/40 {
  background-color: rgba(238, 242, 255, 0.7) !important;
  border-color: rgba(99, 102, 241, 0.25) !important;
  color: #4f46e5 !important;
}
body.light section[data-view="path"] .grid-day-cell.bg-slate-900 {
  background-color: #ffffff !important;
  border-color: #d97706 !important;
  color: #d97706 !important;
}

/* Social leaderboard */
body.light section[data-view="social"] {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(148, 163, 184, 0.05) !important;
}
body.light section[data-view="social"] h2 {
  color: #0f172a !important;
}
body.light #social-leaderboard-list > div {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}
body.light #social-leaderboard-list > div:hover {
  border-color: #cbd5e1 !important;
}
body.light #social-leaderboard-list > div.bg-gradient-to-r {
  background-image: linear-gradient(to right, rgba(238, 242, 255, 0.4), #ffffff) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
}

body.light #social-leaderboard-list .text-slate-200 {
  color: #0f172a !important;
}
body.light #social-leaderboard-list .bg-slate-950\/80 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

/* Settings tab overrides */
body.light section[data-view="settings"] > div {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 10px 30px rgba(148, 163, 184, 0.05) !important;
}
body.light section[data-view="settings"] h3 {
  color: #0f172a !important;
  border-bottom-color: #f1f5f9 !important;
}
body.light #settings-profile-emoji {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}
body.light #settings-profile-name {
  color: #1e293b !important;
}
body.light section[data-view="settings"] button.bg-slate-800 {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
body.light section[data-view="settings"] button.bg-slate-800:hover {
  background-color: #e2e8f0 !important;
}

body.light #input-gemini-key {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
body.light #input-gemini-key:focus {
  border-color: #4f46e5 !important;
  background-color: #ffffff !important;
}

body.light section[data-view="settings"] pre {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #475569 !important;
}

/* Dialog override settings in light mode */
body.light dialog {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02) !important;
}
body.light dialog h3 {
  color: #0f172a !important;
  border-bottom-color: #f1f5f9 !important;
}
body.light dialog label {
  color: #475569 !important;
}
body.light dialog input {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
body.light dialog input:focus {
  border-color: #4f46e5 !important;
  background-color: #ffffff !important;
}

body.light dialog .emoji-select-btn {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
body.light dialog .emoji-select-btn:hover {
  background-color: #f1f5f9 !important;
}
body.light dialog .emoji-select-btn.border-amber-500\/60 {
  border-color: #f59e0b !important;
  background-color: rgba(245, 158, 11, 0.1) !important;
}

body.light dialog button.bg-slate-800 {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
}
body.light dialog button.bg-slate-800:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

body.light dialog::backdrop {
  background-color: rgba(15, 23, 42, 0.4) !important;
}