/* css/sales.css — Sales CRM page
   - Futuristic visuals: plasma bg, neon borders, parallax tilt, smoother reveals
   - Apply/Clear buttons styled like the blue chip with splash ripple
   - Grid reflow pulse + KPI stagger kept
*/

/* ===================== Page & Plasma BG ===================== */
.sales-page { display: none; position:relative; }
.sales-page.show {
  display: block;
  animation: fadeUp .38s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes fadeUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }

/* soft animated “plasma” layer */
.plasma{
  position:absolute; inset:-80px -40px auto -40px; height:240px; pointer-events:none; z-index:-1;
  background:
    radial-gradient(120px 120px at 12% 60%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(140px 140px at 32% 20%, rgba(124,89,255,.28), transparent 60%),
    radial-gradient(160px 160px at 76% 50%, rgba(59,130,246,.18), transparent 60%);
  filter: blur(24px) saturate(120%);
  opacity:.8;
  animation: plasmaFloat 9s ease-in-out infinite alternate;
}
@keyframes plasmaFloat{
  from{ transform: translateY(-8px) }
  to{   transform: translateY(6px)  }
}

/* ===================== Headings ===================== */
.sales-head { margin-bottom: 6px; }
.sales-title{
  font-size: 22px; line-height: 1.2; font-weight: 800; margin: 0;
  color: var(--text); letter-spacing: -.01em;
}
.sales-sub{ margin: 4px 0 0; color: var(--muted); font-size: 13px; }

/* ===================== Sections ===================== */
.sales-section { margin-top: 18px; }
.sales-section-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; position:relative; }
.sales-section-title{ margin:0; font-size:18px; font-weight:800; color:var(--text); }
.sales-section-title::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:110px;
  background: linear-gradient(90deg, rgba(59,130,246,.85), rgba(124,89,255,0));
  opacity:.6; filter: drop-shadow(0 0 8px rgba(124,89,255,.35));
}

/* ===================== Pills / Buttons ===================== */
.pill{ display:inline-block; padding:6px 12px; border-radius:999px; font-weight:700; cursor:pointer; user-select:none; position:relative; overflow:hidden; }
.pill.mini{ padding:8px 14px; font-size:13px; border-radius:14px; }
.pill.ctx{ background:rgba(113,89,245,.10); color:var(--primary); }
.pill.ctx.ctx-mini{ padding:4px 8px; font-size:12px; }
.pill.ctx.pop{ animation: badgePop .35s cubic-bezier(.2,.9,.2,1); }
@keyframes badgePop{ 0%{transform:scale(.86); opacity:.6} 70%{transform:scale(1.06); opacity:1} 100%{transform:scale(1)} }

/* Blue gradient “Present” style with splash */
.pill.primary{
  --c1:#2563eb; --c2:#3b82f6;
  background: linear-gradient(180deg, var(--c2), var(--c1));
  color:#fff; border:1px solid rgba(255,255,255,.15);
  box-shadow: 0 10px 26px rgba(37,99,235,.35);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.pill.primary:hover{ transform: translateY(-1px); box-shadow: 0 14px 32px rgba(37,99,235,.45); filter:saturate(1.05); }
.pill.primary:active{ transform: translateY(0); }

/* Ghost button pairs well with blue */
.pill.ghost{
  background: transparent; color: var(--text);
  border:1px dashed var(--border);
  transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
}
.pill.ghost:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(2,6,23,.22); border-color: rgba(59,130,246,.45); background: rgba(59,130,246,.08); }
.pill.ghost:active{ transform: translateY(0); }

/* splash ripple (uses --rx/--ry from JS) */
.btn-splash::after{
  content:""; position:absolute; left:var(--rx,50%); top:var(--ry,50%);
  width:0; height:0; border-radius:999px; pointer-events:none; opacity:.22;
  background:#fff; transform: translate(-50%,-50%);
  transition: width .48s ease, height .48s ease, opacity .6s ease;
}
.btn-splash.splashing::after{ width:220%; height:220%; opacity:.0; }

