/* custom.css - Style overrides for DigiLab */
/* Theme: Digimon Logo (Deep Blue #0F4C81 / Orange #F7941D) */
/* Layout: Sidebar + Header */

/* =============================================================================
   APP HEADER
   ============================================================================= */

.app-header {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1.5rem;
  background: linear-gradient(135deg, #0A3055 0%, #0F4C81 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin: -1rem;
  margin-bottom: 0.25rem;
  width: calc(100% + 2rem);
  min-height: 48px;
  max-height: 56px;
  position: relative;
  overflow: hidden;
  /* Subtle grid pattern (4% opacity, 30px spacing) */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, transparent 1px, transparent 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, transparent 1px, transparent 30px),
    linear-gradient(135deg, #0A3055 0%, #0F4C81 100%);
}

/* Circuit node in top-right corner */
.app-header::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 6px;
  height: 6px;
  background: rgba(0, 200, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.7);
  z-index: 10;
}

/* Faint circuit line along right edge */
.app-header::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 14px;
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, rgba(0, 200, 255, 0.3), transparent);
  z-index: 9;
}

/* Header icon styling with pulse animation */
.header-icon {
  font-size: 1.25rem !important;
  color: #FFFFFF !important;
  animation: icon-pulse 3s ease-in-out infinite;
}

.header-icon svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
}

@keyframes icon-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(0, 200, 255, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.8));
  }
}

.header-title {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
}

.header-title-text {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: #FFFFFF !important;
}

/* BETA badge */
.header-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0A3055;
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.9) 0%, rgba(0, 180, 230, 0.9) 100%);
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.4);
  margin-left: 0.5rem;
}

/* Circuit line accent after title */
.header-circuit-line {
  display: flex;
  align-items: center;
  margin-left: 0.75rem;
}

.header-circuit-line::before {
  content: '';
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 200, 255, 0.5), transparent);
}

.header-circuit-line::after {
  content: '';
  width: 4px;
  height: 4px;
  background: rgba(0, 200, 255, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 200, 255, 0.5);
  margin-left: -2px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-action-btn {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  text-decoration: none !important;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.header-action-btn:hover {
  background-color: #F7941D !important;
  color: #FFFFFF !important;
}

/* Ko-fi support button - coral highlight */
.header-coffee-btn:hover {
  background-color: #FF5E5B !important;
  color: #FFFFFF !important;
}

/* =============================================================================
   SIDEBAR NAVIGATION
   ============================================================================= */

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
  padding-left: 12px;
}

/* Vertical circuit line on left edge */
.sidebar-nav::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 200, 255, 0.3) 10%,
    rgba(0, 200, 255, 0.3) 90%,
    transparent 100%);
}

.nav-section-label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1rem 0.5rem 0.5rem 0.5rem;
  margin-top: 0.5rem;
}

.nav-section-label:first-child {
  margin-top: 0;
  padding-top: 0.5rem;
}

.nav-link-sidebar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  border-radius: 6px;
  font-size: 0.9rem;
  transition: all 0.15s ease;
}

.nav-link-sidebar:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF !important;
}

.nav-link-sidebar.active {
  background-color: #F7941D;
  color: #FFFFFF !important;
  font-weight: 500;
  position: relative;
}

/* Glowing circuit node on active nav item */
.nav-link-sidebar.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: rgba(0, 200, 255, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.8);
}

/* Sidebar title styling */
.bslib-sidebar-layout > .sidebar > .sidebar-title {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.5rem;
}

/* Sidebar Logo */
.sidebar-logo-container {
  padding: 0.25rem 0.5rem 1rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 0.75rem;
  margin-top: -0.5rem;
}

.sidebar-logo {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Make textInput match selectInput height */
.dashboard-filters input[type="text"].form-control {
  height: 38px !important;
}

/* Center text in reset buttons */
.dashboard-filters .btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   BUSY INDICATOR
   ============================================================================= */

/* Style the busy indicator pulse */
.bslib-page-fill .shiny-busy-panel {
  background-color: rgba(15, 76, 129, 0.9) !important;
}

/* Busy indicator spinner color */
.shiny-busy .spinner-border {
  color: #F7941D !important;
}

/* Pulse animation for busy state */
.bslib-page-fill.shiny-busy::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0F4C81, #F7941D, #0F4C81);
  background-size: 200% 100%;
  animation: loading-pulse 1.5s ease-in-out infinite;
  z-index: 9999;
}

@keyframes loading-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =============================================================================
   DARK MODE
   ============================================================================= */

/* Dark mode header - use darker shade */
[data-bs-theme="dark"] .app-header {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 30px),
    linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
}

/* Dark mode sidebar - use darker shade that matches */
[data-bs-theme="dark"] .bslib-sidebar-layout > .sidebar {
  background-color: #1A202C !important;
}

