@import "tailwindcss";

:root {
  /* Valeurs par défaut (Light theme) */
  --background: #f1f5f9; /* slate-100 */
  --foreground: #0f172a; /* slate-900 */
  --card: #ffffff; /* white */
  --card-hover: #f8fafc; /* slate-50 */
  --card-column: #f8fafc; /* slate-50 - colonnes plus foncées que les cartes */
  --border: #cbd5e1; /* slate-300 */
  --input: #ffffff; /* white */
  --primary: #0891b2; /* cyan-600 */
  --primary-foreground: #ffffff; /* white */
  --muted: #94a3b8; /* slate-400 - plus clair pour scrollbar */
  --muted-foreground: #64748b; /* slate-500 */
  --accent: #d97706; /* amber-600 */
  --destructive: #dc2626; /* red-600 */
  --success: #059669; /* emerald-600 */
  --purple: #8b5cf6; /* purple-500 */
  --yellow: #eab308; /* yellow-500 */
  --green: #059669; /* emerald-600 */
  --blue: #2563eb; /* blue-600 */
  --gray: #6b7280; /* gray-500 */
  --gray-light: #e5e7eb; /* gray-200 */
  
  /* Cartes spéciales */
  --jira-card: #dbeafe; /* blue-100 - clair */
  --tfs-card: #fed7aa; /* orange-200 - clair */
  --jira-border: #3b82f6; /* blue-500 */
  --tfs-border: #f59e0b; /* amber-500 */
  --jira-text: #1e40af; /* blue-800 - foncé pour contraste */
  --tfs-text: #92400e; /* amber-800 - foncé pour contraste */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(0, 0, 0, 0.08);
  --card-shadow-medium: rgba(0, 0, 0, 0.15);
  --card-shadow-heavy: rgba(0, 0, 0, 0.25);
  --card-glow-primary: rgba(8, 145, 178, 0.2);
  --card-glow-accent: rgba(217, 119, 6, 0.2);
}

.light {
  /* Light theme explicit */
  --background: #f1f5f9; /* slate-100 */
  --foreground: #0f172a; /* slate-900 */
  --card: #ffffff; /* white */
  --card-hover: #f8fafc; /* slate-50 */
  --card-column: #f8fafc; /* slate-50 */
  --border: #cbd5e1; /* slate-300 */
  --input: #ffffff; /* white */
  --primary: #0891b2; /* cyan-600 */
  --primary-foreground: #ffffff; /* white */
  --muted: #94a3b8; /* slate-400 */
  --muted-foreground: #64748b; /* slate-500 */
  --accent: #d97706; /* amber-600 */
  --destructive: #dc2626; /* red-600 */
  --success: #059669; /* emerald-600 */
  --purple: #8b5cf6; /* purple-500 */
  --yellow: #eab308; /* yellow-500 */
  --green: #059669; /* emerald-600 */
  --blue: #2563eb; /* blue-600 */
  --gray: #6b7280; /* gray-500 */
  --gray-light: #e5e7eb; /* gray-200 */
  
  /* Cartes spéciales */
  --jira-card: #dbeafe; /* blue-100 - clair */
  --tfs-card: #fed7aa; /* orange-200 - clair */
  --jira-border: #3b82f6; /* blue-500 */
  --tfs-border: #f59e0b; /* amber-500 */
  --jira-text: #1e40af; /* blue-800 - foncé pour contraste */
  --tfs-text: #92400e; /* amber-800 - foncé pour contraste */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(0, 0, 0, 0.08);
  --card-shadow-medium: rgba(0, 0, 0, 0.15);
  --card-shadow-heavy: rgba(0, 0, 0, 0.25);
  --card-glow-primary: rgba(8, 145, 178, 0.2);
  --card-glow-accent: rgba(217, 119, 6, 0.2);
}

