/* KCHGAME Balanced Styles - Perfect sizing for all dashboard pages */

/* Base settings - Balanced */
html {
    font-size: 15px !important; /* Perfect base size */
}

body {
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

/* Typography - Balanced */
h1 { font-size: 2.25rem !important; }  /* 36px */
h2 { font-size: 1.875rem !important; } /* 30px */
h3 { font-size: 1.5rem !important; }   /* 24px */
h4 { font-size: 1.25rem !important; }  /* 20px */
h5 { font-size: 1.125rem !important; } /* 18px */
h6 { font-size: 1rem !important; }     /* 16px */

/* Header - Balanced */
.main-header {
    padding: 0.75rem 0 !important; /* 12px top/bottom */
}

.logo {
    font-size: 1.75rem !important; /* 28px */
}

.logo-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.875rem !important; /* 14px */
}

.nav-link {
    padding: 0.625rem 1.25rem !important; /* 10px 20px */
    font-size: 0.9375rem !important; /* 15px */
}

.nav-link i {
    font-size: 0.8125rem !important; /* 13px */
}

.user-menu {
    padding: 0.625rem 1.25rem !important; /* 10px 20px */
    font-size: 0.9375rem !important; /* 15px */
}

.user-avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.8125rem !important; /* 13px */
}

/* Dropdown - Balanced */
#userDropdown {
    width: 240px !important;
    font-size: 0.875rem !important; /* 14px */
}

#userDropdown a {
    padding: 0.5rem 0.875rem !important; /* 8px 14px */
    font-size: 0.8125rem !important; /* 13px */
}

/* Cards - Balanced */
.card,
.glass-card,
.game-card,
.wallet-card {
    padding: 1.25rem !important; /* 20px */
    border-radius: 16px !important;
    margin-bottom: 1.25rem !important; /* 20px */
}

.card-header {
    padding: 1rem 1.25rem !important; /* 16px 20px */
    margin-bottom: 1rem !important; /* 16px */
}

.card-body {
    padding: 1.25rem !important; /* 20px */
}

.card-title {
    font-size: 1.125rem !important; /* 18px */
    margin-bottom: 0.625rem !important; /* 10px */
}

.card-text {
    font-size: 0.875rem !important; /* 14px */
}

/* Buttons - Balanced */
.btn {
    padding: 0.625rem 1.25rem !important; /* 10px 20px */
    font-size: 0.9375rem !important; /* 15px */
    border-radius: 10px !important;
}

.btn-sm {
    padding: 0.5rem 0.875rem !important; /* 8px 14px */
    font-size: 0.8125rem !important; /* 13px */
}

.btn-lg {
    padding: 0.875rem 1.75rem !important; /* 14px 28px */
    font-size: 1.0625rem !important; /* 17px */
}

/* Forms - Balanced */
.form-control,
.form-select {
    padding: 0.625rem 0.875rem !important; /* 10px 14px */
    font-size: 0.9375rem !important; /* 15px */
    border-radius: 10px !important;
}

.form-label {
    font-size: 0.9375rem !important; /* 15px */
    margin-bottom: 0.5rem !important; /* 8px */
}

.input-group-text {
    padding: 0.625rem 0.875rem !important; /* 10px 14px */
    font-size: 0.9375rem !important; /* 15px */
}

/* Tables - Balanced */
.table th,
.table td {
    padding: 0.625rem !important; /* 10px */
    font-size: 0.9375rem !important; /* 15px */
}

/* Modals - Balanced */
.modal-header {
    padding: 1rem !important; /* 16px */
}

.modal-body {
    padding: 1rem !important; /* 16px */
}

.modal-footer {
    padding: 0.75rem 1rem !important; /* 12px 16px */
}

.modal-title {
    font-size: 1.25rem !important; /* 20px */
}

/* Other elements - Balanced */
.badge {
    padding: 0.25rem 0.5rem !important; /* 4px 8px */
    font-size: 0.75rem !important; /* 12px */
}

.alert {
    padding: 0.75rem 1rem !important; /* 12px 16px */
    margin-bottom: 1rem !important; /* 16px */
    font-size: 0.9375rem !important; /* 15px */
}

.breadcrumb {
    padding: 0.5rem 0.75rem !important; /* 8px 12px */
    font-size: 0.9375rem !important; /* 15px */
}

.list-group-item {
    padding: 0.625rem 1rem !important; /* 10px 16px */
    font-size: 0.9375rem !important; /* 15px */
}

.nav-tabs .nav-link {
    padding: 0.5rem 0.875rem !important; /* 8px 14px */
    font-size: 0.9375rem !important; /* 15px */
}

