/* ==========================================================================
   Zero-G Compiler — Modern React IDE Stylesheet
   Complete, Self-Contained, Professional Dark & Light IDE Themes
   ========================================================================== */

/* ── Dark Theme (Default) ─────────────────────────────────────────────────── */
:root, [data-theme="dark"] {
  --bg-app:          #0a0a0c;
  --bg-header:       #121316;
  --bg-sidebar:      #0e0f12;
  --bg-panel-header: #15161b;
  --bg-editor:       #0a0a0c;
  --bg-output:       #0d0e12;
  --bg-card:         #15171c;
  --bg-card-hover:   #1c1f26;
  --bg-card-active:  rgba(168, 85, 247, 0.15);
  --bg-control:      #1a1c23;
  --bg-control-hover:#242832;
  --bg-input:        #121419;

  --text-primary:    #f1f5f9;
  --text-secondary:  #cbd5e1;
  --text-muted:      #94a3b8;
  --text-faint:      #64748b;
  --text-inverse:    #0f172a;

  --border-strong:   #2e3340;
  --border-default:  #20242d;
  --border-subtle:   rgba(255, 255, 255, 0.08);

  --accent-purple:   #a855f7;
  --accent-purple-light: #c084fc;
  --accent-blue:     #3b82f6;
  --accent-blue-light:#60a5fa;
  --accent-green:    #22c55e;
  --accent-green-btn:#16a34a;
  --accent-green-hover:#15803d;
  --accent-amber:    #f59e0b;
  --accent-red:      #ef4444;
  --accent-red-bg:   rgba(239, 68, 68, 0.12);
  --accent-red-border:rgba(239, 68, 68, 0.3);

  --scrollbar-track: #0e0f12;
  --scrollbar-thumb: #2a2e3a;
  --scrollbar-hover: #3d4354;

  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:       0 12px 28px rgba(0, 0, 0, 0.5);
}

/* ── Light Theme ──────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-app:          #f1f5f9;
  --bg-header:       #ffffff;
  --bg-sidebar:      #f8fafc;
  --bg-panel-header: #f1f5f9;
  --bg-editor:       #ffffff;
  --bg-output:       #ffffff;
  --bg-card:         #ffffff;
  --bg-card-hover:   #f1f5f9;
  --bg-card-active:  rgba(124, 58, 237, 0.08);
  --bg-control:      #ffffff;
  --bg-control-hover:#f1f5f9;
  --bg-input:        #ffffff;

  --text-primary:    #0f172a;  /* deep rich dark slate */
  --text-secondary:  #1e293b;  /* clear dark slate */
  --text-muted:      #475569;  /* readable medium slate */
  --text-faint:      #64748b;  /* secondary hint text */
  --text-inverse:    #ffffff;

  --border-strong:   #cbd5e1;  /* slate-300: crisp, clear border */
  --border-default:  #e2e8f0;  /* slate-200 */
  --border-subtle:   #e2e8f0;

  --accent-purple:   #7c3aed;
  --accent-purple-light: #8b5cf6;
  --accent-blue:     #2563eb;
  --accent-blue-light:#3b82f6;
  --accent-green:    #15803d;
  --accent-green-btn:#16a34a;
  --accent-green-hover:#15803d;
  --accent-amber:    #d97706;
  --accent-red:      #dc2626;
  --accent-red-bg:   #fef2f2;
  --accent-red-border:#fecaca;

  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-hover: #94a3b8;

  --shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:       0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg:       0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
}

/* ── Base Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root {
  width: 100%;
  height: 100%;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Custom Scrollbars ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* ── Layout & Semantic Component Classes ──────────────────────────────────── */

/* Top Navigation Header */
.header-bar {
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Sidebars and Panels */
.panel-sidebar {
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-strong);
  color: var(--text-primary);
}

.panel-header {
  background-color: var(--bg-panel-header);
  border-bottom: 1px solid var(--border-strong);
  color: var(--text-primary);
}

.panel-footer {
  background-color: var(--bg-panel-header);
  border-top: 1px solid var(--border-strong);
  color: var(--text-muted);
}

.panel-output {
  background-color: var(--bg-output);
  color: var(--text-primary);
}

.split-divider {
  border-right: 1px solid var(--border-strong);
}

/* Toolbar Control Badges / Buttons */
.btn-control {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.375rem;
  background-color: var(--bg-control);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.btn-control:hover {
  background-color: var(--bg-control-hover);
  color: var(--text-primary);
  border-color: var(--accent-purple);
}

/* Toggle Badges (Auto Suggest, Auto Run, Split) */
.toggle-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.65rem;
  border-radius: 0.375rem;
  background-color: var(--bg-control);
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.toggle-badge:hover {
  background-color: var(--bg-control-hover);
  color: var(--text-primary);
}

.toggle-badge input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--accent-purple);
}

