/* style.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    flex-direction: column;
    height: 100vh;
    margin: 0;
    background-color: #f4f7f6;
    font-size: 11px;
}
.main-header {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}
.main-header h1 { margin: 0; font-size: 18px; }
.main-header nav a { color: white; text-decoration: none; margin-left: 15px; font-weight: bold; cursor: pointer; }
.main-header nav a:hover { text-decoration: underline; }

main {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- Stili za planer --- */
#top-section { display: flex; height: 60vh; min-height: 150px; width: 100%; flex-shrink: 0; }
#resizer { height: 8px; background-color: #e9ecef; cursor: ns-resize; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; flex-shrink: 0; }
#resizer:hover { background-color: #d1d1d1; }
#map-container { flex-grow: 1; width: 100%; background-color: #e0e0e0; display: flex; }
#map { width: 100%; height: 100%; }
.panel { border: 1px solid #ccc; overflow: hidden; background-color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); display: flex; flex-direction: column; height: 100%;}
#left-panel { width: 48%; }
#right-panel { width: 48%; }
#center-actions-panel { width: 4%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; background-color: #f8f9fa; border-left: 1px solid #ddd; border-right: 1px solid #ddd; }
#center-actions-panel button { width: 40px; height: 40px; font-size: 18px; font-weight: bold; border-radius: 8px; border: 1px solid #ccc; cursor: pointer; background-color: #ffffff; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); }
#center-actions-panel button:hover { background-color: #e9ecef; border-color: #007bff; box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3); }
#center-actions-panel button:disabled { background-color: #f8f9fa; color: #ccc; cursor: not-allowed; }
.panel-header { padding: 8px 15px; margin: 0; background-color: #e9ecef; border-bottom: 1px solid #ccc; font-size: 14px; color: #333; position: sticky; top: 0; z-index: 10; flex-shrink: 0; }
.panel-content { overflow-y: auto; flex-grow: 1; }
.filter-container { padding: 6px 15px; background-color: #f8f9fa; border-bottom: 1px solid #ddd; display: flex; align-items: flex-start; gap: 15px; flex-shrink: 0; flex-wrap: wrap; }
.filter-group { display: flex; align-items: center; gap: 8px; }
.filter-container label { font-weight: bold; font-size: 11px; }
.filter-container input, .filter-container select { padding: 3px; border-radius: 3px; border: 1px solid #ccc; font-size: 11px; }
.year-filter {
    width: 40px;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 11px;
    outline: none;
}
.week-selector { width: 190px; }
.customer-search-filter, .article-search-filter { width: 150px; }
.vertical-filters { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid #ddd; padding-left: 0px; width: 100%; box-sizing: border-box; }
.filter-items-wrapper { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; width: 100%; }
.country-filter-item, .supplier-filter-item, .route-country-filter-item, .route-supplier-filter-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.filter-actions { display: flex; gap: 5px; margin-left: 5px; }
.filter-actions a { font-size: 10px; color: #007bff; text-decoration: none; cursor: pointer; }
.filter-actions a:hover { text-decoration: underline; }
.filter-group-header { display: flex; align-items: center; }
.tree-node { border-bottom: 1px solid #eee; }
.node-header { padding: 3px 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color: 0.15s ease; }
.node-header:hover { background-color: #f0f0f0; }
.node-header .arrow { font-family: monospace; font-weight: bold; font-size: 12px; width: 16px; height: 16px; line-height: 14px; text-align: center; border: 1px solid #ccc; border-radius: 3px; background-color: #f1f1f1; margin-right: 5px; flex-shrink: 0; }
.node-header .node-checkbox { margin-right: 6px; flex-shrink: 0; }
.node-icon { width: 14px; height: 14px; margin-right: 5px; flex-shrink: 0; color: #555; display: inline-block; vertical-align: middle; }
.node-icon svg { width: 100%; height: 100%; }
.node-header.open .arrow { background-color: #d1d1d1; }
.node-header.selected-row, .item.selected-row { background-color: #d1e7dd; }
.node-header.selected-row:hover, .item.selected-row:hover { background-color: #b8dfc9; }
.node-content { display: none; }
.node-content.visible { display: block; }
.node-title { display: flex; align-items: center; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-totals { display: grid; grid-template-columns: repeat(5, 45px); font-size: 10px; font-weight: normal; text-align: right; color: #555; flex-shrink: 0; }
.totals-container { display: flex; flex-direction: column; align-items: flex-end; }
.totals-header { display: grid; grid-template-columns: repeat(5, 45px); font-size: 9px; font-weight: bold; color: #333; padding: 0; text-align: right; flex-shrink: 0; width: 225px; }
.selection-totals-header { display: grid; grid-template-columns: repeat(5, 45px); font-size: 11px; font-weight: bold; color: #007bff; background-color: #e6f2ff; padding: 2px 0; text-align: right; border-radius: 4px; margin-top: 4px; height: 16px; }
.selection-totals-header span { padding-right: 2px; }
.action-buttons, .expansion-buttons { display: flex; gap: 8px; }
.action-buttons button, .expansion-buttons button, #add-new-route-btn { padding: 3px 8px; font-size: 10px; font-weight: bold; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; background-color: #fff; }


.header-controls { display: flex; align-items: center; gap: 10px; }
.panel-header { display: flex; justify-content: space-between; align-items: center; }
.panel-header h2 { flex-grow: 1; font-size: 15px; margin: 0; }
.level-1 { font-weight: bold; }
.level-2 { padding-left: 15px; }
.level-3 { padding-left: 30px; }
.level-4 { padding-left: 45px; font-style: italic; }
.item-list { padding-left: 45px; }
.item { padding: 3px 8px; padding-left: 10px; font-size: 11px; border-left: 2px solid #f1f1f1; margin-left: 15px; display: flex; justify-content: space-between; align-items: center; }
.item-title-and-qty { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.marker-label { position: absolute; background-color: #fffbe6; border: 1px solid #ccc; border-radius: 4px; padding: 2px 5px; font-size: 10px; font-weight: bold; white-space: nowrap; transform: translate(-50%, -150%); box-shadow: 0 1px 3px rgba(0,0,0,0.2); pointer-events: none; }
.route-item-header { border: 1px solid #007bff; border-radius: 4px; margin-bottom: 10px; transition: all 0.2s ease-in-out; }
.route-item-header.selected-route { border: 3px solid #fd7e14; box-shadow: 0 0 5px rgba(253, 126, 20, 0.5); }
.route-counter-style { font-size: 12px; font-weight: bold; color: #555; margin-left: 20px; align-self: center; }
.map-toggle-btn { margin-right: 15px; padding: 2px 8px; font-size: 10px; font-weight: bold; border: 1px solid #6c757d; background-color: #f8f9fa; color: #212529; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
.map-toggle-btn:hover { background-color: #e2e6ea; }
.map-toggle-btn.active { background-color: pink; border-color: #c00; color: #333; }
.radio-filter-group label { display: flex; align-items: center; gap: 4px; font-weight: normal; }

.menu-container {
    padding: 40px 40px 40px 75px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}
.menu-container h2 {
    width: 250px;
    text-align: left;
    margin-bottom: 10px;
    padding-left: 10px;
}
.menu-container button {
    padding: 12px 25px;
    font-size: 16px;
    min-width: 250px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #fdfdfd;
    text-align: left;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s ease-in-out;
}
.menu-container button:hover {
    background-color: #e9ecef;
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.menu-container button:disabled {
    background-color: #f1f1f1;
    color: #aaa;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Stili za splošne poglede (kot je Pregled Naročil) */
.view-container-split {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
#orders-master-pane, #orders-detail-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#orders-master-pane {
    min-height: 150px;
    flex-shrink: 0;
}
#orders-detail-pane {
    flex-grow: 1;
    min-height: 100px;
}
.resizer-horizontal {
    height: 8px;
    background-color: #e9ecef;
    cursor: ns-resize;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    flex-shrink: 0;
}
.resizer-horizontal:hover {
    background-color: #d1d1d1;
}
.view-header { display: flex; align-items: center; margin-bottom: 15px; flex-shrink: 0; padding: 0 15px; }
.view-header h1 { margin: 0; flex-grow: 1; font-size: 18px; }

.table-container {
    flex-grow: 1;
    overflow: auto;
    border-top: 1px solid #ddd;
}
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th, td {
    padding: 1px 6px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    white-space: normal;
    font-size: 11px;
    height: 19px;
}

thead th {
    background-color: #f2f2f2;
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 2px solid #ccc;
}
tbody tr:hover { background-color: #f9f9f9; }
.status-cell { font-weight: bold; text-align: center; }
.status-da { color: red; background-color: #fff0f0; padding: 1px 6px; border-radius: 10px; border: 1px solid red; }
.back-button { background-color: #6c757d; color: white; border-color: #6c757d; font-weight: bold; padding: 4px 10px; margin-left: auto; border-radius: 4px; cursor: pointer; font-size: 10px; }
.back-button:hover { background-color: #5a6268; }
.header-divider { font-size: 18px; color: #ccc; margin-right: 15px; align-self: center; }
.record-counter { flex-grow: 1; text-align: center; font-size: 14px; font-weight: bold; color: #555; align-self: center; }
tbody tr.selected-row { background-color: #d4edff !important; color: #004085; }
tbody tr.selected-row td { font-weight: bold; }

#order-details-container .placeholder-text {
    padding: 20px;
    text-align: center;
    color: #888;
    font-style: italic;
}




.vertical-filter-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    border-left: 0.5px solid #ddd;
    padding-left: 0px;
    margin-left: 0px;
}
.vertical-filter-stack .filter-group { width: 100%; }
#dobavitelj-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}
.radio-filter-group label {
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}
.radio-filter-group label:hover { background-color: #e9ecef; }
.radio-filter-group label.filter-active {
    background-color: #fff3cd;
    border-color: #ffeeba;
    font-weight: bold;
    color: #856404;
}

/* === Stili za modalno okno za urejanje === */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 85vw;
    height: 85vh;
    max-width: 2500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
}

.modal-close-btn {
    border: none;
    background: none;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    color: #888;
}
.modal-close-btn:hover {
    color: #000;
}

.modal-body {
    padding: 0;
    overflow: hidden;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
    text-align: right;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.modal-message {
    margin-right: auto;
    font-weight: bold;
}
.modal-message.success {
    color: #155724;
}
.modal-message.error {
    color: #721c24;
}

#modal-order-header-content {
    padding: 20px;
    flex-shrink: 0;
}

.access-layout-grid {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr;
    gap: 20px 30px;
    align-items: start;
}

.access-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.access-data-pair {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    gap: 5px;
}

.access-data-pair label {
    font-weight: normal;
    font-size: 11px;
    color: #333;
    text-align: right;
    padding-right: 5px;
}

.access-data-pair .value,
.access-data-pair input,
.access-data-pair textarea {
    font-size: 11px;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #f8f9fa;
    width: 100%;
    box-sizing: border-box;
}

.access-data-pair textarea {
    height: 80px;
    resize: vertical;
}

#modal-order-items-content {
    flex-grow: 1;
    overflow: auto;
    padding: 20px;
    padding-top: 0;
    border-top: 1px solid #e9ecef;
}

.editable-items-table {
    width: 3200px;
    border-collapse: collapse;
}

.editable-items-table thead th {
    position: sticky;
    top: 0;
    background-color: #f0f2f5;
    z-index: 1;
}

.editable-items-table th, .editable-items-table td {
    border: 1px solid #e0e0e0;
    padding: 0;
    text-align: left;
    font-size: 11px;
    white-space: nowrap;
}

.editable-items-table input {
    width: 100%;
    height: 100%;
    border: none;
    background-color: transparent;
    padding: 5px 8px;
    font-size: 11px;
    box-sizing: border-box;
    outline: none;
}

.editable-items-table input:focus {
    outline: 2px solid #4d90fe;
    outline-offset: -2px;
}

.editable-items-table input.readonly-field {
    background-color: #f5f5f5;
    color: #495057;
    cursor: not-allowed;
}

.editable-items-table .editable-checkbox {
    width: auto;
    display: block;
    margin: 0 auto;
    height: 26px;
    cursor: pointer;
}

/* === Širine stolpcev za VSA polja === */
.editable-items-table th:nth-child(1) { width: 30px; }   /* Status */
.editable-items-table th:nth-child(2) { width: 30px; }   /* Poz Pos. */
.editable-items-table th:nth-child(3) { width: 60px; }   /* Artikel */
.editable-items-table th:nth-child(4) { width: 400px; }  /* Opis */
.editable-items-table th:nth-child(5) { width: 80px; }   /* Velikost */
.editable-items-table th:nth-child(6) { width: 70px; }  /* Kol na pak */
.editable-items-table th:nth-child(7) { width: 70px; }  /* Kol Pak */
.editable-items-table th:nth-child(8) { width: 70px; }  /* Kol */
.editable-items-table th:nth-child(9) { width: 70px; }  /* Kol Potr. */
.editable-items-table th:nth-child(10) { width: 90px; }  /* Cena */
.editable-items-table th:nth-child(11) { width: 90px; }  /* Cena s pop. */
.editable-items-table th:nth-child(12) { width: 90px; }  /* Znesek */
.editable-items-table th:nth-child(13) { width: 60px; }  /* Valuta */
.editable-items-table th:nth-child(14) { width: 70px; }  /* Popust */
.editable-items-table th:nth-child(15) { width: 50px; }  /* Leto */
.editable-items-table th:nth-child(16) { width: 50px; }  /* Teden */
.editable-items-table th:nth-child(17) { width: 60px; }  /* Davek */
.editable-items-table th:nth-child(18) { width: 40px; } /* Dobavitelj */
.editable-items-table th:nth-child(19) { width: 100px; } /* Št. dobavnice */
.editable-items-table th:nth-child(20) { width: 90px; }  /* Znesek s pop. */
.editable-items-table th:nth-child(21) { width: 90px; }  /* Datum dob. */
.editable-items-table th:nth-child(22) { width: 40px; }   /* Firma */
.editable-items-table th:nth-child(23) { width: 70px; }  /* Tip art. */
.editable-items-table th:nth-child(24) { width: 120px; } /* Tip art. opis */
.editable-items-table th:nth-child(25) { width: 80px; }  /* Skupina */
.editable-items-table th:nth-child(26) { width: 200px; } /* Skupina opis */
.editable-items-table th:nth-child(27) { width: 100px; } /* Komerc. */
.editable-items-table th:nth-child(28) { width: 100px; } /* Tura */
.editable-items-table th:nth-child(29) { width: 60px; }   /* ID Dok */
.editable-items-table th:nth-child(30) { width: 100px; } /* Št. ponudbe */
.editable-items-table th:nth-child(31) { width: 60px; }  /* ID Tura */
.editable-items-table th:nth-child(32) { width: 200px; } /* Opomba */
.editable-items-table th:nth-child(33) { width: 70px; }  /* Fiksirano */
.editable-items-table th:nth-child(34) { width: 60px; }   /* ID */
.editable-items-table th:nth-child(35) { width: 50px; }   /* Poz */
.editable-items-table th:nth-child(36) { width: 130px; } /* Nastalo */
.editable-items-table th:nth-child(37) { width: 100px; } /* Št. naročila */

/* NOVO: Stili za virtualno drsenje */
.virtual-scroll-container {
    position: relative;
    overflow-y: auto !important; /* Pomembno za delovanje drsnika */
    height: 100%;
}

.virtual-scroll-content {
    position: relative;
    overflow: hidden;
}

.virtual-scroll-container table {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

/* === NOVI, IZBOLJŠANI STILI ZA PRIJAVNI ZASLON === */
.login-container {
    display: flex;
    justify-content: center; /* Centriraj horizontalno */
    align-items: center;    /* Centriraj vertikalno */
    width: 100%;
    flex-grow: 1; /* Zagotovi, da se raztegne čez celoten 'main' element */
    background-color: #f0f2f5; /* Malce temnejše ozadje za kontrast */
}

.login-form {
    padding: 40px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 420px;
    text-align: center;
    border-top: 5px solid #007bff; /* Modra obroba na vrhu */
}

.login-form h1 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 26px;
    font-weight: 600;
    color: #333;
}

.login-form p {
    margin-bottom: 30px;
    color: #666;
    font-size: 14px;
}

.login-form .form-group {
    margin-bottom: 20px;
    text-align: left;
}

.login-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    font-size: 13px;
    color: #555;
}

/* Stil za vnosna polja in spustni seznam */
.login-form input[type="password"],
.login-form select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    font-size: 15px;
    transition: border-color 0.3s, box-shadow 0.3s;
    -webkit-appearance: none; /* Odstrani privzet izgled v Safari/Chrome */
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
}

/* Dodaj puščico za spustni seznam */
.login-form select {
    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%23666%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.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
}


.login-form input[type="password"]:focus,
.login-form select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.login-form .action-button {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.login-form .action-button:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.login-form .action-button:disabled {
     background-color: #a0a0a0;
     cursor: not-allowed;
     transform: none;
}

/* Stili za sporočila o napakah/uspehu */
.login-message {
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    display: none; /* Skrito po privzetem */
}

.login-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

.login-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}
/* Dodatni stili za prijavno okno in modal za spremembo gesla */

.login-form .extra-actions {
    text-align: center;
    margin-top: 20px;
}

.login-form .extra-actions a {
    color: #007bff;
    text-decoration: none;
    font-size: 13px;
}

.login-form .extra-actions a:hover {
    text-decoration: underline;
}

.login-form .form-group-inline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 25px;
    text-align: left;
}

.login-form .form-group-inline label {
    margin-bottom: 0;
    font-weight: normal;
    font-size: 14px;
    color: #555;
    cursor: pointer;
}

.login-form .form-group-inline input[type="checkbox"] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Stili za manjši modal */
.modal-content.small-modal {
    width: 100%;
    max-width: 450px; /* Manjša širina */
    height: auto; /* Višina se prilagaja vsebini */
}

.small-modal .modal-body {
    padding: 20px 25px;
    overflow-y: auto; /* Drsnik, če je vsebina predolga */
}

.small-modal .modal-body p {
    text-align: center;
    margin-bottom: 15px;
    font-size: 14px;
}

.small-modal .form-group {
    margin-bottom: 15px;
    text-align: left;
}

.small-modal .form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.small-modal .form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.modal-footer .cancel-btn {
    background-color: #6c757d;
}
.modal-footer .cancel-btn:hover {
    background-color: #5a6268;
}
/* Stili za odjavo in prikaz uporabnika */
#user-info {
    color: #e9ecef;
    margin-right: 20px;
    font-size: 12px;
}

#user-info span {
    font-weight: bold;
}

/* Poskrbimo, da so elementi v nav poravnani */
.main-header nav {
    display: flex;
    align-items: center;
}

#logout-link {
    background-color: #6c757d;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
    margin-left: 20px;
    text-decoration: none;
    transition: background-color 0.2s;
}

#logout-link:hover {
    background-color: #5a6268;
    text-decoration: none;
}
/* Dodajte na konec datoteke style.css */
#customer-selection-table {
    width: 100%;
    border-collapse: collapse;
}

#customer-selection-table th, #customer-selection-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
}

#customer-selection-table thead th {
    background-color: #f2f2f2;
    position: sticky;
    top: 0;
}

#customer-selection-tbody tr {
    cursor: pointer;
}

#customer-selection-tbody tr:hover {
    background-color: #f5f5f5;
}

#customer-selection-tbody tr.selected-row {
    background-color: #d4edff !important;
    color: #004085;
    font-weight: bold;
}

#customer-groups-container label {
    display: block;
    padding: 4px;
    border-radius: 3px;
}
#customer-groups-container label:hover {
     background-color: #f0f0f0;
}
#customer-group-actions a {
    color: #007bff;
    text-decoration: none;
}
#customer-group-actions a:hover {
    text-decoration: underline;
}
/* Dodajte to na konec datoteke style.css */

/* Osnovna postavitev tabele za bolj predvidljive širine stolpcev */
#customer-selection-table {
    table-layout: fixed;
    width: 100%;
}

/* 1. ID stolpec - ožji */
#customer-selection-table th:nth-child(1),
#customer-selection-table td:nth-child(1) {
    width: 70px;
}

/* Posodobljeno pravilo za Ime in Priimek */
#customer-selection-table th:nth-child(2),
#customer-selection-table td:nth-child(2) {
    width: 25%;
    white-space: normal; /* NOVO: Omogoči prelom besedila */
    word-wrap: break-word; /* NOVO: Zagotovi prelom dolgih besed */
}

/* 5. Država - ožji */
#customer-selection-table th:nth-child(5),
#customer-selection-table td:nth-child(5) {
    width: 80px;
    text-align: center;
}

/* 6. Naslov - prelom v več vrstic */
#customer-selection-table th:nth-child(6),
#customer-selection-table td:nth-child(6) {
    width: 35%; /* Dodelimo več prostora */
    white-space: normal; /* To omogoči prelom besedila v novo vrstico */
    word-wrap: break-word; /* Zagotovi prelom dolgih besed, če je potrebno */
}
/* NOVO: Stili za splošno potrditveno okno */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000; /* Mora biti nad vsemi ostalimi elementi */
}

.confirm-modal-content {
    background: #ffffff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 450px;
    text-align: center;
    border-top: 5px solid #ffc107; /* Rumena obroba za opozorilo */
}

.confirm-modal-header h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 20px;
    color: #333;
}

.confirm-modal-body p {
    margin-bottom: 25px;
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

.confirm-modal-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.confirm-modal-footer .action-button {
    padding: 10px 25px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 5px;
    min-width: 100px;
}
.tab-button {
    padding: 8px 15px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}
.tab-button.active {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    font-weight: bold;
}
.tab-content { display: none; }
.tab-content.active { display: block; }
.filter-checkbox-container {
    height: calc(85vh - 250px);
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
}
.filter-checkbox-container label { display: block; margin-bottom: 5px; cursor: pointer; }
.filter-checkbox-container label:hover { background-color: #f5f5f5; }
#staging-table th, #staging-table td {
    vertical-align: middle;
    border: none; /* <-- DODAJTE TO VRSTICO */
}
/* Oblikovanje desnega panela (vozička) v modalu za izbiro artiklov */
#article-staging-panel {
    border: 1px solid #ccc;      /* Doda tanko sivo obrobo */
    border-radius: 5px;           /* Rahlo zaobli robove */
    padding: 15px;                /* Doda notranji odmik, da vsebina ni prilepljena na rob */
    background-color: #fdfdfd;    /* Doda zelo nežno sivo ozadje za kontrast */
}



#staging-table input[type="number"] {
    width: 20px;
    padding: 4px;
    text-align: right;
    border: 1px solid #ccc;
    border-radius: 3px;
}
div#article-staging-panel {
  height: auto;
  margin-top: 60px;
  overflow-y: auto;
  margin-right: 5mm;
}

.remove-item-btn {
    background-color: #ffdddd;
    color: #d00;
    border: 1px solid #ffb8b8;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-weight: bold;
    cursor: pointer;
    line-height: 22px;
    text-align: center;
}
.remove-item-btn:hover {
    background-color: #f8c1c1;
}

#article-search-results-table tbody tr {
    cursor: pointer;
}
#article-search-results-table tbody tr:hover {
    background-color: #e6f7ff;
}
/* --- NOVI STILI ZA PRENOVLJENO OKNO ZA IZBIRO ARTIKLOV --- */

/* Osnova za 3-stolpčno postavitev */
#article-selection-modal .modal-body {
    display: flex;
    flex-direction: row; /* <-- DODAJTE TO VRSTICO */
    gap: 10px;
    //align-items: flex-start; /* <-- DODAJTE TO VRSTICO */
}

/* Definicija proporcev za vsak stolpec */
#article-availability-panel { width: 8%; }
#article-list-panel { width: 62%; }
#article-staging-panel { width: 30%; }

/* Splošna pravila za stolpce */
#article-availability-panel,
#article-list-panel,
#article-staging-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prepreči, da bi vsebina uhajala ven */
}

/* Naredi, da se vsebina zavihkov in tabel razteza */
#article-tab-content-wrapper { flex-shrink: 0; }
#article-list-panel .table-container { flex-grow: 1; }


/* Pravila za vidnost opisa artikla */

/* Sredinski stolpec - seznam artiklov */
#article-search-results-table .col-article-desc {
    width: 30%; /* Daj opisu največ prostora */
}
#article-search-results-table td.col-article-desc {
    white-space: normal;      /* DOVOLI prelom besedila */
    word-wrap: break-word;    /* Prelomi dolge besede */
}

