/**
* Project :      MilletsCupPWA
* File name :    Style.css
* Author :       AD
* @since :       23.02.2025
* @version :    1.0.0
* @fileoverview Global styles for MilletsCup PWA application
* 
* Core styling responsibilities:
* - Base CSS reset and normalization
* - Layout structure (grid, containers)
* - Common components styling (forms, buttons, panels)
* - Mobile-first responsive design
* - Utility classes for navigation and status indicators
* 
* Structure overview:
* - Reset and base styles
* - Layout components (header, navigation, content areas)
* - Form elements and controls
* - Status indicators (online/offline, errors, success)
* - Responsive breakpoints (mobile, tablet, desktop)
* - Utility classes and animations
* 
* Note: Works in conjunction with Tailwind CSS for component-specific styling
*/

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    background: #ffffff;
    background-image: 
        radial-gradient(circle, rgba(180, 180, 180, 0.15) 1px, transparent 1px),
        radial-gradient(circle, rgba(160, 160, 160, 0.10) 1px, transparent 1px),
        radial-gradient(circle, rgba(140, 140, 140, 0.08) 1px, transparent 1px);
    background-size: 50px 50px, 70px 70px, 90px 90px;
    background-position: 0 0, 25px 25px, 50px 50px;
    color: #333;
    /* Removed animation for energy efficiency */
}

/* Dark mode body styles */
.dark body {
    background: #0f172a;
    background-image: 
        radial-gradient(circle, rgba(100, 100, 100, 0.08) 1px, transparent 1px),
        radial-gradient(circle, rgba(80, 80, 80, 0.05) 1px, transparent 1px),
        radial-gradient(circle, rgba(60, 60, 60, 0.03) 1px, transparent 1px);
    background-size: 50px 50px, 70px 70px, 90px 90px;
    background-position: 0 0, 25px 25px, 50px 50px;
    color: #f1f5f9;
}

/* Page structure */
.page {
    width: 100%;
    min-height: 100vh;
    padding: 20px;
}

/* Login styles */
.login-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 2rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

/* Login panel background pattern */
.login-panel {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    background-image: 
        radial-gradient(circle, rgba(200, 200, 200, 0.12) 1px, transparent 1px),
        radial-gradient(circle, rgba(180, 180, 180, 0.08) 1px, transparent 1px),
        radial-gradient(circle, rgba(160, 160, 160, 0.06) 1px, transparent 1px);
    background-size: 40px 40px, 60px 60px, 80px 80px;
    background-position: 0 0, 20px 20px, 40px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    /* Removed animation for energy efficiency */
}

/* Dark mode login panel */
.dark .login-panel {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    background-image: 
        radial-gradient(circle, rgba(100, 100, 100, 0.06) 1px, transparent 1px),
        radial-gradient(circle, rgba(80, 80, 80, 0.04) 1px, transparent 1px),
        radial-gradient(circle, rgba(60, 60, 60, 0.03) 1px, transparent 1px);
    background-size: 40px 40px, 60px 60px, 80px 80px;
    background-position: 0 0, 20px 20px, 40px 40px;
}

/* Login background pattern */
.login-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle, rgba(200, 200, 200, 0.08) 1px, transparent 1px),
        radial-gradient(circle, rgba(180, 180, 180, 0.06) 1px, transparent 1px);
    background-size: 30px 30px, 50px 50px;
    background-position: 0 0, 15px 15px;
    pointer-events: none;
    z-index: 0;
}

/* Dark mode login container pattern */
.dark .login-container::before {
    background-image: 
        radial-gradient(circle, rgba(100, 100, 100, 0.04) 1px, transparent 1px),
        radial-gradient(circle, rgba(80, 80, 80, 0.03) 1px, transparent 1px);
}

/* Ensure form content stays above the pattern */
.login-container > * {
    position: relative;
    z-index: 1;
}

/* Enhanced login form styling */
.login-panel .bg-white {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.login-panel .bg-white:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.15),
        0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Dark mode login form styling */
.dark .login-panel .bg-white {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid rgba(71, 85, 105, 0.3);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.2);
}

