/**
 * TGA Reporting - Theme Styles
 * 
 * Custom styles for dark/light theme support.
 * Works with theme-config.js CSS variables.
 */

/* ============================================
   CSS Variables (Fallback if JS not loaded)
   ============================================ */
:root {
  /* Configurable accent - change these to rebrand */
  --accent: 249 115 22;           /* #f97316 (orange-500) */
  --accent-hover: 234 88 12;      /* #ea580c (orange-600) */
  --accent-light: 255 237 213;    /* #ffedd5 (orange-100) */
  
  /* Dark theme backgrounds */
  --bg-base: 10 10 10;            /* #0a0a0a */
  --bg-surface: 20 20 20;         /* #141414 */
  --bg-elevated: 26 26 26;        /* #1a1a1a */
  --bg-sidebar: 15 15 15;         /* #0f0f0f */
  
  /* Dark theme borders */
  --border-subtle: 38 38 38;      /* #262626 */
  --border-strong: 64 64 64;      /* #404040 */
  
  /* Dark theme text */
  --text-primary: 255 255 255;
  --text-secondary: 163 163 163;
  --text-muted: 115 115 115;
  
  /* Light theme */
  --light-bg-base: 249 250 251;
  --light-bg-surface: 255 255 255;
  --light-border: 229 231 235;
  --light-text-primary: 17 24 39;
  --light-text-secondary: 107 114 128;
  
  /* Semantic colors */
  --success: 34 197 94;
  --danger: 239 68 68;
  --warning: 234 179 8;
  --info: 59 130 246;
}

/* ============================================
   Alpine.js Cloak
   ============================================ */
[x-cloak] {
  display: none !important;
}

/* ============================================
   Scrollbar Styling
   ============================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.dark ::-webkit-scrollbar-thumb {
  background: #404040;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #525252;
}

/* ============================================
   Sidebar Styles
   ============================================ */
.sidebar {
  transition: width 0.3s ease, transform 0.3s ease;
}

/* Sidebar submenu styles */
.sidebar-submenu {
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.sidebar-submenu.collapsed {
  max-height: 0;
}

.sidebar-submenu.expanded {
  max-height: 500px;
}

/* Menu item hover effect */
.menu-item {
  position: relative;
  transition: all 0.2s ease;
}

.menu-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: rgb(var(--accent));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.menu-item-active::before {
  opacity: 1;
}

.menu-item-active {
  background: rgb(var(--accent) / 0.1);
  color: rgb(var(--accent));
}

/* Submenu expand icon rotation */
.submenu-arrow {
  transition: transform 0.2s ease;
}

.submenu-arrow.expanded {
  transform: rotate(180deg);
}

/* ============================================
   Focus States
   ============================================ */
.focus-ring:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--accent) / 0.5);
}

/* ============================================
   Button Styles
   ============================================ */
.btn-accent {
  background: rgb(var(--accent));
  color: white;
  transition: all 0.2s ease;
}

.btn-accent:hover {
  background: rgb(var(--accent-hover));
}

.btn-accent:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgb(var(--accent) / 0.3);
}

/* ============================================
   Card Styles
   ============================================ */
.card-dark {
  background: rgb(var(--bg-surface));
  border: 1px solid rgb(var(--border-subtle));
}

.card-dark:hover {
  border-color: rgb(var(--border-strong));
}

/* ============================================
   Table Styles (Dark Mode)
   ============================================ */
.dark .table-dark {
  background: rgb(var(--bg-surface));
}

.dark .table-dark th {
  background: rgb(var(--bg-elevated));
  color: rgb(var(--text-secondary));
  border-color: rgb(var(--border-subtle));
}

.dark .table-dark td {
  border-color: rgb(var(--border-subtle));
  color: rgb(var(--text-primary));
}

.dark .table-dark tr:hover {
  background: rgb(var(--bg-elevated) / 0.5);
}

/* ============================================
   Form Input Styles
   ============================================ */
.input-dark {
  background: rgb(var(--bg-surface));
  border: 1px solid rgb(var(--border-subtle));
  color: rgb(var(--text-primary));
}

.input-dark:focus {
  border-color: rgb(var(--accent));
  box-shadow: 0 0 0 2px rgb(var(--accent) / 0.2);
}

.input-dark::placeholder {
  color: rgb(var(--text-muted));
}

/* ============================================
   Badge Styles
   ============================================ */
.badge-accent {
  background: rgb(var(--accent) / 0.15);
  color: rgb(var(--accent));
}

.badge-success {
  background: rgb(var(--success) / 0.15);
  color: rgb(var(--success));
}

.badge-danger {
  background: rgb(var(--danger) / 0.15);
  color: rgb(var(--danger));
}

.badge-warning {
  background: rgb(var(--warning) / 0.15);
  color: rgb(var(--warning));
}

/* ============================================
   Animations
   ============================================ */
@keyframes pulse-accent {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse-accent {
  animation: pulse-accent 2s ease-in-out infinite;
}

/* ============================================
   Utility Classes
   ============================================ */
.text-accent {
  color: rgb(var(--accent));
}

.bg-accent {
  background-color: rgb(var(--accent));
}

.border-accent {
  border-color: rgb(var(--accent));
}

/* Gradient utilities */
.gradient-accent {
  background: linear-gradient(135deg, rgb(var(--accent)), rgb(var(--accent-hover)));
}

/* No scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}