/* Desni stolpec - voziček */
#staging-table .col-cart-desc { width: 50%; }
#staging-table .col-cart-week { width: 12%; text-align: center; }
#staging-table .col-cart-packs { width: 15%; } /* Novo: Št. Pakiranj */
#staging-table .col-cart-total { width: 15%; text-align: right; } /* Novo: Skupaj kosov */
#staging-table .col-cart-remove { width: 8%; text-align: center; }

/* Dodatni stil za izračunano količino */
.total-quantity-display {
    padding: 4px;
    font-weight: bold;
    text-align: right;
    display: block;
}
td.col-cart-desc {
  white-space: normal; /* Allows text to wrap */
  overflow: visible;   /* Ensures all content is visible */
  text-overflow: clip; /* Prevents ellipsis from showing */
}


/* Manjši popravki za lepši izgled */
#article-main-filters { flex-shrink: 0; }
#article-list-panel h4, #article-availability-panel h4, #article-staging-panel h4 {
    margin: 0 0 5px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}
#article-search-results-table tbody tr {
    cursor: pointer;
}
#article-search-results-table tbody tr.selected-row {
    background-color: #bee5eb !important;
}
.staging-options {
    padding: 5px;
    display: flex;
    gap: 15px;
    flex-shrink: 0;
    overflow: visible;
    position: relative;
    z-index: 100;
}
/* --- NOVI STILI ZA ZAVIHKI V SREDINSKEM BLOKU --- */

