/* =====================================================================
   ITERATIVE DOCUMENT EDITOR (block-based, phase 1)
   UÄŤitava se na /dokumenti/{id} (Editor.cshtml).
===================================================================== */
.editor-page-head .pb-page-head__title { font-size: clamp(24px, 2.4vw, 30px); }

/* Akcije u headeru uvek desno — i kad se zbog mnoštva dugmadi prelome u novi
   red (bez ovoga prelomljeni red pada levo). */
.editor-page-head .editor-actions { margin-left: auto; justify-content: flex-end; }

/* Spreči flash/animaciju panela pri prvom render-u dok JS ne preuzme stanje. */
.editor-grid--pre, .editor-grid--pre * { transition: none !important; animation: none !important; }
.editor-grid--pre::before { display: none !important; }

.editor-grid-3 {
    grid-template-columns: 260px 1fr 360px !important;
    transition: grid-template-columns .2s ease;
}
/* Collapsed states: panel becomes a thin rail, content area takes the freed space. */
.editor-grid-3.is-left-collapsed  { grid-template-columns: 36px  1fr 360px !important; }
.editor-grid-3.is-right-collapsed { grid-template-columns: 260px 1fr 36px  !important; }
.editor-grid-3.is-left-collapsed.is-right-collapsed { grid-template-columns: 36px 1fr 36px !important; }

.editor-side {
    background: var(--surface);
    overflow-y: auto;
    padding: 14px 14px 24px;
    display: flex; flex-direction: column; gap: 18px;
    transition: opacity .15s ease;
}
/* Hide aside contents when collapsed; the rail button takes its slot visually. */
.editor-grid-3.is-left-collapsed  > .editor-side-left,
.editor-grid-3.is-right-collapsed > .findings-panel { display: none; }

/* Rails: vertical thin column with a chevron, click to expand. */
.editor-side-rail {
    display: none;
    align-items: center; justify-content: flex-start;
    padding: 14px 0; gap: 10px;
    width: 100%; min-height: 100%;
    background: var(--p-app-surface-3);
    border: 0; cursor: pointer;
    color: var(--p-slate-600);
    font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
    transition: color .12s ease, background .12s ease, box-shadow .12s ease;
    position: relative;
}
.editor-side-rail:hover { color: var(--c-text-primary); background: var(--c-border-subtle); }
.editor-side-rail:focus-visible { outline: 2px solid var(--c-brand); outline-offset: -2px; }
.editor-side-rail--left  { border-right: 1px solid var(--c-text-faint); box-shadow: inset -1px 0 0 var(--p-white); }
.editor-side-rail--right { border-left:  1px solid var(--c-text-faint); box-shadow: inset  1px 0 0 var(--p-white); }
.editor-side-rail__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    margin-top: 6px;
}
.editor-side-rail svg { flex: 0 0 auto; margin: 0 auto; }
.editor-grid-3.is-left-collapsed  > .editor-side-rail--left,
.editor-grid-3.is-right-collapsed > .editor-side-rail--right { display: flex; flex-direction: column; }

/* Collapse buttons use STAMP .pb-icon-btn--sm; only positional tweak is page-local. */
.editor-side-collapse--right { margin-left: auto; }
.side-head-meta { display: inline-flex; align-items: center; gap: 8px; }
/* Findings (right) panel has its own sticky tab bar that supplies the top spacing;
   removing padding-top lets the sticky tabs sit flush at top:0 and fully hide
   content scrolling underneath. */
.editor-side.findings-panel { padding-top: 0; }
.editor-side.editor-side-left { border-right: 1px solid var(--hair); }
.editor-side.findings-panel { border-left: 1px solid var(--hair); }

.editor-meta { margin-top: 6px; font-size: var(--fs-xs); }
.save-status {
    display:inline-block; padding:3px 9px; border-radius:999px;
    font-size:var(--fs-2xs); font-weight:600;
    background: var(--surface-2); color: var(--ink-3);
    border:1px solid var(--hair);
}
.save-status.saving { background:var(--c-warn-surface); color:var(--c-warn-deep); border-color:var(--c-warn-surface); }
.save-status.saved  { background:var(--c-success-soft); color:var(--c-success-deep); border-color:var(--c-success-line); }
.save-status.error  { background:var(--c-danger-soft); color:var(--c-danger-deep); border-color:var(--c-danger-line); }

.toolbar-select {
    padding:6px 10px; border:1px solid var(--hair); border-radius:8px;
    background:var(--p-white); font-size:var(--fs-sm); color:var(--ink);
}
.inline-form { display:inline-flex; align-items:center; gap:6px; }

