/*
 * DAXON izgled za postojeće Bootstrap klase (Bootstrap 5 iz Blazor šablona).
 * Učitava se POSLE bootstrap.css i daxon.css. Služi da postojeće strane odmah dobiju
 * Daxon izgled bez prepravljanja markup-a; nove strane pisati sa klasama iz daxon.css.
 * Uputstvo: daxon-stil/UPUTSTVO-ZA-AGENTA.md.
 */

/* ===== Bootstrap promenljive ===== */

:root,
[data-bs-theme='light'] {
  --bs-body-font-family: var(--font);
  --bs-body-color: var(--crna);
  --bs-body-bg: var(--pozadina);
  --bs-body-line-height: 1.5;
  --bs-font-monospace: var(--mono);
  --bs-primary: #d42b25;
  --bs-primary-rgb: 212, 43, 37;
  --bs-danger: #b8231e;
  --bs-danger-rgb: 184, 35, 30;
  --bs-dark: #10100b;
  --bs-dark-rgb: 16, 16, 11;
  --bs-secondary-color: var(--tekst-2);
  --bs-tertiary-bg: var(--pozadina);
  --bs-border-color: var(--linija);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-pill: 0;
  --bs-link-color: var(--crna);
  --bs-link-color-rgb: 16, 16, 11;
  --bs-link-hover-color: var(--akcenat-tamni);
  --bs-link-hover-color-rgb: 184, 35, 30;
  --bs-focus-ring-color: rgba(212, 43, 37, 0.35);
  --bs-heading-color: var(--crna);
}

h1,
.h1 {
  font-size: clamp(32px, 3vw + 18px, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h2,
.h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

h3,
.h3 {
  font-size: 20px;
  font-weight: 700;
}

/* Fokus: isti obris kao na daxon.rs, umesto Bootstrap senke */
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  box-shadow: none;
  outline: 3px solid var(--akcenat);
  outline-offset: 2px;
}

/* ===== Dugmad ===== */

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-x: 26px;
  --bs-btn-padding-y: 0;
  --bs-btn-border-width: 2px;
  --bs-btn-border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-size: 16px;
}

.btn-sm {
  --bs-btn-padding-x: 16px;
  min-height: 40px;
  font-size: 15px;
}

.btn-lg {
  min-height: 56px;
}

.btn-primary,
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--akcenat);
  --bs-btn-border-color: var(--akcenat);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--akcenat-tamni);
  --bs-btn-hover-border-color: var(--akcenat-tamni);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--akcenat-tamni);
  --bs-btn-active-border-color: var(--akcenat-tamni);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--akcenat);
  --bs-btn-disabled-border-color: var(--akcenat);
}

.btn-secondary,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
  --bs-btn-color: var(--crna);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--crna);
  --bs-btn-hover-color: var(--pozadina);
  --bs-btn-hover-bg: var(--crna);
  --bs-btn-hover-border-color: var(--crna);
  --bs-btn-active-color: var(--pozadina);
  --bs-btn-active-bg: var(--crna);
  --bs-btn-active-border-color: var(--crna);
  --bs-btn-disabled-color: var(--tekst-ugasen);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--tekst-ugasen);
}

.btn-outline-danger {
  --bs-btn-color: var(--akcenat-tamni);
  --bs-btn-border-color: var(--akcenat-tamni);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--akcenat-tamni);
  --bs-btn-hover-border-color: var(--akcenat-tamni);
}

.btn-link {
  --bs-btn-color: var(--crna);
  --bs-btn-hover-color: var(--akcenat-tamni);
  text-decoration: underline;
}

/* ===== Obrasci ===== */

.form-label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
}

.form-control,
.form-select {
  min-height: 46px;
  border: 1px solid var(--ivica-polja);
  border-radius: 0;
  font-size: 16px;
  background-color: var(--bela);
  color: var(--crna);
}

textarea.form-control {
  padding-block: 10px;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--crna);
}

.form-check-input {
  border-color: var(--ivica-polja);
  border-radius: 0;
}

.form-check-input[type='radio'] {
  border-radius: 50%;
}

.form-check-input:checked {
  background-color: var(--akcenat);
  border-color: var(--akcenat);
}

.form-text {
  font-size: 14px;
  color: var(--tekst-2);
}