/* Poskrbimo, da se #article-list-panel pravilno razteza */
#article-list-panel {
    display: flex;
    flex-direction: column;
    overflow-y: visible;
}

#article-tabs-main {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid #ccc;
}

#article-tabs-main .tab-button {
    padding: 8px 15px;
    border: 1px solid transparent;
    border-bottom: none;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    margin-bottom: -1px; /* Da se zlije s spodnjo obrobo */
    color: #555;
}
#article-tabs-main .tab-button.active {
    background-color: #fff;
    border-color: #ccc;
    font-weight: bold;
    color: #000;
}

/* Glavni vsebinski del zavihkov, ki se razteza */
#article-main-content-wrapper {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    border: 1px solid #ccc;
    border-top: none;
}

#article-main-content-wrapper .tab-content {
    display: none;
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

#article-main-content-wrapper .tab-content.active {
    display: flex;
    flex-direction: column;
}

/* Zavihek s filtri - naj bo vsebina drsna */
#tab-types .filter-checkbox-container,
#tab-suppliers .filter-checkbox-container {
    height: 100%;
    overflow-y: auto;
    padding-right: 10px; /* za lepši drsnik */
}

/* Zavihek z artikli */
#tab-articles #article-text-search-input {
    width: 33.33%; /* <-- SPREMEMBA NA TRETJINO ŠIRINE */
    padding: 8px;
    flex-shrink: 0;
    box-sizing: border-box;
}