.side-section { display:flex; flex-direction:column; gap:8px; }
.side-head { display:flex; justify-content:space-between; align-items:baseline; }
.side-head h3 { margin:0; font-size:var(--fs-sm); font-weight:700; color:var(--ink); text-transform:uppercase; letter-spacing:.06em; }

.outline-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.outline-list li a {
    display:flex; align-items:center; gap:8px;
    padding:5px 8px; border-radius:6px;
    font-size:var(--fs-sm); color:var(--ink-2); text-decoration:none;
    border:1px solid transparent;
    min-width:0;
    position: relative;
}
.outline-list li a::before {
    content:""; flex:0 0 auto;
    width:6px; height:6px; border-radius:50%;
    background:var(--c-text-faint);
}
.outline-list li a:hover { background: var(--surface-2); }
.outline-list li.is-active a { background: var(--surface-2); border-color: var(--hair); color: var(--ink); font-weight:600; }
.outline-list li.is-active a::before { background:var(--c-accent-indigo-strong); }

.outline-index {
    flex:0 0 auto;
    font-size:var(--fs-2xs);
    font-variant-numeric: tabular-nums;
    color:var(--c-text-subtle);
    font-weight:600;
    letter-spacing:.02em;
}
.outline-label {
    flex:1 1 auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* Tipovi blokova - razlika je samo u boji male tacke levo, ne u boji/teznji teksta. */
.outline-item.outline-kind-heading   > a::before { background:var(--c-text-primary); }
.outline-item.outline-kind-section   > a::before { background:var(--c-warn-deep); }
.outline-item.outline-kind-parties   > a::before { background:var(--c-success-strong); }
.outline-item.outline-kind-signature > a::before { background:var(--c-text-subtle); }
.outline-item.outline-kind-list      > a::before { background:var(--c-state-warn-strong); }
.outline-item.outline-kind-preamble  > a::before { background:var(--c-accent-indigo); }
.outline-item.outline-kind-article   > a::before { background:var(--c-accent-indigo-strong); }

.var-progress { font-size:var(--fs-xs); color:var(--ink-3); font-variant-numeric: tabular-nums; }
.var-progress.ok { color:var(--c-success-deep); font-weight:700; }
.var-list { display:flex; flex-direction:column; gap:10px; }
.var-row { display:flex; flex-direction:column; gap:6px; }
.var-label {
    font-size:var(--fs-2xs); font-weight:700; color:var(--c-accent-indigo-strong); letter-spacing:.04em;
    display:flex; align-items:baseline; gap:6px;
}
.var-occ { color:var(--ink-4); font-weight:500; }
.var-input {
    width:100%; box-sizing:border-box;
    padding:8px 10px; border:1px solid var(--hair); border-radius:8px;
    background:var(--p-white); font-size:var(--fs-sm); line-height:1.3;
    font-family: inherit;
}
.var-input:focus { outline:none; border-color:var(--c-brand); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.var-row.is-filled .var-input { background:var(--c-success-soft); border-color:var(--c-success-line); }
.var-row.is-empty .var-input { background:var(--c-danger-soft); border-color:var(--c-danger-line); }
.var-row.is-empty .var-label { color:var(--c-danger-deep); }
.var-row.is-filled .var-label { color:var(--c-success-deep); }
.var-help { margin: 0 0 6px 0; line-height: 1.45; }
.var-help code { background:var(--c-brand-surface); padding:1px 4px; border-radius:4px; font-size:var(--fs-2xs); }
.var-group { display:flex; flex-direction:column; gap:8px; }
.var-group + .var-group { margin-top:12px; border-top:1px dashed var(--c-border-subtle); padding-top:12px; }
.var-group-head {
    font-size:var(--fs-2xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--p-slate-500);
    line-height:1.3;
}
.var-group-head a {
    color:var(--p-slate-500); text-decoration:none;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis;
    word-break:break-word;
}
.var-group-head a:hover { color:var(--c-brand); text-decoration:underline; }

/* Inline variable tokens inside block bodies. Red = empty, green = filled. */
.block-body .var-token {
    display: inline-block;
    padding: 0 6px;
    margin: 0 1px;
    border-radius: 5px;
    font-size: var(--fs-sm);
    font-weight: 700;
    border: 1px solid transparent;
    user-select: none;
    cursor: pointer;
}
.block-body .var-token:hover {
    outline: 2px solid rgba(37, 99, 235, .2);
    outline-offset: 1px;
}
.block-body .var-token.is-empty {
    background: var(--c-danger-soft);
    color: var(--c-danger-deep);
    border-color: var(--c-danger-line);
}
.block-body .var-token.is-filled {
    background: var(--c-success-soft);
    color: var(--c-success-deep);
    border-color: var(--c-success-line);
}

.law-mini-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sm); }
.law-mini-list a { color: var(--ink-2); text-decoration:none; }
.law-mini-list a:hover { text-decoration:underline; }
.ai-pill {
    display:inline-block; padding:1px 6px; margin-left:6px;
    border-radius:999px; background:var(--c-brand-surface); color:var(--c-accent-indigo-strong);
    font-size:var(--fs-2xs); font-weight:800; letter-spacing:.06em;
}

