/* ============================================================
 * PBI 6484 — tab „Vozila" na naprednom projektu (dva grida).
 *
 * Screen-specific cosmetics ONLY. Table shell (.is-tablecard,
 * .is-tablescroll, .is-table sticky thead, .is-tableempty,
 * .is-th via IsSortHeader, .is-actions) comes from the globally
 * linked insync-tables.css / insync-controls.css. This file adds
 * only what has no shared equivalent: filter bar, „samo otvoreni"
 * toggle, status badges, plate/cap cells, the inline add/edit row
 * and the inline Sf date-picker override.
 *
 * Delete confirmation = ConfirmDeleteDialog, info dialogs =
 * InformationPopup, toasts = SfToast — all bring their own chrome,
 * so no .vh-modal / .vh-toast here.
 *
 * --is-* tokens are global (insync-tokens.css / colors_and_type.css)
 * — do NOT redefine :root and do NOT add font links.
 * ============================================================ */

.vh-screen { padding: 16px 0 40px; }
.vh-screen .vh-block { margin-bottom: 22px; }
.vh-screen .vh-block:last-of-type { margin-bottom: 0; }

/* ── Read-only banner ────────────────────────────────────────── */
.vh-screen .vh-ro {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  padding: 10px 14px; border-radius: var(--is-radius-sm);
  background: rgba(0,123,255,.07); border: 1px solid rgba(0,123,255,.20);
  font: 500 12.5px var(--is-font-sans); color: var(--is-fg-2);
}
.vh-screen .vh-ro i { color: var(--is-action-blue); font-size: 12px; }

/* ── Filter bar (pretraga prva lijevo, „Poništi" unutar bara) ──── */
.vh-screen .vh-filters {
  background: var(--is-bg-surface); border: 1px solid var(--is-border-1);
  border-radius: var(--is-radius-md); box-shadow: var(--is-shadow-1);
  padding: 12px 14px; margin-bottom: 12px;
}
.vh-screen .vh-filters__row { display: grid; gap: 10px; align-items: center; }
.vh-screen .vh-filters__row--4 {
  grid-template-columns: minmax(230px, 1.4fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(170px, 1fr) auto;
}
.vh-screen .vh-filters__row--2 { grid-template-columns: minmax(260px, 1.6fr) auto auto; }

.vh-screen .vh-fld { position: relative; min-width: 0; }
.vh-screen .vh-fld > i.vh-fld__lead {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--is-fg-3); font-size: 13px; pointer-events: none;
}
.vh-screen .vh-fld input {
  width: 100%; height: 38px; padding: 0 30px 0 34px;
  border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm);
  background: #fff; font: 400 14px var(--is-font-sans); color: var(--is-fg-1);
}
.vh-screen .vh-fld input::placeholder { color: var(--is-fg-3); }
.vh-screen .vh-fld input:focus {
  outline: none; border-color: var(--is-action-blue);
  box-shadow: 0 0 0 3px rgba(0,123,255,.15);
}
.vh-screen .vh-fld__clr {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border: 0; border-radius: 999px;
  background: var(--is-border-2); color: var(--is-fg-2);
  font-size: 9px; cursor: pointer; display: none;
  align-items: center; justify-content: center;
}
.vh-screen .vh-fld.is-set .vh-fld__clr { display: inline-flex; }
.vh-screen .vh-fld.is-set input { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }
.vh-screen .vh-fld__cap {
  position: absolute; left: 12px; top: -7px; padding: 0 5px; z-index: 1;
  background: var(--is-bg-surface); font: 600 9.5px var(--is-font-sans);
  text-transform: uppercase; letter-spacing: .05em; color: var(--is-fg-3);
}
.vh-screen .vh-fld.is-set .vh-fld__cap { color: var(--is-brand-blue-700); }

/* Prekidač „samo otvoreni kvarovi" */
.vh-screen .vh-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 38px;
  padding: 0 13px; border-radius: var(--is-radius-sm);
  border: 1px solid var(--is-border-3); background: #fff; cursor: pointer;
  font: 600 12.5px var(--is-font-sans); color: var(--is-fg-2); white-space: nowrap;
  margin-bottom: 0px !important;
}
.vh-screen .vh-toggle input { margin: 0; }
.vh-screen .vh-toggle.is-on {
  border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100);
  color: var(--is-brand-blue-700);
}

