/* ============================================================
   Karlix QMS — lista s filterima (Svi slučajevi)
   Dopuna uz qms.css. Učitava se poslije njega.
   ============================================================ */

/* ------------------------------------------------------------
   1. TRAKA FILTERA
   ------------------------------------------------------------ */

.qms-filters {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.qms-filters-head { display: flex; align-items: center; gap: 10px; }
.qms-filters-title {
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600;
}
.qms-filters-note { font-size: 12.5px; color: var(--ink-3); }
.qms-filters-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

.qms-filter-grid { display: grid; gap: 10px; }
.qms-filter-grid--main { grid-template-columns: 2fr 1fr 1fr 1fr; }
.qms-filter-grid--rest { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.qms-filter-grid--aud  { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }

.qms-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qms-field-label {
    font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--ink-3); font-weight: 600;
}

/* ------------------------------------------------------------
   2. MULTISELECT
   ------------------------------------------------------------ */

.qms-ms { position: relative; }

.qms-ms-btn {
    display: flex; align-items: center; gap: 8px;
    width: 100%; height: 38px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink);
    font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.qms-ms-btn:hover { border-color: var(--pop-line); }
.qms-ms-btn.is-active {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-text);
}
.qms-ms-btn[aria-expanded="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.qms-ms-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qms-ms-count {
    flex: 0 0 auto; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px;
    background: var(--accent); color: var(--accent-ink);
    font-size: 10.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums;
}
.qms-ms-chev { margin-left: auto; font-size: 10px; opacity: .6; }

.qms-ms-panel {
    position: absolute; top: calc(100% + 6px); left: 0;
    z-index: 30;
    width: 296px; max-width: 90vw;
    padding: 8px;
    border-radius: 11px;
    background: var(--pop);
    border: 1px solid var(--pop-line);
    box-shadow: var(--shadow-pop);
    display: none;
    flex-direction: column; gap: 6px;
}
.qms-ms-panel.is-open { display: flex; }
.qms-ms-panel--right { left: auto; right: 0; }

