/* ==========================================================================
   Gold Bottom Ent. LLC — Layout
   Public header/footer + Dashboard sidebar/topbar
   ========================================================================== */

/* =============================================
   PUBLIC LAYOUT — Header
   ============================================= */

.public-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
}

.public-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
  height: 100%;
}

/* --- Logo --- */
.logo-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  flex-shrink: 0;
}

.logo-link .logo-icon {
  width: 36px;
  height: 36px;
  color: var(--color-gold);
  flex-shrink: 0;
}

.logo-link .logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  letter-spacing: -0.01em;
}

.logo-link .logo-text .logo-accent {
  color: var(--color-gold);
}

.logo-link:hover .logo-text {
  color: var(--color-gold);
}

/* --- Public Nav --- */
.public-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.public-nav .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.public-nav .nav-link:hover {
  color: var(--color-text);
  background: var(--color-bg-tertiary);
}

.public-nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-md);
  right: var(--space-md);
  height: 2px;
  background: var(--color-gold);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-base);
}

.public-nav .nav-link:hover::after,
.public-nav .nav-link.active::after {
  transform: scaleX(1);
}

.public-nav .nav-link.active {
  color: var(--color-gold);
}

/* --- Header Actions --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.header-actions .btn-dashboard {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-inverse);
  background: var(--color-gold);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.header-actions .btn-dashboard:hover {
  background: var(--color-gold-dark);
  transform: translateY(-1px);
}

/* --- Mobile Menu Toggle --- */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  gap: 5px;
}

.mobile-menu-toggle .hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-fast);
  transform-origin: center;
}

.mobile-menu-toggle.active .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.active .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobile Nav Overlay ---
   Lives outside <header> in the DOM to avoid iOS Safari's
   backdrop-filter containment bug (clips fixed children).
   z-index sits between content (1) and header (--z-header).
   -------------------------------------------------------- */
.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-header) - 1);
  background: rgba(13, 17, 23, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-direction: column;
  padding: var(--space-xl) var(--space-lg);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-overlay.active {
  display: flex;
}

.mobile-nav-overlay .mobile-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-sm);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition: color var(--transition-fast), padding-left var(--transition-fast);
}

.mobile-nav-overlay .mobile-nav-link:hover,
.mobile-nav-overlay .mobile-nav-link.active {
  color: var(--color-gold);
  padding-left: var(--space-md);
}

/* --- Mobile Nav Divider --- */
.mobile-nav-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-sm) 0;
}

/* --- Mobile Dashboard Link --- */
.mobile-nav-overlay .mobile-nav-dashboard {
  color: var(--color-gold);
  font-weight: var(--fw-semibold);
}

.mobile-nav-overlay .mobile-nav-dashboard:hover {
  color: var(--color-gold-light);
}


/* =============================================
   GLOBAL — Animated Background Orbs Overlay
   Fixed-position container above the page background
   but below all interactive content. pointer-events: none
   lets clicks pass through.
   ============================================= */

.bg-orbs {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
}

/* Metallic gold orb — drifts top-right */
.bg-orbs .orb-1 {
  width: 500px;
  height: 500px;
  top: -10%;
  right: -5%;
  background: radial-gradient(circle,
    rgba(184, 134, 11, 0.14) 0%,
    rgba(218, 165, 32, 0.08) 35%,
    rgba(139, 109, 20, 0.04) 60%,
    transparent 75%);
  animation: orbDrift1 25s ease-in-out infinite;
}

/* Antique gold + warm bronze orb — drifts bottom-left */
.bg-orbs .orb-2 {
  width: 600px;
  height: 600px;
  bottom: -15%;
  left: -10%;
  background: radial-gradient(circle,
    rgba(205, 155, 29, 0.10) 0%,
    rgba(160, 120, 40, 0.06) 30%,
    rgba(120, 100, 60, 0.04) 55%,
    transparent 75%);
  animation: orbDrift2 30s ease-in-out infinite;
}

/* Deep gold orb — drifts center-right (dashboard) */
.bg-orbs .orb-3 {
  width: 450px;
  height: 450px;
  top: 15%;
  right: 5%;
  background: radial-gradient(circle,
    rgba(218, 165, 32, 0.11) 0%,
    rgba(184, 134, 11, 0.06) 40%,
    rgba(139, 109, 20, 0.03) 65%,
    transparent 80%);
  animation: orbDrift3 22s ease-in-out infinite, ambientPulse 7s ease-in-out infinite;
}