/* Icon Buttons (Theme toggle, Reset, Sidebar toggle, Trash, etc.) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem;
  border-radius: 0.375rem;
  background-color: transparent;
  color: var(--text-muted);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.btn-icon:hover {
  background-color: var(--bg-control-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* File Tab */
.file-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.65rem;
  border-radius: 0.375rem;
  background-color: var(--bg-control);
  border: 1px solid var(--border-strong);
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.75rem;
  color: var(--text-primary);
  font-weight: 500;
}

/* Primary Action Buttons */
.btn-run {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 0.375rem;
  background-color: var(--accent-green-btn);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
}

.btn-run:hover:not(:disabled) {
  background-color: var(--accent-green-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
}

.btn-run:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-save {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--bg-control);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s ease;
}

.btn-save:hover {
  background-color: var(--bg-control-hover);
  border-color: var(--text-muted);
}

/* Textarea Input */
.textarea-input {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  padding: 0.75rem;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  resize: none;
  outline: none;
  transition: border-color 0.15s ease;
}

.textarea-input:focus {
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

.textarea-input::placeholder {
  color: var(--text-faint);
  opacity: 0.8;
}

/* Task Item Card */
.task-card {
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  transition: all 0.15s ease;
  box-shadow: var(--shadow-sm);
}

.task-card:hover {
  background-color: var(--bg-card-hover);
  border-color: var(--accent-purple);
}

.task-card.active {
  background-color: var(--bg-card-active);
  border-color: var(--accent-purple);
  box-shadow: 0 0 0 1px var(--accent-purple);
}

/* Programiz-style Error Box */
.error-card {
  margin: 0.75rem;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--accent-red-border);
  box-shadow: var(--shadow-sm);
}