/* === BLOCK EDITOR === */
#doc-paper { padding: 36px 44px; }
.block {
    position:relative;
    border:1px solid transparent;
    border-radius:10px;
    padding:14px 16px;
    margin: 10px 0 18px;
    background:var(--p-white);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.block:hover { border-color: var(--hair); }
.block.is-focused { border-color:var(--c-brand); box-shadow: 0 0 0 3px rgba(37,99,235,.10); }
.block-head {
    display:flex; justify-content:space-between; align-items:center;
    gap:10px; margin-bottom:8px; padding-bottom:8px;
    border-bottom: 1px dashed var(--hair);
}
.block-num-wrap { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.block-kw {
    font-family: Georgia, serif; font-weight:700; color:var(--ink); font-size:var(--fs-base);
}
.block-kw.heading-kw { color:var(--c-accent-indigo-strong); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; }
.block-kw.preamble-kw { color:var(--c-text-secondary); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.08em; font-weight:600; font-family:inherit; }
.block-kw.section-kw  { color:var(--c-warn-deep); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em; font-weight:700; font-family:inherit; }
.block-kw.parties-kw  { color:var(--c-success-strong); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-family:inherit; }
.block-kw.signature-kw{ color:var(--p-slate-500); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-family:inherit; }
.block-kw.list-kw     { color:var(--c-state-warn-strong); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-family:inherit; }
/* Uvod (preamble) se rendera kao i ostali članovi - bez kurziva, profesionalan stil. */

/* Veci input za naslov sekcije / dokumenta - tipograski izrazitiji od naslova clana. */
.block-title.block-title-lg { font-size:var(--fs-lg); font-weight:800; letter-spacing:.01em; color:var(--ink); }

/* Vizuelno razdvajanje blokova po vrsti - samo obojena leva ivica, pozadina ostaje bela kao papir. */
.block.block-kind-heading   { border-left: 4px solid var(--c-accent-indigo); padding-left: 14px; }
.block.block-kind-section   { border-left: 4px solid var(--c-state-warn); padding-left: 14px; }
.block.block-kind-parties   { border-left: 4px solid var(--c-success); padding-left: 14px; }
.block.block-kind-signature { border-left: 4px solid var(--c-text-subtle); padding-left: 14px; }
.block.block-kind-list      { border-left: 4px solid var(--c-state-warn); padding-left: 14px; }
.block.block-kind-preamble  { border-left: 4px solid var(--c-text-faint); padding-left: 14px; }

/* Lista: monospace-like za item poravnanje. */
.block.block-kind-list .block-body { font-variant-numeric: tabular-nums; }
.block-num {
    width:60px; padding:4px 8px; border:1px solid var(--hair);
    border-radius:6px; font-size:var(--fs-base); font-weight:600; text-align:center;
    background:var(--p-app-surface-2);
}
.block-title {
    flex:1; padding:4px 8px; border:1px solid transparent;
    border-radius:6px; font-size:var(--fs-base); font-weight:600; color:var(--ink);
    background:transparent; min-width:0;
}
.block-title:hover, .block-num:hover { border-color: var(--hair); background:var(--p-white); }
.block-title:focus, .block-num:focus { outline:none; border-color:var(--c-brand); background:var(--p-white); box-shadow:0 0 0 3px rgba(37,99,235,.12); }

.block-actions { display:flex; gap:4px; opacity:.4; transition:opacity .15s ease; }
.block:hover .block-actions, .block.is-focused .block-actions { opacity:1; }
.block-btn {
    border:1px solid var(--hair); background:var(--p-white); color:var(--ink-3);
    padding:3px 8px; border-radius:6px; font-size:var(--fs-xs); cursor:pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.block-btn:hover { background:var(--surface-2); color:var(--ink); }
.block-btn.danger:hover { background:var(--c-danger-soft); color:var(--c-danger-deep); border-color:var(--c-danger-line); }

.block-body {
    min-height:60px; padding:6px 4px;
    font-size:var(--fs-base); line-height:1.7; color:var(--ink-2);
    white-space:pre-wrap; outline:none;
}
.block-body:focus { background:var(--c-surface-card-tint); border-radius:6px; }
.block-body .var-chip {
    display:inline-block; padding:0 6px; margin:0 1px;
    background:var(--c-brand-surface); color:var(--c-accent-indigo-strong); border:1px solid var(--c-brand-200);
    border-radius:5px; font-size:var(--fs-sm); font-weight:700; cursor:pointer;
}
.block-body .var-chip.is-filled { background:var(--c-success-soft); color:var(--c-success-deep); border-color:var(--c-success-line); }

/* status bar */
.editor-statusbar {
    margin: 14px auto 0; max-width: 880px;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding: 8px 12px; border:1px solid var(--hair); border-radius:10px;
    background: var(--surface); font-size:var(--fs-xs); color:var(--ink-3);
}
.editor-statusbar .spacer { flex:1; }
.editor-statusbar strong { color: var(--ink); }

.ai-hint.warn {
    background:var(--c-danger-soft); border:1px solid var(--c-danger-line); color:var(--c-danger-deep);
    padding:10px 12px; border-radius:8px; font-size:var(--fs-sm);
}

/* "+ Dodaj blok" toolbar ispod kanvasa - korisnik moze rucno da doda sekciju, stranke, potpis... */
.add-block-bar { margin: 6px auto 0; max-width: 880px; }
.add-block-menu {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    padding: 8px 10px; border: 1px dashed var(--hair); border-radius: 10px;
    background: var(--c-surface-card-tint);
}
.add-block-label { font-size:var(--fs-xs); color:var(--ink-3); margin-right:4px; }
.add-block-menu .btn-ghost {
    border:1px solid var(--hair); background:var(--p-white); color:var(--ink-2);
    padding: 4px 10px; border-radius: 999px; font-size:var(--fs-xs); cursor:pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.add-block-menu .btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color:var(--c-text-faint); }

/* === MOBILE ===
   Tri-panelni editor (outline | papir | provera) traži dva šira preloma iznad
   kanonskog 720 — zato su 1100/900 namerni izuzeci, NE proizvoljne vrednosti:
   - 1100: sva tri panela još staju, ali se bočni suze da centar ostane čitljiv.
   - 900:  bočni paneli više ne mogu da koegzistiraju s papirom → stack u 1 kolonu
           (još bez drawer-a; to nastupa tek na 720). */
@media (max-width: 1100px) {
    .editor-grid-3 { grid-template-columns: 220px 1fr 320px !important; }
}
@media (max-width: 900px) {
    .editor-grid-3 { grid-template-columns: 1fr !important; }
    .editor-side { border: none; border-bottom: 1px solid var(--hair); max-height: none; }
    #doc-paper { padding: 18px 14px; }
}

/* === MOBILE (≤720): reading-first, panels become drawers === */
@media (max-width: 720px) {
    /* Header: zadržavamo samo naslov + Preuzmi Word; ostala dugmad su ikone bez teksta. */
    .editor-page-head { padding-bottom: 8px; }
    .editor-page-head .pb-page-head__title { font-size: var(--fs-xl); line-height: 1.25; }
    .editor-page-head__subtitle { display: none; }
    .editor-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .editor-actions::-webkit-scrollbar { display: none; }
    .editor-actions .pb-cta-pill {
        flex: 0 0 auto;
        padding: 8px 10px;
        font-size: 0;          /* sakriva tekst, ostaje ikona */
        gap: 0;
        min-width: 36px;
        justify-content: center;
    }
    .editor-actions .pb-cta-pill svg { width: 16px; height: 16px; }
    /* Glavni CTA (Preuzmi Word) zadržava tekst da bude jasan */
    .editor-actions .pb-cta-pill:not(.pb-cta-pill--ghost) {
        font-size: var(--fs-sm);
        padding: 8px 12px;
        gap: 6px;
    }

    /* Grid: single column, paneli van toka */
    .editor-grid-3,
    .editor-grid-3.is-left-collapsed,
    .editor-grid-3.is-right-collapsed,
    .editor-grid-3.is-left-collapsed.is-right-collapsed {
        grid-template-columns: 1fr !important;
    }

    /* Scroll: na mobilnom NEMA app-shell visine (100vh) ni internog skrola
       centralnog panela — sve skroluje sa stranicom (jedan, konzistentan scroll). */
    .document-editor { height: auto; }
    .document-panel { overflow: visible; }

    /* Blok header: naslov sekcije/člana u svom redu (pun red), akcije ispod —
       inače akcije guše naslov pa se na uskom ekranu ne vidi. */
    .block-head { flex-direction: column; align-items: stretch; gap: 8px; }
    .block-num-wrap { flex: 1 1 auto; width: 100%; }
    .block-actions { opacity: 1; justify-content: flex-end; flex-wrap: wrap; }

    /* Manji fontovi na mobilnom — naslov sekcije/dokumenta i telo bloka. */
    .block-title.block-title-lg { font-size: var(--fs-base); }
    .block-body { font-size: var(--fs-sm); line-height: 1.6; }
    /* „SEKCIJA / NASLOV / …" kicker oznake samo zauzimaju mesto na mobilnom — sklanjamo
       ih (vrsta bloka je jasna iz sadržaja/placeholdera); broj člana ostaje. */
    .block-kw.section-kw,
    .block-kw.heading-kw,
    .block-kw.parties-kw,
    .block-kw.signature-kw,
    .block-kw.list-kw,
    .block-kw.preamble-kw { display: none; }

    /* Levi panel (Sadržaj) — sakriven po default-u; rail služi kao toggle. */
    .editor-side-left { display: none; }
    .editor-grid-3:not(.is-left-collapsed) > .editor-side-left {
        display: flex;
        position: fixed;
        top: var(--topbar-h, 56px);
        left: 0;
        width: min(86vw, 320px);
        height: calc(100vh - var(--topbar-h, 56px));
        z-index: 950;
        background: var(--surface);
        box-shadow: 16px 0 40px rgba(15,23,42,.18);
        overflow-y: auto;
        animation: editor-drawer-in-left .22s ease;
    }
    .editor-grid-3 > .editor-side-rail--left { display: none !important; }

    /* Desni panel (Promenljive/AI/Provera) — na mobilnom se prebacuje
       u dedicated drawer (#editor-mobile-drawer) izvan grid-a, pa ovde
       samo krijemo originalni aside kad je drawer aktivan. */
    .editor-side.findings-panel { display: none; }
    .editor-grid-3 > .editor-side-rail--right { display: none !important; }

    /* Sakrij FAB dok je drawer otvoren. */
    body.has-editor-drawer .editor-mobile-fab { display: none !important; }

    /* Backdrop kad je levi drawer otvoren (desni ima sopstveni backdrop u drawer kontejneru). */
    .editor-grid-3:not(.is-left-collapsed)::before {
        content: "";
        position: fixed;
        inset: var(--topbar-h, 56px) 0 0 0;
        background: rgba(15,23,42,.42);
        z-index: 940;
        animation: editor-backdrop-in .18s ease;
    }

    /* Floating action button za Promenljive */
    .editor-mobile-fab {
        position: fixed;
        right: 14px;
        bottom: 84px;
        z-index: 920;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        border: 0;
        border-radius: 999px;
        background: var(--c-brand);
        color: var(--p-white);
        font-size: var(--fs-sm);
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(37,99,235,.35);
        cursor: pointer;
    }
    .editor-mobile-fab .editor-mobile-fab__count {
        background: rgba(255,255,255,.22);
        padding: 1px 7px;
        border-radius: 999px;
        font-size: var(--fs-2xs);
        font-variant-numeric: tabular-nums;
    }
    .editor-mobile-fab svg { width: 16px; height: 16px; }

    /* Čitljiviji dokument na uskim ekranima */
    #doc-paper, .document-paper { padding: 14px 12px; border-radius: 0; }
    .document-editor { margin: 0 -14px -16px; }
}
@media (min-width: 721px) {
    .editor-mobile-fab { display: none !important; }
}

@keyframes editor-drawer-in-left {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes editor-drawer-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}
@keyframes editor-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =====================================================================
   Mobile drawer — izolovan kontejner van grid-a.
   Sadržaj (`#editor-side-right`) se JS-om premešta ovde pri otvaranju
   FAB-om, i vraća nazad pri zatvaranju. Stilovi su SAMO ovde — ne
   nasleđuju desktop padding/gap/border iz `.editor-side`.
===================================================================== */
#editor-mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
}
#editor-mobile-drawer.is-open { display: block; }
#editor-mobile-drawer .mdrawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,.42);
    animation: editor-backdrop-in .18s ease;
}
#editor-mobile-drawer .mdrawer-panel {
    position: absolute;
    top: var(--topbar-h, 56px);
    left: 0; right: 0; bottom: 0;
    background: var(--p-white);
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 32px rgba(15,23,42,.18);
    animation: editor-drawer-in-right .22s ease;
    overflow: hidden;
}
#editor-mobile-drawer .mdrawer-tabs {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--hair, var(--c-border-subtle));
    background: var(--p-white);
}
#editor-mobile-drawer .mdrawer-tabs .mdrawer-tab {
    flex: 1 1 0;
    height: 38px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--c-text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}
