/* ═══════════════════════════════════════════════════════════
   KAPACITI LMS — Global Styles
   Palette: Steel Blue (#266175) + Teal (#0d9488)
   ═══════════════════════════════════════════════════════════ */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* ═══════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — Dark (default) + Light themes
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand ──────────────────────────────────── */
  --kap-primary:          #266175;
  --kap-primary-dark:     #1d4d5c;
  --kap-primary-darker:   #1a3f4a;
  --kap-primary-light:    #3d8a9e;
  --kap-primary-lighter:  #4a9bb0;

  --kap-secondary:        #0d9488;
  --kap-secondary-dark:   #0f766e;
  --kap-secondary-darker: #115e59;
  --kap-secondary-light:  #14b8a6;
  --kap-secondary-lighter:#2dd4bf;

  --kap-accent:           #ffd700;
  --kap-accent-hover:     #ffed4a;

  /* ── Surfaces ────────────────────────────────── */
  --kap-bg:               #121212;
  --kap-bg-alt:           #1a1a1a;
  --kap-surface:          #1e1e1e;

  /* ── Text ────────────────────────────────────── */
  --kap-text:             #e0e0e0;
  --kap-text-secondary:   #b0b0b0;
  --kap-text-muted:       #808080;
  --kap-text-inverse:     #333333;

  /* ── Borders ─────────────────────────────────── */
  --kap-border:           #2a2a2a;
  --kap-border-light:     #333333;

  /* ── Functional ──────────────────────────────── */
  --kap-danger:           #ef4444;
  --kap-success:          #10b981;
  --kap-warning:          #ffd700;
  --kap-focus:            #0d9488;

  /* ── Scrollbar ───────────────────────────────── */
  --kap-scrollbar-track:  #121212;
  --kap-scrollbar-thumb:  #0d9488;
  --kap-scrollbar-thumb-hover: #14b8a6;
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ═══════════════════════════════════════════════════════════ */
html.theme-light {
  --kap-primary:          #266175;
  --kap-primary-dark:     #1d4d5c;
  --kap-primary-darker:   #1a3f4a;
  --kap-primary-light:    #3d8a9e;
  --kap-primary-lighter:  #4a9bb0;

  --kap-secondary:        #0d9488;
  --kap-secondary-dark:   #0f766e;
  --kap-secondary-darker: #115e59;
  --kap-secondary-light:  #14b8a6;
  --kap-secondary-lighter:#2dd4bf;

  --kap-accent:           #ffb347;
  --kap-accent-hover:     #f59e0b;

  --kap-bg:               #f5f7fa;
  --kap-bg-alt:           #f1f5f9;
  --kap-surface:          #ffffff;

  --kap-text:             #333333;
  --kap-text-secondary:   #666666;
  --kap-text-muted:       #94a3b8;
  --kap-text-inverse:     #e0e0e0;

  --kap-border:           #d9d9d9;
  --kap-border-light:     #e2e8f0;

  --kap-danger:           #dc2626;
  --kap-success:          #059669;
  --kap-warning:          #ffb347;
  --kap-focus:            #266175;

  --kap-scrollbar-track:  #f1f5f9;
  --kap-scrollbar-thumb:  #266175;
  --kap-scrollbar-thumb-hover: #1d4d5c;
}

html.theme-light { color-scheme: light; }

/* ═══════════════════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--kap-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--kap-scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--kap-scrollbar-thumb-hover); }

/* ═══════════════════════════════════════════════════════════
   GLOBAL BODY / HTML
   ═══════════════════════════════════════════════════════════ */
html, html body { background-color: var(--kap-bg); color: var(--kap-text); }

/* ═══════════════════════════════════════════════════════════
   BLAZOR ERROR UI
   ═══════════════════════════════════════════════════════════ */
#blazor-error-ui {
    position: fixed; bottom: 0; width: 100%;
    background: var(--kap-primary);
    color: white; padding: 0.75rem 1rem; text-align: center;
    z-index: 9999; display: none;
}
#blazor-error-ui .reload { color: #fde68a; margin: 0 0.5rem; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem; color: white;
}

/* ═══════════════════════════════════════════════════════════
   FOCUS
   ═══════════════════════════════════════════════════════════ */
