/* ============================================================
   QAF – Layout: Navbar, Sidebar, Footer, Grids
   Luxury Editorial Theme — Synced with Landing Page
   ============================================================ */

/* ── Navbar (matching landing page nav) ── */
.navbar{position:fixed;top:0;left:0;right:0;height:var(--nav-height);background:rgba(247,243,238,0.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(184,150,62,0.15);z-index:var(--z-fixed);transition:all 0.4s ease}
.navbar.scrolled{background:rgba(247,243,238,0.98);box-shadow:0 1px 0 rgba(184,150,62,0.1)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,80px)}
.navbar-brand{display:flex;align-items:center;gap:var(--sp-3)}
.navbar-logo{width:36px;height:36px}
.navbar-title{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:300;letter-spacing:0.08em;line-height:1;color:var(--clr-ink)}
.navbar-title span{color:var(--clr-gold)}
.navbar-nav{display:flex;align-items:center;gap:var(--sp-1)}
.nav-link{padding:var(--sp-2) var(--sp-3);font-family:'Tenor Sans',sans-serif;font-size:0.68rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--clr-ink-muted);transition:color 0.3s ease;position:relative}
.nav-link::after{content:'';position:absolute;bottom:0;left:var(--sp-3);right:var(--sp-3);height:1px;background:var(--clr-gold);transform:scaleX(0);transition:transform 0.3s ease;transform-origin:left}
.nav-link:hover,.nav-link.active{color:var(--clr-gold)}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.navbar-actions{display:flex;align-items:center;gap:var(--sp-3)}

/* Mobile Menu */
.menu-toggle{display:none;flex-direction:column;gap:5px;padding:var(--sp-2);cursor:pointer}
.menu-toggle span{display:block;width:24px;height:1px;background:var(--clr-ink);transition:all var(--duration-fast)}
.menu-toggle span:nth-child(2){width:16px;background:var(--clr-gold)}
.menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.menu-toggle.active span:nth-child(2){opacity:0}
.menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

@media(max-width:768px){
  .menu-toggle{display:flex}
  .navbar-nav{position:fixed;top:var(--nav-height);left:0;right:0;background:rgba(247,243,238,0.98);backdrop-filter:blur(12px);flex-direction:column;padding:var(--sp-6) clamp(20px,5vw,80px);gap:var(--sp-3);transform:translateY(-120%);transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);z-index:var(--z-fixed);border-bottom:1px solid rgba(184,150,62,0.15)}
  .navbar-nav.open{transform:translateY(0)}
  .nav-link{padding:var(--sp-3) 0;font-size:0.72rem}
  .nav-link.active::after{display:none}
  .navbar-actions .btn{display:none}
  .navbar-inner{padding:0 20px}
}

/* ── Sidebar (editorial dark) ── */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);background:var(--clr-ink);color:var(--clr-cream);z-index:var(--z-fixed);display:flex;flex-direction:column;transition:transform var(--duration-base)}
.sidebar-header{padding:24px 20px;border-bottom:1px solid rgba(184,150,62,0.12);display:flex;align-items:center;gap:var(--sp-3)}
.sidebar-brand{font-family:'Cormorant Garamond',serif;font-size:1.2rem;color:var(--clr-gold-light);font-weight:300;letter-spacing:0.05em}
.sidebar-nav{flex:1;padding:var(--sp-4) var(--sp-3);overflow-y:auto}
.sidebar-section{margin-bottom:var(--sp-4)}
.sidebar-section-title{font-family:'Tenor Sans',sans-serif;font-size:0.5rem;font-weight:400;color:var(--clr-gold);text-transform:uppercase;letter-spacing:0.4em;padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-1)}
.sidebar-link{display:flex;align-items:center;gap:var(--sp-3);padding:10px 14px;font-family:'Tenor Sans',sans-serif;font-size:0.72rem;letter-spacing:0.1em;color:rgba(247,243,238,0.5);transition:all 0.3s;margin-bottom:1px}
.sidebar-link:hover{color:var(--clr-cream);background:rgba(184,150,62,0.08)}
.sidebar-link.active{color:var(--clr-gold-light);background:rgba(184,150,62,0.1);border-left:2px solid var(--clr-gold)}
.sidebar-link .icon{width:18px;text-align:center;flex-shrink:0;font-size:0.85rem}
.sidebar-footer{padding:var(--sp-4) var(--sp-3);border-top:1px solid rgba(184,150,62,0.12)}
.sidebar-user{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3)}
.sidebar-avatar{width:32px;height:32px;border-radius:var(--radius-full);border:1px solid rgba(184,150,62,0.3)}
.sidebar-user-name{font-family:'Cormorant Garamond',serif;font-size:0.9rem;font-weight:400;color:var(--clr-cream)}
.sidebar-user-role{font-size:0.55rem;color:var(--clr-gold);letter-spacing:0.2em;text-transform:uppercase}

