/* ─────────────────────────────────────────────────────────────────────────
   TiM → Qdrant · sanduče predloga i prikaz razlika.

   Overlay je preko celog ekrana, a ne modal od 620px: diff se u uskoj kutiji
   ne čita. Nosi klasu `.modal-overlay` zbog pozadine i animacije, pa se
   `.proposal-card` razlikuje od `.modal-card` samo širinom i visinom.
   ───────────────────────────────────────────────────────────────────────── */

.proposal-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1320px;
    height: 92vh;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xl);
    animation: modalRise 0.22s var(--ease);
    overflow: hidden;
}

.proposal-head {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-5) var(--s-6);
    border-bottom: 1px solid var(--line);
}

.proposal-head .card-head-text {
    flex: 1;
    min-width: 0;
}

.proposal-body {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    flex: 1;
    min-height: 0;
}

/* ── Spisak predloga ── */

.proposal-side {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    min-height: 0;
    padding: var(--s-4);
    background: var(--surface-2);
    border-right: 1px solid var(--line);
}

.proposal-list {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.proposal-item {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-3);
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.proposal-item:hover {
    background: var(--surface-3);
}
.proposal-item.active {
    background: var(--accent-soft);
    border-color: var(--accent-ring);
}

.proposal-item-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Meta je običan tekst, ne flex: podaci teku u istom redu i prelamaju se po
   rečima, pa i opis izmene („2 × izmena stavke…“) ostaje u istom toku umesto
   da se forsira u svoj red. */
.proposal-item-meta {
    font-size: 11.5px;
    color: var(--muted);
}

/* Crta između podataka. Razmak nose isključivo margine crte — bez `gap`-a,
   pa se podaci čitaju kao jedna rečenica. Ide kao `::after`, ne `::before`:
   na prelomu reda tako ostaje na kraju gornjeg reda („nastavlja se”),
   umesto da izgleda kao znak nabrajanja na početku donjeg. */
.proposal-item-meta > span:not(:last-child)::after {
    content: "|";
    margin: 0 var(--s-1);
    color: var(--faint);
}

/* Opis izmene je poslednji span u meti i nasleđuje njenu veličinu i boju;
   `break-word` je tu samo za reč dužu od kolone. */
.proposal-item-changes {
    overflow-wrap: break-word;
}

.proposal-item-status.ok {
    color: var(--ok);
}
.proposal-item-status.error {
    color: var(--err);
}
.proposal-item-status.draft {
    color: var(--warn);
}

/* ── Operacije ── */

.proposal-main {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    min-height: 0;
    padding: var(--s-5) var(--s-6);
    overflow-y: auto;
}

.proposal-summary:empty {
    display: none;
}
.proposal-summary {
    margin: 0;
    padding: var(--s-3) var(--s-4);
    background: var(--violet-soft);
    border-radius: var(--r-md);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-2);
}

.proposal-ops {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
}

.proposal-op {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
/* Odbijena operacija ostaje vidljiva, ali prestaje da vuče pažnju — čovek je
   već odlučio, a i dalje mora da vidi šta je odbio pre nego što vrati AI-ju. */
.proposal-op.status-odbijen {
    opacity: 0.55;
}
.proposal-op.status-greska {
    border-color: var(--err);
}

.proposal-op-head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.proposal-op-title {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.proposal-op-error {
    margin: 0;
    padding: var(--s-3) var(--s-4);
    background: var(--rose-soft);
    color: var(--err);
    font-size: 12.5px;
}

/* ── Diff ── */

.diff {
    padding: var(--s-4);
}

.diff-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-4);
}

.diff-col {
    padding: var(--s-3);
    background: var(--log-bg);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-2);
    /* Tekst dolazi iz `to_plain_text` — prelomi redova su jedina struktura
       koja je preživela, pa moraju da se vide. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.diff-unified {
    display: none;
}

.diff-del {
    background: var(--rose-soft);
    color: var(--err);
    text-decoration: line-through;
    border-radius: var(--r-xs);
}

.diff-ins {
    background: var(--emerald-soft);
    color: var(--ok);
    border-radius: var(--r-xs);
}

.diff-empty {
    color: var(--faint);
    font-style: italic;
}

/* ── Premeštanje stavki ── */

