/* ============================================================
 * PBI 6432 — tab „Smještaj" na naprednom projektu.
 *
 * Screen-specific cosmetics ONLY. Table shell (.is-tablecard,
 * .is-tablescroll, .is-table sticky thead, .is-tableempty,
 * .is-th) comes from the globally-linked insync-tables.css /
 * insync-controls.css. Pill overlay mechanics come from the
 * shared .is-pill / .is-sf-pill (+ additive .is-pill--sm here
 * in insync-controls.css). This file adds only what has no
 * shared equivalent: filter bar, capacity meter, people chips,
 * the inline add/edit row and the dimmed-option template.
 *
 * --is-* tokens are global (insync-tokens.css / colors_and_type.css)
 * — do NOT redefine :root and do NOT add font links.
 * ============================================================ */

.ac-screen { padding: 16px 0 40px; }

/* ── Read-only banner ────────────────────────────────────────── */
.ac-screen .ac-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);
}
.ac-screen .ac-ro i { color: var(--is-action-blue); font-size: 12px; }

/* ── Filter bar ───────────────────────────────────────────────
   Pretraga po nazivu je PRVI element skroz lijevo, „Poništi filtere"
   je unutar bara — HR101BL/CLAUDE.md „Filteri (filter-bar)". ──── */
.ac-screen .ac-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: 14px;
}
.ac-screen .ac-filters__row {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(200px, 1fr) minmax(200px, 1fr) auto;
  gap: 10px; align-items: center;
}
.ac-screen .ac-fld { position: relative; min-width: 0; }
.ac-screen .ac-fld > i.ac-fld__lead {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--is-fg-3); font-size: 13px; pointer-events: none;
}
.ac-screen .ac-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);
}
.ac-screen .ac-fld input::placeholder { color: var(--is-fg-3); }
.ac-screen .ac-fld input:focus {
  outline: none; border-color: var(--is-action-blue);
  box-shadow: 0 0 0 3px rgba(0,123,255,.15);
}
.ac-screen .ac-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;
}
.ac-screen .ac-fld.is-set .ac-fld__clr { display: inline-flex; }
.ac-screen .ac-fld.is-set input { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }
.ac-screen .ac-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);
}
.ac-screen .ac-fld.is-set .ac-fld__cap { color: var(--is-brand-blue-700); }

.ac-screen .ac-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;
}
.ac-screen .ac-reset i { flex-shrink: 0; font-size: 12px; }
.ac-screen .ac-reset:hover:not(:disabled) {
  background: rgba(199,59,59,.06); border-color: rgba(199,59,59,.30); color: var(--is-danger);
}
.ac-screen .ac-reset:disabled { opacity: .38; cursor: not-allowed; }

.ac-screen .ac-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);
}
.ac-screen .ac-chipstrip.is-on { display: flex; }
.ac-screen .ac-chipstrip__label {
  font: 500 11px var(--is-font-sans); color: var(--is-fg-3);
  text-transform: uppercase; letter-spacing: .05em; margin-right: 2px;
}
.ac-screen .ac-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);
}
.ac-screen .ac-fchip b { font-weight: 700; }
.ac-screen .ac-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;
}
.ac-screen .ac-fchip__x:hover { background: rgba(4,148,218,.18); }

/* ── Toolbar bits (inside shared .is-tablecard__toolbar) ─────── */
.ac-screen .ac-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;
}
.ac-screen .ac-toolbar__title i.ac-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;
}
.ac-screen .ac-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;
}
.ac-screen .ac-occ {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px var(--is-font-sans); color: var(--is-fg-3);
}
.ac-screen .ac-occ b { font: 700 12px var(--is-font-mono); color: var(--is-fg-1); }
.ac-screen .ac-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;
}
.ac-screen .ac-loadchip i { font-size: 9px; }
.ac-screen .ac-loadchip b { color: var(--is-fg-2); font-weight: 600; }
.ac-screen .ac-loadchip__sep { color: var(--is-fg-muted); padding: 0 1px; }
.ac-screen .ac-loadchip__info { background: transparent; border: 0; padding: 0 0 0 2px; color: var(--is-fg-3); cursor: pointer; }
.ac-screen .ac-loadchip__info:hover i { color: var(--is-action-blue); }
.ac-screen .ac-info {
  border: 0; background: transparent; padding: 0 0 0 1px; cursor: pointer;
  color: var(--is-fg-muted); font-size: 11px; line-height: 1;
}
.ac-screen .ac-info:hover { color: var(--is-action-blue); }

