/*
 * Novatec Dashboard 1.16.94 — authoritative portal UI layer
 *
 * The legacy stylesheet still contains the component-specific geometry that
 * the JavaScript renderers depend on. This final layer owns the visual system:
 * spacing, type, surfaces, fields, actions, boundaries and responsive rhythm.
 * It intentionally changes presentation only; IDs, data attributes, DOM order
 * and interaction hooks remain untouched.
 */

:root {
  /* Pozadina aplikacije. Vrijednost je odabrana tako da razlika prema bijeloj
     plohi ostane 26 stupnjeva, koliko traži dizajnerski test — kontrast je
     pojačan bez spuštanja postojećeg pravila. */
  --canvas:#e2e4e5;
  --surface:#ffffff;
  --surface-raised:#ffffff;
  --surface-sunken:#f7f9fa;
  --surface-subtle:#fafbfc;
  --surface-muted:#f4f7f8;
  --ink:#17232b;
  --text:#17232b;
  --ink-2:#293840;
  --muted:#65747d;
  --line:#d6dfe4;
  --line-soft:#e7ecef;
  --line-strong:#aebbc3;
  --red:#c92736;
  --red-dark:#a91f2c;
  --action:#0f766e;
  --action-dark:#0b5e58;
  --act:#0f766e;
  --act-dark:#0b5e58;
  --green:#157347;
  --amber:#946200;
  --danger:#b42318;
  --client-bg:#eef6fc;
  --client-line:#6e9fc6;
  --client-ink:#285a82;
  --section-header-bg:#1d4752;
  --section-header-bg-soft:#1d4752;
  --section-header-bg-end:#1d4752;
  --section-header-hover:#255765;
  --section-header-ink:#f7fbfc;
  --section-header-subtle:#d3e2e6;
  --internal-bg:#fff8e8;
  --internal-line:#c9952e;
  --internal-ink:#76550e;
  --radius:6px;
  --radius-sm:4px;
  --radius-pill:999px;
  --soft:var(--canvas);
  --soft-2:var(--surface-sunken);
  --white:#fff;
  --shadow:none;
  --shadow-modal:0 24px 70px rgba(16,27,34,.28);
  font-family:'DM Sans',Inter,"Segoe UI",Roboto,Arial,sans-serif;
}