.dark .login-panel .bg-white:hover {
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Animations removed for energy efficiency in cold weather usage */

/* Forms */
.form-group {
    margin-bottom: 1rem;
}

input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn.primary {
    background-color: #1a2b3c;
    color: white;
}

/* Status messages */
.status-message {
    padding: 0.75rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    display: none;
}

.status-message.error {
    background-color: #dc3545;
    color: white;
    display: block;
}

/* Loading spinner */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Utility classes */
.hidden {
    display: none !important;
}

/* Z-index stacking context management */
#mainApp {
    position: relative;
    z-index: 1;
  }
  
  header {
    position: relative;
    z-index: 10;
  }
  
  #navigation {
    position: relative;
    z-index: 15;
  }
  
  #content {
    position: relative;
    z-index: 5;
  }

/* Header Responsive Enhancements */
@media (max-width: 640px) {
  /* Mobile-specific header styling */
  #userInfo {
    padding: 0.5rem;
  }
  
  /* Ensure proper spacing on mobile */
  #userInfo > div:first-child {
    gap: 0.25rem;
  }
  
  /* Make buttons more touch-friendly on mobile */
  #nav-button {
    min-width: 44px;
    min-height: 44px;
  }
  
  /* Ensure text doesn't overflow on mobile */
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Optimize pill-shaped elements for mobile */
  .rounded-full {
    white-space: nowrap;
  }
  
  /* Ensure proper alignment on mobile */
  #userInfo > div:last-child {
    gap: 0.25rem;
  }
  
  /* WiFi icon specific styling for mobile */
  #connectionIcon {
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
  }
  
  #connectionIcon svg {
    min-width: 16px;
    min-height: 16px;
  }
  
  /* Better integrated pill styling for mobile */
  .rounded-md {
    font-size: 0.7rem;
    line-height: 1rem;
    padding: 0.125rem 0.5rem;
  }
}

@media (max-width: 480px) {
  /* Very small screens - further optimizations */
  #userInfo {
    padding: 0.25rem;
  }
  
  /* Ensure WiFi icon remains visible and touchable */
  #connectionIcon {
    min-width: 28px;
    min-height: 28px;
    padding: 2px;
  }
  
  #connectionIcon svg {
    min-width: 14px;
    min-height: 14px;
  }
  
  /* Reduce spacing between elements on very small screens */
  #userInfo > div:last-child > div:first-child {
    gap: 0.5rem;
  }
  
  /* Even smaller pills for very small screens */
  .rounded-md {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
  }
}

/* Enhanced pill styling for better taskbar integration */
#userInfo .rounded-md {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease-in-out;
  border-width: 1px;
  border-style: solid;
}

#userInfo .rounded-md:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Subtle background variations for better integration */
#userInfo .bg-green-50 {
  background-color: rgba(240, 253, 244, 0.8);
}

#userInfo .bg-gray-50 {
  background-color: rgba(249, 250, 251, 0.8);
}

#userInfo .bg-blue-50 {
  background-color: rgba(239, 246, 255, 0.8);
}

/* Mobile optimizations for pills */
@media (max-width: 767px) {
  /* Ensure pills wrap properly on mobile */
  #userInfo > div:first-child > div:first-child {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  
  /* Smaller pills on mobile */
  #userInfo .rounded-md {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
  }
  
  /* Reduce margin between title and pills on mobile */
  #userInfo > div:first-child > div:first-child > div:nth-child(3) {
    margin-left: 0.5rem;
  }
}

/* Ensure smooth transitions */
#userInfo * {
  transition: all 0.2s ease-in-out;
}

