/* Importar fuentes */
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Roboto+Mono:wght@300;400;500;700&family=Inter:wght@300;400;500;600&display=swap");

/* Variables CSS */
:root {
  --buzz-dark-bg: #10141a;
  --buzz-card-bg: #1a1f28;
  --buzz-border-color: #343a40;
  --buzz-primary-color: #ffa000;
  --buzz-primary-glow: rgba(255, 160, 0, 0.4);
  --buzz-primary-soft: rgba(255, 160, 0, 0.1);
  --buzz-text-color: #dfe5eb;
  --buzz-text-muted: #c5ccd5;
  --buzz-success: #28a745;
  --buzz-warning: #ffc107;
  --buzz-danger: #dc3545;
  --font-primary: "Orbitron", sans-serif;
  --font-monospace: "Roboto Mono", monospace;
  --font-secondary: "Inter", sans-serif;
  --mobile-nav-height: 80px;
  --mobile-nav-safe-area: 24px;
}

/* ============================================
   CUSTOM SCROLLBARS - BUZZ THEME
   ============================================ */

/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}

::-webkit-scrollbar-track {
  background: var(--buzz-dark-bg);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--buzz-primary-color) 0%,
    #e6900a 100%
  );
  border-radius: 10px;
  border: 2px solid var(--buzz-dark-bg);
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    #ff8f00 0%,
    var(--buzz-primary-color) 100%
  );
  box-shadow: 0 0 10px rgba(255, 160, 0, 0.5);
}

::-webkit-scrollbar-thumb:active {
  background: var(--buzz-primary-color);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--buzz-primary-color) var(--buzz-dark-bg);
}

/* Reset y base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-secondary);
  background-color: var(--buzz-dark-bg);
  color: var(--buzz-text-color) !important;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Utilidades */
.font-primary {
  font-family: var(--font-primary) !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-shadow: 0 0 5px rgba(255, 160, 0, 0.15);
}
.font-mono {
  font-family: var(--font-monospace) !important;
}
.text-primary {
  color: var(--buzz-primary-color) !important;
}
.text-muted {
  color: var(--buzz-text-muted) !important;
}

/* Placeholder text styling - improved visibility */
::placeholder {
  color: #8a9299 !important;
  opacity: 1;
}
::-webkit-input-placeholder {
  color: #8a9299 !important;
  opacity: 1;
}
::-moz-placeholder {
  color: #8a9299 !important;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #8a9299 !important;
}
::-ms-input-placeholder {
  color: #8a9299 !important;
}

.bg-dark {
  background-color: var(--buzz-dark-bg) !important;
}
.bg-card {
  background-color: var(--buzz-card-bg) !important;
}

/* Cards personalizadas */
.buzz-card {
  background-color: var(--buzz-card-bg);
  border: 1px solid var(--buzz-border-color);
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

/* Interactive cards (clickable) get hover - non-interactive containers do not */
.buzz-card-interactive:hover,
.report-option:hover {
  border-color: var(--buzz-primary-color);
  box-shadow: 0 4px 20px rgba(255, 160, 0, 0.1);
  cursor: pointer;
}

/* Auto-generated / readonly code fields */
.form-control-autogen {
  pointer-events: none !important;
  cursor: default !important;
  opacity: 0.65;
  background-color: rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  color: var(--buzz-text-muted) !important;
  user-select: none;
}

.form-control-autogen:focus {
  box-shadow: none !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Enhanced typography for card titles */
.buzz-card h5,
.buzz-card h6 {
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-shadow: 0 0 5px rgba(255, 160, 0, 0.15);
  color: var(--buzz-primary-color);
}

.buzz-card h5 {
  font-size: 1.1rem;
}

.buzz-card h6 {
  font-size: 0.95rem;
}

/* Sidebar */
.sidebar {
  background-color: var(--buzz-card-bg);
  border-right: 1px solid var(--buzz-border-color);
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  width: 280px;
  z-index: 1000;
  transition: transform 0.3s ease;
}

.sidebar-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--buzz-border-color);
}

.sidebar-nav {
  padding: 1rem 0;
}

.nav-item {
  margin: 0.5rem 0;
}

.nav-link {
  color: var(--buzz-text-color) !important;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  font-family: var(--font-monospace);
  font-size: 0.9rem;
}

.nav-link:hover,
.nav-link.active {
  background-color: var(--buzz-primary-color);
  color: var(--buzz-dark-bg);
  text-decoration: none;
}

.nav-link i {
  margin-right: 0.75rem;
  width: 20px;
}

/* Main content */
.main-content {
  margin-left: 280px;
  min-height: 100vh;
  padding: 2rem;
  padding-bottom: 80px; /* Increased space for fixed footer */
  position: relative;
  /* Tactical grid background */
  background-image:
    radial-gradient(
      circle at 50% 0%,
      rgba(255, 160, 0, 0.03) 0%,
      transparent 70%
    ),
    linear-gradient(rgba(255, 160, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 160, 0, 0.03) 1px, transparent 1px);
  background-size:
    100% 100%,
    30px 30px,
    30px 30px;
  background-position:
    center top,
    center top,
    center top;
}

/* Subtle scanline overlay for tactical effect */
.main-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.05) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.1;
  mix-blend-mode: overlay;
}

/* ============================================
   ENHANCED TOP NAVBAR - HEXAGON BLACK OPS THEME
   ============================================ */

.top-navbar {
  background: linear-gradient(135deg, #1a1f28 0%, #12161d 100%);
  border-bottom: 2px solid rgba(255, 160, 0, 0.2);
  padding: 0.75rem 1rem;
  margin: -1rem -1rem 1rem -1rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.top-navbar__title-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
}

.top-navbar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.5rem;
  margin-right: 0.5rem;
  background: transparent;
  color: var(--buzz-primary-color);
  border: 1px solid rgba(255, 160, 0, 0.5);
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition:
    border-color 0.2s,
    background 0.2s;
}

