:root {
  --primary: #1a56db;
  --primary-dark: #1544ad;
  --menu-border: #123f8f;
  --menu-icon: #c2410c;
  --bg: #f2f5fa;
  --card-bg: #ffffff;
  --border: #d9e1ec;
  --text: #1f2937;
  --text-muted: #6b7280;
  --danger: #dc2626;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.topbar h1 {
  font-size: 22px;
  margin: 0;
  flex: 1;
  text-align: center;
}

.app-title { color: var(--menu-border); }

.topbar-actions {
  display: flex;
  gap: 8px;
}

/* ---- Main menu ---- */
/* Each group is its own row, so the grouping holds regardless of window width. */
.menu-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.menu-card {
  width: 186px;
  height: 186px;
  background: var(--card-bg);
  border: 3px solid var(--menu-border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-decoration: none;
  color: var(--menu-border);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 2px 6px rgba(20, 40, 90, 0.10);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.menu-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(20, 40, 90, 0.18);
  background: #f7faff;
}

.menu-icon { width: 30%; height: 30%; min-width: 30px; min-height: 30px; color: var(--menu-icon); }
.menu-label { font-size: 13px; }

/* ---- Buttons ---- */
.btn {
  background: #eef2fb;
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { background: #e2e9fa; }
.btn-primary { background: var(--primary); color: white; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: transparent; }
.btn-small { padding: 5px 10px; font-size: 13px; }
.btn-danger { color: var(--danger); border-color: #f3caca; }
.btn-danger:hover { background: #fdecec; }
.btn-add {
  width: 100%;
  margin-top: 8px;
  background: white;
  border: 1px dashed var(--primary);
  color: var(--primary);
  padding: 10px;
  border-radius: 6px;
  cursor: pointer;
}

/* ---- Saved list ---- */
.saved-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.saved-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.saved-card__name { font-weight: 600; margin-bottom: 4px; padding-right: 24px; }
.saved-card__meta { font-size: 13px; color: var(--text-muted); }
.saved-card__stamp {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.empty-msg { color: var(--text-muted); text-align: center; margin-top: 60px; }

/* Selectable cards: a dot marks the selection, actions live in the top bar. */
.saved-card--selectable {
  position: relative;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
  user-select: none;
}
.saved-card--selectable:hover { border-color: var(--primary); }

.select-dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: white;
}

.saved-card--selectable.is-selected {
  border-color: var(--primary);
  background: #eef3fe;
}
.saved-card--selectable.is-selected .select-dot {
  background: var(--primary);
  border-color: var(--primary);
}

.selection-count {
  font-size: 13px;
  color: var(--text-muted);
  margin-right: 4px;
  white-space: nowrap;
}

.list-hint {
  margin: -8px 0 20px;
  padding-bottom: 0;
  border-bottom: none;
}

.section-title {
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 600;
  margin: 28px 0 12px;
}

/* ---- Sheet format form ---- */
.format-form-panel { margin-bottom: 8px; }

.derived-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  justify-content: flex-end;
}
.derived-label { font-size: 13px; color: var(--text-muted); }
.derived-value {
  font-weight: 700;
  color: var(--menu-border);
  padding: 6px 0;
}

/* ---- Declaration tabs (one per article) ---- */
.tab-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.tab-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  background: #f4f6fb;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.tab-chip:hover { background: #eaeffb; }
.tab-chip.is-active {
  background: white;
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}
.tab-chip__close {
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}
.tab-chip__close:hover { color: var(--danger); }
.tab-chip__name { border: none; background: none; font: inherit; color: inherit; width: auto; }

.btn-tab-add {
  border: 1px dashed var(--primary);
  background: white;
  color: var(--primary);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.apply-all-btn {
  border: 1px solid var(--border);
  background: white;
  color: var(--text-muted);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.apply-all-btn:hover { border-color: var(--primary); color: var(--primary); }

/* ---- Free label editor ---- */
/* The right panel is a column: toolbar, the text area (which takes the slack), then the
   paragraph settings pinned under the text they act on. */
.editor-panel--fill:has(.free-text-input) {
  display: flex;
  flex-direction: column;
}

.free-text-input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
  min-height: 220px;
  flex: 1;
  background: white;
  cursor: text;
  overflow-y: auto;
}

.text-settings {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.text-settings .settings-row--last {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.free-text-input:focus { outline: none; border-color: var(--primary); }
.free-text-input:empty::before { content: attr(data-placeholder); color: #9aa3b2; }
.free-text-input b, .free-text-input strong { font-weight: bold; }
.free-text-input i, .free-text-input em { font-style: italic; }
.free-text-input u { text-decoration: underline; }

.align-group {
  display: flex;
  align-items: center;
  gap: 4px;
}
.align-btn {
  min-width: 30px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 12px;
  padding: 0 6px;
}
.align-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.sel-size-input {
  width: 66px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}

/* ---- Editor ---- */
.page--editor { max-width: 1400px; }

.name-input {
  flex: 2;
  max-width: 360px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 15px;
}

.editor-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  /* Stretch (the grid default) so both columns end at the same height — the fields card
     fills whatever the preview + settings stack on the left adds up to. */
  align-items: stretch;
}

/* Each side of the split is a plain column; the cards inside it are .editor-panel.
   min-width:0 keeps a zoomed-in preview from stretching the column and the page. */
.editor-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.editor-panel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

/* Grows to fill the leftover column height so the two sides line up at the bottom. */
.editor-panel--fill { flex: 1; }

.settings-row {
  display: flex;
  gap: 24px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.settings-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-muted);
  flex: 1;
}
.settings-row select,
.settings-row input[type="number"],
.settings-row input[inputmode="decimal"] {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 14px;
}

.settings-panel { margin-bottom: 4px; }

.checkbox-label, .radio-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}

.settings-row-label {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}

.settings-row--code { flex-wrap: wrap; row-gap: 8px; }

.settings-row--disabled { opacity: 0.45; }
.settings-row--disabled input { background: #f3f5f9; cursor: not-allowed; }

.text-input-inline {
  flex: 1;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-family: inherit;
  min-width: 100px;
}

.settings-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: -8px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* Reserves room for the longest of the code hints, so the panel never jumps
   when switching between QR / bar code / none. */
.code-hint {
  min-height: 34px;
  margin: -8px 0 12px;
  padding-bottom: 12px;
}

/* ---- Label formats page ---- */
.format-form {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.format-form input {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 14px;
}
.format-form input[type="text"] { flex: 1; }
.format-form input[type="number"] { width: 140px; }

.fields-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 5 full rows + half of the 6th (row 127px, gap 8px) so it's clear the list scrolls. */
  max-height: 738px;
  overflow-y: auto;
}

.field-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fbfcfe;
}

.field-row-top {
  display: flex;
  gap: 8px;
}

.field-row input[type="text"] {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
}

.field-label-input { flex: 1; font-weight: 600; }

.field-value-input {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  font-family: inherit;
  width: 100%;
  min-height: 34px;
  cursor: text;
  background: white; /* match the label input; the row itself has a tinted background */
}
.field-value-input:focus {
  outline: none;
  border-color: var(--primary);
}
.field-value-input:empty::before {
  content: attr(data-placeholder);
  color: #9aa3b2;
}
.field-value-input b, .field-value-input strong { font-weight: bold; }
.field-value-input i, .field-value-input em { font-style: italic; }
.field-value-input u { text-decoration: underline; }

.field-style-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.style-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.style-group-label {
  font-size: 11px;
  color: var(--text-muted);
  width: 52px;
}

.qr-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
}

.style-toggle {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  font-size: 13px;
}
.style-toggle.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.icon-btn {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  cursor: pointer;
}
.icon-btn:hover { background: #f0f2f7; }
.icon-btn.remove { color: var(--danger); }

.fields-count {
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: right;
}

/* The card holds the scrolling preview plus its zoom controls, so they read as one panel. */
.preview-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.preview-wrap {
  display: flex;
  overflow: auto;
  /* Fixed width AND height: the frame never resizes with zoom, so the settings panel below
     it never shifts. Zooming scales the label inside and scrolls within this viewport. */
  width: 100%;
  height: 262px;
  box-sizing: border-box;
}

.label-preview {
  position: relative;
  background: white;
  border: 1px solid #999;
  /* content-box so the mm-derived width/height apply to the image itself; with border-box
     the 1px border would eat into them unevenly and visibly stretch the preview. */
  box-sizing: content-box;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  flex: none;
  overflow: hidden;
  margin: auto; /* centers while it fits, and still scrolls once it outgrows the frame */
}

.pdf-preview-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* never distort, even if the box and image aspects drift */
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.zoom-value {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 48px;
  text-align: center;
}

/* ---- Toast ---- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1f2937;
  color: white;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 1000;
}
.toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-error { background: #7f1d1d; }

/* One permanent line under the zoom row. It always occupies the same height, so turning a
   warning on can never shove the panel below it downwards. When all is well it carries the
   sheet figures instead of sitting empty. */
.status-line {
  margin-top: 12px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f7f9fc;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-line--warn {
  border-color: var(--danger);
  background: #fef2f2;
  color: #7f1d1d;
  font-weight: 600;
}

/* Our own stepper arrows: type="number" supplied them, but it is also what silently ate a
   decimal comma. */
.num-field { position: relative; display: block; }
.num-field > input { width: 100%; padding-right: 20px; }
.num-steppers {
  position: absolute;
  top: 1px; right: 1px; bottom: 1px;
  width: 17px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 5px 5px 0;
}
.num-step {
  flex: 1;
  border: 0;
  border-left: 1px solid var(--border);
  background: #eef2f8;
  color: var(--text-muted);
  font-size: 6px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.num-step + .num-step { border-top: 1px solid var(--border); }
.num-step:hover { background: var(--primary); color: #fff; }
/* Muted while an automatic mode owns the field, but still clickable — the click is how you
   take manual control. */
.num-field > input:disabled + .num-steppers { opacity: 0.5; }

/* In the toolbar the size field keeps its own compact width. */
.style-group .num-field { display: inline-block; }
.style-group .num-field > input { width: 66px; }

/* A number field holding something unreadable — a typo stays visible instead of the value
   quietly reverting to a default. */
.input-invalid {
  border-color: var(--danger) !important;
  background: #fef2f2;
}

/* Line spacing shares the row with the alignment controls, so the block under the text
   stays one tight line instead of a lonely field above them. */
.spacing-field { flex: 0 0 150px; }

/* Where the label runs out. Positions come from the renderer, never from this box's own
   line breaks — the two do not wrap identically, and only the renderer prints. */
.free-text-input { overflow-y: auto; }
.free-text-input > .para-out { color: var(--text-muted); opacity: 0.5; }
.free-text-input > .para-edge {
  border-top: 2px solid var(--danger);
  margin-top: 2px;
  padding-top: 2px;
}
/* Only a bar, no wash: the cut can fall inside a long paragraph, and tinting the whole of
   it would flood the box while saying no more than the bar does. */
.free-text-input > .para-cut { box-shadow: inset 3px 0 0 #d97706; padding-left: 7px; }

/* ---- Prijava / prvi nalog (login.html) ---- */
/* Raspored preuzet sa qc.smartlabsys.com/login; boje su postojeće DKL plave
   (var(--primary) i njene tamnije nijanse), nijedna nova boja se ne uvodi. */
.auth-split {
  display: flex;
  min-height: 100vh;
}
.auth-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}
.auth-pane--form {
  flex: 1;
  background: var(--card-bg);
}
.auth-box { width: 100%; max-width: 360px; }

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}
.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
}
.auth-wordmark {
  font-size: 20px;
  font-weight: 700;
  color: var(--menu-border);
  letter-spacing: -0.01em;
}

.auth-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.auth-lead {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 12px 0 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 36px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.auth-field input {
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 14px;
  font-family: inherit;
}
.auth-field input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
  border-color: var(--primary);
}
.auth-error {
  color: var(--danger);
  font-size: 13px;
  margin: -6px 0 0;
}
.auth-submit {
  margin-top: 4px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.auth-submit:hover { background: var(--primary-dark); }

.auth-pane--brand {
  flex: 1;
  background: #0d2451;   /* tamna nijansa iste plave; parnjak brand-950 sa reference */
  color: #fff;
  overflow: hidden;
}
.auth-brand-content { width: 100%; max-width: 400px; }
.auth-brand-title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.auth-brand-title span { color: #7da9f0; }
.auth-brand-lead {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #a9c2e8;
}
.auth-features {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.auth-feature { display: flex; gap: 16px; }
.auth-feature-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(125, 169, 240, 0.14);
  border: 1px solid rgba(125, 169, 240, 0.28);
  color: #7da9f0;
}
.auth-feature-icon svg { width: 20px; height: 20px; }
.auth-feature-title {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
}
.auth-feature-text {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #a9c2e8;
}

@media (max-width: 860px) {
  .auth-pane--brand { display: none; }
}

/* ---- Traka sa nalogom na glavnom meniju ---- */
.topbar-side {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-side--right { justify-content: flex-end; }
.user-chip {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
}
.inline-form { display: inline; margin: 0; }

/* ---- Stranica „Korisnici" ---- */
.user-card-actions {
  margin-top: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.user-tag-you { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.user-role-select {
  margin-top: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-family: inherit;
}