/* ===========================================
   TOPBAR COMPONENT STYLES
   
   The topbar is the navigation bar at the top of the page.
   It contains: logo, search bar, and action buttons.
   Different content shows based on user role (Guest/User/Admin/Musician).
   =========================================== */

/* TOPBAR CONTAINER
   Uses CSS Grid positioning to span the full width at the top.
   grid-column: 1 / -1 means "start at column 1, end at the last column" */
.topbar {
  grid-column: 1 / -1;
  /* Span full width (across sidebar + content) */
  grid-row: 1;
  /* Place in first row of grid */

  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 80px;
  background: var(--panel, #0b0b0b);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  /* Subtle separator line */
  z-index: 100;
  /* Stay above other content when scrolling */
}

/* HAMBURGER MENU (currently removed but styles kept for reference)
   This was the three-line menu icon for toggling sidebar */
.topbar .sidenav {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.topbar .burger-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.topbar .burger-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Visually hidden but accessible to screen readers
   Used for accessibility - hides checkbox but keeps it functional */
.topbar .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* MAIN NAV CONTAINER
   Flexbox container that holds all topbar content.
   justify-content: space-between pushes items to edges with space in middle */
.topbar .nav-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  /* Take up all available space */
  gap: 20px;
  /* Space between child elements */
}

/* BRAND/LOGO SECTION
   Contains the BeatByte logo image and text */
.topbar .brand-topbar-div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar .logo-link {
  display: flex;
  align-items: center;
}

/* Logo image - the BeatByte icon */
.topbar .brand-mark {
  width: 50px;
  height: 50px;
  object-fit: contain;
  /* Preserve aspect ratio */
}

/* Brand text (BeatByte + tagline) - hidden on small screens */
.topbar .brand-wordmark {
  display: none;
}

/* Show brand text only on larger screens (tablets and up) */
@media (min-width: 768px) {
  .topbar .brand-wordmark {
    display: block;
  }
}

/* SEARCH BAR
   Flexible width search input with icon.
   flex: 1 makes it grow to fill available space.
   min/max-width prevents it from getting too small or too large. */
.topbar .search {
  flex: 1;
  min-width: 150px;
  max-width: 400px;
  display: flex;
  align-items: center;
  background: transparent;
  padding: 8px 14px;
  border-radius: 20px;
  /* Pill shape */
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: box-shadow 0.3s, border-color 0.3s;
}

/* When user clicks inside search bar, highlight it with purple glow */
.topbar .search:focus-within {
  border-color: var(--accent1, #7b2ff7);
  box-shadow: 0 0 10px rgba(123, 47, 247, 0.4);
}

/* Magnifying glass icon */
.topbar .search-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  color: var(--muted, #9a9a9a);
  background: transparent;
  fill: none;
}

/* Search text input - transparent to show parent's background */
.topbar .search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  outline: none;
  font-size: 14px;
}

.topbar .search-input::placeholder {
  color: var(--muted, #9a9a9a);
}

/* UPGRADE BUTTON
   The "Upgrade to Premium" button.
   Inherits base styles from .topbar-buttons button.
   Only the "Premium" text gets special purple color. */
.topbar .upgrade-btn .premium {
  color: var(--accent1, #7b2ff7);
  font-weight: 700;
}

/* TOPBAR BUTTONS CONTAINER
   Holds all the action buttons (Login, Register, etc.)
   Flexbox with gap creates even spacing between buttons. */
.topbar .topbar-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* BASE BUTTON STYLE
   All buttons in topbar share this style.
   Semi-transparent background that lights up on hover. */
.topbar .topbar-buttons button,
.topbar .topbar-buttons a.btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  margin: 1px;
  border-radius: 20px;
  /* Pill shape */
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  /* Smooth hover animation */
  white-space: nowrap;
  /* Prevent text from wrapping */
  text-decoration: none;
  display: inline-block;
}

/* Button hover effect - purple glow */
.topbar .topbar-buttons button:hover {
  background: rgba(123, 47, 247, 0.3);
  border-color: var(--accent1, #7b2ff7);
  box-shadow: 0 0 12px rgba(123, 47, 247, 0.5);
  /* Purple glow */
}

.topbar .topbar-buttons a.btn:hover {
  background: rgba(123, 47, 247, 0.3);
  border-color: var(--accent1, #7b2ff7);
  box-shadow: 0 0 12px rgba(123, 47, 247, 0.5);
  /* Purple glow */
}

/* USER GREETING
   Shows "Welcome, [username]" for logged-in users.
   Stacked vertically (flex-direction: column) and right-aligned. */
.topbar .user-greeting,
.user-greeting {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Right-align text */
  margin-right: 15px;
}

/* "Welcome," text - small and muted */
.topbar .user-greeting .hi,
.user-greeting .hi {
  font-size: 12px;
  color: var(--muted, #9a9a9a);
}

/* Username - larger and bold */
.topbar .user-greeting .username,
.user-greeting .username {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

/* ICON BUTTONS (cart, profile, notifications)
   Circular buttons with just an icon inside.
   border-radius: 50% makes them perfect circles. */
/* ICON BUTTONS (cart, profile, notifications)
   Circular buttons with just an icon inside.
   border-radius: 50% makes them perfect circles. */
.topbar .icon-btn,
.icon-btn {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}

/* Move bell (notifications) icon left */
.icon-btn[aria-label="Notifications"] {
  margin-right: 0;
  margin-left: -6px;
  /* Adjust this value as needed */
}

/* Move user (profile) icon left */
.icon-btn.profile {
  margin-right: 0;
  margin-left: -6px;
  /* Adjust this value as needed */
}

.topbar .icon-btn:hover,
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  /* Light highlight on hover */
}

/* SVG icon inside buttons */
.topbar .icon-btn .icon,
.icon-btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: 0 auto;
}


.topbar .icon-btn .icon {
  width: 24px;
  height: 24px;
  color: #fff;
  display: block;
  /* Remove inline spacing */
}

/* USER META CONTAINER
   Groups the greeting and icon buttons together */
.topbar .user-meta,
.user-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar .user-icons,
.user-icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Role-specific accent colors */
.topbar.admin {
  border-bottom-color: rgba(255, 100, 0, 0.5);
}

.topbar.musician {
  border-bottom-color: rgba(0, 255, 200, 0.5);
}

.topbar.user {
  border-bottom-color: rgba(123, 47, 247, 0.5);
}

/* Logout button */
.topbar .logout,
.logout {
  background: rgba(255, 100, 100, 0.2);
  border: 1px solid rgba(255, 100, 100, 0.4);
  color: #ff6b6b;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s;
}

.topbar .logout:hover,
.logout:hover {
  background: rgba(255, 100, 100, 0.4);
}

/* Generic icon styling */
.topbar .icon {
  width: 24px;
  height: 24px;
  color: currentColor;
}

.bell-icon,
.user-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* Optional: nudge vertically if needed */
  position: relative;
  top: 1px; /* Adjust this value as needed for perfect centering */
}

/* ===========================================
   RESPONSIVE BREAKPOINTS - Topbar
   
   Progressive disclosure: As screen gets smaller,
   we hide less important elements to save space.
   
   Order of hiding:
   1. Brand wordmark (tablet)
   2. User greeting, upgrade button (tablet)
   3. Search bar (mobile)
   4. "Become an artist" button (mobile)
   =========================================== */

/* TABLET STYLES (≤768px)
   Compact everything, hide non-essential items */
@media (max-width: 768px) {
  .topbar {
    padding: 0 10px;
    height: 70px;
    /* Slightly shorter */
  }

  .topbar .nav-div {
    gap: 10px;
    /* Less space between items */
  }

  .topbar .brand-mark {
    width: 40px;
    height: 40px;
    /* Smaller logo */
  }

  /* Hide "BeatByte - be the beat" text on tablets */
  .topbar .brand-wordmark {
    display: none;
  }

  /* Smaller search bar */
  .topbar .search {
    min-width: 100px;
    max-width: 180px;
    padding: 6px 10px;
  }

  .topbar .topbar-buttons {
    gap: 8px;
  }

  /* Smaller buttons */
  .topbar .topbar-buttons button {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Hide "Welcome, username" - not essential */
  .topbar .user-greeting {
    display: none;
  }

  /* Hide upgrade button on tablets - can access from menu */
  .topbar .upgrade-btn {
    display: none;
  }
}

/* MOBILE STYLES (≤480px)
   Minimal topbar - only essential elements */
@media (max-width: 480px) {
  .topbar {
    height: 60px;
    /* Even shorter */
    padding: 0 8px;
  }

  .topbar .nav-div {
    gap: 8px;
  }

  .topbar .brand-mark {
    width: 36px;
    height: 36px;
    /* Small logo for mobile */
  }

  /* Hide search bar completely - can add a search icon later */
  .topbar .search {
    display: none;
  }

  .topbar .topbar-buttons {
    gap: 6px;
  }

  /* Very compact buttons */
  .topbar .topbar-buttons button {
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 15px;
  }

  /* Hide "Become an artist" - not essential for most users */
  .topbar .topbar-buttons .open-musician {
    display: none;
  }

  /* Smaller icon buttons */
  .topbar .icon-btn {
    padding: 6px;
  }

  .topbar .icon-btn .icon {
    width: 20px;
    height: 20px;
  }

  .topbar .logout {
    padding: 5px 8px;
    font-size: 11px;
  }
}