/* ==========================================================================
   HEX OFFICIAL - CONTROL CENTER V5.1 MASTER DESIGN SYSTEM
   Quality Target: 4K Ultra-Premium Administration Dashboard
   Style: Futuristic • Elegant • Sharp • Professional
   Resolution Targets: 1366x768, 1920x1080, 2560x1440, 3840x2160 (4K Ready)
   ========================================================================== */

:root {
  /* Core Palette Tokens */
  --hex-admin-bg-primary: #030810;
  --hex-admin-bg-secondary: #07111C;
  --hex-admin-bg-sidebar: #050D17;
  --hex-admin-bg-card: #0A1623;
  --hex-admin-bg-elevated: #0D1C2B;
  --hex-admin-bg-elevated-hover: #142535;

  /* Accent & Telemetry Colors */
  --hex-admin-red: #FF1744;
  --hex-admin-red-deep: #C8102E;
  --hex-admin-cyan: #00D9FF;
  --hex-admin-green: #00D9A3;
  --hex-admin-amber: #FFB020;
  --hex-admin-purple: #8B5CF6;
  --hex-admin-blue: #3B82F6;

  /* Typography Colors */
  --hex-admin-text-primary: #F8FAFC;
  --hex-admin-text-secondary: #A1B4C8;
  --hex-admin-text-muted: #72879C;

  /* Borders & Glows */
  --hex-admin-border: #1B3346;
  --hex-admin-border-subtle: rgba(27, 51, 70, 0.65);
  --hex-admin-border-active: rgba(255, 23, 68, 0.6);
  --hex-admin-border-cyan: rgba(0, 217, 255, 0.45);
  --hex-admin-glow-red: 0 0 20px rgba(255, 23, 68, 0.35);
  --hex-admin-glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3);

  /* Radius & Shadows */
  --hex-admin-radius-sm: 8px;
  --hex-admin-radius-md: 12px;
  --hex-admin-radius-lg: 16px;
  --hex-admin-radius-xl: 20px;
  --hex-admin-radius-2xl: 24px;
  --hex-admin-shadow-card: 0 10px 30px -5px rgba(2, 6, 12, 0.7);
  --hex-admin-shadow-elevated: 0 16px 40px -8px rgba(0, 0, 0, 0.85);

  /* Transitions */
  --hex-admin-transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   1. ROOT ADMIN CONTAINER & AMBIENT SCI-FI BACKGROUND
   ========================================================================== */
#admin-control-center {
  background-color: var(--hex-admin-bg-primary) !important;
  color: var(--hex-admin-text-primary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#admin-control-center::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 550px;
  background: radial-gradient(circle at 50% -120px, rgba(0, 217, 255, 0.08) 0%, rgba(255, 23, 68, 0.04) 40%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

/* Custom Cyber Grid Pattern for Admin */
#admin-control-center .bg-hex-grid,
#admin-control-center.bg-hex-grid {
  background-image: 
    linear-gradient(to right, rgba(27, 51, 70, 0.15) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(27, 51, 70, 0.15) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
}

/* ==========================================================================
   2. LEGACY AMBER/BROWN UTILITY MAPPINGS (SCOPED DIRECTLY TO ADMIN)
   Transforms existing markup effortlessly to the HEX V5.1 cyber-navy palette
   ========================================================================== */
#admin-control-center .bg-\[\#0d0907\],
#admin-control-center.bg-\[\#0d0907\] {
  background-color: var(--hex-admin-bg-primary) !important;
}

#admin-control-center .bg-\[\#140d0a\],
#admin-control-center .bg-\[\#140d0a\]\/90,
#admin-control-center .bg-\[\#140d0a\]\/95 {
  background-color: var(--hex-admin-bg-card) !important;
}

#admin-control-center .bg-\[\#1c130e\],
#admin-control-center .bg-\[\#251711\],
#admin-control-center .bg-\[\#281a13\],
#admin-control-center .bg-\[\#342017\] {
  background-color: var(--hex-admin-bg-secondary) !important;
}

#admin-control-center .border-\[\#2e1d14\],
#admin-control-center .border-\[\#3b261b\] {
  border-color: var(--hex-admin-border) !important;
}

#admin-control-center .divide-\[\#2e1d14\] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--hex-admin-border) !important;
}

/* ==========================================================================
   3. TOP HEADER BAR (70–76px)
   ========================================================================== */