#tab-articles #article-table-container {
      max-height: 800px; /* Adjust this value as needed */
      overflow-y: auto; /* Ensure this is set */
    }
/* Stili za dobavljivost artiklov */
#availability-details-container tbody tr.available {
    background-color: #e6ffed; /* Nežno zelena */
}
#availability-details-container tbody tr.unavailable {
    background-color: #ffe6e6; /* Nežno rdeča */
}
/* NOVO: Stili za klikabilne vrstice v levem stolpcu */
#availability-details-container tbody tr {
    cursor: pointer;
}
/* NOVO: Pravilo za prehod miške čez ZELENO (dobavljivo) vrstico */
#availability-details-container tbody tr.available:hover {
    background-color: #c3e6cb; /* Temnejša zelena */
}

/* NOVO: Pravilo za prehod miške čez RDEČO (nedobavljivo) vrstico */
#availability-details-container tbody tr.unavailable:hover {
    background-color: #f5c6cb; /* Temnejša rdeča */
}

/* NOVO: Definicija širine za dva stolpca v tabeli z dobavljivostjo */
#availability-details-container th:nth-child(1),
#availability-details-container td:nth-child(1) {
    width: 65%; /* Teden */
}
#availability-details-container th:nth-child(2),
#availability-details-container td:nth-child(2) {
    width: 35%; /* Zaloga */
    text-align: right;
    padding-right: 8px;
}
/* NOVO: Stil za poudarjeno vrstico izbranega tedna v levem stolpcu */
#availability-details-container tbody tr.selected-week-row {
    font-weight: bold;
}

