/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * TODO: The glassmorphism theme below is currently duplicated as an inline <style> block
 *       in app/views/layouts/application.html.erb because Propshaft wasn't picking up
 *       this file without a server restart + browser cache bust.
 *
 *       Once the asset pipeline issue is resolved, the proper flow should be:
 *         1. Keep the CSS here (or in glassmorphism.css)
 *         2. Remove the inline <style> block from the layout
 *         3. Rely solely on stylesheet_link_tag "application" (or "glassmorphism")
 *
 *       This file is currently loaded but may be serving a stale cached version.
 */

/*
 * ╔═══════════════════════════════════════════════════════════════╗
 * ║   ERLIST  ·  GLOBAL GLASSMORPHISM DARK THEME  ·  v1.0        ║
 * ║   ──────────────────────────────────────────────────────────  ║
 * ║   ⚡ Pure CSS override layer — no build step, no mercy        ║
 * ║   🔬 Applies to every route via application layout            ║
 * ║   🎨 Mesh gradient + backdrop-filter glass panels everywhere  ║
 * ║   💀 Tailwind's light theme overridden with extreme prejudice ║
 * ╚═══════════════════════════════════════════════════════════════╝
 */

/* ─────────────────────────────────────────────
   § 0  FONT + ROOT
   ─────────────────────────────────────────── */

:root {
  --glass-bg:     rgba(255,255,255,0.065);
  --glass-border: rgba(255,255,255,0.11);
  --glass-blur:   blur(22px) saturate(160%);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.45),
                  inset 0 1px 0 rgba(255,255,255,0.14);
  --accent-blue:   60,120,255;
  --accent-purple: 140,60,255;
  --accent-cyan:   20,200,230;
  --accent-green:  20,200,120;
}

/* ─────────────────────────────────────────────
   § 1  BODY + GLOBAL DARK CANVAS
   ─────────────────────────────────────────── */

body {
  background: #070a12 !important;
  color: rgba(255,255,255,0.87) !important;
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

/* Kill the light page wrapper backgrounds */
.min-h-screen,
.min-h-screen.bg-gray-50 {
  background: transparent !important;
}

/* ─────────────────────────────────────────────
   § 2  GLOBAL SHADER BACKGROUND
   The fixed animated mesh that lives under everything.
   Four drifting gradient blobs — blue, purple, cyan, green.
   ─────────────────────────────────────────── */

#global-shader-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: #070a12;
  overflow: hidden;
  pointer-events: none;
}

/* Grid overlay — gives that "hacker terminal" feel */
#global-shader-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.016) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

/* Vignette */
#global-shader-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 100% 100% at 50% 0%, transparent 60%, rgba(7,10,18,0.7) 100%);
}

.global-mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  mix-blend-mode: screen;
  will-change: transform;
}

.global-mesh-blob:nth-child(1) {
  width: min(75vw, 900px);
  height: min(75vw, 900px);
  background: radial-gradient(circle, rgba(60,120,255,0.6), transparent 68%);
  top: -22%;
  left: -18%;
  animation: gb1 26s ease-in-out infinite alternate;
}

.global-mesh-blob:nth-child(2) {
  width: min(60vw, 720px);
  height: min(60vw, 720px);
  background: radial-gradient(circle, rgba(140,60,255,0.5), transparent 68%);
  top: 25%;
  right: -12%;
  animation: gb2 32s ease-in-out infinite alternate;
}

.global-mesh-blob:nth-child(3) {
  width: min(48vw, 580px);
  height: min(48vw, 580px);
  background: radial-gradient(circle, rgba(20,200,230,0.32), transparent 68%);
  bottom: 4%;
  left: 18%;
  animation: gb3 21s ease-in-out infinite alternate;
}

.global-mesh-blob:nth-child(4) {
  width: min(38vw, 440px);
  height: min(38vw, 440px);
  background: radial-gradient(circle, rgba(20,200,120,0.28), transparent 68%);
  top: 58%;
  left: 4%;
  animation: gb4 38s ease-in-out infinite alternate;
}

