/* =====================================================
   ROOT (COLOR SYSTEM)
===================================================== */
:root{
  --accent:#30687c ;                  /* Sapphire Blue */
  --accent-soft:#60a5fa;             /* Ice Blue */
  --accent-grad:linear-gradient(135deg,#30687c ,#60a5fa);

  --text-dark:#0f172a;
  --text-muted:#64748b;

  --glass-bg:rgba(255,255,255,.62);
  --glass-bg-mobile:rgba(255,255,255,.72);
  --glass-border:rgba(255,255,255,.28);

  --shadow-soft:0 8px 30px rgba(0,0,0,.08);
  --shadow-deep:0 30px 70px rgba(0,0,0,.22);
}

/* =====================================================
   BASE RESET
===================================================== */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto;
  color:var(--text-dark);
}

/* =====================================================
   GLASS NAVBAR (DESKTOP)
===================================================== */
.apple-glass-navbar{
  position:sticky;
  top:0;
  width:100%;
  z-index:1100;

  background:var(--glass-bg);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);

  border-bottom:1px solid var(--glass-border);

  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255,255,255,.45);

  padding:14px 0;
  transition:background .3s ease, box-shadow .3s ease;
}

/* =====================================================
   BRAND
===================================================== */
.navbar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:20px;
  color:var(--text-dark) !important;
  text-decoration:none;
}

.brand-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  background:var(--accent-grad);
  color:#fff;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 8px 22px rgba(37,99,235,.30),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.brand-text{
  letter-spacing:-.3px;
}

/* =====================================================
   NAV LINKS (DESKTOP)
===================================================== */
.navbar-nav{
  align-items:center;
}

.nav-link{
  display:flex;
  align-items:center;
  gap:8px;

  font-size:14px;
  font-weight:600;

  color:var(--text-dark) !important;
  opacity:.88;

  position:relative;
  padding:6px 8px !important;
  transition:opacity .25s ease, color .25s ease;
}

.nav-link i{
  font-size:15px;
  color:var(--accent);
  opacity:.85;
}

.nav-link:hover{
  opacity:1;
  color:var(--accent) !important;
}

/* Underline (desktop only) */
.nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0;
  height:2px;
  background:var(--accent-grad);
  transition:width .3s ease;
}

.nav-link:hover::after,
.nav-link.active::after{
  width:100%;
}

/* =====================================================
   DIVIDER
===================================================== */
.nav-divider{
  width:1px;
  height:20px;
  background:rgba(0,0,0,.12);
  margin:0 6px;
}

/* =====================================================
   CTA BUTTON
===================================================== */
.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  background:var(--accent-grad);
  color:#fff;

  padding:9px 20px;
  border-radius:999px;

  font-size:14px;
  font-weight:700;
  text-decoration:none;

  box-shadow:
    0 12px 30px rgba(37,99,235,.28),
    inset 0 1px 0 rgba(255,255,255,.35);

  transition:transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.nav-cta:hover{
  color:#fff;
  opacity:.96;
  transform:translateY(-1px);
}

/* =====================================================
   TOGGLER
===================================================== */
.apple-toggler{
  border:none;
  background:none;
  width:40px;
  height:28px;
  position:relative;
  cursor:pointer;
}

.apple-toggler span{
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  background:var(--text-dark);
  border-radius:2px;
}

.apple-toggler span:first-child{ top:7px; }
.apple-toggler span:last-child{ bottom:7px; }