.top-navbar__toggle:hover {
  border-color: var(--buzz-primary-color);
  background: rgba(255, 160, 0, 0.1);
}

.top-navbar__heading {
  font-family: var(--font-primary);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0;
  color: var(--buzz-text-color);
  text-shadow: 0 0 10px rgba(255, 160, 0, 0.3);
  text-transform: uppercase;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(100%, 70vw);
}

.top-navbar__subtitle {
  font-family: var(--font-monospace);
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: var(--buzz-text-muted);
  opacity: 0.8;
  margin-left: 0;
  flex-shrink: 0;
  display: none;
}

.top-navbar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Pulsing border animation */
.top-navbar::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--buzz-primary-color),
    transparent
  );
  animation: pulse-navbar-border 2s ease-in-out infinite;
}

@keyframes pulse-navbar-border {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* ============================================
   SYSTEM FOOTER - THIN INFO BAR
   ============================================ */

.system-footer {
  position: fixed;
  bottom: 0;
  left: 280px;
  right: 0;
  height: 40px;
  background: linear-gradient(135deg, #12161d 0%, #0d1014 100%);
  border-top: 1px solid rgba(255, 160, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  font-family: var(--font-monospace);
  font-size: 0.75rem;
  color: var(--buzz-text-muted);
  z-index: 999;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

.system-footer::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 160, 0, 0.4),
    transparent
  );
}

.system-footer-left,
.system-footer-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.system-footer-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.system-footer-item i {
  color: var(--buzz-primary-color);
  font-size: 0.7rem;
}

.system-footer-item .footer-label {
  color: var(--buzz-text-muted);
  opacity: 0.7;
}

.system-footer-item .footer-value {
  color: var(--buzz-primary-color);
  font-weight: 500;
}

/* Status indicator in footer */
.system-footer .status-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Large status dot for backup status indicator */
.status-dot-large {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--buzz-text-muted);
  box-shadow: 0 0 10px currentColor;
  transition: all 0.3s ease;
}

.status-dot-large.active {
  background: var(--buzz-success);
  box-shadow: 0 0 15px var(--buzz-success);
  animation: pulse-status-large 2s ease-in-out infinite;
}

.status-dot-large.warning {
  background: var(--buzz-warning);
  box-shadow: 0 0 15px var(--buzz-warning);
  animation: pulse-status-large 1.5s ease-in-out infinite;
}

.status-dot-large.inactive {
  background: var(--buzz-danger);
  box-shadow: 0 0 15px var(--buzz-danger);
}

@keyframes pulse-status-large {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Status label colors */
.status-label-active {
  color: var(--buzz-success) !important;
}

.status-label-warning {
  color: var(--buzz-warning) !important;
}

.status-label-inactive {
  color: var(--buzz-danger) !important;
}

.system-footer .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--buzz-success);
  box-shadow: 0 0 8px var(--buzz-success);
  animation: pulse-status-footer 2s ease-in-out infinite;
}

@keyframes pulse-status-footer {
  0%,
  100% {
    box-shadow: 0 0 8px var(--buzz-success);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 15px var(--buzz-success);
    opacity: 0.7;
  }
}

.system-footer .status-text {
  color: var(--buzz-success);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Smaller mobile: reduce heading size */
@media (max-width: 480px) {
  .top-navbar__heading {
    font-size: 0.8rem;
    letter-spacing: 0.4px;
  }
}

/* Responsive adjustments for navbar and footer */
@media (max-width: 768px) {
  /* Action buttons group: push to the right on mobile row layout */
  .top-navbar__actions {
    margin-left: auto;
    align-items: center;
  }

  /* Hide ALL action buttons from header on mobile – they move to bottom nav */
  .top-navbar .navbar-utils,
  .top-navbar .navbar-icon-btn,
  .top-navbar .navbar-info-btn,
  .top-navbar .notification-bell-btn,
  .top-navbar .btn-buzz:not(.btn-outline-buzz) {
    display: none !important;
  }

  /* Navbar action buttons: icon-only, borderless on mobile */
  .top-navbar .btn-outline-buzz,
  .top-navbar .btn-outline-warning {
    font-size: 0;
    padding: 0.4rem;
    border: none;
    background: transparent;
  }
  .top-navbar .btn-outline-buzz i,
  .top-navbar .btn-outline-warning i {
    font-size: 1.05rem;
  }
  /* Hide .btn-text spans inside navbar buttons */
  .top-navbar .btn-text {
    display: none;
  }

  /* === Mobile Header Logo === */
  .navbar-mobile-logo {
    height: 28px;
    width: auto;
    flex-shrink: 0;
    opacity: 0.85;
    filter: brightness(1.1);
  }

  /* === Hide system-footer on mobile – info moves into bottom nav === */
  .system-footer {
    display: none !important;
  }

  .system-footer-item.hide-mobile {
    display: none;
  }

  .main-content {
    margin-left: 0;
    padding: 1rem;
    padding-bottom: calc(
      var(--mobile-nav-height) + var(--mobile-nav-safe-area) +
        env(safe-area-inset-bottom, 20px)
    );
  }
}

/* ============================================
   MOBILE BOTTOM NAVIGATION BAR
   ============================================ */
.mobile-bottom-nav {
  display: none; /* Hidden on desktop */
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    flex-wrap: wrap;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    height: auto;
    background: rgba(10, 12, 16, 0.95);
    border-top: 1px solid rgba(255, 160, 0, 0.15);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    justify-content: space-around;
    align-items: center;
    padding: 6px 4px
      calc(var(--mobile-nav-safe-area) + env(safe-area-inset-bottom, 20px)) 4px;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.5);
  }

  /* Company name row inside bottom nav */
  .mobile-bottom-nav .bottom-nav-company {
    width: 100%;
    text-align: center;
    font-family: var(--font-monospace);
    font-size: 0.6rem;
    color: var(--buzz-text-muted);
    padding: 2px 0 4px 0;
    opacity: 0.7;
    letter-spacing: 0.5px;
    border-top: 1px solid rgba(255, 160, 0, 0.08);
    margin-top: 4px;
  }

  .mobile-bottom-nav .bottom-nav-company i {
    color: var(--buzz-primary-color);
    margin-right: 4px;
    font-size: 0.55rem;
  }

  .mobile-bottom-nav .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 80px;
    height: 100%;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.2s ease;
    position: relative;
  }

  .mobile-bottom-nav .bottom-nav-item:hover,
  .mobile-bottom-nav .bottom-nav-item:active {
    color: var(--buzz-primary-color);
  }

  .mobile-bottom-nav .bottom-nav-item.active {
    color: var(--buzz-primary-color);
  }

  .mobile-bottom-nav .bottom-nav-item i {
    font-size: 1.3rem;
  }

  /* Hide text labels — icon-only bottom nav */
  .mobile-bottom-nav .bottom-nav-item > span {
    display: none;
  }

  /* Primary action button in bottom nav ("+ Nuevo") */
  .mobile-bottom-nav .bottom-nav-item.nav-primary {
    color: var(--buzz-dark-bg);
    background: var(--buzz-primary-color);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    max-width: 48px;
    flex: 0 0 48px;
    margin-top: -12px;
    box-shadow: 0 2px 12px rgba(255, 160, 0, 0.4);
    font-size: 0;
  }

  .mobile-bottom-nav .bottom-nav-item.nav-primary i {
    font-size: 1.3rem;
    margin-bottom: 0;
  }

  .mobile-bottom-nav .bottom-nav-item.nav-primary span {
    display: none;
  }

  /* Notification badge on bottom nav */
  .mobile-bottom-nav .bottom-nav-badge {
    position: absolute;
    top: 6px;
    right: 50%;
    transform: translateX(14px);
    background: #ff3b30;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    padding: 0 4px;
    box-sizing: border-box;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .top-navbar__heading {
    font-size: 1.4rem;
  }

  .top-navbar__subtitle {
    font-size: 0.8rem;
  }

  .system-footer {
    font-size: 0.72rem;
  }
}