@keyframes gb1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(110px, 90px) scale(1.18); }
}
@keyframes gb2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-90px, 65px) scale(0.88); }
}
@keyframes gb3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(70px, -120px) scale(1.13); }
}
@keyframes gb4 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-60px, -85px) scale(1.24); }
}

/* ─────────────────────────────────────────────
   § 3  NAVIGATION  (sticky glass bar)
   ─────────────────────────────────────────── */

nav {
  background: rgba(7,10,18,0.72) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 1px 32px rgba(0,0,0,0.55) !important;
}

nav .text-gray-700  { color: rgba(255,255,255,0.62) !important; }
nav .text-gray-600  { color: rgba(255,255,255,0.52) !important; }

nav a:hover .text-blue-600,
nav .hover\:text-blue-600:hover {
  color: rgba(130,185,255,0.95) !important;
  text-shadow: 0 0 12px rgba(80,140,255,0.4);
}
nav .hover\:text-red-600:hover {
  color: rgba(255,110,110,0.95) !important;
}
nav .text-purple-600 {
  color: rgba(195,155,255,0.9) !important;
}

/* ─────────────────────────────────────────────
   § 4  FLASH MESSAGES  (glass alerts)
   ─────────────────────────────────────────── */

.from-green-50.to-emerald-50 {
  background: rgba(20,200,100,0.10) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.border-green-500  { border-color: rgba(20,200,100,0.6) !important; }
.text-green-800    { color: rgba(90,235,155,0.95) !important; }
.text-green-600    { color: rgba(60,210,130,0.95) !important; }

.from-red-50.to-pink-50 {
  background: rgba(220,50,50,0.10) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.border-red-500    { border-color: rgba(240,70,70,0.6) !important; }
.text-red-800      { color: rgba(255,130,130,0.95) !important; }
.text-red-600      { color: rgba(255,100,100,0.95) !important; }

/* ─────────────────────────────────────────────
   § 5  CARD / PANEL BACKGROUNDS  (the glass magic)
   Every white or light surface becomes frosted glass.
   ─────────────────────────────────────────── */

.bg-white {
  background: rgba(255,255,255,0.07) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
}
.bg-gray-50 {
  background: rgba(0,0,0,0.18) !important;
}

.bg-gray-100 { background: rgba(255,255,255,0.08)  !important; }
.bg-gray-200 { background: rgba(255,255,255,0.12)  !important; }

.bg-blue-50    { background: rgba(60,120,255,0.10)  !important; }
.bg-indigo-50  { background: rgba(100,80,255,0.11)  !important; }
.bg-purple-50  { background: rgba(140,60,255,0.10)  !important; }
.bg-emerald-50 { background: rgba(20,200,100,0.09)  !important; }
.bg-green-50   { background: rgba(20,200,100,0.09)  !important; }
.bg-amber-50   { background: rgba(240,160,20,0.09)  !important; }
.bg-orange-50  { background: rgba(255,110,40,0.09)  !important; }
.bg-red-50     { background: rgba(220,50,50,0.09)   !important; }
.bg-pink-50    { background: rgba(240,40,120,0.08)  !important; }
.bg-teal-50    { background: rgba(20,200,180,0.09)  !important; }

.bg-indigo-100  { background: rgba(100,80,255,0.18)  !important; }
.bg-blue-100    { background: rgba(60,120,255,0.18)  !important; }
.bg-purple-100  { background: rgba(140,60,255,0.18)  !important; }
.bg-emerald-100 { background: rgba(20,200,100,0.16)  !important; }
.bg-green-100   { background: rgba(20,200,100,0.16)  !important; }
.bg-amber-100   { background: rgba(240,160,20,0.17)  !important; }
.bg-red-100     { background: rgba(220,50,50,0.16)   !important; }

.bg-indigo-200  { background: rgba(100,80,255,0.26)  !important; }
.bg-blue-200    { background: rgba(60,120,255,0.26)  !important; }
.bg-green-200   { background: rgba(20,200,100,0.24)  !important; }
.bg-red-200     { background: rgba(220,50,50,0.24)   !important; }
.bg-amber-200   { background: rgba(240,160,20,0.24)  !important; }
.bg-purple-200  { background: rgba(140,60,255,0.26)  !important; }

/* ─────────────────────────────────────────────
   § 6  BORDERS
   ─────────────────────────────────────────── */

.border-gray-100 { border-color: rgba(255,255,255,0.07) !important; }
.border-gray-200 { border-color: rgba(255,255,255,0.10) !important; }
.border-gray-300 { border-color: rgba(255,255,255,0.15) !important; }
.border-gray-400 { border-color: rgba(255,255,255,0.20) !important; }

.border-blue-200   { border-color: rgba(60,120,255,0.30)  !important; }
.border-green-200  { border-color: rgba(20,200,100,0.28)  !important; }
.border-red-200    { border-color: rgba(220,50,50,0.28)   !important; }
.border-red-300    { border-color: rgba(220,50,50,0.40)   !important; }
.border-amber-200  { border-color: rgba(240,160,20,0.30)  !important; }
.border-purple-200 { border-color: rgba(140,60,255,0.30)  !important; }
.border-indigo-200 { border-color: rgba(100,80,255,0.30)  !important; }

.border-dashed { border-color: rgba(255,255,255,0.20) !important; }
.border-gray-300.border-dashed { border-color: rgba(255,255,255,0.18) !important; }

.border-t,
.border-b {
  border-color: rgba(255,255,255,0.08) !important;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255,255,255,0.08) !important;
}
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(255,255,255,0.08) !important;
}

