/* ALPRO-LAB CUSTOM STYLES & DUAL THEMES */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Quicksand:wght@500;600;700&display=swap');

:root {
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-cute: 'Quicksand', 'Plus Jakarta Sans', sans-serif;
}

body {
  font-family: var(--font-sans);
  transition: background-color 0.3s ease, color 0.3s ease;
}

code, pre, .font-mono {
  font-family: var(--font-mono);
}

/* ========================================================
   TEMA 2: PINK & SORBET PALETTE (@cattobiens)
   Warna: #FFCAD6, #E9CBE5, #F44F83, #EE9DBD
   ======================================================== */
html.theme-pink-sorbet body {
  background-color: #FFF2F6;
  color: #38101E;
  font-family: var(--font-cute);
}

/* Header in Pink & Sorbet */
html.theme-pink-sorbet header {
  background-color: rgba(255, 245, 248, 0.95);
  border-bottom: 2px solid #FFCAD6;
}

html.theme-pink-sorbet header .text-white {
  color: #881337 !important;
}

/* Surfaces and Cards */
html.theme-pink-sorbet .bg-slate-900,
html.theme-pink-sorbet .bg-slate-850,
html.theme-pink-sorbet .bg-slate-800,
html.theme-pink-sorbet .bg-slate-800\/80,
html.theme-pink-sorbet .bg-slate-800\/60,
html.theme-pink-sorbet .bg-slate-800\/40,
html.theme-pink-sorbet .bg-slate-900\/90,
html.theme-pink-sorbet .bg-slate-900\/80,
html.theme-pink-sorbet .bg-slate-900\/70,
html.theme-pink-sorbet .bg-slate-900\/60 {
  background-color: #FFFFFF !important;
  border-color: #FFCAD6 !important;
  color: #4C0519 !important;
  box-shadow: 0 4px 20px -2px rgba(244, 79, 131, 0.08);
}

html.theme-pink-sorbet .bg-slate-950,
html.theme-pink-sorbet .bg-slate-950\/70 {
  background-color: #FFF8FA !important;
  border-color: #EE9DBD !important;
}

/* Text colors in Pink & Sorbet */
html.theme-pink-sorbet .text-slate-400,
html.theme-pink-sorbet .text-slate-500 {
  color: #9F5870 !important;
}

html.theme-pink-sorbet .text-slate-300,
html.theme-pink-sorbet .text-slate-200,
html.theme-pink-sorbet .text-white {
  color: #4C0519 !important;
}

html.theme-pink-sorbet .border-slate-800,
html.theme-pink-sorbet .border-slate-700,
html.theme-pink-sorbet .border-slate-700\/60,
html.theme-pink-sorbet .border-slate-700\/70,
html.theme-pink-sorbet .border-slate-700\/80 {
  border-color: #FFCAD6 !important;
}

/* Accent Buttons */
html.theme-pink-sorbet .bg-sky-500,
html.theme-pink-sorbet .bg-sky-600 {
  background-color: #F44F83 !important;
  color: #FFFFFF !important;
}

html.theme-pink-sorbet .text-sky-400,
html.theme-pink-sorbet .text-sky-300 {
  color: #F44F83 !important;
}

html.theme-pink-sorbet .bg-sky-500\/10,
html.theme-pink-sorbet .bg-sky-500\/20 {
  background-color: #FFE6EE !important;
  color: #F44F83 !important;
  border-color: #EE9DBD !important;
}

html.theme-pink-sorbet .bg-purple-600 {
  background-color: #D28BB5 !important;
}

html.theme-pink-sorbet .bg-purple-500\/20 {
  background-color: #E9CBE5 !important;
  color: #70265B !important;
}

/* Terminal Window in Pink & Sorbet */
html.theme-pink-sorbet .terminal-window {
  background-color: #2A1725 !important;
  border: 2px solid #EE9DBD !important;
}

html.theme-pink-sorbet .terminal-header {
  background-color: #3D2235 !important;
  border-bottom: 1px solid #5C3250 !important;
}

/* Hero gradient in Pink & Sorbet */
html.theme-pink-sorbet .bg-gradient-to-br.from-slate-900 {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF0F5 50%, #FFE4ED 100%) !important;
  border: 2px solid #FFCAD6 !important;
}

/* ========================================================
   CANVAS ANIMATOR STYLING ("Bioskop Simulasi")
   ======================================================== */
.canvas-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 800 / 420;
  max-height: 480px;
  background: #000;
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
}

#anim-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0f172a;
}
html.theme-pink-sorbet ::-webkit-scrollbar-track {
  background: #FFF2F6;
}
::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}
html.theme-pink-sorbet ::-webkit-scrollbar-thumb {
  background: #EE9DBD;
}

/* ========================================================
   CODE INTERACTIVE ROWS & TEXT STYLING
   ======================================================== */
.uts-code-row {
  transition: background-color 0.15s ease;
}
.uts-code-row:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.uts-code-lineno {
  color: #64748B;
}
.uts-code-text {
  color: #F1F5F9; /* Crisp bright text in default dark mode */
}
.uts-code-comment {
  color: #94A3B8; /* Clear readable comment */
  font-style: italic;
}