#admin-control-center header,
#admin-control-center .admin-header {
  height: 72px !important;
  background-color: rgba(7, 17, 28, 0.92) !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  border-bottom: 1px solid var(--hex-admin-border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  padding: 0 1.5rem !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5) !important;
}

#admin-control-center .admin-logo-badge {
  background: linear-gradient(135deg, #FF1744 0%, #C8102E 100%) !important;
  box-shadow: 0 0 16px rgba(255, 23, 68, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#admin-control-center .admin-header-btn {
  height: 40px !important;
  padding: 0 14px !important;
  border-radius: var(--hex-admin-radius-md) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: var(--hex-admin-transition) !important;
  cursor: pointer !important;
}

#admin-control-center .admin-btn-secondary {
  background-color: var(--hex-admin-bg-elevated) !important;
  border: 1px solid var(--hex-admin-border) !important;
  color: var(--hex-admin-text-secondary) !important;
}

#admin-control-center .admin-btn-secondary:hover {
  background-color: var(--hex-admin-bg-elevated-hover) !important;
  border-color: var(--hex-admin-cyan) !important;
  color: var(--hex-admin-text-primary) !important;
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.2) !important;
}

#admin-control-center .admin-btn-primary {
  background: linear-gradient(135deg, #FF1744 0%, #C8102E 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(255, 23, 68, 0.35) !important;
}

#admin-control-center .admin-btn-primary:hover {
  background: linear-gradient(135deg, #FF3358 0%, #DC143C 100%) !important;
  box-shadow: 0 6px 22px rgba(255, 23, 68, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* ==========================================================================
   4. SIDEBAR NAVIGATION (270px)
   ========================================================================== */
#admin-control-center #ds-admin-sidebar,
#admin-control-center aside {
  width: 270px !important;
  background-color: var(--hex-admin-bg-sidebar) !important;
  border-right: 1px solid var(--hex-admin-border) !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45) !important;
}

/* Sidebar Sections Title */
#admin-control-center #ds-admin-sidebar .sidebar-section-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: var(--hex-admin-text-muted) !important;
  text-transform: uppercase !important;
  padding: 0 12px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#admin-control-center #ds-admin-sidebar .sidebar-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hex-admin-border) 0%, transparent 100%);
}

/* Sidebar Nav Buttons */
#admin-control-center #ds-admin-sidebar button {
  position: relative;
  transition: var(--hex-admin-transition) !important;
  border-radius: var(--hex-admin-radius-md) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Active Nav Item */
#admin-control-center #ds-admin-sidebar button.bg-red-600,
#admin-control-center #ds-admin-sidebar button[data-active="true"] {
  background: linear-gradient(90deg, #FF1744 0%, #C8102E 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 20px rgba(255, 23, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#admin-control-center #ds-admin-sidebar button.bg-red-600 svg,
#admin-control-center #ds-admin-sidebar button[data-active="true"] svg {
  color: #FFFFFF !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6)) !important;
}

/* Inactive Nav Items */
#admin-control-center #ds-admin-sidebar button:not(.bg-red-600):not([data-active="true"]) {
  color: var(--hex-admin-text-secondary) !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
}

#admin-control-center #ds-admin-sidebar button:not(.bg-red-600):not([data-active="true"]):hover {
  background-color: var(--hex-admin-bg-elevated) !important;
  color: var(--hex-admin-text-primary) !important;
  border-color: var(--hex-admin-border) !important;
  transform: translateX(3px) !important;
}

#admin-control-center #ds-admin-sidebar button:not(.bg-red-600):not([data-active="true"]):hover svg {
  color: var(--hex-admin-cyan) !important;
}

/* ==========================================================================
   5. COMMAND OVERVIEW HERO PANEL
   ========================================================================== */
#admin-control-center .command-overview-hero {
  background: linear-gradient(135deg, var(--hex-admin-bg-elevated) 0%, var(--hex-admin-bg-card) 100%) !important;
  border: 1px solid var(--hex-admin-border) !important;
  border-radius: var(--hex-admin-radius-2xl) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--hex-admin-shadow-elevated) !important;
}

#admin-control-center .command-overview-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  height: 2px;
  background: linear-gradient(90deg, #FF1744 0%, #00D9FF 100%);
}

#admin-control-center .status-badge-online {
  background-color: rgba(0, 217, 163, 0.12) !important;
  border: 1px solid rgba(0, 217, 163, 0.3) !important;
  color: var(--hex-admin-green) !important;
  box-shadow: 0 0 12px rgba(0, 217, 163, 0.2) !important;
}

/* ==========================================================================
   6. 4K STATISTICS CARDS
   ========================================================================== */