/* ===================== Controls ===================== */
.stp-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.stp-title{ display:flex; align-items:center; gap:8px; }
.stp-ico{ font-size:18px; filter: drop-shadow(0 2px 10px rgba(124,89,255,.55)); }

.stp-filter{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.small-muted{ color:var(--muted); font-size:12px; }

.stp-date{
  height:38px; padding:0 12px; border-radius:12px; background:#0b1630; color:var(--text); border:1px solid var(--border);
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
body.light .stp-date{ background:#fff; }
.stp-date:focus{ outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.15); transform: translateY(-1px); }

/* wiggle when invalid */
.stp-filter.invalid { animation: wiggle .35s ease; }
@keyframes wiggle{
  0%,100%{ transform: translateX(0) }
  20%{ transform: translateX(-4px) }
  40%{ transform: translateX(4px) }
  60%{ transform: translateX(-3px) }
  80%{ transform: translateX(3px) }
}

/* ===================== KPI Grid ===================== */
.sales-kpi-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; }

.kpi.card{
  position:relative; border-radius:14px; padding:18px; overflow:hidden;
  border:1px solid transparent;
  background:
    linear-gradient(var(--card-bg),var(--card-bg)) padding-box,
    conic-gradient(from 180deg at 50% 50%,
      rgba(124,89,255,.65), rgba(124,89,255,.18), transparent 40%,
      rgba(124,89,255,.25), rgba(124,89,255,.65)) border-box;
  box-shadow: var(--shadow);
  backdrop-filter: blur(4px);
  transition: transform .25s cubic-bezier(.2,.9,.2,1), box-shadow .25s;
  animation: kpiIn .5s cubic-bezier(.2,.9,.2,1) both;
}
.kpi.card:nth-child(1){ animation-delay:.02s }
.kpi.card:nth-child(2){ animation-delay:.06s }
.kpi.card:nth-child(3){ animation-delay:.1s }
.kpi.card:nth-child(4){ animation-delay:.14s }
.kpi.card:nth-child(5){ animation-delay:.18s }
@keyframes kpiIn { from{opacity:0; transform: translateY(10px) scale(.98);} to{opacity:1; transform:none;} }

.kpi.card::before{
  content:""; position:absolute; inset:-8px; border-radius:18px; z-index:0; pointer-events:none;
  background: radial-gradient(40% 60% at 100% 0%, rgba(124,89,255,.18), transparent 60%);
  filter: blur(10px); opacity:.5; animation: borderSpin 8s linear infinite;
}
@keyframes borderSpin{ to{ transform: rotate(1turn); } }

.kpi-ico{ width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(113,89,245,.10); color:var(--primary); margin-bottom:8px; position:relative; z-index:1; }
.kpi-ico .ico{ width:20px; height:20px; display:block; }

.kpi-val{ font-size:28px; font-weight:800; line-height:1.1; color:var(--text); position:relative; z-index:1; transition: transform .25s cubic-bezier(.2,.9,.2,1); }
.kpi-lab{ color:var(--muted); font-size:13px; margin-top:6px; position:relative; z-index:1; }
.kpi.value-pop .kpi-val{ transform: translateY(-1px) scale(1.03); }
.kpi.card:hover{ box-shadow: 0 12px 28px rgba(2,6,23,.28); transform: translateY(-2px); }
.kpi.card:hover .kpi-val{ transform: translateY(-1px) scale(1.05); }

/* ===================== Sales Team Performance ===================== */
.stp-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  perspective: 1200px;
}
@media (max-width:1100px){ .stp-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .stp-grid{ grid-template-columns:1fr; } }

/* grid reflow pulse when data refreshes */
.stp-grid.reflow { animation: gridPulse .4s ease; }
@keyframes gridPulse { from{ filter: saturate(.92) brightness(.98) } to{ filter: none } }

