/* Shared Elytelecom look: dark purple night background + 3D jelly buttons.
   Used by the home page (/) and the dashboard (/dashboard). */
:root {
  --bg: #08070d;
  --panel: #12101c;
  --panel-2: #1a1526;
  --line: #2e2340;
  --purple: #a855f7;
  --pink: #ec38d5;
  --text: #f7f4fb;
  --muted: #aaa4b7;
}

.night-bg {
  background:
    radial-gradient(ellipse at 76% 34%, #35134b 0, transparent 33%),
    radial-gradient(ellipse at 10% 90%, #1c1030 0, transparent 30%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
}

/* ---------- 3D jelly soft buttons ---------- */
.jelly-btn,
.jelly {
  --jelly: #a855f7;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-weight: 700;
  cursor: pointer;
  background-image:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 38%, transparent 55%),
    linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .22) 100%) !important;
  box-shadow:
    inset 0 -6px 10px rgba(0, 0, 0, .28),
    inset 0 4px 8px rgba(255, 255, 255, .35),
    0 6px 0 -1px color-mix(in srgb, var(--jelly) 55%, #000),
    0 12px 26px -6px color-mix(in srgb, var(--jelly) 70%, transparent) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .18s, filter .18s;
  -webkit-tap-highlight-color: transparent;
}
.jelly-btn:hover:not(:disabled),
.jelly:hover {
  animation: jelly-wobble .7s ease both;
  filter: brightness(1.08) saturate(1.1);
}
.jelly-btn:active:not(:disabled),
.jelly:active {
  animation: none;
  transform: scale(1.08, .86) translateY(4px);
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, .3),
    inset 0 4px 10px rgba(255, 255, 255, .3),
    0 2px 0 -1px color-mix(in srgb, var(--jelly) 55%, #000),
    0 4px 12px -4px color-mix(in srgb, var(--jelly) 70%, transparent) !important;
}
.jelly-btn:disabled { cursor: not-allowed; filter: grayscale(.4); }

/* Colour variants (dashboard keeps its Tailwind colour classes) */
.jelly-btn.bg-brand-600, .jelly { --jelly: #a855f7; background-color: #a855f7 !important; }
.jelly.pink { --jelly: #e72ed0; background-color: #e72ed0 !important; }
.jelly-btn.bg-orange-600 { --jelly: #f97316; background-color: #f97316 !important; }
.jelly-btn.bg-green-600 { --jelly: #22c55e; background-color: #22c55e !important; }
.jelly-btn.bg-sky-600 { --jelly: #0ea5e9; background-color: #0ea5e9 !important; }
.jelly-btn.jelly-soft, .jelly.soft { --jelly: #4b3a66; background-color: #2a2140 !important; color: #eadcff !important; }

@keyframes jelly-wobble {
  0%   { transform: scale(1, 1); }
  25%  { transform: scale(1.12, .88); }
  40%  { transform: scale(.9, 1.1); }
  55%  { transform: scale(1.05, .95); }
  70%  { transform: scale(.98, 1.02); }
  100% { transform: scale(1, 1) translateY(-2px); }
}

/* ---------- Dark theme overrides for the Tailwind dashboard ---------- */
body.dark-theme {
  background:
    radial-gradient(ellipse at 76% 34%, #35134b 0, transparent 33%),
    radial-gradient(ellipse at 10% 90%, #1c1030 0, transparent 30%),
    var(--bg) !important;
  color: var(--text);
}
.dark-theme main { background: transparent; }
.dark-theme .bg-white { background-color: rgba(18, 16, 28, .82) !important; backdrop-filter: blur(10px); }
.dark-theme aside.bg-white, .dark-theme aside { background-color: rgba(12, 10, 20, .9) !important; }
.dark-theme .bg-gray-50 { background-color: #1a1526 !important; }
.dark-theme .bg-gray-100 { background-color: #231c33 !important; }
.dark-theme .bg-gray-300 { background-color: #3b3150 !important; }
.dark-theme .bg-gray-800 { background-color: #2a2140 !important; }
.dark-theme .bg-gray-900 { background-color: #000 !important; }
.dark-theme .hover\:bg-gray-50:hover,
.dark-theme .hover\:bg-gray-100:hover,
.dark-theme .hover\:bg-gray-200:hover,
.dark-theme .hover\:bg-white:hover { background-color: #2a2140 !important; }

.dark-theme .border, .dark-theme .border-b, .dark-theme .border-t, .dark-theme .border-r,
.dark-theme .divide-y > * + * { border-color: var(--line) !important; }

.dark-theme .text-gray-800, .dark-theme .text-gray-900, .dark-theme h2, .dark-theme h3 { color: var(--text) !important; }
.dark-theme .text-gray-700, .dark-theme .text-gray-600 { color: #d5d0df !important; }
.dark-theme .text-gray-500 { color: var(--muted) !important; }
.dark-theme .text-gray-400 { color: #7f7891 !important; }
.dark-theme .hover\:text-gray-800:hover { color: #fff !important; }

/* soft tinted surfaces */
.dark-theme .bg-brand-50 { background-color: rgba(168, 85, 247, .12) !important; }
.dark-theme .bg-brand-100 { background-color: rgba(168, 85, 247, .2) !important; }
.dark-theme .bg-green-100 { background-color: rgba(34, 197, 94, .16) !important; }
.dark-theme .bg-emerald-100 { background-color: rgba(16, 185, 129, .16) !important; }
.dark-theme .bg-orange-50 { background-color: rgba(249, 115, 22, .1) !important; }
.dark-theme .bg-orange-100 { background-color: rgba(249, 115, 22, .18) !important; }
.dark-theme .bg-yellow-50 { background-color: rgba(234, 179, 8, .1) !important; }
.dark-theme .bg-yellow-100 { background-color: rgba(234, 179, 8, .18) !important; }
.dark-theme .bg-red-50 { background-color: rgba(239, 68, 68, .1) !important; }
.dark-theme .bg-red-100 { background-color: rgba(239, 68, 68, .18) !important; }
.dark-theme .bg-purple-100 { background-color: rgba(168, 85, 247, .2) !important; }
.dark-theme .text-orange-700, .dark-theme .text-orange-800, .dark-theme .text-orange-900 { color: #fdba74 !important; }
.dark-theme .text-yellow-800 { color: #fde68a !important; }
.dark-theme .text-red-800 { color: #fca5a5 !important; }
.dark-theme .text-green-700 { color: #86efac !important; }

.dark-theme input:not([type=checkbox]):not([type=file]),
.dark-theme select,
.dark-theme textarea {
  background-color: #0f0c18 !important;
  color: var(--text) !important;
  border-color: #3a2d52 !important;
  border-radius: 12px !important;
}
.dark-theme input:focus, .dark-theme select:focus, .dark-theme textarea:focus {
  outline: none;
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, .25);
}
.dark-theme ::placeholder { color: #6f6882 !important; }
.dark-theme code { color: #e9c7ff; }
.dark-theme .shadow-sm { box-shadow: 0 0 40px rgba(156, 55, 213, .08) !important; }
.dark-theme .stat-card:hover { box-shadow: 0 10px 30px -5px rgba(168, 85, 247, .3) !important; }

@media (prefers-reduced-motion: reduce) {
  .jelly-btn:hover:not(:disabled), .jelly:hover { animation: none; }
}