/* UI Overrides: 3D depth + better main menu (Ocean/Grass palette)
   Safe: add as an extra stylesheet after your existing CSS.
*/

:root{
  /* Palette tweaks (keeps blue, replaces heavy gold with greener accent) */
  --gold:#16A34A;
  --gold2:#34D399;
  --blue:#0B2E6D;
  --blue2:#1E40AF;
}

/* Page background: cooler (less gold) */
body{
  background:
    radial-gradient(1100px 720px at 20% -10%, rgba(14,165,233,0.20), transparent 62%),
    radial-gradient(900px 650px at 90% 0%, rgba(52,211,153,0.16), transparent 58%),
    linear-gradient(180deg, #EAF6FF 0%, #F8FAFC 260px) !important;
}

/* ========== 3D FEEL (cards, tables, buttons) ========== */

.card, .tableWrap{
  border-color: rgba(203,213,225,0.62) !important;
  box-shadow:
    0 18px 44px rgba(2, 6, 23, 0.10),
    0 1px 0 rgba(255,255,255,0.75) inset !important;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.92)) !important;
}

.card:hover{
  transform: translateY(-2px);
  transition: transform 180ms ease, box-shadow 220ms ease;
  box-shadow:
    0 26px 64px rgba(2, 6, 23, 0.14),
    0 1px 0 rgba(255,255,255,0.78) inset !important;
}

.btn{
  border-color: rgba(203,213,225,0.80) !important;
  box-shadow:
    0 10px 20px rgba(2,6,23,0.10),
    0 1px 0 rgba(255,255,255,0.70) inset !important;
  transform: translateZ(0);
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 28px rgba(2,6,23,0.14),
    0 1px 0 rgba(255,255,255,0.75) inset !important;
}

.btn:active{
  transform: translateY(0px);
  box-shadow:
    0 8px 16px rgba(2,6,23,0.12),
    0 1px 0 rgba(255,255,255,0.65) inset !important;
}

/* Make primary button green/seafoam (no gold) */
.btn.primary{
  background: linear-gradient(180deg, var(--gold2), var(--gold)) !important;
  border-color: rgba(22,163,74,0.95) !important;
  color: #052a6f !important;
  position:relative;
  overflow:hidden;
}

.btn.primary:before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.45) 35%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 260ms ease;
}

.btn.primary:hover:before{ transform: translateX(120%); }

/* Table subtle hover */
.table tr:hover td{ background: rgba(14,165,233,0.06) !important; }

/* Headings accent line (if your theme adds h2:after) */
h2:after{
  background: linear-gradient(90deg, var(--gold), rgba(14,165,233,0.25)) !important;
}

/* ========== MAIN MENU UPGRADE (pill/glass/3D) ========== */

.topbar{
  background: rgba(234, 246, 255, 0.78) !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.55) !important;
  backdrop-filter: saturate(140%) blur(14px);
}

.topbarInner{
  gap: 12px !important;
}

.nav{
  display:flex;
  align-items:center;
  gap: 6px !important;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(203,213,225,0.60);
  background: rgba(255,255,255,0.55);
  box-shadow:
    0 14px 30px rgba(2,6,23,0.12),
    0 1px 0 rgba(255,255,255,0.75) inset;
  backdrop-filter: blur(10px);
}

.nav a{
  position:relative;
  padding: 10px 12px !important;
  border-radius: 999px;
  font-weight: 900 !important;
  letter-spacing: -0.01em;
  color: rgba(11,22,43,0.90) !important;
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55));
  box-shadow:
    0 8px 16px rgba(2,6,23,0.08),
    0 1px 0 rgba(255,255,255,0.65) inset;
  transition: transform 140ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
  text-decoration:none !important;
}

.nav a:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background: radial-gradient(120px 40px at 30% 15%, rgba(255,255,255,0.65), transparent 60%);
  pointer-events:none;
  opacity:0.75;
}

.nav a:hover{
  transform: translateY(-1px);
  border-color: rgba(52,211,153,0.55);
  background: linear-gradient(180deg, rgba(234,246,255,0.92), rgba(255,255,255,0.62));
  box-shadow:
    0 14px 26px rgba(2,6,23,0.14),
    0 1px 0 rgba(255,255,255,0.72) inset;
}

.nav a:active{
  transform: translateY(0px);
  box-shadow:
    0 8px 16px rgba(2,6,23,0.12),
    0 1px 0 rgba(255,255,255,0.62) inset;
}

/* Optional: if your app adds .active on current page links */
.nav a.active{
  border-color: rgba(14,165,233,0.60);
  background: linear-gradient(180deg, rgba(14,165,233,0.18), rgba(255,255,255,0.62));
}

/* Mobile: avoid wrapping issues */
@media (max-width: 820px){
  .nav{
    border-radius: 18px;
    padding: 8px;
  }
  .nav a{
    padding: 10px 10px !important;
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  .card, .btn, .nav a{ transition: none !important; }
  .btn.primary:before{ display:none; }
}

/* Hide the mobile menu toggle on desktop */
.menuToggle,
#menuToggle,
.navToggle,
.mobileMenuBtn,
button[aria-label="Menu"],
button[aria-label="Open menu"]{
  display:none !important;
}

/* Show it only on mobile */
@media (max-width: 820px){
  .menuToggle,
  #menuToggle,
  .navToggle,
  .mobileMenuBtn,
  button[aria-label="Menu"],
  button[aria-label="Open menu"]{
    display:inline-flex !important;
  }
}