/* ============================================================
 * PBI 7803 — LineItemsEditor (shared line editor: proforma now, invoice + quote later)
 * 1:1 port of design/ProformaEditor.html §2 (.pk*, .ln*, .cell, .qty), §3 (.drw*), §4 (.ro-line),
 * §7 (empty-catalog dialog) and the bottom-right .toast — namespaced lie-* because the component is shared.
 * Linked globally from _Host.cshtml. Tokens (--is-*) are global.
 * ============================================================ */

.lie{font:var(--is-body);color:var(--is-fg-1)}
.lie *,.lie *::before,.lie *::after,.lie-drw-overlay *,.lie-dlg *{box-sizing:border-box}

/* card chrome (design .pf-card / .pf-card__head — repeated here because the component is shared) */
.lie .lie-card{background:var(--is-bg-surface);border:1px solid var(--is-border-1);border-radius:var(--is-radius-md);box-shadow:var(--is-shadow-2);overflow:visible}
.lie .lie-card__head{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid var(--is-border-1);background:var(--is-bg-surface-3);border-radius:var(--is-radius-md) var(--is-radius-md) 0 0}
.lie .lie-card__head > i{color:var(--is-brand-blue)}
.lie .lie-card__head h3{margin:0;font:700 14px var(--is-font-sans);color:var(--is-fg-1)}
.lie .lie-card__head .lie-hint{margin-left:auto;color:var(--is-fg-3);font-size:12px}
.lie .lie-ibtn{border:none;background:none;color:var(--is-fg-muted);cursor:pointer;font-size:12.5px;padding:0 2px;line-height:1}
.lie .lie-ibtn:hover{color:var(--is-brand-blue)}

