/**
 * 电子病历 /tools/emr
 * 极简：细边框 + 大留白 + 站点主题变量，无多余阴影与渐变
 */

.em-page {
    --em-line: var(--border-color);
    --em-tint: color-mix(in srgb, var(--accent) 12%, transparent);
    padding: 14px 2px 40px;
    color: var(--text-primary);
}

/* ---------------- 顶部 ---------------- */
.em-top {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; margin-bottom: 12px;
    border: 1px solid var(--em-line);
    border-radius: var(--radius);
    background: var(--bg-secondary);
}
.em-top-l { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 240px; }
.em-logo {
    flex: 0 0 auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; border-radius: 10px; background: var(--em-tint);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.em-top-t h1 { font-size: 18px; line-height: 1.25; }
.em-top-sub { font-size: 12px; color: var(--text-secondary); }
.em-top-sub b { color: var(--accent); font-weight: 600; }
.em-top-r { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------------- 通用元件 ---------------- */
.em-btn {
    height: 32px; padding: 0 12px;
    font-size: 13px; font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--em-line);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.em-btn:hover { background: var(--em-tint); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.em-btn-pri {
    color: #fff; background: var(--accent);
    border-color: var(--accent);
}
.em-btn-pri:hover { background: color-mix(in srgb, var(--accent) 86%, #000); border-color: color-mix(in srgb, var(--accent) 86%, #000); }
.em-btn-danger { color: #c62828; }
.em-btn-danger:hover { background: rgba(198, 40, 40, .08); border-color: rgba(198, 40, 40, .38); }
.em-btn-sm { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 6px; }
.em-input, .em-f input, .em-f select, .em-f textarea {
    width: 100%; box-sizing: border-box;
    font-family: inherit; font-size: 13.5px; color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--em-line);
    border-radius: 8px;
    padding: 7px 9px;
}
.em-input { height: 34px; }
.em-f textarea { resize: vertical; line-height: 1.6; }
.em-f input:focus, .em-f select:focus, .em-f textarea:focus, .em-input:focus {
    outline: none; border-color: var(--accent);
}
.em-spacer { flex: 1 1 auto; }
.em-hint { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.em-mute { color: var(--text-secondary); }

/* ---------------- 主体布局 ---------------- */
.em-body { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 14px; align-items: start; }

/* 侧栏 */
.em-side {
    position: sticky; top: 12px;
    border: 1px solid var(--em-line); border-radius: var(--radius);
    background: var(--bg-secondary);
    overflow: hidden;
}
.em-side-top { display: flex; gap: 6px; padding: 10px; border-bottom: 1px solid var(--em-line); }
.em-side-top .em-input { flex: 1 1 auto; min-width: 0; }
.em-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--em-line); }
.em-chip {
    padding: 3px 9px; font-size: 12px; font-family: inherit; cursor: pointer;
    color: var(--text-secondary); background: transparent;
    border: 1px solid var(--em-line); border-radius: 999px;
}
.em-chip.is-active { color: var(--accent); background: var(--em-tint); border-color: color-mix(in srgb, var(--accent) 34%, transparent); }
.em-list { max-height: calc(100vh - 210px); overflow: auto; }
.em-pcard {
    display: block; width: 100%; text-align: left; font-family: inherit;
    padding: 10px 12px; background: transparent; border: 0;
    border-bottom: 1px solid var(--em-line); cursor: pointer;
}
.em-pcard:last-child { border-bottom: 0; }
.em-pcard:hover { background: var(--em-tint); }
.em-pcard.is-active { background: var(--em-tint); box-shadow: inset 2px 0 0 var(--accent); }
.em-pc-t { display: flex; align-items: center; gap: 8px; }
.em-ava {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; color: #fff; background: var(--accent);
}
.em-pc-n { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-pc-m { margin-top: 3px; font-size: 12px; color: var(--text-secondary); }
.em-pc-a { margin-top: 3px; font-size: 11.5px; color: #c62828; }
.em-pc-tags { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.em-mini {
    padding: 1px 7px; font-size: 11px; border-radius: 999px;
    color: var(--text-secondary); background: var(--bg-primary); border: 1px solid var(--em-line);
}
.em-empty-list { padding: 22px 12px; text-align: center; font-size: 12.5px; color: var(--text-secondary); }

/* 工作区 */
.em-main { min-width: 0; }
.em-empty {
    padding: 48px 20px; text-align: center;
    border: 1px dashed var(--em-line); border-radius: var(--radius); background: var(--bg-secondary);
}
.em-empty-ic { font-size: 34px; }
.em-empty h2 { font-size: 16px; margin: 8px 0 4px; }
.em-empty > p { font-size: 13px; color: var(--text-secondary); }
.em-empty-acts { display: flex; gap: 8px; justify-content: center; margin: 14px 0 4px; flex-wrap: wrap; }
.em-empty-tips {
    max-width: 520px; margin: 16px auto 0; text-align: left;
    font-size: 12.5px; line-height: 1.9; color: var(--text-secondary);
    list-style: none;
}
.em-empty-tips li::before { content: '·'; margin-right: 6px; color: var(--accent); }

/* 患者头部卡 */
.em-ptcard {
    padding: 14px 16px; margin-bottom: 12px;
    border: 1px solid var(--em-line); border-radius: var(--radius); background: var(--bg-secondary);
}
.em-pt-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.em-pt-ava { width: 44px; height: 44px; border-radius: 12px; font-size: 19px; }
.em-pt-id { min-width: 0; flex: 1 1 200px; }
.em-pt-name { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; }
.em-pt-meta { margin-top: 4px; font-size: 12.5px; color: var(--text-secondary); }
.em-pt-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.em-pt-alg {
    display: flex; gap: 6px; align-items: flex-start; margin-top: 10px;
    padding: 7px 10px; font-size: 12.5px; color: #c62828;
    background: rgba(198, 40, 40, .07); border: 1px solid rgba(198, 40, 40, .28); border-radius: 8px;
}
.em-pt-tags { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 5px; }

/* Tabs */
.em-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--em-line); margin-bottom: 12px; overflow-x: auto; }
.em-tab {
    padding: 8px 14px; font-size: 13.5px; font-family: inherit; white-space: nowrap;
    color: var(--text-secondary); background: transparent; border: 0;
    border-bottom: 2px solid transparent; cursor: pointer;
}
.em-tab:hover { color: var(--text-primary); }
.em-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.em-pane { min-width: 0; }

/* 区块标题与空态 */
.em-sec-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.em-sec-head h3 { font-size: 14px; font-weight: 600; }
.em-sec-head .em-btn { margin-left: auto; }
.em-blank { padding: 26px 14px; text-align: center; font-size: 13px; color: var(--text-secondary); border: 1px dashed var(--em-line); border-radius: var(--radius); }

/* 时间线 */
.em-tl { position: relative; padding-left: 18px; }
.em-tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--em-line); }
.em-tl-item { position: relative; margin-bottom: 12px; }
.em-tl-item::before {
    content: ''; position: absolute; left: -17px; top: 14px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--bg-primary);
    box-sizing: content-box;
}
.em-tl-item.t-lab::before { background: #7e57c2; }
.em-tl-item.t-follow::before { background: #00897b; }
.em-card {
    border: 1px solid var(--em-line); border-radius: var(--radius);
    background: var(--bg-secondary); overflow: hidden;
}
.em-card-h { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--em-line); }
.em-card-h .em-kind { font-size: 12px; padding: 1px 8px; border-radius: 6px; background: var(--em-tint); color: var(--accent); }
.em-card-h .em-date { font-size: 12.5px; color: var(--text-secondary); }
.em-card-h .em-acts { margin-left: auto; display: flex; gap: 4px; }
.em-card-b { padding: 11px 12px; }
.em-line { display: flex; gap: 8px; font-size: 13.5px; line-height: 1.75; }
.em-line > b { flex: 0 0 62px; font-weight: 600; color: var(--text-secondary); }
.em-line > div { min-width: 0; white-space: pre-wrap; word-break: break-word; }
.em-line + .em-line { margin-top: 5px; }

/* 诊断 chips */
.em-dx { display: flex; flex-wrap: wrap; gap: 5px; }
.em-dxi { font-size: 12.5px; padding: 2px 8px; border-radius: 6px; background: var(--bg-primary); border: 1px solid var(--em-line); }
.em-dxi code { font-size: 11.5px; color: var(--accent); margin-right: 4px; }

/* 处方表 */
.em-rx-t { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.em-rx-t th, .em-rx-t td { padding: 5px 7px; border: 1px solid var(--em-line); text-align: left; }
.em-rx-t th { background: var(--bg-primary); font-weight: 600; font-size: 12px; color: var(--text-secondary); }

/* 表格（检验 / 随访 / 统计） */
.em-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.em-table th, .em-table td { padding: 8px 9px; border-bottom: 1px solid var(--em-line); text-align: left; vertical-align: top; }
.em-table th { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; }
.em-table tbody tr:hover { background: var(--em-tint); }
.em-flag { font-size: 12px; padding: 1px 7px; border-radius: 6px; white-space: nowrap; }
.em-flag.hi { color: #c62828; background: rgba(198, 40, 40, .1); }
.em-flag.lo { color: #1565c0; background: rgba(21, 101, 192, .1); }
.em-flag.ok { color: var(--text-secondary); }
.em-st { font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--em-line); color: var(--text-secondary); }
.em-st.todo { color: #ef6c00; border-color: rgba(239, 108, 0, .4); }
.em-st.over { color: #c62828; background: rgba(198, 40, 40, .08); border-color: rgba(198, 40, 40, .35); }
.em-st.done { color: #2e7d32; border-color: rgba(46, 125, 50, .35); }
.em-link { color: var(--accent); cursor: pointer; }
.em-td-acts { display: flex; gap: 8px; white-space: nowrap; }

/* 统计 */
.em-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.em-kpi { padding: 12px; border: 1px solid var(--em-line); border-radius: var(--radius); background: var(--bg-secondary); }
.em-kpi b { display: block; font-size: 22px; line-height: 1.3; color: var(--accent); }
.em-kpi span { font-size: 12px; color: var(--text-secondary); }
.em-bars { margin-top: 4px; }
.em-bar { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; }
.em-bar > i { flex: 0 0 auto; width: 96px; font-style: normal; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.em-bar > em { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--bg-primary); border: 1px solid var(--em-line); overflow: hidden; }
.em-bar > em > s { display: block; height: 100%; background: var(--accent); text-decoration: none; }
.em-bar > b { flex: 0 0 auto; font-size: 12.5px; }
.em-sub-t { margin: 16px 0 6px; font-size: 13px; font-weight: 600; }

/* 档案只读视图 */
.em-profile { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.em-pf-box { padding: 11px 12px; border: 1px solid var(--em-line); border-radius: var(--radius); background: var(--bg-secondary); }
.em-pf-box h4 { font-size: 12.5px; color: var(--text-secondary); font-weight: 600; margin-bottom: 5px; }
.em-pf-box p { font-size: 13.5px; line-height: 1.75; white-space: pre-wrap; word-break: break-word; }

/* ---------------- 弹窗 ---------------- */
.em-mask {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(0, 0, 0, .42);
    overflow: auto;
}
.em-mask[hidden] { display: none !important; }
.em-modal {
    width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column;
    background: var(--bg-primary); border: 1px solid var(--em-line); border-radius: 12px;
    overflow: hidden;
}
.em-modal-lg { max-width: 640px; }
.em-mhead { display: flex; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--em-line); }
.em-mhead h3 { font-size: 15px; font-weight: 600; }
.em-mclose {
    margin-left: auto; width: 28px; height: 28px; font-size: 13px; cursor: pointer;
    color: var(--text-secondary); background: transparent; border: 1px solid var(--em-line); border-radius: 8px;
}
.em-mbody { padding: 14px; overflow: auto; }
.em-mfoot { display: flex; align-items: center; gap: 8px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--em-line); }
.em-f { display: block; margin-bottom: 10px; }
.em-f > span { display: block; margin-bottom: 4px; font-size: 12.5px; color: var(--text-secondary); }
.em-f > span i { color: #c62828; font-style: normal; }
.em-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.em-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }

/* 处方编辑行 */
.em-rx { margin: 4px 0 10px; padding: 10px; border: 1px dashed var(--em-line); border-radius: 8px; }
.em-rx-head { display: flex; align-items: center; margin-bottom: 8px; font-size: 12.5px; color: var(--text-secondary); }
.em-rx-head .em-btn { margin-left: auto; }
.em-rx-row { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1fr .8fr .6fr auto; gap: 5px; margin-bottom: 6px; }
.em-rx-row input { font-size: 12.5px; padding: 5px 7px; border-radius: 6px; }
.em-rx-row .em-rx-del {
    width: 28px; height: 28px; font-size: 13px; cursor: pointer;
    color: #c62828; background: transparent; border: 1px solid var(--em-line); border-radius: 6px;
}

/* Toast */
.em-toast {
    position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
    z-index: 100001; padding: 9px 16px; font-size: 13.5px;
    color: #fff; background: rgba(30, 30, 30, .92); border-radius: 999px;
    pointer-events: none;
}
.em-toast[hidden] { display: none !important; }

/* 底部说明 */
.em-note {
    margin-top: 14px; padding: 11px 13px; font-size: 12.5px; line-height: 1.85;
    color: var(--text-secondary); border: 1px dashed var(--em-line); border-radius: var(--radius);
    background: var(--bg-secondary);
}
.em-note b { color: var(--text-primary); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 900px) {
    .em-body { grid-template-columns: 1fr; }
    .em-side { position: static; }
    .em-list { max-height: 320px; }
}
@media (max-width: 560px) {
    .em-page { padding: 10px 0 32px; }
    .em-top-r { width: 100%; }
    .em-top-r .em-btn { flex: 1 1 auto; }
    .em-grid2, .em-grid3 { grid-template-columns: 1fr; }
    .em-rx-row { grid-template-columns: 1fr 1fr; }
    .em-rx-row .em-rx-del { width: 100%; }
    .em-pt-acts .em-btn { flex: 1 1 auto; }
    .em-modal { max-height: 94vh; }
    .em-f input, .em-f select, .em-f textarea, .em-input { font-size: 16px; } /* 防 iOS 聚焦缩放 */
    .em-table th:nth-child(n+4), .em-table td:nth-child(n+4) { display: none; }
}

/* ---------------- 打印：只留病历正文 ---------------- */
@media print {
    .em-top, .em-side, .em-tabs, .em-note, .em-mask, .em-toast, .em-pt-acts, .em-card-h .em-acts { display: none !important; }
    .em-body { display: block; }
    .em-page { padding: 0; color: #000; }
    .em-ptcard, .em-card { background: #fff; border-color: #ccc; break-inside: avoid; }
    .em-pane { display: block !important; }
    .em-tl::before { background: #ccc; }
}