/* Google Sheets Data Table with Advanced Filters - Complete CSS Styles */

/* Base Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    /* SPREMEMBA: Odstranjen max-width in margin auto, prilagojen padding */
    /* max-width: 1400px; */
    /* margin: 0 auto; */
    padding: 20px 0; /* Ohrani zgornji/spodnji padding, odstrani levi/desni */
    background-color: #f5f5f5;
}

.container {
    background: white;
    /* SPREMEMBA: Prilagojen padding, dodana širina in box-sizing */
    padding: 30px 0; /* Ohrani zgornji/spodnji padding, odstrani levi/desni */
    width: 100%;     /* Zagotovi polno širino */
    box-sizing: border-box; /* Padding in border sta vključena v širino/višino elementa */
    border-radius: 8px; /* To lahko pustite ali odstranite, odvisno od želenega videza */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Prav tako lahko prilagodite */
    position: relative;
    /* Če želite, da se vsebina znotraj .container še vedno nekoliko odmakne od robov
       na zelo širokih zaslonih, lahko dodate max-width tukaj in margin: auto,
       ampak potem .container ne bo več popolnoma od roba do roba.
       Npr.: max-width: 1600px; margin: 0 auto; padding: 30px; (vrnite levi/desni padding)
       Zahteva je bila "full width", zato predpostavljam od roba do roba. */
}


h1 {
    color: #2c3e50;
    margin-bottom: 10px;
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
    /* Če je .container zdaj od roba do roba, boste morda želeli dodati levi/desni padding tukaj: */
    padding-left: 15px;
    padding-right: 15px;
}

.info {
    background: #e8f4fd;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    border-left: 4px solid #3498db;
    /* Tudi tukaj morda potrebujete stranski margin ali padding, če je .container od roba do roba */
    margin-left: 15px;
    margin-right: 15px;
}

/* Share URL Styles */
.share-url-container {
    margin-top: 15px;
    padding: 15px;
    background: #f0f8ff;
    border: 1px solid #b3d9ff;
    border-radius: 6px;
    display: none;
    /* Dodajte levi/desni margin, če je .container od roba do roba */
    margin-left: 15px;
    margin-right: 15px;
}

.share-url-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.share-url-input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.share-url-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
    background: white;
    color: #495057;
}

.share-url-input:focus {
    outline: 0;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.share-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745; 
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    z-index: 1001; 
    box-shadow: 0 4px 20px rgba(40, 167, 69, 0.3);
    animation: slideInNotification 3s ease-out forwards;
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes slideInNotification {
    0% { opacity: 0; transform: translateX(100%); }
    15% { opacity: 1; transform: translateX(0); }
    85% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(100%); }
}

