/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  background: var(--clr-primary); color: #fff; border: none;
  padding: 7px 14px; border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 500; cursor: pointer;
}
.btn-primary:hover { background: #243f5e; }

.btn-primary-blue {
  background: var(--clr-primary-mid); color: #fff; border: none;
  padding: 7px 14px; border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 500; cursor: pointer;
}
.btn-primary-blue:hover { background: #1e5d96; }

.btn-sec {
  background: #fff; color: var(--clr-text-light);
  border: 1px solid #d0d7df; padding: 7px 14px;
  border-radius: var(--r-md); font-size: var(--fs-sm); cursor: pointer;
}
.btn-sec:hover { background: var(--clr-bg); }
.btn-sec:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-danger {
  background: #fff; color: #c0392b;
  border: 1px solid #e8c4c1; padding: 7px 14px;
  border-radius: var(--r-md); font-size: var(--fs-sm); cursor: pointer;
}
.btn-danger:hover { background: #fdecea; }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-danger-solid {
  background: #c0392b; color: #fff; border: none;
  padding: 7px 16px; border-radius: var(--r-md);
  font-size: var(--fs-base); font-weight: 600; cursor: pointer;
}
.btn-danger-solid:hover { background: #a93226; }

.btn-delete {
  border: none; background: none; color: #c0392b;
  font-size: var(--fs-sm); cursor: pointer;
  padding: 2px 6px; border-radius: var(--r-sm);
}
.btn-delete:hover { background: #fdecea; }

/* ── Pills ───────────────────────────────────────────────── */
.pill {
  display: inline-block; font-size: var(--fs-xs);
  font-weight: 600; padding: 2px 8px; border-radius: 10px;
}
.pill-xs   { font-size: var(--fs-2xs); padding: 1px 5px; }
.pill-sm   { font-size: var(--fs-xs);  padding: 2px 7px; }
.pill-hero { font-size: var(--fs-sm);  padding: 3px 10px; }
.pill-lg   { font-size: var(--fs-sm);  padding: 5px 12px; }

.pill-ism-odlicno { background: #2e7d32; color: #fff; }
.pill-ism-dobro   { background: #7cb342; color: #fff; }
.pill-ism-zadov   { background: #f9a825; color: #4e342e; }
.pill-ism-lose    { background: #e64a19; color: #fff; }
.pill-ism-vlose   { background: #c62828; color: #fff; }

.pill-ipi-vrlovisok  { background: #c62828; color: #fff; }
.pill-ipi-visok      { background: #e64a19; color: #fff; }
.pill-ipi-srednji    { background: #f9a825; color: #4e342e; }
.pill-ipi-nizak      { background: #7cb342; color: #fff; }
.pill-ipi-vrlo-nizak { background: #2e7d32; color: #fff; }

.pill-glavni   { background: #ede7f6; color: #4527a0; }
.pill-vanredni { background: #fce4ec; color: #880e4f; }
.pill-gray     { background: #f0f2f5; color: #546e7a; }
.pill-nov      { background: #e3f2fd; color: #0d47a1; border: 1px solid #90caf9; }

/* ── ISM bar ─────────────────────────────────────────────── */
.ism-bar-outer {
  height: 10px; background: #e9ecef;
  border-radius: 5px; overflow: hidden; margin: 6px 0 4px;
}
.ism-bar-inner { height: 100%; border-radius: 5px; }
.ism-scale-labels {
  display: flex; justify-content: space-between;
  font-size: 9px; color: var(--clr-muted); margin-top: 4px;
}
.ism-bar-vlose   { background: #c62828; }
.ism-bar-lose    { background: #e64a19; }
.ism-bar-zadov   { background: #f9a825; }
.ism-bar-dobro   { background: #7cb342; }
.ism-bar-odlicno { background: #2e7d32; }

/* ── KP bar ──────────────────────────────────────────────── */
.kp-bar  { height: 8px; background: #e9ecef; border-radius: 4px; overflow: hidden; margin: 4px 0; }
.kp-fill { height: 100%; background: var(--clr-primary); border-radius: 4px; }

/* ── Mini table ──────────────────────────────────────────── */
.mini-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.mini-table th {
  text-align: left; padding: 5px 8px;
  background: var(--clr-bg-hover); color: var(--clr-muted);
  font-weight: 500; font-size: var(--fs-xs);
  border-bottom: 1px solid var(--clr-border);
}
.mini-table td {
  padding: 7px 8px; border-bottom: 1px solid var(--clr-border-light);
  color: var(--clr-text); vertical-align: middle;
}
.mini-table tr:last-child td { border-bottom: none; }
.mini-table td.link { color: #1565c0; cursor: pointer; }
.mini-table td.link:hover { text-decoration: underline; }

/* ── Cards and layout ────────────────────────────────────── */
.card {
  background: #fff; border: 1px solid var(--clr-border);
  border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 12px;
}
.card-title {
  font-size: var(--fs-base); font-weight: 700; color: var(--clr-primary);
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px;
}

.field-label { font-size: var(--fs-base); color: var(--clr-muted); margin-bottom: 3px; }
.field-val   { font-size: var(--fs-base); font-weight: 500; color: var(--clr-primary); }

.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.field-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 16px; }

.section-divider {
  display: flex; align-items: center; gap: 10px; margin: 4px 0 10px;
}
.section-divider-label {
  font-size: var(--fs-2xs); font-weight: 700; color: var(--clr-muted);
  text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
}
.section-divider-line { flex: 1; height: 1px; background: var(--clr-border); }

/* ── Form inputs ─────────────────────────────────────────── */
.field-select-full {
  width: 100%; border: 1px solid var(--clr-border);
  border-radius: var(--r-md); padding: 7px 10px;
  font-size: var(--fs-md); color: var(--clr-text);
  background: var(--clr-bg-hover); outline: none;
}
.field-select-full:focus {
  border-color: var(--clr-accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(77,157,224,0.15);
}
.field-select-full.error { border-color: var(--clr-error); }

.field-error {
  font-size: var(--fs-xs); color: var(--clr-error);
  margin-top: 3px; display: none;
}
.field-error.visible { display: block; }

/* ── Utility ─────────────────────────────────────────────── */
.mt-2 { margin-top: 6px; }
.mt-3 { margin-top: 12px; }
.mb-3 { margin-bottom: 12px; }
.hidden { display: none !important; }
.font-mono { font-family: monospace; }
.text-muted { color: var(--clr-muted); }