/* ============================================================
   Portal-wide overrides (v6) - Vibrant Glassmorphic
   - Vibrant login palette applied portal-wide
   - Glassmorphism on cards, sidebar, topbar, footer
   - Animated headings everywhere
   - Footer text navy (animated), NO navy background
   - Sidebar hidden on mobile until toggled
   - Fully mobile responsive
   ============================================================ */

:root{
  --vc-navy:#2563eb;
  --vc-pink:#0d9488;
  --vc-gold:#f5b301;
  --vc-cyan:#06b6d4;
  --vc-violet:#3b82f6;
  --vc-navy:#0b2545;
  --vc-navy-2:#1d4ed8;
}

/* ---- Vibrant background (from login page) ---- */
html, body{
  background:
    radial-gradient(circle at 10% 15%, rgba(59,130,246,.28), transparent 30%),
    radial-gradient(circle at 90% 20%, rgba(245,179,1,.25), transparent 28%),
    radial-gradient(circle at 50% 95%, rgba(245,179,1,.20), transparent 30%),
    linear-gradient(135deg,#fff7ed,#f5f3ff,#ecfeff) !important;
  background-attachment: fixed !important;
  min-height:100vh;
}
body::before{ display:none !important; content:none !important; }

/* Floating blurred shapes (keep) */
.lp-shape{position:fixed;border-radius:999px;filter:blur(45px);opacity:.30;pointer-events:none;z-index:0;animation:lpFloat 9s ease-in-out infinite}
.lp-shape.one{width:260px;height:260px;background:var(--vc-violet);top:80px;left:-90px}
.lp-shape.two{width:280px;height:280px;background:var(--vc-gold);right:-100px;top:200px;animation-delay:1.5s}
.lp-shape.three{width:240px;height:240px;background:var(--vc-cyan);bottom:-80px;left:35%;animation-delay:3s}
.lp-shape.four{width:220px;height:220px;background:var(--vc-pink);top:55%;right:15%;animation-delay:4.5s;display:block !important}
@keyframes lpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

.mystify-bg{display:none !important;}

/* ---- Topbar: vibrant glass ---- */
.topbar{
  background: linear-gradient(90deg, rgba(212,175,55,.85), rgba(245,179,1,.80), rgba(245,179,1,.80), rgba(6,182,212,.85)) !important;
  background-size:300% 100% !important;
  animation: hueShift 12s linear infinite;
  color:#fff !important;
  border-bottom:1px solid rgba(255,255,255,.35) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  box-shadow: 0 10px 30px -12px rgba(212,175,55,.45) !important;
}
.topbar, .topbar a, .topbar .brand a, .topbar nav a{ color:#fff !important; }
.topbar .pill{ background:rgba(255,255,255,.20) !important; border:1px solid rgba(255,255,255,.45) !important; color:#fff !important; backdrop-filter:blur(6px); }
.menu-toggle{ color:#fff !important; }

/* ---- Sidebar: glassmorphic with vibrant border ---- */
.sidebar{
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  border:1px solid rgba(255,255,255,.7) !important;
  box-shadow: 0 25px 60px -25px rgba(212,175,55,.35), 0 15px 40px -25px rgba(245,179,1,.25) !important;
  color:#0f172a !important;
  border-radius: 22px;
}
.sidebar h4{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  background: linear-gradient(90deg,var(--vc-navy),var(--vc-pink),var(--vc-gold),var(--vc-cyan),var(--vc-navy)) !important;
  background-size:300% auto !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  animation: hueShift 6s linear infinite !important;
  opacity:1 !important;
  letter-spacing:.14em; text-transform:uppercase; font-size:.72rem;
}
.sidebar a{
  color:#0f172a !important;
  -webkit-text-fill-color:#0f172a !important;
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:12px;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.sidebar a .ic{ color:var(--vc-navy) !important; -webkit-text-fill-color:var(--vc-navy) !important; }
.sidebar a:hover{
  background: rgba(255,255,255,.65) !important;
  box-shadow: inset 3px 0 0 var(--vc-pink), 0 6px 18px rgba(212,175,55,.20) !important;
  color:#0f172a !important;
}
.sidebar a.active, .sidebar a.active:hover{
  background: linear-gradient(90deg, rgba(212,175,55,.90), rgba(245,179,1,.85), rgba(245,179,1,.85)) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color: rgba(255,255,255,.55) !important;
  box-shadow: inset 4px 0 0 #ffffff, 0 10px 24px rgba(212,175,55,.45) !important;
  font-weight:800 !important;
}
.sidebar a.active .ic{ color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* User card inside sidebar */
.sidebar .user-card{
  background: linear-gradient(135deg, rgba(212,175,55,.15), rgba(245,179,1,.12), rgba(245,179,1,.12)) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  backdrop-filter: blur(10px);
}
.sidebar .user-card .uc-name{ color:var(--vc-navy) !important; -webkit-text-fill-color:var(--vc-navy) !important; }
.sidebar .user-card .uc-role{ color:var(--vc-pink) !important; -webkit-text-fill-color:var(--vc-pink) !important; }
.sidebar .user-card .uc-term,
.sidebar .user-card .uc-clock{ color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; }

/* ---- Cards: glassmorphic ---- */
.card{
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(20px) saturate(170%) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow: 0 22px 55px -22px rgba(212,175,55,.30), 0 12px 34px -22px rgba(245,179,1,.25) !important;
  border-radius: 22px !important;
}
.stat, .chart-card{
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.75) !important;
  border-radius:20px !important;
  box-shadow: 0 18px 40px -22px rgba(6,182,212,.35) !important;
}

/* ---- Buttons: vibrant ---- */
.btn, button.btn{
  background: linear-gradient(135deg, var(--vc-navy), var(--vc-pink), var(--vc-gold)) !important;
  background-size:200% auto !important;
  color:#fff !important;
  border:0 !important;
  border-radius:14px !important;
  box-shadow: 0 12px 28px -10px rgba(212,175,55,.45) !important;
  transition: background-position .3s ease, box-shadow .2s ease;
}
.btn:hover{ background-position: right center !important; box-shadow: 0 16px 34px -10px rgba(245,179,1,.55) !important; }
.btn.secondary, .btn.ghost{
  background: rgba(255,255,255,.75) !important;
  color:var(--vc-navy) !important;
  border:1px solid rgba(212,175,55,.35) !important;
  box-shadow:none !important;
}
.btn.gold{
  background: linear-gradient(135deg, var(--vc-gold), var(--vc-pink)) !important;
  color:#fff !important;
}
.btn.danger{
  background: linear-gradient(135deg,#ef4444,#0d9488) !important; color:#fff !important;
}
.btn.small{ padding:6px 12px; font-size:.82rem; }

/* ---- Animated headings EVERYWHERE ---- */
h1, h2, h3, h4, h5, h6,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.hero-title, .hero-title span,
.stat b{
  background: linear-gradient(90deg, var(--vc-navy), var(--vc-pink), var(--vc-gold), var(--vc-cyan), var(--vc-navy)) !important;
  background-size: 300% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  animation: hueShift 6s linear infinite !important;
}
@keyframes hueShift { to { background-position: 300% center; } }

/* Sidebar headings keep the animation but need higher opacity */
.sidebar h4{ opacity:1 !important; }

/* Paragraph text */
body, p, li, td, small, label{ color:#0f172a; }
.card p, .card small, .card li, .card td, .card label{ color:#0f172a !important; }

/* Inputs & selects: glass */
input[type=text], input[type=email], input[type=password], input[type=search],
input[type=number], input[type=tel], input[type=date], textarea, select{
  background: rgba(255,255,255,.85) !important;
  border:1px solid rgba(212,175,55,.20) !important;
  border-radius:12px !important;
  padding:10px 14px !important;
  color:#0f172a !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus, select:focus{
  outline:none !important;
  border-color:var(--vc-navy) !important;
  box-shadow: 0 0 0 4px rgba(212,175,55,.15) !important;
}

/* Badges */
.badge{ border-radius:999px; padding:3px 10px; font-size:.75rem; font-weight:700; }
.badge.paid{ background:rgba(34,197,94,.15); color:#166534; }
.badge.unpaid{ background:rgba(245,179,1,.20); color:#92400e; }
.badge.expired{ background:rgba(239,68,68,.15); color:#991b1b; }

/* ---- Footer: glass with animated NAVY text (no navy background) ---- */
.site-footer, footer.site-footer{
  background: rgba(255,255,255,.55) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  border-top:1px solid rgba(255,255,255,.6) !important;
  box-shadow: 0 -8px 24px -14px rgba(212,175,55,.35) !important;
}
.site-footer .footer-inner{
  background: linear-gradient(90deg, #0b2545, #1e3a8a, #1d4ed8, #0b2545) !important;
  background-size:300% auto !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
  animation: navyShift 5s linear infinite !important;
  font-weight:800 !important;
}
@keyframes navyShift{ to { background-position:300% center; } }

/* ---- Mobile responsiveness ---- */
@media (max-width: 960px){
  .layout{ grid-template-columns:1fr !important; }
  .sidebar{
    position:fixed !important;
    top:66px !important; left:0 !important; bottom:0 !important;
    width:84% !important; max-width:320px !important;
    transform:translateX(-105%) !important;
    transition:transform .28s ease !important;
    z-index:50 !important;
    border-radius:0 22px 22px 0 !important;
    padding:14px 12px !important;
    overflow:auto !important;
  }
  body.sidebar-open .sidebar{ transform:translateX(0) !important; }
  .sidebar-backdrop{
    position:fixed; inset:0; background:rgba(15,23,42,.5);
    opacity:0; pointer-events:none; transition:opacity .2s; z-index:49;
  }
  body.sidebar-open .sidebar-backdrop{ opacity:1; pointer-events:auto; }
  .menu-toggle{ display:inline-flex !important; align-items:center; justify-content:center;
    background:rgba(255,255,255,.20) !important; border:1px solid rgba(255,255,255,.4) !important;
    font-size:1.35rem; padding:4px 10px; margin-right:8px; cursor:pointer; border-radius:10px; color:#fff !important; }
  .content{ padding:16px 12px !important; margin-left:0 !important; }
  .grid{ grid-template-columns: 1fr !important; }
  .chart-grid{ grid-template-columns: 1fr !important; }
  .card{ padding:16px !important; border-radius:18px !important; }
  form[style*="grid-template-columns"]{ grid-template-columns: 1fr !important; }
  h1{ font-size:1.5rem !important; } h2{ font-size:1.25rem !important; }
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .msg-wrap{ grid-template-columns:1fr !important; }
  .cbt-shell{ grid-template-columns:1fr !important; }
  .topbar .pill.hide-sm{ display:none !important; }
}
@media (min-width: 961px){
  .menu-toggle{ display:none !important; }
  .sidebar-backdrop{ display:none !important; }
}
@media (max-width: 560px){
  body{ font-size:15px; }
  .topbar{ padding:10px 12px !important; min-height:60px; flex-wrap:wrap; gap:8px; }
  .brand-logo{ height:34px !important; width:auto !important; }
  .brand a span{ font-size:.95rem; max-width:52vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block; vertical-align:middle; }
  .card h1{ font-size:1.25rem !important; } .card h2{ font-size:1.1rem !important; }
  .stat b{ font-size:1.3rem !important; }
  .btn{ padding:9px 14px; font-size:.9rem; }
  .site-footer{ padding:9px 10px !important; font-size:.82rem !important; }
  .lp-shape{ opacity:.20 !important; }
}
@media (max-width: 400px){
  .content{ padding:12px 10px !important; }
  .card{ padding:14px !important; }
  .brand a span{ max-width:44vw; }
}

@media (prefers-reduced-motion: reduce){
  .lp-shape, .site-footer .footer-inner, h1,h2,h3,h4,h5,h6, .topbar{ animation:none !important; }
}