/* =========================================================
   Sistem desain — Klinik Terapi Olahraga
   Ditulis sebagai CSS biasa (tanpa proses build) supaya
   aplikasi bisa langsung diunggah ke hosting apa adanya.
   ========================================================= */

:root {
  --ground: #f2f5f6;
  --surface: #ffffff;
  --surface-sunk: #e9eef0;

  --ink: #16212b;
  --ink-soft: #53616d;
  --ink-faint: #8896a1;

  --line: #dae1e5;
  --line-strong: #c3ced4;

  --brand: #0f6b5c;
  --brand-ink: #0b4f44;
  --brand-soft: #dcefeb;

  --danger: #b03a2e;
  --danger-soft: #fae5e2;
  --warn: #9a6206;
  --warn-soft: #fbeed3;
  --ok: #1d7a4c;
  --ok-soft: #ddf0e5;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(22, 33, 43, .06), 0 4px 12px rgba(22, 33, 43, .05);
  --shadow-lg: 0 4px 12px rgba(22, 33, 43, .1), 0 16px 40px rgba(22, 33, 43, .1);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Kerangka halaman ---------- */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Saat logo terpasang, kotaknya dibuat tanpa latar dan tanpa sudut
   membulat: logo dengan latar transparan harus tampil apa adanya, tidak
   tertimpa warna merek atau terpotong lengkungan. Warna latar hanya
   dipakai untuk inisial nama saat logo belum ada. */
.brand-mark.punya-logo {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}

/* contain, bukan cover: logo persegi panjang tidak boleh terpotong
   demi memenuhi kotak persegi. */
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }

.brand-text { min-width: 0; }
.brand-name {
  font-weight: 650;
  font-size: 15px;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-tagline {
  font-size: 12px;
  color: var(--ink-faint);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
}
.user-name { font-weight: 600; line-height: 1.2; }
.user-role { color: var(--ink-faint); font-size: 12px; line-height: 1.2; }

/* Profil menyatu di sudut kanan atas, bukan di baris menu: ini urusan
   akun sendiri, bukan bagian dari alur kerja klinik. */
.user-tab {
  display: block;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: inherit;
}
.user-tab:hover {
  text-decoration: none;
  background: var(--surface-sunk);
  border-color: var(--line);
}
.user-tab:hover .user-name { color: var(--brand); }

/* Tawaran menyegarkan papan. Melayang di bawah supaya tidak menutupi
   apa pun yang sedang dibaca, dan cukup terlihat untuk tidak terlewat. */
.papan-segar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(22, 33, 43, .18);
  font-size: 13.5px;
  max-width: calc(100vw - 32px);
}

/* ---------- Pita aplikasi contoh ---------- */

/* Sengaja mencolok dan tidak bisa ditutup. Dua aplikasi yang
   tampilannya serupa akan tertukar cepat atau lambat, dan yang paling
   mahal akibatnya adalah data pasien sungguhan yang diketikkan ke
   aplikasi contoh lalu terhapus saat datanya diisi ulang. */
.pita-contoh {
  background: #9a3412;
  color: #fff;
  padding: 8px 20px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .01em;
}
.pita-contoh strong { letter-spacing: .06em; }

/* ---------- Tirai konfirmasi ---------- */

/* Formulirnya tetap utuh di belakang, jadi "Periksa Lagi" benar-benar
   mengembalikan ke tempat semula tanpa ada isian yang hilang. */
.tirai {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(22, 33, 43, .45);
}
.tirai-kotak {
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(22, 33, 43, .3);
  overflow: hidden;
}
.tirai-kepala { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.tirai-isi { padding: 16px 18px; overflow-y: auto; }
.tirai-kaki {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface-sunk);
}

/* ---------- Lonceng pemberitahuan ---------- */

.lonceng-bungkus { position: relative; }
.lonceng {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.lonceng:hover { background: var(--surface-sunk); color: var(--ink); }
.lonceng-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
}
.lonceng-panel {
  position: absolute;
  top: 46px;
  right: 0;
  width: min(360px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(22, 33, 43, .16);
  z-index: 40;
  overflow: hidden;
}
.lonceng-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.lonceng-isi { max-height: 380px; overflow-y: auto; }
.lonceng-item {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.lonceng-item:last-child { border-bottom: none; }
.lonceng-item.baru { background: var(--brand-soft); }
.lonceng-judul { font-weight: 600; line-height: 1.35; }
.lonceng-teks { color: var(--ink-soft); margin-top: 3px; line-height: 1.45; }
.lonceng-waktu { color: var(--ink-faint); font-size: 11.5px; margin-top: 3px; }
.lonceng-kosong { padding: 24px 14px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.lonceng-kaki {
  display: block;
  padding: 11px 14px;
  text-align: center;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  background: var(--surface-sunk);
}

.nav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}
/* Tiap menu selebar sama dan bersama-sama mengisi lebar layar: baris
   navigasi jadi terbagi rata, bukan menumpuk di kiri dengan ruang kosong
   panjang di kanan. Kolom grid dipakai, bukan flex, karena hanya grid
   yang bisa memaksa lebar sama tanpa tahu berapa banyak menunya. */
.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
}
.nav a {
  padding: 12px 10px;
  font-size: 14px;
  font-weight: 550;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav a:hover { color: var(--ink); text-decoration: none; background: var(--surface-sunk); }
.nav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* Di layar sempit, lebar yang dipaksa sama akan memotong sebutan menu
   jadi tidak terbaca. Di bawah ambang ini menu kembali selebar isinya
   dan barisnya boleh digeser -- terbaca lebih penting daripada rata. */
@media (max-width: 860px) {
  .nav-inner { grid-auto-columns: minmax(max-content, 1fr); }
  .nav a { padding: 12px 14px; }
}

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 20px 64px;
}

/* ---------- Judul halaman ---------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.page-title { font-size: 23px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.page-sub { color: var(--ink-soft); font-size: 14px; margin: 3px 0 0; }

/* ---------- Kartu ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-pad { padding: 20px; }
.card-head {
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.card-title { font-size: 15.5px; font-weight: 650; margin: 0; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)); }

/* ---------- Tombol ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-ink); }

.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-sunk); }

.btn-sm { padding: 6px 11px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---------- Formulir ---------- */

.field { margin-bottom: 16px; }
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

label.lbl {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--ink);
}
.lbl .opt { font-weight: 400; color: var(--ink-faint); }