.diff-order {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}

.diff-order-row {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--ink-2);
}
.diff-order-row.moved {
    background: var(--accent-soft);
    color: var(--ink);
}

.diff-order-num {
    min-width: 62px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* ── Dno ── */

.proposal-foot {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-6);
    background: var(--surface-2);
    border-top: 1px solid var(--line);
}

.proposal-foot input[type="text"] {
    flex: 1;
    min-width: 0;
    margin: 0;
}

/* Rešen predlog: rečenica staje na mesto kontrola, u istu traku. */
.proposal-note {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--muted);
}

/* `.primary-btn` iz primitives.css nosi `width: 100%` i `margin-top: var(--s-6)`
   — to je dugme na dnu kartice; ovde stoje u redu, pa se oba poništavaju. */
.proposal-foot .primary-btn,
.proposal-foot .ghost-btn {
    flex-shrink: 0;
    width: auto;
    margin-top: 0;
}

/* ── Proba pre produkcije (Faza 5b) ── */

.staging {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.staging-head {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.staging-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.staging-target {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--muted);
}

.staging-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

/* Polje uzima ostatak reda; dugmad zadržavaju svoju širinu. `.primary-btn` iz
   primitives.css nosi `width: 100%` i gornju marginu — oba se ovde poništavaju,
   isto kao u `.proposal-foot`. */
.staging-row input[type="text"],
.staging-row select {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.staging-row .primary-btn,
.staging-row .ghost-btn {
    flex-shrink: 0;
    width: auto;
    margin-top: 0;
}

/* Presuda: jedna rečenica koja kaže šta rezultat znači. Boja nosi ocenu, tekst
   nosi razlog — nijedno samo za sebe nije dovoljno. */
.staging-verdict {
    margin: 0;
    padding: var(--s-3);
    border-radius: var(--r-md);
    font-size: 13px;
    line-height: 1.55;
    background: var(--surface-3);
    color: var(--ink-2);
}
.staging-verdict.is-ok {
    background: var(--emerald-soft);
    color: var(--ok);
}
.staging-verdict.is-warn {
    background: var(--accent-soft);
    color: var(--ink);
}
.staging-verdict.is-err {
    background: var(--rose-soft);
    color: var(--err);
}

.staging-hits {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.staging-hits:empty {
    display: none;
}

.staging-hit {
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
}
/* Članak koji se proverava — jedini red koji čovek zaista traži u spisku. */
.staging-hit.is-mine {
    border-color: var(--accent-ring);
    background: var(--accent-soft);
}

.staging-hit-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
}

.staging-hit-rank {
    min-width: 22px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.staging-hit-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staging-hit-score {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.staging-hit-text {
    margin: 2px 0 0 30px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted);
}

/* ── Uređivanje predloga na licu mesta ── */

.proposal-op-edited {
    padding: 1px 7px;
    background: var(--accent-soft);
    border-radius: var(--r-sm);
    font-size: 11px;
    color: var(--ink-2);
    cursor: help;
}

.proposal-op-edit {
    flex-shrink: 0;
}

.op-edit {
    display: flex;
    flex-direction: column;
    padding: var(--s-4);
    background: var(--surface-2);
}

/* Polje za tekst stavke. Ista visina i tipografija kao diff kolone — čovek
   uređuje ono što je maločas gledao, pa tekst ne sme da „skoči". */
.op-edit-body {
    min-height: 140px;
    max-height: 40vh;
    padding: var(--s-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 0 0 var(--r-md) var(--r-md);
    border-top: 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-2);
    overflow-y: auto;
}
.op-edit-body:focus {
    outline: none;
    border-color: var(--accent);
}

.op-edit-actions {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-3);
}
.op-edit-actions .hint {
    flex: 1;
    min-width: 0;
    margin: 0;
}
/* `.primary-btn` nosi `width: 100%` i gornju marginu — isto poništavanje kao u
   `.proposal-foot` i `.staging-row`. */
.op-edit-actions .primary-btn {
    flex-shrink: 0;
    width: auto;
    margin-top: 0;
}