/* Parallax tilt via --tiltX/--tiltY from JS */
.stp-card{
  --tiltX: 0; --tiltY: 0;
  position:relative; border-radius:16px; padding:18px; overflow:hidden;
  border:1px solid transparent;
  background:
    linear-gradient(var(--card-bg),var(--card-bg)) padding-box,
    linear-gradient(135deg, rgba(124,89,255,.6), rgba(124,89,255,.18), rgba(124,89,255,.6)) border-box;
  box-shadow: 0 18px 40px rgba(2,6,23,.35), inset 0 0 0 1px rgba(255,255,255,.02);
  transform-style: preserve-3d;
  backdrop-filter: blur(6px);
  animation: stpIn .46s cubic-bezier(.2,.9,.2,1) both;
  animation-delay: var(--delay, 0s);
  transform: rotateX(var(--tiltX)) rotateY(var(--tiltY));
}
@keyframes stpIn{ from{opacity:0; transform: translateY(16px) scale(.97) rotateX(6deg);} to{opacity:1; transform: translateY(0) scale(1) rotateX(0deg);} }

.stp-card::before{
  content:""; position:absolute; inset:-10px; border-radius:22px; pointer-events:none; z-index:0;
  background: radial-gradient(60% 80% at 110% -10%, rgba(124,89,255,.24), transparent 60%);
  filter: blur(14px); opacity:.45; transition: opacity .25s ease, transform .25s ease;
}

/* animated shine sweep */
.stp-card::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.16) 50%, transparent 65%);
  transform: translateX(-130%) skewX(-12deg);
  transition: transform .9s cubic-bezier(.2,.9,.2,1);
}

.stp-card:hover{
  transform: translateY(-2px) rotateX(var(--tiltX)) rotateY(var(--tiltY));
  box-shadow: 0 24px 50px rgba(2,6,23,.45), inset 0 0 0 1px rgba(255,255,255,.03);
}
.stp-card:hover::before{ opacity:.75; transform: translateY(-2px); }
.stp-card:hover::after{ transform: translateX(130%) skewX(-12deg); }

.stp-hdr, .stp-meta{ position:relative; z-index:1; transition: transform .35s cubic-bezier(.2,.9,.2,1); }
.stp-hdr{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:8px; }
.stp-name{ font-weight:800; color:var(--text); letter-spacing:-.01em; }
.stp-role{ color:var(--muted); font-size:13px; margin-top:2px; }