/* ── Buttons — one line + ellipsis (CLAUDE.md „Buttons"). ────── */
.ac-screen .ac-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;
}
.ac-screen .ac-btn i { flex-shrink: 0; font-size: 12px; }
.ac-screen .ac-btn__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ac-screen .ac-btn--primary { background: var(--is-brand-blue); color: #fff; }
.ac-screen .ac-btn--primary:hover:not(:disabled) { background: var(--is-brand-blue-700); }
.ac-screen .ac-btn--ghost { background: #fff; color: var(--is-fg-1); border-color: var(--is-border-3); }
.ac-screen .ac-btn--ghost:hover:not(:disabled) { background: var(--is-bg-surface-3); }
.ac-screen .ac-btn:disabled { opacity: .40; cursor: not-allowed; }

/* Empty-state button lives inside .is-tableempty (shared). */
.ac-screen .is-tableempty .ac-btn { display: inline-flex; }

/* ── Table cell cosmetics ────────────────────────────────────── */
.ac-screen .ac-idx { font: 500 12px var(--is-font-mono); color: var(--is-fg-muted); }
.ac-screen .ac-name { font: 600 13.5px var(--is-font-sans); color: var(--is-fg-1); }
.ac-screen .ac-addr { display: inline-flex; align-items: center; gap: 7px; color: var(--is-fg-2); font: 500 13px var(--is-font-sans); }
.ac-screen .ac-addr i { font-size: 10px; color: var(--is-fg-3); }
.ac-screen .ac-addr.is-empty, .ac-screen .ac-landlord.is-empty { color: var(--is-fg-muted); font-style: italic; }
.ac-screen .ac-landlord { display: inline-flex; align-items: center; gap: 7px; color: var(--is-fg-2); font: 500 13px var(--is-font-sans); }
.ac-screen .ac-landlord i { font-size: 10px; color: var(--is-fg-3); }
.ac-screen .ac-date { font: 500 12.5px var(--is-font-mono); color: var(--is-fg-2); white-space: nowrap; }

/* Kapacitet = popunjenost (X/Y + traka). */
.ac-screen .ac-cap { display: flex; flex-direction: column; gap: 4px; min-width: 88px; }
.ac-screen .ac-cap__n { font: 600 12.5px var(--is-font-mono); color: var(--is-fg-1); display: inline-flex; align-items: center; gap: 6px; }
.ac-screen .ac-cap__n span { font: 500 11px var(--is-font-sans); color: var(--is-fg-3); }
.ac-screen .ac-cap__bar { height: 4px; border-radius: 999px; background: var(--is-bg-surface-3); overflow: hidden; }
.ac-screen .ac-cap__fill { height: 100%; border-radius: 999px; background: var(--is-brand-blue); width: 0; }
.ac-screen .ac-cap.is-full .ac-cap__fill { background: var(--is-success); }
.ac-screen .ac-cap.is-over .ac-cap__n { color: var(--is-danger); }
.ac-screen .ac-cap.is-over .ac-cap__fill { background: var(--is-danger); }
.ac-screen .ac-warn { color: var(--is-danger); font-size: 10px; }

/* Ukucani chips */
.ac-screen .ac-people { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; max-width: 260px; }
.ac-screen .ac-pchip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 999px; background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1);
  font: 600 11.5px var(--is-font-sans); color: var(--is-fg-2); white-space: nowrap;
}
.ac-screen .ac-pmore {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 999px; background: var(--is-brand-blue-100); border: 1px solid var(--is-brand-blue-200);
  font: 700 11.5px var(--is-font-sans); color: var(--is-brand-blue-700); cursor: pointer;
}
.ac-screen .ac-pmore:hover { background: var(--is-brand-blue-200); }
.ac-screen .ac-pnone { font: 500 12px var(--is-font-sans); color: var(--is-fg-muted); font-style: italic; }