*:focus-visible { outline: 2px solid var(--kap-focus); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════
   CUSTOM UTILITIES
   ═══════════════════════════════════════════════════════════ */

/* ── Gradient text (primary → secondary) ─── */
.gradient-text {
    background: linear-gradient(118deg, var(--kap-primary-light) 10%, var(--kap-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-legible {
    text-shadow: 0 1px 12px rgb(42 171 215 / 83%), 0 0 2px rgb(5 69 63 / 68%);
}

/* ── Hero heading shadow ─── */
.hero-heading {
    text-shadow: 0 2px 24px rgb(48 173 144 / 70%), 0 0 6px rgb(0 0 0 / 2%), 0 1px 2px rgb(1 6 6);
}

/* ── Glass card ─── */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Glow effects ─── */
.glow-primary { box-shadow: 0 0 30px rgba(38, 97, 117, 0.35); }
.glow-secondary { box-shadow: 0 0 30px rgba(13, 148, 136, 0.35); }

/* ── Hero overlay ─── */
.hero-overlay {
    background: linear-gradient(135deg,
        rgba(29, 77, 92, 0.85) 0%,
        rgba(18, 18, 18, 0.75) 50%,
        rgba(13, 148, 136, 0.45) 100%);
}

/* ── Carousel transitions ─── */
.carousel-slide { transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1); }
.carousel-slide.active  { opacity: 1; transform: scale(1); }
.carousel-slide.inactive{ opacity: 0; transform: scale(1.02); pointer-events: none; }

/* ── Sidebar mobile drawer ─── */
@media (max-width: 1023px) {
    #admin-portal-sidebar,
    #user-portal-sidebar,
    #instructor-portal-sidebar {
        transform: translateX(-100%);
    }
    #admin-portal-sidebar.mob-open,
    #user-portal-sidebar.mob-open,
    #instructor-portal-sidebar.mob-open {
        transform: translateX(0);
    }
}

/* ── News card image zoom ─── */
.news-img-wrap { overflow: hidden; }
.news-img-wrap img { transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.news-img-wrap:hover img { transform: scale(1.07); }

/* ── Partner marquee ─── */
.partner-track {
    display: flex; width: max-content;
    animation: marquee 35s linear infinite;
}
.partner-track:hover { animation-play-state: paused; }

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Form validation ─── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--kap-success); }
.invalid { outline: 1px solid var(--kap-danger); }
.validation-message { color: var(--kap-danger); font-size: 0.75rem; margin-top: 0.25rem; }

