/* ═══════════════════════════════════════════════════════════════════
   TidyContract — Cyberpunk 2077 Theme  •  v3.0
   Palette copiata da cyberpunk.net:
     bg: #000000 | yellow: #fcee0a | cyan: #00f0ff | red: #fe1038
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;1,700&family=Share+Tech+Mono&display=swap');

:root {
  --cp-black:    #000000;
  --cp-black2:   #0a0a0a;
  --cp-yellow:   #fcee0a;
  --cp-cyan:     #00f0ff;
  --cp-red:      #fe1038;
  --cp-white:    #ffffff;
  --cp-muted:    #8a8a8a;
  --cp-muted2:   #4a4a4a;
  --cp-border-y: rgba(252, 238, 10, 0.35);
  --cp-border-c: rgba(0, 240, 255, 0.35);
  --glow-yellow: 0 0 7px rgba(252, 238, 10, 0.38), 0 0 16px rgba(252, 238, 10, 0.14);
  --glow-cyan:   0 0 7px rgba(0, 240, 255, 0.38), 0 0 16px rgba(0, 240, 255, 0.14);
  --glow-red:    0 0 7px rgba(254, 16, 56, 0.38),  0 0 16px rgba(254, 16, 56, 0.14);
}

/* ══════════════════════════════════════════════
   BASE
══════════════════════════════════════════════ */

html, body {
  background-color: var(--cp-black) !important;
  color: var(--cp-white);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

/* ══════════════════════════════════════════════
   BACKGROUND — NEON GRID + SCANLINES
══════════════════════════════════════════════ */

/* Moving neon grid */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(252, 238, 10, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(252, 238, 10, 0.032) 1px, transparent 1px);
  background-size: 52px 52px;
  animation: gridMove 25s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes gridMove {
  from { background-position: 0 0; }
  to   { background-position: 52px 52px; }
}

/* Scanlines + occasional flicker */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.06) 2px,
    rgba(0, 0, 0, 0.06) 4px
  );
  pointer-events: none;
  z-index: 9999;
  animation: scanFlicker 18s steps(1) infinite;
}

@keyframes scanFlicker {
  0%, 96%, 97%, 99%, 100% { opacity: 1; }
  97%  { opacity: 0.92; }
  98%  { opacity: 0.96; }
}

/* Vignette (injected via JS as .cp-vignette) */
.cp-vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,0.50) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Noise grain (injected via JS as .cp-noise) */
.cp-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.012;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: noiseShift 0.8s steps(2) infinite;
}

@keyframes noiseShift {
  0%   { background-position: 0 0; }
  25%  { background-position: -40px 20px; }
  50%  { background-position: 30px -15px; }
  75%  { background-position: -20px 35px; }
  100% { background-position: 15px -25px; }
}

/* ══════════════════════════════════════════════
   Z-INDEX — CONTENT ABOVE BG LAYERS
══════════════════════════════════════════════ */

#nav-placeholder, .ml-60, main, [x-data] {
  position: relative;
  z-index: 10;
}

/* ══════════════════════════════════════════════
   GLASSMORPHISM
══════════════════════════════════════════════ */

.glass {
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ══════════════════════════════════════════════
   CARDS — corner cut bottom-right (stile CP2077)
   Tecnica: clip-path + outline
   In Chrome/Firefox moderni, outline segue clip-path
   inclusa la diagonale → bordo visibile su tutti e 5 i lati
══════════════════════════════════════════════ */

.cyber-card {
  background: rgba(8, 8, 8, 0.92) !important;
  border: none !important;
  border-radius: 0 !important;
  outline: 1px solid rgba(252, 238, 10, 0.22);
  outline-offset: 0;
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    0 100%
  );
  position: relative;
  overflow: hidden;
  transition: outline-color 0.25s ease;
}

.cyber-card:hover {
  outline-color: rgba(252, 238, 10, 0.42);
  outline-width: 1px;
}