/* Desktop: row layout, show subtitle, hide toggle, larger title */
@media (min-width: 769px) {
  .top-navbar {
    flex-direction: row;
    align-items: center;
    padding: 1.25rem 1.5rem;
    margin: -1.25rem -1.25rem 1rem -1.25rem;
    gap: 0.75rem;
  }

  .top-navbar__title-block {
    gap: 0.5rem;
    flex-grow: 1;
  }

  .top-navbar__toggle {
    display: none;
  }

  .top-navbar__heading {
    font-size: 1.5rem;
    letter-spacing: 2px;
  }

  .top-navbar__subtitle {
    display: inline;
  }
}

/* ============================================
   NAVBAR ACTION BUTTONS - Unified System
   ============================================ */

/* Container for navbar action buttons */
.navbar-actions,
.navbar-utils {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Primary action button (Nuevo X, Crear, etc.) */
.navbar-actions .btn-buzz {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Icon-only buttons (info, notifications) */
.navbar-icon-btn {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.25s ease;
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  /* margin-left removed to rely on flex gap */
}

.navbar-icon-btn:hover {
  color: var(--buzz-primary-color);
  background: rgba(255, 160, 0, 0.1);
  border-color: rgba(255, 160, 0, 0.3);
}

/* Info/Manual button specific */
.navbar-info-btn {
  color: rgba(0, 180, 216, 0.7);
  /* margin-left removed */
}

.navbar-info-btn:hover {
  color: #00f2ff;
  background: rgba(0, 242, 255, 0.1);
  border-color: rgba(0, 242, 255, 0.3);
}

/* Responsive adjustments for navbar actions */
@media (max-width: 576px) {
  .navbar-actions,
  .navbar-utils {
    gap: 6px;
  }

  .navbar-actions .btn-buzz {
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  .navbar-actions .btn-buzz .btn-text {
    display: none;
  }

  /* Make icon buttons larger and square-ish for easier touch (desktop fallback) */
  .navbar-icon-btn {
    padding: 0;
    width: 38px;
    height: 38px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Hide logo on desktop */
@media (min-width: 769px) {
  .navbar-mobile-logo {
    display: none !important;
  }
}

/* Botones personalizados */
.btn-buzz {
  background-color: var(--buzz-primary-color);
  color: var(--buzz-dark-bg);
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: var(--font-monospace);
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-buzz:hover {
  background-color: #e6900a;
  transform: translateY(-1px);
}

.btn-outline-buzz {
  background-color: transparent;
  color: var(--buzz-primary-color);
  border: 1px solid var(--buzz-primary-color);
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-family: var(--font-monospace);
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn-outline-buzz:hover {
  background-color: var(--buzz-primary-color);
  color: var(--buzz-dark-bg);
}

/* Tablas */
.table-buzz {
  width: 100%;
  background-color: var(--buzz-card-bg);
  border-collapse: collapse;
  border-radius: 8px;
  overflow: hidden;
  color: var(--buzz-text-color);
}

.table-buzz th,
.table-buzz td {
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid var(--buzz-border-color);
  color: var(--buzz-text-color) !important;
  background-color: var(--buzz-card-bg) !important;
}

.table-buzz th {
  background-color: var(--buzz-dark-bg) !important;
  font-family: var(--font-primary);
  font-weight: 700;
  color: var(--buzz-primary-color) !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 5px rgba(255, 160, 0, 0.15);
}

.table-buzz tbody tr:hover td {
  background-color: rgba(255, 160, 0, 0.05) !important;
}

/* Badges */
.badge {
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-monospace);
}

.badge-success {
  background-color: var(--buzz-success);
  color: white;
}
.badge-warning {
  background-color: var(--buzz-warning);
  color: var(--buzz-dark-bg);
}
.badge-danger {
  background-color: var(--buzz-danger);
  color: white;
}
.badge-primary {
  background-color: var(--buzz-primary-color) !important;
  color: var(--buzz-dark-bg);
}

/* Formularios */
.form-control-buzz {
  background-color: var(--buzz-card-bg);
  border: 1px solid var(--buzz-border-color);
  color: var(--buzz-text-color) !important;
  padding: 0.75rem;
  border-radius: 4px;
  font-family: var(--font-monospace);
  transition: border-color 0.3s ease;
}

.form-control-buzz:focus {
  outline: none;
  border-color: var(--buzz-primary-color);
  box-shadow: 0 0 0 2px rgba(255, 160, 0, 0.2);
}

/* Password visibility toggle button */
.btn-toggle-password {
  position: absolute;
  right: 1px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--buzz-text-muted);
  cursor: pointer;
  padding: 6px 10px;
  z-index: 5;
  transition: color 0.3s ease;
  line-height: 1;
}

.btn-toggle-password:hover {
  color: var(--buzz-primary-color);
}

.input-group .btn-toggle-password {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  transform: none;
  display: flex;
  align-items: center;
  border-radius: 0 4px 4px 0;
}

/* Asegurar que los campos de formulario mantengan el color de fondo y texto en modo oscuro */
input,
textarea,
select {
  background-color: var(--buzz-card-bg) !important;
  color: var(--buzz-text-color) !important;
  border: 1px solid var(--buzz-border-color) !important;
}

input:focus,
textarea:focus,
select:focus {
  background-color: var(--buzz-card-bg) !important;
  color: var(--buzz-text-color) !important;
  border-color: var(--buzz-primary-color) !important;
  box-shadow: 0 0 0 2px rgba(255, 160, 0, 0.2) !important;
}

/* Anular los estilos de autocompletado del navegador para asegurar el color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--buzz-card-bg) inset !important;
  -webkit-text-fill-color: var(--buzz-text-color) !important;
  caret-color: var(--buzz-text-color) !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Modales */
.modal-buzz {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content-buzz {
  background-color: var(--buzz-card-bg);
  margin: 5% auto;
  padding: 2rem;
  border: 1px solid var(--buzz-border-color);
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  position: relative;
}

.modal-header-buzz {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--buzz-border-color);
}

.close-buzz {
  color: var(--buzz-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s ease;
}

.close-buzz:hover {
  color: var(--buzz-primary-color);
}

/* Animaciones */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

/* ============================================
   ADMIN TABS - Material Design Style
   ============================================ */

.admin-tabs-container {
  background: var(--buzz-card-bg);
  border: 1px solid var(--buzz-border-color);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.admin-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none; /* Hide scrollbar Firefox */
  -ms-overflow-style: none; /* Hide scrollbar IE/Edge */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-tabs::-webkit-scrollbar {
  display: none; /* Hide scrollbar Chrome/Safari */
}

.admin-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  background: transparent;
  border: none;
  color: var(--buzz-text-muted);
  font-family: var(--font-monospace);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  white-space: nowrap;
  flex-shrink: 0;
}

.admin-tab i {
  font-size: 0.9rem;
  transition: color 0.25s ease;
}

/* Underline indicator */
.admin-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--buzz-primary-color);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

.admin-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}

.admin-tab:hover::after {
  width: 60%;
}

.admin-tab.active {
  color: var(--buzz-primary-color);
}

.admin-tab.active i {
  color: var(--buzz-primary-color);
}

.admin-tab.active::after {
  width: 100%;
}

/* Focus state for accessibility */
.admin-tab:focus {
  outline: none;
  background: rgba(255, 160, 0, 0.05);
}

.admin-tab:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(255, 160, 0, 0.3);
}

/* Responsive - Show icons only on small screens */
@media (max-width: 576px) {
  .admin-tab {
    padding: 12px 16px;
    flex-direction: column;
    gap: 4px;
  }

  .admin-tab span {
    font-size: 0.65rem;
  }

  .admin-tab i {
    font-size: 1rem;
  }
}

/* Tablet - Slightly smaller padding */
@media (min-width: 577px) and (max-width: 768px) {
  .admin-tab {
    padding: 12px 16px;
    font-size: 0.8rem;
  }
}
@media (max-width: 992px) {
  .col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.show {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
    padding: 0.5rem 1.5rem;
    padding-bottom: calc(
      var(--mobile-nav-height) + var(--mobile-nav-safe-area) +
        env(safe-area-inset-bottom, 20px)
    );
  }

  /* Reduce padding for cards on mobile */
  .buzz-card {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }

  /* Optimize table for mobile */
  .table-buzz th,
  .table-buzz td {
    padding: 0.5rem 0.25rem;
    font-size: 0.8rem;
  }

  .table-buzz th {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
  }

  /* Make tables horizontally scrollable */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce button sizes on mobile */
  .btn-buzz,
  .btn-outline-buzz {
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
  }

  /* Smaller action buttons in tables */
  .btn-action {
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
  }

  /* Reduce form control padding */
  .form-control-buzz {
    padding: 0.5rem;
    font-size: 0.9rem;
  }

  /* Smaller badges */
  .badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
  }

  /* Reduce modal padding */
  .modal-content-buzz {
    padding: 1rem;
    margin: 10% auto;
  }

  .modal-header-buzz {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }

  .modal-body-buzz {
    padding: 0.5rem 0;
  }

  .modal-footer-buzz {
    padding-top: 0.75rem;
  }

  /* Smaller stats cards */
  .stats-card {
    padding: 0.75rem;
  }

  .stats-number {
    font-size: 1.5rem;
  }

  .stats-label {
    font-size: 0.75rem;
  }
}

@media (max-width: 576px) {
  .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.sidebar-logo {
  width: 100%;
  max-width: 350px;
  height: auto;
  object-fit: contain;
  display: block;
}

.sidebar-header .d-flex {
  justify-content: center;
  padding: 10px;
}

/* Toast Notifications */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background-color: var(--buzz-card-bg);
  color: var(--buzz-text-color);
  padding: 15px 20px;
  border-radius: 8px;
  border-left: 5px solid var(--buzz-primary-color);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  min-width: 300px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.4s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(0);
}

.toast.success {
  border-left-color: var(--buzz-success);
}
.toast.error {
  border-left-color: var(--buzz-danger);
}
.toast.info {
  border-left-color: var(--buzz-primary-color);
}

/* Centered Modal - Confirmation Modal */
#modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 2001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: auto;
}

#modal-dialog {
  background-color: var(--buzz-card-bg);
  margin: 15% auto;
  padding: 2rem;
  border: 1px solid var(--buzz-border-color);
  border-radius: 8px;
  width: 90%;
  max-width: 450px;
  position: relative;
  text-align: center;
}