.dropdown-menu {
    font-size: 0.9375rem !important; /* 15px */
}

.dropdown-item {
    padding: 0.375rem 0.75rem !important; /* 6px 12px */
    font-size: 0.9375rem !important; /* 15px */
}

.pagination .page-link {
    padding: 0.5rem 0.75rem !important; /* 8px 12px */
    font-size: 0.9375rem !important; /* 15px */
}

.progress {
    height: 1rem !important; /* 16px */
}

/* Container and layout - Balanced */
.container,
.container-fluid {
    max-width: 1140px !important;
    padding: 0 1rem !important; /* 16px */
}

.page-header,
.hero-section {
    padding: 2rem 0 !important; /* 32px */
}

.page-header h1,
.hero-section h1 {
    font-size: 2.25rem !important; /* 36px */
    margin-bottom: 0.75rem !important; /* 12px */
}

.page-header p,
.hero-section p {
    font-size: 0.9375rem !important; /* 15px */
}

.main-footer {
    padding: 2.5rem 0 1rem !important; /* 40px 0 16px */
    font-size: 0.875rem !important; /* 14px */
}

.footer-section h5 {
    font-size: 1.0625rem !important; /* 17px */
    margin-bottom: 0.75rem !important; /* 12px */
}

.footer-link {
    font-size: 0.8125rem !important; /* 13px */
}

.social-link {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.75rem !important; /* 12px */
}

/* Row and column spacing - Balanced */
.row {
    margin: 0 -0.75rem !important; /* -12px */
}

.col,
[class*="col-"] {
    padding: 0 0.75rem !important; /* 12px */
}

/* Section spacing - Balanced */
section {
    margin-bottom: 1.5rem !important; /* 24px */
}

.main-content {
    min-height: calc(100vh - 75px) !important;
}

/* Game specific styles - Balanced */
.game-card .game-icon {
    width: 45px !important;
    height: 45px !important;
    font-size: 1.125rem !important; /* 18px */
}

.game-card .game-info h3 {
    font-size: 1.125rem !important; /* 18px */
}

.game-card .game-info p {
    font-size: 0.8125rem !important; /* 13px */
}

.game-status {
    padding: 0.25rem 0.5rem !important; /* 4px 8px */
    font-size: 0.75rem !important; /* 12px */
}

.play-button {
    padding: 0.625rem 0.875rem !important; /* 10px 14px */
    font-size: 0.9375rem !important; /* 15px */
}

.wallet-card .amount {
    font-size: 1.375rem !important; /* 22px */
}

.wallet-card .label {
    font-size: 0.8125rem !important; /* 13px */
}

/* Number grid - Balanced */
.number-grid {
    gap: 0.5rem !important; /* 8px */
}

.number-ball {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.875rem !important; /* 14px */
}

/* Mobile responsive - Balanced */
@media (max-width: 768px) {
    html {
        font-size: 14px !important; /* Slightly smaller for mobile */
    }
    
    body {
        font-size: 0.9375rem !important; /* 15px at 14px base = 13.125px */
    }
    
    .logo {
        font-size: 1.5rem !important; /* 21px */
    }
    
    .logo-icon {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.75rem !important; /* 10.5px */
    }
    
    h1 { font-size: 1.875rem !important; } /* 26.25px */
    h2 { font-size: 1.5rem !important; }   /* 21px */
    h3 { font-size: 1.25rem !important; }  /* 17.5px */
    h4 { font-size: 1.125rem !important; } /* 15.75px */
    h5 { font-size: 1rem !important; }     /* 14px */
    h6 { font-size: 0.9375rem !important; } /* 13.125px */
    
    .card,
    .glass-card {
        padding: 1rem !important; /* 14px */
        margin-bottom: 1rem !important; /* 14px */
    }
    
    .btn {
        padding: 0.5rem 1rem !important; /* 7px 14px */
        font-size: 0.875rem !important; /* 12.25px */
    }
    
    .form-control,
    .form-select {
        padding: 0.5rem 0.75rem !important; /* 7px 10.5px */
        font-size: 0.875rem !important; /* 12.25px */
    }
    
    .game-card {
        padding: 1rem !important; /* 14px */
    }
    
    .game-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important; /* 14px */
    }
    
    .number-ball {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.75rem !important; /* 10.5px */
    }
    
    .number-grid {
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 0.375rem !important; /* 5.25px */
    }
}

/* Ensure all elements respect the balanced sizing */
* {
    box-sizing: border-box !important;
}

/* Success page specific - Balanced */
.success-icon {
    width: 100px !important;
    height: 100px !important;
    font-size: 3rem !important; /* 48px */
}