/* tekst u popoveru — svjetlija razina, popover je svjetliji od kartice */
.qms-ms-panel { --ink-3: var(--ink-pop, #a8b1b5); }
.qms-theme-light .qms-ms-panel { --ink-pop: #5f6b70; }

.qms-ms-search {
    display: flex; align-items: center; gap: 9px;
    height: 34px; padding: 0 11px;
    border: 1px solid var(--pop-line);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--ink);
}
.qms-ms-search input {
    flex: 1; min-width: 0;
    border: 0; background: transparent; color: inherit;
    font: inherit; font-size: 13px; outline: none;
}
.qms-ms-search input::placeholder { color: var(--ink-3); }

.qms-ms-tools { display: flex; align-items: center; gap: 12px; padding: 2px 4px 6px; }
.qms-ms-tools button {
    border: 0; background: none; padding: 0;
    font: inherit; font-size: 12px; cursor: pointer;
}
.qms-ms-selectall { color: var(--accent-text); }
.qms-ms-clear { color: var(--ink-3); }
.qms-ms-counter { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.qms-ms-list {
    display: flex; flex-direction: column; gap: 1px;
    max-height: 340px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: var(--pop-line) transparent;
}
.qms-ms-group {
    padding: 8px 8px 4px;
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-3);
}
.qms-ms-opt {
    display: flex; align-items: center; gap: 10px;
    box-sizing: border-box;
    padding: 8px 9px; min-height: 36px;
    border-radius: 7px;
    font-size: 13px; color: var(--ink-2);
    cursor: pointer;
}
.qms-ms-opt:hover { background: var(--surface-3); }
.qms-ms-opt.is-on { background: var(--accent-soft); color: var(--ink-strong); }
.qms-ms-opt[hidden] { display: none; }
.qms-ms-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qms-ms-optcount { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.qms-check {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; flex: 0 0 auto;
    border-radius: 4px;
    border: 1px solid var(--ink-5);
    background: transparent;
    color: var(--accent-ink);
}
.qms-check i { display: none; font-size: 11px; }
.is-on > .qms-check,
.qms-check.is-on {
    border-color: var(--accent); background: var(--accent);
}

/* Kvačica u zaglavlju nosi i crticu za „dio odabran", pa se mora birati
   po ikoni. Dok se biralo po `i`, u označenom stanju su se prikazale
   OBJE i kvačica je stajala postrance umjesto na sredini. */
.is-on > .qms-check i.bi-check-lg,
.qms-check.is-on i.bi-check-lg { display: block; }

.qms-check.is-some { border-color: var(--accent); background: var(--accent); }
.qms-check.is-some i.bi-dash { display: block; }
.qms-check.is-some i.bi-check-lg { display: none; }

.qms-ms-foot {
    display: flex; align-items: center; gap: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--pop-line);
    font-size: 11.5px; color: var(--ink-3);
}
.qms-ms-apply { margin-left: auto; }

/* ------------------------------------------------------------
   3. ČIPOVI AKTIVNIH FILTERA
   ------------------------------------------------------------ */

.qms-chips {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.qms-chips-label { font-size: 12px; color: var(--ink-3); }
.qms-chip {
    display: inline-flex; align-items: center; gap: 8px;
    height: 28px; padding: 0 10px;
    border: 1px solid var(--accent-line);
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: 12.5px; text-decoration: none;
}
.qms-chip:hover { text-decoration: none; color: var(--accent-text); border-color: var(--accent); }
.qms-chip-key { opacity: .7; }
.qms-chip-x { font-size: 9.5px; opacity: .7; }

/* ------------------------------------------------------------
   4. TRAKA ODABIRA
   ------------------------------------------------------------ */

.qms-selbar {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 18px;
    border: 1px solid var(--accent-line);
    border-radius: 11px;
    background: var(--accent-soft);
}

/* `display: flex` nadjačava ugrađeno pravilo za [hidden], pa se traka nije
   skrivala ni kad JS postavi hidden. Dosad se to nije vidjelo jer je popis
   uvijek imao sve retke označene, pa je traka ionako uvijek stajala. */
.qms-selbar[hidden] { display: none; }
.qms-selbar-count { font-size: 13.5px; font-weight: 600; color: var(--ink-strong); }
.qms-selbar-note { font-size: 13px; color: var(--ink-3); }
.qms-selbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------
   5. GRID
   ------------------------------------------------------------ */

.qms-grid-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.qms-list { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.qms-list thead th {
    text-align: left; padding: 10px 12px;
    font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
    font-weight: 600; color: var(--ink-3);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
/* napomena uz izbor broja redaka kad je stranica velika */
.qms-perpage-note {
    display: inline-flex; align-items: center; gap: 5px;
    margin-left: 8px;
    font-size: 11.5px; color: var(--ink-3); white-space: nowrap;
}
.qms-perpage-note i { font-size: 11px; }

.qms-list th.col-check, .qms-list td.col-check { width: 44px; padding: 10px 0 10px 20px; }
.qms-list th:last-child, .qms-list td:last-child { padding-right: 20px; }
.qms-list th.num, .qms-list td.num { text-align: right; font-variant-numeric: tabular-nums; }

.qms-list thead a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.qms-list thead a:hover { color: var(--ink-strong); text-decoration: none; }
.qms-sort { font-size: 10px; color: var(--accent-text); }

.qms-list tbody td { padding: 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.qms-list tbody tr { cursor: pointer; }
.qms-list tbody tr:hover td { background: var(--surface-2); }
.qms-list tbody tr.is-selected td { background: var(--accent-soft); }
.qms-list tbody tr.is-selected:hover td { background: var(--accent-soft); }
.qms-list tbody tr:last-child td { border-bottom: 0; }

.qms-list .t-main { color: var(--ink-strong); }
.qms-list .t-sub { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.qms-list .t-sub span { font-size: 12.5px; color: var(--ink-3); }
.qms-list .t-muted { color: var(--ink-2); white-space: nowrap; }

.qms-origin {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 1px 7px; border-radius: 5px;
    background: var(--warn-soft); color: var(--warn-text);
    font-size: 11.5px !important;
}
.qms-origin i { font-size: 10.5px; }

.qms-age { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.qms-age.is-warn { color: var(--warn-text); font-weight: 600; }
.qms-age.is-bad { color: var(--bad-text); font-weight: 600; }

/* ------------------------------------------------------------
   6. PODNOŽJE GRIDA
   ------------------------------------------------------------ */

.qms-grid-foot {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 13px 20px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
    font-size: 12.5px; color: var(--ink-3);
}
.qms-perpage { display: flex; align-items: center; gap: 9px; }
.qms-perpage select {
    height: 32px; padding: 0 8px;
    border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.qms-pager { display: flex; align-items: center; gap: 6px; }
.qms-pager a, .qms-pager span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 8px;
    border: 1px solid var(--line-strong); border-radius: 8px;
    color: var(--ink-2); font-size: 12.5px; text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.qms-pager a:hover { border-color: var(--pop-line); color: var(--ink-strong); text-decoration: none; }
.qms-pager .is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.qms-pager .is-disabled { color: var(--ink-5); pointer-events: none; }

.qms-exports { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.qms-exports .btn { min-height: 32px; padding: 5px 11px; font-size: 12.5px; }

.qms-list-note {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; color: var(--ink-3);
}

/* ------------------------------------------------------------
   7. RESPONZIVNO
   ------------------------------------------------------------ */

@media (max-width: 1400px) {
    .qms-filter-grid--main { grid-template-columns: 1fr 1fr 1fr; }
    .qms-filter-grid--rest,
    .qms-filter-grid--aud  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .qms-filter-grid--main,
    .qms-filter-grid--rest,
    .qms-filter-grid--aud { grid-template-columns: minmax(0, 1fr); }

    .qms-list thead { display: none; }
    .qms-list, .qms-list tbody, .qms-list tr, .qms-list td { display: block; width: auto; }
    .qms-list tbody tr {
        position: relative;
        border: 1px solid var(--line);
        border-radius: var(--r-sm);
        background: var(--surface);
        padding: 13px 15px 13px 46px;
        margin-bottom: 11px;
    }
    .qms-list tbody tr.is-selected { border-color: var(--accent-line); }
    .qms-list tbody td { border: 0; padding: 3px 0 !important; }
    .qms-list td.col-check { position: absolute; top: 13px; left: 15px; width: auto; }
    .qms-list tbody td[data-label]::before {
        content: attr(data-label) " ";
        font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
        color: var(--ink-4); margin-right: 8px;
    }
    .qms-list tbody td[data-label=""]::before { content: none; }
    .qms-list td.num { text-align: left; }
    .qms-grid-wrap { background: transparent; border: 0; }
    .qms-grid-foot { border-radius: var(--r-sm); border: 1px solid var(--line); }

    .qms-selbar {
        position: sticky; bottom: 0; z-index: 25;
        background: var(--surface);
        border-color: var(--accent);
        flex-wrap: wrap;
    }
    .qms-selbar-actions { margin-left: 0; width: 100%; }
}

/* Zatvoreni slučaj: brojka dana je trajanje rješavanja, ne zaostatak, pa se ne
   boji ni žuto ni crveno bez obzira na to koliko je velika. */
.qms-age.is-done { color: var(--ink-2); font-weight: 400; }

/* Na telefonu red izvoza (Stupci + tri formata + Ispis) ne stane u 375 px, pa
   je gurao cijelu stranicu u vodoravno pomicanje. Kartice iznad popisa
   rješava qms-notifications.css. */
@media (max-width: 720px) {
    .qms-exports { margin-left: 0; flex-wrap: wrap; width: 100%; }
    .qms-exports .btn { flex: 0 1 auto; }
}

/* ------------------------------------------------------------
   8. ŠIRINE STUPACA — popis svih slučajeva (plan 097, N-04)

   Bile su upisane kao umetnuti stil na svakom `th`. Isti popis u novijim
   modulima drži ih ovdje, uz semantički razred ćelije (`.qms-list--dob
   th.c-code`), pa dodavanje stupca poslije ništa ne pomiče — `nth-child` se
   ne koristi.
   ------------------------------------------------------------ */

.qms-list--cases th.c-number { width: 170px; }
.qms-list--cases th.c-status { width: 200px; }
.qms-list--cases th.c-owner  { width: 140px; }
.qms-list--cases th.c-issued { width: 120px; }
.qms-list--cases th.c-age    { width: 110px; }

/* Razvrstavanje artikala u skupine (/Admin/ProductGroups). Naziv artikla nosi
   ostatak širine, pa nema svoju mjeru — šifra i skupina imaju. */
.qms-list--skp th.c-code  { width: 150px; }
.qms-list--skp th.c-group { width: 280px; }