/* Base tweaks */
:root{
  /* Modern palette (Light theme) */
  --blended-primary: #3b82f6; /* blue-500 */
  --blended-primary-hover:#2563eb; /* blue-600 */
  --blended-accent:#f59e0b; /* amber-500 */
  --blended-accent-hover:#d97706; /* amber-600 */
  --blended-bg: #f5f7fb; /* subtle app background */
  --blended-surface:#ffffff; /* cards, panels */
  --blended-text:#0f172a; /* slate-900 */
  --blended-muted:#475569; /* slate-600 */
  --blended-border:#e5e7eb; /* gray-200 */
  --blended-success:#16a34a;
  --blended-warning:#f59e0b;
  --blended-danger:#ef4444;

  /* Layout + effects */
  --radius-sm:.5rem;
  --radius-md:.75rem;
  --radius-lg:1rem;
  --shadow-sm:0 2px 10px rgba(2,6,23,.08);
  --shadow-md:0 6px 24px rgba(2,6,23,.10);
  --shadow-lg:0 16px 48px rgba(2,6,23,.12);

  /* Bridge to Bootstrap 5 CSS variables */
  --bs-primary: var(--blended-primary);
  --bs-primary-rgb: 59,130,246; /* #3b82f6 */
  --bs-link-color: var(--blended-primary);
  --bs-link-hover-color: color-mix(in srgb, var(--blended-primary), #000 15%);
}

/* Optional Dark theme support */
[data-theme="dark"]{
  --blended-primary:#60a5fa; /* lighter blue for dark bg */
  --blended-primary-hover:#3b82f6;
  --blended-accent:#fbbf24;
  --blended-accent-hover:#f59e0b;
  --blended-bg:#0b1220; /* deep navy */
  --blended-surface:#0f172a; /* slightly darker for higher contrast */
  --blended-text:#f1f5f9; /* increase contrast for readability */
  --blended-muted:#cbd5e1; /* brighter muted text for legibility */
  --blended-border:#1f2937;
  --bs-primary-rgb: 96,165,250;
  /* Base fallbacks (will be overridden directly on .table below) */
  --bs-table-bg: #0f172a;
  --bs-table-accent-bg: rgba(255,255,255,0.03);
  --bs-table-striped-bg: rgba(255,255,255,0.04);
  --bs-table-striped-color: var(--blended-text);
  --bs-table-hover-bg: rgba(255,255,255,0.06);
  --bs-table-hover-color: var(--blended-text);
}

.navbar-elevated{box-shadow:0 4px 20px rgba(0,0,0,.12)}

/* Typography */
body{font-feature-settings:"liga" 1, "kern" 1}
h1,h2,h3,h4,h5,h6{color:var(--blended-text)}
.lead{color:var(--blended-muted)}

/* Global background */
body{background: var(--blended-bg); color: var(--blended-text); position:relative; overflow-x:hidden}

/* Tables: ensure they adapt to theme */
.table { color: var(--blended-text); }
.table > :not(caption) > * > * { background-color: var(--bs-table-bg); border-color: var(--blended-border); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--bs-table-striped-bg); }
.table-hover > tbody > tr:hover > * { background-color: var(--bs-table-hover-bg); }
.table a { color: var(--blended-primary); }
/* Slightly different head background for readability */
.table thead th { background-color: color-mix(in srgb, var(--bs-table-bg), #000 8%); border-bottom-color: var(--blended-border); }
[data-theme="dark"] .table thead th { background-color: color-mix(in srgb, var(--bs-table-bg), #000 14%); }

/* Strong overrides for Bootstrap's per-table CSS variables in dark mode
   (Bootstrap sets its own --bs-table-* on .table which can override root) */
[data-theme="dark"] .table {
  --bs-table-color: var(--blended-text);
  --bs-table-bg: #0f172a; /* surface */
  --bs-table-border-color: var(--blended-border);
  --bs-table-striped-color: var(--blended-text);
  --bs-table-striped-bg: rgba(255,255,255,0.04);
  --bs-table-hover-color: var(--blended-text);
  --bs-table-hover-bg: rgba(255,255,255,0.06);
}
[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color, var(--blended-text));
  border-color: var(--bs-table-border-color, var(--blended-border));
}

/* Cards and forms in dark mode for readability */
[data-theme="dark"] .card { background-color: var(--blended-surface); color: var(--blended-text); border-color: var(--blended-border); }
[data-theme="dark"] .card .card-header { border-bottom-color: var(--blended-border); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus { background-color: var(--blended-surface); color: var(--blended-text); border-color: var(--blended-border); }
[data-theme="dark"] .form-control::placeholder { color: color-mix(in srgb, var(--blended-muted), #000 20%); opacity: 1; }
[data-theme="dark"] .form-check-label { color: var(--blended-text); }
[data-theme="dark"] .form-check-input {
  background-color: #0a1020;
  border-color: var(--blended-border);
  width: 1.15em;
  height: 1.15em;
  border-width: 2px;
}
[data-theme="dark"] .form-check-input:checked {
  background-color: var(--blended-primary);
  border-color: var(--blended-primary);
}
[data-theme="dark"] .form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .35);
}
[data-theme="dark"] .form-check-input[type="radio"] {
  /* make radio dot clearly visible */
  background-clip: padding-box;
}
[data-theme="dark"] .form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--blended-primary);
  border-color: var(--blended-primary);
}

/* Outline button contrast in dark mode (used in tests list actions) */
[data-theme="dark"] .btn-outline-primary { color: var(--blended-primary); border-color: var(--blended-primary); }
[data-theme="dark"] .btn-outline-primary:hover { background-color: rgba(96,165,250,0.15); color: var(--blended-primary); border-color: var(--blended-primary); }
[data-theme="dark"] .btn-outline-secondary { color: var(--blended-muted); border-color: var(--blended-muted); }
[data-theme="dark"] .btn-outline-secondary:hover { background-color: rgba(203,213,225,0.12); color: var(--blended-text); border-color: var(--blended-muted); }
[data-theme="dark"] .btn-outline-info { color: #38bdf8; border-color: #38bdf8; }
[data-theme="dark"] .btn-outline-info:hover { background-color: rgba(56,189,248,0.15); color: #38bdf8; border-color: #38bdf8; }
[data-theme="dark"] .btn-outline-danger { color: #f87171; border-color: #f87171; }
[data-theme="dark"] .btn-outline-danger:hover { background-color: rgba(248,113,113,0.18); color: #fca5a5; border-color: #f87171; }
/* Disabled/readonly visibility */
[data-theme="dark"] .btn:disabled, [data-theme="dark"] .btn.disabled { opacity: .75; color: color-mix(in srgb, var(--blended-muted), #fff 25%); border-color: color-mix(in srgb, var(--blended-muted), #fff 10%); }
[data-theme="dark"] .btn-primary:focus, [data-theme="dark"] .btn-outline-*:focus { box-shadow: 0 0 0 .22rem rgba(var(--bs-primary-rgb), .35); }

/* Alerts readability in dark mode (timer bar, notices in tests) */
[data-theme="dark"] .alert { color: var(--blended-text); border-color: var(--blended-border); background-color: color-mix(in srgb, var(--blended-surface), #000 8%); }
[data-theme="dark"] .alert-warning { background-color: rgba(245, 158, 11, .12); color: #fde68a; border-color: #f59e0b; }
[data-theme="dark"] .alert-info { background-color: rgba(59,130,246,.12); color: #bfdbfe; border-color: rgba(59,130,246,.5); }

/* Theme toggle icon-only button spacing */
.btn.icon-only { padding-left:.5rem; padding-right:.5rem; }

/* List groups (used in view_course questions) */
[data-theme="dark"] .list-group {
  --bs-list-group-bg: var(--blended-surface);
  --bs-list-group-color: var(--blended-text);
  --bs-list-group-border-color: var(--blended-border);
}
[data-theme="dark"] .list-group-item {
  background-color: var(--blended-surface);
  color: var(--blended-text);
  border-color: var(--blended-border);
}
[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
  background-color: rgba(255,255,255,.06);
  color: var(--blended-text);
}

/* Gallery: theme-aware thumbnail backdrop */
.thumb-bg { background-color: #f5f7fb; }
[data-theme="dark"] .thumb-bg { background-color: color-mix(in srgb, var(--blended-surface), #000 8%); }

/* Accordion (used on gallery upload form) */
[data-theme="dark"] .accordion,
[data-theme="dark"] .accordion-item {
  background-color: var(--blended-surface);
  color: var(--blended-text);
  border-color: var(--blended-border);
}
[data-theme="dark"] .accordion-button {
  background-color: var(--blended-surface);
  color: var(--blended-text);
}
[data-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: color-mix(in srgb, var(--blended-surface), #000 6%);
  color: var(--blended-text);
  box-shadow: inset 0 -1px 0 var(--blended-border);
}
[data-theme="dark"] .accordion-button:focus {
  border-color: var(--blended-border);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
[data-theme="dark"] .accordion-button::after {
  filter: invert(1) contrast(1.1);
}
[data-theme="dark"] .accordion-body {
  background-color: var(--blended-surface);
  color: var(--blended-text);
}

/* Muted text readability on dark */
[data-theme="dark"] .text-muted { color: color-mix(in srgb, var(--blended-muted), #000 5%) !important; }

/* Multi-layer animated background ribbons/blobs */
html{ --parallaxX: 0px; --parallaxY: 0px }
@keyframes bg-shift {
  0% { transform: translateX(-10%) translateY(0) rotate(0.0001deg); }
  50% { transform: translateX(0%) translateY(-3%) rotate(0.0001deg); }
  100% { transform: translateX(-10%) translateY(0) rotate(0.0001deg); }
}
@keyframes blob-move {
  0% { transform: translate3d(-6%, 2%, 0) scale(1); filter: hue-rotate(0deg) saturate(115%); }
  50% { transform: translate3d(2%, -4%, 0) scale(1.03); filter: hue-rotate(6deg) saturate(120%); }
  100% { transform: translate3d(-6%, 2%, 0) scale(1); filter: hue-rotate(0deg) saturate(115%); }
}
@keyframes ribbon-sway {
  0% { transform: translateY(0) rotate(0.4deg); }
  50% { transform: translateY(-1.5%) rotate(-0.4deg); }
  100% { transform: translateY(0) rotate(0.4deg); }
}
/* Deep layer: wide color ribbons */
html::before{
  content:""; position:fixed; inset:-15% -15% 55% -15%; z-index:-3; pointer-events:none;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--blended-primary) 18%, transparent), transparent 60%),
    linear-gradient(300deg, color-mix(in srgb, var(--blended-accent) 14%, transparent), transparent 65%);
  filter: blur(28px) saturate(115%);
  animation: ribbon-sway 36s ease-in-out infinite;
  transform: translate(var(--parallaxX), var(--parallaxY));
}
/* Mid layer: smaller blobs moving slowly */
body::before{
  content:""; position:fixed; inset:-10% -10% 40% -10%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40% 50% at 15% 25%, color-mix(in srgb, var(--blended-primary) 16%, transparent), transparent 60%),
    radial-gradient(35% 45% at 85% 18%, color-mix(in srgb, var(--blended-accent) 14%, transparent), transparent 62%),
    radial-gradient(45% 55% at 60% 70%, color-mix(in srgb, var(--blended-primary) 10%, transparent), transparent 65%);
  filter: blur(22px) saturate(112%);
  animation: blob-move 38s ease-in-out infinite;
  transform: translate(calc(var(--parallaxX) * 0.7), calc(var(--parallaxY) * 0.7));
}
/* Fine noise overlay for texture */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image: radial-gradient(rgba(0,0,0,.015) 1px, transparent 1px);
  background-size: 3px 3px; opacity:.6;
}
[data-theme="dark"] body::after{ opacity:.35; } /* reduce noise in dark mode for clarity */
@media (prefers-reduced-motion: reduce) {
  html::before, body::before { animation: none; }
}

/* Hero: use the same background as the rest of the app (no extra bright wash) */
.hero{
  padding:4rem 0;
  text-align:center;
  background: var(--blended-bg);
}
[data-theme="dark"] .hero{
  background: var(--blended-bg);
}
.hero .hero-logo{max-height:160px;width:auto}
.hero .lead{max-width:56rem;margin:0 auto}
.hero-search{max-width:560px;margin:1rem auto 0}

/* Benefits grid */
.benefits .icon{font-size:1.75rem; line-height:1; color:var(--blended-primary)}
.benefit-card{background:var(--blended-surface); border:1px solid var(--blended-border); border-radius:var(--radius-md); padding:1rem; height:100%; box-shadow: var(--shadow-sm)}
.benefit-card:hover{box-shadow: var(--shadow-md)}

/* Stats */
.stats{background: linear-gradient(180deg, color-mix(in srgb, var(--blended-primary) 4%, transparent), transparent)}
.stat-card{background:var(--blended-surface); border:1px solid var(--blended-border); border-radius:var(--radius-md); padding:1rem; text-align:center}
.stat-value{font-size:1.5rem; font-weight:800}
.stat-label{color:var(--blended-muted)}

/* Latest courses grid on homepage */
.home-courses .course-card{height:100%}
.course-cover{ position:relative; }
.course-title-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:.5rem .75rem;
  color:#fff;
  font-weight:700;
  text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 1px rgba(0,0,0,.6);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.6) 100%);
}
.course-title-overlay .title{ display:block; font-size:1rem; line-height:1.2; }
@media (min-width: 992px){ .course-title-overlay .title{ font-size:1.05rem; } }

/* CTA band */
.cta-band{position:relative; overflow:hidden; border:1px solid var(--blended-border); border-radius:var(--radius-lg); padding:2rem; background:linear-gradient(135deg, color-mix(in srgb, var(--blended-primary) 10%, var(--blended-surface)), var(--blended-surface))}
.cta-band .btn-primary{position:relative}
.btn-shimmer{background-size:200% 100%; background-image: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.22), rgba(255,255,255,.0)); background-repeat:no-repeat}
.btn-shimmer:hover{animation: shimmer 1.2s ease-in-out}
@keyframes shimmer{0%{background-position:-120% 0}100%{background-position:220% 0}}

/* Top scroll progress bar */
#scrollProgress{position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg, var(--blended-primary), var(--blended-accent)); z-index:4000; box-shadow: 0 0 12px rgba(var(--bs-primary-rgb), .6)}

/* Cards & hover */
.card{border-radius:var(--radius-md); border:1px solid var(--blended-border); background:var(--blended-surface);}
.card:hover{box-shadow:var(--shadow-md)}
.card, .btn{transition:box-shadow .2s ease, transform .06s ease}
.btn:active{transform:translateY(1px)}

/* Buttons accents & Bootstrap primary override */
.btn{border-radius: var(--radius-sm); padding:.55rem .9rem; font-weight:600}
.btn-primary{background:var(--blended-primary);border-color:var(--blended-primary); box-shadow: 0 6px 18px rgba(var(--bs-primary-rgb), .22)}
.btn-primary:hover{background:var(--blended-primary-hover);border-color:var(--blended-primary-hover); box-shadow: 0 10px 28px rgba(var(--bs-primary-rgb), .28)}
.btn-outline-primary{color:var(--blended-primary);border-color:var(--blended-primary)}
.btn-outline-primary:hover{background:var(--blended-primary);border-color:var(--blended-primary);color:#fff}
.btn-accent{background:var(--blended-accent);border-color:var(--blended-accent);color:#111827; box-shadow: 0 6px 18px rgba(245, 158, 11, .25)}
.btn-accent:hover{background:var(--blended-accent-hover);border-color:var(--blended-accent-hover);color:#111827; box-shadow: 0 10px 28px rgba(245, 158, 11, .32)}
.btn, .btn:focus{box-shadow:none}
.btn:focus-visible{outline: 3px solid color-mix(in srgb, var(--blended-primary), #fff 70%); outline-offset:2px}

/* Optional button utilities */
.btn-elevated{ box-shadow: var(--shadow-sm); }
.btn-elevated:hover{ box-shadow: var(--shadow-md); }
.btn-glow{ box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), .0); transition: box-shadow .2s ease }
.btn-glow:hover{ box-shadow: 0 0 0 6px color-mix(in srgb, var(--blended-primary) 22%, transparent); }

/* Forms */
.form-control:focus{
  box-shadow:0 0 0 .2rem color-mix(in srgb, var(--blended-primary), #fff 82%);
  border-color: color-mix(in srgb, var(--blended-primary), #000 15%);
}
label{color:var(--blended-muted)}
.form-text{color:var(--blended-muted)}
.form-select, .form-control{border-color:var(--blended-border)}
.is-invalid{border-color:var(--blended-danger)!important}
.is-valid{border-color:var(--blended-success)!important}

/* Question/test UI */
.question-card{border:1px solid var(--blended-border);border-radius:var(--radius-md);padding:1rem;margin-bottom:1rem;background:var(--blended-surface)}
.choice{display:flex;gap:.5rem;align-items:center}
.choices-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
@media(max-width:768px){.choices-grid{grid-template-columns:1fr}}

/* Sticky footer layout */
html, body{height:100%}
body{display:flex;flex-direction:column}
main{flex:1 0 auto}

/* Navbar (header.php uses navbar-dark bg-dark) */
.navbar-dark.bg-dark{background-color:#0b1220 !important; box-shadow:0 2px 12px rgba(2,6,23,.25)}
.navbar-dark .navbar-nav .nav-link{color:rgba(255,255,255,.85)}
.navbar-dark .navbar-nav .nav-link:hover,.navbar-dark .navbar-nav .nav-link:focus{color:#fff}
.navbar-dark .navbar-brand{color:#fff}

/* Footer */
footer.bg-dark{background: linear-gradient(180deg, #0b1220 0%, #0d1424 100%) !important; border-top:1px solid rgba(255,255,255,.06)}
footer a.text-light:hover{color:var(--blended-primary)!important}

/* Tables */
.table{--bs-table-striped-bg: color-mix(in srgb, var(--blended-primary) 3%, #fff); --bs-table-hover-bg: color-mix(in srgb, var(--blended-primary) 6%, #fff)}
.table thead th{border-bottom-color:var(--blended-border)}
.table>:not(caption)>*>*{border-bottom-color:var(--blended-border)}

/* Badges & alerts */
.badge.bg-primary{background-color:var(--blended-primary)!important}
.alert-primary{background:color-mix(in srgb, var(--blended-primary) 12%, #fff); border-color: color-mix(in srgb, var(--blended-primary) 35%, #fff)}

/* Courses page (moved from inline styles) */
.chapter-item { position: relative; }
.chapter-trigger { min-height:84px; display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; border:1px solid var(--blended-border); border-radius:var(--radius-md); background:var(--blended-surface); }
.chapter-trigger:hover { border-color: color-mix(in srgb, var(--blended-primary), var(--blended-border) 80%); background: color-mix(in srgb, var(--blended-primary) 4%, var(--blended-surface)); }
.chapter-count { font-size:.9rem; color:var(--blended-muted); }
.chapter-courses { position: static; display:none; margin-top:.5rem; }
.chapter-item.open .chapter-courses { display:block; }
.courses-panel { background:var(--blended-surface); border:1px solid var(--blended-border); border-radius:var(--radius-md); padding:1rem; box-shadow: var(--shadow-sm); }
.course-card { position:relative; border:1px solid var(--blended-border); border-radius:var(--radius-md); overflow:hidden; height:100%; cursor:pointer; background:var(--blended-surface); }
.course-card:hover { border-color: color-mix(in srgb, var(--blended-primary), var(--blended-border) 70%); box-shadow: var(--shadow-md); }
.course-cover { position:relative; aspect-ratio:16/9; overflow:hidden; background:#eef2f7; height:180px; }
.course-cover img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.badge-completed { position:absolute; top:.5rem; right:.5rem; background: var(--blended-success); color:#fff; padding:.25rem .5rem; border-radius:999px; font-size:.75rem; }
.assign-form select { max-width:220px; }
.drag-handle { cursor:grab; user-select:none; font-weight:700; opacity:.5; display:inline-block; }
.drag-handle:active { cursor:grabbing; }
.chapter-thumb{ width:72px; height:48px; background:#e9ecef center/cover no-repeat; border-radius:.5rem; border:1px solid var(--blended-border); }
.snackbar { position:fixed; right:16px; bottom:16px; background:#212529; color:#fff; padding:.6rem .9rem; border-radius:.5rem; opacity:0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; z-index:3000; pointer-events:none; }
.snackbar.show { opacity:1; transform: translateY(0); }
.inline-editor { display:none; gap:.5rem; }
.inline-editor.active { display:flex; align-items:center; }
.inline-editor input[type="text"]{ max-width:280px; }
.courses-scroller { display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type: x proximity; }
.courses-scroller::-webkit-scrollbar { height:10px; }
.courses-scroller::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius:999px; }
.courses-scroller::-webkit-scrollbar-track { background: #eef2f7; }
.course-item { flex:0 0 320px; scroll-snap-align:start; }

/* Course view page */
.course-hero{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width: 992px){ .course-hero{ grid-template-columns: 2fr 1fr; } }
.course-embed{ border:1px solid var(--blended-border); border-radius:var(--radius-md); overflow:hidden; background:#000; aspect-ratio:16/9; }
.course-cover{ width:100%; height:100%; object-fit:cover; }

/* Gallery viewer */
.gallery-viewer #viewerWrap{ width:100%; height:70vh; }
.gallery-viewer model-viewer{ width:100%; height:100%; background: radial-gradient(ellipse at top, color-mix(in srgb, var(--blended-primary) 6%, #0b1220), var(--blended-bg)); border-radius: var(--radius-md); }
.viewer-header{ padding:12px 16px; background:#0b1220; display:flex; align-items:center; gap:12px; border-bottom: 1px solid rgba(255,255,255,.06) }
.viewer-header .meta{ font-size:14px; opacity:.9 }
.viewer-header .meta code{ color: var(--blended-primary) }

/* Accessibility: focus ring for stretched links inside cards */
.card .stretched-link:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--blended-primary), #fff 60%);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* Dark mode readability improvements for secondary text */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .card .small,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .lead{
  color: var(--blended-muted) !important;
}