/* Top-left yellow accent line */
.cyber-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 52px; height: 2px;
  background: var(--cp-yellow);
  box-shadow: var(--glow-yellow);
  transition: width 0.35s ease;
  z-index: 2;
  pointer-events: none;
}
.cyber-card:hover::before { width: 100px; }

/* ::after non serve — il bordo è gestito dall'outline che segue clip-path */

/* ══════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════ */

.cyber-sidebar {
  background: rgba(0, 0, 0, 0.97) !important;
  border-right: 1px solid rgba(252, 238, 10, 0.15) !important;
}

/* ══════════════════════════════════════════════
   LOGO
══════════════════════════════════════════════ */

.logo-cyber {
  background: var(--cp-yellow) !important;
  color: var(--cp-black) !important;
  box-shadow: var(--glow-yellow) !important;
  animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(252,238,10,0.3), 0 0 12px rgba(252,238,10,0.12); }
  50%       { box-shadow: 0 0 9px rgba(252,238,10,0.5),  0 0 20px rgba(252,238,10,0.2);  }
}

/* ══════════════════════════════════════════════
   NEON TEXT
══════════════════════════════════════════════ */

.neon-text {
  color: var(--cp-yellow) !important;
  text-shadow: 0 0 5px rgba(252,238,10,0.55), 0 0 12px rgba(252,238,10,0.2);
}
.neon-text-cyan {
  color: var(--cp-cyan) !important;
  text-shadow: 0 0 5px rgba(0,240,255,0.55), 0 0 12px rgba(0,240,255,0.2);
}
.neon-text-purple {
  color: #9d00ff !important;
  text-shadow: 0 0 5px rgba(157,0,255,0.5), 0 0 12px rgba(157,0,255,0.2);
}
.neon-text-yellow { /* alias */
  color: var(--cp-yellow) !important;
  text-shadow: 0 0 5px rgba(252,238,10,0.55), 0 0 12px rgba(252,238,10,0.2);
}

/* ══════════════════════════════════════════════
   TEXT UTILITIES
══════════════════════════════════════════════ */

.text-cyber-muted  { color: var(--cp-muted) !important; }
.text-cyber-red    { color: var(--cp-red) !important; text-shadow: 0 0 4px rgba(254,16,56,0.3); }

/* ══════════════════════════════════════════════
   HEADINGS — GLITCH EFFECT
   (data-text impostato da app.js)
══════════════════════════════════════════════ */

.cyber-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  color: var(--cp-white) !important;
}

.cyber-title::before,
.cyber-title::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  overflow: hidden;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
}

/* Cyan glitch — top half */
.cyber-title::before {
  color: var(--cp-cyan);
  text-shadow: -2px 0 var(--cp-cyan);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%);
  animation: glitchA 6s steps(1) infinite;
  opacity: 0;
}

/* Yellow glitch — bottom half */
.cyber-title::after {
  color: var(--cp-yellow);
  text-shadow: 2px 0 var(--cp-yellow);
  clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
  animation: glitchB 6s steps(1) infinite;
  opacity: 0;
}

@keyframes glitchA {
  0%, 87%, 100% { opacity: 0; transform: none; }
  88% { opacity: 0.6; transform: translateX(-2px); clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%); }
  89% { opacity: 0.6; transform: translateX(1px); clip-path: polygon(0 8%, 100% 8%, 100% 44%, 0 44%); }
  90% { opacity: 0; }
  93% { opacity: 0.5; transform: translateX(-3px) skewX(-1deg); clip-path: polygon(0 0, 100% 0, 100% 22%, 0 22%); }
  94% { opacity: 0; }
}
@keyframes glitchB {
  0%, 87%, 100% { opacity: 0; transform: none; }
  88% { opacity: 0.55; transform: translateX(2px); clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%); }
  89% { opacity: 0.55; transform: translateX(-1px); clip-path: polygon(0 56%, 100% 56%, 100% 93%, 0 93%); }
  90% { opacity: 0; }
  94% { opacity: 0.45; transform: translateX(3px) skewX(1deg); clip-path: polygon(0 68%, 100% 68%, 100% 100%, 0 100%); }
  95% { opacity: 0; }
}

