/* ── nav ── */
.topnav {
  position: sticky; top: 0; z-index: 150;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  transition: background 0.35s, border-color 0.35s;
}
.nav-link {
  text-decoration: none;
  font-size: 14px; font-weight: 600;
  color: var(--text-muted);
  padding: 6px 14px; border-radius: 8px;
  transition: all 0.18s;
}
.nav-link:hover   { background: var(--surface2); color: var(--text); }
.nav-link.active  { background: var(--surface2); color: var(--text); }

/* ── dialysis card accent colours ── */
.card-uf::before     { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.card-urine::before  { background: linear-gradient(90deg, #0369a1, #38bdf8); }
.card-weight::before { background: linear-gradient(90deg, #d97706, #fcd34d); }
.card-drain::before  { background: linear-gradient(90deg, #059669, #6ee7b7); }

.card-uf   .stat-value { color: #7c3aed; }
.card-urine .stat-value{ color: #0369a1; }
.card-weight .stat-value{ color: #d97706; }
.card-drain .stat-value{ color: #059669; }

/* dark-mode adjustments */
html[data-theme="dark"] .card-uf   .stat-value { color: #a78bfa; }
html[data-theme="dark"] .card-urine .stat-value{ color: #38bdf8; }
html[data-theme="dark"] .card-weight .stat-value{ color: #fcd34d; }
html[data-theme="dark"] .card-drain .stat-value{ color: #6ee7b7; }

.dial-icon { background: rgba(124,58,237,0.12) !important; }
html[data-theme="dark"] .dial-icon { background: rgba(124,58,237,0.2) !important; }

.dial-badge {
  background: rgba(124,58,237,0.1) !important;
  color: #7c3aed !important;
  border-color: rgba(124,58,237,0.25) !important;
}
html[data-theme="dark"] .dial-badge { color: #a78bfa !important; }

/* val colours in table */
.val-uf     { color: #7c3aed; font-weight: 700; font-size: 15px; }
.val-urine  { color: #0369a1; font-weight: 700; }
.val-weight { color: #d97706; font-weight: 700; }
.val-drain  { color: #059669; font-weight: 700; }

html[data-theme="dark"] .val-uf     { color: #a78bfa; }
html[data-theme="dark"] .val-urine  { color: #38bdf8; }
html[data-theme="dark"] .val-weight { color: #fcd34d; }
html[data-theme="dark"] .val-drain  { color: #6ee7b7; }

/* ── стрелки тренда в ячейках таблицы ── */
.cell-arrow      { font-size: 11px; font-weight: 700; color: var(--text-hint); margin-left: 2px; }
.cell-arrow-good { color: var(--ok); }
.cell-arrow-bad  { color: var(--danger); }

/* ── мигающая подсветка макс/мин значений ── */
.blink-max  { animation: blinkGreen 1.8s ease-in-out infinite; border-radius: 6px; }
.blink-min  { animation: blinkRed   1.8s ease-in-out infinite; border-radius: 6px; }
.blink-high { animation: blinkRed   1.8s ease-in-out infinite; border-radius: 6px; }
@keyframes blinkGreen {
  0%, 100% { background: transparent; }
  50%      { background: var(--ok-light); }
}
@keyframes blinkRed {
  0%, 100% { background: transparent; }
  50%      { background: var(--sys-light); }
}
@media print {
  .blink-max, .blink-min, .blink-high { animation: none !important; background: transparent !important; }
}

/* ── строка-заголовок месяца со средними значениями ── */
.month-header-row td {
  background: var(--surface2) !important;
  font-weight: 700; font-size: 12.5px;
  color: var(--text); border-top: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-top: 10px; padding-bottom: 10px;
}
.month-header-row:hover td { background: var(--surface2) !important; }

/* ── container top padding accounts for sticky nav ── */
.topnav ~ .container { padding-top: 24px; }

/* ── edit button in table ── */
.btn-edit {
  padding: 4px 10px; font-size: 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text-muted); transition: all 0.18s;
}
.btn-edit:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.btn-del-row {
  padding: 4px 10px; font-size: 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text-muted); transition: all 0.18s;
}
.btn-del-row:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* ── modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.modal-overlay.hidden { display: none; }

.modal-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px 32px; width: 100%; max-width: 560px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.25);
  animation: slideUp 0.18s ease;
}
@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0 } to { transform: none; opacity: 1 } }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.modal-header h3 { font-size: 18px; font-weight: 700; color: var(--text); }
.modal-close {
  background: none; border: none; cursor: pointer; font-size: 18px;
  color: var(--text-muted); padding: 4px 8px; border-radius: 6px;
  transition: background 0.15s;
}
.modal-close:hover { background: var(--surface2); }

.modal-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px;
}
.modal-field { display: flex; flex-direction: column; gap: 5px; }
.modal-field label { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.modal-field input {
  padding: 9px 12px; border-radius: 8px; font-size: 14px;
  border: 1.5px solid var(--border); background: var(--surface2);
  color: var(--text); transition: border-color 0.18s;
}
.modal-field input:focus { outline: none; border-color: var(--primary); }

.modal-actions { display: flex; justify-content: space-between; align-items: center; }
.btn-del  { background: rgba(220,38,38,0.1); color: #dc2626; border: 1.5px solid rgba(220,38,38,0.3); padding: 9px 18px; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.18s; }
.btn-del:hover  { background: #dc2626; color: #fff; }
.btn-save { background: var(--primary); color: #fff; border: none; padding: 9px 22px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; transition: opacity 0.18s; }
.btn-save:hover { opacity: 0.88; }

/* hide edit column in print */
@media print { .no-print { display: none !important; } }