[data-bs-theme="dark"] .bslib-sidebar-layout > .sidebar > .sidebar-title {
  color: rgba(255, 255, 255, 0.5) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .nav-link-sidebar {
  color: rgba(255, 255, 255, 0.75) !important;
}

[data-bs-theme="dark"] .nav-link-sidebar:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .nav-link-sidebar.active {
  background-color: #F7941D;
  color: #FFFFFF !important;
}

[data-bs-theme="dark"] .nav-section-label {
  color: rgba(255, 255, 255, 0.4);
}

/* =============================================================================
   MAIN CONTENT
   ============================================================================= */

.main-content {
  padding: 0;
}

/* Reduce whitespace between header and content */
/* Target bslib spacing classes on body and containers */
body.bslib-gap-spacing {
  gap: 0.25rem !important;
}

.bslib-mb-spacing {
  margin-bottom: 0 !important;
}

.bslib-sidebar-layout {
  margin-top: 0 !important;
  gap: 0 !important;
}

.bslib-sidebar-layout > .main,
.bslib-sidebar-layout > main,
.bslib-sidebar-layout > [role="main"],
.bslib-sidebar-layout > :not(.sidebar) {
  padding-top: 0.25rem !important;
}

/* Responsive header */
@media (max-width: 576px) {
  .app-header {
    padding: 0.5rem 1rem;
    margin-bottom: 0.125rem;
  }

  /* Even tighter gap on mobile */
  body.bslib-gap-spacing {
    gap: 0.125rem !important;
  }

  /* Tighter padding on mobile */
  .bslib-sidebar-layout > .main,
  .bslib-sidebar-layout > main,
  .bslib-sidebar-layout > [role="main"],
  .bslib-sidebar-layout > :not(.sidebar) {
    padding: 0.25rem 0.5rem !important;
    padding-top: 0.125rem !important;
  }

  .header-title-text {
    font-size: 1rem;
  }

  .header-action-btn {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
  }
}

/* =============================================================================
   DASHBOARD TITLE STRIP
   ============================================================================= */

.dashboard-title-strip {
  background: linear-gradient(135deg, #0A3055 0%, #0F4C81 100%);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  /* Subtle grid pattern */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 24px),
    linear-gradient(135deg, #0A3055 0%, #0F4C81 100%);
}

.title-strip-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.title-strip-context {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #FFFFFF;
}

.title-strip-icon {
  font-size: 1.1rem;
  opacity: 0.8;
}

.title-strip-text {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.title-strip-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 1;
  min-width: 0;
}

.title-strip-select {
  margin-bottom: 0;
  min-width: 0;
}

.title-strip-select .form-group {
  margin-bottom: 0;
}

/* Fix Shiny input widths in title strip */
.title-strip-select .shiny-input-container,
.title-strip-controls .shiny-input-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* =============================================================================
   TITLE STRIP SELECTIZE INPUTS - Consistent styling across all title strips
   ============================================================================= */

/* Target selectize in all title strip variations */
.dashboard-title-strip .selectize-control,
.page-title-strip .selectize-control,
.title-strip-select .selectize-control,
.title-strip-controls .selectize-control {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.dashboard-title-strip .selectize-input,
.page-title-strip .selectize-input,
.title-strip-select .selectize-input,
.title-strip-controls .selectize-input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  padding: 0.35rem 2rem 0.35rem 0.75rem !important;  /* Match search input height, space for arrow */
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.2 !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 4px !important;
  font-size: 0.8rem !important;
  display: flex !important;
  align-items: center !important;
}

.dashboard-title-strip .selectize-input > input,
.page-title-strip .selectize-input > input,
.title-strip-select .selectize-input > input,
.title-strip-controls .selectize-input > input {
  color: #FFFFFF !important;
  font-size: 0.8rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

.dashboard-title-strip .selectize-input .item,
.page-title-strip .selectize-input .item,
.title-strip-select .selectize-input .item,
.title-strip-controls .selectize-input .item {
  color: #FFFFFF !important;
  max-width: calc(100% - 1.5rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2 !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
}

/* Dropdown arrow for selectize */
.dashboard-title-strip .selectize-control.single .selectize-input::after,
.page-title-strip .selectize-control.single .selectize-input::after,
.title-strip-select .selectize-control.single .selectize-input::after,
.title-strip-controls .selectize-control.single .selectize-input::after {
  border-color: rgba(255, 255, 255, 0.6) transparent transparent transparent;
  right: 10px;
  margin-top: -4px;
}

/* Dropdown menu positioning and styling */
.dashboard-title-strip .selectize-dropdown,
.page-title-strip .selectize-dropdown,
.title-strip-select .selectize-dropdown,
.title-strip-controls .selectize-dropdown {
  z-index: 9999 !important;
  border: 1px solid rgba(0, 200, 255, 0.3);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dashboard-title-strip .selectize-dropdown-content,
.page-title-strip .selectize-dropdown-content {
  max-height: 250px;
}

.dashboard-title-strip .selectize-dropdown .option,
.page-title-strip .selectize-dropdown .option {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

/* Focus state */
.dashboard-title-strip .selectize-input.focus,
.page-title-strip .selectize-input.focus,
.title-strip-select .selectize-input.focus,
.title-strip-controls .selectize-input.focus {
  background-color: rgba(255, 255, 255, 0.25) !important;
  border-color: #F7941D !important;
  box-shadow: 0 0 0 2px rgba(247, 148, 29, 0.25) !important;
}

.title-strip-select .form-select,
.title-strip-select .form-control {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.95);
  color: #333333;
  font-size: 0.8rem;
  padding: 0.35rem 2rem 0.35rem 0.75rem;  /* Extra right padding for dropdown arrow */
  height: auto;
  min-width: 0 !important;
  max-width: 100% !important;
}

.title-strip-select .form-select:focus {
  background-color: #FFFFFF;
  border-color: #F7941D;
  box-shadow: 0 0 0 2px rgba(247, 148, 29, 0.25);
  color: #333333;
}

.btn-title-strip-reset {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  line-height: 1;
  border-radius: 6px;
}

.btn-title-strip-reset:hover {
  background-color: #F7941D;
  border-color: #F7941D;
  color: #FFFFFF;
}

/* Dark mode title strip */
[data-bs-theme="dark"] .dashboard-title-strip {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 24px),
    linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
}

/* =============================================================================
   PAGE TITLE STRIPS (Players, Meta, Tournaments)
   ============================================================================= */

.page-title-strip {
  background: linear-gradient(135deg, #0A3055 0%, #0F4C81 100%);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  /* Subtle grid pattern */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 24px),
    linear-gradient(135deg, #0A3055 0%, #0F4C81 100%);
}

/* Reuse title strip content styles */
.page-title-strip .title-strip-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.page-title-strip .title-strip-context {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #FFFFFF;
}

.page-title-strip .title-strip-icon {
  font-size: 1.1rem;
  opacity: 0.8;
}

.page-title-strip .title-strip-text {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
}

.page-title-strip .title-strip-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 1;
  min-width: 0;
}

/* Fix Shiny input widths in page title strips - wider by default */
.page-title-strip .shiny-input-container,
.dashboard-title-strip .shiny-input-container {
  width: auto !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.page-title-strip .form-select,
.page-title-strip .form-control,
.dashboard-title-strip .form-select,
.dashboard-title-strip .form-control {
  min-width: 0 !important;
}

/* Only constrain widths on smaller screens */
@media (max-width: 992px) {
  .page-title-strip .shiny-input-container {
    max-width: 150px !important;
  }
}

@media (max-width: 768px) {
  .page-title-strip .shiny-input-container {
    max-width: 100% !important;
  }
}

/* Search input in title strip */
.title-strip-search {
  margin-bottom: 0;
}

.title-strip-search .form-group {
  margin-bottom: 0;
}

.title-strip-search .form-control {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.95);
  color: #333333;
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
  height: auto;
}

.title-strip-search .form-control::placeholder {
  color: rgba(100, 100, 100, 0.7);
}

.title-strip-search .form-control:focus {
  background-color: #FFFFFF;
  border-color: #F7941D;
  box-shadow: 0 0 0 2px rgba(247, 148, 29, 0.25);
  color: #333333;
}

/* Dark mode page title strip */
[data-bs-theme="dark"] .page-title-strip {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 24px),
    linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
}

/* Medium screens - constrain widths but keep in one row */
@media (max-width: 1200px) {
  .page-title-strip .title-strip-select .shiny-input-container,
  .dashboard-title-strip .title-strip-select .shiny-input-container {
    max-width: 160px !important;
  }
}

/* Smaller screens - inputs start stacking vertically */
@media (max-width: 992px) {
  .page-title-strip .title-strip-content,
  .dashboard-title-strip .title-strip-content {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .page-title-strip .title-strip-controls,
  .dashboard-title-strip .title-strip-controls {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .page-title-strip .title-strip-search,
  .page-title-strip .title-strip-select,
  .dashboard-title-strip .title-strip-search,
  .dashboard-title-strip .title-strip-select {
    width: 100%;
  }

  .page-title-strip .title-strip-select .shiny-input-container,
  .dashboard-title-strip .title-strip-select .shiny-input-container {
    max-width: 100% !important;
    width: 100% !important;
  }

  .page-title-strip .title-strip-text,
  .dashboard-title-strip .title-strip-text {
    font-size: 0.9rem;
  }

  /* Keep buttons in a row */
  .page-title-strip .title-strip-controls > .btn,
  .dashboard-title-strip .title-strip-controls > .btn {
    width: auto;
    align-self: flex-start;
  }
}

/* Mobile - full width stacked with inline reset button */
@media (max-width: 768px) {
  .page-title-strip .title-strip-content,
  .dashboard-title-strip .title-strip-content {
    flex-direction: column;
    gap: 0.5rem;
  }

  .page-title-strip .title-strip-controls {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 0.5rem;
    align-items: center;
  }

  /* ========== DASHBOARD (no search - 2 rows) ========== */
  /* When there's NO search, first select spans full width */
  .page-title-strip .title-strip-controls:not(:has(.title-strip-search)) > .title-strip-select:first-child {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* ========== OTHER PAGES (has search - 3 rows) ========== */
  /* Search spans full width - Row 1 */
  .page-title-strip .title-strip-search {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* When there IS a search, the format dropdown (2nd child) spans full width - Row 2 */
  .page-title-strip .title-strip-controls:has(.title-strip-search) > .title-strip-select:nth-child(2) {
    grid-column: 1 / -1;
    width: 100%;
  }

  /* All dropdowns fill their cell */
  .page-title-strip .title-strip-select {
    width: 100%;
    min-width: 0;
  }

  /* Reset button in last column */
  .page-title-strip .btn-title-strip-reset {
    justify-self: end;
  }

  .page-title-strip .title-strip-text,
  .dashboard-title-strip .title-strip-text {
    font-size: 0.9rem;
  }

  /* Store page buttons - keep Apply/Clear on same row */
  .page-title-strip .title-strip-controls .btn-sm,
  .dashboard-title-strip .title-strip-controls .btn-sm {
    flex: 0 0 auto;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
  }

  /* When there are multiple buttons side by side, keep them together */
  .page-title-strip .title-strip-controls .btn-primary,
  .page-title-strip .title-strip-controls .btn-outline-secondary {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* =============================================================================
   VALUE BOXES - Digital Digimon Aesthetic
   ============================================================================= */

/* Base digital value box */
.value-box-digital {
  position: relative;
  min-height: 100px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, #0A3055 0%, #0F4C81 100%);
  transition: all 0.2s ease;
}

/* Color-coded left borders */
.vb-tournaments { border-left: 4px solid #F7941D; }
.vb-players { border-left: 4px solid #2D7DD2; }
.vb-hotdeck { border-left: 4px solid #E5383B; }
.vb-topdeck { border-left: 4px solid #38A169; }

/* Grid pattern overlay */
.vb-digital-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0px, transparent 1px, transparent 20px);
  pointer-events: none;
  z-index: 1;
}

/* Circuit accent - diagonal line */
.vb-digital-grid::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, transparent 45%, rgba(0, 200, 255, 0.15) 50%, transparent 55%);
  pointer-events: none;
}

/* Circuit accent - corner node */
.vb-digital-grid::after {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  background: rgba(0, 200, 255, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.6);
  pointer-events: none;
}

/* Content container */
.vb-content {
  position: relative;
  z-index: 2;
  padding: 0.75rem 1rem;
  color: #FFFFFF;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.vb-content-with-image {
  position: relative;
  z-index: 2;
  padding: 0.5rem;
  color: #FFFFFF;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vb-image-showcase {
  flex-shrink: 0;
}

.vb-image-showcase img {
  max-height: 80px;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Label styling */
.vb-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.vb-label-icon {
  font-size: 0.75rem;
  color: #F7941D;
}

/* Value styling */
.vb-value {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.vb-value-deck {
  font-size: clamp(0.85rem, 2vw, 1.1rem) !important;
  white-space: normal;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Subtitle styling */
.vb-subtitle {
  font-size: 0.7rem;
  opacity: 0.7;
  margin-top: 0.15rem;
}

/* Trend indicator for Hot Deck */
.vb-trend-up {
  color: #4ADE80;
  font-weight: 600;
}

.vb-trend-neutral {
  color: rgba(255, 255, 255, 0.6);
  font-style: italic;
}

/* Hover effect */
.value-box-digital:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.value-box-digital:hover .vb-digital-grid::after {
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.8);
}

/* Pulse animation for "Tracking..." state */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.vb-tracking {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .value-box-digital {
  background: linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
}

[data-bs-theme="dark"] .vb-digital-grid {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, transparent 1px, transparent 20px);
}

/* Mobile responsive - let bslib handle grid layout via breakpoints() */
@media (max-width: 768px) {
  /* Only style adjustments, no grid overrides */
  .value-box-digital {
    min-height: 80px;
  }

  .vb-value {
    font-size: 1.25rem !important;
  }

  .vb-image-showcase {
    display: none;
  }

  .vb-content-with-image {
    padding: 0.75rem 1rem;
  }

  .title-strip-content {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Note: title-strip-controls flex behavior is defined earlier in the file
     with flex-wrap: wrap to keep reset button inline */

  .title-strip-select .shiny-input-container {
    max-width: 100% !important;
    width: 100% !important;
  }

  .title-strip-text {
    font-size: 0.9rem;
  }
}

@media (max-width: 576px) {
  /* Value box text truncation on mobile */
  .vb-label {
    display: block !important;
    font-size: 0.55rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Hide icon in label on mobile to save space */
  .vb-label-icon {
    display: none;
  }

  .vb-value {
    display: block !important;
    font-size: 1rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vb-value-deck {
    font-size: 0.8rem !important;
    -webkit-line-clamp: 1;
  }

  .vb-subtitle {
    display: block !important;
    font-size: 0.6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vb-content {
    padding: 0.5rem 0.75rem;
    overflow: hidden;
  }

  /* Ensure value boxes don't overflow */
  .value-box-digital {
    min-height: 70px;
  }
}

/* Very narrow screens - text adjustments only, bslib handles layout */
@media (max-width: 480px) {
  .value-box-digital {
    min-height: 60px;
  }

  .vb-label {
    font-size: 0.6rem;
  }

  .vb-value {
    font-size: 1.1rem !important;
  }
}

/* =============================================================================
   CARDS
   ============================================================================= */

.card {
  border-radius: 10px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: all 0.2s ease !important;
}

/* Data cards (Tier 2) - subtle cyan glow on hover */
.card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 200, 255, 0.1) !important;
}

.card-header {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  padding: 0.75rem 1rem !important;
  border-radius: 10px 10px 0 0 !important;
}

/* =============================================================================
   FEATURE CARDS (Tier 1) - Charts and Key Data
   ============================================================================= */

/* Feature card header with grid pattern + circuit node */
.card-feature .card-header,
.card:has(.highchartOutput) .card-header,
.card:has(highchartOutput) .card-header {
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, rgba(15, 76, 129, 0.04) 0px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(15, 76, 129, 0.04) 0px, transparent 1px, transparent 20px),
    linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
}

/* Circuit node in top-right of feature card header */
.card-feature .card-header::after,
.card:has(.highchartOutput) .card-header::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: rgba(0, 200, 255, 0.4);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 200, 255, 0.5);
}

/* Dark mode */
[data-bs-theme="dark"] .card {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 200, 255, 0.15) !important;
}

[data-bs-theme="dark"] .card-feature .card-header,
[data-bs-theme="dark"] .card:has(.highchartOutput) .card-header {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.03) 0px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.03) 0px, transparent 1px, transparent 20px),
    linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important;
}

[data-bs-theme="dark"] .card-header {
  background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* =============================================================================
   ADMIN PANELS
   ============================================================================= */

.admin-panel {
  background-color: rgba(15, 76, 129, 0.05);
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid rgba(15, 76, 129, 0.1);
}

[data-bs-theme="dark"] .admin-panel {
  background-color: rgba(15, 76, 129, 0.15);
  border-color: rgba(15, 76, 129, 0.25);
}

/* =============================================================================
   TABLES
   ============================================================================= */

.reactable {
  font-size: 0.9rem;
}

.rt-th {
  font-weight: 600 !important;
}

/* =============================================================================
   CARD IMAGE
   ============================================================================= */

.card-image {
  max-width: 150px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* =============================================================================
   MAP CARD - Digital Location Scanner
   ============================================================================= */

.card-map {
  border: 1px solid rgba(0, 200, 255, 0.2) !important;
  overflow: hidden;
}

.card-map .card-header {
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.03) 0px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.03) 0px, transparent 1px, transparent 20px),
    linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  border-bottom: 1px solid rgba(0, 200, 255, 0.15) !important;
}

/* Scanner corner accents */
.card-map .card-header::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 200, 255, 0.5), transparent);
}

.card-map .card-header::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 2px;
  height: 20px;
  background: linear-gradient(180deg, rgba(0, 200, 255, 0.5), transparent);
}

/* Circuit node in header */
.card-map .card-header .map-circuit-node {
  position: relative;
}

.card-map .card-header .map-circuit-node::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -20px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: rgba(0, 200, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.6);
}

/* Map container with subtle digital border */
.card-map .card-body {
  position: relative;
}

.card-map .card-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(0, 200, 255, 0.1);
  pointer-events: none;
  z-index: 10;
}

/* Scan line animation on map */
@keyframes map-scan {
  0% { top: 0; opacity: 0.5; }
  50% { opacity: 0.8; }
  100% { top: 100%; opacity: 0; }
}

.card-map:hover .card-body::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.5), transparent);
  animation: map-scan 2s ease-in-out;
  pointer-events: none;
  z-index: 11;
}