.success-title {
    font-size: 2.25rem !important; /* 36px */
    margin-bottom: 1rem !important; /* 16px */
}

.success-subtitle {
    font-size: 1.125rem !important; /* 18px */
    margin-bottom: 2rem !important; /* 32px */
}

.ticket-ref {
    font-size: 1.375rem !important; /* 22px */
    margin-bottom: 1rem !important; /* 16px */
}

.detail-value {
    font-size: 1.125rem !important; /* 18px */
    margin-bottom: 0.5rem !important; /* 8px */
}

.detail-label {
    font-size: 0.875rem !important; /* 14px */
}

/* Filter section - Balanced */
.filter-section {
    padding: 1.25rem !important; /* 20px */
    margin-bottom: 2rem !important; /* 32px */
    border-radius: 16px !important;
}

.filter-section .d-flex {
    gap: 1.25rem !important; /* 20px */
}

.filter-section label {
    font-size: 0.9375rem !important; /* 15px */
}

.filter-section select {
    padding: 0.625rem 0.875rem !important; /* 10px 14px */
    font-size: 0.9375rem !important; /* 15px */
    border-radius: 10px !important;
    min-width: 150px !important;
}

/* Wallet cards - Balanced */
.wallet-section {
    margin-bottom: 2rem !important; /* 32px */
}

.wallet-card {
    padding: 1.25rem !important; /* 20px */
    border-radius: 16px !important;
}

.wallet-card h5 {
    font-size: 0.9375rem !important; /* 15px */
    margin-bottom: 0.5rem !important; /* 8px */
}

.transfer-button {
    padding: 0.75rem 1rem !important; /* 12px 16px */
    font-size: 0.9375rem !important; /* 15px */
    border-radius: 10px !important;
    margin-top: 0.75rem !important; /* 12px */
}

/* How to play section - Balanced */
.how-to-play {
    padding: 2rem !important; /* 32px */
    margin-top: 3rem !important; /* 48px */
    border-radius: 16px !important;
}

.how-to-play h2 {
    margin-bottom: 1.5rem !important; /* 24px */
    font-size: 1.875rem !important; /* 30px */
}

.how-to-play p {
    margin-bottom: 2rem !important; /* 32px */
    font-size: 0.9375rem !important; /* 15px */
}

.steps-grid {
    gap: 1.5rem !important; /* 24px */
    margin-top: 2rem !important; /* 32px */
}

.step-card {
    padding: 1.5rem !important; /* 24px */
    border-radius: 14px !important;
}

.step-number {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.5rem !important; /* 24px */
    margin: 0 auto 1rem !important; /* 16px bottom */
}

.step-card h4 {
    margin-bottom: 0.75rem !important; /* 12px */
    font-size: 1.125rem !important; /* 18px */
}

.step-card p {
    font-size: 0.875rem !important; /* 14px */
} 

/* ===== CORRECTIONS DE CONTRASTE POUR LES TABLEAUX ===== */

/* Table avec fond blanc pour une meilleure lisibilité */
.modern-table, .ticket-table {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* En-têtes avec fond sombre et texte blanc */
.modern-table .table th, .ticket-table .table th {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%) !important;
    font-weight: 600;
    border: none;
    padding: 1rem;
    color: white !important;
    font-size: 0.95rem;
}

/* Cellules avec fond blanc et texte sombre */
.modern-table .table td, .ticket-table .table td {
    padding: 1rem;
    border: none;
    vertical-align: middle;
    color: #2c3e50 !important;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500;
}

/* Styles spécifiques pour les éléments dans les cellules */
.modern-table .table td strong, .ticket-table .table td strong {
    color: #2c3e50 !important;
    font-weight: 600;
}

.modern-table .table .text-white-50, .ticket-table .table .text-white-50 {
    color: #7f8c8d !important;
    font-size: 0.85rem;
}

/* Effet hover pour les lignes */
.modern-table .table tbody tr, .ticket-table .table tbody tr {
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.modern-table .table tbody tr:hover, .ticket-table .table tbody tr:hover {
    background: rgba(233, 69, 96, 0.08) !important;
    transform: translateX(2px);
}

.modern-table .table tbody tr:hover td, .ticket-table .table tbody tr:hover td {
    background: rgba(233, 69, 96, 0.05) !important;
    color: #2c3e50 !important;
}

/* Styles pour les montants */
.ticket-amount {
    color: #27ae60 !important;
    font-weight: 600;
}

/* Styles pour les noms de jeux */
.ticket-game-name {
    color: #2c3e50 !important;
    font-weight: 600;
}

/* Styles pour les dates */
.ticket-date {
    color: #34495e !important;
    font-size: 0.85rem;
    font-weight: 500;
}