/* UTS Blank Inputs (Base / Dark Mode) */
.uts-blank-input {
  background-color: rgba(245, 158, 11, 0.18) !important;
  color: #FEF08A !important;
  border: 2px dashed #F59E0B !important;
  font-weight: 700 !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.2);
}
.uts-blank-input::placeholder {
  color: #FCD34D !important;
  opacity: 0.85;
}
.uts-blank-input:focus {
  background-color: rgba(245, 158, 11, 0.3) !important;
  color: #FFFFFF !important;
  border-color: #FDE047 !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}
.uts-blank-input.uts-blank-correct {
  background-color: rgba(16, 185, 129, 0.25) !important;
  color: #34D399 !important;
  border: 2px solid #10B981 !important;
}
.uts-blank-input.uts-blank-wrong {
  background-color: rgba(244, 63, 94, 0.25) !important;
  color: #FB7185 !important;
  border: 2px solid #F43F5E !important;
}

/* Terminal Consoles Base */
#uts-terminal-output, #sim-terminal-output {
  color: #4ADE80;
}
#uts-terminal-output .text-slate-500, #sim-terminal-output .text-slate-500 {
  color: #94A3B8 !important;
}

/* ========================================================
   HIGH-CONTRAST OVERRIDES FOR THEME PINK & SORBET
   ======================================================== */
/* Code Editor in Pink & Sorbet - Ultra sharp & visible */
html.theme-pink-sorbet .uts-code-row:hover {
  background-color: #FFE6EE !important;
}

html.theme-pink-sorbet .uts-code-lineno {
  color: #9F5870 !important;
  font-weight: 700 !important;
}

/* The code text in Pink theme: Solid Dark Slate, 100% visible on light pink */
html.theme-pink-sorbet .uts-code-text {
  color: #18181B !important;
  font-weight: 600 !important;
}

html.theme-pink-sorbet .uts-code-comment {
  color: #52525B !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* Blank inputs in Pink & Sorbet - bright warm badge with bold dark text */
html.theme-pink-sorbet .uts-blank-input {
  background-color: #FEF3C7 !important;
  color: #78350F !important;
  border: 2px dashed #D97706 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 6px rgba(217, 119, 6, 0.25) !important;
}
html.theme-pink-sorbet .uts-blank-input::placeholder {
  color: #92400E !important;
  opacity: 0.85 !important;
  font-weight: 700 !important;
}
html.theme-pink-sorbet .uts-blank-input:focus {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-color: #B45309 !important;
  box-shadow: 0 0 10px rgba(180, 83, 9, 0.4) !important;
}

/* Correct answers & wrong answers in Pink theme */
html.theme-pink-sorbet .uts-blank-input.uts-blank-correct,
html.theme-pink-sorbet .uts-blank-input.bg-emerald-500\/30 {
  background-color: #DCFCE7 !important;
  color: #14532D !important;
  border: 2px solid #16A34A !important;
}
html.theme-pink-sorbet .uts-blank-input.uts-blank-wrong,
html.theme-pink-sorbet .uts-blank-input.bg-rose-500\/30 {
  background-color: #FFE4E6 !important;
  color: #881337 !important;
  border: 2px solid #E11D48 !important;
}

/* Playground Code Textarea in Pink & Sorbet */
html.theme-pink-sorbet #sim-code-editor {
  background-color: #FFFFFF !important;
  color: #18181B !important;
  border: 1px solid #EE9DBD !important;
  font-weight: 600 !important;
}

/* Text sky-200 in Pink & Sorbet (fallback for any code container) */
html.theme-pink-sorbet .text-sky-200 {
  color: #18181B !important;
  font-weight: 600 !important;
}

/* Terminal Console in Pink & Sorbet */
html.theme-pink-sorbet #uts-terminal-output,
html.theme-pink-sorbet #sim-terminal-output {
  color: #4ADE80 !important;
  font-weight: 500 !important;
}
html.theme-pink-sorbet #uts-terminal-output .text-slate-500,
html.theme-pink-sorbet #sim-terminal-output .text-slate-500 {
  color: #E2E8F0 !important;
}

/* Amber text & badges high-contrast in Pink & Sorbet */
html.theme-pink-sorbet .text-amber-400,
html.theme-pink-sorbet .text-amber-300 {
  color: #9A3412 !important;
  font-weight: 700 !important;
}
html.theme-pink-sorbet .bg-amber-500\/10,
html.theme-pink-sorbet .bg-amber-400\/20 {
  background-color: #FEF3C7 !important;
  border-color: #FCD34D !important;
}
html.theme-pink-sorbet #uts-timer-display {
  color: #EA580C !important;
  font-weight: 800 !important;
}
html.theme-pink-sorbet #uts-covered-modules {
  color: #9A3412 !important;
  background-color: #FEF3C7 !important;
  border-color: #FCD34D !important;
  font-weight: 700 !important;
}

/* Pre & Code blocks in Pink & Sorbet */
html.theme-pink-sorbet pre {
  background-color: #FFF2F6 !important;
  color: #18181B !important;
  border: 1px solid #FFCAD6 !important;
}
html.theme-pink-sorbet pre code,
html.theme-pink-sorbet code {
  color: #881337 !important;
  font-weight: 600 !important;
}

/* Terminal Console Styling */
.terminal-window {
  background: #0b0f19;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

.terminal-header {
  background: #111827;
  border-bottom: 1px solid #1f2937;
}

.terminal-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

/* Certificate Print Optimization */
@media print {
  body * {
    visibility: hidden;
  }
  #certificate-box, #certificate-box *,
  #uts-result-box, #uts-result-box * {
    visibility: visible;
  }
  #certificate-box, #uts-result-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    max-width: 100% !important;
    border: 3px solid #d97706 !important;
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
}