/* Font Awesome font-display optimization */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-display: swap;
}

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-display: swap;
}

/* Custom Amnezia gold tag */
.tag.is-amnezia {
  background-color: #fbb26a;
  color: #363636;
}

.tag.is-amnezia:hover {
  background-color: #fccc9c;
}

[data-theme="dark"] .tag.is-amnezia {
  background-color: #fbb26a;
  color: #1a1a1a;
}

[data-theme="dark"] .tag.is-amnezia:hover {
  background-color: #fccc9c;
}

/* Remove box shadows from Bulma boxes */
.box {
  box-shadow: none;
  border: 1px solid #dbdbdb;
}

/* Softer border color for boxes in dark mode */
[data-theme="dark"] .box {
  border-color: #666666;
}

/* Keyboard navigation highlighting */
tr.is-keyboard-selected {
  background-color: #f5f5f5;
}

[data-theme="dark"] tr.is-keyboard-selected {
  background-color: rgba(255, 255, 255, 0.08);
}

/* Sticky footer solution */
html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

section.section {
  flex: 1;
}

.footer {
  margin-top: auto;
  padding: 1.5rem 1.5rem !important;
}

.footer .content p {
  margin-bottom: 0 !important;
}

/* Enhanced navbar styling */
.navbar.is-dark {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.navbar.is-dark .navbar-brand > a.navbar-item:hover {
  background-color: transparent !important;
}

/* Accent color for the brand icon */
.has-text-primary {
  color: #00d1b2 !important;
}

/* Button styling in navbar */
.navbar.is-dark .button.is-light {
  background-color: #f5f5f5;
  color: #363636;
  border: none;
}

.navbar.is-dark .button.is-light:hover {
  background-color: #00d1b2;
  color: white;
}

.navbar.is-dark .button.is-primary {
  background-color: #00d1b2;
  border: none;
}

.navbar.is-dark .button.is-primary:hover {
  background-color: #00c4a7;
}

/* Theme toggle styling */
#theme-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Light mode theme toggle hover */
[data-theme="light"] #theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

#theme-toggle .fa-sun {
  color: #ffd700;
  font-size: 1.25rem;
  transition: filter 0.2s ease;
}

#theme-toggle .fa-moon {
  color: #9b59b6;
  font-size: 1.25rem;
  transition: filter 0.2s ease;
}

#theme-toggle:hover .fa-sun,
#theme-toggle:hover .fa-moon {
  filter: brightness(1.2);
}

#theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Prevent navbar-item hover effect on theme toggle container */
.navbar-item:has(#theme-toggle) {
  background-color: transparent !important;
}

.navbar-item:has(#theme-toggle):hover {
  background-color: transparent !important;
}

/* Sidebar Styles */
.has-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.dashboard-wrapper {
  display: flex;
  flex: 1;
  position: relative;
}

.sidebar {
  width: 250px;
  background-color: #f5f5f5;
  transition:
    width 0.3s ease,
    transform 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
  z-index: 40;
}

[data-theme="dark"] .sidebar {
  background-color: #1a1a1a;
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.3);
}

.sidebar.is-collapsed {
  width: 60px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #e0e0e0;
  min-height: 60px;
}

[data-theme="dark"] .sidebar-header {
  border-bottom-color: #363636;
}

/* User Profile Mini */
.user-profile-mini {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.user-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background-color: #00d1b2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: white;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  margin: 4px;
}

.user-profile-mini:hover .user-avatar {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px rgba(0, 209, 178, 0.3);
}

.avatar-initials {
  font-size: 0.875rem;
  text-transform: uppercase;
}

.user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    opacity 0.3s ease,
    width 0.3s ease;
}

.user-name {
  font-weight: 600;
  font-size: 0.875rem;
  color: #363636;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .user-name {
  color: #f5f5f5;
}

.user-email {
  font-size: 0.75rem;
  color: #7a7a7a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="dark"] .user-email {
  color: #b5b5b5;
}

.sidebar.is-collapsed .user-info {
  display: none;
}

.sidebar-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.sidebar.is-collapsed .sidebar-header {
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0.5rem;
}

.sidebar.is-collapsed .user-profile-mini {
  justify-content: center;
}

.sidebar-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .sidebar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-menu {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0;
}

/* Menu items base styling - transparent by default to inherit sidebar background */
.sidebar .menu-list a {
  background-color: transparent;
}

/* Light mode: subtle background for better contrast */
[data-theme="light"] .sidebar .menu-list a,
.sidebar .menu-list a {
  background-color: #f5f5f5;
}

/* Dark mode: match sidebar background */
[data-theme="dark"] .sidebar .menu-list a {
  background-color: #1a1a1a;
}

/* Menu label alignment - match the padding of menu items */
.sidebar .menu-label {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
}

/* When sidebar is collapsed, center the label */
.sidebar.is-collapsed .menu-label {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-list li {
  margin: 0;
}

.menu-list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #363636;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
}

