/* =========================================================================
   ServiceConnect Control Centre — Part 3 enhancements
   -------------------------------------------------------------------------
   Additive polish layered over the existing app. It only *adds* rules and
   targets existing selectors (#login-overlay, .login-card, .page, .sb-item,
   .btn, #jtbody) plus a few new elements injected by enhancements.js
   (#auth-loader, #load-bar, #page-recycle). Nothing here changes layout or
   removes behaviour — load it AFTER the app's own styles.

   Respects prefers-reduced-motion: all motion below is disabled there.
   ========================================================================= */

/* ---- animated login ---------------------------------------------------- */
/* The existing overlay is a static dark gradient; give it slow, calm motion
   (two drifting light pools) so it feels alive without distracting. */
#login-overlay { position: relative; overflow: hidden; }
#login-overlay::before {
  content: ""; position: absolute; inset: -40%;
  background:
    radial-gradient(40% 40% at 30% 30%, rgba(22,169,122,.20), transparent 60%),
    radial-gradient(45% 45% at 75% 65%, rgba(37,99,235,.16), transparent 60%);
  animation: lgDrift 18s ease-in-out infinite;
  z-index: 0;
}
#login-overlay::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 44px 44px; z-index: 0; opacity: .5;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000, transparent 80%);
}
#login-overlay.show .login-card { position: relative; z-index: 1; animation: lgRise .55s cubic-bezier(.2,.8,.2,1) both; }
#login-overlay.show .login-logo { animation: lgLogo .7s cubic-bezier(.2,.8,.2,1) both; }
#login-overlay.show .login-logo svg { animation: lgLogoSpin .9s cubic-bezier(.2,.8,.2,1) both; }
#login-overlay.show .login-title { animation: lgUp .5s ease both .12s; }
#login-overlay.show .login-sub { animation: lgUp .5s ease both .18s; }
#login-overlay.show .login-body .fg,
#login-overlay.show .login-body .btn,
#login-overlay.show .login-demo { animation: lgUp .5s ease both; }
#login-overlay.show .login-body .fg:nth-child(2) { animation-delay: .22s; }
#login-overlay.show .login-body .fg:nth-child(3) { animation-delay: .28s; }
#login-overlay.show .login-body .btn { animation-delay: .34s; }
#login-overlay.show .login-demo { animation-delay: .4s; }
.login-logo { box-shadow: 0 0 0 0 rgba(22,169,122,.5); animation: lgPulse 3s ease-in-out infinite; }

@keyframes lgDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(3%, -2%) scale(1.08); } }
@keyframes lgRise { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes lgLogo { from { opacity: 0; transform: translateY(-8px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes lgLogoSpin { from { transform: rotate(-90deg); } to { transform: rotate(0); } }
@keyframes lgUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lgPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(22,169,122,.45); } 50% { box-shadow: 0 0 0 10px rgba(22,169,122,0); } }

/* ---- post-authentication loader --------------------------------------- */
#auth-loader {
  position: fixed; inset: 0; z-index: 6000; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 18px;
  background: linear-gradient(135deg, #0c1a26 0%, #123247 100%);
  color: #fff; opacity: 0; transition: opacity .3s ease;
}
#auth-loader.show { display: flex; opacity: 1; }
#auth-loader .ring { width: 54px; height: 54px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.18); border-top-color: #16a97a; animation: spin .8s linear infinite; }
#auth-loader .msg { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); }
#auth-loader .mark { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- top loading bar (route changes, syncing, recovery) --------------- */
#load-bar {
  position: fixed; left: 0; top: 0; height: 3px; width: 0; z-index: 7000;
  background: linear-gradient(90deg, #16a97a, #2563eb);
  box-shadow: 0 0 8px rgba(22,169,122,.6); opacity: 0;
  transition: width .25s ease, opacity .3s ease; pointer-events: none;
}
#load-bar.active { opacity: 1; }

/* ---- smoother, faster page transitions -------------------------------- */
/* The app shows a page by adding .active. Animate that reveal. */
.page.active { animation: pageIn .2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* table rows settle in on (re)render — subtle, capped so big tables stay snappy */
tbody tr { animation: rowIn .18s ease both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---- consistent micro-interactions ------------------------------------ */
.btn { transition: transform .08s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn.bp:hover { box-shadow: 0 4px 14px rgba(22,169,122,.28); }
.sb-item { transition: background .12s ease, color .12s ease, border-color .12s ease, padding-left .12s ease; }
.sb-item:hover { padding-left: 19px; }
.card { transition: box-shadow .15s ease; }

/* gentle skeleton shimmer for loading lists */
.skel { position: relative; overflow: hidden; background: #eef1f4; border-radius: 6px; height: 14px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---- recycle bin ------------------------------------------------------- */
.rb-head { display: flex; align-items: center; gap: 10px; }
.rb-note {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted);
  background: #fbf7ee; border: 1px solid #f0e2bf; border-radius: var(--r); padding: 9px 12px; margin-bottom: 12px;
}
.rb-empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.rb-empty .ic { font-size: 30px; color: #c7ced6; margin-bottom: 8px; }
.rb-when { font-size: 11.5px; color: var(--muted); }
.rb-who { font-weight: 500; }
.btn.bdanger { color: var(--danger); border-color: #f3c7c2; }
.btn.bdanger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  #login-overlay::before, .login-logo, .page.active, tbody tr,
  #login-overlay.show .login-card, #login-overlay.show .login-logo,
  #login-overlay.show .login-logo svg, #login-overlay.show .login-title,
  #login-overlay.show .login-sub, #login-overlay.show .login-body .fg,
  #login-overlay.show .login-body .btn, #login-overlay.show .login-demo,
  #auth-loader .ring, .skel::after { animation: none !important; }
  #load-bar, .btn, .sb-item, .card { transition: none !important; }
}