:root {
  --ink: #1e293b;
  --muted: #718096;
  --line: #e4e9f0;
  --canvas: #f4f7fb;
  --surface: #ffffff;
  --blue: #2879e8;
  --blue-soft: #eaf3ff;
  --mint: #15a678;
  --mint-soft: #e9f8f1;
  --orange: #ed8b2f;
  --orange-soft: #fff4e6;
  --red: #d95f59;
  --red-soft: #fff0ef;
  --shadow: 0 7px 24px rgba(28, 52, 84, .06);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; color: var(--ink); background: var(--canvas); font-size: 14px; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; }
.app-shell { min-height: 100vh; display: flex; }
.mobile-nav { display: none; }
.logged-out .sidebar, .logged-out .topbar { display: none; }
.logged-out .main-area { width: 100%; }
.logged-out .content { min-height: 100vh; max-width: none; display: grid; place-items: center; padding: 24px; }
.logged-out .auth-panel { width: min(390px, 100%); margin: 0; }
.sidebar { width: 236px; flex: 0 0 236px; background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 24px 14px 18px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 10px 22px; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 800; letter-spacing: .5px; background: var(--blue); }
.brand strong { display: block; font-size: 16px; letter-spacing: .3px; }
.brand span { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.clinic-switcher { margin: 0 7px 21px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; color: #42526b; font-size: 12px; display: flex; justify-content: space-between; }
.nav-list { display: grid; gap: 4px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 11px; background: transparent; color: #536176; text-align: left; padding: 10px 11px; border-radius: 8px; transition: .16s ease; }
.nav-item:hover { background: #f5f8fc; color: var(--blue); }
.nav-item.active { color: var(--blue); background: var(--blue-soft); font-weight: 600; }
.nav-icon { width: 18px; text-align: center; font-size: 16px; color: currentColor; }
.nav-badge { margin-left: auto; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; color: #fff; background: var(--red); border-radius: 10px; font-size: 11px; }
.nav-badge[hidden] { display: none !important; }

@media print {
  @page { margin: 10mm; }
  body { background: #fff; color: #000; }
  .sidebar, .topbar, .page-heading, .toolbar, .bill-list, .catalog, .bill-actions, .toast, .modal-backdrop { display: none !important; }
  .app-shell, .main-area, .content, .bill-layout, .task-list { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; }
  .panel, .bill-main, .task-card { box-shadow: none; border: 1px solid #aaa; break-inside: avoid; }
  .bill-main { display: block !important; }
  button, input, select, textarea { display: none !important; }
}
.sidebar-bottom { margin-top: auto; display: grid; gap: 13px; }
.server-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; padding: 7px 11px; }
.status-dot { width: 7px; height: 7px; background: var(--mint); border-radius: 50%; }
.main-area { min-width: 0; flex: 1; }
.topbar { min-height: 78px; padding: 17px 30px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.breadcrumb { color: #516079; font-size: 13px; font-weight: 600; }
.breadcrumb span { color: #b0bac8; margin: 0 6px; }
.topbar-date { color: var(--muted); font-size: 12px; margin-top: 6px; }
.topbar-actions { display: flex; gap: 10px; align-items: center; }
.icon-button, .help-button { width: 32px; height: 32px; background: #fff; border: 1px solid var(--line); border-radius: 7px; color: #6d7b90; }
.help-button { font-weight: 700; color: var(--blue); }
.user-chip { display: flex; align-items: center; gap: 8px; margin-left: 7px; padding-left: 14px; border-left: 1px solid var(--line); color: #58677d; }
.user-chip strong, .user-chip small { display: block; }
.user-chip strong { font-size: 12px; color: var(--ink); }
.user-chip small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.avatar { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.avatar.owner { background: #d9edff; color: #2d73b5; }
.avatar.doctor { background: #dff4ed; color: #19805e; }
.avatar.nurse { background: #fff0d8; color: #b46a1e; }
.content { padding: 26px 30px 40px; max-width: 1600px; margin: 0 auto; }
.outpatient-mode { overflow: hidden; }
.outpatient-mode .content { height: calc(100vh - 78px); overflow: hidden; display: flex; flex-direction: column; }
.outpatient-mode #view { min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.outpatient-mode #view > .page-heading, .outpatient-mode #view > .toolbar { flex: 0 0 auto; }
.outpatient-mode .split-layout { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.outpatient-mode .split-layout > .side-list, .outpatient-mode .split-layout > .form-panel { min-height: 0; overflow-y: auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.page-heading h1 { margin: 0; font-size: 24px; letter-spacing: -.3px; }
.page-heading p { margin: 7px 0 0; color: var(--muted); }
.connection-pill { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--muted); font-size: 11px; }
.connection-pill.connected { color: var(--mint); }
.heading-actions { display: flex; gap: 9px; }
.primary-button, .secondary-button, .ghost-button, .danger-button { min-height: 36px; padding: 0 15px; border-radius: 7px; font-weight: 600; }
.primary-button { color: #fff; background: var(--blue); box-shadow: 0 4px 10px rgba(40, 121, 232, .18); }
.primary-button:hover { background: #196bd9; }
.secondary-button { background: var(--mint); color: #fff; }
.ghost-button { background: #fff; border: 1px solid var(--line); color: #536176; }
.danger-button { background: var(--red-soft); color: var(--red); }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metric-card { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.metric-label { color: var(--muted); display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.metric-trend { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 15px; font-weight: 700; }
.metric-trend.up { color: #16835f; background: #e8f6f0; }
.metric-trend.down { color: #cf3c4f; background: #fdecef; }
.metric-trend.flat { color: #69778b; background: #eef1f5; }
.metric-value { font-size: 29px; line-height: 1; margin: 14px 0 10px; letter-spacing: -.7px; }
.metric-foot { font-size: 11px; color: var(--muted); }
.metric-foot b { color: var(--mint); font-weight: 600; }
.metric-accent { border-top: 3px solid var(--blue); }
.metric-accent.mint { border-top-color: var(--mint); }
.metric-accent.orange { border-top-color: var(--orange); }
.metric-accent.red { border-top-color: var(--red); }
.grid-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; margin-top: 18px; }
.grid-1-1 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.panel-header { padding: 17px 19px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; font-size: 15px; }
.panel-header span { color: var(--muted); font-size: 12px; }
.panel-body { padding: 18px 19px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 580px; }
th, td { padding: 12px 16px; border-bottom: 1px solid #edf0f4; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-size: 11px; font-weight: 600; background: #fafbfd; }
td { color: #3c4b62; font-size: 12px; }
tr:last-child td { border-bottom: 0; }
.inventory-pagination { min-height: 58px; padding: 10px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pagination-summary { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pagination-controls { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.page-size-control { display: flex; align-items: center; gap: 6px; margin-right: 5px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.page-size-control select { height: 32px; padding: 0 24px 0 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; }
.page-button { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: #536176; background: #fff; font-size: 12px; }
.page-button:hover:not(:disabled) { border-color: #9fc8ff; color: var(--blue); background: var(--blue-soft); }
.page-button.active { border-color: var(--blue); color: #fff; background: var(--blue); }
.page-button:disabled { cursor: not-allowed; color: #b7c0ce; background: #f6f7f9; }
.page-nav { font-size: 17px; }
.pagination-ellipsis { width: 20px; text-align: center; color: var(--muted); }
.person-cell { display: flex; align-items: center; gap: 8px; }
.person-cell strong { font-weight: 600; color: var(--ink); }
.person-cell small { color: var(--muted); display: block; margin-top: 2px; }
.tag { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 5px; font-size: 11px; }
.tag.blue { color: var(--blue); background: var(--blue-soft); }
.tag.mint { color: #17845f; background: var(--mint-soft); }
.tag.orange { color: #b46a1e; background: var(--orange-soft); }
.tag.red { color: var(--red); background: var(--red-soft); }
.link-button { background: transparent; color: var(--blue); padding: 0; }
.queue-list { display: grid; gap: 10px; }
.queue-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border: 1px solid #edf0f4; border-radius: 8px; }
.queue-item.selected { border-color: #b9d7ff; background: #f5f9ff; }
.queue-meta { text-align: right; color: var(--muted); font-size: 11px; }
.queue-meta strong { display: block; font-size: 12px; color: var(--ink); margin-bottom: 4px; }
.progress-row { display: grid; gap: 7px; margin-bottom: 15px; }
.progress-label { display: flex; justify-content: space-between; color: #526177; font-size: 12px; }
.progress-track { height: 7px; border-radius: 5px; background: #eef1f5; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 5px; background: var(--blue); }
.progress-fill.mint { background: var(--mint); }
.progress-fill.orange { background: var(--orange); }
.activity-list { display: grid; gap: 14px; }
.activity { display: flex; gap: 10px; align-items: flex-start; }
.activity-mark { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-size: 12px; }
.activity p { margin: 0; color: #46556c; font-size: 12px; line-height: 1.5; }
.activity time { display: block; color: #a0aaba; font-size: 10px; margin-top: 3px; }
.alert-list { display: grid; gap: 10px; }
.alert { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border-radius: 7px; background: #fffaf1; }
.alert.red-alert { background: #fff3f2; }
.alert strong { font-size: 12px; font-weight: 600; }
.alert small { display: block; color: var(--muted); margin-top: 3px; font-size: 10px; }
.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.quick-button { min-height: 108px; padding: 14px 12px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); transition: .16s ease; }
.quick-button:hover { border-color: #a9cef9; background: #f8fbff; transform: translateY(-1px); }
.quick-button b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: var(--blue); background: var(--blue-soft); font-size: 16px; }
.quick-button span { display: block; margin-top: 13px; font-size: 12px; font-weight: 700; }
.quick-button small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.toolbar-left, .toolbar-right { display: flex; gap: 9px; align-items: center; }
.appointment-date { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--muted); font-size: 11px; }
.appointment-date input { border: 0; outline: none; color: var(--ink); background: transparent; font: inherit; }
.schedule-list { display: grid; gap: 8px; }
.schedule-row { display: grid; grid-template-columns: 18px 30px minmax(0, 1fr) 76px; gap: 8px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 7px; }
.schedule-row input { width: 16px; height: 16px; accent-color: var(--blue); }
.schedule-row select { min-width: 0; height: 32px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.schedule-person strong, .schedule-person small { display: block; }
.schedule-person strong { font-size: 12px; }
.schedule-person small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.schedule-save { width: 100%; margin-top: 12px; }
.search-box, .select-box { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #66748a; outline: none; }
.search-box { min-width: 245px; }
.search-box:focus { border-color: #9fc8ff; }
.split-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; min-height: 620px; }
.side-list { padding: 12px; }
.side-list-header { display: flex; align-items: center; justify-content: space-between; padding: 5px 4px 12px; color: var(--muted); font-size: 12px; }
.side-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 9px; border-radius: 8px; cursor: pointer; }
.side-row:hover, .side-row.selected { background: var(--blue-soft); }
.side-row strong { display: block; font-size: 12px; }
.side-row small { display: block; color: var(--muted); margin-top: 4px; font-size: 10px; }
.side-row time { color: var(--muted); font-size: 10px; }
.side-row-delete { width: 24px; height: 24px; margin-top: 5px; padding: 0; border-radius: 5px; color: var(--red); background: transparent; font-size: 16px; line-height: 1; }
.side-row-delete:hover { background: var(--red-soft); }
.delete-pending-patient-note { margin: 0; color: #4e5c70; line-height: 1.7; }
.form-panel { padding: 20px; }
.patient-banner { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.patient-main { display: flex; align-items: center; gap: 12px; }
.patient-main h2 { font-size: 17px; margin: 0 0 5px; }
.patient-main p { margin: 0; color: var(--muted); font-size: 11px; }
.patient-actions { display: flex; gap: 8px; }
.form-section { padding-top: 17px; }
.form-section h3 { margin: 0 0 11px; font-size: 13px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-heading h3 { margin: 0; }
.section-heading-actions { display: flex; align-items: center; gap: 8px; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field { display: grid; gap: 6px; }
.field label { color: var(--muted); font-size: 11px; }
.field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 9px 10px; color: var(--ink); background: #fff; outline: none; }
.field textarea { min-height: 74px; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: #9fc8ff; }
.patient-name-field { position: relative; }
.patient-name-lookup { position: absolute; z-index: 2; top: calc(100% - 1px); right: 0; left: 0; overflow: auto; max-height: 224px; border: 1px solid #b9d6f7; border-radius: 7px; background: #fff; box-shadow: 0 9px 20px rgba(32, 74, 119, .16); }
.patient-name-option { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 0; color: var(--ink); background: #fff; text-align: left; }
.patient-name-option + .patient-name-option { border-top: 1px solid var(--line); }
.patient-name-option:hover, .patient-name-option:focus { background: var(--blue-soft); outline: none; }
.patient-name-option span { min-width: 0; }
.patient-name-option strong, .patient-name-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patient-name-option strong { font-size: 12px; }
.patient-name-option small, .patient-name-option > span:last-child { color: var(--muted); font-size: 10px; }
.patient-name-option > span:last-child { flex: 0 1 42%; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.prescription-editor { display: grid; gap: 12px; margin-top: 14px; }
.prescription-card, .order-note-card { border: 1px solid var(--line); border-radius: 9px; background: #fff; overflow: hidden; }
.prescription-card-header { min-height: 39px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--line); background: #fbfcfe; }
.prescription-card-title, .prescription-card-actions, .order-shortcuts { display: flex; align-items: center; gap: 7px; }
.prescription-card-title { min-width: 0; }
.prescription-card-title strong { font-size: 13px; white-space: nowrap; }
.prescription-icon { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #2d9aef; background: #e6f4ff; font-size: 12px; }
.prescription-icon.infusion { color: #19af9d; background: #e5fbf7; }
.prescription-icon.herbal { color: #b77b33; background: #fff3e2; }
.prescription-icon.external { color: #d25c78; background: #fff0f4; }
.related-link { color: var(--blue); font-size: 11px; }
.order-shortcuts { flex-wrap: wrap; justify-content: flex-end; }
.order-chip { min-height: 27px; padding: 0 9px; border: 1px solid #dbe2ec; border-radius: 6px; color: #5a6b82; background: #fff; font-size: 11px; }
.order-chip:hover, .order-chip.active { color: var(--blue); border-color: #b8d7fb; background: #f1f7ff; }
.icon-action { width: 25px; height: 25px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 5px; color: #738197; background: transparent; font-size: 14px; }
.icon-action:hover { color: var(--blue); background: var(--blue-soft); }
.icon-action.danger:hover { color: var(--red); background: var(--red-soft); }
.prescription-summary { padding: 8px 12px; color: var(--muted); font-size: 11px; }
.prescription-grid, .prescription-row { display: grid; align-items: center; gap: 8px; padding: 8px 12px; }
.prescription-grid-western, .prescription-row-western { grid-template-columns: minmax(120px, 1.4fr) minmax(72px, .8fr) minmax(82px, .9fr) minmax(78px, .8fr) 52px 72px minmax(100px, 1fr) 52px 58px 66px 28px; }
.prescription-grid-external, .prescription-row-external { grid-template-columns: minmax(125px, 1.3fr) minmax(76px, .8fr) minmax(82px, .85fr) minmax(100px, 1fr) minmax(78px, .8fr) minmax(72px, .7fr) 52px 50px minmax(100px, 1fr) 58px 66px 28px; }
.prescription-grid-infusion, .prescription-row-infusion { grid-template-columns: minmax(150px, 1.5fr) minmax(108px, 1fr) 72px minmax(100px, 1fr) 58px 58px 66px 28px; }
.infusion-group-meta { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px dashed #e1e7ef; background: #fbfcfe; }
.infusion-group-meta select, .infusion-group-meta input { min-height: 32px; border: 1px solid transparent; border-radius: 5px; padding: 7px 8px; color: var(--ink); background: #fff; outline: none; font-size: 12px; }
.infusion-group-meta select:focus, .infusion-group-meta input:focus { border-color: #b9d7f9; background: #fbfdff; }
.infusion-group-duration, .infusion-group-rate { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.infusion-group-duration input { width: 52px; }
.infusion-group-rate input { width: 64px; }
.infusion-group-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.prescription-card-herbal { border-color: #ead9c0; background: #fffdfa; }
.prescription-card-herbal .prescription-card-header { background: #fffaf2; }
.prescription-grid-herbal, .prescription-row-herbal { grid-template-columns: minmax(150px, 1.6fr) minmax(76px, .7fr) 58px minmax(92px, .9fr) 58px 70px 28px; }
.herbal-prescription-meta { border-top: 1px solid #eadfce; background: #fffaf3; padding: 11px 12px 13px; }
.herbal-meta-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.herbal-meta-heading strong { color: #7b552b; font-size: 12px; }
.herbal-meta-heading span { color: var(--muted); font-size: 10px; }
.herbal-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(105px, 1fr)); gap: 9px; }
.herbal-meta-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.herbal-meta-grid input, .herbal-meta-grid select { width: 100%; min-width: 0; min-height: 32px; border: 1px solid #e6d9c7; border-radius: 5px; padding: 6px 8px; color: var(--ink); background: #fff; outline: none; }
.herbal-meta-grid input:focus, .herbal-meta-grid select:focus { border-color: #cf9a59; }
.herbal-meta-note { grid-column: span 2; }
.decoction-method-list { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 6px 12px; margin: 8px 0 10px; }
.decoction-method-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.field-inline-add { display: flex; gap: 8px; align-items: center; }
.field-inline-add input { flex: 1; min-height: 32px; border: 1px solid var(--line); border-radius: 5px; padding: 6px 8px; }
.prescription-head { color: var(--muted); font-size: 10px; padding-top: 7px; padding-bottom: 4px; }
.prescription-row { border-top: 1px dashed #e1e7ef; }
.prescription-row input, .prescription-row select, .treatment-order-row input, .treatment-order-row select { width: 100%; min-width: 0; min-height: 32px; border: 1px solid transparent; border-radius: 5px; padding: 7px 8px; color: var(--ink); background: #fff; outline: none; font-size: 12px; }
.medication-control { min-width: 0; }
.medication-control input { display: block; width: 100%; }
.medication-stock-summary { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.35; white-space: normal; }
.prescription-row input:hover, .prescription-row select:hover, .prescription-row input:focus, .prescription-row select:focus, .treatment-order-row input:focus, .treatment-order-row select:focus { border-color: #b9d7f9; background: #fbfdff; }
.infusion-dose-control, .infusion-rate-control { display: flex; align-items: center; gap: 4px; min-width: 0; }
.infusion-dose-control input, .infusion-rate-control input { min-width: 0; flex: 1; }
.infusion-dose-control select { width: 48px; flex: 0 0 48px; padding-inline: 3px; }
.infusion-rate-control span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.form-panel.visit-locked { background: #f8fafc; }
.form-panel.visit-locked input:disabled, .form-panel.visit-locked textarea:disabled, .form-panel.visit-locked select:disabled { color: #64748b; background: #f1f5f9; cursor: not-allowed; }
.form-panel.visit-locked .prescription-card, .form-panel.visit-locked .order-note-card { opacity: .9; }
.prescription-placeholder { min-height: 37px; display: flex; align-items: center; padding: 0 12px; border-top: 1px dashed #e1e7ef; color: #a0acbb; font-size: 11px; }
.prescription-add { justify-self: start; margin: 1px 12px 9px; padding: 5px 0; border: 0; color: var(--blue); background: transparent; font-size: 11px; }
.prescription-add:hover { color: #196bd9; }
.prescription-money { color: var(--muted); font-size: 11px; text-align: right; white-space: nowrap; }
.prescription-money.line-total { color: var(--orange); font-size: 12px; }
.prescription-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px; background: #fffaf5; }
.prescription-total span, .prescription-total small { color: var(--muted); font-size: 11px; }
.prescription-total strong { color: var(--orange); font-size: 18px; }
.outpatient-total { display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; margin-top: 14px; padding: 13px; border-top: 2px solid #f0c27c; background: #fff8ed; }
.outpatient-total span, .outpatient-total small { color: var(--muted); font-size: 11px; }
.outpatient-total strong { color: var(--orange); font-size: 21px; }
.field-inline-hint { color: var(--muted); font-size: 10px; }
.field input[readonly] { color: #8d5b22; background: #fffaf5; }
.treatment-order-row { display: grid; grid-template-columns: 24px minmax(180px, 1.8fr) 90px 70px 28px; gap: 8px; align-items: center; padding: 8px 12px; }
.treatment-order-summary { display: flex; justify-content: flex-end; align-items: baseline; gap: 10px; padding: 8px 12px 11px; color: var(--muted); font-size: 11px; }
.treatment-order-summary strong { color: var(--orange); font-size: 16px; }
.order-number { color: var(--ink); text-align: center; font-size: 12px; }
.order-unit, .order-note { color: var(--muted); font-size: 11px; }
.order-price { color: var(--ink); font-size: 12px; text-align: right; }
.order-add { border-top: 1px dashed #e1e7ef; width: calc(100% - 24px); text-align: left; }
.order-note-card { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: stretch; }
.order-note-card label { padding: 12px; color: #56677f; font-size: 12px; border-right: 1px solid var(--line); }
.order-note-card textarea { min-height: 48px; padding: 12px; border: 0; resize: vertical; outline: none; color: var(--ink); font: inherit; font-size: 12px; }
.full-field { grid-column: 1 / -1; }
.field-hint { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.date-part-row { display: flex; align-items: center; gap: 5px; }
.date-part-row input { min-width: 0; flex: 1; }
.date-part-row input[type="date"] { flex: 0 0 38px; padding: 8px 4px; }
.form-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--line); }
.history-item { padding: 12px 0; border-bottom: 1px solid #edf0f4; }
.history-item:last-child { border-bottom: 0; }
.history-item header { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.history-item p { color: #4f5d73; font-size: 12px; line-height: 1.6; margin: 8px 0 0; }
.history-item-button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: inherit; background: transparent; text-align: left; transition: background .16s ease; }
.history-item-button:hover { background: var(--blue-soft); }
.history-item-button:focus-visible { outline: 2px solid #9fc8ff; outline-offset: -2px; }
.history-item-content { min-width: 0; flex: 1; }
.history-item-link { flex: 0 0 auto; color: var(--blue); font-size: 11px; white-space: nowrap; }
.history-item-link span { margin-left: 3px; font-size: 14px; }
.visit-detail { display: grid; gap: 18px; }
.visit-detail-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 13px 15px; border: 1px solid #cfe2fb; border-radius: 8px; background: var(--blue-soft); }
.visit-detail-summary div { display: grid; gap: 5px; }
.visit-detail-summary strong { font-size: 14px; }
.visit-detail-summary span:not(.tag) { color: var(--muted); font-size: 11px; }
.visit-detail-section { min-width: 0; }
.visit-detail-section + .visit-detail-section { padding-top: 17px; border-top: 1px solid var(--line); }
.visit-detail-section .section-heading { margin-bottom: 10px; }
.visit-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 0; }
.visit-detail-field { min-height: 57px; padding: 9px 0; border-bottom: 1px solid #edf0f4; }
.visit-detail-field dt { color: var(--muted); font-size: 11px; }
.visit-detail-field dd { margin: 5px 0 0; color: var(--ink); font-size: 12px; line-height: 1.6; white-space: normal; word-break: break-word; }
.visit-prescription-table { border: 1px solid var(--line); border-radius: 7px; overflow-x: auto; }
.visit-prescription-table table { width: 100%; min-width: 620px; border-collapse: collapse; }
.visit-prescription-table th, .visit-prescription-table td { padding: 10px 11px; border-bottom: 1px solid #edf0f4; color: #4f5d73; font-size: 11px; text-align: left; vertical-align: top; }
.visit-prescription-table th { color: var(--muted); background: #f7f9fc; font-size: 10px; font-weight: 600; }
.visit-prescription-table tr:last-child td { border-bottom: 0; }
.visit-prescription-table td strong, .visit-prescription-table td small { display: block; }
.visit-prescription-table td strong { color: var(--ink); font-size: 12px; }
.visit-prescription-table td small { margin-top: 3px; color: var(--muted); }
.visit-detail-note { padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.visit-detail-note strong { font-size: 12px; }
.visit-detail-note p { margin: 7px 0 0; color: #4f5d73; font-size: 12px; line-height: 1.6; }
.visit-treatment-summary { display: grid; gap: 5px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.visit-treatment-summary strong { font-size: 12px; }
.visit-treatment-summary span, .visit-treatment-summary small { color: var(--muted); font-size: 11px; }
.visit-fee-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.visit-fee-grid div { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.visit-fee-grid span { color: var(--muted); font-size: 11px; }
.visit-fee-grid strong { color: var(--orange); font-size: 15px; }
.modal-loading { padding: 35px 10px; color: var(--muted); text-align: center; font-size: 12px; }
.bill-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr) 240px; gap: 16px; min-height: 620px; }
.bill-list { padding: 12px; }
.bill-card { padding: 13px 11px; border-radius: 8px; cursor: pointer; }
.bill-card:hover, .bill-card.selected { background: var(--blue-soft); }
.bill-card-top { display: flex; justify-content: space-between; align-items: center; }
.bill-card strong { font-size: 12px; }
.bill-card small { color: var(--muted); font-size: 10px; display: block; margin-top: 5px; }
.bill-amount { color: var(--orange); font-weight: 700; }
.bill-main { padding: 20px; }
.bill-title { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.bill-title h2 { margin: 0; font-size: 17px; }
.bill-title p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.total-amount { color: var(--orange); font-weight: 700; font-size: 22px; }
.fee-table { margin-top: 16px; }
.fee-row { display: grid; grid-template-columns: 1fr 74px 74px 86px; gap: 8px; align-items: center; padding: 12px 0; border-bottom: 1px solid #edf0f4; color: #4a5870; font-size: 12px; }
.fee-row.header { color: var(--muted); font-size: 11px; }
.fee-row span:not(:first-child) { text-align: right; }
.fee-detail-table { border: 1px solid #dfe5ed; border-radius: 6px; overflow: hidden; color: #33435c; font-size: 11px; }
.fee-detail-toolbar { display: flex; align-items: center; gap: 16px; min-height: 34px; padding: 0 10px; border-bottom: 1px solid #dfe5ed; background: #fff; }
.fee-detail-toolbar strong { font-size: 12px; color: var(--text); }
.fee-detail-toolbar label { display: inline-flex; align-items: center; gap: 4px; color: #536176; }
.fee-detail-toolbar input, .fee-detail-check input { accent-color: #79b9f8; }
.fee-detail-toolbar-spacer { flex: 1; }
.fee-detail-toolbar > span:last-child { color: var(--muted); font-size: 10px; }
.fee-detail-head, .fee-detail-row { display: grid; grid-template-columns: 55px minmax(180px, 1.7fr) 70px 58px 58px 74px minmax(90px, 1fr); gap: 0; align-items: center; }
.fee-detail-head { min-height: 32px; padding: 0 10px; color: var(--muted); background: #f8fafc; border-bottom: 1px solid #dfe5ed; }
.fee-detail-row { min-height: 42px; padding: 0 10px; border-bottom: 1px dashed #dfe5ed; }
.fee-detail-row:last-child { border-bottom: 0; }
.fee-detail-row > span:not(.fee-detail-name):not(.fee-detail-remark), .fee-detail-head > span:nth-child(n+3):nth-child(-n+6) { text-align: right; }
.fee-detail-check { display: inline-flex; align-items: center; gap: 8px; color: #5a6b83; }
.fee-detail-check input { width: 14px; height: 14px; margin: 0; }
.fee-detail-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #263952; }
.fee-detail-price, .fee-detail-total { font-variant-numeric: tabular-nums; }
.fee-detail-total { color: #1b3559; font-weight: 700; }
.fee-detail-remark { overflow: hidden; padding-left: 10px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.fee-detail-empty { padding: 20px; color: var(--muted); text-align: center; }
.bill-summary { display: grid; gap: 10px; margin-top: 19px; padding-top: 16px; border-top: 1px solid var(--line); }
.bill-note { grid-column: 1 / -1; display: grid; gap: 5px; padding: 12px 0 2px; color: var(--muted); }
.bill-note strong { color: var(--text); font-size: 12px; }
.bill-note span { font-size: 11px; line-height: 1.6; }
.payment-method { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding: 14px 0; border-top: 1px solid var(--line); }
.payment-method label { font-size: 12px; font-weight: 700; }
.payment-method .select-box { min-width: 150px; }
.charge-workbench { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.charge-amount-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 15px; }
.charge-amount-bar > div:first-child { display: grid; gap: 4px; }
.charge-amount-bar span, .payment-method-heading span { color: var(--muted); font-size: 11px; }
.charge-amount-bar strong { color: var(--orange); font-size: 25px; line-height: 1; }
.charge-amount-actions { display: flex; gap: 6px; }
.amount-action { min-height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: #536176; background: #fff; font-size: 11px; }
.amount-action:hover, .amount-action.active { color: var(--blue); border-color: #9fc8ff; background: var(--blue-soft); }
.payment-method-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; }
.payment-method-heading strong { font-size: 12px; }
.payment-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.payment-method-button { min-height: 45px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 7px; color: #4f5d73; background: #fff; font-size: 11px; }
.payment-method-button:hover, .payment-method-button.selected { color: var(--blue); border-color: #8ab9e7; background: var(--blue-soft); box-shadow: 0 0 0 1px rgba(74, 139, 204, .08); }
.payment-method-button:disabled { cursor: not-allowed; opacity: .55; }
.payment-method-icon { width: 17px; height: 17px; display: inline-grid; place-items: center; border-radius: 4px; color: var(--blue); background: #e8f2ff; font-size: 10px; }
.payment-method-fallback { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.charge-notice { margin-top: 11px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.member-payment-note { margin-top: 11px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; }
.member-payment-note.ready { color: #147b59; background: var(--mint-soft); border-color: #b9e8d6; }
.member-payment-note.warning { color: #a86119; background: var(--orange-soft); border-color: #f2d5ae; }
.member-list-panel { margin-top: 18px; }
.member-tier-summary { margin-top: 18px; }
.member-tier-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.member-tier-pill { min-width: 150px; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #c8e2ff; border-radius: 7px; background: var(--blue-soft); color: #2667a9; }
.member-tier-pill strong { color: var(--ink); font-size: 12px; }
.member-tier-pill small { color: #4e77a2; font-size: 11px; }
.member-tier-pill.inactive { border-color: var(--line); background: #f7f8fa; opacity: .7; }
.member-balance { color: var(--mint); white-space: nowrap; }
.member-points { color: #2869c7; white-space: nowrap; }
.member-actions { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
.member-history-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 14px; color: var(--muted); }
.member-history-summary strong { color: var(--ink); }
.charge-footer { display: flex; align-items: center; gap: 14px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.charge-option { display: inline-flex; align-items: center; gap: 5px; color: #536176; font-size: 10px; white-space: nowrap; }
.charge-option input { width: 15px; height: 15px; margin: 0; accent-color: var(--blue); }
.charge-payment-input { display: grid; grid-template-columns: 72px minmax(110px, 160px); align-items: center; gap: 8px; margin-top: 13px; color: var(--muted); font-size: 12px; }
.charge-payment-input input { min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fffaf5; }
.charge-payment-input small { grid-column: 2; color: var(--muted); font-size: 10px; }
.charge-submit { margin-left: auto; min-width: 112px; }
.empty-state { min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--text); font-size: 16px; }
.empty-state .primary-button { margin-top: 8px; }
.import-preview-summary { display: grid; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.import-preview-summary strong { color: var(--ink); font-size: 13px; }
.import-preview-summary span, .import-preview-list > span { color: var(--muted); font-size: 11px; }
.import-preview-list { display: grid; gap: 7px; margin-top: 12px; }
.import-preview-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f3f7; font-size: 12px; }
.summary-line { display: flex; justify-content: space-between; color: #5c6a7f; font-size: 12px; }
.summary-line.total { color: var(--ink); font-size: 15px; font-weight: 700; }
.bill-actions { display: flex; gap: 9px; margin-top: 18px; }
.catalog { padding: 18px 16px; }
.catalog h3 { font-size: 13px; margin: 0 0 13px; }
.catalog-group { border-top: 1px solid var(--line); padding: 12px 0; }
.catalog-group strong { font-size: 11px; }
.catalog-item { display: flex; justify-content: space-between; padding: 8px 0 0; color: #637087; font-size: 11px; }
.task-list { display: grid; gap: 12px; }
.task-card { border: 1px solid var(--line); border-radius: 9px; padding: 15px 17px; background: #fff; }
.task-card-top { display: flex; justify-content: space-between; gap: 12px; }
.task-card h3 { margin: 0; font-size: 14px; }
.task-card p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.task-meta { display: flex; gap: 17px; margin: 15px 0; color: #617087; font-size: 11px; }
.task-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 11px; border-top: 1px solid #edf0f4; }
.task-footer small { color: var(--muted); }
.pharmacy-card { display: grid; gap: 14px; }
.retail-layout { display: grid; grid-template-columns: minmax(360px, 1fr) minmax(520px, 1.5fr); gap: 18px; align-items: start; }
.retail-form .panel-body { display: grid; gap: 18px; }
.retail-items-heading { display: flex; justify-content: space-between; align-items: center; }
.retail-item-list { display: grid; gap: 10px; }
.retail-item-row { display: grid; grid-template-columns: minmax(180px, 1fr) 82px 104px 90px 34px; gap: 8px; align-items: start; }
.retail-item-picker { display: grid; gap: 4px; min-width: 0; }
.retail-item-picker small { min-height: 15px; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.retail-search-tools { display: grid; grid-template-columns: minmax(210px, 280px) minmax(0, 1fr); gap: 10px 14px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; }
.retail-scan-field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.retail-search-tools > small { color: var(--muted); line-height: 1.6; }
.retail-member-lookup { display: flex; gap: 8px; align-items: center; min-height: 32px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 7px; color: var(--muted); font-size: 12px; }
.retail-item-row select, .retail-item-row input { min-width: 0; }
.retail-price-control { display: grid; gap: 3px; color: var(--muted); font-size: 10px; }
.retail-price-control input { min-height: 32px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fffaf5; }
.retail-item-row > span { min-height: 32px; display: flex; align-items: center; justify-content: flex-end; text-align: right; font-weight: 600; color: var(--ink); }
.retail-item-row > .icon-action { margin-top: 3px; }
.retail-adjustment-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding-top: 4px; }
.retail-adjustment-tools > span { margin-right: 2px; color: var(--muted); font-size: 11px; }
.retail-total { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; }
.retail-total > span { display: grid; gap: 3px; }
.retail-total small { color: var(--muted); font-size: 11px; font-weight: 400; }
.retail-total [data-retail-discount]:not(:empty) { color: #18745a; }
.retail-total strong { font-size: 24px; color: var(--blue); }
.retail-history table small, .retail-history td small { display: block; color: var(--muted); margin-top: 4px; }
@media (max-width: 1100px) { .retail-layout { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .retail-search-tools { grid-template-columns: 1fr; } .retail-item-row { grid-template-columns: minmax(0, 1fr) 66px 82px 66px 30px; } }
.pharmacy-items { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.pharmacy-item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 14px; }
.pharmacy-item-row + .pharmacy-item-row { border-top: 1px solid var(--line); }
.pharmacy-item-main, .pharmacy-item-side, .pharmacy-legacy-note, .dispense-patient > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pharmacy-item-main span, .pharmacy-item-main small, .pharmacy-legacy-note small, .dispense-patient span { color: var(--muted); }
.pharmacy-item-side { align-items: flex-end; }
.pharmacy-item-side strong { font-size: 13px; }
.pharmacy-legacy-note { padding: 13px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.pharmacy-trace { flex-wrap: wrap; }
.pharmacy-amount { font-size: 16px; }
.dispense-patient, .dispense-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dispense-patient { margin-bottom: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.dispense-patient > div > strong { font-size: 18px; }
.dispense-check, .dispense-warning { display: flex; flex-direction: column; gap: 4px; margin-top: 15px; padding: 12px 14px; border-radius: 7px; }
.dispense-check { color: #16614f; background: var(--mint-soft); }
.dispense-warning { color: #a13535; background: #fff1f0; }
.dispense-check span, .dispense-warning span { font-size: 12px; }
.dispense-total { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line); }
.dispense-total span { color: var(--muted); }
.dispense-total strong { font-size: 18px; }
.refund-flow { display: grid; gap: 15px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; cursor: pointer; }
.checkbox-row input { width: 15px; height: 15px; accent-color: var(--blue); }
.refund-order-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 20px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.refund-order-summary span { color: var(--muted); }
.refund-order-summary strong { text-align: right; }
.refund-fields { margin-top: 15px; }
.inventory-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 16px; }
.inventory-stat { padding: 15px 17px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.inventory-stat span { display: block; color: var(--muted); font-size: 11px; }
.inventory-stat strong { display: block; font-size: 22px; margin-top: 9px; }
.report-tabs { display: flex; gap: 5px; padding: 5px; background: #f1f4f8; border-radius: 8px; }
.report-tab { padding: 8px 12px; background: transparent; border-radius: 6px; color: var(--muted); font-size: 12px; }
.report-tab.active { color: var(--blue); background: #fff; box-shadow: 0 2px 5px rgba(31, 53, 83, .08); }
.active-report-period { color: var(--blue); border-color: #8ab9e7; background: var(--blue-soft); }
.report-period-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.report-quick-actions { display: flex; align-items: center; gap: 7px; }
.report-custom-filter { display: flex; align-items: center; gap: 7px; }
.report-custom-filter label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.report-custom-filter .select-box, .report-filter-input { min-height: 32px; }
.report-filter-input { width: 136px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; outline: none; }
.report-filter-input:focus { border-color: #9fc8ff; }
.report-filter-hint { min-height: 32px; display: inline-flex; align-items: center; padding: 0 8px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.report-breakdown-panel { margin-bottom: 16px; }
.report-table th, .report-table td { white-space: nowrap; }
.report-risk-list { display: grid; gap: 12px; }
.report-risk-list > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 11px; border-bottom: 1px solid #edf0f4; }
.report-risk-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.report-risk-list span { color: var(--muted); }
.report-risk-list strong { font-size: 15px; }
.chart { height: 230px; padding: 20px 8px 7px; display: flex; align-items: end; gap: 14px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 45px, #f1f3f6 46px); }
.bar { flex: 1; min-width: 16px; position: relative; border-radius: 5px 5px 0 0; background: var(--blue); }
.bar.mint { background: var(--mint); }
.bar.orange { background: var(--orange); }
.bar::after { content: attr(data-label); position: absolute; top: calc(100% + 8px); width: 100%; text-align: center; color: var(--muted); font-size: 10px; }
.legend { display: flex; gap: 17px; margin-top: 18px; color: var(--muted); font-size: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--blue); }
.legend i.mint { background: var(--mint); }
.legend i.orange { background: var(--orange); }
.referral-summary { display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 22px; align-items: center; }
.referral-total { padding-right: 20px; border-right: 1px solid var(--line); }
.referral-total strong { display: block; font-size: 31px; line-height: 1; }
.referral-total span, .referral-total small { display: block; color: var(--muted); font-size: 11px; margin-top: 8px; }
.referral-total small { margin-top: 16px; color: var(--mint); }
.referrer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #edf0f4; }
.referrer-row:last-child { border-bottom: 0; }
.referrer-row strong { display: block; font-size: 12px; }
.referrer-row small { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.referrer-row b { color: var(--orange); font-size: 12px; }
.settings-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.settings-layout { display: grid; grid-template-columns: 205px minmax(0, 1fr); gap: 16px; align-items: start; }
.settings-subnav { padding: 10px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.settings-subnav-title { padding: 8px 10px 12px; color: var(--muted); font-size: 11px; font-weight: 700; }
.settings-subnav-item { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 7px; color: #536176; background: transparent; text-align: left; font-size: 12px; }
.settings-subnav-item:hover { color: var(--blue); background: #f5f8fc; }
.settings-subnav-item.active { color: var(--blue); background: var(--blue-soft); font-weight: 600; }
.settings-subnav-icon { width: 18px; text-align: center; font-size: 15px; color: currentColor; }
.settings-content { min-width: 0; }
.settings-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.settings-section-heading h2 { margin: 4px 0 0; font-size: 17px; }
.security-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid #edf0f4; }
.security-setting-row:last-child { border-bottom: 0; }
.security-setting-row strong, .security-setting-row small { display: block; }
.security-setting-row strong { font-size: 12px; }
.security-setting-row small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.print-settings-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 16px; align-items: start; }
.print-settings-panel .panel-header { align-items: flex-start; }
.print-setting-group { padding: 17px 0; border-bottom: 1px solid #edf0f4; }
.print-setting-group:first-child { padding-top: 0; }
.print-setting-group:last-of-type { border-bottom: 0; }
.print-setting-group h3 { margin: 0 0 12px; font-size: 12px; }
.print-paper-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.print-paper-options .permission-option { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.print-paper-options .permission-option:has(input:checked) { border-color: #8ab9e7; background: var(--blue-soft); color: var(--blue); }
.print-option-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
.print-option { min-height: 32px; }
.print-preview-panel { position: sticky; top: 18px; min-width: 0; }
.print-preview-stage { position: relative; min-height: 650px; display: grid; place-items: start center; padding: 26px 18px 30px; overflow: hidden; background: #f2f5f9; }
.print-preview-ribbon { position: absolute; top: 13px; left: 9px; padding: 4px 13px 4px 9px; color: #fff; background: var(--mint); font-size: 10px; transform: rotate(-45deg) translate(-11px, -3px); transform-origin: center; }
.print-preview-paper { width: min(100%, 420px); min-height: 560px; padding: 31px 27px 25px; overflow: hidden; background: #fff; border: 1px solid #d6dde7; box-shadow: 0 8px 18px rgba(28, 52, 84, .12); transform-origin: top center; }
.print-preview-paper.print-paper-prescription { width: min(100%, 360px); }
.print-preview-paper.print-paper-receipt { width: min(100%, 250px); min-height: 460px; padding: 24px 17px 18px; }
.print-preview-paper .print-header h1 { font-size: 16px; }
.print-preview-paper .print-header h2 { font-size: 12px; }
.print-preview-paper .print-line { font-size: 10px; }
.print-preview-paper .print-content { min-height: 225px; }
.print-preview-paper .print-medication { font-size: 9px; gap: 5px; }
.print-preview-paper .print-footer { font-size: 8px; }
.print-sheet { display: none; }
.print-header { padding-bottom: 13px; border-bottom: 1px solid #222; text-align: center; }
.print-header h1 { margin: 0; font-size: 20px; }
.print-header h2 { margin: 8px 0 0; font-size: 15px; font-weight: 600; }
.print-patient { padding: 12px 0; border-bottom: 1px solid #999; }
.print-line { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 5px 0; font-size: 12px; }
.print-line span { color: #555; }
.print-line strong { color: #111; text-align: right; font-weight: 500; }
.print-content { min-height: 160px; padding: 10px 0; }
.print-block { margin: 11px 0; }
.print-block h3 { margin: 0 0 8px; font-size: 13px; }
.print-medication { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(70px, .7fr); gap: 8px; padding: 6px 0; border-bottom: 1px dashed #aaa; font-size: 11px; }
.print-medication-head { color: #555; font-weight: 600; border-bottom: 1px solid #777; }
.print-footer { display: flex; justify-content: space-between; gap: 15px; padding-top: 13px; border-top: 1px solid #222; font-size: 10px; color: #444; }
.print-empty { color: #666; font-size: 12px; text-align: center; }
@media print {
  @page { size: auto; margin: 10mm; }
  .app-shell { display: none !important; }
  body.print-active #print-sheet { display: block !important; width: 100%; margin: 0 auto; color: #000; background: #fff; }
  body.print-active #print-sheet.print-paper-A4 { max-width: 180mm; }
  body.print-active #print-sheet.print-paper-prescription { max-width: 148mm; }
  body.print-active #print-sheet.print-paper-receipt { max-width: 72mm; font-size: 10px; }
  body.print-active #print-sheet.print-paper-receipt .print-header h1 { font-size: 15px; }
  body.print-active #print-sheet.print-paper-receipt .print-header h2 { font-size: 12px; }
  body.print-active #print-sheet.print-paper-receipt .print-medication { grid-template-columns: minmax(0, 1.5fr) minmax(40px, .8fr); }
  body.print-active #print-sheet.print-paper-receipt .print-medication span:nth-child(2),
  body.print-active #print-sheet.print-paper-receipt .print-medication span:nth-child(3) { display: none; }
}
.treatment-catalog-panel { margin-top: 16px; }
.treatment-catalog-tabs { display: flex; gap: 5px; padding: 7px 12px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.treatment-catalog-tabs .report-tab { white-space: nowrap; }
.catalog-setting-list { display: grid; gap: 9px; }
.catalog-setting-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(118px, auto) 34px; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #edf0f4; }
.catalog-setting-row:last-child { border-bottom: 0; }
.catalog-setting-row input { min-height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; outline: none; }
.catalog-setting-row input:focus { border-color: #9fc8ff; }
.catalog-price { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.catalog-price input { min-width: 0; width: 100%; }
.catalog-discount-option { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink); font-size: 12px; }
.catalog-discount-option input { min-height: auto; width: 15px; height: 15px; padding: 0; }
.catalog-setting-row .icon-action { justify-self: end; }
.commission-settings-panel { margin-top: 16px; }
.panel-header-actions { display: flex; align-items: center; gap: 8px; }
.commission-setting-head, .commission-setting-row { display: grid; grid-template-columns: minmax(145px, 1.15fr) minmax(145px, 1fr) minmax(100px, .75fr) minmax(100px, .75fr) minmax(120px, .9fr) 70px 34px; gap: 9px; align-items: center; }
.commission-setting-head { padding: 0 0 9px; color: var(--muted); font-size: 10px; border-bottom: 1px solid var(--line); }
.commission-setting-row { padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.commission-setting-row:last-child { border-bottom: 0; }
.commission-setting-row input, .commission-setting-row select { width: 100%; min-width: 0; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; outline: none; font-size: 11px; }
.commission-setting-row input:focus, .commission-setting-row select:focus { border-color: #9fc8ff; }
.commission-value { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.commission-value input { flex: 1; }
.commission-enabled { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.commission-enabled input { width: 15px; min-height: 15px; accent-color: var(--mint); }
.commission-setting-row .icon-action { justify-self: end; }
.commission-empty { padding: 20px 0; }
.user-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid #edf0f4; }
.user-row:last-child { border-bottom: 0; }
.user-info { display: flex; align-items: center; gap: 10px; }
.user-info strong { font-size: 12px; display: block; }
.user-info small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.user-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.compact-button { min-height: 30px; padding: 0 10px; font-size: 11px; }
.permission-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 4px 0 0; padding: 14px; border: 1px solid var(--line); border-radius: 7px; }
.permission-picker legend { padding: 0 5px; color: var(--muted); font-size: 11px; }
.permission-option { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-size: 12px; cursor: pointer; }
.permission-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.switch { width: 33px; height: 19px; border-radius: 12px; background: var(--mint); position: relative; }
.switch::after { content: ""; width: 15px; height: 15px; position: absolute; top: 2px; right: 2px; background: #fff; border-radius: 50%; }
.modal-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(17, 30, 49, .38); display: grid; place-items: center; padding: 20px; }
.modal-backdrop[hidden] { display: none; }
.modal { width: min(520px, 100%); background: #fff; border-radius: 11px; box-shadow: 0 20px 70px rgba(17, 30, 49, .24); }
.modal.wide-modal { width: min(920px, 100%); max-height: calc(100vh - 40px); overflow: auto; }
.receipt-toolbar { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.receipt-hint { color: var(--muted); font-size: 11px; }
.receipt-detail-table { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.receipt-detail-header { display: grid; grid-template-columns: 1fr 1.5fr .7fr .6fr .6fr .7fr .7fr 1fr 1fr 1fr; min-width: 760px; gap: 8px; padding: 10px; background: #f5f7fa; color: var(--muted); font-size: 10px; }
.receipt-empty { min-height: 70px; display: grid; place-items: center; min-width: 760px; color: var(--muted); font-size: 11px; }
.new-item-form h3 { margin: 0 0 12px; font-size: 14px; }
.new-item-form em { color: var(--red); font-style: normal; }
.inventory-detail-tabs { margin: -5px -22px 18px; padding: 0 22px; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.inventory-detail-tab-content { min-height: 320px; }
.inventory-detail-info-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, .8fr); gap: 24px; }
.inventory-detail-section { min-width: 0; }
.inventory-detail-section + .inventory-detail-section { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--line); }
.inventory-detail-section h3 { margin: 0 0 4px; font-size: 13px; }
.inventory-detail-pricing { padding-left: 24px; border-left: 1px solid var(--line); }
.inventory-detail-pricing .inventory-detail-field { min-height: 63px; }
.inventory-detail-history { margin-top: 12px; padding: 0; color: var(--blue); background: transparent; font-size: 11px; }
.inventory-detail-history:disabled { opacity: 1; cursor: default; }
.stocktake-form { display: grid; gap: 16px; }
.stocktake-intro { display: grid; gap: 5px; padding: 13px 15px; border: 1px solid #cfe2fb; border-radius: 7px; background: var(--blue-soft); }
.stocktake-intro strong { font-size: 13px; }
.stocktake-intro span { color: var(--muted); font-size: 11px; }
.stocktake-current { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.stocktake-current span { color: var(--muted); font-size: 12px; }
.stocktake-current strong { font-size: 18px; }
.inventory-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 25px; }
.inventory-detail-field { min-height: 58px; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.inventory-detail-field span, .inventory-detail-field strong { display: block; }
.inventory-detail-field span { color: var(--muted); font-size: 11px; }
.inventory-detail-field strong { margin-top: 6px; color: var(--ink); font-size: 13px; font-weight: 600; word-break: break-word; }
.inventory-detail-edit-field { display: grid; gap: 6px; min-height: 58px; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.inventory-detail-edit-field span { color: var(--muted); font-size: 11px; }
.inventory-detail-edit-field input, .inventory-detail-edit-field select { width: 100%; min-height: 32px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; }
.inventory-detail-edit-field input:focus, .inventory-detail-edit-field select:focus { border-color: #9fc8ff; outline: 2px solid rgba(40, 121, 232, .1); }
.inventory-detail-checkbox { grid-template-columns: 1fr auto; align-items: center; min-height: 44px; }
.inventory-detail-checkbox input[type="checkbox"] { width: 16px; height: 16px; min-height: 16px; padding: 0; }
.inventory-edit-hint { margin-bottom: 12px; padding: 10px 12px; color: var(--muted); border: 1px solid #cfe2fb; border-radius: 6px; background: var(--blue-soft); font-size: 11px; }
.inventory-detail-table { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; }
.inventory-detail-table-head, .inventory-detail-table-row { display: grid; grid-template-columns: 1.1fr 1.2fr .8fr .8fr 1.2fr 1.3fr; min-width: 700px; gap: 10px; padding: 10px 12px; align-items: center; font-size: 11px; }
.inventory-detail-table-head { color: var(--muted); background: #f5f7fa; font-size: 10px; }
.inventory-detail-table-row { border-top: 1px solid #edf0f4; }
.inventory-detail-table-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-detail-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.inventory-detail-toolbar .search-box { min-width: 145px; min-height: 30px; }
.inventory-detail-toolbar .select-box { min-height: 30px; }
.inventory-filter-option { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: #fff; font-size: 11px; white-space: nowrap; }
.inventory-filter-option input { accent-color: var(--blue); }
.inventory-detail-table.inventory-batches-table .inventory-detail-table-head, .inventory-detail-table.inventory-batches-table .inventory-detail-table-row { grid-template-columns: 1fr 1fr .9fr .9fr 1.1fr 1.1fr 1.1fr .8fr 1.3fr .8fr; min-width: 1050px; }
.inventory-detail-table.inventory-stats-table .inventory-detail-table-head, .inventory-detail-table.inventory-stats-table .inventory-detail-table-row { grid-template-columns: .65fr 1.1fr repeat(6, minmax(90px, 1fr)); min-width: 850px; }
.inventory-detail-pagination { padding: 10px 2px 0; color: var(--muted); font-size: 11px; text-align: right; }
.link-text { color: var(--blue); }
.compact-tabs { padding: 2px; }
.compact-tabs .report-tab { padding: 5px 10px; font-size: 11px; }
.inventory-setting-section { padding: 4px 0 18px; border-bottom: 1px solid var(--line); }
.inventory-setting-section + .inventory-setting-section { margin-top: 18px; }
.inventory-setting-section h3 { margin: 0 0 14px; font-size: 13px; }
.inventory-setting-row { display: flex; align-items: center; gap: 13px; min-height: 38px; color: var(--ink); font-size: 11px; flex-wrap: wrap; }
.inventory-setting-row > span { width: 76px; color: var(--muted); flex: 0 0 76px; }
.inventory-setting-row label { display: inline-flex; align-items: center; gap: 6px; }
.small-number-input { width: 48px; min-height: 28px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; text-align: center; }
.inventory-detail-empty { padding: 55px 15px; color: var(--muted); text-align: center; font-size: 12px; }
.inventory-detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 16px; }
.inventory-detail-stat { padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: #fbfcfe; }
.inventory-detail-stat span { display: block; color: var(--muted); font-size: 10px; }
.inventory-detail-stat strong { display: block; margin-top: 8px; font-size: 16px; }
.inventory-detail-settings { display: grid; gap: 13px; }
.inventory-alert-box { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid #ccefe1; border-radius: 7px; background: var(--mint-soft); }
.inventory-alert-box.warning { border-color: #f2d5a7; background: var(--orange-soft); }
.inventory-alert-box strong { font-size: 12px; }
.inventory-alert-box span { color: #5f6c7c; font-size: 11px; }
.inventory-row-clickable { cursor: pointer; }
.inventory-row-clickable:hover { background: var(--blue-soft); }
.inventory-row-clickable:focus { outline: 2px solid #9fc8ff; outline-offset: -2px; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 22px 15px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 5px 0 0; font-size: 18px; }
.eyebrow { color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.close-button { background: transparent; color: var(--muted); font-size: 23px; line-height: 1; }
.modal-body { padding: 20px 22px; }
.prescription-settings { display: grid; gap: 0; }
.prescription-settings section { padding: 2px 0 20px; }
.prescription-settings section + section { padding-top: 20px; border-top: 1px dashed var(--line); }
.prescription-settings section:last-child { padding-bottom: 2px; }
.prescription-settings h3 { margin: 0 0 15px; font-size: 12px; }
.prescription-setting-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px 18px; }
.prescription-setting-grid.default-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prescription-setting-option { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ink); font-size: 12px; cursor: pointer; }
.prescription-setting-option input { width: 16px; height: 16px; margin: 0; accent-color: var(--blue); }
.modal-footer { display: flex; justify-content: flex-end; gap: 9px; padding: 15px 22px 20px; border-top: 1px solid var(--line); }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 25px; transform: translate(-50%, 18px); background: #1f2e43; color: #fff; padding: 11px 17px; border-radius: 7px; opacity: 0; pointer-events: none; transition: .2s ease; font-size: 12px; box-shadow: 0 8px 26px rgba(25, 40, 61, .2); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1120px) { .sidebar { width: 205px; flex-basis: 205px; } .bill-layout { grid-template-columns: 230px minmax(0, 1fr); } .catalog { display: none; } .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1050px) { .commission-setting-head { display: none; } .commission-setting-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 0; } .commission-setting-row .commission-name, .commission-setting-row .commission-enabled { grid-column: span 2; } .commission-setting-row .icon-action { justify-self: start; } }
@media (max-width: 820px) { .sidebar { width: 65px; flex-basis: 65px; padding: 18px 8px; } .brand { padding: 0 5px 18px; } .brand > div:last-child, .clinic-switcher, .nav-item:not(.active)::after, .nav-item { font-size: 0; } .nav-item { justify-content: center; gap: 0; padding: 11px 5px; } .nav-item.active { font-size: 0; } .nav-icon { font-size: 17px; } .nav-badge { position: absolute; margin: -20px -22px 0 0; } .server-status { justify-content: center; padding: 7px 0; } .server-status span:last-child { display: none; } .topbar { padding: 14px 18px; } .content { padding: 20px 18px 32px; } .grid-2-1, .grid-1-1, .settings-grid, .settings-layout, .print-settings-layout { grid-template-columns: 1fr; } .settings-subnav { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 8px; } .settings-subnav-title { display: none; } .settings-subnav-item { width: auto; flex: 0 0 auto; white-space: nowrap; } .split-layout, .bill-layout { grid-template-columns: 1fr; } .side-list { max-height: 220px; overflow-y: auto; } .inventory-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .toolbar { align-items: stretch; flex-direction: column; } .toolbar-left, .toolbar-right { flex-wrap: wrap; } .search-box { min-width: 0; flex: 1; } .page-heading { align-items: flex-start; flex-direction: column; } .print-preview-panel { position: static; } .charge-amount-bar { align-items: flex-start; flex-direction: column; } .charge-amount-actions { width: 100%; } .amount-action { flex: 1; } .charge-footer { align-items: flex-start; flex-wrap: wrap; } .charge-submit { width: 100%; margin-left: 0; } .fee-detail-table { overflow-x: auto; } .fee-detail-toolbar, .fee-detail-head, .fee-detail-row { min-width: 620px; } }
@media (max-width: 520px) { .metric-grid { grid-template-columns: 1fr; } .field-grid { grid-template-columns: 1fr; } .full-field { grid-column: auto; } .referral-summary { grid-template-columns: 1fr; } .referral-total { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--line); } .topbar-actions .help-button { display: none; } .user-chip { padding-left: 7px; margin-left: 0; } .user-chip > span:nth-child(2) { display: none; } .content { padding-inline: 12px; } .inventory-summary { gap: 8px; } .inventory-stat { padding: 12px; } .prescription-card-header { align-items: flex-start; flex-direction: column; } .prescription-card-actions, .order-shortcuts { width: 100%; justify-content: flex-start; } .prescription-head { display: none; } .prescription-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-width: 0; padding: 9px 12px; } .prescription-row select { grid-column: 1 / -1; } .prescription-row button { justify-self: start; } .prescription-money { text-align: left; } .prescription-total { align-items: flex-end; flex-direction: column; gap: 3px; } .prescription-setting-grid, .prescription-setting-grid.default-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .treatment-order-row { grid-template-columns: 24px minmax(0, 1fr); } .treatment-order-row input { grid-column: 2; } .treatment-order-row .order-price { grid-column: 2; } .order-note-card { grid-template-columns: 1fr; } .order-note-card label { border-right: 0; border-bottom: 1px solid var(--line); } .history-item-button { align-items: flex-start; flex-direction: column; gap: 8px; } .history-item-link { align-self: flex-end; } .visit-detail-grid, .visit-fee-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .inventory-pagination { align-items: flex-start; flex-direction: column; } .pagination-controls { justify-content: flex-start; } }
.pharmacy-item-row { min-width: 0; }
@media (max-width: 520px) { .catalog-setting-row { grid-template-columns: minmax(0, 1fr) 34px; } .catalog-price, .catalog-discount-option { grid-column: 1; } .catalog-setting-row .icon-action { grid-column: 2; grid-row: 1 / span 3; } }
@media (max-width: 520px) { .pharmacy-item-row { grid-template-columns: 1fr; } .pharmacy-item-side { align-items: flex-start; } .dispense-patient, .dispense-total { align-items: flex-start; flex-direction: column; } }
@media (max-width: 820px) { .inventory-detail-info-layout { grid-template-columns: 1fr; } .inventory-detail-pricing { padding: 18px 0 0; border-top: 1px solid var(--line); border-left: 0; } }
@media (max-width: 520px) { .inventory-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .inventory-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inventory-detail-tabs { margin-inline: -12px; padding-inline: 12px; overflow-x: auto; } .inventory-detail-tabs .report-tab { white-space: nowrap; } }

@media (max-width: 600px) {
  body { background: #f4f8f8; }
  .app-shell { display: block; min-height: 100dvh; padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .sidebar { display: none; }
  .main-area { width: 100%; }
  .topbar { min-height: 62px; padding: 10px 14px; position: sticky; top: 0; z-index: 8; }
  .breadcrumb { font-size: 12px; }
  .breadcrumb span:first-of-type { display: none; }
  .topbar-date { display: none; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .icon-button:first-child { display: none; }
  .topbar-actions .user-chip { min-height: 34px; border: 0; background: transparent; }
  .topbar-actions .user-chip > span:last-child { display: none; }
  .topbar-actions .user-chip .avatar { width: 29px; height: 29px; }
  .topbar-actions .icon-button:last-child { width: 32px; }
  .content { padding: 14px 12px 22px; }
  .page-heading { gap: 8px; margin-bottom: 13px; }
  .page-heading h1 { font-size: 20px; }
  .page-heading p { font-size: 11px; }
  .panel { border-radius: 8px; box-shadow: 0 1px 4px rgba(25, 64, 67, .06); }
  .panel-header { padding: 13px 14px; }
  .panel-body { padding: 14px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .metric-card { min-height: 88px; padding: 12px; }
  .metric-value { font-size: 22px; }
  .grid-2-1, .grid-1-1 { gap: 12px; margin-top: 12px; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quick-button { min-height: 86px; padding: 11px; }
  .quick-button span { margin-top: 9px; }
  .toolbar { gap: 8px; margin-bottom: 11px; }
  .toolbar-left, .toolbar-right { width: 100%; gap: 7px; }
  .toolbar-right { justify-content: flex-start; }
  .search-box { width: 100%; min-height: 40px; }
  .toolbar .button, .toolbar button { min-height: 38px; }
  .split-layout { min-height: auto; gap: 10px; }
  .side-list { max-height: 170px; padding: 8px; }
  .side-row { padding: 10px 8px; }
  .form-panel { padding: 14px; }
  .patient-banner { align-items: flex-start; gap: 10px; }
  .patient-actions { flex-wrap: wrap; justify-content: flex-end; }
  .field input, .field textarea, .field select, .select-box, .search-box { font-size: 16px; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal, .modal.wide-modal { width: 100%; max-height: 92dvh; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px 14px 0 0; }
  .modal-body { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { flex: 0 0 auto; padding-bottom: calc(15px + env(safe-area-inset-bottom)); background: var(--surface); }
  .mobile-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(62px + env(safe-area-inset-bottom)); padding: 6px 4px env(safe-area-inset-bottom); border-top: 1px solid #dbe8e8; background: rgba(255, 255, 255, .97); box-shadow: 0 -4px 16px rgba(25, 64, 67, .08); }
  .mobile-nav-item { min-width: 0; border: 0; border-radius: 7px; color: #789093; background: transparent; font: inherit; font-size: 10px; }
  .mobile-nav-item.active { color: var(--blue); background: #eef7f6; font-weight: 700; }
  .mobile-nav-icon { display: block; height: 23px; font-size: 19px; line-height: 21px; }
  .mobile-nav-item span:last-child { display: block; line-height: 17px; }
  body.logged-out .mobile-nav { display: none; }
}

.auth-panel { max-width: 420px; margin: 12vh auto; padding: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.auth-brand { display: grid; gap: 5px; margin-bottom: 24px; }
.auth-brand strong { color: var(--ink); font-size: 22px; }
.auth-brand span, .auth-hint { color: var(--muted); font-size: 13px; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 600; }
.auth-form input { width: 100%; min-height: 40px; border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; color: var(--ink); background: #fff; font: inherit; }
.auth-form input:focus { border-color: #8ab9e7; outline: 2px solid rgba(45, 115, 181, .12); }
.auth-form button { min-height: 42px; }
.auth-hint { margin: 0; }
@media (max-width: 520px) { .prescription-row-infusion .infusion-dose-control { grid-column: 1 / -1; } }