/* Filter Visibility Settings */
.filter-settings-panel {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin: 15px; /* Dodan margin, če je .container od roba do roba */
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ... ostali stili za .filter-settings ostanejo enaki ... */
.filter-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.filter-settings-header h4 { margin: 0; color: #2c3e50; }
.filter-settings-content p { margin: 0 0 15px 0; color: #495057; }
.filter-visibility-item { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 5px; }
.filter-visibility-label { cursor: pointer; font-size: 14px; color: #495057; }
.filter-visibility-item input[type="checkbox"] { margin: 0; cursor: pointer; }
.filter-visibility-item input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.5; }
.filter-settings-actions { display: flex; gap: 10px; margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; }
.filter-settings-actions .filter-btn { padding: 8px 16px; font-size: 13px; }
.no-filters-message { text-align: center; padding: 20px; color: #6c757d; font-style: italic; background: #f8f9fa; border-radius: 6px; margin: 10px 0; }


/* Column Filters */
.column-filters-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 15px;
}
/* ... ostali stili za .column-filter ostanejo enaki ... */
.column-filter-group { display: flex; flex-direction: column; gap: 5px; }
.column-filter-group .filter-label { font-size: 13px; font-weight: 600; color: #495057; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.column-filter { font-size: 13px; padding: 6px 8px; }


/* Filter System Styles */
.filter-container {
    background: #f8f9fa;
    border-top: 1px solid #e9ecef; /* Dodan zgornji border za ločitev, če je prvi element */
    border-bottom: 1px solid #e9ecef; /* Dodan spodnji border */
    /* padding: 20px; SPREMEMBA: Padding bo nadzorovan z notranjimi elementi ali globalno */
    padding: 20px 15px; /* Dodan stranski padding za vsebino znotraj filter-containerja */
    margin-bottom: 25px;
}
/* ... ostali stili za .filter-header, .filter-title itd. ostanejo enaki ... */
.filter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; }
.filter-title { font-size: 18px; font-weight: 600; color: #2c3e50; margin: 0; }
.filter-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-row { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; flex-wrap: wrap; }
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-label { font-weight: 600; color: #495057; font-size: 14px; }
.filter-input { padding: 8px 12px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
.filter-input:focus { outline: 0; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.filter-select { padding: 8px 12px; border: 1px solid #ced4da; border-radius: 4px; font-size: 14px; background: white; min-width: 150px; }
.filter-btn { background: #28a745; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background-color 0.15s ease-in-out; display: inline-flex; align-items: center; gap: 5px; }
.filter-btn:hover { background: #218838; }
.filter-btn.clear { background: #dc3545; }
.filter-btn.clear:hover { background: #c82333; }
.filter-btn.toggle { background: #17a2b8; }
.filter-btn.toggle:hover { background: #138496; }
.filter-btn.copy-url-btn { background: #007bff; padding: 8px 12px; font-size: 13px; }
.filter-btn.copy-url-btn:hover { background: #0056b3; }
.filter-stats { background: #e9ecef; padding: 10px 15px; border-radius: 5px; margin-top: 15px; font-size: 14px; color: #495057; }

/* Loading Overlay (ostane enak) */
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); display: none; align-items: center; justify-content: center; z-index: 1000; }
.loading-spinner { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Table Header Sorting Styles (ostanejo enaki) */
.sortable-header { cursor: pointer; user-select: none; transition: background-color 0.15s ease-in-out; }
.sortable-header:hover { background-color: #2c3e50 !important; }
.header-content { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.header-text { flex: 1; text-align: left; }
.sort-icon { font-size: 14px; color: #bdc3c7; transition: color 0.15s ease-in-out; min-width: 16px; text-align: center; }
.sort-icon.sort-asc, .sort-icon.sort-desc { color: #3498db; font-weight: bold; }
.sortable-header:hover .sort-icon { color: #ecf0f1; }


/* Data Table Styles */
.data-table {
    width: 100%;
    border-collapse: collapse;
    /* margin: 20px 0; SPREMEMBA: Margin bo nadzorovan s paddingom .containerja ali specifično */
    margin-top: 20px;
    margin-bottom: 20px;
    background: white;
    /* border-radius: 6px; Odstranimo, ker je tabela zdaj od roba do roba .container */
    /* overflow: hidden; Odstranimo */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.1); Odstranimo, ker je senca na .container */
    /* Dodamo stranski padding, če želimo vsebino tabele odmakniti od robov .containerja */
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box; /* Da padding ne poveča tabele čez 100% */
}
/* ... ostali stili za .data-table th, td, tr ostanejo enaki za >768px širine ... */
.data-table th { background: #34495e; color: white; padding: 12px 8px; text-align: left; font-weight: 600; border-bottom: 2px solid #2c3e50; }
.data-table td { padding: 10px 8px; border-bottom: 1px solid #ddd; }
.data-table tr:nth-child(even) { background-color: #f8f9fa; }
.data-table tr:hover { background-color: #e8f4fd; }


/* Active Filter Badges */
#active-filters { margin-top: 10px; padding: 5px 0; }
.active-filter-badge { background: #007bff; color: white; padding: 4px 10px; border-radius: 12px; font-size: 12px; margin: 0 5px 5px 0; display: inline-flex; align-items: center; gap: 5px; }
.active-filter-badge:hover { background: #0056b3; }
.active-filter-close { margin-left: 5px; font-weight: bold; cursor: pointer; opacity: 0.7; }
.active-filter-close:hover { opacity: 1; color: #ffdddd; }

/* Error and Success Messages */
.error { background: #ffebee; color: #c62828; padding: 15px; border-radius: 5px; border-left: 4px solid #f44336; margin-bottom: 20px; margin-left: 15px; margin-right: 15px; }
.success { background: #e8f5e8; color: #2e7d32; padding: 15px; border-radius: 5px; border-left: 4px solid #4caf50; margin-bottom: 20px; margin-left: 15px; margin-right: 15px; }

/* Button Styles */
.refresh-btn { background: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 14px; font-weight: 600; margin-top: 15px; margin-right: 10px; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 5px; }
.refresh-btn:last-of-type { margin-right: 0; }
.refresh-btn:hover { background: #2980b9; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); }
.refresh-btn:active { transform: translateY(0); }
.refresh-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3); }

/* Kontejner za gumbe, če .container nima več stranskega paddinga */
.action-buttons-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 15px; /* Da se odmakne od meta-info */
}


/* Meta Information */
.meta-info {
    font-size: 12px;
    color: #666;
    margin-top: 15px;
    text-align: right;
    padding: 10px 15px; /* Dodan desni padding za poravnavo z ostalo vsebino */
    background: #f8f9fa;
    /* border-radius: 5px; Odstranimo, če je od roba do roba */
    border-top: 1px solid #e9ecef; /* Dodan border za ločitev */
    border-bottom: 1px solid #e9ecef;
}
.meta-info strong { color: #495057; }

/* Utility Classes (ostanejo enake) */
.text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; }
.mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; }

/* Accessibility Improvements (ostanejo enake) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.filter-input:focus, .filter-select:focus, .column-filter:focus, .filter-btn:focus { border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }

/* Print Styles (ostanejo enake) */
@media print { /* ... obstoječi print stili ... */ }

/* Responsive Design */
@media (max-width: 1200px) { 
    /* .container max-width: 100%; je zdaj odveč, ker je body polne širine in .container width: 100% */
}

@media (max-width: 992px) { 
    .filter-controls { flex-basis: 100%; justify-content: flex-end; }
    .filter-header { flex-wrap: wrap; gap: 10px; }
    .column-filters-row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

@media screen and (max-width: 768px) { 
    body {
        padding: 10px 0; /* Manjši zgornji/spodnji padding, brez stranskega */
    }
    .container {
        padding: 15px 0; /* Manjši zgornji/spodnji padding, brez stranskega */
        border-radius: 0; /* Odstranimo zaobljenost na mobilnih, če gre od roba do roba */
        box-shadow: none; /* Odstranimo senco na mobilnih, če gre od roba do roba */
    }
    /* Če želimo, da imajo posamezni elementi znotraj .container še vedno stranski odmik: */
    h1, .info, .share-url-container, .filter-settings-panel, .filter-container, 
    .data-table, #active-filters, .action-buttons-container, .error, .success {
        margin-left: 10px;
        margin-right: 10px;
    }
    /* Specifičen padding za filter-container in data-table, da se vsebina ne zalepi na robove */
    .filter-container, .data-table {
        padding-left: 10px;
        padding-right: 10px;
    }


    .column-filters-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .share-url-input-group { flex-direction: column; align-items: stretch; }
    .share-url-input { font-size: 12px; padding: 6px 8px; }
    .share-notification { top: 10px; right: 10px; left: 10px; width: auto; transform: translateX(0); }
    
    /* --- Responsive Table Styling (Stacking Rows) --- */
    .data-table {
        display: block; 
        width: auto; /* Naj se širina prilagodi marginom starša */
        overflow: visible; 
        white-space: normal; 
        border-left: none; /* Odstranimo, če .container nima več paddinga */
        border-right: none;
        border-radius: 0; /* Tudi tukaj odstranimo, če je od roba do roba */
        box-shadow: none; /* In senco */
        padding-left: 0; /* Padding je zdaj na .container ali specifičnih elementih */
        padding-right: 0;
    }
    .data-table thead { display: none; }
    .data-table tr { display: block; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 5px; padding: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); background-color: #fff; }
    .data-table td { display: block; text-align: right; padding-left: 45%; position: relative; border-bottom: 1px dotted #eee; padding-top: 8px; padding-bottom: 8px; min-height: 1.5em; }
    .data-table td:last-child { border-bottom: 0; }
    .data-table td::before { content: attr(data-label); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 40%; padding-right: 10px; font-weight: bold; text-align: left; white-space: normal; color: #333; }
    .data-table td, .data-table td a { word-wrap: break-word; overflow-wrap: break-word; }
    .data-table td[data-label="Model"] a, .data-table td[data-label="model"] a {}
    /* --- End of Responsive Table Styling --- */

    .filter-row { flex-direction: column; align-items: stretch; }
    .filter-group { min-width: auto; margin-bottom: 10px; }
    .meta-info {
        font-size: 11px;
        text-align: left; 
        padding: 10px; /* Dodamo padding za vsebino meta-info */
        border-left: none; /* Odstranimo, če je od roba do roba */
        border-right: none;
        border-radius: 0;
    }
    .meta-info span { display: block; margin-bottom: 3px; }
    .refresh-btn { display: block; width: auto; /* Naj se širina prilagodi vsebini + paddingu */ margin: 10px 0; padding: 12px 20px; }
    .action-buttons-container { /* Poskrbimo, da so gumbi znotraj tega kontejnerja */
        margin-left: 0; /* Če smo že nastavili margin na .refresh-btn */
        margin-right: 0;
    }

}

@media (max-width: 480px) { 
    /* Ponastavimo nekatere margine, če smo jih dodali zgoraj za 768px */
    h1, .info, .share-url-container, .filter-settings-panel, .filter-container, 
    .data-table, #active-filters, .action-buttons-container, .error, .success {
        margin-left: 5px;
        margin-right: 5px;
    }
    .filter-container, .data-table {
        padding-left: 5px;
        padding-right: 5px;
    }

    .filter-title { font-size: 16px; text-align: center; width: 100%; margin-bottom: 10px; }
    .filter-header { justify-content: center; }
    .filter-controls { flex-direction: column; width: 100%; }
    .filter-btn { width: 100%; margin: 5px 0; }
    .column-filters-row { grid-template-columns: 1fr; gap: 8px; }
    
    .data-table td { padding-left: 10px; text-align: left; }
    .data-table td::before { position: static; transform: none; width: auto; display: block; margin-bottom: 3px; font-size: 0.9em; color: #555; }
}

/* High Contrast Mode Support (ostane enak) */
@media (prefers-contrast: high) { /* ... obstoječi high-contrast stili ... */ }

/* Reduced Motion Support (ostane enak) */
@media (prefers-reduced-motion: reduce) { /* ... obstoječi reduced-motion stili ... */ }

/* Dark Mode Support (ostane enak) */
@media (prefers-color-scheme: dark) { /* ... obstoječi dark-mode stili ... */ }