/* ============================================
   EUROJACKPOT - Sdílené základní styly
   ============================================ */

/* CSS Proměnné - jednotný design systém */
:root {
    /* Primární barvy */
    --ej-primary: #60b5fa;
    --ej-primary-hover: #4dabf7;
    --ej-secondary: #64b5f6;
    
    /* Akcentové barvy */
    --ej-accent-red: #ff6b6b;
    --ej-accent-green: #69db7c;
    --ej-accent-orange: #ffa94d;
    --ej-accent-yellow: #ffd43b;
    
    /* Pozadí */
    --ej-bg-dark: #0a0a0a;
    --ej-bg-secondary: #141414;
    --ej-bg-tertiary: #1e1e1e;
    --ej-bg-card: #212121;
    
    /* Text */
    --ej-text-primary: #f0f0f0;
    --ej-text-secondary: #e0e0e0;
    --ej-text-muted: #bbbbbb;
    --ej-text-dark: #333333;
    
    /* Ohraničení */
    --ej-border: #333333;
    --ej-border-light: #444444;
    
    /* Speciální barvy pro čísla */
    --ej-number-drawn: #5d5d5d;
    --ej-euro-drawn: #903939;
    --ej-euro-bg: #2a1c1c;
    --ej-euro-border: #703030;
    
    /* Součty */
    --ej-sum-high: rgba(255, 107, 107, 0.6);
    --ej-sum-low: rgba(105, 219, 124, 0.6);
    
    /* Fonty */
    --ej-font-primary: Arial, sans-serif;
    --ej-font-secondary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Přechody */
    --ej-transition: 0.2s ease;
    --ej-transition-slow: 0.3s ease;
    
    /* Stíny */
    --ej-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --ej-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3);
    --ej-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.4);
    
    /* Zaoblení */
    --ej-radius-sm: 4px;
    --ej-radius-md: 8px;
    --ej-radius-lg: 12px;
    --ej-radius-full: 50%;
}

/* ============================================
   Základní reset a normalizace
   ============================================ */

/* Scrollbar styling pro tmavý režim */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--ej-bg-tertiary);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--ej-primary);
    border-radius: 6px;
    border: 3px solid var(--ej-bg-tertiary);
}

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

::-webkit-scrollbar-corner {
    background: var(--ej-bg-tertiary);
}

/* ============================================
   Sdílené komponenty
   ============================================ */

/* Odkazy */
.ej-link {
    color: var(--ej-primary);
    text-decoration: none;
    transition: color var(--ej-transition);
}

.ej-link:hover {
    color: var(--ej-accent-red);
    text-decoration: underline;
}

/* Tlačítka */
.ej-button {
    margin: 5px;
    padding: 10px 15px;
    font-size: 14px;
    background-color: var(--ej-primary);
    color: var(--ej-bg-dark);
    border: none;
    border-radius: var(--ej-radius-sm);
    cursor: pointer;
    transition: background-color var(--ej-transition), transform 0.1s;
    box-shadow: var(--ej-shadow-sm);
}

.ej-button:hover {
    background-color: var(--ej-primary-hover);
    transform: translateY(-2px);
}

.ej-button:active {
    transform: translateY(1px);
}

.ej-button-danger {
    background-color: var(--ej-accent-red);
}

.ej-button-success {
    background-color: var(--ej-accent-green);
    color: var(--ej-text-dark);
}

/* Karty */
.ej-card {
    background-color: var(--ej-bg-secondary);
    border: 1px solid var(--ej-border);
    border-radius: var(--ej-radius-md);
    padding: 15px;
    box-shadow: var(--ej-shadow-md);
}

/* Rozbalovací sekce */
.ej-collapsible-section {
    border: 1px solid var(--ej-border);
    border-radius: var(--ej-radius-sm);
    margin-bottom: 15px;
    overflow: hidden;
    background-color: var(--ej-bg-secondary);
}

.ej-collapsible-header {
    background-color: var(--ej-primary);
    color: var(--ej-bg-dark);
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--ej-transition);
}

.ej-collapsible-header:hover {
    background-color: var(--ej-primary-hover);
}

.ej-collapsible-icon {
    font-size: 18px;
    transition: transform var(--ej-transition-slow);
}

.ej-collapsible-content {
    background-color: var(--ej-bg-secondary);
    padding: 15px;
}

/* ============================================
   Footer - jednotný styl
   ============================================ */

.ej-footer,
footer {
    margin-top: 20px;
    padding: 15px;
    text-align: center;
    color: var(--ej-text-muted);
    border-top: 1px solid var(--ej-border);
    font-size: 14px;
}

.ej-footer p,
footer p {
    margin: 5px 0;
}

.ej-footer a,
footer a {
    color: var(--ej-primary);
    text-decoration: none;
    transition: color var(--ej-transition);
}

.ej-footer a:hover,
footer a:hover {
    color: var(--ej-accent-red);
    text-decoration: underline;
}

.ej-footer small,
footer small {
    color: var(--ej-accent-orange);
}

/* ============================================
   Debug okno - jednotný styl
   ============================================ */

