/* ============================================================
   Legacy Bootstrap klase iz migriranih uputstava
   Ove stranice su pune Bootstrap 5 markupa (card, badge, accordion,
   grid, utility). Umjesto prepisivanja sadržaja, mapiramo Bootstrap
   klase na Intercomp design tokene. Minimalan, ciljan set.
   ============================================================ */

/* ---------- Grid ---------- */
.row { display: flex; flex-wrap: wrap; margin-inline: -12px; }
.row > [class*="col-"] { padding-inline: 12px; width: 100%; }
@media (min-width: 768px) {
  .col-md-6 { width: 50%; }
  .col-md-4 { width: 33.333%; }
}
.col-12 { width: 100%; }

/* ---------- Card ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 24px;
}
.card-header {
  padding: 14px 20px; background: var(--canvas);
  border-bottom: 1px solid var(--border);
  font-weight: 600; color: var(--ink-900);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card-body { padding: 20px; }
.card-title { font-weight: 600; color: var(--ink-900); font-size: 17px; }
.card.shadow-sm { box-shadow: none; }

/* ---------- Alert / badge ---------- */
.alert, .alert-primary, .alert-success, .alert-warning, .alert-danger {
  padding: 14px 18px; border-radius: 10px;
  font-size: 15px; margin: 16px 0;
  border: 1px solid var(--border);
  border-left-width: 4px;
}
.alert-primary, .alert-primary > * { background: var(--mint); border-left-color: var(--cta); }
.alert-success, .alert-success > * { background: #EFF8F1; border-left-color: #2e9e5b; }
.alert-warning, .alert-warning > * { background: #FDF6E7; border-left-color: #d99a06; }
.alert-danger, .alert-danger > * { background: #FBEFED; border-left-color: #d9534f; }
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
}
.bg-primary { background: var(--brand); color: #fff; }
.bg-success { background: #2e9e5b; color: #fff; }
.bg-warning { background: #d99a06; color: #fff; }
.bg-danger { background: #d9534f; color: #fff; }
.bg-light { background: var(--canvas); }

/* ---------- Buttons (legacy) ---------- */
.btn-outline-secondary {
  display: inline-flex; align-items: center; min-height: 38px;
  padding: 8px 16px; border-radius: 9px;
  background: transparent; color: var(--ink-700);
  border: 1px solid var(--border-strong);
  font-size: 15px; transition: border-color 160ms ease;
}
.btn-outline-secondary:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- Accordion ---------- */
.accordion-item {
  border: 1px solid var(--border); border-radius: 10px;
  margin-bottom: 10px; overflow: hidden; background: var(--surface);
}
.accordion-button {
  width: 100%; text-align: left; padding: 14px 18px;
  background: var(--surface); border: none; cursor: pointer;
  font-weight: 600; color: var(--ink-900); font-size: 15.5px;
  font-family: inherit;
}
.accordion-collapse { display: none; }
.accordion-collapse.show, .accordion-collapse.collapse.show { display: block; }
.accordion-body { padding: 16px 18px; border-top: 1px solid var(--border); font-size: 15px; color: var(--ink-700); }

/* ---------- List group ---------- */
.list-group-item {
  padding: 10px 0; border-top: 1px solid var(--border);
  font-size: 15px; color: var(--ink-700);
}
.list-group-item:first-child { border-top: none; }

/* ---------- Utility (najčešće korištene) ---------- */
.d-flex { display: flex; }
.flex-shrink-0 { flex-shrink: 0; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 16px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; } .mb-6 { margin-bottom: 32px; }
.mt-3 { margin-top: 16px; }
.p-2 { padding: 8px; } .p-3 { padding: 16px; }
.rounded { border-radius: 10px; }
.fw-bold { font-weight: 650; color: var(--ink-900); }
.lh-lg { line-height: 1.7; }
.text-center { text-align: center; }
.text-muted { color: var(--ink-500); }
.float-right { float: right; }
.img-responsive, .img-fluid, .img-thumbnail {
  max-width: 100%; height: auto;
  border: 1px solid var(--border); border-radius: 8px;
}
.h4 { font-size: 19px; font-weight: 650; color: var(--ink-900); }
.h6 { font-size: 15px; }
.border-bottom { border-bottom: 1px solid var(--border); padding-bottom: 8px; }

/* ---------- PWA checklist markovi (pitanjafiskalizacija) ---------- */
.pwa-mark { color: var(--ink-500); }
.pwa-mark-done { color: #2e9e5b; }

/* ---------- KEP vodič (kako-instalirati-digitalni-potpis) ----------
   Originalni inline <style> koristi bootstrap-plavu; mapiramo na brand.
   Sama klasa definicija je u sadržaju stranice — ovdje samo premošćujemo
   boje da se uklope u paletu. */
.content style { display: none; }