.dark {
  /* Dark theme override */
  --background: #1e293b; /* slate-800 - background principal */
  --foreground: #f1f5f9; /* slate-100 */
  --card: #334155; /* slate-700 - plus clair que le background */
  --card-hover: #475569; /* slate-600 */
  --card-column: #0f172a; /* slate-900 - plus foncé que les cartes */
  --border: #64748b; /* slate-500 - encore plus clair */
  --input: #334155; /* slate-700 - plus clair */
  --primary: #06b6d4; /* cyan-500 */
  --primary-foreground: #ffffff; /* white - better contrast with cyan */
  --muted: #64748b; /* slate-500 */
  --muted-foreground: #94a3b8; /* slate-400 */
  --accent: #f59e0b; /* amber-500 */
  --destructive: #ef4444; /* red-500 */
  --success: #10b981; /* emerald-500 */
  --purple: #8b5cf6; /* purple-500 */
  --yellow: #eab308; /* yellow-500 */
  --green: #10b981; /* emerald-500 */
  --blue: #3b82f6; /* blue-500 */
  --gray: #9ca3af; /* gray-400 */
  --gray-light: #374151; /* gray-700 */
  
  /* Cartes spéciales */
  --jira-card: #475569; /* slate-700 - plus subtil */
  --tfs-card: #475569; /* slate-600 - plus subtil */
  --jira-border: #60a5fa; /* blue-400 - plus clair pour contraste */
  --tfs-border: #fb923c; /* orange-400 - plus clair pour contraste */
  --jira-text: #93c5fd; /* blue-300 - clair pour contraste */
  --tfs-text: #fdba74; /* orange-300 - clair pour contraste */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(255, 255, 255, 0.05);
  --card-shadow-medium: rgba(255, 255, 255, 0.1);
  --card-shadow-heavy: rgba(255, 255, 255, 0.15);
  --card-glow-primary: rgba(6, 182, 212, 0.3);
  --card-glow-accent: rgba(245, 158, 11, 0.3);
}

.dracula {
  /* Dracula theme */
  --background: #282a36; /* dracula background */
  --foreground: #f8f8f2; /* dracula foreground */
  --card: #44475a; /* dracula current line */
  --card-hover: #6272a4; /* dracula comment */
  --card-column: #21222c; /* darker background */
  --border: #6272a4; /* dracula comment */
  --input: #44475a; /* dracula current line */
  --primary: #ff79c6; /* dracula pink */
  --primary-foreground: #ffffff; /* white for contrast */
  --muted: #6272a4; /* dracula comment */
  --muted-foreground: #50fa7b; /* dracula green */
  --accent: #ffb86c; /* dracula orange */
  --destructive: #ff5555; /* dracula red */
  --success: #50fa7b; /* dracula green */
  --purple: #bd93f9; /* dracula purple */
  --yellow: #f1fa8c; /* dracula yellow */
  --green: #50fa7b; /* dracula green */
  --blue: #8be9fd; /* dracula cyan */
  --gray: #6272a4; /* dracula comment */
  --gray-light: #44475a; /* dracula current line */
  
  /* Cartes spéciales */
  --jira-card: #44475a; /* dracula current line - fond neutre */
  --tfs-card: #44475a; /* dracula current line - fond neutre */
  --jira-border: #8be9fd; /* dracula cyan */
  --tfs-border: #ffb86c; /* dracula orange */
  --jira-text: #f8f8f2; /* dracula foreground - texte principal */
  --tfs-text: #f8f8f2; /* dracula foreground - texte principal */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(255, 255, 255, 0.05);
  --card-shadow-medium: rgba(255, 255, 255, 0.1);
  --card-shadow-heavy: rgba(255, 255, 255, 0.15);
  --card-glow-primary: rgba(255, 121, 198, 0.3);
  --card-glow-accent: rgba(255, 184, 108, 0.3);
}

.monokai {
  /* Monokai theme */
  --background: #272822; /* monokai background */
  --foreground: #f8f8f2; /* monokai foreground */
  --card: #3e3d32; /* monokai selection */
  --card-hover: #49483e; /* monokai line */
  --card-column: #1e1f1c; /* darker background */
  --border: #49483e; /* monokai line */
  --input: #3e3d32; /* monokai selection */
  --primary: #f92672; /* monokai pink */
  --primary-foreground: #ffffff; /* white for contrast */
  --muted: #75715e; /* monokai comment */
  --muted-foreground: #a6e22e; /* monokai green */
  --accent: #fd971f; /* monokai orange */
  --destructive: #f92672; /* monokai red */
  --success: #a6e22e; /* monokai green */
  --purple: #ae81ff; /* monokai purple */
  --yellow: #e6db74; /* monokai yellow */
  --green: #a6e22e; /* monokai green */
  --blue: #66d9ef; /* monokai cyan */
  --gray: #75715e; /* monokai comment */
  --gray-light: #3e3d32; /* monokai selection */
  
  /* Cartes spéciales */
  --jira-card: #3e3d32; /* monokai selection - fond neutre */
  --tfs-card: #3e3d32; /* monokai selection - fond neutre */
  --jira-border: #66d9ef; /* monokai cyan */
  --tfs-border: #fd971f; /* monokai orange */
  --jira-text: #f8f8f2; /* monokai foreground */
  --tfs-text: #f8f8f2; /* monokai foreground */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(255, 255, 255, 0.05);
  --card-shadow-medium: rgba(255, 255, 255, 0.1);
  --card-shadow-heavy: rgba(255, 255, 255, 0.15);
  --card-glow-primary: rgba(249, 38, 114, 0.3);
  --card-glow-accent: rgba(253, 151, 31, 0.3);
}