/* Dark mode */
[data-bs-theme="dark"] .card-map {
  border-color: rgba(0, 200, 255, 0.3) !important;
}

[data-bs-theme="dark"] .card-map .card-header {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.04) 0px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.04) 0px, transparent 1px, transparent 20px),
    linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important;
  border-bottom-color: rgba(0, 200, 255, 0.2) !important;
}

[data-bs-theme="dark"] .card-map .card-header::before,
[data-bs-theme="dark"] .card-map .card-header::after {
  opacity: 0.8;
}

[data-bs-theme="dark"] .card-map .card-body::before {
  border-color: rgba(0, 200, 255, 0.15);
}

/* =============================================================================
   CONTROLS CARD
   ============================================================================= */

/* Compact styling for the controls card */
.controls-compact .card-body {
  padding: 0.5rem !important;
}

.controls-compact .bootstrap-select > .dropdown-toggle {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

/* =============================================================================
   DROPDOWNS
   ============================================================================= */

.bootstrap-select .dropdown-menu {
  z-index: 1060 !important;
  max-height: 50vh !important;
}

/* =============================================================================
   DIGIMON THEME ACCENTS
   ============================================================================= */

/* Orange accent on interactive elements */
a:hover, .nav-link:hover {
  color: #F7941D !important;
}

/* Primary button with orange hover */
.btn-primary:hover {
  background-color: #F7941D !important;
  border-color: #E8842C !important;
}

/* Orange focus ring */
.form-control:focus, .form-select:focus {
  border-color: #0F4C81 !important;
  box-shadow: 0 0 0 0.2rem rgba(247, 148, 29, 0.25) !important;
}

/* =============================================================================
   DECK COLOR UTILITIES (for future reactable styling)
   ============================================================================= */

.deck-red { color: #DC2626; }
.deck-blue { color: #2563EB; }
.deck-yellow { color: #EAB308; }
.deck-green { color: #16A34A; }
.deck-black { color: #1F2937; }
.deck-purple { color: #7C3AED; }

.deck-badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  border-radius: 4px;
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Vibrant Digimon TCG colors - solid backgrounds with white text */
.deck-badge-red { background-color: #E5383B; color: #FFFFFF; }
.deck-badge-blue { background-color: #2D7DD2; color: #FFFFFF; }
.deck-badge-yellow { background-color: #F5B700; color: #1A1A1A; }
.deck-badge-green { background-color: #38A169; color: #FFFFFF; }
.deck-badge-black { background-color: #2D3748; color: #FFFFFF; }
.deck-badge-purple { background-color: #805AD5; color: #FFFFFF; }
.deck-badge-white { background-color: #E2E8F0; color: #1A1A1A; border: 1px solid #CBD5E0; }
.deck-badge-multi-color { background-color: #EC4899; color: #FFFFFF; } /* Pink for multi-color */

/* Multi-color badge container */
.deck-badge-multi {
  display: inline-flex;
  gap: 0;
  border-radius: 4px;
  overflow: hidden;
}

.deck-badge-multi .deck-badge {
  border-radius: 0;
  padding: 0.25em 0.5em;
}

.deck-badge-multi .deck-badge:first-child {
  border-radius: 4px 0 0 4px;
}

.deck-badge-multi .deck-badge:last-child {
  border-radius: 0 4px 4px 0;
}

/* Dark mode - colors stay vibrant, minor adjustments */
[data-bs-theme="dark"] .deck-badge-white { background-color: #A0AEC0; color: #1A202C; border-color: #718096; }
[data-bs-theme="dark"] .deck-badge-yellow { background-color: #D69E2E; }

/* =============================================================================
   MODAL HEADERS - Digital Theming
   ============================================================================= */

.modal-header {
  position: relative;
  background: linear-gradient(135deg, #0A3055 0%, #0F4C81 100%);
  color: #FFFFFF;
  border-bottom: none;
  /* Subtle grid pattern */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, transparent 1px, transparent 24px),
    linear-gradient(135deg, #0A3055 0%, #0F4C81 100%);
}

/* Circuit node in modal header */
.modal-header::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 48px;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background: rgba(0, 200, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 200, 255, 0.6);
}

.modal-title {
  color: #FFFFFF !important;
  font-weight: 600;
}

/* Close button in modal header */
.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.8;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

/* Modal content border radius */
.modal-content {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 200, 255, 0.2);
}

/* Dark mode modal */
[data-bs-theme="dark"] .modal-header {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 24px),
    linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
}

[data-bs-theme="dark"] .modal-content {
  background-color: #1e1e1e;
  border-color: rgba(0, 200, 255, 0.3);
}

/* =============================================================================
   MODAL STAT BOXES - Digital Scanner Aesthetic
   ============================================================================= */

.modal-stats-box {
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, rgba(15, 76, 129, 0.03) 0px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(15, 76, 129, 0.03) 0px, transparent 1px, transparent 18px),
    linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 1px solid rgba(0, 200, 255, 0.2);
  border-radius: 8px;
}

/* Corner accents */
.modal-stats-box::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 18px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 200, 255, 0.5), transparent);
}

.modal-stats-box::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 2px;
  height: 18px;
  background: linear-gradient(180deg, rgba(0, 200, 255, 0.5), transparent);
}

/* Stat item styling */
.modal-stat-item {
  text-align: center;
  padding: 0.5rem;
}

.modal-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0F4C81;
  line-height: 1.2;
}

.modal-stat-value.stat-highlight {
  color: #F7941D;
}

.modal-stat-label {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Dark mode */
[data-bs-theme="dark"] .modal-stats-box {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.03) 0px, transparent 1px, transparent 18px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.03) 0px, transparent 1px, transparent 18px),
    linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
  border-color: rgba(0, 200, 255, 0.3);
}

[data-bs-theme="dark"] .modal-stat-value {
  color: rgba(0, 200, 255, 0.9);
}

[data-bs-theme="dark"] .modal-stat-label {
  color: #a0aec0;
}

/* =============================================================================
   MODAL SECTION HEADERS
   ============================================================================= */

.modal-section-header {
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0F4C81;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid rgba(0, 200, 255, 0.2);
}

.modal-section-header::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 200, 255, 0.7), transparent);
}

.modal-section-header::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 4px;
  height: 4px;
  background: rgba(0, 200, 255, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 200, 255, 0.5);
}

[data-bs-theme="dark"] .modal-section-header {
  color: rgba(0, 200, 255, 0.9);
  border-color: rgba(0, 200, 255, 0.3);
}

/* =============================================================================
   PLACEMENT COLORS (Gold, Silver, Bronze)
   ============================================================================= */

.place-1st {
  color: #D4AF37 !important;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(212, 175, 55, 0.3);
}

.place-2nd {
  color: #A8A9AD !important;
  font-weight: 600;
}

.place-3rd {
  color: #CD7F32 !important;
  font-weight: 600;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .place-1st {
  color: #FFD700 !important;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}

[data-bs-theme="dark"] .place-2nd {
  color: #C0C0C0 !important;
}

[data-bs-theme="dark"] .place-3rd {
  color: #D4A574 !important;
}

/* =============================================================================
   TOURNAMENT SUMMARY BAR (Enter Results)
   ============================================================================= */

.tournament-summary-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background-image:
    repeating-linear-gradient(0deg, rgba(15, 76, 129, 0.03) 0px, transparent 1px, transparent 15px),
    repeating-linear-gradient(90deg, rgba(15, 76, 129, 0.03) 0px, transparent 1px, transparent 15px),
    linear-gradient(135deg, #E8F4FD 0%, #F0F8FF 100%);
  border: 1px solid rgba(0, 200, 255, 0.25);
  border-left: 3px solid #0F4C81;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.tournament-summary-bar .summary-icon {
  color: #0F4C81;
  font-size: 1.1rem;
}

.tournament-summary-bar .summary-divider {
  color: rgba(0, 200, 255, 0.4);
}

.tournament-summary-bar .summary-item {
  font-weight: 500;
  color: #2D3748;
}

[data-bs-theme="dark"] .tournament-summary-bar {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.03) 0px, transparent 1px, transparent 15px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.03) 0px, transparent 1px, transparent 15px),
    linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
  border-color: rgba(0, 200, 255, 0.3);
  border-left-color: rgba(0, 200, 255, 0.6);
}

[data-bs-theme="dark"] .tournament-summary-bar .summary-item {
  color: #E2E8F0;
}

/* Mobile: Stack tournament summary into rows */
@media (max-width: 768px) {
  .tournament-summary-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
  }

  .tournament-summary-bar .summary-divider {
    display: none;
  }

  .tournament-summary-bar .summary-icon {
    font-size: 1rem;
  }

  .tournament-summary-bar .summary-item {
    font-size: 0.9rem;
  }
}

/* =============================================================================
   ADD RESULT BUTTON
   ============================================================================= */

.btn-add-result {
  background: linear-gradient(135deg, #0F4C81 0%, #1565a8 100%);
  border: none;
  color: white;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-add-result:hover {
  background: linear-gradient(135deg, #F7941D 0%, #E8842C 100%);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(247, 148, 29, 0.3);
}

.btn-add-result:active {
  transform: translateY(0);
}

/* =============================================================================
   SEARCH BUTTON (Manage Decks) - Match reset button style
   ============================================================================= */

.btn-card-search {
  background: transparent;
  border: 1px solid rgba(0, 200, 255, 0.4);
  color: #0F4C81;
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.btn-card-search:hover {
  background: rgba(0, 200, 255, 0.1);
  border-color: rgba(0, 200, 255, 0.6);
  color: #0F4C81;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.2);
}

.btn-card-search:active,
.btn-card-search:focus {
  background: rgba(0, 200, 255, 0.15);
  border-color: #F7941D;
  box-shadow: 0 0 0 2px rgba(247, 148, 29, 0.2);
}

[data-bs-theme="dark"] .btn-card-search {
  color: rgba(0, 200, 255, 0.9);
  border-color: rgba(0, 200, 255, 0.5);
}

[data-bs-theme="dark"] .btn-card-search:hover {
  background: rgba(0, 200, 255, 0.15);
}

/* Search row alignment - button aligns with input box */
.search-row-aligned {
  display: flex;
  gap: 0.5rem;
}

.search-input-wrapper {
  flex: 1;
}

/* Remove bottom margin from the input wrapper to align properly */
.search-input-wrapper .form-group {
  margin-bottom: 0;
}

.search-btn-wrapper {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Account for the label height (approximately 1.5rem + 0.5rem gap) */
.search-btn-wrapper::before {
  content: '';
  height: calc(1.5rem + 0.25rem);
}

.search-btn-wrapper .btn-card-search {
  height: 38px;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================= */

@media (max-width: 768px) {
  .admin-panel {
    padding: 0.75rem;
  }

  .card-header {
    font-size: 0.875rem !important;
    padding: 0.5rem 0.75rem !important;
  }
}

/* =============================================================================
   MAPGL STYLING
   ============================================================================= */

/* Style the map container */
.mapboxgl-map, .maplibregl-map {
  border-radius: 0 0 8px 8px;
}

/* Style all map control buttons including draw controls */
.mapboxgl-ctrl-group,
.maplibregl-ctrl-group {
  background: #0F4C81 !important;
  border-radius: 6px !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.mapboxgl-ctrl-group button,
.maplibregl-ctrl-group button {
  background-color: #0F4C81 !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  width: 36px !important;
  height: 36px !important;
}

.mapboxgl-ctrl-group button:last-child,
.maplibregl-ctrl-group button:last-child {
  border-bottom: none !important;
}

.mapboxgl-ctrl-group button:hover,
.maplibregl-ctrl-group button:hover {
  background-color: #F7941D !important;
}

.mapboxgl-ctrl-group button.active,
.maplibregl-ctrl-group button.active {
  background-color: #F7941D !important;
}

/* Mapbox GL Draw - style the draw control buttons */
.mapboxgl-ctrl-group button.mapbox-gl-draw_ctrl-draw-btn,
.mapboxgl-ctrl-group button.mapbox-gl-draw_polygon,
.mapboxgl-ctrl-group button.mapbox-gl-draw_trash,
.mapboxgl-ctrl-group button.mapbox-gl-draw_line,
.mapboxgl-ctrl-group button.mapbox-gl-draw_point,
.mapboxgl-ctrl-group button.mapbox-gl-draw_combine,
.mapboxgl-ctrl-group button.mapbox-gl-draw_uncombine {
  background-color: #0F4C81 !important;
}

/* Make ALL button background images (icons) white by inverting */
.mapboxgl-ctrl-group button {
  filter: none !important;
}

/* Target the actual SVG/image icons inside buttons */
.mapboxgl-ctrl button.mapboxgl-ctrl-icon,
.maplibregl-ctrl button.maplibregl-ctrl-icon {
  filter: brightness(0) invert(1) !important;
}

/* Mapbox GL Draw uses background-image for icons - invert them */
.mapbox-gl-draw_ctrl-draw-btn.mapbox-gl-draw_polygon,
.mapbox-gl-draw_ctrl-draw-btn.mapbox-gl-draw_trash,
.mapbox-gl-draw_ctrl-draw-btn.mapbox-gl-draw_line,
.mapbox-gl-draw_ctrl-draw-btn.mapbox-gl-draw_point,
.mapbox-gl-draw_ctrl-draw-btn.mapbox-gl-draw_combine,
.mapbox-gl-draw_ctrl-draw-btn.mapbox-gl-draw_uncombine,
button.mapbox-gl-draw_polygon,
button.mapbox-gl-draw_trash,
button.mapbox-gl-draw_line,
button.mapbox-gl-draw_point {
  filter: invert(1) !important;
  background-color: transparent !important;
}

/* Override to keep background but invert icon */
.mapboxgl-ctrl-group button.mapbox-gl-draw_ctrl-draw-btn {
  position: relative;
}

/* Alternative: Use CSS to style the buttons with custom colors */
.mapboxgl-ctrl-group button::before {
  filter: brightness(0) invert(1);
}

/* Ensure the draw control group has proper styling */
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group {
  background: #0F4C81 !important;
}

/* =============================================================================
   MAPBOX GL DRAW CONTROLS - Light Mode
   ============================================================================= */

/* Control group container */
.mapboxgl-ctrl-top-left .mapboxgl-ctrl-group,
.mapboxgl-ctrl-group {
  background-color: #FFFFFF !important;
  border: 2px solid #0F4C81 !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

/* All buttons in control groups */
.mapboxgl-ctrl-group > button,
.mapboxgl-ctrl button {
  background-color: #FFFFFF !important;
  border: none !important;
  border-bottom: 1px solid #E5E7EB !important;
  width: 30px !important;
  height: 30px !important;
}

.mapboxgl-ctrl-group > button:last-child {
  border-bottom: none !important;
}

/* Hover state */
.mapboxgl-ctrl-group > button:hover,
.mapboxgl-ctrl button:hover {
  background-color: #FEF3E2 !important;
}

/* Active/selected state - orange */
.mapboxgl-ctrl-group > button.active,
.mapboxgl-ctrl button.active {
  background-color: #F7941D !important;
}

/* Active + hover */
.mapboxgl-ctrl-group > button.active:hover,
.mapboxgl-ctrl button.active:hover {
  background-color: #E8842C !important;
}

/* =============================================================================
   MAPBOX GL DRAW CONTROLS - Dark Mode
   ============================================================================= */

[data-bs-theme="dark"] .mapboxgl-ctrl-top-left .mapboxgl-ctrl-group,
[data-bs-theme="dark"] .mapboxgl-ctrl-group {
  background-color: #2D3748 !important;
  border-color: #4A5568 !important;
}

[data-bs-theme="dark"] .mapboxgl-ctrl-group > button,
[data-bs-theme="dark"] .mapboxgl-ctrl button {
  background-color: #2D3748 !important;
  border-bottom-color: #4A5568 !important;
  /* Invert icons to white for dark mode */
  filter: invert(1) !important;
}

[data-bs-theme="dark"] .mapboxgl-ctrl-group > button:hover,
[data-bs-theme="dark"] .mapboxgl-ctrl button:hover {
  background-color: #4A5568 !important;
}

[data-bs-theme="dark"] .mapboxgl-ctrl-group > button.active,
[data-bs-theme="dark"] .mapboxgl-ctrl button.active {
  background-color: #F7941D !important;
  filter: none !important;
}

/* Drawn polygon styling on map */
.mapboxgl-canvas {
  outline: none;
}

/* Dark mode map controls */
[data-bs-theme="dark"] .mapboxgl-ctrl-group,
[data-bs-theme="dark"] .maplibregl-ctrl-group {
  background: #2D3748 !important;
}

[data-bs-theme="dark"] .mapboxgl-ctrl-group button,
[data-bs-theme="dark"] .maplibregl-ctrl-group button {
  background-color: #2D3748 !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .mapboxgl-ctrl-group button:hover,
[data-bs-theme="dark"] .maplibregl-ctrl-group button:hover {
  background-color: #F7941D !important;
}

[data-bs-theme="dark"] .mapboxgl-ctrl-group button[class*="mapbox-gl-draw"] {
  filter: invert(0.8) hue-rotate(180deg) !important;
  background-color: #2D3748 !important;
}

/* =============================================================================
   DASHBOARD FILTERS - Responsive Grid Layout
   ============================================================================= */

.dashboard-filters {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.dashboard-filters .form-group {
  margin-bottom: 0;
}

.dashboard-filters label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4A5568;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.dashboard-filters .form-select,
.dashboard-filters .form-control {
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
}

/* Force all filter elements to respect grid column boundaries */
.dashboard-filters .bslib-grid-item,
.admin-panel .bslib-grid-item {
  min-width: 0 !important;
  max-width: 100%;
}

.dashboard-filters .shiny-input-container,
.admin-panel .shiny-input-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.dashboard-filters .selectize-control,
.dashboard-filters .selectize-input,
.admin-panel .selectize-control,
.admin-panel .selectize-input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* Fix for bslib layout_columns inside dashboard-filters */
.dashboard-filters .bslib-grid {
  gap: 0.5rem !important;
}

/* Mobile: reduce padding */
@media (max-width: 576px) {
  .dashboard-filters {
    padding: 0.5rem 0.75rem;
  }
}

[data-bs-theme="dark"] .dashboard-filters {
  background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .dashboard-filters label {
  color: #A0AEC0;
}

/* =============================================================================
   TOP DECKS WITH CARD IMAGES
   ============================================================================= */

.top-decks-container {
  padding: 0.5rem;
}

.top-decks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.75rem;
}

.deck-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.deck-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.deck-card-img {
  flex-shrink: 0;
  width: 50px;
  height: 70px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.deck-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

.deck-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1A202C;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.deck-bar-container {
  height: 8px;
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.25rem;
}

.deck-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.deck-stats {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #6B7280;
}

.deck-entries {
  font-weight: 500;
}

.deck-pct {
  font-weight: 600;
  color: #0F4C81;
}

/* Dark mode */
[data-bs-theme="dark"] .deck-item {
  background: linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .deck-name {
  color: #F7FAFC;
}

[data-bs-theme="dark"] .deck-bar-container {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .deck-stats {
  color: #A0AEC0;
}

[data-bs-theme="dark"] .deck-pct {
  color: #F7941D;
}

/* Responsive - single column on small screens */
@media (max-width: 640px) {
  .top-decks-grid {
    grid-template-columns: 1fr;
  }

  .deck-card-img {
    width: 40px;
    height: 56px;
  }
}

/* =============================================================================
   INFO ICON TOOLTIPS
   ============================================================================= */

.rating-info-icon {
  color: #6B7280;
  cursor: help;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.rating-info-icon:hover {
  opacity: 1;
  color: #0F4C81;
}

[data-bs-theme="dark"] .rating-info-icon {
  color: #A0AEC0;
}

[data-bs-theme="dark"] .rating-info-icon:hover {
  color: #F7941D;
}

/* =============================================================================
   ADMIN DECK MANAGEMENT - Digital Scanner Aesthetic
   ============================================================================= */

/* Card preview container - scanner effect */
#card_preview_container {
  position: relative;
  background: linear-gradient(135deg, #0A3055 0%, #0F4C81 100%) !important;
  border: 1px solid rgba(0, 200, 255, 0.3) !important;
  /* Grid overlay */
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, transparent 1px, transparent 15px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, transparent 1px, transparent 15px),
    linear-gradient(135deg, #0A3055 0%, #0F4C81 100%) !important;
}

/* Circuit node below preview */
#card_preview_container::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: rgba(0, 200, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 200, 255, 0.6);
}

/* Card preview image */
#card_preview_container img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Selection glow pulse animation */
@keyframes card-selected-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 200, 255, 0.6); }
  50% { box-shadow: 0 0 15px 3px rgba(0, 200, 255, 0.4); }
  100% { box-shadow: 0 0 0 0 rgba(0, 200, 255, 0); }
}

#card_preview_container.card-selected {
  animation: card-selected-pulse 0.6s ease-out;
}

/* Card search results container - digital scanner box */
.card-search-results-container {
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, rgba(15, 76, 129, 0.03) 0px, transparent 1px, transparent 12px),
    repeating-linear-gradient(90deg, rgba(15, 76, 129, 0.03) 0px, transparent 1px, transparent 12px),
    linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 1px solid rgba(0, 200, 255, 0.25) !important;
  border-radius: 8px;
}

/* Corner accent node */
.card-search-results-container::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 4px;
  height: 4px;
  background: rgba(0, 200, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 200, 255, 0.5);
}

.card-search-results-container::after {
  content: '';
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 4px;
  height: 4px;
  background: rgba(0, 200, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 200, 255, 0.5);
}

.card-search-results {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Search result cards - digital scanner aesthetic */
.card-search-btn {
  position: relative;
  transition: all 0.25s ease !important;
  border: 1px solid rgba(0, 200, 255, 0.2) !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(15, 76, 129, 0.02) 0px, transparent 1px, transparent 10px),
    repeating-linear-gradient(90deg, rgba(15, 76, 129, 0.02) 0px, transparent 1px, transparent 10px),
    linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  overflow: hidden;
}

/* Corner scan line accent */
.card-search-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 200, 255, 0.4), transparent);
  transition: all 0.25s ease;
}

.card-search-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 20px;
  background: linear-gradient(180deg, rgba(0, 200, 255, 0.4), transparent);
  transition: all 0.25s ease;
}

.card-search-btn:hover {
  border-color: rgba(0, 200, 255, 0.6) !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.04) 0px, transparent 1px, transparent 10px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.04) 0px, transparent 1px, transparent 10px),
    linear-gradient(135deg, rgba(0, 200, 255, 0.08) 0%, rgba(0, 200, 255, 0.02) 100%) !important;
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.35), inset 0 0 20px rgba(0, 200, 255, 0.05);
  transform: translateY(-2px);
}