/* Greška: Bootstrap .is-invalid i Blazor .invalid; uspeh se ne ističe */
.form-control.is-invalid,
.form-select.is-invalid,
.form-control.invalid,
.form-select.invalid,
.form-control[aria-invalid='true'],
.form-select[aria-invalid='true'] {
  border: 2px solid var(--akcenat-tamni);
  background-image: none;
  padding-right: 12px;
}

.form-control.is-valid,
.form-select.is-valid,
.form-control.modified.valid,
.form-select.modified.valid {
  border-color: var(--ivica-polja);
  background-image: none;
  outline: none;
}

.invalid-feedback,
.validation-message {
  font-size: 14px;
  font-weight: 500;
  color: var(--akcenat-tamni);
}

/* ===== Tabele ===== */

.table {
  --bs-table-bg: var(--bela);
  --bs-table-color: var(--crna);
  --bs-table-border-color: var(--linija);
  --bs-table-striped-bg: var(--pozadina);
  --bs-table-hover-bg: var(--istaknuto);
  --bs-table-active-bg: var(--istaknuto);
  font-size: 15px;
  border: 1px solid var(--linija);
}

.table > :not(caption) > * > * {
  padding: 14px 18px;
}

.table > thead > tr > th,
.table-light > tr > th,
thead.table-light th {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-3);
  background: var(--pozadina);
}

.table-responsive {
  border: 1px solid var(--linija);
  background: var(--bela);
}

.table-responsive > .table {
  margin: 0;
  border: 0;
}

/* ===== Kartice ===== */

.card {
  --bs-card-border-radius: 0;
  --bs-card-inner-border-radius: 0;
  --bs-card-border-color: var(--linija);
  --bs-card-bg: var(--bela);
  --bs-card-cap-bg: var(--pozadina);
  --bs-card-spacer-x: 28px;
  --bs-card-spacer-y: 28px;
}

.card-title {
  font-size: 22px;
  font-weight: 700;
}

.card-header {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst-3);
}

/* ===== Poruke ===== */

.alert {
  --bs-alert-border-radius: 0;
  --bs-alert-border-color: transparent;
  font-size: 15px;
}

.alert-success {
  --bs-alert-bg: var(--uspeh-pozadina);
  --bs-alert-color: var(--uspeh-tekst);
}

.alert-danger,
.alert-warning {
  --bs-alert-bg: var(--greska-pozadina);
  --bs-alert-color: var(--akcenat-tamni);
}

.alert-info,
.alert-primary,
.alert-secondary,
.alert-light {
  --bs-alert-bg: var(--bela);
  --bs-alert-color: var(--crna);
  --bs-alert-border-color: var(--linija);
}

.badge {
  --bs-badge-border-radius: 0;
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.04em;
}

.badge.bg-primary,
.badge.text-bg-primary {
  background-color: var(--akcenat) !important;
  color: #fff !important;
}

/* ===== Navigacija ===== */

.navbar {
  background: var(--pozadina);
  border-bottom: 1px solid var(--linija);
}

.navbar .nav-link {
  color: var(--crna);
  font-size: 15px;
  font-weight: 500;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--crna);
  text-decoration: underline;
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--linija);
  --bs-nav-tabs-border-radius: 0;
  --bs-nav-tabs-link-active-color: var(--crna);
  --bs-nav-tabs-link-active-bg: var(--bela);
  --bs-nav-tabs-link-active-border-color: var(--linija) var(--linija) var(--bela);
}

.nav-tabs .nav-link {
  color: var(--tekst-3);
  font-weight: 500;
}

.nav-tabs .nav-link.active {
  border-top: 3px solid var(--akcenat);
}

.pagination {
  --bs-pagination-border-radius: 0;
  --bs-pagination-color: var(--crna);
  --bs-pagination-hover-color: var(--crna);
  --bs-pagination-active-bg: var(--crna);
  --bs-pagination-active-border-color: var(--crna);
  --bs-pagination-focus-box-shadow: none;
}

.modal {
  --bs-modal-border-radius: 0;
  --bs-modal-inner-border-radius: 0;
}

.dropdown-menu {
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-link-active-bg: var(--crna);
}

.text-primary {
  color: var(--akcenat-tamni) !important;
}

.text-muted,
.text-body-secondary {
  color: var(--tekst-2) !important;
}

.bg-primary {
  background-color: var(--akcenat) !important;
}

.bg-dark {
  background-color: var(--crna) !important;
}

.bg-light,
.bg-body-tertiary {
  background-color: var(--pozadina) !important;
}