/* =============================================================================
   Vective Academy -- Dual Theme for Frappe LMS
   Brand: Vective AI
   Primary: #0891B2 (cyan-600)  Accent: #22D3EE (cyan-400)
   Secondary: #059669 (emerald-600)
   Fonts: Space Grotesk (headings), Inter (body), JetBrains Mono (code)
   ============================================================================= */


/* ---------------------------------------------------------------------------
   1. ROOT FALLBACK VARIABLES
   Base values that apply when no data-theme attribute is set.
   These match the light theme defaults.
   --------------------------------------------------------------------------- */

:root {
  /* Brand */
  --primary: #0891B2 !important;
  --primary-color: #0891B2 !important;
  --brand-color: #0891B2 !important;
  --btn-primary: #0891B2 !important;

  /* Typography */
  --font-stack: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --font-family-monospace: "JetBrains Mono", "Fira Code", "Cascadia Code", monospace !important;

  /* Shadows */
  --shadow-xs: rgba(0,0,0,.06) 0px .5px 0px 0px, rgba(0,0,0,.08) 0px 0px 0px 1px, rgba(0,0,0,.06) 0px 2px 4px 0px !important;
  --shadow-sm: 0px 1px 2px rgba(0,0,0,.06) !important;
  --shadow-base: 0px 0px 1px rgba(0,0,0,.12), 0px 1px 2px rgba(0,0,0,.08) !important;
  --shadow-md: 0px 0px 1px rgba(0,0,0,.12), 0px .5px 2px rgba(0,0,0,.08), 0px 2px 3px rgba(0,0,0,.06) !important;
  --shadow-lg: 0px 0px 1px rgba(0,0,0,.12), 0px 6px 8px -4px rgba(0,0,0,.12) !important;
}


/* ---------------------------------------------------------------------------
   2. LIGHT THEME -- Vective Branded
   Clean white/gray surfaces with cyan brand accents.
   --------------------------------------------------------------------------- */

[data-theme="light"] {
  /* -- Outlines -- */
  --outline-white: #FFFFFF !important;
  --outline-gray-1: #E2E8F0 !important;
  --outline-gray-2: #CBD5E1 !important;
  --outline-gray-3: #94A3B8 !important;
  --outline-gray-4: #64748B !important;
  --outline-gray-5: #334155 !important;
  --outline-gray-modals: #E2E8F0 !important;
  --outline-red-1: #FECACA !important;
  --outline-red-2: #FCA5A5 !important;
  --outline-red-3: #EF4444 !important;
  --outline-green-1: #A7F3D0 !important;
  --outline-green-2: #6EE7B7 !important;
  --outline-amber-1: #FDE68A !important;
  --outline-amber-2: #FCD34D !important;
  --outline-blue-1: #93C5FD !important;
  --outline-orange-1: #FDBA74 !important;
  --outline-white: #FFFFFF !important;

  /* -- Surfaces -- */
  --surface-white: #FFFFFF !important;
  --surface-gray-1: #F8FAFC !important;
  --surface-gray-2: #F1F5F9 !important;
  --surface-gray-3: #E2E8F0 !important;
  --surface-gray-4: #CBD5E1 !important;
  --surface-gray-5: #475569 !important;
  --surface-gray-6: #334155 !important;
  --surface-gray-7: #1E293B !important;
  --surface-menu-bar: #F8FAFC !important;
  --surface-cards: #FFFFFF !important;
  --surface-modal: #FFFFFF !important;
  --surface-selected: #F0FDFA !important;

  /* Semantic surfaces */
  --surface-red-1: #FFF1F2 !important;
  --surface-red-2: #FFE4E6 !important;
  --surface-red-3: #FECDD3 !important;
  --surface-red-4: #FECACA !important;
  --surface-red-5: #DC2626 !important;
  --surface-red-6: #B91C1C !important;
  --surface-red-7: #991B1B !important;
  --surface-green-1: #F0FDF4 !important;
  --surface-green-2: #DCFCE7 !important;
  --surface-green-3: #16A34A !important;
  --surface-amber-1: #FFFBEB !important;
  --surface-amber-2: #FEF3C7 !important;
  --surface-amber-3: #D97706 !important;
  --surface-blue-1: #EFF6FF !important;
  --surface-blue-2: #DBEAFE !important;
  --surface-blue-3: #0891B2 !important;
  --surface-orange-1: #FFF7ED !important;
  --surface-violet-1: #F5F3FF !important;
  --surface-cyan-1: #ECFEFF !important;
  --surface-pink-1: #FDF2F8 !important;

  /* -- Ink (text) -- */
  --ink-white: #FFFFFF !important;
  --ink-gray-1: #F1F5F9 !important;
  --ink-gray-2: #E2E8F0 !important;
  --ink-gray-3: #CBD5E1 !important;
  --ink-gray-4: #94A3B8 !important;
  --ink-gray-5: #64748B !important;
  --ink-gray-6: #475569 !important;
  --ink-gray-7: #475569 !important;
  --ink-gray-8: #334155 !important;
  --ink-gray-9: #0F172A !important;
  --ink-blue-link: #0891B2 !important;

  /* Semantic ink */
  --ink-red-1: #FFF1F2 !important;
  --ink-red-2: #FCA5A5 !important;
  --ink-red-3: #EF4444 !important;
  --ink-red-4: #DC2626 !important;
  --ink-green-1: #F0FDF4 !important;
  --ink-green-2: #16A34A !important;
  --ink-green-3: #15803D !important;
  --ink-amber-1: #FFFBEB !important;
  --ink-amber-2: #D97706 !important;
  --ink-amber-3: #B45309 !important;
  --ink-blue-1: #EFF6FF !important;
  --ink-blue-2: #0891B2 !important;
  --ink-blue-3: #0E7490 !important;
  --ink-cyan-1: #0891B2 !important;
  --ink-pink-1: #DB2777 !important;
  --ink-violet-1: #7C3AED !important;
}