.card-search-btn:hover::before {
  width: 30px;
  background: linear-gradient(90deg, rgba(0, 200, 255, 0.7), transparent);
}

.card-search-btn:hover::after {
  height: 30px;
  background: linear-gradient(180deg, rgba(0, 200, 255, 0.7), transparent);
}

.card-search-btn:active,
.card-search-btn:focus {
  border-color: #F7941D !important;
  box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.25), 0 0 15px rgba(247, 148, 29, 0.3) !important;
}

.card-search-btn:active::before,
.card-search-btn:focus::before {
  background: linear-gradient(90deg, rgba(247, 148, 29, 0.7), transparent);
}

.card-search-btn:active::after,
.card-search-btn:focus::after {
  background: linear-gradient(180deg, rgba(247, 148, 29, 0.7), transparent);
}

/* Dark mode adjustments */
[data-bs-theme="dark"] #card_preview_container {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, transparent 1px, transparent 15px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, transparent 1px, transparent 15px),
    linear-gradient(135deg, #1A202C 0%, #2D3748 100%) !important;
  border-color: rgba(0, 200, 255, 0.4) !important;
}

[data-bs-theme="dark"] .card-search-results-container {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.03) 0px, transparent 1px, transparent 12px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.03) 0px, transparent 1px, transparent 12px),
    linear-gradient(135deg, #1A202C 0%, #2D3748 100%);
  border-color: rgba(0, 200, 255, 0.35) !important;
}

