/* =====================================================
   ADMIN PREMIUM DARK THEME
   Complete styling for admin panel
   ===================================================== */

/* Base Variables */
:root {
  --admin-bg-primary: #0f0f14;
  --admin-bg-secondary: #1c1c26;
  --admin-bg-tertiary: #252532;
  --admin-bg-card: #1e1e2a;
  --admin-border: rgba(255, 255, 255, 0.08);
  --admin-border-light: rgba(255, 255, 255, 0.12);
  --admin-text: #ffffff;
  --admin-text-secondary: #b4b4bf;
  --admin-text-muted: #8b8b99;
  --admin-accent: #fbbf24;
  --admin-accent-hover: #f59e0b;
  --admin-success: #22c55e;
  --admin-danger: #ef4444;
  --admin-info: #3b82f6;
  --admin-warning: #f59e0b;
  --admin-back: #72bbef;
  --admin-lay: #f994ba;
}

/* =====================================================
   GLOBAL ADMIN STYLES
   ===================================================== */
.admin,
.admin-app,
.admin-layout,
[class*="admin"] {
  background: var(--admin-bg-primary) !important;
}

/* Fix all text visibility */
.admin *, .admin-app * {
  color: var(--admin-text);
}

.admin h1, .admin h2, .admin h3, .admin h4, .admin h5, .admin h6,
.admin-app h1, .admin-app h2, .admin-app h3, .admin-app h4, .admin-app h5, .admin-app h6 {
  color: var(--admin-text) !important;
}

.admin p, .admin span, .admin div, .admin label,
.admin-app p, .admin-app span, .admin-app div, .admin-app label {
  color: var(--admin-text);
}

/* Body and main container */
.admin .main,
.admin-app .main {
  background: var(--admin-bg-primary) !important;
  min-height: 100vh;
}

/* Page Container */
.admin-page,
.admin-content,
.admin-container,
.admin .container-fluid,
.admin .container {
  background: var(--admin-bg-primary) !important;
  color: var(--admin-text) !important;
}

/* =====================================================
   ADMIN HEADER
   ===================================================== */
.admin-header,
.admin-navbar,
.admin .header,
.admin-app .header {
  background: linear-gradient(135deg, #1c1c26 0%, #252532 100%) !important;
  border-bottom: 1px solid var(--admin-border) !important;
  padding: 12px 20px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.admin-header .navbar-brand,
.admin-header .logo {
  color: var(--admin-accent) !important;
  font-weight: 700;
  font-size: 18px;
}

.admin-header .nav-link,
.admin .nav-link {
  color: var(--admin-text-secondary) !important;
  padding: 8px 16px !important;
  border-radius: 6px;
  transition: all 150ms ease;
}

.admin-header .nav-link:hover,
.admin-header .nav-link.active,
.admin .nav-link:hover,
.admin .nav-link.active {
  color: var(--admin-text) !important;
  background: var(--admin-bg-tertiary) !important;
}

/* =====================================================
   ADMIN SIDEBAR
   ===================================================== */
.admin-sidebar,
.sidebar-admin,
.admin .sidebar,
.admin-app .sidebar {
  background: var(--admin-bg-secondary) !important;
  border-right: 1px solid var(--admin-border) !important;
}

.admin .sidebar a,
.admin-app .sidebar a,
.admin-sidebar a {
  color: var(--admin-text-secondary) !important;
}

.admin .sidebar a:hover,
.admin-app .sidebar a:hover,
.admin .sidebar a.active,
.admin-app .sidebar a.active {
  color: var(--admin-accent) !important;
  background: var(--admin-bg-tertiary) !important;
}

/* =====================================================
   CARDS
   ===================================================== */
.admin .card,
.admin-app .card,
.admin-card {
  background: var(--admin-bg-secondary) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  margin-bottom: 16px;
  overflow: hidden;
}

.admin .card-header,
.admin-app .card-header,
.admin-card .card-header {
  background: var(--admin-bg-tertiary) !important;
  border-bottom: 1px solid var(--admin-border) !important;
  padding: 14px 20px !important;
  color: var(--admin-text) !important;
}

.admin .card-header h5,
.admin .card-header h6,
.admin .card-title,
.admin-app .card-header h5,
.admin-app .card-header h6,
.admin-app .card-title {
  color: var(--admin-text) !important;
  font-weight: 600;
  margin: 0;
  font-size: 15px;
}

.admin .card-body,
.admin-app .card-body,
.admin-card .card-body {
  background: var(--admin-bg-secondary) !important;
  padding: 16px 20px !important;
  color: var(--admin-text) !important;
}

/* =====================================================
   TABLES - CRITICAL TEXT VISIBILITY FIX
   ===================================================== */
.admin table,
.admin-app table,
.admin-table,
.admin .table {
  background: var(--admin-bg-secondary) !important;
  color: var(--admin-text) !important;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 0;
}

.admin table thead,
.admin-app table thead,
.admin-table thead,
.admin .table thead {
  background: var(--admin-bg-tertiary) !important;
}

.admin table th,
.admin-app table th,
.admin-table th,
.admin .table th {
  background: var(--admin-bg-tertiary) !important;
  color: var(--admin-text-muted) !important;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--admin-border) !important;
}

.admin table td,
.admin-app table td,
.admin-table td,
.admin .table td {
  background: var(--admin-bg-secondary) !important;
  color: var(--admin-text) !important;
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid var(--admin-border) !important;
  font-size: 13px;
}

.admin table tbody tr:hover td,
.admin-app table tbody tr:hover td,
.admin-table tbody tr:hover td,
.admin .table tbody tr:hover td {
  background: var(--admin-bg-tertiary) !important;
}

/* Back/Lay table rows */
.admin table tr.back td,
.admin-app table tr.back td {
  background: var(--admin-back) !important;
  color: #000 !important;
}

.admin table tr.lay td,
.admin-app table tr.lay td {
  background: var(--admin-lay) !important;
  color: #000 !important;
}

/* =====================================================
   FORMS - TEXT VISIBILITY FIX
   ===================================================== */
.admin input,
.admin select,
.admin textarea,
.admin-app input,
.admin-app select,
.admin-app textarea,
.admin .form-control,
.admin .form-select {
  background: var(--admin-bg-tertiary) !important;
  border: 1px solid var(--admin-border-light) !important;
  color: var(--admin-text) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 13px;
  transition: all 150ms ease;
}

.admin input:focus,
.admin select:focus,
.admin textarea:focus,
.admin-app input:focus,
.admin-app select:focus,
.admin-app textarea:focus,
.admin .form-control:focus,
.admin .form-select:focus {
  border-color: var(--admin-accent) !important;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1) !important;
  outline: none !important;
  background: var(--admin-bg-tertiary) !important;
  color: var(--admin-text) !important;
}

