/* ========================================
   PERFORMANCE OPTIMALISATIES
   Toegevoegd door website_fixes_script.py
======================================== */

/* Preload belangrijke fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* Optimaliseer animaties voor betere performance */
* {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Verbeter scroll performance */
html {
    scroll-behavior: smooth;
}

/* Optimaliseer hover effecten */
.knop-nederland,
.btn {
    will-change: transform;
}

/* Reduce repaints */
.dutch-message {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ========================================
======================================== */

/* duplicate body/navbar block removed — original definitions remain earlier in the file */
/* (This block was repeated; consolidated to a single definition to reduce duplication) */

body {
    margin: 0 !important;
    padding: 0 !important;
    background: #f5f5f5 !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.nav-user {
color: #ecf0f1 !important;
font-weight: 500 !important;
padding: 8px 15px !important;
}

.admin-badge {
background-color: #dc3545 !important;
color: white !important;
padding: 2px 6px !important;
border-radius: 3px !important;
font-size: 0.8em !important;
margin-left: 5px !important;
}

.nav-dropdown {
position: relative !important;
display: inline-block !important;
}

/* ================================================================================ */

.navbar, .navbar *, .nav-container, .nav-container *, .nav-menu, .nav-menu * {
color: #fff !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
-webkit-text-fill-color: #fff !important;
background-clip: initial !important;
-webkit-background-clip: initial !important;
}

.nav-brand, .navbar .nav-brand {
color: #3498db !important;
opacity: 1 !important;
visibility: visible !important;
-webkit-text-fill-color: #3498db !important;
}

.competitions-hero, .competitions-hero *, .hero-section, .hero-section * {
color: #fff !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
-webkit-text-fill-color: #fff !important;
background-clip: initial !important;
-webkit-background-clip: initial !important;
}

.competitions-hero .hero-text p {
opacity: 0.9 !important;
}

.competition-card .competition-dates,
.card .competition-dates,
*[class*="date"]:not(.navbar *):not(.competitions-hero *) {
color: #64748b !important;
background: none !important;
opacity: 1 !important;
visibility: visible !important;
-webkit-text-fill-color: #64748b !important;
}

.competition-title:not(.navbar *):not(.competitions-hero *),
.competition-card h3:not(.navbar *):not(.competitions-hero *) {
color: #1e293b !important;
background: none !important;
opacity: 1 !important;
visibility: visible !important;
-webkit-text-fill-color: #1e293b !important;
}

.flash-messages {
position: fixed;
top: 20px;
right: 20px;
z-index: 10500;
max-width: 400px;
}

.alert {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
margin-bottom: 0.75rem;
border-radius: 10px;
font-weight: 500;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    animation: slideInFromRight 0.3s ease;
}

@keyframes slideInFromRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

.alert-success {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
border-left: 4px solid #047857;
}

.alert-danger {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
border-left: 4px solid #b91c1c;
}

.alert-warning {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
border-left: 4px solid #b45309;
}

.alert-info {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
border-left: 4px solid #1d4ed8;
}

.alert-close {
background: none;
border: none;
color: inherit;
font-size: 1.25rem;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.3s ease;
}

.alert-close:hover {
background: rgba(255,255,255,0.2);
}

@media (max-width: 768px) {
.nav-container {
flex-direction: column !important;
gap: 1rem !important;
padding: 1rem !important;
}

.nav-menu {
justify-content: center !important;
width: 100% !important;
}

.nav-link {
font-size: 0.9rem !important;
padding: 6px 12px !important;
}

.flash-messages {
position: relative;
top: auto;
right: auto;
max-width: none;
margin: 1rem;
}
}

/* ========================================
======================================== */

.dropdown-content {
display: none !important;
position: absolute !important;
background-color: #2c3e50 !important;
background: #2c3e50 !important;
min-width: 180px !important;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4) !important;
z-index: 99999 !important;
border-radius: 8px !important;
overflow: hidden !important;
top: 100% !important;
right: 0 !important;
border: 2px solid #34495e !important;
margin-top: 2px !important;
}

.nav-dropdown:hover .dropdown-content {
display: block !important;
}

.dropdown-content a,
.dropdown-content a:link,
.dropdown-content a:visited,
.dropdown-content a:active,
.dropdown-content a:any-link {
color: #ffffff !important;
background-color: transparent !important;
background: transparent !important;
padding: 14px 18px !important;
text-decoration: none !important;
display: block !important;
transition: all 0.3s ease !important;
opacity: 1 !important;
visibility: visible !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: none !important;
font-weight: 500 !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.dropdown-content a:last-child {
border-bottom: none !important;
}

.dropdown-content a:hover,
.dropdown-content a:focus {
background-color: #3498db !important;
background: #3498db !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-decoration: none !important;
transform: translateX(2px) !important;
}

.navbar .dropdown-content a,
.nav-container .dropdown-content a,
.nav-menu .dropdown-content a,
.navbar .nav-dropdown .dropdown-content a {
color: #ffffff !important;
background: transparent !important;
-webkit-text-fill-color: #ffffff !important;
}

.navbar .dropdown-content a:hover,
.nav-container .dropdown-content a:hover,
.nav-menu .dropdown-content a:hover {
background: #3498db !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}

.dropdown-content *,
.dropdown-content a *,
.dropdown-content span,
.dropdown-content i,
.dropdown-content em,
.dropdown-content strong {
color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: none !important;
}

.dropdown-content a:hover *,
.dropdown-content a:hover span,
.dropdown-content a:hover i {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}

/* ========================================
======================================== */

body {
margin: 0 !important;
padding: 0 !important;
background: #f5f5f5 !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.navbar {
position: static !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
background: #2c3e50 !important;
color: white !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
z-index: 9999 !important;
display: block !important;
float: none !important;
clear: both !important;
}

.nav-container {
max-width: 1200px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
padding: 1rem 20px !important;
flex-wrap: wrap !important;
}

.nav-brand {
font-size: 1.8em !important;
font-weight: bold !important;
color: #3498db !important;
text-decoration: none !important;
order: 1 !important;
}

.nav-menu {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 20px !important;
flex-wrap: wrap !important;
order: 2 !important;
}

.nav-link {
color: white !important;
text-decoration: none !important;
padding: 8px 15px !important;
border-radius: 5px !important;
transition: background-color 0.3s !important;
}

.nav-link:hover {
background: #3498db !important;
color: white !important;
text-decoration: none !important;
}

.nav-link.active {
background: #2980b9 !important;
}

.nav-user {
color: #ecf0f1 !important;
font-weight: 500 !important;
padding: 8px 15px !important;
}

.admin-badge {
background-color: #dc3545 !important;
color: white !important;
padding: 2px 6px !important;
border-radius: 3px !important;
font-size: 0.8em !important;
margin-left: 5px !important;
}

.nav-dropdown {
position: relative !important;
display: inline-block !important;
}

.dropdown-content {
display: none !important;
position: absolute !important;
background-color: #2c3e50 !important;
background: #2c3e50 !important;
min-width: 180px !important;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4) !important;
z-index: 99999 !important;
border-radius: 8px !important;
overflow: hidden !important;
top: 100% !important;
right: 0 !important;
border: 2px solid #34495e !important;
margin-top: 2px !important;
}

.nav-dropdown:hover .dropdown-content {
display: block !important;
}

.dropdown-content a,
.dropdown-content a:link,
.dropdown-content a:visited,
.dropdown-content a:active,
.dropdown-content a:any-link {
color: #ffffff !important;
background-color: transparent !important;
background: transparent !important;
padding: 14px 18px !important;
text-decoration: none !important;
display: block !important;
transition: all 0.3s ease !important;
opacity: 1 !important;
visibility: visible !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: none !important;
font-weight: 500 !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

.dropdown-content a:last-child {
border-bottom: none !important;
}

.dropdown-content a:hover,
.dropdown-content a:focus {
background-color: #3498db !important;
background: #3498db !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-decoration: none !important;
transform: translateX(2px) !important;
}

.navbar .dropdown-content a,
.nav-container .dropdown-content a,
.nav-menu .dropdown-content a,
.navbar .nav-dropdown .dropdown-content a {
color: #ffffff !important;
background: transparent !important;
-webkit-text-fill-color: #ffffff !important;
}

.navbar .dropdown-content a:hover,
.nav-container .dropdown-content a:hover,
.nav-menu .dropdown-content a:hover {
background: #3498db !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}

.dropdown-content *,
.dropdown-content a *,
.dropdown-content span,
.dropdown-content i,
.dropdown-content em,
.dropdown-content strong {
color: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
-webkit-text-fill-color: #ffffff !important;
text-shadow: none !important;
}

.dropdown-content a:hover *,
.dropdown-content a:hover span,
.dropdown-content a:hover i {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}

/* ========================================
======================================== */

.navbar, .navbar *, .nav-container, .nav-container *, .nav-menu, .nav-menu * {
color: #fff !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: none !important;
-webkit-text-fill-color: #fff !important;
background-clip: initial !important;
-webkit-background-clip: initial !important;
}

.nav-brand, .navbar .nav-brand {
color: #3498db !important;
opacity: 1 !important;
visibility: visible !important;
-webkit-text-fill-color: #3498db !important;
}

/* HERO SECTION TEKST WIT */
.competitions-hero, .competitions-hero *, .hero-section, .hero-section * {
color: #fff !important;
opacity: 1 !important;
visibility: visible !important;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
-webkit-text-fill-color: #fff !important;
background-clip: initial !important;
-webkit-background-clip: initial !important;
}

.competitions-hero .hero-text p {
opacity: 0.9 !important;
}

.competition-card .competition-dates,
.card .competition-dates,
*[class*="date"]:not(.navbar *):not(.competitions-hero *) {
color: #64748b !important;
background: none !important;
opacity: 1 !important;
visibility: visible !important;
-webkit-text-fill-color: #64748b !important;
}

.competition-title:not(.navbar *):not(.competitions-hero *),
.competition-card h3:not(.navbar *):not(.competitions-hero *),
.competition-card h1:not(.navbar *):not(.competitions-hero *),
.competition-card h2:not(.navbar *):not(.competitions-hero *) {
color: #1e293b !important;
background: none !important;
opacity: 1 !important;
visibility: visible !important;
-webkit-text-fill-color: #1e293b !important;
}

/* ========================================
======================================== */

.flash-messages {
position: fixed;
top: 20px;
right: 20px;
z-index: 10500;
max-width: 400px;
}

/* duplicated alert block removed — original kept earlier (uses slideInFromRight) */

/* duplicate slideIn (removed) */
/* original behaviour moved to slideInFromRight */

.alert-success {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
border-left: 4px solid #047857;
}

.alert-danger {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
border-left: 4px solid #b91c1c;
}

.alert-warning {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
border-left: 4px solid #b45309;
}

.alert-info {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
border-left: 4px solid #1d4ed8;
}

.alert-close {
background: none;
border: none;
color: inherit;
font-size: 1.25rem;
cursor: pointer;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.3s ease;
}

.alert-close:hover {
background: rgba(255,255,255,0.2);
}

/* ========================================
======================================== */

@media (max-width: 768px) {
.nav-container {
flex-direction: column !important;
gap: 1rem !important;
padding: 1rem !important;
}

.nav-menu {
justify-content: center !important;
width: 100% !important;
}

.nav-link {
font-size: 0.9rem !important;
padding: 6px 12px !important;
}

.flash-messages {
position: relative;
top: auto;
right: auto;
max-width: none;
margin: 1rem;
}
}

/* ========================================
======================================== */

* {
opacity: 1 !important;
visibility: visible !important;
}

.dropdown-content {
display: none !important;
}

.nav-dropdown:hover .dropdown-content {
display: block !important;
}

.navbar *, .nav-container *, .nav-menu * {
-webkit-text-stroke: none !important;
text-stroke: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
}

.nav-link, .nav-user, .dropdown-toggle {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
}

.nav-brand {
color: #3498db !important;
-webkit-text-fill-color: #3498db !important;
}

/* ========================================
======================================== */

/* ========================================
======================================== */

.score-overview-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.score-hero {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
color: white;
padding: 32px 24px;
border-radius: 16px;
margin-bottom: 24px;
text-align: center;
position: relative;
overflow: hidden;
}

.score-hero::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: float 6s ease-in-out infinite;
}

@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}

.score-hero h1 {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.score-hero p {
font-size: 1.1rem;
opacity: 0.9;
margin-bottom: 0;
}

.quick-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin-bottom: 32px;
}

.stat-card {
background: white;
border-radius: 12px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.stat-card-link {
display: block;
color: inherit;
transition: all 0.3s ease;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card-link:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.stat-card-link .stat-icon {
font-size: 3rem;
filter: brightness(0) invert(1);
}

.stat-card-link .stat-label {
color: white !important;
}

.stat-number {
font-size: 2rem;
font-weight: bold;
color: #059669;
margin-bottom: 8px;
}

.stat-label {
color: #6b7280;
font-weight: 500;
font-size: 0.9rem;
}

.poules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
margin-bottom: 32px;
}

.poule-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.poule-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.poule-header {
padding: 20px;
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
}

.poule-title {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 8px;
}

.poule-subtitle {
opacity: 0.9;
font-size: 0.9rem;
}

.poule-body {
padding: 20px;
}

.progress-section {
margin-bottom: 16px;
}

.progress-bar {
background: #f3f4f6;
border-radius: 8px;
height: 8px;
overflow: hidden;
margin-bottom: 8px;
}

.progress-fill {
height: 100%;
background: linear-gradient(90deg, #059669, #10b981);
border-radius: 8px;
transition: width 0.3s ease;
}

.progress-text {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: #6b7280;
}

.poule-actions {
display: flex;
gap: 8px;
}

.btn-poule {
flex: 1;
padding: 10px 16px;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
text-align: center;
transition: all 0.2s ease;
font-size: 0.9rem;
}

.btn-primary {
background: #059669;
color: white;
border: none;
}

.btn-primary:hover {
background: #047857;
transform: translateY(-1px);
color: white;
text-decoration: none;
}

.btn-outline {
background: transparent;
color: #374151;
border: 1px solid #e5e7eb;
}

.btn-outline:hover {
background: #f9fafb;
border-color: #d1d5db;
color: #374151;
text-decoration: none;
}

/* ========================================
======================================== */

.poule-hero {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
color: white;
padding: 24px;
border-radius: 12px;
margin-bottom: 24px;
text-align: center;
}

.poule-hero h1 {
font-size: 2rem;
font-weight: bold;
margin-bottom: 8px;
}

.poule-hero p {
opacity: 0.9;
margin-bottom: 0;
}

.hero-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 16px;
}

.btn-hero {
background: rgba(255,255,255,0.2);
color: white;
border: 1px solid rgba(255,255,255,0.3);
padding: 8px 16px;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
}

.btn-hero:hover {
background: rgba(255,255,255,0.3);
color: white;
text-decoration: none;
transform: translateY(-1px);
}

.matches-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 20px;
margin-bottom: 32px;
}

.match-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
}

.match-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid #f3f4f6;
}

.match-info {
display: flex;
gap: 8px;
}

.match-badge {
padding: 4px 8px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
}

.badge-court {
background: #dbeafe;
color: #1e40af;
}

.badge-time {
background: #fef3c7;
color: #92400e;
}

.teams-display {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 16px;
align-items: center;
margin-bottom: 20px;
}

.team {
text-align: center;
}

.team-name {
font-weight: 600;
color: #374151;
margin-bottom: 4px;
}

.team-players {
font-size: 0.85rem;
color: #6b7280;
line-height: 1.3;
}

.vs-separator {
font-size: 1.5rem;
font-weight: bold;
color: #9ca3af;
background: #f9fafb;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}

.score-form {
background: #f9fafb;
border-radius: 8px;
padding: 16px;
}

.sets-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 16px;
margin-bottom: 16px;
}

.set-group {
display: flex;
flex-direction: column;
gap: 8px;
}

.set-label {
font-weight: 500;
color: #374151;
font-size: 0.875rem;
text-align: center;
}

.score-inputs {
display: flex;
align-items: center;
gap: 8px;
justify-content: center;
}

.score-input {
width: 50px;
padding: 8px;
border: 2px solid #e5e7eb;
border-radius: 6px;
text-align: center;
font-weight: 600;
font-size: 1rem;
transition: border-color 0.2s ease;
}

.score-input:focus {
outline: none;
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.score-separator {
font-weight: 600;
color: #6b7280;
}

.form-actions {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}

.btn-score {
padding: 8px 16px;
border-radius: 6px;
font-weight: 500;
font-size: 0.875rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 4px;
}

.btn-secondary {
background: #6b7280;
color: white;
}

.btn-secondary:hover {
background: #4b5563;
transform: translateY(-1px);
color: white;
text-decoration: none;
}

.empty-state {
text-align: center;
padding: 48px 24px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 24px;
}

.empty-icon {
font-size: 4rem;
margin-bottom: 16px;
opacity: 0.7;
}

.empty-state h3 {
margin-bottom: 8px;
color: #374151;
}

.empty-state p {
color: #6b7280;
margin-bottom: 20px;
}

.navigation-section {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid #e5e7eb;
}

.btn-nav {
padding: 10px 20px;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
}

/* ========================================
======================================== */

.match-result-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

.match-info-header {
background: white;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
}

.match-title {
font-size: 1.5rem;
font-weight: bold;
color: #374151;
margin-bottom: 16px;
text-align: center;
}

.match-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
margin-bottom: 20px;
}

.detail-item {
text-align: center;
padding: 12px;
background: #f9fafb;
border-radius: 8px;
}

.detail-label {
font-size: 0.8rem;
color: #6b7280;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.detail-value {
font-weight: 600;
color: #374151;
}

.teams-section {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 20px;
align-items: center;
margin-bottom: 20px;
}

.team-info {
text-align: center;
padding: 16px;
background: #f8fafc;
border-radius: 10px;
border: 2px solid #e2e8f0;
}

.team-info h3 {
color: #2d3748;
margin-bottom: 8px;
font-size: 1.1rem;
}

.team-info p {
color: #6c757d;
font-weight: 500;
margin: 0;
font-size: 0.9rem;
}

.vs-divider {
font-size: 2em;
font-weight: bold;
color: #495057;
text-align: center;
background: white;
border-radius: 50%;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.score-input-section {
background: white;
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
}

.set-input {
margin-bottom: 25px;
padding: 20px;
border: 2px solid #e9ecef;
border-radius: 10px;
background: #fdfdfd;
}

.set-input.optional {
border-color: #ffc107;
background: #fffbf0;
}

.set-input h3 {
color: #2c3e50;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}

.required {
color: #dc3545;
font-size: 0.8em;
}

.optional-text {
color: #6c757d;
font-size: 0.8em;
font-weight: normal;
}

.score-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 20px;
align-items: center;
}

.score-field {
text-align: center;
}

.score-field label {
display: block;
font-weight: 600;
color: #495057;
margin-bottom: 8px;
}

.score-field input {
width: 80px;
height: 50px;
font-size: 1.5em;
font-weight: bold;
text-align: center;
border: 2px solid #ced4da;
border-radius: 8px;
background: white;
transition: all 0.3s ease;
}

.score-field input:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
outline: none;
}

.score-field small {
display: block;
color: #6c757d;
margin-top: 5px;
font-size: 0.8em;
}

.score-divider {
font-size: 2em;
font-weight: bold;
color: #6c757d;
text-align: center;
}

.form-actions {
display: flex;
gap: 15px;
align-items: center;
flex-wrap: wrap;
margin-top: 20px;
justify-content: center;
}

.btn {
padding: 12px 24px;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.95rem;
}

.btn:hover {
transform: translateY(-1px);
text-decoration: none;
}

.btn-success {
background: #198754;
color: white;
}

.btn-success:hover {
background: #157347;
color: white;
}

.btn-danger {
background: #dc3545;
color: white;
}

.btn-danger:hover {
background: #bb2d3b;
color: white;
}

.badge {
padding: 6px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
display: inline-block;
}

.poule-badge {
background: #3498db;
color: white;
}

.date-badge {
background: #e9ecef;
color: #2c3e50;
border: 2px solid #dee2e6;
}

.completed-badge {
background: #d4edda;
color: #155724;
border: 2px solid #c3e6cb;
}

.pending-badge {
background: #fff3cd;
color: #856404;
border: 2px solid #ffeaa7;
}

/* ========================================
======================================== */

@media (max-width: 768px) {
.score-overview-container,
.match-result-container {
padding: 12px;
}

.score-hero h1 {
font-size: 1.8rem;
}

.poules-grid,
.matches-grid {
grid-template-columns: 1fr;
}

.quick-stats {
grid-template-columns: repeat(2, 1fr);
}

.teams-display,
.teams-section {
grid-template-columns: 1fr;
gap: 12px;
text-align: center;
}

.vs-separator,
.vs-divider {
margin: 8px auto;
}

.sets-container {
grid-template-columns: repeat(2, 1fr);
}

.score-input {
width: 40px;
padding: 6px;
}

.form-actions {
flex-direction: column;
width: 100%;
}

.btn,
.btn-nav,
.btn-poule {
width: 100%;
justify-content: center;
}

.navigation-section {
flex-direction: column;
}

.hero-actions {
flex-direction: column;
}

.btn-hero {
width: 100%;
justify-content: center;
}
}

@media (max-width: 480px) {
.score-hero {
padding: 20px 16px;
}

.match-card,
.poule-card {
padding: 16px;
}

.sets-container {
grid-template-columns: 1fr;
}

.quick-stats {
grid-template-columns: 1fr;
}
}

/* ========================================
======================================== */

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

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* ========================================
======================================== */

.fade-in {
animation: fadeIn 0.5s ease;
}

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

.slide-in {
animation: slideInFromLeft 0.3s ease;
}

@keyframes slideInFromLeft {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}

.bounce-in {
animation: bounceIn 0.6s ease;
}

@keyframes bounceIn {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.05); }
70% { transform: scale(0.9); }
100% { transform: scale(1); opacity: 1; }
}

/* ========================================

======================================== */
/* ========================================
======================================== */

.competitions-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.competitions-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 3rem 2rem;
border-radius: 20px;
margin-bottom: 2rem;
text-align: center;
}

.hero-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
}

.hero-text h1 {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-text p {
font-size: 1.2rem;
opacity: 0.9;
margin: 0;
}

.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}

.btn-hero {
padding: 0.75rem 1.5rem;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.15);
color: white;
backdrop-filter: blur(10px);
cursor: pointer;
border: none;
}

.btn-hero:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
color: white;
text-decoration: none;
}

.stats-dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.stat-card {
background: white;
border-radius: 15px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
}

.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.stat-icon {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}

.stat-number {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #3498db;
}

.stat-label {
color: #64748b;
font-size: 0.875rem;
font-weight: 500;
}

.filter-section {
margin-bottom: 2rem;
}

.search-input {
width: 100%;
max-width: 400px;
padding: 0.75rem 1rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
}
/* ========================================
======================================== */

.player-stats-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.player-hero {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
color: white;
padding: 3rem 2rem;
border-radius: 20px;
margin-bottom: 2rem;
text-align: center;
}

.player-title {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.player-subtitle {
font-size: 1.2rem;
opacity: 0.9;
margin: 0;
}

.player-info-card {
background: white;
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
}

.player-info-header {
display: flex;
align-items: center;
gap: 1.5rem;
}

.player-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.player-details h3 {
margin: 0 0 0.5rem 0;
font-size: 1.5rem;
color: #2c3e50;
}

.player-contact {
color: #64748b;
line-height: 1.5;
}

.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
/* ========================================
======================================== */

.card {
background: white;
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
}

.card h1, .card h2 {
margin-top: 0;
color: #2c3e50;
}

.backup-warning {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
padding: 1.5rem;
border-radius: 10px;
margin-bottom: 1.5rem;
}

.backup-warning h3 {
margin-top: 0;
margin-bottom: 1rem;
}

.backup-warning ul {
margin: 0;
padding-left: 1.5rem;
}

.db-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}

.stat-box {
background: #f8f9fa;
border-radius: 10px;
padding: 1.5rem;
text-align: center;
border: 1px solid #dee2e6;
}

.stat-box .stat-number {
font-size: 2rem;
font-weight: bold;
color: #3498db;
margin-bottom: 0.5rem;
display: block;
}

.stat-box .stat-label {
color: #64748b;
font-size: 0.875rem;
font-weight: 500;
}

.backup-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}

.upload-form {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 10px;
border: 1px solid #dee2e6;
}

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

.form-group label {
display: block;
font-weight: 600;
color: #495057;
margin-bottom: 0.5rem;
}

.file-input {
width: 100%;
padding: 0.5rem;
border: 2px solid #ced4da;
border-radius: 6px;
background: white;
}

.backup-list {
background: #f8f9fa;
border-radius: 10px;
padding: 1rem;
}

.backup-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: white;
border-radius: 8px;
margin-bottom: 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.backup-item:last-child {
margin-bottom: 0;
}

.backup-info h4 {
margin: 0 0 0.5rem 0;
color: #2c3e50;
}

.backup-details {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}

.detail-item {
color: #64748b;
font-size: 0.875rem;
}

.pending-alert {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
padding: 1rem;
border-radius: 8px;
margin-bottom: 1.5rem;
text-align: center;
}

.pending-section {
border-left: 4px solid #f59e0b;
}

.pending-users-container {
display: grid;
gap: 1rem;
}

.pending-user-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
background: #fff3cd;
border-radius: 10px;
border: 1px solid #ffeaa7;
}

.pending-user-info h4 {
margin: 0 0 0.5rem 0;
color: #856404;
}

.pending-user-info p {
margin: 0.25rem 0;
color: #856404;
}

.pending-user-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
/* ========================================
======================================== */

.unavailability-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}

.breadcrumb {
margin-bottom: 1.5rem;
color: #64748b;
}

.breadcrumb a {
color: #3498db;
text-decoration: none;
}

.breadcrumb a:hover {
text-decoration: underline;
}

.player-header {
background: white;
padding: 2rem;
border-radius: 15px;
margin-bottom: 1.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
text-align: center;
}

.player-header h1 {
margin: 0 0 0.5rem 0;
color: #2c3e50;
}

.player-header p {
margin: 0;
color: #64748b;
}

.conflict-item {
background: #fee2e2;
padding: 1rem;
border-radius: 8px;
margin: 0.5rem 0;
border-left: 4px solid #dc2626;
}

/* ========================================
======================================== */

.section-card {
background: white;
border-radius: 15px;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
overflow: hidden;
}

.section-header {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
padding: 1.5rem 2rem;
border-bottom: 1px solid #dee2e6;
}

.section-title {
margin: 0;
color: #2c3e50;
font-size: 1.25rem;
font-weight: 600;
}

.section-body {
padding: 2rem;
}

/* ========================================
======================================== */

.table-responsive {
overflow-x: auto;
}

.matches-table {
width: 100%;
border-collapse: collapse;
background: white;
}

.matches-table th,
.matches-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid #dee2e6;
}

.matches-table th {
background: #f8f9fa;
font-weight: 600;
color: #495057;
}

.matches-table tbody tr:hover {
background: #f8f9fa;
}

.court-number {
background: #3498db;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 500;
}

/* ========================================
======================================== */

.btn-modern {
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
}

.btn-modern:hover {
transform: translateY(-1px);
text-decoration: none;
}

.btn-primary-modern {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}

.btn-primary-modern:hover {
background: linear-gradient(135deg, #2980b9, #1f6391);
color: white;
}

.btn-secondary-modern {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
color: white;
}

.btn-secondary-modern:hover {
background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
color: white;
}

.btn {
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: inline-block;
text-align: center;
}

.btn:hover {
text-decoration: none;
}

.btn-success {
background: #28a745;
color: white;
}

.btn-success:hover {
background: #218838;
color: white;
}

.btn-primary {
background: #007bff;
color: white;
}

.btn-primary:hover {
background: #0056b3;
color: white;
}

.btn-warning {
background: #ffc107;
color: #212529;
}

.btn-warning:hover {
background: #e0a800;
color: #212529;
}

.btn-danger {
background: #dc3545;
color: white;
}

.btn-danger:hover {
background: #c82333;
color: white;
}

.btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
}

/* ========================================
======================================== */

.action-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #dee2e6;
}

/* ========================================
======================================== */

.performance-chart {
text-align: center;
padding: 3rem 2rem;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 10px;
}

.empty-state-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}

.performance-chart h4 {
margin: 0 0 1rem 0;
color: #495057;
}

.performance-chart p {
margin: 0 0 0.5rem 0;
color: #6c757d;
}

.performance-chart small {
color: #adb5bd;
}

/* ========================================
======================================== */

.alert {
padding: 1rem 1.5rem;
border-radius: 8px;
margin-bottom: 1rem;
border-left: 4px solid;
}

.alert-success {
background: #d4edda;
color: #155724;
border-left-color: #28a745;
}

.alert-danger {
background: #f8d7da;
color: #721c24;
border-left-color: #dc3545;
}

.alert-warning {
background: #fff3cd;
color: #856404;
border-left-color: #ffc107;
}

.alert-info {
background: #cce7ff;
color: #004085;
border-left-color: #007bff;
}

/* ========================================
======================================== */

@media (max-width: 768px) {
.competitions-container,
.player-stats-container,
.unavailability-container {
padding: 12px;
}

.hero-content {
flex-direction: column;
text-align: center;
}

.hero-text h1,
.player-title {
font-size: 2rem;
}

.stats-grid {
grid-template-columns: 1fr;
}

.stat-card {
padding: 1rem;
}

.player-info-header {
flex-direction: column;
text-align: center;
}

.backup-item {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}

.backup-actions {
justify-content: center;
width: 100%;
}

.pending-user-card {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}

.pending-user-actions {
justify-content: center;
width: 100%;
}

.action-buttons {
flex-direction: column;
align-items: center;
}

.btn-modern,
.btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}

@media (max-width: 480px) {
.hero-text h1,
.player-title {
font-size: 1.75rem;
}

.stat-number {
font-size: 2rem;
}

.stat-icon {
font-size: 2rem;
}

.section-header,
.section-body {
padding: 1rem;
}

.card {
padding: 1rem;
}

.matches-table th,
.matches-table td {
padding: 0.5rem;
font-size: 0.875rem;
}
}

/* ========================================
======================================== */

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.5rem !important; }
.p-2 { padding: 1rem !important; }
.p-3 { padding: 1.5rem !important; }
.p-4 { padding: 2rem !important; }

.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }

.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.flex-wrap { flex-wrap: wrap !important; }