/* ── Row actions — uniform 32px column (mock .ac-iconbtn). ───── */
.ac-screen .ac-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.ac-screen .ac-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;
}
.ac-screen .ac-iconbtn i { font-size: 11px; }
.ac-screen .ac-iconbtn:hover:not(:disabled) { background: var(--is-bg-surface-3); color: var(--is-fg-1); border-color: var(--is-border-3); }
.ac-screen .ac-iconbtn--danger:hover:not(:disabled) { background: rgba(199,59,59,.08); border-color: rgba(199,59,59,.35); color: var(--is-danger); }
.ac-screen .ac-iconbtn--ok { border-color: var(--is-brand-blue-300); color: var(--is-brand-blue-700); }
.ac-screen .ac-iconbtn--ok:hover:not(:disabled) { background: var(--is-brand-blue); border-color: var(--is-brand-blue); color: #fff; }
.ac-screen .ac-iconbtn:disabled { opacity: .32; cursor: not-allowed; }

/* ── Inline add / edit red ───────────────────────────────────── */
.ac-screen tr.ac-inline > td {
  background: var(--is-brand-blue-100);
  box-shadow: inset 3px 0 0 var(--is-brand-blue);
  padding: 11px 12px; vertical-align: top; overflow: hidden;
}
.ac-screen tr.ac-inline > td:not(:first-child) { box-shadow: none; }
.ac-screen .ac-il { display: block; margin-bottom: 4px; }
.ac-screen .ac-il__t {
  font: 700 9.5px var(--is-font-sans); text-transform: uppercase;
  letter-spacing: .05em; color: var(--is-brand-blue-700);
  display: inline-flex; align-items: center; gap: 4px;
}
.ac-screen .ac-req { color: var(--is-danger); font-weight: 800; }
.ac-screen .ac-opt { color: var(--is-fg-3); font-weight: 600; text-transform: none; letter-spacing: 0; }
.ac-screen .ac-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);
}
.ac-screen .ac-in--num { font-family: var(--is-font-mono); text-align: right; }
.ac-screen .ac-in:focus { outline: none; border-color: var(--is-action-blue); box-shadow: 0 0 0 3px rgba(0,123,255,.15); }
.ac-screen .ac-in.is-bad { border-color: var(--is-danger); background: rgba(199,59,59,.05); }
.ac-screen .ac-err {
  display: none; margin-top: 4px; font: 600 10.5px var(--is-font-sans);
  color: var(--is-danger); align-items: center; gap: 4px;
}
.ac-screen .ac-err.is-on { display: flex; }
.ac-screen .ac-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;
}
.ac-screen .ac-inline__badge--edit { background: var(--is-brand-orange-600); }
.ac-screen .ac-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;
}

/* Mjerač mjesta u inline redu */
.ac-screen .ac-meter {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font: 600 10.5px var(--is-font-sans); color: var(--is-brand-blue-700);
}
.ac-screen .ac-meter b { font: 700 11px var(--is-font-mono); }
.ac-screen .ac-meter__bar { flex: 1; height: 3px; border-radius: 999px; background: rgba(4,148,218,.20); overflow: hidden; min-width: 40px; }
.ac-screen .ac-meter__fill { height: 100%; border-radius: 999px; background: var(--is-brand-blue); width: 0; }
.ac-screen .ac-meter.is-full { color: var(--is-success); }
.ac-screen .ac-meter.is-full .ac-meter__fill { background: var(--is-success); }
.ac-screen .ac-meter.is-full .ac-meter__bar { background: rgba(31,138,91,.18); }
.ac-screen .ac-meter.is-over { color: var(--is-danger); }
.ac-screen .ac-meter.is-over .ac-meter__fill { background: var(--is-danger); }
.ac-screen .ac-meter.is-over .ac-meter__bar { background: rgba(199,59,59,.18); }

/* ── „Ukucani" dropdown — pill-overlay standard (design-dropdown-pill.md,
   isto kao /employeeranking .er-rowms i /skillaverages .sa-rowms). Native
   SfMultiSelect je proziran preko cijele površine (hvata klik, popup ide na
   <body>), a naš pill se crta iznad sa pointer-events:none. Visina 33px. ── */
.ac-screen .ac-rowms-host { position: relative; width: 100%; height: 33px; }

.ac-screen .ac-rowms-host .e-multiselect.ac-rowms-native,
.ac-screen .ac-rowms-host .ac-rowms-native.e-input-group,
.ac-screen .ac-rowms-host .ac-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;
}

.ac-screen .ac-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;
}
.ac-screen .ac-rowms-host:hover .ac-rowms { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }

.ac-screen .ac-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;
}
.ac-screen .ac-rowms__right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ac-screen .ac-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;
}
.ac-screen .ac-rowms i { font-size: 10px; color: var(--is-fg-3); flex-shrink: 0; }

.ac-screen .ac-rowms--sel { border-color: var(--is-brand-blue-300); background: var(--is-brand-blue-100); }
.ac-screen .ac-rowms--sel .ac-rowms__txt { color: var(--is-brand-blue-700); font-weight: 700; }

.ac-screen .ac-rowms-host:focus-within .e-multiselect.ac-rowms-native { opacity: 1 !important; z-index: 2; }
.ac-screen .ac-rowms-host:focus-within .ac-rowms { display: none !important; }