.vh-screen .vh-reset {
  display: inline-flex; align-items: center; gap: 7px; height: 38px;
  padding: 0 14px; border-radius: var(--is-radius-sm);
  border: 1px solid var(--is-border-3); background: #fff;
  font: 600 13px var(--is-font-sans); color: var(--is-fg-2);
  cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden;
}
.vh-screen .vh-reset i { flex-shrink: 0; font-size: 12px; }
.vh-screen .vh-reset:hover:not(:disabled) {
  background: rgba(199,59,59,.06); border-color: rgba(199,59,59,.30); color: var(--is-danger);
}
.vh-screen .vh-reset:disabled { opacity: .38; cursor: not-allowed; }

.vh-screen .vh-chipstrip {
  display: none; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--is-border-1);
}
.vh-screen .vh-chipstrip.is-on { display: flex; }
.vh-screen .vh-chipstrip__label {
  font: 500 11px var(--is-font-sans); color: var(--is-fg-3);
  text-transform: uppercase; letter-spacing: .05em; margin-right: 2px;
}
.vh-screen .vh-fchip {
  display: inline-flex; align-items: center; gap: 6px; height: 24px;
  padding: 0 4px 0 9px; border-radius: 999px;
  background: var(--is-brand-blue-100); border: 1px solid var(--is-brand-blue-200);
  font: 600 12px var(--is-font-sans); color: var(--is-brand-blue-700);
}
.vh-screen .vh-fchip b { font-weight: 700; }
.vh-screen .vh-fchip__x {
  width: 18px; height: 18px; border: 0; border-radius: 999px; background: transparent;
  color: var(--is-brand-blue-700); cursor: pointer; font-size: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.vh-screen .vh-fchip__x:hover { background: rgba(4,148,218,.18); }

/* ── Toolbar bits (inside shared .is-tablecard__toolbar) ─────── */
.vh-screen .vh-toolbar__title {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font: 600 14px var(--is-font-sans); color: var(--is-fg-1); letter-spacing: .01em;
}
.vh-screen .vh-toolbar__title i.vh-ico {
  width: 26px; height: 26px; border-radius: 6px; flex: none;
  background: var(--is-brand-blue-100); color: var(--is-brand-blue-700);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.vh-screen .vh-count {
  font: 600 11px var(--is-font-sans); color: var(--is-fg-2);
  background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.vh-screen .vh-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px var(--is-font-sans); color: var(--is-fg-3);
}
.vh-screen .vh-meta b { font: 700 12px var(--is-font-mono); color: var(--is-fg-1); }
.vh-screen .vh-meta.is-warn { color: var(--is-danger); }
.vh-screen .vh-meta.is-warn b { color: var(--is-danger); }
.vh-screen .vh-loadchip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px;
  padding: 0 9px; border-radius: 999px; background: var(--is-bg-surface-3);
  border: 1px solid var(--is-border-1); font: 500 11px var(--is-font-mono);
  color: var(--is-fg-3); cursor: default;
}
.vh-screen .vh-loadchip i { font-size: 9px; }
.vh-screen .vh-loadchip b { color: var(--is-fg-2); font-weight: 600; }
.vh-screen .vh-loadchip__sep { color: var(--is-fg-muted); padding: 0 1px; }
.vh-screen .vh-loadchip__info { background: transparent; border: 0; padding: 0 0 0 2px; color: var(--is-fg-3); cursor: pointer; }
.vh-screen .vh-loadchip__info:hover i { color: var(--is-action-blue); }
.vh-screen .vh-info {
  border: 0; background: transparent; padding: 0 0 0 1px; cursor: pointer;
  color: var(--is-fg-muted); font-size: 11px; line-height: 1;
}
.vh-screen .vh-info:hover { color: var(--is-action-blue); }

/* ── Buttons — one line + ellipsis (CLAUDE.md „Buttons"). ────── */
.vh-screen .vh-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px;
  padding: 0 14px; border-radius: var(--is-radius-sm);
  font: 600 13px var(--is-font-sans); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden;
}
.vh-screen .vh-btn i { flex-shrink: 0; font-size: 12px; }
.vh-screen .vh-btn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vh-screen .vh-btn--primary { background: var(--is-brand-blue); color: #fff; }
.vh-screen .vh-btn--primary:hover:not(:disabled) { background: var(--is-brand-blue-700); }
.vh-screen .vh-btn--ghost { background: #fff; color: var(--is-fg-1); border-color: var(--is-border-3); }
.vh-screen .vh-btn--ghost:hover:not(:disabled) { background: var(--is-bg-surface-3); }
.vh-screen .vh-btn:disabled { opacity: .40; cursor: not-allowed; }
.vh-screen .is-tableempty .vh-btn { display: inline-flex; }
.vh-screen .is-tableempty .vh-btn i { margin-bottom: 0 !important; color: inherit; }

/* ── Table cell cosmetics ────────────────────────────────────── */
.vh-screen .vh-idx { font: 500 12px var(--is-font-mono); color: var(--is-fg-muted); }
.vh-screen .vh-name { font: 600 13.5px var(--is-font-sans); color: var(--is-fg-1); display: inline-flex; align-items: center; gap: 8px; max-width: 100%; overflow: hidden; }
.vh-screen .vh-sub { display: inline-flex; align-items: center; gap: 7px; color: var(--is-fg-2); font: 500 13px var(--is-font-sans); max-width: 100%; overflow: hidden; }
.vh-screen .vh-sub i { font-size: 10px; color: var(--is-fg-3); flex: none; }
.vh-screen .vh-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vh-screen .vh-empty-val { color: var(--is-fg-muted); font-style: italic; font-size: 12px; }
.vh-screen .vh-date { font: 500 12.5px var(--is-font-mono); color: var(--is-fg-2); white-space: nowrap; }
.vh-screen .vh-plate {
  display: inline-block; box-sizing: border-box; max-width: 100%; height: 22px; padding: 0 8px;
  border-radius: 4px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-2);
  font: 700 12px/20px var(--is-font-mono); color: var(--is-fg-1); letter-spacing: .04em;
  /* dugačka oznaka: badge ide do širine kolone, a tekst unutra se skraćuje ellipsisom (ne curi u susjednu kolonu) */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.vh-screen .vh-cap { font: 600 12.5px var(--is-font-mono); color: var(--is-fg-1); display: inline-flex; align-items: center; gap: 6px; }
.vh-screen .vh-cap span { font: 500 11px var(--is-font-sans); color: var(--is-fg-3); }
.vh-screen .vh-note {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-2); max-width: 280px;
}

/* Statusna oznaka — zamjenjuje današnji crveni tekst po cijelom redu */
.vh-screen .vh-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 21px;
  padding: 0 8px; border-radius: 999px;
  font: 700 10.5px var(--is-font-sans); letter-spacing: .02em; white-space: nowrap;
}
.vh-screen .vh-badge i { font-size: 9px; }
.vh-screen .vh-badge--issue { background: rgba(199,59,59,.10); color: var(--is-danger); border: 1px solid rgba(199,59,59,.24); }
.vh-screen .vh-badge--open  { background: rgba(206,134,0,.12); color: var(--is-warning); border: 1px solid rgba(206,134,0,.26); }
.vh-screen .vh-badge--done  { background: rgba(31,138,91,.10); color: var(--is-success); border: 1px solid rgba(31,138,91,.22); }