/* =====================================================
   MOBILE NAVBAR
===================================================== */
@media (max-width:991px){

  .apple-glass-navbar{
    padding:10px 0;
  }

  .navbar-brand{
    font-size:18px;
  }

  .brand-icon{
    width:34px;
    height:34px;
  }

  /* Mobile menu as floating glass sheet */
  .navbar-collapse{
    position:fixed;
    top:64px;
    left:12px;
    right:12px;

    background:var(--glass-bg-mobile);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);

    border-radius:22px;
    padding:20px 18px;

    box-shadow:var(--shadow-deep);

    transform:translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition:.3s ease;
  }

  .navbar-collapse.show{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .navbar-nav{
    gap:6px !important;
  }

  .nav-link{
    font-size:15px;
    padding:12px 10px !important;
    border-radius:14px;
  }

  .nav-link:hover,
  .nav-link.active{
    background:rgba(37,99,235,.06);
  }

  .nav-link::after{
    display:none;
  }

  .nav-divider{
    display:none;
  }

  .nav-cta{
    width:100%;
    padding:14px;
    font-size:15px;
    border-radius:18px;
    margin-top:10px;
  }
}

/* =====================================================
   VERY SMALL DEVICES
===================================================== */
@media (max-width:420px){

  .navbar-brand{
    font-size:17px;
  }

  .nav-link{
    font-size:14px;
  }

}
/* ================= PROFILE DROPDOWN ================= */
.has-profile{
  position:relative;
}

/* Glass dropdown */
.glass-dropdown{
  position:absolute;
  top:120%;
  right:0;
  width:260px;

  background:rgba(255,255,255,.86);
  backdrop-filter: blur(22px) saturate(160%);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.5);

  box-shadow:
    0 30px 70px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.6);

  padding:14px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:.25s ease;
  z-index:2000;
}

/* Show dropdown (desktop hover) */
@media(min-width:992px){
  .has-profile:hover .glass-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
}

/* Profile header */
.profile-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(0,0,0,.03);
}

.profile-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--accent-grad);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}

.profile-head strong{
  display:block;
  font-size:14px;
}

.profile-head small{
  font-size:12px;
  color:var(--text-muted);
}

/* Links */
.profile-links{
  list-style:none;
  padding:10px 0;
  margin:10px 0;
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:1px solid rgba(0,0,0,.06);
}

.profile-links li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  font-size:14px;
  font-weight:500;
  color:var(--text-dark);
  text-decoration:none;
  border-radius:12px;
}

.profile-links li a:hover{
  background:rgba(37,99,235,.08);
  color:var(--accent);
}

/* Footer */
.profile-footer{
  padding-top:8px;
}

.logout-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px;
  border-radius:14px;
  background:rgba(239,68,68,.1);
  color:#dc2626;
  font-weight:600;
  text-decoration:none;
}

.logout-btn:hover{
  background:rgba(239,68,68,.18);
}

