/* ==========================================================================
   WYDBR - MODERN DASHBOARD DESIGN SYSTEM 2.0
   Aligns the User and Admin Dashboard with the Premium Dark/Orange Main Site
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #080808;
  --card: #101010;
  --card-hover: #141414;
  --border: rgba(255, 255, 255, 0.07);
  --border-glow: rgba(245, 166, 35, 0.25);
  --accent: #f5a623;
  --accent-gradient: linear-gradient(135deg, #f97316 0%, #ff8c00 100%);
  --accent-glow: rgba(249, 115, 22, 0.35);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.45);
  --muted2: rgba(255, 255, 255, 0.22);
  --danger: #ef4444;
  --success: #22c55e;
}

/* ===== CORE OVERRIDES ===== */
body.dashboard-page {
  font-family: 'Inter', sans-serif !important;
  background-color: var(--bg) !important;
  background-image: radial-gradient(circle at top right, rgba(249, 115, 22, 0.03), transparent 60%) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Ensure all headings and text within dashboard use Inter */
body.dashboard-page, 
body.dashboard-page *, 
body.dashboard-page *:before, 
body.dashboard-page *:after {
  font-family: 'Inter', sans-serif !important;
}

/* ===== LAYOUT & CONTAINERS ===== */
.dashboard-container {
  padding-top: 100px !important;
  background: transparent !important;
}

.dashboard-wrapper {
  background: transparent !important;
  gap: 0 !important;
}

.dashboard-main {
  background: transparent !important;
  padding: 30px 40px !important;
}

/* ===== SIDEBAR REDESIGN ===== */
.dashboard-sidebar {
  background: var(--card) !important;
  border-right: 1px solid var(--border) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5) !important;
}

.sidebar-logo {
  border-bottom: 1px solid var(--border) !important;
  padding: 25px 20px !important;
}

.logo-main {
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 1px;
}

.logo-sub {
  color: var(--accent) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  font-size: 11px !important;
}

/* User Section on Sidebar */
.user-section {
  border-bottom: 1px solid var(--border) !important;
  padding: 20px !important;
  background: rgba(255, 255, 255, 0.01) !important;
}

.user-avatar {
  background: var(--accent-gradient) !important;
  box-shadow: 0 4px 12px var(--accent-glow) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.user-name {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.status-badge {
  border-radius: 6px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

.status-badge.user {
  background: rgba(34, 197, 94, 0.12) !important;
  color: var(--success) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
}

.status-badge.admin {
  background: rgba(239, 68, 68, 0.12) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

/* Sidebar Nav Items */
.sidebar-navigation {
  padding: 20px 0 !important;
}

.nav-group-title {
  color: var(--muted) !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  padding: 0 20px 10px 20px !important;
  opacity: 0.8;
}

.admin-group .nav-group-title {
  color: var(--danger) !important;
  opacity: 0.9;
}

.nav-item {
  color: var(--muted) !important;
  border-left: 3px solid transparent !important;
  padding: 12px 20px !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
}

.nav-item:hover {
  color: #fff !important;
  background: rgba(245, 166, 35, 0.05) !important;
  border-left-color: var(--accent) !important;
  padding-left: 22px !important; /* Micro-interaction slide right */
}

/* Active navigation item styling */
.nav-item.active,
.nav-item[href="{{ request.url() }}"] {
  color: #fff !important;
  background: rgba(245, 166, 35, 0.08) !important;
  border-left-color: var(--accent) !important;
  font-weight: 600 !important;
}

.nav-item.admin-item {
  color: rgba(255, 255, 255, 0.6) !important;
}

.nav-item.admin-item:hover {
  color: #fff !important;
  background: rgba(239, 68, 68, 0.05) !important;
  border-left-color: var(--danger) !important;
}

.nav-icon {
  font-size: 15px !important;
  opacity: 0.85;
}

.nav-item:hover .nav-icon {
  opacity: 1;
}

/* ===== PREMIUM CARDS & CONTAINERS ===== */
.referral-section,
.rpg-container,
.modal-container,
.package-card,
.card,
.content-box,
.panel,
.dashboard-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  padding: 24px !important;
  margin-bottom: 25px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  position: relative;
  overflow: hidden;
}

/* Subtle border hover glow */
.referral-section:hover,
.rpg-container:hover,
.modal-container:hover,
.package-card:hover,
.card:hover,
.dashboard-card:hover {
  border-color: var(--border-glow) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 15px rgba(245, 166, 35, 0.03) !important;
  transform: translateY(-2px);
}

/* Welcome banner */
.welcome-section {
  background: radial-gradient(circle at top right, rgba(249, 115, 22, 0.08), rgba(0, 0, 0, 0.3)) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: 20px !important;
  padding: 30px !important;
  margin-bottom: 30px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
}

.welcome-title {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.user-highlight {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
}

.welcome-subtitle {
  color: var(--muted) !important;
  font-size: 14.5px !important;
  margin-top: 5px;
}

/* Stat Cards */
.stat-card,
.progress-item {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.stat-card:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.stat-icon {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
}

.stat-value {
  color: #fff !important;
  font-weight: 800 !important;
}

.stat-label {
  color: var(--muted) !important;
}

/* Link Cards & Controls */
.link-card {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

.link-icon {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

/* ===== RPG / REWARDS OVERRIDES ===== */
.rpg-container {
  border: 1px solid var(--border) !important;
}

.rpg-header {
  border-bottom: 1px solid var(--border) !important;
  background: rgba(255, 255, 255, 0.01) !important;
}

.title-icon {
  background: var(--accent-gradient) !important;
  box-shadow: 0 8px 20px var(--accent-glow) !important;
  animation: none !important;
}

.stat-value {
  color: var(--accent) !important;
  text-shadow: none !important;
}

.inventory-slot {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border) !important;
}

.inventory-slot:hover {
  border-color: rgba(245, 166, 35, 0.3) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,0.4) !important;
}

/* Available Reward Slot */
.inventory-slot.available {
  background: rgba(34, 197, 94, 0.05) !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.1) !important;
}

.inventory-slot.available:hover {
  border-color: rgba(34, 197, 94, 0.6) !important;
  box-shadow: 0 8px 25px rgba(34, 197, 94, 0.2) !important;
}

/* Claimed Reward Slot */
.inventory-slot.claimed {
  border-color: var(--border) !important;
  opacity: 0.5 !important;
}

/* Locked Reward Slot */
.inventory-slot:not(.available):not(.claimed) {
  border-color: var(--border) !important;
  background: rgba(255, 255, 255, 0.01) !important;
}

/* ===== FORMS & INPUTS ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea,
.form-control {
  background-color: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3) !important;
  max-width: 100% !important;
}

input:hover,
select:hover,
textarea:hover,
.form-control:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 10px var(--accent-glow), inset 0 2px 4px rgba(0,0,0,0.3) !important;
  outline: none !important;
}

/* Select option Styling styling */
select option {
  background-color: var(--bg) !important;
  color: #fff !important;
}

/* ===== PREMIUM BUTTONS ===== */
button,
.button,
.btn-action,
.btn-buy,
.btn-ref {
  font-family: 'Inter', sans-serif !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
}

/* Primary buttons with orange gradient */
.btn-glow,
.btn-primary-alt,
.btn-action.buy,
.btn-buy,
.btn-primary,
button[type="submit"] {
  background: var(--accent-gradient) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px var(--accent-glow) !important;
}

.btn-glow:hover,
.btn-primary-alt:hover,
.btn-action.buy:hover,
.btn-buy:hover,
.btn-primary:hover,
button[type="submit"]:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 25px var(--accent-glow), 0 0 10px rgba(245, 166, 35, 0.2) !important;
}

/* Ghost / Secondary buttons */
.btn-ghost,
.btn-ref.btn-ghost,
.btn-secondary {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.btn-ghost:hover,
.btn-ref.btn-ghost:hover,
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Disabled State */
button:disabled,
.btn-ref:disabled {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  opacity: 0.4 !important;
}

/* ===== TABLES ===== */
table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin-top: 15px !important;
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 12px !important;
  overflow: hidden;
  border: 1px solid var(--border) !important;
}

table thead {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid var(--border) !important;
}

table th {
  color: #fff !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
  padding: 16px 20px !important;
  text-align: left !important;
}

table td {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--muted) !important;
  font-size: 13.5px !important;
  vertical-align: middle !important;
  background: transparent !important;
}

table tr:last-child td {
  border-bottom: none !important;
}

table tr:hover td {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.01) !important;
}

/* Specific Badge and Highlight labels inside tables */
table td a {
  color: var(--accent) !important;
  font-weight: 600;
}

table td a:hover {
  text-decoration: underline !important;
}

/* ===== MISCELLANEOUS & MOBILE TOGGLES ===== */
.sidebar-overlay {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(8px) !important;
}

/* Discord widget / Floating elements */
.discord-widget {
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Custom Scrollbar for Dashboard Viewports */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: var(--bg) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--accent-gradient) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.2) !important;
}