.nord {
  /* Nord theme */
  --background: #2e3440; /* nord0 */
  --foreground: #d8dee9; /* nord4 */
  --card: #3b4252; /* nord1 */
  --card-hover: #434c5e; /* nord2 */
  --card-column: #242831; /* darker nord0 */
  --border: #4c566a; /* nord3 */
  --input: #3b4252; /* nord1 */
  --primary: #88c0d0; /* nord7 */
  --primary-foreground: #ffffff; /* white for contrast */
  --muted: #4c566a; /* nord3 */
  --muted-foreground: #81a1c1; /* nord9 */
  --accent: #d08770; /* nord12 */
  --destructive: #bf616a; /* nord11 */
  --success: #a3be8c; /* nord14 */
  --purple: #b48ead; /* nord13 */
  --yellow: #ebcb8b; /* nord15 */
  --green: #a3be8c; /* nord14 */
  --blue: #5e81ac; /* nord10 */
  --gray: #4c566a; /* nord3 */
  --gray-light: #3b4252; /* nord1 */
  
  /* Cartes spéciales */
  --jira-card: #3b4252; /* nord1 - fond neutre */
  --tfs-card: #3b4252; /* nord1 - fond neutre */
  --jira-border: #5e81ac; /* nord10 - bleu */
  --tfs-border: #d08770; /* nord12 - orange */
  --jira-text: #d8dee9; /* nord4 - texte principal */
  --tfs-text: #d8dee9; /* nord4 - texte principal */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(255, 255, 255, 0.05);
  --card-shadow-medium: rgba(255, 255, 255, 0.1);
  --card-shadow-heavy: rgba(255, 255, 255, 0.15);
  --card-glow-primary: rgba(94, 129, 172, 0.3);
  --card-glow-accent: rgba(208, 135, 112, 0.3);
}

.gruvbox {
  /* Gruvbox theme */
  --background: #282828; /* gruvbox bg0 */
  --foreground: #ebdbb2; /* gruvbox fg */
  --card: #3c3836; /* gruvbox bg1 */
  --card-hover: #504945; /* gruvbox bg2 */
  --card-column: #1d2021; /* gruvbox bg0_h */
  --border: #665c54; /* gruvbox bg3 */
  --input: #3c3836; /* gruvbox bg1 */
  --primary: #fe8019; /* gruvbox orange */
  --primary-foreground: #ffffff; /* white for contrast */
  --muted: #665c54; /* gruvbox bg3 */
  --muted-foreground: #a89984; /* gruvbox gray */
  --accent: #fabd2f; /* gruvbox yellow */
  --destructive: #fb4934; /* gruvbox red */
  --success: #b8bb26; /* gruvbox green */
  --purple: #d3869b; /* gruvbox purple */
  --yellow: #fabd2f; /* gruvbox yellow */
  --green: #b8bb26; /* gruvbox green */
  --blue: #83a598; /* gruvbox blue */
  --gray: #a89984; /* gruvbox gray */
  --gray-light: #3c3836; /* gruvbox bg1 */
  
  /* Cartes spéciales */
  --jira-card: #3c3836; /* gruvbox bg1 - fond neutre */
  --tfs-card: #3c3836; /* gruvbox bg1 - fond neutre */
  --jira-border: #83a598; /* gruvbox blue */
  --tfs-border: #fe8019; /* gruvbox orange */
  --jira-text: #ebdbb2; /* gruvbox fg */
  --tfs-text: #ebdbb2; /* gruvbox fg */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(255, 255, 255, 0.05);
  --card-shadow-medium: rgba(255, 255, 255, 0.1);
  --card-shadow-heavy: rgba(255, 255, 255, 0.15);
  --card-glow-primary: rgba(254, 128, 25, 0.3);
  --card-glow-accent: rgba(250, 189, 47, 0.3);
}