/* ── Row actions — uniform 32px column ───────────────────────── */
.vh-screen .vh-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.vh-screen .vh-iconbtn {
  width: 32px; height: 32px; flex: none; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm);
  background: #fff; color: var(--is-fg-2); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.vh-screen .vh-iconbtn i { font-size: 11px; }
.vh-screen .vh-iconbtn:hover:not(:disabled) { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-3); }
.vh-screen .vh-iconbtn--danger:hover:not(:disabled) { background: rgba(199,59,59,.08); border-color: rgba(199,59,59,.35); color: var(--is-danger); }
.vh-screen .vh-iconbtn--ok { border-color: var(--is-brand-blue-300); color: var(--is-brand-blue-700); }
.vh-screen .vh-iconbtn--ok:hover:not(:disabled) { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; }
.vh-screen .vh-iconbtn:disabled { opacity: .32; cursor: not-allowed; }
.vh-screen .vh-iconbtn:disabled:hover { background: #fff; color: var(--is-fg-2); border-color: var(--is-border-2); }

/* ── Inline add/edit red ─────────────────────────────────────── */
.vh-screen tr.vh-inline > td {
  background: var(--is-brand-blue-100);
  box-shadow: inset 3px 0 0 var(--is-brand-blue);
  padding: 11px 12px; vertical-align: top;
}
.vh-screen tr.vh-inline > td:not(:first-child) { box-shadow: none; }
.vh-screen tr.vh-inline > td.is-actions { vertical-align: middle; }
.vh-screen .vh-il { display: block; margin-bottom: 4px; }
.vh-screen .vh-il__t {
  font: 700 9.5px var(--is-font-sans); text-transform: uppercase;
  letter-spacing: .05em; color: var(--is-brand-blue-700);
  display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; max-width: 100%;
}
/* naziv se skraćuje ellipsisom kad ne stane (tooltip s punim nazivom preko title),
   a zagrada „(opcionalno)"/„(izvedeno)"/hint i „*" ostaju UVIJEK vidljivi */
.vh-screen .vh-il__name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vh-screen .vh-il__t .vh-opt,
.vh-screen .vh-il__t .vh-req,
.vh-screen .vh-il__t .vh-info { flex: none; }
.vh-screen .vh-req { color: var(--is-danger); font-weight: 800; }
.vh-screen .vh-opt { color: var(--is-fg-3); font-weight: 600; text-transform: none; letter-spacing: 0; }
.vh-screen .vh-in {
  width: 100%; height: 32px; padding: 0 9px;
  border: 1px solid var(--is-border-3); border-radius: var(--is-radius-sm);
  background: #fff; font: 400 13px var(--is-font-sans); color: var(--is-fg-1);
}
.vh-screen .vh-in--num { font-family: var(--is-font-mono); text-align: right; }
.vh-screen .vh-in--plate { font-family: var(--is-font-mono); letter-spacing: .04em; text-transform: uppercase; }
.vh-screen textarea.vh-in--area {
  /* prazna je 33px (u liniji s dropdownima/datepickerima), ali ostaje resizable dragom.
     padding-top centriran za jedan red; box-sizing border-box da height uključi padding+border. */
  box-sizing: border-box; height: 33px; min-height: 33px; padding: 7px 9px; resize: vertical;
  line-height: 1.4; font: 400 12.5px var(--is-font-sans);
}
.vh-screen select.vh-in { padding-right: 24px; appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%2376767E' fill='none' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; }
.vh-screen .vh-in:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.vh-screen .vh-in.is-bad { border-color: var(--is-danger); background: rgba(199,59,59,.05); }
.vh-screen .vh-in:disabled { background: var(--is-bg-surface-3); color: var(--is-fg-3); cursor: not-allowed; }
.vh-screen .vh-err {
  display: none; margin-top: 4px; font: 600 10.5px var(--is-font-sans);
  color: var(--is-danger); align-items: center; gap: 4px;
}
.vh-screen .vh-err.is-on { display: flex; }
.vh-screen .vh-derived {
  display: flex; align-items: center; gap: 5px; margin-top: 4px;
  font: 500 10.5px var(--is-font-sans); color: var(--is-brand-blue-700);
}
.vh-screen .vh-inline__badge {
  display: inline-flex; align-items: center; gap: 5px; height: 20px;
  padding: 0 8px; border-radius: 999px; background: var(--is-brand-blue);
  color: #fff; font: 700 9.5px var(--is-font-sans);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px;
  max-width: 100%; overflow: hidden; white-space: nowrap;
}
.vh-screen .vh-inline__badge--edit { background: var(--is-brand-orange-600); }
.vh-screen .vh-inline__hint {
  font: 500 10.5px var(--is-font-sans); color: var(--is-brand-blue-700);
  margin-top: 5px; display: flex; align-items: center; gap: 5px;
  white-space: nowrap; overflow: hidden; max-width: 100%;
}

/* ── Header: faint ↕ always visible + info button placement ──── */
.vh-screen .is-table thead th .is-th i { opacity: .28; }
.vh-screen .is-table thead th .is-th:hover i { opacity: .7; }
.vh-screen .is-table thead th .is-th.is-sorted i { opacity: 1; }
/* aktivan sort → i naziv kolone (label) plav, ne samo strelica (kao HTML mock) */
.vh-screen .is-table thead th .is-th.is-sorted,
.vh-screen .is-table thead th .is-th.is-sorted .is-th__label { color: var(--is-brand-blue-700); }
.vh-screen .is-table thead th { white-space: nowrap; overflow: hidden; }
.vh-screen .is-table thead th .is-th { max-width: 100%; min-width: 0; overflow: hidden; }
.vh-screen .is-table thead th .is-th__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vh-screen .is-table thead th .is-th i,
.vh-screen .is-table thead th .vh-info { flex: none; }

/* ── SfDatePicker / SfDateTimePicker u inline redu — 100% isto kao tab Smještaj (.ac-datepick):
   32px, mono 13px, isti okvir/radius/fokus/greška. Ključno: ikona je pinovana `flex:0 0 auto`
   (kao na Smještaju) pa input dobije maksimum širine → cijeli datum vidljiv. ────────── */
.vh-screen .e-date-wrapper.vh-datepick,
.vh-screen .e-datetime-wrapper.vh-datepick {
    height: 32px !important; min-height: 32px !important; box-sizing: border-box !important;
    display: inline-flex !important; align-items: center !important; width: 100% !important;
    padding: 0 6px 0 9px !important;
    border: 1px solid var(--is-border-3) !important; border-radius: var(--is-radius-sm) !important;
    background: #fff !important; box-shadow: none !important;
    transition: border-color .12s, box-shadow .12s;
}
.vh-screen .e-date-wrapper.vh-datepick::before,
.vh-screen .e-date-wrapper.vh-datepick::after,
.vh-screen .e-datetime-wrapper.vh-datepick::before,
.vh-screen .e-datetime-wrapper.vh-datepick::after { display: none !important; content: none !important; }

.vh-screen .e-date-wrapper.vh-datepick input.e-input,
.vh-screen .e-datetime-wrapper.vh-datepick input.e-input {
    flex: 1 1 auto !important; min-width: 0 !important; width: auto !important;
    height: 30px !important; padding: 0 !important; margin: 0 !important;
    border: 0 !important; background: transparent !important; box-shadow: none !important;
    font: 400 13px var(--is-font-mono) !important; color: var(--is-fg-1) !important;
}
.vh-screen .e-date-wrapper.vh-datepick input.e-input::placeholder,
.vh-screen .e-datetime-wrapper.vh-datepick input.e-input::placeholder { color: var(--is-fg-3); font-family: var(--is-font-sans); }

.vh-screen .e-date-wrapper.vh-datepick .e-input-group-icon,
.vh-screen .e-date-wrapper.vh-datepick .e-date-icon,
.vh-screen .e-datetime-wrapper.vh-datepick .e-input-group-icon,
.vh-screen .e-datetime-wrapper.vh-datepick .e-date-icon {
    flex: 0 0 auto !important; width: auto !important; min-width: 0 !important;
    margin: 0 0 0 4px !important; padding: 0 !important; min-height: 0 !important;
    height: auto !important; font-size: 13px !important; color: var(--is-fg-3) !important;
    background: transparent !important; border: 0 !important;
}
.vh-screen .e-date-wrapper.vh-datepick .e-input-group-icon:hover,
.vh-screen .e-date-wrapper.vh-datepick .e-date-icon:hover,
.vh-screen .e-datetime-wrapper.vh-datepick .e-input-group-icon:hover,
.vh-screen .e-datetime-wrapper.vh-datepick .e-date-icon:hover { color: var(--is-action-blue) !important; background: transparent !important; }

.vh-screen .e-date-wrapper.vh-datepick.e-input-focus,
.vh-screen .e-date-wrapper.vh-datepick:focus-within,
.vh-screen .e-datetime-wrapper.vh-datepick.e-input-focus,
.vh-screen .e-datetime-wrapper.vh-datepick:focus-within {
    border-color: var(--is-action-blue) !important; box-shadow: 0 0 0 3px rgba(0,123,255,.15) !important;
}
.vh-screen .e-date-wrapper.vh-datepick.vh-datepick--bad,
.vh-screen .e-datetime-wrapper.vh-datepick.vh-datepick--bad {
    border-color: var(--is-danger) !important; background: rgba(199,59,59,.05) !important;
}

/* Kvar grid (SfDateTimePicker) — dvije ikone (kalendar + sat): iste visine i vertikalno
   poravnate, malo dalje od desne ivice (+3px) i skroz malo razmaknute međusobno (+2px).
   Vozila (SfDatePicker, jedna ikona, uska 150px kolona) NE diramo. */
.vh-screen .e-datetime-wrapper.vh-datepick { padding-right: 9px !important; }
.vh-screen .e-datetime-wrapper.vh-datepick .e-input-group-icon,
.vh-screen .e-datetime-wrapper.vh-datepick .e-date-icon,
.vh-screen .e-datetime-wrapper.vh-datepick .e-time-icon {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    height: 30px !important; line-height: 1 !important; margin: 0 0 0 6px !important;
}
/* Sat ikona (glyph ide preko ::before/::after) — 16px → 15px, kao kalendar */
.vh-screen .e-datetime-wrapper.vh-datepick .e-input-group-icon.e-time-icon.e-icons::before,
.vh-screen .e-datetime-wrapper.vh-datepick .e-input-group-icon.e-time-icon.e-icons::after,
.vh-screen .e-datetime-wrapper.vh-datepick .e-time-icon::before,
.vh-screen .e-datetime-wrapper.vh-datepick .e-time-icon::after { font-size: 15px !important; }

/* ── Info modal (Kapacitet / Datum popravka / Napomena / U kvaru / Dobavljač→Vozilo /
   Trajanje učitavanja / Prvo dodajte vozilo) — 100% kao mock .vh-modal.
   Renderuje se na dnu page-a (van .vh-screen) → UNSCOPED, ali sve klase su .vh- namespaced.
   z-index iznad app chrome-a (sidebar 1000, topbar) — isti nivo kao ConfirmDeleteDialog. ── */
.vh-modal {
  position: fixed; inset: 0; z-index: 10060;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,28,50,.38);
}
.vh-modal__box {
  width: 500px; max-width: calc(100vw - 40px); background: #fff;
  border-radius: var(--is-radius-md); box-shadow: 0 20px 48px rgba(20,28,50,.28);
  overflow: hidden; font-family: var(--is-font-sans);
}
.vh-modal__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--is-border-1); }
.vh-modal__head > i {
  width: 28px; height: 28px; border-radius: 7px; flex: none;
  background: var(--is-brand-blue-100); color: var(--is-brand-blue-700);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
.vh-modal__head h3 { margin: 0; font: 700 14px var(--is-font-sans); color: var(--is-fg-1); }
.vh-modal__head button { margin-left: auto; border: 0; background: transparent; color: var(--is-fg-3); cursor: pointer; font-size: 14px; line-height: 1; }
.vh-modal__head button:hover { color: var(--is-fg-1); }
.vh-modal__body { padding: 16px 18px; font: 500 13px/1.55 var(--is-font-sans); color: var(--is-fg-2); max-height: 60vh; overflow-y: auto; }
.vh-modal__body p { margin: 0 0 8px; }
.vh-modal__body p:last-child { margin-bottom: 0; }
.vh-modal__body ol { margin: 8px 0 0; padding-left: 20px; }
.vh-modal__body li { margin-bottom: 5px; }
.vh-modal__body b { color: var(--is-fg-1); }
.vh-modal__foot { padding: 12px 18px; border-top: 1px solid var(--is-border-1); display: flex; justify-content: flex-end; gap: 8px; background: var(--is-bg-surface-3); }
.vh-modal__foot .vh-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border-radius: var(--is-radius-sm); font: 600 13px var(--is-font-sans);
  border: 1px solid var(--is-border-3); background: #fff; color: var(--is-fg-1);
  cursor: pointer; white-space: nowrap;
}
.vh-modal__foot .vh-btn__label { overflow: hidden; text-overflow: ellipsis; }
.vh-modal__foot .vh-btn:hover { background: var(--is-bg-surface-3); }