.ej-debug,
#debug {
    margin-top: 20px;
    width: 80%;
    max-width: 1500px;
    height: 150px;
    overflow-y: scroll;
    border: 1px solid var(--ej-border);
    padding: 10px;
    font-family: monospace;
    background-color: var(--ej-bg-tertiary);
    color: var(--ej-text-muted);
    border-radius: var(--ej-radius-sm);
}

/* ============================================
   Zoom ovládací prvky - jednotný styl
   ============================================ */

.ej-zoom-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px;
    background-color: var(--ej-bg-tertiary);
    border-radius: var(--ej-radius-sm);
    border: 1px solid var(--ej-border);
}

.ej-zoom-button {
    padding: 5px 10px;
    background-color: var(--ej-bg-secondary);
    color: var(--ej-text-primary);
    border: 1px solid var(--ej-border);
    border-radius: var(--ej-radius-sm);
    cursor: pointer;
    transition: background-color var(--ej-transition);
}

.ej-zoom-button:hover {
    background-color: var(--ej-primary);
    color: var(--ej-bg-dark);
}

/* ============================================
   Statistiky čísel - jednotné barvy
   ============================================ */

.ej-above-average {
    background-color: var(--ej-sum-high);
}

.ej-below-average {
    background-color: var(--ej-sum-low);
}

.ej-last-drawn-red {
    background-color: var(--ej-sum-high);
}

.ej-last-drawn-orange {
    background-color: rgba(255, 169, 77, 0.6);
}

.ej-last-drawn-green {
    background-color: var(--ej-sum-low);
}

/* ============================================
   Placeholder text
   ============================================ */

.ej-placeholder-text,
.placeholder-text {
    color: var(--ej-text-muted);
    font-style: italic;
    padding: 20px;
    text-align: center;
}

/* ============================================
   Info boxy
   ============================================ */

.ej-warning-box {
    background-color: #382b00;
    border-left: 4px solid #ffc107;
    padding: 10px;
    margin: 10px 0;
    border-radius: 0 var(--ej-radius-sm) var(--ej-radius-sm) 0;
    color: #ffe082;
}

.ej-success-box {
    background-color: #033a16;
    border-left: 4px solid #28a745;
    padding: 10px;
    margin: 10px 0;
    border-radius: 0 var(--ej-radius-sm) var(--ej-radius-sm) 0;
    color: #a7e9b7;
}

.ej-tip-box {
    background-color: #023a4e;
    border-left: 4px solid #17a2b8;
    padding: 10px;
    margin: 10px 0;
    border-radius: 0 var(--ej-radius-sm) var(--ej-radius-sm) 0;
    color: #a8e2ed;
}

/* ============================================
   Tabulky - základní styl
   ============================================ */

.ej-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.ej-table th,
.ej-table td {
    border: 1px solid var(--ej-border-light);
    padding: 8px;
    text-align: left;
}

.ej-table th {
    background-color: var(--ej-bg-card);
    color: var(--ej-text-primary);
}

.ej-table tr:nth-child(even) {
    background-color: var(--ej-bg-tertiary);
}

/* ============================================
   Loterie míčky - jednotný styl
   ============================================ */

.ej-ball {
    display: inline-flex;
    width: 36px;
    height: 36px;
    border-radius: var(--ej-radius-full);
    background-color: var(--ej-primary);
    color: var(--ej-bg-dark);
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin: 0 3px;
}

.ej-ball-euro {
    background-color: #e74c3c;
    color: white;
}

/* ============================================
   Responsive úpravy
   ============================================ */

