/* ==========================================================================
   Customization Styles — Density & Legacy Mode
   Scoped to body.index (loot page only)
   ========================================================================== */

/* ==========================================================================
   Density: Compact
   ========================================================================== */
body.index.density-compact .overall-funds {
  gap: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
}

body.index.density-compact .overall-funds .fund {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}

body.index.density-compact .overall-funds .fund span {
  font-size: 0.95rem;
}

body.index.density-compact .table thead th {
  padding: 0.5rem 0.75rem;
  font-size: 0.7rem;
}

body.index.density-compact .table tbody td {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
}

body.index.density-compact .items-card-container {
  gap: 0.5rem;
  padding: 0.5rem;
}

body.index.density-compact .item-card {
  padding: 0.65rem;
  min-height: 200px;
}

body.index.density-compact .item-card-name {
  font-size: 0.95rem;
}

body.index.density-compact .item-card-details {
  font-size: 0.8rem;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

body.index.density-compact .item-card-actions .btn {
  padding: 0.25rem 0.4rem;
  font-size: 0.75rem;
}

body.index.density-compact .items-list-container {
  gap: 0.25rem;
  padding: 0.5rem;
}

body.index.density-compact .item-list-row {
  padding: 0.4rem 0.75rem;
  gap: 0.5rem;
}

body.index.density-compact .item-list-icon {
  width: 30px;
  height: 30px;
  font-size: 0.9rem;
}

body.index.density-compact .item-list-name {
  font-size: 0.85rem;
}

body.index.density-compact .item-list-meta {
  font-size: 0.75rem;
}

body.index.density-compact #lootTabsContent {
  padding: 1rem !important;
}

body.index.density-compact #lootTabs .nav-link {
  padding: 0.5rem 0.9rem;
  font-size: 0.85rem;
}

body.index.density-compact .form-control,
body.index.density-compact .form-select {
  padding: 0.4rem 0.65rem;
  font-size: 0.85rem;
}

/* ==========================================================================
   Density: Comfortable (default — no overrides needed)
   ========================================================================== */

/* ==========================================================================
   Density: Spacious
   ========================================================================== */
body.index.density-spacious .overall-funds {
  gap: 1.5rem;
  padding: 1.5rem;
  margin: 1.5rem 0;
}

body.index.density-spacious .overall-funds .fund {
  padding: 0.75rem 1.25rem;
  font-size: 1.05rem;
}

body.index.density-spacious .overall-funds .fund span {
  font-size: 1.25rem;
}

body.index.density-spacious .table thead th {
  padding: 1.25rem 1.5rem;
  font-size: 0.8rem;
}

body.index.density-spacious .table tbody td {
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
}

body.index.density-spacious .items-card-container {
  gap: 1.5rem;
  padding: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

body.index.density-spacious .item-card {
  padding: 1.5rem;
  min-height: 320px;
}

body.index.density-spacious .item-card-name {
  font-size: 1.25rem;
}

body.index.density-spacious .item-card-details {
  font-size: 0.95rem;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

body.index.density-spacious .item-card-actions .btn {
  padding: 0.5rem 0.8rem;
  font-size: 0.9rem;
}

body.index.density-spacious .items-list-container {
  gap: 0.75rem;
  padding: 1.5rem;
}

body.index.density-spacious .item-list-row {
  padding: 1rem 1.25rem;
  gap: 1.25rem;
}

body.index.density-spacious .item-list-icon {
  width: 48px;
  height: 48px;
  font-size: 1.3rem;
}

body.index.density-spacious .item-list-name {
  font-size: 1.05rem;
}

body.index.density-spacious .item-list-meta {
  font-size: 0.9rem;
}

body.index.density-spacious #lootTabsContent {
  padding: 2rem !important;
}

body.index.density-spacious #lootTabs .nav-link {
  padding: 1rem 1.5rem;
  font-size: 1rem;
}

body.index.density-spacious .form-control,
body.index.density-spacious .form-select {
  padding: 0.75rem 1rem;
  font-size: 1rem;
}

/* ==========================================================================
   Legacy Mode — flat dark styling, no glass effects
   ========================================================================== */

/* Replace fairy lights with a subtle dark overlay + light blur */
body.index.legacy-mode::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}

body.index.legacy-mode::after {
  display: none !important;
}

/* Flat dark background */
body.index.legacy-mode:not(.custom-theme) {
  background: #1a1a1a !important;
}

/* Layout containers — transparent so body/custom background shows through */
body.index.legacy-mode #app-layout,
body.index.legacy-mode .main-content {
  background: transparent;
}

body.index.legacy-mode:not(.custom-theme) .sidebar {
  background: #111 !important;
  border-right: 1px solid #333 !important;
}

body.index.legacy-mode.custom-theme .sidebar {
  background: rgba(0, 0, 0, 0.85) !important;
  border-right: 1px solid #333 !important;
}