/* ─────────────────────────────────────────────
   § 7  TYPOGRAPHY  (all the grays → white-alpha)
   ─────────────────────────────────────────── */

.text-gray-900 { color: rgba(255,255,255,0.94) !important; }
.text-gray-800 { color: rgba(255,255,255,0.86) !important; }
.text-gray-700 { color: rgba(255,255,255,0.72) !important; }
.text-gray-600 { color: rgba(255,255,255,0.58) !important; }
.text-gray-500 { color: rgba(255,255,255,0.44) !important; }
.text-gray-400 { color: rgba(255,255,255,0.33) !important; }
.text-gray-300 { color: rgba(255,255,255,0.24) !important; }

.text-blue-600     { color: rgba(130,185,255,0.96) !important; }
.text-blue-700     { color: rgba(140,195,255,0.96) !important; }
.text-blue-800     { color: rgba(150,205,255,0.96) !important; }
.text-indigo-500   { color: rgba(150,130,255,0.92) !important; }
.text-indigo-600   { color: rgba(160,140,255,0.96) !important; }
.text-indigo-700   { color: rgba(175,155,255,0.96) !important; }
.text-indigo-800   { color: rgba(185,165,255,0.96) !important; }
.text-indigo-900   { color: rgba(200,185,255,0.96) !important; }
.text-purple-600   { color: rgba(195,155,255,0.96) !important; }
.text-purple-700   { color: rgba(205,165,255,0.96) !important; }
.text-emerald-600  { color: rgba(60,215,135,0.96)  !important; }
.text-emerald-700  { color: rgba(70,225,145,0.96)  !important; }
.text-green-600    { color: rgba(60,215,135,0.96)  !important; }
.text-green-700    { color: rgba(70,225,145,0.96)  !important; }
.text-green-800    { color: rgba(80,235,155,0.96)  !important; }
.text-red-600      { color: rgba(255,100,100,0.96) !important; }
.text-red-700      { color: rgba(255,115,115,0.96) !important; }
.text-red-800      { color: rgba(255,125,125,0.96) !important; }
.text-amber-500    { color: rgba(255,175,40,0.92)  !important; }
.text-amber-600    { color: rgba(255,185,50,0.96)  !important; }
.text-amber-700    { color: rgba(255,195,60,0.96)  !important; }
.text-amber-900    { color: rgba(255,215,90,0.96)  !important; }
.text-orange-600   { color: rgba(255,140,60,0.96)  !important; }

label,
.label {
  color: rgba(255,255,255,0.65) !important;
}

