*{
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
 
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
    position: relative; 
    overflow-x: hidden;
    overflow-y: auto;  
    background-color: #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1080'%3E%3Cg fill='none' stroke='%230055aa' stroke-width='1' opacity='0.5'%3E%3Cpath d='M-100 600 Q 480 200 960 600 T 2020 600' /%3E%3Cpath d='M-100 800 Q 480 400 960 800 T 2020 800' stroke='%2300ff88' opacity='0.3' /%3E%3Cpath d='M-100 400 Q 480 0 960 400 T 2020 400' opacity='0.4' /%3E%3Cpath d='M200 -100 Q 600 500 200 1180' stroke='%2300ff88' opacity='0.2' /%3E%3Cpath d='M1700 -100 Q 1300 500 1700 1180' opacity='0.3' /%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



.center-content{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 40px;
    padding-top: 40px;
    justify-content: space-between;
    min-height: 100vh;
    box-sizing: border-box;
    position: relative;
}

.logo{
    color: white;
    font-size: 96px;
}


.btn-primary{
    text-decoration: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px; 
    color: white;
    font-size: 32px; 
    
    border: none;
    background-color: #0071e3; 
    
    padding: 18px 36px; 
    border-radius: 14px; 
    margin-bottom: 120px;

    box-shadow: none; 
    
    transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
    background-color: #0077ED; 
    transform: translateY(-2px); 
    box-shadow: 0 8px 15px rgba(0, 113, 227, 0.4); 
}


.tagline{
    color: white;
    border: 1px lightgray solid;
    border-radius: 16px;
    padding: 8px;
    font-size: 10px;
    background-color: rgba(128, 128, 128, 0.2);
    font-family: 'Montserrat', sans-serif; 
    font-weight: 500;
    margin-bottom: 60px;
}


@media screen and (max-width: 768px) {
    body::before {
        width: 30%;
        height: 80px;
        left: 5%;
        top: 20px;
    }

    body::after {
        width: 30%;
        height: 80px;
        right: 5%;
        bottom: 20px;
    }

    .center-content {
        padding-left: 20px;
        padding-right: 20px;
        width: 100%;
    }

    .logo {
        font-size: 13vw;
        margin-top: 80px; 
    }

    .btn-primary {
        width: auto;
        min-width: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 34px;
        padding: 24px 5%;
        margin-bottom: 80px; 
        box-shadow: 0 10px 30px -10px rgba(0, 54, 255, 0.5);
    }

    .tagline {
        width: auto; 
        max-width: 90%;
        font-size: 11px;
        padding: 10px 20px;
        box-sizing: border-box;
        margin-bottom: 100px; 
    }
}







/* REGISTRACE */

.form-layout {
    justify-content: center;
    gap: 15px;
    padding-top: 0;
}

.logo-section {
    text-align: center;
    margin-bottom: 40px; 
}

.logo-small {
    font-size: 52px;
    margin: 0;
    line-height: 1;
    letter-spacing: -1px;
}

.site-subtitle {
    color: #86868b; 
    font-size: 17px;
    margin-top: 12px;
    font-weight: 400;
}


.auth-card {
   
    background-color: rgba(20, 20, 20, 0.70); 
    
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px); 
    
    border: 1px solid rgba(255, 255, 255, 0.08);
    
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); 
    
    padding: 48px 40px; 
    
    border-radius: 24px; 
    
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
    z-index: 10;
}

.form-title {
    text-align: center;
    margin-top: 0;
    margin-bottom: 32px;
    font-size: 20px;
    color: #f5f5f7;
    font-weight: 600;
}

.form-group {
    margin-bottom: 24px; 
    width: 100%;
}

.form-group label {
    display: block;
    color: #86868b;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
}

.form-group input {
    width: 92%;
    padding: 16px; 
    
    background-color: rgba(0, 0, 0, 0.3); 
    
    border: 1px solid rgba(255, 255, 255, 0.1); 
    
    border-radius: 14px; 
    
    color: white;
    font-size: 16px;
    outline: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
}

.form-group input:focus {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #0071e3; 
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15); 
}


.btn-submit {
    width: 100%;
    background-color: #0071e3; 
    color: white;
    font-weight: 600;
    font-size: 17px;
    padding: 16px;
    border: none;
    
    
    border-radius: 14px; 
    
    margin-bottom: 24px;
    margin-top: 12px;
    cursor: pointer;
    box-shadow: none; 
    transition: transform 0.1s ease, background-color 0.2s;
}

.btn-submit:hover {
    background-color: #0077ED; 
    transform: scale(1.01);
}

.form-footer {
    text-align: center;
    color: #86868b;
    font-size: 14px;
}

.form-footer a {
    color: #2997ff;
    text-decoration: none;
    font-weight: 500;
    margin-left: 5px;
}

.form-footer a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 768px) {
    .auth-card {
        padding: 30px 24px;
        max-width: 90%;
    }
    
    .logo-small {
        font-size: 42px;
    }
}


.error-message {
    color: #ff453a; 
    font-size: 13px;
    margin-top: 6px;
    margin-left: 4px;
    display: block;
    text-align: left;
}

        
.input-error {
    border-color: #ff453a !important;
    background-color: rgba(255, 69, 58, 0.1) !important;
}

.logo-section a{
    text-decoration: none;
}
      
.alert-global {
    background-color: rgba(255, 69, 58, 0.15);
    border: 1px solid rgba(255, 69, 58, 0.3);
    color: #ff453a;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
}


.verify-text {
    color: #86868b;
    text-align: center;
    font-size: 14px;
    margin-bottom: 20px;
}

.input-code {
    letter-spacing: 5px;
    text-align: center;
    font-size: 24px !important; 
    font-weight: 600;
}


.success-msg {
    background-color: rgba(40, 167, 69, 0.15);
    border-color: rgba(40, 167, 69, 0.3);
    color: #28a745;
}

.form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    font-size: 13px;
    width: 100%;
    padding: 0 4px; 
}


.remember-me {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #86868b;
    user-select: none;
    font-weight: 500;
}

.remember-me input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    margin-right: 8px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    padding: 0; 
}


.remember-me input:checked {
    background-color: #0071e3;
    border-color: #0071e3;
}

.remember-me input:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.remember-me span:hover {
    color: #b0b0b5;
}


.forgot-password {
    color: #0071e3;
    text-decoration: none;
    font-weight: 500;
}

.forgot-password:hover {
    text-decoration: underline;
    color: #2997ff;
}




/* --- SUBSCRIPTION PAGE (2 Columns - Final & Aligned) --- */

.pricing-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

.pricing-header {
    text-align: center;
    margin-bottom: 50px;
}