.tokyo_night {
  /* Tokyo Night theme */
  --background: #1a1b26; /* tokyo-night bg */
  --foreground: #a9b1d6; /* tokyo-night fg */
  --card: #24283b; /* tokyo-night bg_highlight */
  --card-hover: #2f3349; /* tokyo-night bg_visual */
  --card-column: #16161e; /* tokyo-night bg_dark */
  --border: #565f89; /* tokyo-night comment */
  --input: #24283b; /* tokyo-night bg_highlight */
  --primary: #7aa2f7; /* tokyo-night blue */
  --primary-foreground: #ffffff; /* white for contrast */
  --muted: #565f89; /* tokyo-night comment */
  --muted-foreground: #9aa5ce; /* tokyo-night fg_dark */
  --accent: #ff9e64; /* tokyo-night orange */
  --destructive: #f7768e; /* tokyo-night red */
  --success: #9ece6a; /* tokyo-night green */
  --purple: #bb9af7; /* tokyo-night purple */
  --yellow: #e0af68; /* tokyo-night yellow */
  --green: #9ece6a; /* tokyo-night green */
  --blue: #7aa2f7; /* tokyo-night blue */
  --gray: #565f89; /* tokyo-night comment */
  --gray-light: #24283b; /* tokyo-night bg_highlight */
  
  /* Cartes spéciales */
  --jira-card: #24283b; /* tokyo-night bg_highlight - fond neutre */
  --tfs-card: #24283b; /* tokyo-night bg_highlight - fond neutre */
  --jira-border: #7aa2f7; /* tokyo-night blue */
  --tfs-border: #ff9e64; /* tokyo-night orange */
  --jira-text: #a9b1d6; /* tokyo-night fg */
  --tfs-text: #a9b1d6; /* tokyo-night fg */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(255, 255, 255, 0.05);
  --card-shadow-medium: rgba(255, 255, 255, 0.1);
  --card-shadow-heavy: rgba(255, 255, 255, 0.15);
  --card-glow-primary: rgba(122, 162, 247, 0.3);
  --card-glow-accent: rgba(255, 158, 100, 0.3);
}

.catppuccin {
  /* Catppuccin Mocha theme */
  --background: #1e1e2e; /* catppuccin base */
  --foreground: #cdd6f4; /* catppuccin text */
  --card: #313244; /* catppuccin surface0 */
  --card-hover: #45475a; /* catppuccin surface1 */
  --card-column: #181825; /* catppuccin mantle */
  --border: #6c7086; /* catppuccin overlay0 */
  --input: #313244; /* catppuccin surface0 */
  --primary: #cba6f7; /* catppuccin mauve */
  --primary-foreground: #ffffff; /* white for contrast */
  --muted: #6c7086; /* catppuccin overlay0 */
  --muted-foreground: #a6adc8; /* catppuccin subtext0 */
  --accent: #fab387; /* catppuccin peach */
  --destructive: #f38ba8; /* catppuccin red */
  --success: #a6e3a1; /* catppuccin green */
  --purple: #cba6f7; /* catppuccin mauve */
  --yellow: #f9e2af; /* catppuccin yellow */
  --green: #a6e3a1; /* catppuccin green */
  --blue: #89b4fa; /* catppuccin blue */
  --gray: #6c7086; /* catppuccin overlay0 */
  --gray-light: #313244; /* catppuccin surface0 */
  
  /* Cartes spéciales */
  --jira-card: #313244; /* catppuccin surface0 - fond neutre */
  --tfs-card: #313244; /* catppuccin surface0 - fond neutre */
  --jira-border: #89b4fa; /* catppuccin blue */
  --tfs-border: #fab387; /* catppuccin peach */
  --jira-text: #cdd6f4; /* catppuccin text */
  --tfs-text: #cdd6f4; /* catppuccin text */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(255, 255, 255, 0.05);
  --card-shadow-medium: rgba(255, 255, 255, 0.1);
  --card-shadow-heavy: rgba(255, 255, 255, 0.15);
  --card-glow-primary: rgba(203, 166, 247, 0.3);
  --card-glow-accent: rgba(250, 179, 135, 0.3);
}

