/* ============================================================
   DMS redesign — dijeljeni atomi (PBI 7351–7356)
   ------------------------------------------------------------
   Port 1:1 iz odobrenog dizajna:
   git/project-documentation-and-proposals/projects/PBI-7351-dms-ui-document-list/design/dms-foundation.css

   Sve je scope-ovano pod .dms-screen (root klasa svakog DMS V2 ekrana),
   pa ništa ne curi na ostatak aplikacije.

   Tokeni: dizajn je nacrtan sa efektivnim vrijednostima iz dms-foundation.css.
   Globalni :root se NE redefiniše — iste vrijednosti se postavljaju samo
   unutar .dms-screen, da ekran izgleda identično dizajnu bez obzira na to
   kako su tokeni definisani u insync-tokens.css / colors_and_type.css.

   Ovaj fajl kreira #7351; ostali DMS PBI-jevi (#7352–#7356) ga samo
   aditivno dopunjavaju.
   ============================================================ */

.dms-screen {
    --is-brand-blue: #0494da;
    --is-brand-blue-600: #097cb9;
    --is-brand-blue-700: #066894;
    --is-brand-blue-300: #3cc4d8;
    --is-brand-blue-200: #cfe4f4;
    --is-brand-blue-100: #e6f4fb;
    --is-brand-orange: #f59e2c;
    --is-brand-orange-100: #fef1e0;
    --is-link: #0366d6;
    --is-action-blue: #007bff;
    --is-fg-1: #1a1f2e;
    --is-fg-2: #4a5468;
    --is-fg-3: #6b7486;
    --is-fg-muted: #9aa3b3;
    --is-bg-app: #f5f7fa;
    --is-bg-surface: #fff;
    --is-bg-surface-2: #f7f7f7;
    --is-bg-surface-3: #f8f9fa;
    --is-border-1: #e6e9ef;
    --is-border-2: #d6d5d5;
    --is-border-3: #b9bfca;
    --is-success: #1d8a44;
    --is-success-bg: #e6f7ec;
    --is-warning: #b07d00;
    --is-warning-bg: #fff5d6;
    --is-danger: #d92c2c;
    --is-danger-bg: #fde7e7;
    --is-info: #0d8fd9;
    --is-info-bg: #e6f4fb;
    --is-radius-xs: 3px;
    --is-radius-sm: 6px;
    --is-radius-md: 10px;
    --is-radius-lg: 14px;
    --is-shadow-1: 0 1px 2px rgba(20,28,50,.06);
    --is-shadow-2: 0 2px 6px rgba(20,28,50,.08),0 1px 2px rgba(20,28,50,.04);
    --is-shadow-3: 0 8px 24px rgba(20,28,50,.10),0 2px 6px rgba(20,28,50,.06);
    --is-shadow-pop: 0 16px 48px rgba(20,28,50,.18);
    --is-font-sans: 'Plus Jakarta Sans','Helvetica Neue',Helvetica,sans-serif;
    --is-font-mono: 'JetBrains Mono',ui-monospace,Menlo,monospace;

    font-family: var(--is-font-sans);
    color: var(--is-fg-1);
}

/* ── Klasični (V1) ekran: link „Probaj novi prikaz" uvijek u jednom redu ──
   Nije pod .dms-screen jer V1 nema taj root; klasa dms-trynew postoji samo na tom linku. */
.cc-vlink.dms-trynew { white-space: nowrap; flex-shrink: 0; width: auto; max-width: none; align-self: center; }

/* ── Ikone (inline SVG, stroke) ─────────────────── */
.dms-screen svg.i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.dms-screen svg.i--sm { width: 11px; height: 11px; }
.dms-screen svg.i--xs { width: 9px; height: 9px; }
.dms-screen svg.i--lg { width: 20px; height: 20px; }
.dms-screen svg.i--xl { width: 24px; height: 24px; }

/* ── Sloj za zatvaranje popovera klikom van ─────── */
.dms-screen .dms-popcatch { position: fixed; inset: 0; z-index: 4; background: transparent; }
.dms-screen .dms-pillwrap { position: relative; flex-shrink: 0; }

/* ── Pill overlay nad SfMultiSelect (is-sf-pill, kao ostale V2 stranice) ──
   Popup je standardni Syncfusion (CheckBox mod, PopupWidth 300px). ✕ mora biti
   iznad prozirne Syncfusion kontrole da bi bio klikabilan. */
