/* NeoDark "Command Center" theme for EvallesERP
   Intentionally aggressive modern look (glass + neon) without altering functionality.
*/

:root{
  --neo-bg0:#050816;
  --neo-bg1:#0b1024;
  --neo-ink:#e5e7eb;
  --neo-muted:#a3adc2;
  --neo-border:rgba(255,255,255,.10);
  --neo-surface:rgba(255,255,255,.06);
  --neo-surface2:rgba(255,255,255,.09);
  --neo-glow1:rgba(99,102,241,.35);   /* indigo */
  --neo-glow2:rgba(34,211,238,.28);   /* cyan */
  --neo-glow3:rgba(16,185,129,.22);   /* emerald */
  --neo-shadow: 0 18px 50px rgba(0,0,0,.55);
  --neo-radius: 18px;
}

/* Global override */
body{
  background:
    radial-gradient(1100px 600px at 20% 10%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(900px 520px at 90% 0%, rgba(34,211,238,.18), transparent 55%),
    radial-gradient(900px 520px at 85% 95%, rgba(16,185,129,.14), transparent 55%),
    linear-gradient(180deg, var(--neo-bg0), var(--neo-bg1)) !important;
  color: var(--neo-ink) !important;
}

/* Make most "light" utility backgrounds look like dark glass in this theme */
.neo-theme .bg-white,
.neo-theme .bg-slate-50,
.neo-theme .bg-slate-100,
.neo-theme .bg-slate-200{
  background: var(--neo-surface) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--neo-border);
}

.neo-theme .text-slate-800,
.neo-theme .text-slate-700,
.neo-theme .text-slate-600{
  color: var(--neo-ink) !important;
}
.neo-theme .text-slate-500,
.neo-theme .text-slate-400{
  color: var(--neo-muted) !important;
}

/* Shell layout */
.neo-shell{
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.neo-main{
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Sidebar: deepen + sharper active state */
#sidebar{
  background:
    radial-gradient(600px 320px at 20% 0%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(520px 320px at 70% 0%, rgba(34,211,238,.16), transparent 55%),
    linear-gradient(180deg, rgba(2,6,23,.98), rgba(3,7,18,.98)) !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 10px 0 40px rgba(0,0,0,.35);
}

.nav-link{
  /* Needed so we can render a subtle hover glow behind the content */
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.03) !important;
  color: rgba(229,231,235,.86) !important;
  border-radius: 14px !important;
}

/* Restore the more “notorio” hover highlight (soft rounded glow/pill)
   without changing layout or interactions. */
.nav-link::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background:
    radial-gradient(260px 160px at 18% 50%, rgba(99,102,241,.28), transparent 62%),
    radial-gradient(240px 140px at 85% 30%, rgba(34,211,238,.16), transparent 60%);
  opacity: 0;
  transform: scale(.98);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}

/* Keep link contents above the glow */
.nav-link > *{
  position: relative;
  z-index: 1;
}
.nav-link:hover{
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(99,102,241,.22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.30);
  transform: translateY(-1px);
}

.nav-link:hover::after{
  opacity: 1;
  transform: scale(1);
}
.nav-link.active{
  background:
    radial-gradient(500px 180px at 10% 0%, rgba(99,102,241,.35), transparent 55%),
    radial-gradient(420px 180px at 85% 0%, rgba(34,211,238,.20), transparent 55%),
    rgba(255,255,255,.06) !important;
  border-color: rgba(99,102,241,.45) !important;
  box-shadow: 0 10px 26px rgba(99,102,241,.18);
}
.nav-link.active::before{
  content:"";
  position:absolute;
  left:-10px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(99,102,241,1), rgba(34,211,238,1));
  box-shadow: 0 0 0 6px rgba(99,102,241,.15);
}

/* Topbar: real glass + glow */
.app-topbar{
  position: sticky;
  top: 0;
  z-index: 60;
  background:
    radial-gradient(900px 260px at 25% 0%, rgba(99,102,241,.18), transparent 60%),
    radial-gradient(740px 240px at 85% 0%, rgba(34,211,238,.14), transparent 55%),
    rgba(10,16,36,.55) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Content wrapper */
.neo-content{
  padding: 22px 22px 34px;
  overflow: auto;
}
.neo-container{
  max-width: 1320px;
  margin: 0 auto;
}

/* Module hero */
.neo-hero{
  background:
    radial-gradient(900px 300px at 15% 0%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(760px 260px at 90% 0%, rgba(34,211,238,.16), transparent 55%),
    rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: var(--neo-shadow);
}

/* Two-column form layout */
.neo-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 1100px){
  .neo-layout{ grid-template-columns: 1fr; }
}

.neo-card{
  background: var(--neo-surface);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.neo-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.neo-card-body{ padding: 14px 16px; }
.neo-kpi{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
.neo-kpi:last-child{ border-bottom: 0; }
.neo-kpi .label{ color: var(--neo-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.neo-kpi .value{ font-weight: 800; font-size: 18px; }

/* Inputs */
.neo-theme input,
.neo-theme select,
.neo-theme textarea{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--neo-ink) !important;
  border-radius: 14px !important;
}
.neo-theme input::placeholder,
.neo-theme textarea::placeholder{ color: rgba(163,173,194,.65) !important; }
.neo-theme input:focus,
.neo-theme select:focus,
.neo-theme textarea:focus{
  outline: none !important;
  border-color: rgba(34,211,238,.55) !important;
  box-shadow: 0 0 0 5px rgba(34,211,238,.14) !important;
}

/* Buttons */
.neo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--neo-ink);
  font-weight: 700;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.neo-btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.neo-btn-primary{
  background: linear-gradient(90deg, rgba(99,102,241,1), rgba(34,211,238,1));
  border-color: rgba(99,102,241,.35);
  color: #081028;
  box-shadow: 0 14px 30px rgba(99,102,241,.22);
}
.neo-btn-primary:hover{ filter: brightness(1.05); }

/* Tables */
.neo-theme table{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow:hidden;
}
.neo-theme thead th{
  background: rgba(255,255,255,.06);
  color: rgba(229,231,235,.95);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.neo-theme tbody td{
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.neo-theme tbody tr:hover td{ background: rgba(255,255,255,.05); }

/* Small helper: make section separators pop */
.neo-theme .p-0\.5{ /* the gradient borders used in sections */
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Right summary sticky */
.neo-sticky{
  position: sticky;
  top: 86px; /* below topbar */
}



/* =========================
   Mobile topbar (compact mode)
   Keeps branding consistent when sidebar is hidden (lg:hidden).
   ========================= */
.neo-mobile-topbar{
  background:
    radial-gradient(1200px 300px at 20% 0%,
      rgba(139,92,246,.35),
      transparent 60%),
    radial-gradient(900px 260px at 85% 40%,
      rgba(59,130,246,.18),
      transparent 55%),
    linear-gradient(90deg,
      rgba(2,6,23,.92),
      rgba(15,23,42,.86),
      rgba(2,6,23,.92));
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.neo-mobile-topbar img{
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

.neo-mobile-topbar #open-sidebar-btn:focus{
  outline: 2px solid rgba(139,92,246,.55);
  outline-offset: 2px;
}