/**
* ========================================================================
* COMMON.CSS - Global Styles & Design System
* ========================================================================
* SMACSS Architecture: Settings → Base → Layout → Components → Utilities
* Theme: Cyberpunk (Dark mode with neon accents)
* Color Palette: Cyan primary, Purple secondary, Green accent
* ========================================================================
*/

/* ========================================================================
  1. SETTINGS - Design System Variables
  ========================================================================
  Define all CSS custom properties for colors, typography, spacing, etc.
  These are the foundation of the entire design system.
  ======================================================================== */

:root {
  /* -------- COLOR SYSTEM: BRAND COLORS -------- */
  --color-primary: #00d9ff; /* Cyan - Primary action/highlight */
  --color-secondary: #9d00ff; /* Purple - Secondary action */
  --color-accent: #00ff88; /* Green - Accent/Success */
  --color-neutral: #1a1d29; /* Dark Blue-Gray - Neutral element */

  /* -------- COLOR SYSTEM: BACKGROUNDS -------- */
  --color-bg-dark: #0a0e27; /* Main background */
  --color-bg-medium: #12162e; /* Secondary background */
  --color-bg-light: #1a1f3a; /* Tertiary background */

  /* -------- COLOR SYSTEM: SEMANTIC -------- */
  --color-info: #00d9ff; /* Cyan for information */
  --color-success: #00ff88; /* Green for success */
  --color-warning: #ffb800; /* Orange for warning */
  --color-error: #ff0055; /* Red/Magenta for errors */
  --color-error-soft: #ff7b7b; /* Softer error (borders, secondary) */

  /* -------- COLOR SYSTEM: TEXT -------- */
  --color-text-primary: #e0e7ff; /* Main text color */
  --color-text-secondary: #9ca3af; /* Secondary text */
  --color-text-muted: #6b7280; /* Disabled/muted text */

  /* -------- COLOR SYSTEM: EXTENDED CYBERPUNK PALETTE -------- */
  --cyber-white: #ffffff;
  --cyber-red: #ff0055;
  --cyber-orange: #ff6b00;
  --cyber-yellow: #ffe700;
  --cyber-purple: #9d00ff;
  --cyber-pink: #ff0099;

  /* -------- TYPOGRAPHY -------- */
  --font-display: "Orbitron", sans-serif; /* Display/Headings */
  --font-body: "Rajdhani", "Arial", sans-serif; /* Body text */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.5rem; /* 24px */
  --font-size-2xl: 2rem; /* 32px */
  --font-size-3xl: 2.5rem; /* 40px */
  --line-height-tight: 1.3;
  --line-height-normal: 1.6;

  /* -------- SPACING SCALE -------- */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 40px;

  /* -------- BORDER RADIUS -------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* -------- MOTION/TRANSITIONS -------- */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
}

/* ========================================================================
  2. DAISYUI THEME - Framework Integration
  ========================================================================
  Overrides for DaisyUI component library using OKLCH color space.
  Theme name: "geek" - Applies globally to all components.
  OKLCH format: Lightness Chroma Hue (perceptually uniform color space)
  ======================================================================== */

[data-theme="geek"] {
  /* Primary Color (Cyan) - Main actions, highlights */
  --p: 0.73 0.2 220;
  --pf: 0.65 0.2 220;
  --pc: 0.2 0.02 240;

  /* Secondary Color (Purple) - Alternative actions */
  --s: 0.6 0.3 300;
  --sf: 0.52 0.3 300;
  --sc: 1 0 0;

  /* Accent Color (Green) - Supplementary elements */
  --a: 0.82 0.25 160;
  --af: 0.72 0.25 160;
  --ac: 0.2 0.05 160;

  /* Neutral - Default/disabled states */
  --n: 0.25 0.03 240;
  --nf: 0.2 0.03 240;
  --nc: 0.9 0.01 240;

  /* Base - Backgrounds */
  --b1: 0.15 0.06 240; /* Base-100 (main) */
  --b2: 0.18 0.05 240; /* Base-200 (secondary) */
  --b3: 0.23 0.04 240; /* Base-300 (tertiary) */
  --bc: 0.92 0.02 240; /* Base-content (text) */

  /* Semantic Colors */
  --in: 0.73 0.2 220; /* Info (cyan) */
  --inc: 0.2 0.02 240;
  --su: 0.82 0.25 160; /* Success (green) */
  --suc: 0.2 0.05 160;
  --wa: 0.78 0.18 70; /* Warning (orange) */
  --wac: 0.2 0.02 70;
  --er: 0.58 0.27 5; /* Error (red) */
  --erc: 1 0 0;

  /* Component Sizing & Borders */
  --rounded-box: 1rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 1.9rem;
  --animation-btn: 0.25s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

/* ========================================================================
  3. BASE STYLES - Reset & Root Elements
  ========================================================================
  Element-level styling: normalization and global defaults.
  Applied to base HTML elements without needing classes.
  ======================================================================== */

/* Reset box-sizing globally */
* {
  box-sizing: border-box;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Body defaults */
body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  background: var(--color-bg-dark);
  color: var(--color-text-primary);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========================================================================
  4. TYPOGRAPHY - Headings & Text Elements
  ========================================================================
  Semantic text hierarchy using display and body fonts.
  ======================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--line-height-tight);
  margin: 0;
  padding: 0;
}