.hint { font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=date], input[type=number], input[type=search], select, textarea {
  width: 100%;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
textarea { min-height: 84px; resize: vertical; }

.input-error { border-color: var(--danger); }
.err { color: var(--danger); font-size: 12.5px; margin-top: 5px; }

/* ---------- Pencarian ---------- */

.search-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.search-bar input[type=search] { flex: 1 1 260px; font-size: 15.5px; padding: 11px 14px; }

/* ---------- Tabel ---------- */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td {
  text-align: left;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.data thead th {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-faint);
  font-weight: 650;
  background: var(--surface-sunk);
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--surface-sunk); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-size: 13px; }

/* ---------- Label status ---------- */

.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.tag-brand { background: var(--brand-soft); color: var(--brand-ink); }
.tag-ok { background: var(--ok-soft); color: var(--ok); }
.tag-warn { background: var(--warn-soft); color: var(--warn); }
.tag-danger { background: var(--danger-soft); color: var(--danger); }
.tag-mute { background: var(--surface-sunk); color: var(--ink-soft); }

/* ---------- Pemberitahuan ---------- */

.notice {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}
.notice-ok { background: var(--ok-soft); color: var(--ok); border-color: #bfe3cd; }
.notice-err { background: var(--danger-soft); color: var(--danger); border-color: #f0c9c3; }

/* ---------- Keadaan kosong ---------- */

.empty { padding: 48px 24px; text-align: center; color: var(--ink-soft); }
.empty-title { font-weight: 650; color: var(--ink); margin-bottom: 5px; font-size: 15px; }
.empty p { margin: 0 0 16px; font-size: 14px; }

/* ---------- Daftar keterangan ---------- */

.dl { display: grid; gap: 0; }
.dl-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.dl-row:last-child { border-bottom: none; }
.dl-row dt { color: var(--ink-soft); }
.dl-row dd { margin: 0; font-weight: 550; }
.dl-row dd.kosong { font-weight: 400; color: var(--ink-faint); font-style: italic; }

@media (max-width: 560px) {
  .dl-row { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
}

/* ---------- Halaman masuk ---------- */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card { width: 100%; max-width: 400px; }
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand .brand-mark {
  width: 52px; height: 52px; font-size: 20px; border-radius: 13px;
  margin: 0 auto 12px;
}
.login-brand h1 { font-size: 20px; margin: 0 0 3px; font-weight: 650; }
.login-brand p { margin: 0; color: var(--ink-faint); font-size: 13.5px; }

.demo-box {
  margin-top: 18px;
  padding: 13px 15px;
  background: var(--surface-sunk);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.65;
}
.demo-box b { color: var(--ink); }
.demo-box code { font-family: var(--font-mono); font-size: 12px; }

/* ---------- Kartu ringkas dasbor ---------- */

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.stat-label { font-size: 12.5px; color: var(--ink-soft); font-weight: 550; }
.stat-value { font-size: 27px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat-note { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }

/* ---------- Menu pintasan ---------- */

.tile {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  color: var(--ink);
  transition: border-color .12s ease, transform .12s ease;
}
.tile:hover { text-decoration: none; border-color: var(--brand); transform: translateY(-1px); }
.tile-title { font-weight: 650; font-size: 15px; margin-bottom: 3px; }
.tile-desc { font-size: 13.5px; color: var(--ink-soft); }

/* ---------- Tab dalam halaman ---------- */

.tabs {
  display: flex;
  gap: 3px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  margin-bottom: 18px;
  scrollbar-width: thin;
}
.tab-btn {
  padding: 10px 15px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.tab-count {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--surface-sunk);
  color: var(--ink-soft);
}
.tab-btn[aria-selected="true"] .tab-count { background: var(--brand-soft); color: var(--brand-ink); }

.tab-panel[hidden] { display: none; }

/* ---------- Daftar catatan ---------- */

.item-list { display: grid; gap: 10px; }
.item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  background: var(--surface);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.item-main { min-width: 0; flex: 1; }
.item-title { font-weight: 650; font-size: 14.5px; }
.item-meta { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.item-body { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Petak dokumen ---------- */

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.doc {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
.doc-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--surface-sunk);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.doc-thumb .doc-ext {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-faint);
  letter-spacing: .05em;
}
.doc-info { padding: 9px 11px; }
.doc-name {
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-meta { font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
.doc-actions { padding: 0 11px 10px; }

/* ---------- Rangkuman tanda vital ---------- */

.vitals { display: flex; flex-wrap: wrap; gap: 10px; }
.vital {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 13px;
  background: var(--surface);
  min-width: 96px;
}
.vital-label { font-size: 11.5px; color: var(--ink-faint); }
.vital-value { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- Lain-lain ---------- */

.muted { color: var(--ink-faint); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}