/* trend chip */
.stp-trend-wrap{
  width:28px; height:28px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  background: rgba(16,185,129,.12); color:#10b981; box-shadow: inset 0 0 0 1px rgba(16,185,129,.25);
  animation: bob .9s ease-in-out infinite alternate;
}
.stp-trend-wrap.down{ background: rgba(239,68,68,.12); color:#ef4444; transform: rotate(180deg); box-shadow: inset 0 0 0 1px rgba(239,68,68,.25); }
.stp-trend{ width:18px; height:18px; display:block; }
@keyframes bob { from{ transform: translateY(0) } to{ transform: translateY(-2px) } }

/* metrics */
.stp-meta{ margin-top:4px; }
.stp-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
.stp-sep{ height:1px; background:var(--border); margin:4px 0 6px; }
.stp-row .lab{ color:var(--muted); font-size:13px; }
.stp-row .val{ font-weight:800; color:var(--text); }
.stp-row .val.conv{
  color:#2563eb; background: linear-gradient(90deg, rgba(37,99,235,.12), transparent);
  padding:2px 6px; border-radius:8px; box-shadow: inset 0 0 0 1px rgba(37,99,235,.18);
}

/* optional neon tag */
.neon{ box-shadow: 0 10px 30px rgba(124,89,255,.18); }

/* ===================== Skeleton (Team Performance) ===================== */
.skeleton .stp-card{ pointer-events:none; }
.skel.card{
  border-radius:16px; padding:18px; border:1px solid var(--border); background:var(--card-bg);
  animation: stpIn .3s ease both; box-shadow: var(--shadow);
}
.skel-row{ display:flex; align-items:center; gap:10px; }
.skel-blob, .skel-line{
  position:relative; overflow:hidden; border-radius:10px; background: rgba(255,255,255,.06);
}
body.light .skel-blob, body.light .skel-line{ background:#eef2f7; }
.skel-blob{ width:36px; height:36px; }
.skel-lines{ flex:1; display:flex; flex-direction:column; gap:6px; }
.skel-line{ height:12px; }
.skel-line.lg{ height:18px; width:52%; border-radius:8px; }
.skel-line.md{ width:80%; border-radius:8px; margin-top:10px; }
.skel-line.sm{ width:36%; border-radius:6px; }
.skel-blob::after, .skel-line::after{
  content:""; position:absolute; inset:0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: translateX(-100%); animation: shimmer 1.15s infinite; opacity:.6;
}
@keyframes shimmer{ to{ transform: translateX(100%); } }

/* ===================== Responsive ===================== */
@media (max-width:1200px){ .sales-kpi-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px){ .sales-kpi-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:580px){ .sales-kpi-grid{ grid-template-columns:1fr; } }

/* ===================== Reduced Motion ===================== */
@media (prefers-reduced-motion: reduce){
  .sales-page.show, .kpi.card, .stp-card{ transition:none; animation:none; }
  .kpi.card::before, .stp-card::before{ animation:none; }
  .stp-card::after{ transition:none; }
}


/* ==== Apply button: vivid blue, white text + auto flash every 3s ==== */
#stpApply.pill.primary{
    -webkit-appearance: none;
    appearance: none;
    display:inline-flex; align-items:center; justify-content:center;
    min-height: 38px; min-width: 94px;
    padding: 8px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg,#2F7BFF,#2466F5) !important;
    color:#fff !important;
    border: none !important;
    box-shadow: 0 12px 26px rgba(36,102,245,.35);
    position: relative;
    z-index: 3;                 /* ensure above date inputs */
    overflow: hidden;           /* needed for the flash sweep */
  }
  
  /* subtle hover lift */
   
  
  /* keep existing ripple on ::after; use ::before for the repeating flash */
  #stpApply.pill.primary::before{
    content:"";
    position:absolute; inset:0; border-radius: inherit; pointer-events:none;
    background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.30) 50%, transparent 65%);
    transform: translateX(-130%) skewX(-12deg);
    animation: stpApplySweep 3s cubic-bezier(.2,.9,.2,1) infinite; /* every 3s */
  }
  
  @keyframes stpApplySweep{
    0%   { transform: translateX(-130%) skewX(-12deg); opacity:.0; }
    6%   { opacity:.85; }      /* quick bright entry */
    22%  { transform: translateX(130%)  skewX(-12deg); opacity:.0; } /* sweep done */
    100% { transform: translateX(130%)  skewX(-12deg); opacity:0; }  /* stay idle */
  }
  

  /* Status pill after the name */
.stp-status{
    display:inline-block;
    padding:2px 6px;
    margin: 0 0 0 8px;   /* left gap after name */
    border-radius:8px;
    font-size:11px;
    font-weight:800;
    line-height:1;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  }
  .stp-status.ok{
    background: rgba(16,185,129,.14);
    color:#10b981;
    box-shadow: inset 0 0 0 1px rgba(16,185,129,.25);
  }
  .stp-status.off{
    background: rgba(239,68,68,.12);
    color:#ef4444;
    box-shadow: inset 0 0 0 1px rgba(239,68,68,.25);
  }
  /* ==== GLOBAL: turn off all shiny / splash effects everywhere ==== */

/* Any element using the .shiny helper (tabs, buttons, nav, etc.) */
.shiny::before,
.shiny::after{
  display: none !important;
  animation: none !important;
}

/* Extra safety: if any button uses ::after for splash, kill it */
button::after{
  display: none !important;
  animation: none !important;
}