.rose_pine {
  /* Rose Pine theme */
  --background: #191724; /* rose-pine base */
  --foreground: #e0def4; /* rose-pine text */
  --card: #26233a; /* rose-pine surface */
  --card-hover: #312f44; /* rose-pine overlay */
  --card-column: #16141f; /* rose-pine base */
  --border: #6e6a86; /* rose-pine muted */
  --input: #26233a; /* rose-pine surface */
  --primary: #c4a7e7; /* rose-pine iris */
  --primary-foreground: #ffffff; /* white for contrast */
  --muted: #6e6a86; /* rose-pine muted */
  --muted-foreground: #908caa; /* rose-pine subtle */
  --accent: #f6c177; /* rose-pine gold */
  --destructive: #eb6f92; /* rose-pine love */
  --success: #9ccfd8; /* rose-pine foam */
  --purple: #c4a7e7; /* rose-pine iris */
  --yellow: #f6c177; /* rose-pine gold */
  --green: #9ccfd8; /* rose-pine foam */
  --blue: #3e8fb0; /* rose-pine pine */
  --gray: #6e6a86; /* rose-pine muted */
  --gray-light: #26233a; /* rose-pine surface */
  
  /* Cartes spéciales */
  --jira-card: #26233a; /* rose-pine surface - fond neutre */
  --tfs-card: #26233a; /* rose-pine surface - fond neutre */
  --jira-border: #3e8fb0; /* rose-pine pine - bleu */
  --tfs-border: #f6c177; /* rose-pine gold - orange/jaune */
  --jira-text: #e0def4; /* rose-pine text */
  --tfs-text: #e0def4; /* rose-pine text */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(255, 255, 255, 0.05);
  --card-shadow-medium: rgba(255, 255, 255, 0.1);
  --card-shadow-heavy: rgba(255, 255, 255, 0.15);
  --card-glow-primary: rgba(196, 167, 231, 0.3);
  --card-glow-accent: rgba(246, 193, 119, 0.3);
}

.one_dark {
  /* One Dark theme */
  --background: #282c34; /* one-dark bg */
  --foreground: #abb2bf; /* one-dark fg */
  --card: #3e4451; /* one-dark bg1 */
  --card-hover: #4f5666; /* one-dark bg2 */
  --card-column: #21252b; /* one-dark bg0 */
  --border: #5c6370; /* one-dark bg3 */
  --input: #3e4451; /* one-dark bg1 */
  --primary: #61afef; /* one-dark blue */
  --primary-foreground: #ffffff; /* white for contrast */
  --muted: #5c6370; /* one-dark bg3 */
  --muted-foreground: #828997; /* one-dark gray */
  --accent: #e06c75; /* one-dark red */
  --destructive: #e06c75; /* one-dark red */
  --success: #98c379; /* one-dark green */
  --purple: #c678dd; /* one-dark purple */
  --yellow: #e5c07b; /* one-dark yellow */
  --green: #98c379; /* one-dark green */
  --blue: #61afef; /* one-dark blue */
  --gray: #5c6370; /* one-dark bg3 */
  --gray-light: #3e4451; /* one-dark bg1 */
  
  /* Cartes spéciales */
  --jira-card: #3e4451; /* one-dark bg1 - fond neutre */
  --tfs-card: #3e4451; /* one-dark bg1 - fond neutre */
  --jira-border: #61afef; /* one-dark blue */
  --tfs-border: #e5c07b; /* one-dark yellow */
  --jira-text: #abb2bf; /* one-dark fg */
  --tfs-text: #abb2bf; /* one-dark fg */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(255, 255, 255, 0.05);
  --card-shadow-medium: rgba(255, 255, 255, 0.1);
  --card-shadow-heavy: rgba(255, 255, 255, 0.15);
  --card-glow-primary: rgba(97, 175, 239, 0.3);
  --card-glow-accent: rgba(229, 192, 123, 0.3);
}