/* kbd (design: kbd) */
.lie kbd,.lie-drw-overlay kbd{font:600 10px var(--is-font-mono);background:#fff;border:1px solid var(--is-border-2);border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:var(--is-fg-2);box-shadow:none}

/* buttons used inside the component (same look as the page .btn) */
.lie .lie-btn,.lie-drw-overlay .lie-btn,.lie-dlg .lie-btn{height:36px;border-radius:var(--is-radius-sm);border:1px solid var(--is-border-2);background:#fff;color:var(--is-fg-1);font:600 13px var(--is-font-sans);padding:0 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;max-width:100%;overflow:hidden;line-height:1}
.lie .lie-btn i,.lie-drw-overlay .lie-btn i,.lie-dlg .lie-btn i{flex-shrink:0}
.lie .lie-btn:hover,.lie-drw-overlay .lie-btn:hover,.lie-dlg .lie-btn:hover{background:var(--is-bg-surface-3)}
.lie-drw-overlay .lie-btn--primary,.lie-dlg .lie-btn--primary{background:var(--is-brand-blue);border-color:var(--is-brand-blue);color:#fff}
.lie-drw-overlay .lie-btn--primary:hover,.lie-dlg .lie-btn--primary:hover{background:var(--is-brand-blue-600)}
.lie-drw-overlay .lie-btn--primary[disabled]{opacity:.5;cursor:not-allowed}
.lie-dlg .lie-btn--ghost{background:transparent}

/* chips (design .chip--sent / .chip--draft inside the drawer) */
.lie-drw-overlay .lie-chip{display:inline-flex;align-items:center;gap:5px;font-weight:700;border-radius:var(--is-radius-pill);white-space:nowrap;font-size:9.5px;padding:1px 6px;font-family:var(--is-font-sans)}
.lie-drw-overlay .lie-chip--sent{background:var(--is-info-bg);color:var(--is-brand-blue-700)}

/* ── picker (design .pk*) ── */
.lie .lie-pk{padding:14px 16px;border-bottom:1px solid var(--is-border-1);background:linear-gradient(180deg,#fbfdff,#f6fafd)}
.lie .lie-pk__row{display:flex;gap:8px;align-items:stretch}
.lie .lie-pk__box{position:relative;flex:1}
.lie .lie-pk__box > i{position:absolute;left:12px;top:15px;color:var(--is-brand-blue);font-size:13px}
.lie .lie-pk__input{height:42px;width:100%;border:1.5px solid var(--is-brand-blue-300);border-radius:var(--is-radius-sm);padding:0 120px 0 36px;font:500 14px var(--is-font-sans);background:#fff;color:var(--is-fg-1);margin:0}
.lie .lie-pk__input:focus{outline:none;border-color:var(--is-brand-blue);box-shadow:0 0 0 3px rgba(4,148,218,.15)}
.lie .lie-pk__kbd{position:absolute;right:10px;top:11px;display:flex;gap:4px;align-items:center;font-size:10.5px;color:var(--is-fg-3);pointer-events:none}
.lie .lie-pk__row > .lie-btn{height:auto}
.lie .lie-pk__drop{position:absolute;left:0;right:0;top:46px;background:#fff;border:1px solid var(--is-border-2);border-radius:var(--is-radius-md);box-shadow:var(--is-shadow-pop);z-index:20;overflow:hidden}
/* Lista izbora: svi pogoci, ~7 vidljivih, ostalo se lista (scroll). Zaglavlje i footer ostaju fiksni. */
.lie .lie-pk__list{position:relative;max-height:292px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.lie .lie-pk__list::-webkit-scrollbar{width:8px}
.lie .lie-pk__list::-webkit-scrollbar-thumb{background:var(--is-border-2);border-radius:8px}
.lie .lie-pk__grp{font:700 10px var(--is-font-sans);text-transform:uppercase;letter-spacing:.07em;color:var(--is-fg-3);padding:8px 12px 4px;background:var(--is-bg-surface-3)}
.lie .lie-pk__opt{display:grid;grid-template-columns:1fr 70px 50px 90px 52px;gap:10px;align-items:center;padding:8px 12px;cursor:pointer;font-size:13px;border-top:1px solid #f1f3f6}
.lie .lie-pk__opt .lie-nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lie .lie-pk__opt .lie-nm mark,.lie .lie-pk__opt .lie-cd mark{background:#fff1c7;color:inherit;border-radius:2px;padding:0}
.lie .lie-pk__opt .lie-cd{font:500 11px var(--is-font-mono);color:var(--is-fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lie .lie-pk__opt .lie-pr{font:600 12.5px var(--is-font-mono);text-align:right}
.lie .lie-pk__opt .lie-vt{font:500 11px var(--is-font-mono);color:var(--is-fg-3);text-align:right}
.lie .lie-pk__opt .lie-in{font-size:10.5px;color:var(--is-success);font-weight:700;text-align:right}
.lie .lie-pk__opt.is-act,.lie .lie-pk__opt:hover{background:var(--is-brand-blue-100)}
.lie .lie-pk__opt--free{grid-template-columns:1fr auto;color:var(--is-fg-2)}
.lie .lie-pk__opt--free b{color:var(--is-fg-1)}
.lie .lie-pk__foot{display:flex;gap:14px;padding:7px 12px;background:var(--is-bg-surface-3);font-size:11px;color:var(--is-fg-3);border-top:1px solid var(--is-border-1)}

/* ── lines (design .ln*) ── */
.lie .lie-ln{--cols:minmax(0,1fr) 52px 100px 86px 58px 62px 100px 24px}
.lie .lie-ln__head,.lie .lie-ln__row{display:grid;grid-template-columns:var(--cols);gap:8px;align-items:center}
.lie .lie-ln__head{padding:8px 14px;background:var(--is-bg-surface-3);border-bottom:1px solid var(--is-border-1)}
.lie .lie-th{font:700 10px var(--is-font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--is-fg-3)}
.lie .lie-th--r{text-align:right}
.lie .lie-th--c{text-align:center}
.lie .lie-ln__row{padding:8px 14px;border-bottom:1px solid var(--is-border-1);transition:background .6s}
.lie .lie-ln__row.is-new{background:#fff8e6}
.lie .lie-ln__desc input{border:1px solid transparent;background:transparent;font:600 13px var(--is-font-sans);padding:4px 6px;width:100%;border-radius:var(--is-radius-xs);color:var(--is-fg-1);margin:0}
.lie .lie-ln__desc input:hover{border-color:var(--is-border-1)}
.lie .lie-ln__desc input:focus{outline:none;border-color:var(--is-border-focus);background:#fff}
.lie .lie-ln__desc input.is-invalid{border-color:var(--is-danger)}
.lie .lie-ln__meta{display:flex;gap:6px;align-items:center;padding-left:6px;font-size:10.5px;color:var(--is-fg-3)}
.lie .lie-ln__meta .lie-src{font-weight:700}
.lie .lie-ln__meta .lie-src--free{color:var(--is-brand-orange-600)}
.lie .lie-ln__meta .lie-chg{color:#8a6400;font-weight:600}
.lie .lie-cell{height:32px;border:1px solid var(--is-border-1);border-radius:var(--is-radius-xs);font:500 12.5px var(--is-font-mono);text-align:right;padding:0 7px;width:100%;background:#fff;color:var(--is-fg-1);margin:0}
.lie .lie-cell:focus{outline:none;border-color:var(--is-border-focus);box-shadow:0 0 0 2px rgba(0,123,255,.15)}
.lie .lie-cell--txt{text-align:left;font-family:var(--is-font-sans)}
.lie select.lie-cell{appearance:auto;padding:0 2px}
.lie .lie-cell.is-invalid{border-color:var(--is-danger)}
.lie .lie-qty{display:flex;align-items:center;border:1px solid var(--is-border-1);border-radius:var(--is-radius-xs);overflow:hidden;background:#fff}
.lie .lie-qty button{width:24px;height:30px;border:none;background:var(--is-bg-surface-3);color:var(--is-fg-2);cursor:pointer;font-size:10px;padding:0;flex-shrink:0}
.lie .lie-qty input{border:none;width:100%;min-width:0;text-align:center;font:600 12.5px var(--is-font-mono);height:30px;color:var(--is-fg-1);background:#fff;padding:0;margin:0}
.lie .lie-qty input:focus{outline:none;background:var(--is-brand-blue-100)}
.lie .lie-qty.is-invalid{border-color:var(--is-danger)}
.lie .lie-ln__tot{text-align:right;font:700 13px var(--is-font-mono)}
.lie .lie-ln__tot small{display:block;font-weight:500;font-size:10.5px;color:var(--is-fg-3)}
.lie .lie-ln__del{border:none;background:none;color:var(--is-fg-muted);cursor:pointer;padding:0}
.lie .lie-ln__del:hover{color:var(--is-danger)}
.lie .lie-ln__empty{padding:34px 20px;text-align:center;color:var(--is-fg-3)}
.lie .lie-ln__empty > i{font-size:26px;color:var(--is-border-3);margin-bottom:8px;display:block}
.lie .lie-ln__empty b{color:var(--is-fg-1)}
.lie .lie-ln__foot{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:12px;color:var(--is-fg-3)}

/* ── PBI 7849 — quote mode (design QuotesEditor.html "dodaci za ponude"): no "Rabat %" column, note per line ── */
.lie .lie-ln.lie-ln--nodisc{--cols:minmax(0,1fr) 56px 100px 92px 62px 104px 24px}
.lie .lie-ln.lie-ln--notes{--cols:minmax(0,1fr) 52px 100px 86px 58px 62px 100px 26px 24px}
.lie .lie-ln.lie-ln--nodisc.lie-ln--notes{--cols:minmax(0,1fr) 56px 100px 92px 62px 104px 26px 24px}
.lie .lie-ln__note{border:none;background:none;color:var(--is-fg-muted);cursor:pointer;font-size:12px;padding:0}
.lie .lie-ln__note:hover,.lie .lie-ln__note.is-on{color:var(--is-brand-blue)}
.lie .lie-ln__notebox{grid-column:1 / -1;padding:0 0 2px 6px}
.lie .lie-ln__notebox textarea{width:100%;min-height:38px;border:1px dashed var(--is-border-2);border-radius:var(--is-radius-xs);padding:6px 8px;font:500 12px var(--is-font-sans);color:var(--is-fg-2);resize:vertical;background:#fcfdfe;margin:0;display:block}
.lie .lie-ln__notebox textarea:focus{outline:none;border-style:solid;border-color:var(--is-border-focus);background:#fff}
.lie .lie-ln__notebox textarea.is-invalid{border-color:var(--is-danger)}
.lie .lie-ln__meta .lie-nt{color:var(--is-brand-blue-700);font-weight:600}

/* ── read-only table (design §4 .ro-line) ── */
.lie .lie-ro{display:grid;grid-template-columns:2.2fr 44px 90px 80px 60px 60px 100px;gap:8px;padding:8px 14px;border-bottom:1px solid var(--is-border-1);font-size:12.5px;align-items:center}
.lie .lie-ro .lie-n{font-family:var(--is-font-mono);text-align:right}
.lie .lie-ro .lie-n--b{font-weight:700}
.lie .lie-ro.lie-ro--h{background:var(--is-bg-surface-3);font:700 10px var(--is-font-sans);letter-spacing:.05em;text-transform:uppercase;color:var(--is-fg-3)}
.lie .lie-ro.lie-ro--h span:not(:first-child){text-align:right}
.lie .lie-ro .lie-ro__sub{font-size:10.5px;color:var(--is-fg-3)}
.lie .lie-ro .lie-ro__free{font-size:10.5px;color:var(--is-brand-orange-600);font-weight:700}

/* ── toast (design .toast — bottom right, dark) ── */
.lie-toast{position:fixed;right:24px;bottom:24px;background:var(--is-fg-1);color:#fff;font:400 12.5px var(--is-font-sans);padding:10px 14px;border-radius:var(--is-radius-sm);box-shadow:var(--is-shadow-pop);opacity:0;transform:translateY(8px);transition:all .2s;z-index:100;pointer-events:none}
.lie-toast.is-on{opacity:1;transform:none}
.lie-toast b{color:#fff}

/* ── catalog drawer (design §3 .drw*) — real app: fixed overlay from the right ── */
.lie-drw-overlay{position:fixed;inset:0;z-index:1055;background:rgba(26,31,46,.35);font:var(--is-body);color:var(--is-fg-1)}
.lie-drw-overlay .lie-drw{position:absolute;right:0;top:0;bottom:0;width:560px;max-width:100%;background:#fff;box-shadow:var(--is-shadow-pop);display:flex;flex-direction:column}
.lie-drw-overlay .lie-drw__head{padding:16px 18px;border-bottom:1px solid var(--is-border-1);display:flex;gap:10px;align-items:center}
.lie-drw-overlay .lie-drw__head > i{color:var(--is-brand-blue)}
.lie-drw-overlay .lie-drw__head h3{margin:0;font:700 16px var(--is-font-sans);color:var(--is-fg-1)}
.lie-drw-overlay .lie-drw__count{color:var(--is-fg-3);font-size:12px}
.lie-drw-overlay .lie-drw__sp{flex:1}
.lie-drw-overlay .lie-drw__x{border:none;background:none;color:var(--is-fg-muted);cursor:pointer;font-size:16px;padding:0 2px;line-height:1}
.lie-drw-overlay .lie-drw__x:hover{color:var(--is-brand-blue)}
.lie-drw-overlay .lie-drw__tools{padding:12px 18px;display:flex;gap:8px;border-bottom:1px solid var(--is-border-1)}
.lie-drw-overlay .lie-search{position:relative;flex:1}
.lie-drw-overlay .lie-search > i{position:absolute;left:10px;top:11px;color:var(--is-fg-muted);font-size:12px}
.lie-drw-overlay .lie-ctl{height:36px;border:1px solid var(--is-border-2);border-radius:var(--is-radius-xs);padding:0 10px;font:500 13px var(--is-font-sans);color:var(--is-fg-1);background:#fff;width:100%;margin:0}
.lie-drw-overlay .lie-ctl:focus{outline:none;border-color:var(--is-border-focus);box-shadow:0 0 0 3px rgba(0,123,255,.15)}
.lie-drw-overlay .lie-search .lie-ctl{padding-left:30px}
.lie-drw-overlay select.lie-ctl{width:150px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a8395' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.lie-drw-overlay .lie-drw__list{flex:1;overflow:auto}
.lie-drw-overlay .lie-drw__item{display:grid;grid-template-columns:1fr 80px 104px;gap:10px;align-items:center;padding:10px 18px;border-bottom:1px solid #f1f3f6}
.lie-drw-overlay .lie-drw__item .lie-nm{font-weight:600}
.lie-drw-overlay .lie-drw__item .lie-meta{font-size:11px;color:var(--is-fg-3);font-family:var(--is-font-mono)}
.lie-drw-overlay .lie-drw__item .lie-pr{font:600 12.5px var(--is-font-mono);text-align:right}
.lie-drw-overlay .lie-drw__item.is-picked{background:var(--is-brand-blue-100)}
.lie-drw-overlay .lie-drw__item.is-off{opacity:.45}
.lie-drw-overlay .lie-chk{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--is-fg-1);margin:0;cursor:pointer}
.lie-drw-overlay .lie-chk input{margin:0}
.lie-drw-overlay .lie-drw__empty{padding:28px 18px;text-align:center;color:var(--is-fg-3);font-size:12.5px}
.lie-drw-overlay .lie-qty{display:flex;align-items:center;border:1px solid var(--is-border-1);border-radius:var(--is-radius-xs);overflow:hidden;background:#fff}
.lie-drw-overlay .lie-qty button{width:24px;height:30px;border:none;background:var(--is-bg-surface-3);color:var(--is-fg-2);cursor:pointer;font-size:10px;padding:0;flex-shrink:0}
.lie-drw-overlay .lie-qty input{border:none;width:100%;min-width:0;text-align:center;font:600 12.5px var(--is-font-mono);height:30px;color:var(--is-fg-1);background:#fff;padding:0;margin:0}
.lie-drw-overlay .lie-qty input:focus{outline:none;background:var(--is-brand-blue-100)}
.lie-drw-overlay .lie-drw__foot{padding:12px 18px;border-top:1px solid var(--is-border-1);display:flex;gap:10px;align-items:center;background:var(--is-bg-surface-3)}
.lie-drw-overlay .lie-drw__foot .lie-sum{font-size:12.5px;color:var(--is-fg-2)}
.lie-drw-overlay .lie-drw__foot .lie-sum b{font-family:var(--is-font-mono)}
.lie-drw-overlay .lie-drw__foot .lie-drw__sp{flex:1}

/* ── empty-catalog dialog (design §7) ── */
/* Dijalozi su vertikalno centrirani; visok sadržaj se lista unutar body-ja (head/foot ostaju vidljivi). */
.lie-dlg{position:fixed;inset:0;z-index:1060;background:rgba(26,31,46,.45);display:flex;justify-content:center;align-items:center;padding:18px;font:var(--is-body);color:var(--is-fg-1)}
.lie-dlg .lie-dlg__box{background:#fff;border-radius:var(--is-radius-lg);width:100%;max-width:400px;max-height:calc(100vh - 36px);display:flex;flex-direction:column;box-shadow:var(--is-shadow-pop);overflow:hidden;animation:lie-dlg-in .16s ease}
.lie-dlg .lie-dlg__box--md{max-width:480px}
.lie-dlg .lie-dlg__body{overflow-y:auto;min-height:0}
.lie-dlg .lie-dlg__body ul,.lie-dlg .lie-dlg__body ol{margin:0;padding-left:18px}
@keyframes lie-dlg-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lie-dlg .lie-dlg__head{display:flex;gap:11px;align-items:center;padding:15px 16px;border-bottom:1px solid var(--is-border-1)}
.lie-dlg .lie-dlg__ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:15px;background:var(--is-brand-blue-100);color:var(--is-brand-blue);flex-shrink:0}
.lie-dlg .lie-dlg__head h4{margin:0;font:700 14.5px var(--is-font-sans);color:var(--is-fg-1)}
.lie-dlg .lie-dlg__head .lie-dlg__s{font-size:11.5px;color:var(--is-fg-3)}
.lie-dlg .lie-dlg__body{padding:14px 16px;font-size:12.5px;color:var(--is-fg-2);line-height:1.55;display:flex;flex-direction:column;gap:11px}
.lie-dlg .lie-dlg__body b{color:var(--is-fg-1)}
.lie-dlg .lie-dlg__foot{padding:11px 16px;border-top:1px solid var(--is-border-1);display:flex;justify-content:flex-end;gap:8px;background:var(--is-bg-surface-3)}
.lie-dlg .lie-steps{margin:0;padding:0;list-style:none;counter-reset:s}
.lie-dlg .lie-steps li{counter-increment:s;position:relative;padding:5px 0 5px 30px}
.lie-dlg .lie-steps li::before{content:counter(s);position:absolute;left:0;top:4px;width:20px;height:20px;border-radius:50%;background:var(--is-brand-blue);color:#fff;font:700 10.5px var(--is-font-sans);display:grid;place-items:center}