/* ==================================================
   MODERNA TABELA HRANJENJA (2026 UI) - STABILNO DRSENJE
   ================================================== */

.nv-table-wrapper {
    /* To je ključno: wrapper se ne sme raztegniti čez svojega starša */
    max-width: 100%;
    width: 100%;
    
    /* Omogoči drsenje (scroll) *samo* za ta wrapper */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Gladko drsenje na iOS */
    
    /* Preprečimo zmešnjavo z zunanjimi robovi */
    margin-bottom: var(--space-m);
    
    /* Pomaga pri nekaterih Flexbox težavah v Bricksu */
    display: block; 
}

.nv-modern-table {
    /* Tabela mora biti minimalno dovolj široka, da se vsebina ne zlomi */
    min-width: 700px; /* Lahko prilagodiš to vrednost, npr. 600px ali 800px, odvisno, kdaj želiš, da se začne scroll */
    width: 100%;
    
    /* Standardne nastavitve za tabelo */
    border-collapse: collapse;
    text-align: center;
    font-size: var(--text-s); 
    color: var(--base-dark);
}

/* Naslovi v tabeli */
.nv-modern-table th {
    /* To zagotovi, da se besedilo v glavi tabele ne zlomi v več vrstic in s tem pokvari oblike */
    white-space: nowrap; 
    padding: var(--space-xs) var(--space-s);
    color: var(--primary);
    font-weight: 700;
    border-bottom: 2px solid var(--primary);
    background-color: transparent; /* Naj bo prozorno ali tvoja željena barva */
}

/* Stil za preostali del tabele (vrstice, celice, hover itd.) */
.nv-modern-table td {
    padding: var(--space-s);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.nv-modern-table td:first-child,
.nv-modern-table td:nth-child(3) {
    color: var(--primary);
}

.nv-modern-table tbody tr:hover {
    background-color: var(--sand);
    transition: background-color 0.2s ease;
}

.nv-table-note {
    margin-top: var(--space-s);
    font-size: 0.85em;
    color: var(--base-medium);
    text-align: left;
    font-style: italic;
    /* Dodajmo še to, da se opomba ne raztegne s tabelo, ampak ostane v širini ekrana */
    max-width: 100vw; 
}

/* ==================================================
   ULTIMATIVNA REŠITEV ZA MOBILNI BLOWOUT
   ================================================== */
@media screen and (max-width: 768px) {
    /* Ustavimo Bricks element in naš wrapper */
    .brxe-shortcode,
    .nv-table-wrapper {
        min-width: 0 !important;
        /* Magija: Širina ne sme biti nikoli večja od 85% širine samega ekrana! */
        max-width: 85vw !important; 
    }
    
    /* Zagotovimo, da se drsnik pojavi TOČNO na tabeli */
    .nv-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}