.material {
  /* Material Design Dark theme */
  --background: #121212; /* material bg */
  --foreground: #ffffff; /* material on-bg */
  --card: #1e1e1e; /* material surface */
  --card-hover: #2c2c2c; /* material surface-variant */
  --card-column: #0f0f0f; /* material surface-container */
  --border: #3c3c3c; /* material outline */
  --input: #1e1e1e; /* material surface */
  --primary: #bb86fc; /* material primary */
  --primary-foreground: #ffffff; /* white for contrast */
  --muted: #3c3c3c; /* material outline */
  --muted-foreground: #b3b3b3; /* material on-surface-variant */
  --accent: #ffab40; /* material secondary */
  --destructive: #cf6679; /* material error */
  --success: #4caf50; /* material success */
  --purple: #bb86fc; /* material primary */
  --yellow: #ffab40; /* material secondary */
  --green: #4caf50; /* material success */
  --blue: #2196f3; /* material info */
  --gray: #3c3c3c; /* material outline */
  --gray-light: #1e1e1e; /* material surface */
  
  /* Cartes spéciales */
  --jira-card: #1e1e1e; /* material surface - fond neutre */
  --tfs-card: #1e1e1e; /* material surface - fond neutre */
  --jira-border: #2196f3; /* material info - bleu */
  --tfs-border: #ffab40; /* material secondary - orange */
  --jira-text: #ffffff; /* material on-bg */
  --tfs-text: #ffffff; /* material on-bg */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(255, 255, 255, 0.05);
  --card-shadow-medium: rgba(255, 255, 255, 0.1);
  --card-shadow-heavy: rgba(255, 255, 255, 0.15);
  --card-glow-primary: rgba(187, 134, 252, 0.3);
  --card-glow-accent: rgba(255, 171, 64, 0.3);
}

.solarized {
  /* Solarized Dark theme */
  --background: #002b36; /* solarized base03 */
  --foreground: #93a1a1; /* solarized base1 */
  --card: #073642; /* solarized base02 */
  --card-hover: #0a4b5a; /* solarized base01 */
  --card-column: #001e26; /* solarized base03 darker */
  --border: #586e75; /* solarized base01 */
  --input: #073642; /* solarized base02 */
  --primary: #268bd2; /* solarized blue */
  --primary-foreground: #ffffff; /* white for contrast */
  --muted: #586e75; /* solarized base01 */
  --muted-foreground: #657b83; /* solarized base00 */
  --accent: #b58900; /* solarized yellow */
  --destructive: #dc322f; /* solarized red */
  --success: #859900; /* solarized green */
  --purple: #6c71c4; /* solarized violet */
  --yellow: #b58900; /* solarized yellow */
  --green: #859900; /* solarized green */
  --blue: #268bd2; /* solarized blue */
  --gray: #586e75; /* solarized base01 */
  --gray-light: #073642; /* solarized base02 */
  
  /* Cartes spéciales */
  --jira-card: #073642; /* solarized base02 - fond neutre */
  --tfs-card: #073642; /* solarized base02 - fond neutre */
  --jira-border: #268bd2; /* solarized blue */
  --tfs-border: #b58900; /* solarized yellow */
  --jira-text: #93a1a1; /* solarized base1 */
  --tfs-text: #93a1a1; /* solarized base1 */
  
  /* Effets de profondeur pour les cards */
  --card-shadow-light: rgba(255, 255, 255, 0.05);
  --card-shadow-medium: rgba(255, 255, 255, 0.1);
  --card-shadow-heavy: rgba(255, 255, 255, 0.15);
  --card-glow-primary: rgba(38, 139, 210, 0.3);
  --card-glow-accent: rgba(181, 137, 0, 0.3);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-mono), 'Courier New', monospace;
  overflow-x: hidden;
  transition: background-image 0.3s ease-in-out;
}

/* Styles pour les images de fond */
body.has-background-image {
  /* Assurer que le contenu reste lisible avec une image de fond */
  position: relative;
}

body.has-background-image::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: -1;
}

/* Améliorer la lisibilité des cartes avec image de fond */
body.has-background-image .bg-\[var\(--card\)\] {
  background-color: color-mix(in srgb, var(--card) 90%, transparent) !important;
  backdrop-filter: blur(8px);
}

body.has-background-image .bg-\[var\(--card\)\]\/30 {
  background-color: color-mix(in srgb, var(--card) 20%, transparent) !important;
  backdrop-filter: blur(12px);
}