[data-bs-theme="dark"] .card-search-btn {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.02) 0px, transparent 1px, transparent 10px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.02) 0px, transparent 1px, transparent 10px),
    linear-gradient(135deg, #2D3748 0%, #1A202C 100%) !important;
  border-color: rgba(0, 200, 255, 0.25) !important;
}

[data-bs-theme="dark"] .card-search-btn:hover {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.05) 0px, transparent 1px, transparent 10px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.05) 0px, transparent 1px, transparent 10px),
    linear-gradient(135deg, rgba(0, 200, 255, 0.12) 0%, rgba(0, 200, 255, 0.03) 100%) !important;
}

/* =============================================================================
   QUICK ADD FORMS (Enter Results page)
   Uses .card-search-results-container for the container styling
   ============================================================================= */

/* Quick add button styling */
.btn-quick-add {
  background: linear-gradient(135deg, #0F4C81 0%, #1565A8 100%);
  border: 1px solid rgba(0, 200, 255, 0.3);
  color: white;
  transition: all 0.25s ease;
}

.btn-quick-add:hover {
  background: linear-gradient(135deg, #1565A8 0%, #2A7AB8 100%);
  border-color: rgba(0, 200, 255, 0.6);
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.3);
  color: white;
}

.btn-quick-add:active,
.btn-quick-add:focus {
  background: linear-gradient(135deg, #F7941D 0%, #E8842C 100%);
  border-color: #F7941D;
  box-shadow: 0 0 0 3px rgba(247, 148, 29, 0.25);
  color: white;
}

[data-bs-theme="dark"] .btn-quick-add {
  background: linear-gradient(135deg, #1565A8 0%, #2A7AB8 100%);
}

/* =============================================================================
   FORM INPUT WIDTH FIXES
   ============================================================================= */

/* Fix Shiny input widths in tournament details form */
.tournament-details-form .shiny-input-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.tournament-details-form .selectize-control,
.tournament-details-form .selectize-input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.tournament-details-form .form-control,
.tournament-details-form .form-select {
  width: 100% !important;
  min-width: 0 !important;
}

.tournament-details-form .row > div {
  min-width: 0;
}

/* Fix Shiny input widths inside modals */
.modal-form-inputs .shiny-input-container {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.modal-form-inputs .selectize-control,
.modal-form-inputs .selectize-input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

.modal-form-inputs .form-control {
  width: 100% !important;
  min-width: 0 !important;
}

.modal-form-inputs .row > div {
  min-width: 0;
}

/* =============================================================================
   ADMIN EDIT MODE
   ============================================================================= */

.editing-mode .form-label {
  color: #F7941D;
}

.editing-mode .card-header {
  background: linear-gradient(135deg, #FEF3E2 0%, #FFFFFF 100%);
}

[data-bs-theme="dark"] .editing-mode .card-header {
  background: linear-gradient(135deg, #4A3C2A 0%, #2D3748 100%);
}

/* =============================================================================
   WIZARD STEPS
   ============================================================================= */

.wizard-steps {
  border-bottom: 2px solid #dee2e6;
  padding-bottom: 1rem;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #6c757d;
}

.wizard-step.active {
  color: #0F4C81;
  font-weight: bold;
}

.wizard-step .step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.wizard-step.active .step-number {
  background: #0F4C81;
  color: white;
}

.wizard-step.completed .step-number {
  background: #198754;
  color: white;
}

/* =============================================================================
   CUSTOM NOTIFICATIONS
   ============================================================================= */

.custom-notification {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 500;
}

.notify-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.notify-message {
  line-height: 1.3;
}

/* Override Shiny notification styling */
.shiny-notification {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  padding: 0.75rem 1rem !important;
}

/* Success notification - green (default "message" type) */
.shiny-notification-message {
  background-color: #ECFDF5 !important;
  border-left: 4px solid #10B981 !important;
  color: #065F46 !important;
}

.shiny-notification-message .notify-icon {
  color: #10B981;
}

/* Warning notification - amber */
.shiny-notification-warning {
  background-color: #FFFBEB !important;
  border-left: 4px solid #F59E0B !important;
  color: #92400E !important;
}

.shiny-notification-warning .notify-icon {
  color: #F59E0B;
}

/* Error notification - red */
.shiny-notification-error {
  background-color: #FEF2F2 !important;
  border-left: 4px solid #EF4444 !important;
  color: #991B1B !important;
}

.shiny-notification-error .notify-icon {
  color: #EF4444;
}

/* Close button styling */
.shiny-notification .close {
  opacity: 0.6;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0;
  margin-left: auto;
}

.shiny-notification .close:hover {
  opacity: 1;
}

/* Dark mode notifications */
[data-bs-theme="dark"] .shiny-notification-message {
  background-color: #064E3B !important;
  color: #D1FAE5 !important;
}

[data-bs-theme="dark"] .shiny-notification-warning {
  background-color: #78350F !important;
  color: #FEF3C7 !important;
}

[data-bs-theme="dark"] .shiny-notification-error {
  background-color: #7F1D1D !important;
  color: #FEE2E2 !important;
}

/* Notification positioning - bottom right on desktop */
#shiny-notification-panel {
  bottom: 20px !important;
  right: 20px !important;
  left: auto !important;
  top: auto !important;
  max-width: 400px;
}

/* Mobile - bottom center, full width */
@media (max-width: 576px) {
  #shiny-notification-panel {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    max-width: none;
  }

  .shiny-notification {
    width: 100% !important;
  }
}

/* =============================================================================
   MOBILE UI IMPROVEMENTS
   ============================================================================= */

/* 4a. Mobile Navigation Menu - auto-height, not full screen */
@media (max-width: 991px) {
  .bslib-sidebar-layout > .sidebar {
    max-height: fit-content !important;
    height: auto !important;
    /* Ensure background color on mobile overlay */
    background-color: #0A3055 !important;
  }

  .bslib-sidebar-layout > .sidebar.show {
    max-height: 80vh !important;
    overflow-y: auto;
  }

  /* Smaller sidebar title on mobile */
  .bslib-sidebar-layout > .sidebar > .sidebar-title {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: 0.7rem;
  }

  /* Tighter nav links on mobile */
  .nav-link-sidebar {
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
  }

  /* Smaller section labels */
  .nav-section-label {
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
    font-size: 0.65rem;
  }
}

/* 4b. Mobile Value Boxes - let bslib handle grid via breakpoints() */
@media (max-width: 768px) {
  .bslib-value-box {
    min-height: 70px;
  }

  .bslib-value-box .value-box-title {
    font-size: 0.65rem !important;
  }

  .bslib-value-box .value-box-value {
    font-size: 1rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 4c. Mobile Filter Sections - vertical stacking */
/* Mobile filter stacking now handled by layout_columns responsive behavior */

/* 4d. Mobile Tables - hide less important columns */
@media (max-width: 768px) {
  /* Player standings - hide L, T, 1st, Top3 columns */
  .rt-table [data-col-id="L"],
  .rt-table [data-col-id="T"],
  .rt-table [data-col-id="1st"],
  .rt-table [data-col-id="Top 3"],
  .rt-table [data-col-id="Losses"],
  .rt-table [data-col-id="Ties"],
  .rt-table [data-col-id="1st Places"],
  .rt-table [data-col-id="Top 3 Finishes"] {
    display: none !important;
  }

  /* Smaller table text */
  .reactable {
    font-size: 0.8rem;
  }

  .rt-th {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.75rem !important;
  }

  .rt-td {
    padding: 0.35rem 0.5rem !important;
  }
}

/* 5a. Mobile Admin - Enter Tournament Details */
@media (max-width: 768px) {
  #wizard_step1 .card-body {
    padding: 0.75rem;
  }

  #wizard_step1 .d-flex.gap-3 {
    flex-direction: column;
    gap: 0.5rem !important;
  }

  #wizard_step1 .d-flex.gap-3 > div {
    flex: none !important;
    width: 100% !important;
  }

  /* Center create button on mobile */
  #wizard_step1 .d-flex.justify-content-end {
    justify-content: center !important;
  }
}

/* 5b. Mobile Admin - Add Results Page */
@media (max-width: 768px) {
  /* Stack form and table vertically */
  #wizard_step2 .bslib-grid {
    display: block !important;
  }

  #wizard_step2 .bslib-grid > div {
    width: 100% !important;
    margin-bottom: 1rem;
  }

  /* Compact form on mobile */
  #wizard_step2 .card-body {
    padding: 0.75rem;
  }

  /* Smaller W/L/T inputs on mobile */
  #wizard_step2 .d-flex.gap-2 .form-control {
    padding: 0.25rem 0.4rem;
    font-size: 0.875rem;
  }
}