/* ── Toast (100% kao mock .vh-toast) — gore-desno, bijeli, obojeni lijevi rub.
   Renderuje se na page root-u (van .vh-screen) → UNSCOPED, .vh- namespaced.
   z-index iznad modala (ConfirmDeleteDialog 10050, info modal 10060). ── */
.vh-toast {
    position: fixed; top: 18px; right: 18px; z-index: 10070;
    display: flex; align-items: center; gap: 9px;
    padding: 11px 15px; border-radius: var(--is-radius-sm);
    background: #fff; border: 1px solid var(--is-border-2);
    box-shadow: 0 12px 28px rgba(20,28,50,.18);
    font: 600 12.5px var(--is-font-sans); color: var(--is-fg-1); max-width: 400px;
}
.vh-toast i { font-size: 13px; }
.vh-toast--ok { border-left: 3px solid var(--is-success); }
.vh-toast--ok i { color: var(--is-success); }
.vh-toast--err { border-left: 3px solid var(--is-danger); }
.vh-toast--err i { color: var(--is-danger); }

/* ── Pill-overlay dropdown (design-dropdown-pill; isto kao /employeeranking .er-rowms
   i /skillaverages .sa-rowms): nevidljiv SfDropDownList ispod + custom pill iznad.
   Klik prolazi kroz pill; na fokus se otkrije pravo polje sa search-om; popup ide na
   <body> root (nikad odsječen ćelijom). Visina 33px, X dugme, count badge. ── */