/* Rendre les conteneurs principaux transparents avec image de fond */
body.has-background-image .min-h-screen.bg-\[var\(--background\)\] {
  background-color: transparent !important;
}

/* Scrollbar tech style */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

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

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

/* Outline card styles pour meilleure lisibilité */
.outline-card-blue {
  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
  color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

.outline-card-green {
  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
  color: var(--success);
  background-color: color-mix(in srgb, var(--success) 8%, transparent);
  border-color: color-mix(in srgb, var(--success) 25%, var(--border));
}

.outline-card-orange {
  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
  color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

.outline-card-red {
  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
  color: var(--destructive);
  background-color: color-mix(in srgb, var(--destructive) 8%, transparent);
  border-color: color-mix(in srgb, var(--destructive) 25%, var(--border));
}

/* Effets de texture sophistiqués pour les cards */
.card-texture-subtle {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
}

.card-texture-dark {
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.01) 0%, transparent 50%);
}

/* Effets de brillance pour les cards */
.card-shine {
  position: relative;
  overflow: hidden;
}

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

.card-shine:hover::before {
  left: 100%;
}

/* Effets de profondeur améliorés */
.card-depth-1 {
  box-shadow: 
    0 1px 3px var(--card-shadow-light),
    0 1px 2px var(--card-shadow-light);
}

.card-depth-2 {
  box-shadow: 
    0 4px 6px -1px var(--card-shadow-light),
    0 2px 4px -1px var(--card-shadow-light);
}

.card-depth-3 {
  box-shadow: 
    0 10px 15px -3px var(--card-shadow-medium),
    0 4px 6px -2px var(--card-shadow-light);
}

.card-glow-primary {
  box-shadow: 
    0 0 0 1px var(--card-glow-primary),
    0 4px 6px -1px var(--card-shadow-light),
    0 2px 4px -1px var(--card-shadow-light);
}

.card-glow-accent {
  box-shadow: 
    0 0 0 1px var(--card-glow-accent),
    0 4px 6px -1px var(--card-shadow-light),
    0 2px 4px -1px var(--card-shadow-light);
}

.outline-card-purple {
  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
  color: var(--purple);
  background-color: color-mix(in srgb, var(--purple) 8%, transparent);
  border-color: color-mix(in srgb, var(--purple) 25%, var(--border));
}

.outline-card-yellow {
  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
  color: var(--yellow);
  background-color: color-mix(in srgb, var(--yellow) 8%, transparent);
  border-color: color-mix(in srgb, var(--yellow) 25%, var(--border));
}

.outline-card-gray {
  @apply p-2.5 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
  color: var(--muted-foreground);
  background-color: color-mix(in srgb, var(--muted) 8%, transparent);
  border-color: color-mix(in srgb, var(--muted) 25%, var(--border));
}

/* Variantes pour les métriques (padding plus large) */
.outline-metric-blue {
  @apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
  color: var(--primary);
  background-color: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
}

.outline-metric-green {
  @apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
  color: var(--success);
  background-color: color-mix(in srgb, var(--success) 8%, transparent);
  border-color: color-mix(in srgb, var(--success) 25%, var(--border));
}

.outline-metric-orange {
  @apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
  color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--border));
}

.outline-metric-purple {
  @apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
  color: var(--purple);
  background-color: color-mix(in srgb, var(--purple) 8%, transparent);
  border-color: color-mix(in srgb, var(--purple) 25%, var(--border));
}

.outline-metric-gray {
  @apply text-center p-4 rounded-lg border transition-all hover:shadow-sm hover:scale-[1.01];
  color: var(--muted-foreground);
  background-color: color-mix(in srgb, var(--muted) 8%, transparent);
  border-color: color-mix(in srgb, var(--muted) 25%, var(--border));
}

/* Animations tech */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 5px var(--primary); }
  50% { box-shadow: 0 0 20px var(--primary); }
}

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

/* Line clamp utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Styles pour les sliders */
.slider::-webkit-slider-thumb {
  appearance: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid var(--background);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slider::-webkit-slider-thumb:hover {
  background: color-mix(in srgb, var(--primary) 80%, var(--accent) 20%);
  transform: scale(1.1);
}

.slider::-moz-range-thumb {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid var(--background);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slider::-moz-range-thumb:hover {
  background: color-mix(in srgb, var(--primary) 80%, var(--accent) 20%);
  transform: scale(1.1);
}