#modal-title {
  font-family: var(--font-primary);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

#modal-message {
  margin-bottom: 1.5rem;
  color: var(--buzz-text-muted);
}

#modal-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* Modal Type Specific Styling */
#modal-dialog.modal-success {
  border-color: var(--buzz-success);
}
#modal-dialog.modal-success #modal-title {
  color: var(--buzz-success);
}

#modal-dialog.modal-error {
  border-color: var(--buzz-danger);
}
#modal-dialog.modal-error #modal-title {
  color: var(--buzz-danger);
}

#modal-dialog.modal-info {
  border-color: var(--buzz-primary-color);
}
#modal-dialog.modal-info #modal-title {
  color: var(--buzz-primary-color);
}

#modal-dialog.modal-confirm {
  border-color: var(--buzz-warning);
}
#modal-dialog.modal-confirm #modal-title {
  color: var(--buzz-warning);
}

.border-buzz-light {
  border-color: var(--buzz-border-color) !important;
}

.report-option {
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.report-option:hover {
  background-color: var(--buzz-dark-bg);
  border-color: var(--buzz-primary-color);
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(255, 160, 0, 0.2);
}

.report-option.selected {
  background-color: var(--buzz-primary-color);
  color: var(--buzz-dark-bg) !important;
  border-color: var(--buzz-primary-color);
}

.report-option.selected i,
.report-option.selected p {
  color: var(--buzz-dark-bg) !important;
}

/* Selected state for multi-select reports - Same as card hover with green check */
.report-option.selected-buzz {
  background-color: var(--buzz-dark-bg) !important;
  border-color: var(--buzz-primary-color) !important;
  box-shadow: 0 6px 15px rgba(255, 160, 0, 0.2) !important;
}

/* Green checkmark in top-right corner */
.report-option.selected-buzz::after {
  content: "\f058"; /* Font Awesome check-circle solid icon */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--buzz-success);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.4);
  z-index: 10;
}