/* ─────────────────────────────────────────────
   § 8  FORM INPUTS  (dark glass fields)
   ─────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  color: rgba(255,255,255,0.90) !important;
  border-radius: 10px !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,0.28) !important;
}

input:not([type="submit"]):not([type="button"]):focus,
textarea:focus,
select:focus {
  border-color: rgba(60,120,255,0.55) !important;
  box-shadow: 0 0 0 3px rgba(60,120,255,0.14) !important;
  outline: none !important;
  background: rgba(255,255,255,0.10) !important;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='rgba(255,255,255,0.4)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 1.25em 1.25em !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ─────────────────────────────────────────────
   § 9  BUTTONS  (glass + glow variants)
   ─────────────────────────────────────────── */

/* Force custom styling on native button/submit elements */
button, input[type="submit"], input[type="button"],
[type="submit"], [type="button"] {
  -webkit-appearance: none !important;
  appearance: none !important;
}

.bg-blue-600,
a.bg-blue-600,
button.bg-blue-600,
input[type="submit"].bg-blue-600,
[class~="bg-blue-600"] {
  background: rgba(60,120,255,0.48) !important;
  border: 1px solid rgba(60,120,255,0.42) !important;
  box-shadow: 0 2px 14px rgba(60,120,255,0.18) !important;
}
.hover\:bg-blue-700:hover,
.bg-blue-600:hover {
  background: rgba(60,120,255,0.72) !important;
  box-shadow: 0 0 22px rgba(60,120,255,0.35) !important;
}

.bg-indigo-600 {
  background: rgba(100,80,255,0.48) !important;
  border: 1px solid rgba(120,100,255,0.42) !important;
  box-shadow: 0 2px 14px rgba(100,80,255,0.18) !important;
}
.hover\:bg-indigo-700:hover,
.bg-indigo-600:hover {
  background: rgba(100,80,255,0.72) !important;
  box-shadow: 0 0 22px rgba(100,80,255,0.38) !important;
}

.bg-purple-600 {
  background: rgba(140,60,255,0.48) !important;
  border: 1px solid rgba(160,80,255,0.42) !important;
  box-shadow: 0 2px 14px rgba(140,60,255,0.18) !important;
}
.hover\:bg-purple-700:hover,
.bg-purple-600:hover {
  background: rgba(140,60,255,0.72) !important;
  box-shadow: 0 0 22px rgba(140,60,255,0.40) !important;
}

.bg-emerald-600,
.bg-green-600 {
  background: rgba(20,200,120,0.48) !important;
  border: 1px solid rgba(20,200,120,0.42) !important;
  box-shadow: 0 2px 14px rgba(20,200,120,0.15) !important;
}
.hover\:bg-emerald-700:hover,
.hover\:bg-green-700:hover,
.bg-emerald-600:hover,
.bg-green-600:hover {
  background: rgba(20,200,120,0.72) !important;
  box-shadow: 0 0 20px rgba(20,200,120,0.3) !important;
}

.bg-amber-600,
.bg-orange-600,
.bg-amber-500 {
  background: rgba(240,140,20,0.50) !important;
  border: 1px solid rgba(255,170,40,0.42) !important;
  box-shadow: 0 2px 14px rgba(240,160,20,0.18) !important;
}
.hover\:bg-amber-700:hover,
.hover\:bg-orange-700:hover,
.hover\:bg-amber-600:hover,
.bg-amber-600:hover,
.bg-orange-600:hover,
.bg-amber-500:hover {
  background: rgba(240,140,20,0.75) !important;
  box-shadow: 0 0 20px rgba(240,160,20,0.36) !important;
}

.bg-red-600 {
  background: rgba(220,40,40,0.50) !important;
  border: 1px solid rgba(255,70,70,0.42) !important;
  box-shadow: 0 2px 14px rgba(220,50,50,0.18) !important;
}
.hover\:bg-red-700:hover,
.bg-red-600:hover {
  background: rgba(220,40,40,0.75) !important;
  box-shadow: 0 0 20px rgba(220,50,50,0.36) !important;
}

.bg-teal-600 {
  background: rgba(20,190,170,0.48) !important;
  border: 1px solid rgba(20,210,190,0.42) !important;
  box-shadow: 0 2px 14px rgba(20,190,170,0.18) !important;
}
.hover\:bg-teal-700:hover,
.bg-teal-600:hover {
  background: rgba(20,190,170,0.72) !important;
  box-shadow: 0 0 20px rgba(20,190,170,0.36) !important;
}

