/*
 * navbar.css — Notesify
 * ─────────────────────────────────────────────────────────────────────────────
 * SINGLE SOURCE OF TRUTH for the navbar across index.html, app.html,
 * dashboard.html (and any future page).
 *
 * Root tokens used: --bg, --line, --line2, --text, --text2, --text3,
 *                   --accent, --accent2, --white, --bg3
 * All pages already define these identical :root vars, so no conflicts.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Canonical token overrides (lock the navbar dimensions) ── */
:root {
  --nav-height:          56px;
  --nav-pad-desktop:     40px;
  --nav-pad-mobile:      16px;

  /* Logo */
  --nav-logo-mark-size:  28px;
  --nav-logo-svg-size:   22px;
  --nav-logo-font-size:  15px;
  --nav-logo-gap:        10px;

  /* Links */
  --nav-link-font-size:  13px;
  --nav-link-gap:        32px;

  /* Buttons */
  --nav-btn-font-size:   12px;
  --nav-btn-pad:         8px 18px;
  --nav-btn-login-pad:   7px 16px;

  /* Pill tag */
  --nav-pill-pad:        5px 14px;

  /* Right cluster gap */
  --nav-right-gap:       10px;

  /* Hamburger */
  --nav-ham-size:        38px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BASE NAV — works for both "nav" (index/app) and ".top-nav" (dashboard)
   We target both selectors so zero HTML changes are needed on dashboard.
   ══════════════════════════════════════════════════════════════════════════════ */
/* ── All top navbars (3-col grid) ── */
nav:not(.sidebar-nav) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.07));
  z-index: 1000;
  /* 3-column grid: logo | nav-links (centered) | right buttons */
  display:               grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:           center;
  padding:               0 var(--nav-pad-desktop);
  background:            transparent;
}

nav:not(.sidebar-nav)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}
  box-sizing: border-box;
}


/* ── Logo / left slot ── */
.logo,
.top-nav-logo {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--nav-logo-gap);
  text-decoration: none;
  transition: opacity 0.2s;
}

.logo:hover,
.top-nav-logo:hover { opacity: 0.8; }

/* Logo container on dashboard uses .top-nav-left to hold the logo — keep it
   from consuming the full grid cell */