/* Override Bootstrap Modal for Dark Theme */
.modal-content.buzz-modal-dark-override {
  background-color: var(--buzz-card-bg) !important;
  color: var(--buzz-text-color) !important;
  border: 1px solid var(--buzz-border-color) !important;
}

.modal-header {
  background-color: var(--buzz-card-bg) !important;
  border-bottom: 1px solid var(--buzz-border-color) !important;
}

.modal-title {
  color: var(--buzz-primary-color) !important;
  font-family: var(--font-primary);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-shadow: 0 0 5px rgba(255, 160, 0, 0.15);
}

.modal-body {
  background-color: var(--buzz-card-bg) !important;
  color: var(--buzz-text-color) !important;
}

.modal-footer {
  background-color: var(--buzz-card-bg) !important;
  border-top: 1px solid var(--buzz-border-color) !important;
}

.btn-close {
  filter: invert(1) hue-rotate(180deg) brightness(1.5); /* Adjust for dark theme visibility */
}

/* Pagination Styles */
.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.25rem;
}

.pagination .page-item {
  list-style: none;
}

.pagination .page-link {
  background-color: var(--buzz-card-bg);
  border: 1px solid var(--buzz-border-color);
  color: var(--buzz-text-color);
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  border-radius: 4px;
  font-family: var(--font-monospace);
  font-size: 0.875rem;
  transition: all 0.3s ease;
  cursor: pointer;
  display: inline-block;
}

.pagination .page-link:hover {
  background-color: var(--buzz-primary-color);
  color: var(--buzz-dark-bg);
  border-color: var(--buzz-primary-color);
  transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
  background-color: var(--buzz-primary-color);
  color: var(--buzz-dark-bg);
  border-color: var(--buzz-primary-color);
  font-weight: 600;
}

.pagination .page-item.disabled .page-link {
  background-color: var(--buzz-dark-bg);
  color: var(--buzz-text-muted);
  border-color: var(--buzz-border-color);
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination .page-item.disabled .page-link:hover {
  background-color: var(--buzz-dark-bg);
  color: var(--buzz-text-muted);
  transform: none;
}

.pagination-info {
  color: var(--buzz-text-muted);
  font-family: var(--font-monospace);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}

/* ============================================
   UNIFIED PAGINATION WRAPPER
   ============================================ */

.buzz-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--buzz-border-color);
  flex-wrap: wrap;
  gap: 1rem;
}

.buzz-pagination .pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.buzz-pagination .pagination-current {
  color: var(--buzz-text-color);
  font-size: 0.9rem;
  white-space: nowrap;
}

.buzz-pagination .pagination-prev,
.buzz-pagination .pagination-next {
  padding: 0.4rem 0.65rem;
  min-width: 36px;
}

.buzz-pagination .pagination-prev:disabled,
.buzz-pagination .pagination-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Responsive */
@media (max-width: 576px) {
  .buzz-pagination {
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
  }

  .buzz-pagination .pagination-info {
    font-size: 0.8rem;
  }

  .buzz-pagination .pagination-current {
    font-size: 0.85rem;
  }
}

/* ============================================
   ACTION BUTTONS FOR TABLES
   ============================================ */