/* ── Dashboard (editorial) ── */
.dashboard-content{margin-left:var(--sidebar-width);min-height:100vh;background:var(--clr-cream)}
.dashboard-topbar{height:var(--nav-height);background:rgba(247,243,238,0.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(184,150,62,0.15);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,3vw,40px);position:sticky;top:0;z-index:var(--z-sticky)}
.dashboard-topbar-title{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:300;color:var(--clr-ink);letter-spacing:0.02em}
.dashboard-body{padding:clamp(20px,3vw,40px)}
.sidebar-toggle{display:none;position:fixed;top:16px;left:16px;z-index:calc(var(--z-fixed)+1);width:36px;height:36px;background:var(--clr-ink);color:var(--clr-gold-light);align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(26,24,20,0.15);border:1px solid rgba(184,150,62,0.2)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(26,24,20,0.5);backdrop-filter:blur(4px);z-index:calc(var(--z-fixed)-1)}

@media(max-width:1024px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-toggle{display:flex}
  .sidebar-overlay.active{display:block}
  .dashboard-content{margin-left:0}
  .dashboard-body{padding:20px;padding-bottom:calc(20px + 70px)}
}

/* ── Mobile Bottom Nav ── */
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:60px;background:rgba(26,24,20,0.98);backdrop-filter:blur(12px);border-top:1px solid rgba(184,150,62,0.15);z-index:var(--z-fixed);padding:0 var(--sp-2)}
.mobile-bottom-nav-inner{display:flex;align-items:center;justify-content:space-around;height:100%;max-width:500px;margin:0 auto}
.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px;color:rgba(247,243,238,0.4);font-family:'Tenor Sans',sans-serif;font-size:0.5rem;letter-spacing:0.15em;text-transform:uppercase;cursor:pointer;transition:all 0.3s;min-width:52px;text-decoration:none}
.mobile-nav-item:hover,.mobile-nav-item.active{color:var(--clr-gold-light)}
.mobile-nav-item .mobile-nav-icon{font-size:1.1rem;line-height:1}

@media(max-width:768px){
  .mobile-bottom-nav{display:block}
  .sidebar-toggle{top:12px;left:12px;width:32px;height:32px;font-size:0.8rem}
}

/* ── Footer ── */
.footer{background:var(--clr-ink);color:var(--clr-cream);padding:var(--sp-16) 0 var(--sp-6);border-top:1px solid rgba(184,150,62,0.15)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-8);margin-bottom:var(--sp-12)}
.footer-brand-title{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:300;color:var(--clr-gold-light);margin-bottom:var(--sp-3)}
.footer-brand-text{font-size:0.75rem;color:rgba(247,243,238,0.5);line-height:var(--lh-relaxed);letter-spacing:0.05em}
.footer-title{font-family:'Tenor Sans',sans-serif;font-size:0.6rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--clr-gold);margin-bottom:var(--sp-4)}
.footer-links{display:flex;flex-direction:column;gap:var(--sp-2)}
.footer-link{font-size:0.75rem;color:rgba(247,243,238,0.5);transition:color 0.3s;letter-spacing:0.05em}
.footer-link:hover{color:var(--clr-gold-light)}
.footer-bottom{border-top:1px solid rgba(184,150,62,0.12);padding-top:var(--sp-6);display:flex;align-items:center;justify-content:space-between;font-size:0.6rem;letter-spacing:0.15em;color:rgba(247,243,238,0.3)}

@media(max-width:768px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column;gap:var(--sp-3);text-align:center}
}

/* ── Grids & Utilities ── */
.grid{display:grid;gap:var(--sp-6)}
.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.grid-2,.grid-3{grid-template-columns:1fr}}

.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-center{align-items:center;justify-content:center}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:var(--sp-2)}.gap-3{gap:var(--sp-3)}.gap-4{gap:var(--sp-4)}.gap-6{gap:var(--sp-6)}
.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}
.text-center{text-align:center}.main-content{padding-top:var(--nav-height)}