/* ── Prose / news content (dark default) ─── */
.prose-kapaciti p  { color: #cbd5e1; line-height: 1.85; margin-bottom: 1rem; }
.prose-kapaciti h2 { color: #e2e8f0; font-size: 1.5rem;  font-weight: 700; margin: 1.5rem 0 0.75rem; }
.prose-kapaciti h3 { color: #e2e8f0; font-size: 1.25rem; font-weight: 600; margin: 1.25rem 0 0.5rem; }
.prose-kapaciti a  { color: var(--kap-primary-light); text-decoration: underline; }
.prose-kapaciti ul { list-style: disc;    padding-left: 1.5rem; color: #cbd5e1; }
.prose-kapaciti ol { list-style: decimal; padding-left: 1.5rem; color: #cbd5e1; }
.prose-kapaciti blockquote { border-left: 4px solid var(--kap-primary); padding-left: 1rem; color: #94a3b8; font-style: italic; }

/* ── h1 focus ─── */
h1:focus { outline: none; }

/* ═══════════════════════════════════════════════════════════
   SOCIAL ICONS — themed via CSS custom properties
   ═══════════════════════════════════════════════════════════ */

:root {
    --kap-social-color:        var(--kap-primary-light);
    --kap-social-hover-color:  var(--kap-secondary-light);
    --kap-social-bg:           rgba(61, 138, 158, 0.10);
    --kap-social-border:       rgba(61, 138, 158, 0.20);
    --kap-social-hover-bg:     rgba(20, 184, 166, 0.15);
    --kap-social-hover-border: rgba(20, 184, 166, 0.35);
}

html.theme-light {
    --kap-social-color:        var(--kap-primary);
    --kap-social-hover-color:  var(--kap-secondary);
    --kap-social-bg:           rgba(38, 97, 117, 0.08);
    --kap-social-border:       rgba(38, 97, 117, 0.18);
    --kap-social-hover-bg:     rgba(13, 148, 136, 0.12);
    --kap-social-hover-border: rgba(13, 148, 136, 0.30);
}

.social-icon-wrap {
    color:            var(--kap-social-color)  !important;
    background-color: var(--kap-social-bg)     !important;
    border-color:     var(--kap-social-border) !important;
}
.social-icon-wrap:hover {
    color:            var(--kap-social-hover-color)  !important;
    background-color: var(--kap-social-hover-bg)     !important;
    border-color:     var(--kap-social-hover-border) !important;
}
.social-icon-wrap i {
    color: var(--kap-social-color) !important;
}
.social-icon-wrap:hover i {
    color: var(--kap-social-hover-color) !important;
}

/* ═══════════════════════════════════════════════════════════
   BRAND COLOR CLASS OVERRIDES
   Maps old palette to new via CSS variables
   ═══════════════════════════════════════════════════════════ */

/* ── Body / page background ── */
html.theme-light,
html.theme-light body {
    background-color: var(--kap-bg);
    color: var(--kap-text);
}

/* ── Section backgrounds ── */
html.theme-light .bg-slate-950 { background-color: var(--kap-bg) !important; }
html.theme-light .bg-slate-900 { background-color: var(--kap-bg-alt) !important; }
html.theme-light .bg-slate-800 { background-color: var(--kap-border-light) !important; }
html.theme-light .bg-slate-700 { background-color: var(--kap-border) !important; }

html.theme-light section[class*="from-slate"],
html.theme-light section[class*="via-slate"] {
    background-image: none !important;
}

/* ── Semi-transparent backgrounds ── */
html.theme-light .bg-slate-900\/95 { background-color: rgba(245,247,250,0.95) !important; }
html.theme-light .bg-slate-900\/90 { background-color: rgba(241,245,249,0.90) !important; }
html.theme-light .bg-slate-950\/50 { background-color: rgba(245,247,250,0.50) !important; }

/* ── White-alpha flips ── */
html.theme-light .bg-white\/5  { background-color: rgba(0,0,0,0.03) !important; }
html.theme-light .bg-white\/10 { background-color: rgba(0,0,0,0.05) !important; }
html.theme-light .bg-white\/15 { background-color: rgba(0,0,0,0.07) !important; }
html.theme-light .bg-white\/20 { background-color: rgba(0,0,0,0.09) !important; }
html.theme-light .hover\:bg-white\/5:hover  { background-color: rgba(0,0,0,0.03) !important; }
html.theme-light .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.05) !important; }

/* ── Decorative gradient overlay fade ── */
html.theme-light section > .absolute.inset-0:not(.bg-grid-pattern) {
    opacity: 0.08 !important;
}

/* ── Background — brand colors with opacity (needed for dark mode too) ── */
/* Violet → Primary */
.bg-violet-500\/10 { background-color: rgba(38, 97, 117, 0.10) !important; }
.bg-violet-500\/20 { background-color: rgba(38, 97, 117, 0.20) !important; }
.bg-violet-600\/10 { background-color: rgba(29, 77, 92, 0.10) !important; }
.bg-violet-600\/15 { background-color: rgba(29, 77, 92, 0.15) !important; }
.bg-violet-950\/20 { background-color: rgba(26, 63, 74, 0.20) !important; }
.bg-violet-950\/30 { background-color: rgba(26, 63, 74, 0.30) !important; }
.bg-violet-950\/40 { background-color: rgba(26, 63, 74, 0.40) !important; }
.bg-violet-900\/40 { background-color: rgba(26, 63, 74, 0.40) !important; }
.bg-violet-900\/60 { background-color: rgba(26, 63, 74, 0.60) !important; }
.hover\:bg-violet-500\/10:hover { background-color: rgba(38, 97, 117, 0.10) !important; }

/* Cyan → Secondary */
.bg-cyan-500\/10 { background-color: rgba(13, 148, 136, 0.10) !important; }
.bg-cyan-500\/20 { background-color: rgba(13, 148, 136, 0.20) !important; }
.bg-cyan-600\/10 { background-color: rgba(15, 118, 110, 0.10) !important; }
.bg-cyan-600\/15 { background-color: rgba(15, 118, 110, 0.15) !important; }
.bg-cyan-950\/30 { background-color: rgba(17, 94, 89, 0.30) !important; }
.bg-cyan-950\/40 { background-color: rgba(17, 94, 89, 0.40) !important; }

/* Amber → Accent */
.bg-amber-500\/10 { background-color: rgba(245, 158, 11, 0.10) !important; }
.bg-amber-500\/20 { background-color: rgba(245, 158, 11, 0.20) !important; }
.hover\:bg-amber-500\/10:hover { background-color: rgba(245, 158, 11, 0.10) !important; }
.hover\:bg-amber-500\/20:hover { background-color: rgba(245, 158, 11, 0.20) !important; }

/* Rose */
.bg-rose-500\/10 { background-color: rgba(244, 63, 94, 0.10) !important; }
.bg-rose-500\/20 { background-color: rgba(244, 63, 94, 0.20) !important; }
.hover\:bg-rose-500\/10:hover { background-color: rgba(244, 63, 94, 0.10) !important; }

/* Emerald */
.bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.20) !important; }
.hover\:bg-emerald-500\/10:hover { background-color: rgba(16, 185, 129, 0.10) !important; }

/* ── Borders — brand colors with opacity ── */
.border-violet-500\/20 { border-color: rgba(38, 97, 117, 0.20) !important; }
.border-violet-500\/30 { border-color: rgba(38, 97, 117, 0.30) !important; }
.border-violet-500\/50 { border-color: rgba(38, 97, 117, 0.50) !important; }
.border-cyan-500\/20 { border-color: rgba(13, 148, 136, 0.20) !important; }
.border-amber-500\/20 { border-color: rgba(245, 158, 11, 0.20) !important; }
.border-amber-500\/30 { border-color: rgba(245, 158, 11, 0.30) !important; }
.border-rose-500\/20 { border-color: rgba(244, 63, 94, 0.20) !important; }
.border-rose-500\/30 { border-color: rgba(244, 63, 94, 0.30) !important; }
.border-emerald-500\/30 { border-color: rgba(16, 185, 129, 0.30) !important; }

/* ── Shadows — brand colors ── */
.shadow-violet-500\/25 { box-shadow: 0 4px 14px 0 rgba(38, 97, 117, 0.25) !important; }
.shadow-violet-500\/30 { box-shadow: 0 8px 25px 0 rgba(38, 97, 117, 0.30) !important; }
.shadow-violet-500\/40 { box-shadow: 0 10px 40px 0 rgba(38, 97, 117, 0.40) !important; }
.shadow-violet-950\/20 { box-shadow: 0 4px 14px 0 rgba(26, 63, 74, 0.20) !important; }
.shadow-violet-950\/30 { box-shadow: 0 8px 25px 0 rgba(26, 63, 74, 0.30) !important; }
.hover\:shadow-violet-500\/30:hover { box-shadow: 0 8px 25px 0 rgba(38, 97, 117, 0.30) !important; }
.hover\:shadow-violet-500\/40:hover { box-shadow: 0 10px 40px 0 rgba(38, 97, 117, 0.40) !important; }
.hover\:shadow-violet-500\/50:hover { box-shadow: 0 15px 50px 0 rgba(38, 97, 117, 0.50) !important; }
.hover\:shadow-violet-950\/30:hover { box-shadow: 0 8px 25px 0 rgba(26, 63, 74, 0.30) !important; }
.shadow-violet-500\/20 { box-shadow: 0 4px 14px 0 rgba(38, 97, 117, 0.20) !important; }
.shadow-cyan-500\/25  { box-shadow: 0 4px 14px 0 rgba(13, 148, 136, 0.25) !important; }

/* ── From/To gradient stops ── */
.from-violet-500 { --tw-gradient-from: #1d4d5c !important; }
.from-violet-600 { --tw-gradient-from: #1a3f4a !important; }
.from-violet-900 { --tw-gradient-from: #0f2530 !important; }
.from-violet-950 { --tw-gradient-from: #0a1a22 !important; }
.from-violet-950\/50 { --tw-gradient-from: rgba(10, 26, 34, 0.5) !important; }

.to-violet-500 { --tw-gradient-to: #1d4d5c !important; }
.to-violet-400 { --tw-gradient-to: #266175 !important; }
.to-violet-600 { --tw-gradient-to: #1a3f4a !important; }

.from-cyan-500 { --tw-gradient-from: #0f766e !important; }
.from-cyan-600 { --tw-gradient-from: #115e59 !important; }
.from-cyan-950 { --tw-gradient-from: #042f2e !important; }

.to-cyan-500 { --tw-gradient-to: #0f766e !important; }
.to-cyan-950\/30 { --tw-gradient-to: rgba(4, 47, 46, 0.3) !important; }
.to-cyan-950\/40 { --tw-gradient-to: rgba(4, 47, 46, 0.4) !important; }

.from-amber-500 { --tw-gradient-from: #f59e0b !important; }
.to-orange-500 { --tw-gradient-to: #f97316 !important; }

.from-emerald-500 { --tw-gradient-from: #10b981 !important; }

.via-slate-900 { --tw-gradient-via: #1a1a1a !important; }

/* Gradient stops with opacity modifiers (need \/ to match the class name) */
.from-violet-600\/0  { --tw-gradient-from: transparent !important; }
.from-violet-600\/10 { --tw-gradient-from: rgba(26, 63, 74, 0.10) !important; }
.from-violet-600\/20 { --tw-gradient-from: rgba(26, 63, 74, 0.20) !important; }
.from-violet-600\/30 { --tw-gradient-from: rgba(26, 63, 74, 0.30) !important; }
.from-violet-600\/50 { --tw-gradient-from: rgba(26, 63, 74, 0.50) !important; }
.from-violet-900\/40 { --tw-gradient-from: rgba(15, 37, 48, 0.40) !important; }
.from-violet-900\/60 { --tw-gradient-from: rgba(15, 37, 48, 0.60) !important; }
.via-violet-600\/0   { --tw-gradient-via: transparent !important; }
.via-violet-600\/50  { --tw-gradient-via: rgba(26, 63, 74, 0.50) !important; }
.to-violet-600\/0    { --tw-gradient-to: transparent !important; }
.to-violet-600\/5    { --tw-gradient-to: rgba(26, 63, 74, 0.05) !important; }

.from-cyan-600 { --tw-gradient-from: #115e59 !important; }
.from-cyan-600\/5  { --tw-gradient-from: rgba(17, 94, 89, 0.05) !important; }
.from-cyan-600\/10 { --tw-gradient-from: rgba(17, 94, 89, 0.10) !important; }
.to-cyan-400  { --tw-gradient-to: #0d9488 !important; }
.to-cyan-500\/20 { --tw-gradient-to: rgba(15, 118, 110, 0.20) !important; }
.to-cyan-600  { --tw-gradient-to: #115e59 !important; }
.to-cyan-600\/5  { --tw-gradient-to: rgba(17, 94, 89, 0.05) !important; }
.to-cyan-600\/10 { --tw-gradient-to: rgba(17, 94, 89, 0.10) !important; }

.from-cyan-600.to-violet-600 { --tw-gradient-from: #115e59 !important; --tw-gradient-to: #1a3f4a !important; }

/* Violet/cyan glow blobs (dark bg) */
.bg-violet-600\/15 { background-color: rgba(38, 97, 117, 0.15) !important; }
.bg-violet-600\/20 { background-color: rgba(38, 97, 117, 0.20) !important; }
.bg-violet-600\/5  { background-color: rgba(38, 97, 117, 0.05) !important; }
.bg-cyan-600\/10  { background-color: rgba(13, 148, 136, 0.10) !important; }
.bg-cyan-600\/15  { background-color: rgba(13, 148, 136, 0.15) !important; }

/* Violet >> primary in inline gradients (used in cards, etc.) */
.from-violet-500\/20 { --tw-gradient-from: rgba(38, 97, 117, 0.20) !important; }
.to-violet-600\/5    { --tw-gradient-to:   rgba(29, 77, 92, 0.05) !important; }
.from-cyan-500\/20   { --tw-gradient-from: rgba(13, 148, 136, 0.20) !important; }
.to-cyan-600\/5      { --tw-gradient-to:   rgba(15, 118, 110, 0.05) !important; }
.from-amber-500\/20  { --tw-gradient-from: rgba(245, 158, 11, 0.20) !important; }
.to-amber-600\/5     { --tw-gradient-to:   rgba(217, 119, 6, 0.05) !important; }
.from-rose-500\/20   { --tw-gradient-from: rgba(244, 63, 94, 0.20) !important; }
.to-rose-600\/5      { --tw-gradient-to:   rgba(225, 29, 72, 0.05) !important; }

/* ── Light theme overrides for brand opacity backgrounds ── */
html.theme-light .bg-violet-500\/10 { background-color: rgba(38, 97, 117, 0.08) !important; }
html.theme-light .bg-violet-500\/20 { background-color: rgba(38, 97, 117, 0.15) !important; }
html.theme-light .bg-violet-600\/10 { background-color: rgba(29, 77, 92, 0.08) !important; }
html.theme-light .bg-cyan-500\/10   { background-color: rgba(13, 148, 136, 0.08) !important; }
html.theme-light .bg-cyan-500\/20   { background-color: rgba(13, 148, 136, 0.15) !important; }
html.theme-light .bg-amber-500\/10  { background-color: rgba(245, 158, 11, 0.08) !important; }
html.theme-light .bg-amber-500\/20  { background-color: rgba(245, 158, 11, 0.15) !important; }
html.theme-light .bg-rose-500\/10   { background-color: rgba(244, 63, 94, 0.08) !important; }
html.theme-light .bg-rose-500\/20   { background-color: rgba(244, 63, 94, 0.15) !important; }
html.theme-light .bg-emerald-500\/20{ background-color: rgba(16, 185, 129, 0.15) !important; }

html.theme-light .hover\:bg-violet-500\/10:hover  { background-color: rgba(38, 97, 117, 0.08) !important; }
html.theme-light .hover\:bg-amber-500\/10:hover   { background-color: rgba(245, 158, 11, 0.08) !important; }
html.theme-light .hover\:bg-rose-500\/10:hover    { background-color: rgba(244, 63, 94, 0.08) !important; }
html.theme-light .hover\:bg-emerald-500\/10:hover { background-color: rgba(16, 185, 129, 0.08) !important; }

html.theme-light .border-violet-500\/20 { border-color: rgba(38, 97, 117, 0.18) !important; }
html.theme-light .border-violet-500\/30 { border-color: rgba(38, 97, 117, 0.28) !important; }
html.theme-light .border-violet-500\/50 { border-color: rgba(38, 97, 117, 0.45) !important; }
html.theme-light .border-cyan-500\/20   { border-color: rgba(13, 148, 136, 0.18) !important; }
html.theme-light .border-amber-500\/20  { border-color: rgba(245, 158, 11, 0.18) !important; }
html.theme-light .border-amber-500\/30  { border-color: rgba(245, 158, 11, 0.28) !important; }
html.theme-light .border-rose-500\/20   { border-color: rgba(244, 63, 94, 0.18) !important; }
html.theme-light .border-rose-500\/30   { border-color: rgba(244, 63, 94, 0.28) !important; }

html.theme-light .shadow-violet-500\/25 { box-shadow: 0 4px 14px 0 rgba(38, 97, 117, 0.15) !important; }
html.theme-light .shadow-violet-500\/30 { box-shadow: 0 8px 25px 0 rgba(38, 97, 117, 0.20) !important; }
html.theme-light .shadow-violet-500\/40 { box-shadow: 0 10px 40px 0 rgba(38, 97, 117, 0.25) !important; }
html.theme-light .shadow-violet-500\/20 { box-shadow: 0 4px 14px 0 rgba(38, 97, 117, 0.15) !important; }

/* ── Text — base palette ── */
html.theme-light .text-white     { color: #1e293b !important; }
html.theme-light .text-slate-100 { color: #1e293b !important; }
html.theme-light .text-slate-200 { color: #1e293b !important; }
html.theme-light .text-slate-300 { color: #334155 !important; }
html.theme-light .text-slate-400 { color: #475569 !important; }
html.theme-light .text-slate-500 { color: #64748b !important; }
html.theme-light .text-slate-600 { color: #64748b !important; }

/* ── Text — brand colors (violet → primary) ── */
html.theme-light .text-violet-400,
.text-violet-400 { color: var(--kap-primary) !important; }
html.theme-light .text-violet-300,
.text-violet-300 { color: var(--kap-primary-light) !important; }
html.theme-light .text-violet-500 { color: var(--kap-primary-dark) !important; }
html.theme-light .text-violet-600 { color: var(--kap-primary-darker) !important; }

html.theme-light .group:hover .group-hover\:text-violet-300,
.group:hover .group-hover\:text-violet-300 { color: var(--kap-primary-light) !important; }
html.theme-light .group:hover .group-hover\:text-violet-400,
.group:hover .group-hover\:text-violet-400 { color: var(--kap-primary) !important; }

/* ── Text — cyan → secondary ── */
html.theme-light .text-cyan-400,
.text-cyan-400 { color: var(--kap-secondary) !important; }
html.theme-light .text-cyan-300,
.text-cyan-300 { color: var(--kap-secondary-light) !important; }
html.theme-light .text-cyan-500 { color: var(--kap-secondary-dark) !important; }
html.theme-light .text-cyan-600 { color: var(--kap-secondary-darker) !important; }

/* ── Text — amber → accent ── */
html.theme-light .text-amber-400,
.text-amber-400 { color: var(--kap-accent) !important; }
html.theme-light .text-amber-300 { color: var(--kap-accent-hover) !important; }
html.theme-light .text-amber-500 { color: #b45309 !important; }

/* ── Text — rose keep vivid ── */
html.theme-light .text-rose-400 { color: #be123c !important; }
html.theme-light .text-rose-300 { color: #ffffff !important; }

/* ── Text — emerald ── */
html.theme-light .text-emerald-400 { color: var(--kap-secondary-dark) !important; }
html.theme-light .text-emerald-300 { color: #065f46 !important; }

/* ── Text — red ── */
html.theme-light .text-red-400 { color: #b91c1c !important; }

/* ── Text — large token/price numbers ── */
html.theme-light .text-white { color: #1e293b !important; }
html.theme-light .font-black { font-weight: 900 !important; }

/* ── Borders ── */
html.theme-light .border-white\/5  { border-color: rgba(0,0,0,0.06) !important; }
html.theme-light .border-white\/10 { border-color: rgba(0,0,0,0.09) !important; }
html.theme-light .border-white\/15 { border-color: rgba(0,0,0,0.11) !important; }
html.theme-light .border-white\/20 { border-color: rgba(0,0,0,0.13) !important; }
html.theme-light .border-white\/25 { border-color: rgba(0,0,0,0.16) !important; }
html.theme-light .border-slate-800 { border-color: var(--kap-border-light) !important; }
html.theme-light .border-slate-700 { border-color: var(--kap-border) !important; }

/* ── Glass card → solid white panel (light) ── */
html.theme-light .glass-card {
    background:    rgba(255,255,255,0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-color:  rgba(100, 116, 139, 0.18) !important;
    box-shadow:    0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(148,163,184,0.15) !important;
}

/* ── Sidebars (admin + portal + instructor) ── */
html.theme-light aside {
    background-color:  #ffffff !important;
    border-right-color: var(--kap-border-light) !important;
}
html.theme-light aside .border-slate-800 { border-color: var(--kap-border-light) !important; }
html.theme-light aside .bg-slate-700     { background-color: var(--kap-border-light) !important; }
html.theme-light aside .hover\:bg-slate-800:hover { background-color: var(--kap-bg-alt) !important; }

/* ── Footer ── */
html.theme-light footer {
    background-color:   var(--kap-bg-alt) !important;
    border-top-color:   var(--kap-border) !important;
}

/* ── Sticky headers / top-bars ── */
html.theme-light header.sticky,
html.theme-light header.glass-card {
    background: rgba(255,255,255,0.97) !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
}

/* ── Navbar (public, fixed) ── */
html.theme-light header.fixed {
    background: rgba(255,255,255,0.97) !important;
    border-bottom: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06) !important;
}

/* ── Form inputs ── */
html.theme-light input:not([type=checkbox]):not([type=radio]),
html.theme-light textarea,
html.theme-light select {
    background-color: #ffffff !important;
    border-color:     var(--kap-border) !important;
    color:            #0f172a !important;
}
html.theme-light input::placeholder,
html.theme-light textarea::placeholder { color: #94a3b8 !important; }

/* ── Grid / background patterns ── */
html.theme-light .bg-grid-pattern { opacity: 0.06 !important; }

/* ── Hero overlay (light) ── */
html.theme-light .hero-overlay {
    background: linear-gradient(135deg,
        rgba(29, 77, 92, 0.65) 0%,
        rgba(245, 247, 250, 0.45) 50%,
        rgba(13, 148, 136, 0.35) 100%) !important;
}

/* ── Prose content (light) ── */
html.theme-light .prose-kapaciti p          { color: #475569 !important; }
html.theme-light .prose-kapaciti h2,
html.theme-light .prose-kapaciti h3         { color: #1e293b !important; }
html.theme-light .prose-kapaciti blockquote { color: #64748b !important; }

/* ═══════════════════════════════════════════════════════════
   TOKEN PRICE — guaranteed visibility in both themes
   ═══════════════════════════════════════════════════════════ */

/* ── CourseCard overlay badge: dark bg in default, light bg in light ── */

/* Light mode: badge gets a light background so dark text is visible */
html.theme-light .token-price {
    background-color: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #1e293b !important;
}

/* Catch text-white / text-slate-* inside token-price containers */
html.theme-light .token-price .text-white,
html.theme-light .token-price .text-slate-100,
html.theme-light .token-price .text-slate-200 {
    color: #1e293b !important;
}

/* Light: amber coin icon inside token price → darker for contrast */
html.theme-light .token-price .text-amber-400 {
    color: #d97706 !important;
}

/* Light: "tokens" label stays readable */
html.theme-light .token-price .text-slate-500 {
    color: #64748b !important;
}

/* Light mode: button text visibility - keep white for buttons */
html.theme-light button .text-white,
html.theme-light .btn .text-white,
html.theme-light .passkey-btn .text-white {
    color: #ffffff !important;
}

/* ── Google sign-in button on light mode ── */
html.theme-light a[href*="login-google"] {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.15) !important;
}
html.theme-light a[href*="login-google"]:hover {
    background: rgba(0,0,0,0.06) !important;
}

/* ── Enroll modal price row on light mode ── */
html.theme-light .rounded-xl.bg-white\/5.border {
    background: rgba(0,0,0,0.03) !important;
}

/* ── Course viewer — dark sidebar keeps white text ── */
.kap-course-viewer .text-white { color: #ffffff !important; }
html.theme-light .kap-course-viewer .text-white { color: #ffffff !important; }
.kap-course-viewer .text-slate-200 { color: #e2e8f0 !important; }
html.theme-light .kap-course-viewer .text-slate-200 { color: #e2e8f0 !important; }

/* ═══════════════════════════════════════════════════════════
   BRAND-COLOR UTILITY CLASSES (for direct component use)
   ═══════════════════════════════════════════════════════════ */

.text-primary { color: var(--kap-primary) !important; }
.text-primary-dark { color: var(--kap-primary-dark) !important; }
.text-primary-light { color: var(--kap-primary-light) !important; }
.text-secondary { color: var(--kap-secondary) !important; }
.text-secondary-light { color: var(--kap-secondary-light) !important; }
.text-accent { color: var(--kap-accent) !important; }

.bg-primary { background-color: var(--kap-primary) !important; }
.bg-primary-dark { background-color: var(--kap-primary-dark) !important; }
.bg-primary-light { background-color: var(--kap-primary-light) !important; }
.bg-secondary { background-color: var(--kap-secondary) !important; }
.bg-surface { background-color: var(--kap-surface) !important; }

.border-primary { border-color: var(--kap-primary) !important; }
.border-secondary { border-color: var(--kap-secondary) !important; }

/* Gradient backgrounds */
.bg-gradient-brand {
    background: linear-gradient(135deg, var(--kap-primary), var(--kap-secondary)) !important;
}

/* Brand shadow */
.shadow-brand-sm { box-shadow: 0 1px 3px rgba(38, 97, 117, 0.2) !important; }
.shadow-brand-md { box-shadow: 0 4px 6px rgba(38, 97, 117, 0.25) !important; }
.shadow-brand-lg { box-shadow: 0 10px 15px rgba(38, 97, 117, 0.3) !important; }

/* Sidebar nav link active states */
.sidenav-active-primary { color: #266175 !important; background-color: rgba(38, 97, 117, 0.10) !important; }
.sidenav-active-secondary { color: #0d9488 !important; background-color: rgba(13, 148, 136, 0.10) !important; }
.sidenav-active-amber { color: #f59e0b !important; background-color: rgba(245, 158, 11, 0.10) !important; }

/* Sidebar nav link default hover (expanded) */
.sidenav-hover { color: #94a3b8; }
.sidenav-hover:hover { color: #e2e8f0; background-color: rgba(255,255,255,0.05); }

/* Sidebar nav link collapsed */
.sidenav-collapsed { color: #94a3b8; }
.sidenav-collapsed:hover { color: #e2e8f0; }

/* ── Justify long text ── */
p, .prose-kapaciti, .prose-kapaciti p,
.course-description, .about-section p,
.news-content, .article-content,
[class*="leading-relaxed"],
[class*="prose-"] p { text-align: justify; }

/* StatCard gradient backgrounds */
.statcard-primary { background: linear-gradient(135deg, rgba(38,97,117,0.20), rgba(29,77,92,0.05)) !important; border-color: rgba(38,97,117,0.20) !important; }
.statcard-secondary { background: linear-gradient(135deg, rgba(13,148,136,0.20), rgba(15,118,110,0.05)) !important; border-color: rgba(13,148,136,0.20) !important; }
.statcard-amber { background: linear-gradient(135deg, rgba(245,158,11,0.20), rgba(217,119,6,0.05)) !important; border-color: rgba(245,158,11,0.20) !important; }
.statcard-rose { background: linear-gradient(135deg, rgba(244,63,94,0.20), rgba(225,29,72,0.05)) !important; border-color: rgba(244,63,94,0.20) !important; }
.statcard-emerald { background: linear-gradient(135deg, rgba(16,185,129,0.20), rgba(5,150,105,0.05)) !important; border-color: rgba(16,185,129,0.20) !important; }
.statcard-indigo { background: linear-gradient(135deg, rgba(99,102,241,0.20), rgba(67,56,202,0.05)) !important; border-color: rgba(99,102,241,0.20) !important; }
.statcard-orange { background: linear-gradient(135deg, rgba(249,115,22,0.20), rgba(194,65,12,0.05)) !important; border-color: rgba(249,115,22,0.20) !important; }
.statcard-slate { background: linear-gradient(135deg, rgba(100,116,139,0.20), rgba(51,65,85,0.05)) !important; border-color: rgba(100,116,139,0.20) !important; }

/* ── Session Room — light mode overrides ── */
html.theme-light #sessionRoot,
html.theme-light #sessionRoot * {
    color-scheme: light;
}
html.theme-light #sessionRoot .bg-slate-950 { background-color: #f1f5f9 !important; }
html.theme-light #sessionRoot .bg-slate-900\/80 { background-color: rgba(255,255,255,0.95) !important; }
html.theme-light #sessionRoot .bg-slate-900 { background-color: #f8fafc !important; }
html.theme-light #sessionRoot .bg-slate-800 { background-color: #f1f5f9 !important; }
html.theme-light #sessionRoot .bg-slate-800\/90 { background-color: rgba(241,245,249,0.95) !important; }
html.theme-light #sessionRoot .bg-black\/60 { background-color: rgba(0,0,0,0.45) !important; }
html.theme-light #sessionRoot .bg-slate-700 { background-color: #e2e8f0 !important; }
html.theme-light #sessionRoot .text-white { color: #1e293b !important; }
html.theme-light #sessionRoot .video-label,
html.theme-light #sessionRoot .video-label .text-white { color: #ffffff !important; }
html.theme-light #sessionRoot .text-slate-100 { color: #1e293b !important; }
html.theme-light #sessionRoot .text-slate-200 { color: #334155 !important; }
html.theme-light #sessionRoot .text-slate-300 { color: #475569 !important; }
html.theme-light #sessionRoot .text-slate-400 { color: #64748b !important; }
html.theme-light #sessionRoot .text-slate-500 { color: #94a3b8 !important; }
html.theme-light #sessionRoot .text-slate-600 { color: #94a3b8 !important; }
html.theme-light #sessionRoot .placeholder-slate-500 { color: #94a3b8 !important; }
html.theme-light #sessionRoot .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; }
html.theme-light #sessionRoot .border-white\/10 { border-color: rgba(0,0,0,0.10) !important; }
html.theme-light #sessionRoot .hover\:bg-white\/\[0\.02\]:hover { background-color: rgba(0,0,0,0.03) !important; }
html.theme-light #sessionRoot .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,0.04) !important; }
html.theme-light #sessionRoot .hover\:text-white:hover { color: #1e293b !important; }
html.theme-light #sessionRoot input,
html.theme-light #sessionRoot textarea,
html.theme-light #sessionRoot select {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-color: rgba(0,0,0,0.12) !important;
}
html.theme-light #sessionRoot input::placeholder,
html.theme-light #sessionRoot textarea::placeholder {
    color: #94a3b8 !important;
}
html.theme-light #sessionRoot .disabled\:bg-slate-700:disabled { background-color: #e2e8f0 !important; color: #94a3b8 !important; }
html.theme-light #sessionRoot .disabled\:text-slate-500:disabled { color: #94a3b8 !important; }

/* ── Session Room — dark mode contrast boost ── */
#sessionRoot .text-slate-500 { color: #94a3b8 !important; }
#sessionRoot .text-slate-600 { color: #94a3b8 !important; }
#sessionRoot .placeholder-slate-500::placeholder { color: #94a3b8 !important; }
#sessionRoot .text-slate-500\/80 { color: rgba(148,163,184,0.8) !important; }
#sessionRoot .disabled\:text-slate-500:disabled { color: #64748b !important; }