/* 5c. Mobile Admin - Manage Pages */
@media (max-width: 768px) {
  /* Stack columns vertically on manage pages */
  .admin-panel .bslib-grid {
    display: block !important;
  }

  .admin-panel .bslib-grid > div {
    width: 100% !important;
    margin-bottom: 1rem;
  }

  /* Hide less important columns in admin tables */
  /* Decks: hide Card ID */
  .admin-panel .rt-table [data-col-id="Card ID"],
  .admin-panel .rt-table [data-col-id="card_id"],
  .admin-panel .rt-table [data-col-id="Display Card"] {
    display: none !important;
  }

  /* Stores: hide State */
  .admin-panel .rt-table [data-col-id="State"] {
    display: none !important;
  }
}

/* Mobile header adjustments */
@media (max-width: 576px) {
  .app-header {
    flex-wrap: nowrap;
    padding: 0.4rem 0.75rem;
  }

  .header-title-text {
    font-size: 0.9rem;
  }

  .header-action-btn {
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
  }

  /* Hide decorative elements on mobile to prevent overlap */
  .header-badge {
    display: none;
  }

  .header-circuit-line {
    display: none;
  }

  /* Hide circuit node and line pseudo-elements on mobile */
  .app-header::before,
  .app-header::after {
    display: none;
  }

  /* Reduce header icon size on mobile */
  .header-icon {
    font-size: 1rem !important;
  }

  .header-icon svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  /* Reduce gap in header-title on mobile */
  .header-title {
    gap: 0.5rem;
  }

  /* Reduce gap in header-actions on mobile */
  .header-actions {
    gap: 0.5rem;
  }

  /* Smaller page titles on mobile */
  h2 {
    font-size: 1.25rem;
  }

  /* Tighter card padding */
  .card-body {
    padding: 0.75rem !important;
  }

  .card-header {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
  }
}

