/* jelito.cloud theming — matches cerebro */

/* ===== CSS VARIABLE OVERRIDES ===== */
:root {
  --background: #020617 !important;
  --surfacePrimary: #0f172a !important;
  --surfaceSecondary: #1e293b !important;
  --surfaceTertiary: #0f172a !important;
  --textPrimary: #e2e8f0 !important;
  --textSecondary: #94a3b8 !important;
  --textTertiary: #64748b !important;
  --divider: rgba(255,255,255,0.08) !important;
  --borderPrimary: rgba(255,255,255,0.08) !important;
  --icon: #06b6d4 !important;
  --iconSecondary: #06b6d4 !important;
  --iconTertiary: #0f172a !important;
  --blue: #3b82f6 !important;
  --blueSecondary: #06b6d4 !important;
  --navHover: rgba(6,182,212,0.15) !important;
  --white: #e2e8f0 !important;
  --card: rgba(15,23,42,0.9) !important;
  --headerBackground: rgba(15,23,42,0.8) !important;
}

/* ===== ANIMATED BACKGROUND ===== */
body {
  background: #020617 !important;
  color: #e2e8f0 !important;
}

body::before {
  content: "";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    radial-gradient(circle at 20%, rgba(6,182,212,0.25), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(59,130,246,0.25), transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(139,92,246,0.22), transparent 50%),
    radial-gradient(circle at 60% 70%, rgba(236,72,153,0.18), transparent 50%);
  animation: abstract-shift 25s ease-in-out infinite;
}

@keyframes abstract-shift {
  0%, 100% { opacity: 0.4; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.5; transform: scale(1.08) rotate(2deg); }
}

body::after {
  content: "";
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: repeating-linear-gradient(
    rgba(148,163,184,0.04), rgba(148,163,184,0.04) 1px,
    transparent 1px, transparent 4px
  );
}

#app, #app > div {
  position: relative;
  z-index: 1;
}

/* ===== HEADER / TOOLBAR ===== */
header {
  background: rgba(15,23,42,0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

/* ===== SIDEBAR / NAV ===== */
nav {
  background: rgba(15,23,42,0.9) !important;
  backdrop-filter: blur(12px) !important;
}

/* Progress bar (disk usage) */
.vue-simple-progress {
  background: rgba(255,255,255,0.1) !important;
}

.vue-simple-progress-bar {
  background: linear-gradient(90deg, #06b6d4, #3b82f6) !important;
}

/* ===== SEARCH ===== */
#input {
  background: rgba(30,41,59,0.9) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
}

#input input {
  background: transparent !important;
  color: #e2e8f0 !important;
}

#input input::placeholder {
  color: #64748b !important;
}

#result {
  background: rgba(15,23,42,0.95) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
}

/* ===== LOGIN PAGE ===== */
.login {
  background: #020617 !important;
}

.login .card {
  background: rgba(15,23,42,0.7) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 24px rgba(6,182,212,0.1) !important;
}

.login input[type="submit"],
.login button[type="submit"] {
  background: linear-gradient(135deg, #06b6d4, #3b82f6) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.login input:not([type="submit"]) {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: #e2e8f0 !important;
  border-radius: 8px !important;
}

.login input:not([type="submit"]):focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 2px rgba(6,182,212,0.2) !important;
}

/* ===== MODALS / OVERLAYS ===== */
.overlay {
  background: rgba(2,6,23,0.85) !important;
}

.prompt .card, .modal .card {
  background: rgba(15,23,42,0.95) !important;
  border: 1px solid rgba(6,182,212,0.2) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(6,182,212,0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(6,182,212,0.5); }
* { scrollbar-width: thin; scrollbar-color: rgba(6,182,212,0.3) transparent; }