/* Uniform action buttons - borderless, same size */
.btn-action {
  background: transparent;
  border: 1px solid var(--buzz-text-color);
  color: var(--buzz-text-color);
  padding: 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-action:hover {
  background: rgba(255, 160, 0, 0.1);
  border-color: var(--buzz-primary-color);
  color: var(--buzz-primary-color);
}

.btn-action i {
  font-size: 0.9rem;
}

/* Color-coded hover states */
.btn-action.btn-view:hover {
  color: #3498db;
  background: rgba(52, 152, 219, 0.1);
  border-color: #3498db;
}

.btn-action.btn-edit:hover {
  color: #ffc107;
  background: rgba(255, 193, 7, 0.1);
  border-color: #ffc107;
}

.btn-action.btn-delete:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.1);
  border-color: #dc3545;
}

/* Mobile: slightly larger touch targets */
@media (max-width: 768px) {
  .btn-action {
    width: 40px;
    height: 40px;
    padding: 0.6rem;
  }

  .btn-action i {
    font-size: 1rem;
  }
}
/* Mobile: slightly larger touch targets */
@media (max-width: 768px) {
  .btn-action {
    width: 40px;
    height: 40px;
    padding: 0.6rem;
  }

  .btn-action i {
    font-size: 1rem;
  }
}

/* ============================================
   DESKTOP/TABLET OPTIMIZATIONS
   Space and typography optimizations for larger screens
   ============================================ */

@media (min-width: 769px) {
  /* Global typography */
  body {
    line-height: 1.4;
    font-size: 0.9rem;
  }

  /* Cards - reduce padding */
  .buzz-card {
    padding: 1rem;
    margin-bottom: 0.75rem;
  }

  /* Main content - tighter spacing */
  .main-content {
    padding: 1.25rem;
  }

  /* Top navbar - reduced padding */
  .top-navbar {
    padding: 0.75rem 1.25rem;
    margin: -1.25rem -1.25rem 1rem -1.25rem;
  }

  /* Sidebar optimization */
  .sidebar-header {
    padding: 1rem;
  }

  .nav-link {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
  }

  .nav-link i {
    margin-right: 0.6rem;
  }

  /* Tables stay as regular tables on desktop (no card transformation) */

  /* Form controls - smaller padding */
  .form-control,
  .form-control-buzz,
  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select {
    padding: 0.5rem 0.65rem;
    font-size: 0.875rem;
  }

  .form-label {
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
  }

  /* Buttons - compact */
  .btn-buzz,
  .btn-outline-buzz {
    padding: 0.45rem 0.85rem;
    font-size: 0.875rem;
  }

  .btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.8rem;
  }

  /* Modals - reduced padding */
  .modal-content-buzz {
    padding: 1.25rem;
  }

  .modal-header-buzz {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
  }

  /* Badges - slightly smaller */
  .badge {
    padding: 0.2rem 0.45rem;
    font-size: 0.7rem;
  }

  /* Toast notifications - compact */
  .toast {
    padding: 12px 16px;
    min-width: 280px;
  }

  /* Modal dialogs - reduced spacing */
  #modal-dialog {
    padding: 1.5rem;
  }

  #modal-title {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
  }

  #modal-message {
    margin-bottom: 1.25rem;
  }

  /* Pagination - compact */
  .pagination .page-link {
    padding: 0.4rem 0.65rem;
    font-size: 0.8rem;
  }

  .pagination-info {
    font-size: 0.8rem;
  }
}

/* ============================================
   MOBILE CARD VIEW - Tables become cards on mobile
   ============================================ */

@media (max-width: 768px) {
  /* Tables - Mobile Card View */
  .table-responsive-buzz {
    display: block;
    width: 100%;
    overflow-x: visible;
    border: none;
  }

  .table-buzz {
    min-width: 0;
    display: block;
    background: transparent;
  }

  .table-buzz thead {
    display: none; /* Hide headers */
  }

  .table-buzz tbody,
  .table-buzz tr,
  .table-buzz td {
    display: block;
    width: 100%;
  }

  .table-buzz tr {
    margin-bottom: 1rem;
    background: var(--buzz-card-bg);
    border: 1px solid var(--buzz-border-color);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }

  .table-buzz td {
    text-align: right;
    padding: 0.75rem 1rem;
    position: relative;
    padding-left: 40%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    white-space: normal;
    min-height: 40px;
  }

  .table-buzz td:last-child {
    border-bottom: none;
  }

  /* Label pseudo-element */
  .table-buzz td::before {
    content: attr(data-label);
    position: absolute;
    left: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    color: var(--buzz-text-muted);
    font-family: var(--font-monospace);
    width: 35%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Special handling for 'Acciones' column */
  .table-buzz td[data-label="Acciones"],
  .table-buzz td:last-child {
    padding: 0.75rem;
    padding-left: 0.75rem;
    justify-content: flex-end;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    width: 100%;
  }

  .table-buzz td[data-label="Acciones"]::before {
    display: none;
  }

  /* Don't show empty cells */
  .table-buzz td:empty {
    display: none;
  }
}

/* ============================================
   ENHANCED SIDEBAR - HEXAGON BLACK OPS THEME
   ============================================ */

/* Enhanced Sidebar Container */
.sidebar-enhanced {
  background: linear-gradient(135deg, #161b22 0%, #0d1117 100%);
  border-right: 1px solid rgba(255, 160, 0, 0.1);
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(10px);
}

/* Enhanced Sidebar Header */
.sidebar-header-enhanced {
  padding: 1.75rem 1.25rem;
  border-bottom: 2px solid rgba(255, 160, 0, 0.2);
  background: linear-gradient(
    180deg,
    rgba(255, 160, 0, 0.08) 0%,
    transparent 100%
  );
  position: relative;
}

.sidebar-header-enhanced::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--buzz-primary-color),
    transparent
  );
  animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.6;
  }
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar-logo-enhanced {
  width: 100%;
  max-width: 200px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 160, 0, 0.3));
  transition: filter 0.3s ease;
}

.sidebar-logo-enhanced:hover {
  filter: drop-shadow(0 0 15px rgba(255, 160, 0, 0.6));
}

/* Enhanced Navigation */
.sidebar-nav-enhanced {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.25rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--buzz-primary-color) transparent;
}

