/* ==========================================================================
   BIG DATA Modern Dashboard Design Overlay (PHP 8.2 & Modern UI compatible)
   Aesthetic Enhancements while preserving 100% of exact layout & data
   ========================================================================== */

:root {
  --font-family-primary: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bg-main: #F1F5F9;
  
  /* Modern Gradient Tokens */
  --grad-primary: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  --grad-warning: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  --grad-success: linear-gradient(135deg, #10B981 0%, #047857 100%);
  --grad-info:    linear-gradient(135deg, #06B6D4 0%, #0E7490 100%);
  --grad-danger:  linear-gradient(135deg, #EF4444 0%, #B91C1C 100%);
  --grad-teal:    linear-gradient(135deg, #0D9488 0%, #115E59 100%);
  --grad-purple:  linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
  --grad-dark:    linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 20px -2px rgba(0,0,0,0.06), 0 2px 6px -1px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.04);
  --shadow-hover: 0 20px 30px -10px rgba(0,0,0,0.15), 0 10px 15px -5px rgba(0,0,0,0.08);
}

/* Global Font & Body Canvas */
body, .wrapper {
  font-family: var(--font-family-primary) !important;
  background-color: var(--bg-main) !important;
  color: #1E293B;
  -webkit-font-smoothing: antialiased;
}

.content-wrapper {
  background-color: var(--bg-main) !important;
  padding-bottom: 20px;
}

/* --------------------------------------------------------------------------
   1. Modern Header / Navbar (.main-header)
   -------------------------------------------------------------------------- */
.main-header.navbar {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #1E3A8A 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: var(--shadow-md) !important;
}

.main-header .nav-link,
.main-header .navbar-brand {
  color: #FFFFFF !important;
  font-weight: 500;
}

.main-header .form-control-sidebar {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 20px !important;
  color: #FFFFFF !important;
  padding: 6px 16px !important;
  transition: all 0.3s ease !important;
}

.main-header .form-control-sidebar::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

.main-header .form-control-sidebar:focus {
  background: rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2) !important;
}

/* --------------------------------------------------------------------------
   2. Modern Dark Sidebar (.main-sidebar)
   -------------------------------------------------------------------------- */
.main-sidebar {
  background: var(--grad-dark) !important;
  box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important;
}

.sidebar {
  padding-top: 10px;
}

.nav-sidebar .nav-item .nav-link {
  border-radius: 10px !important;
  margin: 2px 10px !important;
  padding: 8px 14px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: #94A3B8 !important;
}

.nav-sidebar .nav-item .nav-link:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  transform: translateX(4px);
}

.nav-sidebar .nav-item .nav-link.active {
  background: var(--grad-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.39) !important;
}

.brand-link {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* --------------------------------------------------------------------------
   3. Modern Stat Small Boxes (.small-box)
   -------------------------------------------------------------------------- */
.small-box {
  border-radius: 16px !important;
  box-shadow: var(--shadow-md) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  position: relative !important;
}

.small-box:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* Gradient overrides for Small Box colors */
.small-box.bg-primary,
.bg-primary:not(.navbar) {
  background: var(--grad-primary) !important;
  color: #FFFFFF !important;
}

.small-box.bg-warning,
.bg-warning:not(.navbar) {
  background: var(--grad-warning) !important;
  color: #FFFFFF !important;
}

.small-box.bg-success,
.bg-success:not(.navbar) {
  background: var(--grad-success) !important;
  color: #FFFFFF !important;
}

.small-box.bg-info,
.bg-info:not(.navbar) {
  background: var(--grad-info) !important;
  color: #FFFFFF !important;
}

.small-box.bg-danger,
.bg-danger:not(.navbar) {
  background: var(--grad-danger) !important;
  color: #FFFFFF !important;
}

.small-box.bg-secondary,
.small-box.bg-teal {
  background: var(--grad-teal) !important;
  color: #FFFFFF !important;
}

/* Inner Text & Numbers */
.small-box .inner {
  padding: 18px 20px !important;
}

.small-box .inner h3 {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 6px !important;
  font-family: 'Prompt', sans-serif !important;
}

.small-box .inner p {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  opacity: 0.95 !important;
}

/* Floating Watermark Icons */
.small-box .icon {
  color: rgba(255, 255, 255, 0.22) !important;
  transition: all 0.3s ease !important;
  right: 15px !important;
  top: 15px !important;
}

.small-box:hover .icon {
  transform: scale(1.15) rotate(-5deg) !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

/* Small Box Footer Strip */
.small-box-footer {
  background: rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(4px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  transition: background 0.2s ease !important;
  border-radius: 0 0 16px 16px !important;
}

.small-box-footer:hover {
  background: rgba(0, 0, 0, 0.22) !important;
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   4. Cards, Containers & Callouts (.card, .callout, .info-box)
   -------------------------------------------------------------------------- */
.card {
  border-radius: 16px !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: var(--shadow-md) !important;
  background: #FFFFFF !important;
  margin-bottom: 20px !important;
  transition: box-shadow 0.3s ease !important;
}

.card:hover {
  box-shadow: var(--shadow-lg) !important;
}

.card-header {
  border-bottom: 1px solid #F1F5F9 !important;
  padding: 14px 20px !important;
  background-color: transparent !important;
}

.card-title {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #0F172A !important;
}

.card-body {
  padding: 20px !important;
}

/* Modern Callouts */
.callout {
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  border-left-width: 5px !important;
  background: #FFFFFF !important;
  padding: 16px 20px !important;
  margin-bottom: 16px !important;
}

.callout.callout-info { border-left-color: #06B6D4 !important; }
.callout.callout-success { border-left-color: #10B981 !important; }
.callout.callout-warning { border-left-color: #F59E0B !important; }
.callout.callout-danger { border-left-color: #EF4444 !important; }

/* --------------------------------------------------------------------------
   5. Tables & Badges (.table, .badge)
   -------------------------------------------------------------------------- */
.table {
  color: #334155 !important;
}

.table thead th {
  border-bottom: 2px solid #E2E8F0 !important;
  font-weight: 600 !important;
  color: #1E293B !important;
  text-transform: none !important;
  font-size: 0.9rem !important;
}

.table-hover tbody tr:hover {
  background-color: #F8FAFC !important;
}

/* Modern Pill Badges */
.badge, .tag {
  border-radius: 20px !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
}

/* --------------------------------------------------------------------------
   6. Knob & Circular Chart Tweaks
   -------------------------------------------------------------------------- */
.knob, input[data-width] {
  font-family: 'Prompt', sans-serif !important;
  font-weight: 600 !important;
}

/* Back to Top Button */
#back-to-top {
  border-radius: 50% !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--grad-primary) !important;
  border: none !important;
}

/* Disable All Icon Spin Animations Completely */
.fa-spin, .fa-pulse, [class*="fa-spin"] {
  animation: none !important;
  -webkit-animation: none !important;
}