:root {
  --primary: #4f46e5;
  --primary-glow: rgba(79, 70, 229, 0.3);
  --bg: #fafafa;
  --card-bg: #ffffff;
  --text: #111827;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --navbar-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --btn-light-bg: #f3f4f6;
  --btn-light-text: #1f2937;
  --input-bg: #f9fafb;
  --table-hover: #f0f4ff;
  --badge-bg: #e0e7ff;
  --badge-text: #4f46e5;
}

[data-theme="dark"] {
  --bg: #0f0e17;
  --card-bg: #1a1a2e;
  --text: #e8e8f0;
  --text-muted: #9090b0;
  --border: #2a2a4a;
  --navbar-bg: #16213e;
  --sidebar-bg: #16213e;
  --btn-light-bg: #1e1e3a;
  --btn-light-text: #c8c8e8;
  --input-bg: #1a1a2e;
  --table-hover: #1e1e3a;
  --badge-bg: #2d2b55;
  --badge-text: #a78bfa;
  --primary-glow: rgba(167, 139, 250, 0.3);
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
  font-family: 'Inter', sans-serif;
}

/* ── Bootstrap overrides for dark mode ── */
.bg-white  { background-color: var(--navbar-bg) !important; }
.bg-light  { background-color: var(--btn-light-bg) !important; color: var(--btn-light-text) !important; }
.card      { background-color: var(--card-bg) !important; border-color: var(--border) !important; color: var(--text) !important; }
.border-bottom, .border-end, .border-start, .border-top { border-color: var(--border) !important; }
.text-muted  { color: var(--text-muted) !important; }
.text-dark   { color: var(--text) !important; }
.text-black  { color: var(--text) !important; }

/* Buttons */
.btn-light, [class*="btn-outline-secondary"] {
  background-color: var(--btn-light-bg) !important;
  color: var(--btn-light-text) !important;
  border-color: var(--border) !important;
}

/* Table */
.table { color: var(--text) !important; }
.table thead { background-color: var(--btn-light-bg) !important; }
.table-hover tbody tr:hover { background-color: var(--table-hover) !important; }
thead th { color: var(--text-muted) !important; }

/* Form controls */
.form-control, .form-select {
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.form-check-input { background-color: var(--input-bg) !important; border-color: var(--border) !important; }

/* Dropdowns */
.dropdown-menu {
  background-color: var(--card-bg) !important;
  border-color: var(--border) !important;
}
.dropdown-item { color: var(--text) !important; }
.dropdown-item:hover { background-color: var(--btn-light-bg) !important; }

/* Alerts */
.alert-info    { background-color: #1e293b !important; color: #38bdf8 !important; border-color: #0ea5e9 !important; }
.alert-primary { background-color: #1e1b4b !important; color: #a5b4fc !important; border-color: #4f46e5 !important; }

/* Progress bar track */
.progress { background-color: var(--border) !important; }

/* Sidebar admin panel buttons (dark mode) */
[data-theme="dark"] .btn.bg-light,
[data-theme="dark"] .btn.bg-light:hover {
  background-color: var(--btn-light-bg) !important;
  color: var(--btn-light-text) !important;
  border: 1px solid var(--border) !important;
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a6a; border-radius: 4px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #5a5a9a; }

/* Navbar links */
[data-theme="dark"] .btn-link.text-dark { color: var(--text) !important; }
[data-theme="dark"] .btn-link.text-dark:hover { color: #a78bfa !important; }

/* ✅ Editor Styles */
.editor-toolbar {
  background: var(--navbar-bg);
  border-bottom: 1px solid var(--border);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  overflow-x: auto;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 8px;
  transition: 0.2s;
  min-width: 60px;
}

.tool-item:hover {
  background-color: var(--bg);
}

.tool-item i {
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.tool-item span {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-muted);
}

.editor-container {
  display: flex;
  height: calc(100vh - 140px);
  background-color: #f9fafb;
}

.editor-sidebar {
  width: 200px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px 10px;
}

.editor-canvas {
  flex-grow: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  padding: 40px;
}

.pdf-page-container {
  background: white;
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
  width: 100%;
  max-width: 800px;
  margin: auto;
  position: relative;
}

/* ✅ Cards ka hover effect */
.tool-card {
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #eee !important;
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
}

/* ✅ Animation jab page load ho */
.fade-in {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ✅ Advanced Theme Transition Animations */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  z-index: 9999;
  animation: reveal 1s cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root) {
  z-index: 1;
}

@keyframes reveal {
  from {
    clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
  }
  to {
    clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
  }
}

/* Sunlight Ray Effect for Light Mode */
.sun-rays {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10000;
  background: radial-gradient(circle at var(--x) var(--y), rgba(255,255,255,0.4) 0%, transparent 70%);
  animation: rays-fade 1s ease-out forwards;
}

/* Shadow Wave for Dark Mode */
.shadow-wave {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10000;
  background: radial-gradient(circle at var(--x) var(--y), rgba(0,0,0,0.5) 0%, transparent 70%);
  animation: rays-fade 1s ease-out forwards;
}

@keyframes rays-fade {
  0% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(2); }
}