.error-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background-color: var(--accent-red-bg);
  border-bottom: 1px solid var(--accent-red-border);
  color: var(--accent-red);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.error-card-body {
  padding: 0.65rem 0.75rem;
  background-color: var(--accent-red-bg);
  color: var(--accent-red);
  font-size: 0.75rem;
  line-height: 1.6;
  font-family: 'JetBrains Mono', Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Standard Utility Classes ─────────────────────────────────────────────── */
.h-screen { height: 100vh; }
.w-full   { width: 100%; }
.h-full   { height: 100%; }
.h-14     { height: 3.5rem; }
.h-12     { height: 3rem; }
.h-10     { height: 2.5rem; }
.h-9      { height: 2.25rem; }
.h-8      { height: 2rem; }
.h-5      { height: 1.25rem; }
.h-48     { height: 12rem; }
.h-64     { height: 16rem; }
.w-8      { width: 2rem; }
.w-80     { width: 20rem; }
.w-96     { width: 24rem; }
.h-4      { height: 1rem; }
.w-4      { width: 1rem; }
.h-3\.5   { height: 0.875rem; }
.w-3\.5   { width: 0.875rem; }
.h-3      { height: 0.75rem; }
.w-3      { width: 0.75rem; }
.w-2      { width: 0.5rem; }
.h-2      { height: 0.5rem; }
.w-1\.5   { width: 0.375rem; }
.h-1\.5   { height: 0.375rem; }
.w-px     { width: 1px; }
.h-px     { height: 1px; }

.min-h-0  { min-height: 0; }
.min-w-0  { min-width: 0; }
.min-h-\[160px\] { min-height: 160px; }

.flex-shrink-0 { flex-shrink: 0; }
.flex-1        { flex: 1 1 0%; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col    { flex-direction: column; }
.flex-row    { flex-direction: row; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }

.gap-1    { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2    { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3    { gap: 0.75rem; }

.space-y-1   > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; }
.space-y-2   > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; }

.p-0\.5 { padding: 0.125rem; }
.p-1    { padding: 0.25rem; }
.p-1\.5 { padding: 0.375rem; }
.p-2    { padding: 0.5rem; }
.p-2\.5 { padding: 0.625rem; }
.p-3    { padding: 0.75rem; }
.p-4    { padding: 1rem; }
.px-1   { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-2   { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.px-3   { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-4   { padding-left: 1rem; padding-right: 1rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1   { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2   { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3   { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.pt-1   { padding-top: 0.25rem; }
.pt-3   { padding-top: 0.75rem; }

.m-0   { margin: 0; }
.mx-1  { margin-left: 0.25rem; margin-right: 0.25rem; }
.ml-auto { margin-left: auto; }
.mt-0\.5 { margin-top: 0.125rem; }
.mb-1  { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-2  { margin-bottom: 0.5rem; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.inset-0  { inset: 0; }
.z-10     { z-index: 10; }
.z-20     { z-index: 20; }

.hidden      { display: none !important; }
.block       { display: block; }
.select-none { user-select: none; }
.select-text { user-select: text; }
.cursor-pointer     { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

.border     { border: 1px solid var(--border-strong); }
.border-t   { border-top: 1px solid var(--border-strong); }
.border-b   { border-bottom: 1px solid var(--border-strong); }
.border-r   { border-right: 1px solid var(--border-strong); }
.border-b-2 { border-bottom-width: 2px; }
.border-transparent { border-color: transparent !important; }

.rounded    { border-radius: 0.25rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

.text-\[9px\]  { font-size: 9px; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[13px\] { font-size: 13px; }
.text-xs       { font-size: 0.75rem;  line-height: 1rem; }
.text-sm       { font-size: 0.875rem; line-height: 1.25rem; }
.text-base     { font-size: 1rem;     line-height: 1.5rem; }

.font-mono    { font-family: 'JetBrains Mono', Consolas, monospace; }
.font-sans    { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.font-medium  { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold    { font-weight: 700; }

.tracking-wider { letter-spacing: 0.05em; }
.uppercase      { text-transform: uppercase; }
.leading-none   { line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.whitespace-pre-wrap { white-space: pre-wrap; word-break: break-word; }
.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-through   { text-decoration: line-through; }

/* Colors mapped to theme variables */
.text-white      { color: var(--text-primary); }
.text-gray-200   { color: var(--text-primary); }
.text-gray-300   { color: var(--text-secondary); }
.text-gray-400   { color: var(--text-muted); }
.text-gray-500   { color: var(--text-faint); }
.text-gray-600   { color: var(--text-faint); }

.text-purple-400 { color: var(--accent-purple-light); }
.text-blue-400   { color: var(--accent-blue-light); }
.text-blue-300   { color: var(--accent-blue-light); }
.text-green-500  { color: var(--accent-green); }
.text-green-400  { color: var(--accent-green); }
.text-emerald-400 { color: var(--accent-green); }
.text-amber-400  { color: var(--accent-amber); }
.text-amber-300  { color: var(--accent-amber); }
.text-red-400    { color: var(--accent-red); }
.text-red-300    { color: var(--accent-red); }

/* Backgrounds mapped to theme variables */
.bg-app          { background-color: var(--bg-app); }
.bg-header       { background-color: var(--bg-header); }
.bg-sidebar      { background-color: var(--bg-sidebar); }
.bg-panel-header { background-color: var(--bg-panel-header); }
.bg-control      { background-color: var(--bg-control); }

/* Legacy support mappings */
.bg-\[\#0a0a0c\] { background-color: var(--bg-app); }
.bg-\[\#0f0f11\] { background-color: var(--bg-sidebar); }
.bg-\[\#131315\] { background-color: var(--bg-panel-header); }
.bg-\[\#0d0d0f\] { background-color: var(--bg-output); }
.bg-\[\#1a1a1f\] { background-color: var(--bg-control); }
.bg-\[\#18181c\] { background-color: var(--bg-control-hover); }
.bg-\[\#1e293b\] { background-color: var(--bg-control); }

.border-white\/5  { border-color: var(--border-subtle); }
.border-white\/10 { border-color: var(--border-strong); }
.border-white\/20 { border-color: var(--border-strong); }

.border-purple-500 { border-color: var(--accent-purple); }

.bg-purple-400 { background-color: var(--accent-purple); }
.bg-purple-500 { background-color: var(--accent-purple); }
.bg-amber-400  { background-color: var(--accent-amber); }

.bg-clip-text     { -webkit-background-clip: text; background-clip: text; }
.text-transparent { color: transparent; }
.bg-gradient-to-r { background-image: linear-gradient(to right, #a855f7, #3b82f6); }
.bg-gradient-to-tr{ background-image: linear-gradient(to top right, #9333ea, #3b82f6); }

/* Buttons & Inputs */
button {
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}

/* Animations */
@keyframes spin  { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-spin  { animation: spin 1s linear infinite; }
.animate-pulse { animation: pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Responsive */
@media (min-width: 640px) {
  .sm\:flex   { display: flex !important; }
  .sm\:block  { display: block !important; }
  .sm\:inline { display: inline !important; }
}

@media (min-width: 768px) {
  .md\:flex-row   { flex-direction: row !important; }
  .md\:w-80       { width: 20rem !important; }
  .md\:h-full     { height: 100% !important; }
  .md\:h-64       { height: 16rem !important; }
  .md\:border-b-0 { border-bottom-width: 0 !important; }
  .md\:border-r   { border-right: 1px solid var(--border-strong) !important; }
  .md\:inline     { display: inline !important; }
}

@media (min-width: 1024px) {
  .lg\:w-96   { width: 24rem !important; }
  .lg\:inline { display: inline !important; }
}

@media (min-width: 1280px) {
  .xl\:hidden { display: none !important; }
  .xl\:inline { display: inline !important; }
}