/* Confirm/Reject u inline redu — vertikalno centrirano u redu (ne na vrhu). */
.ac-screen tr.ac-inline > td.is-actions { vertical-align: middle; }

/* ── SfDatePicker u inline redu → izgled 100% kao mock .ac-in--date:
   32px visina, mono font, isti okvir/radius/fokus/greška. Kontrola ostaje
   Syncfusion; samo se tema override-uje na wrapperu (.ac-datepick). ── */
.ac-screen .e-date-wrapper.ac-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;
}
/* ubij Syncfusion underline/animaciju ako je tema koristi */
.ac-screen .e-date-wrapper.ac-datepick::before,
.ac-screen .e-date-wrapper.ac-datepick::after { display: none !important; content: none !important; }

.ac-screen .e-date-wrapper.ac-datepick input.e-input,
.ac-screen .e-date-wrapper.ac-datepick .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;
}
.ac-screen .e-date-wrapper.ac-datepick .e-date-icon { flex: 0 0 auto !important; }
.ac-screen .e-date-wrapper.ac-datepick input.e-input::placeholder { color: var(--is-fg-3); font-family: var(--is-font-sans); }

.ac-screen .e-date-wrapper.ac-datepick .e-input-group-icon.e-date-icon,
.ac-screen .e-date-wrapper.ac-datepick .e-date-icon {
    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;
}
.ac-screen .e-date-wrapper.ac-datepick .e-date-icon:hover { color: var(--is-action-blue) !important; background: transparent !important; }

/* fokus: plavi rub + soft glow, kao .ac-in:focus */
.ac-screen .e-date-wrapper.ac-datepick.e-input-focus,
.ac-screen .e-date-wrapper.ac-datepick:focus-within {
    border-color: var(--is-action-blue) !important;
    box-shadow: 0 0 0 3px rgba(0,123,255,.15) !important;
}

/* greška (raspon datuma nevažeći) → crveni rub + blago crvena podloga */
.ac-screen .e-date-wrapper.ac-datepick.ac-datepick--bad {
    border-color: var(--is-danger) !important;
    background: rgba(199,59,59,.05) !important;
}

/* ── Header sort icon: faint ↕ always visible (matches mock .ac-th__ar).
   Shared .is-th hides it until hover; on this screen show it faintly. ── */
.ac-screen .is-table thead th .is-th i { opacity: .28; }
.ac-screen .is-table thead th .is-th:hover i { opacity: .7; }
.ac-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) */
.ac-screen .is-table thead th .is-th.is-sorted,
.ac-screen .is-table thead th .is-th.is-sorted .is-th__label { color: var(--is-brand-blue-700); }

/* Header info button sits next to the sortable label. */
.ac-screen .is-table thead th { white-space: nowrap; }


/* ── Empty-state CTA icon: the shared .is-tableempty i rule greys the icon
   and adds margin — reset it inside the button so the "+" is white and flush. ── */
.ac-screen .is-tableempty .ac-btn i { margin-bottom: 0 !important; color: inherit; }

/* ── Info modal (Zauzeta mjesta / Kapacitet / Ukucani / Trajanje učitavanja).
   Rendered at page root — unscoped, but all classes are .ac- namespaced. ── */
/* z-index iznad app chrome-a (sidebar 1000, gornja traka) da backdrop zasjeni
   CIJELU stranicu uključujući gornju traku — isti nivo kao ConfirmDeleteDialog. */
.ac-modal { position: fixed; inset: 0; z-index: 10060; display: flex; align-items: center; justify-content: center; background: rgba(20,28,50,.38); }
.ac-modal__box { width: 480px; 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); }
.ac-modal__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--is-border-1); }
.ac-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; }
.ac-modal__head h3 { margin: 0; font: 700 14px var(--is-font-sans); color: var(--is-fg-1); }
.ac-modal__head button { margin-left: auto; border: 0; background: transparent; color: var(--is-fg-3); cursor: pointer; font-size: 14px; line-height: 1; }
.ac-modal__head button:hover { color: var(--is-fg-1); }
.ac-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; }
.ac-modal__body p { margin: 0 0 8px; }
.ac-modal__body p:last-child { margin-bottom: 0; }
.ac-modal__body ol { margin: 8px 0 0; padding-left: 20px; }
.ac-modal__body li { margin-bottom: 5px; }
.ac-modal__body b { color: var(--is-fg-1); }
.ac-modal__body table { width: 100%; border-collapse: collapse; }
.ac-modal__body th { text-align: left; font: 600 10.5px var(--is-font-sans); text-transform: uppercase; letter-spacing: .05em; color: var(--is-fg-3); padding: 6px 8px; border-bottom: 1px solid var(--is-border-1); }
.ac-modal__body td { padding: 8px; font: 500 13px var(--is-font-sans); color: var(--is-fg-1); border-bottom: 1px solid var(--is-border-1); }
.ac-modal__body td.n { font-family: var(--is-font-mono); color: var(--is-fg-3); width: 34px; }
/* Popup tabela — redovi se NE posive na hover (kao na mock-u); poništava globalni tr:hover. */
.ac-modal__body table tr:hover,
.ac-modal__body table tr:hover td { background: transparent !important; }
.ac-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); }
.ac-modal__foot .ac-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; }
.ac-modal__foot .ac-btn__label { overflow: hidden; text-overflow: ellipsis; }
.ac-modal__foot .ac-btn:hover { background: var(--is-bg-surface-3); }