/* Zamenjajte obstoječa pravila s temi: */

/* Poskrbimo za vertikalno centriranje */
/* POPRAVEK: Pravilo za vertikalno centriranje gumba za prenos */
#article-transfer-actions {
    width: 50px;
    display: flex;
    align-items: center;      /* <<< TA VRSTICA PORAVNA GUMB VERTIKALNO */
    justify-content: center;
    flex-shrink: 0;
}
#article-transfer-actions {
  height: 100vh;
}

/* Nov, moderen izgled gumba */
#transfer-selected-btn {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* Zaobljeni robovi */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08); /* Nežna senca */
    transition: all 0.2s ease-in-out;
}

#transfer-selected-btn svg {
    color: #333; /* Barva puščice */
}

#transfer-selected-btn:hover {
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

/* S TEM ZAMENJAJTE: */
#article-search-results-table tbody tr.selected-row,
#article-search-results-table tbody tr.multi-selected {
    background-color: #bee5eb !important; /* Svetlo turkizna barva */
    color: #0c5460;
    font-weight: bold; /* NOVO: Dodana krepka pisava za poenoten videz */
}
/* NOVO: Prepreči označevanje besedila v tabeli med vlečenjem miške */
#article-search-results-table.is-selecting {
    user-select: none; /* Standardni brskalniki */
    -webkit-user-select: none; /* Za Safari */
}
/* Povečaj gumb za dodajanje artiklov na strani za novo naročilo */
#add-items-btn {
    font-size: 12px;
    padding: 6px 12px;
}

