/* Styles for screens7 — Checkup Start / Nurse CRM / Post-exam / Follow-up */

/* ========= C+1 Checkup Start ========= */
.cu-step-head { display:flex; gap:12px; align-items:center; }
.cu-step-n {
  width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-mute); color:var(--muted); font-weight:800; font-size:14px;
  border:1.5px solid var(--border); flex-shrink:0;
}
.cu-step-n.active { background:var(--primary-soft); color:var(--primary); border-color:var(--primary); }
.cu-step-n.done   { background:var(--primary); color:#fff; border-color:var(--primary); }

.cu-patient-card {
  display:flex; gap:12px; align-items:center; margin-top:12px;
  padding:12px 14px; background:var(--primary-soft); border-radius:10px;
  border:1px solid var(--primary);
}
.cu-patient-card .av {
  width:40px; height:40px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:22px;
}

.appt-check { margin-top:10px; display:grid; gap:10px; }
.appt-found {
  display:flex; gap:12px; align-items:center; padding:12px 14px;
  background:var(--green-soft); border-radius:10px; border:1px solid var(--green);
}
.appt-found .ac-ico {
  width:40px; height:40px; border-radius:10px; background:#fff; display:grid; place-items:center; font-size:20px;
}
.queue-info {
  display:flex; gap:24px; padding:10px 14px;
  background:var(--surface-mute); border-radius:10px; font-size:13px;
}

.pkg-scan {
  display:flex; gap:16px; align-items:center; margin-top:12px; padding:16px;
  background:var(--surface-mute); border-radius:12px; cursor:pointer;
  border:2px dashed var(--border); transition:all .15s;
}
.pkg-scan:hover { border-color:var(--primary); background:var(--primary-soft); }
.qr-frame {
  position:relative; width:88px; height:88px; border:2px solid var(--border);
  border-radius:12px; display:grid; place-items:center; background:#fff; overflow:hidden;
}
.qr-icon { font-size:32px; opacity:0.6; }
.qr-corners {
  position:absolute; inset:6px; border:2px solid var(--primary); border-radius:8px;
  clip-path: polygon(0 0, 20% 0, 20% 4px, 4px 4px, 4px 20%, 0 20%,
                    0 80%, 4px 80%, 4px calc(100% - 4px), 20% calc(100% - 4px), 20% 100%, 0 100%,
                    100% 100%, 100% 80%, calc(100% - 4px) 80%, calc(100% - 4px) calc(100% - 4px), 80% calc(100% - 4px), 80% 100%, 
                    100% 0, 80% 0, 80% 4px, calc(100% - 4px) 4px, calc(100% - 4px) 20%, 100% 20%);
}
.qr-scan-line {
  position:absolute; left:0; right:0; top:0; height:2px; background:var(--primary);
  box-shadow:0 0 8px var(--primary);
  animation: qrscan 1.2s linear infinite;
}
@keyframes qrscan {
  0%   { top:0; }
  100% { top:100%; }
}

.pkg-card {
  margin-top:12px; border:1.5px solid var(--green); border-radius:12px; overflow:hidden;
}
.pkg-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; background:var(--green-soft);
}
.pkg-card .kv-list { padding:10px 14px; }

