/* =====================================================================
   Стилі внутрішнього застосунку: адмінпанель + кабінет пацієнта.
   Використовує ті самі кольори/шрифти/токени, що і публічний сайт.
   ===================================================================== */
@import url("styles.css");

*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:15px; line-height:1.5;
}
a{ color:var(--tiffany-deep); }

.app-shell{ min-height:100vh; display:flex; flex-direction:column; }

.app-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) var(--space-5); background:var(--surface); border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.app-topbar .brand{
  display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:600;
  font-size:1.1rem; color:var(--ink); text-decoration:none;
}
.app-topbar .brand-mark{
  width:2.1rem; height:2.1rem; border-radius:50%; background:var(--tiffany-tint-strong); color:var(--tiffany-deep);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:.75rem; font-weight:700;
  overflow:hidden; flex:none;
}
.app-topbar .brand-mark img{ width:78%; height:78%; object-fit:contain; display:block; }
.app-nav{ display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; }
.app-nav a{
  padding:.5rem .9rem; border-radius:999px; font-size:.88rem; color:var(--ink-soft); text-decoration:none;
  border:1px solid transparent;
}
.app-nav a.active, .app-nav a:hover{ border-color:var(--line); background:var(--surface-alt); color:var(--ink); }
.app-nav .who{ font-size:.82rem; color:var(--ink-soft); margin-right:var(--space-2); }

.app-main{ flex:1; padding:var(--space-6) var(--space-5); max-width:1080px; margin:0 auto; width:100%; }
.app-main.narrow{ max-width:640px; }

.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--space-5); margin-bottom:var(--space-5);
}
.card h2{ margin:0 0 var(--space-4); font-family:var(--font-display); font-size:1.25rem; }
.card h3{ margin:0 0 var(--space-3); font-size:1rem; }

.stat-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:var(--space-4); margin-bottom:var(--space-5); }
.stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:var(--space-4);
}
.stat-card .num{ font-family:var(--font-display); font-size:1.8rem; font-weight:600; color:var(--tiffany-deep); }
.stat-card .label{ font-size:.82rem; color:var(--ink-soft); margin-top:.2rem; }

table.data-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
table.data-table th, table.data-table td{
  text-align:left; padding:.65rem .75rem; border-bottom:1px solid var(--line); vertical-align:middle;
}
table.data-table th{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:600; }
table.data-table tr:hover td{ background:var(--surface-alt); }
table.data-table a.row-link{ color:var(--ink); text-decoration:none; font-weight:600; }
.table-wrap{ overflow-x:auto; }

.badge{
  display:inline-flex; align-items:center; padding:.25rem .65rem; border-radius:999px; font-size:.75rem;
  font-weight:600; background:var(--surface-alt); color:var(--ink-soft); border:1px solid var(--line); white-space:nowrap;
}
.badge.tiffany{ background:var(--tiffany-tint); color:var(--tiffany-deep); border-color:transparent; }
.badge.warn{ background:#FCEFC7; color:#7A5B00; border-color:transparent; }
.badge.danger{ background:rgba(179,38,30,.12); color:var(--danger); border-color:transparent; }
.badge.ok{ background:rgba(13,180,169,.14); color:var(--tiffany-deep); border-color:transparent; }

.alert{ padding:var(--space-4); border-radius:var(--radius-sm); font-size:.9rem; margin-bottom:var(--space-4); }
.alert.error{ background:rgba(179,38,30,.08); color:var(--danger); border:1px solid rgba(179,38,30,.25); }
.alert.success{ background:var(--tiffany-tint); color:var(--tiffany-deep); border:1px solid var(--tiffany); }
.alert.info{ background:var(--surface-alt); color:var(--ink-soft); border:1px solid var(--line); }

.form-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--space-4); }
.form-grid.cols-3{ grid-template-columns:repeat(3, 1fr); }
@media (max-width:640px){ .form-grid, .form-grid.cols-3{ grid-template-columns:1fr; } }

.login-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:var(--space-5);
}
.login-box{
  width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:var(--space-7) var(--space-6);
}
.login-box h1{ font-family:var(--font-display); font-size:1.4rem; margin:0 0 var(--space-2); }
.login-box p.sub{ color:var(--ink-soft); font-size:.88rem; margin:0 0 var(--space-5); }

.pill-tabs{ display:flex; gap:.4rem; margin-bottom:var(--space-5); flex-wrap:wrap; }
.pill-tabs a{
  padding:.45rem .9rem; border-radius:999px; border:1px solid var(--line); font-size:.85rem; text-decoration:none; color:var(--ink-soft);
}
.pill-tabs a.active{ background:var(--tiffany-tint); border-color:var(--tiffany); color:var(--tiffany-deep); font-weight:600; }

.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); gap:var(--space-3); }
.photo-grid img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--line); }

.empty-note{ color:var(--ink-soft); font-size:.9rem; padding:var(--space-5); text-align:center; }

.progress-chart{ display:flex; align-items:flex-end; gap:.35rem; height:120px; padding-top:var(--space-3); }
.progress-chart .bar{ flex:1; background:var(--tiffany-tint-strong); border-radius:4px 4px 0 0; position:relative; min-height:2px; }
.progress-chart .bar .bar-fill{ position:absolute; bottom:0; left:0; right:0; background:var(--tiffany-deep); border-radius:4px 4px 0 0; }
.progress-chart .bar .bar-label{ position:absolute; top:-1.2rem; left:0; right:0; text-align:center; font-size:.68rem; color:var(--ink-soft); }