h1 {
  font-size: var(--font-size-3xl);
}

h2 {
  font-size: var(--font-size-2xl);
}

h3 {
  font-size: var(--font-size-xl);
}

h4 {
  font-size: var(--font-size-lg);
}

h5,
h6 {
  font-size: var(--font-size-base);
}

/* ========================================================================
  5. COMPONENTS - Reusable UI Elements
  ========================================================================
  Styled component patterns for common elements.
  ======================================================================== */

/* --- BUTTONS --- */
button,
a.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-size-base);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

button:disabled,
a.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- LINKS --- */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-accent);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- FORM ELEMENTS --- */
input,
textarea,
select {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-bg-light);
  border: 1px solid var(--color-neutral);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  transition: all var(--transition-base);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========================================================================
  6. UTILITIES - Helper Classes
  ========================================================================
  Single-purpose utility classes for rapid prototyping.
  Named consistently for easy discovery.
  ======================================================================== */

/* TEXT UTILITIES */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* TEXT COLOR UTILITIES */
.text-primary {
  color: var(--color-primary);
}

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

.text-accent {
  color: var(--color-accent);
}

.text-error {
  color: var(--color-error);
}

.text-muted {
  color: var(--color-text-muted);
}

/* BACKGROUND COLOR UTILITIES */
.bg-primary {
  background: var(--color-primary);
  color: var(--color-bg-dark);
}

.bg-secondary {
  background: var(--color-secondary);
  color: var(--color-text-primary);
}

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

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

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

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

.bg-error {
  background: var(--color-error);
  color: var(--cyber-white);
}

/* SPACING UTILITIES */
.m-0 {
  margin: 0;
}
.m-xs {
  margin: var(--spacing-xs);
}
.m-sm {
  margin: var(--spacing-sm);
}
.m-md {
  margin: var(--spacing-md);
}
.m-lg {
  margin: var(--spacing-lg);
}

.p-0 {
  padding: 0;
}
.p-xs {
  padding: var(--spacing-xs);
}
.p-sm {
  padding: var(--spacing-sm);
}
.p-md {
  padding: var(--spacing-md);
}
.p-lg {
  padding: var(--spacing-lg);
}