/* Blink cursor on h1 (override ::after) */
h1.cyber-title::after {
  content: '_';
  position: static;
  width: auto;
  clip-path: none;
  text-shadow: none;
  color: var(--cp-yellow);
  animation: blink 1.2s step-start infinite;
  opacity: 1;
  margin-left: 4px;
  font-size: 0.9em;
}
@keyframes blink { 50% { opacity: 0; } }

/* ══════════════════════════════════════════════
   INPUTS & SELECTS
══════════════════════════════════════════════ */

input[type="text"], input[type="email"], input[type="number"],
input[type="date"], input[type="url"], input[type="password"],
input[type="tel"], input[type="file"], textarea, select {
  background: rgba(252, 238, 10, 0.03) !important;
  border: 1px solid rgba(252, 238, 10, 0.2) !important;
  color: var(--cp-white) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, input:focus-visible,
textarea:focus, textarea:focus-visible,
select:focus, select:focus-visible {
  border-color: var(--cp-yellow) !important;
  box-shadow: 0 0 0 1px rgba(252,238,10,0.2), 0 0 14px rgba(252,238,10,0.12) !important;
  outline: none !important;
}

select option {
  background: #0a0a0a !important;
  color: var(--cp-white) !important;
}

::placeholder {
  color: var(--cp-muted) !important;
  opacity: 0.7;
}

/* ══════════════════════════════════════════════
   BUTTONS — corner cut bottom-right (stile esatto CP2077)
══════════════════════════════════════════════ */

.btn-cyber {
  background: var(--cp-yellow) !important;
  border: none !important;
  color: var(--cp-black) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: filter 0.2s, box-shadow 0.2s;
  padding: 8px 20px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.btn-cyber:hover {
  filter: brightness(1.12);
  box-shadow: var(--glow-yellow);
  animation: btnGlitch 0.3s steps(2) 1;
}

/* Shimmer sweep on hover */
.btn-cyber::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 1;
}
.btn-cyber:hover::after {
  animation: btnShimmer 0.42s ease-out forwards;
}

@keyframes btnShimmer {
  0%   { left: -100%; }
  100% { left: 160%; }
}

/* Brief X-glitch jitter */
@keyframes btnGlitch {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-2px); }
  50%  { transform: translateX(2px); }
  75%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }
}

.btn-cyber-purple {
  background: transparent !important;
  border: 1px solid var(--cp-cyan) !important;
  color: var(--cp-cyan) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 4px rgba(0,240,255,0.3);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: box-shadow 0.2s, background 0.2s;
  padding: 8px 20px !important;
}
.btn-cyber-purple {
  position: relative;
  overflow: hidden;
}
.btn-cyber-purple::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.10), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 1;
}
.btn-cyber-purple:hover {
  background: rgba(0,240,255,0.08) !important;
  box-shadow: var(--glow-cyan);
  animation: cyanPulse 0.5s ease-out 1;
}
.btn-cyber-purple:hover::after {
  animation: btnShimmer 0.42s ease-out forwards;
}

@keyframes cyanPulse {
  0%   { box-shadow: var(--glow-cyan); }
  40%  { box-shadow: 0 0 12px rgba(0,240,255,0.45), 0 0 22px rgba(0,240,255,0.2); }
  100% { box-shadow: var(--glow-cyan); }
}

/* Small buttons (azioni tabella) - NO clip-path */
.btn-cyber.p-1\.5,
.btn-cyber.p-1,
.btn-cyber.px-2,
.btn-cyber.px-3.py-1 {
  clip-path: none;
  background: transparent !important;
  border: 1px solid rgba(252,238,10,0.3) !important;
  color: var(--cp-yellow) !important;
  font-size: 12px;
  padding: inherit !important;
  filter: none;
}
.btn-cyber.p-1\.5:hover,
.btn-cyber.p-1:hover,
.btn-cyber.px-2:hover,
.btn-cyber.px-3.py-1:hover {
  background: rgba(252,238,10,0.08) !important;
  box-shadow: none;
  filter: none;
}