/* ================= MOBILE ================= */
@media(max-width:991px){

  .glass-dropdown{
    position:static;
    width:100%;
    margin-top:10px;
    transform:none;
    opacity:1;
    visibility:visible;
    box-shadow:none;
    display:none;
  }

  .glass-dropdown.show{
    display:block;
  }
}
/* =====================================================
   MOBILE HORIZONTAL SCROLL NAV (FINAL FIX)
===================================================== */
@media (max-width: 991px){

  /* Navbar container */
  .apple-glass-navbar{
    padding:8px 0 4px;
  }

  /* Stack rows */
  .apple-glass-navbar .container{
    display:flex;
    flex-direction:column;
    position:relative;
  }

  /* TOP ROW: LOGO */
  .navbar-brand{
    padding:10px 0;
    margin:0;
  }

  /* TOP ROW: LOGIN */
  /* .has-profile{
    position:absolute;
    right:0;
    top:10px;
  } */

  .profile-toggle{
    padding:6px 10px !important;
    border-radius:12px;
    background:rgba(48,104,124,.10);
  }

  /* Disable bootstrap collapse logic */
  .navbar-collapse{
    display:block !important;
    position:static;
    background:none;
    box-shadow:none;
    padding:0;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }

  /* HORIZONTAL MENU */
  .navbar-nav{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;

    gap:18px;
    padding:8px 6px 14px;

    overflow-x:auto;
    overflow-y:hidden;

    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .navbar-nav::-webkit-scrollbar{
    display:none;
  }

  .nav-item{
    flex:0 0 auto;
  }

  /* Nav buttons */
  .nav-link{
    flex-direction:column;
    gap:4px;

    min-width:64px;
    padding:8px 6px !important;

    font-size:11px;
    font-weight:600;
    text-align:center;

    border-radius:14px;
    background:transparent;
  }

  .nav-link i{
    font-size:18px;
    color:var(--accent);
  }

  .nav-link.active{
    background:rgba(48,104,124,.12);
    color:var(--accent);
  }

  /* Cleanups */
  .nav-divider,
  .nav-cta,
  .navbar-toggler{
    display:none !important;
  }

  /* Profile dropdown as inline block */
  .glass-dropdown{
    /* position:static; */
    width:100%;
    margin-top:10px;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
  }

  .glass-dropdown.show{
    display:block;
  }
}
/* =====================================================
   MOBILE NAV – LOGO + PROFILE SAME ROW (FIXED)
===================================================== */
@media (max-width: 991px){

  /* Container becomes column */
  .apple-glass-navbar .container{
    display:flex;
    flex-direction:column;
  }

  /* ================= TOP ROW ================= */
  .mobile-top-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:140px;               /* ✅ spacing */
  }

  /* Logo */
  .navbar-brand{
    margin:0;
    padding:0;
  }

  /* Profile */
  .has-profile{
    position:relative;
  }

  .profile-toggle{
    padding:6px 10px !important;
    border-radius:12px;
    background:rgba(48,104,124,.10);
  }

  /* ================= NAV SCROLL ROW ================= */
  .navbar-collapse{
    display:block !important;
    margin-top:6px;
  }

  .navbar-nav{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:18px;
    padding:8px 4px 14px;
    scrollbar-width:none;
  }

  .navbar-nav::-webkit-scrollbar{
    display:none;
  }

  .nav-item{
    flex:0 0 auto;
  }

  .nav-link{
    flex-direction:column;
    min-width:64px;
    font-size:11px;
    padding:8px 6px !important;
    text-align:center;
    border-radius:14px;
  }

  .nav-link i{
    font-size:18px;
    color:var(--accent);
  }

  .nav-link.active{
    background:rgba(48,104,124,.12);
    color:var(--accent);
  }

  /* Hide desktop-only elements */
  .nav-divider,
  .nav-cta,
  .navbar-toggler{
    display:none !important;
  }

  /* Profile dropdown inline */
  .glass-dropdown{
    position:static;
    width:100%;
    margin-top:10px;
    display:none;
  }

  .glass-dropdown.show{
    display:block;
  }
}
/* ================= MOBILE TOP ROW ================= */
@media (max-width: 991px){



  /* Hide desktop brand */
  .navbar > .container > .navbar-brand{
    display:none !important;
  }

  /* Profile icon spacing */
  .mobile-top-row .profile-toggle{
    padding:6px 10px;
    border-radius:12px;
    background:rgba(48,104,124,.08);
  }

  /* Scrollable nav BELOW top row */
  .navbar-collapse{
    display:block !important;
    margin-top:6px;
  }

  .navbar-nav{
    flex-direction:row;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;

    gap:18px;
    padding:10px 6px 14px;

    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .navbar-nav::-webkit-scrollbar{
    display:none;
  }

  .nav-item{
    flex:0 0 auto;
  }

  .nav-link{
    flex-direction:column;
    min-width:64px;
    font-size:11px;
    padding:8px 6px !important;
    text-align:center;
  }

  .nav-divider,
  .nav-cta{
    display:none;
  }
}

@media (max-width: 991px){

  .has-profile{
    position:relative;
  }

  .glass-dropdown{
    position:absolute;
    top:56px;                /* below icon */
    right:0;
    width:260px;

    background:rgba(255,255,255,.92);
    backdrop-filter: blur(22px) saturate(160%);
    border-radius:22px;

    box-shadow:0 30px 70px rgba(0,0,0,.25);
    padding:14px;

    display:none;            /* hidden by default */
    z-index:3000;
  }

  .glass-dropdown.show{
    display:block;
  }
}