/* ============================================================
   NEXERA Portal — pacijentski samostalni portal.
   Nadograđuje mobile.css (isti vizuelni jezik kao QR-karton mobilni
   klijent); ovdje samo elementi specifični za portal.
   ============================================================ */

/* mobile.css kaps .mob-content na 480px (namjerno usko za QR-karton
   prikaz) — portal ima tabele (EMR/terapija/recepti/lab/radiologija) koje
   su čitljivije kad se razvuku preko cijelog ekrana na tabletu/desktopu,
   pa ovaj override (isti selektor, kasnije u redoslijedu učitavanja =
   pobjeđuje) uklanja kap i širi sadržaj automatski prema veličini ekrana.
   Blagi gornji plafon (1400px) samo da redovi ne postanu apsurdno dugi na
   vrlo širokim monitorima — i dalje efektivno "puna širina" za svaki
   realan prozor pregledača. */
.mob-content { max-width: 1400px; width: 100%; padding: 14px 20px; }
@media (min-width: 700px) {
  .mob-content { padding: 24px 32px; }
}

.portal-tabs {
  display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 0 14px; background: var(--primary-dark);
}
.portal-tab-btn {
  flex-shrink: 0; border: none; background: transparent; color: rgba(255,255,255,0.65);
  padding: 12px 14px; font-size: 15px; font-weight: 600; border-bottom: 3px solid transparent;
  touch-action: manipulation; white-space: nowrap;
}
.portal-tab-btn.active { color: #fff; border-bottom-color: var(--success); }

/* ---- Tabelarni prikaz (EMR/terapija/recepti/lab/radiologija) ---- */
.p-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  margin-bottom: 14px;
}
.p-table { width: 100%; border-collapse: collapse; font-size: 14px; white-space: nowrap; }
.p-table th {
  background: var(--bg); color: var(--text3); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; text-align: left;
  padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.p-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.p-table tbody tr:last-child > td { border-bottom: none; }
.p-table td.p-wrap { white-space: normal; min-width: 160px; }
.p-table tr.p-row-clickable { cursor: pointer; touch-action: manipulation; }
.p-table tr.p-row-clickable:active, .p-table tr.p-row-clickable:hover { background: var(--bg); }
.p-row-toggle { color: var(--primary); font-size: 12px; font-weight: 600; white-space: nowrap; }

.p-detail-row td {
  background: var(--bg); padding: 16px 18px; white-space: normal;
}
.p-detail-field { margin-bottom: 10px; font-size: 14px; line-height: 1.45; }
.p-detail-field:last-child { margin-bottom: 0; }
.p-detail-label {
  display: block; font-weight: 700; color: var(--text3); font-size: 11px;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px;
}

.dl-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--primary); background: #fff; color: var(--primary);
  border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 600;
  text-decoration: none; min-height: 36px; touch-action: manipulation; white-space: nowrap;
}
.dl-btn:active { background: var(--bg); }

.lab-flag { font-weight: 700; }
.lab-flag-visok, .lab-flag-kritično_visok { color: var(--danger); }
.lab-flag-nizak, .lab-flag-kritično_nizak { color: var(--warning); }
.lab-flag-normalan { color: var(--success); }

.record-card {
  background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.record-title { font-size: 17px; font-weight: 700; }
.record-sub { font-size: 15px; color: var(--text2); margin-top: 4px; line-height: 1.4; }