.admin input::placeholder,
.admin-app input::placeholder,
.admin .form-control::placeholder {
  color: var(--admin-text-muted) !important;
}

.admin label,
.admin-app label,
.admin .form-label {
  color: var(--admin-text-secondary) !important;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 6px;
}

/* Select dropdown options */
.admin select option,
.admin-app select option {
  background: var(--admin-bg-tertiary) !important;
  color: var(--admin-text) !important;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.admin .btn-primary,
.admin-app .btn-primary {
  background: linear-gradient(135deg, var(--admin-accent) 0%, var(--admin-accent-hover) 100%) !important;
  border: none !important;
  color: #0f0f14 !important;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 150ms ease;
}

.admin .btn-primary:hover,
.admin-app .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3) !important;
}

.admin .btn-success,
.admin-app .btn-success {
  background: linear-gradient(135deg, var(--admin-success) 0%, #16a34a 100%) !important;
  border: none !important;
  color: white !important;
}

.admin .btn-danger,
.admin-app .btn-danger {
  background: linear-gradient(135deg, var(--admin-danger) 0%, #dc2626 100%) !important;
  border: none !important;
  color: white !important;
}

.admin .btn-info,
.admin-app .btn-info {
  background: linear-gradient(135deg, var(--admin-info) 0%, #2563eb 100%) !important;
  border: none !important;
  color: white !important;
}

.admin .btn-secondary,
.admin-app .btn-secondary {
  background: var(--admin-bg-tertiary) !important;
  border: 1px solid var(--admin-border-light) !important;
  color: var(--admin-text) !important;
}

.admin .btn-outline-primary,
.admin-app .btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--admin-accent) !important;
  color: var(--admin-accent) !important;
}

.admin .btn-outline-primary:hover,
.admin-app .btn-outline-primary:hover {
  background: var(--admin-accent) !important;
  color: #0f0f14 !important;
}

/* Small Buttons */
.admin .btn-sm,
.admin-app .btn-sm {
  padding: 6px 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}

/* =====================================================
   MODALS
   ===================================================== */
.admin .modal-content,
.admin-app .modal-content {
  background: var(--admin-bg-secondary) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 12px !important;
}

.admin .modal-header,
.admin-app .modal-header {
  background: var(--admin-bg-tertiary) !important;
  border-bottom: 1px solid var(--admin-border) !important;
  padding: 16px 20px !important;
}

.admin .modal-title,
.admin-app .modal-title {
  color: var(--admin-text) !important;
  font-weight: 600;
}

.admin .modal-body,
.admin-app .modal-body {
  background: var(--admin-bg-secondary) !important;
  padding: 20px !important;
  color: var(--admin-text) !important;
}

.admin .modal-footer,
.admin-app .modal-footer {
  background: var(--admin-bg-tertiary) !important;
  border-top: 1px solid var(--admin-border) !important;
  padding: 12px 20px !important;
}

.admin .btn-close,
.admin-app .btn-close {
  filter: invert(1) !important;
  opacity: 0.7;
}

/* =====================================================
   BADGES
   ===================================================== */
.admin .badge,
.admin-app .badge {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.admin .badge-success, .admin .bg-success,
.admin-app .badge-success, .admin-app .bg-success {
  background: rgba(34, 197, 94, 0.2) !important;
  color: var(--admin-success) !important;
}

.admin .badge-danger, .admin .bg-danger,
.admin-app .badge-danger, .admin-app .bg-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: var(--admin-danger) !important;
}

.admin .badge-warning, .admin .bg-warning,
.admin-app .badge-warning, .admin-app .bg-warning {
  background: rgba(245, 158, 11, 0.2) !important;
  color: var(--admin-warning) !important;
}

.admin .badge-info, .admin .bg-info,
.admin-app .badge-info, .admin-app .bg-info {
  background: rgba(59, 130, 246, 0.2) !important;
  color: var(--admin-info) !important;
}

.admin .badge-primary, .admin .bg-primary,
.admin-app .badge-primary, .admin-app .bg-primary {
  background: rgba(251, 191, 36, 0.2) !important;
  color: var(--admin-accent) !important;
}

/* =====================================================
   PAGINATION
   ===================================================== */
.admin .pagination,
.admin-app .pagination {
  gap: 4px;
}

.admin .page-item .page-link,
.admin-app .page-item .page-link {
  background: var(--admin-bg-tertiary) !important;
  border: 1px solid var(--admin-border) !important;
  color: var(--admin-text-secondary) !important;
  border-radius: 6px !important;
  padding: 8px 12px;
  margin: 0;
}

.admin .page-item.active .page-link,
.admin-app .page-item.active .page-link {
  background: var(--admin-accent) !important;
  border-color: var(--admin-accent) !important;
  color: #0f0f14 !important;
}

.admin .page-item .page-link:hover,
.admin-app .page-item .page-link:hover {
  background: var(--admin-bg-tertiary) !important;
  color: var(--admin-text) !important;
}

/* =====================================================
   TABS
   ===================================================== */
.admin .nav-tabs,
.admin-app .nav-tabs {
  border-bottom: 1px solid var(--admin-border) !important;
  gap: 4px;
}

.admin .nav-tabs .nav-link,
.admin-app .nav-tabs .nav-link {
  background: transparent !important;
  border: none !important;
  color: var(--admin-text-muted) !important;
  padding: 12px 20px !important;
  border-radius: 8px 8px 0 0 !important;
  font-weight: 500;
}

.admin .nav-tabs .nav-link:hover,
.admin-app .nav-tabs .nav-link:hover {
  color: var(--admin-text) !important;
  background: var(--admin-bg-tertiary) !important;
}

.admin .nav-tabs .nav-link.active,
.admin-app .nav-tabs .nav-link.active {
  background: var(--admin-bg-tertiary) !important;
  color: var(--admin-accent) !important;
  border-bottom: 2px solid var(--admin-accent) !important;
}

/* =====================================================
   ALERTS
   ===================================================== */
.admin .alert,
.admin-app .alert {
  border-radius: 8px;
  border: none;
  padding: 12px 16px;
}

.admin .alert-success,
.admin-app .alert-success {
  background: rgba(34, 197, 94, 0.15) !important;
  color: var(--admin-success) !important;
  border-left: 4px solid var(--admin-success);
}

.admin .alert-danger,
.admin-app .alert-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  color: var(--admin-danger) !important;
  border-left: 4px solid var(--admin-danger);
}