/* ── Toast (100% kao mock .ac-toast) — gore-desno, bijeli, lijevi obojeni rub.
   Rendered at page root — unscoped, .ac- namespaced. z-index iznad modala. ── */
.ac-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: 380px;
}
.ac-toast i { font-size: 13px; }
.ac-toast--ok { border-left: 3px solid var(--is-success); }
.ac-toast--ok i { color: var(--is-success); }
.ac-toast--err { border-left: 3px solid var(--is-danger); }
.ac-toast--err i { color: var(--is-danger); }

/* ── „Ukucani" popup opcije (Syncfusion, na <body> root pa unscoped) — 100% kao mock:
   checkbox + ime + badge razloga u JEDNOM redu; ime ellipsis; zauzeti = not-allowed. ── */

/* List item mora biti flex da checkbox i naš template stanu u isti red
   (naš template je <div>, inače bi ime palo ispod checkboxa). */
.e-list-item:has(.ac-empopt) { display: flex !important; align-items: center; gap: 8px; }
.e-list-item:has(.ac-empopt) .e-checkbox-wrapper { flex: 0 0 auto; }

.ac-empopt { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; font: 500 12.5px var(--is-font-sans); color: var(--is-fg-1); }
.ac-empopt.is-dim { color: var(--is-fg-muted); }
.ac-empopt__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-empopt__why {
  flex: 0 0 auto; font: 600 9.5px var(--is-font-mono); color: var(--is-fg-muted);
  background: var(--is-bg-surface-3); border: 1px solid var(--is-border-1);
  padding: 1px 6px; border-radius: 999px; white-space: nowrap;
}

/* zauzeti red = not-allowed cursor, bez hover highlighta (kao mock .ac-ms__opt.is-blocked) */
.e-list-item:has(.ac-empopt.is-dim) { cursor: not-allowed !important; }
.e-list-item:has(.ac-empopt.is-dim):hover,
.e-list-item.e-hover:has(.ac-empopt.is-dim) { background: transparent !important; }

/* ── ELLIPSIS na cijelom gridu — ništa se ne prelama u dva reda; hover title = pun tekst.
   Namjerno na dnu fajla da pobijedi ranije definicije istih selektora. ─────── */

/* Header labele (IsSortHeader + manualni headeri) */
.ac-screen .is-table thead th { overflow: hidden; }
.ac-screen .is-table thead th .is-th { max-width: 100%; min-width: 0; overflow: hidden; }
.ac-screen .is-table thead th .is-th__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ac-screen .is-table thead th .is-th i,
.ac-screen .is-table thead th .ac-info { flex: none; }

/* Ćelije — jedan red + ellipsis */
.ac-screen .ac-name,
.ac-screen .ac-date { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }

.ac-screen .ac-addr,
.ac-screen .ac-landlord { max-width: 100%; overflow: hidden; }
.ac-screen .ac-addr i,
.ac-screen .ac-landlord i { flex: none; }
.ac-screen .ac-addr .ac-txt,
.ac-screen .ac-landlord .ac-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Ukucani chips — jedan red; chip se skraćuje; „+N" uvijek vidljiv. */
.ac-screen .ac-people { flex-wrap: nowrap; overflow: hidden; max-width: 100%; }
.ac-screen .ac-pchip { min-width: 0; max-width: 130px; }
.ac-screen .ac-pchip .ac-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; display: block; }
.ac-screen .ac-pmore { flex: none; }

/* Inline badge/hint — nikad dva reda; stane u proširenu prvu kolonu. */
.ac-screen .ac-inline__badge { max-width: 100%; overflow: hidden; white-space: nowrap; }
.ac-screen .ac-inline__hint { white-space: nowrap; overflow: hidden; max-width: 100%; }