/* Improve touch targets on mobile */
@media (hover: none) and (pointer: coarse) {
  button, select {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Mobile-specific pill styling */
@media (max-width: 640px) {
  .rounded-full {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
  }
  
  /* Ensure proper spacing between pills */
  .gap-2 > * {
    margin-right: 0.25rem;
  }
  
  .gap-2 > *:last-child {
    margin-right: 0;
  }
}

/* Chart section responsive visibility */
@media (max-width: 767px) {
  /* Hide chart section on mobile and small tablets */
  .chart-section-mobile-hidden {
    display: none !important;
  }
}

@media (min-width: 768px) {
  /* Show chart section on medium screens and larger */
  .chart-section-mobile-hidden {
    display: block !important;
  }
}

/* Mobile optimizations for log entries */
@media (max-width: 640px) {
  /* Reduce spacing in log entries on mobile */
  .border.rounded-lg.divide-y > div {
    padding: 0.5rem;
  }
  
  /* Allow faster line breaks on mobile */
  .border.rounded-lg.divide-y > div > div:first-child {
    flex-wrap: wrap;
    gap: 0.25rem;
    line-height: 1.4;
  }
  
  /* Reduce font size slightly on mobile for better fit */
  .border.rounded-lg.divide-y > div > div:first-child span {
    font-size: 0.875rem;
  }
  
  /* Optimize timestamp display on mobile */
  .border.rounded-lg.divide-y > div > div:last-child {
    font-size: 0.75rem;
    margin-top: 0.25rem;
  }
  
  /* Ensure proper spacing between log elements */
  .border.rounded-lg.divide-y > div > div:first-child > span {
    margin-right: 0.25rem;
  }
  
  .border.rounded-lg.divide-y > div > div:first-child > span:last-child {
    margin-right: 0;
  }
}

/* Dark mode WiFi icon styling */
.dark #connectionIcon svg {
  stroke: #10b981 !important; /* Green for connected */
}

.dark #connectionIcon:not([title*="connected"]) svg {
  stroke: #f59e0b !important; /* Yellow for offline */
}

/* Custom thin scrollbar styles with dark mode support */
.overflow-x-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.overflow-x-auto::-webkit-scrollbar-track,
.overflow-y-auto::-webkit-scrollbar-track,
.overflow-auto::-webkit-scrollbar-track {
  background: #f1f5f9; /* slate-100 */
  border-radius: 3px;
}

.overflow-x-auto::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-auto::-webkit-scrollbar-thumb {
  background: #cbd5e1; /* slate-300 */
  border-radius: 3px;
  transition: background-color 0.2s ease;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover,
.overflow-y-auto::-webkit-scrollbar-thumb:hover,
.overflow-auto::-webkit-scrollbar-thumb:hover {
  background: #94a3b8; /* slate-400 */
}

/* Dark mode scrollbar styles */
.dark .overflow-x-auto::-webkit-scrollbar-track,
.dark .overflow-y-auto::-webkit-scrollbar-track,
.dark .overflow-auto::-webkit-scrollbar-track {
  background: #1e293b; /* slate-800 */
}

.dark .overflow-x-auto::-webkit-scrollbar-thumb,
.dark .overflow-y-auto::-webkit-scrollbar-thumb,
.dark .overflow-auto::-webkit-scrollbar-thumb {
  background: #475569; /* slate-600 */
}

.dark .overflow-x-auto::-webkit-scrollbar-thumb:hover,
.dark .overflow-y-auto::-webkit-scrollbar-thumb:hover,
.dark .overflow-auto::-webkit-scrollbar-thumb:hover {
  background: #64748b; /* slate-500 */
}

/* Firefox scrollbar support */
.overflow-x-auto,
.overflow-y-auto,
.overflow-auto {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9; /* thumb track */
}

.dark .overflow-x-auto,
.dark .overflow-y-auto,
.dark .overflow-auto {
  scrollbar-color: #475569 #1e293b; /* thumb track */
}

/* Global input, textarea, and select dark mode styles */
input, textarea, select {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Dark mode for all form elements */
.dark input:not([type="checkbox"]):not([type="radio"]),
.dark textarea,
.dark select {
  background-color: #1e293b !important; /* slate-800 */
  border-color: #475569 !important; /* slate-600 */
  color: #f8fafc !important; /* slate-50 - white text */
}

.dark input:not([type="checkbox"]):not([type="radio"]):focus,
.dark textarea:focus,
.dark select:focus {
  border-color: #3b82f6 !important; /* blue-500 */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #94a3b8 !important; /* slate-400 */
}

/* Dark mode for select options */
.dark select option {
  background-color: #1e293b !important; /* slate-800 */
  color: #f8fafc !important; /* slate-50 */
}

/* Dark mode for disabled form elements */
.dark input:disabled,
.dark textarea:disabled,
.dark select:disabled {
  background-color: #374151 !important; /* gray-700 */
  color: #9ca3af !important; /* gray-400 */
  border-color: #4b5563 !important; /* gray-600 */
}