.admin .alert-warning,
.admin-app .alert-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--admin-warning) !important;
  border-left: 4px solid var(--admin-warning);
}

.admin .alert-info,
.admin-app .alert-info {
  background: rgba(59, 130, 246, 0.15) !important;
  color: var(--admin-info) !important;
  border-left: 4px solid var(--admin-info);
}

/* =====================================================
   STATS CARDS
   ===================================================== */
.stat-card {
  background: var(--admin-bg-secondary);
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-card .stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--admin-text);
}

.stat-card .stat-label {
  font-size: 12px;
  color: var(--admin-text-muted);
}

/* =====================================================
   DROPDOWN
   ===================================================== */
.admin .dropdown-menu,
.admin-app .dropdown-menu {
  background: var(--admin-bg-secondary) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
  padding: 8px !important;
}

.admin .dropdown-item,
.admin-app .dropdown-item {
  color: var(--admin-text-secondary) !important;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  font-size: 13px;
}

.admin .dropdown-item:hover,
.admin-app .dropdown-item:hover {
  background: var(--admin-bg-tertiary) !important;
  color: var(--admin-text) !important;
}

.admin .dropdown-divider,
.admin-app .dropdown-divider {
  border-color: var(--admin-border) !important;
}

/* =====================================================
   TEXT UTILITIES
   ===================================================== */