/* Zgornje pravilo zamenjajte s tema dvema */
#article-text-search-input {
    flex: 4; /* Zavzame 4 dele razpoložljivega prostora */
}

#article-size-search-input {
    flex: 1; /* Zavzame 1 del razpoložljivega prostora */
}
/* NOVO: Stili za preklopni gumb (toggle switch) za dobavljivost */

.availability-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px; /* Dodamo malo razmika od izbornika za teden */
}

.availability-toggle span {
    font-size: 11px;
    font-weight: bold;
    color: #555;
}

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #28a745; /* Zelena barva, ko je aktivno */
}

input:focus + .slider {
    box-shadow: 0 0 1px #28a745;
}

input:checked + .slider:before {
    transform: translateX(14px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
/* Stili za nov stolpec s ceno */
#article-search-results-table .col-article-price {
    width: 80px;
    text-align: right;
    font-weight: bold;
}

/* Animacija za nalaganje cene */
.price-loader {
    display: inline-block;
    color: #ccc;
    animation: pulse-loader 1.5s infinite;
}
@keyframes pulse-loader {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}
/* Stili za prikaz cene in imena cenika */
.col-article-price {
    line-height: 1.2;
}
.price-value {
    display: block; /* Vsak na svoji vrstici */
    font-weight: bold;
}
.pricelist-name {
    display: block; /* Vsak na svoji vrstici */
    font-size: 9px;
    color: #6c757d;
    font-weight: normal;
    font-style: italic;
}
/* --- NOVO: Stili za modalno okno naročil dobavitelju --- */
.so-navigator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 10px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}
.so-navigator span {
    font-size: 16px;
}
.so-navigator button {
    font-size: 18px;
    font-weight: bold;
    padding: 2px 10px;
}

.so-header {
    display: flex;
    gap: 40px;
    padding: 15px;
    background-color: #f1f3f5;
    font-size: 14px;
}
.so-header span {
    color: #555;
}

.so-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.so-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.so-summary-group {
    margin-top: 20px;
}
.so-summary-group h4 {
    margin: 0 0 5px 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #adb5bd;
}
.summary-table td:nth-child(n+2) {
    text-align: right;
}
/* --- NOVI STILI ZA POSTAVITEV OKNA NAROČIL DOBAVITELJU --- */

/* Omogočimo flexbox za telo modala, da lahko razdelimo prostor */
#supplier-order-modal .modal-body {
    display: flex;
    flex-direction: column; /* Sklopi bodo razporejeni vertikalno */
    padding: 0; /* Odstranimo notranji odmik, da se paneli raztegnejo do roba */
    overflow: hidden; /* Preprečimo, da bi se pojavil en sam napačen drsnik */
}

/* Stil za posamezen sklop/panel */
.so-pane {
    border-bottom: 1px solid #dee2e6; /* Svetla črta med sklopi */
    box-sizing: border-box;
}
.so-pane:last-child {
    border-bottom: none; /* Zadnji sklop nima črte na dnu */
}

/* Sklop 1: Navigator - fiksna višina */
#so-navigator-pane {
    flex-shrink: 0; /* Preprečimo, da bi se ta sklop krčil ali raztezal */
    background-color: #f8f9fa;
}

/* Vsebnik za tri glavne sklope, ki se razteza in deli prostor */
.so-content-wrapper {
    flex-grow: 1; /* Zavzame ves preostali prostor v višino */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Pomembno, da se vsebina ne razlije čez */
}

/* Sklopi 2, 3 in 4 - enaka višina in drsnik */
.so-scrollable-pane {
    flex: 1; /* Vsak od treh sklopov zavzame enako količino prostora */
    overflow-y: auto; /* KLJUČNO: Doda vertikalni drsnik, ČE je vsebina daljša */
    min-height: 0; /* Pomemben trik za pravilno delovanje flexboxa v vseh brskalnikih */
    padding: 15px; /* Dodamo notranji odmik za lepši izgled vsebine */
}

/* Manjši popravki za vsebino znotraj sklopov */
.so-scrollable-pane .placeholder-text {
    padding: 20px;
    text-align: center;
    color: #888;
    font-style: italic;
}

.so-scrollable-pane h4 {
    margin-top: 0;
}

.so-scrollable-pane .so-table {
    font-size: 12px; /* Povečajmo pisavo za boljšo berljivost */
}


/* --- NOVO: Stili za prikaz kod v glavi modalnega okna --- */

/* Prilagoditev glave modala, da se elementi pravilno poravnajo */
#supplier-order-modal .modal-header {
    display: flex;
    align-items: center; /* Vertikalna poravnava na sredino */
}

/* Vsebnik za kodi, ki se raztegne in potisne gumb za zapiranje na desno */
.so-header-codes {
    flex-grow: 1; /* Zavzame ves preostali prostor med naslovom in gumbom */
    display: flex;
    flex-direction: column; /* Kodi bosta prikazani ena pod drugo */
    align-items: center;    /* Horizontalno centriranje */
    justify-content: center;
    padding: 0 20px;
    font-size: 11px;
    text-align: left; /* Leva poravnava znotraj vsebnika */
}

.code-pair {
    display: flex;
    gap: 8px; /* Razmak med oznako in vrednostjo */
    min-width: 350px; /* Minimalna širina za lepšo poravnavo */
}

.code-pair label {
    font-weight: normal;
    color: #6c757d; /* Siva barva za oznako */
    width: 140px; /* Fiksna širina za poravnavo */
    text-align: right;
}

.code-pair span {
    font-weight: bold;
    font-family: monospace; /* Pisava s fiksno širino za lepši prikaz kod */
    color: #333;
}
/* --- NOVO: Stili za prikaz glave dogodka (Sklop 2) --- */

/* --- NOVO: Stili za tabelarični prikaz glave dogodka (Sklop 2) --- */