/* Bronze + champagne orb — drifts bottom center (dashboard) */
.bg-orbs .orb-4 {
  width: 500px;
  height: 500px;
  bottom: 10%;
  left: 20%;
  background: radial-gradient(circle,
    rgba(160, 120, 40, 0.08) 0%,
    rgba(205, 175, 100, 0.05) 35%,
    rgba(184, 134, 11, 0.03) 60%,
    transparent 78%);
  animation: orbDrift2 28s ease-in-out infinite, ambientPulse 9s ease-in-out 3s infinite;
}


/* =============================================
   WATERMARK PATTERN — Repeating GBE / icons
   Tiled SVG behind all content, same layer as orbs.
   Adjust opacity property to tune visibility.
   ============================================= */

.bg-watermark {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  background-repeat: repeat;
  background-size: 500px 380px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='380'%3E%3Cdefs%3E%3Cstyle%3Etext%7Bfont-family:Georgia,'Times New Roman',serif%7D%3C/style%3E%3C/defs%3E%3Cg transform='rotate(-20 250 190)'%3E%3C!-- Tile 1 --%3E%3Cg transform='translate(30,70)'%3E%3Cpolygon points='7,0 14,7 7,14 0,7' fill='none' stroke='rgba(255,215,0,0.10)' stroke-width='0.8'/%3E%3Cpolygon points='7,3 11,7 7,11 3,7' fill='rgba(255,215,0,0.05)'/%3E%3C/g%3E%3Ctext x='52' y='83' font-size='15' font-weight='600' fill='rgba(255,215,0,0.09)' letter-spacing='5'%3EGOLD BOTTOM%3C/text%3E%3Cline x1='52' y1='91' x2='205' y2='91' stroke='rgba(255,215,0,0.07)' stroke-width='0.5'/%3E%3Ctext x='97' y='106' font-size='8.5' fill='rgba(255,215,0,0.065)' letter-spacing='4.5'%3EENT. LLC%3C/text%3E%3C!-- Tile 2 (half-brick offset) --%3E%3Cg transform='translate(280,190)'%3E%3Cpolygon points='7,0 14,7 7,14 0,7' fill='none' stroke='rgba(255,215,0,0.10)' stroke-width='0.8'/%3E%3Cpolygon points='7,3 11,7 7,11 3,7' fill='rgba(255,215,0,0.05)'/%3E%3C/g%3E%3Ctext x='302' y='203' font-size='15' font-weight='600' fill='rgba(255,215,0,0.09)' letter-spacing='5'%3EGOLD BOTTOM%3C/text%3E%3Cline x1='302' y1='211' x2='455' y2='211' stroke='rgba(255,215,0,0.07)' stroke-width='0.5'/%3E%3Ctext x='347' y='226' font-size='8.5' fill='rgba(255,215,0,0.065)' letter-spacing='4.5'%3EENT. LLC%3C/text%3E%3C/g%3E%3C/svg%3E");
  animation: watermarkDrift 120s linear infinite;
  will-change: transform;
}

/* Responsive: denser pattern on mobile */
@media (max-width: 768px) {
  .bg-watermark {
    background-size: 350px 266px;
  }
}

/* Responsive: looser pattern on ultrawide */
@media (min-width: 1920px) {
  .bg-watermark {
    background-size: 620px 470px;
  }
}


/* =============================================
   PUBLIC LAYOUT — Main + Footer
   ============================================= */

.public-main {
  padding-top: var(--header-height);
  min-height: calc(100vh - var(--header-height));
  position: relative;
  z-index: 1;
  background: transparent;  /* let .bg-orbs show through */
}

/* --- Footer --- */
.public-footer {
  background: rgba(22, 27, 34, 0.92);  /* semi-transparent so orbs peek through */
  border-top: 1px solid var(--color-border);
  padding: var(--space-3xl) var(--space-lg) var(--space-xl);
  position: relative;
  z-index: 1;
}

.public-footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-2xl);
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-brand .footer-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.footer-brand .footer-logo-icon {
  width: 32px;
  height: 32px;
  color: var(--color-gold);
}

.footer-brand .footer-logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.footer-brand .footer-description {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--lh-relaxed);
  max-width: 320px;
}

.footer-brand .footer-socials {
  display: flex;
  gap: var(--space-sm);
}

.footer-brand .footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-text-muted);
  background: var(--color-bg-tertiary);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.footer-brand .footer-socials a:hover {
  color: var(--color-gold);
  background: var(--color-bg-elevated);
}

.footer-links-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-links-group .footer-group-title {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.footer-links-group a {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-xs) 0;
  transition: color var(--transition-fast);
}