.admin .text-success, .admin-app .text-success { color: var(--admin-success) !important; }
.admin .text-danger, .admin-app .text-danger { color: var(--admin-danger) !important; }
.admin .text-warning, .admin-app .text-warning { color: var(--admin-warning) !important; }
.admin .text-info, .admin-app .text-info { color: var(--admin-info) !important; }
.admin .text-muted, .admin-app .text-muted { color: var(--admin-text-muted) !important; }
.admin .text-primary, .admin-app .text-primary { color: var(--admin-accent) !important; }
.admin .text-dark, .admin-app .text-dark { color: var(--admin-text) !important; }
.admin .text-white, .admin-app .text-white { color: var(--admin-text) !important; }
.admin .text-black, .admin-app .text-black { color: var(--admin-text) !important; }

/* Fix any dark text on dark background */
.admin [style*="color: black"],
.admin [style*="color: #000"],
.admin [style*="color:#000"],
.admin-app [style*="color: black"],
.admin-app [style*="color: #000"],
.admin-app [style*="color:#000"] {
  color: var(--admin-text) !important;
}

/* =====================================================
   SCROLLBAR
   ===================================================== */
.admin ::-webkit-scrollbar,
.admin-app ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.admin ::-webkit-scrollbar-track,
.admin-app ::-webkit-scrollbar-track {
  background: var(--admin-bg-primary);
}

.admin ::-webkit-scrollbar-thumb,
.admin-app ::-webkit-scrollbar-thumb {
  background: var(--admin-bg-tertiary);
  border-radius: 3px;
}

.admin ::-webkit-scrollbar-thumb:hover,
.admin-app ::-webkit-scrollbar-thumb:hover {
  background: var(--admin-text-muted);
}

/* =====================================================
   SPECIFIC ADMIN PAGES
   ===================================================== */

/* Dashboard Stats */
.admin .stats-row .stat-box,
.admin-app .stats-row .stat-box {
  background: linear-gradient(135deg, var(--admin-bg-secondary) 0%, var(--admin-bg-tertiary) 100%) !important;
  border: 1px solid var(--admin-border) !important;
  border-radius: 12px;
}

/* List Clients */
.admin .client-item,
.admin-app .client-item {
  background: var(--admin-bg-secondary) !important;
  border: 1px solid var(--admin-border) !important;
}

/* Active Matches */
.admin .match-card,
.admin-app .match-card {
  background: var(--admin-bg-secondary) !important;
  border: 1px solid var(--admin-border) !important;
}

/* Bet Lock Section */
.admin .bet-lock-section,
.admin-app .bet-lock-section {
  background: var(--admin-bg-tertiary) !important;
  border-radius: 8px;
  padding: 12px;
}

/* =====================================================
   MUI OVERRIDES FOR ADMIN
   ===================================================== */
.admin .MuiAccordion-root,
.admin-app .MuiAccordion-root {
  background: var(--admin-bg-secondary) !important;
  color: var(--admin-text) !important;
}

.admin .MuiAccordionSummary-root,
.admin-app .MuiAccordionSummary-root {
  background: var(--admin-bg-tertiary) !important;
  color: var(--admin-text) !important;
}

.admin .MuiAccordionDetails-root,
.admin-app .MuiAccordionDetails-root {
  background: var(--admin-bg-secondary) !important;
  color: var(--admin-text) !important;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
  .admin-sidebar,
  .admin-app .sidebar {
    position: fixed;
    left: -260px;
    z-index: 1000;
    transition: left 300ms ease;
  }

  .admin-sidebar.open,
  .admin-app .sidebar.open {
    left: 0;
  }

  .admin table th,
  .admin table td,
  .admin-app table th,
  .admin-app table td {
    padding: 10px 12px !important;
    font-size: 12px;
  }
}