#admin-control-center .admin-stat-card {
  background: linear-gradient(180deg, var(--hex-admin-bg-card) 0%, var(--hex-admin-bg-secondary) 100%) !important;
  border: 1px solid var(--hex-admin-border) !important;
  border-radius: var(--hex-admin-radius-lg) !important;
  padding: 1.25rem 1.4rem !important;
  position: relative !important;
  overflow: hidden !important;
  transition: var(--hex-admin-transition) !important;
  box-shadow: var(--hex-admin-shadow-card) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 140px !important;
}

#admin-control-center .admin-stat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  transition: var(--hex-admin-transition);
}

#admin-control-center .admin-stat-card:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0, 217, 255, 0.45) !important;
  box-shadow: 0 16px 36px -4px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 217, 255, 0.15) !important;
}

#admin-control-center .admin-stat-card .stat-icon-wrapper {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--hex-admin-radius-md) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--hex-admin-bg-elevated) !important;
  border: 1px solid var(--hex-admin-border) !important;
  transition: var(--hex-admin-transition) !important;
}

#admin-control-center .admin-stat-card:hover .stat-icon-wrapper {
  border-color: var(--hex-admin-cyan) !important;
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.3) !important;
}

#admin-control-center .admin-stat-card .stat-value {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: clamp(1.75rem, 2.2vw, 2.6rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  color: var(--hex-admin-text-primary) !important;
}

/* ==========================================================================
   7. ULTRA-PREMIUM DATA TABLES
   ========================================================================== */
#admin-control-center .admin-table-container,
#admin-control-center .overflow-x-auto {
  background-color: var(--hex-admin-bg-card) !important;
  border: 1px solid var(--hex-admin-border) !important;
  border-radius: var(--hex-admin-radius-xl) !important;
  box-shadow: var(--hex-admin-shadow-card) !important;
  overflow: hidden !important;
}

#admin-control-center table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

#admin-control-center thead {
  background-color: var(--hex-admin-bg-elevated) !important;
  border-bottom: 1px solid var(--hex-admin-border) !important;
}

#admin-control-center thead th {
  color: var(--hex-admin-text-secondary) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid var(--hex-admin-border) !important;
}

#admin-control-center tbody tr {
  transition: var(--hex-admin-transition) !important;
  background-color: transparent !important;
}

#admin-control-center tbody tr:hover {
  background-color: rgba(13, 28, 43, 0.7) !important;
}

#admin-control-center tbody td {
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(27, 51, 70, 0.5) !important;
  color: var(--hex-admin-text-primary) !important;
  font-size: 13px !important;
}

#admin-control-center tbody tr:last-child td {
  border-bottom: none !important;
}

/* ==========================================================================
   8. MODERN ROUNDED STATUS BADGES
   ========================================================================== */
.admin-badge,
#admin-control-center .badge-active,
#admin-control-center .badge-success {
  background-color: rgba(0, 217, 163, 0.12) !important;
  color: var(--hex-admin-green) !important;
  border: 1px solid rgba(0, 217, 163, 0.35) !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.admin-badge.badge-pending,
#admin-control-center .badge-warning {
  background-color: rgba(255, 176, 32, 0.12) !important;
  color: var(--hex-admin-amber) !important;
  border: 1px solid rgba(255, 176, 32, 0.35) !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.admin-badge.badge-failed,
.admin-badge.badge-banned,
#admin-control-center .badge-danger {
  background-color: rgba(255, 23, 68, 0.12) !important;
  color: var(--hex-admin-red) !important;
  border: 1px solid rgba(255, 23, 68, 0.35) !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.admin-badge.badge-completed,
#admin-control-center .badge-info {
  background-color: rgba(0, 217, 255, 0.12) !important;
  color: var(--hex-admin-cyan) !important;
  border: 1px solid rgba(0, 217, 255, 0.35) !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   9. FORMS, INPUTS, SELECTS, AND TEXTAREAS
   ========================================================================== */
#admin-control-center input[type="text"],
#admin-control-center input[type="number"],
#admin-control-center input[type="email"],
#admin-control-center input[type="password"],
#admin-control-center input[type="date"],
#admin-control-center select,
#admin-control-center textarea {
  background-color: var(--hex-admin-bg-secondary) !important;
  border: 1px solid var(--hex-admin-border) !important;
  border-radius: var(--hex-admin-radius-md) !important;
  color: var(--hex-admin-text-primary) !important;
  font-size: 13px !important;
  transition: var(--hex-admin-transition) !important;
  outline: none !important;
}