.pricing-header h1 {
    font-size: 42px;
    color: white;
    margin: 0 0 10px 0;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.pricing-header p {
    color: #86868b;
    font-size: 17px;
    margin: 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    align-items: stretch; 
}


.pricing-card {
    background-color: rgba(22, 22, 23, 0.9);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px 25px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    min-height: 60vh;
}


.card-premium {
    background-color: rgba(28, 28, 30, 1);
    border: 1px solid rgba(0, 113, 227, 0.5);
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6);
    transform: scale(1.05);
    z-index: 2;
}


.badge {
    position: absolute;
    top: 20px;  
    right: 20px; 
    background: linear-gradient(90deg, #0071e3, #2997ff);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 113, 227, 0.5);
    z-index: 10;
}

.card-header {
    text-align: center;
    margin-bottom: 0; 
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.card-header h2 {
    font-size: 14px;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}

.card-header p {
    color: #86868b;
    font-size: 13px;
    margin: 0 0 10px 0;
}

.price {
    font-size: 36px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.5px;
}

.period {
    font-size: 13px;
    color: #86868b;
    font-weight: 400;
}


.card-features {
    flex-grow: 1;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    padding-top: 25px; 
}

.card-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.card-features li {
    color: #e6edf3;
    font-size: 14px;
    padding: 8px 0 8px 26px;
    position: relative;
    line-height: 1.4;
}

.card-features li .desc {
    color: #86868b;
    font-size: 12px;
    font-weight: 400;
}

.card-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 8px;
    font-weight: 700;
    font-size: 14px;
}

.card-free .card-features li::before { color: #4ade80; }
.card-premium .card-features li::before { color: #2997ff; }

.btn-plan {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
    margin-top: auto;
}

.text-green { color: #4ade80; }
.text-blue { color: #2997ff; }

.btn-green {
    background-color: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.2);
}
.btn-green:hover { background-color: rgba(74, 222, 128, 0.2); }

.btn-blue {
    background: #0071e3;
    box-shadow: 0 0 20px rgba(0, 113, 227, 0.3);
}
.btn-blue:hover { background: #0077ED; transform: scale(1.02); }

.pricing-footer {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

.benefit {
    color: #86868b;
    font-size: 12px;
    position: relative;
    padding-left: 15px;
}

.benefit::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 5px;
    height: 5px;
    background-color: #2997ff;
    border-radius: 50%;
}

@media screen and (max-width: 800px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 450px;
        margin: 0 auto;
    }
    .pricing-card {
        min-height: auto;
    }
    .card-premium {
        transform: scale(1);
        margin: 10px 0;
    }
}




/* --- DASHBOARD / APP LAYOUT (Bigger & Spaced) --- */

.app-container {
    max-width: 1200px;
    margin: 0 auto;
    
    
     padding: clamp(20px, 4vh, 60px) 30px 0 30px; 
    
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}


.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 25px; 
    margin-bottom: 50px;  
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}

.logo-text {
    font-size: 26px; 
    font-weight: 700;
    color: white;
    text-decoration: none;
    letter-spacing: -0.5px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.email {
    color: #e6edf3;
    font-weight: 500;
    font-size: 16px; 
}

.plan-badge {
    font-weight: 700;
    font-size: 12px; 
    padding: 4px 8px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 0.5px;
}

.plan-badge.text-green { color: #4ade80; border-color: rgba(74, 222, 128, 0.2); }
.plan-badge.text-blue { color: #2997ff; border-color: rgba(41, 151, 255, 0.2); }

.separator {
    width: 1px;
    height: 18px;
    background-color: rgba(255, 255, 255, 0.2);
}

.logout-link {
    color: #86868b;
    font-size: 15px; 
    text-decoration: none;
    transition: color 0.2s;
}
.logout-link:hover { color: #ff453a; }


.app-content {
    flex-grow: 1;
    animation: fadeIn 0.5s ease;
}

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


.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px; 
}

.action-bar h1 {
    font-size: 36px; 
    color: white;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1;
}

.btn-new-invoice {
    background-color: #0071e3;
    color: white;
    padding: 12px 24px; 
    border-radius: 10px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background 0.2s, transform 0.1s;
    box-shadow: 0 0 20px rgba(0, 113, 227, 0.3);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.btn-new-invoice:hover {
    background-color: #0077ED;
    transform: scale(1.02);
}


.filter-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 25px;
}

.tab {
    background: transparent;
    border: none;
    color: #86868b;
    padding: 10px 20px; 
    font-size: 15px; 
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
}

.tab:hover {
    color: white;
    background-color: rgba(255, 255, 255, 0.08);
}

.tab.active {
    background-color: white;
    color: black;
    font-weight: 600;
}


.invoice-list-container {
    background-color: rgba(22, 22, 23, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.empty-state {
    color: #86868b;
    font-size: 16px;
}


.badge-link {
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.badge-link:hover {
    opacity: 0.8; 
}



/* --- APPLE STYLE UPGRADE BUTTON --- */
.btn-apple-upgrade {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #007AFF 0%, #0056b3 100%);
    color: white;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 20px; /* Pill shape */
    font-size: 13px;
    font-weight: 600;
    margin-left: 15px;
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-apple-upgrade:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0, 122, 255, 0.4);
    background: linear-gradient(135deg, #0A84FF 0%, #0062cc 100%);
}

.btn-apple-upgrade .icon {
    font-size: 12px;
}

/* --- SUBSCRIPTION MANAGEMENT CARD --- */
.manage-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.subscription-status-card {
    background-color: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.status-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.status-details {
    margin: 30px 0;
    text-align: left;
    background: rgba(0,0,0,0.2);
    padding: 20px;
    border-radius: 12px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: #cbd5e1;
}

.detail-row:last-child {
    border-bottom: none;
}

.status-badge.active {
    background-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.btn-cancel {
    background: transparent;
    border: 1px solid #ef4444;
    color: #ef4444;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
    width: 100%;
    margin-bottom: 10px;
}

.btn-cancel:hover {
    background: #ef4444;
    color: white;
}

.btn-back {
    color: #64748b;
    text-decoration: none;
    font-size: 14px;
}

/* --- MODAL WINDOW --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #1e293b;
    padding: 30px;
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    border: 1px solid #334155;
    color: #fff;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.modal-content h3 {
    margin-bottom: 15px;
}

.modal-subtext {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 25px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-modal-confirm {
    background: #ef4444;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
}

.btn-modal-back {
    background: #334155;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
}



/* --- VYLEPŠENÍ PŘEDPLATNÉHO (SEZNAMY) --- */


/* Zvýrazněná položka "Vše z tarifu FREE" */
.plus-feature {
    color: #4ade80; /* Zelená */
    font-weight: bold;
    margin-bottom: 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    display: block;
}

/* Odkaz "Zpět na nástěnku" */
.back-link-container {
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
}

.back-link-container a {
    color: #64748b;
    text-decoration: none;
    font-size: 16px;
    padding: 10px;
    transition: color 0.2s;
}

.back-link-container a:hover {
    color: #fff;
}



/* --- TLAČÍTKO PRO SPRÁVU PŘEDPLATNÉHO (PREMIUM) --- */
.btn-apple-manage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(13, 45, 30, 0.562); /* Průhledné pozadí */
    color: #e2e8f0; /* Světle šedý text */
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    margin-left: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Jemný rámeček */
    transition: all 0.3s ease;
}

.btn-apple-manage:hover {
    background: rgba(255, 255, 255, 0.2); /* Při najetí se více rozsvítí */
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    transform: translateY(-1px);
}

.btn-apple-manage .icon {
    font-size: 14px; /* Ikona ozubeného kolečka */
    opacity: 0.8;
}



/* --- STYLY PRO AKTIVNÍ TARIF V KARTĚ --- */
.btn-plan.btn-active-static {
    background-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid #4ade80;
    cursor: default; /* Nelze na to klikat */
}

.btn-plan.btn-active-static:hover {
    transform: none; /* Žádný efekt při najetí */
    background-color: rgba(34, 197, 94, 0.2);
}

.cancel-subscription-wrapper {
    margin-top: 15px;
    text-align: center;
}

.btn-text-red {
    background: none;
    border: none;
    color: #ef4444; /* Červená */
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.btn-text-red:hover {
    opacity: 1;
}

.expiry-date-info {
    margin-top: 10px;
    font-size: 13px;
    color: #94a3b8;
    text-align: center;
}


/* --- SUBSCRIPTION ALERTS & BUTTONS --- */

/* Hláška nahoře (když je zrušeno) */
.alert-canceled-box {
    max-width: 400px;      /* Užší rámeček */
    margin: 5px auto 15px auto; /* Menší mezery okolo (5px nahoře, 15px dole) */
    padding: 6px 15px;     /* Menší vycpávka uvnitř */
    font-size: 11px;       /* Menší písmo */
    
    /* Vzhled */
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    border-radius: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}


.pricing-header h1 {
    margin-bottom: 5px;
}

/* Zelené tlačítko "Aktivní tarif" (neklikatelné) */
.btn-plan.btn-active-static {
    background-color: rgba(34, 197, 94, 0.1);
    color: #4ade80;
    border: 1px solid #4ade80;
    cursor: default;
    margin-top: 20px;
}

.btn-plan.btn-active-static:hover {
    transform: none;
    box-shadow: none;
}

/* Informace o datu pod tlačítkem */
.expiry-date-info {
    margin-top: 15px;
    font-size: 13px;
    color: #94a3b8; /* Šedá */
    text-align: center;
}

/* Obal pro tlačítka akcí (Zrušit / Obnovit) */
.cancel-subscription-wrapper {
    margin-top: 15px;
    text-align: center;
    min-height: 40px; /* Aby to neskákalo */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Malý červený textový odkaz "Zrušit tarif" */
.btn-text-red {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    opacity: 0.7;
    transition: 0.2s;
    padding: 5px;
}

.btn-text-red:hover {
    opacity: 1;
}

/* Tlačítko "Obnovit Premium" (když je zrušeno) */
.btn-renew {
    background: transparent;
    border: 1px solid #4ade80;
    color: #4ade80;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-renew:hover {
    background: rgba(34, 197, 94, 0.1);
    transform: translateY(-2px);
}


/* --- VNITŘNÍ STAV PŘEDPLATNÉHO V KARTĚ --- */

/* Červený boxík uvnitř karty, když je zrušeno */
.internal-cancel-notice {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #ef4444;
    padding: 4px;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.4;
    text-align: center;
}

/* Zelený boxík, když se úspěšně obnoví (volitelné) */
.internal-success-notice {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid #4ade80;
    color: #4ade80;
    padding: 4px;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 10px;
    text-align: center;
}



/* --- ZELENÉ TLAČÍTKO DO MODALU (PRO OBNOVENÍ) --- */
.btn-modal-confirm-green {
    background: #22c55e; /* Zelená */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.2s;
}

.btn-modal-confirm-green:hover {
    background: #16a34a; /* Tmavší zelená */
}




/* --- SETUP MODAL (BEZ FIXU KURZORU) --- */

.req-star { color: #ff3b30; margin-left: 3px; font-weight: bold; }

.setup-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.setup-modal-overlay.active { display: flex; opacity: 1; }

.setup-card {
    background-color: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    
    /* Kompaktní padding */
    padding: 30px 35px 25px 35px;
    
    border-radius: 24px;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Scrollování pro malé displeje */
    max-height: 85vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Scrollbar styling */
.setup-card::-webkit-scrollbar { width: 8px; }
.setup-card::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
.setup-card::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
.setup-card::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

.setup-modal-overlay.active .setup-card { transform: scale(1); }

/* Modrý nadpis */
.setup-card h2  span{
    text-align: center;
    color: #0071e3;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 22px;
    font-weight: 600;
    flex-shrink: 0;
}

.setup-card h2 {
    text-align: center;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 22px;
    font-weight: 600;
    flex-shrink: 0;
}


.setup-card .subtitle {
    text-align: center;
    color: #86868b;
    font-size: 13px;
    margin-bottom: 20px;
    line-height: 1.4;
    flex-shrink: 0;
}

/* Formulář */
.setup-card form {
    display: flex;
    flex-direction: column;
}

.setup-card .form-group { margin-bottom: 14px; }

.setup-card label {
    display: block;
    color: #ffffff;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
}

.setup-card input[type="text"],
.setup-card input[type="email"] {
    width: 100%;
    padding: 10px 14px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
}

.setup-card input:focus {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #0071e3;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

.row-city-zip { display: flex; gap: 12px; }
.row-city-zip > div { flex: 1; }

/* Radio buttons */
.radio-button-container {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 2px 0 5px 5px;
    flex-wrap: wrap;
}

.radio-button { display: inline-block; position: relative; }
.radio-button__input { position: absolute; opacity: 0; width: 0; height: 0; }

.radio-button__label {
    display: inline-block;
    padding-left: 26px;
    margin-bottom: 0;
    position: relative;
    font-size: 13px;
    color: #f2f2f2;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.radio-button__custom {
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid #666;
    transition: all 0.3s ease;
    background-color: transparent;
}

.radio-button__input:checked + .radio-button__label .radio-button__custom {
    background-color: #0071e3;
    border-color: transparent;
    box-shadow: 0 0 10px rgba(0, 113, 227, 0.4);
    transform: translateY(-50%) scale(0.9); 
}

.radio-button__input:checked + .radio-button__label { color: #0071e3; }
.radio-button__label:hover .radio-button__custom { border-color: #0071e3; }

/* Tlačítka */
.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
    padding-bottom: 5px;
}

.setup-card button {
    padding: 0 15px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    border: none;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.setup-card button:hover { opacity: 0.9; }

.setup-card .btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    flex: 1;
    cursor: pointer;
}

.setup-card .btn-primary {
    background-color: #0071e3;
    color: white;
    flex: 2;
    cursor: pointer;
}

.setup-card .close-modal {
    position: absolute; top: 20px; right: 20px;
    color: #86868b; font-size: 24px;
    background: none; border: none;
    z-index: 10;
    cursor: pointer;
}
.setup-card .close-modal:hover { color: white; }

#dic-group, #manual-email-group {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}


/* --- VALIDACE FORMULÁŘE --- */

/* Červený rámeček při chybě */
.setup-card input.input-error {
    border-color: #ff3b30 !important;
    background-color: rgba(255, 59, 48, 0.1) !important;
}

/* Text chybové hlášky pod inputem */
.error-message {
    display: block;
    color: #ff3b30;
    font-size: 11px;
    margin-top: 5px;
    margin-left: 4px;
    animation: fadeIn 0.2s ease-in-out;
}

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



/* ... (Zbytek CSS zůstává stejný) ... */

/* --- Action Bar a tlačítka --- */

.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Kontejner pro tlačítka vpravo (Nový) */
.action-buttons {
    display: flex;
    gap: 10px; /* Mezera mezi tlačítky */
}

/* Tlačítko Nová Faktura (Původní) */
.btn-new-invoice {
    background-color: #0071e3;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s;
    cursor: pointer;
}
.btn-new-invoice:hover {
    background-color: #0077ED;
}

/* Nové tlačítko NASTAVENÍ (Ozubené kolo) */
.btn-settings {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 42px; /* Čtvercové */
    height: 40px; /* Stejná výška jako btn-new-invoice (zhruba) */
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.2s;
}

.btn-settings:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* ... (Zbytek CSS pro Modal atd. zůstává) ... */
/* --- SETUP MODAL (BEZ FIXU KURZORU) --- */
/* ... sem zkopíruj ten zbytek CSS co jsi měl ... */
.req-star { color: #ff3b30; margin-left: 3px; font-weight: bold; }
/* ... atd ... */

/* --- SELECT BOX (VÝBĚR STÁTU) --- */
.setup-card select {
    width: 100%;
    padding: 10px 14px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: white;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s;
    
    /* Odstranění výchozí šipky prohlížeče */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Vlastní bílá šipka dolů (SVG kód) */
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 10px auto;
    cursor: pointer;
}

.setup-card select:focus {
    background-color: rgba(0, 0, 0, 0.5);
    border-color: #0071e3;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

/* Stylování možností po rozkliknutí */
.setup-card select option {
    background-color: #1c1c1e; /* Tmavé pozadí */
    color: white;
    padding: 10px;
}

/* Skrytý input pro vlastní stát */
#custom-country-group {
    display: none;
    margin-top: 10px;
    animation: fadeIn 0.3s ease-in-out;
}



/* ============================================== */
/* TABULKA FAKTUR (FINÁLNÍ VZHLED)                */
/* ============================================== */

/* Kontejner */
.invoice-list-wrapper {
    background-color: #0b0b0c; /* Velmi tmavé pozadí */
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    height: 600px; 
    overflow-y: auto;
    margin-top: 20px;
    display: block; /* Zajistí blokové chování */
}

/* Scrollbar */
.invoice-list-wrapper::-webkit-scrollbar { width: 8px; }
.invoice-list-wrapper::-webkit-scrollbar-track { background: #0b0b0c; }
.invoice-list-wrapper::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* Tabulka */
.invoice-table { 
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0;
}

/* Hlavička - Sticky a zarovnání */
.invoice-table thead th {
    position: sticky;
    top: 0;
    background-color: #161617; /* Lehce světlejší hlavička */
    z-index: 10;
    text-align: left;
    color: #888;
    font-size: 11px;
    padding: 15px 20px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    text-align: center;
}

/* Řádky */
.invoice-table tbody tr {
    background-color: transparent;
    transition: background-color 0.2s;
    /* Důležité: Výška řádku podle obsahu, ne 100% */
    height: auto; 
}

.invoice-table tbody tr:hover { 
    background-color: rgba(255, 255, 255, 0.03); 
}

.invoice-table td { 
    padding: 16px 20px; 
    color: #fff; 
    font-size: 13px; 
    border-bottom: 1px solid #222; 
    vertical-align: middle;
}

/* --- FILTRY (BEZ PODTRŽENÍ) --- */
.filter-tabs .tab {
    text-decoration: none !important; /* Vypne podtržení */
    color: #888;
    padding: 10px 20px;
    font-weight: 600;
    transition: all 0.2s;
    background: transparent;
    border-radius: 6px;
    display: inline-block;
}
.filter-tabs .tab:hover { color: #fff; background-color: rgba(255, 255, 255, 0.05); }
.filter-tabs .tab.active { color: #000; background-color: #fff; }

/* --- STATUS BADGES --- */
.status-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
}
.status-draft { background: rgba(255, 255, 255, 0.1); color: #aaa; border: 1px solid #444; }
.status-sent { background: rgba(0, 113, 227, 0.15); color: #2997ff; border: 1px solid rgba(0, 113, 227, 0.3); }
.status-paid { background: rgba(48, 209, 88, 0.15); color: #30d158; border: 1px solid rgba(48, 209, 88, 0.3); }

/* --- AKČNÍ TLAČÍTKA (Apple Style) --- */
.action-group {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}

/* PDF ikonka (nenápadná) */
.btn-pdf-icon {
    color: #888;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-pdf-icon:hover { color: #fff; }

/* Upravit tlačítko (Apple look) */
.btn-edit-apple {
    text-decoration: none;
    background-color: transparent; 
    color: #2997ff; /* Apple Blue */
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 12px;
    transition: all 0.2s;
}
.btn-edit-apple:hover {
    background-color: rgba(41, 151, 255, 0.1);
    text-decoration: none;
}

.text-right { text-align: right; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #666; }


/* --- TABULKA - ZAROVNÁNÍ --- */
.invoice-table th, .invoice-table td {
    padding: 16px 24px; /* Větší padding pro vzdušnost */
    vertical-align: middle;
}

/* --- STAV A TOGGLE --- */
.status-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-badge {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    min-width: 80px; /* Fixní šířka pro zarovnání */
    text-align: center;
}
.status-draft { background: rgba(255, 255, 255, 0.1); color: #aaa; border: 1px solid #444; }
.status-sent { background: rgba(0, 113, 227, 0.15); color: #2997ff; border: 1px solid rgba(0, 113, 227, 0.3); } /* Modrá */
.status-paid { background: rgba(48, 209, 88, 0.15); color: #30d158; border: 1px solid rgba(48, 209, 88, 0.3); } /* Zelená */
.status-overdue { background: rgba(255, 69, 58, 0.15); color: #ff453a; border: 1px solid rgba(255, 69, 58, 0.3); } /* Červená */

/* Toggle Switch (Swipe Button) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}
.toggle-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #3a3a3c;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}
input:checked + .slider {
    background-color: #30d158; /* Zelená aktivní */
}
input:checked + .slider:before {
    transform: translateX(14px);
}
.slider.round {
    border-radius: 20px;
}
.slider.round:before {
    border-radius: 50%;
}

/* Filtry tlačítka (bez podtržení, jen active state) */
.filter-tabs button.tab {
    background: transparent;
    border: none;
    color: #888;
    padding: 10px 20px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}
.filter-tabs button.tab.active {
    color: #fff;
    border-bottom: 2px solid #2997ff; /* Modrý proužek místo pozadí, vypadá moderněji */
}


/* --- TABULKA - KONTEJNER A ZAROVNÁNÍ --- */
.invoice-list-wrapper {
    background-color: #0b0b0c; /* Velmi tmavé pozadí */
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    height: 600px; 
    overflow-y: auto;
    margin-top: 20px;
    display: block; 
}

/* Scrollbar */
.invoice-list-wrapper::-webkit-scrollbar { width: 8px; }
.invoice-list-wrapper::-webkit-scrollbar-track { background: #0b0b0c; }
.invoice-list-wrapper::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

/* Tabulka samotná */
.invoice-table { 
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0;
}

/* Hlavička - Sticky a zarovnání */
.invoice-table thead th {
    position: sticky;
    top: 0;
    background-color: #161617; /* Lehce světlejší hlavička */
    z-index: 10;
    text-align: left;
    color: #888;
    font-size: 11px;
    padding: 15px 20px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
}

/* Řádky a buňky */
.invoice-table tbody tr {
    background-color: transparent;
    transition: background-color 0.2s;
    height: auto; 
}

.invoice-table tbody tr:hover { 
    background-color: rgba(255, 255, 255, 0.03); 
}

.invoice-table td { 
    padding: 16px 20px; 
    color: #fff; 
    font-size: 13px; 
    border-bottom: 1px solid #222; 
    vertical-align: middle;
    text-align: center;
}

/* --- FILTRY (BEZ POZADÍ, JEN AKTIVNÍ) --- */
.filter-tabs {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.filter-tabs button.tab {
    background: transparent;
    border: none;
    color: #888;
    padding: 10px 15px;
    font-weight: 600;
    cursor: pointer;
    font-size: 13px;
    text-decoration: none !important;
    transition: all 0.2s;
    border-radius: 6px;
}

.filter-tabs button.tab:hover { 
    color: #fff; 
}

.filter-tabs button.tab.active {
    background-color: rgba(255, 255, 255, 0.1); /* Průhledná bílá */
    color: #fff;
    backdrop-filter: blur(5px);
}

/* --- STAV A TOGGLE (SWIPE BUTTON) --- */
.status-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-badge {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    min-width: 89px;
    text-align: center;
    letter-spacing: 0.5px;
}
/* Barvy */
.status-draft { background: rgba(255, 255, 255, 0.1); color: #aaa; border: 1px solid #444; }
.status-sent { background: rgba(0, 113, 227, 0.15); color: #2997ff; border: 1px solid rgba(0, 113, 227, 0.3); } /* Modrá */
.status-paid { background: rgba(48, 209, 88, 0.15); color: #30d158; border: 1px solid rgba(48, 209, 88, 0.3); } /* Zelená */
.status-overdue { background: rgba(255, 69, 58, 0.15); color: #ff453a; border: 1px solid rgba(255, 69, 58, 0.3); } /* Červená */

/* Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #3a3a3c;
    transition: .4s;
    border-radius: 20px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider { background-color: #30d158; } /* Zelená aktivní */
input:checked + .slider:before { transform: translateX(16px); }

/* --- AKČNÍ TLAČÍTKA (Apple Style) --- */
.action-group {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}

/* PDF ikonka (nenápadná) */
.btn-pdf-icon {
    color: #888;
    text-decoration: none;
    font-size: 12px;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.btn-pdf-icon:hover { color: #fff; }

/* Upravit tlačítko (Apple look) */
.btn-edit-apple {
    text-decoration: none;
    background-color: transparent; 
    color: #2997ff; /* Apple Blue */
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 12px;
    transition: all 0.2s;
}
.btn-edit-apple:hover {
    background-color: rgba(41, 151, 255, 0.1);
    text-decoration: none;
}

.text-right { text-align: right; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #666; }

/* ============================================== */
/* TABULKA FAKTUR - KOMPLETNÍ STYL (APPLE)        */
/* ============================================== */

/* --- 1. KONTEJNER A TABULKA --- */
.invoice-list-wrapper {
    background-color: #0b0b0c;
    border: 1px solid #333;
    border-radius: 12px;
    overflow: hidden;
    height: 600px; 
    overflow-y: auto;
    margin-top: 20px;
    display: block; 
}

/* Tmavý scrollbar */
.invoice-list-wrapper::-webkit-scrollbar { width: 8px; }
.invoice-list-wrapper::-webkit-scrollbar-track { background: #0b0b0c; }
.invoice-list-wrapper::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }

.invoice-table { 
    width: 100%; 
    border-collapse: collapse; 
    border-spacing: 0;
    /* Důležité: Fixní rozložení pro přesné sloupce */
    table-layout: fixed; 
}
.invoice-table th:nth-child(5),
.invoice-table td:nth-child(5) {

    width: 130px !important;

}

/* --- 2. ZAROVNÁNÍ BUNĚK (TH i TD) --- */
.invoice-table th, .invoice-table td {
    padding: 18px 24px; /* Vzdušné mezery */
    border-bottom: 1px solid #222;
    vertical-align: middle; /* Vertikální střed */
    white-space: nowrap; /* Text se nebude zalamovat */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Výchozí zarovnání (doleva) - Číslo, Odběratel, Datum... */
.invoice-table th, .invoice-table td {
    text-align: center;
}

/* Zarovnání na STŘED (Zaplaceno, Stáhnout) */
.invoice-table th.text-center, 
.invoice-table td.text-center {
    text-align: center;
}
/* Centrování obsahu (přepínače a ikony) */
.invoice-table td.text-center > * {
    margin: 0 auto; 
}

/* Zarovnání DOPRAVA (Akce) */
.invoice-table th.text-right, 
.invoice-table td.text-right {
    text-align: center;
}

/* --- 3. HLAVIČKA --- */
.invoice-table thead th {
    position: sticky;
    top: 0;
    background-color: #161617;
    z-index: 10;
    color: #888;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    text-align: center;
}

/* --- 4. TĚLO TABULKY --- */
.invoice-table tbody tr {
    background-color: transparent;
    transition: background-color 0.2s;
    height: 65px; /* Pevná výška řádku */
}
.invoice-table tbody tr:hover { 
    background-color: rgba(255, 255, 255, 0.03); 
}
.invoice-table td {
    color: #fff;
    font-size: 13px;
}

/* --- 5. KOMPONENTY V TABULCE --- */

/* Stav (Badge) */
.status-badge {
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    min-width: 89px;
    text-align: center;
    display: inline-block;
    letter-spacing: 0.5px;
}
/* Barvy stavů */
.status-draft { background: rgba(255, 255, 255, 0.1); color: #aaa; border: 1px solid #444; }
.status-sent { background: rgba(0, 113, 227, 0.15); color: #2997ff; border: 1px solid rgba(0, 113, 227, 0.3); }
.status-paid { background: rgba(48, 209, 88, 0.15); color: #30d158; border: 1px solid rgba(48, 209, 88, 0.3); }
.status-overdue { background: rgba(255, 69, 58, 0.15); color: #ff453a; border: 1px solid rgba(255, 69, 58, 0.3); }

/* Toggle Switch (Přepínač) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    vertical-align: middle;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #3a3a3c;
    transition: .4s;
    border-radius: 20px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .slider { background-color: #30d158; }
input:checked + .slider:before { transform: translateX(16px); }

/* PDF Ikona */
.btn-pdf-icon {
    color: #888;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.2s;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
}
.btn-pdf-icon:hover { 
    color: #fff; 
    background-color: rgba(255,255,255,0.1); 
}

/* Tlačítko Upravit */
.btn-edit-apple {
    text-decoration: none;
    background-color: transparent; 
    color: #2997ff; 
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 12px;
    transition: all 0.2s;
    display: inline-block;
}
.btn-edit-apple:hover {
    background-color: rgba(41, 151, 255, 0.1);
}

/* Skupina akcí (zarovnání doprava) */
.action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

/* --- 6. FILTRY (APPLE STYLE) --- */
.filter-tabs {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.filter-tabs button.tab {
    background: transparent;
    border: none;
    color: #888; /* Neaktivní */
    padding: 8px 16px;
    font-weight: 500;
    cursor: pointer;
    font-size: 13px;
    border-radius: 18px;
    transition: all 0.2s;
    text-decoration: none !important;
}

.filter-tabs button.tab:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.05);
}

.filter-tabs button.tab.active {
    background-color: rgba(255, 255, 255, 0.15); /* Aktivní pozadí */
    color: #fff;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

/* Prázdný stav */
.empty-message { 
    text-align: center; 
    padding: 60px; 
    color: #666; 
    font-size: 14px; 
}


 /* STYLY PRO TLAČÍTKA AKCE */
        .action-column {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
        }
        
        .btn-delete-apple {
            background: none;
            border: none;
            color: #ff3b30; /* Apple Red */
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            transition: background-color 0.2s ease;
        }

        .btn-delete-apple:hover {
            background-color: rgba(255, 59, 48, 0.1);
            text-decoration: none;
        }

        /* --- APPLE STYLE MODAL PRO MAZÁNÍ --- */
        .apple-modal-overlay {
            display: none; /* Skryté defaultně */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4); /* Ztmavení pozadí */
            backdrop-filter: blur(8px); /* Rozmazání pozadí alá macOS */
            z-index: 9999;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.2s ease-out;
        }

        .apple-modal-box {
            background: #000000;
            width: 320px;
            border-radius: 14px;
            padding: 24px;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
            transform: scale(0.95);
            animation: popIn 0.2s ease-out forwards;
            font-family: -apple-system, BlinkMacSystemFont, sans-serif;
        }

        .apple-modal-icon {
            font-size: 40px;
            color: #ff3b30;
            margin-bottom: 16px;
        }

        .apple-modal-title {
            font-size: 18px;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 8px;
        }

        .apple-modal-text {
            font-size: 14px;
            color: #86868b;
            margin-bottom: 24px;
            line-height: 1.4;
        }

        .apple-modal-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

        .apple-btn {
            flex: 1;
            padding: 10px 0;
            border-radius: 10px;
            font-size: 15px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: transform 0.1s, opacity 0.2s;
        }

        .apple-btn:active {
            transform: scale(0.98);
        }

        .apple-btn-cancel {
            background-color: #f2f2f7;
            color: #1d1d1f;
        }
        .apple-btn-cancel:hover {
            background-color: #e5e5ea;
        }

        .apple-btn-delete {
            background-color: #ff3b30;
            color: #fff;
        }
        .apple-btn-delete:hover {
            background-color: #ff453a; /* Trochu světlejší při hover */
        }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

        /* 1. TOHLE SROVNÁ PRVKY VEDLE SEBE (Rodič) */
.filter-search-container {
    display: flex;               /* Klíčové: hodí je do řádku */
    justify-content: space-between; /* Roztáhne je: tlačítka vlevo, search vpravo */
    align-items: center;         /* Zarovná je na střed výškově */
    width: 100%;
    height: auto;
}

/* 2. TOHLE JE TEN TVŮJ NEONOVÝ DESIGN */
.search-box {
    display: flex;
    align-items: center;
    background-color: #2b2b2b; /* Tmavě šedá výplň */
    border-radius: 14px;       /* Pilulka */
    padding: 10px 20px;
    width: 300px;
    
    /* Spodní neonová linka a záře */
     /* Rozmazaná záře */
        
    transition: all 0.3s ease;
}

/* Lupa - bílá */
.search-box i {
    color: #767676;
    margin-right: 12px;
    font-size: 16px;
}

/* Input - průhledný */
.search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #eeeeee;
    width: 100%;
    font-size: 15px;
}

.search-box input::placeholder {
    color: #888;
}

/* Efekt při kliknutí */
.search-box:focus-within {
    box-shadow: 
        inset 0 -2px 0 #3399ff, 
        0 6px 20px -2px rgba(0, 140, 255, 0.8);
}


/* --- Styl pro zamčené tlačítko (Profi Look) --- */
.btn-new-invoice.locked {
    background: linear-gradient(135deg, rgba(40, 10, 10, 0.9) 0%, rgba(60, 20, 20, 0.8) 100%);
    border: 1px solid rgba(255, 80, 80, 0.2);
    color: #ff8080;
    cursor: not-allowed;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.btn-new-invoice.locked:hover {
    border-color: rgba(255, 80, 80, 0.4);
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.15);
    transform: translateY(-1px);
}

.btn-new-invoice.locked i {
    font-size: 0.9em;
    opacity: 0.8;
}

/* --- Progress Bar pod tlačítkem --- */
.usage-container {
    width: 100%;
    margin-top: 8px;
    text-align: right;
}

.usage-text {
    font-size: 11px;
    color: #666;
    margin-bottom: 3px;
    display: block;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.usage-text.limit-reached {
    color: #ff6b6b; /* Pěkná soft červená */
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.2);
}

.progress-track {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: #4caf50; /* Zelená pro normální stav */
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Když je plno, progress bar zčervená a září */
.progress-fill.full {
    background: linear-gradient(90deg, #ff4d4d, #ff1a1a);
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.5);
}



.limit-modal-overlay {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px); /* Rozmazání pozadí */
        -webkit-backdrop-filter: blur(8px);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: fadeIn 0.3s ease;
    }

    /* Samotné okno */
    .limit-modal-box {
        background: #1c1c1e; /* Tmavá Apple šedá */
        width: 90%;
        max-width: 400px;
        border-radius: 16px;
        padding: 30px;
        text-align: center;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
        border: 1px solid rgba(255,255,255,0.1);
        transform: scale(0.95);
        animation: scaleIn 0.2s ease forwards;
    }

    /* Ikona zámku */
    .limit-modal-icon {
        width: 60px; height: 60px;
        background: rgba(255, 59, 48, 0.15); /* Červená podklad */
        color: #ff453a; /* Apple červená */
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 20px auto;
        font-size: 24px;
    }

    /* Texty */
    .limit-modal-content h3 {
        margin: 0 0 10px 0;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
    }
    .limit-modal-content p {
        color: #aeaeb2;
        font-size: 15px;
        margin: 0 0 5px 0;
        line-height: 1.5;
    }
    .limit-modal-content .sub-text {
        font-size: 13px;
        color: #636366;
        margin-bottom: 25px;
    }

    /* Tlačítka */
    .limit-modal-actions {
        display: flex;
        gap: 12px;
        justify-content: center;
    }
    .btn-limit-cancel {
        background: rgba(255,255,255,0.1);
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 14px;
        cursor: pointer;
        transition: 0.2s;
    }
    .btn-limit-cancel:hover { background: rgba(255,255,255,0.2); }

    .btn-limit-upgrade {
        background: #007aff; /* Apple modrá */
        color: white;
        text-decoration: none;
        padding: 10px 24px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        transition: 0.2s;
    }
    .btn-limit-upgrade:hover { background: #0062cc; box-shadow: 0 0 15px rgba(0, 122, 255, 0.4); }

    /* Animace */
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

    /* Styl pro tlačítko smazat účet v hlavičce */
        .btn-delete-account-header {
            color: #666;
            font-size: 16px;
            text-decoration: none;
            margin-left: 15px;
            transition: color 0.3s ease;
            cursor: pointer;
            padding: 5px;
            opacity: 0.7;
        }
        .btn-delete-account-header:hover {
            color: #ff3b30; /* Červená při najetí */
            opacity: 1;
        }
        .header-right {
            display: flex;
            align-items: center;
        }


        .cookie-banner {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(150px); /* Výchozí stav schovaný dole */
            width: 90%;
            max-width: 700px;
            background: rgba(30, 30, 32, 0.85); /* Tmavá poloprůhledná */
            backdrop-filter: blur(25px); /* Apple blur efekt */
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 18px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
            z-index: 10000;
            opacity: 0;
            transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: #fff;
            text-align: left;
        }

        /* Třída pro zobrazení banneru */
        .cookie-banner.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
        }

        /* Responzivita - na desktopu vedle sebe */
        @media (min-width: 650px) {
            .cookie-banner {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }
            .cookie-text {
                flex: 1;
                padding-right: 24px;
            }
            .cookie-buttons {
                flex-shrink: 0;
                display: flex;
                flex-direction: column; 
                gap: 12px;
                min-width: 220px;
            }
        }

        .cookie-text h3 {
            margin: 0 0 8px 0;
            color: #fff;
            font-size: 17px;
            font-weight: 600;
        }

        .cookie-text p {
            margin: 0;
            color: #d1d1d6; /* Apple light gray text */
            font-size: 13px;
            line-height: 1.5;
        }

        .cookie-link {
            color: #0A84FF; /* Apple Blue */
            text-decoration: none;
            font-weight: 500;
            margin-top: 4px;
            display: inline-block;
        }
        .cookie-link:hover {
            text-decoration: underline;
        }

        .cookie-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        /* Tlačítka */
        .btn-cookie-primary, .btn-cookie-secondary {
            border: none;
            padding: 12px 20px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
            width: 100%;
        }

        .btn-cookie-primary:active, .btn-cookie-secondary:active {
            transform: scale(0.96);
        }

        /* Rozumím - Hlavní tlačítko */
        .btn-cookie-primary {
            background-color: #fff;
            color: #000;
        }
        .btn-cookie-primary:hover {
            background-color: #f2f2f2;
            box-shadow: 0 0 10px rgba(255,255,255,0.2);
        }

        /* Nezbytně nutné - Vedlejší tlačítko */
        .btn-cookie-secondary {
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
            backdrop-filter: blur(10px);
        }
        .btn-cookie-secondary:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }


        /* --- UPRAVENÉ: Styly pro checkboxy (Apple Design) --- */
        .legal-checks {
            margin-top: 25px;
            margin-bottom: 25px;
            text-align: left;
            width: 100%;
        }

        .checkbox-wrapper {
            display: flex;
            align-items: center; /* Zarovnání na střed řádku */
            margin-bottom: 8px; /* Menší mezera mezi checkboxy */
            position: relative;
        }

        /* Skryjeme původní hnusný checkbox */
        .checkbox-wrapper input[type="checkbox"] {
            -webkit-appearance: none;
            appearance: none;
            background-color: rgba(255, 255, 255, 0.05);
            margin: 0 10px 0 0;
            font: inherit;
            color: currentColor;
            width: 18px;
            height: 18px;
            border: 1px solid #555;
            border-radius: 5px; /* Zaoblené rohy alá Apple */
            display: grid;
            place-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        /* Stav zaškrtnuto */
        .checkbox-wrapper input[type="checkbox"]:checked {
            background-color: #007bff; /* Modrá barva */
            border-color: #007bff;
        }

        /* Fajfka */
        .checkbox-wrapper input[type="checkbox"]::before {
            content: "";
            width: 10px;
            height: 10px;
            box-shadow: inset 1em 1em white;
            transform: scale(0);
            transition: 120ms transform ease-in-out;
            transform-origin: center;
            clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        }

        .checkbox-wrapper input[type="checkbox"]:checked::before {
            transform: scale(1);
        }

        .checkbox-wrapper label {
            cursor: pointer;
            font-size: 12px; /* Menší font */
            color: #d1d1d6;
            white-space: nowrap; /* Vynucení jednoho řádku */
            overflow: hidden;
            text-overflow: ellipsis; /* Kdyby to náhodou přeteklo na mobilu */
        }

        .legal-link {
            color: #3b82f6;
            text-decoration: none;
            font-weight: 500;
            transition: text-decoration 0.2s;
        }

        .legal-link:hover {
            text-decoration: underline;
        }
        
        /* Upravená chybová hláška - aby se nelepila */
        .error-message-small {
            color: #ff3b30;
            font-size: 11px;
            display: block;
            margin-top: 2px;
            margin-bottom: 10px; /* Větší mezera pod chybou */
            margin-left: 28px; /* Zarovnání s textem (odsunutí o šířku checkboxu) */
            line-height: 1.2;
        }
    

/* ============================================================ */
/* MEDIA QUERIES - OPRAVA KOMPOZICE PODLE SKICI                 */
/* ============================================================ */

/* --- 1. PRO NOTEBOOKY (Fix výšky registračního formuláře) --- */
@media screen and (min-width: 769px) and (max-width: 1440px) and (max-height: 850px){
    .center-content { 
        justify-content: center !important; 
        padding: 10px 0 !important; 
        gap: 10px !important; 
    }
    .logo { font-size: 40px !important; margin-top: 0 !important; }
    .auth-card { 
        padding: 20px 30px !important; 
        max-width: 380px !important; 
        margin: 5px auto !important; 
    }
    .btn-submit { padding: 12px !important; margin-top: 5px !important; }
    .tagline { font-size: 9px !important; margin-bottom: 10px !important; }

    body {

     overflow: hidden !important;

}

.app-container {

    height: 100vh !important;

    display: flex !important;
    flex-direction: column !important;

    padding-top: 30px !important;
    padding-bottom: 30px !important;

    box-sizing: border-box !important;

}

/* header NESMÍ shrinknout */
.app-header {

    flex-shrink: 0 !important;

}
/* obsah se roztáhne */
.app-content {

     flex: 1 !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

}

/* tabulka dostane vlastní scroll */
.invoice-list-wrapper {

    flex: 1 !important;
    
    overflow-y: auto !important;

}


}

/* --- 2. PRO MOBILY (Dashboard podle tvého nákresu) --- */
@media screen and (max-width: 768px) {
    body { 
        overflow-y: auto !important; 
        height: auto !important; 
    }
    .app-container { padding: 15px !important; }

    .app-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .filter-search-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        width: 100% !important;
        height: auto !important;
    }

    /* SEKCE 1: Logo a Profil na střed */
    .app-header {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 20px 10px !important;
        height: auto !important; /* Fix pro překrývání */
        gap: 10px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .header-right {
        flex-direction: column !important;
        width: 100% !important;
        align-items: center !important;
    }
    .user-info {
        flex-direction: column !important;
        align-items: center !important;
        gap: 5px !important;
    }

    /* SEKCE 2: Moje předplatné (Široká pilulka) */
    .btn-apple-manage, .btn-apple-upgrade {
        width: 90% !important;
        max-width: 320px !important;
        justify-content: center !important;
        padding: 10px !important;
        border-radius: 20px !important;
        margin: 10px auto !important;
    }

    /* SEKCE 3: Odhlásit a Smazat (V řadě vedle sebe) */
    .logout-group {
        display: flex !important;
        flex-direction: row !important;
        gap: 20px !important;
        justify-content: center !important;
        width: 100% !important;
    }
    .logout-link, .btn-delete-account-header {
        font-size: 13px !important;
        margin: 0 !important;
    }
    .separator { display: none !important; }

    /* SEKCE 4: Nová faktura a Nastavení (V řadě vedle sebe) */
    .action-bar {
    
        flex-direction: column !important;
        gap: 15px !important;
    }
    .action-bar h1 { font-size: 24px !important; text-align: center !important; }
    
    .action-buttons {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        gap: 10px !important;
        justify-content: center !important;
    }
    .btn-new-invoice { flex: 1 !important; justify-content: center !important; }
    .btn-settings { width: 48px !important; height: 44px !important; flex-shrink: 0 !important; }

    /* SEKCE 5: Filtry (Mřížka 2 sloupce a 2 řádky) */
    .filter-tabs {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    .tab {
        width: 100% !important;
        margin: 0 !important;
        padding: 12px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
        font-size: 11px !important;
        text-align: center !important;
    }

    /* SEKCE 6: Vyhledávání a Seřazení (Vedle sebe v popředí) */
    .search-filter-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
        align-items: center !important;
        
        margin-bottom: 15px !important;
    }
    .search-row { flex: 1 !important; }
    .search-box { width: 100% !important; background: rgba(255, 255, 255, 0.1) !important; margin: 0 !important; }

    /* SEKCE 7: Nástěnka (Karta s tabulkou) */
    .invoice-list-wrapper {
        margin-top: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(10, 10, 12, 0.8) !important;
        backdrop-filter: blur(20px);
        border-radius: 20px !important;
        overflow: hidden !important;
        height: auto !important;
    }
    .invoice-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

}

/* ============================================================ */
/* FINAL MOBILE HARD FIX – FakturaPro                          */
/* ============================================================ */

@media screen and (max-width: 768px) {

    .filter-search-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
        height: auto !important;
    }

    .filter-tabs {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .filter-tabs .tab {
        width: 100% !important;
        display: block !important;
    }

    .search-filter-row {

        display: flex !important;
        flex-direction: row !important;

        width: 100% !important;
        gap: 8px !important;

        padding-left: 5px !important;
        padding-right: 5px !important;

        box-sizing: border-box !important;

    }

    .search-row {

       flex: 1 !important;

    }

    /* OPRAVA: Zapamatovat si mě a Heslo na JEDEN ŘÁDEK */
    .form-actions {
        display: flex !important;
        flex-direction: row !important; /* Vynutí řádek místo sloupce */
        justify-content: space-between !important;
        align-items: center !important;
        gap: 5px !important;
        width: 100% !important;
        white-space: nowrap !important; /* Zabrání zalomení textu */
    }

    .remember-me, .forgot-password {
        font-size: 10px !important; /* Zmenšení písma, aby se to tam vešlo */
    }

    .form-footer{
        white-space: nowrap;
        font-size: 11px;
    }

    .remember-me input {
        width: 14px !important; /* Menší čtvereček checkboxu */
        height: 14px !important;
        margin-right: 4px !important;
    }

    .filter-dropdown-container {

    position: relative !important;

}

.apple-dropdown-menu {

    position: absolute !important;

    top: calc(100% + 8px) !important;

    left: 0 !important;

    width: 240px !important;

    max-width: 80vw !important;

    background: rgba(28,28,30,0.98) !important;

    backdrop-filter: blur(20px);

    border-radius: 14px !important;

    border: 1px solid rgba(255,255,255,0.1);

    padding: 8px 0 !important;

    z-index: 9999 !important;

    display: block !important;

}

    .search-box {

        width: 100% !important;

    }

        /* ================================= */
/* MOBILE FIX – SORT DROPDOWN       */
/* ================================= */

.filter-dropdown-container {

    position: relative !important;

}

/* samotné menu */
.apple-dropdown-menu {

    position: absolute !important;

    top: 110% !important;
    left: 0 !important;

    width: 220px !important;
    max-width: 80vw !important;

    background: rgba(28,28,30,0.98) !important;

    backdrop-filter: blur(20px);

    border-radius: 14px !important;

    border: 1px solid rgba(255,255,255,0.1);

    padding: 8px 0 !important;

    z-index: 9999 !important;

}

/* položky */
.apple-dropdown-menu .dropdown-item {

    padding: 12px 16px !important;

    font-size: 14px !important;

}

/* label */
.apple-dropdown-menu .dropdown-label {

    padding: 10px 16px 6px 16px !important;

    font-size: 11px !important;

}

/* divider */
.apple-dropdown-menu .dropdown-divider {

    margin: 6px 0 !important;

}

}