/* --- SPREMEMBA: Zgoščen prikaz tabel v oknu za naročila dobavitelju --- */
.so-header-table th, .so-header-table td,
.so-table th, .so-table td,
.summary-table th, .summary-table td {
    padding: 1px 6px; /* Zmanjšan vertikalni padding za nižje vrstice */
    text-align: left;
    border: 1px solid #e9ecef;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    font-size: 11px; /* Poenotimo velikost pisave */
    height: 18px; /* Fiksiramo višino vrstice za konsistenten izgled */
}

/* Ohranimo posebna pravila za glave tabel */
.so-header-table thead th,
.so-table thead th,
.summary-table thead th {
    background-color: #f8f9fa;
    font-weight: bold;
}

/* Ohranimo poravnavo za summary tabelo */
.summary-table td:nth-child(n+2) {
    text-align: right;
}
/* === NOVO: Stili za poudarjanje sprememb in statusov v stolpcu Akcija === */

/* Rdeče ozadje za vse, kar ni 'Enako' */
.so-table td.akcija-sprememba {
    background-color: #ffe6e6; /* Nežno rdeča barva ozadja */
}

/* Zeleno ozadje za status 'Enako' */
.so-table td.akcija-enako {
    background-color: #e6ffed; /* Nežno zelena barva ozadja */
}
/* === NOVO: Poravnava besedila v stolpcu Akcija na sredino === */
.so-table td:nth-child(9) {
    text-align: center;
}
/* --- KONČNI STILI za status Naročilo/Potrdilo v glavi modalnega okna --- */
#so-header-codes {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* poravnava na levo */
    gap: 8px;
    margin-bottom: 10px;
}

#so-header-codes .code-pair {
    justify-content: flex-start; /* poravnava vsebine na levo */
    text-align: left;            /* tekst levo */
    width: 100%;                 /* zavzame celotno širino */
    font-size: 15px; /* Poenotimo velikost pisave */
}

#so-header-codes .code-pair span,
#so-header-codes .code-pair label {
    text-align: left;
    font-size: 15px; /* Poenotimo velikost pisave */
}

#so-header-codes label {
    font-weight: bold;
    color: #333;
    min-width: 120px;
    line-height: 1.2;
}

#so-header-codes span {
    color: #000;
    line-height: 1.2;
}

.status-potrdilo {
    background: #d4edda;
    color: #155724;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
}

.status-narocilo {
    background: #fff3cd;
    color: #856404;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 4px;
}
/* Odstranitev puščic gor/dol pri input type=number */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
.week-combobox {
    position: relative;
    display: inline-flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
}

.week-input {
    border: none;
    padding: 3px 6px;
    font-size: 11px;
    width: 20px;
    outline: none;
}

.week-dropdown-btn {
    background: #f0f0f0;
    border: none;
    cursor: pointer;
    padding: 0 6px;
    font-size: 12px;
    height: 100%;
    border-left: 1px solid #ccc;
}

.week-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    z-index: 999;
    width: 200px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.week-dropdown.hidden {
    display: none;
}

.week-dropdown div {
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.week-dropdown div:hover {
    background-color: #f5f5f5;
}
/* Povečajmo širino spustnega seznama, da bo prostor za stolpce */
.week-dropdown {
    width: 200px;
}

/* Stil za glavo spustnega seznama */
.week-dropdown-header {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: bold;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

/* Stil za posamezno vrstico v spustnem seznamu */
.week-dropdown-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    text-align: center;
}

.week-dropdown-row:hover {
    background-color: #f5f5f5;
}

/* Definicija širin in poravnave za glavo in stolpce */
.week-dropdown-header span,
.week-dropdown-row span {
    display: inline-block;
    box-sizing: border-box;
}

.week-dropdown-header span:nth-child(1),
.week-col-num {
    width: 25%;
    font-weight: bold;
}

.week-dropdown-header span:nth-child(2),
.week-col-from {
    width: 37.5%;
}
/* --- NOVI STILI ZA MODALNO OKNO ZA E-MAIL --- */
.email-modal-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
}
.email-modal-header h3 {
    flex-grow: 1;
    text-align: center;
    font-size: 16px;
    color: #333;
    margin: 0;
}
#email-send-btn {
    background-color: #0078d4;
    color: white;
    font-weight: bold;
    padding: 6px 20px;
    border-radius: 4px;
    border: 1px solid #0078d4;
}
#email-send-btn:hover {
    background-color: #005a9e;
}

.email-modal-content-wrapper {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow-y: auto;
}

.email-modal-recipients .recipient-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
    font-size: 14px;
}
.email-modal-recipients label {
    color: #666;
    padding: 10px 15px;
}
.email-modal-recipients input {
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 10px 5px;
    background-color: transparent;
}

.email-modal-attachments {
    padding: 10px 0;
    border-bottom: 1px solid #e0e0e0;
}
.email-modal-attachments label {
    color: #666;
    font-size: 14px;
    padding: 0 15px;
}
#email-attachment-list {
    margin-top: 10px;
    padding-left: 15px;
}
.attachment-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 20px;
    background-color: #f5f5f5;
    margin-right: 10px;
}
.attachment-item a {
    text-decoration: none;
    color: #0078d4;
    font-weight: 500;
}
.attachment-item a:hover {
    text-decoration: underline;
}
.attachment-item svg {
    width: 16px;
    height: 16px;
    color: #555;
}

.email-modal-body {
    flex-grow: 1;
    display: flex;
    padding-top: 10px;
}
#email-body-textarea {
    width: 100%;
    height: 300px; /* Privzeta višina, se lahko razteza */
    border: none;
    outline: none;
    resize: vertical;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.week-dropdown-header span:nth-child(3),
.week-col-to {
    width: 37.5%;
}
/* --- NOVI STILI ZA FIKSNO NOGO TABELE S SEŠTEVKI --- */

/* Sklop za povzetek spremenimo v flex container, ki razporeja elemente vertikalno */
#so-summary-pane {
    display: flex;
    flex-direction: column;
    padding: 0; /* Odstranimo notranji odmik, da se vsebina lahko raztegne do robov */
}

