/* Asklepion Codex — dizajn sistem (faza 10.1). Reusable komponente po klasi, ne po golom
   tagu, da nestilizovani ekrani (faze 10.3-10.12, još bez odobrenih mockupa) ostanu
   vizuelno nepromenjeni dok im ne dođe red. */

:root {
  --green: #16332A;
  --green-light: #1F4536;
  --gold: #D2AB67;
  --cream: #F6F0E3;
  --cream-2: #FBF8F1;
  --text-dark: #2B2A26;
  --text-muted: #7A776C;
  --border: #E4DCC9;
  --danger: #B3432B;
  --danger-bg: #FBEAE4;
  --ok: #2F6B4F;
  --ok-bg: #E9F3EC;
  /* Traka za odjavu (logout, globalna traka u base.html) — namerno DRUGA nijansa crvene od
     --danger (koji boji otkazane termine/bedževe) da dugme za odjavu ostane vizuelno
     upadljivo kao izlazna akcija, bez menjanja postojeće semantike --danger na drugim
     ekranima (mockup vrednost). */
  --danger-solid: #A8412E;
  --danger-solid-dark: #8A3424;
  /* Faza 10.10 (Statistika) — dopunske boje za widgete/KPI kartice, iz mockup-a. */
  --teal: #3E7C82;
  --teal-bg: #E7F1F1;
  --coral: #C9714F;
  --coral-bg: #FBEBE1;
  --plum: #7D5480;
  --plum-bg: #F2E7F0;
  /* Življe, zasićenije varijante — isključivo za grafikone/vizuelizaciju podataka. */
  --chart-green: #2E8B5F;
  --chart-gold: #EAB040;
  --chart-teal: #3FA8AE;
  --chart-coral: #E8834F;
  --chart-plum: #A3639E;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: var(--text-dark);
}

h1, h2, h3, .font-brand {
  font-family: 'Playfair Display', serif;
}

/* Dugmad — ISPRAVKA (faza 10.8, nađeno vlasnikovom vizuelnom proverom): `.btn-primary`/
   `.btn-secondary`/`.btn-danger` su se u praksi kroz VEĆINU postojećih template-a (faze 10.5/
   10.6, patients/problems/visits modali i forme) koristile SAME, bez dodatne `.btn` klase —
   ali osnovni box-model (`height`/`padding`/`display:flex`/`line-height`) je živeo ISKLJUČIVO
   u `.btn`, pa su ta dugmad tiho padala na UA podrazumevane vrednosti (browser default
   dugme — pogrešna visina/padding/line-height), samo sa ispravnom bojom/fontom preko svoje
   varijante. Selektor je sad proširen da pokrije SVE varijante direktno, bez obzira da li se
   `.btn` dodatno navodi (ostaje podržano za mesta koja ga već imaju, npr. `login.html`). */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-danger-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.2px;
  /* Bez ovoga, <button> nasleđuje UA podrazumevani line-height ("normal", obično >1), čija
     asimetrična ascent/descent kutija oko teksta pravi vidljiv pomeraj naviše unutar
     align-items:center flex reda (uočeno na "+ Najavi prisustvo" dugmetu, faza 10.8) — isti
     princip kao već postojeći .modal-close (dole), primenjen ovde na SVA dugmad. */
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: var(--green);
  color: var(--cream);
}

.btn-primary:hover {
  background: var(--green-light);
}

.btn-secondary {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-dark);
  font-weight: 500;
  font-size: 13px;
  gap: 8px;
}

.btn-secondary svg {
  width: 16px;
  height: 16px;
  stroke: var(--green);
  fill: none;
  stroke-width: 1.8;
}

.btn-secondary:hover {
  border-color: var(--gold);
}

.btn-danger {
  background: #fff;
  color: #B4634B;
  border: 1px solid #B4634B;
}

.btn-danger:hover {
  background: #B4634B;
  color: #fff;
}

.btn-danger-solid {
  background: var(--danger-solid);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.btn-danger-solid:hover {
  background: var(--danger-solid-dark);
}

/* Polja */
.field {
  margin-bottom: 20px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  margin: 0 0 6px;
}

.field input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-dark);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
}

.field input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(210, 171, 103, 0.18);
}

.pw-wrap {
  position: relative;
}

