/* ============================================================================
   MAPLE ERP — STARK HUD SKIN (all apps)
   Cosmetic only: glows, motion, holo accents. Light + dark theme aware.
   ============================================================================ */
@keyframes hudSpin { to { transform: rotate(360deg) } }
@keyframes hudSpinR { to { transform: rotate(-360deg) } }
@keyframes hudPulse { 0%,100% { opacity:.4 } 50% { opacity:1 } }
@keyframes hudBar { from { transform: scaleY(0) } to { transform: scaleY(1) } }
@keyframes hudPop { 0% { transform: scale(.96); opacity:.5 } 100% { transform: scale(1); opacity:1 } }

/* --- cards get a reactor light-line on top --- */
.card, .kpi, .tile, .widget, .panel {
  position: relative;
}
.card::after, .kpi::after {
  content:""; position:absolute; top:0; left:0; height:2px; width:100%;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.65), transparent);
  opacity:.55; pointer-events:none;
}
.card { transition: box-shadow .25s ease, transform .25s ease; }
.card:hover { box-shadow: 0 10px 32px rgba(56,189,248,.12); }

/* --- headings: HUD lettering --- */
h1 { letter-spacing:.02em; }
h2, h3 { letter-spacing:.05em; }
th { letter-spacing:.1em; text-transform: uppercase; font-size: 11px; }

/* --- buttons glow on hover --- */
button, .btn {
  transition: box-shadow .2s ease, transform .15s ease, filter .2s ease;
}
button:hover, .btn:hover { filter: brightness(1.06); }
.btn:hover { box-shadow: 0 4px 18px rgba(56,189,248,.25); }
.btn.acc:hover, button.acc:hover { box-shadow: 0 4px 22px rgba(56,189,248,.4); }
button:active, .btn:active { transform: scale(.97); }

/* --- inputs: arc-blue focus ring --- */
input:focus, select:focus, textarea:focus {
  border-color: rgba(56,189,248,.65) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.15);
  outline: none;
}

/* --- tables: rows light up under the cursor --- */
tbody tr { transition: background .18s ease; }
tbody tr:hover { background: rgba(56,189,248,.06); }

/* --- text selection + scrollbars in reactor blue --- */
::selection { background: rgba(56,189,248,.3); }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(100,116,139,.45); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(56,189,248,.55); }
*::-webkit-scrollbar-track { background: transparent; }

/* --- dark theme: deeper workshop atmosphere --- */
[data-theme="dark"] body {
  background-image:
    radial-gradient(1100px 500px at 85% -10%, rgba(56,189,248,.07), transparent 60%),
    radial-gradient(900px 460px at -10% 110%, rgba(139,92,246,.05), transparent 60%);
  background-attachment: fixed;
}
[data-theme="dark"] .card:hover { box-shadow: 0 12px 40px rgba(56,189,248,.16); }
[data-theme="dark"] .card::after, [data-theme="dark"] .kpi::after { opacity:.8; }