/** * Centraliserad färgkonfiguration med stöd för light/dark mode * och flera färgalternativ (blå, indigo, gråskala) * * Användning: * - Default: Blå färg i light mode * - Dark mode: Automatiskt via prefers-color-scheme (OS-Auto) * - Manuell override: Sätt data-color-scheme="light" eller data-color-scheme="dark" på * - Växla färg: Sätt data-theme="indigo" eller data-theme="grayscale" på */ /* ===== BASE FÄRGVARIABLER - BLÅ (DEFAULT) ===== */ :root { /* Primary colors - Blå */ --primary: #2563eb; --primary-hover: #1d4ed8; --primary-dark: #1e40af; --primary-light: #dbeafe; /* Ljus blåtonad bakgrund för borders i light mode */ --primary-lighter: #eff6ff; /* Background colors */ --bg: #ffffff; --bg-secondary: #f8fafc; --card-bg: #ffffff; --card-bg-hover: #f8fafc; /* Text colors */ --text: #0f172a; --text-secondary: #1e293b; --text-muted: #64748b; --text-light: #94a3b8; --text-on-primary: #ffffff; /* Vit text för användning på primary-färgad bakgrund */ /* Border colors */ --border: #e2e8f0; --border-light: #f1f5f9; --border-dark: #cbd5e1; /* Accent colors (för highlights) */ --accent: #2563eb; --accent-hover: #1d4ed8; /* CTA-färger (för call-to-action knappar) - lite annan nyans */ --cta-primary: #0ea5e9; /* Cyan blå */ --cta-primary-hover: #0284c7; --cta-primary-dark: #0369a1; /* Checkbox-färger - lite annan nyans */ --checkbox-primary: #6366f1; /* Indigo */ --checkbox-primary-hover: #4f46e5; /* Status colors */ --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; /* Gradient colors */ --gradient-start: #2563eb; --gradient-end: #1d4ed8; /* Shadow colors */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.15); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2); /* Spacing scale */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ /* Radius scale */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ /* Focus ring */ --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.45); /* Primary blue with opacity */ /* Icon and chip colors */ --icon-color: #64748b; /* Muted gray for icons */ --chip-text: #1e293b; /* Dark text for chips in light mode */ --chip-border: #cbd5e1; /* Light border for chips in light mode */ } /* ===== DARK MODE - BLÅ ===== */ /* OS-Auto: Följ prefers-color-scheme */ @media (prefers-color-scheme: dark) { :root:not([data-color-scheme="light"]) { /* Primary colors - Ljusare blå för dark mode */ --primary: #3b82f6; --primary-hover: #2563eb; --primary-dark: #1d4ed8; --primary-light: #1e3a8a; --primary-lighter: #1e40af; /* CTA - ljusare cyan */ --cta-primary: #38bdf8; --cta-primary-hover: #0ea5e9; --cta-primary-dark: #0284c7; /* Checkbox - ljusare indigo */ --checkbox-primary: #818cf8; --checkbox-primary-hover: #6366f1; /* Background colors */ --bg: #0f172a; --bg-secondary: #1e293b; --card-bg: #1e293b; --card-bg-hover: #334155; /* Text colors */ --text: #f1f5f9; --text-secondary: #e2e8f0; --text-muted: #94a3b8; --text-light: #64748b; --text-on-primary: #ffffff; /* Vit text för användning på primary-färgad bakgrund */ /* Border colors */ --border: #334155; --border-light: #475569; --border-dark: #1e293b; /* Accent colors */ --accent: #3b82f6; --accent-hover: #2563eb; /* Status colors (samma i dark mode) */ --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #3b82f6; /* Gradient colors */ --gradient-start: #3b82f6; --gradient-end: #2563eb; /* Shadow colors - tydligare skuggor i dark mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); } } /* ===== FÄRGALTERNATIV: INDIGO ===== */ [data-theme="indigo"] { --primary: #6366f1; --primary-hover: #4f46e5; --primary-dark: #4338ca; --primary-light: #e0e7ff; --primary-lighter: #eef2ff; --accent: #6366f1; --accent-hover: #4f46e5; --gradient-start: #6366f1; --gradient-end: #4f46e5; } /* Dark mode för indigo - OS-Auto */ @media (prefers-color-scheme: dark) { [data-theme="indigo"]:not([data-color-scheme="light"]) { --primary: #818cf8; --primary-hover: #a5b4fc; --primary-dark: #6366f1; --primary-light: #312e81; --primary-lighter: #4338ca; --accent: #818cf8; --accent-hover: #a5b4fc; --gradient-start: #a5b4fc; --gradient-end: #818cf8; /* Background colors - mörka för dark mode */ --bg: #0f172a; --bg-secondary: #1e293b; --card-bg: #1e293b; --card-bg-hover: #334155; /* Text colors - ljusa för dark mode */ --text: #f1f5f9; --text-secondary: #e2e8f0; --text-muted: #94a3b8; --text-light: #64748b; --text-on-primary: #ffffff; /* Border colors */ --border: #334155; --border-light: #475569; --border-dark: #1e293b; --cta-primary: #a5b4fc; --cta-primary-hover: #818cf8; --cta-primary-dark: #6366f1; --checkbox-primary: #c7d2fe; --checkbox-primary-hover: #a5b4fc; /* Status colors */ --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #818cf8; /* Shadow colors - tydligare skuggor i dark mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); } } /* Manuell dark mode override för indigo */ [data-theme="indigo"][data-color-scheme="dark"] { --primary: #818cf8; --primary-hover: #a5b4fc; --primary-dark: #6366f1; --primary-light: #312e81; --primary-lighter: #4338ca; --accent: #818cf8; --accent-hover: #a5b4fc; --gradient-start: #a5b4fc; --gradient-end: #818cf8; --bg: #0f172a; --bg-secondary: #1e293b; --card-bg: #1e293b; --card-bg-hover: #334155; --text: #f1f5f9; --text-secondary: #e2e8f0; --text-muted: #94a3b8; --text-light: #64748b; --text-on-primary: #ffffff; --border: #334155; --border-light: #475569; --border-dark: #1e293b; --cta-primary: #a5b4fc; --cta-primary-hover: #818cf8; --cta-primary-dark: #6366f1; --checkbox-primary: #c7d2fe; --checkbox-primary-hover: #a5b4fc; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #818cf8; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); } /* ===== FÄRGALTERNATIV: GRÅSKALA ===== */ [data-theme="grayscale"] { --primary: #64748b; --primary-hover: #475569; --primary-dark: #334155; --primary-light: #f1f5f9; --primary-lighter: #f8fafc; --accent: #64748b; --accent-hover: #475569; --gradient-start: #64748b; --gradient-end: #475569; /* CTA - lite mörkare grå */ --cta-primary: #475569; --cta-primary-hover: #334155; --cta-primary-dark: #1e293b; /* Checkbox - lite ljusare grå */ --checkbox-primary: #94a3b8; --checkbox-primary-hover: #64748b; } /* Dark mode för grayscale - OS-Auto */ @media (prefers-color-scheme: dark) { [data-theme="grayscale"]:not([data-color-scheme="light"]) { --primary: #94a3b8; --primary-hover: #64748b; --primary-dark: #475569; --primary-light: #334155; --primary-lighter: #475569; --accent: #94a3b8; --accent-hover: #64748b; --gradient-start: #94a3b8; --gradient-end: #64748b; --cta-primary: #cbd5e1; --cta-primary-hover: #94a3b8; --cta-primary-dark: #64748b; --checkbox-primary: #cbd5e1; --checkbox-primary-hover: #94a3b8; } } /* ===== FÄRGALTERNATIV: ATMOSPHERIC (Pantone 2026) ===== */ [data-theme="atmospheric"] { /* Mjuka, luftiga toner - Periwinkle, Soft Lavender, Misty Blue */ --primary: #9B9BC8; /* Periwinkle */ --primary-hover: #7B7BA8; --primary-dark: #5B5B88; --primary-light: #E8E8F5; --primary-lighter: #F5F5FA; --accent: #9B9BC8; --accent-hover: #7B7BA8; --gradient-start: #B8B8D8; /* Soft Lavender */ --gradient-end: #9B9BC8; /* Periwinkle */ /* CTA - mer lila */ --cta-primary: #B8B8D8; --cta-primary-hover: #9B9BC8; --cta-primary-dark: #7B7BA8; /* Checkbox - mer blå */ --checkbox-primary: #8B8BC8; --checkbox-primary-hover: #7B7BA8; } /* Dark mode för atmospheric - OS-Auto */ @media (prefers-color-scheme: dark) { [data-theme="atmospheric"]:not([data-color-scheme="light"]) { --primary: #B8B8D8; /* Ljusare i dark mode */ --primary-hover: #9B9BC8; --primary-dark: #7B7BA8; --primary-light: #4A4A6A; --primary-lighter: #5B5B88; --accent: #B8B8D8; --accent-hover: #9B9BC8; --gradient-start: #C8C8E8; --gradient-end: #B8B8D8; --cta-primary: #C8C8E8; --cta-primary-hover: #B8B8D8; --cta-primary-dark: #9B9BC8; --checkbox-primary: #D8D8F8; --checkbox-primary-hover: #B8B8D8; } } /* ===== FÄRGALTERNATIV: LIGHT & SHADOW (Pantone 2026) ===== */ [data-theme="light-shadow"] { /* Monokrom, sofistikerad - Charcoal, Slate, Silver */ --primary: #6B6B7B; /* Slate Gray */ --primary-hover: #5B5B6B; --primary-dark: #4A4A5A; --primary-light: #E8E8EB; --primary-lighter: #F0F0F2; --accent: #6B6B7B; --accent-hover: #5B5B6B; --gradient-start: #7B7B8B; /* Ljusare slate */ --gradient-end: #6B6B7B; /* Slate */ /* CTA - mörkare grå */ --cta-primary: #5B5B6B; --cta-primary-hover: #4A4A5A; --cta-primary-dark: #3A3A4A; /* Checkbox - ljusare grå */ --checkbox-primary: #8B8B9B; --checkbox-primary-hover: #6B6B7B; } /* Dark mode för light-shadow - OS-Auto */ @media (prefers-color-scheme: dark) { [data-theme="light-shadow"]:not([data-color-scheme="light"]) { --primary: #ABABBB; /* Silver i dark mode */ --primary-hover: #CBCBDB; --primary-dark: #8B8B9B; --primary-light: #3A3A4A; --primary-lighter: #4A4A5A; --accent: #ABABBB; --accent-hover: #CBCBDB; --gradient-start: #CBCBDB; --gradient-end: #ABABBB; /* Background colors - mörka för dark mode */ --bg: #1a1a1a; --bg-secondary: #2a2a2a; --card-bg: #2a2a2a; --card-bg-hover: #3a3a3a; /* Text colors - ljusa för dark mode */ --text: #e8e8e8; --text-secondary: #d8d8d8; --text-muted: #ababab; --text-light: #8b8b8b; --text-on-primary: #ffffff; /* Border colors */ --border: #3a3a3a; --border-light: #4a4a4a; --border-dark: #2a2a2a; --cta-primary: #CBCBDB; --cta-primary-hover: #ABABBB; --cta-primary-dark: #8B8B9B; --checkbox-primary: #E8E8E8; --checkbox-primary-hover: #CBCBDB; /* Status colors */ --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #ABABBB; /* Shadow colors - tydligare skuggor i dark mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); } } /* Manuell dark mode override för light-shadow */ [data-theme="light-shadow"][data-color-scheme="dark"] { --primary: #ABABBB; --primary-hover: #CBCBDB; --primary-dark: #8B8B9B; --primary-light: #3A3A4A; --primary-lighter: #4A4A5A; --accent: #ABABBB; --accent-hover: #CBCBDB; --gradient-start: #CBCBDB; --gradient-end: #ABABBB; --bg: #1a1a1a; --bg-secondary: #2a2a2a; --card-bg: #2a2a2a; --card-bg-hover: #3a3a3a; --text: #e8e8e8; --text-secondary: #d8d8d8; --text-muted: #ababab; --text-light: #8b8b8b; --text-on-primary: #ffffff; --border: #3a3a3a; --border-light: #4a4a4a; --border-dark: #2a2a2a; --cta-primary: #CBCBDB; --cta-primary-hover: #ABABBB; --cta-primary-dark: #8B8B9B; --checkbox-primary: #E8E8E8; --checkbox-primary-hover: #CBCBDB; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #ABABBB; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); } /* ===== FÄRGALTERNATIV: MATERIAL TEAL (Material Design 3) ===== */ [data-theme="material-teal"] { /* Primary: #007A76 - Material Design 3 baserad palett */ --primary: #007A76; /* Teal primary */ --primary-hover: #006B67; /* Mörkare teal för hover */ --primary-dark: #005A57; /* Mörkare för borders/shadows */ --primary-light: #B2E5E3; /* Ljus teal för bakgrunder */ --primary-lighter: #E0F5F4; /* Mycket ljus teal */ /* Background colors - ljusa för light mode */ --bg: #ffffff; --bg-secondary: #f8fafc; --card-bg: #ffffff; --card-bg-hover: #f1f5f9; /* Text colors - mörka för light mode */ --text: #0f172a; --text-secondary: #1e293b; --text-muted: #64748b; --text-light: #94a3b8; /* Border colors */ --border: #e2e8f0; --border-light: #f1f5f9; --border-dark: #cbd5e1; /* Secondary - komplementär blå-grön */ --secondary: #00695C; --secondary-hover: #005A4F; --secondary-light: #B2DFDB; /* Tertiary - varm accent (orange-röd för kontrast) */ --tertiary: #C85A00; --tertiary-hover: #B04A00; --tertiary-light: #FFE0B2; /* CTA-färger - lite annan nyans (mer cyan) */ --cta-primary: #00A896; /* Ljusare, mer cyan teal */ --cta-primary-hover: #008B7A; --cta-primary-dark: #006B5F; /* Checkbox-färger - lite annan nyans (mer grön) */ --checkbox-primary: #009688; /* Mer grön teal */ --checkbox-primary-hover: #00796B; /* Accent colors */ --accent: #007A76; --accent-hover: #006B67; /* Gradient colors */ --gradient-start: #007A76; --gradient-end: #006B67; /* Shadow colors */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.15); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2); } /* Dark mode för material-teal - OS-Auto */ @media (prefers-color-scheme: dark) { [data-theme="material-teal"]:not([data-color-scheme="light"]) { /* Primary colors - ljusare teal för dark mode */ --primary: #4DB6AC; /* Ljusare teal för dark mode */ --primary-hover: #80CBC4; --primary-dark: #26A69A; --primary-light: #1A4A47; --primary-lighter: #2A5A57; /* Background colors - mörka för dark mode */ --bg: #0f172a; --bg-secondary: #1e293b; --card-bg: #1e293b; --card-bg-hover: #334155; /* Text colors - ljusa för dark mode */ --text: #f1f5f9; --text-secondary: #e2e8f0; --text-muted: #94a3b8; --text-light: #64748b; --text-on-primary: #ffffff; /* Border colors */ --border: #334155; --border-light: #475569; --border-dark: #1e293b; --secondary: #4DB6AC; --secondary-hover: #26A69A; --secondary-light: #1A3A37; --tertiary: #FF8A65; --tertiary-hover: #FF7043; --tertiary-light: #4A2A1A; /* CTA - ljusare i dark mode */ --cta-primary: #4DB6AC; --cta-primary-hover: #26A69A; --cta-primary-dark: #00897B; /* Checkbox - ljusare i dark mode */ --checkbox-primary: #4DB6AC; --checkbox-primary-hover: #26A69A; --accent: #4DB6AC; --accent-hover: #26A69A; --gradient-start: #4DB6AC; --gradient-end: #26A69A; /* Shadow colors - tydligare skuggor i dark mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); } } /* Manuell dark mode override för material-teal */ [data-theme="material-teal"][data-color-scheme="dark"] { --primary: #4DB6AC; --primary-hover: #80CBC4; --primary-dark: #26A69A; --primary-light: #1A4A47; --primary-lighter: #2A5A57; --bg: #0f172a; --bg-secondary: #1e293b; --card-bg: #1e293b; --card-bg-hover: #334155; --text: #f1f5f9; --text-secondary: #e2e8f0; --text-muted: #94a3b8; --text-light: #64748b; --text-on-primary: #ffffff; --border: #334155; --border-light: #475569; --border-dark: #1e293b; --secondary: #4DB6AC; --secondary-hover: #26A69A; --secondary-light: #1A3A37; --tertiary: #FF8A65; --tertiary-hover: #FF7043; --tertiary-light: #4A2A1A; --cta-primary: #4DB6AC; --cta-primary-hover: #26A69A; --cta-primary-dark: #00897B; --checkbox-primary: #4DB6AC; --checkbox-primary-hover: #26A69A; --accent: #4DB6AC; --accent-hover: #26A69A; --gradient-start: #4DB6AC; --gradient-end: #26A69A; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #4DB6AC; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); } /* ===== FÄRGALTERNATIV: CUSTOM BLUE (Användarförslag) ===== */ [data-theme="custom-blue"] { /* Primary: #001F54 - Mörkblå */ --primary: #001F54; --primary-hover: #002A6B; --primary-dark: #00153A; --primary-light: #D7E1E6; --primary-lighter: #E8EDF0; /* Secondary: #EEEF95 - Gul/beige */ --secondary: #EEEF95; --secondary-hover: #E0E185; --secondary-dark: #D4D575; --secondary-light: #F5F6B5; /* Background colors - ljusa för light mode */ --bg: #D7E1E6; --bg-secondary: #E8EDF0; --card-bg: #ffffff; --card-bg-hover: #F5F6F8; /* Text colors - mörka för light mode */ --text: #001F54; --text-secondary: #002A6B; --text-muted: #4A5568; --text-light: #718096; /* Border colors */ --border: #B8C5CC; --border-light: #D7E1E6; --border-dark: #9BA8B0; /* CTA-färger - lite annan nyans (mer cyan) */ --cta-primary: #0066CC; --cta-primary-hover: #0052A3; --cta-primary-dark: #003D7A; /* Checkbox-färger - lite annan nyans (mer grön) */ --checkbox-primary: #004080; --checkbox-primary-hover: #002A6B; /* Accent colors */ --accent: #EEEF95; --accent-hover: #E0E185; /* Gradient colors */ --gradient-start: #001F54; --gradient-end: #002A6B; /* Shadow colors */ --shadow-sm: 0 1px 2px rgba(0, 31, 84, 0.15); --shadow-md: 0 4px 10px rgba(0, 31, 84, 0.25); --shadow-lg: 0 10px 30px rgba(0, 31, 84, 0.35); } /* Dark mode för custom-blue - OS-Auto */ @media (prefers-color-scheme: dark) { [data-theme="custom-blue"]:not([data-color-scheme="light"]) { /* Primary colors - ljusare blå för dark mode */ --primary: #4A90E2; --primary-hover: #357ABD; --primary-dark: #2A5F9E; --primary-light: #1A2A3A; --primary-lighter: #2A3A4A; /* Background colors - mörka för dark mode */ --bg: #282B2C; --bg-secondary: #1E2122; --card-bg: #2F3233; --card-bg-hover: #3A3D3E; /* Text colors - ljusa för dark mode */ --text: #E8EDF0; --text-secondary: #D7E1E6; --text-muted: #9BA8B0; --text-light: #718096; /* Border colors */ --border: #3A3D3E; --border-light: #2F3233; --border-dark: #1E2122; /* Secondary - ljusare i dark mode */ --secondary: #F5F6B5; --secondary-hover: #EEEF95; --secondary-dark: #E0E185; --secondary-light: #F9FAC5; /* CTA - ljusare i dark mode */ --cta-primary: #5BA3F0; --cta-primary-hover: #4A90E2; --cta-primary-dark: #357ABD; /* Checkbox - ljusare i dark mode */ --checkbox-primary: #6BB3FF; --checkbox-primary-hover: #5BA3F0; --accent: #F5F6B5; --accent-hover: #EEEF95; --gradient-start: #4A90E2; --gradient-end: #357ABD; /* Shadow colors - tydligare skuggor i dark mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); } } /* Manuell dark mode override för custom-blue */ [data-theme="custom-blue"][data-color-scheme="dark"] { --primary: #4A90E2; --primary-hover: #5BA3F0; --primary-dark: #357ABD; --primary-light: #1A2A3A; --primary-lighter: #2A3A4A; --bg: #282B2C; --bg-secondary: #1E2122; --card-bg: #2F3233; --card-bg-hover: #3A3D3E; --text: #E8EDF0; --text-secondary: #D7E1E6; --text-muted: #9BA8B0; --text-light: #718096; --text-on-primary: #ffffff; --border: #3A3D3E; --border-light: #2F3233; --border-dark: #1E2122; --secondary: #F5F6B5; --secondary-hover: #EEEF95; --secondary-dark: #E0E185; --secondary-light: #F9FAC5; --cta-primary: #5BA3F0; --cta-primary-hover: #4A90E2; --cta-primary-dark: #357ABD; --checkbox-primary: #6BB3FF; --checkbox-primary-hover: #5BA3F0; --accent: #F5F6B5; --accent-hover: #EEEF95; --gradient-start: #4A90E2; --gradient-end: #357ABD; --success: #10b981; --warning: #f59e0b; --error: #ef4444; --info: #4A90E2; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); } /* ===== FÄRGALTERNATIV: NAVY SCARLET (Användarförslag) ===== */ /* ===== FÄRGALTERNATIV: NAVY SCARLET (Light) ===== */ [data-theme="navy-scarlet"] { /* Primary: #001f54 - Deep Navy */ --primary: #001f54; --primary-hover: #002a6b; --primary-dark: #00153a; --primary-light: #E8EDF0; --primary-lighter: #F0F4F7; /* Secondary: #ff3111 - Scarlet Fire */ --secondary: #ff3111; --secondary-hover: #e62a0f; --secondary-dark: #cc250d; --secondary-light: #FFE5E0; /* Background colors - ljusa för light mode */ --bg: #fff7e8; /* Old Lace */ --bg-secondary: #FFFBF5; --card-bg: #ffffff; --card-bg-hover: #FFF9F0; /* Text colors - mörka för light mode */ --text: #001f54; --text-secondary: #002a6b; --text-muted: #4A5568; --text-light: #718096; /* Border colors */ --border: #E8DCC8; --border-light: #F5EDE0; --border-dark: #D4C4A8; /* CTA-färger - ljusare röd */ --cta-primary: #FF5C3D; --cta-primary-hover: #ff3111; --cta-primary-dark: #e62a0f; /* Checkbox-färger - mörkare röd */ --checkbox-primary: #ff3111; --checkbox-primary-hover: #e62a0f; /* Accent colors - använd secondary för highlights */ --accent: #ff3111; --accent-hover: #e62a0f; /* Gradient colors */ --gradient-start: #001f54; --gradient-end: #002a6b; /* Shadow colors */ --shadow-sm: 0 1px 2px rgba(0, 31, 84, 0.15); --shadow-md: 0 4px 10px rgba(0, 31, 84, 0.25); --shadow-lg: 0 10px 30px rgba(0, 31, 84, 0.35); /* Spacing scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; /* Radius scale */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; /* Focus ring */ --focus-ring: 0 0 0 3px rgba(0, 31, 84, 0.45); /* Navy med opacity för light mode */ /* Icon and chip colors */ --icon-color: #64748b; /* Muted gray för icons i light mode */ --chip-text: #1e293b; /* Dark text för chips i light mode */ --chip-border: #cbd5e1; /* Light border för chips i light mode */ /* Status (light) – om du använder dem */ --success: #16a34a; --warning: #f59e0b; --error: #dc2626; --info: #2563eb; /* Outline buttons - använd primary som standard i light mode */ --outline-primary: var(--primary); --outline-primary-hover: var(--primary-hover); /* Badge primary - använd primary som standard i light mode */ --badge-primary: var(--primary); --badge-primary-text: var(--text-on-primary); /* Text primary - använd primary som standard i light mode */ --text-primary: var(--primary); --text-primary-hover: var(--primary-hover); } /* ===== NAVY SCARLET DARK MODE (OS-auto + manuell) ===== */ /* OS-baserad dark (följer system) */ @media (prefers-color-scheme: dark) { [data-theme="navy-scarlet"]:not([data-color-scheme="light"]) { /* Primary (navy) */ --primary: #0A1A33; --primary-hover: #142544; --primary-dark: #050914; --primary-light: #1C2940; --primary-lighter: #24324C; /* Backgrounds – tydligare hierarki (förbättrad kontrast) */ --bg: #0C0F16; /* mörkast - page background */ --bg-secondary: #11141D; /* sektioner - mörkare för bättre skillnad från bg */ --card-bg: #161B26; /* kort - ljusare för tydligare hierarki */ --card-bg-hover: #1E2431; /* kort hover - ännu ljusare */ /* Text – lite starkare muted */ --text: #E9EDF5; --text-secondary: #CBD5E1; /* Lite ljusare än nu */ --text-muted: #AEB6C8; --text-light: #9098AB; --text-on-primary: #FFFFFF; /* Borders – mer definierade kort */ --border: #1E2230; --border-light: #2C3441; /* Tydligare i dark mode */ --border-dark: #0B0D12; /* Secondary / accent (scarlet) – något dämpad i dark */ --secondary: #FF4A2A; --secondary-hover: #F23F22; --secondary-dark: #C9321A; --secondary-light: #4A1F17; /* CTA – bygger på samma scarlet men lite mjukare */ --cta-primary: #FF5936; --cta-primary-hover: #FF4A2A; --cta-primary-dark: #C9321A; /* Checkbox */ --checkbox-primary: #FF4A2A; --checkbox-primary-hover: #F23F22; /* Accent */ --accent: #FF4A2A; --accent-hover: #F23F22; /* Gradient – mer i linje med övrig navy, inte egen blåvärld */ --gradient-start: #08152A; --gradient-end: #0F2644; /* Status – något klarare grönt för att synas mot navy */ --success: #22D883; --warning: #F2B34A; --error: #FF5A4F; --info: #5EA3F5; /* Shadows - tydligare skuggor i dark mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); /* Spacing scale (samma som light) */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; /* Radius scale (samma som light) */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; /* Focus ring - ljusare för dark mode */ --focus-ring: 0 0 0 3px rgba(90, 150, 255, 0.45); /* Icon and chip colors - ljusare för dark mode */ --icon-color: #B9C6D8; --chip-text: #E4E9F2; --chip-border: #2F3A4A; /* Outline buttons - ljusare navy för bättre synlighet i dark mode */ --outline-primary: #3A5A7A; --outline-primary-hover: #4A6A8A; /* Badge primary - ljusare navy för badges i dark mode (inte scarlet för att inte ta för mycket uppmärksamhet) */ --badge-primary: #3A5A7A; --badge-primary-text: #FFFFFF; /* Text primary - ljusare navy för text i dark mode (används av .text-primary) */ --text-primary: #5A7A9A; --text-primary-hover: #6A8AAA; } } /* Manuell dark override (egen toggle) – samma palette som OS-auto */ [data-theme="navy-scarlet"][data-color-scheme="dark"] { /* Primary (navy) */ --primary: #0A1A33; --primary-hover: #142544; --primary-dark: #050914; --primary-light: #1C2940; --primary-lighter: #24324C; /* Backgrounds – tydligare hierarki (förbättrad kontrast) */ --bg: #0C0F16; /* mörkast - page background */ --bg-secondary: #11141D; /* sektioner - mörkare för bättre skillnad från bg */ --card-bg: #161B26; /* kort - ljusare för tydligare hierarki */ --card-bg-hover: #1E2431; /* kort hover - ännu ljusare */ /* Text */ --text: #E9EDF5; --text-secondary: #CBD5E1; /* Lite ljusare än nu */ --text-muted: #AEB6C8; --text-light: #9098AB; --text-on-primary: #FFFFFF; /* Borders */ --border: #1E2230; --border-light: #2C3441; /* Tydligare i dark mode */ --border-dark: #0B0D12; /* Secondary / accent (scarlet) */ --secondary: #FF4A2A; --secondary-hover: #F23F22; --secondary-dark: #C9321A; --secondary-light: #4A1F17; /* CTA */ --cta-primary: #FF5936; --cta-primary-hover: #FF4A2A; --cta-primary-dark: #C9321A; /* Checkbox */ --checkbox-primary: #FF4A2A; --checkbox-primary-hover: #F23F22; /* Accent */ --accent: #FF4A2A; --accent-hover: #F23F22; /* Gradient – navy-scarlet gradient (inte blå!) */ --gradient-start: #08152A; --gradient-end: #0F2644; /* Status */ --success: #22D883; --warning: #F2B34A; --error: #FF5A4F; --info: #5EA3F5; /* Shadows - tydligare skuggor i dark mode */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.6); /* Spacing scale */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; /* Radius scale */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; /* Focus ring */ --focus-ring: 0 0 0 3px rgba(90, 150, 255, 0.45); /* Icon and chip colors */ --icon-color: #B9C6D8; --chip-text: #E4E9F2; --chip-border: #2F3A4A; /* Outline buttons - ljusare navy för bättre synlighet i dark mode */ --outline-primary: #3A5A7A; --outline-primary-hover: #4A6A8A; /* Badge primary - ljusare navy för badges i dark mode (inte scarlet för att inte ta för mycket uppmärksamhet) */ --badge-primary: #3A5A7A; --badge-primary-text: #FFFFFF; /* Text primary - ljusare navy för text i dark mode (används av .text-primary) */ --text-primary: #5A7A9A; --text-primary-hover: #6A8AAA; } /* ===== KOMPATIBILITET MED BEFINTLIGA VARIABELNAMN ===== */ /* Mappar gamla variabelnamn till nya centraliserade variabler */ /* Wizard/Quickviews variabler */ :root { --wizard-primary: var(--primary); --wizard-bg: var(--bg-secondary); --wizard-card-bg: var(--card-bg); --wizard-text: var(--text); --wizard-muted: var(--text-muted); --wizard-border: var(--border); --wizard-accent: var(--accent); } /* Event/Glide variabler */ :root { --event-primary: var(--primary); --event-bg: var(--bg-secondary); --event-card-bg: var(--card-bg); --event-text: var(--text); --event-muted: var(--text-muted); --event-border: var(--border); --event-accent: var(--accent); --glide-primary: var(--primary); --glide-bg: var(--bg-secondary); --glide-card-bg: var(--card-bg); --glide-text: var(--text); --glide-muted: var(--text-muted); --glide-border: var(--border); --glide-accent: var(--accent); } /* Welcome variabler */ :root { --welcome-primary: var(--primary); --welcome-bg: var(--bg-secondary); --welcome-card-bg: var(--card-bg); --welcome-text: var(--text); --welcome-muted: var(--text-muted); --welcome-border: var(--border); --welcome-accent: var(--accent); } /* ===== BOOTSTRAP OVERRIDES ===== */ /* Överskriv Bootstrap primary-färger med våra variabler */ .btn-primary { background-color: var(--primary); border-color: var(--primary); color: var(--text-on-primary); box-shadow: var(--shadow-sm); border-radius: var(--radius-md); transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .btn-primary:hover:not(:disabled) { background-color: var(--primary-hover); border-color: var(--primary-hover); box-shadow: var(--shadow-md); } .btn-primary:active:not(:disabled) { background-color: var(--primary-dark); border-color: var(--primary-dark); box-shadow: var(--shadow-sm); transform: translateY(1px); } .btn-primary:disabled, .btn-primary[disabled] { background-color: var(--primary); border-color: var(--primary); opacity: 0.5; box-shadow: none; cursor: not-allowed; } .btn-primary:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn-outline-primary { color: var(--outline-primary, var(--primary)); border-color: var(--outline-primary, var(--primary)); background-color: transparent; box-shadow: var(--shadow-sm); border-radius: var(--radius-md); transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .btn-outline-primary:hover:not(:disabled) { background-color: var(--outline-primary-hover, var(--outline-primary, var(--primary-hover))); border-color: var(--outline-primary-hover, var(--outline-primary, var(--primary-hover))); color: var(--text-on-primary); box-shadow: var(--shadow-md); } .btn-outline-primary:active:not(:disabled) { background-color: var(--primary-dark); border-color: var(--primary-dark); box-shadow: var(--shadow-sm); transform: translateY(1px); } .btn-outline-primary:disabled, .btn-outline-primary[disabled] { opacity: 0.5; box-shadow: none; cursor: not-allowed; } .btn-outline-primary:focus-visible { outline: none; box-shadow: var(--focus-ring); } .text-primary { color: var(--text-primary, var(--primary)) !important; } a.text-primary:hover { color: var(--text-primary-hover, var(--primary-hover)) !important; } .bg-primary { background-color: var(--primary) !important; } .border-primary { border-color: var(--primary) !important; } /* ===== CHECKBOX & RADIO STYLING ===== */ /* Överskriv Bootstrap checkbox och radio-färger med våra variabler */ .form-check-input:checked { background-color: var(--checkbox-primary, var(--primary)) !important; border-color: var(--checkbox-primary, var(--primary)) !important; } .form-check-input:focus { border-color: var(--checkbox-primary, var(--primary)) !important; box-shadow: 0 0 0 0.25rem var(--primary-lighter) !important; } /* Accent-color för alla checkboxar och radio buttons */ .form-check-input[type="checkbox"], .form-check-input[type="radio"], input[type="checkbox"], input[type="radio"] { accent-color: var(--checkbox-primary, var(--primary)) !important; } /* Node checkboxar i sport tree */ .node-checkbox, .node-checkbox[type="checkbox"], .sport-tree-item .node-checkbox { accent-color: var(--checkbox-primary, var(--primary)) !important; } /* Radio buttons med btn-check (för vy-val) */ .btn-check:checked + .btn-outline-primary { background-color: var(--outline-primary, var(--cta-primary)) !important; border-color: var(--outline-primary, var(--cta-primary)) !important; color: var(--text-on-primary) !important; } .btn-check:checked + .btn-outline-primary:focus, .btn-check:checked + .btn-outline-primary:active, .btn-check:checked + .btn-outline-primary:hover { background-color: var(--outline-primary-hover, var(--cta-primary-hover)) !important; border-color: var(--outline-primary-hover, var(--cta-primary-hover)) !important; color: var(--text-on-primary) !important; } .btn-check:checked + .btn-primary { background-color: var(--cta-primary) !important; border-color: var(--cta-primary) !important; } /* ===== BOOTSTRAP BUTTON ÖVERSKRIVNING ===== */ /* Alla teman använder --primary färger för .btn-primary */ /* Inga tema-specifika överrides - färger hanteras via CSS-variabler */ /* ===== CTA BUTTON STYLING ===== */ /* CTA-knappar använder separata färger för att sticka ut */ .cta-button, .create-btn, .btn-cta { background: linear-gradient(135deg, var(--cta-primary, var(--primary)) 0%, var(--cta-primary-hover, var(--primary-hover)) 100%) !important; border-color: var(--cta-primary-dark, var(--primary-dark)) !important; color: var(--text-on-primary, #ffffff) !important; box-shadow: var(--shadow-sm); border-radius: var(--radius-md); transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .cta-button:hover:not(:disabled), .create-btn:hover:not(:disabled), .btn-cta:hover:not(:disabled) { background: linear-gradient(135deg, var(--cta-primary-hover, var(--primary-hover)) 0%, var(--cta-primary-dark, var(--primary-dark)) 100%) !important; border-color: var(--cta-primary-dark, var(--primary-dark)) !important; color: var(--text-on-primary, #ffffff) !important; box-shadow: var(--shadow-md); } .cta-button:active:not(:disabled), .create-btn:active:not(:disabled), .btn-cta:active:not(:disabled) { box-shadow: var(--shadow-sm); transform: translateY(1px); } .cta-button:focus-visible, .create-btn:focus-visible, .btn-cta:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ===== GRADIENT HELPERS ===== */ .gradient-primary { background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%); } .gradient-primary-horizontal { background: linear-gradient(to right, var(--gradient-start) 0%, var(--gradient-end) 100%); } /* ===== BODY BACKGROUND ===== */ body { background-color: var(--bg-secondary); color: var(--text); } /* ===== BOOTSTRAP CARD ÖVERSKRIVNING ===== */ .card { background-color: var(--card-bg) !important; border-color: var(--border) !important; box-shadow: var(--shadow-md) !important; } .card:hover { box-shadow: var(--shadow-lg) !important; } .card { background-color: var(--card-bg) !important; border-color: var(--border) !important; color: var(--text) !important; } .card-body { color: var(--text) !important; } /* ===== BOOTSTRAP FORM ELEMENTS ===== */ .form-control, .form-select { background-color: var(--card-bg) !important; border-color: var(--border) !important; color: var(--text) !important; } .form-control:focus, .form-select:focus { background-color: var(--card-bg) !important; border-color: var(--primary) !important; color: var(--text) !important; } .form-control::placeholder { color: var(--text-muted) !important; } /* ===== BOOTSTRAP BADGE ===== */ .badge { background-color: var(--primary) !important; color: var(--text-on-primary) !important; border-radius: var(--radius-sm) !important; } .badge.bg-primary { background-color: var(--badge-primary, var(--primary)) !important; color: var(--badge-primary-text, var(--text-on-primary)) !important; } .badge.bg-secondary { background-color: var(--bg-secondary) !important; color: var(--text) !important; } .badge.bg-dark { background-color: var(--card-bg) !important; color: var(--text) !important; } .badge.bg-light { background-color: var(--card-bg) !important; color: var(--text) !important; } .badge.bg-success { background-color: var(--success) !important; color: var(--bg) !important; } .badge.bg-danger, .badge.bg-error { background-color: var(--error) !important; color: var(--bg) !important; } .badge.bg-warning { background-color: var(--warning) !important; color: var(--text) !important; } /* ===== ALERT WARNING STYLING ===== */ /* Ändra gula varningar till något som passar temat */ .alert-warning { background-color: color-mix(in srgb, var(--secondary) 15%, transparent) !important; border-color: color-mix(in srgb, var(--secondary) 40%, transparent) !important; color: var(--text) !important; } .alert-warning .bi-exclamation-triangle-fill, .alert-warning .bi-exclamation-triangle { color: var(--secondary) !important; } /* ===== ALERT INFO STYLING ===== */ /* Info-boxar ska använda rätt bakgrundsfärg */ .alert-info { background-color: var(--card-bg) !important; border-color: var(--border) !important; color: var(--text) !important; } .alert-info .bi-info-circle { color: var(--primary) !important; } /* ===== BG-LIGHT ÖVERSKRIVNING ===== */ /* bg-light ska använda card-bg istället */ .bg-light { background-color: var(--card-bg) !important; color: var(--text) !important; } /* ===== TABLE RESPONSIVE ===== */ /* Säkerställ att table-responsive använder rätt bakgrund */ .table-responsive { background-color: var(--card-bg) !important; } .table-responsive .table { background-color: var(--card-bg) !important; } /* ===== TABLE RESPONSIVE ===== */ /* Säkerställ att table-responsive använder rätt bakgrund */ .table-responsive { background-color: var(--card-bg) !important; } .table-responsive .table { background-color: var(--card-bg) !important; } /* ===== GLIDE HEADER FIX ===== */ .glide-header { background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%) !important; } /* ===== ÖVERSKRIV BOOTSTRAP TEXT-FÄRGER ===== */ /* Säkerställ att Bootstrap text-klasser använder våra färgvariabler */ .text-muted { color: var(--text-muted) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-light { color: var(--text-light) !important; } /* ===== ÖVERSKRIV BOOTSTRAP BACKGROUND-FÄRGER ===== */ /* Säkerställ att Bootstrap background-klasser använder våra färgvariabler */ .bg-secondary { background-color: var(--bg-secondary) !important; color: var(--text) !important; } .bg-dark { background-color: var(--card-bg) !important; color: var(--text) !important; } .bg-white { background-color: var(--card-bg) !important; color: var(--text) !important; } /* ===== ÖVERSKRIV BOOTSTRAP BUTTON-FÄRGER ===== */ .btn-secondary { background-color: var(--bg-secondary) !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: var(--shadow-sm); border-radius: var(--radius-md); transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .btn-secondary:hover:not(:disabled) { background-color: var(--card-bg-hover) !important; border-color: var(--border-light) !important; color: var(--text) !important; box-shadow: var(--shadow-md); } .btn-secondary:active:not(:disabled) { background-color: var(--card-bg) !important; border-color: var(--border) !important; box-shadow: var(--shadow-sm); transform: translateY(1px); } .btn-secondary:disabled, .btn-secondary[disabled] { opacity: 0.5; box-shadow: none; cursor: not-allowed; } .btn-secondary:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn-outline-secondary { color: var(--text) !important; border-color: var(--border) !important; background-color: transparent; box-shadow: var(--shadow-sm); border-radius: var(--radius-md); transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .btn-outline-secondary:hover:not(:disabled) { background-color: var(--bg-secondary) !important; border-color: var(--border) !important; color: var(--text) !important; box-shadow: var(--shadow-md); } .btn-outline-secondary:active:not(:disabled) { background-color: var(--card-bg) !important; box-shadow: var(--shadow-sm); transform: translateY(1px); } .btn-outline-secondary:disabled, .btn-outline-secondary[disabled] { opacity: 0.5; box-shadow: none; cursor: not-allowed; } .btn-outline-secondary:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Säkerställ att alla paragraf och text-element använder rätt färg */ p, span, div, li, td, th { color: var(--text); } /* Säkerställ att länkar använder primary-färg */ /* ===== GRUNDLÄGGANDE HTML-ELEMENT ===== */ /* Länkar */ a { color: var(--primary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--primary-hover); text-decoration: underline; } /* CTA-knappar ska alltid ha vit text, även om de är länkar */ a.cta-button, a.create-btn, a.btn-cta, button.cta-button, button.create-btn, button.btn-cta { color: var(--text-on-primary, #ffffff) !important; } a.cta-button:hover, a.create-btn:hover, a.btn-cta:hover, button.cta-button:hover, button.create-btn:hover, button.btn-cta:hover { color: var(--text-on-primary, #ffffff) !important; } a:visited { color: var(--primary); } a:focus { outline: 2px solid var(--primary); outline-offset: 2px; } /* Paragraf och textblock */ p { color: var(--text); margin-bottom: 1rem; } /* Listor */ ul, ol { color: var(--text); margin-bottom: 1rem; } li { color: var(--text); margin-bottom: 0.5rem; } /* Textformatering */ strong, b { color: var(--text); font-weight: 600; } em, i { color: var(--text); font-style: italic; } /* Blockquote */ blockquote { color: var(--text-secondary); border-left: 4px solid var(--primary); padding-left: 1rem; margin: 1rem 0; background-color: var(--bg-secondary); padding: 1rem; border-radius: 0.25rem; } /* Code */ code { color: var(--text); background-color: var(--bg-secondary); padding: 0.2rem 0.4rem; border-radius: 0.25rem; font-family: 'Courier New', monospace; font-size: 0.9em; } pre { color: var(--text); background-color: var(--bg-secondary); padding: 1rem; border-radius: 0.5rem; overflow-x: auto; border: 1px solid var(--border); } pre code { background-color: transparent; padding: 0; } /* Mark/highlight */ mark { background-color: var(--primary-lighter); color: var(--text); padding: 0.1rem 0.2rem; } /* Small text */ small { color: var(--text-muted); font-size: 0.875em; } /* Överskriv Bootstrap table-färger */ .table { color: var(--text) !important; } .table td, .table th { color: var(--text) !important; border-color: var(--border) !important; } .table thead th { background-color: var(--bg-secondary) !important; color: var(--text) !important; border-color: var(--border) !important; } /* ===== ÖVERSKRIV BOOTSTRAP TABLE-DARK ===== */ .table-dark, .table-dark > th, .table-dark > td { background-color: var(--bg-secondary) !important; color: var(--text) !important; border-color: var(--border) !important; } .table-dark thead th { background-color: var(--card-bg) !important; color: var(--text) !important; border-color: var(--border) !important; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--bg-secondary) !important; } .table-striped > tbody > tr:nth-of-type(even) { background-color: var(--card-bg) !important; } .table-hover > tbody > tr:hover { background-color: var(--card-bg-hover) !important; } /* Förbättrad tabell-styling för navy-scarlet dark mode */ /* Överskriv Bootstrap's --bs-table-bg variabel */ @media (prefers-color-scheme: dark) { [data-theme="navy-scarlet"]:not([data-color-scheme="light"]), [data-theme="navy-scarlet"][data-color-scheme="dark"] { --bs-table-bg: var(--card-bg) !important; --bs-table-striped-bg: var(--bg-secondary) !important; --bs-table-hover-bg: var(--card-bg-hover) !important; --bs-table-border-color: var(--border) !important; } } @media (prefers-color-scheme: dark) { [data-theme="navy-scarlet"]:not([data-color-scheme="light"]) .table tbody tr, [data-theme="navy-scarlet"][data-color-scheme="dark"] .table tbody tr { color: var(--text) !important; } /* Överskriv bakgrund - ärv från eller använd transparent */ [data-theme="navy-scarlet"]:not([data-color-scheme="light"]) .table tbody td, [data-theme="navy-scarlet"][data-color-scheme="dark"] .table tbody td { background-color: inherit !important; } [data-theme="navy-scarlet"]:not([data-color-scheme="light"]) .table-dark thead th, [data-theme="navy-scarlet"][data-color-scheme="dark"] .table-dark thead th { background-color: var(--primary) !important; color: var(--text-on-primary) !important; } /* Striped rows - säkerställ att både och får rätt bakgrund */ [data-theme="navy-scarlet"]:not([data-color-scheme="light"]) .table-striped > tbody > tr:nth-of-type(odd), [data-theme="navy-scarlet"][data-color-scheme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--card-bg) !important; } [data-theme="navy-scarlet"]:not([data-color-scheme="light"]) .table-striped > tbody > tr:nth-of-type(odd) td, [data-theme="navy-scarlet"][data-color-scheme="dark"] .table-striped > tbody > tr:nth-of-type(odd) td { background-color: var(--card-bg) !important; } [data-theme="navy-scarlet"]:not([data-color-scheme="light"]) .table-striped > tbody > tr:nth-of-type(even), [data-theme="navy-scarlet"][data-color-scheme="dark"] .table-striped > tbody > tr:nth-of-type(even) { background-color: var(--bg-secondary) !important; } [data-theme="navy-scarlet"]:not([data-color-scheme="light"]) .table-striped > tbody > tr:nth-of-type(even) td, [data-theme="navy-scarlet"][data-color-scheme="dark"] .table-striped > tbody > tr:nth-of-type(even) td { background-color: var(--bg-secondary) !important; } /* Hover state */ [data-theme="navy-scarlet"]:not([data-color-scheme="light"]) .table-hover > tbody > tr:hover, [data-theme="navy-scarlet"][data-color-scheme="dark"] .table-hover > tbody > tr:hover { background-color: var(--card-bg-hover) !important; } [data-theme="navy-scarlet"]:not([data-color-scheme="light"]) .table-hover > tbody > tr:hover td, [data-theme="navy-scarlet"][data-color-scheme="dark"] .table-hover > tbody > tr:hover td { background-color: var(--card-bg-hover) !important; } } /* ===== BOOTSTRAP MODAL ÖVERSKRIVNING ===== */ /* Modal dark mode fixes */ .modal-content { background: var(--card-bg) !important; color: var(--text) !important; } .modal-header.bg-primary { background: var(--primary) !important; color: var(--text-on-primary) !important; } .modal-body { background: var(--card-bg) !important; color: var(--text) !important; } .modal-footer { background: var(--card-bg) !important; border-top-color: var(--border) !important; } /* Fix för bg-light i modal i dark mode */ @media (prefers-color-scheme: dark) { [data-theme="navy-scarlet"]:not([data-color-scheme="light"]) .modal-body .bg-light, [data-theme="navy-scarlet"][data-color-scheme="dark"] .modal-body .bg-light { background: var(--bg-secondary) !important; color: var(--text) !important; } [data-theme="navy-scarlet"]:not([data-color-scheme="light"]) .modal-body .bg-primary.bg-opacity-10, [data-theme="navy-scarlet"][data-color-scheme="dark"] .modal-body .bg-primary.bg-opacity-10 { background: color-mix(in srgb, var(--primary) 10%, var(--card-bg)) !important; color: var(--text) !important; } } /* ===== FOCUS STATES ===== */ /* Generell focus-regel för knappar och inputs */ button:focus-visible, .btn:focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-outline-primary:focus-visible, .btn-outline-secondary:focus-visible, input:focus-visible, .form-control:focus-visible, select:focus-visible, .form-select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ===== CHIP/BADGE STYLING ===== */ /* Förbättra kontrast i dark mode */ .badge:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-warning):not(.bg-danger):not(.bg-info), .chip:not(.bg-primary):not(.bg-secondary), .filter-chip:not(.btn-primary), .sport-category-chip:not(.btn-primary), .sport-chip:not(.btn-primary), .event-series-chip:not(.btn-primary), .quickview-badge { color: var(--chip-text, var(--text)) !important; border-color: var(--chip-border, var(--border)) !important; } .badge, .chip, .filter-chip, .sport-category-chip, .sport-chip, .event-series-chip, .quickview-badge { border-radius: var(--radius-sm) !important; } /* ===== ICON STYLING ===== */ /* Generell ikonfärg - kan överskrivas av specifika komponenter */ .bi, i[class*="bi-"], .icon, [class*="icon"] { color: var(--icon-color, var(--text-muted)); } /* Ikoner på primary bakgrund */ .bg-primary .bi, .bg-primary i[class*="bi-"], .btn-primary .bi, .btn-primary i[class*="bi-"], .cta-button .bi, .cta-button i[class*="bi-"], .create-btn .bi, .create-btn i[class*="bi-"], .btn-cta .bi, .btn-cta i[class*="bi-"], .wizard-header .bi, .wizard-header i[class*="bi-"], .welcome-hero .bi, .welcome-hero i[class*="bi-"], .filter-header .bi, .filter-header i[class*="bi-"] { color: var(--text-on-primary) !important; } /* Ikoner i text */ .text-primary .bi, .text-primary i[class*="bi-"] { color: var(--text-primary, var(--primary)); } /* Ikoner i component-info och liknande */ .component-info .bi, .component-info i[class*="bi-"], .component-demo .bi, .component-demo i[class*="bi-"] { color: var(--icon-color, var(--text-muted)); } /* ===== HERO SECTION (WELCOME/WIZARD HEADER) ===== */ /* Gemensam styling för hero-sektioner på alla sidor */ .welcome-hero, .wizard-header { background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%); color: var(--text-on-primary) !important; padding: 3rem var(--space-md); margin: 0 0 var(--space-xl) 0; text-align: center; border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-md); } .welcome-hero *, .wizard-header * { color: var(--text-on-primary) !important; } .welcome-hero h1, .wizard-header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; } .welcome-hero p, .wizard-header p { font-size: 1rem; opacity: 0.95; margin: 0; } @media (max-width: 576px) { .welcome-hero, .wizard-header { padding: 2rem var(--space-md); margin: 0 0 var(--space-xl) 0; border-radius: 0; } } /* ===== BOOTSTRAP TEXT UTILITIES ===== */ .text-primary { color: var(--text-primary, var(--primary)) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-success { color: var(--success) !important; } .text-danger { color: var(--error) !important; } .text-warning { color: var(--warning) !important; } .text-info { color: var(--info) !important; } /* ===== BOOTSTRAP LIST GROUP ===== */ .list-group-item { background-color: var(--card-bg) !important; border-color: var(--border) !important; color: var(--text) !important; } .list-group-item:hover { background-color: var(--card-bg-hover) !important; } .list-group-item.active { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--text-on-primary) !important; } /* ===== BOOTSTRAP ALERT ===== */ .alert { background-color: var(--bg-secondary) !important; border-color: var(--border) !important; color: var(--text) !important; } .alert-primary { background-color: var(--primary-lighter) !important; border-color: var(--primary) !important; color: var(--text) !important; } .alert-success { background-color: color-mix(in srgb, var(--success) 15%, var(--bg-secondary)) !important; border-color: var(--success) !important; color: var(--text) !important; } .alert-danger { background-color: color-mix(in srgb, var(--error) 15%, var(--bg-secondary)) !important; border-color: var(--error) !important; color: var(--text) !important; } .alert-warning { background-color: color-mix(in srgb, var(--warning) 15%, var(--bg-secondary)) !important; border-color: var(--warning) !important; color: var(--text) !important; } .alert-info { background-color: color-mix(in srgb, var(--info) 15%, var(--bg-secondary)) !important; border-color: var(--info) !important; color: var(--text) !important; } /* ===== ÖVERSKRIV BOOTSTRAP INPUT GROUP ===== */ .input-group-text { background-color: var(--bg-secondary) !important; border-color: var(--border) !important; color: var(--text) !important; } /* ===== ÖVERSKRIV BOOTSTRAP LIST GROUP ===== */ .list-group-item { background-color: var(--card-bg) !important; border-color: var(--border) !important; color: var(--text) !important; } .list-group-item.active { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--text-on-primary) !important; }