/* =========================================================
   css/pages.css — Gaya khusus halaman: slot temujanji, timeline, Doctor, Tetapan
   ========================================================= */
/* ---------------- Slot temujanji ---------------- */
.slot-grid { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.slot-grid p { margin: 0; }
.slot { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: .45rem .7rem;
  font: inherit; font-size: .88rem; font-weight: 600; color: var(--navy-800); cursor: pointer; min-width: 64px; }
.slot:hover:not([disabled]) { border-color: var(--gold-500); background: var(--gold-100); }
.slot.selected { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.slot[disabled] { background: #f1f2f6; color: #b3b9c7; text-decoration: line-through; cursor: not-allowed; }
.slot-info { width: 100%; }

/* ---------------- Timeline (Rekod Perubatan) ---------------- */
.timeline { position: relative; padding-left: 1.4rem; border-left: 2px solid var(--blue-100); margin-left: .4rem; }
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; left: calc(-1.4rem - 8px); top: 1.4rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--gold-500); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--gold-400); }
.tl-date { font-size: .8rem; font-weight: 700; color: var(--gold-600); text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: .3rem; }
.tl-body .card-head { margin-bottom: .5rem; }
.meds { margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }

/* ---------------- Halaman Doctor ---------------- */
.modal-wide { width: min(860px, 100%); }
.hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.row-actions { display: inline-flex; gap: .35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.row-today { background: #fffbea; }
tr.clickable { cursor: pointer; }
.list li.top { align-items: flex-start; }
.chart-box.sm { height: 240px; }
.alert { background: var(--danger-bg); color: var(--danger); border-radius: 8px; padding: .55rem .8rem; margin-bottom: .9rem; font-size: .92rem; }
.kv-2 { grid-template-columns: max-content 1fr max-content 1fr; }
.rx-chip { display: block; padding: .45rem .7rem; margin-bottom: .35rem; background: var(--blue-50); border-radius: 8px; font-size: .9rem; }
.bar-list.wide li { grid-template-columns: 1fr 140px 32px; }

.rx-row, .sch-row { display: grid; gap: .45rem; margin-bottom: .45rem; align-items: center; }
.rx-row { grid-template-columns: 1.4fr .9fr 1fr .8fr 1.3fr auto; }
.sch-row { grid-template-columns: 130px 1fr auto 1fr auto; }
.rx-row input, .sch-row input, .sch-row select { padding: .45em .6em; font-size: .9rem; }

.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; margin-bottom: .4rem; }
.day { background: var(--blue-50); border-radius: 10px; padding: .55rem .4rem; text-align: center; border-top: 3px solid var(--blue-500); }
.day b { display: block; color: var(--navy-800); font-size: .85rem; }
.day small { display: block; color: var(--ink-2); font-size: .76rem; }
.day.off { background: #f4f5f8; border-top-color: #cfd4de; }
.day.off small { color: var(--ink-3); }

.dose-steps { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.dose-step { background: var(--gold-100); border: 1px solid #eedfa9; border-radius: 10px; padding: .5rem .8rem; text-align: center; }
.dose-step b { display: block; color: var(--gold-600); }
.dose-step small { font-size: .74rem; }
.dose-arrow { color: var(--gold-500); font-weight: 700; }

/* ---------------- Halaman Tetapan ---------------- */
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.layout-2.io { gap: 1rem; }
.io-box { background: var(--blue-50); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem; }
.io-box h4 { margin-bottom: .3rem; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn.disabled { opacity: .55; pointer-events: none; }
.file-btn:focus-within { outline: 3px solid rgba(201,162,39,.45); }
details summary { cursor: pointer; font-weight: 600; color: var(--blue-600); }
details[open] summary { margin-bottom: .6rem; }
.count-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; }
.count { background: var(--blue-50); border-radius: 10px; padding: .75rem .9rem; border-left: 3px solid var(--gold-400); }
.count strong { display: block; font-size: 1.4rem; color: var(--navy-800); line-height: 1.2; }
.count span { font-size: .84rem; color: var(--ink-2); }
.count small { display: block; font-size: .74rem; color: var(--gold-600); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border: 1px solid #f1c7c1; background: #fff8f7; border-radius: 10px; padding: .85rem 1rem; margin-top: 1rem; }
.err-list { margin: .4rem 0 0; padding-left: 1.2rem; color: var(--danger); font-size: .9rem; }
.err-list li { margin-bottom: .25rem; }