.bg-gray-900 {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 2px 14px rgba(255,255,255,0.06) !important;
}
.hover\:bg-gray-800:hover,
.bg-gray-900:hover {
  background: rgba(255,255,255,0.18) !important;
  box-shadow: 0 0 18px rgba(255,255,255,0.14) !important;
}

/* — Secondary buttons (subtle glass glow on hover) — */
.bg-blue-50[class*="rounded"]:hover  { background: rgba(60,120,255,0.18) !important; box-shadow: 0 0 14px rgba(60,120,255,0.15) !important; }
.bg-gray-50[class*="rounded"]:hover  { background: rgba(255,255,255,0.14) !important; box-shadow: 0 0 12px rgba(255,255,255,0.08) !important; }
.bg-gray-100[class*="rounded"]:hover { background: rgba(255,255,255,0.16) !important; box-shadow: 0 0 12px rgba(255,255,255,0.10) !important; }

.border-gray-300.bg-white,
a.border-gray-300.bg-white,
button.border-gray-300.bg-white {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.70) !important;
}
.hover\:bg-gray-50:hover {
  background: rgba(255,255,255,0.12) !important;
}

.hover\:border-indigo-300:hover { border-color: rgba(130,110,255,0.48) !important; }
.hover\:border-purple-500:hover { border-color: rgba(140,60,255,0.6) !important; }
.hover\:border-blue-500:hover   { border-color: rgba(60,120,255,0.6) !important; }
.hover\:border-green-500:hover  { border-color: rgba(20,200,120,0.6) !important; }
.hover\:border-amber-300:hover  { border-color: rgba(255,185,50,0.48) !important; }
.hover\:border-gray-300:hover   { border-color: rgba(255,255,255,0.22) !important; }

.hover\:shadow-md:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 8px 32px rgba(0,0,0,0.55),
    0 0 40px rgba(60,120,255,0.08) !important;
}

/* ─────────────────────────────────────────────
   § 10  GRADIENT BANNERS
   ─────────────────────────────────────────── */

.from-purple-600.to-purple-700,
.bg-gradient-to-r.from-purple-600 {
  background: linear-gradient(135deg,
    rgba(130,50,255,0.72),
    rgba(80,30,200,0.72)) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(170,90,255,0.3) !important;
}

.from-amber-50.to-orange-50,
.bg-gradient-to-r.from-amber-50 {
  background: rgba(240,150,20,0.10) !important;
}

/* ─────────────────────────────────────────────
   § 11  SHADOW OVERRIDES
   ─────────────────────────────────────────── */

.shadow {
  box-shadow: 0 4px 24px rgba(0,0,0,0.5),
              inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
.shadow-sm {
  box-shadow: 0 2px 12px rgba(0,0,0,0.4),
              inset 0 1px 0 rgba(255,255,255,0.06) !important;
}
.shadow-md {
  box-shadow: 0 6px 28px rgba(0,0,0,0.55),
              inset 0 1px 0 rgba(255,255,255,0.09) !important;
}
.shadow-lg {
  box-shadow: 0 12px 48px rgba(0,0,0,0.65),
              inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.ring-4.ring-indigo-50  { --tw-ring-color: rgba(100,80,255,0.15) !important; }
.ring-4.ring-emerald-50 { --tw-ring-color: rgba(20,200,100,0.15) !important; }
.ring-4.ring-amber-50   { --tw-ring-color: rgba(240,160,20,0.15) !important; }
.ring-4.ring-purple-50  { --tw-ring-color: rgba(140,60,255,0.15) !important; }

/* ─────────────────────────────────────────────
   § 12  DRAG-AND-DROP
   ─────────────────────────────────────────── */

[draggable="true"]:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.20) !important;
}

/* ─────────────────────────────────────────────
   § 13  PROGRESS BARS
   ─────────────────────────────────────────── */

.bg-gray-100.rounded-full,
.rounded-full.bg-gray-100 {
  background: rgba(255,255,255,0.10) !important;
}