/* ══════════════════════════════════════════════
   STATUS BADGES
══════════════════════════════════════════════ */

.badge-signed, .badge-paid, .badge-accepted {
  background: rgba(252, 238, 10, 0.1) !important;
  color: var(--cp-yellow) !important;
  text-shadow: 0 0 6px rgba(252,238,10,0.5);
  border: 1px solid rgba(252,238,10,0.3) !important;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-sent {
  background: rgba(0, 240, 255, 0.08) !important;
  color: var(--cp-cyan) !important;
  text-shadow: 0 0 4px rgba(0,240,255,0.3);
  border: 1px solid rgba(0,240,255,0.25) !important;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-draft {
  background: rgba(138, 138, 138, 0.1) !important;
  color: var(--cp-muted) !important;
  border: 1px solid rgba(138,138,138,0.2) !important;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-rejected, .badge-overdue {
  background: rgba(254, 16, 56, 0.1) !important;
  color: var(--cp-red) !important;
  text-shadow: 0 0 6px rgba(254,16,56,0.4);
  border: 1px solid rgba(254,16,56,0.25) !important;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-converted {
  background: rgba(0, 240, 255, 0.08) !important;
  color: var(--cp-cyan) !important;
  text-shadow: 0 0 6px rgba(0,240,255,0.4);
  border: 1px solid rgba(0,240,255,0.2) !important;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════
   TABLE
══════════════════════════════════════════════ */

thead tr {
  border-bottom: 1px solid rgba(252,238,10,0.12) !important;
  background: rgba(252,238,10,0.02);
}

tr:hover {
  background: rgba(252, 238, 10, 0.04) !important;
}

.table-total-row {
  background: rgba(0, 240, 255, 0.06) !important;
  border-top: 1px solid rgba(0, 240, 255, 0.2) !important;
}
.table-active-row {
  background: rgba(252, 238, 10, 0.05) !important;
}

/* ══════════════════════════════════════════════
   AVATAR FALLBACK
══════════════════════════════════════════════ */

.avatar-cyber {
  background: rgba(252, 238, 10, 0.1) !important;
  color: var(--cp-yellow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(252,238,10,0.2) !important;
}

/* ══════════════════════════════════════════════
   ALERT BANNER
══════════════════════════════════════════════ */

.alert-cyber {
  background: rgba(252, 238, 10, 0.05) !important;
  border: 1px solid rgba(252,238,10,0.25) !important;
  color: var(--cp-yellow) !important;
}

/* ══════════════════════════════════════════════
   NAV ACTIVE LINK
══════════════════════════════════════════════ */

nav a.text-white.bg-white\/15 {
  background: rgba(252, 238, 10, 0.08) !important;
  color: var(--cp-yellow) !important;
  text-shadow: 0 0 8px rgba(252,238,10,0.5);
  border-left: 2px solid var(--cp-yellow) !important;
}

/* ══════════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════════ */

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(252,238,10,0.3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(252,238,10,0.6); }

/* ══════════════════════════════════════════════
   DIVIDERS
══════════════════════════════════════════════ */

.divide-white\/5 > * + * {
  border-top-color: rgba(252,238,10,0.06) !important;
}

/* ══════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════ */

#toast-container > div {
  background: rgba(0,0,0,0.97) !important;
  border: 1px solid var(--cp-yellow) !important;
  box-shadow: var(--glow-yellow) !important;
  color: var(--cp-yellow);
  font-family: 'Share Tech Mono', monospace;
  letter-spacing: 0.04em;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

/* ══════════════════════════════════════════════
   MODAL OVERLAY
══════════════════════════════════════════════ */

.modal-overlay {
  background: rgba(0, 0, 0, 0.92) !important;
  backdrop-filter: blur(6px);
}

/* ══════════════════════════════════════════════
   PROGRESS BARS
══════════════════════════════════════════════ */

.bg-blue-600, .bg-indigo-600 {
  background: linear-gradient(90deg, var(--cp-yellow), var(--cp-cyan)) !important;
  box-shadow: 0 0 10px rgba(252,238,10,0.5);
}

/* ══════════════════════════════════════════════
   LARGE STAT NUMBERS — pulsazione glow
══════════════════════════════════════════════ */

.text-3xl.font-bold.neon-text,
.text-3xl.font-bold.neon-text-cyan {
  animation: numGlow 3s ease-in-out infinite;
}
@keyframes numGlow {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.3) drop-shadow(0 0 8px currentColor); }
}

/* ══════════════════════════════════════════════
   SECTION LABELS (uppercase tracking)
══════════════════════════════════════════════ */

.uppercase.tracking-wider.text-cyber-muted {
  font-family: 'Share Tech Mono', monospace !important;
  letter-spacing: 0.14em;
  font-size: 11px;
}

/* ══════════════════════════════════════════════
   GLASS = CYBER-CARD (alias unificato)
══════════════════════════════════════════════ */

.glass {
  background: rgba(8, 8, 8, 0.92) !important;
  border: none !important;
  border-radius: 0 !important;
  outline: 1px solid rgba(252, 238, 10, 0.3);
  outline-offset: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
  position: relative;
  overflow: hidden;
}
.glass::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 52px; height: 2px;
  background: var(--cp-yellow);
  box-shadow: var(--glow-yellow);
  z-index: 2;
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   CARD DIVIDER (border dentro card)
══════════════════════════════════════════════ */

.cp-divider {
  border-color: rgba(252, 238, 10, 0.1) !important;
}

/* ══════════════════════════════════════════════
   TABLE ROW HOVER
══════════════════════════════════════════════ */

.cp-tr-hover {
  transition: background 0.15s;
}
.cp-tr-hover:hover {
  background: rgba(252, 238, 10, 0.04) !important;
}

/* ══════════════════════════════════════════════
   ICON BUTTONS
══════════════════════════════════════════════ */

.cp-icon-btn {
  color: var(--cp-muted) !important;
  background: transparent !important;
  transition: color 0.2s, background 0.2s !important;
}
.cp-icon-btn:hover {
  color: var(--cp-yellow) !important;
  background: rgba(252, 238, 10, 0.08) !important;
}
.cp-icon-btn.danger:hover {
  color: var(--cp-red) !important;
  background: rgba(254, 16, 56, 0.08) !important;
}

/* ══════════════════════════════════════════════
   PAGINATION / SECONDARY BUTTONS
══════════════════════════════════════════════ */

.cp-btn-page {
  border: 1px solid rgba(252, 238, 10, 0.25) !important;
  color: var(--cp-muted) !important;
  background: transparent !important;
  transition: all 0.2s !important;
}
.cp-btn-page:hover {
  border-color: rgba(252, 238, 10, 0.55) !important;
  color: var(--cp-yellow) !important;
  background: rgba(252, 238, 10, 0.05) !important;
}
.cp-btn-page:disabled {
  opacity: 0.25 !important;
}

/* ══════════════════════════════════════════════
   FILTER INPUTS (barra ricerca/filtri)
══════════════════════════════════════════════ */

.cp-filter-input,
.cp-form-input {
  background: rgba(252, 238, 10, 0.03) !important;
  border: 1px solid rgba(252, 238, 10, 0.18) !important;
  background-color: rgba(252, 238, 10, 0.03) !important;
}

/* ══════════════════════════════════════════════
   BADGE AGGIUNTIVI
══════════════════════════════════════════════ */

.badge-warning {
  background: rgba(255, 160, 0, 0.1) !important;
  color: #ffa500 !important;
  text-shadow: 0 0 6px rgba(255, 160, 0, 0.4);
  border: 1px solid rgba(255, 160, 0, 0.25) !important;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════
   TEXT COLOR AGGIUNTIVI
══════════════════════════════════════════════ */

.neon-text-orange {
  color: #ff8c00 !important;
  text-shadow: 0 0 5px rgba(255, 140, 0, 0.4), 0 0 12px rgba(255, 140, 0, 0.15);
}

/* ══════════════════════════════════════════════
   MISC
══════════════════════════════════════════════ */

input[type="checkbox"] { accent-color: var(--cp-yellow); }
hr { border-color: rgba(252,238,10,0.1) !important; }

/* ══════════════════════════════════════════════
   MOBILE — Hamburger button
══════════════════════════════════════════════ */

.cp-hamburger {
  display: none; /* visible only on mobile via media query */
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  width: 42px;
  height: 42px;
  background: rgba(0, 0, 0, 0.96);
  border: 1px solid rgba(252, 238, 10, 0.4);
  color: var(--cp-yellow);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: box-shadow 0.2s;
}
.cp-hamburger:hover {
  box-shadow: var(--glow-yellow);
}

/* Close button inside sidebar (mobile only) */
.cp-sidebar-close-btn {
  display: none;
  color: var(--cp-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}
.cp-sidebar-close-btn:hover { color: var(--cp-yellow); }

/* Mobile overlay */
.cp-mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 150;
}
.cp-mobile-overlay.active { display: block; }

/* ══════════════════════════════════════════════
   RESPONSIVE — ≤768px
   Disabilita effetti pesanti, layout mobile-first
══════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Mostra hamburger + close ── */
  .cp-hamburger { display: flex; }
  .cp-sidebar-close-btn { display: block; }

  /* ── Sidebar: drawer laterale ── */
  #cp-sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 160 !important;
  }
  #cp-sidebar.mobile-open {
    transform: translateX(0) !important;
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.8);
  }

  /* ── Main content: rimuovi margine sidebar, aggiungi top per hamburger ── */
  .ml-60 {
    margin-left: 0 !important;
    padding-top: 3.5rem !important;   /* spazio per hamburger button */
  }
  /* Evita doppio padding se la diretta child ha già p-8 */
  .ml-60.p-8 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* ── Disabilita effetti grafici pesanti ── */
  body::before,
  body::after {
    display: none !important;
  }
  .cp-vignette,
  .cp-noise,
  .cp-cursor-glow {
    display: none !important;
  }

  /* ── Card: niente clip-path angolato (clip-path + scroll crea glitch) ── */
  .cyber-card,
  .glass {
    clip-path: none !important;
    border-radius: 2px !important;
    border: 1px solid rgba(252, 238, 10, 0.25) !important;
    outline: none !important;
  }
  /* Rimuovi accent line top (animata) */
  .cyber-card::before,
  .glass::before {
    display: none !important;
  }
  /* Rimuovi scanline su hover */
  .cyber-card:hover::after,
  .glass:hover::after {
    animation: none !important;
    opacity: 0 !important;
  }

  /* ── Bottoni: niente shimmer/glitch ── */
  .btn-cyber::after,
  .btn-cyber-purple::after {
    display: none !important;
  }
  .btn-cyber:hover,
  .btn-cyber-purple:hover {
    animation: none !important;
  }

  /* ── Disabilita glow pulse su numeri ── */
  .text-3xl.font-bold.neon-text,
  .text-3xl.font-bold.neon-text-cyan {
    animation: none !important;
  }
  .logo-cyber { animation: none !important; }

  /* ── Toast: niente clip-path ── */
  #toast-container > div {
    clip-path: none !important;
    border-radius: 2px !important;
  }

  /* ── Tipografia: ridimensiona heading ── */
  h1.cyber-title,
  h1.cyber-title.text-2xl { font-size: 1.35rem !important; }
  h1.cyber-title::after { font-size: 0.8em; }
  .text-3xl { font-size: 1.5rem !important; }

  /* ── Grid: semplifica su mobile ── */
  .grid-cols-2,
  .grid.grid-cols-2,
  .grid-cols-3,
  .grid.grid-cols-3 {
    grid-template-columns: 1fr !important;
  }
  /* 4-col → 2-col su mobile (stat cards dashboard) */
  .grid-cols-4,
  .grid.grid-cols-4 {
    grid-template-columns: 1fr 1fr !important;
  }
  .grid-cols-4 > * { min-width: 0; }
  .col-span-2 { grid-column: span 1 !important; }

  /* ── Tabelle: scroll orizzontale + compact ── */
  table { min-width: 520px; font-size: 13px; }
  th, td { padding: 0.5rem 0.75rem !important; white-space: nowrap; }
  .overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ── Action bar: wrap ── */
  .flex.items-center.justify-between { flex-wrap: wrap; gap: 0.5rem; }
  .flex.gap-2.flex-wrap { flex-wrap: wrap; }

  /* ── Bottoni: ridimensiona ── */
  .btn-cyber,
  .btn-cyber-purple {
    font-size: 13px;
    padding: 7px 14px !important;
  }

  /* ── Max width container su detail pages ── */
  .max-w-4xl, .max-w-3xl, .max-w-5xl {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── Modal: full width ── */
  .modal-overlay .cyber-card,
  .modal-overlay .glass {
    width: calc(100vw - 2rem) !important;
    max-width: 100% !important;
    margin: 0.5rem;
  }

  /* ── Input e select full-width nei filtri ── */
  .cp-filter-input,
  .cp-form-input {
    min-width: 0 !important;
    width: 100%;
  }

  /* ── Scrollbar sottile ── */
  ::-webkit-scrollbar { width: 3px; height: 3px; }

  /* ── Z-index: contenuto sopra layers BG ── */
  #nav-placeholder, .ml-60, main, [x-data] {
    z-index: 10;
    position: relative;
  }
}

