/* Základní reset a font */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background-color: #f9f9f9; }
a { text-decoration: none; color: #0056b3; }
.container { width: 90%; max-width: 1000px; margin: auto; padding: 20px 0; }
.brand-highlight { color: #0056b3; font-weight: 900; }

/* Hlavička */
header { background: #fff; border-bottom: 1px solid #ddd; padding: 10px 0; }
.header-flex { display: flex; justify-content: space-between; align-items: center; }

/* Podbarvené logo (badge efekt) */
.logo { 
    font-size: 28px; 
    font-weight: bold; 
    color: #2c3e50; 
    background-color: #e8eff5; 
    padding: 6px 16px; 
    border-radius: 8px; 
    border: 1px solid #d1dfea; 
}

nav { display: flex; align-items: center; }
nav a { margin-left: 20px; font-weight: 500; }

/* Obrysové (outline) tlačítko v hlavičce pro VŠECHNY obrazovky (PC i mobil) */
header nav a.btn-primary {
    background-color: transparent;
    color: #0056b3;
    border: 2px solid #0056b3;
    padding: 8px 18px;
}
header nav a.btn-primary:hover {
    background-color: #f1f8ff; 
    color: #004494;
}

/* Tlačítka (Obecná pro zbytek webu) */
.btn { display: inline-block; padding: 10px 20px; border-radius: 5px; font-weight: bold; text-align: center; cursor: pointer; border: none; }
.btn-primary { background-color: #0056b3; color: #fff; }
.btn-primary:hover { background-color: #004494; color: #fff; }
.btn-danger { background-color: #dc3545; color: #fff; padding: 5px 10px; font-size: 14px;}
.btn-danger:hover { background-color: #c82333; }
.btn-danger:disabled { background-color: #e4979f; cursor: not-allowed; }
.btn-success { background-color: #28a745; color: #fff; }
.btn-success:hover { background-color: #218838; }
.btn-warning { background-color: #ffc107; color: #212529; }
.btn-warning:hover { background-color: #e0a800; }
.btn-full { width: 100%; margin-top: 10px; }
.btn:disabled { background-color: #ccc; cursor: not-allowed; }

/* Hlavní sekce */
.hero { text-align: center; padding: 60px 20px; background: #eef2f5; border-radius: 8px; margin-top: 20px; }
.hero h1 { font-size: 30px; margin-bottom: 10px; color: #2c3e50; }
.services { margin-top: 50px; }
.services h2 { text-align: center; margin-bottom: 30px; color: #2c3e50; }
.services-grid { display: flex; gap: 20px; }
.service-card { flex: 1; background: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

/* Barevné rozlišení pro sekci Výstupy */
.card-all { background-color: #eafaf1; border: 1px solid #bce8cb; } 
.card-osvc { background-color: #fef6e9; border: 1px solid #f2dfc4; } 

/* Legenda pod výstupy */
.vystupy-legend { display: flex; justify-content: center; gap: 30px; margin-top: 30px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 10px; font-weight: 500; color: #444; }
.color-box { width: 22px; height: 22px; border-radius: 5px; }

/* Čtverce v legendě */
.box-all { background-color: #b8e6ca; border: 1px solid #94d4ab; }
.box-osvc { background-color: #f6debc; border: 1px solid #eab77b; }

/* Ceníkové karty */
.price-card { flex: 1; background: #fff; padding: 35px 25px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: center; border-top: 4px solid #0056b3; }
.price-card h3 { font-size: 22px; color: #2c3e50; margin-bottom: 15px; }
.price-card .price { font-size: 36px; font-weight: 900; color: #0056b3; margin-bottom: 15px; }
.price-card p { color: #666; font-size: 15px; line-height: 1.5; }

/* Akční nabídka (Sleva) */
.promo-card {
    position: relative;
    border-top: 4px solid #ff4b2b;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 75, 43, 0.15);
    z-index: 1;
}
.promo-badge {
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    color: white;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(255, 75, 43, 0.3);
    white-space: nowrap;
}
.promo-subtitle {
    color: #ff4b2b;
    font-style: italic;
    font-weight: bold;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.price-old {
    text-decoration: line-through;
    color: #a0a0a0;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: -5px;
}
.price.new-price {
    color: #ff4b2b;
}

/* Patička */
footer { background: #2c3e50; color: #fff; text-align: center; padding: 40px 0; margin-top: 60px; }
footer a { color: #8ec3ff; }
.copyright { margin-top: 20px; font-size: 14px; opacity: 0.7; }

/* Přihlašovací stránka */
.login-bg { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #eef2f5; }
.login-container { background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }

/* Podbarvené logo na přihlašovací obrazovce */
.logo-center { text-align: center; font-size: 28px; font-weight: bold; margin-bottom: 25px; }
.logo-center a {
    color: #2c3e50; 
    background-color: #e8eff5; 
    padding: 8px 24px; 
    border-radius: 8px; 
    border: 1px solid #d1dfea; 
    display: inline-block;
}

.login-container h2, .login-container p { text-align: center; margin-bottom: 20px; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; }
.form-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; }

/* Drag & Drop zóna a seznam souborů */
.upload-section { background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin-bottom: 30px; }
.drop-zone { border: 2px dashed #0056b3; border-radius: 8px; padding: 40px; text-align: center; cursor: pointer; background: #f8fbff; transition: 0.3s; }
.drop-zone.dragover { background: #e2efff; border-color: #004494; }
.drop-zone p { font-size: 18px; color: #0056b3; margin-bottom: 10px; }
.file-preview-list { margin-top: 20px; }
.file-item { display: flex; align-items: center; gap: 15px; background: #f9f9f9; padding: 10px; border: 1px solid #eee; margin-bottom: 10px; border-radius: 5px; }
.file-item span { flex: 1; font-weight: bold; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item input { flex: 2; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
.file-item button { background: #dc3545; color: white; border: none; padding: 8px 12px; border-radius: 4px; cursor: pointer; }

/* Tabulka */
.files-table { width: 100%; border-collapse: collapse; margin-top: 15px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.files-table th, .files-table td { padding: 12px; border-bottom: 1px solid #eee; text-align: left; }
.files-table th { background: #e9ecef; font-weight: bold; color: #2c3e50; }
.files-table tbody tr:nth-child(odd) { background-color: #ffffff; }
.files-table tbody tr:nth-child(even) { background-color: #d8e2eb; } 
.files-table tbody tr:hover { background-color: #a5d6a7; transition: background-color 0.2s ease-in-out; }
.checkbox-cell { width: 40px; text-align: center; }

/* Toolbar & Pagination */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; background: #f8f9fa; padding: 10px 15px; border-radius: 5px; border: 1px solid #ddd; }
.toolbar-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pagination { display: flex; gap: 5px; align-items: center; }
.pagination a, .pagination span { padding: 6px 12px; border: 1px solid #ccc; background: #fff; text-decoration: none; border-radius: 4px; color: #333; font-size: 14px;}
.pagination a:hover { background: #e9ecef; }
.pagination .active { background: #0056b3; color: white; border-color: #0056b3; }
.limit-select { padding: 6px; border-radius: 4px; border: 1px solid #ccc; font-family: inherit; }

/* Skryté mobilní tlačítko Vybrat Vše na PC */
.mobile-select-all { display: none; }

/* Progress Bar */
.progress-container { width: 100%; background-color: #e9ecef; border-radius: 5px; margin-top: 15px; display: none; overflow: hidden; position: relative; height: 30px; border: 1px solid #ccc; }
.progress-bar { width: 0%; height: 100%; background-color: #28a745; transition: width 0.4s ease; }
.progress-text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #111; font-size: 14px; }
.action-buttons { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.status-banner { padding: 20px; border-radius: 8px; margin-bottom: 30px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.status-banner h3 { margin-bottom: 0; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.status-editing { background-color: #fff3cd; border: 1px solid #ffeeba; color: #856404; }
.status-ready { background-color: #d4edda; border: 1px solid #c3e6cb; color: #155724; }

/* Admin Odznáčky */
.badge { padding: 5px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; display: inline-block; }
.badge-success { background-color: #28a745; color: white; }
.badge-warning { background-color: #ffc107; color: #212529; }

/* =========================================================
   RESPONZIVNÍ DESIGN PRO MOBILY A TABLETY (max-width: 768px)
   ========================================================= */
@media (max-width: 768px) {
    .header-flex { flex-direction: column; gap: 15px; text-align: center; }
    nav { flex-direction: column; gap: 8px; width: 100%; }
    nav a { margin-left: 0; padding: 8px; background-color: transparent; color: #333; font-size: 16px; }
    header nav a.btn-primary { width: 100%; margin-top: 5px; }
    header nav a.btn-primary:active { background-color: #e2efff; color: #004494; }
    
    .services-grid { flex-direction: column; }
    .promo-card { transform: scale(1); margin-top: 25px; }
    
    .toolbar { flex-direction: column; gap: 15px; align-items: stretch; }
    .toolbar-actions { display: flex; flex-direction: column; width: 100%; gap: 10px; align-items: stretch; }
    .toolbar-actions .btn { width: 100%; }
    .toolbar .pagination { width: 100%; justify-content: center; flex-wrap: wrap; }
    
    .status-banner { flex-direction: column; text-align: center; gap: 15px; }
    .status-banner h3 { justify-content: center; }

    .mobile-select-all {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: bold;
        color: #0056b3;
        margin-top: 5px;
        cursor: pointer;
        padding: 10px;
        background: #eef5fb;
        border: 1px solid #cce0f0;
        border-radius: 5px;
        width: 100%;
        justify-content: center;
    }

    .files-table, .files-table tbody, .files-table tr, .files-table td { display: block; width: 100%; }
    .files-table thead { display: none; }
    
    .files-table tbody tr {
        margin-bottom: 15px; 
        border: 1px solid #ddd; 
        border-radius: 8px;
        background: #fff !important; 
        display: flex; 
        flex-wrap: wrap;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
        padding: 5px;
    }
    .files-table tbody tr:hover { background-color: #fcfcfc !important; }
    
    .files-table td {
        border-bottom: none; 
        padding: 10px; 
        position: relative;
        box-sizing: border-box; 
        word-break: break-word; 
    }
    
    .files-table td::before {
        content: attr(data-label); 
        display: block; 
        font-size: 11px;
        font-weight: bold; 
        color: #888; 
        text-transform: uppercase; 
        margin-bottom: 4px;
    }

    .mob-100 { width: 100% !important; }
    .mob-50 { width: 50% !important; }
    .mob-33 { width: 33.33% !important; }
    
    .checkbox-cell { 
        border-bottom: 1px solid #eee !important; 
        margin-bottom: 5px; 
        padding-bottom: 10px; 
        text-align: left !important;
    }
    
    .files-table .action-buttons { 
        flex-direction: column; 
        gap: 8px; 
        width: 100%; 
        align-items: stretch; 
        white-space: normal;
    }
    .files-table .action-buttons .btn { 
        width: 100%; 
        text-align: center; 
        margin: 0; 
        padding: 8px 10px; 
        font-size: 14px; 
        display: block; 
        box-sizing: border-box;
    }
}