#editor-mobile-drawer .mdrawer-tabs .mdrawer-tab.is-active {
    background: rgba(79,70,229,.10);
    color: var(--c-accent-indigo-strong);
}
#editor-mobile-drawer .mdrawer-close {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: rgba(15,23,42,.06);
    color: var(--p-ink-900);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    line-height: 1;
}
#editor-mobile-drawer .mdrawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 16px;
    background: var(--p-white);
}
/* Premešten findings-panel: striktno resetuj sve nasleđene desktop stilove. */
#editor-mobile-drawer .editor-side.findings-panel {
    display: block !important;
    position: static;
    width: 100%;
    height: auto;
    max-height: none;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    gap: 0;
}
/* Sakrij originalne tab dugmiće — koristimo nove iz mdrawer-tabs. */
#editor-mobile-drawer .editor-side.findings-panel > .side-tabs { display: none !important; }
/* Sakrij redundantne naslove unutar tab-ova (već imamo tab labels). */
#editor-mobile-drawer #tab-variables > .side-panel-head,
#editor-mobile-drawer #tab-chat > .side-panel-head { display: none; }
#editor-mobile-drawer #tab-findings .law-panel-title { display: none; }
#editor-mobile-drawer #tab-findings .law-panel-head {
    border: 0;
    padding: 0 0 10px;
    justify-content: flex-end;
}
/* Skidamo `hidden` na drawer-controlled tabu, naš JS upravlja stanjem preko .mdrawer-active. */
#editor-mobile-drawer .side-tab-panel { display: none; }
#editor-mobile-drawer .side-tab-panel.mdrawer-active { display: block; }