.pw-wrap input {
  padding-right: 42px;
}

.pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px;
  display: flex;
}

/* Kartice */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
}

/* Tabele */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th, .table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.table th {
  font-weight: 600;
  color: var(--text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Bedževi */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.badge-gold {
  background: rgba(210, 171, 103, 0.15);
  color: #8a6a34;
}

.badge-green {
  background: rgba(22, 51, 42, 0.08);
  color: var(--green);
}

.badge-muted {
  background: #EFEBE0;
  color: var(--text-muted);
}

.badge-pending {
  background: rgba(210, 171, 103, 0.15);
  color: #8A6212;
}

.badge-confirmed {
  background: var(--ok-bg);
  color: var(--ok);
}

.badge-cancelled {
  background: var(--danger-bg);
  color: var(--danger);
}

/* Tabovi (faza 10.8) — sadržaj svih panela je uvek prisutan u DOM-u, JS samo prebacuje
   display: none/"" po klasi .tab.active — bez HTMX round-trip-a za samo prebacivanje taba. */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tab {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}

.tab.active {
  color: var(--green);
  border-bottom-color: var(--gold);
}

.radio-row {
  display: flex;
  gap: 16px;
  font-size: 13.5px;
  margin-bottom: 10px;
}

/* Modal — bazni mehanizam (premešteno iz shell.css radi odjava trake ispod, koja se učitava
   na SVAKOJ stranici preko base.html, uključujući ekrane koji ne koriste _shell.html —
   varijante specifične za shell/admin dashboard, npr. .modal-box-form/.modal-fixed/
   .modal-scroll, ostaju u shell.css). */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(22, 51, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}

.modal-backdrop.open {
  display: flex;
}

.modal-box {
  background: #fff;
  border-radius: 14px;
  max-width: 640px;
  width: 100%;
  max-height: 86vh;
  padding: 28px 30px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 22px;
  line-height: 1;
  padding: 4px;
  z-index: 1;
}

.modal-close:hover {
  color: var(--text-dark);
}

.modal-box h2 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 4px;
}

.modal-box p.desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 4px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

/* Globalna traka (odjava) — fiksirana gore desno na SVAKOM ekranu, iznad sadržaja. */
.global-account-bar {
  position: fixed;
  top: 52px;
  right: 32px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 12px;
}

.global-account-bar .badge {
  background: #fff;
  box-shadow: 0 2px 8px rgba(22, 51, 42, 0.12);
}

/* Ikonica za /profile u globalnoj traci (faza 10.13) — /profile nema svoje mesto u sidebar
   navigaciji ni za jednu ulogu, pa je ovo jedini stalni pristup toj stranici. */
.icon-round {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(22, 51, 42, 0.1);
}

.icon-round svg {
  width: 16px;
  height: 16px;
  stroke: var(--green);
  fill: none;
  stroke-width: 1.8;
}

.icon-round:hover {
  border-color: var(--gold);
}

.logout-fab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--danger-solid);
  color: #fff;
  border: none;
  border-radius: 22px;
  padding: 9px 18px 9px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(168, 65, 46, 0.38), 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.logout-fab svg {
  width: 15px;
  height: 15px;
  flex: none;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logout-fab:hover {
  background: var(--danger-solid-dark);
  box-shadow: 0 6px 18px rgba(168, 65, 46, 0.46), 0 2px 6px rgba(0, 0, 0, 0.14);
  transform: translateY(-1px);
}

.logout-fab:active {
  transform: translateY(0);
}

/* Red sa checkbox-om + tekstualnim opisom (npr. saglasnost za fotografiju) — generička forma
   komponenta, faza restyle-a golih ekrana (patients/new.html). */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  margin-bottom: 18px;
  color: var(--text-dark);
}

.checkbox-row input {
  margin-top: 2px;
}

/* DEMO traka (dodato za mdpoliklinika-demo repo) — fiksna informativna traka pri vrhu svake
   stranice, deo normalnog toka (ne position:fixed) da ne prekriva postojeće fixed elemente
   (.global-account-bar, .logout-fab) niti zahteva ručno pomeranje njihovog z-indexa/offseta. */
.demo-ribbon {
  background: var(--gold);
  color: var(--green);
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  padding: 6px 12px;
  position: sticky;
  top: 0;
  z-index: 999;
}