[data-theme="dark"] .menu-list a {
  color: #f5f5f5;
}

/* Hover states with proper cascade */
.sidebar .menu-list a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .sidebar .menu-list a:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Active states - highest specificity, always wins */
.sidebar .menu-list a.is-active,
.sidebar .menu-list a.is-active:hover {
  background-color: #00d1b2;
  color: white;
}

.menu-list a.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #00a693;
}

.menu-list .icon {
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
}

.menu-text {
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.sidebar.is-collapsed .menu-text {
  opacity: 0;
  width: 0;
}

.sidebar-divider {
  height: 1px;
  background-color: #e0e0e0;
  margin: 0.5rem 0;
}

[data-theme="dark"] .sidebar-divider {
  background-color: #363636;
}

.main-content {
  flex: 1;
  transition: margin-left 0.3s ease;
  overflow-x: hidden;
}

.main-content.is-expanded {
  margin-left: 0;
}

/* Mobile Sidebar */
.mobile-sidebar-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-right: 0.5rem;
  color: white;
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 35;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.sidebar-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* Responsive */
@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    transform: translateX(-100%);
    z-index: 40;
  }

  .sidebar.is-mobile-active {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0 !important;
  }

  .dashboard-wrapper {
    min-height: calc(100vh - 60px);
  }
}

/* Adjust footer for dashboard */
.has-sidebar .footer {
  margin-top: 0;
}

/* VPN Show Page - Download button visibility fix */
/* Scoped to only affect the download button on VPN show page */
.vpn-show-download-btn.is-outlined {
  border-color: #dbdbdb;
  color: #363636;
  background-color: transparent;
}

.vpn-show-download-btn.is-outlined:hover {
  background-color: #f5f5f5;
  border-color: #b5b5b5;
  color: #363636;
}

[data-theme="dark"] .vpn-show-download-btn.is-outlined {
  border-color: #666666;
  color: #e0e0e0;
  background-color: transparent;
}

[data-theme="dark"] .vpn-show-download-btn.is-outlined:hover {
  border-color: #888888;
  background-color: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
}

/* Admin Stats Boxes - Light mode */
.box.stat-box-info {
  background-color: #eff5fb;
  color: #296fa8;
}

.box.stat-box-danger {
  background-color: #feecf0;
  color: #cc0f35;
}

.box.stat-box-warning {
  background-color: #fffaeb;
  color: #946c00;
}

.box.stat-box-success {
  background-color: #effaf5;
  color: #257953;
}
.box.stat-box-primary {
  background-color: #f3f0ff;
  color: #6b46c1;
}

/* Admin Stats Boxes - Dark mode */
[data-theme="dark"] .box.stat-box-info {
  background-color: #1a3a52;
  color: #8fc4e8; /* Brighter blue */
  border-color: #8fc4e8;
}

[data-theme="dark"] .box.stat-box-danger {
  background-color: #4a1e28;
  color: #ff6b8a; /* Brighter pink-red */
  border-color: #ff6b8a;
}

[data-theme="dark"] .box.stat-box-warning {
  background-color: #4a3a1a;
  color: #ffe08a; /* Brighter golden yellow */
  border-color: #ffe08a;
}

[data-theme="dark"] .box.stat-box-success {
  background-color: #1a4a2e;
  color: #72dda4; /* Brighter mint green */
  border-color: #72dda4;
}

[data-theme="dark"] .box.stat-box-primary {
  background-color: #2d1b4e;
  color: #a78bfa; /* Brighter purple */
  border-color: #a78bfa;
}

/* Ensure text is readable in stat boxes */
.box.stat-box-info .heading,
.box.stat-box-danger .heading,
.box.stat-box-warning .heading,
.box.stat-box-success .heading {
  opacity: 0.8;
}

[data-theme="dark"] .box.stat-box-info .title,
[data-theme="dark"] .box.stat-box-danger .title,
[data-theme="dark"] .box.stat-box-warning .title,
[data-theme="dark"] .box.stat-box-success .title {
  color: inherit;
}

/* Container fluid for dashboard */
.container-fluid {
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  margin-left: auto;
  margin-right: auto;
}

/* Remove padding for navbar container */
.navbar .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

/* Navbar slogan styling */
.navbar-slogan {
  font-size: 0.75rem;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 0.25rem;
}

/* Hide slogan on very small screens */
@media (max-width: 480px) {
  .navbar-slogan {
    display: none;
  }
}

/* Profile Styles */
.profile-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 1rem;
}

/* Mobile and tablet optimizations for better space utilization */
@media (max-width: 1023px) {
  /* Reduce section padding on mobile and tablet for all dashboard pages */
  .section {
    padding: 1.25rem 0.5rem;
  }

  /* Remove unnecessary container-fluid padding on mobile and tablet */
  .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  /* Actually, let's come back to this one...
  /* Reduce h1 title size on mobile by ~25% /
  h1.title {
    font-size: 1.5rem;
  }
  */
}