/* Ustvarimo nov vsebnik za drsni del tabele (vrstice s podatki) */
.summary-table-scroll-container {
    flex-grow: 1; /* Ta del se bo raztegnil in zavzel ves razpoložljiv prostor */
    overflow-y: auto; /* Doda vertikalni drsnik, samo če je vsebina predolga */
    padding: 15px; /* Vrnemo odmik za vsebino */
}


/* Stili za novo postavitev iskalnih polj */

/* ================================================= */
/* POPRAVEK: Poenotenje višine za iskalna polja      */
/* =-=============================================== */

/* Najprej ponastavimo VSE inpute znotraj zavihka na enotno osnovo */
#tab-articles input[type="text"] {
    padding: 6px 8px; /* Enoten padding za vse */
    font-size: 13px;  /* Enotna velikost pisave */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    height: 32px; /* Določimo fiksno višino za vse */
}

/* Nato ohranimo pravila za razporeditev širine */
.search-inputs-container {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center; /* Poravnaj elemente vertikalno na sredino */
}

#article-code-search-input,
#article-size-search-input {
    flex: 1;
}

#article-text-search-input {
    flex: 4;
}
await setElementStyles($0.parentElement, {'overflow-y': 'auto'});
const computedStyles = window.getComputedStyle($0.parentElement);
const data = {
  parentOverflowY: computedStyles['overflow-y']
};
input.packs-quantity-input {
  width: 1cm;
}
const element = $0;
const elementStyles = window.getComputedStyle(element);

const data = {
  selector: element.tagName.toLowerCase() + (element.id ? '#' + element.id : '') + (element.className ? '.' + Array.from(element.classList).join('.') : ''),
  styles: {
    display: elementStyles.getPropertyValue('display'),
    height: elementStyles.getPropertyValue('height'), // Including current computed height for context
    maxHeight: elementStyles.getPropertyValue('max-height'),
    minHeight: elementStyles.getPropertyValue('min-height'),
    overflow: elementStyles.getPropertyValue('overflow'),
    overflowY: elementStyles.getPropertyValue('overflow-y'),
    overflowX: elementStyles.getPropertyValue('overflow-x'),
    flexGrow: elementStyles.getPropertyValue('flex-grow'), // Important for its layout in parent
    flexShrink: elementStyles.getPropertyValue('flex-shrink'),
    flexBasis: elementStyles.getPropertyValue('flex-basis')
  }
};
/* Stil za prikaz verzije aplikacije v glavi */
.app-version {
    font-size: 11px;
    font-weight: bold;
    color: #ffc107; /* Opozorilna rumena barva za dobro vidnost */
    vertical-align: super;
    margin-left: 8px;
    padding: 2px 6px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* === NOVO: Stil za prikaz tekočega tedna v glavi === */
.header-week-info {
    color: #ffc107; /* Rumena barva, enako kot verzija aplikacije */
    font-size: 12px;
    font-weight: bold;
    margin-right: 20px; /* Razmik do imena uporabnika */
}


/* ========================================================================== */
/* STILI ZA OKNO NAROČILO DOBAVITELJU - KONČNA VERZIJA                        */
/* ========================================================================== */

#so-detail-pane { padding-top: 0 !important; }
#so-header-pane { padding-bottom: 0 !important; }

#supplier-order-modal .so-table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse;
    margin-top: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* LOGIKA ZA GLAVE: NAROČILO / POTRDILO                                       */
/* -------------------------------------------------------------------------- */

/* AKTIVNO: Črno, debelo, 100% vidno */
#supplier-order-modal .so-table .group-header-row th.active-header-bold {
    font-weight: 900 !important;
    color: #000000 !important;
    opacity: 1 !important;
    letter-spacing: 12px !important;
    border-bottom: 3px solid #000 !important;
    text-transform: uppercase;
}

/* NEAKTIVNO: Zbledelo sivo, a še vedno viden napis */
#supplier-order-modal .so-table .group-header-row th:not(.active-header-bold) {
    font-weight: 400 !important;
    color: #cccccc !important;
    opacity: 0.6 !important;
    letter-spacing: 8px !important;
    border-bottom: 1px solid #eeeeee !important;
}

.header-naročilo-naslov { background-color: #fff3cd !important; border: 1px solid #ccc !important;text-align: center!important }
.header-potrdilo-naslov { background-color: #d4edda !important; border: 1px solid #ccc !important;text-align: center!important }
.header-prazno { background-color: white !important; border: none !important; }

/* -------------------------------------------------------------------------- */
/* LOGIKA ZA NAPIS "AKCIJA" (RDEČ FONT OB RAZLIKAH)                           */
/* -------------------------------------------------------------------------- */

/* Ko JS ugotovi razliko, doda ta class na 9. stolpec (AKCIJA) v glavi */
.akcija-glava-rdeca {
    color: #ff0000 !important; /* Rdeč font napisa AKCIJA */
    font-weight: 900 !important;
}

/* Vsebina pod napisem AKCIJA ostane nespremenjena (brez zelene!) */
.akcija-enako {
    color: inherit;
}

.akcija-sprememba {
    color: #ff0000 !important; /* Če želiš tudi tekst "Razlika" rdeč, pusti to, sicer zbriši */
    font-weight: bold;
}

/* -------------------------------------------------------------------------- */
/* FIKSNE ŠIRINE STOLPCEV                                                     */
/* -------------------------------------------------------------------------- */
#supplier-order-modal .so-table .main-header-row th:nth-child(1)  { width: 5%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(2)  { width: 8%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(3)  { width: 2%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(4)  { width: 5%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(5)  { width: 13%; }
#supplier-order-modal .so-table .main-header-row th:nth-child(6)  { width: 6%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(7)  { width: 5%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(8)  { width: 8%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(9)  { width: 2%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(10) { width: 2%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(11) { width: 9%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(12) { width: 2%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(13) { width: 5%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(14) { width: 7%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(15) { width: 13%; }
#supplier-order-modal .so-table .main-header-row th:nth-child(16) { width: 5%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(17) { width: 5%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(18) { width: 4%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(19) { width: 4%;  }
#supplier-order-modal .so-table .main-header-row th:nth-child(20) { width: 10%; }