.dms-screen .is-sf-pill .is-pill__x { position: relative; z-index: 2; cursor: pointer; }

/* Tanki moderni scroll u popup-u multiselecta (zahtjev operatera 29.09.2026).
   Popup se renderuje na <body> (izvan .dms-screen), pa se targetira preko CssClass="dms-ms",
   koji Syncfusion prenosi i na popup element. */
.e-popup.dms-ms .e-content,
.e-popup.dms-ms .e-list-parent,
.e-popup.dms-ms .e-dropdownbase { scrollbar-width: thin; scrollbar-color: #c3c9d4 transparent; }
.e-popup.dms-ms ::-webkit-scrollbar { width: 6px; height: 6px; }
.e-popup.dms-ms ::-webkit-scrollbar-track { background: transparent; }
.e-popup.dms-ms ::-webkit-scrollbar-thumb { background: #c3c9d4; border-radius: 999px; }
.e-popup.dms-ms ::-webkit-scrollbar-thumb:hover { background: #9aa3b3; }
.e-popup.dms-ms ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* ── Popover za rok (od – do) ───────────────────── */
.dms-screen .dms-datepop { position: absolute; top: 42px; right: 0; width: 340px; background: #fff; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-sm); box-shadow: var(--is-shadow-pop); z-index: 20; padding: 14px; box-sizing: border-box; cursor: default; text-align: left; white-space: normal; }
.dms-screen .dms-datepop__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dms-screen .dms-datepop__presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.dms-screen .dms-datepop__foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 14px; }

/* ── Polja (is-field) ───────────────────────────── */
.dms-screen .is-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dms-screen .is-field__label { font: 600 11px var(--is-font-sans); color: var(--is-fg-3); text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 6px; margin: 0; }

/* SfDatePicker restilizovan u .is-input (38px) + SVG kalendar iz dizajna preko Syncfusion ikone.
   Syncfusion ikona ostaje klikabilna (samo je prozirna), SVG je pointer-events:none. */
.dms-screen .dms-dp-host { position: relative; }
.dms-screen .dms-dp-host .e-input-group.dms-dp,
.dms-screen .dms-dp-host .e-input-group.dms-dp:hover:not(.e-disabled) {
    width: 100% !important; height: 38px !important; min-height: 38px !important; box-sizing: border-box;
    margin: 0 !important; padding: 0 !important;
    border: 1px solid var(--is-border-3) !important; border-radius: var(--is-radius-sm) !important;
    background: #fff !important; box-shadow: none !important;
    display: flex; align-items: center;
}
.dms-screen .dms-dp-host .e-input-group.dms-dp::before,
.dms-screen .dms-dp-host .e-input-group.dms-dp::after { display: none !important; }
.dms-screen .dms-dp-host .e-input-group.dms-dp.e-input-focus {
    border-color: var(--is-brand-blue) !important;
    box-shadow: 0 0 0 3px rgba(4,148,218,.15) !important;
}
.dms-screen .dms-dp-host .e-input-group.dms-dp input.e-input {
    height: 36px !important; min-height: 0 !important; margin: 0 !important;
    padding: 0 34px 0 12px !important; border: 0 !important; background: transparent !important; box-shadow: none !important;
    font: 400 13.5px var(--is-font-sans) !important; color: var(--is-fg-1) !important; text-indent: 0 !important;
}
.dms-screen .dms-dp-host .e-input-group.dms-dp input.e-input::placeholder { color: var(--is-fg-muted) !important; font: 400 13.5px var(--is-font-sans) !important; }
.dms-screen .dms-dp-host .e-input-group.dms-dp .e-input-group-icon.e-date-icon {
    position: absolute !important; top: 0; right: 0; width: 38px !important; height: 36px !important; min-height: 0 !important; min-width: 0 !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important;
    color: transparent !important; font-size: 0 !important; cursor: pointer;
}
.dms-screen .dms-dp-host .e-input-group.dms-dp .e-input-group-icon.e-date-icon::before { color: transparent !important; }
.dms-screen .dms-dp-host .dms-dp-icon { position: absolute; right: 12px; top: 12px; color: var(--is-fg-3); pointer-events: none; }

/* ── DMS atomi ──────────────────────────────────── */
/* inline-block (ne inline-flex) — elipsa radi samo na block/inline-block; uz max-width:100% badge
   ostaje cijeli u uskoj koloni, a tekst unutar njega se skraćuje sa „…" (zahtjev operatera). */
.dms-screen .dms-proto { display: inline-block; vertical-align: middle; height: 22px; padding: 0 7px; border-radius: 4px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); font: 700 11.5px/20px var(--is-font-mono); color: var(--is-fg-2); letter-spacing: .02em; white-space: nowrap; box-sizing: border-box; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dms-screen .dms-proto b { color: var(--is-brand-blue-700); font-weight: 700; }

.dms-screen .dms-status { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: #eef1f5; color: var(--is-fg-2); font: 600 11.5px var(--is-font-sans); white-space: nowrap; box-sizing: border-box; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.dms-screen .dms-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--is-fg-3); flex-shrink: 0; }
.dms-screen .dms-status--final { background: var(--is-success-bg); color: #146b34; }
.dms-screen .dms-status--final::before { background: var(--is-success); }

.dms-screen .dms-due { display: inline-flex; align-items: center; gap: 5px; font: 500 12.5px var(--is-font-mono); color: var(--is-fg-2); white-space: nowrap; }
.dms-screen .dms-due--expired { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--is-danger-bg); color: #a51d1d; border: 1px solid rgba(217,44,44,.25); font-weight: 600; font-size: 12px; box-sizing: border-box; }

.dms-screen .dms-emp { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dms-screen .dms-avatar { flex-shrink: 0; width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 700 10px var(--is-font-sans); letter-spacing: .03em; }
.dms-screen .dms-avatar--lg { width: 32px; height: 32px; font-size: 11px; }
.dms-screen .dms-avatar--a { background: #2f7fb5; }
.dms-screen .dms-avatar--b { background: #7a4fb0; }
.dms-screen .dms-avatar--c { background: #1d8a6a; }
.dms-screen .dms-avatar--d { background: #b0592a; }
.dms-screen .dms-avatar--e { background: #4a5468; }
.dms-screen .dms-emp__name { font: 600 13px var(--is-font-sans); color: var(--is-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.dms-screen .dms-info { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: 999px; color: var(--is-brand-blue-600); cursor: help; }
.dms-screen .dms-tooltip { position: absolute; z-index: 30; background: #1a1f2e; color: #fff; font: 500 12px/1.45 var(--is-font-sans); padding: 8px 10px; border-radius: 6px; box-shadow: var(--is-shadow-3); max-width: 280px; }

/* ── Info popup (DMS) ───────────────────────────────
   Isti chrome kao ConfirmDeleteDialog (cdd-*) i co-infopop (CompaniesV2): gradijent zaglavlje
   sa ikonom, X za zatvaranje, siva podloga u footer-u. Overlay je fixed + flex → popup je uvijek
   tačno na vertikalnoj i horizontalnoj sredini ekrana (zahtjev operatera 29.09.2026). */
.dms-screen .dms-infopop-overlay { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; background: rgba(20,28,50,.45); animation: dms-infopop-fade .15s ease; }
.dms-screen .dms-infopop { width: 480px; max-width: 100%; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: #fff; border-radius: 10px; box-shadow: 0 24px 64px rgba(20,28,50,.28); overflow: hidden; font-family: var(--is-font-sans); animation: dms-infopop-scale .18s ease; }
.dms-screen .dms-infopop__head { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--is-border-1); background: linear-gradient(180deg, #fff 0%, var(--is-bg-surface-3) 100%); }
.dms-screen .dms-infopop__ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-600); display: inline-flex; align-items: center; justify-content: center; }
.dms-screen .dms-infopop__titles { flex: 1; min-width: 0; }
.dms-screen .dms-infopop__title { margin: 0; font: 700 18px/1.35 var(--is-font-sans); color: var(--is-fg-1); }
.dms-screen .dms-infopop__sub { margin: 2px 0 0; font: 500 12px var(--is-font-mono); color: var(--is-fg-3); }
.dms-screen .dms-infopop__sub b { color: var(--is-fg-2); font-weight: 600; }
.dms-screen .dms-infopop__close { flex-shrink: 0; margin-left: auto; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--is-fg-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.dms-screen .dms-infopop__close:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-3); }
.dms-screen .dms-infopop__body { padding: 18px 22px; overflow-y: auto; font: 500 13px/1.6 var(--is-font-sans); color: var(--is-fg-2); }
.dms-screen .dms-infopop__body p { margin: 0 0 10px; }
.dms-screen .dms-infopop__body p:last-child { margin-bottom: 0; }
.dms-screen .dms-infopop__body b { color: var(--is-fg-1); font-weight: 700; }
.dms-screen .dms-infopop__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface-3); }
@keyframes dms-infopop-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dms-infopop-scale { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============================================================
   PBI 7352 — dopuna (aditivno): forma, sekcije, dugmad, upload zona i lista fajlova.
   Port 1:1 iz design/dms-foundation.css. Globalne is-input / is-btn / is-field klase
   (redesign-popup-shell.css) se razlikuju od dizajna (radius 3px, primarno #0494da,
   margine polja) — ovdje su pune vrijednosti iz dizajna, samo pod .dms-screen.
   ============================================================ */

/* ── Sekcije i grid forme ───────────────────────── */
.dms-screen .is-section { margin-bottom: 18px; }
.dms-screen .is-section__title { display: flex; align-items: center; gap: 8px; font: 700 12px var(--is-font-sans); color: var(--is-fg-2); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.dms-screen .is-section__title::after { content: ""; flex: 1; height: 1px; background: var(--is-border-1); }
.dms-screen .is-section__title .is-req { color: var(--is-danger); }
.dms-screen .is-section__title .is-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--is-fg-muted); }
.dms-screen .is-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.dms-screen .is-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
.dms-screen .is-span2 { grid-column: span 2; }

/* ── Polja: labela, hint, greška ────────────────── */
.dms-screen .is-field__label .is-req { color: var(--is-danger); }
.dms-screen .is-field__label .is-opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--is-fg-muted); }
.dms-screen .is-field__hint { font: 400 11.5px/1.4 var(--is-font-sans); color: var(--is-fg-3); margin: 0; }
.dms-screen .is-field__error { display: flex; align-items: center; gap: 6px; font: 500 11.5px var(--is-font-sans); color: var(--is-danger); margin: 0; }
.dms-screen .is-field__row { display: flex; gap: 6px; align-items: center; }
.dms-screen .is-field__row > :first-child { flex: 1; min-width: 0; }

/* ── Input / textarea (native) ──────────────────── */
.dms-screen .is-input,
.dms-screen .is-textarea { width: 100%; box-sizing: border-box; height: 38px; margin: 0; padding: 0 12px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; font: 400 13.5px var(--is-font-sans); color: var(--is-fg-1); box-shadow: none; transition: none; }
.dms-screen .is-input::placeholder,
.dms-screen .is-textarea::placeholder { color: var(--is-fg-muted); opacity: 1; }
.dms-screen .is-input:focus,
.dms-screen .is-textarea:focus,
.dms-screen .is-input.is-focus { outline: none; border-color: var(--is-brand-blue); box-shadow: 0 0 0 3px rgba(4,148,218,.15); }
.dms-screen .is-input.is-invalid,
.dms-screen .is-input.is-invalid:focus { border-color: var(--is-danger); box-shadow: 0 0 0 3px rgba(217,44,44,.12); }
.dms-screen .is-input.is-readonly { background: var(--is-bg-surface-3); color: var(--is-fg-2); }
.dms-screen .is-textarea { height: auto; min-height: 76px; padding: 9px 12px; line-height: 1.45; resize: none; display: block; }
/* Broj / godina: bez strelica number inputa (u dizajnu ih nema). */
.dms-screen input.is-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.dms-screen input.is-input[type=number]::-webkit-outer-spin-button,
.dms-screen input.is-input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.dms-screen .is-addbtn { height: 38px; width: 38px; flex: 0 0 38px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--is-radius-sm); border: 1px dashed var(--is-border-3); background: #fff; color: var(--is-brand-blue-700); cursor: pointer; padding: 0; }
.dms-screen .is-addbtn:hover { border-style: solid; border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }

/* ── Dugmad popup-a (is-btn) ────────────────────── */
.dms-screen .is-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 18px; margin: 0; border-radius: var(--is-radius-sm); border: 1px solid transparent; font: 600 13px var(--is-font-sans); cursor: pointer; white-space: nowrap; box-sizing: border-box; max-width: 100%; overflow: hidden; transition: none; }
.dms-screen .is-btn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dms-screen .is-btn--primary,
.dms-screen .is-btn--primary:hover:not(:disabled) { background: var(--is-brand-blue-600); color: #fff; border-color: var(--is-brand-blue-600); }
.dms-screen .is-btn--primary:hover:not(:disabled) { background: var(--is-brand-blue-700); }
.dms-screen .is-btn--ghost,
.dms-screen .is-btn--ghost:hover:not(:disabled) { background: #fff; color: var(--is-fg-2); border-color: var(--is-border-3); }
.dms-screen .is-btn--ghost:hover:not(:disabled) { background: var(--is-bg-surface-3); color: var(--is-fg-1); }

/* ── Ikonska dugmad reda (dl-iconbtn) ───────────── */
.dms-screen .dl-iconbtn { width: 30px; height: 30px; margin: 0; border-radius: var(--is-radius-sm); border: 1px solid transparent; background: transparent; color: var(--is-fg-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; text-decoration: none; box-sizing: border-box; transition: none; flex-shrink: 0; }
.dms-screen .dl-iconbtn:hover { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-1); }
.dms-screen .dl-iconbtn.is-edit:hover { background: rgba(4,148,218,.10); color: var(--is-brand-blue-600); border-color: rgba(4,148,218,.25); }
.dms-screen .dl-iconbtn.is-danger:hover { background: rgba(217,44,44,.08); color: var(--is-danger); border-color: rgba(217,44,44,.2); }
.dms-screen .dl-iconbtn.is-save,
.dms-screen .dl-iconbtn.is-save:hover { background: var(--is-brand-blue-600); color: #fff; border-color: transparent; }
.dms-screen .dl-iconbtn:disabled { opacity: .32; cursor: not-allowed; background: transparent; border-color: transparent; }

/* ── Upload zona + lista fajlova ────────────────── */
.dms-screen .dms-drop { border: 1.5px dashed var(--is-border-3); border-radius: var(--is-radius-md); background: var(--is-bg-surface-3); padding: 16px; display: flex; align-items: center; gap: 14px; box-sizing: border-box; }
.dms-screen .dms-drop__icon { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--is-border-1); color: var(--is-brand-blue-600); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; }
.dms-screen .dms-drop__t { font: 600 13px var(--is-font-sans); color: var(--is-fg-1); }
.dms-screen .dms-drop__s { font: 500 12px var(--is-font-sans); color: var(--is-fg-3); margin-top: 2px; }
.dms-screen .dms-drop__cnt { margin-left: auto; font: 700 11px var(--is-font-mono); color: var(--is-fg-3); }
.dms-screen .dms-filelist { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dms-screen .dms-fileitem { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 10px; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-sm); background: #fff; box-sizing: border-box; }
.dms-screen .dms-fileicon { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font: 700 8.5px var(--is-font-mono); flex-shrink: 0; letter-spacing: .02em; }
.dms-screen .dms-fileicon--pdf { background: #fde7e7; color: #b42323; }
.dms-screen .dms-fileicon--doc { background: #e6f0fb; color: #1f5fa8; }
.dms-screen .dms-fileicon--xls { background: #e6f7ec; color: #146b34; }
.dms-screen .dms-fileicon--img { background: #f1eafb; color: #6a3fa6; }
.dms-screen .dms-fileitem__name { font: 600 13px var(--is-font-sans); color: var(--is-fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.dms-screen .dms-fileitem__size { font: 500 11.5px var(--is-font-mono); color: var(--is-fg-3); white-space: nowrap; }

/* ============================================================
   PBI 7353 — dopuna (aditivno): detalj dokumenta.
   Port 1:1 iz design/dms-foundation.css (sekcija „Detail page") —
   zaglavlje, kolone, kartice, tabovi, feed komentara, RTE, callout.
   ============================================================ */

/* ── Zaglavlje detalja ──────────────────────────── */
.dms-screen .dms-dhead { background: #fff; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); padding: 16px 18px; display: flex; align-items: center; gap: 16px; margin-bottom: 14px; box-sizing: border-box; }
.dms-screen .dms-dhead__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-600); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dms-screen .dms-dhead__main { flex: 1; min-width: 0; }
.dms-screen .dms-dhead__title { margin: 0; font: 700 20px/1.25 var(--is-font-sans); color: var(--is-fg-1); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dms-screen .dms-dhead__meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-3); flex-wrap: wrap; }
.dms-screen .dms-dhead__meta b { color: var(--is-fg-2); font-weight: 600; }
.dms-screen .dms-dhead__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--is-border-3); flex-shrink: 0; }

/* ── Kolone + kartice ───────────────────────────── */
.dms-screen .dms-cols { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 14px; align-items: start; }
.dms-screen .dms-card { background: #fff; border: 1px solid var(--is-border-1); border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1); overflow: hidden; box-sizing: border-box; min-width: 0; }
.dms-screen .dms-card__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--is-border-1); }
.dms-screen .dms-card__title { margin: 0; font: 700 14px var(--is-font-sans); color: var(--is-fg-1); display: flex; align-items: center; gap: 8px; letter-spacing: normal; }
.dms-screen .dms-card__head .cc-count { height: 20px; min-width: 22px; font-size: 11px; }
.dms-screen .dms-card__body { padding: 16px; }
.dms-screen .dms-card__foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--is-border-1); background: var(--is-bg-surface-3); }
.dms-screen .dms-dirty { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--is-font-sans); color: var(--is-warning); }

/* ── Tabovi ─────────────────────────────────────── */
.dms-screen .dms-tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--is-border-1); }
.dms-screen .dms-tab { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px; margin: 0 0 -1px; font: 600 13px var(--is-font-sans); color: var(--is-fg-3); border: 0; background: transparent; border-bottom: 2px solid transparent; border-radius: 0; cursor: pointer; box-shadow: none; transition: none; }
.dms-screen .dms-tab:hover { color: var(--is-fg-3); background: transparent; }
.dms-screen .dms-tab:focus { outline: none; box-shadow: none; }
.dms-screen .dms-tab.is-active,
.dms-screen .dms-tab.is-active:hover { color: var(--is-brand-blue-700); border-bottom-color: var(--is-brand-blue-600); }
.dms-screen .dms-tab .cc-count { height: 18px; min-width: 20px; font-size: 10.5px; padding: 0 6px; }
.dms-screen .dms-tab.is-active .cc-count { background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); }
.dms-screen .dms-subbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--is-border-1); }
.dms-screen .dms-subbar .cc-search { flex: 1 1 auto; }

/* ── Podbroj / Dodatak ──────────────────────────── */
.dms-screen .dms-subnum { display: inline-flex; align-items: center; gap: 4px; font: 700 11.5px var(--is-font-mono); color: var(--is-fg-2); }
.dms-screen .dms-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px; font: 700 10px var(--is-font-sans); letter-spacing: .04em; text-transform: uppercase; background: var(--is-brand-orange-100); color: #8a4b00; box-sizing: border-box; }

/* ── Feed komentara ─────────────────────────────── */
.dms-screen .dms-feed { display: flex; flex-direction: column; }
.dms-screen .dms-note { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--is-border-1); }
.dms-screen .dms-note:last-child { border-bottom: 0; }
.dms-screen .dms-note__main { flex: 1; min-width: 0; }
.dms-screen .dms-note__head { display: flex; align-items: center; gap: 8px; }
.dms-screen .dms-note__who { font: 700 13px var(--is-font-sans); color: var(--is-fg-1); }
.dms-screen .dms-note__when { font: 500 12px var(--is-font-mono); color: var(--is-fg-3); }
.dms-screen .dms-note__head .dl-actions { margin-left: auto; }
.dms-screen .dms-note__text { margin: 4px 0 0; font: 400 13.5px/1.55 var(--is-font-sans); color: var(--is-fg-2); overflow-wrap: anywhere; }
.dms-screen .dms-note__text p { margin: 0 0 6px; }

/* ── Rich text editor okvir ─────────────────────── */
.dms-screen .dms-rte { border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); overflow: hidden; }
.dms-screen .dms-rte__bar { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--is-border-1); background: var(--is-bg-surface-3); }
.dms-screen .dms-rte__sep { width: 1px; background: var(--is-border-1); margin: 4px 4px; }
.dms-screen .dms-rte__area { min-height: 180px; padding: 12px; font: 400 13.5px/1.55 var(--is-font-sans); color: var(--is-fg-1); box-sizing: border-box; }

/* ── Callout (info) ─────────────────────────────── */
.dms-screen .dms-callout { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--is-info-bg); border: 1px solid #b9dcef; font: 500 12.5px/1.5 var(--is-font-sans); color: var(--is-fg-1); }
.dms-screen .dms-callout svg { color: var(--is-brand-blue-700); margin-top: 2px; }
.dms-screen .dms-callout b { font-weight: 700; }

/* ── Inline polje (red tabele / fajl u modalu) ──── */
.dms-screen .dms-inline { width: 100%; box-sizing: border-box; height: 32px; margin: 0; padding: 0 10px; border: 1px solid var(--is-border-3); border-radius: 4px; background: #fff; font: 400 13px var(--is-font-sans); color: var(--is-fg-1); display: flex; align-items: center; box-shadow: none; }
.dms-screen .dms-inline.is-invalid { border-color: var(--is-danger); box-shadow: 0 0 0 2px rgba(217,44,44,.12); }
.dms-screen .dms-inline.is-placeholder { color: var(--is-fg-muted); }
.dms-screen .dms-inline--select { justify-content: space-between; gap: 6px; }

/* ============================================================
   PBI 7354 — dopuna (aditivno): šifarnik (Tipovi protokola).
   Port 1:1 iz design/dms-foundation.css (sekcija „Codebook atoms").
   ============================================================ */

/* Puna širina, lijevo poravnato (kao sm-screen / ostali DMS V2 ekrani). */
.dms-screen.cc-screen { max-width: none; margin: 0; }
.dms-screen .cc-muted { color: var(--is-fg-muted); }

/* ── Kod šifarnika ──────────────────────────────── */
.dms-screen .dms-code { font: 700 11.5px var(--is-font-mono); color: var(--is-fg-2); background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); border-radius: 4px; padding: 1px 6px; letter-spacing: .03em; }

/* ── Inline red za dodavanje / uređivanje ───────── */
.dms-screen .dms-row--edit td { background: var(--is-brand-blue-100) !important; }
.dms-screen .dms-inline-err { display: flex; align-items: center; gap: 5px; margin-top: 4px; font: 500 11px var(--is-font-sans); color: var(--is-danger); }

/* ============================================================
   PBI 7355 — dopuna (aditivno): šifarnik (Statusi dokumenata).
   Port 1:1 iz design/dms-foundation.css (sekcija „Codebook atoms").
   ============================================================ */

/* ── Redoslijed (mono chip) ─────────────────────── */
.dms-screen .dms-order { font: 700 11.5px var(--is-font-mono); color: var(--is-fg-2); background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1); border-radius: 4px; padding: 1px 6px; }

/* ── Finalni status (badge „Finalni" / „—") ─────── */
.dms-screen .dms-final { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 11.5px var(--is-font-sans); box-sizing: border-box; }
.dms-screen .dms-final--yes { background: var(--is-success-bg); color: #146b34; }
.dms-screen .dms-final--no { color: var(--is-fg-muted); padding: 0; }

/* ── Uže inline polje (Redoslijed) — Main.dc.html: style="width: 90px;" ── */
.dms-screen .dms-inline--order { width: 90px; }

/* ============================================================
   PBI 7356 — dopuna (aditivno): šifarnik (Odjeljenja).
   Port 1:1 iz design/dms-foundation.css (sekcija „Codebook atoms").
   ============================================================ */

/* ── Sažetak zaposlenih (avatar stack + prva 2 imena + „+N") ── */
.dms-screen .dms-people { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dms-screen .dms-stack { display: flex; flex-shrink: 0; }
.dms-screen .dms-stack .dms-avatar { width: 24px; height: 24px; font-size: 9px; border: 2px solid #fff; margin-left: -6px; box-sizing: border-box; }
.dms-screen .dms-stack .dms-avatar:first-child { margin-left: 0; }
.dms-screen .dms-people__txt { font: 500 12.5px var(--is-font-sans); color: var(--is-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dms-screen .dms-more { display: inline-flex; align-items: center; flex-shrink: 0; height: 20px; padding: 0 7px; border-radius: 999px; background: #eef1f5; color: var(--is-fg-2); font: 700 10.5px var(--is-font-mono); box-sizing: border-box; }

/* ── Chip-box (uređivanje liste — zaposleni kao pločice) ── */
.dms-screen .dms-chipbox { min-height: 38px; box-sizing: border-box; padding: 4px 6px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm); background: #fff; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dms-screen .dms-chipbox .cc-chip { height: 24px; }
.dms-screen .dms-chipbox__ph { font: 400 13px var(--is-font-sans); color: var(--is-fg-muted); padding: 0 6px; }

/* ── Pretraga u popup-u multiselecta ────────────── */
.dms-screen .dms-mspop__search { padding: 8px; border-bottom: 1px solid var(--is-border-1); position: relative; }
.dms-screen .dms-mspop__search svg { position: absolute; left: 18px; top: 18px; color: var(--is-fg-3); }
.dms-screen .dms-mspop__search input { width: 100%; box-sizing: border-box; height: 32px; margin: 0; padding: 0 10px 0 30px; border: 1px solid var(--is-border-3); border-radius: var(--is-radius-xs); background: #fff; font: 400 13px var(--is-font-sans); color: var(--is-fg-1); box-shadow: none; }
/* ── Banner „upload nije uspio" (PBI 7636) ──────────
   Stoji između headera i body-ja modala (van scroll zone, uvijek vidljiv), uz toast.
   Nazivi fajlova koji nisu otišli na blob prikazuju se kao pločice. */
.dms-screen .dms-uperr { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 14px 22px 0; padding: 12px 40px 12px 14px; border-radius: 10px; background: linear-gradient(180deg, #fff5f5 0%, #fdecec 100%); border: 1px solid rgba(217,44,44,.22); box-shadow: 0 1px 2px rgba(122,20,20,.06), 0 6px 16px -8px rgba(217,44,44,.28); overflow: hidden; flex-shrink: 0; animation: dms-uperr-in .22s ease-out; }
.dms-screen .dms-uperr::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--is-danger); }
.dms-screen .dms-uperr__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: #fff; color: var(--is-danger); box-shadow: 0 0 0 4px rgba(217,44,44,.10); }
.dms-screen .dms-uperr__icon svg { width: 17px; height: 17px; }
.dms-screen .dms-uperr__main { min-width: 0; flex: 1; }
.dms-screen .dms-uperr__title { margin: 1px 0 2px; font: 700 13.5px/1.35 var(--is-font-sans); color: #7a1414; }
.dms-screen .dms-uperr__text { margin: 0; font: 500 12.5px/1.5 var(--is-font-sans); color: #8f2a2a; }
.dms-screen .dms-uperr__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dms-screen .dms-uperr__file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 9px; border-radius: 999px; background: #fff; border: 1px solid rgba(217,44,44,.28); font: 600 11.5px var(--is-font-sans); color: #7a1414; box-sizing: border-box; }
.dms-screen .dms-uperr__file svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--is-danger); }
.dms-screen .dms-uperr__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dms-screen .dms-uperr__close { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #a34a4a; cursor: pointer; }
.dms-screen .dms-uperr__close:hover { background: rgba(217,44,44,.10); color: #7a1414; }
.dms-screen .dms-uperr__close svg { width: 14px; height: 14px; }
@keyframes dms-uperr-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dms-screen .dms-uperr { animation: none; } }
@media (max-width: 640px) { .dms-screen .dms-uperr { margin: 12px 18px 0; } }

/* ── PBI 7755 — polje „Dodijeljeno" (novi predmet + detalj), port iz design/DmsAccess.html artboard 7 ──
   Hint u popup-u (.da-list__hint): Syncfusion popup je na <body>, pa klasa nije pod .dms-screen. */
.e-popup .dms-assignee-hint { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border-top: 1px solid #e6e9ef; background: #f8f9fa; font: 500 11.5px 'Plus Jakarta Sans','Helvetica Neue',Helvetica,sans-serif; color: #7a8395; }
/* Vrijednost u polju + oznaka za postojećeg dodijeljenog bez pristupa (.da-tag-warn). */
.dms-screen .dms-assignee { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.dms-screen .dms-assignee__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dms-screen .dms-tag-warn { flex: none; font: 700 10.5px var(--is-font-sans); background: #fff5d6; color: #7a5a00; border: 1px solid #f0dc9a; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
/* Hint ispod polja (.da-hint). */
.dms-screen .dms-assignee-nohint { font: 500 11.5px/1.45 var(--is-font-sans); color: #7a8395; margin-top: 6px; }
.dms-screen .dms-assignee-nohint b { font-weight: 700; color: inherit; }