/* ===========================
   Custom Themes for API-SPORTS Widgets
   =========================== */

/* Dark Theme (Default) */
body.dark-theme,
api-sports-widget[data-theme="custom-dark"] {
    --primary-color: #00a8ff;
    --success-color: #2ecc71;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --background-color: #1a1a2e;
    --text-color: #eaeaea;
    --border-color: #2d2d44;
    --card-background: #16161f;
    
    color-scheme: dark;
}

/* Light Theme */
body.light-theme,
api-sports-widget[data-theme="custom-light"] {
    --primary-color: #0074b1;
    --success-color: #27ae60;
    --danger-color: #c0392b;
    --warning-color: #d68910;
    --background-color: #ffffff;
    --text-color: #2c3e50;
    --border-color: #bdc3c7;
    --card-background: #ecf0f1;
    
    color-scheme: light;
}

/* Blue Theme */
body.blue-theme,
api-sports-widget[data-theme="custom-blue"] {
    --primary-color: #3498db;
    --success-color: #1abc9c;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --background-color: #1f3a62;
    --text-color: #ecf0f1;
    --border-color: #34495e;
    --card-background: #2d5183;
}

/* Green Theme */
body.green-theme,
api-sports-widget[data-theme="custom-green"] {
    --primary-color: #2ecc71;
    --success-color: #27ae60;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --background-color: #0d3318;
    --text-color: #ecf0f1;
    --border-color: #1d4d2a;
    --card-background: #1a4d24;
}

/* Red Theme */
body.red-theme,
api-sports-widget[data-theme="custom-red"] {
    --primary-color: #e74c3c;
    --success-color: #27ae60;
    --danger-color: #c0392b;
    --warning-color: #f39c12;
    --background-color: #3a1515;
    --text-color: #ecf0f1;
    --border-color: #5c2020;
    --card-background: #4d1f1f;
}

/* Purple Theme */
body.purple-theme,
api-sports-widget[data-theme="custom-purple"] {
    --primary-color: #9b59b6;
    --success-color: #1abc9c;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --background-color: #2d1b4e;
    --text-color: #ecf0f1;
    --border-color: #44285d;
    --card-background: #3d2861;
}

/* Orange Theme */
body.orange-theme,
api-sports-widget[data-theme="custom-orange"] {
    --primary-color: #e67e22;
    --success-color: #27ae60;
    --danger-color: #c0392b;
    --warning-color: #d68910;
    --background-color: #3d2416;
    --text-color: #ecf0f1;
    --border-color: #5c3820;
    --card-background: #4d3623;
}

/* ===========================
   Widget Customization
   =========================== */

/* Games Widget */
api-sports-widget[data-type="games"] {
    --widget-bg: var(--card-background);
    --widget-text: var(--text-color);
    --widget-border: var(--border-color);
    --widget-hover: var(--primary-color);
    --widget-success: var(--success-color);
    --widget-danger: var(--danger-color);
    
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}

/* Standings Widget */
api-sports-widget[data-type="standings"] {
    --widget-bg: var(--card-background);
    --widget-text: var(--text-color);
    --widget-header-bg: var(--primary-color);
    --widget-header-text: #ffffff;
    --widget-border: var(--border-color);
    
    border-radius: 8px;
    overflow: hidden;
}

/* Fixtures Widget */
api-sports-widget[data-type="fixtures"] {
    --widget-bg: var(--card-background);
    --widget-text: var(--text-color);
    --widget-border: var(--border-color);
    
    border-radius: 8px;
}

/* Players Widget */
api-sports-widget[data-type="players"] {
    --widget-bg: var(--card-background);
    --widget-text: var(--text-color);
    --widget-border: var(--border-color);
    
    border-radius: 8px;
}

/* ===========================
   Widget Dark Mode Override
   =========================== */

api-sports-widget[data-theme*="dark"] {
    --api-bg-primary: #1a1a2e;
    --api-bg-secondary: #16161f;
    --api-text-primary: #eaeaea;
    --api-text-secondary: #b0b0b0;
    --api-border: #2d2d44;
    --api-accent: #00a8ff;
}

api-sports-widget[data-theme*="light"] {
    --api-bg-primary: #ffffff;
    --api-bg-secondary: #f9f9f9;
    --api-text-primary: #2c3e50;
    --api-text-secondary: #7f8c8d;
    --api-border: #bdc3c7;
    --api-accent: #0074b1;
}

/* ===========================
   Transitions Between Themes
   =========================== */

body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

:root {
    transition: --primary-color 0.3s ease, --background-color 0.3s ease;
}

/* ===========================
   Theme-Specific Adjustments
   =========================== */

/* Dark theme adjustments */
body.dark-theme .header {
    background-color: rgba(22, 22, 31, 0.95);
    backdrop-filter: blur(10px);
}

body.dark-theme .footer {
    background-color: rgba(22, 22, 31, 0.95);
}

/* Light theme adjustments */
body.light-theme .header {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body.light-theme input,
body.light-theme textarea,
body.light-theme select {
    background-color: #f5f5f5;
    border-color: #ddd;
    color: #333;
}

body.light-theme input:focus,
body.light-theme textarea:focus,
body.light-theme select:focus {
    background-color: #ffffff;
    border-color: #0074b1;
}

/* ===========================
   Cards Styling by Theme
   =========================== */

.league-card,
.game-card,
.team-card {
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
}

.league-card:hover,
.game-card:hover,
.team-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 168, 255, 0.2);
}

/* ===========================
   Scroll Bar Styling
   =========================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

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

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

/* Firefox */
* {
    scrollbar-color: var(--primary-color) var(--bg-secondary);
    scrollbar-width: thin;
}

/* ===========================
   Selection Styling
   =========================== */

::selection {
    background-color: var(--primary-color);
    color: var(--white-color);
}

::-moz-selection {
    background-color: var(--primary-color);
    color: var(--white-color);
}