.cyber-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cp-yellow), transparent);
  box-shadow: 0 0 8px rgba(252,238,10,0.4);
  border: none;
  margin: 1.5rem 0;
}

button[disabled] { opacity: 0.25 !important; }

/* Input con classi Tailwind white: forza cyberpunk */
input[class*="bg-white"],
input[class*="border-white"],
textarea[class*="bg-white"],
textarea[class*="border-white"],
select[class*="bg-white"] {
  background: rgba(252, 238, 10, 0.03) !important;
  background-color: rgba(252, 238, 10, 0.03) !important;
  border-color: rgba(252, 238, 10, 0.2) !important;
}

/* Forza border-radius 0 su tutti gli input */
input, textarea, select { border-radius: 0 !important; }

/* ══════════════════════════════════════════════
   CURSOR GLOW — follows mouse (injected via JS)
   Fa reagire la griglia al movimento del mouse
══════════════════════════════════════════════ */

.cp-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(252, 238, 10, 0.04) 0%,
    rgba(0, 240, 255, 0.015) 40%,
    transparent 68%
  );
  pointer-events: none;
  z-index: 3;
  transform: translate(-1000px, -1000px);
  transition: transform 0.07s linear;
  mix-blend-mode: screen;
}

/* ══════════════════════════════════════════════
   CARD SCAN LINE — neon line sweeps on hover
══════════════════════════════════════════════ */

.cyber-card::after,
.glass::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--cp-cyan) 30%,
    var(--cp-yellow) 70%,
    transparent 100%
  );
  box-shadow: 0 0 6px rgba(0,240,255,0.4), 0 0 12px rgba(0,240,255,0.15);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

.cyber-card:hover::after,
.glass:hover::after {
  animation: cardScanLine 0.55s ease-out forwards;
}

@keyframes cardScanLine {
  0%   { top: 0;    opacity: 1; }
  85%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* ══════════════════════════════════════════════
   DISABLE shimmer/glitch on small icon buttons
══════════════════════════════════════════════ */

.btn-cyber.p-1::after,
.btn-cyber.p-1\.5::after,
.btn-cyber.px-2::after {
  display: none !important;
}
.btn-cyber.p-1:hover,
.btn-cyber.p-1\.5:hover,
.btn-cyber.px-2:hover {
  animation: none !important;
}