/* === Phase 2: AI editor === */



/* Inline variable edit input (klik na čip u editoru) */
.block-body .var-token-input {
    display: inline-block;
    padding: 0 6px;
    margin: 0 1px;
    border-radius: 5px;
    font-size: var(--fs-sm);
    font-weight: 700;
    font-family: inherit;
    border: 1px solid var(--c-text-faint);
    background: var(--p-white);
    color: var(--c-text-primary);
    line-height: 1.4;
    min-width: 4ch;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
    vertical-align: baseline;
}
.block-body .var-token-input.is-filled {
    background: var(--c-success-soft);
    border-color: var(--c-success-line);
    color: var(--c-success-deep);
}
.block-body .var-token-input.is-empty {
    background: var(--c-warn-surface);
    border-color: var(--c-warn-surface);
    color: var(--c-warn-deep);
}
.block-body .var-token-input:focus {
    outline: none;
    border-color: var(--c-accent-indigo-strong);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .25);
}
.block-body .var-token-input::placeholder {
    color: var(--c-text-subtle);
    font-weight: 600;
}

/* === Versions drawer (Faza 1) === */


/* === Versions drawer (Faza 1) === */
.versions-drawer { position: fixed; inset: 0; z-index: 900; }
.versions-drawer-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.35); opacity: 0; transition: opacity .18s ease; }
.versions-drawer.is-open .versions-drawer-backdrop { opacity: 1; }
.versions-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 92vw); background: var(--p-white); box-shadow: -16px 0 40px rgba(15,23,42,.18); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .2s ease; }
.versions-drawer.is-open .versions-drawer-panel { transform: translateX(0); }
.versions-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 8px; border-bottom: 1px solid var(--c-border-faint); }
.versions-drawer-head h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.versions-drawer-head p { margin: 0; }
.versions-drawer-actions { padding: 10px 18px; border-bottom: 1px solid var(--c-border-faint); display: flex; gap: 8px; }
.versions-drawer-body { flex: 1; overflow-y: auto; padding: 8px 12px 18px; }
.versions-empty { padding: 24px 8px; text-align: center; }
.versions-group { margin-top: 10px; }
.versions-group-head { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-secondary); padding: 8px 6px 4px; }
.versions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.version-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--c-border-faint); border-radius: 8px; background: var(--p-white); transition: background .12s ease, border-color .12s ease; }
.version-item:hover { background: var(--p-app-surface-2); border-color: var(--c-border-subtle); }
.version-item.is-auto { background: var(--c-surface-card-tint); }
.version-item-bullet { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-brand-surface); font-size: var(--fs-base); }
.version-item.is-auto .version-item-bullet { background: var(--p-app-surface-3); }
.version-item-main { min-width: 0; }
.version-item-time { font-size: var(--fs-2xs); color: var(--c-text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.version-item-summary { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.version-item-actions { display: flex; gap: 6px; }

.version-preview-card { max-width: 760px; width: min(760px, 94vw); }
.version-preview-body { max-height: 60vh; overflow: auto; background: var(--p-app-surface-2); border: 1px solid var(--c-border-subtle); border-radius: 8px; padding: 12px 14px; font-family: 'Segoe UI', system-ui, sans-serif; font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }


/* =====================================================================
   Preseljeno iz legal.css: DOCUMENT EDITOR
   ===================================================================== */
/* =====================================================================
   DOCUMENT EDITOR
===================================================================== */
.document-editor {
    display: flex; flex-direction: column;
    height: calc(100vh - var(--topbar-h) - 0px);
    margin: 0 -28px -36px;
    background: var(--bg);
}
.editor-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--hair);
}
.editor-title h2 { margin: 4px 0 0; font-size: var(--fs-lg); color: var(--ink); }
.editor-tools { display: flex; gap: 6px; flex-wrap: wrap; }

.editor-grid {
    flex: 1; min-height: 0;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 0;
}
.document-panel {
    overflow: auto;
    padding: 14px 20px 24px;
    background: var(--surface-3);
}
.document-paper {
    background: var(--surface);
    border: 1px solid var(--hair);
    border-radius: var(--r-lg, 12px);
    padding: 32px 44px;
    max-width: 880px;
    margin: 0 auto;
    box-shadow: var(--sh-1, 0 1px 2px rgba(15,23,42,.04));
    line-height: 1.7;
    color: var(--ink-2);
    min-height: calc(100% - 0px);
}
.document-paper .clause {
    display: grid; grid-template-columns: 36px 1fr;
    gap: 12px; padding: 10px 6px; border-radius: 6px;
}
.document-paper .clause:hover { background: var(--surface-2); }
.document-paper .clause.has-finding {
    background: var(--warn-soft);
    border-left: 3px solid var(--warn);
    padding-left: 8px;
}
.document-paper .clause-num {
    font-family: var(--f-mono); font-size: var(--fs-2xs); color: var(--ink-4);
    text-align: right;
}
.document-paper .clause-body { white-space: pre-wrap; font-size: var(--fs-base); }
.document-raw { white-space: pre-wrap; font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--ink-2); }