html { color-scheme:light; }
body,
.app-main {
  background:var(--canvas);
  color:var(--ink);
}
body {
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,
input,
select,
textarea { font-family:inherit; }

/* Login uses the same restrained palette and control scale as the portal. */
.login-screen {
  grid-template-columns:minmax(380px,.9fr) minmax(440px,1.1fr);
  background:var(--surface);
}
.login-brand-panel {
  padding:clamp(54px,8vh,96px) clamp(48px,7vw,110px);
  background:#10262c;
}
.login-brand-panel::after { display:none; }
.login-brand-panel::before { opacity:.09; }
.login-brand-panel .brand-kicker { margin-top:clamp(80px,14vh,150px); color:#9ccac4; }
.login-brand-panel h1 {
  max-width:620px;
  margin:22px 0;
  font-size:clamp(38px,4vw,62px);
  line-height:1.07;
}
.login-brand-panel p { max-width:600px; color:#c9d5d8; line-height:1.7; }
.brand-lines { margin-top:40px; }
.login-form-panel { padding:clamp(38px,7vw,104px); background:#fff; }
.login-card { width:min(460px,100%); border:0; border-radius:0; box-shadow:none; }
.login-card h2 { font-size:34px; }
.login-card > p { font-size:14px; line-height:1.65; }

/* Application shell ------------------------------------------------------ */
.app-shell { grid-template-columns:244px minmax(0,1fr); }
.sidebar {
  padding:20px 14px 16px;
  border-right:1px solid #263b41;
  background:#10262c;
}
.sidebar-brand {
  padding:2px 10px 19px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.sidebar-brand > span { color:#9fb0b5; }
.nav-search-wrap { margin:16px 4px 8px; }
.nav-search-wrap label { color:#a9b8bc; font-size:9px; }
.nav-search-wrap input {
  height:39px;
  border-color:#3b5056;
  border-radius:var(--radius-sm);
  background:#19343b;
  color:#fff;
  font-size:12px;
}
.nav-search-wrap input:focus {
  border-color:#79aaa5;
  box-shadow:0 0 0 3px rgba(121,170,165,.17);
}
.nav-list {
  flex:1;
  min-height:0;
  gap:0;
  padding:4px 2px 14px;
  overflow-y:auto;
}
.nav-group {
  margin-top:8px;
  padding:3px 0 8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-group-label {
  min-height:24px;
  padding:4px 10px;
  color:#879ba0;
  font-size:9px;
}
.nav-list button,
.nav-list button.nav-child {
  min-height:38px;
  margin:1px 0;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  padding:8px 10px;
  color:#ced8da;
  font-size:12.5px;
  font-weight:650;
}
.nav-list button:hover { background:#1b3940; color:#fff; }
.nav-list button.active {
  border-color:#9bc5c0;
  background:#e7f2f0;
  color:#143d3a;
  box-shadow:none;
}
.nav-list button.nav-child {
  width:calc(100% - 12px);
  margin-left:12px;
  border-left:0;
  padding-left:10px;
}
.nav-list button.nav-child.active { border-left:1px solid #9bc5c0; }
.sidebar-footer { border-top-color:rgba(255,255,255,.13); }
.sidebar-version { color:#8fa1a6; }

.topbar {
  height:72px;
  padding:11px clamp(24px,3vw,52px) 10px;
  border-bottom:1px solid var(--line-strong);
  background:rgba(255,255,255,.97);
  box-shadow:none;
  backdrop-filter:none;
}
.topbar h1 { margin:2px 0 0; font-size:23px; line-height:1.15; }
.topbar .eyebrow { font-size:10px; }
.user-chip { border-left-color:var(--line); }
.user-chip > span { background:#17343b; }
.user-chip strong { font-size:12px; }
.user-chip small { font-size:10px; }

.content {
  width:100%;
  max-width:1840px;
  margin:0 auto;
  padding:34px clamp(24px,3vw,52px) 72px;
}

/* Every view starts with the same calm, readable introduction. */
.page-actions {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:18px 32px;
  width:100%;
  margin:0 0 26px;
  padding:4px 0 20px;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.page-actions > p {
  max-width:82ch;
  margin:0;
  padding:0;
  color:#53656f;
  font-size:14px;
  line-height:1.7;
  overflow-wrap:anywhere;
}
.page-actions > .action-group {
  align-items:center;
  justify-content:flex-end;
}
.page-actions.actions-only { display:flex; justify-content:flex-end; }

/* Type and controls ------------------------------------------------------- */
.eyebrow { color:var(--red); }
label {
  margin-bottom:18px;
  color:#354750;
  font-size:13px;
  font-weight:700;
  line-height:1.4;
}
input,
select,
textarea {
  margin-top:7px;
  border:1px solid #b9c6cd;
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--ink);
  padding:10px 12px;
  font-size:14px;
  line-height:1.4;
  box-shadow:none;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
select { min-height:42px; }
textarea { min-height:104px; resize:vertical; }
input::placeholder,
textarea::placeholder { color:#87949b; opacity:1; }
input:hover,
select:hover,
textarea:hover { border-color:#91a2ab; }
input:focus,
select:focus,
textarea:focus {
  border-color:var(--action);
  outline:3px solid rgba(15,118,110,.16);
  outline-offset:0;
  box-shadow:none;
}
input:disabled,
select:disabled,
textarea:disabled { background:#eef2f4; color:#596970; }
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline:3px solid rgba(15,118,110,.28);
  outline-offset:2px;
}

.btn,
.icon-btn {
  min-height:42px;
  border-radius:var(--radius-sm);
  padding:9px 14px;
  font-size:13px;
  line-height:1.2;
  box-shadow:none;
  transform:none;
}
.btn:hover { transform:none; }
.btn-primary {
  border-color:var(--action);
  background:var(--action);
  color:#fff;
}
.btn-primary:hover { border-color:var(--action-dark); background:var(--action-dark); }
.btn-secondary,
.offer-upload-row .btn,
.offer-shared-upload-item .btn {
  border:1px solid #aebbc3;
  background:#fff;
  color:#23343d;
}
.btn-secondary:hover,
.offer-upload-row .btn:hover,
.offer-shared-upload-item .btn:hover {
  border-color:#71848e;
  background:#f4f7f8;
  color:#18272f;
}
.btn-secondary:disabled { border-color:#ccd5da; background:#eef2f4; color:#74828a; }
.btn-success { border-color:var(--green); background:var(--green); color:#fff; }
.btn-danger { border-color:#e4b4af; background:#fff4f3; color:var(--danger); }
/* Isti crvenkasti izgled kao „Obriši nacrt”, ali zasebna klasa — zatvaranje
   nije destruktivna radnja, pa se dvije namjene smiju razići u budućnosti. */
.btn-close { border-color:#e4b4af; background:#fff4f3; color:var(--danger); }
.btn-close:hover { border-color:#d08b84; background:#ffeceb; color:var(--danger); }
.btn-close:disabled { border-color:#ead3d1; background:#fbf5f5; color:#b9908c; }
.btn-small { min-height:34px; padding:7px 10px; font-size:12px; }
.icon-btn { min-height:34px; padding:6px 9px; background:#fff; }
.link-button { color:#58707b; }
.action-group { gap:9px; }

/* Jednoredne kontrole dijele istu fizičku visinu. Naslijeđeni `.filter-field`
   postavljao je marginu samo inputu, dok je select zadržavao gornji odmak iz
   osnovnog obrasca; zato su Ticketi i Inventar izgledali kao dva retka. */
.toolbar-row .filter-field {
  min-height:42px;
  margin:0;
}
.toolbar-row .filter-field > input,
.toolbar-row .filter-field > select {
  box-sizing:border-box;
  width:145px;
  height:42px;
  min-height:42px;
  margin:0;
  padding:8px 10px;
}
.toolbar-row > .readonly-label { min-height:42px; }

:is(.offer-toolbar,.work-order-filters,.purchase-order-filters,.supplier-filters,.svc-filters,.audit-filters,.licensed-software-filter,.work-order-report-controls,.article-flow-toolbar)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),select) {
  box-sizing:border-box;
  height:42px;
  min-height:42px;
}
.offer-bulk > select,
.offer-bulk > .btn,
.work-order-report-controls > .btn,
.article-flow-toolbar > .btn { height:42px; min-height:42px; }

/* Surfaces: one boundary per independent unit ---------------------------- */
.card,
.settings-card,
.license-card,
.mapping-panel,
.editor-shell,
.modal-card,
.loading-card,
.stat-card,
.contract-tile {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  box-shadow:none;
}
.card { overflow:hidden; }
.card + .card { margin-top:20px; }
.card-header {
  align-items:flex-start;
  gap:18px;
  padding:20px 22px 18px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.card > .card-header,
.editor-shell > .editor-header {
  border-bottom:3px solid var(--line);
  background:var(--section-header-bg);
  box-shadow:none;
}
.card-header h2,
.card-header h3 { font-size:17px; line-height:1.3; }
.card > .card-header h2,
.card > .card-header h3,
.editor-shell > .editor-header h2 { color:var(--section-header-ink); font-weight:780; }
.card-header p {
  max-width:88ch;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.card > .card-header p,
.editor-shell > .editor-header p { color:var(--section-header-subtle); }
.card > summary.card-header {
  transition:background-color .16s ease,border-color .16s ease;
}
.card > summary.card-header:hover {
  background:var(--section-header-hover);
}
.card > summary.card-header:focus-visible {
  outline:3px solid rgba(43,123,159,.28);
  outline-offset:-3px;
}
.card-body { padding:22px; background:#fff; }
.card-body.flush { padding:0; }

/* Software scope and program picker are peer panels, not a 2:1 master/detail
   layout. Stretching both grid items also removes the legacy top offset from
   `.card + .card`, so their outer edges stay exactly aligned. */
.software-layout {
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.software-layout > .card {
  display:flex;
  min-width:0;
  height:100%;
  flex-direction:column;
}
.software-layout > .card + .card { margin-top:0; }
.software-layout > .card > .card-body { flex:1 1 auto; }

.licensed-software-filter {
  display:grid;
  grid-template-columns:repeat(3,minmax(180px,1fr));
  gap:14px 16px;
  margin:0 0 18px;
  padding:16px;
  border:1px solid #bed4df;
  border-radius:var(--radius);
  background:#f2f8fb;
}
.licensed-software-filter label {
  display:grid;
  gap:7px;
  color:var(--ink-2);
  font-size:12px;
  font-weight:700;
}
.licensed-software-filter-summary {
  grid-column:1/-1;
  margin:0;
  color:#47636f;
  font-size:12px;
  font-weight:700;
}
.licensed-software-results {
  display:grid;
  gap:18px;
}
.licensed-software-results > .card + .card { margin-top:0; }
.licensed-software-card .card-header { align-items:center; }
.licensed-software-table { min-width:1260px; }
.licensed-software-table td { vertical-align:top; }
.licensed-software-table .cell-sub {
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
}
.licensed-software-table .license-key {
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.licensed-software-asset-link {
  display:inline;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:#176b96;
  font:inherit;
  font-weight:800;
  line-height:inherit;
  text-align:left;
  text-decoration:underline;
  text-decoration-color:#8bbbd2;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  cursor:pointer;
}
.licensed-software-asset-link:hover { color:#0f5277; text-decoration-color:currentColor; }
.licensed-software-table .expiry-expired td:first-child { box-shadow:inset 3px 0 0 var(--danger); }
.licensed-software-table .expiry-expiring td:first-child { box-shadow:inset 3px 0 0 var(--amber); }

/* A nested group is separated by rhythm and a rule, never another card. */
.card .card,
.card .duplicate-panel,
.card-body .card,
.modal-card .card {
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.card .card + .card,
.card-body .card + .card {
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.card .card > .card-header,
.card-body .card > .card-header {
  padding:0 0 12px;
  border:0;
  background:transparent;
  box-shadow:none;
}

/* Nested cards sit on a light surface, so they must not inherit the light text
   used by top-level dark section headers. */
.card .card > .card-header h2,
.card .card > .card-header h3,
.card-body .card > .card-header h2,
.card-body .card > .card-header h3 { color:var(--ink); }
.card .card > .card-header p,
.card-body .card > .card-header p { color:var(--muted); }

.editor-shell { margin-top:22px; overflow:hidden; }
.editor-header,
.editor-body {
  border:0;
  border-radius:0;
  background:#fff;
  box-shadow:none;
}
.editor-header {
  padding:21px 24px 19px;
  border-bottom:1px solid var(--line);
}
.editor-header h2 { font-size:19px; }
.editor-header p { margin-top:6px; font-size:13px; line-height:1.5; }
.editor-body { padding:0 24px 24px; }
.editor-body > .form-section,
.form-section {
  margin:0;
  padding:24px 0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.editor-body > .form-section:last-of-type,
.form-section:last-child { border-bottom:0; }
.form-section h3 {
  margin:0 0 16px;
  color:var(--ink);
  font-size:15px;
  letter-spacing:0;
}
.form-section > p:first-of-type { margin:-8px 0 18px; font-size:13px; line-height:1.6; }
.form-grid { gap:2px 20px; }
.form-grid.three { gap:2px 18px; }

.section-title {
  margin:28px 0 14px;
  padding-top:22px;
  border-top:1px solid var(--line);
  color:#445761;
  font-size:13px;
  letter-spacing:.06em;
  line-height:1.4;
}
.card-body > .section-title:first-child,
.section-title:first-child { margin-top:0; padding-top:0; border-top:0; }

/* Flat choice and detail rows. */
.check-card,
.switch-line,
.rbac-role-card,
.accounting-recipient-group,
.client-extra-contact,
.work-order-section,
.work-order-add-box,
.work-order-log-editor,
.work-order-image-uploader,
.linked-business-card,
.ticket-preparation-panel,
.ticket-work-order-panel,
.ticket-asset-link-panel,
.article-current-details,
.article-metadata-editor {
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.check-card,
.switch-line {
  margin:0;
  padding:12px 0;
  border-bottom:1px solid var(--line-soft);
}
.checkbox-grid { gap:0 22px; }
.rbac-role-card,
.accounting-recipient-group,
.client-extra-contact {
  padding:18px 0;
  border-top:1px solid var(--line);
}
.client-extra-contacts,
.accounting-recipient-groups,
.rbac-role-grid { gap:0; }

.rbac-role-card-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:10px;
}
.rbac-role-card-head > div { min-width:0; }
.rbac-role-card-head .btn { flex:0 0 auto; }
.oidc-group-field { min-width:0; }
.oidc-group-field > label { display:flex; min-width:0; flex-direction:column; }
.oidc-group-field > .btn { margin-top:8px; }

.oidc-group-picker-backdrop { z-index:220; }
.modal-card.oidc-group-picker-modal {
  display:flex;
  width:min(720px,100%);
  max-height:min(820px,92vh);
  flex-direction:column;
  padding:0;
  overflow:hidden;
}
.oidc-group-picker-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:22px 24px 18px;
  border-bottom:1px solid var(--line);
}
.oidc-group-picker-head > div { min-width:0; }
.oidc-group-picker-head small {
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.oidc-group-picker-head h2 { margin:0; font-size:24px; line-height:1.2; }
.oidc-group-picker-head p { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.oidc-group-picker-body { min-height:0; padding:18px 24px; overflow:auto; }
.oidc-group-picker-search { display:flex; flex-direction:column; gap:6px; margin:16px 0 10px; }
.oidc-group-picker-search input { margin:0; }
.oidc-group-option-list { border-top:1px solid var(--line); }
.oidc-group-option {
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  min-height:48px;
  margin:0;
  padding:9px 2px;
  border-bottom:1px solid var(--line-soft);
  cursor:pointer;
}
.oidc-group-option:hover { background:var(--surface-muted); }
.oidc-group-option > input { width:16px; height:16px; margin:0; }
.oidc-group-option-name { min-width:0; font-size:13px; font-weight:750; overflow-wrap:anywhere; }
.oidc-group-option-badges { display:flex; justify-content:flex-end; gap:5px; flex-wrap:wrap; }
.oidc-group-empty { padding:28px 8px; color:var(--muted); font-size:12px; line-height:1.55; text-align:center; }
.oidc-group-picker-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 24px;
  border-top:1px solid var(--line);
  background:var(--surface-sunken);
  color:var(--muted);
  font-size:11px;
}
.oidc-group-picker-foot .modal-actions { margin:0; }
@media(max-width:680px) {
  .rbac-role-card-head,
  .oidc-group-picker-foot { align-items:stretch; flex-direction:column; }
  .rbac-role-card-head .btn,
  .oidc-group-picker-foot .btn { width:100%; }
  .oidc-group-option { grid-template-columns:20px minmax(0,1fr); }
  .oidc-group-option-badges { grid-column:2; justify-content:flex-start; }
}

.work-order-section {
  margin-top:0;
  padding:22px 0;
  border-top:1px solid var(--line);
}
.work-order-section:first-child { padding-top:0; border-top:0; }
.work-order-add-box,
.work-order-log-editor,
.work-order-image-uploader,
.linked-business-card {
  margin-top:14px;
  padding:16px 0 0;
  border-top:1px solid var(--line-soft);
}
.ticket-preparation-panel,
.ticket-work-order-panel,
.ticket-asset-link-panel {
  margin:18px 0;
  padding:18px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* KPIs and small data groups --------------------------------------------- */
.stats-grid,
.stats-grid.four,
.work-order-kpis,
.metrics-stats {
  grid-template-columns:repeat(auto-fit,minmax(188px,1fr));
  gap:14px;
  margin-bottom:20px;
}
.stat-card {
  min-height:118px;
  min-width:0;
  padding:18px 20px;
  border-top:3px solid var(--line-strong);
  overflow:hidden;
}
.stat-card::before { content:none!important; display:none!important; }
.stat-card.accent { border-top-color:var(--action); }
.stat-card.positive { border-top-color:var(--green); }
.stat-card.negative { border-top-color:var(--danger); }
.stat-label { color:#5e7079; font-size:11px; line-height:1.4; }
.stat-value { margin:11px 0 5px; font-size:28px; line-height:1.1; overflow-wrap:anywhere; }
.stat-sub { color:var(--muted); font-size:12px; line-height:1.45; }
.card .stat-card {
  min-height:0;
  padding:14px 0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
.metrics-stats .stat-card { padding:14px 0; }
.metrics-stats .stat-value { margin:8px 0 4px; font-size:24px; }

/* Pregled: oba retka koriste isti stupčani raster. Graf zadržava vlastiti
   omjer stranica umjesto fiksne visine koja je na užem stupcu stvarala veliki
   prazan pojas, a kartice ostaju poravnate po vrhu i dnu. */
.dashboard-overview-grid,
.dashboard-ranking-grid {
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr);
  align-items:stretch;
}
.dashboard-overview-grid > .card,
.dashboard-ranking-grid > .card {
  display:flex;
  min-width:0;
  height:100%;
  flex-direction:column;
}
.dashboard-overview-grid > .card + .card,
.dashboard-ranking-grid > .card + .card { margin-top:0; }
.dashboard-overview-grid > .card > .card-body,
.dashboard-ranking-grid > .card > .card-body { flex:1; }
.dashboard-chart-card .chart-wrap {
  display:flex;
  min-height:0;
  flex-direction:column;
  justify-content:flex-start;
}
.dashboard-chart-card .bar-chart {
  display:block;
  width:100%;
  height:auto;
}
.dashboard-chart-card .legend { margin-top:10px; }
.dashboard-chart-card .chart-empty {
  height:auto;
  min-height:180px;
}

/* Inventar i podrška: sažeci su stvarne kontrole, ne klik na generički div. */
.asset-strip .asset-summary-links {
  margin:0;
  border:0;
  border-top:1px solid var(--line);
}
.asset-summary-links > .asset-summary-link {
  appearance:none;
  position:relative;
  min-width:0;
  padding:16px 18px;
  border:0;
  border-right:1px solid var(--line-soft);
  background:transparent;
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background-color .15s ease,box-shadow .15s ease;
}
.asset-summary-links > .asset-summary-link:last-child { border-right:0; }
.asset-summary-link > span {
  display:block;
  margin-top:7px;
  color:var(--action);
  font-size:11px;
  font-weight:750;
}
.asset-summary-link:hover { background:var(--surface-subtle); }
.asset-summary-link:focus-visible {
  z-index:1;
  outline:2px solid var(--action);
  outline-offset:-3px;
  background:var(--surface-subtle);
}

.metric-strip,
.offer-summary-bar {
  gap:0;
  margin:18px 0;
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  overflow:visible;
}
.metric-strip > div,
.offer-summary-bar > div,
.offer-summary-bar > div:last-child {
  padding:16px 18px;
  border-right:1px solid var(--line-soft);
  background:transparent;
}
.metric-strip > div:last-child,
.offer-summary-bar > div:last-child { border-right:0; }
.system-grid,
.status-storage-grid,
.status-record-grid,
.status-runtime-grid,
.article-detail-grid,
.about-tech-grid,
.about-tech-highlight { gap:0 22px; }

.status-lower-grid { align-items:start; }
.status-lower-grid > .card + .card { margin-top:0; }
.system-item,
.status-metric,
.status-record,
.status-runtime-item,
.article-detail-grid > div,
.about-tech-item,
.about-tech-highlight > div,
.label-plan-kpis > div {
  min-width:0;
  padding:14px 0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  text-align:left;
}
.status-metric small,
.status-record small,
.status-runtime-item small,
.article-detail-grid small,
.about-tech-item small,
.about-tech-highlight small { font-size:10px; }
.status-overall {
  margin-bottom:20px;
  padding:17px 0;
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

/* Tables ----------------------------------------------------------------- */
.table-wrap { max-width:100%; border:0; border-radius:0; overflow:auto; }
.data-table { font-size:13px; }
.data-table th,
.offer-items-table thead th {
  padding:11px 13px;
  border-bottom:2px solid var(--line-strong);
  background:#eef2f4;
  color:#455861;
  font-size:10.5px;
  line-height:1.35;
}
.data-table td {
  padding:12px 13px;
  border-bottom:1px solid var(--line-soft);
  line-height:1.45;
}
.data-table tbody tr:nth-child(even) { background:#fafbfc; }
.data-table tbody tr:hover { background:#f1f5f6; }
.data-table tbody tr.row-active {
  background:#eaf4f2!important;
  box-shadow:none!important;
}
.network-dns-cell { min-width:145px; vertical-align:top; }
.network-dns-cell code { white-space:nowrap; }
.volume-table th:nth-child(6),
.volume-table td:nth-child(6) { min-width:180px; }
.volume-usage { display:grid; gap:5px; min-width:150px; }
.volume-usage-track {
  display:block;
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:11px;
  padding:0;
  overflow:hidden;
  border:1px solid #aebbc3;
  border-radius:2px;
  background:#eef1f3;
  color:#2b78d0;
  box-shadow:inset 0 1px 2px rgba(23,35,43,.12);
}
.volume-usage-track::-webkit-progress-bar {
  background:#eef1f3;
  box-shadow:inset 0 1px 2px rgba(23,35,43,.12);
}
.volume-usage-track::-webkit-progress-value {
  border-right:1px solid rgba(0,61,128,.3);
  background:#2b78d0;
}
.volume-usage-track::-moz-progress-bar {
  border-right:1px solid rgba(0,61,128,.3);
  background:#2b78d0;
}
.volume-usage.is-low .volume-usage-track { color:#c27b16; }
.volume-usage.is-low .volume-usage-track::-webkit-progress-value { background:#c27b16; }
.volume-usage.is-low .volume-usage-track::-moz-progress-bar { background:#c27b16; }
.volume-usage.is-critical .volume-usage-track { color:var(--danger); }
.volume-usage.is-critical .volume-usage-track::-webkit-progress-value { background:var(--danger); }
.volume-usage.is-critical .volume-usage-track::-moz-progress-bar { background:var(--danger); }
.volume-usage small { color:var(--muted); font-size:10.5px; white-space:nowrap; }
.row-active { background:#eaf4f2!important; box-shadow:none!important; }
.status-table .status-danger td:first-child,
.status-table .status-warning td:first-child,
.status-table .status-ok td:first-child,
.status-table .status-info td:first-child,
.equipment-table tr.tone-good td:first-child,
.equipment-table tr.tone-warn td:first-child,
.equipment-table tr.tone-bad td:first-child { box-shadow:none; }
.status-table tr.status-danger { background:#fff3f2; }
.status-table tr.status-warning { background:#fff8e8; }
.status-table tr.status-ok { background:#f0f8f4; }
.status-table tr.status-info { background:#f2f6f8; }

/* Messages and empty states ---------------------------------------------- */
.notice,
.card .notice,
.modal-card .notice {
  padding:13px 15px;
  border:1px solid #d7e0e4;
  border-left:0;
  border-right:0;
  border-radius:0;
  background:#f7f9fa;
  color:#41545e;
  font-size:13px;
  line-height:1.6;
}
.notice.success,
.notice.ok,
.card .notice.success,
.card .notice.ok { border-color:#a8d3bb; background:#f1f8f4; }
.notice.warning,
.card .notice.warning { border-color:#dfc381; background:#fff9eb; }
.notice.danger,
.card .notice.danger { border-color:#e1aaa5; background:#fff4f3; }
.empty-state,
.card .empty-state,
.card-body .empty-state {
  padding:28px 0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
  color:var(--muted);
  text-align:left;
  font-size:13px;
}
.loading-card { padding:42px; color:var(--muted); text-align:center; }

/* Public/client-visible and internal fields ------------------------------ */
.offer-field-public,
.is-client-visible-field,
.offer-field-internal,
.is-internal-field {
  min-width:0;
  border:0;
  border-top:3px solid;
  border-radius:0;
  padding:13px 14px;
}
.offer-field-public,
.is-client-visible-field {
  border-top-color:var(--client-line);
  background:var(--client-bg);
  color:var(--client-ink);
}
.offer-field-internal,
.is-internal-field {
  border-top-color:var(--internal-line);
  background:var(--internal-bg);
  color:var(--internal-ink);
}
.offer-field-public > input,
.offer-field-public > select,
.offer-field-public > textarea,
.offer-field-internal > input,
.offer-field-internal > select,
.offer-field-internal > textarea,
.is-client-visible-field input,
.is-client-visible-field textarea,
.is-internal-field input,
.is-internal-field textarea { background:#fff; }
.timeline-item,
.timeline-item.is-client-visible {
  margin:0;
  padding:14px 0;
  border:0;
  border-top:1px solid var(--internal-line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.timeline-item.is-client-visible { border-top-color:var(--client-line); }
.timeline-item + .timeline-item { margin-top:0; }

/* Article history: the two text areas are always first-class and visible. */
.article-current-details {
  margin-top:20px;
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.article-metadata-editor {
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,2fr);
  gap:16px 20px;
  margin:24px 0 4px;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.article-metadata-editor > .section-heading-actions,
.article-metadata-editor > label:nth-of-type(3),
.article-metadata-editor > .action-group { grid-column:1/-1; }
.article-metadata-editor label { margin:0; }
.article-metadata-editor textarea { width:100%; min-height:132px; }
.article-metadata-editor .action-group { justify-content:flex-start; }

/* Offers: aligned rows, readable drawers, flat document groups ----------- */
.offer-toolbar,
.offer-workflow-bar {
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:#f7f9fa;
  box-shadow:none;
}
.offer-workflow-bar { padding:14px 16px; }
.offer-acceptance-state {
  display:flex;
  min-width:250px;
  max-width:330px;
  flex-direction:column;
  gap:3px;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
}
.offer-acceptance-state strong,
.offer-acceptance-state small { color:inherit; }
.offer-acceptance-state.is-pending {
  border-color:#dfc36a;
  background:#fff8dd;
  color:#6b4f00;
}
.offer-acceptance-state.is-confirmed {
  border-color:#8bc7a5;
  background:#eaf7ef;
  color:#175d3b;
}
.offer-workflow-bar .offer-status-actions { align-items:flex-end; }
.offer-status-control {
  display:grid;
  gap:4px;
  margin:0;
}
.offer-status-control > span {
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
}
.offer-status-control option:disabled { color:#8a949a; }
.offer-editor { overflow:visible; }
.offer-evidence > span {
  min-width:150px;
  padding:6px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
}
.offer-evidence > span.missing {
  border-color:#dfc36a;
  background:#fff8dd;
  color:#6b4f00;
}
.offer-evidence > span.ready {
  border-color:#8bc7a5;
  background:#eaf7ef;
  color:#175d3b;
}
.offer-evidence > span.missing strong,
.offer-evidence > span.missing small,
.offer-evidence > span.ready strong,
.offer-evidence > span.ready small {
  color:inherit;
}
@media(max-width:850px) {
  .offer-acceptance-state { min-width:0;max-width:none;width:100%; }
  .offer-workflow-bar .offer-status-actions { align-items:stretch; }
}
.offer-items-wrap {
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
}
.offer-items-table { font-size:13px; }
.offer-items-table td { padding:8px 9px; }
.offer-items-table .offer-item-line > td { vertical-align:top; }
.offer-cell-title .offer-product-picker { margin-top:0; }
.offer-items-table input,
.offer-items-table select {
  min-height:36px;
  height:36px;
  margin:0;
  font-size:13px;
}
.offer-items-table tbody + tbody {
  /* Debela granica jasno zatvara prethodnu stavku i njezine dokumente. */
  border-top:10px solid var(--line-strong);
}
.offer-items-table tbody.is-open + tbody { border-top-color:var(--line-strong); }
.offer-item-rows.source-price-list .offer-cell-index,
.offer-item-rows.source-inventory .offer-cell-index,
.offer-item-rows.source-inventory-empty .offer-cell-index { box-shadow:none; font-weight:800; }
.offer-item-rows.source-price-list .offer-cell-index { color:#6d54ad; }
.offer-item-rows.source-inventory .offer-cell-index { color:var(--green); }
.offer-item-rows.source-inventory-empty .offer-cell-index { color:var(--danger); }
.offer-item-drawer > td { padding:10px 10px 18px; }
.offer-drawer-grid {
  display:grid;
  /* Opis je 20 % uži od prethodnih 60 % fleksibilnog prostora: 48/52. */
  grid-template-columns:minmax(0,12fr) minmax(0,13fr) 112px;
  grid-template-areas:
    "description internal vat"
    "procurement procurement procurement";
  gap:16px;
  align-items:start;
}
.offer-drawer-grid > .offer-field-public:first-of-type { grid-area:description; }
.offer-drawer-grid > .offer-item-internal { grid-area:internal; }
.offer-drawer-grid > .offer-drawer-vat { grid-area:vat; }
.offer-drawer-grid > .offer-procurement {
  grid-area:procurement;
  grid-column:1 / -1;
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:4px 16px;
  padding:16px 14px;
  border:0;
  border-top:3px solid var(--internal-line);
  border-radius:0;
  background:var(--internal-bg);
}
.offer-drawer-grid > .offer-procurement > label {
  display:flex;
  min-width:0;
  margin:0;
  flex-direction:column;
}
.offer-drawer-grid > .offer-procurement > label > input,
.offer-drawer-grid > .offer-procurement > label > select {
  width:100%;
  margin-top:7px;
}
.offer-items-table .offer-drawer-grid > .offer-procurement > label > input,
.offer-items-table .offer-drawer-grid > .offer-procurement > label > select {
  box-sizing:border-box;
  height:40px;
  min-height:40px;
}
.offer-order-reference-field > small {
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:10.5px;
  font-weight:500;
  line-height:1.4;
}
.offer-editor.is-simple .offer-drawer-grid {
  grid-template-columns:minmax(0,1fr) 112px;
  grid-template-areas:"description vat";
}
.offer-drawer-grid > .offer-field-public,
.offer-drawer-grid > .offer-field-internal { min-width:0; }
.offer-drawer-grid > .offer-field-public {
  width:100%;
  margin:0;
  /* Oznaka je uvučena u plohu pa je tablični overflow ne može odrezati. */
  box-shadow:inset 3px 0 0 var(--client-line);
}
/*
 * Stari selektor `.offer-items-table td > .offer-field-public` ima veću
 * specifičnost od osnovnog pravila i poništava padding samo u ladici stavke.
 * Zato su i labela i kontrola počinjale na samoj plavoj oznaci. Ovdje ciljano
 * vraćamo plohu i ostavljamo 13 px čistog prostora nakon oznake za Opis i PDV.
 */
.offer-items-table .offer-drawer-grid > .offer-field-public {
  padding:13px 14px 13px 16px;
  background:var(--client-bg);
}
.offer-drawer-grid textarea {
  width:100%;
  min-height:118px;
  font-weight:400;
}
.offer-drawer-grid > .offer-item-internal {
  grid-column:auto;
  padding:13px 14px;
  border-left:0;
}
.offer-item-files,
.offer-item-drawer .offer-item-files {
  margin-top:16px;
  padding:18px 0 0;
  border:0;
  border-top:1px solid var(--internal-line);
  border-radius:0;
  background:transparent;
}
.offer-item-files .offer-upload-row {
  grid-template-columns:minmax(220px,1.2fr) repeat(2,minmax(180px,1fr)) auto;
}
.offer-item-files .offer-upload-row > select,
.offer-item-files .offer-upload-row > input {
  width:100%;
  min-width:0;
  min-height:40px;
  height:40px;
  margin:0;
}
.offer-shared-upload { padding:0; border:0; background:transparent; }
.offer-shared-upload-item {
  padding:16px 0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
.offer-link-items label { background:#fff; }
.offer-color-legend {
  position:sticky;
  bottom:0;
  z-index:20;
  gap:9px 18px;
  margin-top:24px;
  padding:13px 16px;
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:rgba(255,255,255,.97);
  box-shadow:0 -8px 20px rgba(16,38,44,.10);
}

/* Other workspaces ------------------------------------------------------- */
.settings-grid { width:min(1240px,100%); gap:20px; }
.settings-card { min-width:0; padding:24px; }
.settings-card h2 { font-size:17px; }
.settings-card > p { margin:6px 0 22px; font-size:13px; line-height:1.6; }
.audit-filters { gap:14px 16px; padding:18px 20px; background:#f7f9fa; }
.audit-result-meta { padding:11px 20px; font-size:12px; }
.services-grid { gap:12px; }
.service-card,
.contract-tile,
.work-order-list-item,
.report-pick {
  border-radius:var(--radius-sm);
  box-shadow:none;
}
.service-card:hover,
.contract-tile:hover,
.contract-tile.active { transform:none; box-shadow:none; }
.contract-tile.active {
  border:1px solid var(--action);
  background:#eef7f5;
}
.service-edit-card {
  padding:20px 0 20px 18px;
  border:0;
  border-left:3px solid #c9cbd0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent!important;
  scroll-margin-top:88px;
}
.work-order-list-item.active { border-color:var(--action); background:#eaf4f2; box-shadow:none; }
.work-order-timeline-item {
  padding:14px 0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
.contract-signed-box,
.contract-signed-box.has-document,
.contract-signed-box.missing-document,
.contract-signed-box.is-draft {
  padding:16px 0;
  border:0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
}
.license-subnav {
  padding:8px 0;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:rgba(243,246,248,.97);
  box-shadow:none;
}
.code-value,
.ticket-body { border:0; border-radius:0; background:#f1f4f6; }
.modal-backdrop { background:rgba(12,25,31,.64); }
.modal-card { border-color:var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-modal); }
.modal-split .modal-head { padding:24px 28px 18px; }
.modal-split .modal-body { padding:22px 28px; }
.modal-split .modal-actions {
  padding:16px 28px;
  border-radius:0;
  background:#f7f9fa;
}
.bulk-asset-modal #asset-bulk-result { margin:0 0 12px; }
.asset-accessory-head { margin-bottom:14px; }
.asset-accessory-controls {
  display:grid;
  grid-template-columns:minmax(280px,1fr) auto auto;
  align-items:end;
  gap:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface-sunken);
}
.asset-accessory-controls label { margin:0; min-width:0; }
.asset-accessory-controls select { margin:5px 0 0; }
.asset-accessory-controls .btn { min-height:40px; white-space:nowrap; }
.asset-accessory-table .row-actions { flex-wrap:nowrap; }
.asset-accessory-table code { overflow-wrap:anywhere; }
@media(max-width:900px) {
  .asset-accessory-controls { grid-template-columns:1fr; align-items:stretch; }
  .asset-accessory-controls .btn { width:100%; }
  .asset-accessory-table .row-actions { flex-wrap:wrap; }
}
#asset-context-menu-root:empty { display:none; }
.asset-context-menu {
  position:fixed;
  z-index:150;
  width:min(300px,calc(100vw - 16px));
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:#fff;
  box-shadow:0 16px 42px rgba(20,32,39,.24);
  color:var(--text);
}
.asset-context-head {
  padding:11px 13px;
  border-bottom:1px solid var(--line);
  background:var(--surface-sunken);
}
.asset-context-head strong,
.asset-context-head small { display:block; overflow-wrap:anywhere; }
.asset-context-head strong { font-size:12px; }
.asset-context-head small { margin-top:3px; color:var(--muted); font-size:11px; }
.asset-context-actions { display:grid; padding:6px; }
.asset-context-command {
  display:block;
  width:100%;
  margin:0;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--text);
  padding:10px 11px;
  font:700 12px/1.3 'DM Sans','Segoe UI',Arial,sans-serif;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
}
.asset-context-command:hover,
.asset-context-command:focus-visible { background:#eef3f5; outline:2px solid transparent; }
.asset-context-command.is-disabled { color:var(--muted); cursor:not-allowed; }
.asset-context-mesh-row { padding:6px; border-top:1px solid var(--line); }
.asset-context-command.asset-context-mesh {
  background:#eaf2f8;
  color:#245b7a;
}
.asset-context-command.asset-context-mesh:hover,
.asset-context-command.asset-context-mesh:focus-visible { background:#dcebf4; }
.portal-context-danger { color:var(--danger); }
.portal-context-danger:hover,.portal-context-danger:focus-visible { background:#fff0f0; }
.portal-password-modal { width:min(640px,100%); overflow:hidden; }
.portal-password-modal .modal-head p { margin:7px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.portal-password-modal .modal-head p strong { color:var(--text); }
.portal-password-error:not(.hidden) { margin:0 0 16px; }
.portal-password-session-warning { margin:0 0 18px; }
.portal-password-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.portal-password-fields label { margin:0; }
.portal-password-fields input { width:100%; margin-top:6px; }
.portal-password-modal .field-help { margin:12px 0 0; }

/* Zasebna centrala profila klijentskog portala. */
.portal-profile-toolbar-wrap { display:block; }
.portal-profile-heading p { line-height:1.55; }
.portal-profile-toolbar { align-items:end; margin-top:15px; }
.portal-profile-search { min-width:min(280px,100%); flex:1 1 280px; }
.portal-profile-toolbar .filter-field { margin:0; }
.portal-profile-row { cursor:context-menu; }
.portal-profile-row:hover { background:#f7f9fa; }
.portal-profile-menu-button { min-width:38px; letter-spacing:1px; }
.portal-presence-badge { gap:5px; }
.portal-presence-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; }
.portal-profile-table .cell-sub { display:block; margin-top:3px; color:var(--muted); font-size:10px; line-height:1.4; }
.portal-profile-group-host { padding:18px; background:var(--surface-sunken); }
.portal-profile-groups { display:grid; gap:16px; }
.portal-profile-group { margin:0; min-width:0; }
.portal-profile-group-header { align-items:center; }
.portal-profile-group-header h2 { margin:0; font-size:15px; }
.portal-profile-group-header p { margin:3px 0 0; }
.portal-profile-group .table-wrap { max-height:none; }
.portal-equipment-requests-card .card-header { align-items:center; }
.portal-request-table td { vertical-align:top; }
.portal-request-note { min-width:180px; max-width:360px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45; }
.portal-request-table .cell-sub { display:block; margin-top:3px; color:var(--muted); font-size:10px; line-height:1.4; }
.article-portal-publish { display:grid; gap:12px; padding:14px; border:1px solid #a9bdc7; border-radius:var(--radius-sm); background:#f1f6f8; }
.article-portal-publish .switch-line,.article-portal-publish label { margin:0; }
.article-portal-publish .notice { margin:0; }
.article-portal-image-editor { display:grid; grid-template-columns:minmax(180px,280px) 1fr; gap:14px; align-items:start; }
.article-portal-image-open { display:block; width:100%; padding:0; border:0; border-radius:var(--radius-sm); background:none; cursor:zoom-in; }
.article-portal-image-preview { display:block; width:100%; aspect-ratio:16/10; object-fit:contain; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; }
.article-portal-image-placeholder { min-height:150px; display:grid; place-items:center; border:1px dashed var(--border); border-radius:var(--radius-sm); color:var(--muted); background:#fff; }
.ticket-received-overdue { color:#b42318; font-weight:700; background:#fff1f0; }
.ticket-received-overdue .cell-sub { color:#b42318; }
.ticket-overdue-label { display:block; margin-top:3px; }
.ticket-work-order-panel { margin-bottom:0; }
.ticket-assignee-panel { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); gap:28px; align-items:start; margin:0 0 18px; padding:20px 0; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; }
.ticket-assignee-panel h3,.ticket-assignee-panel p { margin:0; }
.ticket-assignee-panel p { color:var(--muted); font-size:12px; margin-top:4px; line-height:1.5; }
.ticket-assignee-copy { min-width:0; }
.ticket-assignee-copy .kv-list { margin-top:20px; }
.ticket-assignee-directory-note { display:block; margin-top:6px; color:var(--muted); font-size:10px; line-height:1.45; }
.ticket-assignee-controls { display:grid; grid-template-columns:minmax(230px,1fr) auto; align-items:end; gap:10px; min-width:0; }
.ticket-assignee-controls label { min-width:0; margin:0; }
.ticket-assignee-controls select { width:100%; }
.ticket-workflow-modal { width:min(620px,100%); }
.ticket-workflow-options { display:grid; gap:14px; }
.ticket-workflow-choice { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; margin:0; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-soft); cursor:pointer; }
.ticket-workflow-choice input { width:auto; margin:3px 0 0; }
.ticket-workflow-choice span { display:grid; gap:3px; min-width:0; }
.ticket-workflow-choice strong { font-size:12px; }
.ticket-workflow-choice small { color:var(--muted); font-size:10px; line-height:1.45; }
.attachment-image-button { display:block; width:100%; padding:0; border:0; border-radius:inherit; background:none; cursor:zoom-in; overflow:hidden; }
.picture-viewer-backdrop { z-index:240; padding:2vh 2vw; }
.picture-viewer-modal { width:96vw; height:94vh; display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; border-radius:12px; background:#111820; color:#fff; box-shadow:0 24px 80px #000a; }
.picture-viewer-modal header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; background:#18222c; }
.picture-viewer-modal header .action-group { align-items:center; }
#picture-viewer-zoom-value { display:inline-flex; min-width:52px; min-height:36px; align-self:center; align-items:center; justify-content:center; line-height:1; font-variant-numeric:tabular-nums; }
.picture-viewer-modal footer { padding:8px 14px; text-align:center; color:#b9c5ce; font-size:12px; background:#18222c; }
.picture-viewer-viewport { position:relative; min-width:0; min-height:0; display:grid; place-items:center; overflow:hidden; cursor:grab; touch-action:none; user-select:none; }
.picture-viewer-viewport.is-dragging { cursor:grabbing; }
.picture-viewer-viewport img { position:absolute; left:50%; top:50%; max-width:none; max-height:none; transform-origin:0 0; will-change:transform; pointer-events:none; transition:opacity .08s ease; }
.picture-viewer-viewport img.is-loading { opacity:0; }
.picture-viewer-error { max-width:520px; padding:18px; text-align:center; color:#fff; border:1px solid #aebbc4; background:#18222c; }
@media (max-width:980px) { .ticket-assignee-panel { grid-template-columns:1fr; gap:18px; } }
@media (max-width:720px) { .article-portal-image-editor { grid-template-columns:1fr; } .ticket-assignee-controls { grid-template-columns:1fr; } .ticket-assignee-controls .btn { width:100%; } .picture-viewer-modal header { align-items:flex-start; flex-direction:column; } }
@media(max-width:900px) {
  .portal-profile-toolbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .portal-profile-search { min-width:0; grid-column:1/-1; }
  .portal-profile-toolbar .readonly-label,.portal-profile-toolbar .asset-view-switch { justify-self:start; }
}
@media(max-width:600px) {
  .portal-profile-toolbar { grid-template-columns:1fr; }
  .portal-profile-search { grid-column:auto; }
  .portal-profile-group-host { padding:10px; }
  .portal-password-fields { grid-template-columns:1fr; }
}
.modal-card.license-modal {
  /* `.modal-card` i `.modal-body` prije su istodobno bili scroll kontejneri.
     Rubno prebacivanje kotačića između njih uz veliki native datalist uzrokovalo
     je osciliranje cijelog prozora. Samo tijelo forme sada smije scrollati. */
  overflow:hidden;
}
.license-modal .modal-body {
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  overflow-anchor:none;
  scrollbar-gutter:stable;
}
.license-product-field { min-width:0; margin-bottom:18px; }
.license-product-field > label { margin-bottom:0; }
.license-product-picker { position:relative; }
.license-software-suggestions {
  position:absolute;
  z-index:12;
  top:calc(100% + 4px);
  right:0;
  left:0;
  max-height:min(280px,42vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:#fff;
  box-shadow:var(--shadow);
}
.license-software-option {
  display:block;
  width:100%;
  min-height:0;
  border:0;
  border-bottom:1px solid var(--line-soft);
  border-radius:0;
  background:#fff;
  padding:10px 12px;
  color:var(--ink);
  font:inherit;
  text-align:left;
  transform:none;
  cursor:pointer;
}
.license-software-option:last-child { border-bottom:0; }
.license-software-option:hover,
.license-software-option:focus-visible { background:var(--surface-sunken); transform:none; }
.license-software-option strong,
.license-software-option small { display:block; }
.license-software-option strong { font-size:13px; font-weight:700; line-height:1.35; }
.license-software-option small { margin-top:3px; color:var(--muted); font-size:11px; line-height:1.35; }
.license-software-empty { padding:12px; color:var(--muted); font-size:12px; line-height:1.45; }
.license-card .row-actions { flex-wrap:wrap; }
.modal-card.license-article-modal { width:min(1180px,100%); overflow:hidden; }
.license-article-modal .modal-body {
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.license-article-search-field { display:block; margin:18px 0 10px; }
.license-article-search-field input { margin-top:7px; }
.license-article-results {
  min-height:180px;
  max-height:min(390px,44vh);
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:#fff;
}
.license-article-results .loading-card,
.license-article-results .empty-state { border:0; border-radius:0; box-shadow:none; }
.license-article-result-meta {
  position:sticky;
  z-index:3;
  top:0;
  padding:8px 12px;
  border-bottom:1px solid var(--line);
  background:var(--surface-sunken);
  color:var(--muted);
  font-size:11px;
  font-weight:650;
}
.license-article-table { min-width:980px; }
.license-article-table thead th { top:33px; }
.license-article-table tr.is-selected td { background:#eef7fb; }
.license-article-table tr.is-sales-open td { box-shadow:inset 0 -3px #367b96; }
.license-article-table td small { display:block; margin-top:3px; color:var(--muted); font-size:10px; }
.license-article-sales-detail {
  margin-top:12px;
  padding:14px 0 0;
  border-top:2px solid var(--line-strong);
}
.license-article-sales-detail .section-heading-actions { margin-bottom:10px; }
.license-article-sales-detail h3 { margin:3px 0; font-size:16px; overflow-wrap:anywhere; }
.license-article-sales-detail p { margin:0; color:var(--muted); font-size:11px; }
.license-article-sales-table { min-width:720px; }
.license-article-sales-detail .notice { margin:10px 0 0; }
.license-article-selection {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:6px 10px;
  margin-top:12px;
  padding:12px 14px;
  border:1px solid #a9d5e5;
  border-radius:var(--radius-sm);
  background:#f3fbfe;
}
.license-article-selection strong { min-width:0; overflow-wrap:anywhere; }
.license-article-selection small { grid-column:1/-1; color:var(--muted); line-height:1.45; }
@media(max-width:620px) {
  .license-article-selection { grid-template-columns:1fr; }
  .license-article-selection small { grid-column:auto; }
}
.toast { border-radius:var(--radius-sm); font-size:13px; }

/* Readability floors for dense legacy workspaces. Print/label previews keep
   their physical-size typography; interactive portal text does not. */
.asset-filter-intro { font-size:13px!important; line-height:1.6; }
.asset-inventory-heading-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 14px;
  padding:0 0 14px;
  border-bottom:1px solid var(--line);
}
.asset-inventory-heading-row .asset-filter-intro {
  flex:1 1 360px;
  min-width:0;
  margin:0!important;
  padding:0;
  border:0;
}
.asset-inventory-heading-row .asset-inventory-actions {
  flex:0 0 auto;
  flex-wrap:nowrap;
  justify-content:flex-end;
  margin:0;
  padding:0;
  border:0;
}
.asset-inventory-heading-row .asset-inventory-actions .btn { white-space:nowrap; }
@media(max-width:1320px) {
  .asset-inventory-heading-row { align-items:stretch; flex-direction:column; }
  .asset-inventory-heading-row .asset-inventory-actions { flex-wrap:wrap; justify-content:flex-start; }
}
.calendar-ticket-link,
.calendar-ticket-link .link-inline,
.ticket-preparation-head p,
.section-heading-compact p,
.field-help,
.bulk-action-row small,
.work-order-list-main span,
.work-order-list-side small,
.work-order-timeline-date,
.work-order-timeline-body,
.linked-business-card span,
.status-table td small,
.status-metric span,
.status-runtime-item span,
.about-tech-highlight p,
.about-tech-item p,
.service-icon-hint,
.manual-article-modal label .muted,
.sysinfo-usage,
.ticket-asset-table-picker > small,
.ticket-asset-product-table td:nth-child(3) small { font-size:12px; line-height:1.5; }
.company-lookup-link,
.company-lookup-empty,
.article-note-badges .badge,
.source-tag,
.agreement-source,
.client-contract-head small,
.rp-status,
.rp-date { font-size:10.5px; }
.status-metric small,
.status-record small,
.status-runtime-item small,
.article-detail-grid small,
.about-tech-highlight small,
.about-tech-item small { font-size:11px; }
.work-order-list-main strong,
.linked-business-card strong { font-size:13px; }
.work-order-image-grid figcaption { font-size:11px; line-height:1.45; }
.work-order-main-actions {
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
}
.work-order-main-actions > .btn {
  align-self:end;
  min-height:42px;
  margin:0;
}

.offers-workspace input:not([type="checkbox"]):not([type="file"]),
.offers-workspace select,
.offers-workspace textarea {
  padding:9px 10px;
  font-size:13px;
  line-height:1.4;
}
.offer-section-head > div > p,
.offer-product-field > small,
.offer-cell-origin { font-size:12px; line-height:1.5; }
.offer-drawer-grid > label { font-size:13px; }
.offer-subheading,
.offer-shared-upload-head,
.offer-file strong,
.offer-file small,
.offer-link-items > strong,
.offer-link-items label { font-size:11.5px; line-height:1.45; }
.offer-file-button { font-size:12px!important; }
.offer-file-selection { font-size:11.5px; }
.offer-picker-caption { font-size:11px; }
.offer-picker-message { font-size:12px; }
.offer-product-table { font-size:12px; }
.offer-product-table th { font-size:10.5px; }
.offer-service-table td:nth-child(2) small { font-size:11px; }
.offer-stock-button { font-size:10.5px; }
.offer-order-reference-overlay .offer-order-reference-table { min-width:780px; }
.offer-order-reference-table td { vertical-align:top; }
.offer-order-reference-table td small {
  display:block;
  margin-top:4px;
  color:var(--muted);
  line-height:1.35;
}
.offer-order-reference-table .badge { margin:0; vertical-align:middle; }
.offer-order-reference-select:disabled { cursor:not-allowed; filter:none; opacity:.62; }
.ticket-asset-table-picker > label { font-size:12px; }
.price-editor .data-table input,
.price-editor .data-table textarea {
  min-height:38px;
  padding:8px 9px;
  font-size:13px;
  line-height:1.4;
}
.price-editor .data-table textarea { min-height:78px; }
.equipment-table select { min-height:34px; font-size:12px; }

/* Responsive rhythm ------------------------------------------------------ */
@media (max-width:1200px) {
  .page-actions { grid-template-columns:1fr; }
  .page-actions > .action-group { justify-content:flex-start; }
  .work-order-main-actions { align-items:stretch; }
  .work-order-main-actions > .btn { justify-self:start; }
  .offer-drawer-grid {
    grid-template-columns:minmax(0,12fr) minmax(0,13fr);
    grid-template-areas:
      "description internal"
      "vat vat"
      "procurement procurement";
  }
  .offer-drawer-grid > .offer-drawer-vat { width:min(180px,100%); }
  .offer-editor.is-simple .offer-drawer-grid {
    grid-template-columns:minmax(0,1fr) 150px;
    grid-template-areas:"description vat";
  }
}

@media (max-width:900px) {
  .login-screen { grid-template-columns:1fr; }
  .login-brand-panel { display:none; }
  .login-form-panel { min-height:100vh; padding:36px 22px; }
  .app-shell { grid-template-columns:80px minmax(0,1fr); }
  .sidebar { padding:16px 9px; }
  .sidebar-brand { justify-content:center; padding-inline:0; }
  .sidebar-wordmark-text,
  .sidebar-brand > span,
  .nav-search-wrap,
  .nav-group-label,
  .nav-list button span:last-child,
  .sidebar-footer .link-button,
  .sidebar-version { display:none; }
  .nav-group { display:contents; }
  .nav-list { padding-top:12px; }
  .nav-list button,
  .nav-list button.nav-child {
    justify-content:center;
    width:100%;
    margin:1px 0;
    padding:8px;
    border-left:1px solid transparent;
  }
  .nav-list button[data-count] { padding-right:8px; }
  .sidebar-footer { justify-content:center; }
  .status-pill { font-size:0; }
  .topbar { height:60px; padding:8px 22px; }
  .content { padding:26px 22px 60px; }
  .software-layout { grid-template-columns:1fr; }
  .licensed-software-filter { grid-template-columns:1fr; }
  .dashboard-overview-grid,
  .dashboard-ranking-grid { grid-template-columns:1fr; }
  .software-layout > .card { height:auto; }
  .card-header,
  .editor-header { padding:18px; }
  .card-body { padding:18px; }
  .editor-body { padding:0 18px 18px; }
  .article-metadata-editor { grid-template-columns:1fr; }
  .article-metadata-editor > * { grid-column:1!important; }
  .offer-drawer-grid,
  .offer-editor.is-simple .offer-drawer-grid {
    grid-template-columns:1fr;
    grid-template-areas:
      "description"
      "internal"
      "vat"
      "procurement";
  }
  .offer-drawer-grid > .offer-procurement { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .offer-drawer-grid > .offer-drawer-vat { width:100%; }
  .offer-item-files .offer-upload-row { grid-template-columns:1fr; }
}

@media (max-width:640px) {
  .app-shell { display:block; }
  .sidebar {
    position:fixed;
    inset:auto 0 0;
    z-index:30;
    display:block;
    width:auto;
    height:68px;
    padding:8px;
    border-top:1px solid #263b41;
    border-right:0;
  }
  .sidebar-brand,
  .sidebar-footer { display:none; }
  .nav-list {
    display:flex;
    flex-direction:row;
    gap:4px;
    padding:0;
    overflow-x:auto;
    overflow-y:hidden;
  }
  .nav-group { display:contents; }
  .nav-list button,
  .nav-list button.nav-child {
    flex:0 0 52px;
    width:52px;
    min-height:50px;
    margin:0;
    padding:8px 5px;
    border:1px solid transparent;
  }
  .nav-list button[data-count] { padding:8px 5px; }
  .topbar { min-height:58px; }
  .topbar h1 { font-size:19px; }
  .content { padding:22px 16px 82px; }
  .offer-color-legend { bottom:68px; }
  .page-actions { gap:15px; margin-bottom:22px; padding-bottom:18px; }
  .page-actions .action-group,
  .page-actions .btn { width:100%; }
  .action-group { align-items:stretch; }
  .card-header,
  .editor-header,
  .section-heading-actions { flex-direction:column; }
  .card-header .action-group,
  .editor-header .action-group { justify-content:flex-start; }
  .card-body,
  .settings-card { padding:16px; }
  .editor-body { padding:0 16px 16px; }
  .form-grid,
  .form-grid.three,
  .checkbox-grid { grid-template-columns:1fr; }
  .form-grid .span-2,
  .form-grid .span-3 { grid-column:1; }
  .stats-grid,
  .stats-grid.four,
  .work-order-kpis,
  .metrics-stats { grid-template-columns:1fr; }
  .metric-strip,
  .offer-summary-bar { grid-template-columns:1fr; }
  .metric-strip > div,
  .offer-summary-bar > div,
  .offer-summary-bar > div:last-child {
    border-right:0;
    border-bottom:1px solid var(--line-soft);
  }
  .metric-strip > div:last-child,
  .offer-summary-bar > div:last-child { border-bottom:0; }
  .asset-summary-links > .asset-summary-link {
    border-right:0;
    border-bottom:1px solid var(--line-soft);
  }
  .asset-summary-links > .asset-summary-link:last-child { border-bottom:0; }
  .offer-drawer-grid > .offer-procurement { grid-template-columns:1fr; }
  .modal-backdrop { padding:10px; }
  .modal-split .modal-head,
  .modal-split .modal-body,
  .modal-split .modal-actions { padding-left:18px; padding-right:18px; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}
.document-workspace { display:grid; gap:18px; }
.document-index-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 24px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg,#f7fafb 0%,#ffffff 100%); box-shadow:0 14px 32px rgba(18,34,42,.06); }
.document-index-head h1 { margin:6px 0 4px; font-size:24px; line-height:1.1; }
.document-index-head p { margin:0; max-width:880px; color:var(--muted); }
.document-summary-strip { gap:14px; }
.document-browser { border:1px solid var(--line); box-shadow:0 14px 28px rgba(18,34,42,.05); }
.document-browser-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.document-browser-head h2 { margin:0; }
.document-browser-head p { margin:4px 0 0; color:var(--muted); }
.document-browser-meta { display:flex; min-width:96px; flex-direction:column; align-items:flex-end; gap:2px; color:var(--muted); font-size:11px; }
.document-browser-meta strong { color:var(--ink); font-size:24px; line-height:1; }
.document-filter-bar { padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius); background:#f8fafb; }
.offer-kpis{grid-template-columns:repeat(4,minmax(0,1fr));}
.offer-browser .card-header,.purchase-order-browser .card-header{padding-bottom:18px;border-bottom:1px solid var(--line-soft);}
.offer-browser .table-wrap,.purchase-order-list-body{border-top:1px solid var(--line-soft);}
.offer-list-table tbody tr:hover{background:#f7fafb;}
.offer-list-table td{vertical-align:top;}
.purchase-order-browser .card-body{padding:0;}
.purchase-order-list-item{padding:16px 18px;background:linear-gradient(180deg,#ffffff 0%,#fbfcfd 100%);}
.purchase-order-list-item:hover{background:#f4f8fa;}
.purchase-order-list-item.active{background:#edf5f8;box-shadow:inset 4px 0 #1f6c89;}
@media (max-width:980px) {
  .document-index-head { flex-direction:column; align-items:stretch; }
  .document-index-head .action-group { width:100%; }
  .document-index-head .action-group .btn { width:100%; }
  .offer-kpis,.document-summary-strip,.purchase-order-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px) {
  .document-index-head { padding:18px; }
  .document-browser-head { flex-direction:column; }
  .document-browser-meta { align-items:flex-start; }
  .offer-kpis,.document-summary-strip,.purchase-order-kpis { grid-template-columns:1fr; }
}

/* ── Narudžbe, objedinjeni Timeline i univerzalna pretraga ─────────────── */
.purchase-order-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:16px}
.purchase-order-actions{align-items:end;gap:18px}
.purchase-order-filters{display:grid;grid-template-columns:minmax(210px,1.3fr) minmax(135px,.7fr) minmax(170px,1fr) minmax(140px,.7fr) minmax(140px,.7fr) auto;gap:12px;align-items:end;flex:1}
.purchase-order-filters label{margin:0}
/* Globalni `label{display:block}` inače lomi checkbox i tekst u dva reda.
   Ova base klasa je jedini nositelj rasporeda za sve check retke. */
.check-line{display:flex;align-items:center;gap:9px;margin:0;line-height:1.35}
.check-line>input[type="checkbox"],
.check-line>input[type="radio"]{flex:0 0 auto;width:16px;height:16px;margin:0}
.check-line>span{min-width:0;font-weight:650;overflow-wrap:anywhere}
.purchase-order-filters .check-line{min-height:42px;padding:8px 10px;border:1px solid var(--line,#d8dee3);border-radius:7px;background:#fff}
.purchase-order-unmapped-queue{margin:0 0 16px}
.purchase-order-unmapped-queue .card-header{align-items:center}
.purchase-order-unmapped-queue .data-table td{vertical-align:top}
.purchase-order-unmapped-queue .data-table td:nth-child(3){min-width:280px;max-width:560px}
.purchase-order-unmapped-queue .data-table .muted{display:inline-block;margin-top:3px;overflow-wrap:anywhere}
/* Popis narudžbi stoji iznad urednika, jednako kao popis ponuda i ugovora.
   Sticky okno sa strane je uklonjeno kako bi urednik dobio punu širinu koju
   tablica stavki (min-width 960px) stvarno treba. */
.purchase-order-layout{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.purchase-order-layout>.card{position:static;max-height:none;overflow:visible}
.purchase-order-list-body{padding:0!important;overflow:auto;max-height:min(460px,60vh)}
/* Roditelj gasi padding radi rubova redova; prazno stanje ga mora vratiti. */
.purchase-order-list-body>.empty-state,
.purchase-order-list-body>.empty-state:only-child{padding:26px 18px;border-top:0}
.purchase-order-list{display:flex;flex-direction:column}
.purchase-order-list-item{display:flex;width:100%;gap:12px;align-items:flex-start;justify-content:space-between;padding:14px 16px;border:0;border-bottom:1px solid #e3e7ea;background:#fff;color:inherit;text-align:left;cursor:pointer}
.purchase-order-list-item:hover{background:#f6f8f9}
.purchase-order-list-item.active{background:#eef5f8;box-shadow:inset 4px 0 #28789a}
.purchase-order-list-item>span{display:flex;min-width:0;flex-direction:column;gap:4px}
.purchase-order-list-item>span:last-child{align-items:flex-end;flex:0 0 auto}
.purchase-order-list-item strong,.purchase-order-list-item small{overflow-wrap:anywhere}
.purchase-order-list-item small{color:#68747d}
.purchase-order-detail{margin:0;overflow:visible}
.purchase-order-detail>.card-body{padding:0 20px 22px}
.purchase-order-section,.business-timeline-section{padding:22px 0;border-top:1px solid #dce2e6}
.purchase-order-section:first-child{border-top:0}
.purchase-order-section .section-heading-actions,.business-timeline-section .section-heading-actions{margin-bottom:14px}
.purchase-order-status-controls{display:flex;align-items:end;gap:10px;margin-top:14px}
.purchase-order-status-controls label{min-width:220px;margin:0}
.purchase-order-items-table{min-width:960px;table-layout:fixed}
.purchase-order-items-table th:nth-child(1){width:42px}
.purchase-order-items-table th:nth-child(2){width:29%}
.purchase-order-items-table th:nth-child(3){width:18%}
.purchase-order-items-table th:nth-child(4){width:15%}
.purchase-order-items-table th:nth-child(5){width:20%}
.purchase-order-items-table th:last-child{width:46px}
.purchase-order-items-table td{vertical-align:top}
.purchase-order-items-table input,.purchase-order-items-table textarea{min-width:0;width:100%;font-weight:400}
.purchase-order-items-table textarea{min-height:64px;margin-top:6px;resize:vertical}
.purchase-order-items-table .inline-fields{display:grid;grid-template-columns:minmax(70px,1fr) 66px;gap:6px}
/* Unos QiQo šifre za stavku koja još nije spremljena. */
.po-code-entry{display:flex;flex-direction:column;gap:5px;padding:8px 9px;border-left:4px solid #7d8b94;background:#f4f7f8}
.po-code-input-row{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:5px;align-items:center}
.po-code-input{min-width:0;width:100%;font-variant-numeric:tabular-nums}
.po-code-browse{width:30px;height:30px;flex:0 0 auto;font-size:15px;line-height:1}
.po-code-entry small{color:#5f6b73;font-size:11px;overflow-wrap:anywhere}
.po-code-entry .po-code-resolved{color:#1f6b4d;font-weight:700}
.po-article-pick{display:inline-block;margin:5px 0 0;font-size:11px;font-weight:750}
.mapped-code,.unmapped-code{display:flex;flex-direction:column;gap:5px;align-items:flex-start;padding:8px 9px;border-left:4px solid #23835c;background:#eff8f4}
.mapped-code small{color:#607169}
.unmapped-code{border-left-color:#bc7810;background:#fff8e8}
.receive-control{display:grid;grid-template-columns:minmax(70px,1fr) auto;gap:6px;align-items:center}
.receive-control .btn{grid-column:1/-1;justify-self:start}
.purchase-order-attachments{display:flex;flex-direction:column;border-top:1px solid #dfe4e7}
.purchase-order-attachments article{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #dfe4e7}
.purchase-order-attachments article>div:first-child{display:flex;min-width:0;flex-direction:column;gap:3px}
.purchase-order-attachments article span{color:#6a747b;font-size:12px;overflow-wrap:anywhere}
.purchase-order-upload{display:grid;grid-template-columns:auto minmax(180px,1fr) minmax(180px,240px) auto;gap:10px;align-items:end;margin-top:16px;padding:14px 0;border-top:2px solid #bdc8ce}
.purchase-order-upload>label{margin:0}
.purchase-order-upload fieldset{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:10px 12px;border:1px solid #d8dee2;border-radius:7px}
.purchase-order-upload legend{padding:0 5px;color:#56636b;font-size:12px;font-weight:700}
.purchase-order-file-button{position:relative;overflow:hidden;margin:0}
.related-business-links{display:flex;flex-direction:column;border-top:1px solid #dfe4e7}
.related-business-row{display:flex;width:100%;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px;border:0;border-bottom:1px solid #dfe4e7;background:transparent;color:inherit;text-align:left;cursor:pointer}
.related-business-row:hover strong{color:#1d6583;text-decoration:underline}
.related-business-row span{color:#637079;font-size:12px;text-align:right}
.related-business-group{border-bottom:1px solid #dfe4e7}
.related-business-group .related-business-row{border-bottom:0}
.related-article-flows{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0 2px 10px}
.related-article-flows .link-button{font-size:10px;font-weight:800}
.business-timeline{position:relative;display:flex;flex-direction:column;gap:0;margin:0;padding:0;list-style:none}
/* Os prolazi sredinom stupca markera: 124px (vrijeme) + 40px/2 = 144px. */
.business-timeline::before{content:"";position:absolute;top:8px;bottom:8px;left:144px;width:2px;background:#d6dee2}
.business-timeline-event{position:relative;display:grid;grid-template-columns:124px 40px minmax(0,1fr);gap:0;padding:12px 0}
/* Datum i vrijeme su dva zasebna retka fiksne širine. Prije su bili jedan
   tekst u 93px stupcu, pa se prelamao preko markera i sadržaja.
   Desni padding drži zrak između brojeva i osi — bez njega datum, marker i
   okomita crta izgledaju stopljeno. */
.business-timeline-time{display:flex;flex-direction:column;align-items:flex-end;gap:3px;padding:2px 24px 0 0;color:#69757d;font-size:11px;line-height:1.4;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.business-timeline-time>span{display:block}
.business-timeline-time .business-timeline-clock{color:#8b959b;font-size:10px;letter-spacing:.02em}
.business-timeline-marker{position:relative;z-index:1;width:12px;height:12px;margin:6px auto 0;border:3px solid #fff;border-radius:999px;background:#788891;box-shadow:0 0 0 2px #bbc6cc}
.business-timeline-event.tone-info .business-timeline-marker{background:#267d9e;box-shadow:0 0 0 2px #9fc4d2}
.business-timeline-event.tone-warning .business-timeline-marker{background:#b77714;box-shadow:0 0 0 2px #e4c27f}
.business-timeline-event.tone-success .business-timeline-marker{background:#23835c;box-shadow:0 0 0 2px #9bd0ba}
.business-timeline-event.tone-danger .business-timeline-marker{background:#bd3944;box-shadow:0 0 0 2px #e0a4a9}
.business-timeline-content{min-width:0;padding:1px 0 12px 18px}
.business-timeline-content strong{display:block}
.business-timeline-content p{margin:3px 0;color:#5f6b73;white-space:pre-wrap;overflow-wrap:anywhere}
.business-timeline-content .link-button{margin-top:3px;font-size:12px}
/* 860px → 1290px (+50%). `calc(100vw - 28px)` i dalje ograničava širinu na
   uskim zaslonima, pa prozor nikad ne izlazi izvan vidljivog područja. */
.purchase-order-preview-modal{width:min(1290px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto}
/* Zaglavlje poruke se s većom širinom rasteže na četiri stupca umjesto da dva
   ostanu poluprazna; na uskom zaslonu se vraća u jedan. */
.purchase-order-preview-modal .email-preview-meta{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.email-preview-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;padding:12px 0;border-top:1px solid #dfe4e7;border-bottom:1px solid #dfe4e7;font-size:13px}
.email-preview-text{min-height:220px;max-height:52vh;margin:14px 0;padding:15px;overflow:auto;border:1px solid #d9e0e4;border-radius:7px;background:#f7f9fa;color:#20282d;font:14px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.purchase-order-mapping-modal{width:min(760px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto}
.article-map-results{display:flex;flex-direction:column;margin-top:12px;border-top:1px solid #dfe4e7}
.article-map-result{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 4px;border:0;border-bottom:1px solid #dfe4e7;background:transparent;color:inherit;text-align:left;cursor:pointer}
.article-map-result:hover{background:#f2f7f9}
.article-map-result small{color:#64717a}
.universal-search-card{overflow:visible}
.universal-search-box{padding:20px;border-bottom:1px solid #dce2e6}
.universal-search-box>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.universal-search-box>label{display:block;margin-bottom:7px;font-weight:700}
.universal-search-box>small{display:block;margin-top:7px;color:#66737b}
.search-empty-intro{padding:42px 20px;text-align:center;color:#5f6b73}
.search-empty-intro strong{display:block;margin-bottom:7px;color:#20282d;font-size:20px}
.universal-search-meta{padding:10px 20px;background:#f3f6f7;color:#65717a;font-size:12px}
.universal-search-results{display:flex;flex-direction:column}
.universal-search-result{display:grid;grid-template-columns:138px minmax(0,1fr) 120px;gap:16px;align-items:start;width:100%;padding:16px 20px;border:0;border-bottom:1px solid #dfe4e7;background:#fff;color:inherit;text-align:left;cursor:pointer}
.universal-search-result:hover{background:#f5f8f9}
.universal-search-type{display:inline-flex;width:max-content;max-width:100%;padding:4px 7px;border-radius:4px;background:#eaf1f4;color:#2e5f72;font-size:11px;font-weight:800;text-transform:uppercase}
.universal-search-main{display:flex;min-width:0;flex-direction:column;gap:3px}
.universal-search-main strong,.universal-search-main p{overflow-wrap:anywhere}
.universal-search-main small{color:#64717a}
.universal-search-main p{margin:5px 0 0;color:#4f5c64;line-height:1.45}
.universal-search-date{display:flex;align-items:center;justify-content:flex-end;gap:12px;color:#69757d;font-size:12px;text-align:right}
.universal-search-date b{color:#237797;font-size:18px}

@media(max-width:1180px){
  .purchase-order-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .purchase-order-list-body{max-height:360px}
  .purchase-order-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .purchase-order-kpis,.purchase-order-filters{grid-template-columns:1fr}
  .purchase-order-actions{align-items:stretch}
  .purchase-order-detail>.card-body{padding:0 14px 18px}
  .purchase-order-attachments article{align-items:flex-start;flex-direction:column}
  .purchase-order-upload{grid-template-columns:1fr}
  .purchase-order-upload fieldset{grid-column:auto}
  .business-timeline::before{left:11px}
  .business-timeline-event{grid-template-columns:24px minmax(0,1fr)}
  .business-timeline-time{grid-column:2;flex-direction:row;align-items:baseline;gap:9px;padding:0 0 2px;text-align:left}
  .business-timeline-marker{grid-column:1;grid-row:1/3;margin-top:3px}
  .business-timeline-content{grid-column:2;padding-left:0}
  .email-preview-meta{grid-template-columns:1fr}
  .article-map-result{grid-template-columns:1fr;gap:3px}
  .universal-search-result{grid-template-columns:1fr;gap:7px}
  .universal-search-date{justify-content:flex-start;text-align:left}
}

/* ── Razgranati Tok artikla: dokumenti, QiQo agregati i Inventar ── */
.article-history-modal{width:min(1480px,calc(100vw - 32px));max-height:calc(100vh - 32px)}
.article-flow-section{margin:0 0 24px;padding:0 0 24px;border-bottom:2px solid #aebbc2}
.article-flow-section>.section-heading-actions{align-items:flex-start;margin-bottom:13px}
.article-flow-section>.section-heading-actions h3{margin:0;font-size:18px}
.article-flow-section>.section-heading-actions p{max-width:850px;margin:4px 0 0;color:#5e6b73;font-size:12px;line-height:1.5}
.article-flow-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) minmax(150px,190px) minmax(150px,190px) minmax(145px,175px) minmax(145px,175px) auto;gap:10px;align-items:end;margin:0 0 13px;padding:12px 0;border-top:1px solid #d6dee2;border-bottom:1px solid #d6dee2}
.article-flow-toolbar label{margin:0}
.article-flow-search-field input{width:100%}
.article-flow-metrics{grid-template-columns:repeat(5,minmax(0,1fr))!important;margin-bottom:12px}
.article-flow-coverage{margin:0 0 8px!important}
.article-flow-warning{margin:6px 0!important}
.article-flow-identity{margin:12px 0 18px;padding:10px 12px;border-left:4px solid #316f8b;background:#eef5f8;color:#41545d;font-size:12px;line-height:1.5}
.article-flow-link-editor{display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(300px,1fr) auto;gap:14px;align-items:end;margin:0 0 18px;padding:14px;border:2px solid #316f8b;background:#f5fafc}
.article-flow-candidates>.article-flow-link-editor{grid-template-columns:1fr;margin:10px 0 0;border-color:#1d7899;background:#eef8fb;box-shadow:0 0 0 3px rgba(29,120,153,.12)}
.article-flow-candidates>.article-flow-link-editor .action-group{align-items:stretch;justify-content:flex-start}
.article-flow-link-editor:focus{outline:3px solid rgba(29,120,153,.28);outline-offset:2px}
.article-flow-link-editor h4{margin:3px 0;font-size:15px}
.article-flow-link-editor p{margin:0;color:#586970;font-size:10px;line-height:1.45}
.article-flow-link-editor label{margin:0}
.article-flow-link-editor .action-group{align-items:center;justify-content:flex-end}
.article-flow-result-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 10px;padding:10px 12px;border:1px solid #c5d0d5;background:#f7f9fa}
.article-flow-result-bar>div:first-child{display:flex;min-width:0;flex-direction:column;gap:2px}
.article-flow-result-bar strong{font-size:12px}
.article-flow-result-bar small{color:#65737b;font-size:9px;line-height:1.4}
.article-flow-result-bar .action-group{flex:0 0 auto}
.article-flow-branches{display:flex;flex-direction:column;gap:8px}
.article-flow-branch{border:1px solid #bcc8ce;background:#fff}
.article-flow-branch.is-expanded{margin:5px 0;border-color:#8799a3}
.article-flow-branch-head{display:grid;width:100%;grid-template-columns:minmax(210px,1fr) auto auto;align-items:center;gap:18px;margin:0;padding:12px 14px;border:0;background:#f2f6f7;color:#17242a;text-align:left;font:inherit;cursor:pointer}
.article-flow-branch.is-expanded .article-flow-branch-head{border-bottom:2px solid #8799a3;background:#eaf0f2}
.article-flow-branch-head:hover{background:#e8eef1}
.article-flow-branch-head:focus-visible{position:relative;z-index:1;outline:3px solid rgba(29,120,153,.3);outline-offset:2px}
.article-flow-branch-title{display:flex;min-width:0;flex-direction:column;align-items:flex-start;gap:3px}
.article-flow-branch-title>strong{font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.article-flow-branch-title>small{color:#65737b;font-size:9px;line-height:1.35;overflow-wrap:anywhere}
.article-flow-branch-title>.badge{margin-top:2px}
.article-flow-branch-totals{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px 14px;color:#5b6870;font-size:10px}
.article-flow-branch-totals strong{margin-left:3px;color:#17242a;font-size:12px}
.article-flow-branch-expander{display:flex;min-width:104px;align-items:center;justify-content:flex-end;gap:8px;color:#315d70;font-size:10px;font-weight:800}
.article-flow-chevron{font-size:18px;line-height:1;transition:transform .15s ease}
.article-flow-branch.is-expanded .article-flow-chevron{transform:rotate(180deg)}
.article-flow-branch-body{background:#fff}
.article-flow-lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start}
.article-flow-lane{min-width:0;padding:0 12px 14px;border-left:1px solid #cdd6db}
.article-flow-lane:first-child{border-left:0}
.article-flow-lane h5{margin:0 -12px 8px;padding:9px 12px;border-bottom:1px solid #d8e0e4;background:#f8fafb;color:#3c515b;font-size:11px;letter-spacing:.035em;text-transform:uppercase}
.article-flow-node{display:flex;width:100%;min-width:0;flex-direction:column;gap:4px;margin:0;padding:10px 2px;border:0;border-bottom:1px solid #dce3e6;background:transparent;color:inherit;text-align:left;font:inherit}
button.article-flow-node{cursor:pointer}
button.article-flow-node:hover{background:#f3f7f8;box-shadow:inset 3px 0 #2f7894}
.article-flow-node.is-muted{opacity:.68}
.article-flow-node.is-aggregate{border-left:3px dashed #c08a2f;padding-left:8px;background:#fffaf0}
.article-flow-node.is-asset{border-left:3px solid #25855f;padding-left:8px;background:#f2faf6}
.article-flow-node.is-asset.is-newly-linked{border:2px solid #168456;border-left-width:5px;padding:9px 7px;background:#e5f8ee;box-shadow:0 0 0 3px rgba(22,132,86,.14)}
.article-flow-node.is-asset:focus{outline:3px solid rgba(22,132,86,.24);outline-offset:2px}
.article-flow-node.has-warning{border-left-color:#b6444c;background:#fff5f5}
.article-flow-node-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;min-width:0}
.article-flow-node-head strong,.article-flow-node>span{overflow-wrap:anywhere}
.article-flow-node>small{color:#64727a;font-size:10px;line-height:1.45}
.article-flow-node>em{color:#506773;font-size:9px;font-style:normal;font-weight:750;line-height:1.4;text-transform:uppercase;letter-spacing:.025em}
.article-flow-node>.link-button{align-self:flex-start;margin-top:3px}
.article-flow-empty{padding:13px 2px;color:#77838a;font-size:11px;line-height:1.45}
.article-flow-candidates{margin-top:10px;padding-top:10px;border-top:2px solid #c5d0d5}
.article-flow-candidates>strong{font-size:11px}
.article-flow-candidates>p{margin:3px 0 7px;color:#68757d;font-size:9px;line-height:1.4}
.article-flow-candidate-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:end;margin-top:8px}
.article-flow-candidate-controls label{margin:0}
.article-flow-candidate-controls>label:first-child{max-width:260px}
.article-flow-device-picker .offer-product-picker{width:100%;margin:0}
.article-flow-device-picker .offer-product-input{display:block;width:100%;height:38px;margin:0;font-family:inherit;font-size:11px;font-weight:400;letter-spacing:normal}
.article-flow-device-picker .offer-product-input.is-selected{border-color:#1d7899;background:#eef8fb;color:#17242a;font-weight:750}
.article-flow-selected-device{display:flex;flex-direction:column;gap:3px;margin-top:9px;padding:9px 10px;border-left:4px solid #c08a2f;background:#fff8e9}
.article-flow-selected-device .badge{align-self:flex-start}
.article-flow-selected-device strong{font-size:11px;overflow-wrap:anywhere}
.article-flow-selected-device small{color:#617078;font-size:9px;overflow-wrap:anywhere}
.article-flow-license-preserved{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:0 0 10px;padding:10px;border:2px solid #168456;background:#e8f8ef;box-shadow:0 0 0 3px rgba(22,132,86,.12)}
.article-flow-license-preserved:focus{outline:3px solid rgba(22,132,86,.26);outline-offset:2px}
.article-flow-license-preserved strong{font-size:11px;overflow-wrap:anywhere}
.article-flow-license-preserved small,.article-flow-license-preserved p{margin:0;color:#49635a;font-size:9px;line-height:1.45;overflow-wrap:anywhere}
.article-flow-license-preserved .btn{margin-top:3px}
.article-flow-candidate-overlay .offer-picker-caption{height:auto;min-height:var(--picker-caption-h);white-space:normal}
.article-flow-candidate-overlay .article-flow-candidate-table{min-width:900px}
.article-flow-candidate-table td{vertical-align:top}
.article-flow-candidate-table td small{display:block;margin-top:3px;color:var(--muted);font-size:9px;line-height:1.35}
.article-flow-candidate{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid #dce3e6}
.article-flow-candidate>div{display:flex;min-width:0;flex-direction:column;gap:2px}
.article-flow-candidate span,.article-flow-candidate small{color:#627078;font-size:9px;overflow-wrap:anywhere}
.article-flow-filter-empty{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.article-flow-filter-empty>span{color:#68757d;font-size:10px}
.article-flow-filter-empty>.btn{margin-top:4px}
.mapped-code-flow{font-weight:800;text-align:left}
.offer-item-flow-link{display:block;margin-top:5px;font-size:9px;font-weight:800;text-align:left;white-space:nowrap}

@media(max-width:1260px){
  .article-flow-toolbar{grid-template-columns:minmax(240px,1fr) repeat(2,minmax(150px,1fr))}
  .article-flow-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-flow-lane:nth-child(3){border-left:0;border-top:1px solid #cdd6db}
  .article-flow-lane:nth-child(4){border-top:1px solid #cdd6db}
  .article-flow-metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .article-flow-link-editor{grid-template-columns:1fr 1fr}
  .article-flow-link-editor .action-group{grid-column:1/-1}
}
@media(max-width:720px){
  .article-history-modal{width:calc(100vw - 20px);max-height:calc(100vh - 20px)}
  .article-flow-toolbar{grid-template-columns:1fr}
  .article-flow-toolbar .btn{width:100%}
  .article-flow-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .article-flow-result-bar{align-items:stretch;flex-direction:column}
  .article-flow-result-bar .action-group{align-items:stretch;flex-direction:column}
  .article-flow-result-bar .btn{width:100%}
  .article-flow-branch-head{display:flex;align-items:flex-start;flex-direction:column}
  .article-flow-branch-totals{justify-content:flex-start}
  .article-flow-branch-expander{width:100%;justify-content:space-between;border-top:1px solid #cbd5da;padding-top:7px}
  .article-flow-lanes{grid-template-columns:1fr}
  .article-flow-lane,.article-flow-lane:nth-child(n){border-top:1px solid #cdd6db;border-left:0}
  .article-flow-lane:first-child{border-top:0}
  .article-flow-link-editor{grid-template-columns:1fr}
  .article-flow-link-editor .action-group{grid-column:auto;align-items:stretch;flex-direction:column}
  .article-flow-link-editor .btn{width:100%}
}

/* ── Registar dobavljača ──────────────────────────────────────────────── */
.supplier-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.supplier-actions-bar{align-items:end;gap:14px}
.supplier-filters{display:grid;grid-template-columns:minmax(220px,1fr) minmax(160px,220px);gap:10px;align-items:end;flex:1 1 auto}
.supplier-filters label{margin:0}
.supplier-editor{margin-top:16px}
.supplier-editor .form-grid{margin-bottom:4px}
.supplier-actions{margin-top:18px;padding-top:16px;border-top:1px solid #dce2e6;align-items:center;gap:14px}
@media(max-width:720px){
  .supplier-kpis,.supplier-filters{grid-template-columns:1fr}
  .supplier-actions-bar{align-items:stretch}
}

/* ── Napredak prijenosa dokaza narudžbe ───────────────────────────────── */
.po-upload-progress{grid-column:1/-1;display:flex;align-items:center;gap:12px;margin-top:4px}
.po-upload-progress.hidden{display:none}
.po-upload-progress-track{flex:1 1 auto;height:8px;overflow:hidden;border-radius:999px;background:#dde4e8}
.po-upload-progress-bar{width:0;height:100%;border-radius:999px;background:var(--action,#0f766e);transition:width .15s linear}
.po-upload-progress span{flex:0 0 auto;min-width:190px;color:#56636b;font-size:11px;font-weight:750;font-variant-numeric:tabular-nums}
/* Nakon slanja poslužitelj još indeksira dokument; traka to prikazuje kao
   kretanje umjesto da lažno tvrdi da je posao gotov. */
.po-upload-progress[data-phase="processing"] .po-upload-progress-bar{
  background:linear-gradient(90deg,var(--action,#0f766e) 25%,#5aa79f 50%,var(--action,#0f766e) 75%);
  background-size:200% 100%;animation:po-upload-indeterminate 1.1s linear infinite}
@keyframes po-upload-indeterminate{from{background-position:200% 0}to{background-position:-200% 0}}
@media(prefers-reduced-motion:reduce){
  .po-upload-progress-bar{transition:none}
  .po-upload-progress[data-phase="processing"] .po-upload-progress-bar{animation:none}
}

/* ── Privici u sigurnom pregledu poruke ───────────────────────────────── */
.email-preview-attachments{margin:14px 0 0;padding:12px 14px;border:1px solid #d9e0e4;border-radius:7px;background:#f7f9fa}
.email-preview-attachments.empty{color:var(--muted,#65747d);font-size:12px}
.email-preview-attachments>strong{display:block;margin-bottom:8px;font-size:12px}
/* Kartice privitaka, po uzoru na Outlook: pravokutnik s tipom, nazivom i
   radnjama. Auto-fill drži ih u redu na širokom prozoru i slaga ih u stupac
   na uskom, bez zasebnog media upita. */
.message-part-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:9px}
.message-part{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-areas:"icon body" "actions actions";gap:4px 10px;align-items:center;padding:9px 10px;border:1px solid #d3dbe0;border-radius:7px;background:#fff}
.message-part.is-locked{background:#f5f7f8;border-style:dashed}
.message-part-icon{grid-area:icon;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:6px;background:#eef2f4;color:#4a5b64;font-size:10px;font-weight:800;letter-spacing:.03em}
.message-part-body{grid-area:body;display:flex;flex-direction:column;gap:2px;min-width:0}
.message-part-name{font-weight:700;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-part-meta{color:var(--muted,#65747d);font-size:11px;font-variant-numeric:tabular-nums}
.message-part-actions{grid-area:actions;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:2px}
.message-part-actions .btn{min-height:28px;padding:5px 10px;font-size:11px}
.message-part-actions .muted{font-size:11px}
.email-preview-attachments>small{display:block;margin-top:9px;color:var(--muted,#65747d);font-size:11px}

/* ── Isticanje cilja iz univerzalne pretrage ──────────────────────────── */
.search-focus-flash{
  animation:search-focus-pulse 2.8s ease-out 1;
  scroll-margin-top:96px;scroll-margin-bottom:32px;
}
@keyframes search-focus-pulse{
  0%,55%{box-shadow:inset 0 0 0 2px var(--action,#0f766e);background-color:#e6f4f1}
  100%{box-shadow:inset 0 0 0 2px transparent;background-color:transparent}
}
@media(prefers-reduced-motion:reduce){
  /* Bez animacije istaknuće mora ostati vidljivo, pa se ne gasi samo od sebe. */
  .search-focus-flash{animation:none;box-shadow:inset 0 0 0 2px var(--action,#0f766e);background-color:#e6f4f1}
}

/* ── Zaglavlje prozora ────────────────────────────────────────────────────
   `.modal-header` dosad nije imao nijedno pravilo, pa je zadano blokovsko
   slaganje spuštalo gumb za zatvaranje ispod naslova. Gumb je i u markupu
   pomaknut na prvo mjesto, pa redoslijed tabulatora prati vizualni raspored
   umjesto da se razilaze. */
.modal-header{display:flex;align-items:flex-start;gap:14px;margin:0 0 16px}
/* Blok s naslovom uzima preostalu širinu, pa gumb za zatvaranje sam završi uz
   desni rub. Gumb je i u markupu zadnji, pa redoslijed tabulatora prati
   vizualni raspored umjesto da se razilaze. */
.modal-header>div{flex:1 1 auto;min-width:0}
.modal-header h2{margin:0}

/* Zatvaranje koristi brand crvenu (--red), istu koju nose oznake, rubovi i
   naglasci kroz ostatak sučelja. */
.modal-close{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;min-width:34px;height:34px;min-height:34px;padding:0;
  border:1px solid #e2b9bd;
  border-radius:var(--radius-sm,4px);
  background:#fdf4f5;
  color:var(--red,#c92736);
  font-size:19px;line-height:1;font-weight:700;
}
.modal-close:hover{border-color:var(--red,#c92736);background:var(--red,#c92736);color:#fff}
.modal-close:active{border-color:var(--red-dark,#a91f2c);background:var(--red-dark,#a91f2c)}
.modal-close:focus-visible{outline:2px solid var(--red,#c92736);outline-offset:2px}

/* ── Zaprimanje na servis ─────────────────────────────────────────────── */
.svc-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc-actions-bar{align-items:end;gap:14px}
.svc-filters{display:grid;grid-template-columns:minmax(200px,1fr) minmax(170px,230px) minmax(140px,180px) minmax(160px,220px);gap:10px;align-items:end;flex:1 1 auto}
.svc-filters label{margin:0}
.svc-editor{margin-top:16px}
.svc-items-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 10px;padding-top:16px;border-top:1px solid #dce2e6}
.svc-items-head h3{margin:0;font-size:14px}
.svc-items{display:flex;flex-direction:column;gap:14px}
.svc-item{padding:13px 14px;border:1px solid #d3dbe0;border-left:4px solid var(--action,#0f766e);border-radius:8px;background:#fff}
/* Zatvoren uređaj ostaje vidljiv radi dokaza, ali je vizualno povučen. */
.svc-item.is-closed{border-left-color:#9aa7ae;background:#f6f8f9}
.svc-item-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}
.svc-item-index{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:#eef2f4;color:#4a5b64;font-size:11px;font-weight:800}
.svc-item-head .icon-btn{margin-left:auto}
.svc-lookup{position:relative;margin-bottom:11px}
.svc-lookup-input{width:100%}
.svc-linked{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px;padding:4px 9px;border-radius:6px;background:#eff8f4;color:#1f6b4d;font-size:11px;font-weight:700}
.svc-lookup-results{display:flex;flex-direction:column;gap:1px;max-height:230px;margin-top:6px;overflow:auto}
.svc-lookup-results:empty{display:none}
.svc-lookup-result{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2px 12px;padding:8px 10px;border:0;border-bottom:1px solid #e3e9ec;background:#f8fafb;text-align:left;cursor:pointer}
.svc-lookup-result:hover{background:#eef5f7}
.svc-lookup-result strong{font-size:12px;overflow-wrap:anywhere}
.svc-lookup-result span{color:#5f6b73;font-size:11px}
.svc-lookup-result small{grid-column:1/-1;color:#78838a;font-size:10px}
.svc-return-pick{margin-top:11px;padding:7px 10px;border:1px dashed #b9c5cb;border-radius:6px;background:#f7f9fa}
.svc-actions{margin-top:20px;padding-top:16px;border-top:1px solid #dce2e6;align-items:center;gap:14px}
.svc-history{margin-top:18px;font-size:12px}
.svc-history summary{cursor:pointer;font-weight:700}
.svc-history ul{margin:9px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;color:#5f6b73}
@media(max-width:900px){
  .svc-kpis{grid-template-columns:1fr}
  .svc-filters{grid-template-columns:1fr}
  .svc-actions-bar{align-items:stretch}
  .svc-lookup-result{grid-template-columns:minmax(0,1fr)}
}

/* ── Veza stavke ponude s narudžbama ──────────────────────────────────── */
.offer-order-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin-top:2px}
.offer-order-links-title{flex:1 0 100%;color:var(--muted,#65747d);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.offer-order-link{display:flex;flex-direction:column;gap:3px;min-width:220px;max-width:320px;padding:8px 10px;border:1px solid #cdd8dd;border-left:3px solid var(--action,#0f766e);border-radius:7px;background:#fff;text-align:left;cursor:pointer}
.offer-order-link:hover{border-color:#9fb1b9;background:#f4f8f9}
.offer-order-link-head{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.offer-order-link-head strong{font-size:12px}
.offer-order-link-meta{color:#5f6b73;font-size:11px;overflow-wrap:anywhere}
/* Napredak zaprimanja je glavna informacija na kartici, pa nosi boju. */
.offer-order-progress{font-weight:700;font-variant-numeric:tabular-nums}
.offer-order-progress.complete{color:#1f6b4d}
.offer-order-progress.partial{color:#8a5a00}
.offer-order-progress.open{color:#5f6b73}
@media(max-width:720px){.offer-order-link{min-width:0;max-width:none;flex:1 1 100%}}

/* ── Zajedničke kartice servisnih dokumenata ──────────────────────────── */
.svc-tabs{margin:20px 0 0}
.svc-tab-body{padding-top:14px}
.svcdoc-attachments{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px;margin-bottom:14px}
.svcdoc-attachment{display:flex;flex-direction:column;gap:7px;margin:0;padding:9px;border:1px solid #d3dbe0;border-radius:8px;background:#fff}
.svcdoc-thumb{display:block;width:100%;padding:0;overflow:hidden;border:0;border-radius:6px;background:#eef2f4;aspect-ratio:4/3}
.svcdoc-thumb:not(.is-file){cursor:zoom-in}
.svcdoc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.svcdoc-thumb.is-file{display:flex;align-items:center;justify-content:center;color:#4a5b64;font-size:15px;font-weight:800;letter-spacing:.05em}
.svcdoc-attachment figcaption{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:11px}
.svcdoc-attachment figcaption strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.svcdoc-attachment-actions{display:flex;align-items:center;gap:6px;margin-top:auto}
.svcdoc-attachment-actions .btn{flex:1 1 auto}
.svcdoc-upload{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;align-items:end;padding:12px;border:1px dashed #b9c5cb;border-radius:8px;background:#f7f9fa}
.svcdoc-upload label{margin:0}
.svcdoc-upload>small{grid-column:1/-1}
.svcdoc-work-summary{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:11px;padding:9px 12px;border-radius:7px;background:#f2f6f7;font-size:12px}
.svcdoc-work-summary strong{font-variant-numeric:tabular-nums}
.svcdoc-work-summary .btn{margin-left:auto}
.svcdoc-work-table input,.svcdoc-work-table select,.svcdoc-price-table input,.svcdoc-price-table select{min-width:0;width:100%}
.svcdoc-price-head{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:11px}
.svcdoc-totals{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:20px;margin-top:12px;padding-top:12px;border-top:2px solid #333b43;font-size:13px;font-variant-numeric:tabular-nums}
.svcdoc-total-gross{font-size:15px}
.svcdoc-total-gross strong{color:var(--action,#0f766e)}

/* ── Tok rada zahtjeva vanjskog servisa ───────────────────────────────── */
.warranty-flow{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:18px;padding:11px 13px;border-left:4px solid var(--action,#0f766e);border-radius:7px;background:#f2f8f7}
.warranty-flow-label{color:#5f6b73;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
@media(max-width:720px){
  .svcdoc-attachments{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .svcdoc-work-summary .btn{margin-left:0;width:100%}
}

/* XML uvoz: šest operativnih metrika moraju ostati zasebne kartice. Opći
   metric-strip namjerno je ravan na drugim stranicama, pa je ovo usko
   ograničeno na pregled uvoza. */
.imports-metric-cards{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  border:0;
  border-radius:0;
  background:transparent;
}
.imports-metric-cards>div,
.imports-metric-cards>div:last-child{
  min-width:0;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
}
.imports-metric-cards strong{overflow-wrap:anywhere}
@media(max-width:900px){.imports-metric-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .imports-metric-cards{grid-template-columns:1fr}
  .imports-metric-cards>div,
  .imports-metric-cards>div:last-child{border:1px solid var(--line)}
}

/* ── Pretraživo povezivanje ponuda, narudžbi i radnih naloga ────────────
   Tablica namjerno nasljeđuje vizualni jezik odabira artikla u Ponudi, ali
   dropdown ostaje zaseban sloj kako ne bi širio karticu poslovnog dokumenta. */
.business-link-picker-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.business-link-picker-grid.single{grid-template-columns:minmax(0,1fr)}
.work-order-detail-card{overflow:visible}
.business-link-picker{position:relative;min-width:0}
.business-link-picker>label{display:flex;flex-direction:column;gap:6px;margin:0;font-size:12px;font-weight:750}
.business-link-picker>label>input{width:100%;min-height:40px;margin:0;background:#fff}
.business-link-picker-dropdown{
  position:absolute;
  z-index:2147482500;
  top:calc(100% + 6px);
  left:0;
  display:flex;
  width:min(840px,calc(100vw - 56px));
  max-height:390px;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #aebbc2;
  border-radius:8px;
  background:#fff;
  box-shadow:0 18px 44px rgba(26,39,46,.24);
}
.business-link-picker-grid>.business-link-picker:nth-child(2) .business-link-picker-dropdown{right:0;left:auto}
.business-link-picker-grid.single .business-link-picker-dropdown{right:0;left:auto}
.business-link-picker-dropdown.hidden{display:none!important}
.business-link-picker-dropdown>.offer-picker-caption{position:static;flex:0 0 auto}
.business-link-picker-dropdown>.table-wrap{min-height:0;flex:1 1 auto;overflow:auto;border:0}
.business-link-picker-table{min-width:760px;margin:0}
.business-link-picker-table th{top:0}
.business-link-picker-table td{vertical-align:top}
.business-link-picker-table td small{display:block;margin-top:3px;color:var(--muted,#65747d);font-size:10.5px;line-height:1.35}
.business-link-picker-table tr.is-linked{background:#eff8f4}
.business-link-picker-table tr.is-blocked{background:#f5f6f7;color:#6c767c}
.business-link-select:disabled{cursor:not-allowed;filter:none;opacity:.64}
.business-link-empty{margin:12px}
.business-link-picker-dropdown .offer-picker-footer{flex:0 0 auto}
.business-link-safety{margin:9px 0 0;padding:8px 10px;border-left:3px solid #78909b;background:#f5f8f9;color:#5d6a72;font-size:11px;line-height:1.5}

@media(max-width:1100px){
  .business-link-picker-dropdown,
  .business-link-picker-grid>.business-link-picker:nth-child(2) .business-link-picker-dropdown,
  .business-link-picker-grid.single .business-link-picker-dropdown{
    position:fixed;
    top:18vh;
    right:12px;
    left:12px;
    width:auto;
    max-height:68vh;
  }
}
@media(max-width:760px){.business-link-picker-grid{grid-template-columns:minmax(0,1fr)}}

/* Retail register: explicit four-column KPI grid; only the result list changes
   while typing so focus, selection and native search controls remain intact. */
.stats-grid.four.retail-stats{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
.retail-stats .stat-card{text-align:left;color:var(--ink);font:inherit}
.retail-stats .stat-label{font-size:11px;font-weight:800}
.retail-stats .stat-value{font-size:28px;font-weight:800}
.retail-stats .stat-sub{font-size:12px;font-weight:400;letter-spacing:normal;text-transform:none}
.retail-stat-filter:hover{border-color:var(--action)}
.retail-stat-filter[aria-pressed="true"]{border-top-color:var(--action);background:var(--soft-2)}
.retail-stat-filter:focus-visible,.retail-license-quick-filters button:focus-visible{outline:3px solid var(--action);outline-offset:3px}
.retail-license-toolbar{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));align-items:start;gap:14px}
.retail-license-toolbar label{min-width:0;margin:0}
.retail-license-toolbar input,.retail-license-toolbar select{min-width:0}
.retail-license-toolbar .field-help{display:block;margin-top:7px;line-height:1.5}
.retail-license-quick-filters{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 18px}
.retail-license-quick-filters [aria-pressed="true"]{border-color:var(--action);color:var(--action-dark);background:var(--soft-2)}
.retail-license-results{margin:18px 0 0;font-size:12px;scroll-margin-top:90px}
.retail-license-grid>.empty-state{grid-column:1/-1}
.retail-license-card{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.retail-license-grid>.card+.card{margin-top:0}
.retail-license-card>.card-body{flex:1}
.retail-license-card .card-header>div{min-width:0}
.retail-license-card .card-footer{flex-wrap:wrap}
.retail-license-pagination{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin:18px 0;font-size:12px;color:var(--muted)}
.retail-license-pagination:empty{display:none}
@media(max-width:1100px){.retail-license-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1000px){.stats-grid.four.retail-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.retail-license-toolbar{grid-template-columns:minmax(0,1fr)}.retail-license-quick-filters{padding:0 16px 16px}}
@media(max-width:540px){.stats-grid.four.retail-stats{grid-template-columns:minmax(0,1fr)}}

/* Software inventory: make the age of an offline/stale snapshot explicit. */
.software-snapshot-date{
  margin:0 0 10px;
  color:var(--ink);
  font-size:15px;
  font-weight:800;
  line-height:1.35;
}
.software-snapshot-date.is-old{color:var(--danger)}

/* Ticketing UI v2 --------------------------------------------------------
   Ticket detail is a dedicated helpdesk workspace: sticky identity/actions,
   conversation-first main column and compact operational properties aside. */
.visually-hidden {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.ticket-index { display:grid; gap:16px; }
.ticket-index-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:2px 0 4px; }
.ticket-index-head h2 { margin:3px 0 2px; font-size:24px; line-height:1.15; }
.ticket-index-head p { margin:0; color:var(--muted); font-size:12px; }
.ticket-quick-filters { display:flex; flex-wrap:wrap; gap:8px; }
.ticket-quick-filter { display:inline-flex; align-items:center; gap:9px; min-height:38px; padding:7px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-pill); background:var(--surface); color:var(--ink-2); cursor:pointer; font:inherit; font-size:12px; font-weight:700; }
.ticket-quick-filter strong { display:grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:var(--radius-pill); background:var(--surface-muted); color:var(--muted); font-size:10px; }
.ticket-quick-filter:hover { border-color:#75939c; background:#f7fafb; }
.ticket-quick-filter.is-active { border-color:#1d4752; background:#1d4752; color:#fff; }
.ticket-quick-filter.is-active strong { background:#fff; color:#1d4752; }
.ticket-quick-filter:disabled { cursor:not-allowed; opacity:.48; }
.ticket-mailbox-toolbar { display:grid; grid-template-columns:minmax(320px,1fr) auto auto; gap:12px; align-items:end; }
.ticket-mailbox-search { display:grid; gap:5px; margin:0; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.ticket-mailbox-search input { min-width:0; width:100%; }
.ticket-filter-drawer { position:relative; }
.ticket-filter-drawer > summary { min-height:40px; display:flex; align-items:center; padding:8px 12px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink-2); cursor:pointer; font-size:12px; font-weight:700; list-style:none; }
.ticket-filter-drawer > summary::-webkit-details-marker { display:none; }
.ticket-filter-drawer[open] > summary { border-color:#75939c; }
.ticket-filter-grid { position:absolute; z-index:16; top:calc(100% + 6px); right:0; width:min(760px,90vw); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:16px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); box-shadow:0 18px 50px rgba(23,35,43,.18); }
.ticket-filter-grid label { margin:0; }
.ticket-filter-grid .btn { align-self:end; }
.ticket-mailbox-result { min-height:40px; display:flex; align-items:center; gap:7px; padding:6px 10px; color:var(--muted); font-size:11px; white-space:nowrap; }
.ticket-mailbox-result strong { color:var(--ink); font-size:16px; }
.ticket-overdue-count { color:var(--danger); font-weight:700; }
.ticket-mailbox-card { overflow:hidden; }
.ticket-mailbox-card .table-wrap { max-height:calc(100vh - 250px); min-height:420px; }
.ticket-mailbox-table { table-layout:fixed; }
.ticket-mailbox-table th:nth-child(1) { width:13%; }
.ticket-mailbox-table th:nth-child(2) { width:18%; }
.ticket-mailbox-table th:nth-child(3) { width:29%; }
.ticket-mailbox-table th:nth-child(4) { width:14%; }
.ticket-mailbox-table th:nth-child(5) { width:14%; }
.ticket-mailbox-table th:nth-child(6) { width:12%; }
.ticket-mailbox-table td { vertical-align:middle; padding-top:13px; padding-bottom:13px; }
.ticket-mailbox-table td > strong { display:block; overflow:hidden; text-overflow:ellipsis; }
.ticket-mailbox-table td > small { display:block; margin-top:3px; overflow:hidden; color:var(--muted); font-size:10px; line-height:1.35; text-overflow:ellipsis; }
.ticket-mailbox-row { cursor:pointer; }
.ticket-mailbox-row:hover { background:#f3f7f8!important; }
.ticket-mailbox-row:focus { outline:2px solid #5a8b99; outline-offset:-2px; }
.ticket-mailbox-row.is-overdue td:first-child { box-shadow:inset 3px 0 0 var(--danger); }
.ticket-mailbox-empty { padding:42px!important; text-align:center; color:var(--muted); }

.ticket-detail-host { min-width:0; overflow-x:clip; }
.ticket-detail-shell { min-width:0; overflow-x:clip; }
.ticket-detail-header { position:sticky; top:60px; z-index:9; display:flex; align-items:flex-start; justify-content:space-between; gap:22px; margin:-28px -34px 22px; padding:15px 34px 16px; border-bottom:1px solid #163942; background:#1d4752; color:#f7fbfc; box-shadow:0 8px 24px rgba(16,38,44,.16); }
.ticket-detail-header-main { min-width:0; display:flex; align-items:flex-start; gap:18px; }
.ticket-back-link { flex:0 0 auto; margin-top:3px; padding:4px 0; border:0; background:transparent; color:#d3e2e6; cursor:pointer; font:inherit; font-size:11px; font-weight:750; white-space:nowrap; }
.ticket-back-link:hover { color:#fff; text-decoration:underline; }
.ticket-detail-title { min-width:0; }
.ticket-detail-number { color:#b9d0d6; font-size:10px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.ticket-detail-title h2 { max-width:900px; margin:2px 0 6px; overflow:hidden; color:#fff; font-size:20px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.ticket-detail-meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; color:#d3e2e6; font-size:10px; }
.ticket-detail-meta .badge { border:1px solid rgba(255,255,255,.22); }
.ticket-detail-actions { flex:0 0 auto; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.ticket-detail-header .btn { min-height:37px; }
.ticket-detail-header .btn-secondary { border-color:#7f9ca4; background:#fff; color:#183e48; }
.ticket-detail-header .btn-secondary:hover { background:#eaf2f4; }
.ticket-detail-header .btn-success { border-color:#d8f2e4; background:#157347; color:#fff; }
.ticket-more-menu { position:relative; }
.ticket-more-menu > summary { min-width:42px; justify-content:center; list-style:none; cursor:pointer; }
.ticket-more-menu > summary::-webkit-details-marker { display:none; }
.ticket-more-menu-popover { position:absolute; top:calc(100% + 7px); right:0; z-index:22; min-width:190px; overflow:hidden; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:#fff; box-shadow:0 18px 44px rgba(16,38,44,.24); }
.ticket-more-menu-popover button { width:100%; padding:10px 12px; border:0; border-bottom:1px solid var(--line-soft); background:#fff; color:var(--ink); text-align:left; cursor:pointer; font:inherit; font-size:12px; }
.ticket-more-menu-popover button:last-child { border-bottom:0; }
.ticket-more-menu-popover button:hover { background:var(--surface-muted); }
.ticket-more-menu-popover button.is-danger { color:var(--danger); font-weight:750; }
.ticket-detail-layout { display:grid; grid-template-columns:minmax(0,1.85fr) minmax(310px,.72fr); gap:20px; align-items:start; }
.ticket-main-column,.ticket-side-column { min-width:0; }
.ticket-main-column { display:grid; gap:16px; }
.ticket-side-column { position:sticky; top:158px; display:grid; gap:12px; align-self:start; padding-right:2px; overflow-x:clip; }
.ticket-content-section,.ticket-side-section,.ticket-composer,.ticket-system-details { border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.ticket-content-section { padding:18px; }
.ticket-section-head,.ticket-side-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.ticket-section-head { margin-bottom:14px; }
.ticket-section-head h3,.ticket-side-section-head h3 { margin:0; font-size:14px; }
.ticket-section-head p { margin:3px 0 0; color:var(--muted); font-size:11px; }
.ticket-section-head > span,.ticket-side-section-head > span { color:var(--muted); font-size:10px; }
.ticket-conversation-feed { display:grid; gap:11px; }
.ticket-message { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.ticket-message > header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--line-soft); background:#f8fafb; }
.ticket-message > header > div { min-width:0; }
.ticket-message > header strong,.ticket-message > header span { display:block; }
.ticket-message > header strong { font-size:12px; }
.ticket-message > header div > span { margin-top:1px; color:var(--muted); font-size:9px; }
.ticket-message-body { padding:13px 14px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; line-height:1.6; }
.ticket-message-request { border-left:3px solid #4e7fa8; }
.ticket-message-client { border-left:3px solid var(--client-line); background:var(--client-bg); }
.ticket-message-client > header { background:#e6f1f9; }
.ticket-message-internal { border-left:3px solid var(--internal-line); background:var(--internal-bg); }
.ticket-message-internal > header { background:#fff3d6; }
.ticket-activity-system { display:grid; grid-template-columns:16px minmax(0,1fr); gap:8px; align-items:start; padding:5px 6px; color:var(--muted); }
.ticket-activity-system > span { width:8px; height:8px; margin-top:6px; border:2px solid #78909a; border-radius:50%; background:#fff; }
.ticket-activity-system small { display:block; font-size:9px; }
.ticket-activity-system p { margin:2px 0 0; color:#50616a; font-size:11px; line-height:1.45; }
.ticket-attachment-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ticket-system-details { overflow:hidden; }
.ticket-system-details > summary { padding:13px 16px; cursor:pointer; color:var(--ink-2); font-size:12px; font-weight:750; }
.ticket-system-details .sysinfo { margin:0; border:0; border-top:1px solid var(--line); border-radius:0; }
.ticket-composer { overflow:visible; }
.ticket-composer-tabs { display:flex; border-bottom:1px solid var(--line); background:#f7f9fa; }
.ticket-composer-tab { margin:0; cursor:pointer; }
.ticket-composer-tab input { position:absolute; opacity:0; pointer-events:none; }
.ticket-composer-tab span { display:block; padding:10px 14px; border-bottom:2px solid transparent; color:var(--muted); font-size:12px; font-weight:750; }
.ticket-composer-tab input:checked + span { border-bottom-color:var(--action); background:#fff; color:var(--action-dark); }
.ticket-composer.is-internal .ticket-composer-tab input:checked + span { border-bottom-color:var(--internal-line); color:var(--internal-ink); }
.ticket-composer-tab input:disabled + span { cursor:not-allowed; opacity:.45; }
.ticket-composer textarea { width:100%; min-height:128px; margin:0; padding:14px; border:0; border-radius:0; resize:vertical; background:#fff; }
.ticket-composer textarea:focus { outline:2px solid #7aa6b2; outline-offset:-2px; }
.ticket-composer.is-internal textarea { background:#fffdf7; }
.ticket-composer-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 12px; border-top:1px solid var(--line); background:#f8fafb; }
.ticket-composer-footer > div { display:flex; align-items:center; gap:9px; }
.ticket-composer-footer > div:last-child { justify-content:flex-end; }
.ticket-composer-footer small { max-width:360px; color:var(--muted); font-size:9px; line-height:1.35; }
.ticket-composer-tools { flex-wrap:wrap; }
.ticket-file-button { margin:0; cursor:pointer; }
.ticket-composer-upload-status { color:var(--green); font-size:10px; font-weight:700; }

.ticket-side-section { padding:14px; }
.ticket-side-section-head { margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid var(--line-soft); }
.ticket-properties-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; }
.ticket-properties-grid .ticket-property,.ticket-properties-grid .ticket-property-editor { align-content:start; }
.ticket-message-label { margin:0 0 7px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.ticket-property { display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; padding:9px 0; border-bottom:1px solid var(--line-soft); }
.ticket-property:last-child { border-bottom:0; }
.ticket-property > span,.ticket-property-editor > label { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; }
.ticket-property > div { min-width:0; color:var(--ink); font-size:11px; overflow-wrap:anywhere; }
.ticket-property > div > a,.ticket-property > div > strong,.ticket-property > div > button { display:block; }
.ticket-property-note { display:block; margin-top:3px; color:var(--muted); font-size:9px; line-height:1.35; }
.ticket-property-editor { display:grid; gap:7px; padding:10px 0; border-bottom:1px solid var(--line-soft); }
.ticket-property-editor:last-child { border-bottom:0; }
.ticket-property-inline { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:center; }
.ticket-property-inline select { min-width:0; }
.ticket-assignee-editor { position:relative; }
.ticket-assignee-picker { position:relative; }
.ticket-assignee-picker input[type="search"] { width:100%; }
.ticket-assignee-options { position:absolute; z-index:24; top:calc(100% + 5px); right:0; left:0; max-height:280px; overflow:auto; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:#fff; box-shadow:0 16px 36px rgba(23,35,43,.2); }
.ticket-assignee-option { display:block; width:100%; padding:9px 10px; border:0; border-bottom:1px solid var(--line-soft); background:#fff; color:var(--ink); text-align:left; cursor:pointer; font:inherit; }
.ticket-assignee-option:last-child { border-bottom:0; }
.ticket-assignee-option:hover,.ticket-assignee-option:focus { outline:0; background:#eef5f7; }
.ticket-assignee-option.is-current { box-shadow:inset 3px 0 0 var(--action); }
.ticket-assignee-option strong,.ticket-assignee-option small { display:block; }
.ticket-assignee-option strong { font-size:11px; }
.ticket-assignee-option small { margin-top:2px; color:var(--muted); font-size:9px; }
.ticket-assignee-empty { padding:14px; color:var(--muted); font-size:10px; }
.ticket-assignee-directory-note { margin-top:-2px; }
.ticket-related-record { display:block; width:100%; padding:10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#f8fafb; color:var(--ink); text-align:left; cursor:pointer; font:inherit; }
.ticket-related-record:hover { border-color:#8da7af; background:#f1f6f8; }
.ticket-related-record strong,.ticket-related-record span { display:block; }
.ticket-related-record strong { font-size:11px; }
.ticket-related-record span { margin-top:3px; color:var(--muted); font-size:9px; }
.ticket-side-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ticket-compact-field { display:grid; gap:5px; margin:10px 0 0; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; }
.ticket-contact-summary { display:grid; gap:2px; margin-top:10px; padding-top:9px; border-top:1px solid var(--line-soft); font-size:10px; }
.ticket-contact-summary a { color:var(--action-dark); }
.ticket-side-column .ticket-asset-link-panel { margin:0; padding:14px; border-color:var(--line); background:#fff; }
.ticket-side-column .ticket-asset-link-panel .ticket-preparation-head { margin-bottom:10px; padding-bottom:8px; }
.ticket-side-column .ticket-asset-link-panel .ticket-preparation-head p { font-size:10px; }
.ticket-side-column .ticket-asset-linker { display:block; }
.ticket-side-column .ticket-asset-table-picker > small { font-size:9px; }
.ticket-portal-section .notice { margin:0!important; font-size:10px; }
.ticket-portal-section .notice .action-group { margin-top:8px; }

@media (max-width:1180px) {
  .ticket-detail-layout { grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr); }
  .ticket-detail-header { align-items:stretch; flex-direction:column; gap:10px; }
  .ticket-detail-actions { justify-content:flex-start; }
  .ticket-side-column { top:205px; }
}
@media (max-width:980px) {
  .ticket-mailbox-toolbar { grid-template-columns:1fr auto; }
  .ticket-mailbox-result { grid-column:1/-1; justify-content:flex-end; }
  .ticket-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ticket-detail-layout { grid-template-columns:1fr; }
  .ticket-side-column { position:static; max-height:none; overflow:visible; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ticket-properties-section,.ticket-portal-section,.ticket-side-column .ticket-asset-link-panel { grid-column:1/-1; }
  .ticket-properties-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ticket-attachment-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px) {
  .ticket-detail-header { margin:-26px -22px 20px; padding:14px 22px; }
}
@media (max-width:720px) {
  .ticket-index-head { align-items:stretch; flex-direction:column; }
  .ticket-index-head .btn { width:100%; }
  .ticket-quick-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ticket-quick-filter { justify-content:space-between; }
  .ticket-mailbox-toolbar { grid-template-columns:1fr; }
  .ticket-filter-drawer > summary { justify-content:center; }
  .ticket-filter-grid { position:static; width:100%; grid-template-columns:1fr; margin-top:7px; box-shadow:none; }
  .ticket-mailbox-result { grid-column:auto; justify-content:flex-start; flex-wrap:wrap; }
  .ticket-mailbox-card .table-wrap { max-height:none; overflow:visible; }
  .ticket-mailbox-table,.ticket-mailbox-table tbody,.ticket-mailbox-table tr,.ticket-mailbox-table td { display:block; width:100%; }
  .ticket-mailbox-table thead { display:none; }
  .ticket-mailbox-table tr { padding:11px 12px; border-bottom:1px solid var(--line); }
  .ticket-mailbox-table td { padding:4px 0; border:0; }
  .ticket-mailbox-table td:nth-child(4),.ticket-mailbox-table td:nth-child(5),.ticket-mailbox-table td:nth-child(6) { display:inline-block; width:auto; margin-right:12px; }
  .ticket-mailbox-table td:nth-child(6) small { display:none; }
  .ticket-detail-header { top:58px; margin:-22px -16px 18px; padding:12px 16px 13px; }
  .ticket-detail-header-main { gap:9px; flex-direction:column; }
  .ticket-back-link { margin:0; }
  .ticket-detail-title h2 { max-width:100%; font-size:18px; white-space:normal; }
  .ticket-detail-actions { position:fixed; z-index:25; inset:auto 0 68px; display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; padding:9px 10px; border-top:1px solid var(--line-strong); background:rgba(255,255,255,.98); box-shadow:0 -8px 24px rgba(23,35,43,.14); }
  .ticket-detail-actions .btn,.ticket-detail-actions .ticket-more-menu { flex:0 0 auto; }
  .ticket-detail-shell { padding-bottom:74px; }
  .ticket-side-column { grid-template-columns:1fr; }
  .ticket-properties-grid { grid-template-columns:1fr; }
  .ticket-properties-section,.ticket-portal-section,.ticket-side-column .ticket-asset-link-panel { grid-column:auto; }
  .ticket-composer-footer { align-items:stretch; flex-direction:column; }
  .ticket-composer-footer > div,.ticket-composer-footer > div:last-child { align-items:stretch; justify-content:flex-start; flex-wrap:wrap; }
  .ticket-composer-footer > div:last-child .btn { width:100%; }
  .ticket-attachment-grid { grid-template-columns:1fr; }
  .ticket-property { grid-template-columns:84px minmax(0,1fr); }
}

/* ========================================================================== 
   Operations UI v2 — Offers, Purchase Orders and Work Orders
   Mirrors the Ticketing v2 interaction model: index -> focused workspace.
   ========================================================================== */
.operation-index,
.operation-workspace{min-width:0;max-width:100%;overflow-x:clip}
.operation-index-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.operation-index-head h1{margin:.18rem 0 .35rem;font-size:clamp(1.7rem,2.6vw,2.35rem);line-height:1.05}
.operation-index-head p{margin:0;color:var(--text-muted,#667085);max-width:780px}
.operation-quick-filters{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.operation-filter{border:1px solid #d7dee6;background:#fff;color:#344054;border-radius:999px;padding:7px 11px;font:inherit;font-size:13px;font-weight:650;cursor:pointer}
.operation-filter:hover{border-color:#aab7c4;background:#f8fafc}
.operation-filter.is-active{background:#101828;border-color:#101828;color:#fff}
.operation-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin-bottom:14px}
.operation-search-row label{min-width:0}
.operation-search-row input[type="search"]{width:100%;min-width:0}
.operation-table-card{border:1px solid #dfe5eb;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.035)}
.operation-table{width:100%;border-collapse:collapse;table-layout:fixed}
.operation-table th{padding:10px 12px;text-align:left;font-size:11px;letter-spacing:.045em;text-transform:uppercase;color:#667085;background:#f8fafc;border-bottom:1px solid #e4e9ee}
.operation-table td{padding:12px;border-bottom:1px solid #edf1f4;vertical-align:top;overflow-wrap:anywhere;word-break:normal}
.operation-table tbody tr:last-child td{border-bottom:0}
.operation-click-row{cursor:pointer;outline:none;transition:background .14s ease,box-shadow .14s ease}
.operation-click-row:hover,.operation-click-row:focus-visible{background:#f8fbfd;box-shadow:inset 3px 0 0 #101828}
.operation-click-row.is-overdue{background:#fff8f7}
.operation-click-row.is-overdue:hover{background:#fff2f0}
.operation-primary-cell strong{display:block;color:#101828}
.operation-primary-cell small,.operation-muted{display:block;color:#667085;margin-top:3px;font-size:12px}
.operation-status-stack{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.operation-empty{padding:28px;text-align:center;color:#667085}

.operation-workspace{display:block}
.operation-sticky-header{position:sticky;top:60px;z-index:28;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 16px;margin:-1px 0 18px;background:rgba(17,24,39,.97);color:#fff;border-radius:0 0 14px 14px;box-shadow:0 10px 28px rgba(16,24,40,.14);backdrop-filter:blur(10px)}
.operation-header-main{display:flex;align-items:center;gap:12px;min-width:0}
.operation-back{flex:0 0 auto;border:1px solid rgba(255,255,255,.24);background:transparent;color:#fff;border-radius:9px;width:38px;height:38px;cursor:pointer;font-size:18px}
.operation-header-copy{min-width:0}
.operation-header-copy h1{margin:0;font-size:clamp(1.03rem,1.7vw,1.32rem);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(60vw,820px)}
.operation-header-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:5px;font-size:12px;color:#d0d5dd}
.operation-header-meta .badge{font-size:10px}
.operation-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
.operation-sticky-header .btn-secondary{background:#fff;color:#101828;border-color:#fff}
.operation-sticky-header .btn-primary{background:#e8f0ff;color:#101828;border-color:#e8f0ff}
.operation-more-menu{position:relative}
.operation-more-menu>summary{list-style:none;display:grid;place-items:center;width:39px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:9px;cursor:pointer;font-size:21px;line-height:1}
.operation-more-menu>summary::-webkit-details-marker{display:none}
.operation-more-menu[open]>summary{background:rgba(255,255,255,.12)}
.operation-menu{position:absolute;right:0;top:46px;z-index:60;min-width:230px;padding:6px;background:#fff;color:#101828;border:1px solid #dfe5eb;border-radius:11px;box-shadow:0 14px 38px rgba(16,24,40,.18)}
.operation-menu button,.operation-menu a{display:block;width:100%;padding:9px 10px;border:0;background:transparent;color:inherit;text-align:left;text-decoration:none;border-radius:7px;font:inherit;font-size:13px;cursor:pointer}
.operation-menu button:hover,.operation-menu a:hover{background:#f3f6f8}
.operation-menu .danger-text{color:#b42318}
.operation-layout{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(285px,.66fr);gap:18px;align-items:start;min-width:0}
.operation-main,.operation-sidebar{min-width:0}
.operation-main{display:grid;gap:16px}
.operation-sidebar{position:sticky;top:143px;display:grid;gap:12px;align-self:start}
.operation-section,.operation-side-card{min-width:0;border:1px solid #dfe5eb;border-radius:13px;background:#fff;padding:16px;box-shadow:0 1px 2px rgba(16,24,40,.025)}
.operation-section>h2,.operation-section .section-heading-compact h3,.operation-section .section-heading-actions h3,.operation-side-card h2{margin-top:0}
.operation-section>h2,.operation-side-card h2{font-size:15px;margin-bottom:12px}
.operation-prose{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;color:#344054}
.operation-prose.is-empty{color:#98a2b3;font-style:italic}
.operation-properties{display:grid;gap:0}
.operation-property{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:10px;padding:8px 0;border-bottom:1px solid #edf1f4;font-size:13px}
.operation-property:last-child{border-bottom:0}
.operation-property dt{color:#667085}
.operation-property dd{margin:0;color:#101828;text-align:right;overflow-wrap:anywhere}
.operation-property dd strong{font-size:15px}
.operation-links{display:grid;gap:6px}
.operation-link{display:flex;width:100%;justify-content:space-between;align-items:center;gap:10px;padding:9px 10px;border:1px solid #e4e9ee;background:#fff;border-radius:9px;color:#101828;text-align:left;cursor:pointer;font:inherit}
.operation-link:hover{background:#f8fafc;border-color:#cbd5df}
.operation-link span{color:#667085;font-size:12px}
.operation-totals{margin-top:8px;border-top:1px solid #e4e9ee;padding-top:6px}
.operation-totals .operation-property:last-child dd{font-size:17px;font-weight:750}
.operation-doc-list{display:grid;gap:8px}
.operation-doc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px;border:1px solid #e6ebef;border-radius:10px;background:#fbfcfd}
.operation-doc-row>div:first-child{min-width:0}
.operation-doc-row strong,.operation-doc-row small{display:block;overflow-wrap:anywhere}
.operation-doc-row small{color:#667085;margin-top:3px}
.operation-doc-row .row-actions{display:flex;gap:6px;align-items:center;flex:0 0 auto}
.operation-progress{min-width:110px}
.operation-progress-track{height:6px;background:#e8edf2;border-radius:999px;overflow:hidden;margin-top:5px}
.operation-progress-fill{height:100%;background:#344054;border-radius:999px;min-width:0}
.operation-progress.is-complete .operation-progress-fill{background:#067647}
.operation-progress.is-partial .operation-progress-fill{background:#b54708}
.operation-progress small{color:#667085}
.operation-warning-inline{display:inline-flex;align-items:center;gap:5px;color:#b54708;font-size:12px;font-weight:650;margin-top:4px}
.operation-late{display:inline-flex;align-items:center;gap:5px;color:#b42318;font-size:12px;font-weight:700}
.operation-v2-items th:nth-child(1){width:19%}.operation-v2-items th:nth-child(2){width:auto}.operation-v2-items th:nth-last-child(-n+4){width:12%}
.purchase-order-receive-modal{width:min(760px,100%)}
.operation-receive-items{display:grid;gap:12px;margin:14px 0}
.operation-receive-choice{display:grid;gap:12px;border:1px solid #d7e0e5;border-radius:12px;padding:14px;background:#fff}
.operation-receive-summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px}
.operation-receive-summary strong,.operation-receive-summary small{display:block}
.operation-receive-summary strong{color:#1d4752;font-size:14px;line-height:1.35}
.operation-receive-summary small{color:#667085;margin-top:3px;overflow-wrap:anywhere}
.operation-receive-code{max-width:170px;text-align:right}
.operation-receive-controls{display:grid;grid-template-columns:minmax(180px,240px) auto;align-items:end;justify-content:start;gap:10px;padding-top:10px;border-top:1px solid #e6ecef}
.operation-receive-quantity{display:grid;gap:5px;margin:0;font-weight:700;color:#344054}
.operation-receive-quantity span{font-size:12px}
.operation-receive-quantity input{width:100%;min-width:0;height:42px;margin:0;padding:8px 10px;font-size:16px;font-weight:700;text-align:right}
.operation-receive-all{height:42px;min-width:112px;border:1px solid #9eb1b8;border-radius:8px;background:#fff;color:#1d4752;font:inherit;font-weight:750;cursor:pointer}
.operation-receive-all:hover{background:#f2f6f7;border-color:#1d4752}
.operation-receive-all span{display:inline-block;margin-left:4px;color:#667085;font-size:11px;font-weight:650}
.operation-receive-invalid{padding:9px 10px;border-radius:8px;background:#fff7ed;color:#9a3412;font-size:12px;font-weight:650}
.operation-finish-grid{display:grid;gap:12px}
.operation-finish-grid fieldset{border:1px solid #dfe5eb;border-radius:10px;padding:10px}
.operation-finish-grid legend{padding:0 5px;font-weight:700}
.operation-finish-grid .check-line{margin:6px 0}
.operation-secondary-note{font-size:12px;color:#667085;margin:8px 0 0}
.operation-edit-shell{min-width:0}
.operation-edit-shell>.operation-sticky-header{margin-bottom:14px}

@media (max-width:980px){
  .operation-layout{grid-template-columns:1fr}
  .operation-sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr));order:2}
}
@media (max-width:760px){
  .operation-index-head{display:grid;grid-template-columns:1fr}
  .operation-index-head .action-group{justify-content:flex-start}
  .operation-search-row{grid-template-columns:1fr}
  .operation-sticky-header{top:52px;align-items:flex-start;padding:10px 11px;border-radius:0 0 11px 11px}
  .operation-header-main{align-items:flex-start;min-width:0}
  .operation-header-copy h1{max-width:58vw;font-size:1rem}
  .operation-header-meta{gap:5px}
  .operation-header-actions .btn{padding:8px 9px;font-size:12px}
  .operation-header-actions .operation-secondary-action{display:none}
  .operation-sidebar{grid-template-columns:1fr}
  .operation-section,.operation-side-card{padding:13px;border-radius:11px}
  .operation-table-card{border:0;background:transparent;box-shadow:none;overflow:visible}
  .operation-table,.operation-table tbody{display:block;width:100%}
  .operation-table thead{display:none}
  .operation-table tr{display:grid;grid-template-columns:1fr;gap:7px;margin-bottom:9px;padding:12px;border:1px solid #dfe5eb;border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.025)}
  .operation-table td{display:grid;grid-template-columns:minmax(92px,.7fr) minmax(0,1.3fr);gap:8px;padding:0;border:0;align-items:start}
  .operation-table td::before{content:attr(data-label);color:#667085;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
  .operation-table td.operation-primary-cell{display:block;padding-bottom:3px}
  .operation-table td.operation-primary-cell::before{content:none}
  .operation-property{grid-template-columns:1fr;gap:3px}
  .operation-property dd{text-align:left}
  .operation-doc-row{align-items:flex-start;flex-direction:column}
  .operation-doc-row .row-actions{flex-wrap:wrap}
  .operation-receive-summary{grid-template-columns:1fr}
  .operation-receive-code{text-align:left;max-width:none}
  .operation-receive-controls{grid-template-columns:1fr auto}
}

/* ========================================================================== 
   UI polish 1.16.53 — shared document colour, ticket header parity, no x-scroll
   ========================================================================== */
:root{--document-heading:#1d4752;--document-heading-border:#163942}

/* Table headings use one shared dark teal across the application. */
.content table thead th{
  background:var(--document-heading)!important;
  color:#fff!important;
  border-bottom-color:var(--document-heading-border)!important;
}

/* Offer editor: section bars and inactive mode follow the shared document colour. */
.offer-editor .editor-body>.form-section>h3{
  background:var(--document-heading);
  color:#fff;
  border-bottom-color:var(--document-heading-border);
}
.offer-editor .editor-header .btn-secondary[data-action="offer-mode"]{
  border-color:rgba(255,255,255,.62);
  background:transparent;
  color:#fff;
}
.offer-editor .editor-header .btn-secondary[data-action="offer-mode"]:hover{
  border-color:#fff;
  background:rgba(255,255,255,.12);
  color:#fff;
}

/* Keep the status selector compact enough for the full action label. */
.offer-workflow-bar .offer-status-actions{
  display:grid;
  grid-template-columns:minmax(170px,220px) minmax(190px,max-content);
  align-items:end;
  gap:8px;
  flex:0 0 auto;
}
.offer-workflow-bar .offer-status-actions .offer-status-control,
.offer-workflow-bar .offer-status-actions #offer-status{
  min-width:0;
  width:100%;
}
.offer-workflow-bar .offer-status-actions .btn{
  min-width:190px;
  width:auto;
  white-space:nowrap;
  padding-inline:16px;
}

/* Ticket detail follows the same focused sticky-workspace language as offers/orders. */
.ticket-detail-host,
.ticket-detail-shell{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:clip;
}
.ticket-detail-header{
  top:60px;
  align-items:center;
  gap:18px;
  margin:-1px 0 18px;
  padding:13px 16px;
  border:0;
  border-bottom:1px solid var(--document-heading-border);
  border-radius:0 0 14px 14px;
  background:var(--document-heading);
  box-shadow:0 10px 28px rgba(16,38,44,.14);
}
.ticket-detail-header-main{
  min-width:0;
  align-items:center;
  gap:12px;
}
.ticket-back-link{
  display:grid;
  place-items:center;
  flex:0 0 38px;
  width:38px;
  height:38px;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.28);
  border-radius:9px;
  background:transparent;
  color:#fff;
  font-size:18px;
  line-height:1;
  text-decoration:none;
}
.ticket-back-link:hover{
  border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.1);
  color:#fff;
  text-decoration:none;
}
.ticket-detail-title h2{
  max-width:min(60vw,820px);
  margin:0;
  font-size:clamp(1.03rem,1.7vw,1.32rem);
  line-height:1.2;
}
.ticket-detail-meta{margin-top:5px;gap:7px;color:#d3e2e6;font-size:11px}
.ticket-detail-actions{align-items:center;flex-wrap:wrap;gap:8px}
.ticket-detail-layout,
.ticket-main-column,
.ticket-side-column,
.ticket-content-section,
.ticket-composer,
.ticket-system-details{min-width:0;max-width:100%}
.ticket-system-details .sysinfo{max-width:100%;overflow:auto;overflow-wrap:anywhere}

@media (max-width:1180px){
  .ticket-detail-header{align-items:stretch;flex-direction:column;gap:10px}
  .ticket-detail-title h2{max-width:100%}
}
@media (max-width:1050px){
  .offer-workflow-bar .offer-status-actions{
    grid-template-columns:1fr;
    width:100%;
  }
  .offer-workflow-bar .offer-status-actions .btn{width:100%;min-width:0}
}
@media (max-width:900px){
  .ticket-detail-header{margin:-1px 0 18px;padding:12px 14px}
}
@media (max-width:720px){
  .ticket-detail-header{top:58px;margin:-1px 0 16px;padding:10px 11px;border-radius:0 0 11px 11px}
  .ticket-detail-header-main{align-items:flex-start;flex-direction:row;gap:9px}
  .ticket-detail-title h2{font-size:1rem;white-space:normal}
  .ticket-detail-actions{
    position:static;
    inset:auto;
    display:flex;
    flex-wrap:wrap;
    overflow:visible;
    padding:0;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .ticket-detail-actions .btn,
  .ticket-detail-actions .ticket-more-menu{flex:0 1 auto}
  .ticket-detail-shell{padding-bottom:0}
}

/* ========================================================================== 
   1.16.54 — ticket containment, readable sidebars and unified operation edit
   ========================================================================== */

/* The open ticket uses the same natural document flow as the other v2
   workspaces. Sticky ancestors stay overflow-visible; width safety is achieved
   by shrinkable grid/flex children instead of clipping the viewport. */
body.ticket-detail-active .app-shell { min-width:0; }
body.ticket-detail-active .app-main,
body.ticket-detail-active .content,
body.ticket-detail-active #content,
body.ticket-detail-active .ticket-detail-host,
body.ticket-detail-active .ticket-detail-shell {
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  overflow:visible;
}
body.ticket-detail-active .ticket-detail-layout {
  grid-template-columns:minmax(0,1fr) minmax(300px,380px);
  width:100%;
  min-width:0;
  max-width:100%;
}
body.ticket-detail-active .ticket-main-column,
body.ticket-detail-active .ticket-side-column,
body.ticket-detail-active .ticket-side-section,
body.ticket-detail-active .ticket-property,
body.ticket-detail-active .ticket-property-editor,
body.ticket-detail-active .ticket-property-inline {
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
body.ticket-detail-active .ticket-side-column input,
body.ticket-detail-active .ticket-side-column select,
body.ticket-detail-active .ticket-side-column textarea,
body.ticket-detail-active .ticket-side-column button {
  max-width:100%;
}

/* One complete property per row; labels and values remain aligned inside that
   row, so long client/inventory values get the full sidebar width. */
.ticket-properties-grid {
  grid-template-columns:1fr!important;
  gap:0!important;
}
.ticket-properties-grid .ticket-property,
.ticket-properties-grid .ticket-property-editor {
  width:100%;
}
.ticket-property {
  grid-template-columns:minmax(105px,.72fr) minmax(0,1.28fr);
}
.ticket-property-editor > label { min-width:0; }
.ticket-property-inline { width:100%; }
.ticket-property-inline > select,
.ticket-property-inline > input { min-width:0; width:100%; }
.ticket-portal-admins {
  display:block;
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid rgba(31,107,77,.18);
  color:#344054;
  overflow-wrap:anywhere;
}
.ticket-portal-admins.is-empty { color:#8a3d13; }
.ticket-portal-target { margin-top:10px; }

/* The same sticky dark document language is used while editing Offers and
   Purchase Orders; existing ids/actions remain untouched. */
.operation-editor-card,
.offer-editor.operation-edit-shell {
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.operation-editor-header {
  position:sticky;
  top:60px;
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 14px;
  padding:13px 16px!important;
  border:0!important;
  border-bottom:1px solid var(--document-heading-border)!important;
  border-radius:0 0 14px 14px;
  background:#1d4752!important;
  color:#fff;
  box-shadow:0 10px 28px rgba(16,38,44,.14)!important;
}
.operation-editor-header h2,
.operation-editor-header h3 { margin:0; color:#fff!important; }
.operation-editor-header p { margin:4px 0 0; color:#d3e2e6!important; }
.operation-editor-header .action-group { justify-content:flex-end; flex-wrap:wrap; }
.operation-editor-header .btn-secondary,
.operation-editor-header .btn-close {
  border-color:rgba(255,255,255,.55);
  background:transparent;
  color:#fff;
}
.operation-editor-header .btn-secondary:hover,
.operation-editor-header .btn-close:hover { background:rgba(255,255,255,.1); color:#fff; }
.operation-editor-header .btn-primary { border-color:#fff; background:#fff; color:#1d4752; }
.operation-editor-body {
  display:grid;
  gap:14px;
  padding:0!important;
  background:transparent!important;
}
.operation-editor-body > .form-section,
.operation-editor-card .purchase-order-section,
.operation-editor-card .business-timeline-section {
  margin:0;
  padding:17px 18px;
  border:1px solid #dfe5eb!important;
  border-radius:13px;
  background:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.025);
}
.operation-editor-body > .form-section > h3,
.offer-editor .operation-editor-body > .form-section > h3 {
  margin:0 0 14px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#101828!important;
  font-size:15px;
}
.operation-editor-card > .operation-editor-body { padding:0!important; }
.operation-editor-card .purchase-order-section:first-child { border-top:1px solid #dfe5eb!important; }
.operation-editor-card .purchase-order-status-controls { align-items:end; }

/* Offer item detail: public description gets the wide row; internal data is
   deliberately placed below instead of competing for horizontal space. */
.offer-drawer-grid,
.offer-editor.is-simple .offer-drawer-grid {
  grid-template-columns:minmax(0,1fr) 112px;
  grid-template-areas:
    "description vat"
    "internal internal"
    "procurement procurement";
}
.offer-drawer-grid > .offer-item-internal { grid-column:1/-1; }

/* In read workspaces, long descriptions use a dedicated full-width row instead
   of making the first cell tall while the rest of the row remains empty. */
.operation-item-description-row > td {
  padding:0 12px 13px!important;
  border-top:0!important;
  background:#fff;
}
.operation-item-description {
  display:grid;
  grid-template-columns:70px minmax(0,1fr);
  gap:10px;
  width:100%;
  padding:10px 12px;
  border-left:3px solid #7ea2ac;
  background:#f4f8f9;
  color:#344054;
  line-height:1.55;
  box-sizing:border-box;
}
.operation-item-description > span {
  color:#667085;
  font-size:11px;
  font-weight:750;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.operation-item-description > p {
  min-width:0;
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.purchase-order-v2-items th:first-child { width:34%; }
.purchase-order-v2-items th:nth-child(2) { width:14%; }
.purchase-order-v2-items th:nth-child(3) { width:20%; }
.purchase-order-v2-items th:nth-child(4) { width:14%; }
.purchase-order-v2-items th:nth-child(5) { width:18%; }

/* Editing a purchase-order item follows the same two-level rhythm: compact
   commercial/receipt fields first, then one full-width description row. */
.purchase-order-items-table { min-width:980px; }
.purchase-order-item-group + .purchase-order-item-group { border-top:8px solid #edf2f4; }
.purchase-order-item-summary td { padding-bottom:9px; }
.purchase-order-item-description-row td {
  padding-top:0;
  padding-bottom:14px;
  background:#fbfcfd;
}
.purchase-order-item-description-field {
  display:grid;
  gap:6px;
  width:100%;
  margin:0;
  color:#667085;
  font-size:11px;
  font-weight:750;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.purchase-order-item-description-field textarea {
  min-height:92px;
  margin:0!important;
  padding:10px 12px;
  border-left:3px solid #7ea2ac;
  background:#fff;
  color:#101828;
  font-size:13px;
  font-weight:400;
  letter-spacing:0;
  line-height:1.5;
  text-transform:none;
}

@media (max-width:1180px) {
  body.ticket-detail-active .ticket-detail-layout { grid-template-columns:minmax(0,1fr) minmax(290px,350px); }
}
@media (max-width:980px) {
  body.ticket-detail-active .ticket-detail-layout { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .operation-editor-header { top:52px; align-items:flex-start; flex-direction:column; padding:10px 11px!important; border-radius:0 0 11px 11px; }
  .operation-editor-header .action-group { width:100%; justify-content:flex-start; }
  .operation-editor-body > .form-section,
  .operation-editor-card .purchase-order-section,
  .operation-editor-card .business-timeline-section { padding:13px; border-radius:11px; }
  .operation-table .operation-item-description-row {
    margin-top:-10px;
    padding-top:0;
    border-top:0;
    border-radius:0 0 11px 11px;
  }
  .operation-table .operation-item-description-row td { display:block; padding:0!important; }
  .operation-table .operation-item-description-row td::before { content:none; }
  .operation-item-description { grid-template-columns:1fr; gap:4px; }
  .offer-drawer-grid,
  .offer-editor.is-simple .offer-drawer-grid {
    grid-template-columns:1fr;
    grid-template-areas:"description" "vat" "internal" "procurement";
  }
  .offer-drawer-grid > .offer-drawer-vat { width:100%; }
}

/* ==========================================================================
   1.16.55 — ticket sticky-chain repair
   The ticket workspace must never apply hidden/auto overflow to .app-shell,
   .app-main, .content or #content: they are ancestors of the viewport-sticky
   navigation/header elements. Horizontal containment is done with min-width:0
   plus overflow:clip only at the root and ticket workspace boundary.
   ========================================================================== */

/* All operational workspaces/editors share the requested Novatec teal header. */
.operation-sticky-header { background:#1d4752; }
body.ticket-detail-active .content { padding-top:18px; }
.offer-editor.operation-edit-shell { margin-top:0; }

/* ==========================================================================
   1.16.56 — clearer item boundaries
   ========================================================================== */

body.ticket-detail-active .ticket-detail-layout,
body.ticket-detail-active .ticket-main-column,
body.ticket-detail-active .ticket-side-column,
body.ticket-detail-active .ticket-detail-header,
body.ticket-detail-active .ticket-content-section,
body.ticket-detail-active .ticket-side-section,
body.ticket-detail-active .ticket-message,
body.ticket-detail-active .ticket-composer,
body.ticket-detail-active .ticket-system-details,
body.ticket-detail-active .ticket-attachment-grid,
body.ticket-detail-active .ticket-attachment-grid > *,
body.ticket-detail-active .ticket-property,
body.ticket-detail-active .ticket-property-editor,
body.ticket-detail-active .ticket-property-inline {
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}
body.ticket-detail-active .ticket-detail-title,
body.ticket-detail-active .ticket-detail-title h2,
body.ticket-detail-active .ticket-detail-meta,
body.ticket-detail-active .ticket-property > div,
body.ticket-detail-active .ticket-property-editor,
body.ticket-detail-active .ticket-property-editor small,
body.ticket-detail-active .ticket-side-column a,
body.ticket-detail-active .ticket-side-column button,
body.ticket-detail-active .ticket-message-body {
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* ==========================================================================
   1.16.57 — root-cause ticket horizontal overflow fix
   ========================================================================== */

/* Global form CSS gives inputs width:100%. These radio controls are visually
   hidden with position:absolute; without an explicit tiny size, each invisible
   radio becomes viewport-wide at its label's x-position and expands the root
   scroll width by hundreds of pixels. Keep the controls accessible to their
   labels while removing their layout/overflow footprint. */
.ticket-composer-tab { position:relative; }
.ticket-composer-tab input[type="radio"] {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  pointer-events:none;
}

/* Strong, repeated item boundaries. The separator sits immediately before the
   next item, so a full-width description visually belongs to the item above. */
.operation-table .operation-item-summary-row:not(:first-child) > td {
  border-top:2px solid #9bb2b9!important;
  padding-top:17px;
}
.operation-table .operation-item-description-row > td {
  padding-bottom:16px!important;
}

/* Editors use multiple TBODY groups per item; put the same separator at the
   beginning of each following group instead of wrapping rows in cards. */
.offer-items-table > .offer-item-rows + .offer-item-rows > .offer-item-line > td,
.purchase-order-items-table > .purchase-order-item-group + .purchase-order-item-group > .purchase-order-item-summary > td {
  border-top:2px solid #9bb2b9!important;
  padding-top:17px!important;
}
.offer-items-table > .offer-item-rows + .offer-item-rows > .offer-item-line > .offer-cell-index,
.purchase-order-items-table > .purchase-order-item-group + .purchase-order-item-group > .purchase-order-item-summary > td:first-child {
  box-shadow:inset 3px 0 0 #1d4752;
}

/* The same boundary language is used for service-equipment/article lists. */
.work-order-equipment-table tbody tr + tr > td {
  border-top:2px solid #9bb2b9!important;
  padding-top:15px!important;
}

@media (max-width:760px) {
  .operation-table .operation-item-summary-row:not(:first-child) > td:first-child {
    border-top:2px solid #9bb2b9!important;
    padding-top:15px!important;
  }
  .operation-table .operation-item-summary-row:not(:first-child) > td:not(:first-child) {
    border-top:0!important;
    padding-top:6px;
  }
}

/* QiQo ERP read views use the existing portal cards and bounded table scroll. */
#qiqo-overview-range { display:flex; align-items:flex-end; flex-wrap:wrap; gap:14px; margin:18px 0; }
#qiqo-overview-range label { flex:1 1 200px; }
#qiqo-overview-range .btn { margin-bottom:0; }
#qiqo-inventory-rows td { vertical-align:top; }
@media(max-width:600px) { #qiqo-overview-range label { flex-basis:100%; } }

/* The earlier compact 34px control left only 12px for the status text. */
.offer-workflow-bar .offer-status-actions #offer-status {
  height:42px;
  min-height:42px;
  line-height:20px;
  padding:8px 36px 8px 12px;
  margin:0;
}
.offer-workflow-bar .offer-status-actions .btn {
  height:42px;
  min-height:42px;
  margin:0;
}

/* Explicit goods/services; menu remains readable above the document sections. */
.document-item-kind{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:7px;font-size:12px;color:var(--muted)}
.document-item-kind select{width:auto;max-width:100%;min-height:32px;padding:4px 7px;font-size:12px}
.document-service-note{display:block;color:#536b73;font-size:13px;line-height:1.5}
.operation-workspace>.operation-sticky-header{overflow:visible}
.operation-more-menu[open]{z-index:70}
.operation-menu:empty{display:none}
.operation-menu button,.operation-menu a{color:#183b44}
.offer-items-footer{display:flex;justify-content:flex-start;margin-top:16px}

/* Confirmed ERP receipts stay separate from local delivery bookkeeping. */
.purchase-order-receipt-status{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;max-width:100%}
.purchase-order-receipt-status .badge{white-space:normal;text-align:left;line-height:1.4}
.purchase-order-receipt-numbers{flex-basis:100%;display:block;color:#365661;line-height:1.6;overflow-wrap:anywhere}
.purchase-order-receipt-link{color:#096e68;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.operation-header-meta .purchase-order-receipt-numbers{color:#e6f4f5}
.operation-header-meta .purchase-order-receipt-link{color:#fff}
.po-supplier-picker{display:flex;flex-direction:column;gap:6px;min-width:0}
.po-supplier-picker input,.po-supplier-picker select{width:100%;min-width:0}
.po-supplier-picker label{font-weight:700}
.license-key-row .license-key{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.5}
.retail-table-key{min-width:36ch}
.retail-table-key .license-key{flex:1 0 100%;min-width:35ch;max-width:none;box-sizing:border-box}