/* Mobile-only optimizations */
@media (max-width: 768px) {
  .profile-container {
    padding: 0rem;
    max-width: none;
  }
}

/* Help Desk Styles */
.help-desk-container {
  max-width: 1200px;
  margin: 0 auto;
}

.help-card {
  height: 100%;
  background: #f5f5f5;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

[data-theme="dark"] .help-card {
  background: linear-gradient(145deg, #1f1f1f 0%, #141414 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.help-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .help-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.help-card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
}

.help-card-content {
  flex-grow: 1;
  margin-bottom: 2rem;
}

.help-card-action {
  margin-top: auto;
}

.support-email {
  color: #177ddc;
  text-decoration: none;
  border-bottom: 1px dashed #177ddc;
}

.support-email:hover {
  color: #1890ff;
  border-bottom-color: #1890ff;
}

.discord-button {
  background-color: #5865f2;
  color: white;
  border: none;
}

.discord-button:hover {
  background-color: #4752c4;
  color: white;
}

.discord-button .icon {
  font-size: 1.25rem;
}

/* Dark mode title adjustments for help cards */
[data-theme="dark"] .help-card .title {
  color: #f5f5f5;
}

[data-theme="dark"] .help-card .subtitle {
  color: #dbdbdb;
}

[data-theme="dark"] .help-card .content {
  color: #b5b5b5;
}

/* Add bottom border to last row of tables for visual separation from pagination */
.table tbody tr:last-child td {
  border-bottom: 1px solid #dbdbdb;
}

[data-theme="dark"] .table tbody tr:last-child td {
  border-bottom: 1px solid #4a4a4a;
}

/* Sortable table headers */
.table th a {
  color: #363636;
  text-decoration: none;
  display: block;
  transition: color 0.2s ease;
}

.table th a:hover {
  color: #00d1b2;
}

[data-theme="dark"] .table th a {
  color: #f5f5f5;
}

[data-theme="dark"] .table th a:hover {
  color: #00d1b2;
}

/* Location Cards - Better visibility in light mode */
.location-card {
  background-color: #fafafa;
  border: 1px solid #e8e8e8;
}

[data-theme="dark"] .location-card {
  background-color: inherit;
  border-color: #4a4a4a;
}

/* Private Server Location Cards - Special styling to make users feel special */
.private-location-card {
  background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%);
  border: 2px solid #ffb300;
  box-shadow: 0 2px 8px rgba(255, 179, 0, 0.15);
  transition: all 0.2s ease;
}

.private-location-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 179, 0, 0.25);
  border-color: #ff8f00;
}

[data-theme="dark"] .private-location-card {
  background: linear-gradient(135deg, #2d2416 0%, #3d3220 100%);
  border: 2px solid #ffb300;
  box-shadow: 0 2px 8px rgba(255, 179, 0, 0.2);
}

[data-theme="dark"] .private-location-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 179, 0, 0.3);
  border-color: #ffcc02;
}

/* VPN Show Page Styles */
/* Inner columns in VPN Configuration box - allow them to grow when wrapped */
.box:has(.qr-code-container) .columns.is-multiline .column {
  flex-grow: 1;
}

/* QR Code column minimum width */
.column:has(.qr-code-container) {
  min-width: 300px;
}

/* QR Code container styles to prevent overflow */
.qr-code-box {
  display: inline-block;
  padding: 1.5rem;
  max-width: 100%;
  overflow: hidden;
}

.qr-code-svg-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  overflow: hidden;
}

/* Responsive SVG QR codes */
.qr-code-svg-wrapper svg {
  width: 100%;
  height: auto;
  max-width: 300px;
  aspect-ratio: 1 / 1;
}

/* Responsive PNG QR codes */
.qr-code-image {
  width: 100%;
  height: auto;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* ANSI QR code styles (terminal-style QR codes) */
.qr-ansi {
  background: #000;
  color: #fff;
  font-family: monospace;
  line-height: 1;
  padding: 1rem;
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  font-size: 0.75rem;
}

/* App store badge sizing */
.app-store-badge {
  min-width: 155px;
  height: 38pt;
  display: inline-block;
  vertical-align: middle;
}

.google-play-badge {
  min-width: 171px;
  height: 38pt;
  display: inline-block;
  vertical-align: middle;
}

/* Mobile optimizations for badges */
@media (max-width: 768px) {
  .app-store-badge {
    min-width: 130px;
    height: 32pt;
  }

  .google-play-badge {
    min-width: 143px;
    height: 32pt;
  }

  .qr-code-svg-wrapper svg {
    max-width: 250px;
  }

  .qr-code-image {
    max-width: 250px;
  }

  .qr-ansi {
    font-size: 0.65rem;
  }
}

/* Tablet optimizations */
@media (min-width: 769px) and (max-width: 1023px) {
  .qr-code-svg-wrapper svg {
    max-width: 280px;
  }

  .qr-code-image {
    max-width: 280px;
  }
}