.top-nav-left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo-mark {
  width:           var(--nav-logo-mark-size);
  height:          var(--nav-logo-mark-size);
  background:      var(--accent, #fff);
  border-radius:   2px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.logo-mark svg {
  width:  var(--nav-logo-svg-size);
  height: var(--nav-logo-svg-size);
  color:  #000;
}

.logo-name {
  font-family:    'DM Mono', monospace;
  font-size:      var(--nav-logo-font-size);
  font-weight:    500;
  color:          var(--white, #fff);
  letter-spacing: -0.02em;
  /* Prevent FOUT-driven reflow from shrinking the text */
  font-display:   swap;
}

/* ── Center nav links ── */
.nav-links {
  justify-self:  center;
  display:       flex;
  align-items:   center;
  gap:           var(--nav-link-gap);
  list-style:    none;
  /* Reset positioning that app.html used (position:absolute / transform) */
  position:      static;
  transform:     none;
  left:          auto;
}

.nav-links a {
  font-size:      var(--nav-link-font-size);
  font-family:    'DM Sans', sans-serif;
  color:          var(--text2, #999);
  text-decoration: none;
  letter-spacing: 0.01em;
  position:       relative;
  padding-bottom: 2px;
  transition:     color 0.2s;
}

.nav-links a::after {
  content:        '';
  position:       absolute;
  bottom:         -1px;
  left:           0;
  width:          100%;
  height:         1px;
  background:     var(--text, #e8e8e8);
  transform:      scaleX(0);
  transform-origin: left;
  transition:     transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-links a:hover { color: var(--text, #e8e8e8); }
.nav-links a:hover::after { transform: scaleX(1); }

/* Pill variant (e.g. "App" link on index) */
.nav-pill {
  background:    var(--bg3, #1f1f1f) !important;
  border:        1px solid var(--line2, rgba(255,255,255,0.12)) !important;
  color:         var(--text, #e8e8e8) !important;
  padding:       var(--nav-pill-pad);
  border-radius: 2px;
}
.nav-pill::after { display: none !important; }

/* ── Right cluster ── */
.nav-right,
.nav-right-actions {
  justify-self: end;
  display:      flex;
  align-items:  center;
  gap:          var(--nav-right-gap);
  margin-left:  auto;   /* flex fallback — always pushes to right edge */
}

/* ── CTA button (white filled) ── */
.btn-nav,
.btn-nav-pc {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  background:      var(--accent, #fff);
  color:           #000;
  font-family:     'DM Mono', monospace;
  font-size:       var(--nav-btn-font-size);
  font-weight:     500;
  padding:         var(--nav-btn-pad);
  border-radius:   2px;
  text-decoration: none;
  letter-spacing:  0.02em;
  border:          none;
  cursor:          pointer;
  white-space:     nowrap;
  transition:      background 0.2s,
                   transform  0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
                   box-shadow 0.2s;
}

.btn-nav:hover,
.btn-nav-pc:hover {
  background:  var(--accent2, #ccc);
  transform:   translateY(-2px);
  box-shadow:  0 6px 20px rgba(255, 255, 255, 0.15);
}

/* ── Ghost / outlined login button ── */
.btn-nav-login {
  display:         inline-flex;
  align-items:     center;
  background:      transparent;
  color:           var(--text2, #999);
  font-family:     'DM Mono', monospace;
  font-size:       var(--nav-btn-font-size);
  font-weight:     500;
  padding:         var(--nav-btn-login-pad);
  border-radius:   2px;
  border:          1px solid var(--line2, rgba(255,255,255,0.12));
  text-decoration: none;
  letter-spacing:  0.02em;
  white-space:     nowrap;
  transition:      color 0.15s, border-color 0.15s,
                   background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.btn-nav-login:hover {
  color:       var(--text, #e8e8e8);
  border-color: rgba(255, 255, 255, 0.3);
  background:  rgba(255, 255, 255, 0.06);
  transform:   translateY(-1px);
  box-shadow:  0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── Hamburger ── */
.nav-hamburger,
.menu-toggle {
  display:          none; /* shown in mobile MQ below */
  align-items:      center;
  justify-content:  center;
  width:            var(--nav-ham-size);
  height:           var(--nav-ham-size);
  background:       transparent;
  border:           1px solid var(--line2, rgba(255,255,255,0.12));
  border-radius:    4px;
  color:            var(--white, #fff);
  cursor:           pointer;
  transition:       all 0.2s;
  padding:          0;
  flex-shrink:      0;
}

.nav-hamburger:hover,
.menu-toggle:hover {
  background:   rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ── Avatar button (injected by auth-navbar.js) ── */
.nav-avatar-wrap {
  position: relative;
  display:  flex;
  align-items: center;
}

.nav-avatar-btn {
  position:        relative;
  width:           34px;
  height:          34px;
  border-radius:   4px;
  border:          1px solid rgba(255, 255, 255, 0.12);
  background:      #1a1a1a;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transition:      all 0.2s cubic-bezier(0.2, 0, 0, 1);
  outline:         none;
  flex-shrink:     0;
  padding:         0;
}

.nav-avatar-btn:hover,
.nav-avatar-btn[aria-expanded="true"] {
  border-color: rgba(255, 255, 255, 0.25);
  background:   #242424;
  transform:    translateY(-1px);
}

.nav-avatar-btn svg {
  width:  18px;
  height: 18px;
  color:  #888;
  display: block;
  transition: color 0.2s;
}

.nav-avatar-btn:hover svg,
.nav-avatar-btn[aria-expanded="true"] svg { color: #fff; }

/* ── Dropdown panel ── */
.nav-dropdown {
  position:        fixed;
  top:             calc(var(--nav-height) + 10px);
  right:           40px;
  width:           310px;
  max-width:       calc(100vw - 32px);
  background:      #111111;
  border:          1px solid rgba(255, 255, 255, 0.15);
  border-radius:   8px;
  box-shadow:      0 10px 40px rgba(0, 0, 0, 0.6),
                   0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  z-index:         9999;
  overflow:        hidden;
  transform-origin: top right;
  transform:       scale(0.96) translateY(-8px);
  opacity:         0;
  pointer-events:  none;
  transition:      transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
                   opacity   0.2s ease-out;
  padding:         8px;
  display:         flex;
  flex-direction:  column;
}

.nav-dropdown.open {
  transform:      scale(1) translateY(0);
  opacity:        1;
  pointer-events: auto;
}

/* ── Dropdown inner elements ── */
.nav-dd-header {
  padding: 18px 20px 14px;
}

.nav-dd-email {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: #e8e8e8;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.nav-dd-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #28c840;
}

.nav-dd-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28c840;
  box-shadow: 0 0 8px rgba(40, 200, 64, 0.4);
  flex-shrink: 0;
}

.nav-dd-usage {
  padding: 12px 20px 14px;
}

.nav-dd-usage-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.nav-dd-usage-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #555;
}

.nav-dd-usage-count {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #e8e8e8;
}


.nav-dd-usage-bar-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

.nav-dd-usage-bar-fill {
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.nav-dd-usage-sub {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: #555;
}

/* ── Dropdown nav items (Dashboard, Log Out, etc.) ── */
.nav-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 22px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.03em;
  color: #888;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none !important;
  transition: background 0.12s, color 0.12s;
}

.nav-dd-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #e8e8e8;
}

.nav-dd-item.danger:hover {
  background: rgba(255, 95, 87, 0.07);
  color: #ff5f57;
}

.nav-dd-item svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.5;
}

.nav-dd-item:hover svg { opacity: 1; }

/* ── Upgrade CTA box inside dropdown ── */
.upg-cta-container {
  font-family: 'DM Sans', sans-serif;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 14px;
  margin: 8px;
  transition: all 0.3s ease;
}

.upg-cta-container.warning {
  background: rgba(254, 188, 46, 0.04);
  border-color: rgba(254, 188, 46, 0.2);
}

.upg-cta-container.critical {
  background: rgba(255, 95, 87, 0.05);
  border-color: rgba(255, 95, 87, 0.3);
}

.upg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.upg-plan-badge {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.upg-plan-badge.starter { background: rgba(255, 255, 255, 0.1); color: #888; }
.upg-plan-badge.basic   { background: rgba(52, 199, 89, 0.2);   color: #34c759; border: 1px solid rgba(52, 199, 89, 0.2); }
.upg-plan-badge.plus    { background: rgba(0, 122, 255, 0.2);   color: #007aff; border: 1px solid rgba(0, 122, 255, 0.2); }
.upg-plan-badge.pro     { background: rgba(175, 82, 222, 0.2);  color: #af52de; border: 1px solid rgba(175, 82, 222, 0.2); }

.upg-msg {
  font-size: 12px;
  color: #aaa;
}

.upg-cta-container.warning .upg-msg { color: #febc2e; }

.upg-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: #fff;
  color: #000;
  font-weight: 500;
  font-size: 12px;
  padding: 8px;
  border-radius: 5px;
  text-decoration: none;
  margin-top: 8px;
  transition: all 0.2s ease;
}

/* ── Auth hint: hide guest buttons when user is signed in ── */
.auth-hinted .btn-nav-login,
.auth-hinted #nav-login-btn,
.auth-hinted #nav-start-btn { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE  ≤ 768 px
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* nav — switch from 3-col grid to flex on mobile */
  nav:not(.sidebar-nav) {
    display:               flex;
    justify-content:       space-between;
    padding:               0 var(--nav-pad-mobile);
    grid-template-columns: none;
  }

  .nav-links { display: none !important; }

  .nav-right,
  .nav-right-actions {
    gap:        8px;
    align-items: center;
  }

  /* Hide the big CTA button on mobile */
  .nav-right .btn-nav,
  .nav-right-actions .btn-nav,
  .nav-right-actions .btn-nav-pc { display: none !important; }

  /* Slightly tighter login button on small screens */
  .btn-nav-login {
    font-size: 11px;
    padding:   6px 12px;
    letter-spacing: 0;
  }

  /* Show hamburger */
  .nav-hamburger,
  .menu-toggle { display: flex; }

  /* Dropdown goes full-width on mobile */
  .nav-dropdown {
    position: fixed;
    top:      calc(var(--nav-height) + 10px);
    right:    16px;
    width:    calc(100vw - 32px);
    background: #111111 !important;
  }
}