/* 基层患者运营系统 - 通用样式 / 医疗主题 */
:root{
  --c-primary:#1677FF; --c-primary-dark:#0958D9; --c-primary-light:#E6F4FF;
  --c-success:#52C41A; --c-success-light:#F6FFED;
  --c-warning:#FA8C16; --c-warning-light:#FFF7E6;
  --c-danger:#F5222D;  --c-danger-light:#FFF1F0;
  --c-bg:#F5F7FA; --c-card:#FFFFFF;
  --c-text:#1F2937; --c-text-sub:#6B7280; --c-text-mute:#9CA3AF;
  --c-border:#E5E7EB; --c-border-light:#F0F0F0;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 1px 6px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;color:var(--c-text);background:var(--c-bg);font-size:14px;line-height:1.5}
a{color:var(--c-primary);text-decoration:none}
a:hover{color:var(--c-primary-dark)}
button{font-family:inherit;cursor:pointer;border:0;background:transparent}
input,textarea,select{font-family:inherit;outline:none}
img{max-width:100%;display:block}

/* === 通用组件 === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;transition:all .2s;border:1px solid transparent;white-space:nowrap}
.btn-primary{background:var(--c-primary);color:#fff}
.btn-primary:hover{background:var(--c-primary-dark)}
.btn-default{background:#fff;color:var(--c-text);border-color:var(--c-border)}
.btn-default:hover{color:var(--c-primary);border-color:var(--c-primary)}
.btn-danger{background:var(--c-danger);color:#fff}
.btn-success{background:var(--c-success);color:#fff}
.btn-warning{background:var(--c-warning);color:#fff}
.btn-text{background:transparent;color:var(--c-primary);padding:4px 8px}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-lg{padding:12px 24px;font-size:16px}
.btn-block{display:flex;width:100%}

.tag{display:inline-flex;align-items:center;padding:2px 8px;font-size:12px;border-radius:4px;line-height:1.5}
.tag-primary{background:var(--c-primary-light);color:var(--c-primary)}
.tag-success{background:var(--c-success-light);color:var(--c-success)}
.tag-warning{background:var(--c-warning-light);color:var(--c-warning)}
.tag-danger{background:var(--c-danger-light);color:var(--c-danger)}
.tag-default{background:#F3F4F6;color:var(--c-text-sub)}

.card{background:var(--c-card);border-radius:8px;box-shadow:var(--shadow-sm);padding:16px}
.card-title{font-size:16px;font-weight:600;color:var(--c-text);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}

/* === 数据异常高亮 === */
.val-abnormal{color:var(--c-danger);font-weight:600;background:var(--c-danger-light);padding:2px 8px;border-radius:10px;display:inline-flex;align-items:center;gap:4px}
.val-abnormal::before{content:"▲"}
.val-warning{color:var(--c-warning);font-weight:600;background:var(--c-warning-light);padding:2px 8px;border-radius:10px}
.val-normal{color:var(--c-text-sub)}
.val-big{font-size:24px;font-weight:700;color:var(--c-text)}

/* === Toast === */
#toast-container{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:rgba(0,0,0,.8);color:#fff;padding:10px 18px;border-radius:6px;font-size:14px;animation:toast-in .25s;box-shadow:var(--shadow-md)}
.toast.success{background:var(--c-success)}
.toast.error{background:var(--c-danger)}
.toast.warning{background:var(--c-warning)}
@keyframes toast-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* === Modal === */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9000;animation:fadein .2s}
.modal-box{background:#fff;border-radius:8px;min-width:360px;max-width:90vw;max-height:85vh;overflow:auto;box-shadow:var(--shadow-md);animation:zoomin .2s}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--c-border-light);font-size:16px;font-weight:600;display:flex;justify-content:space-between;align-items:center}
.modal-close{cursor:pointer;color:var(--c-text-mute);font-size:18px}
.modal-body{padding:20px}
.modal-footer{padding:12px 20px;border-top:1px solid var(--c-border-light);text-align:right;display:flex;gap:8px;justify-content:flex-end}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes zoomin{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

/* === 通用表格 === */
.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:14px}
.tbl th,.tbl td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--c-border-light)}
.tbl th{background:#FAFAFA;color:var(--c-text-sub);font-weight:500;font-size:13px}
.tbl tr:hover{background:#FAFBFC}
.tbl td.actions{white-space:nowrap}
.tbl td.actions a{color:var(--c-primary);cursor:pointer;font-size:13px;margin-right:12px}
.tbl td.actions a:last-child{margin-right:0}
.tbl td.actions a.danger{color:var(--c-danger)}

/* === 表单 === */
.form-item{margin-bottom:16px}
.form-label{display:block;margin-bottom:6px;color:var(--c-text);font-size:14px}
.form-label.required::before{content:"*";color:var(--c-danger);margin-right:4px}
.form-input,.form-select,.form-textarea{width:100%;padding:8px 12px;border:1px solid var(--c-border);border-radius:6px;font-size:14px;transition:border-color .2s;background:#fff}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--c-primary)}
.form-textarea{resize:vertical;min-height:80px}
.form-help{color:var(--c-text-mute);font-size:12px;margin-top:4px}

/* === 通用工具 === */
.flex{display:flex} .flex-col{flex-direction:column} .items-center{align-items:center} .justify-between{justify-content:space-between} .justify-center{justify-content:center}
.gap-1{gap:4px} .gap-2{gap:8px} .gap-3{gap:12px} .gap-4{gap:16px} .gap-6{gap:24px}
.mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-6{margin-top:24px}
.mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px}
.p-3{padding:12px} .p-4{padding:16px} .p-6{padding:24px}
.text-xs{font-size:12px} .text-sm{font-size:13px} .text-base{font-size:14px} .text-lg{font-size:16px} .text-xl{font-size:20px} .text-2xl{font-size:24px} .text-3xl{font-size:30px}
.text-mute{color:var(--c-text-mute)} .text-sub{color:var(--c-text-sub)} .text-primary{color:var(--c-primary)} .text-danger{color:var(--c-danger)} .text-success{color:var(--c-success)} .text-warning{color:var(--c-warning)}
.font-bold{font-weight:600} .font-semibold{font-weight:500}
.text-center{text-align:center} .text-right{text-align:right}
.w-full{width:100%}
.rounded{border-radius:6px} .rounded-lg{border-radius:8px} .rounded-full{border-radius:9999px}
.shadow{box-shadow:var(--shadow-sm)}
.divider{height:1px;background:var(--c-border-light);margin:12px 0}
.empty{padding:40px;text-align:center;color:var(--c-text-mute)}
.empty-icon{font-size:48px;opacity:.4;margin-bottom:8px}

/* 头像 */
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1677FF,#52C41A);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;flex-shrink:0}
.avatar-lg{width:48px;height:48px;font-size:18px}
.avatar-sm{width:28px;height:28px;font-size:12px}

/* 内联 SVG 图标工具：随字号缩放 */
.svg-ic{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;vertical-align:-.12em}
.svg-ic svg{width:1em;height:1em;stroke-width:1.7}

/* 列表图标盒子（统一规范，颜色用 ib-* 修饰） */
.icon-box{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;flex-shrink:0}
.icon-box svg{width:18px;height:18px;stroke-width:1.7}
.icon-box.sm{width:24px;height:24px;border-radius:7px}
.icon-box.sm svg{width:14px;height:14px}
.icon-box.lg{width:48px;height:48px;border-radius:12px}
.icon-box.lg svg{width:22px;height:22px}
.icon-box.ib-blue{background:rgba(22,119,255,.1);color:#1677FF}
.icon-box.ib-green{background:rgba(82,196,26,.12);color:#52C41A}
.icon-box.ib-orange{background:rgba(250,140,22,.12);color:#FA8C16}
.icon-box.ib-red{background:rgba(245,34,45,.12);color:#F5222D}
.icon-box.ib-purple{background:rgba(124,58,237,.12);color:#7C3AED}
.icon-box.ib-cyan{background:rgba(19,194,194,.12);color:#13C2C2}
.icon-box.ib-gray{background:rgba(148,163,184,.18);color:#64748B}