/* ========================================
   GOTO VPN ADMIN PANEL - MODERN GRADIENT THEME
   Primary Gradient: #5054FE → #9260FF
   Light Theme Only - Premium Design
   ======================================== */
:root {
  /* Primary Brand Colors - New Gradient Theme */
  --tz-primary: #5054FE;
  --tz-primary-rgb: 80, 84, 254;
  --tz-secondary: #9260FF;
  --tz-secondary-rgb: 146, 96, 255;
  
  /* Extended Brand Color Palette */
  --tz-blue: #5054FE;
  --tz-indigo: #4044EE;
  --tz-purple: #9260FF;
  --tz-pink: #ec4899;
  --tz-red: #EF4444;
  --tz-orange: #F59E0B;
  --tz-yellow: #EAB308;
  --tz-green: #10B981;
  --tz-teal: #14b8a6;
  --tz-cyan: #06B6D4;
  
  /* Custom Gradient Brand Colors */
  --tz-gradient-primary: linear-gradient(135deg, #5054FE 0%, #9260FF 100%);
  --tz-gradient-primary-hover: linear-gradient(135deg, #4044EE 0%, #8250EF 100%);
  --tz-gradient-light: linear-gradient(135deg, rgba(80, 84, 254, 0.1) 0%, rgba(146, 96, 255, 0.1) 100%);
  --tz-smoke-white: #F8F9FC;
  --tz-soft-grey: #94A3B8;
  --tz-accent-color: #9260FF;
  
  /* Gray Scale - Modern & Clean */
  --tz-gray: #94A3B8;
  --tz-gray-dark: #1E293B;
  --tz-gray-100: #F8F9FC;
  --tz-gray-200: #F1F5F9;
  --tz-gray-300: #E2E8F0;
  --tz-gray-400: #CBD5E1;
  --tz-gray-500: #94A3B8;
  --tz-gray-600: #64748B;
  --tz-gray-700: #475569;
  --tz-gray-800: #334155;
  --tz-gray-900: #1E293B;
  
  /* Status Colors - Modern Palette */
  --tz-success: #10B981;
  --tz-info: #5054FE;
  --tz-warning: #F59E0B;
  --tz-danger: #EF4444;
  
  /* Background Colors - Light & Clean */
  --tz-body-bg: #F8F9FC;
  --tz-body-color: #1E293B;
  --tz-secondary-bg: #FFFFFF;
  --tz-tertiary-bg: #F1F5F9;
  
  /* Text Colors - High Contrast */
  --tz-emphasis-color: #1E293B;
  --tz-secondary-color: #64748B;
  --tz-tertiary-color: #94A3B8;
  
  /* Link Colors - Gradient Theme */
  --tz-link-color: #5054FE;
  --tz-link-hover-color: #4044EE;
  --tz-link-color-rgb: 80, 84, 254;
  --tz-link-hover-color-rgb: 64, 68, 238;
  
  /* Border Colors - Subtle */
  --tz-border-color: #E2E8F0;
  --tz-border-color-translucent: rgba(226, 232, 240, 0.5);
  
  /* Menu Colors - Clean White with Gradient Accents */
  --tz-menu-bg: #FFFFFF;
  --tz-menu-item-color: #64748B;
  --tz-menu-item-hover-color: #5054FE;
  --tz-menu-item-active-color: #FFFFFF;
  --tz-menu-item-active-bg: linear-gradient(135deg, #5054FE 0%, #9260FF 100%);
  --tz-menu-condensed-link-bg: rgba(80, 84, 254, 0.05);
  
  /* Topbar Colors - Modern & Clean */
  --tz-topbar-bg: #FFFFFF;
  --tz-topbar-item-color: #64748B;
  --tz-topbar-item-hover-color: #5054FE;
  --tz-topbar-search-bg: #F8F9FC;
  
  /* Subtle Background Colors - Gradient Theme */
  --tz-primary-bg-subtle: rgba(80, 84, 254, 0.08);
  --tz-secondary-bg-subtle: rgba(146, 96, 255, 0.08);
  --tz-success-bg-subtle: rgba(16, 185, 129, 0.08);
  --tz-info-bg-subtle: rgba(80, 84, 254, 0.08);
  --tz-warning-bg-subtle: rgba(245, 158, 11, 0.1);
  --tz-danger-bg-subtle: rgba(239, 68, 68, 0.08);
  --tz-pink-bg-subtle: rgba(236, 72, 153, 0.08);
  --tz-purple-bg-subtle: rgba(146, 96, 255, 0.08);
  --tz-light-bg-subtle: #F8F9FC;
  --tz-dark-bg-subtle: rgba(30, 41, 59, 0.03);
  
  /* Text Emphasis Colors - Gradient Theme */
  --tz-primary-text-emphasis: #4044EE;
  --tz-secondary-text-emphasis: #8250EF;
  --tz-success-text-emphasis: #059669;
  --tz-info-text-emphasis: #4044EE;
  --tz-warning-text-emphasis: #D97706;
  --tz-danger-text-emphasis: #DC2626;
  --tz-pink-text-emphasis: #db2777;
  --tz-purple-text-emphasis: #8250EF;
  --tz-light-text-emphasis: #64748B;
  --tz-dark-text-emphasis: #1E293B;
  
  /* Border Subtle Colors - Gradient Theme */
  --tz-primary-border-subtle: rgba(80, 84, 254, 0.2);
  --tz-secondary-border-subtle: rgba(146, 96, 255, 0.2);
  --tz-success-border-subtle: rgba(16, 185, 129, 0.2);
  --tz-info-border-subtle: rgba(80, 84, 254, 0.2);
  --tz-warning-border-subtle: rgba(245, 158, 11, 0.3);
  --tz-danger-border-subtle: rgba(239, 68, 68, 0.2);
  --tz-pink-border-subtle: rgba(236, 72, 153, 0.2);
  --tz-purple-border-subtle: rgba(146, 96, 255, 0.2);
  --tz-light-border-subtle: #E2E8F0;
  --tz-dark-border-subtle: rgba(30, 41, 59, 0.15);
  
  /* Enhanced Shadow Colors - Gradient Theme */
  --tz-box-shadow: 0 4px 12px rgba(80, 84, 254, 0.12);
  --tz-box-shadow-sm: 0 1px 3px rgba(80, 84, 254, 0.08);
  --tz-box-shadow-lg: 0 10px 30px rgba(80, 84, 254, 0.15);
  
  /* Form Colors - Modern */
  --tz-form-valid-color: #10B981;
  --tz-form-valid-border-color: #10B981;
  --tz-form-invalid-color: #EF4444;
  --tz-form-invalid-border-color: #EF4444;
  
  /* Custom Gradients - New Theme */
  --tz-gradient: linear-gradient(135deg, rgba(80, 84, 254, 0.1) 0%, rgba(146, 96, 255, 0.05) 100%);
  --tz-gradient-secondary: linear-gradient(135deg, #F8F9FC 0%, #FFFFFF 100%);
  --tz-gradient-success: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --tz-gradient-warning: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  --tz-gradient-danger: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
  --tz-gradient-info: linear-gradient(135deg, #5054FE 0%, #4044EE 100%);
}

/* Light Menu Override */
html[data-menu-color=light] {
  --tz-menu-bg: #FFFFFF;
  --tz-menu-item-color: #64748B;
  --tz-menu-item-hover-color: #5054FE;
  --tz-menu-item-active-color: #FFFFFF;
  --tz-menu-item-active-bg: linear-gradient(135deg, #5054FE 0%, #9260FF 100%);
  --tz-menu-condensed-link-bg: #F8F9FC;
}

/* Light Topbar Override */
html[data-topbar-color=light] {
  --tz-topbar-bg: #FFFFFF;
  --tz-topbar-item-color: #64748B;
  --tz-topbar-item-hover-color: #5054FE;
  --tz-topbar-search-bg: #F8F9FC;
}

/* Light Theme Only - No Dark Mode Support */
/* This theme is designed exclusively for light mode */

/* ========================================
   COMPONENT ENHANCEMENTS
   ======================================== */

/* Enhanced Card Styles */
.card {
  border: 1px solid var(--tz-border-color);
  box-shadow: var(--tz-box-shadow-sm);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 16px;
  background: #FFFFFF;
}

.card:hover {
  box-shadow: var(--tz-box-shadow);
  border-color: var(--tz-primary);
  transform: translateY(-2px);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--tz-border-color);
  color: var(--tz-emphasis-color);
  font-weight: 600;
  padding: 20px 24px;
}

/* Button Enhancements */
.btn-primary {
  background: var(--tz-gradient-primary) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(80, 84, 254, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  color: #FFFFFF !important;
}

.btn-primary:hover {
  background: var(--tz-gradient-primary-hover) !important;
  box-shadow: 0 6px 20px rgba(80, 84, 254, 0.4);
  transform: translateY(-2px);
}

.btn-success {
  background: var(--tz-gradient-success) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-warning {
  background: var(--tz-gradient-warning) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-danger {
  background: var(--tz-gradient-danger) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-info {
  background: var(--tz-gradient-info) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(80, 84, 254, 0.3);
}

/* Alert Styles */
.alert {
  border-radius: 12px;
  border: none;
  padding: 16px 20px;
  font-weight: 500;
}

.alert-primary {
  background: linear-gradient(135deg, rgba(80, 84, 254, 0.1) 0%, rgba(146, 96, 255, 0.1) 100%);
  color: var(--tz-primary-text-emphasis);
}

.alert-warning {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
  color: var(--tz-warning-text-emphasis);
}

.alert-success {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
  color: var(--tz-success-text-emphasis);
}

.alert-danger {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
  color: var(--tz-danger-text-emphasis);
}

.alert-info {
  background: linear-gradient(135deg, rgba(80, 84, 254, 0.1) 0%, rgba(64, 68, 238, 0.1) 100%);
  color: var(--tz-info-text-emphasis);
}

/* Navigation Enhancements */
.navbar-nav .nav-link {
  color: var(--tz-menu-item-color);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
}

.navbar-nav .nav-link:hover {
  color: var(--tz-menu-item-hover-color);
  background: linear-gradient(135deg, rgba(80, 84, 254, 0.08) 0%, rgba(146, 96, 255, 0.08) 100%);
}

/* Sidebar Active States */
.nav-link.active {
  background: var(--tz-gradient-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(80, 84, 254, 0.3);
  font-weight: 600;
}

/* Form Enhancements */
.form-control,
.form-select {
  border: 1px solid var(--tz-border-color);
  border-radius: 12px;
  padding: 12px 16px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--tz-primary);
  box-shadow: 0 0 0 3px rgba(80, 84, 254, 0.1);
  outline: none;
}

.form-label {
  font-weight: 600;
  color: var(--tz-emphasis-color);
  margin-bottom: 8px;
  font-size: 14px;
}

/* Table Enhancements */
.table {
  --bs-table-border-color: var(--tz-border-color);
  border-collapse: separate;
  border-spacing: 0;
}

.table thead th {
  background: linear-gradient(135deg, rgba(80, 84, 254, 0.05) 0%, rgba(146, 96, 255, 0.05) 100%);
  color: var(--tz-emphasis-color);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 16px;
  border: none;
}

.table tbody tr {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-bottom: 1px solid var(--tz-border-color);
}

.table tbody tr:hover {
  background: linear-gradient(135deg, rgba(80, 84, 254, 0.02) 0%, rgba(146, 96, 255, 0.02) 100%);
}

.table tbody td {
  padding: 16px;
  vertical-align: middle;
  color: var(--tz-secondary-color);
  border: none;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background: rgba(80, 84, 254, 0.02);
}

/* Badge Styles */
.badge {
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3px;
}

.badge.bg-primary {
  background: var(--tz-gradient-primary) !important;
  color: #FFFFFF !important;
}

.badge.bg-success {
  background: var(--tz-gradient-success) !important;
  color: #FFFFFF !important;
}

.badge.bg-warning {
  background: var(--tz-gradient-warning) !important;
  color: #FFFFFF !important;
}

.badge.bg-danger {
  background: var(--tz-gradient-danger) !important;
  color: #FFFFFF !important;
}

.badge.bg-info {
  background: var(--tz-gradient-info) !important;
  color: #FFFFFF !important;
}

/* Progress Bar Styles */
.progress {
  background: var(--tz-light-bg-subtle);
  border-radius: 50px;
  overflow: hidden;
  height: 8px;
}

.progress-bar {
  background: var(--tz-gradient-primary) !important;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-bar.bg-success {
  background: var(--tz-gradient-success) !important;
}

.progress-bar.bg-warning {
  background: var(--tz-gradient-warning) !important;
}

.progress-bar.bg-danger {
  background: var(--tz-gradient-danger) !important;
}

/* Dropdown Enhancements */
.dropdown-menu {
  border: 1px solid var(--tz-border-color);
  border-radius: 12px;
  box-shadow: var(--tz-box-shadow-lg);
  padding: 8px;
  background: #FFFFFF;
}

.dropdown-item {
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--tz-secondary-color);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 14px;
}

.dropdown-item:hover {
  background: linear-gradient(135deg, rgba(80, 84, 254, 0.08) 0%, rgba(146, 96, 255, 0.08) 100%);
  color: var(--tz-primary);
}

.dropdown-item.active {
  background: var(--tz-gradient-primary);
  color: #FFFFFF;
}

/* Modal Enhancements */
.modal-content {
  border: none;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(80, 84, 254, 0.2);
  overflow: hidden;
}

.modal-header {
  background: linear-gradient(135deg, rgba(80, 84, 254, 0.05) 0%, rgba(146, 96, 255, 0.05) 100%);
  border-bottom: 1px solid var(--tz-border-color);
  border-radius: 16px 16px 0 0;
  padding: 20px 24px;
}

.modal-title {
  font-weight: 700;
  color: var(--tz-emphasis-color);
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  border-top: 1px solid var(--tz-border-color);
  padding: 20px 24px;
}

/* ========================================
   CUSTOM UTILITY CLASSES
   ======================================== */

.bg-gradient-primary {
  background: var(--tz-gradient-primary) !important;
  color: #FFFFFF !important;
}

.bg-gradient-success {
  background: var(--tz-gradient-success) !important;
  color: #FFFFFF !important;
}

.bg-gradient-warning {
  background: var(--tz-gradient-warning) !important;
  color: #FFFFFF !important;
}

.bg-gradient-danger {
  background: var(--tz-gradient-danger) !important;
  color: #FFFFFF !important;
}

.text-gradient {
  background: var(--tz-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.text-primary {
  color: var(--tz-primary) !important;
}

.text-secondary {
  color: var(--tz-secondary) !important;
}

.border-primary {
  border-color: var(--tz-primary) !important;
}

.shadow-gradient {
  box-shadow: 0 8px 24px rgba(80, 84, 254, 0.25) !important;
}

.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--tz-box-shadow-lg);
}

/* ========================================
   SIDEBAR & LOGO ENHANCEMENTS
   ======================================== */

.leftside-menu,
.yalla-leftside-menu {
  background: #FFFFFF;
  border-right: 1px solid var(--tz-border-color);
  box-shadow: var(--tz-box-shadow-sm);
}

.yalla-leftside-menu .logo {
  padding: 20px 24px;
  border-bottom: 1px solid var(--tz-border-color);
  background: #FFFFFF;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.yalla-leftside-menu .logo img {
  max-height: 40px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.yalla-leftside-menu .logo:hover img {
  transform: scale(1.05);
}

/* Enhanced Sidebar Styling */
.yalla-side-nav-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--tz-soft-grey) !important;
  padding: 16px 16px 8px 16px !important;
  margin-top: 8px;
}

.side-nav,
.yalla-side-nav {
  padding: 16px 12px;
}

.side-nav-item {
  margin-bottom: 4px;
}

.yalla-sidebar-link,
.side-nav-link {
  display: flex;
  align-items: center;
  padding: 12px 16px !important;
  border-radius: 12px !important;
  color: var(--tz-secondary-color) !important;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.yalla-sidebar-link:hover,
.side-nav-link:hover {
  background: linear-gradient(135deg, rgba(80, 84, 254, 0.08) 0%, rgba(146, 96, 255, 0.08) 100%) !important;
  color: var(--tz-primary) !important;
  transform: translateX(4px);
}

.yalla-sidebar-link.active,
.side-nav-link.active,
.yalla-sidebar-link[aria-current="page"],
.side-nav-item.menuitem-active > .side-nav-link {
  background: var(--tz-gradient-primary) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(80, 84, 254, 0.3);
  font-weight: 600;
}

.yalla-sidebar-link iconify-icon,
.side-nav-link iconify-icon {
  margin-right: 12px;
  font-size: 20px;
  transition: all 0.15s ease;
}

.yalla-sidebar-link.active iconify-icon,
.side-nav-link.active iconify-icon,
.yalla-sidebar-link:hover iconify-icon,
.side-nav-link:hover iconify-icon {
  transform: scale(1.1);
}

/* ========================================
   PAGINATION
   ======================================== */

.pagination .page-link {
  border: 1px solid var(--tz-border-color);
  color: var(--tz-secondary-color);
  padding: 8px 16px;
  margin: 0 4px;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination .page-link:hover {
  background: linear-gradient(135deg, rgba(80, 84, 254, 0.08) 0%, rgba(146, 96, 255, 0.08) 100%);
  color: var(--tz-primary);
  border-color: var(--tz-primary);
}

.pagination .page-item.active .page-link {
  background: var(--tz-gradient-primary) !important;
  border-color: var(--tz-primary) !important;
  color: #FFFFFF !important;
  box-shadow: var(--tz-box-shadow-sm);
}

/* ========================================
   BREADCRUMBS
   ======================================== */

.breadcrumb {
  background: transparent;
  padding: 12px 0;
}

.breadcrumb-item {
  color: var(--tz-secondary-color);
  font-size: 14px;
}

.breadcrumb-item.active {
  color: var(--tz-primary);
  font-weight: 600;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--tz-soft-grey);
}

/* ========================================
   END OF GOTO VPN GRADIENT THEME
   All components styled with #5054FE → #9260FF
   ======================================== */