.footer-links-group a:hover {
  color: var(--color-gold);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.footer-bottom .footer-copy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.footer-bottom .footer-legal-links {
  display: flex;
  gap: var(--space-md);
}

.footer-bottom .footer-legal-links a {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.footer-bottom .footer-legal-links a:hover {
  color: var(--color-text-secondary);
}


/* =============================================
   DASHBOARD LAYOUT — Sidebar
   ============================================= */

.dashboard-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-bg-secondary);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  z-index: var(--z-fixed);
  transition: width var(--transition-base);
  overflow: hidden;
}

/* --- Sidebar Header --- */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-md);
  height: var(--topbar-height);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.sidebar-header .sidebar-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  overflow: hidden;
}

.sidebar-header .sidebar-logo-icon {
  width: 32px;
  height: 32px;
  color: var(--color-gold);
  flex-shrink: 0;
}

.sidebar-header .sidebar-logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}

.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: color var(--transition-fast), background var(--transition-fast);
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  color: var(--color-text);
  background: var(--color-bg-tertiary);
}

/* --- Sidebar Nav --- */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-sm) var(--space-sm);
}

.sidebar-nav-group {
  margin-bottom: var(--space-md);
}

.sidebar-nav-group-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding: var(--space-sm) var(--space-sm);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition-fast);
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
  position: relative;
}

.sidebar-nav-item .nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-nav-item .nav-label {
  overflow: hidden;
  transition: opacity var(--transition-fast);
}

.sidebar-nav-item:hover {
  color: var(--color-text);
  background: var(--color-bg-tertiary);
}

.sidebar-nav-item.active {
  color: var(--color-gold);
  background: var(--color-gold-muted);
}

.sidebar-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--color-gold);
  border-radius: 0 2px 2px 0;
}

/* Badge count on nav items */
.sidebar-nav-item .nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--color-text-inverse);
  background: var(--color-danger);
  border-radius: var(--radius-full);
}

/* --- Sidebar Footer --- */
.sidebar-footer {
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  cursor: pointer;
}

.sidebar-user:hover {
  background: var(--color-bg-tertiary);
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-gold-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-gold);
  flex-shrink: 0;
}

.sidebar-user-info {
  overflow: hidden;
  transition: opacity var(--transition-fast);
}

.sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  white-space: nowrap;
}

.sidebar-user-role {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}


/* --- Sidebar Collapsed --- */
.sidebar-collapsed {
  width: var(--sidebar-collapsed);
}

.sidebar-collapsed .sidebar-logo-text,
.sidebar-collapsed .sidebar-nav-group-label,
.sidebar-collapsed .nav-label,
.sidebar-collapsed .nav-badge,
.sidebar-collapsed .sidebar-user-info {
  opacity: 0;
  pointer-events: none;
}

.sidebar-collapsed .sidebar-nav-item {
  justify-content: center;
  padding: var(--space-sm);
}

.sidebar-collapsed .sidebar-nav-item::before {
  display: none;
}

/* Tooltip on hover for collapsed state */
.sidebar-collapsed .sidebar-nav-item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-bg-elevated);
  color: var(--color-text);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: var(--z-tooltip);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}


/* =============================================
   DASHBOARD LAYOUT — Topbar + Main
   ============================================= */

.dashboard-topbar {
  position: fixed;
  top: 0;
  left: var(--sidebar-width);
  right: 0;
  height: var(--topbar-height);
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  z-index: var(--z-sticky);
  transition: left var(--transition-base);
}

.sidebar-collapsed ~ .dashboard-topbar {
  left: var(--sidebar-collapsed);
}

/* Hidden on desktop — shown by responsive.css on mobile */
.sidebar-mobile-toggle {
  display: none;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Breadcrumbs */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
}

.breadcrumb-item {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-item:hover {
  color: var(--color-text);
}

.breadcrumb-separator {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.breadcrumb-current {
  color: var(--color-text);
  font-weight: var(--fw-medium);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.topbar-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  position: relative;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.topbar-action:hover {
  color: var(--color-text);
  background: var(--color-bg-tertiary);
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.topbar-search:hover {
  border-color: var(--color-border-light);
}

.topbar-search kbd {
  font-size: 11px;
  padding: 1px 5px;
  background: var(--color-bg);
  border-radius: 3px;
  border: 1px solid var(--color-border);
}


/* --- Dashboard Main --- */
.dashboard-main-wrapper {
  margin-left: var(--sidebar-width);
  padding-top: var(--topbar-height);
  min-height: 100vh;
  transition: margin-left var(--transition-base);
  position: relative;
}

/* Dashboard animated background orbs — now rendered via .bg-orbs overlay div */

.sidebar-collapsed ~ .dashboard-main-wrapper {
  margin-left: var(--sidebar-collapsed);
}

.dashboard-main {
  padding: var(--space-xl);
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  background: transparent;  /* let .bg-orbs show through */
}