/**
 * TSG SYSTEM v2.0 - Dark Professional Theme
 * 
 * Professional dark color scheme with muted tones.
 * Designed for long-term use without eye strain.
 */

/* Dark Theme Overrides */
:root {
  /* Enhanced Dark Theme Colors */
  --primary: #1e3a5f;
  --primary-light: #2c5282;
  --primary-dark: #1a2332;
  --primary-hover: #2d5aa0;
  
  /* Professional Blue Accents */
  --accent-primary: #4299e1;
  --accent-primary-light: #63b3ed;
  --accent-primary-dark: #3182ce;
  
  /* Status Colors - Muted for Professional Look */
  --accent-success: #48bb78;
  --accent-success-light: #68d391;
  --accent-success-dark: #38a169;
  
  --accent-warning: #ed8936;
  --accent-warning-light: #f6ad55;
  --accent-warning-dark: #dd6b20;
  
  --accent-danger: #e53e3e;
  --accent-danger-light: #fc8181;
  --accent-danger-dark: #c53030;
  
  --accent-info: #4299e1;
  --accent-info-light: #63b3ed;
  --accent-info-dark: #3182ce;
  
  /* Background Hierarchy */
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --bg-quaternary: #4a4a4a;
  --bg-overlay: rgba(0, 0, 0, 0.75);
  --bg-modal: rgba(0, 0, 0, 0.85);
  
  /* Text Hierarchy */
  --text-primary: #e2e8f0;
  --text-secondary: #a0aec0;
  --text-muted: #718096;
  --text-inverse: #1a1a1a;
  --text-white: #ffffff;
  
  /* Border Colors */
  --border-light: #4a5568;
  --border-medium: #2d3748;
  --border-dark: #1a202c;
  --border-accent: #4299e1;
  
  /* Professional Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.7);
  
  /* Interactive States */
  --hover-bg: rgba(255, 255, 255, 0.05);
  --active-bg: rgba(255, 255, 255, 0.1);
  --focus-ring: rgba(66, 153, 225, 0.2);
}

/* Enhanced Navigation Styling */
.top-nav {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  backdrop-filter: blur(10px);
}

.main-nav {
  background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
}

/* Professional Button Enhancements */
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-hover) 100%);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-success {
  background: linear-gradient(135deg, var(--accent-success) 0%, var(--accent-success-light) 100%);
}

.btn-danger {
  background: linear-gradient(135deg, var(--accent-danger) 0%, var(--accent-danger-light) 100%);
}

.btn-warning {
  background: linear-gradient(135deg, var(--accent-warning) 0%, var(--accent-warning-light) 100%);
}

/* Enhanced Card Styling */
.card, .stat-card, .chart-card {
  background: linear-gradient(145deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 1px solid var(--border-medium);
  box-shadow: var(--shadow-md);
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
}

/* Table Enhancements */
.table-container {
  background: linear-gradient(145deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  box-shadow: var(--shadow-md);
}

.data-table thead {
  background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-quaternary) 100%);
}

.data-table tbody tr:hover {
  background: var(--hover-bg);
}

/* Modal Enhancements */
.modal {
  background: var(--bg-modal);
  backdrop-filter: blur(5px);
}

.modal-content {
  background: linear-gradient(145deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  box-shadow: var(--shadow-xl);
}

/* Form Enhancements */
input:focus, select:focus, textarea:focus {
  border-color: var(--accent-info);
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: var(--bg-primary);
}

/* Status Badge Enhancements */
.status-badge.online {
  background: linear-gradient(135deg, rgba(72, 187, 120, 0.2) 0%, rgba(72, 187, 120, 0.3) 100%);
  border: 1px solid rgba(72, 187, 120, 0.3);
}

.status-badge.offline {
  background: linear-gradient(135deg, rgba(229, 62, 62, 0.2) 0%, rgba(229, 62, 62, 0.3) 100%);
  border: 1px solid rgba(229, 62, 62, 0.3);
}

.status-badge.pending {
  background: linear-gradient(135deg, rgba(237, 137, 54, 0.2) 0%, rgba(237, 137, 54, 0.3) 100%);
  border: 1px solid rgba(237, 137, 54, 0.3);
}

.status-badge.active {
  background: linear-gradient(135deg, rgba(66, 153, 225, 0.2) 0%, rgba(66, 153, 225, 0.3) 100%);
  border: 1px solid rgba(66, 153, 225, 0.3);
}

/* Permission Grid Enhancements */
.permission-item {
  background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-quaternary) 100%);
  border: 1px solid var(--border-light);
}

.permission-item:hover {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border-color: var(--accent-info);
  box-shadow: var(--shadow-sm);
}

/* Loading Spinner Enhancement */
.loading-spinner {
  border: 4px solid var(--border-light);
  border-top: 4px solid var(--accent-info);
  box-shadow: var(--shadow-md);
}

/* Alert Enhancements */
.alert-success {
  background: linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(72, 187, 120, 0.15) 100%);
  border-left: 4px solid var(--accent-success);
}

.alert-error {
  background: linear-gradient(135deg, rgba(229, 62, 62, 0.1) 0%, rgba(229, 62, 62, 0.15) 100%);
  border-left: 4px solid var(--accent-danger);
}

.alert-warning {
  background: linear-gradient(135deg, rgba(237, 137, 54, 0.1) 0%, rgba(237, 137, 54, 0.15) 100%);
  border-left: 4px solid var(--accent-warning);
}

.alert-info {
  background: linear-gradient(135deg, rgba(66, 153, 225, 0.1) 0%, rgba(66, 153, 225, 0.15) 100%);
  border-left: 4px solid var(--accent-info);
}

/* Scrollbar Styling for Webkit Browsers */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-medium);
}

/* Selection Styling */
::selection {
  background: var(--accent-info);
  color: var(--text-white);
}

::-moz-selection {
  background: var(--accent-info);
  color: var(--text-white);
}

/* Professional Focus Styles */
*:focus {
  outline: 2px solid var(--accent-info);
  outline-offset: 2px;
}

.nav-btn:focus {
  outline: 2px solid var(--accent-info);
  outline-offset: -2px;
}

/* Animation Enhancements */
.content-section.active {
  animation: slideInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Professional Hover Effects */
.nav-btn {
  position: relative;
  overflow: hidden;
}

.nav-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.nav-btn:hover::before {
  left: 100%;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --border-light: #666666;
    --border-medium: #444444;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}