/* Firefox compatibility */
* {
  scrollbar-width: thin !important;
  scrollbar-color: var(--accent) var(--bg) !important;
}

/* ==========================================================================
   DONATE HISTORY, CASES & ITEMS OVERRIDES (UNIFICATION)
   ========================================================================== */

/* History / Donation Details */
.history-container {
  padding-bottom: 50px !important;
}

.donation-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.donation-card:hover {
  transform: translateY(-5px) !important;
  border-color: var(--border-glow) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7), 0 0 15px rgba(245, 166, 35, 0.05) !important;
}

.donation-info-item {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

.donation-qr {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

.donation-qr-copy-btn {
  background: var(--accent-gradient) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  margin-top: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
}

.donation-qr-copy-btn:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}

.donation-status.pending {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.25) !important;
  color: #f59e0b !important;
}

.donation-status.confirmed {
  background: rgba(34, 197, 94, 0.1) !important;
  border: 1px solid rgba(34, 197, 94, 0.25) !important;
  color: var(--success) !important;
}

.donation-verification {
  background: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
}

/* Treasure Boxes / Cases */
.cases-container,
.my-items-container {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  padding: 30px !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6) !important;
}

.case-card,
.item-card {
  background: rgba(255, 255, 255, 0.01) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.case-card:hover,
.item-card:hover {
  border-color: var(--border-glow) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5), 0 0 15px rgba(245, 166, 35, 0.03) !important;
  transform: translateY(-5px) !important;
}

.open-case-btn,
.go-to-boxes-btn,
.claim-btn {
  background: var(--accent-gradient) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px var(--accent-glow) !important;
  transition: all 0.3s ease !important;
}

.open-case-btn:hover,
.go-to-boxes-btn:hover,
.claim-btn:hover {
  filter: brightness(1.1) !important;
  box-shadow: 0 8px 25px var(--accent-glow) !important;
  transform: translateY(-2px) !important;
}

.account-select {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: white !important;
  transition: all 0.3s ease !important;
}

.account-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 10px var(--accent-glow) !important;
}

.stat-card.total,
.stat-card.claimed,
.stat-card.pending {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.filter-btn {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--muted) !important;
  transition: all 0.3s ease !important;
}

.filter-btn:hover {
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}

.filter-btn.active {
  background: var(--accent-gradient) !important;
  border-color: var(--accent) !important;
  color: white !important;
  box-shadow: 0 4px 15px var(--accent-glow) !important;
}