/* ---------------------------------------------------------------------------
   3. DARK THEME -- Vective Navy/Slate
   Deep navy surfaces with cyan brand accents.
   --------------------------------------------------------------------------- */

[data-theme="dark"] {
  /* -- Outlines -- */
  --outline-white: #1E293B !important;
  --outline-gray-1: #1E293B !important;
  --outline-gray-2: #334155 !important;
  --outline-gray-3: #475569 !important;
  --outline-gray-4: #64748B !important;
  --outline-gray-5: #E2E8F0 !important;
  --outline-gray-modals: #334155 !important;
  --outline-red-1: #7F1D1D !important;
  --outline-red-2: #991B1B !important;
  --outline-red-3: #B91C1C !important;
  --outline-green-1: #14532D !important;
  --outline-green-2: #166534 !important;
  --outline-amber-1: #78350F !important;
  --outline-amber-2: #92400E !important;
  --outline-blue-1: #1E3A5F !important;
  --outline-orange-1: #9A3412 !important;

  /* -- Surfaces -- */
  --surface-white: #0F172A !important;
  --surface-gray-1: #1E293B !important;
  --surface-gray-2: #1E293B !important;
  --surface-gray-3: #334155 !important;
  --surface-gray-4: #475569 !important;
  --surface-gray-5: #94A3B8 !important;
  --surface-gray-6: #CBD5E1 !important;
  --surface-gray-7: #F8FAFC !important;
  --surface-menu-bar: #0F172A !important;
  --surface-cards: #1E293B !important;
  --surface-modal: #1E293B !important;
  --surface-selected: #334155 !important;

  /* Semantic surfaces */
  --surface-red-1: #450A0A !important;
  --surface-red-2: #450A0AE6 !important;
  --surface-red-3: #7F1D1DE6 !important;
  --surface-red-4: #991B1B !important;
  --surface-red-5: #EF4444 !important;
  --surface-red-6: #DC2626 !important;
  --surface-red-7: #B91C1C !important;
  --surface-green-1: #052E16 !important;
  --surface-green-2: #14532D !important;
  --surface-green-3: #16A34A !important;
  --surface-amber-1: #451A03 !important;
  --surface-amber-2: #78350F !important;
  --surface-amber-3: #D97706 !important;
  --surface-blue-1: #0C1929 !important;
  --surface-blue-2: #1E3A5F !important;
  --surface-blue-3: #0891B2 !important;
  --surface-orange-1: #431407CC !important;
  --surface-violet-1: #2E1065 !important;
  --surface-cyan-1: #083344 !important;
  --surface-pink-1: #500724CC !important;

  /* -- Ink (text) -- */
  --ink-white: #0F172A !important;
  --ink-gray-1: #1E293B !important;
  --ink-gray-2: #475569 !important;
  --ink-gray-3: #64748B !important;
  --ink-gray-4: #64748B !important;
  --ink-gray-5: #94A3B8 !important;
  --ink-gray-6: #94A3B8 !important;
  --ink-gray-7: #CBD5E1 !important;
  --ink-gray-8: #E2E8F0 !important;
  --ink-gray-9: #F8FAFC !important;
  --ink-blue-link: #22D3EE !important;

  /* Semantic ink */
  --ink-red-1: #FFFFFF !important;
  --ink-red-2: #991B1B !important;
  --ink-red-3: #EF4444 !important;
  --ink-red-4: #FCA5A5 !important;
  --ink-green-1: #FFFFFF !important;
  --ink-green-2: #16A34A !important;
  --ink-green-3: #4ADE80 !important;
  --ink-amber-1: #FFFFFF !important;
  --ink-amber-2: #D97706 !important;
  --ink-amber-3: #FBBF24 !important;
  --ink-blue-1: #FFFFFF !important;
  --ink-blue-2: #0891B2 !important;
  --ink-blue-3: #22D3EE !important;
  --ink-cyan-1: #22D3EE !important;
  --ink-pink-1: #F472B6 !important;
  --ink-violet-1: #A78BFA !important;
}