.dispatch-preview { display:grid; gap:4px; }
.dispatch-step {
  display:flex; gap:10px; align-items:center; padding:8px 10px; border-radius:8px;
  font-size:13px; color:var(--muted);
}
.dispatch-step .n {
  width:22px; height:22px; border-radius:50%; background:var(--surface-mute);
  display:grid; place-items:center; font-size:11px; font-weight:800; flex-shrink:0;
}
.dispatch-step.active { background:var(--primary-soft); color:var(--primary); font-weight:700; }
.dispatch-step.active .n { background:var(--primary); color:#fff; }
.dispatch-step.done { color:var(--text); }
.dispatch-step.done .n { background:var(--green); color:#fff; }

/* ========= C+2 Nurse CRM ========= */
.vs-entry-grid {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
}
.vs-field { display:grid; gap:4px; }
.vs-field.warn .vs-input { border-color:var(--amber); background:var(--amber-soft); }
.vs-input {
  display:flex; align-items:center; gap:4px; padding:0 10px;
  border:1.5px solid var(--border); border-radius:10px; background:#fff;
  transition:border-color .15s;
}
.vs-input:focus-within { border-color:var(--primary); }
.vs-input input {
  flex:1; border:0; background:transparent; padding:10px 0; font:inherit; font-weight:700; font-size:16px; outline:0; min-width:0;
}
.vs-input span { color:var(--muted); font-size:12px; }
.warn-note { font-size:11px; color:var(--amber); font-weight:600; }

.bmi-box {
  margin-top:14px; display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; background:var(--surface-mute); border-radius:12px;
}
.bmi-box .big { font-size:26px; font-weight:800; }
.chip.tone-green { background:var(--green-soft); color:var(--green); }
.chip.tone-amber { background:var(--amber-soft); color:var(--amber); }

.range {
  width:100%; accent-color:var(--primary);
}

.crm-ch {
  display:grid; gap:4px; padding:10px; border:1.5px solid var(--border);
  border-radius:10px; background:#fff; cursor:pointer; text-align:center;
  font:inherit; font-size:12px; font-weight:600; transition:all .15s;
}
.crm-ch .ico { font-size:20px; }
.crm-ch:hover { border-color:var(--primary); }
.crm-ch.active { border-color:var(--primary); background:var(--primary-soft); color:var(--primary); }

.alert {
  display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:8px;
  font-size:12px;
}
.alert.warn { background:var(--rose-soft); color:var(--rose); }
.alert.amber { background:var(--amber-soft); color:var(--amber); }

/* ========= C+3 Post-exam decision ========= */
.results-track { display:grid; gap:6px; }
.rt-item {
  display:flex; gap:12px; align-items:center; padding:10px 12px;
  background:#fff; border:1px solid var(--border); border-radius:10px;
}
.rt-item.ready { background:var(--green-soft); border-color:var(--green); }
.rt-ico {
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface-mute); font-size:14px; font-weight:800; flex-shrink:0;
}
.rt-item.ready .rt-ico { background:var(--green); color:#fff; }

.post-summary-row {
  display:flex; justify-content:space-between; align-items:center; margin-top:12px;
  padding:10px 14px; background:var(--surface-mute); border-radius:10px; font-size:13px;
}

.decision-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; }
.decision-card {
  text-align:left; padding:20px; border:2px solid var(--border); border-radius:14px;
  background:#fff; cursor:pointer; font:inherit; transition:all .15s;
  display:grid; gap:8px;
}
.decision-card:hover { border-color:var(--primary); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,0.06); }
.decision-card.active { border-color:var(--primary); background:var(--primary-soft); }
.decision-card .d-ico { font-size:32px; }
.decision-card .d-nm { font-size:16px; font-weight:800; }
.decision-card ul { margin:6px 0 0; padding-left:18px; font-size:13px; }
.decision-card ul li { margin:4px 0; }

.lounge-info {
  display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
  padding:14px; background:var(--surface-mute); border-radius:12px;
}
.lounge-info .big { font-size:22px; font-weight:800; }

.result-appt { margin-top:6px; }
.ra-card {
  padding:16px; background:linear-gradient(135deg, var(--primary-soft), #fff);
  border:1.5px solid var(--primary); border-radius:14px;
}
.ra-head { display:flex; justify-content:space-between; align-items:center; }
.ra-head .big { font-size:20px; font-weight:800; color:var(--primary); }
.ra-meta {
  display:flex; gap:10px; margin-top:10px; padding-top:10px;
  border-top:1px dashed var(--border); font-size:12px; color:var(--muted);
}

/* ========= C+4 Follow-up plan ========= */
.crm-task {
  display:grid; grid-template-columns: 80px 90px 1fr 70px; gap:10px; align-items:center;
  padding:10px 12px; border:1.5px solid var(--border); border-radius:10px;
  background:#fff; cursor:pointer; transition:all .15s;
}
.crm-task:hover { border-color:var(--primary); }
.crm-task.on { border-color:var(--primary); background:var(--primary-soft); }
.crm-task.off { opacity:0.5; }
.crm-task .when { font-weight:800; font-size:14px; color:var(--primary); }
.crm-task .what { font-size:13px; }
.crm-task .switch { font-size:11px; font-weight:700; text-align:right; color:var(--muted); }
.crm-task.on .switch { color:var(--primary); }

.referral-row {
  display:flex; gap:10px; align-items:center; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px; background:#fff;
}
.referral-row.on { border-color:var(--primary); background:var(--primary-soft); }
.referral-row.off { opacity:0.6; }

.plan-summary { display:grid; gap:10px; }
.ps-row {
  display:flex; gap:12px; align-items:center; padding:10px 12px;
  background:var(--surface-mute); border-radius:10px;
}
.ps-row .ps-num {
  width:36px; height:36px; border-radius:10px; background:var(--primary); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:16px;
}

.timeline { display:grid; gap:8px; padding-left:6px; }
.tl-item {
  display:flex; gap:10px; align-items:center; font-size:12px;
  padding:4px 0;
  position:relative;
}
.tl-dot {
  width:10px; height:10px; border-radius:50%; background:var(--border);
  flex-shrink:0; border:2px solid #fff; box-shadow:0 0 0 1px var(--border);
}
.tl-item.now .tl-dot { background:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.tl-item.now { font-weight:700; color:var(--primary); }

.btn.block.ghost { border:1.5px dashed var(--border); background:transparent; color:var(--muted); }
.btn.block.ghost:hover { border-color:var(--primary); color:var(--primary); }

/* ========= Page width fill ========= */
/* .page had max-width:1440px which capped content on wide monitors, leaving empty
   space on the right. Remove cap so page stretches to fill .main fully. */
.page { max-width: none; }