/* DISPLAY UTILITIES */
.hidden {
  display: none;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =================================================================
    Global Body Styling
   ================================================================= */

body {
  background: linear-gradient(135deg, #0b0d12 0%, #0f1320 100%);
  color: #e7e9ee;
  text-align: center;
}

/* =================================================================
    Accessibility - Focus Indicators
   ================================================================= */

.tab:focus-visible {
  outline: 3px solid oklch(var(--p));
  outline-offset: -3px;
  z-index: 10;
}

/* Skip to main content link (visible on focus) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: oklch(var(--p));
  color: black;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
  font-weight: bold;
}

.skip-link:focus {
  top: 0;
}

/* =================================================================
    Cyberpunk Glowing Text & Effects
   ================================================================= */

.cyber-glow {
  text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
}

/* Glow text effects - reusable across all views */
.glow-cyan {
  text-shadow: 0 0 10px rgba(0, 217, 255, 0.6);
}

.glow-purple {
  text-shadow: 0 0 10px rgba(157, 0, 255, 0.6);
}

.glow-green {
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

/* Secondary glow (morado/purple) */
.text-glow-secondary {
  text-shadow: 0 0 8px rgba(157, 0, 255, 0.6);
}

/* Accent glow (verde/green) */
.text-glow-accent {
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

/* Warning glow (amarillo/yellow) */
.text-glow-warning {
  text-shadow: 0 0 8px rgba(255, 184, 0, 0.4);
}

/* =================================================================
    Card Styling - Reusable Pattern
   ================================================================= */

.card-dark {
  background: linear-gradient(135deg, #131722 0%, #1a1f2e 100%);
  border: 1px solid rgba(0, 217, 255, 0.2);
  border-radius: 12px;
  padding: 1.5rem;
}

/* =================================================================
    Animations - Reusable Keyframes
   ================================================================= */

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

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ========================================================================
  SHARED UI COMPONENTS - Navbar, Sidebar, Panels, Buttons
  ========================================================================
  These styles are used across multiple views (dashboard, profile, etc.)
  ======================================================================== */

/* SIDEBAR */
.sidebar,
.dashboard-sidebar {
  position: fixed;
  left: -320px;
  top: 0;
  bottom: 0;
  width: 320px;
  background: linear-gradient(180deg, #0f1419 0%, #1a1f2e 100%);
  border-right: 2px solid rgba(0, 217, 255, 0.3);
  box-shadow: 4px 0 20px rgba(0, 217, 255, 0.1);
  transition: left 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
}

.sidebar.active,
.dashboard-sidebar.active {
  left: 0;
}

.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px;
  border-bottom: 1px solid rgba(0, 217, 255, 0.2);
}

.sidebar-close,
.sidebar-close-btn {
  background: none;
  border: none;
  color: #00d9ff;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  transition: all 0.2s;
}

.sidebar-close:hover,
.sidebar-close-btn:hover {
  color: #9d00ff;
  transform: rotate(90deg);
}

.sidebar-nav {
  padding: 20px 0;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  color: #a0aec0;
  text-decoration: none;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}

.sidebar-nav-item i {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.sidebar-nav-item:hover,
.sidebar-nav-item.active {
  background: rgba(0, 217, 255, 0.1);
  color: #00d9ff;
  border-left-color: #00d9ff;
}

/* NAVBAR */
.dashboard-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  background: linear-gradient(135deg, #0f1419 0%, #1a1f2e 100%);
  border-bottom: 2px solid rgba(0, 217, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.navbar-brand {
  display: flex;
  align-items: center;
  padding: 12px 24px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.navbar-logo {
  height: 40px;
  width: 40px;
  color: #00d9ff;
}

.navbar-brand-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: #00d9ff;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.navbar-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
}

.navbar-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 32px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: #a0aec0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.navbar-tab i {
  font-size: 18px;
}

.navbar-tab:hover {
  color: #00d9ff;
  background: rgba(0, 217, 255, 0.05);
}

.navbar-tab.active {
  color: #00d9ff;
  background: rgba(0, 217, 255, 0.1);
}

.user-menu-btn,
.mobile-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 16px;
  background: rgba(0, 217, 255, 0.1);
  border: 2px solid rgba(0, 217, 255, 0.3);
  border-radius: 50%;
  color: #00d9ff;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-menu-btn:hover,
.mobile-menu-btn:hover {
  background: rgba(0, 217, 255, 0.2);
  border-color: #00d9ff;
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
}

/* BUTTONS */
.btn-primary-action {
  padding: 10px 20px;
  background: linear-gradient(135deg, #00d9ff 0%, #0099cc 100%);
  color: #000;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-primary-action:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px rgba(0, 217, 255, 0.4);
}

.btn-secondary-action {
  padding: 10px 20px;
  background: transparent;
  color: #00d9ff;
  border: 2px solid #00d9ff;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-secondary-action:hover {
  background: rgba(0, 217, 255, 0.1);
}

.btn-danger {
  color: #ff4444;
  border-color: #ff4444;
}

.btn-danger:hover {
  background: rgba(255, 68, 68, 0.1);
}

/* SCROLL TO TOP */
.scroll-to-top-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #00d9ff 0%, #0099cc 100%);
  border: 2px solid rgba(0, 217, 255, 0.5);
  border-radius: 50%;
  color: #000;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 90;
  box-shadow: 0 4px 20px rgba(0, 217, 255, 0.3);
}

.scroll-to-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 217, 255, 0.5);
}

/* GLOW EFFECTS */
.glow-cyan {
  text-shadow:
    0 0 10px rgba(0, 217, 255, 0.8),
    0 0 20px rgba(0, 217, 255, 0.4);
}

.glow-purple {
  text-shadow:
    0 0 10px rgba(157, 0, 255, 0.8),
    0 0 20px rgba(157, 0, 255, 0.4);
}

.glow-green {
  text-shadow:
    0 0 10px rgba(0, 255, 136, 0.8),
    0 0 20px rgba(0, 255, 136, 0.4);
}