/* Dark theme body */
[data-theme="dark"] body,
[data-theme="dark"] {
  background-color: #0F172A !important;
  color: #E2E8F0 !important;
}


/* ---------------------------------------------------------------------------
   4. TYPOGRAPHY -- Both Themes
   --------------------------------------------------------------------------- */

body {
  font-family: "Inter", "InterVariable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.page-card-head h4,
.course-card-title,
.section-title {
  font-family: "Space Grotesk", sans-serif !important;
}

code, pre, .monospace, kbd, samp,
[data-fieldtype="Code"] textarea {
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
}


/* ---------------------------------------------------------------------------
   5. SIDEBAR BRANDING
   Override sidebar header to show "Vective Academy" with branded icon.
   The sidebar uses frappe-ui's Sidebar component. The header area contains
   an icon + "Learning" text. We hide the original and inject our branding.
   --------------------------------------------------------------------------- */

/* Target the sidebar header/logo area -- frappe-ui uses a flex container */
.sidebar-header,
[class*="sidebar"] > div:first-child > div:first-child,
.layout-side-section > div:first-child {
  position: relative !important;
}

/* Hide original sidebar icon SVG (the green "L" icon) */
.sidebar-header svg,
[class*="sidebar"] > div:first-child > div:first-child svg.w-7,
[class*="sidebar"] > div:first-child > div:first-child svg[width="28"] {
  display: none !important;
}

/* Override the sidebar brand text */
.sidebar-header .sidebar-brand-text,
[class*="sidebar"] > div:first-child > div:first-child span:first-of-type,
[class*="sidebar"] > div:first-child > div:first-child > a > span {
  font-size: 0 !important;
  line-height: 0 !important;
}

.sidebar-header .sidebar-brand-text::after,
[class*="sidebar"] > div:first-child > div:first-child span:first-of-type::after,
[class*="sidebar"] > div:first-child > div:first-child > a > span::after {
  content: "Vective Academy" !important;
  font-size: 1.125rem !important;
  line-height: 1.4 !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  display: inline !important;
}

/* Inject a Vective icon before the sidebar brand area */
.sidebar-header::before,
[class*="sidebar"] > div:first-child > div:first-child > a::before {
  content: "" !important;
  display: inline-flex !important;
  width: 28px !important;
  height: 28px !important;
  background: linear-gradient(135deg, #0891B2, #22D3EE) !important;
  border-radius: 7px !important;
  margin-right: 10px !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(8, 145, 178, 0.25) !important;
}

/* Vective logo SVG as background on the icon -- simplified V mark */
.sidebar-header::before,
[class*="sidebar"] > div:first-child > div:first-child > a::before {
  background: linear-gradient(135deg, #0891B2, #22D3EE) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M 6 7 L 14 21 L 22 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: cover !important;
  background-color: transparent !important;
}


/* ---------------------------------------------------------------------------
   6. LIGHT THEME -- Component Overrides
   Styles that need direct selectors beyond CSS custom properties.
   --------------------------------------------------------------------------- */

/* Cards in light mode */
[data-theme="light"] .card,
[data-theme="light"] .course-card,
[data-theme="light"] .frappe-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

[data-theme="light"] .card:hover,
[data-theme="light"] .course-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(8, 145, 178, 0.3) !important;
}

/* Navbar light */
[data-theme="light"] .navbar,
[data-theme="light"] .navbar-expand-lg,
[data-theme="light"] header .navbar {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #E2E8F0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .navbar .nav-link,
[data-theme="light"] .navbar .navbar-nav .nav-link {
  color: #475569 !important;
}

[data-theme="light"] .navbar .nav-link:hover {
  color: #0891B2 !important;
}

/* Sidebar light */
[data-theme="light"] .web-sidebar,
[data-theme="light"] .sidebar,
[data-theme="light"] .course-sidebar {
  background-color: #F8FAFC !important;
  border-right: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .web-sidebar .sidebar-item,
[data-theme="light"] .sidebar .sidebar-menu a,
[data-theme="light"] .course-sidebar a {
  color: #475569 !important;
}

[data-theme="light"] .web-sidebar .sidebar-item:hover,
[data-theme="light"] .sidebar .sidebar-menu a:hover {
  color: #0891B2 !important;
  background-color: rgba(8, 145, 178, 0.06) !important;
}

[data-theme="light"] .web-sidebar .sidebar-item.active,
[data-theme="light"] .sidebar .sidebar-menu a.active {
  color: #0891B2 !important;
  background-color: rgba(8, 145, 178, 0.1) !important;
  font-weight: 600 !important;
}

/* Forms light */
[data-theme="light"] .form-control {
  background-color: #FFFFFF !important;
  border: 1.5px solid #CBD5E1 !important;
  color: #0F172A !important;
}

[data-theme="light"] .form-control:focus {
  border-color: #0891B2 !important;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.15) !important;
}

[data-theme="light"] .form-control::placeholder {
  color: #94A3B8 !important;
}

/* Links light */
[data-theme="light"] a {
  color: #0891B2 !important;
}

[data-theme="light"] a:hover {
  color: #0E7490 !important;
}

/* Tables light */
[data-theme="light"] .table thead th {
  background-color: #F8FAFC !important;
  color: #64748B !important;
  border-bottom-color: #E2E8F0 !important;
}

[data-theme="light"] .table td,
[data-theme="light"] .table th {
  border-color: #F1F5F9 !important;
}

/* Modals light */
[data-theme="light"] .modal-content {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .dropdown-menu {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

[data-theme="light"] .dropdown-item {
  color: #475569 !important;
}

[data-theme="light"] .dropdown-item:hover {
  background-color: #F0FDFA !important;
  color: #0891B2 !important;
}

/* Code blocks light */
[data-theme="light"] pre {
  background-color: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
}

[data-theme="light"] code {
  background-color: rgba(8, 145, 178, 0.08) !important;
  color: #0E7490 !important;
}

/* Alerts light */
[data-theme="light"] .alert-info {
  background-color: rgba(8, 145, 178, 0.08) !important;
  border-color: rgba(8, 145, 178, 0.2) !important;
  color: #0E7490 !important;
}

/* Scrollbar light */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: #F8FAFC;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #CBD5E1;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}


/* ---------------------------------------------------------------------------
   7. DARK THEME -- Component Overrides
   Deep navy/slate surfaces with cyan accents.
   --------------------------------------------------------------------------- */

/* Cards dark */
[data-theme="dark"] .card,
[data-theme="dark"] .course-card,
[data-theme="dark"] .frappe-card,
[data-theme="dark"] .login-content.page-card {
  background-color: #1E293B !important;
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

[data-theme="dark"] .card:hover,
[data-theme="dark"] .course-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(8, 145, 178, 0.4) !important;
}

/* Navbar dark */
[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar-expand-lg,
[data-theme="dark"] header .navbar {
  background-color: #0F172A !important;
  border-bottom: 1px solid #1E293B !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .navbar .nav-link {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .navbar .nav-link:hover {
  color: #22D3EE !important;
}

/* Sidebar dark */
[data-theme="dark"] .web-sidebar,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .course-sidebar {
  background-color: #1E293B !important;
  border-right: 1px solid #334155 !important;
}

[data-theme="dark"] .web-sidebar .sidebar-item,
[data-theme="dark"] .sidebar .sidebar-menu a {
  color: #CBD5E1 !important;
}

[data-theme="dark"] .web-sidebar .sidebar-item:hover,
[data-theme="dark"] .sidebar .sidebar-menu a:hover {
  color: #22D3EE !important;
  background-color: rgba(8, 145, 178, 0.1) !important;
}

[data-theme="dark"] .web-sidebar .sidebar-item.active,
[data-theme="dark"] .sidebar .sidebar-menu a.active {
  color: #0891B2 !important;
  background-color: rgba(8, 145, 178, 0.15) !important;
  font-weight: 600 !important;
}

/* Forms dark */
[data-theme="dark"] .form-control {
  background-color: #0F172A !important;
  border: 1.5px solid #334155 !important;
  color: #E2E8F0 !important;
}

[data-theme="dark"] .form-control:focus {
  border-color: #0891B2 !important;
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.2) !important;
  background-color: #0F172A !important;
}

[data-theme="dark"] .form-control::placeholder {
  color: #64748B !important;
}

/* Links dark */
[data-theme="dark"] a {
  color: #22D3EE !important;
}

[data-theme="dark"] a:hover {
  color: #67E8F9 !important;
}

/* Tables dark */
[data-theme="dark"] .table {
  color: #E2E8F0 !important;
}

[data-theme="dark"] .table thead th {
  background-color: #1E293B !important;
  color: #94A3B8 !important;
  border-bottom-color: #334155 !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
  border-color: #1E293B !important;
}

/* Modals dark */
[data-theme="dark"] .modal-content {
  background-color: #1E293B !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] .modal-header { border-bottom-color: #334155 !important; }
[data-theme="dark"] .modal-footer { border-top-color: #334155 !important; }

[data-theme="dark"] .dropdown-menu {
  background-color: #1E293B !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .dropdown-item { color: #CBD5E1 !important; }

[data-theme="dark"] .dropdown-item:hover {
  background-color: #334155 !important;
  color: #22D3EE !important;
}

/* Code blocks dark */
[data-theme="dark"] pre {
  background-color: #0F172A !important;
  border: 1px solid #334155 !important;
  color: #E2E8F0 !important;
}

[data-theme="dark"] code {
  background-color: rgba(8, 145, 178, 0.1) !important;
  color: #22D3EE !important;
}

/* Alerts dark */
[data-theme="dark"] .alert-info {
  background-color: rgba(8, 145, 178, 0.15) !important;
  border-color: rgba(8, 145, 178, 0.3) !important;
  color: #22D3EE !important;
}

[data-theme="dark"] .alert-success {
  background-color: rgba(5, 150, 105, 0.15) !important;
  border-color: rgba(5, 150, 105, 0.3) !important;
  color: #34D399 !important;
}

[data-theme="dark"] .alert-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  border-color: rgba(245, 158, 11, 0.3) !important;
  color: #FBBF24 !important;
}

[data-theme="dark"] .alert-danger {
  background-color: rgba(224, 54, 54, 0.15) !important;
  border-color: rgba(224, 54, 54, 0.3) !important;
  color: #F87171 !important;
}

/* Footer dark */
[data-theme="dark"] .web-footer,
[data-theme="dark"] footer {
  background-color: #0F172A !important;
  border-top: 1px solid #1E293B !important;
  color: #64748B !important;
}

/* Progress bars dark */
[data-theme="dark"] .progress {
  background-color: #1E293B !important;
}

[data-theme="dark"] .progress-bar {
  background-color: #0891B2 !important;
}

/* List groups dark */
[data-theme="dark"] .list-group-item {
  background-color: #1E293B !important;
  border-color: #334155 !important;
  color: #E2E8F0 !important;
}

/* Scrollbar dark */
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0F172A;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #334155;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Text muted dark */
[data-theme="dark"] .text-muted {
  color: #94A3B8 !important;
}


/* ---------------------------------------------------------------------------
   8. BUTTONS -- Both Themes (brand-consistent)
   --------------------------------------------------------------------------- */

.btn-primary,
.btn-primary-dark {
  background-color: #0891B2 !important;
  border-color: #0891B2 !important;
  color: #FFFFFF !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease !important;
}

.btn-primary:hover,
.btn-primary-dark:hover {
  background-color: #0E7490 !important;
  border-color: #0E7490 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3) !important;
}

.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.3) !important;
}

.btn-outline-primary {
  color: #0891B2 !important;
  border-color: #0891B2 !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover {
  background-color: #0891B2 !important;
  color: #FFFFFF !important;
}

.btn-success {
  background-color: #059669 !important;
  border-color: #059669 !important;
  color: #FFFFFF !important;
}

.btn-success:hover {
  background-color: #047857 !important;
  border-color: #047857 !important;
}

/* Secondary buttons adapt per theme */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-default,
[data-theme="light"] .btn-light {
  background-color: #F1F5F9 !important;
  border-color: #CBD5E1 !important;
  color: #475569 !important;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-default:hover {
  background-color: #E2E8F0 !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-default,
[data-theme="dark"] .btn-light {
  background-color: #1E293B !important;
  border-color: #334155 !important;
  color: #CBD5E1 !important;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-default:hover {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #F8FAFC !important;
}


/* ---------------------------------------------------------------------------
   9. BADGES
   --------------------------------------------------------------------------- */

.badge-primary, .badge.bg-primary {
  background-color: #0891B2 !important;
  color: #FFFFFF !important;
}

.badge-success, .badge.bg-success {
  background-color: #059669 !important;
  color: #FFFFFF !important;
}


/* ---------------------------------------------------------------------------
   10. SCROLLBAR (base)
   --------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
}


/* ---------------------------------------------------------------------------
   11. SELECTION
   --------------------------------------------------------------------------- */

::selection {
  background-color: rgba(8, 145, 178, 0.3) !important;
  color: inherit !important;
}


/* ---------------------------------------------------------------------------
   12. LOGIN PAGE
   The login page is a server-rendered Frappe page (not the Vue SPA).
   Login CSS is injected via website_settings.head_html. These selectors
   provide fallback styling if the login page loads the Vue SPA CSS too.
   --------------------------------------------------------------------------- */

body[data-path="login"] {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%) !important;
}

body[data-path="login"] .navbar,
body[data-path="login"] nav,
body[data-path="login"] header {
  display: none !important;
}

body[data-path="login"] .main-section {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 40px 20px !important;
}

body[data-path="login"] .main-section > .container {
  max-width: 480px !important;
}

body[data-path="login"] .login-content.page-card {
  background: #1E293B !important;
  border: 1px solid #334155 !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  padding: 32px !important;
  max-width: 440px !important;
  margin: 0 auto !important;
}

body[data-path="login"] .page-card-head {
  text-align: center !important;
  padding: 0 0 20px 0 !important;
}

body[data-path="login"] .page-card-head .app-logo {
  display: none !important;
}

/* Hide original heading text, replace with Vective Academy */
body[data-path="login"] .page-card-head h4 {
  color: #F8FAFC !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 600 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

/* Vective icon on login page */
body[data-path="login"] section.for-login .page-card-head::before {
  content: "" !important;
  display: block !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 16px auto !important;
  background: linear-gradient(135deg, #0891B2, #22D3EE) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' rx='14' fill='url(%23g)'/%3E%3Cpath d='M 14 16 L 28 40 L 42 16' fill='none' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='56' y2='56'%3E%3Cstop offset='0' stop-color='%230891B2'/%3E%3Cstop offset='1' stop-color='%2322D3EE'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") !important;
  background-size: cover !important;
  background-color: transparent !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(8, 145, 178, 0.3) !important;
}

body[data-path="login"] section.for-login .page-card-head h4::after {
  content: "Vective Academy" !important;
  font-size: 1.6rem !important;
  line-height: 1.3 !important;
  display: block !important;
  color: #F8FAFC !important;
  font-family: "Space Grotesk", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

body[data-path="login"] .form-control {
  background: #0F172A !important;
  border-color: #334155 !important;
  color: #E2E8F0 !important;
}

body[data-path="login"] footer,
body[data-path="login"] .web-footer {
  display: none !important;
}

/* Powered by footer on login */
body[data-path="login"] section.for-login::after {
  content: "Powered by Vective AI" !important;
  display: block !important;
  text-align: center !important;
  color: rgba(148, 163, 184, 0.5) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.05em !important;
  margin-top: 20px !important;
}

/* Override "Sign in with Authentik" button text via CSS */
body[data-path="login"] .btn-social.btn-authentik,
body[data-path="login"] a[href*="authentik"],
body[data-path="login"] .social-login .btn {
  font-size: 0 !important;
}

body[data-path="login"] .btn-social.btn-authentik::after,
body[data-path="login"] a[href*="authentik"]::after,
body[data-path="login"] .social-login .btn::after {
  content: "Sign in with VectiveAI" !important;
  font-size: 0.875rem !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
}


/* ---------------------------------------------------------------------------
   13. MARKDOWN CONTENT
   --------------------------------------------------------------------------- */

[data-theme="dark"] .from-markdown { color: #E2E8F0 !important; }

[data-theme="dark"] .from-markdown h1,
[data-theme="dark"] .from-markdown h2,
[data-theme="dark"] .from-markdown h3,
[data-theme="dark"] .from-markdown h4,
[data-theme="dark"] .from-markdown h5,
[data-theme="dark"] .from-markdown h6 {
  color: #F8FAFC !important;
  font-family: "Space Grotesk", sans-serif !important;
}

[data-theme="dark"] .from-markdown blockquote {
  border-left: 4px solid #0891B2 !important;
  padding-left: 1rem !important;
  color: #94A3B8 !important;
  background-color: rgba(8, 145, 178, 0.05) !important;
}

[data-theme="light"] .from-markdown blockquote {
  border-left: 4px solid #0891B2 !important;
  padding-left: 1rem !important;
  color: #64748B !important;
  background-color: rgba(8, 145, 178, 0.04) !important;
}


/* ---------------------------------------------------------------------------
   14. MISC
   --------------------------------------------------------------------------- */

/* Tooltip */
.tooltip-inner {
  font-family: "Inter", sans-serif !important;
}

[data-theme="dark"] .tooltip-inner {
  background-color: #334155 !important;
  color: #F8FAFC !important;
}

/* Star rating */
.star-icon {
  --star-fill: #0891B2 !important;
}

/* HR */
[data-theme="dark"] hr { border-top-color: #1E293B !important; }
[data-theme="light"] hr { border-top-color: #E2E8F0 !important; }

/* Breadcrumbs */
.breadcrumb-item a { color: #0891B2 !important; }
[data-theme="dark"] .breadcrumb-item.active { color: #94A3B8 !important; }
[data-theme="light"] .breadcrumb-item.active { color: #64748B !important; }
.breadcrumb-item + .breadcrumb-item::before { color: #94A3B8 !important; }

/* Quill editor dark */
[data-theme="dark"] .ql-container,
[data-theme="dark"] .ql-editor {
  color: #E2E8F0 !important;
}

[data-theme="dark"] .ql-toolbar {
  background-color: #1E293B !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .ql-snow .ql-stroke { stroke: #94A3B8 !important; }
[data-theme="dark"] .ql-snow .ql-fill { fill: #94A3B8 !important; }

/* Pagination */
[data-theme="dark"] .page-item .page-link {
  background-color: #1E293B !important;
  border-color: #334155 !important;
  color: #CBD5E1 !important;
}

[data-theme="dark"] .page-item .page-link:hover {
  background-color: #334155 !important;
  color: #22D3EE !important;
}

[data-theme="dark"] .page-item.active .page-link {
  background-color: #0891B2 !important;
  border-color: #0891B2 !important;
  color: #FFFFFF !important;
}

[data-theme="light"] .page-item .page-link {
  background-color: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  color: #475569 !important;
}

[data-theme="light"] .page-item .page-link:hover {
  background-color: #F0FDFA !important;
  color: #0891B2 !important;
}

[data-theme="light"] .page-item.active .page-link {
  background-color: #0891B2 !important;
  border-color: #0891B2 !important;
  color: #FFFFFF !important;
}

/* Card links - no underline */
a.card, a.course-card {
  text-decoration: none !important;
}