.sidebar-nav-enhanced::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav-enhanced::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav-enhanced::-webkit-scrollbar-thumb {
  background: var(--buzz-primary-color);
  border-radius: 2px;
}

.sidebar-nav-enhanced .nav-item {
  margin: 0.35rem 0.75rem;
  position: relative;
}

/* Enhanced Nav Links */
.nav-link-enhanced {
  display: flex;
  align-items: center;
  padding: 0.85rem 1.25rem;
  color: var(--buzz-text-muted) !important;
  text-decoration: none;
  border-radius: 8px;
  font-family: var(--font-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.2px;
  background: transparent;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hexagon pattern background effect */
.nav-link-enhanced::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 160, 0, 0.08),
    transparent
  );
  transition: left 0.5s ease;
}

.nav-link-enhanced:hover::before {
  left: 100%;
}

.nav-link-enhanced:hover {
  background: rgba(255, 160, 0, 0.1);
  border-color: rgba(255, 160, 0, 0.3);
  transform: translateX(5px);
  box-shadow: 0 4px 15px rgba(255, 160, 0, 0.15);
}

.nav-link-enhanced.active {
  background: linear-gradient(
    90deg,
    rgba(255, 160, 0, 0.15) 0%,
    transparent 100%
  );
  border-color: rgba(255, 160, 0, 0.2);
  color: var(--buzz-primary-color) !important;
  transform: translateX(4px);
}

.nav-link-enhanced.active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 50%;
  background: var(--buzz-primary-color);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 12px var(--buzz-primary-color);
}

.nav-icon-enhanced {
  font-size: 1.1rem;
  margin-right: 0.95rem;
  width: 22px;
  text-align: center;
  transition: transform 0.3s ease;
}

.nav-link-enhanced:hover .nav-icon-enhanced,
.nav-link-enhanced.active .nav-icon-enhanced {
  transform: scale(1.1) translateY(-1px);
  color: var(--buzz-primary-color);
  filter: drop-shadow(0 0 5px var(--buzz-primary-glow));
}

.nav-text-enhanced {
  flex: 1;
  letter-spacing: 0.5px;
}

/* ============================================
   DROPDOWN NAVIGATION - SIDEBAR (Enhanced)
   ============================================ */

.nav-dropdown {
  position: relative;
  margin: 0.15rem 0;
}

.nav-dropdown-toggle {
  cursor: pointer;
  user-select: none;
}

/* Subtle left accent for dropdown headers */
.nav-dropdown > .nav-dropdown-toggle {
  position: relative;
}

.nav-dropdown.open > .nav-dropdown-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--buzz-primary-color);
  border-radius: 0 2px 2px 0;
  opacity: 0.8;
}

.nav-dropdown-arrow {
  font-size: 0.65rem;
  margin-left: auto;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0.6;
}

.nav-dropdown.open .nav-dropdown-arrow {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--buzz-primary-color);
}

/* Dropdown Menu Container */
.nav-dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0.35rem 0 0.35rem 0;
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    padding 0.3s ease;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.12) 100%
  );
  border-radius: 0 8px 8px 0;
  margin-left: 1rem;
  border-left: 2px solid rgba(255, 160, 0, 0.2);
  opacity: 0;
  position: relative;
}

.nav-dropdown.open .nav-dropdown-menu {
  max-height: 320px;
  padding: 0.35rem 0;
  opacity: 1;
}

/* Dropdown Items */
.nav-dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.55rem 1rem 0.55rem 1rem;
  color: var(--buzz-text-muted);
  text-decoration: none;
  font-family: var(--font-secondary);
  font-size: 0.82rem;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  margin: 0.1rem 0.5rem 0.1rem 0;
  border-radius: 0 6px 6px 0;
}

/* Animated left border on items */
.nav-dropdown-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 2px;
  height: 70%;
  background: var(--buzz-primary-color);
  border-radius: 0 2px 2px 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-dropdown-item i {
  width: 18px;
  margin-right: 0.65rem;
  font-size: 0.78rem;
  opacity: 0.7;
  transition: all 0.25s ease;
}

/* Hover State */
.nav-dropdown-item:hover {
  color: var(--buzz-text-color);
  background: rgba(255, 160, 0, 0.08);
  padding-left: 1.15rem;
}

.nav-dropdown-item:hover::before {
  transform: translateY(-50%) scaleY(1);
}

.nav-dropdown-item:hover i {
  opacity: 1;
  color: var(--buzz-primary-color);
}

/* Active State */
.nav-dropdown-item.active {
  color: var(--buzz-primary-color);
  background: linear-gradient(
    90deg,
    rgba(255, 160, 0, 0.15) 0%,
    rgba(255, 160, 0, 0.05) 100%
  );
  font-weight: 500;
  padding-left: 1.15rem;
}

.nav-dropdown-item.active::before {
  transform: translateY(-50%) scaleY(1);
  background: var(--buzz-primary-color);
  box-shadow: 0 0 6px rgba(255, 160, 0, 0.4);
}

.nav-dropdown-item.active i {
  opacity: 1;
  color: var(--buzz-primary-color);
}

/* Enhanced Footer */
.sidebar-footer-enhanced {
  padding: 1.25rem;
  border-top: 2px solid rgba(255, 160, 0, 0.2);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 160, 0, 0.05) 100%
  );
  position: relative;
}

.sidebar-footer-enhanced::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--buzz-primary-color),
    transparent
  );
}

/* User Profile */
.user-profile-enhanced {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 160, 0, 0.05);
  border: 1px solid rgba(255, 160, 0, 0.15);
  border-radius: 10px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.user-profile-enhanced:hover {
  background: rgba(255, 160, 0, 0.1);
  border-color: rgba(255, 160, 0, 0.3);
  box-shadow: 0 4px 15px rgba(255, 160, 0, 0.1);
}

.user-avatar-container {
  position: relative;
  flex-shrink: 0;
}