.findings-panel {
    background: var(--surface);
    border-left: 1px solid var(--hair);
    overflow: auto;
    padding: 18px 18px 28px;
    display: flex; flex-direction: column; gap: 10px;
}
.findings-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 8px;
}
.findings-head h3 { margin: 0; font-size: var(--fs-base); color: var(--ink); }

/* =====================================================================
   Generating banner + relevant-laws list (preseljeno iz inline <style>).
   Spinner koristi STAMP .pb-spin; lokalni gen-spin keyframe i .btn-sm
   override su uklonjeni (.btn-sm živi u modules/ai.css).
===================================================================== */
.generating-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 16px; margin-bottom: 14px;
    border-radius: 12px; border: 1px solid var(--c-accent-indigo-line);
    background: var(--c-accent-indigo-tint-1);
    box-shadow: var(--e-card);
}
.generating-banner.is-failed {
    border-color: var(--c-danger-line);
    background: var(--c-danger-soft);
}
.generating-banner-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.generating-banner-body strong { color: var(--c-accent-indigo-deep); font-size:var(--fs-base); }
.generating-banner.is-failed .generating-banner-body strong { color: var(--c-danger-deep); }
.generating-banner-icon {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--c-danger-strong); color: var(--p-white);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; flex-shrink: 0;
}