/* =============================================================================
   APP-WIDE LOADING SCREEN
   ============================================================================= */

.app-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0A3055 0%, #0F4C81 100%);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 40px),
    linear-gradient(135deg, #0A3055 0%, #0F4C81 100%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.app-loading-overlay.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Digital gate animation */
.loading-gate {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 2rem;
}

/* Outer ring */
.loading-gate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 3px solid rgba(0, 200, 255, 0.3);
  border-radius: 50%;
  border-top-color: rgba(0, 200, 255, 0.9);
  animation: gate-spin 1.5s linear infinite;
}

/* Inner ring */
.loading-gate::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 2px solid rgba(247, 148, 29, 0.3);
  border-radius: 50%;
  border-bottom-color: rgba(247, 148, 29, 0.9);
  animation: gate-spin 1s linear infinite reverse;
}

/* Center glow */
.loading-gate-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(0, 200, 255, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  animation: gate-pulse 2s ease-in-out infinite;
}

@keyframes gate-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes gate-pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 1;
  }
}

/* Loading message */
.loading-message {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-align: center;
  min-height: 1.5em;
}

.loading-submessage {
  color: rgba(0, 200, 255, 0.8);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  font-family: monospace;
}

/* Scan line effect on loading */
.loading-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.6), transparent);
  animation: loading-scan 2s ease-in-out infinite;
}