.text-primary { color: #3498db !important; }
.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }
.text-info { color: #17a2b8 !important; }
.text-muted { color: #6c757d !important; }

.bg-primary { background-color: #3498db !important; }
.bg-success { background-color: #28a745 !important; }
.bg-danger { background-color: #dc3545 !important; }
.bg-warning { background-color: #ffc107 !important; }
.bg-info { background-color: #17a2b8 !important; }
.bg-light { background-color: #f8f9fa !important; }

/* ========================================
======================================== */

/* ========================================

======================================== */

/* ========================================
======================================== */

.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
margin: 0.25rem;
font-size: 0.95rem;
font-weight: 500;
line-height: 1.2;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
transition: all 0.2s ease-in-out;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
}

.btn:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn:focus {
outline: none;
box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

.btn:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

/* ========================================
======================================== */

.btn-primary {
background: linear-gradient(135deg, #3498db, #2980b9);
border-color: #2980b9;
color: white;
}

.btn-primary:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a);
border-color: #1f5f8a;
color: white;
}

.btn-success {
background: linear-gradient(135deg, #27ae60, #229954);
border-color: #229954;
color: white;
}

.btn-success:hover {
background: linear-gradient(135deg, #229954, #1e8449);
border-color: #1e8449;
color: white;
}

.btn-danger {
background: linear-gradient(135deg, #e74c3c, #c0392b);
border-color: #c0392b;
color: white;
}

.btn-danger:hover {
background: linear-gradient(135deg, #c0392b, #a93226);
border-color: #a93226;
color: white;
}

.btn-warning {
background: linear-gradient(135deg, #f39c12, #d68910);
border-color: #d68910;
color: white;
}

.btn-warning:hover {
background: linear-gradient(135deg, #d68910, #b7950b);
border-color: #b7950b;
color: white;
}

.btn-info {
background: linear-gradient(135deg, #3498db, #2980b9);
border-color: #2980b9;
color: white;
}

.btn-info:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a);
border-color: #1f5f8a;
color: white;
}

.btn-secondary {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
border-color: #7f8c8d;
color: white;
}

.btn-secondary:hover {
background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
border-color: #6c7b7d;
color: white;
}

.btn-light {
background: #f8f9fa;
border-color: #dee2e6;
color: #495057;
}

.btn-light:hover {
background: #e2e6ea;
border-color: #dae0e5;
color: #495057;
}

.btn-dark {
background: #343a40;
border-color: #343a40;
color: white;
}

.btn-dark:hover {
background: #23272b;
border-color: #1d2124;
color: white;
}

.btn-outline {
background: transparent;
border: 2px solid #3498db;
color: #3498db;
}

.btn-outline:hover {
background: #3498db;
color: white;
}

/* ========================================
======================================== */

.btn-xs {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
border-radius: 4px;
}

.btn-sm {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
border-radius: 4px;
}

.btn-lg {
padding: 1rem 1.75rem;
font-size: 1.125rem;
border-radius: 8px;
}

.btn-xl {
padding: 1.25rem 2rem;
font-size: 1.25rem;
border-radius: 10px;
}

/* ========================================
======================================== */

.btn-modern {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
user-select: none;
position: relative;
overflow: hidden;
}

.btn-modern:hover {
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-modern:active {
transform: translateY(0);
}

.btn-primary-modern {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}

.btn-primary-modern:hover {
background: linear-gradient(135deg, #5a67d8 0%, #667eea 100%);
color: white;
}

.btn-success-modern {
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
color: white;
}

.btn-success-modern:hover {
background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
color: white;
}

.btn-danger-modern {
background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
color: white;
}

.btn-danger-modern:hover {
background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
color: white;
}

.btn-warning-modern {
background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
color: white;
}

.btn-warning-modern:hover {
background: linear-gradient(135deg, #dd6b20 0%, #c05621 100%);
color: white;
}

.btn-secondary-modern {
background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
color: white;
}

.btn-secondary-modern:hover {
background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
color: white;
}

/* ========================================
======================================== */

.btn-hero {
padding: 0.875rem 1.75rem;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.15);
color: white;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}

.btn-hero:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.2);
color: white;
text-decoration: none;
}

/* ========================================
======================================== */

.menu-button {
background: transparent;
border: none;
padding: 0.5rem;
cursor: pointer;
font-size: 1.2rem;
color: #6c757d;
border-radius: 4px;
transition: all 0.2s ease;
}

.menu-button:hover {
background: rgba(0,0,0,0.1);
color: #495057;
}

.dropdown-item {
display: block;
width: 100%;
padding: 0.5rem 1rem;
clear: both;
font-weight: normal;
line-height: 1.5;
color: #495057;
text-align: inherit;
white-space: nowrap;
background: transparent;
border: none;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
}

.dropdown-item:hover {
background: #f8f9fa;
color: #16181b;
text-decoration: none;
}

.dropdown-item.delete-item:hover {
background: #f8d7da;
color: #721c24;
}

.btn-close {
background: none;
border: none;
font-size: 1.25rem;
cursor: pointer;
color: #6c757d;
padding: 0.25rem;
border-radius: 4px;
transition: all 0.2s ease;
}

.btn-close:hover {
color: #000;
background: rgba(0,0,0,0.1);
}

/* ========================================
======================================== */

.action-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #dee2e6;
}

.form-actions {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #dee2e6;
justify-content: flex-start;
}

.btn-group {
display: flex;
gap: 0;
}

.btn-group .btn {
border-radius: 0;
margin: 0;
}

.btn-group .btn:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}

.btn-group .btn:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}

.selection-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
}

.poule-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: 1rem;
}

/* ========================================
======================================== */

.fab {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
z-index: 1000;
}

.fab:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* ========================================
======================================== */

.badge {
display: inline-block;
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
border-radius: 6px;
border: 1px solid transparent;
text-decoration: none;
}

.admin-badge {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
border-color: #c0392b;
}

.user-badge {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
border-color: #2980b9;
}

.active-badge {
background: linear-gradient(135deg, #27ae60, #229954);
color: white;
border-color: #229954;
}

.pending-badge {
background: linear-gradient(135deg, #f39c12, #d68910);
color: white;
border-color: #d68910;
}

.poule-badge {
background: linear-gradient(135deg, #9b59b6, #8e44ad);
color: white;
border-color: #8e44ad;
}

.date-badge {
background: #f8f9fa;
color: #495057;
border-color: #dee2e6;
}

.completed-badge {
background: #d4edda;
color: #155724;
border-color: #c3e6cb;
}

/* ========================================
======================================== */

@media (max-width: 768px) {
.btn {
padding: 0.625rem 1rem;
font-size: 0.9rem;
}

.btn-modern {
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
}

.btn-hero {
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
}

.action-buttons,
.form-actions {
flex-direction: column;
align-items: stretch;
}

.action-buttons .btn,
.form-actions .btn {
width: 100%;
max-width: 300px;
margin: 0 auto;
}

.btn-group {
flex-direction: column;
}

.btn-group .btn {
border-radius: 6px;
margin-bottom: 0.5rem;
}

.poule-actions {
flex-direction: column;
}
}

@media (max-width: 480px) {
.btn {
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
}

.btn-lg {
padding: 0.75rem 1.25rem;
font-size: 1rem;
}

.fab {
bottom: 1rem;
right: 1rem;
width: 48px;
height: 48px;
font-size: 1.25rem;
}
}

/* ========================================
======================================== */

.btn-loading {
position: relative;
color: transparent;
pointer-events: none;
}

.btn-loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
from {
transform: rotate(0turn);
}
to {
transform: rotate(1turn);
}
}

/* ========================================
======================================== */

.current-user {
display: inline-block;
padding: 0.375rem 0.75rem;
background: linear-gradient(135deg, #17a2b8, #138496);
color: white;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
}

.btn-unstyled {
background: none;
border: none;
padding: 0;
margin: 0;
color: inherit;
cursor: pointer;
}

.btn-icon {
width: 40px;
height: 40px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}

.btn-icon.btn-sm {
width: 32px;
height: 32px;
}

.btn-icon.btn-lg {
width: 48px;
height: 48px;
}

/* ========================================
======================================== */

/* ========================================

======================================== */

/* ========================================
======================================== */

.admin-dashboard {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}

.dashboard-hero {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
color: white;
padding: 3rem 2rem;
border-radius: 20px;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.dashboard-hero .hero-content h1 {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.dashboard-hero .hero-content p {
font-size: 1.2rem;
opacity: 0.9;
margin: 0;
}

/* ========================================
======================================== */

.admin-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}

/* ========================================
======================================== */

.admin-card {
background: white;
border-radius: 16px;
padding: 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
overflow: hidden;
}

.admin-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.admin-card-header {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem 2rem;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-bottom: 1px solid #dee2e6;
}

.admin-card-icon {
font-size: 2rem;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.admin-card-header h3 {
margin: 0;
color: #2c3e50;
font-size: 1.25rem;
font-weight: 600;
}

.admin-card-body {
padding: 1.5rem 2rem;
}

.admin-card-body p {
margin: 0 0 1rem 0;
color: #64748b;
line-height: 1.6;
}

.admin-stats {
display: flex;
gap: 1.5rem;
margin-top: 1rem;
}

.admin-stat {
text-align: center;
flex: 1;
}

.admin-stat-number {
display: block;
font-size: 1.5rem;
font-weight: bold;
color: #3498db;
margin-bottom: 0.25rem;
}

.admin-stat-label {
font-size: 0.875rem;
color: #64748b;
font-weight: 500;
}

.admin-card-actions {
padding: 1rem 2rem 1.5rem 2rem;
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}

/* ========================================
======================================== */

.btn-admin {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.2;
text-align: center;
text-decoration: none;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
user-select: none;
flex: 1;
min-width: fit-content;
}

.btn-admin:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.btn-admin:active {
transform: translateY(0);
}

.btn-admin.btn-primary {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}

.btn-admin.btn-primary:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a);
color: white;
}

.btn-admin.btn-success {
background: linear-gradient(135deg, #27ae60, #229954);
color: white;
}

.btn-admin.btn-success:hover {
background: linear-gradient(135deg, #229954, #1e8449);
color: white;
}

.btn-admin.btn-warning {
background: linear-gradient(135deg, #f39c12, #d68910);
color: white;
}

.btn-admin.btn-warning:hover {
background: linear-gradient(135deg, #d68910, #b7950b);
color: white;
}

.btn-admin.btn-danger {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
}

.btn-admin.btn-danger:hover {
background: linear-gradient(135deg, #c0392b, #a93226);
color: white;
}

.btn-admin.btn-info {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}

.btn-admin.btn-info:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a);
color: white;
}

/* ========================================
======================================== */

.admin-dashboard .stat-card {
background: white;
border-radius: 16px;
padding: 2rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.admin-dashboard .stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--accent-color, #3498db);
}

.admin-dashboard .stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.admin-dashboard .stat-card .stat-icon {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.8;
}

.admin-dashboard .stat-card .stat-number {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: var(--accent-color, #3498db);
display: block;
}

.admin-dashboard .stat-card .stat-label {
color: #2c3e50;
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}

.admin-dashboard .stat-card .stat-detail {
color: #64748b;
font-size: 0.875rem;
opacity: 0.8;
}

/* ========================================
======================================== */

.recent-backups-card {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}

.recent-backups-card h3 {
margin: 0 0 1.5rem 0;
color: #2c3e50;
font-size: 1.25rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}

.backup-item-admin {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 0.75rem;
border-left: 4px solid #3498db;
transition: all 0.2s ease;
}

.backup-item-admin:hover {
background: #e9ecef;
transform: translateX(4px);
}

.backup-item-admin:last-child {
margin-bottom: 0;
}

.backup-info-admin {
flex: 1;
}

.backup-info-admin .backup-name {
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.25rem;
}

.backup-info-admin .backup-meta {
font-size: 0.875rem;
color: #64748b;
}

.backup-actions-admin {
display: flex;
gap: 0.5rem;
}

.backup-actions-admin .btn-admin {
padding: 0.5rem 1rem;
font-size: 0.8rem;
flex: none;
}

/* ========================================
======================================== */

.quick-actions {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}

.quick-actions h3 {
margin: 0 0 1.5rem 0;
color: #2c3e50;
font-size: 1.25rem;
font-weight: 600;
}

.quick-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}

.quick-action-item {
text-align: center;
padding: 1.5rem 1rem;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 12px;
transition: all 0.3s ease;
text-decoration: none;
color: #2c3e50;
border: 1px solid #dee2e6;
}

.quick-action-item:hover {
background: linear-gradient(135deg, #e9ecef, #dee2e6);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-decoration: none;
color: #2c3e50;
}

.quick-action-item .action-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
display: block;
}

.quick-action-item .action-label {
font-weight: 600;
font-size: 0.9rem;
}

/* ========================================
======================================== */

@media (max-width: 1200px) {
.admin-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
}

@media (max-width: 768px) {
.admin-dashboard {
padding: 12px;
}

.dashboard-hero {
padding: 2rem 1rem;
}

.dashboard-hero .hero-content h1 {
font-size: 2rem;
}

.admin-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

.admin-card-header {
padding: 1rem 1.5rem;
flex-direction: column;
text-align: center;
gap: 0.75rem;
}

.admin-card-body {
padding: 1rem 1.5rem;
}

.admin-card-actions {
padding: 1rem 1.5rem;
flex-direction: column;
}

.btn-admin {
width: 100%;
justify-content: center;
}

.admin-stats {
justify-content: space-around;
}

.stats-dashboard {
grid-template-columns: 1fr;
gap: 1rem;
}

.admin-dashboard .stat-card {
padding: 1.5rem;
}

.recent-backups-card,
.quick-actions {
padding: 1.5rem;
}

.backup-item-admin {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}

.backup-actions-admin {
width: 100%;
justify-content: center;
}

.quick-actions-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.75rem;
}

.quick-action-item {
padding: 1rem 0.75rem;
}
}

@media (max-width: 480px) {
.dashboard-hero .hero-content h1 {
font-size: 1.75rem;
}

.admin-card-icon {
width: 50px;
height: 50px;
font-size: 1.5rem;
}

.admin-stat-number {
font-size: 1.25rem;
}

.admin-dashboard .stat-card .stat-icon {
font-size: 2.5rem;
}

.admin-dashboard .stat-card .stat-number {
font-size: 2rem;
}
}

/* ========================================
======================================== */

@media (prefers-color-scheme: dark) {
.admin-dashboard .stat-card,
.admin-card,
.recent-backups-card,
.quick-actions {
background: #1a1a1a;
border-color: #333;
color: #e0e0e0;
}

.admin-card-header {
background: linear-gradient(135deg, #2a2a2a, #333);
}

.admin-card-header h3,
.admin-dashboard .stat-card .stat-label,
.recent-backups-card h3,
.quick-actions h3 {
color: #e0e0e0;
}

.backup-item-admin {
background: #2a2a2a;
border-left-color: #667eea;
}

.backup-item-admin:hover {
background: #333;
}

.quick-action-item {
background: linear-gradient(135deg, #2a2a2a, #333);
color: #e0e0e0;
border-color: #444;
}

.quick-action-item:hover {
background: linear-gradient(135deg, #333, #444);
color: #e0e0e0;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

/* ========================================
======================================== */

.competitions-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.competition-card {
background: white;
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.competition-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #667eea, #764ba2);
}

.competition-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.competition-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
margin: 0 0 0.5rem 0;
line-height: 1.3;
}

.competition-dates {
color: #64748b;
font-size: 0.875rem;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.competition-dates::before {
content: '📅';
font-size: 1rem;
}

.competition-status {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 1rem;
}

.status-active {
background: #d4edda;
color: #155724;
}

.status-upcoming {
background: #fff3cd;
color: #856404;
}

.status-completed {
background: #d1ecf1;
color: #0c5460;
}

.competition-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 1rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
}

.competition-stat {
text-align: center;
}

.competition-stat-number {
display: block;
font-size: 1.5rem;
font-weight: bold;
color: #3498db;
margin-bottom: 0.25rem;
}

.competition-stat-label {
font-size: 0.75rem;
color: #64748b;
font-weight: 500;
}

.competition-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}

.btn-action {
flex: 1;
padding: 0.5rem 1rem;
font-size: 0.875rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
border: none;
cursor: pointer;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
}

.btn-action.btn-primary {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}

.btn-action.btn-primary:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a);
transform: translateY(-1px);
color: white;
text-decoration: none;
}

.btn-action.btn-warning {
background: linear-gradient(135deg, #f39c12, #d68910);
color: white;
}

.btn-action.btn-warning:hover {
background: linear-gradient(135deg, #d68910, #b7950b);
color: white;
text-decoration: none;
}

.btn-action.btn-success {
background: linear-gradient(135deg, #27ae60, #229954);
color: white;
}

.btn-action.btn-success:hover {
background: linear-gradient(135deg, #229954, #1e8449);
color: white;
text-decoration: none;
}

.empty-state {
text-align: center;
padding: 4rem 2rem;
color: #64748b;
background: white;
border-radius: 20px;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
}

.empty-state-icon {
font-size: 5rem;
margin-bottom: 1.5rem;
opacity: 0.5;
}

.empty-state h3 {
font-size: 1.5rem;
color: #1e293b;
margin-bottom: 1rem;
font-weight: 600;
}

.empty-state p {
font-size: 1rem;
margin-bottom: 2rem;
line-height: 1.6;
}

/* ========================================
======================================== */

.score-overview-container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}

.score-hero {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
color: white;
padding: 3rem 2rem;
border-radius: 20px;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 8px 32px rgba(37, 99, 235, 0.2);
}

.score-hero h1 {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.score-hero p {
font-size: 1.2rem;
opacity: 0.9;
margin: 0;
}

.poules-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.poule-card {
background: white;
border-radius: 16px;
padding: 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
overflow: hidden;
}

.poule-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.poule-header {
padding: 1.5rem 2rem;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-bottom: 1px solid #dee2e6;
position: relative;
}

.poule-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #667eea, #764ba2);
}

.poule-name {
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
margin: 0 0 0.5rem 0;
}

.poule-competition {
font-size: 0.875rem;
color: #64748b;
margin: 0;
}

.poule-info {
padding: 1.5rem 2rem;
}

.poule-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 1rem;
}

.poule-detail {
text-align: center;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
}

.poule-detail-label {
font-size: 0.75rem;
color: #64748b;
font-weight: 500;
margin-bottom: 0.25rem;
display: block;
}

.poule-detail-value {
font-size: 1.125rem;
font-weight: 600;
color: #2c3e50;
}

.progress-container {
margin: 1rem 0;
}

.progress-label {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
color: #64748b;
margin-bottom: 0.5rem;
}

.progress-bar {
width: 100%;
height: 8px;
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
}

.progress-fill {
height: 100%;
background: linear-gradient(135deg, #27ae60, #229954);
border-radius: 4px;
transition: width 0.3s ease;
}

.progress-fill.warning {
background: linear-gradient(135deg, #f39c12, #d68910);
}

.progress-fill.danger {
background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.poule-actions {
padding: 1rem 2rem 1.5rem 2rem;
display: flex;
gap: 0.75rem;
}

.btn-poule {
flex: 1;
padding: 0.75rem 1rem;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
text-align: center;
transition: all 0.2s ease;
font-size: 0.875rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
border: none;
cursor: pointer;
}

.btn-poule.btn-primary {
background: linear-gradient(135deg, #059669, #047857);
color: white;
}

.btn-poule.btn-primary:hover {
background: linear-gradient(135deg, #047857, #065f46);
transform: translateY(-1px);
color: white;
text-decoration: none;
}

.btn-poule.btn-outline {
background: transparent;
color: #374151;
border: 1px solid #e5e7eb;
}

.btn-poule.btn-outline:hover {
background: #f9fafb;
border-color: #d1d5db;
color: #374151;
text-decoration: none;
}

/* ========================================
======================================== */

.matches-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.match-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
}

.match-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
transform: translateY(-2px);
}

.match-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #f3f4f6;
}

.match-info {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}

.match-badge {
padding: 0.25rem 0.5rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
}

.badge-court {
background: #dbeafe;
color: #1e40af;
}

.badge-time {
background: #fef3c7;
color: #92400e;
}

.badge-date {
background: #f3e8ff;
color: #7c2d12;
}

.match-status {
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.5rem;
border-radius: 12px;
}

.status-pending {
background: #fef3c7;
color: #92400e;
}

.status-completed {
background: #d4edda;
color: #155724;
}

.teams-display {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}

.team {
text-align: center;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
}

.team-name {
font-weight: 600;
color: #2c3e50;
font-size: 0.875rem;
margin-bottom: 0.25rem;
}

.team-players {
font-size: 0.75rem;
color: #64748b;
}

.vs-separator {
font-size: 1.25rem;
font-weight: bold;
color: #64748b;
}

.match-score {
text-align: center;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
margin-bottom: 1rem;
}

.score-display {
font-size: 1.125rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.25rem;
}

.score-sets {
font-size: 0.75rem;
color: #64748b;
}

.match-actions {
display: flex;
gap: 0.5rem;
}

.btn-match {
flex: 1;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
text-decoration: none;
text-align: center;
transition: all 0.2s ease;
font-size: 0.875rem;
border: none;
cursor: pointer;
}

.btn-match.btn-primary {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}

.btn-match.btn-primary:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a);
color: white;
text-decoration: none;
}

.btn-match.btn-warning {
background: linear-gradient(135deg, #f39c12, #d68910);
color: white;
}

.btn-match.btn-warning:hover {
background: linear-gradient(135deg, #d68910, #b7950b);
color: white;
text-decoration: none;
}

/* ========================================
======================================== */

.navigation-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #dee2e6;
}

.btn-modern {
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
}

.btn-modern:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.btn-secondary-modern {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
color: white;
}

.btn-secondary-modern:hover {
background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
color: white;
}

.btn-primary-modern {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}

.btn-primary-modern:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a);
color: white;
}

.btn-warning-modern {
background: linear-gradient(135deg, #f39c12, #d68910);
color: white;
}

.btn-warning-modern:hover {
background: linear-gradient(135deg, #d68910, #b7950b);
color: white;
}

/* ========================================
======================================== */

.filter-section {
background: white;
padding: 1.5rem;
border-radius: 12px;
margin-bottom: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
border: 1px solid #f1f5f9;
}

.search-input {
width: 100%;
max-width: 400px;
padding: 0.75rem 1rem;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 1rem;
transition: border-color 0.3s ease;
}

.search-input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* ========================================
======================================== */

@media (max-width: 1200px) {
.competitions-grid,
.poules-grid,
.matches-grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}

@media (max-width: 768px) {
.competitions-container,
.score-overview-container {
padding: 12px;
}

.competitions-hero,
.score-hero {
padding: 2rem 1rem;
}

.competitions-hero .hero-content,
.score-hero .hero-content {
flex-direction: column;
text-align: center;
gap: 1rem;
}

.hero-text h1,
.score-hero h1 {
font-size: 2rem;
}

.competitions-grid,
.poules-grid,
.matches-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

.competition-actions,
.poule-actions,
.match-actions {
flex-direction: column;
}

.competition-stats,
.poule-details {
grid-template-columns: 1fr;
}

.teams-display {
grid-template-columns: 1fr;
gap: 0.5rem;
}

.vs-separator {
order: 2;
}

.navigation-buttons {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 300px;
justify-content: center;
}

.stats-dashboard {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}

@media (max-width: 480px) {
.hero-text h1,
.score-hero h1 {
font-size: 1.75rem;
}

.competition-card,
.poule-card,
.match-card {
padding: 1rem;
}

.poule-header,
.poule-info,
.poule-actions {
padding: 1rem;
}

.stats-dashboard {
grid-template-columns: 1fr;
}

.filter-section {
padding: 1rem;
}

.search-input {
max-width: 100%;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

/* ========================================
======================================== */

.container-modern {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
}

.row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}

.row.align-items-center {
align-items: center;
}

.row.g-3 {
margin: 0 -0.75rem;
}

.row.g-3 > * {
padding: 0 0.75rem;
margin-bottom: 1.5rem;
}

.col-lg-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
padding: 0 15px;
}

.col-lg-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
padding: 0 15px;
}

.col-md-8 {
flex: 0 0 66.666667%;
max-width: 66.666667%;
padding: 0 15px;
}

.col-md-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
padding: 0 15px;
}

.col-md-6 {
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
}

.col-12 {
flex: 0 0 100%;
max-width: 100%;
padding: 0 15px;
}

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

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

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

.w-100 {
width: 100% !important;
}

.mt-4 {
margin-top: 1.5rem !important;
}

.mb-3 {
margin-bottom: 1rem !important;
}

.mb-4 {
margin-bottom: 1.5rem !important;
}

.p-4 {
padding: 1.5rem !important;
}

/* ========================================
======================================== */

.competition-header {
background: white;
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
position: relative;
overflow: hidden;
}

.competition-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(135deg, #667eea, #764ba2);
}

.competition-title {
font-size: 2.25rem;
font-weight: 700;
color: #1e293b;
margin: 0 0 0.5rem 0;
line-height: 1.2;
}

.competition-subtitle {
font-size: 1.1rem;
color: #64748b;
margin: 0 0 1rem 0;
font-weight: 500;
}

.competition-dates {
display: inline-block;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-radius: 8px;
border: 1px solid #dee2e6;
font-size: 0.95rem;
color: #495057;
}

.admin-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}

/* ========================================
======================================== */

.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.stat-card {
background: white;
border-radius: 16px;
padding: 2rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--accent-color, #3498db);
}

.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.stat-card .stat-icon {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.8;
}

.stat-card .stat-number {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: var(--accent-color, #3498db);
display: block;
}

.stat-card .stat-label {
color: #2c3e50;
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}

.stat-card .stat-detail {
color: #64748b;
font-size: 0.875rem;
opacity: 0.8;
}

.stat-card.poules {
--accent-color: #3498db;
--accent-light: #5dade2;
}

.stat-card.timeslots {
--accent-color: #27ae60;
--accent-light: #58d68d;
}

.stat-card.matches {
--accent-color: #f39c12;
--accent-light: #f7dc6f;
}

.stat-card.players {
--accent-color: #9b59b6;
--accent-light: #bb8fce;
}

/* ========================================
======================================== */

.page-header {
background: white;
border-radius: 16px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
border: 1px solid #f1f5f9;
}

.page-title {
font-size: 2rem;
font-weight: 700;
color: #1e293b;
margin: 0 0 0.5rem 0;
}

.page-subtitle {
font-size: 1.1rem;
color: #64748b;
margin: 0;
font-weight: 500;
}

/* ========================================
======================================== */

.btn-modern {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
font-weight: 500;
line-height: 1.2;
text-align: center;
text-decoration: none;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
user-select: none;
}

.btn-modern:hover {
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-modern:active {
transform: translateY(0);
}

.btn-modern:focus {
outline: none;
box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

.btn-primary-modern {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}

.btn-primary-modern:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a);
color: white;
}

.btn-success-modern {
background: linear-gradient(135deg, #27ae60, #229954);
color: white;
}

.btn-success-modern:hover {
background: linear-gradient(135deg, #229954, #1e8449);
color: white;
}

.btn-warning-modern {
background: linear-gradient(135deg, #f39c12, #d68910);
color: white;
}

.btn-warning-modern:hover {
background: linear-gradient(135deg, #d68910, #b7950b);
color: white;
}

.btn-danger-modern {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
}

.btn-danger-modern:hover {
background: linear-gradient(135deg, #c0392b, #a93226);
color: white;
}

.btn-secondary-modern {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
color: white;
}

.btn-secondary-modern:hover {
background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
color: white;
}

.btn-info-modern {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}

.btn-info-modern:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a);
color: white;
}

/* ========================================
======================================== */

.search-section {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
border: 1px solid #f1f5f9;
}

.search-box {
position: relative;
}

.search-input {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #e5e7eb;
border-radius: 10px;
font-size: 1rem;
transition: border-color 0.3s ease;
background: #f8f9fa;
}

.search-input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
background: white;
}

.form-select {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
background: #f8f9fa;
transition: border-color 0.3s ease;
}

.form-select:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
background: white;
}

/* ========================================
======================================== */

.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
backdrop-filter: blur(4px);
}

.modal-content {
background: white;
border-radius: 16px;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
animation: modalFadeIn 0.3s ease;
}

@keyframes modalFadeIn {
from {
opacity: 0;
transform: scale(0.8) translateY(-50px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}

.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
border-bottom: 1px solid #dee2e6;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
}

.modal-header h3 {
margin: 0;
color: #2c3e50;
font-size: 1.25rem;
font-weight: 600;
}

.modal-close {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #6c757d;
padding: 0.25rem;
border-radius: 4px;
transition: all 0.2s ease;
}

.modal-close:hover {
color: #495057;
background: rgba(0,0,0,0.1);
}

.modal-body {
padding: 2rem;
}

/* ========================================
======================================== */

.warning-box {
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
border: 1px solid #ffeaa7;
border-left: 4px solid #f39c12;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}

.warning-icon {
font-size: 2rem;
margin-bottom: 1rem;
text-align: center;
}

.warning-text h4 {
color: #856404;
margin: 0 0 1rem 0;
font-size: 1.1rem;
font-weight: 600;
}

.warning-text p {
color: #856404;
margin: 0 0 1rem 0;
line-height: 1.6;
}

.deletion-info {
background: rgba(255,255,255,0.7);
padding: 1rem;
border-radius: 6px;
margin: 1rem 0;
}

.deletion-info h5 {
color: #856404;
margin: 0 0 0.5rem 0;
font-size: 0.95rem;
font-weight: 600;
}

.deletion-info ul {
margin: 0;
padding-left: 1.5rem;
color: #856404;
}

.deletion-info li {
margin-bottom: 0.25rem;
}

.danger-notice {
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
border: 1px solid #f5c6cb;
border-left: 4px solid #dc3545;
border-radius: 6px;
padding: 1rem;
margin-top: 1rem;
color: #721c24;
}

/* ========================================
======================================== */

.quick-actions {
background: white;
border-radius: 16px;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
overflow: hidden;
}

.quick-actions-header {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
padding: 1.5rem 2rem;
border-bottom: 1px solid #dee2e6;
}

.quick-actions-header h3 {
margin: 0;
color: #2c3e50;
font-size: 1.25rem;
font-weight: 600;
}

.quick-actions-body {
padding: 1.5rem 2rem;
}

/* ========================================
======================================== */

@media (max-width: 1200px) {
.container-modern {
max-width: 100%;
padding: 0 15px;
}

.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
}

@media (max-width: 992px) {
.col-lg-8,
.col-lg-4 {
flex: 0 0 100%;
max-width: 100%;
}

.text-end {
text-align: center;
margin-top: 1rem;
}

.competition-title {
font-size: 1.75rem;
}

.admin-actions {
justify-content: center;
}
}

@media (max-width: 768px) {
.container-modern {
padding: 0 10px;
}

.competition-header,
.page-header {
padding: 1.5rem 1rem;
}

.col-md-8,
.col-md-4,
.col-md-6 {
flex: 0 0 100%;
max-width: 100%;
}

.row {
margin: 0 -10px;
}

.row > * {
padding: 0 10px;
}

.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.stat-card {
padding: 1.5rem 1rem;
}

.stat-card .stat-number {
font-size: 2rem;
}

.stat-card .stat-icon {
font-size: 2.5rem;
}

.btn-modern {
width: 100%;
justify-content: center;
margin-bottom: 0.5rem;
}

.admin-actions {
flex-direction: column;
width: 100%;
}

.modal-content {
width: 95%;
margin: 20px;
}

.modal-header,
.modal-body {
padding: 1rem;
}
}

@media (max-width: 480px) {
.competition-title {
font-size: 1.5rem;
}

.page-title {
font-size: 1.5rem;
}

.stats-grid {
grid-template-columns: 1fr;
}

.stat-card .stat-number {
font-size: 1.75rem;
}

.stat-card .stat-icon {
font-size: 2rem;
}

.search-section {
padding: 1rem;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

/* ========================================
======================================== */

.poules-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.25rem;
margin-bottom: 2rem;
max-width: 100%;
}

.poule-card {
background: white;
border-radius: 12px;
padding: 0;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
overflow: hidden;
max-width: 450px;
margin: 0 auto;
}

.poule-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.poule-header {
padding: 1rem 1.5rem;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-bottom: 1px solid #dee2e6;
position: relative;
}

.poule-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(135deg, #667eea, #764ba2);
}

.poule-name {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin: 0 0 0.25rem 0;
}

.poule-competition {
font-size: 0.8rem;
color: #64748b;
margin: 0;
}

.poule-info {
padding: 1rem 1.5rem;
}

.poule-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
margin-bottom: 1rem;
}

.poule-detail {
text-align: center;
padding: 0.75rem 0.5rem;
background: #f8f9fa;
border-radius: 6px;
border: 1px solid #e9ecef;
}

.poule-detail-label {
font-size: 0.7rem;
color: #64748b;
font-weight: 500;
margin-bottom: 0.25rem;
display: block;
text-transform: uppercase;
letter-spacing: 0.025em;
}

.poule-detail-value {
font-size: 1rem;
font-weight: 600;
color: #2c3e50;
}

.progress-container {
margin: 0.75rem 0;
}

.progress-label {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: #64748b;
margin-bottom: 0.4rem;
font-weight: 500;
}

.progress-bar {
width: 100%;
height: 6px;
background: #e5e7eb;
border-radius: 3px;
overflow: hidden;
}

.progress-fill {
height: 100%;
background: linear-gradient(135deg, #27ae60, #229954);
border-radius: 3px;
transition: width 0.3s ease;
}

.progress-fill.warning {
background: linear-gradient(135deg, #f39c12, #d68910);
}

.progress-fill.danger {
background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.poule-actions {
padding: 1rem 1.5rem;
display: flex;
gap: 0.5rem;
}

.btn-poule {
flex: 1;
padding: 0.6rem 0.8rem;
border-radius: 6px;
font-weight: 500;
text-decoration: none;
text-align: center;
transition: all 0.2s ease;
font-size: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
border: none;
cursor: pointer;
}

.btn-poule.btn-primary {
background: linear-gradient(135deg, #059669, #047857);
color: white;
}

.btn-poule.btn-primary:hover {
background: linear-gradient(135deg, #047857, #065f46);
transform: translateY(-1px);
color: white;
text-decoration: none;
}

.btn-poule.btn-outline {
background: transparent;
color: #374151;
border: 1px solid #d1d5db;
}

.btn-poule.btn-outline:hover {
background: #f9fafb;
border-color: #9ca3af;
color: #374151;
text-decoration: none;
}

/* ========================================
======================================== */

@media (min-width: 1400px) {
.poules-grid {
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
}

@media (min-width: 1000px) and (max-width: 1399px) {
.poules-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
}

@media (min-width: 700px) and (max-width: 999px) {
.poules-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.poule-card {
max-width: none;
}
}

@media (max-width: 699px) {
.poules-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

.poule-card {
max-width: 100%;
margin: 0;
}

.poule-header,
.poule-info,
.poule-actions {
padding-left: 1rem;
padding-right: 1rem;
}

.poule-details {
grid-template-columns: 1fr;
gap: 0.5rem;
}

.btn-poule {
font-size: 0.75rem;
padding: 0.5rem 0.6rem;
}
}

/* ========================================
======================================== */

.score-entry-empty {
text-align: center;
padding: 3rem 2rem;
background: white;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.06);
border: 1px solid #e5e7eb;
margin: 2rem 0;
}

.score-entry-empty .empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}

.score-entry-empty h3 {
color: #374151;
margin-bottom: 1rem;
font-size: 1.25rem;
}

.score-entry-empty p {
color: #6b7280;
margin-bottom: 1.5rem;
line-height: 1.6;
}

/* ========================================
======================================== */

.poule-stats {
display: flex;
gap: 0.5rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}

.stat-badge {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 500;
}

.stat-badge.matches {
background: #dbeafe;
color: #1e40af;
}

.stat-badge.completion {
background: #d4edda;
color: #155724;
}

.stat-badge.pending {
background: #fff3cd;
color: #856404;
}

/* ========================================
======================================== */

.score-filters {
background: white;
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
box-shadow: 0 1px 6px rgba(0,0,0,0.05);
border: 1px solid #e5e7eb;
}

.filter-buttons {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}

.filter-btn {
padding: 0.4rem 0.8rem;
border-radius: 16px;
font-size: 0.8rem;
font-weight: 500;
border: 1px solid #d1d5db;
background: white;
color: #374151;
cursor: pointer;
transition: all 0.2s ease;
}

.filter-btn:hover {
background: #f3f4f6;
border-color: #9ca3af;
}

.filter-btn.active {
background: #3b82f6;
color: white;
border-color: #3b82f6;
}

/* ========================================
======================================== */

.poule-card.loading {
opacity: 0.7;
pointer-events: none;
}

.poule-card.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid #f3f3f3;
border-top: 2px solid #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}

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

/* ========================================
======================================== */

/* ========================================

======================================== */

/* ========================================
======================================== */

.quick-actions {
background: white;
border-radius: 16px;
padding: 2rem;
margin-top: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
}

.quick-actions h3 {
margin: 0 0 1.5rem 0;
color: #2c3e50;
font-size: 1.25rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}

.action-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}

/* ========================================
======================================== */

.btn-quick {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 1rem 1.5rem;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
color: #495057;
text-decoration: none;
border-radius: 12px;
font-weight: 500;
font-size: 0.95rem;
border: 1px solid #dee2e6;
transition: all 0.3s ease;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.btn-quick:hover {
background: linear-gradient(135deg, #e9ecef, #dee2e6);
color: #343a40;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-quick:active {
transform: translateY(0);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ========================================
======================================== */

.btn-action {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
font-size: 0.875rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
border: none;
cursor: pointer;
text-align: center;
min-width: fit-content;
}

.btn-action:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.btn-action.btn-primary {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}

.btn-action.btn-primary:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a);
color: white;
}

.btn-action.btn-secondary {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
color: white;
}

.btn-action.btn-secondary:hover {
background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
color: white;
}

.btn-action.btn-success {
background: linear-gradient(135deg, #27ae60, #229954);
color: white;
}

.btn-action.btn-success:hover {
background: linear-gradient(135deg, #229954, #1e8449);
color: white;
}

.btn-action.btn-warning {
background: linear-gradient(135deg, #f39c12, #d68910);
color: white;
}

.btn-action.btn-warning:hover {
background: linear-gradient(135deg, #d68910, #b7950b);
color: white;
}

.btn-action.btn-danger {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
}

.btn-action.btn-danger:hover {
background: linear-gradient(135deg, #c0392b, #a93226);
color: white;
}

/* ========================================
======================================== */

.score-entry-container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}

/* ========================================
======================================== */

.poule-actions {
padding: 1rem 1.5rem;
display: flex;
gap: 0.5rem;
background: #f8f9fa;
border-top: 1px solid #dee2e6;
}

.poule-actions .btn-action {
flex: 1;
}

/* ========================================
======================================== */

.empty-state {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin: 2rem 0;
}

.empty-state .empty-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
opacity: 0.6;
}

.empty-state h3 {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 600;
}

.empty-state p {
color: #64748b;
margin-bottom: 2rem;
line-height: 1.6;
font-size: 1rem;
}

.empty-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}

/* ========================================
======================================== */

.score-form {
background: #f8f9fa;
border-radius: 8px;
padding: 1rem;
margin-top: 1rem;
border: 1px solid #e9ecef;
}

.set-group {
margin-bottom: 1rem;
}

.set-label {
display: block;
font-weight: 600;
color: #495057;
margin-bottom: 0.5rem;
font-size: 0.875rem;
}

.score-inputs {
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: center;
}

.score-input {
width: 60px;
height: 40px;
text-align: center;
border: 2px solid #ced4da;
border-radius: 6px;
font-size: 1.125rem;
font-weight: 600;
background: white;
transition: all 0.3s ease;
}

.score-input:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
}

.score-separator {
font-size: 1.25rem;
font-weight: bold;
color: #6c757d;
margin: 0 0.25rem;
}

.btn-score {
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
}

.btn-score.btn-primary {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}

.btn-score.btn-primary:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.btn-score.btn-secondary {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
color: white;
}

.btn-score.btn-secondary:hover {
background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ========================================
======================================== */

.quick-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}

.quick-stats .stat-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
}

.quick-stats .stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.quick-stats .stat-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
opacity: 0.8;
}

.quick-stats .stat-number {
font-size: 2rem;
font-weight: bold;
margin-bottom: 0.25rem;
color: #3498db;
}

.quick-stats .stat-label {
color: #64748b;
font-size: 0.875rem;
font-weight: 500;
}

/* ========================================
======================================== */

.progress-section {
margin: 1rem 0;
}

.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}

.progress-label {
font-size: 0.875rem;
color: #64748b;
font-weight: 500;
}

.progress-percentage {
font-size: 0.875rem;
color: #2c3e50;
font-weight: 600;
}

.progress-bar-container {
width: 100%;
height: 8px;
background: #e5e7eb;
border-radius: 4px;
overflow: hidden;
}

.progress-bar {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
}

.progress-low {
background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.progress-medium {
background: linear-gradient(135deg, #f39c12, #d68910);
}

.progress-high {
background: linear-gradient(135deg, #27ae60, #229954);
}

/* ========================================
======================================== */

.poule-stats {
margin: 1rem 0;
}

.stat-row {
display: flex;
justify-content: space-between;
background: #f8f9fa;
border-radius: 8px;
padding: 1rem;
border: 1px solid #e9ecef;
}

.stat-item {
text-align: center;
flex: 1;
}

.stat-label {
display: block;
font-size: 0.75rem;
color: #64748b;
font-weight: 500;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.025em;
}

.stat-value {
display: block;
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
}

/* ========================================
======================================== */

@media (max-width: 768px) {
.action-buttons {
grid-template-columns: 1fr;
gap: 0.75rem;
}

.btn-quick {
padding: 0.875rem 1.25rem;
font-size: 0.9rem;
}

.poule-actions {
flex-direction: column;
gap: 0.75rem;
}

.btn-action {
width: 100%;
justify-content: center;
}

.empty-actions {
flex-direction: column;
align-items: center;
}

.empty-actions .btn-modern {
width: 100%;
max-width: 300px;
}

.quick-stats {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}

.stat-row {
flex-direction: column;
gap: 0.75rem;
}

.stat-item {
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
}

.score-inputs {
gap: 0.25rem;
}

.score-input {
width: 50px;
height: 36px;
font-size: 1rem;
}
}

@media (max-width: 480px) {
.quick-actions {
padding: 1.5rem 1rem;
}

.btn-quick {
padding: 0.75rem 1rem;
font-size: 0.85rem;
}

.quick-stats {
grid-template-columns: 1fr;
}

.quick-stats .stat-number {
font-size: 1.75rem;
}

.quick-stats .stat-icon {
font-size: 1.75rem;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

/* ========================================
======================================== */

.players-actions {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
align-items: center;
flex-wrap: wrap;
}

.players-table-container {
overflow-x: auto;
margin-bottom: 1.5rem;
}

.players-table {
width: 100%;
border-collapse: collapse;
background: white;
font-size: 0.9rem;
}

.players-table th,
.players-table td {
padding: 0.75rem 0.5rem;
text-align: left;
border-bottom: 1px solid #dee2e6;
vertical-align: middle;
}

.players-table th {
background: #f8f9fa;
font-weight: 600;
color: #495057;
font-size: 0.85rem;
}

.players-table tbody tr:hover {
background: #f8f9fa;
}

/* ========================================
======================================== */

.btn-xs {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
border-radius: 4px;
font-weight: 500;
line-height: 1.2;
display: inline-flex;
align-items: center;
gap: 0.25rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}

.btn-xs:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.players-table .btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.8rem;
border-radius: 4px;
font-weight: 500;
line-height: 1.2;
display: inline-flex;
align-items: center;
gap: 0.25rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
margin: 0.125rem;
}

.players-table .btn-sm:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* ========================================
======================================== */

.player-actions {
display: flex;
gap: 0.25rem;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}

.player-actions .btn-sm {
min-width: fit-content;
flex-shrink: 0;
}

.delete-player-btn {
background: linear-gradient(135deg, #dc3545, #c82333) !important;
color: white !important;
border: 1px solid #c82333 !important;
}

.delete-player-btn:hover {
background: linear-gradient(135deg, #c82333, #a71e2a) !important;
color: white !important;
}

/* ========================================
======================================== */

.player-name {
min-width: 150px;
}

.player-name strong {
color: #2c3e50;
font-weight: 600;
}

.you-badge {
display: inline-block;
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
padding: 0.125rem 0.5rem;
border-radius: 10px;
font-size: 0.7rem;
font-weight: 500;
margin-left: 0.5rem;
}

/* ========================================
======================================== */

.account-status {
display: flex;
flex-direction: column;
gap: 0.25rem;
}

.badge {
display: inline-block;
padding: 0.25rem 0.5rem;
font-size: 0.7rem;
font-weight: 500;
border-radius: 12px;
white-space: nowrap;
}

.active-account {
background: #d4edda;
color: #155724;
}

.inactive-account {
background: #f8d7da;
color: #721c24;
}

.no-account {
background: #e2e3e5;
color: #6c757d;
}

.admin-badge {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
}

/* ========================================
======================================== */

.availability-info {
font-size: 0.85rem;
color: #64748b;
}

.availability-count {
font-weight: 600;
color: #2c3e50;
}

/* ========================================
======================================== */

.no-players {
text-align: center;
padding: 3rem 2rem;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid #dee2e6;
}

.no-players p {
color: #6c757d;
margin-bottom: 1.5rem;
font-size: 1.1rem;
}

/* ========================================
======================================== */

.stats-grid .stat-card {
background: white;
border-radius: 8px;
padding: 1.25rem;
text-align: center;
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
}

.stats-grid .stat-card:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.stats-grid .stat-number {
font-size: 1.75rem;
font-weight: bold;
color: #3498db;
margin-bottom: 0.25rem;
}

.stats-grid .stat-label {
color: #64748b;
font-size: 0.85rem;
font-weight: 500;
}

.account-stat {
border-left: 3px solid #27ae60;
}

/* ========================================
======================================== */

.inactive-player {
opacity: 0.7;
background: #f8f9fa;
}

.inactive-player .player-name {
color: #6c757d;
}

/* ========================================
======================================== */

@media (max-width: 1200px) {
.players-table {
font-size: 0.85rem;
}

.players-table th,
.players-table td {
padding: 0.5rem 0.25rem;
}

.player-actions {
flex-direction: column;
gap: 0.125rem;
align-items: stretch;
}

.player-actions .btn-sm {
width: 100%;
justify-content: center;
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
}
}

@media (max-width: 768px) {
.players-actions {
flex-direction: column;
align-items: stretch;
gap: 0.75rem;
}

.players-actions .btn {
width: 100%;
justify-content: center;
}

.players-table-container {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}

.players-table {
min-width: 700px;
}

.players-table th:last-child,
.players-table td:last-child {
min-width: 120px;
position: sticky;
right: 0;
background: white;
box-shadow: -2px 0 4px rgba(0,0,0,0.1);
}

.players-table th:last-child {
background: #f8f9fa;
}

.account-status {
flex-direction: row;
flex-wrap: wrap;
}

.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}

@media (max-width: 480px) {
.players-table {
font-size: 0.8rem;
}

.btn-sm {
padding: 0.25rem 0.5rem;
font-size: 0.7rem;
}

.badge {
font-size: 0.65rem;
padding: 0.2rem 0.4rem;
}

.you-badge {
font-size: 0.6rem;
padding: 0.1rem 0.4rem;
}

.stats-grid {
grid-template-columns: 1fr;
}
}

/* ========================================
======================================== */

.btn-group {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}

.btn-group .btn {
flex: 1;
min-width: fit-content;
}

.btn-group .btn-secondary {
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
color: white;
}

.btn-group .btn-secondary:hover {
background: linear-gradient(135deg, #7f8c8d, #6c7b7d);
color: white;
}

/* ========================================
======================================== */

.players-table td:first-child {
font-weight: 500;
}

.players-table td:last-child {
text-align: center;
white-space: nowrap;
}

/* ========================================
======================================== */

/* ========================================

======================================== */

/* ========================================
======================================== */

.main-dashboard {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

/* ========================================
======================================== */

a.btn, button.btn, input[type="submit"].btn, input[type="button"].btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.5rem !important;
padding: 0.75rem 1.25rem !important;
font-size: 0.95rem !important;
font-weight: 500 !important;
line-height: 1.2 !important;
text-align: center !important;
text-decoration: none !important;
border: 1px solid transparent !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.2s ease-in-out !important;
white-space: nowrap !important;
user-select: none !important;
}

.btn:not([class*="btn-"]):not(.btn-admin):not(.btn-modern) {
background: linear-gradient(135deg, #6c757d, #495057) !important;
color: white !important;
border-color: #495057 !important;
}

.btn:not([class*="btn-"]):not(.btn-admin):not(.btn-modern):hover {
background: linear-gradient(135deg, #495057, #343a40) !important;
color: white !important;
text-decoration: none !important;
transform: translateY(-1px) !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.btn-primary, a.btn-primary, button.btn-primary {
background: linear-gradient(135deg, #3498db, #2980b9) !important;
border-color: #2980b9 !important;
color: white !important;
}

.btn-primary:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a) !important;
border-color: #1f5f8a !important;
color: white !important;
text-decoration: none !important;
}

.btn-success, a.btn-success, button.btn-success {
background: linear-gradient(135deg, #27ae60, #229954) !important;
border-color: #229954 !important;
color: white !important;
}

.btn-success:hover {
background: linear-gradient(135deg, #229954, #1e8449) !important;
border-color: #1e8449 !important;
color: white !important;
text-decoration: none !important;
}

.btn-danger, a.btn-danger, button.btn-danger {
background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
border-color: #c0392b !important;
color: white !important;
}

.btn-danger:hover {
background: linear-gradient(135deg, #c0392b, #a93226) !important;
border-color: #a93226 !important;
color: white !important;
text-decoration: none !important;
}

.btn-warning, a.btn-warning, button.btn-warning {
background: linear-gradient(135deg, #f39c12, #d68910) !important;
border-color: #d68910 !important;
color: white !important;
}

.btn-warning:hover {
background: linear-gradient(135deg, #d68910, #b7950b) !important;
border-color: #b7950b !important;
color: white !important;
text-decoration: none !important;
}

.btn-info, a.btn-info, button.btn-info {
background: linear-gradient(135deg, #3498db, #2980b9) !important;
border-color: #2980b9 !important;
color: white !important;
}

.btn-info:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a) !important;
border-color: #1f5f8a !important;
color: white !important;
text-decoration: none !important;
}

.btn-secondary, a.btn-secondary, button.btn-secondary {
background: linear-gradient(135deg, #95a5a6, #7f8c8d) !important;
border-color: #7f8c8d !important;
color: white !important;
}

.btn-secondary:hover {
background: linear-gradient(135deg, #7f8c8d, #6c7b7d) !important;
border-color: #6c7b7d !important;
color: white !important;
text-decoration: none !important;
}

.btn-light, a.btn-light, button.btn-light {
background: #f8f9fa !important;
border-color: #dee2e6 !important;
color: #495057 !important;
}

.btn-light:hover {
background: #e2e6ea !important;
border-color: #dae0e5 !important;
color: #495057 !important;
text-decoration: none !important;
}

.btn-dark, a.btn-dark, button.btn-dark {
background: #343a40 !important;
border-color: #343a40 !important;
color: white !important;
}

.btn-dark:hover {
background: #23272b !important;
border-color: #1d2124 !important;
color: white !important;
text-decoration: none !important;
}

/* ========================================
======================================== */

.btn-xs {
padding: 0.25rem 0.5rem !important;
font-size: 0.75rem !important;
border-radius: 4px !important;
}

.btn-sm {
padding: 0.375rem 0.75rem !important;
font-size: 0.875rem !important;
border-radius: 4px !important;
}

.btn-lg {
padding: 1rem 1.75rem !important;
font-size: 1.125rem !important;
border-radius: 8px !important;
}

.btn-xl {
padding: 1.25rem 2rem !important;
font-size: 1.25rem !important;
border-radius: 10px !important;
}

/* ========================================
======================================== */

.btn:focus {
outline: none !important;
box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25) !important;
}

.btn:active {
transform: translateY(0) !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.btn:disabled, .btn.disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
transform: none !important;
box-shadow: none !important;
}

/* ========================================
======================================== */

.dashboard-actions {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}

.dashboard-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.dashboard-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
}

.dashboard-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.dashboard-card h3 {
margin: 0 0 1rem 0;
color: #2c3e50;
font-size: 1.25rem;
font-weight: 600;
}

.dashboard-card p {
margin: 0 0 1.5rem 0;
color: #64748b;
line-height: 1.6;
}

.dashboard-card .btn {
width: 100%;
justify-content: center;
}

/* ========================================
======================================== */

.competitions-list {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
}

.competitions-list h2 {
margin: 0 0 1.5rem 0;
color: #2c3e50;
font-size: 1.5rem;
font-weight: 600;
}

.competition-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 1rem;
transition: all 0.3s ease;
}

.competition-item:hover {
background: #f8f9fa;
border-color: #3498db;
}

.competition-info h4 {
margin: 0 0 0.5rem 0;
color: #2c3e50;
}

.competition-info p {
margin: 0;
color: #64748b;
font-size: 0.9rem;
}

.competition-actions {
display: flex;
gap: 0.5rem;
}

/* ========================================
======================================== */

.empty-dashboard {
text-align: center;
padding: 3rem 2rem;
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
}

.empty-dashboard .empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}

.empty-dashboard h3 {
color: #2c3e50;
margin-bottom: 1rem;
}

.empty-dashboard p {
color: #64748b;
margin-bottom: 2rem;
}

/* ========================================
======================================== */

@media (max-width: 768px) {
.main-dashboard {
padding: 12px;
}

.dashboard-actions {
flex-direction: column;
}

.dashboard-cards {
grid-template-columns: 1fr;
}

.competition-item {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}

.competition-actions {
width: 100%;
justify-content: center;
}

.btn {
width: 100%;
max-width: 300px;
margin: 0 auto;
}
}

/* ========================================
======================================== */

.card {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
}

.card h1, .card h2, .card h3 {
margin-top: 0;
color: #2c3e50;
}

.card .btn {
margin-top: 1rem;
}

/* ========================================
======================================== */

a.btn {
display: inline-flex !important;
text-decoration: none !important;
}

a.btn:hover {
text-decoration: none !important;
}

/* ========================================
======================================== */
css_additions = """
/* ========================================
======================================== */

.schedule-container {
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem;
}

.schedule-hero {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
color: white;
padding: 2rem;
border-radius: 15px;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.hero-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
}

.hero-text h1 {
font-size: 2.2rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-text p {
margin: 0;
opacity: 0.9;
font-size: 1.1rem;
}

.hero-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}

.btn-hero {
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}

.btn-hero-primary {
background: rgba(255,255,255,0.2);
color: white;
border: 1px solid rgba(255,255,255,0.3);
}

.btn-hero-primary:hover {
background: rgba(255,255,255,0.3);
color: white;
text-decoration: none;
transform: translateY(-2px);
}

.btn-hero-warning {
background: #f59e0b;
color: white;
}

.btn-hero-warning:hover {
background: #d97706;
color: white;
text-decoration: none;
transform: translateY(-2px);
}

.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.info-card {
background: white;
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
transition: transform 0.2s ease;
}

.info-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.info-card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid #f8fafc;
}

.info-card-icon {
font-size: 1.5rem;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-radius: 10px;
color: white;
}

.info-card-title {
font-size: 1.1rem;
font-weight: 600;
color: #1f2937;
margin: 0;
}

.info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid #f3f4f6;
}

.info-item:last-child {
border-bottom: none;
padding-bottom: 0;
}

.info-label {
color: #6b7280;
font-weight: 500;
}

.info-value {
color: #1f2937;
font-weight: 600;
}

.progress-container {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #f3f4f6;
}

.progress-label {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-size: 0.9rem;
font-weight: 500;
color: #374151;
}

.progress-bar-container {
background: #f3f4f6;
border-radius: 10px;
height: 8px;
overflow: hidden;
}

.progress-bar {
background: linear-gradient(90deg, #10b981, #059669);
height: 100%;
border-radius: 10px;
transition: width 0.5s ease;
}

.schema-details-card .info-card-icon {
background: linear-gradient(135deg, #f59e0b, #d97706);
}

.speler-informatie-card .info-card-icon {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.matches-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.match-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
transition: all 0.2s ease;
}

.match-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.navigation-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
flex-wrap: wrap;
}

.btn-modern {
padding: 0.75rem 1.5rem;
border-radius: 10px;
text-decoration: none;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
}

.btn-secondary-modern {
background: #f8fafc;
color: #1e293b;
border: 2px solid #cbd5e1;
font-weight: 500;
}

.btn-secondary-modern:hover {
background: #e2e8f0;
color: #0f172a;
text-decoration: none;
transform: translateY(-1px);
}

.btn-primary-modern {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border: none;
}

.btn-primary-modern:hover {
background: linear-gradient(135deg, #2563eb, #1e40af);
color: white;
text-decoration: none;
transform: translateY(-1px);
}

@media (max-width: 768px) {
.schedule-container {
padding: 1rem;
}

.hero-content {
flex-direction: column;
text-align: center;
}

.hero-text h1 {
font-size: 1.8rem;
}

.info-grid {
grid-template-columns: 1fr;
}

.matches-grid {
grid-template-columns: 1fr;
}

.navigation-buttons {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 250px;
justify-content: center;
}
}

/* ========================================
======================================== */
/* ========================================
======================================== */

.welcome-container {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}

.welcome-card {
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
max-width: 600px;
width: 100%;
text-align: center;
animation: fadeInUp 0.8s ease-out;
}

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

.welcome-title {
font-size: 2.5rem;
font-weight: bold;
color: #2c3e50;
margin: 0 0 1rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.welcome-subtitle {
font-size: 1.3rem;
color: #64748b;
margin: 0 0 2rem 0;
font-weight: 300;
}

.welcome-success-message {
background: #d4edda;
border: 1px solid #c3e6cb;
color: #155724;
padding: 1rem;
border-radius: 10px;
margin-bottom: 2rem;
animation: slideInSubtleLeft 0.5s ease-out;
}

@keyframes slideInSubtleLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}

.welcome-actions {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 2rem;
flex-wrap: wrap;
}

.btn-welcome {
padding: 1rem 2rem;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
border: none;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-width: 150px;
justify-content: center;
}

.btn-welcome-primary {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-welcome-primary:hover {
background: linear-gradient(135deg, #2563eb, #1e40af);
color: white;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.btn-welcome-secondary {
background: #f8fafc;
color: #475569;
border: 2px solid #e2e8f0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.btn-welcome-secondary:hover {
background: #e2e8f0;
color: #334155;
text-decoration: none;
transform: translateY(-2px);
border-color: #cbd5e1;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.welcome-divider {
border: none;
height: 2px;
background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
margin: 2.5rem 0;
}

.welcome-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}

.feature-card {
text-align: center;
padding: 1.5rem;
border-radius: 15px;
background: #f8fafc;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
animation: fadeInUp 0.8s ease-out;
animation-delay: calc(var(--delay) * 0.1s);
animation-fill-mode: both;
}

.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
background: white;
}

.feature-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
}

.feature-title {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
margin: 0 0 0.75rem 0;
}

.feature-description {
color: #64748b;
line-height: 1.5;
margin: 0;
font-size: 0.95rem;
}

@media (max-width: 768px) {
.welcome-container {
padding: 1rem;
min-height: 100vh;
}

.welcome-card {
padding: 2rem;
border-radius: 15px;
}

.welcome-title {
font-size: 2rem;
}

.welcome-subtitle {
font-size: 1.1rem;
}

.welcome-actions {
flex-direction: column;
align-items: center;
}

.btn-welcome {
width: 100%;
max-width: 250px;
}

.welcome-features {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.feature-card {
padding: 1.25rem;
}
}

@media (max-width: 480px) {
.welcome-card {
padding: 1.5rem;
}

.welcome-title {
font-size: 1.8rem;
}

.btn-welcome {
padding: 0.875rem 1.5rem;
font-size: 1rem;
}
}

/* ========================================
/* ========================================
======================================== */

.login-container {
min-height: 100vh;
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}

.logo {
text-align: center;
margin-bottom: 2rem;
color: white;
}

.logo h1 {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.logo p {
font-size: 1.1rem;
margin: 0;
opacity: 0.9;
}

.login-container form {
background: white;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
width: 100%;
max-width: 400px;
margin-bottom: 1.5rem;
}

.form-group {
margin-bottom: 1.5rem;
}

.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #374151;
font-size: 0.95rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
width: 100%;
padding: 0.875rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
transition: all 0.2s ease;
box-sizing: border-box;
}

.form-group input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-group input:hover {
border-color: #d1d5db;
}

.login-container form button[type="submit"] {
width: 100%;
padding: 1rem;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 0.5rem;
}

.login-container form button[type="submit"]:hover {
background: linear-gradient(135deg, #2563eb, #1e40af);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.login-container form button[type="submit"]:active {
transform: translateY(0);
}

.register-link {
text-align: center;
background: rgba(255,255,255,0.1);
padding: 1.5rem;
border-radius: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}

.register-link p {
margin: 0;
color: white;
font-size: 0.95rem;
}

.register-link a {
color: #fbbf24;
text-decoration: none;
font-weight: 600;
transition: color 0.2s ease;
}

.register-link a:hover {
color: #f59e0b;
text-decoration: underline;
}

.login-container .alert {
width: 100%;
max-width: 400px;
margin-bottom: 1.5rem;
padding: 1rem;
border-radius: 8px;
text-align: center;
font-weight: 500;
}

.login-container .alert-success {
background: #d1fae5;
color: #065f46;
border: 1px solid #a7f3d0;
}

.login-container .alert-danger {
background: #fee2e2;
color: #991b1b;
border: 1px solid #fca5a5;
}

.login-container .alert-warning {
background: #fef3c7;
color: #92400e;
border: 1px solid #fcd34d;
}

.register-container {
min-height: 100vh;
background: linear-gradient(135deg, #059669 0%, #047857 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}

.register-container .logo {
text-align: center;
margin-bottom: 2rem;
color: white;
}

.register-container form {
background: white;
padding: 2.5rem;
border-radius: 15px;
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
width: 100%;
max-width: 450px;
margin-bottom: 1.5rem;
}

.login-link {
text-align: center;
background: rgba(255,255,255,0.1);
padding: 1.5rem;
border-radius: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}

.login-link p {
margin: 0;
color: white;
font-size: 0.95rem;
}

.login-link a {
color: #fbbf24;
text-decoration: none;
font-weight: 600;
transition: color 0.2s ease;
}

.login-link a:hover {
color: #f59e0b;
text-decoration: underline;
}

.profile-container {
max-width: 600px;
margin: 0 auto;
padding: 2rem;
}

.profile-card {
background: white;
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
}

.profile-card h1 {
color: #2c3e50;
margin-top: 0;
}

.profile-card h2 {
color: #374151;
margin-top: 2rem;
margin-bottom: 1.5rem;
font-size: 1.3rem;
}

.profile-card h3 {
color: #4b5563;
margin-top: 2rem;
margin-bottom: 1rem;
}

.form-actions {
display: flex;
gap: 1rem;
margin-top: 2rem;
flex-wrap: wrap;
}

.form-actions .btn {
flex: 1;
min-width: 120px;
}

.form-group input[disabled] {
background: #f8f9fa !important;
color: #6c757d !important;
cursor: not-allowed;
}

.form-group small {
display: block;
margin-top: 0.25rem;
font-size: 0.85rem;
color: #6c757d;
}

@media (max-width: 768px) {
.login-container,
.register-container {
padding: 1rem;
}

.login-container form,
.register-container form {
padding: 2rem;
margin: 0 1rem 1.5rem 1rem;
}

.logo h1 {
font-size: 2rem;
}

.logo p {
font-size: 1rem;
}
}

@media (max-width: 480px) {
.login-container form,
.register-container form {
padding: 1.5rem;
margin: 0 0.5rem 1rem 0.5rem;
}

.logo h1 {
font-size: 1.8rem;
}

.form-actions {
flex-direction: column;
}

.form-actions .btn {
width: 100%;
}
}

/* ========================================
======================================== *//* ========================================
======================================== */

.summary-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.stat-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #667eea, #764ba2);
}

.stat-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.stat-icon {
font-size: 2.5rem;
margin-bottom: 0.75rem;
display: block;
}

.stat-number {
font-size: 2.5rem;
font-weight: bold;
color: #3b82f6;
margin-bottom: 0.5rem;
display: block;
}

.stat-label {
color: #6b7280;
font-size: 0.9rem;
font-weight: 500;
margin: 0;
}

.quick-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}

.quick-stats .stat-card {
padding: 1.25rem;
}

.quick-stats .stat-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}

.quick-stats .stat-number {
font-size: 2rem;
margin-bottom: 0.25rem;
}

.quick-stats .stat-label {
font-size: 0.85rem;
}

@media (max-width: 768px) {
.summary-stats {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.quick-stats {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}

.stat-card {
padding: 1.25rem 1rem;
}

.stat-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
}

.stat-number {
font-size: 2rem;
margin-bottom: 0.25rem;
}

.stat-label {
font-size: 0.85rem;
}
}

@media (max-width: 480px) {
.summary-stats,
.quick-stats {
grid-template-columns: 1fr;
gap: 1rem;
}

.stat-card {
padding: 1rem;
}

.stat-icon {
font-size: 1.75rem;
}

.stat-number {
font-size: 1.75rem;
}

.stat-label {
font-size: 0.8rem;
}
}

.stat-card:nth-child(1) .stat-number {
}

.stat-card:nth-child(2) .stat-number {
}

.stat-card:nth-child(3) .stat-number {
}

.stat-card:nth-child(4) .stat-number {
}

.stat-card:nth-child(1):hover::before {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
}

.stat-card:nth-child(2):hover::before {
background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-card:nth-child(3):hover::before {
background: linear-gradient(135deg, #10b981, #059669);
}

.stat-card:nth-child(4):hover::before {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

/* ========================================
======================================== */

/* ========================================
======================================== */

.edit-player-container {
max-width: 800px;
margin: 0 auto;
padding: 1.5rem;
}

.edit-player-hero {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
color: white;
padding: 2rem;
border-radius: 15px;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.edit-player-hero h1 {
font-size: 2.2rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.edit-player-hero p {
font-size: 1.1rem;
opacity: 0.9;
margin: 0;
}

.player-info-summary {
background: white;
border-radius: 15px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
display: flex;
align-items: center;
gap: 1rem;
}

.player-info-summary .player-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
flex-shrink: 0;
}

.player-info-summary .player-details h3 {
margin: 0 0 0.25rem 0;
color: #1f2937;
font-size: 1.2rem;
}

.player-info-summary .player-details p {
margin: 0;
color: #6b7280;
font-size: 0.9rem;
}

.form-card {
background: white;
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
}

.form-card-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid #f8fafc;
}

.form-card-icon {
font-size: 1.5rem;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
border-radius: 10px;
color: white;
}

.form-card-title {
font-size: 1.2rem;
font-weight: 600;
color: #1f2937;
margin: 0;
}

.form-card-description {
color: #6b7280;
font-size: 0.9rem;
margin: 0.25rem 0 0 0;
}

.form-group {
margin-bottom: 1.5rem;
}

.form-group:last-child {
margin-bottom: 0;
}

.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #374151;
font-size: 0.95rem;
}

.form-label.required::after {
content: ' *';
color: #ef4444;
}

.form-input {
width: 100%;
padding: 0.875rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
transition: all 0.2s ease;
box-sizing: border-box;
}

.form-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input:hover {
border-color: #d1d5db;
}

.form-input::placeholder {
color: #9ca3af;
}

.form-help {
margin-top: 0.5rem;
font-size: 0.85rem;
color: #6b7280;
line-height: 1.4;
}

.form-actions {
background: #f8fafc;
padding: 1.5rem;
border-radius: 10px;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}

.btn-form {
padding: 0.875rem 2rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
min-width: 120px;
justify-content: center;
}

.btn-form:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-form.btn-primary {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
}

.btn-form.btn-primary:hover {
background: linear-gradient(135deg, #2563eb, #1e40af);
color: white;
}

.btn-form.btn-secondary {
background: #f8fafc;
color: #475569;
border: 2px solid #e2e8f0;
}

.btn-form.btn-secondary:hover {
background: #e2e8f0;
color: #334155;
}

@media (max-width: 768px) {
.edit-player-container {
padding: 1rem;
}

.edit-player-hero {
padding: 1.5rem;
}

.edit-player-hero h1 {
font-size: 1.8rem;
}

.player-info-summary {
flex-direction: column;
text-align: center;
}

.form-card {
padding: 1.5rem;
}

.form-actions {
flex-direction: column;
align-items: center;
}

.btn-form {
width: 100%;
max-width: 250px;
}
}

@media (max-width: 480px) {
.edit-player-hero h1 {
font-size: 1.6rem;
}

.form-card {
padding: 1.25rem;
}

.form-card-header {
margin-bottom: 1rem;
}

.form-group {
margin-bottom: 1.25rem;
}

.btn-form {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
}
}

/* ========================================
======================================== */

/* ========================================
======================================== */

.create-poule-container {
max-width: 800px;
margin: 0 auto;
padding: 1.5rem;
}

.page-header {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
color: white;
padding: 2rem;
border-radius: 15px;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.page-title {
font-size: 2.2rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.page-subtitle {
font-size: 1.1rem;
opacity: 0.9;
margin: 0;
}

.form-card {
background: white;
border-radius: 15px;
padding: 0;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
overflow: hidden;
margin-bottom: 2rem;
}

.form-header {
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
padding: 1.5rem;
border-bottom: 1px solid #e2e8f0;
}

.form-header h3 {
margin: 0;
color: #1f2937;
font-size: 1.2rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}

.form-body {
padding: 2rem;
}

.form-group {
margin-bottom: 2rem;
}

.form-group:last-child {
margin-bottom: 0;
}

.form-label {
display: block;
margin-bottom: 0.75rem;
font-weight: 600;
color: #374151;
font-size: 1rem;
}

.form-control {
width: 100%;
padding: 0.875rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
transition: all 0.2s ease;
box-sizing: border-box;
}

.form-control:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control:hover {
border-color: #d1d5db;
}

.form-control::placeholder {
color: #9ca3af;
}

.form-text {
margin-top: 0.5rem;
font-size: 0.85rem;
color: #6b7280;
line-height: 1.4;
}

.timeslot-selector {
margin-top: 1rem;
}

.timeslot-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
margin-top: 1rem;
}

.timeslot-option {
position: relative;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 1rem;
cursor: pointer;
transition: all 0.2s ease;
background: white;
display: flex;
align-items: center;
gap: 1rem;
}

.timeslot-option:hover {
border-color: #3b82f6;
background: #f8fafc;
}

.timeslot-option input[type="radio"] {
width: 20px;
height: 20px;
accent-color: #3b82f6;
margin: 0;
}

.timeslot-option input[type="radio"]:checked + .timeslot-info {
color: #1f2937;
}

.timeslot-option:has(input:checked) {
border-color: #3b82f6;
background: linear-gradient(135deg, #eff6ff, #dbeafe);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.timeslot-info {
flex: 1;
}

.timeslot-day {
font-weight: 600;
color: #1f2937;
font-size: 1rem;
margin-bottom: 0.25rem;
}

.timeslot-time {
color: #6b7280;
font-size: 0.9rem;
margin-bottom: 0.25rem;
}

.timeslot-courts {
background: #f3f4f6;
color: #374151;
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
}

.form-actions {
background: #f8fafc;
padding: 1.5rem;
border-radius: 10px;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}

.btn-modern {
padding: 0.875rem 2rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
min-width: 140px;
justify-content: center;
}

.btn-modern:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-modern.btn-success-modern {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}

.btn-modern.btn-success-modern:hover {
background: linear-gradient(135deg, #059669, #047857);
color: white;
}

.btn-modern.btn-secondary-modern {
background: #f8fafc;
color: #1e293b;
border: 2px solid #cbd5e1;
font-weight: 500;
}

.btn-modern.btn-secondary-modern:hover {
background: #e2e8f0;
color: #0f172a;
}

.help-section {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1px solid #fbbf24;
border-radius: 12px;
padding: 1.5rem;
margin-top: 2rem;
}

.help-title {
font-weight: 600;
color: #92400e;
margin-bottom: 0.75rem;
font-size: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.help-text {
color: #92400e;
line-height: 1.6;
font-size: 0.9rem;
}

.no-timeslots {
text-align: center;
padding: 3rem 2rem;
background: #f8fafc;
border-radius: 12px;
border: 2px dashed #e2e8f0;
}

.no-timeslots-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}

.no-timeslots h4 {
color: #1f2937;
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 600;
}

.no-timeslots p {
color: #6b7280;
margin-bottom: 0.5rem;
line-height: 1.6;
}

@media (max-width: 768px) {
.create-poule-container {
padding: 1rem;
}

.page-header {
padding: 1.5rem;
}

.page-title {
font-size: 1.8rem;
}

.form-body {
padding: 1.5rem;
}

.timeslot-options {
grid-template-columns: 1fr;
}

.timeslot-option {
flex-direction: column;
text-align: center;
gap: 0.75rem;
}

.form-actions {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 250px;
}
}

@media (max-width: 480px) {
.page-title {
font-size: 1.6rem;
}

.form-body {
padding: 1.25rem;
}

.timeslot-option {
padding: 0.75rem;
}

.btn-modern {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

.extracted-display-none {
display: none;
}

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

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

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

.extracted-display-inline-flex-gap-10px-a {
display: inline-flex; gap: 10px; align-items: center;
}

.extracted-width-80px {
width: 80px;
}

.extracted-accent-color-3b82f6-accent-lig {
--accent-color: #3b82f6; --accent-light: #60a5fa;
}

.extracted-accent-color-10b981-accent-lig {
--accent-color: #10b981; --accent-light: #34d399;
}

.extracted-accent-color-f59e0b-accent-lig {
--accent-color: #f59e0b; --accent-light: #fbbf24;
}

.extracted-accent-color-8b5cf6-accent-lig {
--accent-color: #8b5cf6; --accent-light: #a78bfa;
}

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

.extracted-display-inline-margin-left-10p {
display: inline; margin-left: 10px;
}

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

.extracted-display-inline-margin-left-5px {
display: inline; margin-left: 5px;
}

.extracted-display-inline-margin-left-5px {
display: inline; margin-left: 5px;
}

.extracted-display-none {
display: none;
}

.extracted-accent-color-3498db-accent-lig {
--accent-color: #3498db; --accent-light: #5dade2;
}

.extracted-accent-color-27ae60-accent-lig {
--accent-color: #27ae60; --accent-light: #58d68d;
}

.extracted-accent-color-f39c12-accent-lig {
--accent-color: #f39c12; --accent-light: #f8c471;
}

.extracted-accent-color-e74c3c-accent-lig {
--accent-color: #e74c3c; --accent-light: #ec7063;
}

.extracted-padding-1-5rem {
padding: 1.5rem;
}

.extracted-height-20px-border-radius-10px {
height: 20px; border-radius: 10px;
}

.extracted-width-stats-completed-matches- {
width: {{ (stats.completed_matches / stats.total_matches * 100)|round(1) }}%
}

.extracted-padding-1-5rem {
padding: 1.5rem;
}

.extracted-display-none {
display: none;
}

.extracted-display-none {
display: none;
}

.extracted-display-none-margin-top-1rem {
display: none; margin-top: 1rem;
}

.extracted-margin-top-2rem {
margin-top: 2rem;
}

.extracted-margin-top-2rem {
margin-top: 2rem;
}

.extracted-display-inline-block-margin-le {
display: inline-block; margin-left: 10px;
}

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

.extracted-display-grid-grid-template-col {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}

.extracted-display-grid-grid-template-col {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}

.extracted-display-grid-grid-template-col {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}

.extracted-margin-top-20px-padding-15px-b {
margin-top: 20px; padding: 15px; background: #f8f9fa; border-radius: 5px; display: none;
}

.extracted-display-grid-grid-template-col {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}

.extracted-margin-top-10px-font-size-1-2e {
margin-top: 10px; font-size: 1.2em; font-weight: bold; color: #2c3e50;
}

.extracted-background-fef3c7-color-92400e {
background: #fef3c7; color: #92400e;
}

.extracted-background-f3f4f6-color-6b7280 {
background: #f3f4f6; color: #6b7280;
}

.extracted-display-block-color-6b7280 {
display: block; color: #6b7280;
}

.extracted-color-3b82f6 {
color: #3b82f6;
}

.extracted-color-9ca3af {
color: #9ca3af;
}

.extracted-accent-color-3b82f6 {
--accent-color: #3b82f6;
}

.extracted-accent-color-10b981 {
--accent-color: #10b981;
}

.extracted-accent-color-ef4444 {
--accent-color: #ef4444;
}

.extracted-accent-color-f59e0b {
--accent-color: #f59e0b;
}

.extracted-opacity-0-8 {
opacity: 0.8
}

.extracted-accent-color-3b82f6-accent-lig {
--accent-color: #3b82f6; --accent-light: #60a5fa;
}

.extracted-accent-color-ef4444-accent-lig {
--accent-color: #ef4444; --accent-light: #f87171;
}

.extracted-accent-color-10b981-accent-lig {
--accent-color: #10b981; --accent-light: #34d399;
}

.extracted-padding-1-5rem-2rem-0 {
padding: 1.5rem 2rem 0;
}

.extracted-accent-color-3b82f6-accent-lig {
--accent-color: #3b82f6; --accent-light: #60a5fa;
}

.extracted-accent-color-10b981-accent-lig {
--accent-color: #10b981; --accent-light: #34d399;
}

.extracted-accent-color-ef4444-accent-lig {
--accent-color: #ef4444; --accent-light: #f87171;
}

.extracted-accent-color-f59e0b-accent-lig {
--accent-color: #f59e0b; --accent-light: #fbbf24;
}

.extracted-accent-color-8b5cf6-accent-lig {
--accent-color: #8b5cf6; --accent-light: #a78bfa;
}

.extracted-accent-color-ec4899-accent-lig {
--accent-color: #ec4899; --accent-light: #f472b6;
}

.extracted-accent-color-06b6d4-accent-lig {
--accent-color: #06b6d4; --accent-light: #22d3ee;
}

.extracted-accent-color-84cc16-accent-lig {
--accent-color: #84cc16; --accent-light: #a3e635;
}

.extracted-opacity-0-6 {
opacity: 0.6
}

.extracted-background-fee2e2 {
background: #fee2e2;
}

.extracted-color-ef4444 {
color: #ef4444;
}

.extracted-color-9ca3af-font-size-0-85em {
color: #9ca3af; font-size: 0.85em;
}

.extracted-color-6b7280-text-align-center {
color: #6b7280; text-align: center; padding: 40px;
}

.extracted-margin-top-30px {
margin-top: 30px;
}

.extracted-display-none {
display: none;
}

.extracted-margin-0 {
margin: 0;
}

.extracted-stat-color-3b82f6 {
--stat-color: #3b82f6;
}

.extracted-stat-color-10b981 {
--stat-color: #10b981;
}

.extracted-margin-top-1rem-text-align-cen {
margin-top: 1rem; text-align: center;
}

.extracted-padding-1-5rem {
padding: 1.5rem;
}

.extracted-padding-1-5rem {
padding: 1.5rem;
}

.extracted-background-d1fae5-padding-1rem {
background: #d1fae5; padding: 1rem; border-radius: 10px; border: none;
}

.extracted-color-065f46 {
color: #065f46;
}

.extracted-color-065f46-font-weight-600 {
color: #065f46; font-weight: 600;
}

.extracted-margin-top-1-5rem {
margin-top: 1.5rem;
}

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

.extracted-background-fef3c7-padding-1rem {
background: #fef3c7; padding: 1rem; border-radius: 10px; border: none;
}

.extracted-color-92400e {
color: #92400e;
}

.extracted-display-none {
display: none;
}

.extracted-display-none {
display: none;
}

.extracted-display-none-margin-top-1rem {
display: none; margin-top: 1rem;
}

.extracted-width-completion-percentage {
width: {{ completion_percentage }}%
}

.extracted-background-f8f9fa-color-6c757d {
background: #f8f9fa; color: #6c757d;
}

.extracted-color-6c757d {
color: #6c757d;
}

.extracted-background-f8f9fa-color-6c757d {
background: #f8f9fa; color: #6c757d;
}

.extracted-margin-top-30px-margin-bottom- {
margin-top: 30px; margin-bottom: 15px; color: #2c3e50;
}

.extracted-background-f8f9fa-border-radiu {
background: #f8f9fa; border-radius: 10px; padding: 20px; margin-bottom: 20px; border-left: 4px solid #3498db;
}

.extracted-margin-top-0-color-2c3e50 {
margin-top: 0; color: #2c3e50;
}

.extracted-display-flex-gap-30px-flex-wra {
display: flex; gap: 30px; flex-wrap: wrap; align-items: center;
}

.extracted-display-flex-align-items-cente {
display: flex; align-items: center; gap: 10px;
}

.extracted-width-25px-height-25px-backgro {
width: 25px; height: 25px; background: #d4edda; border: 2px solid #27ae60; border-radius: 5px;
}

.extracted-display-flex-align-items-cente {
display: flex; align-items: center; gap: 10px;
}

.extracted-width-25px-height-25px-backgro {
width: 25px; height: 25px; background: #f8d7da; border: 2px solid #e74c3c; border-radius: 5px;
}

.extracted-display-flex-align-items-cente {
display: flex; align-items: center; gap: 10px;
}

.extracted-width-25px-height-25px-backgro {
width: 25px; height: 25px; background: #e9ecef; border: 2px solid #6c757d; border-radius: 5px;
}

.extracted-overflow-x-auto-margin-20px-0- {
overflow-x: auto; margin: 20px 0; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.extracted-width-100-border-collapse-coll {
width: 100%; border-collapse: collapse; background: white; min-width: 600px;
}

.extracted-background-34495e-color-white- {
background: #34495e; color: white; padding: 12px 15px; text-align: left; position: sticky; left: 0; z-index: 10; min-width: 150px;
}

.extracted-background-34495e-color-white- {
background: #34495e; color: white; padding: 10px 5px; text-align: center; writing-mode: vertical-lr; text-orientation: mixed; max-width: 40px; min-width: 40px;
}

.extracted-background-e9ecef-font-weight- {
background: #e9ecef; font-weight: bold; color: #2c3e50; padding: 12px 15px; position: sticky; left: 0; z-index: 5; border: 1px solid #dee2e6;
}

.extracted-padding-12px-8px-text-align-ce {
padding: 12px 8px; text-align: center; border: 1px solid #dee2e6;
}

.extracted-color-6c757d-font-style-italic {
color: #6c757d; font-style: italic;
}

.extracted-color-6c757d {
color: #6c757d;
}

.extracted-display-flex-flex-direction-co {
display: flex; flex-direction: column; align-items: center; gap: 2px;
}

.extracted-font-size-0-9em-color-27ae60-f {
font-size: 0.9em; color: #27ae60; font-weight: bold;
}

.extracted-font-size-0-9em-color-e74c3c-f {
font-size: 0.9em; color: #e74c3c; font-weight: bold;
}

.extracted-background-f8f9fa-border-radiu {
background: #f8f9fa; border-radius: 10px; padding: 20px; margin-top: 20px;
}

.extracted-color-2c3e50-margin-bottom-15p {
color: #2c3e50; margin-bottom: 15px;
}

.extracted-display-grid-grid-template-col {
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;
}

.extracted-background-white-padding-15px- {
background: white; padding: 15px; border-radius: 8px; text-align: center; border-left: 4px solid #f39c12;
}

.extracted-font-size-1-8em-font-weight-bo {
font-size: 1.8em; font-weight: bold; color: #2c3e50;
}

.extracted-color-7f8c8d-font-size-0-9em {
color: #7f8c8d; font-size: 0.9em;
}

.extracted-background-white-padding-15px- {
background: white; padding: 15px; border-radius: 8px; text-align: center; border-left: 4px solid #9b59b6;
}

.extracted-font-size-1-8em-font-weight-bo {
font-size: 1.8em; font-weight: bold; color: #2c3e50;
}

.extracted-color-7f8c8d-font-size-0-9em {
color: #7f8c8d; font-size: 0.9em;
}

.extracted-background-white-padding-15px- {
background: white; padding: 15px; border-radius: 8px; text-align: center; border-left: 4px solid #e67e22;
}

.extracted-font-size-1-8em-font-weight-bo {
font-size: 1.8em; font-weight: bold; color: #2c3e50;
}

.extracted-color-7f8c8d-font-size-0-9em {
color: #7f8c8d; font-size: 0.9em;
}

.extracted-font-size-1-8em-font-weight-bo {
font-size: 1.8em; font-weight: bold; color: #2c3e50;
}

.extracted-color-7f8c8d-font-size-0-9em {
color: #7f8c8d; font-size: 0.9em;
}

.extracted-background-white-padding-15px- {
background: white; padding: 15px; border-radius: 8px; text-align: center; border-left: 4px solid #27ae60;
}

.extracted-font-size-1-8em-font-weight-bo {
font-size: 1.8em; font-weight: bold; color: #2c3e50;
}

.extracted-color-7f8c8d-font-size-0-9em {
color: #7f8c8d; font-size: 0.9em;
}

.extracted-background-white-padding-15px- {
background: white; padding: 15px; border-radius: 8px; text-align: center; border-left: 4px solid #e74c3c;
}

.extracted-font-size-1-8em-font-weight-bo {
font-size: 1.8em; font-weight: bold; color: #2c3e50;
}

.extracted-color-7f8c8d-font-size-0-9em {
color: #7f8c8d; font-size: 0.9em;
}

.extracted-width-progress {
width: {{ progress }}%
}

.extracted-width-stats-completion-percent {
width: {{ stats.completion_percentage }}%
}

.extracted-width-schedule-info-completion {
width: {{ schedule_info.completion_percentage }}%
}

.extracted-width-poule-completion-percent {
width: {{ poule.completion_percentage }}%
}

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

.extracted-delay-1 {
--delay: 1
}

.extracted-delay-2 {
--delay: 2
}

.extracted-delay-3 {
--delay: 3
}

.extracted-delay-4 {
--delay: 4
}

.extracted-margin-top-40px-padding-20px-b {
margin-top: 40px; padding: 20px; background: #f8f9fa; border-radius: 10px;
}

.extracted-color-2c3e50-margin-bottom-15p {
color: #2c3e50; margin-bottom: 15px;
}

.extracted-color-6c757d-line-height-1-6-m {
color: #6c757d; line-height: 1.6; margin: 0;
}

.score-overview-container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
background: #f8f9fa;
min-height: 100vh;
}

.score-hero {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
color: white;
padding: 3rem 2rem;
border-radius: 20px;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 8px 32px rgba(37, 99, 235, 0.2);
}

.score-hero h1 {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.score-hero p {
font-size: 1.2rem;
opacity: 0.9;
margin: 0 0 1rem 0;
}

.hero-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-top: 16px;
}

.btn-modern {
padding: 12px 24px;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
}

.btn-modern.btn-primary {
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
}

.btn-modern.btn-primary:hover {
background: linear-gradient(135deg, #2980b9, #1f5f8a);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
color: white;
text-decoration: none;
}

.btn-modern.btn-secondary {
background: rgba(255,255,255,0.2);
color: white;
border: 1px solid rgba(255,255,255,0.3);
}

.btn-modern.btn-secondary:hover {
background: rgba(255,255,255,0.3);
color: white;
text-decoration: none;
transform: translateY(-1px);
}

.stats-dashboard {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.stat-card.modern-stat {
background: white;
padding: 2rem 1.5rem;
border-radius: 16px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
}

.stat-card.modern-stat:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.stat-icon {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.8;
}

.stat-number {
font-size: 2.5rem;
font-weight: bold;
color: #2c3e50;
margin-bottom: 0.5rem;
display: block;
}

.stat-label {
color: #64748b;
font-weight: 500;
font-size: 0.95rem;
}

.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.match-card.modern-card {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
}

.match-card.modern-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.empty-state {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin: 2rem 0;
}

.empty-icon {
font-size: 5rem;
margin-bottom: 1.5rem;
opacity: 0.6;
}

.empty-state h3 {
font-size: 1.5rem;
color: #2c3e50;
margin-bottom: 1rem;
font-weight: 600;
}

.empty-state p {
color: #64748b;
margin-bottom: 2rem;
line-height: 1.6;
font-size: 1rem;
}

.empty-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}

@media (max-width: 768px) {
.score-overview-container {
padding: 12px;
}

.score-hero {
padding: 2rem 1rem;
}

.score-hero h1 {
font-size: 2rem;
}

.responsive-grid {
grid-template-columns: 1fr;
}

.stats-dashboard {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.hero-actions {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 300px;
justify-content: center;
}
}

@media (max-width: 480px) {
.score-hero h1 {
font-size: 1.75rem;
}

.stats-dashboard {
grid-template-columns: 1fr;
}

.stat-card.modern-stat {
padding: 1.5rem 1rem;
}

.stat-number {
font-size: 2rem;
}

.stat-icon {
font-size: 2.5rem;
}
}

/* ========================================

======================================== */

.recent-results-section {
background: white;
border-radius: 16px;
padding: 0;
margin: 2rem 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
overflow: hidden;
}

.section-header-modern {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
padding: 1.5rem 2rem;
border-bottom: 1px solid #dee2e6;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}

.section-title {
display: flex;
align-items: center;
gap: 0.75rem;
}

.section-icon {
font-size: 1.5rem;
}

.section-title h3 {
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
margin: 0;
}

.section-badge {
background: #3498db;
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}

.results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
gap: 1.5rem;
padding: 2rem;
}

.result-card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.result-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
border-color: #3498db;
}

.result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #f3f4f6;
}

.match-info {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}

.court-badge {
background: #dbeafe;
color: #1e40af;
padding: 0.25rem 0.5rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
}

.time-badge {
background: #fef3c7;
color: #92400e;
padding: 0.25rem 0.5rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
}

.match-status.completed {
background: #d4edda;
color: #155724;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
}

.teams-matchup {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}

.team-side {
display: flex;
align-items: center;
gap: 0.75rem;
}

.team-side.winner-side {
background: linear-gradient(135deg, #d4edda, #c3e6cb);
padding: 0.75rem;
border-radius: 8px;
border-left: 4px solid #28a745;
}

.team-names {
display: flex;
flex-direction: column;
gap: 0.25rem;
}

.team-names strong {
font-size: 1rem;
color: #2c3e50;
}

.partner-name {
font-size: 0.875rem;
color: #64748b;
font-style: italic;
}

.team-badge.winner-badge {
background: #ffd700;
color: #b8860b;
padding: 0.25rem 0.5rem;
border-radius: 50%;
font-size: 0.875rem;
}

.vs-section {
text-align: center;
}

.score-display {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: center;
}

.set-score {
background: #f8f9fa;
border: 2px solid #dee2e6;
border-radius: 8px;
padding: 0.5rem 0.75rem;
font-size: 1rem;
font-weight: bold;
color: #2c3e50;
min-width: 60px;
text-align: center;
}

.result-footer {
padding-top: 0.75rem;
border-top: 1px solid #f3f4f6;
display: flex;
justify-content: flex-end;
}

.btn-result-details {
background: linear-gradient(135deg, #6c757d, #5a6268);
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}

.btn-result-details:hover {
background: linear-gradient(135deg, #5a6268, #495057);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
color: white;
text-decoration: none;
}

.results-footer {
background: #f8f9fa;
padding: 1.5rem 2rem;
border-top: 1px solid #dee2e6;
text-align: center;
}

.btn-outline {
background: transparent;
color: #6c757d;
border: 2px solid #dee2e6;
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}

.btn-outline:hover {
background: #f8f9fa;
border-color: #adb5bd;
color: #495057;
text-decoration: none;
transform: translateY(-1px);
}

@media (max-width: 768px) {
.results-grid {
grid-template-columns: 1fr;
padding: 1rem;
gap: 1rem;
}

.result-card {
padding: 1rem;
}

.section-header-modern {
padding: 1rem 1.5rem;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}

.teams-matchup {
grid-template-columns: 1fr;
gap: 0.75rem;
text-align: center;
}

.vs-section {
order: -1;
margin-bottom: 1rem;
}

.team-side {
justify-content: center;
}

.score-display {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}

.set-score {
min-width: 50px;
padding: 0.375rem 0.5rem;
font-size: 0.875rem;
}
}

@media (max-width: 480px) {
.section-header-modern {
padding: 1rem;
}

.section-title h3 {
font-size: 1.125rem;
}

.section-badge {
font-size: 0.75rem;
padding: 0.375rem 0.75rem;
}

.results-grid {
padding: 0.75rem;
}

.result-card {
padding: 0.75rem;
}

.match-info {
flex-direction: column;
gap: 0.25rem;
}

.team-names strong {
font-size: 0.875rem;
}

.partner-name {
font-size: 0.75rem;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

.player-name-bold {
font-size: 1rem;
color: #2c3e50;
font-weight: bold;
line-height: 1.4;
margin-bottom: 0.25rem;
}

.team-names {
display: flex;
flex-direction: column;
gap: 0.25rem;
align-items: flex-start;
}

@media (max-width: 768px) {
.player-name,
.player-name-bold,
.player-name-primary {
font-size: 0.9rem;
}

.player-name-secondary {
font-size: 0.8rem;
}
}

@media (max-width: 480px) {
.player-name,
.player-name-bold,
.player-name-primary {
font-size: 0.85rem;
}

.player-name-secondary {
font-size: 0.75rem;
}
}

/* ========================================
======================================== */

.match-result-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}

.match-result-hero {
background: linear-gradient(135deg, #28a745, #20c997);
color: white;
padding: 2rem;
border-radius: 15px;
margin-bottom: 2rem;
text-align: center;
}

.match-result-hero h1 {
font-size: 2rem;
margin: 0 0 0.5rem 0;
}

.hero-actions {
margin-top: 1rem;
}

.match-info-card, .teams-card, .score-form-card, .navigation-card {
background: white;
border-radius: 12px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.match-details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}

.detail-item {
text-align: center;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
}

.detail-label {
font-size: 0.8rem;
color: #666;
margin-bottom: 0.5rem;
}

.detail-value {
font-weight: 600;
color: #333;
}

.status-completed {
color: #28a745;
font-weight: 600;
}

.status-pending {
color: #ffc107;
font-weight: 600;
}

.teams-display {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 2rem;
align-items: center;
}

.team-info {
text-align: center;
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
}

.vs-divider {
font-size: 2rem;
font-weight: bold;
color: #666;
}

.player-name {
margin: 0.5rem 0;
font-weight: 500;
}

.sets-grid {
display: grid;
gap: 1.5rem;
}

.set-group {
padding: 1rem;
background: #f8f9fa;
border-radius: 8px;
}

.set-group.optional {
background: #fff8e1;
}

.score-inputs {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 1rem;
}

.team-input {
text-align: center;
}

.team-input label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
}

.team-input input {
width: 60px;
height: 40px;
text-align: center;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 1.2rem;
}

.vs-text {
font-size: 1.5rem;
font-weight: bold;
}

.form-actions {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
}

.nav-buttons {
display: flex;
gap: 1rem;
justify-content: center;
}

.btn-modern {
padding: 12px 24px;
border-radius: 8px;
font-weight: 500;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}

.btn-modern.btn-primary {
background: #28a745;
color: white;
}

.btn-modern.btn-secondary {
background: rgba(255,255,255,0.2);
color: white;
}

.btn-modern.btn-danger {
background: #dc3545;
color: white;
}

.btn-modern.btn-outline {
background: white;
color: #666;
border: 2px solid #ddd;
}

.btn-modern:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.alert {
padding: 1rem;
margin: 1rem 0;
border-radius: 8px;
}

.alert-success {
background: #d4edda;
color: #155724;
}

.alert-danger {
background: #f8d7da;
color: #721c24;
}

@media (max-width: 768px) {
.match-result-container {
padding: 12px;
}

.teams-display {
grid-template-columns: 1fr;
gap: 1rem;
}

.vs-divider {
order: -1;
}

.form-actions, .nav-buttons {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 300px;
}
}

/* ========================================
======================================== */

.standings-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
background: white;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}

.standings-table th {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: white;
padding: 12px 8px;
text-align: center;
font-weight: 600;
font-size: 0.85rem;
border-bottom: 2px solid #3730a3;
}

.standings-table td {
padding: 12px 8px;
text-align: center;
border-bottom: 1px solid #f3f4f6;
vertical-align: middle;
}

.standings-table tbody tr:hover {
background: #f8fafc;
}

.position-cell {
font-size: 1.2rem;
font-weight: bold;
width: 60px;
}

.first-place {
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
}

.second-place {
background: linear-gradient(135deg, #e5e7eb, #d1d5db) !important;
}

.third-place {
background: linear-gradient(135deg, #fed7aa, #fdba74) !important;
}

.player-name {
font-weight: 600;
color: #1e293b;
text-align: left !important;
min-width: 150px;
}

.stats-number {
font-weight: 500;
color: #475569;
min-width: 60px;
}

.total-points {
font-weight: 700;
color: #059669;
font-size: 1.1rem;
}

.win-percentage {
padding: 4px 8px;
border-radius: 12px;
font-weight: 600;
font-size: 0.8rem;
}

.win-percentage.high {
background: #d1fae5;
color: #065f46;
}

.win-percentage.medium {
background: #fef3c7;
color: #92400e;
}

.win-percentage.low {
background: #fecaca;
color: #991b1b;
}

.avg-points {
padding: 4px 8px;
border-radius: 8px;
font-weight: 700;
}

.avg-points.excellent {
background: #d1fae5;
color: #065f46;
}

.avg-points.good {
background: #dbeafe;
color: #1e40af;
}

.avg-points.average {
background: #fef3c7;
color: #92400e;
}

.avg-points.poor {
background: #fecaca;
color: #991b1b;
}

.table-responsive {
overflow-x: auto;
border-radius: 8px;
}

@media (max-width: 768px) {
.standings-table {
font-size: 0.8rem;
}

.standings-table th,
.standings-table td {
padding: 8px 4px;
}

.player-name {
min-width: 100px;
}

.stats-number {
min-width: 40px;
}
}

/* ========================================
======================================== */

/* ========================================
======================================== */

.system-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.system-stat-card {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
text-align: center;
}

.system-stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.system-stat-card .stat-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
}

.system-stat-card .stat-content h3 {
color: #2c3e50;
font-size: 1.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
}

.system-stat-card .stat-content p {
color: #64748b;
margin: 0;
font-size: 0.9rem;
font-weight: 500;
}

.system-info-table {
width: 100%;
}

.system-info-table .info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid #f1f5f9;
}

.system-info-table .info-row:last-child {
border-bottom: none;
}

.system-info-table .info-label {
font-weight: 500;
color: #475569;
}

.system-info-table .info-value {
font-weight: 600;
color: #2c3e50;
}

.disk-usage-visual {
margin-bottom: 1.5rem;
}

.disk-progress {
width: 100%;
height: 20px;
background: #f1f5f9;
border-radius: 10px;
overflow: hidden;
margin-bottom: 0.5rem;
}

.disk-progress-bar {
height: 100%;
background: linear-gradient(90deg, #10b981, #059669);
transition: width 0.5s ease;
}

.disk-info {
display: flex;
justify-content: space-between;
font-size: 0.875rem;
color: #64748b;
}

.db-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
margin-bottom: 1rem;
}

.db-stat-item {
text-align: center;
padding: 1rem;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
border-radius: 12px;
border: 1px solid #e2e8f0;
}

.db-stat-number {
font-size: 1.5rem;
font-weight: bold;
color: #3b82f6;
margin-bottom: 0.25rem;
}

.db-stat-label {
font-size: 0.8rem;
color: #64748b;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.system-info-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
background: white;
border-radius: 8px;
overflow: hidden;
}

.system-info-table thead {
background: linear-gradient(135deg, #4f46e5, #7c3aed);
color: white;
}

.system-info-table th {
padding: 1rem 0.75rem;
text-align: left;
font-weight: 600;
font-size: 0.875rem;
}

.system-info-table td {
padding: 0.75rem;
border-bottom: 1px solid #f1f5f9;
vertical-align: middle;
}

.system-info-table tbody tr:hover {
background: #f8fafc;
}

.system-info-table tbody tr:last-child td {
border-bottom: none;
}

.table-responsive {
overflow-x: auto;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
.system-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.system-stat-card {
padding: 1rem;
}

.system-stat-card .stat-icon {
font-size: 2rem;
}

.system-stat-card .stat-content h3 {
font-size: 1.25rem;
}

.db-stats-grid {
grid-template-columns: repeat(2, 1fr);
}

.system-info-table {
font-size: 0.8rem;
}

.system-info-table th,
.system-info-table td {
padding: 0.5rem;
}
}

@media (max-width: 480px) {
.system-stats-grid {
grid-template-columns: 1fr;
}

.db-stats-grid {
grid-template-columns: 1fr;
}

.disk-info {
flex-direction: column;
gap: 0.25rem;
text-align: center;
}
}

/* ========================================
======================================== */

/* ========================================
======================================== */

.main-dashboard {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.dashboard-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 3rem 2rem;
border-radius: 20px;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.dashboard-hero .hero-content h1 {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.dashboard-hero .hero-content p {
font-size: 1.2rem;
opacity: 0.9;
margin: 0;
}

.dashboard-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.dashboard-stat-card {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
text-align: center;
}

.dashboard-stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.dashboard-stat-card .stat-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
}

.dashboard-stat-card .stat-content h3 {
color: #2c3e50;
font-size: 1.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
}

.dashboard-stat-card .stat-content p {
color: #64748b;
margin: 0;
font-size: 0.9rem;
font-weight: 500;
}

.dashboard-quick-actions {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}

.dashboard-quick-actions h2 {
margin: 0 0 1.5rem 0;
color: #2c3e50;
font-size: 1.5rem;
font-weight: 600;
}

.quick-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}

.quick-action-card {
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border: 1px solid #dee2e6;
border-radius: 12px;
padding: 1.5rem;
text-decoration: none;
color: inherit;
transition: all 0.3s ease;
text-align: center;
}

.quick-action-card:hover {
background: linear-gradient(135deg, #e9ecef, #dee2e6);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-decoration: none;
color: inherit;
}

.quick-action-card .action-icon {
font-size: 2rem;
margin-bottom: 0.5rem;
display: block;
}

.quick-action-card h3 {
margin: 0 0 0.5rem 0;
color: #2c3e50;
font-size: 1.1rem;
font-weight: 600;
}

.quick-action-card p {
margin: 0;
color: #64748b;
font-size: 0.9rem;
}

.dashboard-competitions {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}

.dashboard-competitions h2 {
margin: 0 0 1.5rem 0;
color: #2c3e50;
font-size: 1.5rem;
font-weight: 600;
}

.competitions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 1.5rem;
}

.competition-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.competition-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
border-color: #3498db;
}

.competition-header h3 {
margin: 0 0 0.5rem 0;
color: #2c3e50;
font-size: 1.25rem;
font-weight: 600;
}

.competition-dates {
color: #64748b;
font-size: 0.9rem;
margin-bottom: 1rem;
}

.competition-body p {
margin: 0 0 1.5rem 0;
color: #64748b;
line-height: 1.5;
}

.competition-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}

.competition-actions .btn-modern {
flex: 1;
min-width: fit-content;
}

.view-all-section {
text-align: center;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
}

.empty-dashboard {
text-align: center;
padding: 3rem 2rem;
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}

.empty-dashboard .empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}

.empty-dashboard h3 {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.5rem;
}

.empty-dashboard p {
color: #64748b;
margin-bottom: 2rem;
font-size: 1.1rem;
}

.navigation-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}

@media (max-width: 768px) {
.main-dashboard {
padding: 12px;
}

.dashboard-hero {
padding: 2rem 1rem;
}

.dashboard-hero .hero-content h1 {
font-size: 2rem;
}

.dashboard-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.dashboard-stat-card {
padding: 1rem;
}

.dashboard-stat-card .stat-icon {
font-size: 2rem;
}

.dashboard-stat-card .stat-content h3 {
font-size: 1.25rem;
}

.quick-actions-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

.competitions-grid {
grid-template-columns: 1fr;
}

.competition-actions {
flex-direction: column;
}

.navigation-buttons {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 300px;
justify-content: center;
}
}

@media (max-width: 480px) {
.dashboard-stats-grid {
grid-template-columns: 1fr;
}

.dashboard-quick-actions,
.dashboard-competitions {
padding: 1rem;
}

.dashboard-hero .hero-content h1 {
font-size: 1.75rem;
}
}

/* ========================================
======================================== */

/* ========================================
======================================== */

.recent-matches-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.recent-matches-hero {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: white;
padding: 3rem 2rem;
border-radius: 20px;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.recent-matches-hero .hero-content h1 {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.recent-matches-hero .hero-content p {
font-size: 1.2rem;
opacity: 0.9;
margin: 0;
}

.matches-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.matches-stat-card {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
text-align: center;
}

.matches-stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.matches-stat-card .stat-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
}

.matches-stat-card .stat-content h3 {
color: #2c3e50;
font-size: 1.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
}

.matches-stat-card .stat-content p {
color: #64748b;
margin: 0;
font-size: 0.9rem;
font-weight: 500;
}

.matches-content {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}

.matches-header h2 {
margin: 0 0 2rem 0;
color: #2c3e50;
font-size: 1.5rem;
font-weight: 600;
}

.matches-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 1.5rem;
}

.match-result-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.match-result-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
border-color: #10b981;
}

.match-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #f1f5f9;
}

.match-date {
display: flex;
align-items: center;
gap: 0.5rem;
color: #64748b;
font-size: 0.9rem;
}

.court-badge {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
}

.match-card-body {
display: flex;
flex-direction: column;
gap: 1rem;
}

.competition-info {
text-align: center;
}

.competition-info h4 {
margin: 0 0 0.5rem 0;
color: #2c3e50;
font-size: 1.1rem;
font-weight: 600;
}

.poule-badge {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
}

.teams-display {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
align-items: center;
margin: 1rem 0;
}

.team {
text-align: center;
padding: 1rem;
border-radius: 12px;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
border: 2px solid #e2e8f0;
transition: all 0.3s ease;
}

.team-label {
font-size: 0.8rem;
color: #64748b;
margin-bottom: 0.5rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.team-players {
display: flex;
flex-direction: column;
gap: 0.25rem;
}

.player-name {
font-weight: 500;
color: #2c3e50;
font-size: 0.9rem;
}

.player-separator {
color: #64748b;
font-size: 0.8rem;
margin: 0 0.25rem;
}

.vs-separator {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.8rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.match-result {
text-align: center;
padding: 1rem;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
border-radius: 12px;
border: 1px solid #e2e8f0;
}

.score-display {
margin-bottom: 0.5rem;
}

.score-text {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
}

.winner-display {
margin-top: 0.5rem;
}

.winner-badge {
padding: 0.5rem 1rem;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 600;
display: inline-block;
}

.winner-badge.team1 {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}

.winner-badge.team2 {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
}

.winner-badge.draw {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
}

.empty-matches {
text-align: center;
padding: 3rem 2rem;
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}

.empty-matches .empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}

.empty-matches h3 {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.5rem;
}

.empty-matches p {
color: #64748b;
margin-bottom: 2rem;
font-size: 1.1rem;
}

.empty-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}

.navigation-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}

@media (max-width: 768px) {
.recent-matches-container {
padding: 12px;
}

.recent-matches-hero {
padding: 2rem 1rem;
}

.recent-matches-hero .hero-content h1 {
font-size: 2rem;
}

.matches-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.matches-stat-card {
padding: 1rem;
}

.matches-grid {
grid-template-columns: 1fr;
}

.teams-display {
grid-template-columns: 1fr;
gap: 0.5rem;
}

.vs-separator {
order: 2;
width: 30px;
height: 30px;
justify-self: center;
}

.navigation-buttons {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 300px;
justify-content: center;
}
}

/* ========================================
======================================== */

/* ========================================
======================================== */

.player-detail-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.player-detail-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 3rem 2rem;
border-radius: 20px;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}

.player-detail-hero .hero-content h1 {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.player-detail-hero .hero-content p {
font-size: 1.2rem;
opacity: 0.9;
margin: 0;
}

.player-info-card {
background: white;
border-radius: 16px;
padding: 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
overflow: hidden;
}

.player-card-header {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 2rem;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
border-bottom: 1px solid #e5e7eb;
}

.player-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: bold;
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.player-info-content h2 {
margin: 0 0 1rem 0;
color: #2c3e50;
font-size: 1.8rem;
font-weight: 600;
}

.player-contact {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.contact-item {
display: flex;
align-items: center;
gap: 0.5rem;
}

.contact-icon {
font-size: 1rem;
width: 20px;
}

.contact-text {
color: #64748b;
font-size: 0.9rem;
}

.player-card-actions {
display: flex;
gap: 1rem;
padding: 1.5rem 2rem;
background: #f8fafc;
flex-wrap: wrap;
}

.player-card-actions .btn-modern {
flex: 1;
min-width: fit-content;
}

.player-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.player-stat-card {
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
text-align: center;
}

.player-stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.player-stat-card .stat-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
display: block;
}

.player-stat-card .stat-content h3 {
color: #2c3e50;
font-size: 1.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
}

.player-stat-card .stat-content p {
color: #64748b;
margin: 0;
font-size: 0.9rem;
font-weight: 500;
}

.player-matches-section {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}

.section-header h2 {
margin: 0 0 1.5rem 0;
color: #2c3e50;
font-size: 1.5rem;
font-weight: 600;
}

.matches-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 1rem;
}

.match-result-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.match-result-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
border-color: #667eea;
}

.match-result-card.upcoming {
border-color: #f59e0b;
background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.match-result-card.upcoming:hover {
border-color: #d97706;
}

.match-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #f1f5f9;
}

.match-date {
color: #64748b;
font-size: 0.9rem;
font-weight: 500;
}

.match-poule, .match-court {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 500;
}

.match-teams {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}

.team {
text-align: center;
}

.team-label {
display: block;
font-size: 0.8rem;
color: #64748b;
margin-bottom: 0.25rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.team-players {
display: block;
font-size: 0.9rem;
color: #2c3e50;
font-weight: 500;
}

.vs {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.8rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.match-result {
text-align: center;
}

.match-score {
font-size: 1rem;
font-weight: 600;
color: #2c3e50;
margin-bottom: 0.5rem;
}

.match-status {
padding: 0.5rem 1rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
display: inline-block;
}

.match-status.completed {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}

.match-status.pending {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
}

.match-status.upcoming {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
}

.show-more-section {
text-align: center;
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
}

.empty-player-matches {
text-align: center;
padding: 3rem 2rem;
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}

.empty-player-matches .empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}

.empty-player-matches h3 {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.5rem;
}

.empty-player-matches p {
color: #64748b;
margin-bottom: 2rem;
font-size: 1.1rem;
}

.empty-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}

.navigation-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}

@media (max-width: 768px) {
.player-detail-container {
padding: 12px;
}

.player-detail-hero {
padding: 2rem 1rem;
}

.player-detail-hero .hero-content h1 {
font-size: 2rem;
}

.player-card-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}

.player-avatar {
width: 60px;
height: 60px;
font-size: 1.5rem;
}

.player-stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.player-stat-card {
padding: 1rem;
}

.player-stat-card .stat-icon {
font-size: 2rem;
}

.player-stat-card .stat-content h3 {
font-size: 1.25rem;
}

.matches-grid {
grid-template-columns: 1fr;
}

.match-teams {
grid-template-columns: 1fr;
gap: 0.5rem;
}

.vs {
order: 2;
justify-self: center;
}

.player-card-actions {
flex-direction: column;
}

.navigation-buttons {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 300px;
justify-content: center;
}
}

@media (max-width: 480px) {
.player-stats-grid {
grid-template-columns: 1fr;
}

.player-matches-section {
padding: 1rem;
}

.player-detail-hero .hero-content h1 {
font-size: 1.75rem;
}

.player-card-header {
padding: 1.5rem;
}

.player-card-actions {
padding: 1rem 1.5rem;
}
}

/* ========================================
======================================== */

/* ========================================
======================================== */

.matches-section {
background: white;
border-radius: 16px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}

.matches-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e5e7eb;
}

.matches-header h2 {
margin: 0;
color: #2c3e50;
font-size: 1.5rem;
font-weight: 600;
}

.match-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.match-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.match-card.completed {
border-color: #10b981;
background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
}

.match-card.pending {
border-color: #f59e0b;
background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.match-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #f1f5f9;
}

.match-info h3 {
margin: 0;
color: #2c3e50;
font-size: 1.1rem;
font-weight: 600;
}

.match-status {
display: flex;
align-items: center;
}

.status {
padding: 0.5rem 1rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
display: inline-block;
}

.status.completed {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}

.status.pending {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
}

.match-teams {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1.5rem;
align-items: center;
margin-bottom: 1.5rem;
}

.team {
text-align: center;
padding: 1rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid #e5e7eb;
}

.team-label {
display: block;
font-size: 0.8rem;
color: #64748b;
margin-bottom: 0.5rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.team-players {
display: flex;
flex-direction: column;
gap: 0.25rem;
}

.player-name {
font-weight: 500;
color: #2c3e50;
font-size: 0.9rem;
}

.player-separator {
color: #64748b;
font-size: 0.8rem;
margin: 0 0.25rem;
}

.vs-separator {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.9rem;
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.vs-text {
font-size: 0.8rem;
font-weight: 700;
}

.match-result {
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
padding: 1rem;
border: 1px solid #e5e7eb;
}

.score-display {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 1rem;
}

.set-score {
display: flex;
align-items: center;
gap: 0.5rem;
}

.set-label {
font-size: 0.9rem;
color: #64748b;
font-weight: 500;
}

.set-result {
font-size: 1.1rem;
font-weight: 600;
color: #2c3e50;
background: white;
padding: 0.25rem 0.5rem;
border-radius: 6px;
border: 1px solid #e5e7eb;
}

.pending-actions {
text-align: center;
}

.empty-schedule {
text-align: center;
padding: 3rem 2rem;
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}

.empty-schedule .empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}

.empty-schedule h3 {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.5rem;
}

.empty-schedule p {
color: #64748b;
margin-bottom: 2rem;
font-size: 1.1rem;
}

.empty-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}

@media (max-width: 768px) {
.matches-section {
padding: 1rem;
}

.matches-grid {
grid-template-columns: 1fr;
}

.match-card {
padding: 1rem;
}

.match-header {
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}

.match-teams {
grid-template-columns: 1fr;
gap: 1rem;
}

.vs-separator {
order: 2;
width: 40px;
height: 40px;
justify-self: center;
}

.score-display {
flex-direction: column;
gap: 0.5rem;
}

.set-score {
justify-content: space-between;
}

.match-actions {
flex-wrap: wrap;
flex-direction: column;
gap: 0.75rem;
}

.match-actions > * {
flex: 1;
min-width: 150px;
}

.pending-actions,
.completed-actions,
.cancelled-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.pending-actions .btn-modern,
.completed-actions .btn-modern,
.cancelled-actions .btn-modern {
width: 100%;
padding: 0.75rem 1rem;
font-size: 0.95rem;
}
}

@media (max-width: 480px) {
.match-card {
padding: 0.75rem;
}

.vs-separator {
width: 35px;
height: 35px;
}

.team {
padding: 0.75rem;
}

.player-name {
font-size: 0.8rem;
}

.match-actions {
flex-wrap: wrap;
flex-direction: column;
gap: 0.5rem;
}

.pending-actions,
.completed-actions,
.cancelled-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.pending-actions .btn-modern,
.completed-actions .btn-modern,
.cancelled-actions .btn-modern {
width: 100%;
padding: 0.65rem 0.75rem;
font-size: 0.85rem;
}

.match-header {
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}

.match-info h3 {
font-size: 0.95rem;
}

.status {
font-size: 0.7rem;
padding: 0.35rem 0.75rem;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

.modal, .modal-overlay, [id*="Modal"], [class*="modal"] {
display: none !important;
}

#addPlayerModal {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
position: absolute !important;
left: -9999px !important;
top: -9999px !important;
}

[data-bs-toggle="modal"][data-bs-target="#addPlayerModal"] {
display: none !important;
}

.modal-backdrop {
display: none !important;
}

.poule-detail-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #f8fafc;
min-height: 100vh;
}

.section-card {
background: white;
border-radius: 12px;
margin-bottom: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e5e7eb;
overflow: hidden;
}

.section-header {
padding: 1.5rem;
border-bottom: 1px solid #e5e7eb;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}

.section-title {
margin: 0;
color: #1f2937;
font-size: 1.25rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}

.section-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}

.section-content {
padding: 1.5rem;
}

.padding-style {
padding: 1.5rem;
}

.margin-style {
margin: 1rem 0;
}

.text-style {
color: #374151;
line-height: 1.6;
}

.status-badge {
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
font-size: 0.9rem;
display: inline-block;
}

.status-ready {
background: #d1fae5;
color: #065f46;
}

.status-warning {
background: #fef3c7;
color: #92400e;
}

.navigation-buttons {
display: flex;
justify-content: center;
gap: 1rem;
margin: 2rem 0;
flex-wrap: wrap;
}

@media (max-width: 768px) {
.poule-detail-container {
padding: 15px;
}

.section-header {
flex-direction: column;
text-align: center;
}

.section-actions {
justify-content: center;
width: 100%;
}

.navigation-buttons {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 300px;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

.competition-detail-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background: #f8fafc;
min-height: 100vh;
}

.competition-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2.5rem;
border-radius: 20px;
margin-bottom: 2rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.competition-hero .hero-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
}

.competition-hero .hero-text {
flex: 1;
}

.competition-hero .hero-title {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.competition-hero .hero-subtitle {
font-size: 1.2rem;
opacity: 0.9;
margin: 0 0 1rem 0;
}

.competition-hero .hero-dates {
font-size: 1.1rem;
padding: 0.5rem 1rem;
background: rgba(255,255,255,0.2);
border-radius: 8px;
display: inline-block;
backdrop-filter: blur(10px);
}

.competition-hero .hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}

.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.stat-card {
background: white;
border-radius: 16px;
padding: 1.5rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #667eea, #764ba2);
}

.stat-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.stat-card .stat-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
opacity: 0.8;
}

.stat-card .stat-number {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #3498db;
display: block;
}

.stat-card .stat-label {
color: #2c3e50;
font-size: 1rem;
font-weight: 600;
}

.section-card {
background: white;
border-radius: 16px;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
overflow: hidden;
}

.section-header {
padding: 1.5rem 2rem;
border-bottom: 1px solid #e5e7eb;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}

.section-title {
margin: 0;
color: #1f2937;
font-size: 1.25rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}

.section-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}

.section-content {
padding: 2rem;
}

.timeslots-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}

.timeslot-card {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
}

.timeslot-card:hover {
border-color: #3498db;
background: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.timeslot-header {
margin-bottom: 1rem;
}

.timeslot-day {
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
margin: 0 0 0.5rem 0;
}

.timeslot-time {
color: #64748b;
font-size: 1rem;
font-weight: 500;
}

.timeslot-info {
display: flex;
justify-content: space-between;
align-items: center;
}

.timeslot-courts {
color: #16a085;
font-weight: 500;
}

.poules-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}

.poule-card {
background: white;
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 0;
transition: all 0.3s ease;
overflow: hidden;
}

.poule-card:hover {
border-color: #3498db;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
transform: translateY(-2px);
}

.poule-header {
padding: 1.5rem;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-bottom: 1px solid #dee2e6;
}

.poule-name {
font-size: 1.25rem;
font-weight: 600;
color: #2c3e50;
margin: 0 0 0.5rem 0;
}

.poule-timing {
color: #64748b;
font-size: 0.9rem;
}

.poule-stats {
padding: 1rem 1.5rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.poule-stat {
text-align: center;
padding: 0.75rem;
background: #f8f9fa;
border-radius: 8px;
}

.poule-stat .stat-number {
font-size: 1.5rem;
font-weight: bold;
color: #3498db;
margin-bottom: 0.25rem;
}

.poule-stat .stat-label {
font-size: 0.8rem;
color: #64748b;
font-weight: 500;
}

.poule-actions {
padding: 1rem 1.5rem;
text-align: center;
}

.empty-state {
text-align: center;
padding: 3rem 2rem;
background: #f8f9fa;
border-radius: 12px;
border: 2px dashed #e2e8f0;
}

.empty-state-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}

.empty-state h4 {
color: #1f2937;
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 600;
}

.empty-state p {
color: #6b7280;
margin-bottom: 1rem;
line-height: 1.6;
}

.navigation-buttons {
display: flex;
justify-content: center;
gap: 1rem;
margin: 2rem 0;
flex-wrap: wrap;
}

@media (max-width: 768px) {
.competition-detail-container {
padding: 15px;
}

.competition-hero {
padding: 2rem 1.5rem;
}

.competition-hero .hero-content {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}

.competition-hero .hero-title {
font-size: 2rem;
}

.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}

.section-header {
flex-direction: column;
text-align: center;
gap: 1rem;
}

.section-content {
padding: 1.5rem;
}

.timeslots-grid,
.poules-grid {
grid-template-columns: 1fr;
}

.navigation-buttons {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 300px;
}
}

@media (max-width: 480px) {
.competition-hero {
padding: 1.5rem 1rem;
}

.competition-hero .hero-title {
font-size: 1.75rem;
}

.stats-grid {
grid-template-columns: 1fr;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

.create-timeslot-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background: #f8fafc;
min-height: 100vh;
}

.timeslot-hero {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
padding: 2.5rem;
border-radius: 20px;
margin-bottom: 2rem;
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.timeslot-hero .hero-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
}

.timeslot-hero .hero-text {
flex: 1;
}

.timeslot-hero .hero-title {
font-size: 2.25rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.timeslot-hero .hero-subtitle {
font-size: 1.2rem;
opacity: 0.9;
margin: 0 0 1rem 0;
}

.timeslot-hero .hero-dates {
font-size: 1rem;
padding: 0.5rem 1rem;
background: rgba(255,255,255,0.2);
border-radius: 8px;
display: inline-block;
backdrop-filter: blur(10px);
}

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

.hero-icon-circle {
width: 80px;
height: 80px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.3);
}

.form-card {
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
overflow: hidden;
margin-bottom: 2rem;
}

.form-header {
padding: 2rem 2rem 1rem 2rem;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-bottom: 1px solid #e5e7eb;
text-align: center;
}

.form-title {
margin: 0 0 0.5rem 0;
color: #1f2937;
font-size: 1.5rem;
font-weight: 600;
}

.form-subtitle {
margin: 0;
color: #64748b;
font-size: 1rem;
}

.form-body {
padding: 2rem;
}

.form-group {
margin-bottom: 2rem;
}

.form-group:last-child {
margin-bottom: 0;
}

.form-label {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
font-weight: 600;
color: #374151;
font-size: 1rem;
}

.label-icon {
font-size: 1.2rem;
}

.form-control {
width: 100%;
padding: 0.875rem 1rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
transition: all 0.2s ease;
box-sizing: border-box;
background: white;
}

.form-control:focus {
outline: none;
border-color: #f59e0b;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.form-control:hover {
border-color: #d1d5db;
}

.form-text {
margin-top: 0.5rem;
font-size: 0.875rem;
color: #6b7280;
line-height: 1.4;
}

.time-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}

.courts-selector {
display: flex;
align-items: center;
gap: 1rem;
}

.courts-input {
flex: 0 0 120px;
}

.courts-info {
flex: 1;
padding: 0.875rem 1rem;
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 8px;
transition: all 0.2s ease;
}

.courts-visual {
display: flex;
align-items: center;
gap: 0.5rem;
color: #374151;
font-weight: 500;
}

.court-icon {
font-size: 1.2rem;
}

.form-actions {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 10px;
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}

.help-section {
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
overflow: hidden;
margin-bottom: 2rem;
}

.help-header {
padding: 1.5rem 2rem;
background: linear-gradient(135deg, #fef3c7, #fde68a);
border-bottom: 1px solid #fbbf24;
display: flex;
align-items: center;
gap: 1rem;
}

.help-icon {
font-size: 2rem;
}

.help-title {
margin: 0;
color: #92400e;
font-size: 1.25rem;
font-weight: 600;
}

.help-content {
padding: 2rem;
}

.help-item {
margin-bottom: 1rem;
padding: 1rem;
background: #fef3c7;
border-radius: 8px;
border-left: 4px solid #f59e0b;
color: #92400e;
line-height: 1.6;
}

.help-item:last-child {
margin-bottom: 0;
}

.help-item strong {
color: #78350f;
}

.navigation-buttons {
display: flex;
justify-content: center;
gap: 1rem;
margin: 2rem 0;
flex-wrap: wrap;
}

@media (max-width: 768px) {
.create-timeslot-container {
padding: 15px;
}

.timeslot-hero {
padding: 2rem 1.5rem;
}

.timeslot-hero .hero-content {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}

.timeslot-hero .hero-title {
font-size: 2rem;
}

.form-header,
.form-body,
.help-content {
padding: 1.5rem;
}

.time-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

.courts-selector {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}

.courts-input {
flex: none;
}

.form-actions {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 300px;
}

.navigation-buttons {
flex-direction: column;
align-items: center;
}
}

@media (max-width: 480px) {
.timeslot-hero {
padding: 1.5rem 1rem;
}

.timeslot-hero .hero-title {
font-size: 1.75rem;
}

.hero-icon-circle {
width: 60px;
height: 60px;
font-size: 2rem;
}

.form-header {
padding: 1.5rem 1rem 1rem 1rem;
}

.form-body {
padding: 1.25rem;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

.add-player-form {
background: #f8f9fa;
border-top: 1px solid #e5e7eb;
animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
from {
opacity: 0;
max-height: 0;
overflow: hidden;
}
to {
opacity: 1;
max-height: 300px;
overflow: visible;
}
}

.add-player-form .form-content {
padding: 0;
}

.add-player-form .form-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem 0 2rem;
border-bottom: none;
}

.add-player-form .form-header h4 {
margin: 0;
color: #1f2937;
font-size: 1.1rem;
font-weight: 600;
}

.add-player-form .close-btn {
background: none;
border: none;
font-size: 1.5rem;
color: #6b7280;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s ease;
}

.add-player-form .close-btn:hover {
background: #e5e7eb;
color: #374151;
}

.add-player-form .form-body {
padding: 1rem 2rem 2rem 2rem;
}

.add-player-form .form-group {
margin-bottom: 1.5rem;
}

.add-player-form .form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #374151;
font-size: 0.95rem;
}

.add-player-form .form-control {
width: 100%;
padding: 0.75rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
transition: all 0.2s ease;
}

.add-player-form .form-control:focus {
outline: none;
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.add-player-form .form-text {
margin-top: 0.5rem;
font-size: 0.85rem;
color: #6b7280;
line-height: 1.4;
}

.add-player-form .form-actions {
display: flex;
gap: 0.75rem;
justify-content: flex-start;
flex-wrap: wrap;
}

.add-player-form .btn-modern {
padding: 0.625rem 1.25rem;
font-size: 0.9rem;
}

.players-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.players-table thead th {
background: #f8f9fa;
padding: 1rem;
text-align: left;
font-weight: 600;
color: #374151;
border-bottom: 2px solid #e5e7eb;
font-size: 0.9rem;
}

.players-table tbody td {
padding: 1rem;
border-bottom: 1px solid #f3f4f6;
color: #374151;
}

.players-table tbody tr:hover {
background: #fafafa;
}

.players-table tbody tr:last-child td {
border-bottom: none;
}

.player-name {
font-weight: 600;
color: #1f2937;
}

.players-table .btn-modern {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
margin-right: 0.5rem;
}

.players-table .d-inline {
display: inline-block;
}

.empty-state {
text-align: center;
padding: 3rem 2rem;
background: #fafafa;
border-radius: 12px;
border: 2px dashed #e2e8f0;
}

.empty-state-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}

.empty-state h4 {
color: #1f2937;
margin-bottom: 1rem;
font-size: 1.25rem;
font-weight: 600;
}

.empty-state p {
color: #6b7280;
margin-bottom: 1.5rem;
line-height: 1.6;
}

.empty-state .text-muted {
color: #9ca3af;
font-size: 0.9rem;
margin-bottom: 1rem;
}

.section-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
align-items: center;
}

.btn-sm {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}

.btn-modern.btn-sm {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
}

@media (max-width: 768px) {
.add-player-form .form-header,
.add-player-form .form-body {
padding-left: 1.25rem;
padding-right: 1.25rem;
}

.add-player-form .form-actions {
flex-direction: column;
align-items: stretch;
}

.add-player-form .btn-modern {
width: 100%;
justify-content: center;
}

.players-table {
font-size: 0.9rem;
}

.players-table thead th,
.players-table tbody td {
padding: 0.75rem 0.5rem;
}

.players-table .btn-modern {
padding: 0.375rem 0.5rem;
font-size: 0.8rem;
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}

.section-actions {
flex-direction: column;
width: 100%;
align-items: stretch;
}

.section-actions .btn-modern {
width: 100%;
justify-content: center;
}
}

@media (max-width: 480px) {
.empty-state {
padding: 2rem 1rem;
}

.empty-state h4 {
font-size: 1.1rem;
}

.add-player-form .form-header h4 {
font-size: 1rem;
}
}

/* ========================================
======================================== */

/* ========================================
======================================== */

.search-results-container {
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem;
}

.search-header {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
color: white;
padding: 2rem;
border-radius: 15px;
margin-bottom: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.search-header-content h1 {
font-size: 2rem;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.search-header-content p {
font-size: 1.1rem;
margin: 0;
opacity: 0.9;
}

.search-header-content strong {
background: rgba(255,255,255,0.2);
padding: 0.2rem 0.5rem;
border-radius: 4px;
}

.results-info {
background: white;
padding: 1rem;
border-radius: 10px;
margin-bottom: 1.5rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
text-align: center;
}

.results-info p {
margin: 0;
color: #6b7280;
font-size: 1rem;
}

.players-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}

.player-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
}

.player-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.player-card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}

.player-avatar {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
}

.player-info {
flex: 1;
}

.player-name {
margin: 0 0 0.25rem 0;
font-size: 1.1rem;
}

.player-name a {
color: #1f2937;
text-decoration: none;
transition: color 0.2s;
}

.player-name a:hover {
color: #3b82f6;
}

.player-email {
margin: 0;
color: #6b7280;
font-size: 0.9rem;
}

.player-card-stats {
background: #f8fafc;
padding: 0.75rem;
border-radius: 8px;
margin-bottom: 1rem;
}

.player-stat {
display: flex;
justify-content: space-between;
align-items: center;
}

.stat-label {
color: #6b7280;
font-size: 0.875rem;
}

.player-card-actions {
display: flex;
gap: 0.5rem;
margin-top: 1rem;
}

.btn-small {
padding: 0.5rem 1rem;
font-size: 0.875rem;
border-radius: 6px;
text-decoration: none;
transition: all 0.2s;
display: inline-block;
}

.btn-primary {
background: #3b82f6;
color: white;
}

.btn-primary:hover {
background: #2563eb;
transform: translateY(-1px);
}

.btn-secondary {
background: #e5e7eb;
color: #4b5563;
}

.btn-secondary:hover {
background: #d1d5db;
transform: translateY(-1px);
}

.badge {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}

.badge-success {
background: #d1fae5;
color: #065f46;
}

.badge-secondary {
background: #f3f4f6;
color: #6b7280;
}

.no-results {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
}

.no-results-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.3;
}

.no-results h3 {
font-size: 1.5rem;
color: #1f2937;
margin-bottom: 0.5rem;
}

.no-results p {
color: #6b7280;
margin-bottom: 2rem;
}

.no-results-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}

@media (max-width: 768px) {
.search-header {
padding: 1.5rem;
}

.search-header-content h1 {
font-size: 1.75rem;
}

.players-grid {
grid-template-columns: 1fr;
}

.player-card-actions {
flex-direction: column;
}

.btn-small {
width: 100%;
text-align: center;
}
}

/* ========================================
======================================== */

.players-container {
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem;
}

.players-hero {
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
color: white;
padding: 2rem;
border-radius: 15px;
margin-bottom: 2rem;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.players-hero-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
}

.players-hero-text h1 {
font-size: 2.2rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.players-hero-text p {
font-size: 1.1rem;
opacity: 0.9;
margin: 0;
}

.players-actions {
background: white;
border-radius: 15px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
}

.players-search-section h3 {
margin: 0 0 0.75rem 0;
color: #1f2937;
font-size: 1.1rem;
font-weight: 600;
}

.search-input {
width: 100%;
max-width: 400px;
padding: 0.75rem 1rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
transition: all 0.2s ease;
}

.search-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.players-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}

.players-stat-card {
background: white;
border-radius: 12px;
padding: 1.25rem;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
}

.players-stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.players-stat-number {
font-size: 2rem;
font-weight: bold;
color: #3b82f6;
margin-bottom: 0.25rem;
display: block;
}

.players-stat-label {
color: #6b7280;
font-size: 0.875rem;
font-weight: 500;
}

.empty-players-state {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
}

.empty-icon {
font-size: 5rem;
margin-bottom: 1rem;
opacity: 0.3;
}

.empty-players-state h2 {
font-size: 1.75rem;
color: #1f2937;
margin-bottom: 0.5rem;
}

.empty-players-state p {
color: #6b7280;
font-size: 1.1rem;
margin-bottom: 2rem;
}

/* ========================================
======================================== */

.nav-version {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-left: 1rem;
padding: 0.25rem 0.75rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
font-size: 0.85rem;
transition: all 0.3s ease;
}

.nav-version:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-1px);
}

.version-number {
color: #3498db !important;
font-weight: 600;
font-family: 'Courier New', monospace;
}

.version-date {
color: #ecf0f1 !important;
opacity: 0.8;
font-size: 0.8rem;
}

@media (max-width: 768px) {
.nav-version {
}
}

@media (max-width: 768px) {
.nav-version {
display: inline-flex;
padding: 0.2rem 0.5rem;
margin-left: 0.5rem;
}

.version-date {
}

.version-number {
font-size: 0.75rem;
}
}

.nav-version {
position: relative;
cursor: help;
}

.nav-version::after {
content: "TV Ysselsteyn Tennis Management System";
position: absolute;
bottom: -35px;
left: 50%;
transform: translateX(-50%);
background: #2c3e50;
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.75rem;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.nav-version:hover::after {
opacity: 1;
}

.nav-version::before {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #2c3e50;
opacity: 0;
transition: opacity 0.3s ease;
}

.nav-version:hover::before {
opacity: 1;
}

/* ========================================
======================================== */

.player-matches-section .match-result-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
margin-bottom: 1rem;
}

.player-matches-section .match-result-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.player-matches-section .match-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #f1f5f9;
}

.player-matches-section .match-date {
font-weight: 600;
color: #374151;
font-size: 0.9rem;
}

.player-matches-section .match-poule {
background: #f3f4f6;
color: #374151;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}

.player-matches-section .match-teams {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}

.player-matches-section .team {
text-align: center;
}

.player-matches-section .team-label {
display: block;
font-size: 0.75rem;
color: #6b7280;
font-weight: 500;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.player-matches-section .team-players {
display: block;
font-weight: 600;
color: #111827;
font-size: 0.9rem;
line-height: 1.3;
}

.player-matches-section .vs {
font-weight: bold;
color: #6b7280;
font-size: 0.8rem;
text-align: center;
background: #f9fafb;
padding: 0.5rem;
border-radius: 50%;
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}

.player-matches-section .match-result {
text-align: center;
padding-top: 0.75rem;
border-top: 1px solid #f1f5f9;
}

.player-matches-section .match-score {
font-weight: 600;
color: #111827;
font-size: 1rem;
margin-bottom: 0.5rem;
}

.player-matches-section .match-status {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}

.player-matches-section .match-status.completed {
background: #d1fae5;
color: #065f46;
}

.player-matches-section .match-status.pending {
background: #fef3c7;
color: #92400e;
}

@media (max-width: 768px) {
.player-matches-section .match-teams {
grid-template-columns: 1fr;
gap: 0.5rem;
}

.player-matches-section .vs {
order: 2;
margin: 0.5rem auto;
}

.player-matches-section .match-header {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}

.player-matches-section .match-result-card {
padding: 1rem;
}
}

/* ========================================
======================================== */

/* ========================================
======================================== */

.matches-container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}

.matches-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.matches-list {
display: flex;
flex-direction: column;
gap: 1rem;
}

.match-card,
.match-result-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}

.match-card::before,
.match-result-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
opacity: 0;
transition: opacity 0.3s ease;
}

.match-card:hover,
.match-result-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.match-card:hover::before,
.match-result-card:hover::before {
opacity: 1;
}

.match-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #f1f5f9;
}

.match-date {
font-weight: 600;
color: #374151;
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.match-time {
font-weight: 500;
color: #6b7280;
font-size: 0.85rem;
}

.match-poule,
.match-court {
background: #f3f4f6;
color: #374151;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 500;
}

.match-court {
background: #dbeafe;
color: #1e40af;
}

.match-teams {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}

.team {
text-align: center;
padding: 0.75rem;
background: #f9fafb;
border-radius: 8px;
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
}

.team:hover {
background: #f3f4f6;
border-color: #d1d5db;
}

.team-label {
display: block;
font-size: 0.7rem;
color: #6b7280;
font-weight: 600;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}

.team-players {
display: block;
font-weight: 600;
color: #111827;
font-size: 0.9rem;
line-height: 1.3;
}

.vs {
font-weight: bold;
color: #6b7280;
font-size: 0.8rem;
text-align: center;
background: #ffffff;
border: 2px solid #e5e7eb;
padding: 0.5rem;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.match-result {
text-align: center;
padding-top: 0.75rem;
border-top: 1px solid #f1f5f9;
}

.match-score {
font-weight: 700;
color: #111827;
font-size: 1.1rem;
margin-bottom: 0.5rem;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.match-status {
display: inline-block;
padding: 0.4rem 1rem;
border-radius: 25px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.match-status.completed,
.match-status.status-completed {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
}

.match-status.pending,
.match-status.status-upcoming {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
}

.match-status.cancelled {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
}

.court-number {
background: #dbeafe;
color: #1e40af;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
display: inline-block;
}

.matches-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.matches-table th {
background: #f8fafc;
color: #374151;
font-weight: 600;
text-align: left;
padding: 1rem;
font-size: 0.9rem;
border-bottom: 2px solid #e5e7eb;
}

.matches-table td {
padding: 1rem;
border-bottom: 1px solid #f1f5f9;
vertical-align: top;
}

.matches-table tr:hover {
background: #f9fafb;
}

.matches-table tr:last-child td {
border-bottom: none;
}

.empty-matches,
.empty-player-matches {
text-align: center;
padding: 4rem 2rem;
background: white;
border-radius: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}

.empty-matches .empty-icon,
.empty-player-matches .empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
filter: grayscale(20%);
}

.empty-matches h3,
.empty-player-matches h3 {
color: #2c3e50;
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 600;
}

.empty-matches p,
.empty-player-matches p {
color: #64748b;
margin-bottom: 2rem;
font-size: 1.1rem;
line-height: 1.6;
}

.player-matches-section {
background: white;
border-radius: 15px;
padding: 2rem;
margin-bottom: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
}

.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid #f1f5f9;
}

.section-header h2 {
color: #1f2937;
font-size: 1.5rem;
font-weight: 700;
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}

.show-more-section {
text-align: center;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #f1f5f9;
}

.btn-modern {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-transform: none;
letter-spacing: 0.025em;
}

.btn-primary-modern {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white !important;
}

.btn-primary-modern:hover {
background: linear-gradient(135deg, #2563eb, #1e40af);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
color: white !important;
}

a.btn-primary-modern,
a.btn-primary-modern:link,
a.btn-primary-modern:visited {
background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
color: white !important;
text-decoration: none !important;
}

a.btn-primary-modern:hover,
a.btn-primary-modern:active {
background: linear-gradient(135deg, #2563eb, #1e40af) !important;
color: white !important;
text-decoration: none !important;
}

.btn-secondary-modern {
background: linear-gradient(135deg, #6b7280, #4b5563);
color: white;
}

.btn-secondary-modern:hover {
background: linear-gradient(135deg, #4b5563, #374151);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-success-modern {
background: linear-gradient(135deg, #10b981, #059669);
color: white !important;
}

.btn-success-modern:hover {
background: linear-gradient(135deg, #059669, #047857);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
color: white !important;
}

.navigation-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}

@media (max-width: 768px) {
.matches-grid {
grid-template-columns: 1fr;
gap: 1rem;
}

.match-header {
flex-direction: column;
gap: 0.5rem;
text-align: center;
align-items: stretch;
}

.match-teams {
grid-template-columns: 1fr;
gap: 0.5rem;
}

.vs {
order: 2;
margin: 0.5rem auto;
}

.match-card,
.match-result-card {
padding: 1rem;
}

.section-header {
flex-direction: column;
gap: 1rem;
text-align: center;
}

.navigation-buttons {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 300px;
justify-content: center;
}

.matches-table {
font-size: 0.85rem;
}

.matches-table th,
.matches-table td {
padding: 0.75rem 0.5rem;
}
}

@media (max-width: 480px) {
.matches-container {
padding: 0.5rem;
}

.player-matches-section {
padding: 1rem;
}

.team {
padding: 0.5rem;
}

.team-players {
font-size: 0.8rem;
}

.match-score {
font-size: 1rem;
}

.empty-matches,
.empty-player-matches {
padding: 2rem 1rem;
}

.section-header h2 {
font-size: 1.25rem;
}
}

.match-card.completed {
border-left: 4px solid #10b981;
}

.match-card.pending {
border-left: 4px solid #f59e0b;
}

.match-card.upcoming {
border-left: 4px solid #3b82f6;
}

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

.match-card.new-match {
animation: slideInFromBottom 0.5s ease-out;
}

.match-card:focus,
.match-result-card:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

.btn-modern:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

@media (prefers-contrast: high) {
.match-card,
.match-result-card {
border: 2px solid #000;
}

.team {
border: 2px solid #000;
}

.vs {
border: 2px solid #000;
}
}

@media (prefers-reduced-motion: reduce) {
.match-card,
.match-result-card,
.btn-modern {
transition: none;
}

.match-card:hover,
.match-result-card:hover {
transform: none;
}

.new-match {
animation: none;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

.match-teams {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
align-items: center;
margin-bottom: 1rem;
}

.team {
text-align: center;
padding: 0.75rem;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}

.team:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}

.team-label {
display: block;
font-size: 0.7rem;
color: #64748b;
font-weight: 600;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}

.team-players {
display: block;
font-weight: 600;
color: #1e293b;
font-size: 0.9rem;
line-height: 1.4;
}

.player-name {
display: inline;
color: #1e293b;
font-weight: 600;
}

.player-separator {
margin: 0 0.25rem;
color: #64748b;
font-weight: 400;
}

.vs-separator {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
background: white;
border: 2px solid #e2e8f0;
border-radius: 50%;
font-weight: bold;
font-size: 0.8rem;
color: #64748b;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin: 0 auto;
}

.vs {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: white;
border: 2px solid #e2e8f0;
border-radius: 50%;
font-weight: bold;
font-size: 0.8rem;
color: #64748b;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin: 0 auto;
}

@media (max-width: 768px) {
.match-teams {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: stretch;
}

.team.team-1,
.team:first-child {
order: 1;
margin-bottom: 0;
}

.vs-separator,
.vs {
order: 2;
width: 35px;
height: 35px;
font-size: 0.7rem;
align-self: center;
margin: 0.5rem auto;
flex-shrink: 0;
}

.team.team-2,
.team:last-child {
order: 3;
margin-top: 0;
}

.team {
width: 100%;
padding: 1rem;
text-align: center;
}

.team-players {
font-size: 0.85rem;
line-height: 1.3;
}

.player-name {
font-size: 0.85rem;
}

.match-card {
padding: 1rem;
margin-bottom: 1rem;
}

.match-header {
flex-direction: column;
gap: 0.75rem;
text-align: center;
align-items: center;
}

.match-info h3 {
font-size: 1rem;
margin: 0;
}
}

@media (max-width: 480px) {
.match-teams {
gap: 0.5rem;
}

.vs-separator,
.vs {
width: 30px;
height: 30px;
font-size: 0.6rem;
margin: 0.25rem auto;
}

.team {
padding: 0.75rem;
}

.team-players {
font-size: 0.8rem;
}

.player-name {
font-size: 0.8rem;
}

.team-label {
font-size: 0.65rem;
}

.match-card {
padding: 0.75rem;
}
}

.schedule-container .match-teams {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

.schedule-container .match-teams .team:nth-child(1) {
order: 1;
}

.schedule-container .match-teams .vs-separator,
.schedule-container .match-teams .vs {
order: 2;
align-self: center;
}

.schedule-container .match-teams .team:nth-child(3) {
order: 3;
}

@media (min-width: 769px) {
.schedule-container .match-teams {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
align-items: center;
}

.schedule-container .match-teams .team:nth-child(1),
.schedule-container .match-teams .team:nth-child(3) {
order: unset;
}

.schedule-container .match-teams .vs-separator,
.schedule-container .match-teams .vs {
order: unset;
align-self: unset;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

.teams-display {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 2rem;
align-items: center;
margin: 2rem 0;
}

.team-info {
text-align: center;
padding: 1.5rem;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}

.team-info:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}

.team-info h3,
.team-info h4 {
color: #1e293b;
margin: 0 0 0.5rem 0;
font-size: 1.1rem;
font-weight: 600;
}

.team-info p {
color: #475569;
margin: 0;
font-weight: 500;
font-size: 0.95rem;
}

.vs-divider,
.vs {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: white;
border: 3px solid #e2e8f0;
border-radius: 50%;
font-weight: bold;
font-size: 1rem;
color: #64748b;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
margin: 0 auto;
}

.current-score .teams-display {
background: #fefefe;
border-radius: 15px;
padding: 2rem;
border: 1px solid #f1f5f9;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.current-score .team-info {
background: white;
border: 2px solid #e2e8f0;
}

.current-score .vs-divider {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
border-color: #3b82f6;
}

@media (max-width: 768px) {
.teams-display {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
align-items: stretch !important;
margin: 1.5rem 0 !important;
}

.team-info:first-child {
order: 1 !important;
margin-bottom: 0 !important;
}

.vs-divider,
.vs {
order: 2 !important;
width: 40px !important;
height: 40px !important;
font-size: 0.9rem !important;
align-self: center !important;
margin: 0.75rem auto !important;
flex-shrink: 0 !important;
}

.team-info:last-child {
order: 3 !important;
margin-top: 0 !important;
}

.team-info {
width: 100% !important;
padding: 1.25rem !important;
text-align: center !important;
}

.team-info h3,
.team-info h4 {
font-size: 1rem !important;
margin-bottom: 0.75rem !important;
}

.team-info p {
font-size: 0.9rem !important;
line-height: 1.4 !important;
}

.current-score .teams-display {
padding: 1.5rem !important;
}

.current-score .team-info {
padding: 1rem !important;
}

.current-score .vs-divider {
width: 35px !important;
height: 35px !important;
font-size: 0.8rem !important;
}
}

@media (max-width: 480px) {
.teams-display {
gap: 0.75rem !important;
margin: 1rem 0 !important;
}

.vs-divider,
.vs {
width: 35px !important;
height: 35px !important;
font-size: 0.8rem !important;
margin: 0.5rem auto !important;
}

.team-info {
padding: 1rem !important;
}

.team-info h3,
.team-info h4 {
font-size: 0.95rem !important;
}

.team-info p {
font-size: 0.85rem !important;
}

.current-score .teams-display {
padding: 1rem !important;
}
}

.edit-match-result-container .teams-display {
background: #f8fafc;
border-radius: 12px;
padding: 1.5rem;
border: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
.edit-match-result-container .teams-display {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
padding: 1rem !important;
}

.edit-match-result-container .team-info:first-child {
order: 1 !important;
}

.edit-match-result-container .vs-divider {
order: 2 !important;
align-self: center !important;
}

.edit-match-result-container .team-info:last-child {
order: 3 !important;
}
}

.match-detail-container .teams-display {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

@media (max-width: 768px) {
.match-detail-container .teams-display {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
padding: 1.5rem !important;
}

.match-detail-container .team-info:first-child {
order: 1 !important;
}

.match-detail-container .vs-divider {
order: 2 !important;
align-self: center !important;
}

.match-detail-container .team-info:last-child {
order: 3 !important;
}
}

@media (max-width: 768px) {
div[class*="teams-display"],
.teams-display {
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
align-items: stretch !important;
}

div[class*="teams-display"] > div:first-child,
.teams-display > div:first-child {
order: 1 !important;
}

div[class*="teams-display"] > div:nth-child(2),
.teams-display > div:nth-child(2) {
order: 2 !important;
align-self: center !important;
}

div[class*="teams-display"] > div:last-child,
.teams-display > div:last-child {
order: 3 !important;
}
}

/* ========================================
======================================== */

/* ========================================

======================================== */

.score-form {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e5e7eb;
margin-bottom: 1.5rem;
}

.sets-container {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-bottom: 1.5rem;
}

.set-group {
background: #f8fafc;
border-radius: 10px;
padding: 1rem;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}

.set-group:hover {
background: #f1f5f9;
border-color: #cbd5e1;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.set-label {
display: block;
font-weight: 600;
color: #374151;
margin-bottom: 0.75rem;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.score-inputs {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
max-width: 200px;
margin: 0 auto;
}

.score-input {
width: 60px;
height: 45px;
text-align: center;
font-size: 1.1rem;
font-weight: 600;
border: 2px solid #d1d5db;
border-radius: 8px;
background: white;
color: #1f2937;
transition: all 0.3s ease;
}

.score-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
background: #fefefe;
}

.score-input:hover {
border-color: #9ca3af;
}

.score-separator {
font-size: 1.2rem;
font-weight: bold;
color: #6b7280;
min-width: 20px;
text-align: center;
}

.form-actions {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
padding-top: 1rem;
border-top: 1px solid #e5e7eb;
}

.btn-modern {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
min-width: 100px;
justify-content: center;
}

.btn-primary {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.btn-primary:hover {
background: linear-gradient(135deg, #2563eb, #1e40af);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
color: white;
text-decoration: none;
}

.btn-secondary {
background: #f8fafc;
color: #475569;
border: 2px solid #e2e8f0;
}

.btn-secondary:hover {
background: #f1f5f9;
border-color: #cbd5e1;
color: #334155;
text-decoration: none;
transform: translateY(-1px);
}

.btn-outline {
background: transparent;
color: #6b7280;
border: 2px solid #d1d5db;
}

.btn-outline:hover {
background: #f9fafb;
border-color: #9ca3af;
color: #374151;
text-decoration: none;
transform: translateY(-1px);
}

.match-card {
background: white;
border-radius: 12px;
padding: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e5e7eb;
margin-bottom: 1.5rem;
overflow: hidden;
transition: all 0.3s ease;
}

.match-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}

.match-header {
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
padding: 1rem 1.5rem;
border-bottom: 1px solid #e5e7eb;
}

.match-date {
font-weight: 600;
color: #374151;
font-size: 0.9rem;
margin: 0;
}

.match-teams-compact {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
align-items: center;
padding: 1rem 1.5rem;
background: #fefefe;
}

.team-compact {
text-align: center;
}

.team-compact .team-label {
font-size: 0.7rem;
color: #6b7280;
font-weight: 500;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}

.team-names {
display: flex;
flex-direction: column;
gap: 0.15rem;
}

.player-name-bold {
font-size: 0.85rem;
color: #1f2937;
font-weight: 600;
line-height: 1.2;
}

.vs-compact {
width: 30px;
height: 30px;
background: #3b82f6;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.75rem;
margin: 0 auto;
}

@media (max-width: 768px) {
.score-form {
padding: 1rem;
margin-bottom: 1rem;
}

.sets-container {
gap: 1rem;
}

.set-group {
padding: 0.75rem;
}

.score-inputs {
max-width: 180px;
gap: 0.5rem;
}

.score-input {
width: 50px;
height: 40px;
font-size: 1rem;
}

.form-actions {
flex-direction: column;
align-items: center;
}

.btn-modern {
width: 100%;
max-width: 200px;
}

.match-teams-compact {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem;
}

.team-compact:first-child {
order: 1;
}

.vs-compact {
order: 2;
align-self: center;
margin: 0.5rem auto;
}

.team-compact:last-child {
order: 3;
}
}

@media (max-width: 480px) {
.score-inputs {
max-width: 160px;
gap: 0.4rem;
}

.score-input {
width: 45px;
height: 38px;
font-size: 0.95rem;
}

.score-separator {
font-size: 1rem;
min-width: 15px;
}

.set-label {
font-size: 0.8rem;
margin-bottom: 0.5rem;
}
}

.set-group:last-child {
opacity: 0.8;
border-style: dashed;
}

.set-group:last-child:hover {
opacity: 1;
border-style: solid;
}

.set-group:last-child .set-label::after {
content: " (optioneel)";
font-weight: 400;
font-size: 0.8rem;
color: #6b7280;
text-transform: none;
}

.score-input:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

.btn-modern:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

@media (prefers-contrast: high) {
.score-input {
border-width: 3px;
}

.set-group {
border-width: 2px;
}
}

@media (prefers-reduced-motion: reduce) {
.score-input,
.set-group,
.btn-modern,
.match-card {
transition: none;
}

.match-card:hover,
.btn-modern:hover {
transform: none;
}
}

/* ========================================
======================================== */

.cancel-match-container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

.match-details {
background: #f8f9fa;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
border-left: 4px solid #007bff;
}

.match-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px;
margin-top: 15px;
}

.match-info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: white;
border-radius: 6px;
border: 1px solid #e9ecef;
}

.match-info-item .label {
font-weight: 600;
color: #495057;
}

.match-info-item .value {
color: #212529;
font-weight: 500;
}

.cancellation-form {
background: white;
padding: 25px;
border-radius: 8px;
border: 1px solid #dee2e6;
}

.warning-message, .info-message {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 15px;
border-radius: 8px;
margin: 20px 0;
}

.warning-message {
background: #fff3cd;
border: 1px solid #ffeaa7;
color: #856404;
}

.info-message {
background: #d1ecf1;
border: 1px solid #bee5eb;
color: #0c5460;
}

.warning-icon, .info-icon {
font-size: 20px;
flex-shrink: 0;
}

.warning-text, .info-text {
flex: 1;
line-height: 1.5;
}

.cancelled-matches-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.matches-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
gap: 20px;
margin: 20px 0;
}

.cancelled-match-card {
background: white;
border: 1px solid #dee2e6;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cancelled-match-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.match-status {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}

.status-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}

.status-badge.cancelled {
background: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}

.match-date {
font-weight: 600;
color: #495057;
}

.match-teams {
margin: 15px 0;
}

.team {
margin: 8px 0;
padding: 10px;
background: #f8f9fa;
border-radius: 6px;
}

.team-label {
font-weight: 600;
color: #495057;
margin-right: 8px;
}

.players {
color: #212529;
}

.vs-divider {
text-align: center;
font-weight: bold;
color: #6c757d;
margin: 5px 0;
}

.match-info {
display: flex;
gap: 15px;
margin: 15px 0;
font-size: 14px;
}

.poule-name, .court-info {
padding: 4px 8px;
background: #e9ecef;
border-radius: 4px;
color: #495057;
}

.cancellation-reason {
background: #fff3cd;
border: 1px solid #ffeaa7;
color: #856404;
padding: 10px;
border-radius: 6px;
margin: 15px 0;
font-size: 14px;
}

.match-actions {
display: flex;
gap: 10px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #e9ecef;
flex-wrap: wrap;
}

.block-date-container, .blocked-dates-container {
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}

.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid #e9ecef;
}

.header-actions {
display: flex;
gap: 10px;
}

.block-date-form {
background: white;
padding: 25px;
border-radius: 8px;
border: 1px solid #dee2e6;
max-width: 600px;
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
font-weight: 600;
margin-bottom: 8px;
color: #495057;
}

.form-control {
width: 100%;
padding: 10px 12px;
border: 1px solid #ced4da;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
outline: none;
}

.form-help {
color: #6c757d;
font-size: 12px;
margin-top: 4px;
}

.conflicts-section {
background: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
}

.conflicts-section h2 {
color: #856404;
margin-bottom: 10px;
}

.conflicts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 15px;
margin-top: 15px;
}

.conflict-card {
background: white;
border: 1px solid #ffeaa7;
border-radius: 8px;
padding: 15px;
}

.conflict-date {
font-weight: 600;
font-size: 16px;
color: #495057;
margin-bottom: 8px;
}

.conflict-reason, .conflict-match {
margin: 8px 0;
font-size: 14px;
color: #495057;
}

.conflict-actions {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #e9ecef;
}

.blocked-dates-section {
margin: 30px 0;
}

.blocked-dates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
margin: 20px 0;
}

.blocked-date-card {
background: white;
border: 1px solid #dee2e6;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blocked-date-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.date-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #e9ecef;
}

.blocked-date {
font-weight: 600;
font-size: 16px;
color: #495057;
}

.date-status {
padding: 4px 8px;
background: #f8d7da;
color: #721c24;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}

.date-details {
margin: 15px 0;
}

.date-details > div {
margin: 8px 0;
font-size: 14px;
color: #495057;
}

.reason {
background: #f8f9fa;
padding: 10px;
border-radius: 6px;
border-left: 4px solid #007bff;
}

.date-actions {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #e9ecef;
}

.empty-state {
text-align: center;
padding: 60px 20px;
color: #6c757d;
}

.empty-icon {
font-size: 64px;
margin-bottom: 20px;
opacity: 0.5;
}

.empty-state h3 {
color: #495057;
margin-bottom: 10px;
}

.empty-state p {
margin-bottom: 20px;
color: #6c757d;
}

.btn {
display: inline-block;
padding: 8px 16px;
border: 1px solid transparent;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
font-size: 14px;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
}

.btn-primary {
background: #007bff;
color: white;
border-color: #007bff;
}

.btn-primary:hover {
background: #0056b3;
border-color: #0056b3;
color: white;
text-decoration: none;
}

.btn-danger {
background: #dc3545;
color: white;
border-color: #dc3545;
}

.btn-danger:hover {
background: #c82333;
border-color: #bd2130;
color: white;
text-decoration: none;
}

.btn-success {
background: #28a745;
color: white;
border-color: #28a745;
}

.btn-success:hover {
background: #218838;
border-color: #1e7e34;
color: white;
text-decoration: none;
}

.btn-warning {
background: #ffc107;
color: #212529;
border-color: #ffc107;
}

.btn-warning:hover {
background: #e0a800;
border-color: #d39e00;
color: #212529;
text-decoration: none;
}

.btn-secondary {
background: #6c757d;
color: white;
border-color: #6c757d;
}

.btn-secondary:hover {
background: #5a6268;
border-color: #545b62;
color: white;
text-decoration: none;
}

.btn-info {
background: #17a2b8;
color: white;
border-color: #17a2b8;
}

.btn-info:hover {
background: #138496;
border-color: #117a8b;
color: white;
text-decoration: none;
}

.btn-sm {
padding: 6px 12px;
font-size: 12px;
}

.navigation-buttons {
display: flex;
gap: 15px;
justify-content: center;
margin: 30px 0 20px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
}

.form-actions {
display: flex;
gap: 15px;
justify-content: flex-start;
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
}

@media (max-width: 768px) {
.cancel-match-container,
.blocked-dates-container {
padding: 15px;
}

.match-info-grid {
grid-template-columns: 1fr;
}

.matches-grid,
.blocked-dates-grid,
.conflicts-grid {
grid-template-columns: 1fr;
}

.card-header {
flex-direction: column;
gap: 15px;
align-items: stretch;
}

.header-actions {
justify-content: stretch;
}

.navigation-buttons {
flex-direction: column;
}

.form-actions {
flex-direction: column;
}

.match-actions,
.date-actions,
.conflict-actions {
flex-direction: column;
gap: 8px;
}
}

.card {
background: white;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
overflow: hidden;
margin-bottom: 20px;
}

.card-header h1 {
margin: 0 0 8px 0;
color: #495057;
font-size: 28px;
}

.card-header p {
margin: 0;
color: #6c757d;
font-size: 16px;
}

select.form-control {
background: white;
cursor: pointer;
}

textarea.form-control {
resize: vertical;
min-height: 80px;
}

.form-control:invalid {
border-color: #dc3545;
}

.form-control:valid {
border-color: #28a745;
}

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

.cancelled-match-card,
.blocked-date-card,
.conflict-card {
animation: fadeIn 0.3s ease;
}

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

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }

@media print {
.btn, .form-actions, .navigation-buttons {
display: none;
}

.card {
box-shadow: none;
border: 1px solid #000;
}

.cancelled-match-card,
.blocked-date-card {
page-break-inside: avoid;
margin-bottom: 20px;
}
}

.match-card.cancelled {
background: #fef2f2;
border: 1px solid #fecaca;
opacity: 0.9;
}

.match-card.cancelled:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.status.cancelled {
background: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
}

.cancellation-reason {
display: flex;
align-items: flex-start;
gap: 0.5rem;
background: #fff1f2;
border: 1px solid #fecaca;
border-radius: 8px;
padding: 0.75rem;
margin: 1rem 0;
}

.cancellation-icon {
font-size: 1.25rem;
flex-shrink: 0;
}

.cancellation-text {
flex: 1;
color: #991b1b;
font-size: 0.9rem;
line-height: 1.4;
}

.match-card.cancelled .team {
background: #fef7f7;
border: 1px solid #fed7d7;
opacity: 0.8;
}

.match-card.cancelled .player-name {
color: #6b7280;
text-decoration: line-through;
}

.cancelled-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 1rem;
background: #fef7f7;
border-radius: 8px;
border: 1px solid #fed7d7;
}

.completed-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 1rem;
}

.btn-success-modern {
background: linear-gradient(135deg, #10b981, #059669);
color: white;
border: none;
}

.btn-success-modern:hover {
background: linear-gradient(135deg, #059669, #047857);
color: white;
text-decoration: none;
transform: translateY(-1px);
}

.btn-warning-modern {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: white;
border: none;
}

.btn-warning-modern:hover {
background: linear-gradient(135deg, #d97706, #b45309);
color: white;
text-decoration: none;
transform: translateY(-1px);
}

.alert {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
margin: 1rem 0;
border-radius: 8px;
border: 1px solid;
}

.alert-warning {
background: #fef3c7;
border-color: #fde68a;
color: #92400e;
}

.alert-icon {
font-size: 1.5rem;
flex-shrink: 0;
}

.alert-content h4 {
margin: 0 0 0.5rem 0;
color: #92400e;
}

.alert-content p {
margin: 0.25rem 0;
}

@media (max-width: 768px) {
.cancelled-actions,
.completed-actions {
flex-direction: column;
gap: 0.5rem;
}

.cancelled-actions .btn-modern,
.completed-actions .btn-modern {
width: 100%;
max-width: 200px;
}
}

@keyframes cancelledPulse {
0% { opacity: 0.9; }
50% { opacity: 0.7; }
100% { opacity: 0.9; }
}

.match-card.cancelled {
animation: cancelledPulse 3s ease-in-out infinite;
}

.match-card.cancelled:hover {
animation: none;
opacity: 1;
}

.btn-completed-cancel {
border: 2px solid #dc2626 !important;
background: linear-gradient(135deg, #fca5a5, #f87171) !important;
position: relative;
}

.btn-completed-cancel:hover {
background: linear-gradient(135deg, #f87171, #ef4444) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-completed-cancel::before {
content: "⚠️ ";
font-size: 1.1em;
}

@keyframes completedPulse {
0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.btn-completed-cancel {
animation: completedPulse 2s infinite;
}

.btn-completed-cancel:hover {
animation: none;
}

.text-muted {
color: #6c757d;
font-style: italic;
font-size: 0.9em;
padding: 0.5rem 1rem;
background: #f8f9fa;
border-radius: 6px;
border: 1px solid #e9ecef;
text-align: center;
}

.completed-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 1rem;
}

.completed-actions .text-muted {
flex: 1;
min-width: 200px;
}

.quick-actions {
display: flex;
gap: 1rem;
margin: 2rem 0;
flex-wrap: wrap;
justify-content: center;
}

.quick-actions .btn {
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
}

.admin-quick-links {
background: #f8f9fa;
border-radius: 12px;
padding: 1.5rem;
border: 1px solid #e9ecef;
}

.admin-quick-links h3 {
margin-bottom: 1rem;
color: #495057;
}

.btn-group {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}

.table-responsive {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.table {
margin-bottom: 0;
}

.table th {
background: #f8f9fa;
border-bottom: 2px solid #dee2e6;
font-weight: 600;
color: #495057;
}

.table td {
vertical-align: middle;
}

.conflicts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
margin-top: 1rem;
}

.conflict-card {
background: white;
border: 1px solid #ffeaa7;
border-radius: 8px;
padding: 1rem;
border-left: 4px solid #f39c12;
}

.blocked-dates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
margin-top: 1rem;
}

.blocked-date-card {
background: white;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.2s ease;
}

.blocked-date-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.date-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e9ecef;
}

.blocked-date {
font-weight: 600;
font-size: 1.1rem;
color: #495057;
}

.date-status {
background: #dc3545;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}

.date-details > div {
margin: 0.5rem 0;
font-size: 0.9rem;
color: #6c757d;
}

.reason {
background: #f8f9fa;
padding: 0.75rem;
border-radius: 6px;
border-left: 3px solid #007bff;
color: #495057;
font-weight: 500;
}

.btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.875rem;
border-radius: 6px;
}

.empty-state {
text-align: center;
padding: 3rem 2rem;
color: #6c757d;
}

.empty-state .empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.6;
}

.empty-state h4 {
color: #495057;
margin-bottom: 1rem;
}

.navigation-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin: 2rem 0;
flex-wrap: wrap;
}

@media (max-width: 768px) {
.quick-actions {
flex-direction: column;
align-items: stretch;
}

.btn-group {
flex-direction: column;
}

.conflicts-grid,
.blocked-dates-grid {
grid-template-columns: 1fr;
}

.date-header {
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
}

.stat-card {
background: rgba(255,255,255,0.95);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: transform 0.2s ease;
}

.stat-card:hover {
transform: translateY(-2px);
}

.stat-label {
font-size: 0.9rem;
color: #6b7280;
margin-bottom: 0.5rem;
text-transform: uppercase;
font-weight: 500;
}

.stat-value {
font-size: 2rem;
font-weight: 700;
color: #1f2937;
}

.matrix-section {
background: rgba(255,255,255,0.95);
border-radius: 16px;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
overflow: hidden;
}

.matrix-section-header {
padding: 1.5rem;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
border-bottom: 1px solid #e5e7eb;
}

.matrix-section-header h2 {
margin: 0;
color: #1f2937;
font-size: 1.25rem;
font-weight: 600;
}

.matrix-table-container {
overflow-x: auto;
padding: 1.5rem;
}

.matrix-table {
width: 100%;
border-collapse: collapse;
font-family: monospace;
font-size: 0.9rem;
min-width: 600px;
}

.matrix-table th,
.matrix-table td {
padding: 8px 12px;
text-align: center;
border: 1px solid #e5e7eb;
}

.matrix-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}

.matrix-table .player-name {
background: #f9fafb !important;
font-weight: 500;
text-align: left !important;
color: #1f2937;
min-width: 120px;
}

.matrix-table .diagonal {
background: #f3f4f6;
color: #9ca3af;
font-style: italic;
}

.matrix-table .high-interaction {
background: #ecfdf5;
color: #065f46;
font-weight: 600;
}

.matrix-table .medium-interaction {
background: #fffbeb;
color: #92400e;
}

.matrix-table .low-interaction {
background: #fef2f2;
color: #991b1b;
}

.balance-indicator {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
font-size: 0.9rem;
}

.balance-excellent {
background: #d1fae5;
color: #065f46;
}

.balance-good {
background: #dbeafe;
color: #1e40af;
}

.balance-poor {
background: #fee2e2;
color: #991b1b;
}

@media (max-width: 768px) {
.matrix-table {
font-size: 0.8rem;
}
.matrix-table th,
.matrix-table td {
padding: 4px 6px;
}
}
/* ========================================
======================================== */

.terminal-output {
background: #1e1e1e;
color: #d4d4d4;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.875rem;
line-height: 1.5;
padding: 1.5rem;
border-radius: 8px;
margin: 1rem 0;
overflow-x: auto;
border: 1px solid #333;
}

.terminal-output .success {
color: #4ade80;
}

.terminal-output .error {
color: #f87171;
}

.terminal-output .warning {
color: #fbbf24;
}

.terminal-output .info {
color: #60a5fa;
}

.terminal-output .muted {
color: #9ca3af;
}

.status-indicator {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 500;
font-size: 0.875rem;
}

.status-indicator.status-success {
background: #dcfce7;
color: #166534;
border: 1px solid #bbf7d0;
}

.status-indicator.status-error {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}

.status-indicator.status-warning {
background: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
}

.status-indicator.status-info {
background: #dbeafe;
color: #1e40af;
border: 1px solid #bfdbfe;
}

.db-table-display {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
margin: 1rem 0;
}

.db-table-display table {
width: 100%;
border-collapse: collapse;
}

.db-table-display th {
background: #f8fafc;
color: #374151;
font-weight: 600;
padding: 0.75rem 1rem;
text-align: left;
border-bottom: 2px solid #e5e7eb;
}

.db-table-display td {
padding: 0.75rem 1rem;
border-bottom: 1px solid #f3f4f6;
color: #4b5563;
}

.db-table-display tr:hover {
background: #f9fafb;
}

.db-table-display tr:last-child td {
border-bottom: none;
}

.weekday-analysis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}

.analysis-card {
background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
}

.analysis-card h3 {
color: #1f2937;
margin: 0 0 1rem 0;
font-size: 1.125rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}

.analysis-card .weekday-mapping {
background: #f8fafc;
border-radius: 6px;
padding: 1rem;
margin: 1rem 0;
}

.analysis-card .weekday-mapping code {
background: #e5e7eb;
color: #374151;
padding: 0.125rem 0.375rem;
border-radius: 4px;
font-family: monospace;
font-size: 0.875rem;
}

.fix-suggestions {
background: linear-gradient(135deg, #dbeafe, #e0e7ff);
border: 1px solid #3b82f6;
border-radius: 12px;
padding: 1.5rem;
margin: 2rem 0;
}

.fix-suggestions h3 {
color: #1e40af;
margin: 0 0 1rem 0;
font-size: 1.125rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}

.fix-suggestions .fix-step {
background: white;
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
border: 1px solid #e5e7eb;
}

.fix-suggestions .fix-step h4 {
color: #374151;
margin: 0 0 0.5rem 0;
font-size: 1rem;
font-weight: 600;
}

.fix-suggestions .code-block {
background: #1e1e1e;
color: #d4d4d4;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: 0.875rem;
line-height: 1.5;
padding: 1rem;
border-radius: 6px;
margin: 0.5rem 0;
overflow-x: auto;
}

.progress-steps {
display: flex;
align-items: center;
gap: 1rem;
margin: 2rem 0;
flex-wrap: wrap;
}

.progress-step {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 8px;
font-weight: 500;
font-size: 0.875rem;
}

.progress-step.step-completed {
background: #dcfce7;
color: #166534;
}

.progress-step.step-current {
background: #dbeafe;
color: #1e40af;
}

.progress-step.step-pending {
background: #f3f4f6;
color: #6b7280;
}

.progress-step::before {
content: '○';
font-size: 1.25rem;
font-weight: bold;
}

.progress-step.step-completed::before {
content: '✓';
color: #16a34a;
}

.progress-step.step-current::before {
content: '●';
color: #3b82f6;
}

@media (max-width: 768px) {
.weekday-analysis {
grid-template-columns: 1fr;
gap: 1rem;
}

.analysis-card {
padding: 1.25rem;
}

.fix-suggestions {
padding: 1.25rem;
}

.progress-steps {
flex-direction: column;
align-items: stretch;
}

.progress-step {
justify-content: center;
}

.db-table-display {
font-size: 0.875rem;
}

.db-table-display th,
.db-table-display td {
padding: 0.5rem 0.75rem;
}
}

@media (max-width: 480px) {
.terminal-output {
font-size: 0.75rem;
padding: 1rem;
}

.analysis-card {
padding: 1rem;
}

.fix-suggestions {
padding: 1rem;
}

.db-table-display th,
.db-table-display td {
padding: 0.375rem 0.5rem;
font-size: 0.8rem;
}
}

/* ========================================
======================================== */

.edit-player-container {
max-width: 1000px;
margin: 0 auto;
padding: 2rem;
}

.edit-player-hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 2rem;
border-radius: 12px;
margin-bottom: 2rem;
text-align: center;
}

.edit-player-hero h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}

.player-info-summary {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
display: flex;
align-items: center;
gap: 1rem;
}

.player-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, #3498db, #2980b9);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
}

.enhanced-edit-form {
display: flex;
flex-direction: column;
gap: 2rem;
}

.form-card {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
border: 1px solid #f1f5f9;
}

.form-card-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid #f1f5f9;
}

.form-card-icon {
font-size: 2rem;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
}

.form-card-title {
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
margin: 0;
}

.timeslots-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}

.timeslot-card {
background: #f8fafc;
border: 2px solid #e5e7eb;
border-radius: 8px;
padding: 1rem;
transition: all 0.2s ease;
cursor: pointer;
position: relative;
}

.timeslot-card:hover {
border-color: #3b82f6;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.timeslot-card.selected {
border-color: #10b981;
background: #f0fdf4;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.timeslot-checkbox {
position: absolute;
top: 8px;
right: 8px;
width: 20px;
height: 20px;
cursor: pointer;
}

.quick-actions {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}

.form-actions {
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
padding: 2rem;
background: #f8fafc;
border-radius: 12px;
margin-top: 1rem;
}

.form-input {
width: 100%;
padding: 0.75rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.2s ease;
}

.form-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-input-group {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e5e7eb;
}

.unavailable-dates-container {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}

@media (max-width: 768px) {
.edit-player-container {
padding: 1rem;
}

.timeslots-grid {
grid-template-columns: 1fr;
}

.form-actions {
flex-direction: column;
align-items: stretch;
}

.quick-actions {
flex-direction: column;
}
}

.matches-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}

.match-card {
background: white;
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 1rem;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: all 0.2s ease;
}

.match-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.match-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #f3f4f6;
}

.court-badge {
background: #3b82f6;
color: white;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}

.competition-name {
color: #6b7280;
font-size: 0.875rem;
font-weight: 500;
}

.teams-container {
display: flex;
align-items: center;
gap: 1rem;
}

.team {
flex: 1;
text-align: center;
}

.team-label {
font-size: 0.875rem;
color: #6b7280;
font-weight: 500;
margin-bottom: 0.5rem;
display: block;
}

.team-players {
display: flex;
flex-direction: column;
gap: 0.25rem;
}

.player-name {
font-weight: 500;
color: #1f2937;
font-size: 0.9rem;
padding: 0.125rem 0;
}

.vs-divider {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: #ef4444;
color: white;
border-radius: 50%;
font-weight: 700;
font-size: 0.875rem;
flex-shrink: 0;
}

.availability-section {
margin-top: 2rem;
}

.availability-card {
background: white;
border: 2px solid;
border-radius: 8px;
padding: 1.5rem;
height: 100%;
}

.availability-card.available {
border-color: #10b981;
background: #f0fdf4;
}

.availability-card.unavailable {
border-color: #ef4444;
background: #fef2f2;
}

.availability-header {
margin-bottom: 1rem;
}

.availability-title {
font-size: 1.125rem;
font-weight: 600;
margin: 0 0 0.5rem 0;
}

.availability-card.available .availability-title {
color: #065f46;
}

.availability-card.unavailable .availability-title {
color: #991b1b;
}

.availability-description {
font-size: 0.875rem;
margin: 0;
opacity: 0.8;
}

.players-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.player-item {
padding: 0.75rem;
border-radius: 6px;
transition: all 0.2s ease;
}

.player-item.available {
background: #ecfdf5;
border: 1px solid #d1fae5;
}

.player-item.unavailable {
background: #fee2e2;
border: 1px solid #fecaca;
}

.player-item:hover {
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.player-info {
display: flex;
justify-content: space-between;
align-items: center;
}

.player-info .player-name {
font-weight: 500;
color: #1f2937;
}

.player-status {
padding: 0.125rem 0.5rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
}

.available-badge {
background: #10b981;
color: white;
}

.unavailable-badge {
background: #ef4444;
color: white;
}

.no-players {
text-align: center;
padding: 2rem 1rem;
color: #6b7280;
}

.no-players-text {
font-style: italic;
font-size: 0.9rem;
}

.legend-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}

.legend-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: #f8fafc;
border-radius: 6px;
}

.legend-icon {
font-size: 1.25rem;
width: 2rem;
text-align: center;
flex-shrink: 0;
}

.legend-text {
font-size: 0.9rem;
color: #374151;
}

@media (max-width: 768px) {
.matches-grid {
grid-template-columns: 1fr;
}

.teams-container {
flex-direction: column;
gap: 1rem;
}

.vs-divider {
width: 30px;
height: 30px;
font-size: 0.75rem;
}

.legend-grid {
grid-template-columns: 1fr;
}

.availability-card {
margin-bottom: 1rem;
}
}

@media (max-width: 480px) {
.match-header {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}

.player-info {
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
}

.availability-section {
margin-top: 2rem;
}

.availability-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
width: 100%;
}

.availability-column {
width: 100%;
min-height: 200px;
}

.availability-card {
background: white;
border: 2px solid;
border-radius: 8px;
padding: 1.5rem;
height: 100%;
display: flex;
flex-direction: column;
}

.availability-card.available {
border-color: #10b981;
background: #f0fdf4;
}

.availability-card.unavailable {
border-color: #ef4444;
background: #fef2f2;
}

.players-list {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}

@media (max-width: 768px) {
.availability-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}

.availability-grid .availability-column {
flex: none !important;
width: auto !important;
max-width: none !important;
}

.poule-stats {
padding: 1.5rem;
background: #f8fafc;
border-top: 1px solid #e5e7eb;
}

.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}

.stat-card {
background: white;
border-radius: 8px;
padding: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
border: 1px solid #e5e7eb;
transition: all 0.2s ease;
}

.stat-card:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.stat-icon {
font-size: 1.5rem;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
flex-shrink: 0;
}

.stat-total .stat-icon {
background: #dbeafe;
color: #1e40af;
}

.stat-completed .stat-icon {
background: #dcfce7;
color: #166534;
}

.stat-pending .stat-icon {
background: #fef3c7;
color: #92400e;
}

.stat-content {
flex: 1;
min-width: 0;
}

.stat-number {
font-size: 1.25rem;
font-weight: 700;
color: #1f2937;
line-height: 1;
margin-bottom: 0.25rem;
}

.stat-label {
font-size: 0.875rem;
color: #6b7280;
font-weight: 500;
line-height: 1;
}

.progress-section {
padding: 1rem 1.5rem;
background: white;
border-top: 1px solid #e5e7eb;
}

.progress-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}

.progress-label {
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}

.progress-percentage {
font-size: 0.875rem;
font-weight: 600;
color: #1f2937;
}

.progress-bar-container {
height: 8px;
background: #f3f4f6;
border-radius: 4px;
overflow: hidden;
}

.progress-bar {
height: 100%;
border-radius: 4px;
transition: all 0.3s ease;
}

.progress-low {
background: linear-gradient(90deg, #ef4444, #dc2626);
}

.progress-medium {
background: linear-gradient(90deg, #f59e0b, #d97706);
}

.progress-high {
background: linear-gradient(90deg, #10b981, #059669);
}

.poule-actions {
padding: 1.5rem;
background: white;
display: flex;
gap: 0.75rem;
justify-content: center;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}

.btn-action {
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 500;
font-size: 0.875rem;
text-decoration: none;
transition: all 0.2s ease;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}

.btn-action.btn-primary {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
}

.btn-action.btn-primary:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
transform: translateY(-1px);
color: white;
text-decoration: none;
}

.btn-action.btn-secondary {
background: #6b7280;
color: white;
}

.btn-action.btn-secondary:hover {
background: #4b5563;
color: white;
text-decoration: none;
}

@media (max-width: 768px) {
.stats-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}

.stat-card {
padding: 0.75rem;
}

.stat-icon {
font-size: 1.25rem;
width: 2rem;
height: 2rem;
}

.stat-number {
font-size: 1.125rem;
}

.poule-actions {
flex-direction: column;
align-items: center;
}

.btn-action {
width: 100%;
justify-content: center;
}
}

@media (max-width: 480px) {
.stats-grid {
gap: 0.5rem;
}

.stat-card {
padding: 0.75rem 0.5rem;
gap: 0.5rem;
}

.stat-icon {
font-size: 1rem;
width: 1.75rem;
height: 1.75rem;
}

.stat-number {
font-size: 1rem;
}

.stat-label {
font-size: 0.75rem;
}

.poule-stats {
padding: 1rem;
}

.progress-section {
padding: 0.75rem 1rem;
}

.poule-actions {
padding: 1rem;
}
}

/* ========================================

======================================== */

.score-overview-container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.score-hero {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
color: white !important;
padding: 3rem 2rem;
border-radius: 20px;
margin-bottom: 2rem;
text-align: center;
box-shadow: 0 8px 32px rgba(5, 150, 105, 0.2);
}

.score-hero h1 {
font-size: 2.5rem;
font-weight: bold;
margin: 0 0 0.5rem 0;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
color: white !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

.score-hero p {
font-size: 1.2rem;
opacity: 0.9;
margin: 0;
color: white !important;
display: block !important;
visibility: visible !important;
}

.summary-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}

.stat-card {
background: white;
border-radius: 15px;
padding: 2rem;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
}

.stat-card .stat-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
opacity: 0.8;
}

.stat-card .stat-number {
font-size: 3rem;
font-weight: bold;
color: #059669 !important;
margin-bottom: 0.5rem;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

.stat-card .stat-label {
color: #64748b !important;
font-size: 1rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

.poules-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}

.poule-card {
background: white;
border-radius: 16px;
padding: 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
border: 1px solid #f1f5f9;
transition: all 0.3s ease;
overflow: hidden;
display: block !important;
visibility: visible !important;
}

.poule-header {
padding: 1.5rem;
background: linear-gradient(135deg, #f8fafc, #e2e8f0);
border-bottom: 1px solid #e5e7eb;
position: relative;
}

.poule-name {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937 !important;
margin: 0;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

.poule-competition {
font-size: 0.875rem;
color: #64748b !important;
margin: 0.5rem 0 0 0;
display: block !important;
visibility: visible !important;
}

.poule-stats {
padding: 1.5rem;
}

.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}

.stat-content .stat-number {
font-size: 1.5rem;
font-weight: 700;
color: #1f2937 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

.stat-content .stat-label {
font-size: 0.75rem;
color: #64748b !important;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

.progress-label {
font-size: 0.875rem;
color: #64748b !important;
font-weight: 500;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

.progress-percentage {
font-size: 1rem;
font-weight: 600;
color: #059669 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

.btn-action {
padding: 0.75rem 1rem;
border-radius: 8px;
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.5rem;
visibility: visible !important;
opacity: 1 !important;
color: white !important;
}

.btn-action.btn-primary {
background: linear-gradient(135deg, #059669, #047857);
color: white !important;
}

.btn-action.btn-secondary {
background: #f8fafc;
color: #64748b !important;
border: 1px solid #e2e8f0;
}

.score-overview-container * {
color: inherit !important;
visibility: visible !important;
opacity: 1 !important;
}

.poule-card h3,
.poule-card p,
.poule-card span,
.poule-card div {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}

.stat-number,
.progress-percentage,
[class*="number"],
[class*="count"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
color: inherit !important;
}

/* ========================================
======================================== */

/* ========================================
======================================== */

.page-title {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
color: #1f2937;
}

.delete-competition-section {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border: 2px solid #fca5a5;
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}

.delete-competition-warning {
background: #dc2626;
color: white;
padding: 1rem 1.5rem;
border-radius: 8px;
font-weight: 500;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}

.delete-competition-form {
background: white;
padding: 2rem;
border-radius: 8px;
border: 1px solid #e5e7eb;
}

.confirmation-input {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #d1d5db;
border-radius: 6px;
font-size: 1rem;
margin: 1rem 0;
transition: border-color 0.3s ease;
}

.confirmation-input:focus {
outline: none;
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.delete-btn-danger {
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}

.delete-btn-danger:hover {
background: linear-gradient(135deg, #b91c1c, #991b1b);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.delete-btn-danger:disabled {
background: #9ca3af;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

.deletion-impact {
background: #fef3c7;
border: 1px solid #fbbf24;
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
}

.impact-list {
list-style: none;
padding: 0;
margin: 1rem 0;
}

.impact-list li {
padding: 0.5rem 0;
border-bottom: 1px solid rgba(251, 191, 36, 0.3);
display: flex;
align-items: center;
gap: 0.75rem;
}

.impact-list li:last-child {
border-bottom: none;
}

.form-label-nl {
font-weight: 500;
color: #374151;
margin-bottom: 0.5rem;
display: block;
}

.flash-message-nl {
padding: 1rem 1.5rem;
border-radius: 8px;
margin: 1rem 0;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.75rem;
}

.flash-success-nl {
background: #d1fae5;
color: #065f46;
border: 1px solid #a7f3d0;
}

.flash-error-nl {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}

.flash-warning-nl {
background: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
}

@media (max-width: 768px) {
.delete-competition-section {
padding: 1.5rem;
margin: 1rem 0;
}

.delete-competition-form {
padding: 1.5rem;
}

.confirmation-input {
}
}

@media (prefers-color-scheme: dark) {
.page-title {
color: #f9fafb;
}

.form-label-nl {
color: #d1d5db;
}
}

.extracted-0 {
display: none;

}

.extracted-1 {
display: inline;

}

.extracted-2 {
display: inline;

}

.extracted-3 {
display: inline;

}

.extracted-4 {
display: inline-flex;
gap: 10px;
align-items: center;

}

.extracted-5 {
width: 80px;

}

.page-header {
text-align: center;
margin-bottom: 2rem;
padding: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 12px;
}

.page-header h1 {
margin: 0 0 0.5rem 0;
font-size: 2.5rem;
}

.card {
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 8px;
}

.table-warning {
background-color: rgba(255, 193, 7, 0.1);
}

.btn-lg {
font-size: 1.2rem;
padding: 0.75rem 2rem;
}

.extracted-7 {
display: inline;

}

.page-header {
text-align: center;
margin-bottom: 2rem;
padding: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 12px;
}

.page-header h1 {
margin: 0 0 0.5rem 0;
font-size: 2.5rem;
}

.card {
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 8px;
margin-bottom: 1rem;
}

.table-warning {
background-color: rgba(255, 193, 7, 0.1);
}

.btn-lg {
font-size: 1.2rem;
padding: 0.75rem 2rem;
}

.alert {
border-radius: 8px;
}

.alert h5 {
margin-bottom: 0.75rem;
font-weight: 600;
}

.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }
.text-primary { color: #007bff !important; }
.text-info { color: #17a2b8 !important; }

.extracted-9 {
display: inline;

}

.extracted-10 {
display: inline;

}

.extracted-11 {
width: {{ usage_percentage }}%
}

.extracted-12 {
display: inline;

}

.extracted-13 {
display: inline;

}

.extracted-14 {
display: inline;

}

.extracted-15 {
display: none;

}

.extracted-16 {
display: inline;

}

.extracted-17 {
display: inline;

}

.extracted-18 {
display: none;

}

.extracted-19 {
display: none;

}

.extracted-20 {
display: inline;

}

.error-container {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}

.error-content {
text-align: center;
max-width: 500px;
background: white;
border-radius: 12px;
padding: 3rem 2rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.error-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
}

.error-title {
color: #2c3e50;
margin-bottom: 1.5rem;
font-size: 1.75rem;
font-weight: 600;
}

.error-description {
color: #6c757d;
margin-bottom: 2rem;
line-height: 1.6;
}

.error-description p {
margin-bottom: 0.75rem;
}

.error-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}

@media (max-width: 768px) {
.error-content {
padding: 2rem 1.5rem;
}

.error-actions {
flex-direction: column;
align-items: center;
}

.error-actions .btn {
width: 100%;
max-width: 200px;
}
}

.extracted-22 {
display: inline;

}

.extracted-23 {
opacity: 0.8
}

.reactivation-container {
min-height: 100vh;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 2rem 0;
}

.reactivation-header {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
}

.reactivation-icon {
font-size: 4rem;
color: #059669;
}

.icon-container {
background: #ecfdf5;
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}

.reactivation-benefits {
background: #f0fdf4;
padding: 1rem;
border-radius: 8px;
border-left: 4px solid #22c55e;
}

#reactivateBtn:disabled {
opacity: 0.6;
cursor: not-allowed;
}

.extracted-25 {
opacity: 0.6
}

.extracted-26 {
display: none;

}

.extracted-27 {
display: none;

}

.extracted-28 {
width: {{ completion_percentage }}%
}

.extracted-29 {
display: inline;

}

.extracted-30 {
display: inline;

}

.extracted-31 {
display: flex;
gap: 30px;
flex-wrap: wrap;
align-items: center;

}

.extracted-32 {
display: flex;
align-items: center;
gap: 10px;

}

.extracted-33 {
display: flex;
align-items: center;
gap: 10px;

}

.extracted-34 {
display: flex;
align-items: center;
gap: 10px;

}

.extracted-35 {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;

}

.extracted-36 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;

}

.extracted-37 {
width: {{ progress }}%
}

.extracted-38 {
width: {{ stats.completion_percentage }}%
}

.extracted-39 {
display: inline;

}

.extracted-40 {
width: {{ schedule_info.completion_percentage }}%
}

.extracted-41 {
width: {{ poule.completion_percentage }}%
}

.extracted-42 {
display: inline;

}

.extracted-43 {
--delay: 1
}

.extracted-44 {
--delay: 2
}

.extracted-45 {
--delay: 3
}

.extracted-46 {
--delay: 4
}

/* ========================================
======================================== */

.page-title-nl {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
color: #1f2937;
margin-bottom: 1rem;
}

.form-label-nl {
font-weight: 500;
color: #374151;
margin-bottom: 0.5rem;
display: block;
}

.form-input-nl {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #d1d5db;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.3s ease;
}

.form-input-nl:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.bericht-succes {
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
color: #065f46;
border: 1px solid #6ee7b7;
border-radius: 8px;
padding: 1rem 1.5rem;
margin: 1rem 0;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.75rem;
}

.bericht-fout {
background: linear-gradient(135deg, #fef2f2, #fecaca);
color: #991b1b;
border: 1px solid #f87171;
border-radius: 8px;
padding: 1rem 1.5rem;
margin: 1rem 0;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.75rem;
}

.bericht-waarschuwing {
background: linear-gradient(135deg, #fef3c7, #fde68a);
color: #92400e;
border: 1px solid #fbbf24;
border-radius: 8px;
padding: 1rem 1.5rem;
margin: 1rem 0;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.75rem;
}

.competitie-kaart {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin: 1rem 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid #e5e7eb;
transition: all 0.3s ease;
}

.competitie-kaart:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.competitie-titel {
font-size: 1.25rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
}

.competitie-info {
color: #6b7280;
font-size: 0.9rem;
margin-bottom: 1rem;
}

.knop-primair {
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}

.knop-primair:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
color: white;
text-decoration: none;
}

.knop-gevaar {
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}

.knop-gevaar:hover {
background: linear-gradient(135deg, #b91c1c, #991b1b);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.knop-secundair {
background: #f8fafc;
color: #475569;
border: 2px solid #e2e8f0;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
}

.knop-secundair:hover {
background: #e2e8f0;
color: #334155;
text-decoration: none;
}

@media (max-width: 768px) {
.competitie-kaart {
padding: 1rem;
margin: 0.5rem 0;
}

.knop-primair, .knop-gevaar, .knop-secundair {
width: 100%;
text-align: center;
margin: 0.25rem 0;
}

.form-input-nl {
}
}

@media (prefers-color-scheme: dark) {
.page-title-nl {
color: #f9fafb;
}

.form-label-nl {
color: #d1d5db;
}

.competitie-kaart {
background: #374151;
border-color: #4b5563;
}

.competitie-titel {
color: #f9fafb;
}

.competitie-info {
color: #9ca3af;
}
}

.knop-primair:focus,
.knop-gevaar:focus,
.knop-secundair:focus,
.form-input-nl:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}

@media print {
.knop-primair, .knop-gevaar, .knop-secundair {
background: transparent !important;
color: #000 !important;
border: 1px solid #000 !important;
}

.competitie-kaart {
border: 1px solid #000 !important;
box-shadow: none !important;
}
}

/* ========================================
======================================== */

.page-title {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
color: #1f2937;
}

.delete-competition-section {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border: 2px solid #fca5a5;
border-radius: 12px;
padding: 2rem;
margin: 2rem 0;
}

.delete-competition-warning {
background: #dc2626;
color: white;
padding: 1rem 1.5rem;
border-radius: 8px;
font-weight: 500;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}

.delete-competition-form {
background: white;
padding: 2rem;
border-radius: 8px;
border: 1px solid #e5e7eb;
}

.confirmation-input {
width: 100%;
padding: 0.75rem 1rem;
border: 2px solid #d1d5db;
border-radius: 6px;
font-size: 1rem;
margin: 1rem 0;
transition: border-color 0.3s ease;
}

.confirmation-input:focus {
outline: none;
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.delete-btn-danger {
background: linear-gradient(135deg, #dc2626, #b91c1c);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}

.delete-btn-danger:hover {
background: linear-gradient(135deg, #b91c1c, #991b1b);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.delete-btn-danger:disabled {
background: #9ca3af;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

.deletion-impact {
background: #fef3c7;
border: 1px solid #fbbf24;
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
}

.impact-list {
list-style: none;
padding: 0;
margin: 1rem 0;
}

.impact-list li {
padding: 0.5rem 0;
border-bottom: 1px solid rgba(251, 191, 36, 0.3);
display: flex;
align-items: center;
gap: 0.75rem;
}

.impact-list li:last-child {
border-bottom: none;
}

.form-label-nl {
font-weight: 500;
color: #374151;
margin-bottom: 0.5rem;
display: block;
}

.flash-message-nl {
padding: 1rem 1.5rem;
border-radius: 8px;
margin: 1rem 0;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.75rem;
}

.flash-success-nl {
background: #d1fae5;
color: #065f46;
border: 1px solid #a7f3d0;
}

.flash-error-nl {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}

.flash-warning-nl {
background: #fef3c7;
color: #92400e;
border: 1px solid #fde68a;
}

@media (max-width: 768px) {
.delete-competition-section {
padding: 1.5rem;
margin: 1rem 0;
}

.delete-competition-form {
padding: 1.5rem;
}

.confirmation-input {
}
}

@media (prefers-color-scheme: dark) {
.page-title {
color: #f9fafb;
}

.form-label-nl {
color: #d1d5db;
}
}

.extracted-0 {
display: none;

}

.extracted-1 {
display: inline;

}

.extracted-2 {
display: inline;

}

.extracted-3 {
display: inline;

}

.extracted-4 {
display: inline-flex;
gap: 10px;
align-items: center;

}

.extracted-5 {
width: 80px;

}

.page-header {
text-align: center;
margin-bottom: 2rem;
padding: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 12px;
}

.page-header h1 {
margin: 0 0 0.5rem 0;
font-size: 2.5rem;
}

.card {
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 8px;
}

.table-warning {
background-color: rgba(255, 193, 7, 0.1);
}

.btn-lg {
font-size: 1.2rem;
padding: 0.75rem 2rem;
}

.extracted-7 {
display: inline;

}

.page-header {
text-align: center;
margin-bottom: 2rem;
padding: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: 12px;
}

.page-header h1 {
margin: 0 0 0.5rem 0;
font-size: 2.5rem;
}

.card {
border: none;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
border-radius: 8px;
margin-bottom: 1rem;
}

.table-warning {
background-color: rgba(255, 193, 7, 0.1);
}

.btn-lg {
font-size: 1.2rem;
padding: 0.75rem 2rem;
}

.alert {
border-radius: 8px;
}

.alert h5 {
margin-bottom: 0.75rem;
font-weight: 600;
}

.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }
.text-primary { color: #007bff !important; }
.text-info { color: #17a2b8 !important; }

.extracted-9 {
display: inline;

}

.extracted-10 {
display: inline;

}

.extracted-11 {
width: {{ usage_percentage }}%
}

.extracted-12 {
display: inline;

}

.extracted-13 {
display: inline;

}

.extracted-14 {
display: inline;

}

.extracted-15 {
display: none;

}

.extracted-16 {
display: inline;

}

.extracted-17 {
display: inline;

}

.extracted-18 {
display: none;

}

.extracted-19 {
display: none;

}

.extracted-20 {
display: inline;

}

.delete-page-container {
max-width: 800px;
margin: 2rem auto;
padding: 0 1rem;
}

.danger-zone {
background: linear-gradient(135deg, #fef2f2, #fee2e2);
border: 2px solid #f87171;
border-radius: 16px;
padding: 2rem;
margin: 2rem 0;
}

.impact-preview {
background: white;
border-radius: 12px;
padding: 1.5rem;
margin: 1.5rem 0;
border: 1px solid #e5e7eb;
}

.extracted-22 {
margin-top: 2rem;

}

.extracted-23 {
text-align: center;
margin: 2rem 0;

}

.error-container {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}

.error-content {
text-align: center;
max-width: 500px;
background: white;
border-radius: 12px;
padding: 3rem 2rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.error-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
}

.error-title {
color: #2c3e50;
margin-bottom: 1.5rem;
font-size: 1.75rem;
font-weight: 600;
}

.error-description {
color: #6c757d;
margin-bottom: 2rem;
line-height: 1.6;
}

.error-description p {
margin-bottom: 0.75rem;
}

.error-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}

@media (max-width: 768px) {
.error-content {
padding: 2rem 1.5rem;
}

.error-actions {
flex-direction: column;
align-items: center;
}

.error-actions .btn {
width: 100%;
max-width: 200px;
}
}

.extracted-25 {
display: inline;

}

.extracted-26 {
opacity: 0.8
}

.reactivation-container {
min-height: 100vh;
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 2rem 0;
}

.reactivation-header {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0,0,0,0.07);
}

.reactivation-icon {
font-size: 4rem;
color: #059669;
}

.icon-container {
background: #ecfdf5;
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}

.reactivation-benefits {
background: #f0fdf4;
padding: 1rem;
border-radius: 8px;
border-left: 4px solid #22c55e;
}

#reactivateBtn:disabled {
opacity: 0.6;
cursor: not-allowed;
}

.extracted-28 {
opacity: 0.6
}

.extracted-29 {
display: none;

}

.extracted-30 {
display: none;

}

.extracted-31 {
width: {{ completion_percentage }}%
}

.extracted-32 {
display: inline;

}

.extracted-33 {
display: inline;

}

.extracted-34 {
display: flex;
gap: 30px;
flex-wrap: wrap;
align-items: center;

}

.extracted-35 {
display: flex;
align-items: center;
gap: 10px;

}

.extracted-36 {
display: flex;
align-items: center;
gap: 10px;

}

.extracted-37 {
display: flex;
align-items: center;
gap: 10px;

}

.extracted-38 {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;

}

.extracted-39 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;

}

.extracted-40 {
width: {{ progress }}%
}

.extracted-41 {
width: {{ stats.completion_percentage }}%
}

.extracted-42 {
display: inline;

}

.extracted-43 {
width: {{ schedule_info.completion_percentage }}%
}

.extracted-44 {
width: {{ poule.completion_percentage }}%
}

.extracted-45 {
display: inline;

}

.extracted-46 {
--delay: 1
}

.extracted-47 {
--delay: 2
}

.extracted-48 {
--delay: 3
}

.extracted-49 {
--delay: 4
}


/* ========================================
   NEDERLANDSE WEBSITE VERBETERINGEN
   Toegevoegd op: 2025-08-20 09:32:08
======================================== */

/* Verbeterde Nederlandse interface */
.page-title-nl {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
}

/* Nederlandse form styling */
.form-label-nl {
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
    display: block;
}

.form-input-nl {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-input-nl:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Nederlandse berichten styling */
.bericht-succes {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bericht-fout {
    background: linear-gradient(135deg, #fef2f2, #fecaca);
    color: #991b1b;
    border: 1px solid #f87171;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bericht-waarschuwing {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Competitie kaarten verbetering */
.competitie-kaart {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.competitie-kaart:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.competitie-titel {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.competitie-info {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* Knop styling Nederlandse stijl */
.knop-primair {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.knop-primair:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    color: white;
    text-decoration: none;
}

.knop-gevaar {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.knop-gevaar:hover {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.knop-secundair {
    background: #f8fafc;
    color: #475569;
    border: 2px solid #e2e8f0;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.knop-secundair:hover {
    background: #e2e8f0;
    color: #334155;
    text-decoration: none;
}

/* Responsive verbeteringen */
@media (max-width: 768px) {
    .competitie-kaart {
        padding: 1rem;
        margin: 0.5rem 0;
    }
    
    .knop-primair, .knop-gevaar, .knop-secundair {
        width: 100%;
        text-align: center;
        margin: 0.25rem 0;
    }
    
    .form-input-nl {
        font-size: 16px; /* Voorkomt zoom op iOS */
    }
}

/* Dark mode ondersteuning */
@media (prefers-color-scheme: dark) {
    .page-title-nl {
        color: #f9fafb;
    }
    
    .form-label-nl {
        color: #d1d5db;
    }
    
    .competitie-kaart {
        background: #374151;
        border-color: #4b5563;
    }
    
    .competitie-titel {
        color: #f9fafb;
    }
    
    .competitie-info {
        color: #9ca3af;
    }
}

/* Focus verbeteringen voor toegankelijkheid */
.knop-primair:focus,
.knop-gevaar:focus,
.knop-secundair:focus,
.form-input-nl:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Print styling */
@media print {
    .knop-primair, .knop-gevaar, .knop-secundair {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
    
    .competitie-kaart {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
}

/* ========================================
   NEDERLANDSE WEBSITE STYLING - FIXED
   Bijgewerkt door website_fixes_script.py
======================================== */

/* Nederlandse error berichten */
.bericht-succes {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bericht-fout {
    background: linear-gradient(135deg, #fef2f2, #fecaca);
    color: #991b1b;
    border: 1px solid #f87171;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.bericht-waarschuwing {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Nederlandse knoppen */
.knop-nederland {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.knop-primair {
    background: #3b82f6;
    color: white;
}

.knop-primair:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.knop-secundair {
    background: #6b7280;
    color: white;
}

.knop-secundair:hover {
    background: #4b5563;
}

.knop-gevaar {
    background: #dc2626;
    color: white;
}

.knop-gevaar:hover {
    background: #b91c1c;
}

/* Gebruiker beheer styling */
.gebruiker-acties {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.gebruiker-kaart {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 1rem;
    margin: 0.5rem 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.actieve-gebruiker {
    border-left: 4px solid #22c55e;
}

.inactieve-gebruiker {
    border-left: 4px solid #f59e0b;
    background: #fefcf0;
}

/* Fix voor button styling */
.btn-danger-large {
    background: #dc2626;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-danger-large:hover:not(:disabled) {
    background: #b91c1c;
    transform: translateY(-1px);
}

.btn-danger-large:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Responsive verbeteringen */
@media (max-width: 768px) {
    .gebruiker-acties {
        flex-direction: column;
    }
    
    .knop-nederland {
        width: 100%;
        text-align: center;
    }
}

/* ========================================
   VERBETERDE BUTTON STYLING - CONSISTENT
   Gerepareerd door button_color_fix.py
======================================== */

/* Nederlandse button basis styling */
.knop-nederland {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.2;
}

/* Primaire button - Blauw */
.knop-primair {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: 1px solid #2563eb;
}

.knop-primair:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
    color: white !important;
}

/* Secundaire button - Grijs */
.knop-secundair {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: 1px solid #4b5563;
}

.knop-secundair:hover {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
    color: white !important;
}

/* Succesvol button - Groen */
.knop-succes {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: 1px solid #059669;
}

.knop-succes:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    color: white !important;
}

/* Gevaar button - Rood */
.knop-gevaar {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    border: 1px solid #b91c1c;
}

.knop-gevaar:hover:not(:disabled) {
    background: linear-gradient(135deg, #b91c1c, #991b1b) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    color: white !important;
}

.knop-gevaar:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    color: white !important;
}

/* Specifieke regel voor submit-button */
#submit-button:disabled {
    color: white !important;
}

/* Waarschuwing button - Oranje */
.knop-waarschuwing {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    border: 1px solid #d97706;
}

.knop-waarschuwing:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    color: white !important;
}

/* Focus states voor toegankelijkheid */
.knop-nederland:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Responsive styling */
@media (max-width: 768px) {
    .knop-nederland {
        width: 100%;
        text-align: center;
        margin: 0.25rem 0;
    }
}

/* Print styling */
@media print {
    .knop-nederland {
        background: transparent !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
}

/* Override old definitions */
.knop-primair.knop-nederland {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
}

.knop-secundair.knop-nederland {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
}

.knop-succes.knop-nederland {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

/* ========================================
   NIET BESCHIKBARE DAGEN STYLING FIX
   Gerepareerd door fix_unavailable_days_colors.py
======================================== */

/* Verbeterde styling voor datum input groepen */
.date-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.date-input-group:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Datum input veld styling */
.date-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    transition: all 0.2s ease;
    color: #374151;
    font-weight: 500;
}

.date-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fefefe;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-input:hover {
    border-color: #9ca3af;
}

/* Container voor alle datum inputs */
.unavailable-dates-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #fafbff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* Datum acties knoppen */
.date-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Verbeterde knop styling voor datum acties */
.date-actions .btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.date-actions .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.date-actions .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.date-actions .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: scale(1.05);
}

/* Extra styling voor datum lijst in player_unavailability.html */
.date-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.date-month {
    background: linear-gradient(135deg, #fefefe, #f8fafc);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.date-month h4 {
    color: #1f2937;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-month h4:before {
    content: "📅";
    font-size: 1.5rem;
}

.date-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.date-item:hover {
    border-color: #3b82f6;
    background: #f8faff;
    transform: translateX(4px);
}

.date-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.date-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    flex: 1;
}

.date-day {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1f2937;
    min-width: 40px;
    text-align: center;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.date-weekday {
    font-weight: 600;
    color: #4b5563;
    min-width: 100px;
}

/* Actie knoppen voor niet beschikbare dagen */
.action-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.action-buttons .btn {
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
}

.action-buttons .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.action-buttons .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.action-buttons .btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
}

.action-buttons .btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(107, 114, 128, 0.3);
}

/* Responsive verbeteringen */
@media (max-width: 768px) {
    .date-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .date-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .date-day {
        align-self: flex-start;
    }
}

/* Toegankelijkheid verbeteringen */
@media (prefers-reduced-motion: reduce) {
    .date-input-group,
    .date-item,
    .action-buttons .btn {
        transition: none;
    }
    
    .date-input-group:hover,
    .action-buttons .btn:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .date-input-group {
        border-width: 3px;
    }
    
    .date-input {
        border-width: 3px;
    }
    
    .date-item {
        border-width: 3px;
    }
}

/* Dark mode ondersteuning */
@media (prefers-color-scheme: dark) {
    .unavailable-dates-container {
        background: #1f2937;
        border-color: #374151;
    }
    
    .date-input-group {
        background: linear-gradient(135deg, #374151, #4b5563);
        border-color: #6b7280;
    }
    
    .date-input {
        background: #1f2937;
        border-color: #6b7280;
        color: #f9fafb;
    }
    
    .date-month {
        background: linear-gradient(135deg, #1f2937, #374151);
        border-color: #4b5563;
    }
    
    .date-month h4 {
        color: #f9fafb;
        border-color: #4b5563;
    }
    
    .date-item {
        background: #374151;
        border-color: #4b5563;
    }
    
    .date-item:hover {
        background: #4b5563;
    }
    
    .date-weekday {
        color: #d1d5db;
    }
}

/* ======================================== */

/* ========================================
   BUTTON EN DATUM KLEUREN FIX
   Gerepareerd door fix_unavailable_days_colors.py
======================================== */

/* ======================================== 
   BUTTON KLEUREN REPARATIE - HOGE PRIORITEIT
======================================== */

/* Alle buttons krijgen duidelijke kleuren en leesbare tekst */
.btn, a.btn, button.btn, input[type="submit"].btn, input[type="button"].btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    user-select: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Primary buttons (blauw) */
.btn-primary, a.btn-primary, button.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: 2px solid #2563eb !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Success buttons (groen) */
.btn-success, a.btn-success, button.btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: 2px solid #059669 !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Danger buttons (rood) */
.btn-danger, a.btn-danger, button.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: 2px solid #dc2626 !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Warning buttons (oranje/geel) */
.btn-warning, a.btn-warning, button.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    border: 2px solid #d97706 !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Secondary buttons (grijs) */
.btn-secondary, a.btn-secondary, button.btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: 2px solid #4b5563 !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important;
}

/* Info buttons (lichtblauw) */
.btn-info, a.btn-info, button.btn-info {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: white !important;
    border: 2px solid #0891b2 !important;
}

.btn-info:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}

/* Small buttons */
.btn-sm, a.btn-sm, button.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* Extra small buttons */
.btn-xs, a.btn-xs, button.btn-xs {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Large buttons */
.btn-lg, a.btn-lg, button.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
}

/* Quick action buttons styling */
.quick-actions .btn {
    min-width: 140px !important;
    justify-content: center !important;
}

/* Disabled button styling */
.btn:disabled, .btn.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.btn:disabled:hover, .btn.disabled:hover {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Focus states voor toegankelijkheid */
.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Active states */
.btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Speciale Nederlandse button klassen */
.knop-primair {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-primair:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.knop-gevaar {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-gevaar:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.knop-secundair {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-secundair:hover {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

/* ======================================== 
   DATUM STYLING VERBETERINGEN
======================================== */

/* Verbeterde styling voor datum input groepen */
.date-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.date-input-group:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Datum input veld styling */
.date-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    transition: all 0.2s ease;
    color: #374151;
    font-weight: 500;
}

.date-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fefefe;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-input:hover {
    border-color: #9ca3af;
}

/* Container voor alle datum inputs */
.unavailable-dates-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #fafbff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* Datum acties knoppen */
.date-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Verbeterde knop styling voor datum acties */
.date-actions .btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.date-actions .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.date-actions .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.date-actions .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: scale(1.05);
}

/* Extra styling voor datum lijst in player_unavailability.html */
.date-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.date-month {
    background: linear-gradient(135deg, #fefefe, #f8fafc);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.date-month h4 {
    color: #1f2937;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-month h4:before {
    content: "📅";
    font-size: 1.5rem;
}

.date-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.date-item:hover {
    border-color: #3b82f6;
    background: #f8faff;
    transform: translateX(4px);
}

.date-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.date-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    flex: 1;
}

.date-day {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1f2937;
    min-width: 40px;
    text-align: center;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.date-weekday {
    font-weight: 600;
    color: #4b5563;
    min-width: 100px;
}

/* Actie knoppen voor niet beschikbare dagen */
.action-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.action-buttons .btn {
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
}

.action-buttons .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.action-buttons .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.action-buttons .btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
}

.action-buttons .btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(107, 114, 128, 0.3);
}

/* Responsive verbeteringen */
@media (max-width: 768px) {
    .date-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .date-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .date-day {
        align-self: flex-start;
    }
}

/* Toegankelijkheid verbeteringen */
@media (prefers-reduced-motion: reduce) {
    .date-input-group,
    .date-item,
    .action-buttons .btn {
        transition: none;
    }
    
    .date-input-group:hover,
    .action-buttons .btn:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .date-input-group {
        border-width: 3px;
    }
    
    .date-input {
        border-width: 3px;
    }
    
    .date-item {
        border-width: 3px;
    }
}

/* Dark mode ondersteuning */
@media (prefers-color-scheme: dark) {
    .unavailable-dates-container {
        background: #1f2937;
        border-color: #374151;
    }
    
    .date-input-group {
        background: linear-gradient(135deg, #374151, #4b5563);
        border-color: #6b7280;
    }
    
    .date-input {
        background: #1f2937;
        border-color: #6b7280;
        color: #f9fafb;
    }
    
    .date-month {
        background: linear-gradient(135deg, #1f2937, #374151);
        border-color: #4b5563;
    }
    
    .date-month h4 {
        color: #f9fafb;
        border-color: #4b5563;
    }
    
    .date-item {
        background: #374151;
        border-color: #4b5563;
    }
    
    .date-item:hover {
        background: #4b5563;
    }
    
    .date-weekday {
        color: #d1d5db;
    }
}

/* ======================================== */

/* ========================================
   BUTTON EN DATUM KLEUREN FIX
   Gerepareerd door fix_unavailable_days_colors.py
======================================== */

/* ======================================== 
   BUTTON KLEUREN REPARATIE - HOGE PRIORITEIT
======================================== */

/* Alle buttons krijgen duidelijke kleuren en leesbare tekst */
.btn, a.btn, button.btn, input[type="submit"].btn, input[type="button"].btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    user-select: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Primary buttons (blauw) */
.btn-primary, a.btn-primary, button.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: 2px solid #2563eb !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Success buttons (groen) */
.btn-success, a.btn-success, button.btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: 2px solid #059669 !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Danger buttons (rood) */
.btn-danger, a.btn-danger, button.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: 2px solid #dc2626 !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Warning buttons (oranje/geel) */
.btn-warning, a.btn-warning, button.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    border: 2px solid #d97706 !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Secondary buttons (grijs) */
.btn-secondary, a.btn-secondary, button.btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: 2px solid #4b5563 !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important;
}

/* Info buttons (lichtblauw) */
.btn-info, a.btn-info, button.btn-info {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: white !important;
    border: 2px solid #0891b2 !important;
}

.btn-info:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}

/* Small buttons */
.btn-sm, a.btn-sm, button.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* Extra small buttons */
.btn-xs, a.btn-xs, button.btn-xs {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Large buttons */
.btn-lg, a.btn-lg, button.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
}

/* Quick action buttons styling */
.quick-actions .btn {
    min-width: 140px !important;
    justify-content: center !important;
}

/* Disabled button styling */
.btn:disabled, .btn.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.btn:disabled:hover, .btn.disabled:hover {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Focus states voor toegankelijkheid */
.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Active states */
.btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Speciale Nederlandse button klassen */
.knop-primair {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-primair:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.knop-gevaar {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-gevaar:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.knop-secundair {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-secundair:hover {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

/* ======================================== 
   DATUM STYLING VERBETERINGEN
======================================== */

/* Verbeterde styling voor datum input groepen */
.date-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.date-input-group:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Datum input veld styling */
.date-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    transition: all 0.2s ease;
    color: #374151;
    font-weight: 500;
}

.date-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fefefe;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-input:hover {
    border-color: #9ca3af;
}

/* Container voor alle datum inputs */
.unavailable-dates-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #fafbff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* Datum acties knoppen */
.date-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Verbeterde knop styling voor datum acties */
.date-actions .btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.date-actions .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.date-actions .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.date-actions .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: scale(1.05);
}

/* Extra styling voor datum lijst in player_unavailability.html */
.date-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.date-month {
    background: linear-gradient(135deg, #fefefe, #f8fafc);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.date-month h4 {
    color: #1f2937;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-month h4:before {
    content: "📅";
    font-size: 1.5rem;
}

.date-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.date-item:hover {
    border-color: #3b82f6;
    background: #f8faff;
    transform: translateX(4px);
}

.date-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.date-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    flex: 1;
}

.date-day {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1f2937;
    min-width: 40px;
    text-align: center;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.date-weekday {
    font-weight: 600;
    color: #4b5563;
    min-width: 100px;
}

/* Actie knoppen voor niet beschikbare dagen */
.action-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.action-buttons .btn {
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
}

.action-buttons .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.action-buttons .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.action-buttons .btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
}

.action-buttons .btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(107, 114, 128, 0.3);
}

/* Responsive verbeteringen */
@media (max-width: 768px) {
    .date-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .date-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .date-day {
        align-self: flex-start;
    }
}

/* Toegankelijkheid verbeteringen */
@media (prefers-reduced-motion: reduce) {
    .date-input-group,
    .date-item,
    .action-buttons .btn {
        transition: none;
    }
    
    .date-input-group:hover,
    .action-buttons .btn:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .date-input-group {
        border-width: 3px;
    }
    
    .date-input {
        border-width: 3px;
    }
    
    .date-item {
        border-width: 3px;
    }
}

/* Dark mode ondersteuning */
@media (prefers-color-scheme: dark) {
    .unavailable-dates-container {
        background: #1f2937;
        border-color: #374151;
    }
    
    .date-input-group {
        background: linear-gradient(135deg, #374151, #4b5563);
        border-color: #6b7280;
    }
    
    .date-input {
        background: #1f2937;
        border-color: #6b7280;
        color: #f9fafb;
    }
    
    .date-month {
        background: linear-gradient(135deg, #1f2937, #374151);
        border-color: #4b5563;
    }
    
    .date-month h4 {
        color: #f9fafb;
        border-color: #4b5563;
    }
    
    .date-item {
        background: #374151;
        border-color: #4b5563;
    }
    
    .date-item:hover {
        background: #4b5563;
    }
    
    .date-weekday {
        color: #d1d5db;
    }
}

/* ======================================== */

/* ========================================
   BUTTON EN DATUM KLEUREN FIX
   Gerepareerd door fix_unavailable_days_colors.py
======================================== */

/* ======================================== 
   BUTTON KLEUREN REPARATIE - HOGE PRIORITEIT
======================================== */

/* Alle buttons krijgen duidelijke kleuren en leesbare tekst */
.btn, a.btn, button.btn, input[type="submit"].btn, input[type="button"].btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    user-select: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Primary buttons (blauw) */
.btn-primary, a.btn-primary, button.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: 2px solid #2563eb !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Success buttons (groen) */
.btn-success, a.btn-success, button.btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: 2px solid #059669 !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Danger buttons (rood) */
.btn-danger, a.btn-danger, button.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: 2px solid #dc2626 !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Warning buttons (oranje/geel) */
.btn-warning, a.btn-warning, button.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    border: 2px solid #d97706 !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Secondary buttons (grijs) */
.btn-secondary, a.btn-secondary, button.btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: 2px solid #4b5563 !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important;
}

/* Info buttons (lichtblauw) */
.btn-info, a.btn-info, button.btn-info {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: white !important;
    border: 2px solid #0891b2 !important;
}

.btn-info:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}

/* Small buttons */
.btn-sm, a.btn-sm, button.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* Extra small buttons */
.btn-xs, a.btn-xs, button.btn-xs {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Large buttons */
.btn-lg, a.btn-lg, button.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
}

/* Quick action buttons styling */
.quick-actions .btn {
    min-width: 140px !important;
    justify-content: center !important;
}

/* Disabled button styling */
.btn:disabled, .btn.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.btn:disabled:hover, .btn.disabled:hover {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Focus states voor toegankelijkheid */
.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Active states */
.btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Speciale Nederlandse button klassen */
.knop-primair {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-primair:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.knop-gevaar {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-gevaar:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.knop-secundair {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Outline buttons (deze hebben grijs tekst op blauwe achtergrond probleem) */
.btn-outline, a.btn-outline, button.btn-outline {
    background: transparent !important;
    color: #3b82f6 !important;
    border: 2px solid #3b82f6 !important;
    font-weight: 600 !important;
}

.btn-outline:hover {
    background: #3b82f6 !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Quick actions buttons fix - deze hadden grijs tekst probleem */
.quick-actions .btn {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0) !important;
    color: #374151 !important;
    border: 2px solid #d1d5db !important;
    font-weight: 600 !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
}

.quick-actions .btn:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border-color: #2563eb !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Specifieke fix voor outline buttons in quick-actions */
.quick-actions .btn-outline {
    background: transparent !important;
    color: #3b82f6 !important;
    border: 2px solid #3b82f6 !important;
}

.quick-actions .btn-outline:hover {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
}

/* Form actions buttons - zorg voor goede contrasten */
.form-actions .btn {
    font-weight: 600 !important;
    min-width: 140px !important;
}

.form-actions .btn-outline {
    background: white !important;
    color: #3b82f6 !important;
    border: 2px solid #3b82f6 !important;
}

.form-actions .btn-outline:hover {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
}

/* ======================================== 
   DATUM STYLING VERBETERINGEN
======================================== */

/* Verbeterde styling voor datum input groepen */
.date-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.date-input-group:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Datum input veld styling */
.date-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    transition: all 0.2s ease;
    color: #374151;
    font-weight: 500;
}

.date-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fefefe;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-input:hover {
    border-color: #9ca3af;
}

/* Container voor alle datum inputs */
.unavailable-dates-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #fafbff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* Datum acties knoppen */
.date-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Verbeterde knop styling voor datum acties */
.date-actions .btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.date-actions .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.date-actions .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.date-actions .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: scale(1.05);
}

/* Extra styling voor datum lijst in player_unavailability.html */
.date-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.date-month {
    background: linear-gradient(135deg, #fefefe, #f8fafc);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.date-month h4 {
    color: #1f2937;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-month h4:before {
    content: "📅";
    font-size: 1.5rem;
}

.date-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.date-item:hover {
    border-color: #3b82f6;
    background: #f8faff;
    transform: translateX(4px);
}

.date-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.date-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    flex: 1;
}

.date-day {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1f2937;
    min-width: 40px;
    text-align: center;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.date-weekday {
    font-weight: 600;
    color: #4b5563;
    min-width: 100px;
}

/* Actie knoppen voor niet beschikbare dagen */
.action-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.action-buttons .btn {
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
}

.action-buttons .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.action-buttons .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.action-buttons .btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
}

.action-buttons .btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(107, 114, 128, 0.3);
}

/* Responsive verbeteringen */
@media (max-width: 768px) {
    .date-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .date-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .date-day {
        align-self: flex-start;
    }
}

/* Toegankelijkheid verbeteringen */
@media (prefers-reduced-motion: reduce) {
    .date-input-group,
    .date-item,
    .action-buttons .btn {
        transition: none;
    }
    
    .date-input-group:hover,
    .action-buttons .btn:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .date-input-group {
        border-width: 3px;
    }
    
    .date-input {
        border-width: 3px;
    }
    
    .date-item {
        border-width: 3px;
    }
}

/* Dark mode ondersteuning */
@media (prefers-color-scheme: dark) {
    .unavailable-dates-container {
        background: #1f2937;
        border-color: #374151;
    }
    
    .date-input-group {
        background: linear-gradient(135deg, #374151, #4b5563);
        border-color: #6b7280;
    }
    
    .date-input {
        background: #1f2937;
        border-color: #6b7280;
        color: #f9fafb;
    }
    
    .date-month {
        background: linear-gradient(135deg, #1f2937, #374151);
        border-color: #4b5563;
    }
    
    .date-month h4 {
        color: #f9fafb;
        border-color: #4b5563;
    }
    
    .date-item {
        background: #374151;
        border-color: #4b5563;
    }
    
    .date-item:hover {
        background: #4b5563;
    }
    
    .date-weekday {
        color: #d1d5db;
    }
}

/* ======================================== */

/* ========================================
   BUTTON EN DATUM KLEUREN FIX
   Gerepareerd door fix_unavailable_days_colors.py
======================================== */

/* ======================================== 
   BUTTON KLEUREN REPARATIE - HOGE PRIORITEIT
======================================== */

/* Alle buttons krijgen duidelijke kleuren en leesbare tekst */
.btn, a.btn, button.btn, input[type="submit"].btn, input[type="button"].btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    user-select: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Primary buttons (blauw) */
.btn-primary, a.btn-primary, button.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: 2px solid #2563eb !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Success buttons (groen) */
.btn-success, a.btn-success, button.btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: 2px solid #059669 !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Danger buttons (rood) */
.btn-danger, a.btn-danger, button.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: 2px solid #dc2626 !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Warning buttons (oranje/geel) */
.btn-warning, a.btn-warning, button.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    border: 2px solid #d97706 !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Secondary buttons (grijs) */
.btn-secondary, a.btn-secondary, button.btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: 2px solid #4b5563 !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important;
}

/* Info buttons (lichtblauw) */
.btn-info, a.btn-info, button.btn-info {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: white !important;
    border: 2px solid #0891b2 !important;
}

.btn-info:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}

/* Small buttons */
.btn-sm, a.btn-sm, button.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* Extra small buttons */
.btn-xs, a.btn-xs, button.btn-xs {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Large buttons */
.btn-lg, a.btn-lg, button.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
}

/* Quick action buttons styling */
.quick-actions .btn {
    min-width: 140px !important;
    justify-content: center !important;
}

/* Disabled button styling */
.btn:disabled, .btn.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.btn:disabled:hover, .btn.disabled:hover {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Focus states voor toegankelijkheid */
.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Active states */
.btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Speciale Nederlandse button klassen */
.knop-primair {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-primair:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.knop-gevaar {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-gevaar:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.knop-secundair {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Outline buttons (deze hebben grijs tekst op blauwe achtergrond probleem) */
.btn-outline, a.btn-outline, button.btn-outline {
    background: transparent !important;
    color: #3b82f6 !important;
    border: 2px solid #3b82f6 !important;
    font-weight: 600 !important;
}

.btn-outline:hover {
    background: #3b82f6 !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Quick actions buttons fix - deze hadden grijs tekst probleem */
.quick-actions .btn {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0) !important;
    color: #374151 !important;
    border: 2px solid #d1d5db !important;
    font-weight: 600 !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
}

.quick-actions .btn:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border-color: #2563eb !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Specifieke fix voor outline buttons in quick-actions */
.quick-actions .btn-outline {
    background: transparent !important;
    color: #3b82f6 !important;
    border: 2px solid #3b82f6 !important;
}

.quick-actions .btn-outline:hover {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
}

/* Speciale fix voor date-input-group buttons - deze worden soms dynamisch gemaakt */
.date-input-group .btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: all 0.3s ease !important;
    min-width: auto !important;
}

.date-input-group .btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

.date-input-group .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
}

.date-input-group .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
}

/* Fix voor unavailable-dates-container buttons */
.unavailable-dates-container .btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
}

.unavailable-dates-container .btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
}

.unavailable-dates-container .btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

.unavailable-dates-container .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
}

/* Fix voor alle buttons in unavailable-dates-section */
.unavailable-dates-section .btn {
    font-weight: 600 !important;
    border: none !important;
    color: white !important;
}

.unavailable-dates-section .btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

.unavailable-dates-section .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.unavailable-dates-section .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}

.unavailable-dates-section .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

/* ======================================== 
   DATUM STYLING VERBETERINGEN
======================================== */

/* Verbeterde styling voor datum input groepen */
.date-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.date-input-group:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Datum input veld styling */
.date-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    transition: all 0.2s ease;
    color: #374151;
    font-weight: 500;
}

.date-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fefefe;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-input:hover {
    border-color: #9ca3af;
}

/* Container voor alle datum inputs */
.unavailable-dates-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #fafbff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* Datum acties knoppen */
.date-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Verbeterde knop styling voor datum acties */
.date-actions .btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.date-actions .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.date-actions .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.date-actions .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: scale(1.05);
}

/* Extra styling voor datum lijst in player_unavailability.html */
.date-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.date-month {
    background: linear-gradient(135deg, #fefefe, #f8fafc);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.date-month h4 {
    color: #1f2937;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-month h4:before {
    content: "📅";
    font-size: 1.5rem;
}

.date-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.date-item:hover {
    border-color: #3b82f6;
    background: #f8faff;
    transform: translateX(4px);
}

.date-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.date-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    flex: 1;
}

.date-day {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1f2937;
    min-width: 40px;
    text-align: center;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.date-weekday {
    font-weight: 600;
    color: #4b5563;
    min-width: 100px;
}

/* Actie knoppen voor niet beschikbare dagen */
.action-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.action-buttons .btn {
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
}

.action-buttons .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.action-buttons .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.action-buttons .btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
}

.action-buttons .btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(107, 114, 128, 0.3);
}

/* Responsive verbeteringen */
@media (max-width: 768px) {
    .date-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .date-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .date-day {
        align-self: flex-start;
    }
}

/* Toegankelijkheid verbeteringen */
@media (prefers-reduced-motion: reduce) {
    .date-input-group,
    .date-item,
    .action-buttons .btn {
        transition: none;
    }
    
    .date-input-group:hover,
    .action-buttons .btn:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .date-input-group {
        border-width: 3px;
    }
    
    .date-input {
        border-width: 3px;
    }
    
    .date-item {
        border-width: 3px;
    }
}

/* Dark mode ondersteuning */
@media (prefers-color-scheme: dark) {
    .unavailable-dates-container {
        background: #1f2937;
        border-color: #374151;
    }
    
    .date-input-group {
        background: linear-gradient(135deg, #374151, #4b5563);
        border-color: #6b7280;
    }
    
    .date-input {
        background: #1f2937;
        border-color: #6b7280;
        color: #f9fafb;
    }
    
    .date-month {
        background: linear-gradient(135deg, #1f2937, #374151);
        border-color: #4b5563;
    }
    
    .date-month h4 {
        color: #f9fafb;
        border-color: #4b5563;
    }
    
    .date-item {
        background: #374151;
        border-color: #4b5563;
    }
    
    .date-item:hover {
        background: #4b5563;
    }
    
    .date-weekday {
        color: #d1d5db;
    }
}

/* ======================================== */

/* ========================================
   BUTTON EN DATUM KLEUREN FIX
   Gerepareerd door fix_unavailable_days_colors.py
======================================== */

/* ======================================== 
   BUTTON KLEUREN REPARATIE - HOGE PRIORITEIT
======================================== */

/* Alle buttons krijgen duidelijke kleuren en leesbare tekst */
.btn, a.btn, button.btn, input[type="submit"].btn, input[type="button"].btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    user-select: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Primary buttons (blauw) */
.btn-primary, a.btn-primary, button.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: 2px solid #2563eb !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Success buttons (groen) */
.btn-success, a.btn-success, button.btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: 2px solid #059669 !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Danger buttons (rood) */
.btn-danger, a.btn-danger, button.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: 2px solid #dc2626 !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Warning buttons (oranje/geel) */
.btn-warning, a.btn-warning, button.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    border: 2px solid #d97706 !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Secondary buttons (grijs) */
.btn-secondary, a.btn-secondary, button.btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: 2px solid #4b5563 !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important;
}

/* Info buttons (lichtblauw) */
.btn-info, a.btn-info, button.btn-info {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: white !important;
    border: 2px solid #0891b2 !important;
}

.btn-info:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}

/* Small buttons */
.btn-sm, a.btn-sm, button.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* Extra small buttons */
.btn-xs, a.btn-xs, button.btn-xs {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Large buttons */
.btn-lg, a.btn-lg, button.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
}

/* Quick action buttons styling */
.quick-actions .btn {
    min-width: 140px !important;
    justify-content: center !important;
}

/* Disabled button styling */
.btn:disabled, .btn.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.btn:disabled:hover, .btn.disabled:hover {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Focus states voor toegankelijkheid */
.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Active states */
.btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Speciale Nederlandse button klassen */
.knop-primair {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-primair:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.knop-gevaar {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-gevaar:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.knop-secundair {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Outline buttons (deze hebben grijs tekst op blauwe achtergrond probleem) */
.btn-outline, a.btn-outline, button.btn-outline {
    background: transparent !important;
    color: #3b82f6 !important;
    border: 2px solid #3b82f6 !important;
    font-weight: 600 !important;
}

.btn-outline:hover {
    background: #3b82f6 !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Quick actions buttons fix - deze hadden grijs tekst probleem */
.quick-actions .btn {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0) !important;
    color: #374151 !important;
    border: 2px solid #d1d5db !important;
    font-weight: 600 !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
}

.quick-actions .btn:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border-color: #2563eb !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Specifieke fix voor outline buttons in quick-actions */
.quick-actions .btn-outline {
    background: transparent !important;
    color: #3b82f6 !important;
    border: 2px solid #3b82f6 !important;
}

.quick-actions .btn-outline:hover {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
}

/* Speciale fix voor date-input-group buttons - deze worden soms dynamisch gemaakt */
.date-input-group .btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: all 0.3s ease !important;
    min-width: auto !important;
}

.date-input-group .btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

.date-input-group .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
}

.date-input-group .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
}

/* Fix voor unavailable-dates-container buttons */
.unavailable-dates-container .btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
}

.unavailable-dates-container .btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
}

.unavailable-dates-container .btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

.unavailable-dates-container .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
}

/* Fix voor alle buttons in unavailable-dates-section */
.unavailable-dates-section .btn {
    font-weight: 600 !important;
    border: none !important;
    color: white !important;
}

.unavailable-dates-section .btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

.unavailable-dates-section .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.unavailable-dates-section .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}

.unavailable-dates-section .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

/* ======================================== 
   DATUM STYLING VERBETERINGEN
======================================== */

/* Verbeterde styling voor datum input groepen */
.date-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.date-input-group:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Datum input veld styling */
.date-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    transition: all 0.2s ease;
    color: #374151;
    font-weight: 500;
}

.date-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fefefe;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-input:hover {
    border-color: #9ca3af;
}

/* Container voor alle datum inputs */
.unavailable-dates-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #fafbff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* Datum acties knoppen */
.date-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Verbeterde knop styling voor datum acties */
.date-actions .btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.date-actions .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.date-actions .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.date-actions .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: scale(1.05);
}

/* Extra styling voor datum lijst in player_unavailability.html */
.date-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.date-month {
    background: linear-gradient(135deg, #fefefe, #f8fafc);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.date-month h4 {
    color: #1f2937;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-month h4:before {
    content: "📅";
    font-size: 1.5rem;
}

.date-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.date-item:hover {
    border-color: #3b82f6;
    background: #f8faff;
    transform: translateX(4px);
}

.date-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.date-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    flex: 1;
}

.date-day {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1f2937;
    min-width: 40px;
    text-align: center;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.date-weekday {
    font-weight: 600;
    color: #4b5563;
    min-width: 100px;
}

/* Actie knoppen voor niet beschikbare dagen */
.action-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.action-buttons .btn {
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
}

.action-buttons .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.action-buttons .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.action-buttons .btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
}

.action-buttons .btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(107, 114, 128, 0.3);
}

/* Responsive verbeteringen */
@media (max-width: 768px) {
    .date-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .date-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .date-day {
        align-self: flex-start;
    }
}

/* Toegankelijkheid verbeteringen */
@media (prefers-reduced-motion: reduce) {
    .date-input-group,
    .date-item,
    .action-buttons .btn {
        transition: none;
    }
    
    .date-input-group:hover,
    .action-buttons .btn:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .date-input-group {
        border-width: 3px;
    }
    
    .date-input {
        border-width: 3px;
    }
    
    .date-item {
        border-width: 3px;
    }
}

/* Dark mode ondersteuning */
@media (prefers-color-scheme: dark) {
    .unavailable-dates-container {
        background: #1f2937;
        border-color: #374151;
    }
    
    .date-input-group {
        background: linear-gradient(135deg, #374151, #4b5563);
        border-color: #6b7280;
    }
    
    .date-input {
        background: #1f2937;
        border-color: #6b7280;
        color: #f9fafb;
    }
    
    .date-month {
        background: linear-gradient(135deg, #1f2937, #374151);
        border-color: #4b5563;
    }
    
    .date-month h4 {
        color: #f9fafb;
        border-color: #4b5563;
    }
    
    .date-item {
        background: #374151;
        border-color: #4b5563;
    }
    
    .date-item:hover {
        background: #4b5563;
    }
    
    .date-weekday {
        color: #d1d5db;
    }
}

/* ======================================== */

/* ========================================
   BUTTON EN DATUM KLEUREN FIX
   Gerepareerd door fix_unavailable_days_colors.py
======================================== */

/* ======================================== 
   BUTTON KLEUREN REPARATIE - HOGE PRIORITEIT
======================================== */

/* Alle buttons krijgen duidelijke kleuren en leesbare tekst */
.btn, a.btn, button.btn, input[type="submit"].btn, input[type="button"].btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    user-select: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Primary buttons (blauw) */
.btn-primary, a.btn-primary, button.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: 2px solid #2563eb !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Success buttons (groen) */
.btn-success, a.btn-success, button.btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: 2px solid #059669 !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Danger buttons (rood) */
.btn-danger, a.btn-danger, button.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: 2px solid #dc2626 !important;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Warning buttons (oranje/geel) */
.btn-warning, a.btn-warning, button.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    border: 2px solid #d97706 !important;
}

.btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

/* Secondary buttons (grijs) */
.btn-secondary, a.btn-secondary, button.btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: 2px solid #4b5563 !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important;
}

/* Info buttons (lichtblauw) */
.btn-info, a.btn-info, button.btn-info {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: white !important;
    border: 2px solid #0891b2 !important;
}

.btn-info:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}

/* Small buttons */
.btn-sm, a.btn-sm, button.btn-sm {
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

/* Extra small buttons */
.btn-xs, a.btn-xs, button.btn-xs {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Large buttons */
.btn-lg, a.btn-lg, button.btn-lg {
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
}

/* Quick action buttons styling */
.quick-actions .btn {
    min-width: 140px !important;
    justify-content: center !important;
}

/* Disabled button styling */
.btn:disabled, .btn.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.btn:disabled:hover, .btn.disabled:hover {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Focus states voor toegankelijkheid */
.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
}

/* Active states */
.btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Speciale Nederlandse button klassen */
.knop-primair {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-primair:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.knop-gevaar {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.knop-gevaar:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
    color: white !important;
    text-decoration: none !important;
}

.knop-secundair {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: none !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Outline buttons (deze hebben grijs tekst op blauwe achtergrond probleem) */
.btn-outline, a.btn-outline, button.btn-outline {
    background: transparent !important;
    color: #3b82f6 !important;
    border: 2px solid #3b82f6 !important;
    font-weight: 600 !important;
}

.btn-outline:hover {
    background: #3b82f6 !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Quick actions buttons fix - deze hadden grijs tekst probleem */
.quick-actions .btn {
    background: linear-gradient(135deg, #f8fafc, #e2e8f0) !important;
    color: #374151 !important;
    border: 2px solid #d1d5db !important;
    font-weight: 600 !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
}

.quick-actions .btn:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border-color: #2563eb !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* Specifieke fix voor outline buttons in quick-actions */
.quick-actions .btn-outline {
    background: transparent !important;
    color: #3b82f6 !important;
    border: 2px solid #3b82f6 !important;
}

.quick-actions .btn-outline:hover {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
}

/* Speciale fix voor date-input-group buttons - deze worden soms dynamisch gemaakt */
.date-input-group .btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: all 0.3s ease !important;
    min-width: auto !important;
}

.date-input-group .btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

.date-input-group .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
}

.date-input-group .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
}

/* Fix voor unavailable-dates-container buttons */
.unavailable-dates-container .btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
}

.unavailable-dates-container .btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
}

.unavailable-dates-container .btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

.unavailable-dates-container .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
}

/* Fix voor alle buttons in unavailable-dates-section */
.unavailable-dates-section .btn {
    font-weight: 600 !important;
    border: none !important;
    color: white !important;
}

.unavailable-dates-section .btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

.unavailable-dates-section .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.unavailable-dates-section .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}

.unavailable-dates-section .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

/* ======================================== 
   DATUM STYLING VERBETERINGEN
======================================== */

/* Verbeterde styling voor datum input groepen */
.date-input-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
    margin-bottom: 0.75rem;
}

.date-input-group:hover {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* Datum input veld styling */
.date-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    transition: all 0.2s ease;
    color: #374151;
    font-weight: 500;
}

.date-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fefefe;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-input:hover {
    border-color: #9ca3af;
}

/* Container voor alle datum inputs */
.unavailable-dates-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: #fafbff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

/* Datum acties knoppen */
.date-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* Verbeterde knop styling voor datum acties */
.date-actions .btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.date-actions .btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.date-actions .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: 0.875rem;
}

.date-actions .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: scale(1.05);
}

/* Extra styling voor datum lijst in player_unavailability.html */
.date-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0;
}

.date-month {
    background: linear-gradient(135deg, #fefefe, #f8fafc);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.date-month h4 {
    color: #1f2937;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.date-month h4:before {
    content: "📅";
    font-size: 1.5rem;
}

.date-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: white;
    border: 2px solid #f3f4f6;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

.date-item:hover {
    border-color: #3b82f6;
    background: #f8faff;
    transform: translateX(4px);
}

.date-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #3b82f6;
    cursor: pointer;
}

.date-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    flex: 1;
}

.date-day {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1f2937;
    min-width: 40px;
    text-align: center;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.date-weekday {
    font-weight: 600;
    color: #4b5563;
    min-width: 100px;
}

/* Actie knoppen voor niet beschikbare dagen */
.action-buttons {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.action-buttons .btn {
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    border: none;
}

.action-buttons .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.action-buttons .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
}

.action-buttons .btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.2);
}

.action-buttons .btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(107, 114, 128, 0.3);
}

/* Responsive verbeteringen */
@media (max-width: 768px) {
    .date-input-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        padding: 0.75rem;
    }
    
    .date-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .date-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .date-day {
        align-self: flex-start;
    }
}

/* Toegankelijkheid verbeteringen */
@media (prefers-reduced-motion: reduce) {
    .date-input-group,
    .date-item,
    .action-buttons .btn {
        transition: none;
    }
    
    .date-input-group:hover,
    .action-buttons .btn:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .date-input-group {
        border-width: 3px;
    }
    
    .date-input {
        border-width: 3px;
    }
    
    .date-item {
        border-width: 3px;
    }
}

/* Dark mode ondersteuning */
@media (prefers-color-scheme: dark) {
    .unavailable-dates-container {
        background: #1f2937;
        border-color: #374151;
    }
    
    .date-input-group {
        background: linear-gradient(135deg, #374151, #4b5563);
        border-color: #6b7280;
    }
    
    .date-input {
        background: #1f2937;
        border-color: #6b7280;
        color: #f9fafb;
    }
    
    .date-month {
        background: linear-gradient(135deg, #1f2937, #374151);
        border-color: #4b5563;
    }
    
    .date-month h4 {
        color: #f9fafb;
        border-color: #4b5563;
    }
    
    .date-item {
        background: #374151;
        border-color: #4b5563;
    }
    
    .date-item:hover {
        background: #4b5563;
    }
    
    .date-weekday {
        color: #d1d5db;
    }
}

/* ======================================== */


/* ========================================
   ULTIEME BUTTON FIX - DIRECT HTML SCRIPT
   Gerepareerd door direct_html_button_fix.py
======================================== */

/* FORCE alle buttons naar witte tekst - HOOGSTE PRIORITEIT */
button[style],
.btn[style],
.knop-nederland[style],
button,
.btn,
.knop-nederland {
    color: white !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

button:hover[style],
.btn:hover[style], 
.knop-nederland:hover[style],
button:hover,
.btn:hover,
.knop-nederland:hover {
    color: white !important;
    text-decoration: none !important;
}

/* Specifieke overrides voor inline styles */
button[onclick*="addDateInput"] {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}

button[onclick*="removeDateInput"] {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}

button[onclick*="clearAllDates"] {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
}

/* ======================================== */


/* ========================================
   ULTIEME BUTTON FIX - DIRECT HTML SCRIPT
   Gerepareerd door direct_html_button_fix.py
======================================== */

/* FORCE alle buttons naar witte tekst - HOOGSTE PRIORITEIT */
button[style],
.btn[style],
.knop-nederland[style],
button,
.btn,
.knop-nederland {
    color: white !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

button:hover[style],
.btn:hover[style], 
.knop-nederland:hover[style],
button:hover,
.btn:hover,
.knop-nederland:hover {
    color: white !important;
    text-decoration: none !important;
}

/* ULTIEME KRACHTIGE CSS OVERRIDE - FORCEERT ALLES */
button,
.btn,
.knop-nederland,
button[style],
.btn[style],
.knop-nederland[style],
button[onclick],
.btn[onclick],
button[class*="btn"],
button[class*="knop"] {
    color: white !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    font-family: inherit !important;
}

button:hover,
.btn:hover,
.knop-nederland:hover,
button[style]:hover,
.btn[style]:hover, 
.knop-nederland[style]:hover,
button[onclick]:hover,
.btn[onclick]:hover,
button[class*="btn"]:hover,
button[class*="knop"]:hover {
    color: white !important;
    text-decoration: none !important;
}

/* NUCLEAR OPTION - Alle tekst binnen buttons */
button *,
.btn *,
.knop-nederland *,
button span,
.btn span,
.knop-nederland span,
button::before,
button::after,
.btn::before,
.btn::after,
.knop-nederland::before,
.knop-nederland::after {
    color: white !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Specifieke onclick function overrides */
button[onclick*="addDateInput"],
*[onclick*="addDateInput"] {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

button[onclick*="addDateInput"]:hover,
*[onclick*="addDateInput"]:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
}

button[onclick*="removeDateInput"],
*[onclick*="removeDateInput"] {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

button[onclick*="removeDateInput"]:hover,
*[onclick*="removeDateInput"]:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
}

button[onclick*="clearAllDates"],
*[onclick*="clearAllDates"] {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

button[onclick*="clearAllDates"]:hover,
*[onclick*="clearAllDates"]:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: white !important;
}

/* Override alle mogelijke text-color eigenschappen */
button[style*="color"],
.btn[style*="color"],
.knop-nederland[style*="color"] {
    color: white !important;
}

/* Force font inheritance en reset */
button, .btn, .knop-nederland {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

/* ======================================== */





/* ========================================
   🎯 SELECTIEVE BUTTON FIX
   Repareer alleen datum-gerelateerde buttons
   Aangemaakt door selective_button_fix.py
======================================== */

/* ALLEEN datum buttons - zeer specifieke selectors */

/* Datum Toevoegen button - GROEN met witte tekst */
button[onclick*="addDateInput"],
button[onclick*="addDateInput"].btn,
button[onclick*="addDateInput"].btn-success,
.date-actions button[onclick*="addDateInput"],
.unavailable-dates-section button[onclick*="addDateInput"] {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    -webkit-text-fill-color: white !important;
}

button[onclick*="addDateInput"]:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    text-decoration: none !important;
}

/* Verwijderen button - ROOD met witte tekst */
button[onclick*="removeDateInput"],
button[onclick*="removeDateInput"].btn,
button[onclick*="removeDateInput"].btn-danger,
.date-input-group button[onclick*="removeDateInput"],
.unavailable-dates-container button[onclick*="removeDateInput"] {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    -webkit-text-fill-color: white !important;
}

button[onclick*="removeDateInput"]:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
}

/* Alles Wissen button - ORANJE met witte tekst */
button[onclick*="clearAllDates"],
button[onclick*="clearAllDates"].btn,
button[onclick*="clearAllDates"].btn-warning,
.date-actions button[onclick*="clearAllDates"],
.unavailable-dates-section button[onclick*="clearAllDates"] {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    -webkit-text-fill-color: white !important;
}

button[onclick*="clearAllDates"]:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: white !important;
    text-decoration: none !important;
}

/* Nederlandse knop-primair ALLEEN als het verwijder functie heeft */
button.knop-nederland.knop-primair[onclick*="removeDateInput"],
.knop-nederland.knop-primair[onclick*="removeDateInput"] {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    -webkit-text-fill-color: white !important;
}

/* Fix voor btn-outline die WEL een lichte achtergrond moeten hebben */
.btn-outline,
button.btn-outline,
a.btn-outline,
.form-actions .btn-outline {
    background: white !important;
    color: #3b82f6 !important;
    border: 2px solid #3b82f6 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    -webkit-text-fill-color: #3b82f6 !important;
}

.btn-outline:hover,
button.btn-outline:hover,
a.btn-outline:hover,
.form-actions .btn-outline:hover {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
    -webkit-text-fill-color: white !important;
}

/* Fix voor lichte buttons die donkere tekst nodig hebben */
.btn-light,
button.btn-light,
a.btn-light {
    background: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
    -webkit-text-fill-color: #495057 !important;
}

.btn-light:hover,
button.btn-light:hover,
a.btn-light:hover {
    background: #e2e6ea !important;
    color: #495057 !important;
    -webkit-text-fill-color: #495057 !important;
}

/* Fix voor secundaire buttons die licht zijn */
.btn-secondary:not([onclick*="addDateInput"]):not([onclick*="removeDateInput"]):not([onclick*="clearAllDates"]),
button.btn-secondary:not([onclick*="addDateInput"]):not([onclick*="removeDateInput"]):not([onclick*="clearAllDates"]),
a.btn-secondary:not([onclick*="addDateInput"]):not([onclick*="removeDateInput"]):not([onclick*="clearAllDates"]) {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: none !important;
    -webkit-text-fill-color: white !important;
}

/* ======================================== */


/* Knop Kleuren Fix - Versie 2.0 */
.btn, a.btn, button.btn, input[type="submit"].btn, input[type="button"].btn,
.knop-nederland, .knop-primair, .knop-secundair, .knop-gevaar {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    user-select: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.btn-primary, a.btn-primary, button.btn-primary, .knop-primair {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    border: 2px solid #2563eb !important;
}

.btn-primary:hover, .knop-primair:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.btn-danger, a.btn-danger, button.btn-danger, .knop-gevaar {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
    border: 2px solid #dc2626 !important;
}

.btn-danger:hover, .knop-gevaar:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

.btn-secondary, a.btn-secondary, button.btn-secondary, .knop-secundair {
    background: linear-gradient(135deg, #6b7280, #4b5563) !important;
    color: white !important;
    border: 2px solid #4b5563 !important;
}

.btn-secondary:hover, .knop-secundair:hover {
    background: linear-gradient(135deg, #4b5563, #374151) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3) !important;
}

.btn-success, a.btn-success, button.btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
    border: 2px solid #059669 !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}


/* ========================================
   MODERNE ACTION BUTTONS (voor spelers tabel)
   ======================================== */

.player-actions-modern {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    white-space: nowrap;
    min-width: 90px;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-action::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;
}

.btn-action:hover::before {
    left: 100%;
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

.btn-action:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.btn-view {
    background: linear-gradient(135deg, #4f46e5, #3b82f6);
    color: white;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3);
}

.btn-view:hover {
    background: linear-gradient(135deg, #4338ca, #2563eb);
    color: white;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

.btn-edit {
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-edit:hover {
    background: linear-gradient(135deg, #eab308, #ea580c);
    color: white;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.btn-icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.btn-text {
    font-weight: 600;
    letter-spacing: 0.025em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Responsive aanpassingen */
@media (max-width: 768px) {
    .player-actions-modern {
        flex-direction: column;
        gap: 0.3rem;
    }
    
    .btn-action {
        font-size: 0.85rem;
        padding: 0.5rem 0.8rem;
        min-width: 80px;
    }
}

@media (max-width: 480px) {
    .btn-action {
        font-size: 0.8rem;
        padding: 0.45rem 0.7rem;
        min-width: 75px;
    }
    
    .btn-text {
        font-size: 0.8rem;
    }
    
    .btn-icon {
        font-size: 1rem;
    }
}

/* Focus states voor accessibility */
.btn-action:focus {
    outline: none;
    ring: 3px solid rgba(59, 130, 246, 0.5);
    ring-offset: 2px;
}

.btn-view:focus {
    ring: 3px solid rgba(79, 70, 229, 0.5);
}

.btn-edit:focus {
    ring: 3px solid rgba(245, 158, 11, 0.5);
}


/* ========================================
   HERO SECTION LEESBAARHEID FIX
   Toegevoegd door hero_text_fix_script.py
   Voor betere leesbaarheid van witte tekst
======================================== */

/* Specifieke styling voor upcoming matches hero section */
.hero-section {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 50%, #2c3e50 100%) !important;
    color: white !important;
    padding: 2.5rem !important;
    border-radius: 16px !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Decoratief effect voor de hero section */
.hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: heroFloat 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(180deg); }
}

/* Hero content styling */
.hero-content {
    position: relative !important;
    z-index: 2 !important;
}

/* Breadcrumb styling voor betere leesbaarheid */
.breadcrumb-modern {
    margin-bottom: 1rem !important;
    font-size: 0.9rem !important;
}

.breadcrumb-modern a {
    color: #3498db !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.breadcrumb-modern a:hover {
    color: #5dade2 !important;
    text-decoration: underline !important;
}

.breadcrumb-modern span {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Hero title styling */
.hero-title {
    font-size: 2.5rem !important;
    font-weight: bold !important;
    margin: 0 0 1rem 0 !important;
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
    line-height: 1.2 !important;
}

/* Hero subtitle styling */
.hero-subtitle {
    font-size: 1.2rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    font-weight: 400 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important;
    line-height: 1.4 !important;
}

/* Responsive design voor kleinere schermen */
@media (max-width: 768px) {
    .hero-section {
        padding: 2rem 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
    
    .breadcrumb-modern {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    .hero-section {
        padding: 1.5rem 1rem !important;
    }
    
    .hero-title {
        font-size: 1.75rem !important;
    }
    
    .hero-subtitle {
        font-size: 0.9rem !important;
    }
}

/* Zorg ervoor dat alle tekst in hero-section wit blijft */
.hero-section,
.hero-section * {
    color: white !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
    -webkit-text-fill-color: white !important;
}

/* Specifieke styling voor breadcrumb links */
.hero-section .breadcrumb-modern a {
    color: #3498db !important;
    -webkit-text-fill-color: #3498db !important;
}

.hero-section .breadcrumb-modern a:hover {
    color: #5dade2 !important;
    -webkit-text-fill-color: #5dade2 !important;
}

/* ======================================== */

/* ========================================
   KRACHTIGE HERO GROENE OVERSCHRIJVING
   GEFORCEERDE GROENE TENNIS STYLING
   Overschrijft ALLE bestaande hero CSS
======================================== */

/* SUPER KRACHTIGE SELECTORS - OVERSCHRIJFT ALLES */
.hero-section,
div.hero-section,
.container .hero-section,
body .hero-section,
html body .hero-section,
.competitions-hero,
div.competitions-hero,
.container .competitions-hero,
body .competitions-hero,
html body .competitions-hero {
    background: linear-gradient(135deg, #059669 0%, #047857 50%, #10b981 100%) !important;
    background-image: linear-gradient(135deg, #059669 0%, #047857 50%, #10b981 100%) !important;
    background-color: #059669 !important;
    color: white !important;
    padding: 2.5rem !important;
    border-radius: 16px !important;
    margin-bottom: 2rem !important;
    box-shadow: 0 8px 32px rgba(5, 150, 105, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* TEKST STYLING VOOR GROENE ACHTERGROND */
.hero-section *,
div.hero-section *,
.container .hero-section *,
body .hero-section *,
html body .hero-section *,
.competitions-hero *,
div.competitions-hero *,
.container .competitions-hero *,
body .competitions-hero *,
html body .competitions-hero * {
    color: white !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
    -webkit-text-fill-color: white !important;
    background-clip: initial !important;
    -webkit-background-clip: initial !important;
}

/* SPECIFIEKE TITEL EN SUBTITLE STYLING */
.hero-title,
.hero-section .hero-title,
.competitions-hero .hero-title {
    font-size: 2.5rem !important;
    font-weight: bold !important;
    margin: 0 0 1rem 0 !important;
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3) !important;
    line-height: 1.2 !important;
}

.hero-subtitle,
.hero-section .hero-subtitle,
.competitions-hero .hero-subtitle {
    font-size: 1.2rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    font-weight: 400 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2) !important;
    line-height: 1.4 !important;
}

/* DECORATIEF FLOAT EFFECT */
.hero-section::before,
.competitions-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: heroFloat 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(180deg); }
}

/* ZORG DAT CONTENT BOVEN DECORATIE STAAT */
.hero-content {
    position: relative !important;
    z-index: 2 !important;
}

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .hero-section,
    .competitions-hero {
        padding: 2rem 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .hero-title,
    .hero-section .hero-title,
    .competitions-hero .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-subtitle,
    .hero-section .hero-subtitle,
    .competitions-hero .hero-subtitle {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .hero-section,
    .competitions-hero {
        padding: 1.5rem 1rem !important;
    }
    
    .hero-title,
    .hero-section .hero-title,
    .competitions-hero .hero-title {
        font-size: 1.75rem !important;
    }
    
    .hero-subtitle,
    .hero-section .hero-subtitle,
    .competitions-hero .hero-subtitle {
        font-size: 0.9rem !important;
    }
}

/* EXTRA ZEKERHEID - OVERSCHRIJF OOK EVENTUELE INLINE STYLES */
.hero-section[style],
.competitions-hero[style] {
    background: linear-gradient(135deg, #059669 0%, #047857 50%, #10b981 100%) !important;
    background-color: #059669 !important;
}

/* ======================================== */


/* ========================================
   SPECIFIEKE EMOJI KLASSEN - WIT/GEEL
   Voor directe controle over emoji kleuren
======================================== */

/* Emoji kleur klassen */
.emoji-geel {
    color: #fbbf24 !important;
    filter: brightness(1.2) saturate(1.1) !important;
    text-shadow: 0 1px 3px rgba(251, 191, 36, 0.4) !important;
    display: inline-block;
    transition: all 0.2s ease;
}

.emoji-wit {
    color: #ffffff !important;
    filter: brightness(1.4) saturate(0.8) drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important;
    display: inline-block;
    transition: all 0.2s ease;
}

.emoji-oranje {
    color: #f59e0b !important;
    filter: brightness(1.3) saturate(1.2) !important;
    text-shadow: 0 1px 2px rgba(245, 158, 11, 0.4) !important;
    display: inline-block;
    transition: all 0.2s ease;
}

.emoji-groen {
    color: #10b981 !important;
    filter: brightness(1.1) saturate(1.0) !important;
    text-shadow: 0 1px 2px rgba(16, 185, 129, 0.3) !important;
    display: inline-block;
    transition: all 0.2s ease;
}

/* Hover effecten */
.emoji-geel:hover,
.emoji-wit:hover,
.emoji-oranje:hover,
.emoji-groen:hover {
    transform: scale(1.1);
    filter: brightness(1.3) saturate(1.2) !important;
}

/* Voor headers extra styling */
h1 .emoji-geel,
h1 .emoji-wit,
h2 .emoji-geel,
h2 .emoji-wit,
h3 .emoji-geel,
h3 .emoji-wit {
    font-size: 1.1em;
    margin-right: 0.3em;
}

/* Voor buttons */
.btn .emoji-geel,
.btn .emoji-wit,
.knop-nederland .emoji-geel,
.knop-nederland .emoji-wit {
    margin-right: 0.25em;
}

/* Voor navigatie */
.nav-link .emoji-geel,
.nav-link .emoji-wit {
    margin-right: 0.3em;
}

/* Responsieve aanpassingen */
@media (max-width: 768px) {
    .emoji-geel,
    .emoji-wit,
    .emoji-oranje,
    .emoji-groen {
        font-size: 0.9em;
    }
    
    h1 .emoji-geel,
    h1 .emoji-wit {
        font-size: 1em;
    }
}

/* Print styling */
@media print {
    .emoji-geel,
    .emoji-wit,
    .emoji-oranje,
    .emoji-groen {
        color: #333 !important;
        filter: none !important;
        text-shadow: none !important;
    }
}

==================
.admin-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.admin-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e5e7eb;
}

.admin-header h1 {
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.admin-header p {
    color: #6b7280;
    margin-bottom: 0;
}

.rapportage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.rapportage-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: all 0.3s ease;
}

.rapportage-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.rapportage-card-header {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rapportage-card-icon {
    font-size: 2rem;
    background: rgba(255,255,255,0.2);
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rapportage-card-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.rapportage-card-body {
    padding: 1.5rem;
}

.rapportage-card-body p {
    color: #6b7280;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.rapportage-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #374151;
}

.feature-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.rapportage-actions {
    display: flex;
    gap: 1rem;
}

.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    transform: translateY(-1px);
}

.btn-secondary {
    background: #6b7280;
    color: white;
    opacity: 0.7;
}

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

@media (max-width: 768px) {
    .admin-container {
        padding: 1rem;
    }
    
    .rapportage-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .rapportage-features {
        grid-template-columns: 1fr;
    }
    
    .rapportage-card-header {
        padding: 1rem;
    }
    
    .rapportage-card-body {
        padding: 1rem;
    }
}

/* CRITICAL FIX: Force white text on btn-primary-modern anchor tags */
.dates-edit-link a.btn-primary-modern,
.dates-edit-link a.btn-primary-modern:link,
.dates-edit-link a.btn-primary-modern:visited,
.dates-edit-link a.btn-primary-modern:hover,
.dates-edit-link a.btn-primary-modern:active,
.dates-edit-link a.btn-primary-modern:focus,
a.btn-modern.btn-primary-modern,
a.btn-modern.btn-primary-modern:link,
a.btn-modern.btn-primary-modern:visited,
a.btn-modern.btn-primary-modern:hover,
a.btn-modern.btn-primary-modern:active,
a.btn-modern.btn-primary-modern:focus {
    color: #ffffff !important;
    text-decoration: none !important;
}