/* ==========================================================================
   KOMPLETNY KOD CSS - WERSJA FIX: WIDOCZNOŚĆ PRZYCISKU
   Wklej to pomiędzy <style id="custom-css-LAYOUT"> a </style>
   ========================================================================== */

/* 1. UKRYWANIE ELEMENTÓW MOBILNYCH NA KOMPUTERZE (Desktop-first) */
/* Dodajemy html body, aby zwiększyć wagę selektora i nadpisać style systemowe */
html body .show-only-mobile, 
html body .mobile-only-cta {
    display: none !important;
}

/* 2. SEKCJA HERO (DESKTOP) */
.hero-badges {
    display: flex;
    gap: 15px;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.hero-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(64, 153, 108, 0.1);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    white-space: nowrap;
    color: #0A7249;
}

/* 3. SIDEBAR I UKŁAD */
html.vue-app.layout\:sidebar .app-sidebar {
    max-width: 35rem;
    transition: all 0.3s ease;
}

/* 4. TABELA - ZASADY OGÓLNE */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table th:nth-child(1),
table td:nth-child(1) {
    white-space: nowrap !important;
    min-width: 140px;
}

/* 5. PRZYCISKI (DESKTOP) */
.btn-primary {
    width: 30%;
    min-width: 250px;
}

/* 6. STYLE DLA URZĄDZEŃ MOBILNYCH (MAX 767px) */
@media (max-width: 767px) {

    /* Włączamy widoczność przycisku tylko na mobile */
    html body .show-only-mobile,
    html body .mobile-only-cta {
        display: flex !important;
        width: 100% !important;
        justify-content: center;
        margin-bottom: 20px;
    }

    /* Ukrywamy elementy przeznaczone tylko na desktop */
    .hide-on-mobile {
        display: none !important;
    }

    /* HERO: Układ pionowy */
    .hero-badges {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .hero-badge {
        width: 100%;
        justify-content: center;
    }

    /* Przyciski na pełną szerokość */
    .btn,
    .btn-primary {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        justify-content: center;
        display: flex !important;
        margin: 10px 0;
    }

    /* Tabela na mobile - ukrywamy 4 kolumnę (Status) */
    table th:nth-child(4),
    table td:nth-child(4) {
        display: none !important;
    }

    table th,
    table td {
        padding: 10px 8px !important;
        font-size: 13px;
    }

    /* Poprawki layoutu na mobile */
    .hero-content {
        flex-direction: column;
        text-align: center;
        padding: 20px 10px;
    }

    html.vue-app.layout\:sidebar .app-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
    }

    .app-content {
        margin-left: 0 !important;
        padding: 15px !important;
    }
}