/**
 * PowerView Enterprise - Light Theme
 * Version: 2.0.0
 * 
 * Light theme styles for PowerView Enterprise dashboard
 * Optimized for daytime use with high contrast and readability
 */

/* ============================================================================
   LIGHT THEME BASE
   ============================================================================ */

html.light-theme {
  --bg-deep: #f5f7fa;
  --bg-main: #ffffff;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;

  --text-main: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;

  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-light: rgba(0, 0, 0, 0.12);

  --primary: #6366f1;
  --primary-hover: #4f46e5;

  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --glass-effect: blur(10px);

  --card-radius: 16px;

  --status-online: #10b981;
  --status-offline: #ef4444;
  --status-warn: #f59e0b;
}

html.light-theme body {
  color: var(--text-main);
  background: var(--bg-deep);
}

/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

html.light-theme .h1,
html.light-theme .h2,
html.light-theme .h3,
html.light-theme .h4,
html.light-theme .h5,
html.light-theme .h6,
html.light-theme h1,
html.light-theme h2,
html.light-theme h3,
html.light-theme h4,
html.light-theme h5,
html.light-theme h6 {
  color: #111827;
}

html.light-theme .text-white {
  color: #111827 !important;
}

html.light-theme .text-muted {
  color: #6b7280 !important;
}

html.light-theme .label-secondary {
  color: #6b7280;
}

html.light-theme .value-highlight {
  color: #111827 !important;
}

/* Fix for all metric values */
html.light-theme .ent-card .text-white {
  color: #111827 !important;
}

html.light-theme .ent-card h1,
html.light-theme .ent-card h2,
html.light-theme .ent-card h3,
html.light-theme .ent-card h4,
html.light-theme .ent-card h5,
html.light-theme .ent-card h6 {
  color: #111827 !important;
}

html.light-theme .ent-card .fw-bold {
  color: #111827 !important;
}

/* Fix for dashboard values */
html.light-theme [class*="_Total_"],
html.light-theme [class*="v_"],
html.light-theme [class*="c_"],
html.light-theme [class*="atp_"],
html.light-theme [class*="pf_"],
html.light-theme [class*="hz_"],
html.light-theme [class*="ene_"],
html.light-theme [class*="t_"] {
  color: #111827 !important;
}

/* ============================================================================
   CARDS & CONTAINERS
   ============================================================================ */

html.light-theme .card,
html.light-theme .ent-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

html.light-theme .ent-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ============================================================================
   TOPBAR & NAVIGATION
   ============================================================================ */

html.light-theme .topbar {
  background: var(--bg-main);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html.light-theme .sidebar-wrapper {
  background: var(--bg-main);
  border-right: 1px solid var(--border-subtle);
}

html.light-theme .sidebar .nav-link {
  color: var(--text-secondary);
}

html.light-theme .sidebar .nav-link:hover {
  background: rgba(99, 102, 241, 0.08);
  color: var(--primary);
}

html.light-theme .sidebar .nav-link.active {
  background: rgba(99, 102, 241, 0.12);
  color: var(--primary);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

html.light-theme .btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

html.light-theme .btn-primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

html.light-theme .btn-outline-secondary {
  border-color: var(--border-light);
  color: var(--text-main);
}

html.light-theme .btn-outline-secondary:hover {
  background: var(--bg-surface);
  border-color: var(--border-light);
}

/* ============================================================================
   FORMS
   ============================================================================ */

html.light-theme .form-control {
  background: var(--bg-main);
  border-color: var(--border-light);
  color: var(--text-main);
}

html.light-theme .form-control:focus {
  background: var(--bg-main);
  border-color: var(--primary);
  color: var(--text-main);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

html.light-theme .form-select {
  background: var(--bg-main);
  border-color: var(--border-light);
  color: var(--text-main);
}

/* ============================================================================
   TABLES
   ============================================================================ */

html.light-theme .table {
  color: var(--text-main);
  background: var(--bg-main);
}

html.light-theme .table thead th {
  background: var(--bg-surface);
  color: var(--text-main);
  border-bottom: 2px solid var(--border-light);
}

html.light-theme .table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
}

html.light-theme .table tbody tr:hover {
  background: rgba(99, 102, 241, 0.04);
}

/* ============================================================================
   BADGES & STATUS
   ============================================================================ */

html.light-theme .badge {
  font-weight: 600;
}

html.light-theme .status-indicator {
  font-weight: 600;
}

html.light-theme .status-online {
  color: var(--status-online);
}

html.light-theme .status-offline {
  color: var(--status-offline);
}

/* ============================================================================
   ICON BOXES
   ============================================================================ */

html.light-theme .icon-box-primary {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
}

html.light-theme .icon-box-primary::before {
  opacity: 0.2;
}

html.light-theme .icon-box-primary::after {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, transparent 70%);
}

/* ============================================================================
   GRADIENTS & HIGHLIGHTS
   ============================================================================ */

html.light-theme .text-gradient-indigo {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.light-theme .value-highlight {
  color: var(--text-main);
}

/* ============================================================================
   BORDERS & DIVIDERS
   ============================================================================ */

html.light-theme .border-bottom {
  border-bottom-color: var(--border-subtle) !important;
}

html.light-theme .border-light {
  border-color: var(--border-subtle) !important;
}

/* ============================================================================
   MODALS & OVERLAYS
   ============================================================================ */

html.light-theme .modal-content {
  background: var(--bg-main);
  border: 1px solid var(--border-subtle);
}

html.light-theme .modal-header {
  border-bottom: 1px solid var(--border-subtle);
}

html.light-theme .modal-footer {
  border-top: 1px solid var(--border-subtle);
}

/* ============================================================================
   CHARTS
   ============================================================================ */

html.light-theme #chart {
  background: var(--bg-main);
}

/* ============================================================================
   SCROLLBAR (Webkit)
   ============================================================================ */

html.light-theme ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.light-theme ::-webkit-scrollbar-track {
  background: var(--bg-surface);
}

html.light-theme ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

html.light-theme ::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   LOADING OVERLAY
   ============================================================================ */

html.light-theme #loading-overlay {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-main);
}

/* ============================================================================
   USER BOX
   ============================================================================ */

html.light-theme .user-box {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid var(--border-subtle);
}

/* ============================================================================
   DASHBOARD GRID
   ============================================================================ */

html.light-theme .dashboard-grid .ent-card {
  background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

html.light-theme .dashboard-grid .ent-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* ============================================================================
   SPECIFIC COMPONENTS
   ============================================================================ */

html.light-theme .page-footer {
  background: var(--bg-main);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

html.light-theme .selectSite {
  background: rgba(99, 102, 241, 0.08) !important;
  border-color: rgba(99, 102, 241, 0.2) !important;
  color: var(--primary) !important;
}

html.light-theme .selectSite:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

html.light-theme .animate-fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}