#admin-control-center input[type="text"]:focus,
#admin-control-center input[type="number"]:focus,
#admin-control-center input[type="email"]:focus,
#admin-control-center input[type="password"]:focus,
#admin-control-center input[type="date"]:focus,
#admin-control-center select:focus,
#admin-control-center textarea:focus {
  border-color: var(--hex-admin-cyan) !important;
  box-shadow: 0 0 14px rgba(0, 217, 255, 0.25) !important;
  background-color: var(--hex-admin-bg-elevated) !important;
}

#admin-control-center select option {
  background-color: var(--hex-admin-bg-card) !important;
  color: var(--hex-admin-text-primary) !important;
  padding: 10px !important;
}

#admin-control-center label {
  color: var(--hex-admin-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ==========================================================================
   10. MODALS & DIALOG SURFACES
   ========================================================================== */
#admin-control-center .modal-backdrop,
#admin-control-center .fixed.inset-0.bg-black\/80,
#admin-control-center .fixed.inset-0.bg-black\/85 {
  background-color: rgba(3, 8, 16, 0.88) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

#admin-control-center .modal-box,
#admin-control-center .fixed.inset-0 .rounded-3xl.bg-\[\#140d0a\] {
  background-color: var(--hex-admin-bg-card) !important;
  border: 1px solid var(--hex-admin-border) !important;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 217, 255, 0.12) !important;
}

/* Modal header separator */
#admin-control-center .border-b.border-\[\#2e1d14\],
#admin-control-center .border-t.border-\[\#2e1d14\] {
  border-color: var(--hex-admin-border) !important;
}

/* ==========================================================================
   11. CUSTOM SCI-FI SCROLLBARS
   ========================================================================== */
#admin-control-center *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

#admin-control-center *::-webkit-scrollbar-track {
  background: var(--hex-admin-bg-primary);
}

#admin-control-center *::-webkit-scrollbar-thumb {
  background: var(--hex-admin-border);
  border-radius: 9999px;
  border: 1px solid var(--hex-admin-bg-primary);
}

#admin-control-center *::-webkit-scrollbar-thumb:hover {
  background: var(--hex-admin-cyan);
}

/* ==========================================================================
   12. 4K RESOLUTION OPTIMIZATION & FLUID LAYOUT BREAKPOINTS
   ========================================================================== */
/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  #admin-control-center .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Full HD Desktop (1920px) */
@media (min-width: 1920px) {
  #admin-control-center main {
    max-width: 1800px !important;
    padding: 2rem 2.5rem !important;
  }
  #admin-control-center .admin-stat-card {
    min-height: 155px !important;
    padding: 1.5rem 1.6rem !important;
  }
  #admin-control-center .stat-value {
    font-size: 2.5rem !important;
  }
}

/* 2K QHD (2560px) */
@media (min-width: 2560px) {
  #admin-control-center main {
    max-width: 2400px !important;
    padding: 2.5rem 3.5rem !important;
    gap: 2rem !important;
  }
  #admin-control-center aside {
    width: 300px !important;
  }
  #admin-control-center header {
    height: 78px !important;
    padding: 0 2.5rem !important;
  }
  #admin-control-center .admin-stat-card {
    min-height: 175px !important;
    padding: 1.75rem 2rem !important;
  }
  #admin-control-center .stat-value {
    font-size: 3rem !important;
  }
  #admin-control-center tbody td,
  #admin-control-center thead th {
    padding: 18px 24px !important;
    font-size: 14px !important;
  }
}

/* 4K Ultra HD (3840px) */
@media (min-width: 3840px) {
  #admin-control-center main {
    max-width: 3400px !important;
    padding: 3rem 5rem !important;
  }
  #admin-control-center aside {
    width: 360px !important;
  }
  #admin-control-center header {
    height: 86px !important;
    padding: 0 4rem !important;
  }
  #admin-control-center .admin-stat-card {
    min-height: 200px !important;
    padding: 2.2rem 2.5rem !important;
    border-radius: var(--hex-admin-radius-xl) !important;
  }
  #admin-control-center .stat-value {
    font-size: 3.6rem !important;
  }
  #admin-control-center tbody td,
  #admin-control-center thead th {
    padding: 22px 30px !important;
    font-size: 16px !important;
  }
}

/* Micro-interaction Keyframes */
@keyframes hexPulseGlow {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.96);
  }
}

.animate-pulse-glow {
  animation: hexPulseGlow 2.5s infinite ease-in-out;
}