/* ============================================================
   Karlix QMS — novi slučaj
   Dopuna uz qms.css i qms-case.css. Učitava se poslije njih.
   ============================================================ */

/* ------------------------------------------------------------
   1. FORMA
   Kratka je namjerno: reklamacija dolazi telefonom i mora se
   zapisati u pola minute. Sedam polja, bez skrolanja.
   ------------------------------------------------------------ */

.qms-newcase {
    max-width: 820px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
}

.qms-newcase-head {
    display: flex; align-items: center; gap: 11px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
}
.qms-newcase-title { font-size: 17px; font-weight: 600; color: var(--ink-strong); }
.qms-newcase-note { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }

.qms-newcase-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 18px; }
.qms-newcase-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.qms-newcase-foot {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}
.qms-newcase-foot .qms-newcase-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* ------------------------------------------------------------
   2. VRSTA SLUČAJA
   Uz naziv stoji izvor — „RIN“ i „UN“ ne govore koju odabrati
   onome tko prvi put unosi.
   ------------------------------------------------------------ */

.qms-typechoices { display: flex; gap: 9px; }

.qms-typechoice {
    flex: 1;
    display: flex; flex-direction: column; gap: 3px;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: var(--surface-2);
    cursor: pointer;
}
.qms-typechoice input { position: absolute; opacity: 0; pointer-events: none; }
.qms-typechoice-top { display: flex; align-items: center; gap: 8px; }
.qms-typechoice-top i { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-3); }
.qms-typechoice-label { font-size: 13.5px; color: var(--ink-2); }
.qms-typechoice-note { font-size: 11.5px; line-height: 1.45; color: var(--ink-4); }

.qms-typechoice.is-selected {
    border-color: var(--accent-line);
    background: var(--accent-soft);
}
.qms-typechoice.is-selected .qms-typechoice-label,
.qms-typechoice.is-selected .qms-typechoice-top i { color: var(--accent-text); font-weight: 600; }

/* ------------------------------------------------------------
   3. BIRAČ KUPCA
   Ovdje nastaje „hfjuzk“: slobodan tekst umjesto veze.
   ------------------------------------------------------------ */

.qms-picker { position: relative; display: flex; flex-direction: column; gap: 6px; }

.qms-picker-input {
    display: flex; align-items: center; gap: 9px;
    box-sizing: border-box;
    height: 40px; padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    color: var(--ink);
}
.qms-picker-input:focus-within {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.qms-picker-input > i { flex: 0 0 auto; font-size: 12.5px; color: var(--ink-3); }
.qms-picker-input input {
    flex: 1; min-width: 0;
    border: 0; background: transparent; color: inherit;
    font: inherit; font-size: 13.5px; outline: none;
}
.qms-picker-input input::placeholder { color: var(--ink-3); }
.qms-picker-chev { flex: 0 0 auto; font-size: 10px; color: var(--ink-3); }

.qms-picker-panel {
    /* fixed + u <body> dok je otvoren: kartice imaju overflow:hidden i
       rezale bi popis na svom rubu. Polozaj i sirinu postavlja qms-picker.js. */
    position: fixed; top: 0; left: 0;
    z-index: 1210;
    padding: 6px;
    border-radius: 11px;
    background: var(--pop);
    border: 1px solid var(--pop-line);
    box-shadow: var(--shadow-pop);
    display: none; flex-direction: column; gap: 1px;
    max-height: 320px; overflow-y: auto;
}
.qms-picker-panel.is-open { display: flex; }

/* popover je svjetliji od kartice — prigušeni tekst mora biti svjetliji */
.qms-picker-panel { --ink-muted-pop: #a8b1b5; }
.qms-theme-light .qms-picker-panel { --ink-muted-pop: #5f6b70; }

.qms-picker-opt {
    display: flex; align-items: center; gap: 10px;
    box-sizing: border-box;
    padding: 8px 10px; min-height: 36px;
    border-radius: 7px;
    font-size: 13px; color: var(--ink-2);
    cursor: pointer;
}
.qms-picker-opt:hover,
.qms-picker-opt.is-active { background: var(--accent-soft); color: var(--ink-strong); }

.qms-picker-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* broj slučajeva razlikuje KTC 46 od KTC 12 kad se upiše samo „ktc“ */
.qms-picker-meta {
    margin-left: auto; flex: 0 0 auto;
    font-size: 11.5px; color: var(--ink-muted-pop);
    font-variant-numeric: tabular-nums;
}

/* nerazriješeni kupac */
.qms-picker-opt.is-placeholder .qms-picker-name { font-style: italic; color: var(--warn-text); }

/* dodavanje bez izlaska iz forme */
.qms-picker-add {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; margin-top: 5px;
    border-top: 1px solid var(--pop-line);
    font-size: 12.5px; color: var(--accent-text);
    cursor: pointer;
}
.qms-picker-empty {
    padding: 12px 10px;
    font-size: 12.5px; line-height: 1.55; color: var(--ink-muted-pop);
}

/* odabrani kupac */
.qms-picker.is-selected .qms-picker-input { background: var(--surface); }
.qms-picker-clear { flex: 0 0 auto; font-size: 11px; color: var(--ink-3); cursor: pointer; }
.qms-picker-clear:hover { color: var(--ink-strong); }

/* ------------------------------------------------------------
   4. POLJA
   ------------------------------------------------------------ */

.qms-newcase .qms-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qms-newcase .form-control,
.qms-newcase .form-select { min-height: 40px; }

.qms-fieldhint { font-size: 11.5px; color: var(--ink-4); }

/* što se popunjava poslije — bez toga korisnik traži polja koja ovdje ne postoje */
.qms-newcase-later {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--surface-2);
    font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}
.qms-newcase-later i { flex: 0 0 auto; font-size: 12.5px; color: var(--accent-text); margin-top: 2px; }

/* ------------------------------------------------------------
   5. RESPONZIVNO
   ------------------------------------------------------------ */

@media (max-width: 640px) {
    .qms-newcase-row { grid-template-columns: minmax(0, 1fr); }
    .qms-typechoices { flex-direction: column; }
    .qms-newcase-foot { flex-wrap: wrap; }
    .qms-newcase-foot .qms-newcase-actions { width: 100%; margin-left: 0; }
    .qms-newcase-foot .btn { flex: 1; }
}

/* ------------------------------------------------------------
   UPUTA O POSTUPKU IZNAD FORME
   Renderiraju se obje (RIN i UN), prikazuje se ona koja odgovara
   odabranoj vrsti — prebacivanje vrste mora promijeniti i uputu.
   ------------------------------------------------------------ */

.qms-newcase-help { margin-bottom: 16px; }
/* .qms-field ima display:flex, sto nadjacava zadano ponasanje [hidden] */
[data-type-only][hidden] { display: none !important; }