/* Header — flat, no blur */
body.index.legacy-mode:not(.custom-theme) #campaign-title {
  background: #111 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid #333 !important;
  box-shadow: none !important;
}

/* Tab content — transparent, flat opaque cards provide their own backgrounds */
body.index.legacy-mode #lootTabsContent {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Legacy: all tab panes transparent so background shows between cards */
body.index.legacy-mode .tab-pane {
  background: transparent !important;
}

/* Legacy: staging/merchant cards — flat opaque */
body.index.legacy-mode .staged-item-card {
  background: #282828 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

body.index.legacy-mode .staged-item-card:hover {
  background: #333 !important;
  border-color: #444 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Legacy: staged funds cards — flat opaque */
body.index.legacy-mode .staged-funds-card {
  background: #282828 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

body.index.legacy-mode .staged-funds-card:hover {
  background: #333 !important;
  border-color: #444 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Legacy: staged items grid — flat opaque */
body.index.legacy-mode .staged-items-grid {
  background: #222 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Legacy: release buttons — flat */
body.index.legacy-mode .release-btn {
  background: #2d5a3d !important;
  border: 1px solid #3d7a52 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

body.index.legacy-mode .release-btn:hover {
  background: #3d7a52 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Legacy: section headers — readable against background */
body.index.legacy-mode .staging-section-header {
  background: #222 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  padding: 0.75rem 1rem !important;
}

body.index.legacy-mode .staging-section-header h3 {
  text-shadow: none !important;
}

/* Legacy: dashboard — flat opaque */
body.index.legacy-mode .dash-stat-card {
  background: #222 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
}

body.index.legacy-mode .dash-stat-card:hover {
  background: #2a2a2a !important;
  transform: none !important;
  box-shadow: none !important;
  border-color: #444 !important;
}

body.index.legacy-mode .dash-card {
  background: #222 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
}

body.index.legacy-mode .dash-card:hover {
  border-color: #444 !important;
}

body.index.legacy-mode .dash-card-header {
  border-bottom-color: #333 !important;
}

body.index.legacy-mode .dash-fund-chip {
  background: #282828 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
}

body.index.legacy-mode .dash-fund-chip:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #444 !important;
}

body.index.legacy-mode .dash-active-session {
  background: #222 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
}

body.index.legacy-mode .dash-active-session:hover {
  transform: none !important;
  box-shadow: none !important;
}

body.index.legacy-mode .dash-activity-icon {
  background: #333 !important;
}

/* Legacy: account cards — flat opaque */
body.index.legacy-mode .account-card {
  background: #282828 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
}

body.index.legacy-mode .account-card:hover {
  background: #333 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Tabs — flat */
body.index.legacy-mode #lootTabs .nav-link {
  background: #222 !important;
  border: 1px solid #333 !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0 !important;
}

body.index.legacy-mode #lootTabs .nav-link:hover {
  background: #2a2a2a !important;
  border-color: #444 !important;
}

body.index.legacy-mode #lootTabs .nav-link.active {
  background: #1e1e1e !important;
  border-color: #444 !important;
  box-shadow: none !important;
}

/* Table — flat, override Bootstrap table-dark/striped variables */
body.index.legacy-mode .table {
  --bs-table-bg: transparent !important;
  --bs-table-striped-bg: transparent !important;
  --bs-table-hover-bg: transparent !important;
  --bs-table-border-color: #2a2a2a !important;
  background: #181818 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 4px !important;
  border: 1px solid #333 !important;
  box-shadow: none !important;
}

body.index.legacy-mode .table thead {
  background: #111 !important;
}

body.index.legacy-mode .table thead th {
  background: transparent !important;
  border-bottom-color: #333 !important;
}

body.index.legacy-mode .table tbody tr {
  background: #181818 !important;
}

body.index.legacy-mode .table tbody tr:nth-child(even) {
  background: #1f1f1f !important;
}

body.index.legacy-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background: transparent !important;
}

body.index.legacy-mode .table tbody tr:hover,
body.index.legacy-mode .table-hover > tbody > tr:hover > * {
  background: #282828 !important;
}

body.index.legacy-mode .table td,
body.index.legacy-mode .table th {
  background: transparent !important;
  border-color: #2a2a2a !important;
}

/* Funds — flat */
body.index.legacy-mode .overall-funds {
  background: #222;
  border: 1px solid #333;
  border-radius: 4px;
}

body.index.legacy-mode .overall-funds .fund {
  background: #282828;
  border: 1px solid #333;
  border-radius: 4px;
}

body.index.legacy-mode .overall-funds .fund:hover {
  transform: none;
  box-shadow: none;
  border-color: #444;
}

/* Cards — flat */
body.index.legacy-mode .items-card-container {
  background: #222;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 4px;
  border: 1px solid #333;
  box-shadow: none;
}

body.index.legacy-mode .item-card {
  background: #282828;
  border: 1px solid #333;
  border-radius: 4px;
}

body.index.legacy-mode .item-card:hover {
  background: #333;
  transform: none;
  box-shadow: none;
  border-color: #444;
}

/* List — flat */
body.index.legacy-mode .items-list-container {
  background: #222;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 4px;
  border: 1px solid #333;
  box-shadow: none;
}

body.index.legacy-mode .item-list-row {
  background: #282828;
  border: 1px solid #333;
  border-radius: 4px;
}

body.index.legacy-mode .item-list-row:hover {
  background: #333;
  border-color: #444;
}

/* Buttons — flat, no gradients */
body.index.legacy-mode .btn-primary {
  background: var(--loot-gold-dark) !important;
  box-shadow: none !important;
}

body.index.legacy-mode .btn-primary:hover {
  background: var(--loot-gold) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.index.legacy-mode .btn-success {
  background: #2d5a3d !important;
  box-shadow: none !important;
}

body.index.legacy-mode .btn-success:hover {
  background: #3d7a52 !important;
  transform: none !important;
  box-shadow: none !important;
}

body.index.legacy-mode .btn-danger {
  background: #8b2a2a !important;
  box-shadow: none !important;
}

body.index.legacy-mode .btn-danger:hover {
  background: #a83535 !important;
  transform: none !important;
  box-shadow: none !important;
}

body.index.legacy-mode .btn-secondary:not(#settings-icon) {
  box-shadow: none !important;
}

body.index.legacy-mode .btn-secondary:not(#settings-icon)::before {
  display: none !important;
}

body.index.legacy-mode .btn-secondary:not(#settings-icon):hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Forms — flat */
body.index.legacy-mode .form-control {
  background-color: #1a1a1a !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
}

body.index.legacy-mode .form-control:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

body.index.legacy-mode .form-select {
  background-color: #1a1a1a !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
}

body.index.legacy-mode .form-select:focus {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

/* Modals — flat */
body.index.legacy-mode .modal-content {
  border-radius: 4px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid #333 !important;
}

body.index.legacy-mode .modal-header {
  border-radius: 4px 4px 0 0 !important;
}

body.index.legacy-mode .modal-footer {
  border-radius: 0 0 4px 4px !important;
}

/* Offcanvas — flat */
body.index.legacy-mode .offcanvas {
  background: #111 !important;
  border-right: 1px solid #333 !important;
}

/* Settings icon — flat */
body.index.legacy-mode #settings-icon {
  background: #222 !important;
  border: 1px solid #444 !important;
}

body.index.legacy-mode #settings-icon:hover {
  box-shadow: none !important;
  transform: none !important;
}

/* Alerts — flat */
body.index.legacy-mode .alert {
  background: #222 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
}

/* Scrollbar — flat */
body.index.legacy-mode::-webkit-scrollbar-thumb {
  background: #444;
}

body.index.legacy-mode::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Gold border utility — use accent color */
body.index.legacy-mode .gold-border {
  border-color: #444 !important;
}

/* Dropdown menus — flat */
body.index.legacy-mode .dropdown-menu {
  background: #222 !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.index.legacy-mode .dropdown-item:hover {
  background: #333 !important;
}

/* DnDBeyond cards — flat */
body.index.legacy-mode .dndbeyond-card {
  background: #282828 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
}

body.index.legacy-mode .dndbeyond-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #444 !important;
}

body.index.legacy-mode .dndbeyond-card-header {
  border-bottom-color: #333 !important;
}

body.index.legacy-mode .dndbeyond-card-footer {
  border-top-color: #333 !important;
}

/* Analytics cards — flat */
body.index.legacy-mode #analyticsContent .card {
  background: #222 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Session item badges — flat */
body.index.legacy-mode .session-item-badge {
  background: #333 !important;
  border: 1px solid #444 !important;
  border-radius: 4px !important;
}

/* Loot results — flat */
body.index.legacy-mode .loot-results {
  background: #222 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.index.legacy-mode .loot-results .card {
  background: #282828 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
}

body.index.legacy-mode .loot-results .card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #444 !important;
}

/* Settings inline panel — flat */
body.index.legacy-mode .settings-inline {
  background: #222 !important;
  border: 1px solid #333 !important;
  border-radius: 4px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.index.legacy-mode .settings-inline-nav {
  background: #1a1a1a !important;
  border-right-color: #333 !important;
}

body.index.legacy-mode .settings-nav-link:hover {
  background: #333 !important;
}

body.index.legacy-mode .settings-nav-link.active {
  background: #2a2a2a !important;
}

body.index.legacy-mode .settings-inline-content h3 {
  border-bottom-color: #333 !important;
}

/* Card expand button — flat */
body.index.legacy-mode .item-card-expand {
  border: 1px solid #444;
  border-radius: 4px;
}

/* View toggle — flat */
body.index.legacy-mode .view-toggle .btn {
  border-color: #444 !important;
}

body.index.legacy-mode .view-toggle .btn:hover {
  background: #333 !important;
}