@keyframes loading-scan {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* =============================================================================
   DIGITAL EMPTY STATES
   ============================================================================= */

.empty-state-digital {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, rgba(15, 76, 129, 0.02) 0px, transparent 1px, transparent 25px),
    repeating-linear-gradient(90deg, rgba(15, 76, 129, 0.02) 0px, transparent 1px, transparent 25px);
  border-radius: 8px;
  min-height: 120px;
}

/* Scanner corners */
.empty-state-digital::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  width: 25px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 200, 255, 0.4), transparent);
  box-shadow: 0 23px 0 transparent;
}

.empty-state-digital::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 12px;
  width: 2px;
  height: 25px;
  background: linear-gradient(180deg, rgba(0, 200, 255, 0.4), transparent);
}

/* Additional corners via child element */
.empty-state-corners::before {
  content: '';
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 25px;
  height: 2px;
  background: linear-gradient(270deg, rgba(0, 200, 255, 0.4), transparent);
}

.empty-state-corners::after {
  content: '';
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 2px;
  height: 25px;
  background: linear-gradient(0deg, rgba(0, 200, 255, 0.4), transparent);
}

.empty-state-icon {
  font-size: 2.5rem;
  color: rgba(0, 200, 255, 0.5);
  margin-bottom: 0.75rem;
  animation: empty-pulse 3s ease-in-out infinite;
}

@keyframes empty-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

.empty-state-title {
  color: #6c757d;
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.empty-state-subtitle {
  color: rgba(0, 200, 255, 0.6);
  font-size: 0.8rem;
  font-family: monospace;
}

/* Dark mode */
[data-bs-theme="dark"] .empty-state-digital {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.02) 0px, transparent 1px, transparent 25px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.02) 0px, transparent 1px, transparent 25px);
}

[data-bs-theme="dark"] .empty-state-title {
  color: #adb5bd;
}

/* =============================================================================
   ONLINE STORES CARD
   ============================================================================= */

.card-online {
  border: 1px solid rgba(0, 200, 255, 0.2) !important;
}

.card-online .card-header {
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.03) 0px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.03) 0px, transparent 1px, transparent 20px),
    linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  border-bottom: 1px solid rgba(0, 200, 255, 0.15) !important;
}

/* Circuit accent */
.card-online .card-header::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: rgba(0, 200, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.6);
}

/* Online store item cards */
.online-store-item {
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, rgba(15, 76, 129, 0.02) 0px, transparent 1px, transparent 15px),
    repeating-linear-gradient(90deg, rgba(15, 76, 129, 0.02) 0px, transparent 1px, transparent 15px),
    linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border: 1px solid rgba(0, 200, 255, 0.2) !important;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.online-store-item:hover {
  border-color: rgba(0, 200, 255, 0.5) !important;
  box-shadow: 0 0 12px rgba(0, 200, 255, 0.2);
  transform: translateY(-2px);
}

/* Connection node */
.online-store-item::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 5px;
  height: 5px;
  background: rgba(0, 200, 255, 0.5);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(0, 200, 255, 0.5);
  animation: node-pulse 2s ease-in-out infinite;
}

@keyframes node-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; box-shadow: 0 0 10px rgba(0, 200, 255, 0.8); }
}

/* Dark mode */
[data-bs-theme="dark"] .card-online {
  border-color: rgba(0, 200, 255, 0.3) !important;
}

[data-bs-theme="dark"] .card-online .card-header {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.04) 0px, transparent 1px, transparent 20px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.04) 0px, transparent 1px, transparent 20px),
    linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important;
}

[data-bs-theme="dark"] .online-store-item {
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 200, 255, 0.02) 0px, transparent 1px, transparent 15px),
    repeating-linear-gradient(90deg, rgba(0, 200, 255, 0.02) 0px, transparent 1px, transparent 15px),
    linear-gradient(135deg, #2D3748 0%, #1A202C 100%);
  border-color: rgba(0, 200, 255, 0.25) !important;
}