/* Relevantni članovi (injektuje compliance.js) */
.rel-law { margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--c-accent-indigo-line); border-radius: 10px; background: var(--c-accent-indigo-tint-1); }
.rel-law-head { font-size:var(--fs-base); margin-bottom: 6px; color: var(--c-accent-indigo-deep); }
.rel-article-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.rel-article { padding: 6px 8px; border-left: 3px solid var(--c-accent-indigo-line); background: var(--p-white); border-radius: 6px; }
.rel-article-head { font-size:var(--fs-base); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rel-article-head a { font-weight: 600; color: var(--c-accent-indigo-strong); text-decoration: none; }
.rel-article-head a:hover { text-decoration: underline; }
.rel-paragraphs { margin-top: 4px; font-size:var(--fs-sm); color: var(--c-accent-indigo-deep); }
.rel-par-chip { display: inline-block; padding: 1px 7px; margin-right: 4px; border-radius: 999px; background: var(--c-accent-indigo-tint-2); color: var(--c-accent-indigo-deep); font-weight: 600; font-size:var(--fs-xs); }
.rel-reason { margin-top: 4px; line-height: 1.35; }
.rel-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size:var(--fs-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.rel-high { background: var(--c-danger-soft); color: var(--c-danger-deep); }
.rel-medium { background: var(--c-warn-surface); color: var(--c-warn-deep); }
.rel-low { background: var(--c-brand-surface); color: var(--c-brand-strong); }


/* =====================================================================
   Sitni layout one-off-ovi (izmešteno iz inline style= u Editor.cshtml)
   ===================================================================== */
.editor-ai-menu-sep { margin: 6px 0; border: 0; border-top: 1px solid var(--c-border-subtle); }
.modal-head__ico { vertical-align: -3px; margin-right: 6px; }
.compliance-search-hint { margin: 8px 0 4px; }
.modal-hint-mt { margin-top: 6px; }
.modal-p-tight { margin: 0 0 8px; }
.modal-p-flush { margin: 0; }

/* ── ask_user kartica pitanja (AI pita usred generisanja — Claude Code obrazac) ─────────────────────── */
.dlg-rounds { display: flex; flex-direction: column; gap: 14px; }
.dlg-round { border: 1px solid var(--c-border); border-radius: 12px; padding: 14px; }
.dlg-round.is-locked { opacity: .62; }
.dlg-round__kicker { font-size: var(--fs-2xs); letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 8px; }
.dlg-q { padding: 10px 0; border-top: 1px dashed var(--c-border); }
.dlg-q:first-of-type { border-top: 0; }
.dlg-q__text { font-weight: 600; color: var(--c-text-primary); margin-bottom: 8px; }
.dlg-q__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dlg-opt { border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 999px; padding: 5px 12px; font-size: var(--fs-sm); cursor: pointer; color: var(--c-text-primary); }
.dlg-opt:hover { border-color: var(--c-brand); }
.dlg-opt.is-sel { border-color: var(--c-brand); background: var(--c-brand); color: #fff; }
.dlg-q__row { display: flex; gap: 8px; align-items: center; }
.dlg-q__row .dlg-q__free { flex: 1; }
.dlg-skip { border: 0; background: none; color: var(--c-text-muted); font-size: var(--fs-xs); cursor: pointer; text-decoration: underline; white-space: nowrap; }
.dlg-q.is-skipped .dlg-q__text { text-decoration: line-through; color: var(--c-text-muted); }
.dlg-q.is-skipped .dlg-q__free { opacity: .5; }
.dlg-busy { display: flex; align-items: center; gap: 8px; color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: 10px; }
.dlg-spinner { width: 14px; height: 14px; border: 2px solid var(--c-border); border-top-color: var(--c-brand); border-radius: 50%; display: inline-block; animation: dlgspin .7s linear infinite; }
@keyframes dlgspin { to { transform: rotate(360deg); } }
.dlg-actions { margin-top: 12px; display: flex; justify-content: flex-end; }


/* === Tab „Izvori": grupisani korišćeni izvori nacrta (popup pilule, isti stil kao chat reference) === */
.doc-sources-group { margin-bottom: 16px; }
.doc-sources-group h4 { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-muted); }
.doc-sources-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.doc-sources-items a { font-size: var(--fs-sm); line-height: 1.45; color: var(--c-brand); text-decoration: none; cursor: pointer; }
.doc-sources-items a:hover { text-decoration: underline; }
/* Tip-boja izvora — isti vizuelni jezik kao Pitaj Pravnu (ri-src-kind) i Analiza ugovora:
   propis plavo, presuda/stav ljubičasto, mišljenje zeleno. Važi za tab „Izvori" i chat reference. */
.doc-sources-items a.js-law-modal, .ai-chat-refs a.js-law-modal { color: var(--c-brand); }
.doc-sources-items a.js-decision-modal, .doc-sources-items a.js-stav-modal,
.ai-chat-refs a.js-decision-modal, .ai-chat-refs a.js-stav-modal { color: var(--c-accent-violet); }
.doc-sources-items a.js-opinion-modal, .ai-chat-refs a.js-opinion-modal { color: var(--c-success); }