/* =================================================================
   HEADER CSS - Společné styly pro header na všech stránkách
   Používá se jak pro user tak admin stránky
   ================================================================= */

/* Header - fixní horní lišta */
header.top-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: rgb(0, 0, 0);
    border-bottom: 0px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 2000;
}

/* =================================================================
   MOBILNÍ RESPONSIVNÍ STYLY PRO HEADER
   ================================================================= */

/* Reset základních prvků pro responsivní chování */
* {
    box-sizing: border-box;
}

/* Mobilní reset */
@media (max-width: 768px) {
    html, body {
        width: 100%;
        overflow-x: hidden;
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        min-width: unset !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Mobilní hamburger menu */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
}

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    display: none;
}

.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: -300px;
    width: 280px;
    height: 100%;
    background: #000;
    z-index: 9999;
    transition: left 0.3s ease;
    padding: 60px 20px 20px;
    box-sizing: border-box;
}

.mobile-menu.active {
    left: 0;
}

.mobile-menu-header {
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
    margin-bottom: 15px;
    color: white;
    font-weight: bold;
}

.mobile-menu nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu nav ul li {
    margin-bottom: 10px;
}

.mobile-menu nav ul li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 12px;
    background: #222;
    border-radius: 5px;
    font-size: 16px;
}

.mobile-menu nav ul li a:hover {
    background: #444;
}

.mobile-menu nav ul li a .menu-icon {
    vertical-align: baseline;
    margin-right: 5px;
    position: relative;
    top: 2px;
    width: 15px;
    height: 15px;
}

.mobile-menu-actions {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
}

.mobile-menu-actions a,
.mobile-menu-actions button {
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.mobile-menu-actions .profile-link {
    background: #444;
    color: white;
}

.mobile-menu-actions .logout-btn {
    background: red;
    color: white;
}

.mobile-menu-actions .login-btn {
    background: green;
    color: white;
}

/* Ikonka pro logout tlačítko */
.logout-icon {
    vertical-align: baseline;
    position: relative;
    top: 2px;
    margin-right: 3px;
}

/* Zajistit flexibilní šířku pouze na mobilech */
@media (max-width: 768px) {
    .top-header, .content, .sidebar, table {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* Univerzální responsivní CSS */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }
    
    .mobile-menu {
        display: block;
    }
    
    .user-actions {
        display: none !important;
    }
    
    /* Header - zajistit plnou šířku a žádný margin */
    .top-header, header.top-header {
        justify-content: center !important;
        position: fixed !important;
        margin: 0 !important;
        padding: 0 20px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    .top-header .logo {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .top-header .logo img {
        margin-left: 0 !important;
    }
    
    .mobile-menu-btn {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    /* Skrýt sidebar na mobilech */
    .sidebar {
        display: none !important;
    }
    
    /* Upravit content pro mobily - základní layout je v sidebar CSS */

    /* Upload stránka - úprava tiles - ODSTRANĚNO, nyní řízeno z user_upload.css */
    
    /* Tabulky - responsivní chování */
    table.modern-dashboard,
    table.modern-dashboard thead,
    table.modern-dashboard tbody,
    table.modern-dashboard th,
    table.modern-dashboard td,
    table.modern-dashboard tr {
        display: block !important;
    }
    
    table.modern-dashboard thead tr {
        display: none !important;
    }
    
    table.modern-dashboard tr {
        margin-bottom: 15px !important;
        border: 1px solid #ddd !important;
        border-radius: 5px !important;
        padding: 10px !important;
    }
    
    table.modern-dashboard td {
        text-align: right !important;
        padding-left: 50% !important;
        position: relative !important;
    }
    
    table.modern-dashboard td:before {
        content: attr(data-label) ": " !important;
        position: absolute !important;
        left: 10px !important;
        width: 45% !important;
        text-align: left !important;
        font-weight: bold !important;
    }
}

@media (max-width: 480px) {
    /* Upload tiles - ODSTRANĚNO, nyní řízeno z user_upload.css */
    
    /* Ceník - stack layout */
    .price-list .item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    
    .price-list .item .service-icon {
        width: 32px !important;
        height: 32px !important;
    }
    
    /* Menší padding pro velmi malé mobily */
    .content {
        padding: 70px 15px 30px 15px !important;
    }

    body .content {
        padding: 70px 15px 30px 15px !important;
    }
}