@keyframes neonShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ─────────────────────────────────────────────
   § 14  SCROLLBAR  (thin + dark)
   ─────────────────────────────────────────── */

* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }

/* ─────────────────────────────────────────────
   § 15  SELECTION
   ─────────────────────────────────────────── */

::selection {
  background: rgba(60,120,255,0.38);
  color: #fff;
}

/* ─────────────────────────────────────────────
   § 16  FOCUS RINGS
   ─────────────────────────────────────────── */

.focus\:ring-blue-500:focus    { --tw-ring-color: rgba(60,120,255,0.45) !important; }
.focus\:ring-offset-2:focus    { --tw-ring-offset-color: rgba(7,10,18,0.9) !important; }
.focus\:ring-2:focus           { box-shadow: 0 0 0 2px rgba(60,120,255,0.45) !important; }
.focus\:ring-purple-500:focus  { --tw-ring-color: rgba(140,60,255,0.45) !important; }
.focus\:ring-emerald-500:focus { --tw-ring-color: rgba(20,200,120,0.45) !important; }

/* ─────────────────────────────────────────────
   § 17  TURBO PROGRESS BAR
   ─────────────────────────────────────────── */

.turbo-progress-bar {
  background: linear-gradient(90deg,
    rgba(60,120,255,0.9),
    rgba(140,60,255,0.9)) !important;
  height: 3px !important;
  box-shadow: 0 0 12px rgba(60,120,255,0.5) !important;
}

/* ─────────────────────────────────────────────
   § 18  TABLE ROWS
   ─────────────────────────────────────────── */

thead tr { background: rgba(255,255,255,0.04) !important; }
tbody tr { border-color: rgba(255,255,255,0.05) !important; }
tbody tr:hover { background: rgba(255,255,255,0.04) !important; }

/* ─────────────────────────────────────────────
   § 19  TOUCH SPEED
   ─────────────────────────────────────────── */

button, a, input[type="submit"] {
  touch-action: manipulation;
}

/* ─────────────────────────────────────────────
   § 20  PAGE REVEAL ANIMATION
   ─────────────────────────────────────────── */

body > nav ~ * {
  animation: globalReveal 0.42s cubic-bezier(0.22,1,0.36,1) forwards;
}

@keyframes globalReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────
   § 21  SPECIAL — online_shopping_orders page
   Let its inline styles win (more specific selectors).
   ─────────────────────────────────────────── */

.shader-page-content {
  animation: pageReveal 0.45s ease forwards !important;
}

/* ─────────────────────────────────────────────
   § 22  MOBILE iOS ZOOM FIX
   ─────────────────────────────────────────── */

@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  textarea,
  select {
    font-size: max(16px, 1em) !important;
  }
}

/* ─────────────────────────────────────────────
   § 23  NERD TOUCHES
   ─────────────────────────────────────────── */

.bg-white:hover,
.bg-gray-50:hover {
  background: rgba(255,255,255,0.085) !important;
  transition: background 0.22s ease;
}

.rounded-lg.bg-indigo-50:hover,
.rounded-lg.bg-indigo-100:hover { box-shadow: 0 0 16px rgba(100,80,255,0.25); }
.rounded-lg.bg-emerald-50:hover,
.rounded-lg.bg-emerald-100:hover { box-shadow: 0 0 16px rgba(20,200,100,0.22); }
.rounded-lg.bg-purple-50:hover,
.rounded-lg.bg-purple-100:hover { box-shadow: 0 0 16px rgba(140,60,255,0.25); }
.rounded-lg.bg-amber-50:hover,
.rounded-lg.bg-amber-100:hover { box-shadow: 0 0 16px rgba(240,160,20,0.22); }

.text-center .text-gray-500,
.text-center .text-gray-400 {
  color: rgba(255,255,255,0.36) !important;
}

/*
 * ╔═══════════════════════════════════════════╗
 * ║  "Any sufficiently advanced CSS is        ║
 * ║   indistinguishable from magic."          ║
 * ║                      — Arthur C. Tailwind ║
 * ╚═══════════════════════════════════════════╝
 */