.user-avatar-enhanced {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--buzz-primary-color);
  padding: 2px;
  background: var(--buzz-card-bg);
  object-fit: contain;
  box-shadow: 0 0 15px rgba(255, 160, 0, 0.3);
  transition: all 0.3s ease;
}

.user-profile-enhanced:hover .user-avatar-enhanced {
  border-color: var(--buzz-primary-color);
  box-shadow: 0 0 20px rgba(255, 160, 0, 0.5);
  transform: scale(1.05);
}

.user-status-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: var(--buzz-success);
  border: 2px solid var(--buzz-card-bg);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--buzz-success);
  animation: pulse-status 2s ease-in-out infinite;
}

@keyframes pulse-status {
  0%,
  100% {
    box-shadow: 0 0 8px var(--buzz-success);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 15px var(--buzz-success);
    opacity: 0.7;
  }
}

.user-info-enhanced {
  flex: 1;
  min-width: 0;
}

.user-name-enhanced {
  font-family: var(--font-monospace);
  font-size: 1rem;
  font-weight: 600;
  color: var(--buzz-text-color);
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.3px;
}

.user-role-enhanced {
  font-family: var(--font-monospace);
  font-size: 0.8rem;
  color: var(--buzz-primary-color);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.user-role-enhanced i {
  font-size: 0.75rem;
}

/* Logout Button */
.logout-form-enhanced {
  width: 100%;
}

.btn-logout-enhanced {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: transparent;
  border: 1.5px solid var(--buzz-primary-color);
  color: var(--buzz-primary-color);
  border-radius: 8px;
  font-family: var(--font-monospace);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-logout-enhanced::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 160, 0, 0.2),
    transparent
  );
  transition: left 0.6s ease;
}

.btn-logout-enhanced:hover::before {
  left: 100%;
}

.btn-logout-enhanced:hover {
  background: var(--buzz-primary-color);
  color: var(--buzz-dark-bg);
  border-color: var(--buzz-primary-color);
  box-shadow: 0 0 20px rgba(255, 160, 0, 0.4);
  transform: translateY(-2px);
}

.btn-logout-enhanced:active {
  transform: translateY(0);
}

.btn-logout-enhanced i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.btn-logout-enhanced:hover i {
  transform: translateX(-3px);
}

/* Responsive adjustments for enhanced sidebar */
@media (max-width: 768px) {
  .sidebar-enhanced {
    transform: translateX(-100%);
    padding-bottom: calc(
      var(--mobile-nav-height) + env(safe-area-inset-bottom, 20px)
    );
    box-sizing: border-box;
  }

  .sidebar-enhanced.show {
    transform: translateX(0);
  }

  .sidebar-header-enhanced {
    padding: 1.25rem 1rem;
  }

  .nav-link-enhanced {
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
  }

  .user-avatar-enhanced {
    width: 45px;
    height: 45px;
  }

  .user-name-enhanced {
    font-size: 0.95rem;
  }

  .user-role-enhanced {
    font-size: 0.75rem;
  }
}

@media (min-width: 769px) {
  .sidebar-header-enhanced {
    padding: 1.5rem 1rem;
  }

  .nav-link-enhanced {
    padding: 0.8rem 1.1rem;
    font-size: 0.9rem;
  }

  .nav-icon-enhanced {
    font-size: 1rem;
    margin-right: 0.8rem;
  }

  .sidebar-footer-enhanced {
    padding: 1rem;
  }

  .user-profile-enhanced {
    padding: 0.85rem;
  }

  .user-avatar-enhanced {
    width: 48px;
    height: 48px;
  }

  .user-name-enhanced {
    font-size: 0.95rem;
  }

  .user-role-enhanced {
    font-size: 0.75rem;
  }

  .btn-logout-enhanced {
    padding: 0.75rem 0.9rem;
    font-size: 0.85rem;
  }
}

/* ============================================
   WEBKIT DROPDOWN AND TABLE FIXES
   Prevent browser styles from overriding dropdown tables
   ============================================ */

/* Reset webkit appearance for dropdown elements */
.product-search-results,
.list-group,
.autocomplete-results,
#createOrderClientSearchResults,
#createOrderProductsContainer .product-search-results {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--buzz-card-bg) !important;
}

.list-group-item,
.autocomplete-item {
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--buzz-card-bg) !important;
  color: var(--buzz-text-color) !important;
}

.list-group-item:hover,
.list-group-item:focus,
.list-group-item-action:hover,
.list-group-item-action:focus {
  background-color: rgba(255, 160, 0, 0.1) !important;
  color: var(--buzz-text-color) !important;
}

/* Ensure tables in dropdowns maintain buzz theme */
.table-responsive,
.table-buzz {
  -webkit-text-size-adjust: 100%;
}

/* Override Bootstrap table background in dark theme */
.table-sm,
.table-bordered {
  --bs-table-bg: var(--buzz-card-bg);
  --bs-table-border-color: var(--buzz-border-color);
}

.table-sm thead th,
.table-bordered thead th {
  background-color: var(--buzz-dark-bg) !important;
  color: var(--buzz-primary-color) !important;
  border-color: var(--buzz-border-color) !important;
}

.table-sm tbody td,
.table-bordered tbody td {
  background-color: var(--buzz-card-bg) !important;
  color: var(--buzz-text-color) !important;
  border-color: var(--buzz-border-color) !important;
}

/* ============================================
   REPORT OPTIONS STYLING
   ============================================ */

.report-option {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}

.report-option:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 160, 0, 0.3);
  background: rgba(255, 160, 0, 0.05);
}

.report-option.selected-buzz {
  border-color: var(--buzz-primary-color) !important;
  background: rgba(255, 160, 0, 0.15) !important;
  box-shadow: 0 0 15px rgba(255, 160, 0, 0.2);
}

.report-option.selected-buzz i {
  color: var(--buzz-primary-color) !important;
  transform: scale(1.1);
}

.report-option.selected-buzz p {
  color: white !important;
  font-weight: bold;
}