@media (max-width: 768px) {
    .ej-card {
        padding: 10px;
    }
    
    .ej-button {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .ej-footer {
        padding: 10px;
        font-size: 12px;
    }
}

/* ============================================
   Pravděpodobnostní styly (z původního styles.css)
   Převedeno na tmavý režim
   ============================================ */

/* Barevné odlišení pravděpodobností - text */
.probability-very-high {
    color: #4ade80;
    font-weight: bold;
}

.probability-high {
    color: #86efac;
}

.probability-medium {
    color: #fde047;
}

.probability-low {
    color: #fb923c;
}

.probability-very-low {
    color: #f87171;
}

/* Vizuální reprezentace výšky pravděpodobnosti */
.probability-bar {
    display: inline-block;
    height: 16px;
    margin-right: 5px;
    vertical-align: middle;
    border-radius: 2px;
}

/* Styly pro vizualizaci pravděpodobností */
.visualization-item {
    margin-bottom: 15px;
}

.visualization-label {
    margin-bottom: 3px;
    font-weight: bold;
    color: var(--ej-text-primary);
}

.visualization-bar {
    display: flex;
    align-items: center;
    height: 24px;
}

.visualization-fill {
    height: 100%;
    border-radius: 3px;
}

/* Styly pro míčky s barevným odlišením pravděpodobnosti */
.ball.probability-very-high {
    background: linear-gradient(to bottom, #22c55e, #16a34a);
    color: white;
    border: 2px solid #15803d;
    font-weight: bold;
}

.ball.probability-high {
    background: linear-gradient(to bottom, #4ade80, #22c55e);
    color: white;
    border: 2px solid #16a34a;
}

.ball.probability-medium {
    background: linear-gradient(to bottom, #facc15, #eab308);
    color: #1a1a1a;
    border: 2px solid #ca8a04;
}

.ball.probability-low {
    background: linear-gradient(to bottom, #fb923c, #f97316);
    color: white;
    border: 2px solid #ea580c;
}

.ball.probability-very-low {
    background: linear-gradient(to bottom, #f87171, #ef4444);
    color: white;
    border: 2px solid #dc2626;
}

/* Styly pro tabulku pokročilých výsledků vážení pravděpodobnosti */
.advanced-weighted-results {
    margin-top: 15px;
    padding: 10px;
    background-color: var(--ej-bg-tertiary);
    border-radius: var(--ej-radius-md);
    box-shadow: var(--ej-shadow-md);
}

.main-numbers-weighted,
.euro-numbers-weighted {
    margin-bottom: 20px;
}

.probability-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.probability-table th,
.probability-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid var(--ej-border);
    color: var(--ej-text-primary);
}

.probability-table th {
    background-color: var(--ej-bg-card);
    font-weight: bold;
}

.probability-bar-container {
    width: 200px;
    height: 20px;
    background-color: var(--ej-bg-secondary);
    border-radius: 10px;
    overflow: hidden;
}

.probability-bar {
    height: 100%;
    border-radius: 10px;
}

.selected-number {
    background-color: rgba(96, 181, 250, 0.2);
}

.weighted-explanation {
    font-style: italic;
    color: var(--ej-text-muted);
    margin-top: 10px;
}

/* Doplňkové třídy pro zobrazení pravděpodobnosti - pozadí */
.probability-very-high-bg {
    background-color: rgba(239, 68, 68, 0.7);
    color: white;
    font-weight: bold;
}

.probability-high-bg {
    background-color: rgba(249, 115, 22, 0.7);
    color: white;
    font-weight: bold;
}

.probability-medium-bg {
    background-color: rgba(234, 179, 8, 0.7);
    color: #1a1a1a;
    font-weight: bold;
}

.probability-low-bg {
    background-color: rgba(34, 197, 94, 0.7);
    color: white;
    font-weight: bold;
}

.probability-very-low-bg {
    background-color: rgba(59, 130, 246, 0.7);
    color: white;
    font-weight: bold;
}

/* Styly pro tabulkové buňky s čísly */
.probability-table td:first-child {
    text-align: center;
    border-radius: var(--ej-radius-full);
    width: 40px;
    height: 40px;
}

/* Aktivní třída pro vybranou řádku */
.selected-number td {
    position: relative;
    background-color: rgba(96, 181, 250, 0.15);
}

.selected-number td:first-child:after {
    content: "✓";
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--ej-accent-green);
    color: white;
    border-radius: var(--ej-radius-full);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Styly pro zobrazení pravděpodobností */
.high-probability-numbers {
    margin-top: 20px;
    padding: 10px;
    background-color: var(--ej-bg-tertiary);
    border-radius: var(--ej-radius-sm);
    border-left: 3px solid var(--ej-accent-orange);
}

.probability-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.probability-item {
    display: inline-block;
    padding: 5px 10px;
    background-color: var(--ej-bg-card);
    border-radius: 15px;
    font-weight: bold;
    color: var(--ej-text-primary);
    border: 1px solid var(--ej-border);
}

.probability-item small {
    color: var(--ej-text-muted);
    font-weight: normal;
}

/* Rozšíření stylu pro zobrazení statistik */
.stats-section {
    margin-bottom: 20px;
}

.probability-list.large {
    margin-bottom: 15px;
}

.probability-item.selected {
    background-color: var(--ej-accent-orange);
    color: white;
    border-color: var(--ej-accent-orange);
}

.probability-item.selected small {
    color: rgba(255, 255, 255, 0.8);
}

.probability-item.euro {
    background-color: var(--ej-euro-bg);
    border: 1px solid var(--ej-euro-border);
    color: #ff9999;
}

.probability-item.euro.selected {
    background-color: #e74c3c;
    border: 1px solid #c0392b;
    color: white;
}

.stats-note {
    font-style: italic;
    color: var(--ej-text-muted);
    margin-top: 20px;
}

/* ============================================
   Pravděpodobnostní třídy (alternativní pojmenování)
   Používané v _Výpočet.html
   ============================================ */

/* Pro buňky s čísly */
.number-cell.high-probability,
.high-probability {
    background-color: #10b981;
    color: white;
    font-weight: bold;
}

.number-cell.medium-probability,
.medium-probability {
    background-color: #f59e0b;
    color: white;
    font-weight: bold;
}

.number-cell.low-probability,
.low-probability {
    background-color: #ef4444;
    color: white;
    font-weight: bold;
}

/* Pro míčky */
.ball.high-probability {
    background-color: #10b981;
    color: white;
}

.ball.medium-probability {
    background-color: #f59e0b;
    color: white;
}

.ball.low-probability {
    background-color: #ef4444;
    color: white;
}