.vh-screen .vh-rowms-host { position: relative; width: 100%; height: 33px; }
.vh-screen .vh-rowms-host .e-ddl.vh-rowms-native,
.vh-screen .vh-rowms-host .vh-rowms-native.e-input-group,
.vh-screen .vh-rowms-host .vh-rowms-native.e-input-group.e-control-wrapper {
    position: absolute !important; inset: 0 !important; width: 100% !important;
    height: 33px !important; min-height: 33px !important; opacity: 0 !important;
}
.vh-screen .vh-rowms {
    position: absolute; inset: 0; display: inline-flex; align-items: center; justify-content: space-between;
    gap: 7px; padding: 0 11px; border: 1px solid var(--is-border-2); border-radius: var(--is-radius-sm);
    background: #fff; pointer-events: none; overflow: hidden; transition: background .12s, border-color .12s;
}
.vh-screen .vh-rowms-host:hover .vh-rowms { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }
.vh-screen .vh-rowms__txt { font: 500 13px var(--is-font-sans); color: var(--is-fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vh-screen .vh-rowms__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.vh-screen .vh-rowms__cnt { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; border-radius: 999px; background: var(--is-brand-blue-100); color: var(--is-brand-blue-700); font: 700 10px var(--is-font-mono); flex-shrink: 0; }
.vh-screen .vh-rowms i { font-size: 10px; color: var(--is-fg-3); flex-shrink: 0; }
.vh-screen .vh-rowms__clear { pointer-events: auto; cursor: pointer; font-size: 12px !important; color: var(--is-fg-3); transition: color .12s; }
.vh-screen .vh-rowms__clear:hover { color: var(--is-brand-blue-700); }
.vh-screen .vh-rowms--sel { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }
.vh-screen .vh-rowms--sel .vh-rowms__txt { color: var(--is-brand-blue-700); font-weight: 700; }
.vh-screen .vh-rowms--bad { border-color: var(--is-danger); background: rgba(199,59,59,.05); }
.vh-screen .vh-rowms-host:focus-within .e-ddl.vh-rowms-native { opacity: 1 !important; z-index: 2; }
.vh-screen .vh-rowms-host:focus-within .vh-rowms { display: none !important; }
/* Zaključan (vozilo na postojećem kvaru se ne mijenja) — neutralno, bez hovera/klika */
.vh-screen .vh-rowms--locked,
.vh-screen .vh-rowms-host:hover .vh-rowms--locked { background: var(--is-bg-surface-3); border-color: var(--is-border-2); cursor: default; }
.vh-screen .vh-rowms--locked .vh-rowms__txt { color: var(--is-fg-2); font-weight: 600; }