:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --ink: #17212f;
  --muted: #657386;
  --line: #dfe7f0;
  --primary: #138f88;
  --primary-dark: #08716c;
  --green: #1aa36f;
  --blue: #3c77d8;
  --orange: #e89236;
  --red: #d84c4c;
  --violet: #7066d9;
  --shadow: 0 16px 38px rgba(25, 41, 61, 0.08);
  --system-card-bg: var(--panel);
}

/* ClauseOS final cascade lock — dashboard work modals */
#dashboardTaskCenter.dashboard-task-center,
.pending-record-modal,
.pending-followup-modal {
  background: rgba(2, 8, 10, 0.82) !important;
  color: #eef5f2 !important;
  backdrop-filter: blur(18px) saturate(115%) !important;
}

#dashboardTaskCenter .dashboard-task-center-card,
.pending-record-modal .pending-record-dialog,
.pending-followup-modal .pending-record-dialog {
  background: radial-gradient(circle at 18% 0%, rgba(104, 231, 142, 0.09), transparent 34%), linear-gradient(145deg, rgba(17, 23, 22, 0.98), rgba(8, 13, 13, 0.98)) !important;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  color: #eef5f2 !important;
}

#dashboardTaskCenter .dashboard-task-center-head,
.pending-record-modal .pending-record-dialog > header,
.pending-followup-modal .pending-record-dialog > header {
  background: linear-gradient(110deg, rgba(104, 231, 142, 0.1), rgba(18, 27, 26, 0.82)) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

#dashboardTaskCenter :is(h2, h3, strong, label),
.pending-record-modal :is(h2, h3, strong, label),
.pending-followup-modal :is(h2, h3, strong, label) {
  color: #f4f8f6 !important;
}

#dashboardTaskCenter :is(p, small, .dashboard-task-meta),
.pending-record-modal :is(p, small),
.pending-followup-modal :is(p, small) {
  color: #93a49e !important;
}

#dashboardTaskCenter :is(input, textarea, select),
.pending-record-modal :is(input, textarea, select),
.pending-followup-modal :is(input, textarea, select) {
  background: rgba(255, 255, 255, 0.055) !important;
  color: #eef5f2 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

#dashboardTaskCenter :is(input, textarea)::placeholder {
  color: #65736f !important;
}

#dashboardTaskCenter .dashboard-task-toolbar,
#dashboardTaskCenter .dashboard-task-composer,
#dashboardTaskCenter .dashboard-task-section,
#dashboardTaskCenter .dashboard-task-item,
#dashboardTaskCenter .dashboard-task-date-group,
.pending-record-modal .pending-record-table-wrap,
.pending-followup-modal .pending-record-table-wrap {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: #eef5f2 !important;
}

#dashboardTaskCenter :is(button, .light-btn),
.pending-record-modal :is(button, .light-btn),
.pending-followup-modal :is(button, .light-btn) {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #dfe8e4 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

#dashboardTaskCenter :is(button, .light-btn):hover,
.pending-record-modal :is(button, .light-btn):hover,
.pending-followup-modal :is(button, .light-btn):hover {
  background: rgba(104, 231, 142, 0.12) !important;
  border-color: rgba(104, 231, 142, 0.35) !important;
  color: #fff !important;
}

#dashboardTaskCenter .primary-btn,
#dashboardTaskCenter button.active,
.pending-record-modal .pending-record-write-btn,
.pending-followup-modal .pending-followup-complete-btn {
  background: linear-gradient(135deg, #68e78e, #39ba69) !important;
  color: #07130b !important;
  border-color: rgba(104, 231, 142, 0.65) !important;
  box-shadow: 0 10px 24px rgba(38, 163, 83, 0.18) !important;
}

#dashboardTaskCenter button:disabled,
.pending-record-modal button:disabled,
.pending-followup-modal button:disabled {
  opacity: 0.34 !important;
  box-shadow: none !important;
}

.pending-record-modal .pending-record-content,
.pending-followup-modal .pending-record-content {
  background: transparent !important;
}

.pending-record-modal .pending-record-table,
.pending-followup-modal .pending-record-table {
  color: #dce7e2 !important;
}

.pending-record-modal .pending-record-table th,
.pending-followup-modal .pending-record-table th {
  background: rgba(255, 255, 255, 0.055) !important;
  color: #9baca6 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.pending-record-modal .pending-record-table td,
.pending-followup-modal .pending-record-table td {
  color: #dbe5e1 !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}

.pending-record-modal .pending-record-table tbody tr:hover,
.pending-followup-modal .pending-record-table tbody tr:hover {
  background: rgba(104, 231, 142, 0.055) !important;
}

.pending-record-modal .pending-record-dialog > footer,
.pending-followup-modal .pending-record-dialog > footer {
  background: rgba(5, 9, 9, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
}

#dashboardTaskCenter .dashboard-task-empty,
.pending-record-modal .pending-record-empty,
.pending-followup-modal .pending-record-empty {
  background: rgba(255, 255, 255, 0.025) !important;
  color: #7f918b !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ================================================================
   ClauseOS dark glass — work memo, history and pending-work dialogs
   Visual-only overrides. Existing markup, events and data flows stay intact.
   ================================================================ */
.dashboard-task-center,
.pending-record-modal {
  background: rgba(2, 7, 9, 0.78) !important;
  -webkit-backdrop-filter: blur(16px) saturate(112%) !important;
  backdrop-filter: blur(16px) saturate(112%) !important;
}

.dashboard-task-center-card,
.pending-record-dialog {
  color: #eef4f1 !important;
  border: 1px solid rgba(220, 232, 227, 0.18) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(104, 231, 142, 0.08), transparent 34%),
    linear-gradient(145deg, rgba(21, 27, 26, 0.98), rgba(8, 13, 14, 0.99)) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.06) !important;
}

.dashboard-task-center-head,
.pending-record-dialog > header {
  border-bottom: 1px solid rgba(220, 232, 227, 0.1) !important;
  background: linear-gradient(105deg, rgba(104, 231, 142, 0.09), rgba(255, 255, 255, 0.018) 54%, transparent) !important;
}

.dashboard-task-center-head h2,
.pending-record-dialog > header h2,
.dashboard-task-section-title,
.dashboard-task-history-section h3,
.dashboard-task-date-group h4 {
  color: #f4f8f6 !important;
}

.dashboard-task-center-head > span,
.pending-record-dialog > header span {
  color: #68e78e !important;
  letter-spacing: 0.14em !important;
}

.dashboard-task-center-head p,
.pending-record-dialog > header p,
.dashboard-task-composer p,
.dashboard-task-item-meta,
.pending-record-dialog small,
.pending-record-empty p,
.dashboard-task-empty p {
  color: #8f9e98 !important;
}

.dashboard-task-center-close,
.pending-record-dialog > header button {
  color: #b7c3be !important;
  border: 1px solid rgba(220, 232, 227, 0.1) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.dashboard-task-center-close:hover,
.pending-record-dialog > header button:hover {
  color: #ffffff !important;
  border-color: rgba(104, 231, 142, 0.34) !important;
  background: rgba(104, 231, 142, 0.1) !important;
}

.dashboard-task-toolbar,
.pending-record-dialog > footer {
  border-color: rgba(220, 232, 227, 0.09) !important;
  background: rgba(8, 13, 14, 0.76) !important;
}

.dashboard-task-toolbar button,
.pending-record-dialog .light-btn,
.pending-record-dialog > footer button,
.dashboard-task-composer button {
  color: #c5cfcb !important;
  border: 1px solid rgba(220, 232, 227, 0.14) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045) !important;
}

.dashboard-task-toolbar button:hover,
.pending-record-dialog .light-btn:hover,
.pending-record-dialog > footer button:hover,
.dashboard-task-composer button:hover {
  color: #f5faf7 !important;
  border-color: rgba(104, 231, 142, 0.35) !important;
  background: rgba(104, 231, 142, 0.1) !important;
}

.dashboard-task-toolbar button.active,
.dashboard-task-composer button[type="submit"],
.dashboard-task-composer .primary,
.pending-record-write-btn,
.pending-followup-complete-btn {
  color: #07110b !important;
  border-color: rgba(104, 231, 142, 0.82) !important;
  background: #68e78e !important;
  box-shadow: 0 8px 20px rgba(104, 231, 142, 0.12) !important;
}

.dashboard-task-toolbar button:disabled,
.dashboard-task-composer button:disabled,
.pending-record-dialog button:disabled {
  color: #65716d !important;
  border-color: rgba(220, 232, 227, 0.07) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  box-shadow: none !important;
  opacity: 0.72 !important;
}

.dashboard-task-composer,
.dashboard-task-section,
.dashboard-task-history-section,
.dashboard-task-date-group,
.pending-record-table-wrap,
.pending-record-empty {
  border: 1px solid rgba(220, 232, 227, 0.1) !important;
  background: rgba(255, 255, 255, 0.025) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025) !important;
}

.dashboard-task-composer label,
.dashboard-task-recipients-label,
.dashboard-task-item strong,
.pending-record-table th,
.pending-record-table td {
  color: #dce5e1 !important;
}

.dashboard-task-composer input,
.dashboard-task-composer textarea,
.dashboard-task-composer select,
.dashboard-task-datetime-field,
.dashboard-task-datetime-popover {
  color: #eef4f1 !important;
  border: 1px solid rgba(220, 232, 227, 0.13) !important;
  background: rgba(2, 8, 9, 0.54) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025) !important;
}

.dashboard-task-composer input::placeholder,
.dashboard-task-composer textarea::placeholder {
  color: #66746f !important;
}

.dashboard-task-composer input:focus,
.dashboard-task-composer textarea:focus,
.dashboard-task-composer select:focus,
.dashboard-task-datetime-field:focus-within {
  border-color: rgba(104, 231, 142, 0.58) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(104, 231, 142, 0.08) !important;
}

.dashboard-task-recipient,
.dashboard-task-item {
  color: #dce5e1 !important;
  border: 1px solid rgba(220, 232, 227, 0.09) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.018)) !important;
}

.dashboard-task-recipient:hover,
.dashboard-task-recipient.selected,
.dashboard-task-item:hover {
  border-color: rgba(104, 231, 142, 0.34) !important;
  background: rgba(104, 231, 142, 0.075) !important;
}

.dashboard-task-scroll,
.pending-record-content {
  scrollbar-color: rgba(104, 231, 142, 0.42) transparent;
  scrollbar-width: thin;
}

.dashboard-task-scroll::-webkit-scrollbar,
.pending-record-content::-webkit-scrollbar {
  width: 8px;
}

.dashboard-task-scroll::-webkit-scrollbar-thumb,
.pending-record-content::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 99px;
  background: rgba(104, 231, 142, 0.34);
  background-clip: padding-box;
}

.pending-record-table {
  color: #dce5e1 !important;
  background: transparent !important;
}

.pending-record-table thead {
  background: rgba(255, 255, 255, 0.045) !important;
}

.pending-record-table th {
  color: #8f9e98 !important;
  border-bottom: 1px solid rgba(220, 232, 227, 0.1) !important;
}

.pending-record-table td {
  border-bottom: 1px solid rgba(220, 232, 227, 0.075) !important;
  background: rgba(255, 255, 255, 0.012) !important;
}

.pending-record-table tbody tr:hover td {
  background: rgba(104, 231, 142, 0.055) !important;
}

.pending-record-table tbody tr:first-child td {
  background: rgba(104, 231, 142, 0.08) !important;
}

.pending-followup-actions {
  border-color: rgba(220, 232, 227, 0.1) !important;
  background: rgba(255, 255, 255, 0.025) !important;
}

.pending-record-empty {
  color: #a8b4af !important;
}

@media (max-width: 760px) {
  .dashboard-task-center-card,
  .pending-record-dialog {
    width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .dashboard-task-recipients {
    grid-template-columns: 1fr !important;
  }

  .pending-record-table {
    min-width: 680px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-task-center *,
  .pending-record-modal * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Final patient modal guard: keep legacy light-theme rules from winning later in the cascade. */
#patientModal.patient-modal .patient-modal-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(104, 231, 142, .075), transparent 28%),
    rgba(10, 14, 15, .97) !important;
}

#patientModal.patient-modal #patientForm input:not([type="radio"]):not([type="checkbox"]),
#patientModal.patient-modal #patientForm select,
#patientModal.patient-modal #patientForm textarea {
  border-color: rgba(224, 232, 228, .14);
  background: rgba(255, 255, 255, .045);
  color: #f0f5f2;
}

#patientModal.patient-modal #patientForm .patient-modal-actions .save-btn {
  border-color: #68e78e !important;
  background: #68e78e !important;
  color: #102418 !important;
  box-shadow: 0 8px 20px rgba(104, 231, 142, .14) !important;
}

/* New patient: ClauseOS dark glass form. Visual-only override; field and save logic stay intact. */
#patientModal.patient-modal {
  padding: 22px;
  background: rgba(0, 4, 5, .78);
  backdrop-filter: blur(18px) saturate(112%);
}

#patientModal .patient-modal-card {
  width: min(1180px, calc(100vw - 44px));
  max-height: calc(100dvh - 44px);
  overflow: auto;
  scrollbar-color: rgba(104, 231, 142, .38) transparent;
  border: 1px solid rgba(224, 232, 228, .16);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(104, 231, 142, .075), transparent 28%),
    rgba(10, 14, 15, .96);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .56), inset 0 1px rgba(255, 255, 255, .07);
}

#patientModal .patient-modal-card .modal-head {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid rgba(224, 232, 228, .10);
  background: rgba(12, 16, 17, .90);
  backdrop-filter: blur(18px);
}

#patientModal .patient-modal-card .modal-head h2 {
  color: #f3f7f5 !important;
  font-size: 22px;
  font-weight: 780;
  letter-spacing: -.02em;
}

#patientModal .patient-modal-card .icon-btn {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(224, 232, 228, .12);
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  color: #dce4e0;
}

#patientModal .patient-registration-form {
  padding: 20px 24px 0;
  color: #dce4e0;
}

#patientModal .patient-form-section {
  margin: 0 0 14px;
  padding: 18px 20px;
  border: 1px solid rgba(224, 232, 228, .11);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018));
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}

#patientModal .patient-form-section h3 {
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(224, 232, 228, .09);
  color: #f3f7f5 !important;
  font-size: 16px;
  font-weight: 760;
}

#patientModal .patient-form-row {
  min-height: 44px;
  margin-bottom: 7px;
  gap: 10px 16px;
}

#patientModal .patient-form-row > label,
#patientModal .patient-form-row > span,
#patientModal .patient-sex-field > span,
#patientModal .patient-sex-field label,
#patientModal .birth-line .unknown-birth,
#patientModal .age-line span {
  color: #aeb9b4 !important;
  font-size: 14px;
  font-weight: 620;
}

#patientModal .patient-registration-form input:not([type="radio"]):not([type="checkbox"]),
#patientModal .patient-registration-form select,
#patientModal .patient-registration-form textarea,
#patientModal .patient-card-select-trigger {
  height: 38px;
  min-height: 38px;
  border: 1px solid rgba(224, 232, 228, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  color: #f0f5f2;
  font-size: 14px;
  font-weight: 620;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035);
}

#patientModal .patient-registration-form textarea {
  min-height: 38px;
  padding-block: 8px;
}

#patientModal .patient-registration-form input::placeholder,
#patientModal .patient-registration-form textarea::placeholder {
  color: #76827c;
}

#patientModal .patient-registration-form input:focus,
#patientModal .patient-registration-form textarea:focus,
#patientModal .patient-card-select-trigger:hover,
#patientModal .patient-card-select-trigger[aria-expanded="true"] {
  border-color: rgba(104, 231, 142, .68);
  box-shadow: 0 0 0 3px rgba(104, 231, 142, .10), inset 0 1px rgba(255, 255, 255, .04);
}

#patientModal .patient-registration-form input[readonly] {
  background: rgba(255, 255, 255, .025);
  color: #9ba7a1;
}

#patientModal .patient-type-switch {
  border-color: rgba(224, 232, 228, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
}

#patientModal .patient-type-switch label {
  min-width: 72px;
  height: 38px;
  color: #9fa9a4;
  font-size: 14px;
}

#patientModal .patient-type-switch label:has(input:checked) {
  background: rgba(104, 231, 142, .16);
  color: #8af0a9;
  box-shadow: inset 0 0 0 1px rgba(104, 231, 142, .42);
}

#patientModal .record-generate-line button,
#patientModal .relation-input button,
#patientModal .source-search button {
  border: 1px solid rgba(224, 232, 228, .14);
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  color: #dce4e0;
}

#patientModal .relation-input { gap: 6px; }
#patientModal .relation-input select,
#patientModal .relation-input button { border-left: 1px solid rgba(224, 232, 228, .14); }

#patientModal .patient-card-select-trigger i { color: #68e78e; }
#patientModal .patient-card-select-menu {
  border-color: rgba(224, 232, 228, .14);
  background: rgba(17, 22, 23, .98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .45);
}
#patientModal .patient-card-select-menu button { color: #cbd4cf; }
#patientModal .patient-card-select-menu button:hover,
#patientModal .patient-card-select-menu button:focus-visible {
  background: rgba(104, 231, 142, .09);
  color: #8af0a9;
}
#patientModal .patient-card-select-menu button[aria-selected="true"] {
  background: rgba(104, 231, 142, .16);
  color: #8af0a9;
  box-shadow: inset 0 0 0 1px rgba(104, 231, 142, .28);
}

#patientModal .patient-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 28;
  margin: 18px -24px 0;
  padding: 14px 24px;
  border-top: 1px solid rgba(224, 232, 228, .11);
  background: rgba(12, 16, 17, .92);
  backdrop-filter: blur(18px);
}

#patientModal .patient-modal-actions .light-btn,
#patientModal .patient-modal-actions .save-btn {
  min-width: 112px;
  height: 40px;
  border: 1px solid rgba(224, 232, 228, .15);
  border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  color: #e8eeeb;
  font-size: 14px;
  font-weight: 720;
  white-space: nowrap;
}

#patientModal .patient-modal-actions .save-btn {
  border-color: #68e78e;
  background: #68e78e;
  color: #102418;
  box-shadow: 0 8px 20px rgba(104, 231, 142, .14);
}

#patientModal .patient-modal-actions button:active { transform: translateY(1px); }

@media (max-width: 900px) {
  #patientModal.patient-modal { padding: 0; }
  #patientModal .patient-modal-card { width: 100vw; max-height: 100dvh; border: 0; border-radius: 0; }
  #patientModal .patient-registration-form { padding-inline: 14px; }
  #patientModal .patient-form-row,
  #patientModal .patient-name-row,
  #patientModal .two-cols,
  #patientModal .address-row,
  #patientModal .source-row,
  #patientModal .note-row { grid-template-columns: 1fr; }
  #patientModal .patient-sex-field,
  #patientModal .source-search { grid-column: 1; }
  #patientModal .patient-modal-actions { margin-inline: -14px; overflow-x: auto; }
}

/* Patient center — fixed project rows (no card carousel) */
#patients .patients-card-list-wrap {
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 16px !important;
}
#patients .patients-card-list-head,
#patients .patient-project-row {
  display: grid !important;
  grid-template-columns: minmax(170px, 1.15fr) minmax(125px, .9fr) minmax(92px, .65fr) minmax(105px, .72fr) minmax(90px, .6fr) minmax(110px, .75fr) minmax(180px, 1.2fr) 72px;
  align-items: center;
  min-width: 1040px;
}
#patients .patients-card-list-head {
  min-height: 48px !important;
  padding: 0 14px !important;
  color: #78847f !important;
  border-bottom: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.035) !important;
  font-size: 11px; font-weight: 700; letter-spacing: .025em;
}
#patients .patients-card-list-head > label { display: flex; align-items: center; gap: 14px; }
#patients .patient-project-list {
  max-height: calc(100dvh - 325px);
  overflow: auto;
  scrollbar-color: rgba(104,231,142,.28) transparent;
}
#patients .patient-project-row {
  min-height: 62px;
  padding: 0 14px;
  color: #dfe6e2;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: transparent;
  transition: background-color .18s ease;
}
#patients .patient-project-row:last-child { border-bottom: 0; }
#patients .patient-project-row:hover { background: rgba(104,231,142,.045); }
#patients .patient-project-row > strong {
  overflow: hidden;
  padding-right: 14px;
  color: #dce4e0 !important;
  font-size: 12px; font-weight: 650;
  white-space: nowrap; text-overflow: ellipsis;
}
#patients .patient-project-name { display: flex; align-items: center; min-width: 0; gap: 12px; }
#patients .patient-project-name .patients-name-cell { display: flex; align-items: center; min-width: 0; gap: 9px; }
#patients .patient-project-name .patient-table-link {
  overflow: hidden; max-width: 105px; padding: 0;
  color: #f0f4f2 !important; border: 0; background: none;
  font-size: 13px; font-weight: 750; text-align: left; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
}
#patients .patient-project-name .patient-table-link:hover { color: #68e78e !important; }
#patients .patient-project-name .patient-avatar-icon { width: 30px !important; height: 30px !important; flex: 0 0 30px; }
#patients .patient-project-actions { display: flex; justify-content: flex-end; }
#patients .patient-project-actions .patients-row-action { height: 32px !important; padding: 0 11px !important; border-radius: 9px !important; }
#patients .patient-project-list .empty-state { margin: 18px; }

@media (max-width: 1200px) {
  #patients .patients-card-list-wrap { overflow-x: auto !important; }
  #patients .patient-project-list { overflow: visible; }
}

/* Doctor performance — unified date-range popover */
#billing:not(.expense-only) .performance-range-trigger {
  width: 330px !important;
  min-height: 48px !important;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 0 16px !important; border-radius: 12px !important;
}
#billing:not(.expense-only) .performance-range-trigger span { font-variant-numeric: tabular-nums; white-space: nowrap; }
#billing:not(.expense-only) .performance-range-trigger i { color: #0bb4cf; font-style: normal; }
.performance-range-popover .performance-range-heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  margin: -2px 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(244,248,246,.1);
}
.performance-range-popover .performance-range-heading > div { display: grid; gap: 4px; }
.performance-range-popover .performance-range-heading small { color: #68e78e; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.performance-range-popover .performance-range-heading b { color: #f2f6f4; font-size: 13px; font-variant-numeric: tabular-nums; }
.performance-range-popover .performance-range-heading > span { color: #88948f; font-size: 10px; }
.performance-range-popover .performance-calendar-grid button { position: relative; isolation: isolate; }
.performance-range-popover .performance-calendar-grid button.in-range::before,
.performance-range-popover .performance-calendar-grid button.range-start::before,
.performance-range-popover .performance-calendar-grid button.range-end::before {
  content: ""; position: absolute; z-index: -1; inset: 3px 0; background: rgba(104,231,142,.15);
}
.performance-range-popover .performance-calendar-grid button.range-start::before,
.performance-range-popover .performance-calendar-grid button.range-end::before { inset-inline: 3px; border-radius: 9px; background: #68e78e; }
.performance-range-popover .performance-calendar-grid button.range-start,
.performance-range-popover .performance-calendar-grid button.range-end { color: #07120b !important; font-weight: 850; }
.performance-range-popover > footer { display: flex; justify-content: space-between; }
.performance-range-popover > footer button.confirm {
  color: #07120b !important;
  border-color: #68e78e !important;
  background: #68e78e !important;
  box-shadow: 0 7px 20px rgba(104,231,142,.15) !important;
}

@media (max-width: 720px) {
  #billing:not(.expense-only) .performance-range-trigger { width: min(330px, calc(100vw - 80px)) !important; }
}

/* Medical-insurance city status dialog refresh.
   This override stays late in the cascade because the global dark skin
   otherwise leaves legacy white city tiles with light text. */
#medicalInsuranceCityStatusModal {
    background: rgba(0, 3, 3, .76) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

#medicalInsuranceCityStatusModal .medical-region-city-card {
    width: min(680px, calc(100vw - 32px));
    max-height: min(760px, calc(100dvh - 40px));
    border: 1px solid rgba(232, 241, 236, .18) !important;
    border-radius: 16px !important;
    color: #f3f7f5 !important;
    background: #101414 !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .07) !important;
}

#medicalInsuranceCityStatusModal .modal-head {
    min-height: 88px;
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(232, 241, 236, .11) !important;
    background: linear-gradient(110deg, rgba(104, 231, 142, .07), transparent 52%) !important;
}

#medicalInsuranceCityStatusModal .modal-head h2 {
    margin: 0 0 5px;
    color: #f5f8f6 !important;
    font-size: 18px;
    letter-spacing: -.015em;
}

#medicalInsuranceCityStatusModal .modal-head p {
    margin: 0;
    color: rgba(232, 240, 235, .58) !important;
    font-size: 12px;
}

#medicalInsuranceCityStatusModal .icon-btn {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(232, 241, 236, .10) !important;
    border-radius: 9px !important;
    color: rgba(240, 246, 242, .66) !important;
    background: rgba(255, 255, 255, .045) !important;
    box-shadow: none !important;
}

#medicalInsuranceCityStatusModal .icon-btn:hover {
    color: #fff !important;
    border-color: rgba(232, 241, 236, .22) !important;
    background: rgba(255, 255, 255, .08) !important;
}

#medicalInsuranceCityStatusModal .medical-region-city-loading {
    color: rgba(232, 240, 235, .62) !important;
}

#medicalInsuranceCityStatusModal .medical-region-city-list {
    display: grid;
    gap: 0;
    max-height: min(590px, calc(100dvh - 160px));
    margin: 14px 16px 16px;
    padding: 0;
    overflow: auto;
    border: 1px solid rgba(232, 241, 236, .10);
    border-radius: 12px;
    background: #0c0f0f;
    scrollbar-color: rgba(232, 241, 236, .24) transparent;
    scrollbar-width: thin;
}

#medicalInsuranceCityStatusModal .medical-region-city-list > button {
    min-height: 62px;
    padding: 11px 14px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(232, 241, 236, .075) !important;
    border-radius: 0 !important;
    color: #eaf0ec !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

#medicalInsuranceCityStatusModal .medical-region-city-list > button:last-child {
    border-bottom: 0 !important;
}

#medicalInsuranceCityStatusModal .medical-region-city-list > button:hover {
    border-color: rgba(232, 241, 236, .075) !important;
    background: rgba(104, 231, 142, .055) !important;
}

#medicalInsuranceCityStatusModal .medical-region-city-list > button:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid rgba(104, 231, 142, .72) !important;
    outline-offset: -2px !important;
}

#medicalInsuranceCityStatusModal .medical-region-city-list span strong {
    color: #f3f7f5 !important;
    font-size: 14px;
    font-weight: 760;
}

#medicalInsuranceCityStatusModal .medical-region-city-list span small {
    margin-top: 4px;
    color: rgba(232, 240, 235, .44) !important;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

#medicalInsuranceCityStatusModal .medical-region-city-list em {
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent !important;
    font-size: 11px;
    white-space: nowrap;
}

#medicalInsuranceCityStatusModal .medical-region-city-list em.maintained {
    color: #73e5a5 !important;
    border-color: rgba(104, 231, 142, .24) !important;
    background: rgba(104, 231, 142, .075) !important;
}

#medicalInsuranceCityStatusModal .medical-region-city-list em.pending {
    color: #f0b55f !important;
    border-color: rgba(240, 181, 95, .22) !important;
    background: rgba(240, 181, 95, .07) !important;
}

@media (max-width: 620px) {
    #medicalInsuranceCityStatusModal .medical-region-city-card {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 14px !important;
    }

    #medicalInsuranceCityStatusModal .modal-head { padding: 16px !important; }
    #medicalInsuranceCityStatusModal .medical-region-city-list { margin: 10px; }
    #medicalInsuranceCityStatusModal .medical-region-city-list > button { gap: 10px; padding-inline: 12px !important; }
    #medicalInsuranceCityStatusModal .medical-region-city-list em { max-width: 128px; white-space: normal; text-align: center; }
}

/* Dashboard drawer board — circular ClauseOS folder carousel. */
#dashboard .dashboard-drawer-board {
    min-height: 308px !important;
    padding: 14px 18px 12px !important;
}

#dashboard .dashboard-drawer-stage {
    position: relative !important;
    min-height: 258px !important;
    overflow: hidden !important;
    perspective: 1120px !important;
    perspective-origin: 50% 48% !important;
    background:
        radial-gradient(circle at 50% 46%, rgba(104, 231, 142, 0.045), transparent 28%),
        radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.028), transparent 52%) !important;
    box-shadow: none !important;
}

#dashboard .dashboard-drawer-ring {
    position: absolute !important;
    inset: 18px 96px 32px !important;
    width: auto !important;
    height: auto !important;
    transform-style: preserve-3d !important;
    transform: translateZ(-12px) !important;
    overflow: visible !important;
}

#dashboard .dashboard-drawer-card {
    position: absolute !important;
    top: 49% !important;
    left: 50% !important;
    width: var(--drawer-card-width) !important;
    height: var(--drawer-card-height) !important;
    margin: calc(var(--drawer-card-height) / -2) 0 0 calc(var(--drawer-card-width) / -2) !important;
    opacity: var(--drawer-opacity) !important;
    transform:
        translate3d(var(--drawer-x), var(--drawer-y), var(--drawer-z))
        rotateY(var(--drawer-rotate-y))
        rotateZ(var(--drawer-rotate-z))
        scale(var(--drawer-scale)) !important;
    transform-origin: 50% 88% !important;
    transform-style: preserve-3d !important;
    z-index: var(--drawer-order) !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transition: transform 230ms cubic-bezier(.22,.72,.24,1), opacity 220ms ease !important;
    will-change: transform, opacity;
}

#dashboard .dashboard-folder-back,
#dashboard .dashboard-folder-front,
#dashboard .dashboard-folder-paper,
#dashboard .dashboard-folder-refraction {
    position: absolute !important;
    display: block !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

/* Locked folder silhouette: straight ends with a restrained centre pinch,
   similar to a sheet flexing while a book is being flipped. */
#dashboard .dashboard-folder-back,
#dashboard .dashboard-folder-front,
#dashboard .dashboard-folder-paper,
#dashboard .dashboard-folder-refraction,
#dashboard .dashboard-drawer-card-shine {
    clip-path: polygon(
        0 0,
        100% 0,
        99.4% 34%,
        97.8% 50%,
        99.4% 66%,
        100% 100%,
        0 100%,
        .6% 66%,
        2.2% 50%,
        .6% 34%
    ) !important;
}

#dashboard .dashboard-folder-back {
    inset: 4px 3px 5px !important;
    border: 1px solid rgba(224, 235, 231, .22) !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, rgba(214, 226, 221, .11), rgba(144, 159, 153, .035)) !important;
    backdrop-filter: blur(5px) saturate(.8) !important;
}

#dashboard .dashboard-folder-paper {
    left: 11% !important;
    right: 8% !important;
    height: 62% !important;
    bottom: 15% !important;
    border: 1px solid rgba(239, 244, 242, .18) !important;
    border-radius: 10px 10px 5px 5px !important;
    background: linear-gradient(165deg, rgba(240, 245, 243, .15), rgba(190, 201, 197, .055)) !important;
}

#dashboard .dashboard-folder-paper.paper-one { transform: translate3d(-3px, -5px, 9px) rotate(-2deg) !important; }
#dashboard .dashboard-folder-paper.paper-two { transform: translate3d(4px, -1px, 16px) rotate(1.5deg) !important; }

#dashboard .dashboard-folder-front {
    inset: 37% 0 0 !important;
    border: 1px solid rgba(235, 243, 239, .26) !important;
    border-radius: 12px 12px 16px 16px !important;
    background: linear-gradient(145deg, rgba(229, 237, 234, .16), rgba(154, 168, 162, .065)) !important;
    backdrop-filter: blur(7px) saturate(.85) !important;
    transform: translateZ(22px) !important;
}

#dashboard .dashboard-folder-refraction {
    inset: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(118deg, rgba(255,255,255,.15), transparent 25%, transparent 72%, rgba(255,255,255,.035)) !important;
    transform: translateZ(25px) !important;
    pointer-events: none !important;
}

#dashboard .dashboard-drawer-card.current .dashboard-folder-back,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-back {
    border-color: rgba(104, 231, 142, .68) !important;
    background: linear-gradient(145deg, rgba(104, 231, 142, .58), rgba(45, 136, 80, .28)) !important;
    backdrop-filter: blur(8px) saturate(1.12) !important;
}

#dashboard .dashboard-drawer-card.current .dashboard-folder-paper,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-paper {
    border-color: rgba(182, 250, 201, .48) !important;
    background: linear-gradient(165deg, rgba(171, 247, 193, .42), rgba(104, 231, 142, .17)) !important;
}

#dashboard .dashboard-drawer-card.current .dashboard-folder-front,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-front {
    border-color: rgba(171, 247, 193, .78) !important;
    background: linear-gradient(145deg, rgba(104, 231, 142, .78), rgba(40, 144, 77, .48)) !important;
    backdrop-filter: blur(10px) saturate(1.18) !important;
}

#dashboard .dashboard-folder-copy,
#dashboard .dashboard-drawer-card.current .dashboard-folder-copy,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy {
    position: absolute !important;
    inset: 40% 10px 8px !important;
    width: auto !important;
    min-height: 0 !important;
    padding: 9px 10px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 8px !important;
    align-content: center !important;
    color: rgba(240, 245, 242, .74) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: .7 !important;
    transform: translateZ(34px) !important;
    backdrop-filter: none !important;
}

#dashboard .dashboard-drawer-card.current .dashboard-folder-copy,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy { color: #07150b !important; opacity: 1 !important; }
#dashboard .dashboard-folder-copy .avatar { grid-row: 1 / 3 !important; width: 30px !important; height: 30px !important; align-self: center !important; }
#dashboard .dashboard-folder-copy strong { grid-column: 2 !important; font-size: 13px !important; line-height: 1.1 !important; color: inherit !important; }
#dashboard .dashboard-folder-copy small { grid-column: 2 !important; font-size: 9px !important; line-height: 1.2 !important; color: inherit !important; opacity: .68 !important; }
#dashboard .dashboard-folder-copy > span:not(.avatar) { grid-column: 1 / -1 !important; margin-top: 4px !important; font-size: 9px !important; color: inherit !important; }
#dashboard .dashboard-folder-copy b { display: none !important; }

#dashboard .dashboard-drawer-position {
    left: 50% !important;
    bottom: 12px !important;
    z-index: 1200 !important;
    transform: translateX(-50%) !important;
    color: rgba(238, 244, 241, .7) !important;
}

/* Centre the previous/next controls as one compact group above the folder rail. */
#dashboard .dashboard-drawer-nav {
    top: 28px !important;
    right: auto !important;
}

#dashboard .dashboard-drawer-nav.previous {
    left: calc(50% - 52px) !important;
}

#dashboard .dashboard-drawer-nav.next {
    left: calc(50% + 8px) !important;
}

#dashboard .dashboard-drawer-last-visit {
    position: absolute;
    /* Keep the summary in the stage's fixed left safety lane. This must not
       scale with the rail width, otherwise wide layouts push it over folder 1. */
    left: 36px !important;
    top: 30px;
    z-index: 1300;
    width: 190px;
    padding: 14px 15px;
    color: #eaf2ed;
    text-align: left;
    background: linear-gradient(135deg, rgba(238, 245, 241, .18), rgba(104, 231, 142, .10));
    border: 1px solid rgba(231, 241, 236, .26);
    border-radius: 14px;
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
    pointer-events: none;
    animation: dashboardLastVisitIn 220ms cubic-bezier(.22,.72,.24,1) both;
}
#dashboard .dashboard-drawer-last-visit small { display:block; color:#68e78e; font-size:10px; letter-spacing:.08em; }
#dashboard .dashboard-drawer-last-visit strong { display:block; margin-top:4px; font-size:13px; }
#dashboard .dashboard-drawer-last-visit p { display:-webkit-box; margin:8px 0 6px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:3; color:rgba(235,242,238,.76); font-size:11px; line-height:1.45; }
#dashboard .dashboard-drawer-last-visit span { color:rgba(235,242,238,.52); font-size:10px; }
#dashboard .dashboard-drawer-last-visit.is-empty { opacity:.72; }

@keyframes dashboardLastVisitIn {
    from { opacity:0; transform:translate3d(-10px, 5px, 0) scale(.97); }
    to { opacity:1; transform:translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 900px) {
    #dashboard .dashboard-drawer-board { min-height: 292px !important; padding-inline: 10px !important; }
    #dashboard .dashboard-drawer-stage { min-height: 250px !important; }
    #dashboard .dashboard-drawer-ring { inset-inline: 32px !important; }
    #dashboard .dashboard-drawer-last-visit { left: 24px !important; top: 48px; width: 166px; }
}

@media (prefers-reduced-motion: reduce) {
    #dashboard .dashboard-drawer-card,
    #dashboard .dashboard-drawer-last-visit { transition: none !important; animation: none !important; }
}

/* Settings workspace refresh (2026-08)
   A compact, high-contrast admin surface. Kept at the end of the cascade so
   legacy light-theme rules cannot reintroduce white tiles inside dark forms. */
#system.view.active {
  --settings-accent: #2bd982;
  --settings-canvas: #070909;
  --settings-surface: #111414;
  --settings-surface-raised: #171b1a;
  --settings-line: rgba(238, 246, 241, .12);
  --settings-line-strong: rgba(238, 246, 241, .20);
  --settings-text: #f3f7f4;
  --settings-muted: rgba(231, 239, 234, .62);
  background: var(--settings-canvas) !important;
}

#system .settings-console {
  min-height: calc(100dvh - 72px);
  border: 0 !important;
  background: var(--settings-canvas) !important;
}

#system .settings-category-cards {
  gap: 14px;
  padding: 18px 22px 0;
}

#system .settings-category-card {
  min-height: 104px;
  padding: 18px 20px !important;
  border-color: var(--settings-line) !important;
  border-radius: 14px !important;
  background: var(--settings-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

#system .settings-category-card::before,
#system .settings-category-card::after {
  display: none !important;
}

#system .settings-category-card:hover {
  border-color: var(--settings-line-strong) !important;
  background: var(--settings-surface-raised) !important;
}

#system .settings-category-card.active {
  border-color: rgba(43, 217, 130, .44) !important;
  background: linear-gradient(110deg, rgba(43, 217, 130, .10), var(--settings-surface) 46%) !important;
  box-shadow: inset 3px 0 var(--settings-accent) !important;
}

#system .settings-category-card span {
  color: var(--settings-accent) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

#system .settings-category-card strong {
  font-size: 20px !important;
  letter-spacing: -.02em;
}

#system .settings-category-card small {
  color: var(--settings-muted) !important;
  font-size: 13px !important;
}

#system .settings-layout {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 22px 24px;
  background: transparent !important;
}

#system .settings-menu {
  position: sticky;
  top: 14px;
  align-self: start;
  max-height: calc(100dvh - 108px);
  overflow: auto;
  padding: 10px !important;
  border-color: var(--settings-line) !important;
  border-radius: 14px !important;
  background: #0d1010 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

#system .settings-menu-title {
  min-height: 40px;
  padding: 0 10px !important;
  color: var(--settings-muted) !important;
  font-size: 12px !important;
  letter-spacing: .04em;
}

#system .settings-submenu {
  gap: 3px !important;
  padding: 2px 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#system .settings-submenu button {
  position: relative;
  min-height: 42px;
  padding: 0 12px 0 14px !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: rgba(238, 244, 240, .72) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
}

#system .settings-submenu button:hover {
  color: var(--settings-text) !important;
  background: rgba(255, 255, 255, .05) !important;
}

#system .settings-submenu button.active {
  color: #fff !important;
  background: rgba(43, 217, 130, .10) !important;
  box-shadow: inset 2px 0 var(--settings-accent) !important;
}

#system .settings-submenu-label {
  margin: 8px 12px 4px;
  color: rgba(231, 239, 234, .42) !important;
  font-size: 11px;
  letter-spacing: .06em;
}

#system .settings-content {
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#system .settings-card-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

#system .settings-content .system-panel,
#system .settings-content .settings-glow-card {
  min-height: 0;
  padding: 20px !important;
  border: 1px solid var(--settings-line) !important;
  border-radius: 14px !important;
  background: var(--settings-surface) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

#system .settings-content .settings-glow-card::before {
  display: none !important;
}

#system [data-settings-panel="people-admin"] .permission-admin-tabs {
  width: 100%;
  margin-bottom: 18px;
  padding: 4px;
  border-color: var(--settings-line) !important;
  border-radius: 11px !important;
  background: #0b0e0e !important;
  box-shadow: none !important;
}

#system [data-settings-panel="people-admin"] .permission-admin-tabs button {
  height: 42px;
  border: 0 !important;
  border-radius: 8px;
  color: var(--settings-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#system [data-settings-panel="people-admin"] .permission-admin-tabs button:is(:hover, .active) {
  color: #fff !important;
  border: 0 !important;
  background: var(--settings-surface-raised) !important;
  box-shadow: inset 0 -2px var(--settings-accent) !important;
}

#system #roleAdminView .permission-form {
  gap: 18px;
  padding: 18px !important;
  border-color: var(--settings-line) !important;
  border-radius: 12px !important;
  background: #0d1010 !important;
  box-shadow: none !important;
}

#system #roleAdminView .permission-form > label:first-of-type {
  max-width: 520px;
}

#system .permission-form input:not([type="checkbox"]),
#system .permission-form select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--settings-line-strong) !important;
  border-radius: 9px !important;
  color: var(--settings-text) !important;
  background: #171a1a !important;
  box-shadow: none !important;
}

#system .permission-form input:not([type="checkbox"]):focus,
#system .permission-form select:focus {
  outline: none;
  border-color: rgba(43, 217, 130, .64) !important;
  box-shadow: 0 0 0 3px rgba(43, 217, 130, .10) !important;
}

#system .permission-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#system .permission-check-group {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--settings-line) !important;
  border-radius: 11px;
  background: #121515 !important;
}

#system .permission-check-group > strong {
  padding: 2px 4px 10px;
  color: rgba(242, 247, 244, .84) !important;
  font-size: 13px;
}

#system .permission-check-grid .permission-check-group label {
  display: flex;
  min-height: 38px;
  padding: 7px 9px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: rgba(238, 244, 240, .72) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#system .permission-check-grid .permission-check-group label:hover {
  color: #fff !important;
  border-color: var(--settings-line) !important;
  background: rgba(255, 255, 255, .04) !important;
}

#system .permission-check-grid input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: var(--settings-accent);
}

#system .permission-form .system-actions {
  margin: 0;
  padding-top: 2px;
}

#system .permission-form .primary-btn {
  border-color: var(--settings-accent) !important;
  background: var(--settings-accent) !important;
  color: #07150e !important;
  box-shadow: none !important;
}

#system .permission-form .light-btn {
  border-color: var(--settings-line-strong) !important;
  background: rgba(255, 255, 255, .04) !important;
  color: var(--settings-text) !important;
}

#system :where(button, .primary-btn, .light-btn):active {
  transform: translateY(1px) !important;
}

@media (max-width: 1100px) {
  #system .settings-layout { grid-template-columns: 190px minmax(0, 1fr); }
  #system .permission-check-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  #system .settings-category-cards { grid-template-columns: 1fr; padding: 12px 12px 0; }
  #system .settings-category-card { min-height: 94px; }
  #system .settings-layout { grid-template-columns: 1fr; padding: 12px; }
  #system .settings-menu { position: static; max-height: none; }
  #system .settings-content .system-panel,
  #system .settings-content .settings-glow-card { padding: 14px !important; }
  #system .permission-admin-tabs button { padding-inline: 5px !important; font-size: 12px !important; }
}

/* Patient refund modal size override, kept after shared modal rules. */
.performance-modal.patient-refund-modal .patient-refund-card {
  width: min(1120px, calc(100vw - 72px));
  min-height: min(720px, calc(100vh - 72px));
  max-height: calc(100vh - 48px);
}

.performance-modal.patient-refund-modal .patient-refund-body {
  grid-template-columns: minmax(420px, 1fr) minmax(460px, 1.05fr);
  min-height: 540px;
  align-items: stretch;
}

.performance-modal.patient-refund-modal .patient-refund-bill-list,
.performance-modal.patient-refund-modal .patient-refund-form-card {
  min-height: 100%;
}

.performance-modal.patient-refund-modal .patient-refund-bill-card {
  min-height: 92px;
  padding: 16px 18px;
}

.performance-modal.patient-refund-modal .patient-refund-form-card {
  padding: 22px;
}

@media (max-width: 900px) {
  .performance-modal.patient-refund-modal .patient-refund-card {
    width: calc(100vw - 24px);
    min-height: auto;
    max-height: calc(100dvh - 24px);
  }

  .performance-modal.patient-refund-modal .patient-refund-body {
    grid-template-columns: 1fr;
    min-height: auto;
  }
}

/* Inventory batch cost accounting */
.inventory-batch-panel,
.inventory-adjustment-ledger {
  margin-top: 18px;
  border: 1px solid #cfe3ea;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.inventory-batch-panel .tax-panel-head,
.inventory-adjustment-toolbar {
  padding: 16px 18px;
  border-bottom: 1px solid #dbe9ee;
  background: #f8fbfc;
}
.inventory-batch-panel h3 { margin: 0 0 4px; color: #17243a; }
.inventory-batch-panel p { margin: 0; color: #718096; }
.inventory-module-table td small { display: block; margin-top: 4px; color: #7a899b; }
.inventory-batch-state {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid #d5e4e9;
  border-radius: 6px;
  color: #607080;
  background: #f7fafb;
  white-space: nowrap;
}
.inventory-batch-state.current { border-color: #10acc4; color: #007f96; background: #eafafd; }
.inventory-batch-state.backup { border-color: #9dcad5; color: #486978; background: #f1f8fa; }
.inventory-batch-state.depleted { color: #8c98a6; background: #f4f5f6; }
.inventory-adjustment-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.inventory-adjustment-toolbar label { display: grid; gap: 6px; color: #526579; font-weight: 700; }
.inventory-adjustment-toolbar input { min-height: 38px; border: 1px solid #c9dbe2; border-radius: 8px; padding: 0 10px; }
.inventory-adjustment-kpis,
.tax-inventory-adjustment-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #dce9ed;
  border-bottom: 1px solid #dce9ed;
}
.inventory-adjustment-kpis article,
.tax-inventory-adjustment-kpis article { padding: 14px 18px; background: #fff; }
.inventory-adjustment-kpis span,
.tax-inventory-adjustment-kpis span { display: block; margin-bottom: 5px; color: #708094; font-size: 13px; }
.inventory-adjustment-kpis strong,
.tax-inventory-adjustment-kpis b { color: #17243a; font-size: 20px; }
.negative { color: #d94747 !important; }
.positive { color: #0a9a7b !important; }
.inventory-cost-switch-card,
.inventory-adjustment-detail-card { width: min(760px, calc(100vw - 32px)); }
.inventory-cost-switch-list { display: grid; gap: 10px; padding: 18px; }
.inventory-cost-switch-list article { padding: 15px; border: 1px solid #cfe3ea; border-radius: 10px; background: #f8fbfc; }
.inventory-cost-switch-list article > strong { color: #17243a; font-size: 17px; }
.inventory-cost-switch-list p { margin: 7px 0 12px; color: #53677b; line-height: 1.6; }
.inventory-cost-switch-list article div { display: flex; flex-wrap: wrap; gap: 16px; color: #32485d; font-weight: 700; }
.inventory-cost-switch-card footer,
.inventory-adjustment-detail-card footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid #dbe9ee; }
.inventory-adjustment-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 18px; }
.inventory-adjustment-detail-grid div { padding: 12px; border: 1px solid #d5e4e9; border-radius: 8px; }
.inventory-adjustment-detail-grid span { display: block; margin-bottom: 5px; color: #7a899b; font-size: 12px; }
.inventory-adjustment-detail-grid strong { color: #17243a; }
.inventory-overview-card { display: flex; min-height: 190px; padding: 28px 30px; flex-direction: column; justify-content: center; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.inventory-overview-card h2 { margin: 0 0 10px; font-size: 20px; }
.inventory-overview-card .stock-number { font-size: 36px; line-height: 1.15; }
.inventory-overview-card p { margin: 9px 0 0; color: #53677b; line-height: 1.5; }
.inventory-overview-card:hover,
.inventory-overview-card:focus-visible { border-color: rgba(8,169,198,.42); box-shadow: 0 18px 44px rgba(20,52,74,.13), 0 0 0 3px rgba(8,169,198,.08); transform: translateY(-2px); outline: none; }
.inventory-overview-card.has-warning { border-color: rgba(232,146,54,.42); background: linear-gradient(145deg,#fff,#fffaf2); }
.inventory-overview-modal-card { width: min(1480px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; }
.inventory-overview-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: #dce9ed; border-bottom: 1px solid #dce9ed; }
.inventory-overview-summary article { padding: 14px 18px; background: #f9fcfd; }
.inventory-overview-summary span { display: block; margin-bottom: 5px; color: #708094; font-size: 13px; }
.inventory-overview-summary strong { color: #17243a; font-size: 20px; }
.inventory-overview-table-wrap { margin: 16px; max-height: calc(100dvh - 294px); overflow-x: hidden; overflow-y: auto; }
.inventory-overview-table-wrap table { width: 100%; min-width: 0; table-layout: fixed; }
.inventory-overview-table-wrap th,
.inventory-overview-table-wrap td { padding: 13px 9px; overflow-wrap: anywhere; word-break: break-word; vertical-align: middle; }
.inventory-overview-table-wrap th { font-size: 13px; white-space: normal; }
.inventory-overview-table-wrap td { font-size: 13px; line-height: 1.45; }
.inventory-overview-table-wrap th:nth-child(1) { width: 16%; }
.inventory-overview-table-wrap th:nth-child(2) { width: 11%; }
.inventory-overview-table-wrap th:nth-child(3) { width: 15%; }
.inventory-overview-table-wrap th:nth-child(4) { width: 10%; }
.inventory-overview-table-wrap th:nth-child(5) { width: 12%; }
.inventory-overview-table-wrap th:nth-child(6) { width: 13%; }
.inventory-overview-table-wrap th:nth-child(7) { width: 11%; }
.inventory-overview-table-wrap th:nth-child(8) { width: 12%; }
.inventory-overview-table-wrap .status { justify-content: center; min-width: 0; max-width: 100%; padding-inline: 7px; white-space: normal; text-align: center; }
.inventory-overview-modal-card footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid #dbe9ee; color: #708094; font-size: 13px; }
.inventory-reversal-reason { display: grid; gap: 7px; margin: 0 18px 18px; color: #26394c; font-weight: 700; }
.inventory-reversal-reason textarea { border: 1px solid #c9dbe2; border-radius: 8px; padding: 10px; resize: vertical; }
.tax-inventory-adjustment-panel { overflow: hidden; }
.tax-inventory-adjustment-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tax-inventory-adjustment-panel .dense-table-wrap { border-top: 1px solid #dce9ed; }
.inbound-form-table select[data-inbound-field="chargeProjectId"] { min-width: 170px; }

@media (max-width: 1100px) {
  .tax-inventory-adjustment-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .inventory-adjustment-kpis,
  .tax-inventory-adjustment-kpis,
  .inventory-adjustment-detail-grid { grid-template-columns: 1fr; }
  .inventory-adjustment-toolbar { align-items: stretch; flex-direction: column; }
  .inventory-overview-summary { grid-template-columns: 1fr; }
  .inventory-overview-modal-card footer { align-items: stretch; flex-direction: column; }
  .inventory-overview-card { min-height: 150px; padding: 22px; }
  .inventory-overview-table-wrap { overflow-x: auto; }
  .inventory-overview-table-wrap table { min-width: 900px; table-layout: auto; }
}

/* Patient center — compact unified date-range picker */
#patients .patients-querybar {
  overflow: visible !important;
  align-items: center !important;
}
#patients .patients-querybar > label:first-child { flex: 1 1 280px !important; min-width: 190px; }
#patients .patient-date-range { position: relative; flex: 0 1 360px; min-width: 280px; }
#patients .patient-date-range-trigger {
  width: 100%; height: 40px; padding: 0 14px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  color: #e8eeeb; text-align: left; border: 1px solid rgba(255,255,255,.13); border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: inset 0 1px rgba(255,255,255,.06); cursor: pointer;
}
#patients .patient-date-range-trigger span { color: #7f8a86; font-size: 12px; letter-spacing: .03em; }
#patients .patient-date-range-trigger strong { overflow: hidden; font-size: 13px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; }
#patients .patient-date-range-trigger i { color: #68e78e; font-style: normal; transition: transform .2s ease; }
#patients .patient-date-range-trigger[aria-expanded="true"] { border-color: rgba(104,231,142,.52); }
#patients .patient-date-range-trigger[aria-expanded="true"] i { transform: rotate(180deg); }
#patients .patient-date-range-popover {
  position: absolute; z-index: 180; top: calc(100% + 10px); left: 0; width: 370px; padding: 14px;
  color: #edf2ef; border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  background: linear-gradient(145deg, rgba(25,30,29,.97), rgba(8,12,11,.98));
  box-shadow: 0 22px 55px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(24px) saturate(125%);
}
#patients .patient-date-range-popover header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#patients .patient-date-range-popover header > div { display: grid; gap: 2px; }
#patients .patient-date-range-popover header span { color: #68e78e; font-size: 9px; font-weight: 750; letter-spacing: .16em; }
#patients .patient-date-range-popover header strong { font-size: 16px; }
#patients .patient-date-range-popover nav { display: flex; gap: 5px; }
#patients .patient-date-range-popover nav button,
#patients .patient-date-range-popover footer button {
  min-width: 34px; height: 32px; padding: 0 9px; color: #dfe7e3;
  border: 1px solid rgba(255,255,255,.11); border-radius: 9px; background: rgba(255,255,255,.055); cursor: pointer;
}
#patients .patient-date-range-weekdays,
#patients .patient-date-range-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
#patients .patient-date-range-weekdays { margin-bottom: 5px; color: #737e79; font-size: 10px; text-align: center; }
#patients .patient-date-range-day {
  position: relative; isolation: isolate; height: 40px; padding: 0; color: #dbe3df; border: 0; background: transparent; cursor: pointer;
}
#patients .patient-date-range-day::before { content: ""; position: absolute; z-index: -1; inset: 4px 0; background: transparent; }
#patients .patient-date-range-day:hover::before { inset-inline: 4px; border-radius: 10px; background: rgba(255,255,255,.08); }
#patients .patient-date-range-day.outside { color: #505a56; }
#patients .patient-date-range-day.today { color: #68e78e; font-weight: 800; }
#patients .patient-date-range-day.in-range::before { background: rgba(104,231,142,.14); }
#patients .patient-date-range-day.range-start::before,
#patients .patient-date-range-day.range-end::before { inset-inline: 4px; border-radius: 10px; background: #68e78e; box-shadow: 0 5px 18px rgba(104,231,142,.18); }
#patients .patient-date-range-day.range-start,
#patients .patient-date-range-day.range-end { color: #07120b; font-weight: 850; }
#patients .patient-date-range-popover footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 10px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.08); }
#patients .patient-date-range-popover footer span { color: #87928d; font-size: 11px; text-align: center; }
#patients #patientDateRangeDone { color: #07120b; border-color: #68e78e; background: #68e78e; font-weight: 750; }

@media (max-width: 900px) {
  #patients .patient-date-range { flex: 1 1 100%; }
  #patients .patient-date-range-popover { width: min(370px, calc(100vw - 40px)); }
}

/* Grouped wage summaries keep every cost component visible while preserving the existing table language. */
#wageSettlement .wage-group-table { min-width: 1780px; }
#wageSettlement .wage-group-table tbody td:nth-child(2) { color: #172235; font-weight: 800; }
#wageSettlement .wage-group-table .wage-total-cost { background: rgba(10, 169, 199, .07); color: #087f98; }
#wageSettlement .wage-group-table tfoot .wage-total-cost { background: #dff3f6; }

/* Salary editor card and custom month picker. */
.salary-modal{padding:clamp(14px,3vw,34px);background:rgba(25,43,61,.52);backdrop-filter:blur(12px)}
.salary-modal-card{position:relative;overflow:visible;width:min(780px,calc(100vw - 28px));max-height:calc(100dvh - 28px);border:1px solid rgba(8,169,198,.26);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(241,249,252,.98));box-shadow:0 30px 84px rgba(19,48,70,.32),inset 0 1px 0 #fff}
.salary-modal-card>header{padding:20px 24px;border-bottom-color:rgba(167,195,211,.3);border-radius:20px 20px 0 0;background:linear-gradient(110deg,rgba(223,248,252,.96),rgba(244,248,255,.96))}
.salary-modal-kicker{display:block;margin-bottom:5px;color:#0799b6;font-size:11px;font-weight:900;letter-spacing:.12em}.salary-modal-card header h2{color:#1d344b;font-size:21px;font-weight:900}.salary-modal-card header p{color:#73869a;font-size:13px}
.salary-modal-card header>button{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#e6f5f9;color:#647b8e;cursor:pointer}.salary-modal-card nav{gap:8px;padding:8px 20px 0;border-bottom-color:rgba(184,205,216,.36);background:rgba(255,255,255,.62)}
.salary-modal-card nav button{min-height:46px;border-bottom-width:2px;border-radius:9px 9px 0 0;padding:0 16px;color:#6b7e91;font:inherit;font-weight:800;cursor:pointer}.salary-modal-card nav button:hover{background:#eff9fb;color:#078da8}.salary-modal-card nav button.active{border-bottom-color:#08a9c6;color:#078da8}
.salary-modal-body{gap:16px;padding:22px 24px 24px}.salary-modal-body label{position:relative;gap:8px;color:#42566a;font-size:13px;font-weight:800}.salary-modal-body input,.salary-modal-body textarea{min-height:46px;border-color:rgba(157,184,200,.46);border-radius:11px;background:rgba(255,255,255,.94);color:#243b52}.salary-modal-body input:focus,.salary-modal-body textarea:focus{outline:0;border-color:#35b7cd;box-shadow:0 0 0 4px rgba(8,169,198,.1)}.salary-modal-body textarea{min-height:104px;padding:12px}
.salary-modal-card>footer{gap:10px;padding:16px 24px 20px;border-top-color:rgba(177,201,214,.34);border-radius:0 0 20px 20px;background:rgba(249,252,253,.92)}.salary-modal-card>footer button{min-width:112px;min-height:42px;border-radius:10px}.salary-modal-card>footer .primary-btn{border-color:#079fbd;background:linear-gradient(135deg,#0bb4cf,#078db7);color:#fff;box-shadow:0 8px 20px rgba(7,157,189,.2)}
.salary-month-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;padding:0 13px;border:1px solid rgba(157,184,200,.46);border-radius:11px;background:#fff;color:#243b52;font:inherit;font-weight:760;cursor:pointer}.salary-month-trigger:hover,.salary-month-trigger[aria-expanded=true]{border-color:#35b7cd;box-shadow:0 0 0 4px rgba(8,169,198,.1)}.salary-month-trigger i{color:#0799b6;font-style:normal}
.salary-month-popover{position:absolute;z-index:20;top:calc(100% + 8px);right:0;width:min(330px,calc(100vw - 52px));padding:15px;border:1px solid rgba(111,176,194,.3);border-radius:15px;background:#fff;box-shadow:0 22px 58px rgba(35,74,98,.24)}.salary-month-popover>header{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;padding:0;border:0;background:transparent}.salary-month-popover>header strong{color:#263e55;text-align:center}.salary-month-popover>header button{width:36px;height:36px;border:0;border-radius:9px;background:#eef8fa;color:#168da5;font-size:22px;cursor:pointer}
.salary-month-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}.salary-month-grid button{min-height:42px;border:0;border-radius:9px;background:#f6f9fb;color:#3c5368;font:inherit;font-weight:750;cursor:pointer}.salary-month-grid button:hover{background:#e8f8fb;color:#078da8}.salary-month-grid button.current{box-shadow:inset 0 0 0 1px #69cbdc;color:#078da8}.salary-month-grid button.selected{background:linear-gradient(135deg,#0bb4cf,#078db7);color:#fff;box-shadow:0 6px 15px rgba(7,157,189,.22)}
.salary-month-popover>footer{display:flex;align-items:center;justify-content:space-between;margin-top:13px;padding:13px 0 0;border-top:1px solid #e2edf1}.salary-month-popover>footer div{display:flex;gap:7px}.salary-month-popover>footer button{min-height:35px;padding:0 12px;border:1px solid #c8e2e8;border-radius:8px;background:#fff;color:#078ba5;font:inherit;font-weight:750;cursor:pointer}.salary-month-popover>footer button.confirm{border-color:#079fbd;background:#08a9c6;color:#fff}
@media(max-width:700px){.salary-modal-card{overflow:auto}.salary-modal-body{padding:18px}.salary-month-popover{position:fixed;top:50%;right:auto;left:50%;transform:translate(-50%,-50%)}}

/* Tax center follows the shared system card theme. */
.tax-center{color:var(--ink)}
.tax-toolbar,.tax-summary article,.tax-panel{background:var(--system-card-bg,var(--panel));border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.tax-toolbar p,.tax-summary span,.tax-panel-head span,.tax-breakdown span{color:var(--muted)}
.tax-eyebrow{color:var(--primary)!important}
.tax-actions input,.tax-actions select{height:40px;padding:0 11px;color:var(--ink);background:var(--system-card-bg,var(--panel));border:1px solid var(--line);border-radius:8px;font:inherit}
.tax-breakdown{background:var(--line)}
.tax-breakdown div{background:var(--system-card-bg,var(--panel))}
.tax-center .visit-table th,.tax-center .visit-table td{background:var(--system-card-bg,var(--panel));color:var(--ink);border-color:var(--line)}
.tax-toolbar{padding-top:32px}.tax-native-select-hidden{display:none!important}.tax-custom-select{position:relative;min-width:180px}.tax-custom-select.hidden{display:none}.tax-custom-select-button{width:100%;height:40px;padding:0 38px 0 12px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--system-card-bg,var(--panel));color:var(--ink);font:inherit;text-align:left;text-overflow:ellipsis;white-space:nowrap}.tax-custom-select-button::after{position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;content:"";transform:translateY(-70%) rotate(45deg)}.tax-custom-select-button:disabled{cursor:not-allowed;opacity:.55}.tax-custom-select-menu{position:absolute;z-index:1200;top:calc(100% + 12px);left:0;width:100%;max-height:88px;overflow-y:auto;padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--system-card-bg,var(--panel));box-shadow:0 12px 28px rgba(25,41,61,.18)}.tax-custom-select-menu.hidden{display:none}.tax-custom-select-menu button{display:block;width:100%;height:38px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:var(--ink);font:inherit;text-align:left;white-space:nowrap}.tax-custom-select-menu button:hover,.tax-custom-select-menu button.selected{background:color-mix(in srgb,var(--primary) 12%,white);color:var(--primary);font-weight:700}
.tax-input-invalid{border-color:#dc2626!important;background:#fff1f2!important}.tax-cost-error{margin:12px 0 0;color:#dc2626;font-weight:700}.tax-cost-error.hidden{display:none}
.tax-period-tip{margin:-12px 0 14px;padding:10px 12px;border-left:3px solid var(--primary);background:color-mix(in srgb,var(--primary) 8%,white);color:var(--ink);font-size:13px}.tax-actions #taxQuarterRange{min-width:190px;font-weight:700}
.tax-income-summary{grid-template-columns:repeat(5,minmax(0,1fr))}.tax-income-summary article{min-height:108px}.tax-income-summary small{display:block;min-height:18px;margin-top:4px;color:var(--muted);font-size:11px}.tax-payable-summary{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0;margin-bottom:14px}.tax-payable-summary article{min-height:96px}
.tax-rule-panel{margin:0 0 14px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--system-card-bg,var(--panel));box-shadow:var(--shadow)}.tax-rule-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.tax-rule-head span,.tax-rule-grid article>span,.tax-rule-grid div span{color:var(--muted);font-size:13px}.tax-rule-head strong{color:var(--primary)}.tax-rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tax-rule-grid article{display:flex;gap:16px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:10px}.tax-rule-grid article>span{min-width:82px}.tax-rule-grid div{display:grid;gap:4px}.tax-rule-grid div strong{font-size:17px}.tax-rule-grid div span{line-height:1.5}@media(max-width:760px){.tax-rule-grid{grid-template-columns:1fr}.tax-rule-head{align-items:flex-start;flex-direction:column;gap:5px}}
@media(max-width:1200px){.tax-income-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.tax-income-summary,.tax-payable-summary{grid-template-columns:1fr}}
.tax-refresh-hint{margin:-12px 0 14px;padding:9px 12px;border-left:3px solid var(--orange);background:#fff7ed;color:#9a5412}.tax-refresh-hint.hidden{display:none}
.tax-cost-panel{margin-bottom:14px}.tax-panel-head p{margin:5px 0 0;color:var(--muted);font-size:13px}.tax-cost-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.tax-cost-grid label{display:grid;gap:7px;color:var(--muted);font-size:13px}.tax-cost-grid input{width:100%;height:40px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:var(--system-card-bg,var(--panel));color:var(--ink);font:inherit}.tax-cost-grid input:focus{outline:2px solid color-mix(in srgb,var(--primary) 24%,transparent);border-color:var(--primary)}.tax-cost-grid input[readonly]{background:var(--bg);font-weight:700}.tax-cost-panel .tax-panel-head strong{color:var(--primary);font-size:18px}
@media(max-width:1100px){.tax-cost-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tax-actions{align-items:stretch}.tax-actions input,.tax-actions select{min-width:160px}}
@media(max-width:620px){.tax-cost-grid{grid-template-columns:1fr}}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

.brand,
.nav,
.system-title,
.module-btn,
.sub-tabs,
.schedule-tabs,
.booking-side-tabs,
.patient-center-menu,
.patient-center-list-tabs,
.patient-detail-tabs,
.patient-charge-tabs,
.charge-tabs,
.quick-phrase-tabs,
.panel-head {
  -webkit-user-select: none;
  user-select: none;
}

.brand *,
.nav *,
.system-title *,
.module-btn *,
.sub-tabs *,
.schedule-tabs *,
.booking-side-tabs *,
.patient-center-menu *,
.patient-center-list-tabs *,
.patient-detail-tabs *,
.patient-charge-tabs *,
.charge-tabs *,
.quick-phrase-tabs *,
.panel-head * {
  -webkit-user-select: none;
  user-select: none;
}

.brand ::selection,
.nav ::selection,
.system-title ::selection,
.module-btn ::selection,
.sub-tabs ::selection,
.schedule-tabs ::selection,
.booking-side-tabs ::selection,
.patient-center-menu ::selection,
.patient-center-list-tabs ::selection,
.patient-detail-tabs ::selection,
.patient-charge-tabs ::selection,
.charge-tabs ::selection,
.quick-phrase-tabs ::selection,
.panel-head ::selection {
  color: inherit;
  background: transparent !important;
}

.topbar {
  background: #fff !important;
}

.view-title-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.topbar .system-title,
.topbar .system-title h1,
.panel-head,
.panel-head h1,
.panel-head h2,
.panel-head p {
  background: transparent !important;
  background-color: transparent !important;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

.topbar input,
.topbar textarea,
.topbar select,
.patients-querybar input {
  -webkit-user-select: text !important;
  user-select: text !important;
  pointer-events: auto;
}

.icon-sprite {
  display: none;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 22px 18px;
  background: #101b2b;
  color: #fff;
}

.tax-sidebar-entry{width:auto;text-align:left;cursor:pointer;color:inherit;font:inherit}.tax-sidebar-entry strong{color:#67e8f9}.tax-center{color:#d9e2f2}.tax-toolbar{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:22px;padding:24px;border:1px solid #263453;border-radius:16px;background:#10182d}.tax-toolbar h2{margin:3px 0 7px;font-size:28px}.tax-toolbar p{margin:0;color:#91a0bb}.tax-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#38bdf8!important}.tax-actions{display:flex;gap:10px;align-items:center}.tax-actions input{height:40px;padding:0 12px;color:#dbeafe;background:#0b1224;border:1px solid #334365;border-radius:8px}.tax-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}.tax-summary article,.tax-panel{border:1px solid #263453;border-radius:14px;background:#10182d}.tax-summary article{padding:18px}.tax-summary span{display:block;color:#91a0bb;font-size:13px}.tax-summary b{display:block;margin-top:10px;font-size:24px}.tax-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;margin-bottom:14px}.tax-panel{padding:18px}.tax-panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.tax-panel-head h3{margin:0}.tax-panel-head span{color:#91a0bb}.tax-breakdown{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#263453}.tax-breakdown div{display:flex;justify-content:space-between;padding:12px;background:#10182d}.tax-breakdown span{color:#91a0bb}.tax-risk{margin:0 0 8px;padding:11px 12px;border-left:3px solid #ef4444;background:#2a1420;color:#fecaca}.tax-center .visit-table th,.tax-center .visit-table td{background:#10182d;color:#d9e2f2;border-color:#263453}@media(max-width:900px){.tax-toolbar{align-items:stretch;flex-direction:column}.tax-actions{flex-wrap:wrap}.tax-summary{grid-template-columns:repeat(2,1fr)}.tax-grid{grid-template-columns:1fr}}@media(max-width:560px){.tax-summary{grid-template-columns:1fr}.tax-breakdown{grid-template-columns:1fr}}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
  width: 100%;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 0;
  background: transparent;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  margin-top: 3px;
  color: #9fb2ca;
  font-size: 12px;
}

.nav {
  display: grid;
  gap: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: #c9d5e5;
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
}

.nav-item svg,
.primary-btn svg,
.search svg,
.icon-btn svg,
.metric-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

.nav-item:hover,
.nav-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.clinic-card {
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.clinic-card span,
.clinic-card small {
  display: block;
  color: #aebed1;
}

.clinic-card strong {
  display: block;
  margin: 8px 0;
  font-size: 34px;
}

.main {
  min-width: 0;
  padding: 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 28px;
  letter-spacing: 0;
}

h2 {
  margin-bottom: 4px;
  font-size: 18px;
  letter-spacing: 0;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: min(36vw, 360px);
  height: 42px;
  padding: 0 12px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
}

.global-search-clear {
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: #b9c1ca;
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

.global-search-box:focus-within .global-search-clear {
  display: grid;
}

.global-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 500;
  width: min(520px, calc(100vw - 32px));
  max-height: 620px;
  overflow: hidden;
  border: 1px solid #cfd7df;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
  color: #4f5965;
}

.global-search-dropdown.hidden {
  display: none;
}

.global-search-head,
.global-search-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid #e3e8ed;
  background: #fff;
  font-size: 16px;
}

.global-search-head strong {
  color: #202a36;
  font-size: 18px;
}

.global-search-head label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  color: #303944;
  font-size: 15px;
}

.global-search-head input {
  width: 18px;
  height: 18px;
  accent-color: #08a9c6;
}

.global-search-result-list {
  max-height: 510px;
  overflow-y: auto;
  background: #fff;
}

.global-search-result {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  gap: 10px;
  width: 100%;
  min-height: 118px;
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid #e3e8ed;
  background: #fff;
  text-align: left;
}

.global-search-result:hover {
  background: #f5fbfd;
}

.global-search-result .patient-avatar-icon {
  width: 31px;
  height: 31px;
}

.global-search-result .patient-avatar-icon::before {
  top: 7px;
  width: 10px;
  height: 10px;
}

.global-search-result .patient-avatar-icon::after {
  bottom: 7px;
  width: 22px;
  height: 12px;
}

.global-search-result-main {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #697586;
  font-size: 16px;
}

.global-search-result-main strong {
  color: #202a36;
  font-size: 19px;
  font-weight: 900;
}

.global-search-result-main i {
  display: inline-block;
  width: 1px;
  height: 15px;
  margin: 0 14px;
  vertical-align: -2px;
  background: #d9dee5;
}

.global-search-result em {
  align-self: start;
  color: #a9b1bb;
  font-style: normal;
  font-size: 24px;
}

.global-search-foot {
  border-top: 1px solid #e3e8ed;
  border-bottom: 0;
}

.global-search-foot button {
  border: 0;
  background: transparent;
  color: #08a9c6;
  font-size: 16px;
  font-weight: 800;
}

.global-search-empty {
  padding: 28px 18px;
  color: #8793a0;
  font-size: 16px;
}

.primary-btn,
.ghost-btn,
.icon-btn {
  border: 0;
  border-radius: 8px;
}

.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  color: #fff;
  background: var(--primary);
  box-shadow: 0 10px 22px rgba(19, 143, 136, 0.22);
}

.primary-btn:hover {
  background: var(--primary-dark);
}

.print-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
  pointer-events: none;
}

.icon-print-btn,
.icon-text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-print-btn {
  gap: 0;
}

.icon-text-btn {
  gap: 8px;
}

.compact {
  min-height: 36px;
}

.ghost-btn {
  min-height: 34px;
  padding: 0 12px;
  color: var(--primary-dark);
  background: #e7f5f3;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

body.auth-locked .app-shell {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

body.auth-checking {
  overflow: hidden;
}

body.auth-checking .app-shell,
body.auth-checking .login-screen {
  visibility: hidden;
}

body.auth-checking::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1100;
  background:
    radial-gradient(circle at 50% 42%, rgba(13, 179, 210, 0.12), transparent 28%),
    linear-gradient(145deg, #f7fbff 0%, #edf6fb 100%);
}

body.auth-checking::after {
  content: "正在验证登录状态…";
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1101;
  min-width: 220px;
  padding: 24px 30px;
  border: 1px solid rgba(15, 174, 203, 0.22);
  border-radius: 20px;
  color: #53677d;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 60px rgba(46, 84, 115, 0.14);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  transform: translate(-50%, -50%);
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  pointer-events: none;
  grid-template-columns: minmax(460px, 0.95fr) minmax(420px, 1.05fr);
  background: #f8fafc;
}

body.auth-locked .login-screen {
  display: grid;
  pointer-events: auto;
}

.login-illustration-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: 42px 48px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, 0.2), transparent 24%),
    radial-gradient(circle at 22% 78%, rgba(255, 255, 255, 0.14), transparent 28%),
    linear-gradient(135deg, #0ea5e9 0%, #2563eb 54%, #6d28d9 100%);
}

.login-illustration-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.38) 1px, transparent 1px);
  background-size: 24px 24px;
}

.login-brand-chip,
.login-character-stage,
.login-panel-footer {
  position: relative;
  z-index: 1;
}

.login-brand-chip,
.login-mobile-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.login-brand-chip span,
.login-mobile-brand span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
  font-size: 13px;
}

.login-mobile-brand {
  display: none;
  justify-content: center;
  color: #172033;
}

.login-mobile-brand span {
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #2563eb 52%, #7c3aed);
}

.login-character-stage {
  width: min(560px, 100%);
  height: 430px;
  margin: 20px auto 0;
}

.login-character {
  position: absolute;
  bottom: 0;
  transform-origin: bottom center;
  transition: height 0.55s ease, transform 0.45s ease, left 0.45s ease;
}

.login-character-purple {
  left: 78px;
  width: 178px;
  height: 390px;
  z-index: 1;
  border-radius: 14px 14px 0 0;
  background: #6c3ff5;
  transform: skewX(calc(var(--login-purple-skew, 0) * 1deg));
}

.login-character-dark {
  left: 246px;
  width: 118px;
  height: 302px;
  z-index: 2;
  border-radius: 12px 12px 0 0;
  background: #252b34;
  transform: skewX(calc(var(--login-dark-skew, 0) * 1deg));
}

.login-character-orange {
  left: 6px;
  width: 238px;
  height: 192px;
  z-index: 3;
  border-radius: 120px 120px 0 0;
  background: #ff9b6b;
  transform: skewX(calc(var(--login-orange-skew, 0) * 1deg));
}

.login-character-yellow {
  left: 322px;
  width: 142px;
  height: 226px;
  z-index: 4;
  border-radius: 76px 76px 0 0;
  background: #e8d754;
  transform: skewX(calc(var(--login-yellow-skew, 0) * 1deg));
}

.login-screen.is-typing .login-character-purple {
  height: 430px;
  transform: translateX(34px) skewX(-10deg);
}

.login-screen.is-typing .login-character-dark {
  transform: translateX(14px) skewX(8deg);
}

.login-screen.is-password-visible .login-character {
  transform: skewX(0deg);
}

.login-eyes,
.login-dot-eyes {
  position: absolute;
  display: flex;
  gap: 26px;
  transition: left 0.22s ease, top 0.22s ease;
}

.login-character-purple .login-eyes {
  left: calc(45px + var(--login-purple-face-x, 0px));
  top: calc(42px + var(--login-purple-face-y, 0px));
}

.login-character-dark .login-eyes {
  left: calc(28px + var(--login-dark-face-x, 0px));
  top: calc(34px + var(--login-dark-face-y, 0px));
  gap: 22px;
}

.login-eyes i {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
}

.login-character-dark .login-eyes i {
  width: 16px;
  height: 16px;
}

.login-eyes i::after,
.login-dot-eyes i {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #252b34;
  transform: translate(var(--login-pupil-x, 0px), var(--login-pupil-y, 0px));
  transition: transform 0.08s ease-out;
}

.login-character-dark .login-eyes i::after {
  width: 6px;
  height: 6px;
}

.login-character-orange .login-dot-eyes {
  left: calc(82px + var(--login-orange-face-x, 0px));
  top: calc(90px + var(--login-orange-face-y, 0px));
}

.login-character-yellow .login-dot-eyes {
  left: calc(52px + var(--login-yellow-face-x, 0px));
  top: calc(42px + var(--login-yellow-face-y, 0px));
  gap: 22px;
}

.login-character-yellow em {
  position: absolute;
  left: calc(40px + var(--login-yellow-face-x, 0px));
  top: calc(88px + var(--login-yellow-face-y, 0px));
  width: 76px;
  height: 4px;
  border-radius: 999px;
  background: #252b34;
  transition: left 0.22s ease, top 0.22s ease;
}

.login-screen.is-password-visible .login-character-purple .login-eyes,
.login-screen.is-password-visible .login-character-dark .login-eyes {
  left: 18px;
  top: 32px;
}

.login-screen.is-password-visible .login-character-orange .login-dot-eyes,
.login-screen.is-password-visible .login-character-yellow .login-dot-eyes {
  left: 38px;
  top: 58px;
}

.login-screen.is-password-visible .login-character-yellow em {
  left: 28px;
  top: 108px;
}

.login-screen.is-blinking-purple .login-character-purple .login-eyes i,
.login-screen.is-blinking-dark .login-character-dark .login-eyes i {
  height: 2px;
}

.login-screen.is-blinking-purple .login-character-purple .login-eyes i::after,
.login-screen.is-blinking-dark .login-character-dark .login-eyes i::after {
  opacity: 0;
}

.login-panel-footer {
  display: flex;
  gap: 24px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
}

.login-form-panel {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 38px;
  background:
    radial-gradient(circle at 78% 24%, rgba(14, 165, 233, 0.12), transparent 26%),
    #f8fafc;
}

.login-card {
  display: grid;
  gap: 18px;
  width: min(420px, 100%);
  padding: 34px;
  border: 1px solid rgba(203, 213, 225, 0.74);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(18px);
}

.login-card-head {
  margin-bottom: 4px;
  text-align: center;
}

.login-card h2 {
  margin: 0;
  color: #16202c;
  font-size: 30px;
  letter-spacing: 0;
}

.login-card p,
.login-hint {
  margin: 0;
  color: #677487;
  line-height: 1.6;
}

.login-card label {
  display: grid;
  gap: 8px;
  color: #2e3947;
  font-weight: 700;
}

.login-card input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #d7e0ea;
  border-radius: 12px;
  color: #172033;
  background: rgba(255, 255, 255, 0.92);
  font: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.login-card input:focus {
  outline: none;
  border-color: #0ea5e9;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}

.login-password-field {
  position: relative;
  display: block;
}

.login-password-field input {
  padding-right: 72px;
}

.login-password-field button {
  position: absolute;
  right: 10px;
  top: 50%;
  border: 0;
  color: #64748b;
  background: transparent;
  font-weight: 800;
  transform: translateY(-50%);
  cursor: pointer;
}

.login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.login-remember {
  display: inline-flex !important;
  grid-template-columns: none;
  align-items: center;
  gap: 8px !important;
  color: #64748b !important;
  font-size: 13px;
  font-weight: 700 !important;
}

.login-remember input {
  width: 16px;
  height: 16px;
  padding: 0;
}

.login-link {
  border: 0;
  color: #0284c7;
  background: transparent;
  font-weight: 800;
  cursor: pointer;
}

.login-submit {
  height: 48px;
  border-radius: 12px;
  font-size: 16px;
}

.login-hint {
  padding: 10px 12px;
  border: 1px solid #e0f2fe;
  border-radius: 12px;
  background: #f3f8fb;
  font-size: 13px;
}

@media (max-width: 980px) {
  .login-screen {
    grid-template-columns: 1fr;
  }

  .login-illustration-panel {
    display: none;
  }

  .login-form-panel {
    padding: 24px;
  }

  .login-mobile-brand {
    display: flex;
  }
}

.current-user-badge {
  color: #536071;
  font-size: 14px;
  white-space: nowrap;
}

.permission-hidden {
  display: none !important;
}

.no-access-panel {
  display: grid;
  justify-items: start;
  gap: 12px;
  max-width: 620px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.no-access-panel p {
  color: var(--muted);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.metric-card,
.panel,
.table-panel,
.inventory-card,
.followup-column {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric-card {
  padding: 18px;
  min-height: 128px;
}

.metric-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.metric-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  color: var(--primary);
  background: #e7f5f3;
}

.metric-value {
  margin-top: 14px;
  font-size: 30px;
  font-weight: 800;
}

.metric-foot {
  margin-top: 7px;
  color: var(--green);
  font-size: 13px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 16px;
}

.panel,
.table-panel {
  padding: 18px;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-head p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.timeline {
  display: grid;
  gap: 10px;
}

.appointment {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.appointment time {
  font-weight: 800;
  color: var(--primary-dark);
}

.appointment strong,
.appointment span {
  display: block;
}

.appointment span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.status.arrived,
.status.done,
.status.normal {
  color: #087047;
  background: #e6f6ee;
}

.status.waiting,
.status.soon {
  color: #9a5a00;
  background: #fff1d7;
}

.status.in-treatment {
  color: #245cbd;
  background: #e7efff;
}

.status.risk,
.status.low {
  color: #b02d2d;
  background: #ffe8e8;
}

.bar-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 10px;
  min-height: 250px;
  padding-top: 18px;
}

.bar {
  display: grid;
  align-items: end;
  gap: 8px;
  height: 220px;
  text-align: center;
}

.bar-fill {
  width: 100%;
  min-height: 14px;
  border-radius: 8px 8px 3px 3px;
  background: linear-gradient(180deg, #28b6aa, #3f75d8);
}

.bar span {
  color: var(--muted);
  font-size: 12px;
}

.doctor-list,
.task-list,
.bill-list {
  display: grid;
  gap: 12px;
}

.doctor-row,
.task-row,
.bill-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.doctor-top,
.bill-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef3f8;
}

.progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.task-row {
  grid-template-columns: 10px 1fr;
}

.task-row::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--orange);
}

.task-row.high::before {
  background: var(--red);
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.segmented {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 4px;
  background: #e8eef5;
  border-radius: 8px;
}

.segmented button {
  min-width: 72px;
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
}

.segmented button.active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 4px 12px rgba(20, 33, 48, 0.08);
}

.schedule-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 14px;
}

.room-column {
  min-height: 560px;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.room-column h2 {
  font-size: 16px;
}

.room-column .appointment {
  grid-template-columns: 56px 1fr;
  align-items: start;
  margin-bottom: 10px;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

th,
td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

td strong,
td small {
  display: block;
}

td small {
  margin-top: 3px;
  color: var(--muted);
}

.count-pill {
  padding: 6px 10px;
  color: var(--primary-dark);
  background: #e7f5f3;
  border-radius: 999px;
  font-size: 13px;
}

.billing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 16px;
}

.bill-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.bill-row p {
  grid-column: 1 / -1;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
}

.amount {
  color: var(--primary-dark);
  font-size: 20px;
  font-weight: 800;
}

.charge-page {
  display: grid;
  gap: 22px;
}

.charge-summary {
  display: grid;
  grid-template-columns: 1.15fr 0.75fr 1fr 0.9fr;
  border: 1px solid #e1e5ea;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 33, 48, 0.08);
}

.charge-summary article {
  min-height: 120px;
  padding: 18px 20px 14px;
  border-right: 1px solid #d8dde3;
}

.charge-summary article:last-child {
  border-right: 0;
}

.charge-summary h2 {
  display: inline-block;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 3px solid #11a9c7;
  color: #2d333b;
  font-size: 18px;
}

.summary-values {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.summary-values span {
  min-width: 92px;
  padding-right: 18px;
  border-right: 1px solid #d8dde3;
  color: #3a414b;
}

.summary-values span:last-child {
  border-right: 0;
}

.summary-values b {
  display: block;
  margin-top: 8px;
  color: #2f343b;
}

.summary-values .danger {
  color: #f00;
}

.charge-actions,
.bill-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.charge-tabs {
  display: flex;
}

.charge-tabs button,
.charge-buttons button {
  min-height: 42px;
  padding: 0 28px;
  border: 1px solid #d6dce3;
  background: #fff;
  color: #4d5560;
  font-size: 18px;
}

.charge-tabs button.active {
  background: #f0f2f4;
  box-shadow: inset 0 2px 6px rgba(20, 33, 48, 0.15);
}

.charge-buttons {
  display: flex;
  gap: 14px;
}

.bill-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 12px;
  align-items: end;
  padding: 16px;
  border: 1px solid #dfe5eb;
  background: #fff;
}

.bill-form label {
  display: grid;
  gap: 6px;
  color: #4d5560;
  font-weight: 700;
}

.bill-form button {
  min-height: 40px;
}

.bill-filters {
  justify-content: flex-start;
  padding-bottom: 12px;
  border-bottom: 3px solid #13a9c7;
  color: #2f343b;
  font-size: 18px;
  font-weight: 700;
}

.bill-filters label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bill-filters input {
  width: 22px;
  height: 22px;
}

.bill-filters select {
  min-width: 180px;
  margin-left: 8px;
  border-color: #d8dde3;
}

.charge-table-wrap {
  overflow-x: auto;
  border-bottom: 3px solid #13a9c7;
  background: #fff;
}

.charge-table {
  min-width: 1180px;
}

.charge-table th {
  color: #69717c;
  background: #fff;
  font-size: 16px;
}

.charge-table td {
  color: #3f454d;
  font-size: 16px;
}

.charge-table .debt-cell {
  color: #d84c4c;
  font-weight: 900;
}

.table-action {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #cfd7df;
  border-radius: 4px;
  background: #fff;
  color: #58616d;
}

.table-action.icon-print-btn {
  min-width: 36px;
  width: 36px;
  padding: 0;
}

.history-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bill-history-checks {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: #303944;
  font-size: 17px;
  font-weight: 800;
}

.bill-history-checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bill-history-checks input {
  width: 18px;
  height: 18px;
  accent-color: #1687e8;
}

.bill-history-checks select {
  height: 38px;
  min-width: 180px;
  border: 1px solid #d8dee5;
  background: #fff;
  color: #5c6570;
  font-size: 15px;
  padding: 0 12px;
}

.charge-builder {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.charge-builder.hidden {
  display: none;
}

.payment-history {
  display: none;
  gap: 14px;
}

.payment-history.active {
  display: grid;
}

.debt-confirm {
  display: none;
}

.debt-confirm.active {
  display: block;
}

.debt-confirm-card {
  display: grid;
  gap: 18px;
  padding: 22px;
  border: 1px solid #d9dfe6;
  background: #fff;
}

.debt-confirm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 3px solid #13a9c7;
  padding-bottom: 14px;
}

.debt-confirm-head h2 {
  margin: 0;
  font-size: 22px;
}

.debt-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}

.debt-info-grid span {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #e0e5eb;
  background: #f8fafc;
  color: #65707c;
}

.debt-info-grid b {
  color: #252b33;
  font-size: 20px;
}

.debt-info-grid .danger {
  color: #d84c4c;
}

.debt-confirm-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
  padding: 16px;
  background: #f4f4f4;
}

.debt-confirm-form label {
  display: grid;
  gap: 8px;
  color: #596370;
  font-weight: 700;
}

.debt-confirm-form select,
.debt-confirm-form input {
  height: 44px;
  border-radius: 0;
  border-color: #d2d8df;
}

.debt-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
}

.history-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 14px;
  border: 1px solid #d9dfe6;
  background: #fff;
}

.history-search {
  width: min(520px, 100%);
}

.history-search input {
  width: 100%;
  border-radius: 0;
}

.charge-items-panel,
.charge-cashier {
  min-height: 680px;
  border: 1px solid #d9dfe6;
  background: #fff;
}

.charge-panel-title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 18px;
  background: #e7e7e7;
  color: #7a828c;
  font-size: 20px;
  font-weight: 700;
}

.charge-search,
.cashier-search {
  display: block;
}

.charge-search input,
.cashier-search input {
  width: 100%;
  border-radius: 0;
  border-color: #d5dbe2;
}

.charge-search {
  padding: 10px 18px 8px;
}

.charge-category-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 14px 18px 0;
}

.charge-category-tabs .neon-button-sm {
  width: 100%;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  white-space: normal;
}

.project-manage-line {
  display: flex;
  justify-content: flex-end;
  padding: 0 18px 12px;
}

.project-manage-line button {
  height: 38px;
  padding: 0 18px;
  border: 1px solid #11a9c7;
  background: #fff;
  color: #089fbc;
  font-weight: 800;
}

.charge-project-list {
  display: grid;
  gap: 2px;
  max-height: 500px;
  overflow: auto;
  padding: 8px 18px 18px;
}

.charge-project {
  display: block;
  align-items: center;
  min-height: 46px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #eef1f4;
  background: #fff;
  color: #1f2937;
  text-align: left;
}

.charge-project:hover {
  background: #eef9fc;
}

.charge-project.selected {
  background: #e5f6fb;
  box-shadow: inset 3px 0 0 #13a9c7;
}

.charge-project.selected strong {
  color: inherit;
}

.charge-project strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.charge-project small {
  display: block;
  margin-top: 5px;
  color: #6c7788;
  font-size: 11px;
  line-height: 1.35;
}

.charge-project-category-1 {
  color: #1f2937;
}

.charge-project-category-2 {
  color: #dc2626;
}

.charge-project-category-3 {
  color: #9ca3af;
}

.charge-project-category-4 {
  color: #0f8fa8;
}

.charge-cashier {
  display: grid;
  gap: 14px;
  padding: 12px 16px 16px;
  background: #f4f4f4;
}

.invoice-table-wrap {
  overflow-x: auto;
  border-top: 3px solid #13a9c7;
  background: #fff;
}

.invoice-table {
  width: 100%;
  min-width: 760px;
  table-layout: fixed;
}

.invoice-table th {
  color: #5d6570;
  background: #fff;
  font-size: 13px;
}

.invoice-table td {
  padding: 3px 5px;
  font-size: 13px;
  vertical-align: middle;
}

.invoice-table thead th {
  padding: 7px 5px;
}

.invoice-tooth-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #364152;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.invoice-tooth-sync input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #13a9c7;
  cursor: pointer;
}

.invoice-table th:first-child,
.invoice-table td:first-child {
  width: 108px;
  overflow: visible;
}

.invoice-table th:nth-child(2),
.invoice-table td:nth-child(2) {
  width: 24%;
}

.invoice-table th:nth-child(3),
.invoice-table td:nth-child(3) {
  width: 112px;
}

.invoice-table th:nth-child(4),
.invoice-table td:nth-child(4),
.invoice-table th:nth-child(6),
.invoice-table td:nth-child(6) {
  width: 88px;
}

.invoice-table th:nth-child(5),
.invoice-table td:nth-child(5),
.invoice-table th:nth-child(7),
.invoice-table td:nth-child(7) {
  width: 78px;
}

.invoice-table th:last-child,
.invoice-table td:last-child {
  width: 70px;
}

.invoice-table .mini-input {
  width: 56px;
  min-width: 0;
  padding: 4px 5px;
}

.invoice-category-row th {
  padding: 5px 10px;
  border-top: 1px solid #dbe2e9;
  border-bottom: 1px solid #dbe2e9;
  background: #f7f9fb;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
}

.invoice-category-1 th {
  color: #1f2937;
}

.invoice-category-2 th {
  color: #dc2626;
}

.invoice-category-3 th {
  color: #9ca3af;
}

.invoice-code {
  color: #667085;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  white-space: nowrap;
}

.invoice-tooth-map {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--invoice-tooth-map-width, 96px);
  min-height: 46px;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #3f454d;
}

.invoice-tooth-map:hover {
  background: #f2fbfd;
}

.invoice-tooth-map .tooth-line {
  position: absolute;
  z-index: 4;
  background: #6e737a;
  pointer-events: none;
}

.invoice-tooth-map .horizontal {
  left: var(--invoice-tooth-line-left, 10px);
  top: 50%;
  width: var(--invoice-tooth-line-width, 76px);
  height: 1px;
  transform: translateY(-50%);
}

.invoice-tooth-map .vertical {
  left: var(--invoice-tooth-center-x, 48px);
  top: 3px;
  width: 1px;
  height: 40px;
  transform: translateX(-50%);
}

.invoice-tooth-map .tooth-value {
  position: relative;
  z-index: 1;
  max-width: 58px;
  padding: 1px 3px;
  background: #fff;
  color: #2f3742;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-all;
}

.invoice-tooth-quadrant {
  position: absolute;
  z-index: 3;
  display: block;
  width: auto;
  min-width: 32px;
  min-height: 12px;
  padding: 0 1px;
  background: transparent;
  color: #2f3742;
  font-size: 10px;
  font-weight: 800;
  line-height: 11px;
  overflow: visible;
  white-space: nowrap;
}

.invoice-tooth-quadrant:empty {
  display: none;
}

.invoice-tooth-quadrant.q1 {
  right: var(--invoice-tooth-right-offset, 49px);
  bottom: 26px;
  text-align: right;
}

.invoice-tooth-quadrant.q2 {
  left: var(--invoice-tooth-left-offset, 49px);
  bottom: 26px;
  text-align: left;
}

.invoice-tooth-quadrant.q3 {
  left: var(--invoice-tooth-left-offset, 49px);
  top: 26px;
  text-align: left;
}

.invoice-tooth-quadrant.q4 {
  right: var(--invoice-tooth-right-offset, 49px);
  top: 26px;
  text-align: right;
}

.invoice-item-row .table-action {
  padding: 5px 8px;
  min-height: 28px;
}

.charge-tooth-popover {
  position: fixed;
  z-index: 9000;
  width: min(980px, calc(100vw - 28px));
  filter: drop-shadow(0 22px 46px rgba(20, 36, 56, 0.16));
}

.charge-tooth-popover.hidden {
  display: none;
}

.charge-tooth-arrow {
  position: absolute;
  left: -15px;
  top: var(--charge-tooth-arrow-top, 132px);
  width: 0;
  height: 0;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-right: 16px solid rgba(255, 255, 255, 0.92);
  filter: drop-shadow(-1px 0 1px rgba(18, 31, 44, 0.1));
}

.charge-tooth-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 16px;
  border: 1px solid rgba(187, 225, 235, 0.95);
  border-radius: 20px;
  background:
    radial-gradient(420px 260px at 50% 0%, rgba(8, 169, 198, 0.13), transparent 62%),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 22px 54px rgba(20, 36, 56, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.charge-tooth-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px 180px at 50% 0%, rgba(8, 169, 198, 0.72), transparent 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
}

.charge-tooth-toolbar {
  display: grid;
  grid-template-columns: repeat(8, minmax(64px, 86px)) 40px;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.charge-tooth-toolbar button {
  height: 42px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.84);
  color: #263241;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.charge-tooth-toolbar button:hover {
  border-color: rgba(8, 169, 198, 0.55);
  background: rgba(240, 251, 254, 0.95);
}

.charge-tooth-toolbar button.active {
  border-color: #08a9c6;
  background: linear-gradient(135deg, #08a9c6, #2b7de9);
  color: #fff;
  box-shadow: 0 10px 24px rgba(8, 169, 198, 0.2);
}

.charge-tooth-toolbar .charge-tooth-close {
  border: 0;
  background: rgba(241, 246, 250, 0.9);
  color: #7b8794;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

.charge-tooth-board {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 14px;
  min-height: 142px;
  padding: 16px;
  border: 1px solid rgba(209, 220, 230, 0.9);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(248, 252, 254, 0.98), rgba(239, 247, 250, 0.94)),
    rgba(255, 255, 255, 0.85);
}

.charge-tooth-board::before {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 1px;
  background: rgba(8, 169, 198, 0.55);
}

.charge-tooth-quadrant {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
}

.charge-tooth-quadrant.upper {
  align-items: flex-start;
}

.charge-tooth-quadrant.lower {
  align-items: flex-end;
}

.charge-tooth-quadrant.right-side {
  grid-column: 1;
}

.charge-tooth-quadrant.left-side {
  grid-column: 3;
}

.charge-tooth-unit {
  display: grid;
  justify-items: center;
  align-items: center;
  min-width: 42px;
  min-height: 38px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

.charge-tooth-unit.selected {
  border-color: transparent;
  background: transparent;
}

.charge-tooth-label {
  min-width: 40px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #273241;
  font-size: 18px;
  font-weight: 900;
  line-height: 32px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(201, 213, 224, 0.95), 0 4px 10px rgba(20, 36, 56, 0.06);
}

.charge-tooth-unit.selected .charge-tooth-label {
  background: #e7f8fc;
  color: #057f9c;
  box-shadow: inset 0 0 0 2px #08a9c6, 0 8px 18px rgba(8, 169, 198, 0.12);
}

.charge-tooth-extra {
  display: grid;
  grid-template-columns: 86px 1fr 62px;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
  color: #4b5563;
  font-weight: 800;
}

.charge-tooth-extra label {
  color: #555;
  font-size: 18px;
  text-align: center;
}

.charge-tooth-diagnosis {
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid #cbd1d6;
  background: #eee;
}

.charge-tooth-diagnosis span {
  flex: 1;
  padding: 0 12px;
  color: #2f3742;
  font-weight: 700;
}

.charge-tooth-diagnosis button,
.charge-tooth-edit {
  width: 46px;
  height: 42px;
  border: 0;
  background: transparent;
  color: #666;
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
}

.charge-tooth-edit {
  border: 1px solid #cbd1d6;
  border-radius: 6px;
  background: #fff;
  font-size: 24px;
}

.charge-tooth-note {
  width: 100%;
  min-height: 56px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #cbd1d6;
  color: #2f3742;
  font-size: 18px;
  resize: vertical;
}

@media (max-width: 860px) {
  .charge-tooth-toolbar {
    grid-template-columns: repeat(4, 1fr) 40px;
  }

  .charge-tooth-board {
    overflow-x: auto;
  }

  .charge-tooth-unit {
    min-width: 42px;
  }
}

.mini-input {
  width: 74px;
  height: 32px;
}

.invoice-total {
  display: flex;
  justify-content: flex-end;
  gap: 36px;
  padding: 14px 18px;
  border-top: 1px solid #dde2e8;
  background: #fff;
  color: #5a626d;
  font-size: 18px;
}

.invoice-total b {
  margin-left: 10px;
  color: #2f343b;
  font-size: 24px;
  font-weight: 500;
}

.whole-discount-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-top: 1px solid #dde2e8;
  background: #f5f5f5;
}

.whole-discount-row label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #5a626d;
  font-size: 16px;
  font-weight: 700;
}

.whole-discount-row input {
  width: 120px;
  height: 36px;
  border: 1px solid #cfd7df;
  background: #fff;
  color: #333941;
  font-size: 16px;
  text-align: center;
}

.whole-discount-row label:last-child {
  margin-left: auto;
}

.payment-box {
  display: grid;
  gap: 16px;
  padding: 14px;
  background: #fff;
}

.payment-line {
  display: grid;
  grid-template-columns: minmax(220px, 0.35fr) minmax(160px, 0.25fr) 52px;
  gap: 14px;
  align-items: end;
}

.payment-line label,
.cashier-form label {
  display: grid;
  gap: 7px;
  color: #596370;
  font-weight: 700;
}

.payment-line select,
.payment-line input,
.cashier-form input,
.cashier-form select {
  height: 44px;
  border-radius: 0;
  border-color: #d2d8df;
  background: #fff;
}

.icon-add {
  width: 52px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #606872;
  font-size: 38px;
  font-weight: 800;
}

.payment-result {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 12px;
  border-top: 1px solid #e1e5e9;
  color: #5a626d;
  font-size: 19.2px;
}

.payment-result b {
  margin-left: 8px;
  color: #262b31;
  font-size: 30px;
  font-weight: 500;
}

.payment-result .danger {
  color: #d94c4c;
}

.payment-result .success {
  color: #4bb65d;
}

.cashier-form {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(180px, 220px) minmax(120px, 160px) minmax(180px, 240px) minmax(180px, 240px);
  gap: 16px 18px;
  padding: 18px;
  background: #f1f1f1;
}

.cashier-form #cashierDoctor,
.cashier-form #cashierNurse {
  width: 100%;
  max-width: 240px;
}

.cashier-form .wide {
  grid-column: 1 / -1;
}

.cashier-form textarea {
  min-height: 78px;
  border-radius: 0;
  border-color: #d2d8df;
  background: #fff;
}

.small-line-btn {
  align-self: end;
  height: 44px;
  border: 1px solid #00a9c7;
  background: #fff;
  color: #00a1bf;
  font-weight: 800;
}

.danger-line {
  border-color: #d84c4c;
  color: #d84c4c;
}

.cashier-footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 4px;
}

.cashier-footer button {
  min-width: 92px;
  min-height: 42px;
  font-size: 18px;
}

.print-btn {
  border: 1px solid #d2d8df;
  background: #fff;
  color: #6a727d;
}

.success-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 30000;
  min-width: 260px;
  padding: 28px 46px;
  border-radius: 8px;
  background: #14a86f;
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 18px 44px rgba(20, 40, 60, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(0.94);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.success-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.donut-wrap {
  display: grid;
  place-items: center;
  gap: 18px;
  min-height: 280px;
}

.donut {
  width: 190px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--green) 0 58%, var(--blue) 58% 82%, var(--orange) 82% 100%);
  position: relative;
}

.donut::after {
  content: "¥86,420";
  position: absolute;
  inset: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
}

.legend {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 7px;
  border-radius: 3px;
}

.legend .green { background: var(--green); }
.legend .blue { background: var(--blue); }
.legend .orange { background: var(--orange); }

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.inventory-module-shell {
  display: grid;
  gap: 18px;
}

.inventory-module-shell.inventory-switching {
  animation: inventoryModuleFade 0.26s ease both;
}

.inventory-module-shell.inventory-sub-panel-open.inventory-switching {
  animation: none;
  transform: none;
}

@keyframes inventoryModuleFade {
  from {
    opacity: 0.45;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.inventory-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 24px;
}

.inventory-hero span {
  grid-column: 1 / -1;
  color: #08a9c6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.inventory-hero h2 {
  margin: 0;
  color: #1f2733;
  font-size: 28px;
  font-weight: 900;
}

.inventory-hero p {
  margin: 6px 0 0;
  color: #657386;
}

.inventory-hero strong {
  color: #08a9c6;
  font-size: 24px;
  font-weight: 900;
}

.inventory-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inventory-global-search {
  position: relative;
  width: min(560px, 100%);
  margin-top: 16px;
}

.inventory-global-search input {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d5e0ea;
  border-radius: 12px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.inbound-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 8;
  display: grid;
  gap: 6px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(20, 36, 56, 0.12);
}

.inbound-search-results button,
.inbound-search-results > span {
  display: grid;
  gap: 3px;
  border: 0;
  border-bottom: 1px solid #e8edf3;
  padding: 10px 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.inbound-search-results span {
  color: var(--muted);
  font-size: 12px;
}

.inventory-module-card {
  padding: 24px;
}

.inventory-archive-panel-head {
  justify-content: flex-end;
}

.inbound-panel-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.inbound-hero-actions {
  display: grid;
  justify-items: end;
  gap: 12px;
}

.inbound-hero-create-actions,
.inventory-hero-metric-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.inbound-hero-create-actions .light-btn {
  min-height: 42px;
  padding-inline: 18px;
}

.denture-menu-search {
  padding: 8px 12px 12px;
}

.denture-menu-search input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.denture-card-front {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.denture-card-front h2 {
  margin: 0;
  color: var(--text);
  font-size: 48px;
  font-weight: 900;
}

.denture-record-card {
  min-height: 270px;
}

.denture-record-card .denture-record-card-inner {
  min-height: 270px;
}

.denture-record-card-front {
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}

.denture-record-factory-name {
  position: absolute;
  top: 20px;
  left: 20px;
  color: #08a9c6;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.denture-record-card-front h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: var(--text);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
}

.denture-record-card-front p {
  margin: 0;
  color: var(--muted);
  font-weight: 900;
}

.denture-record-card-back {
  gap: 10px;
  overflow: auto;
}

.denture-record-back-head {
  flex: 0 0 auto;
}

.denture-card-table-wrap {
  flex: 1 1 126px;
  width: 100%;
  max-width: 100%;
  min-height: 126px;
  max-height: none;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  border-radius: 12px;
  scrollbar-gutter: stable both-edges;
}

.denture-detail-table {
  width: max-content;
  min-width: 1080px;
}

.denture-detail-table th,
.denture-detail-table td {
  padding: 10px 14px;
  vertical-align: middle;
  white-space: nowrap;
}

.denture-ledger-table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid rgba(214, 225, 234, 0.95);
  border-radius: 14px;
}

.denture-ledger-table {
  width: max-content;
  min-width: 100%;
}

.denture-ledger-table th,
.denture-ledger-table td {
  padding: 12px 14px;
  vertical-align: middle;
  white-space: nowrap;
}

.denture-ledger-table tbody tr:hover {
  background: rgba(8, 169, 198, 0.045);
}

.denture-ledger-images,
.denture-ledger-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.denture-ledger-image-button {
  border: 1px solid rgba(8, 169, 198, 0.28);
  border-radius: 8px;
  padding: 6px 9px;
  background: rgba(8, 169, 198, 0.07);
  color: #078da7;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.denture-ledger-image-button:hover {
  background: rgba(8, 169, 198, 0.14);
}

.denture-ledger-images.has-thumbnails {
  gap: 10px;
}

.denture-ledger-image-button.is-thumbnail {
  display: grid;
  gap: 5px;
  width: 92px;
  padding: 5px;
  background: #fff;
}

.denture-ledger-image-button.is-thumbnail img {
  display: block;
  width: 80px;
  height: 58px;
  border-radius: 6px;
  object-fit: cover;
  background: #f2f7fa;
}

.denture-ledger-image-button.is-thumbnail small {
  overflow: hidden;
  color: #587083;
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.denture-ledger-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.denture-record-tooth-td {
  min-width: 180px;
  text-align: center;
}

.denture-card-tooth-map {
  display: inline-block;
  width: var(--invoice-tooth-map-width, 132px);
  min-width: var(--invoice-tooth-map-width, 132px);
  height: 58px;
  margin: 0 auto;
  vertical-align: middle;
}

.denture-front-tooth-map {
  position: absolute;
  left: 50%;
  top: calc(50% + 62px);
  transform: translateX(-50%);
  display: inline-block;
  flex: 0 0 auto;
  width: 132px;
  min-width: 132px;
  height: 58px;
  background: rgba(255, 255, 255, 0.82);
}

.denture-record-card-front .denture-front-tooth-map {
  position: absolute;
  left: 50%;
  top: calc(50% + 62px);
  transform: translateX(-50%);
}

.denture-front-tooth-map .invoice-tooth-quadrant.q3,
.denture-front-tooth-map .invoice-tooth-quadrant.q4 {
  top: calc(50% + 4px);
}

.denture-record-image-strip {
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 40px;
  overflow-x: auto;
  overflow-y: hidden;
}

.denture-record-image-groups {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 100px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.denture-record-image-group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 10px;
  min-width: 0;
}

.denture-record-image-group > strong {
  flex: 0 0 auto;
  min-width: 44px;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.denture-record-image-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.denture-record-image-row button {
  flex: 0 0 auto;
  overflow: hidden;
  width: 70px;
  height: 46px;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  padding: 0;
  background: #fff;
  cursor: zoom-in;
}

.denture-record-image-row img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.denture-record-image-row span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.performance-date-filter input {
  flex: 0 0 230px;
  width: 230px;
}

.referral-type-badge {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
  background: #1677ff;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.referral-modal {
  display: grid;
  place-items: center;
  z-index: 10060;
  background: rgba(15, 23, 42, .4);
}

.referral-modal-card {
  display: grid;
  gap: 16px;
  width: min(520px, calc(100vw - 32px));
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .24);
}

.referral-modal-card header,
.referral-modal-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.referral-modal-card header h2,
.referral-modal-card header p { margin: 0; }
.referral-modal-card header p { margin-top: 5px; color: #64748b; }
.referral-modal-card header > button { border: 0; background: transparent; font-size: 24px; cursor: pointer; }
.referral-modal-card label { display: grid; gap: 8px; font-weight: 800; }
.referral-modal-card select,
.referral-modal-card textarea { border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; background: #fff; color: #1e293b; font: inherit; }
.referral-modal-card footer { justify-content: flex-end; }
.referral-modal-card footer .report-secondary-btn,
.referral-modal-card footer .report-primary-btn {
  position: static;
  inset: auto;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 104px;
  visibility: visible;
  opacity: 1;
  transform: none;
}
.referral-modal-card footer .report-secondary-btn {
  border: 1px solid #bfdbfe;
  background: #fff;
  color: #1677ff;
}
.referral-modal-card footer .report-primary-btn {
  border: 1px solid #1677ff;
  background: #1677ff;
  color: #fff;
}

.performance-mode-note {
  padding: 10px 16px;
  border-bottom: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 700;
}

.report-primary-btn { border-color: var(--report-blue, #1677ff); background: var(--report-blue, #1677ff); }
.report-secondary-btn { color: var(--report-blue, #1677ff); }
.expense-content { display: grid; gap: 12px; min-width: 0; }
.expense-content.hidden { display: none; }
#billing.expense-only .performance-layout { grid-template-columns: minmax(0, 1fr); }
#billing.expense-only .performance-sidebar,
#billing.expense-only .performance-content { display: none; }
#billing.expense-only .expense-content { width: 100%; }
#billing.expense-only{--expense-cyan:#0aa9c7;--expense-ink:#172235;--expense-line:rgba(151,177,203,.24);padding:10px 22px 44px!important;background:radial-gradient(circle at 18% 5%,rgba(31,194,214,.09),transparent 25%),linear-gradient(135deg,#f4f9fc 0%,#f7f8fc 54%,#eef3ff 100%)}
#billing.expense-only .expense-content{gap:22px;max-width:1900px;margin:0 auto}
.expense-hero{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;min-height:142px;overflow:hidden;padding:26px 32px;border:1px solid rgba(10,169,199,.25);border-radius:18px;background:linear-gradient(120deg,rgba(218,248,252,.88),rgba(255,255,255,.94) 42%,rgba(231,237,255,.78));box-shadow:0 18px 42px rgba(66,104,139,.11)}
.expense-hero::before{position:absolute;z-index:-1;top:-110px;left:24%;width:360px;height:260px;border-radius:50%;background:rgba(43,198,219,.16);filter:blur(48px);content:"";animation:expenseGlowDrift 8s ease-in-out infinite alternate}
.expense-hero::after{position:absolute;z-index:-1;right:5%;bottom:-90px;width:260px;height:180px;border-radius:50%;background:rgba(91,122,255,.12);filter:blur(42px);content:"";animation:expenseGlowDrift 10s ease-in-out -3s infinite alternate-reverse}
.expense-hero span{color:var(--expense-cyan);font-size:12px;font-weight:900;letter-spacing:.18em}.expense-hero h2{margin:8px 0 6px;color:var(--expense-ink);font-size:30px;letter-spacing:-.04em}.expense-hero p{margin:0;color:#69798c;font-weight:650}
.expense-hero-total{display:grid;justify-items:end;gap:3px;padding-right:8px}.expense-hero-total small{color:#77889c;font-weight:700}.expense-hero-total strong{color:var(--expense-cyan);font-size:30px}.expense-hero-total em{color:#77889c;font-size:12px;font-style:normal}
.expense-workspace{display:grid;grid-template-columns:220px minmax(0,1fr);gap:22px;align-items:start}.expense-main-panel{display:grid;gap:16px;min-width:0}
.expense-section-nav{position:sticky;top:82px;display:grid;gap:4px;padding:14px;border:1px solid var(--expense-line);border-radius:18px;background:rgba(255,255,255,.83);box-shadow:0 18px 45px rgba(64,92,122,.1);backdrop-filter:blur(18px)}
.expense-section-nav strong{padding:12px 14px 15px;color:var(--expense-ink);font-size:16px}.expense-section-nav button{position:relative;height:48px;border:0;border-radius:12px;padding:0 15px;background:transparent;color:#314256;font:inherit;font-weight:750;text-align:left;cursor:pointer;transition:transform .2s ease,background .25s ease,color .25s ease,box-shadow .25s ease}.expense-section-nav button:hover{transform:translateX(3px);background:rgba(10,169,199,.07);color:#078ba5}.expense-section-nav button.active{background:linear-gradient(100deg,rgba(203,243,249,.92),rgba(230,238,255,.92));color:#078ba5;box-shadow:inset 3px 0 0 var(--expense-cyan),0 8px 22px rgba(31,177,199,.1)}
#billing.expense-only .report-card{border:1px solid var(--expense-line);border-radius:18px;background:rgba(255,255,255,.86);box-shadow:0 15px 38px rgba(67,96,126,.09);backdrop-filter:blur(15px)}
#billing.expense-only .expense-filter-card{position:relative;z-index:10;overflow:visible;padding:22px 24px}#billing.expense-only .expense-filter-card::after{position:absolute;top:-70px;right:15%;width:220px;height:140px;border-radius:50%;background:rgba(32,190,210,.1);filter:blur(35px);content:"";pointer-events:none}
#billing.expense-only .expense-filter-grid input,#billing.expense-only .expense-filter-grid select{border-color:rgba(140,166,192,.35);border-radius:10px;background:rgba(249,252,255,.9);transition:border-color .2s,box-shadow .2s,transform .2s}#billing.expense-only .expense-filter-grid input:focus,#billing.expense-only .expense-filter-grid select:focus{border-color:var(--expense-cyan);box-shadow:0 0 0 4px rgba(10,169,199,.11);transform:translateY(-1px)}
#billing.expense-only .report-primary-btn{border-color:#079fbd;background:linear-gradient(135deg,#0bb4cf,#078db7);box-shadow:0 8px 20px rgba(7,157,189,.22);transition:transform .18s,box-shadow .18s}#billing.expense-only .report-primary-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(7,157,189,.3)}#billing.expense-only .report-primary-btn:active{transform:translateY(0) scale(.98)}
#billing.expense-only .report-secondary-btn{border-color:rgba(10,169,199,.25);border-radius:9px;color:#078ba5;background:rgba(255,255,255,.74)}
#billing.expense-only .expense-overview-card{padding:16px}#billing.expense-only .expense-kpis{gap:12px}#billing.expense-only .expense-kpis article{position:relative;overflow:hidden;border:1px solid rgba(140,175,207,.2);border-radius:14px;background:linear-gradient(145deg,rgba(248,252,255,.96),rgba(237,247,252,.8));transition:transform .22s,box-shadow .22s,border-color .22s}#billing.expense-only .expense-kpis article:hover{transform:translateY(-4px);border-color:rgba(10,169,199,.32);box-shadow:0 14px 30px rgba(38,133,158,.13)}#billing.expense-only .expense-kpis article::after{position:absolute;right:-35px;bottom:-55px;width:110px;height:110px;border-radius:50%;background:rgba(23,183,205,.1);filter:blur(12px);content:""}
#billing.expense-only .performance-tabs{border-radius:16px}#billing.expense-only .performance-tabs button.active{border-bottom-color:var(--expense-cyan);color:#078ba5}
#billing.expense-only .performance-table-card{border-radius:16px}#billing.expense-only .performance-table thead th{background:#f4f8fb;color:#334155;border-color:#e4edf4}#billing.expense-only .performance-table tbody tr{transition:background .18s,box-shadow .18s}#billing.expense-only .performance-table tbody tr:hover{background:#effbfc;box-shadow:inset 3px 0 0 var(--expense-cyan)}#billing.expense-only .performance-table tfoot td{background:#ecf7fa}
@keyframes expenseGlowDrift{from{transform:translate3d(-20px,-8px,0) scale(.92)}to{transform:translate3d(55px,20px,0) scale(1.12)}}
@media(max-width:980px){.expense-workspace{grid-template-columns:1fr}.expense-section-nav{position:static;display:flex;overflow-x:auto}.expense-section-nav strong{display:none}.expense-section-nav button{flex:0 0 auto}.expense-hero{align-items:flex-start;gap:20px}.expense-hero-total{justify-items:start}}
@media(prefers-reduced-motion:reduce){.expense-hero::before,.expense-hero::after{animation:none}.expense-section-nav button,#billing.expense-only .expense-kpis article{transition:none}}
.expense-month-picker{position:relative}.expense-month-trigger{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;border:1px solid rgba(140,166,192,.35);border-radius:10px;padding:0 14px;background:rgba(249,252,255,.9);color:#233247;font:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s}.expense-month-trigger:hover,.expense-month-trigger[aria-expanded="true"]{border-color:var(--expense-cyan);box-shadow:0 0 0 4px rgba(10,169,199,.1);transform:translateY(-1px)}.expense-month-trigger b{font-weight:750}.expense-month-trigger i{position:relative;width:17px;height:17px;border:2px solid #526579;border-radius:4px}.expense-month-trigger i::before{position:absolute;top:-5px;left:2px;width:9px;height:4px;border-left:2px solid #526579;border-right:2px solid #526579;content:""}
.expense-month-popover{position:absolute;z-index:500;top:calc(100% + 10px);left:0;width:330px;overflow:hidden;border:1px solid rgba(10,169,199,.2);border-radius:16px;background:rgba(255,255,255,.96);box-shadow:0 24px 60px rgba(35,76,108,.22),0 0 0 1px rgba(255,255,255,.8) inset;backdrop-filter:blur(20px);transform-origin:top left;animation:expenseMonthOpen .2s ease-out}.expense-month-popover[hidden]{display:none}.expense-month-popover::before{position:absolute;top:-50px;right:-30px;width:150px;height:120px;border-radius:50%;background:rgba(22,188,210,.13);filter:blur(25px);content:"";pointer-events:none}.expense-month-head{position:relative;display:grid;grid-template-columns:38px 1fr 38px;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(151,177,203,.2)}.expense-month-head strong{text-align:center;color:#213247;font-size:16px}.expense-month-head button{width:34px;height:34px;border:0;border-radius:9px;background:rgba(229,244,248,.72);color:#078ba5;font-size:25px;cursor:pointer;transition:background .18s,transform .18s}.expense-month-head button:hover{background:#d8f3f7;transform:scale(1.06)}
.expense-month-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}.expense-month-grid button{position:relative;display:grid;place-items:center;height:55px;border:1px solid transparent;border-radius:11px;background:transparent;color:#34475b;font:inherit;font-weight:750;cursor:pointer;transition:transform .18s,background .18s,color .18s,box-shadow .18s}.expense-month-grid button:hover{transform:translateY(-2px);background:rgba(218,245,249,.7);color:#078ba5}.expense-month-grid button.selected{border-color:#08a8c5;background:linear-gradient(135deg,#0db6cf,#078fb8);color:#fff;box-shadow:0 8px 20px rgba(7,157,189,.27)}.expense-month-grid button.current:not(.selected){border-color:rgba(10,169,199,.25)}.expense-month-grid small{font-size:9px;font-weight:700;opacity:.75}.expense-month-popover footer{display:flex;justify-content:space-between;padding:11px 14px;border-top:1px solid rgba(151,177,203,.2);background:rgba(246,250,253,.78)}.expense-month-popover footer button{border:0;background:transparent;color:#078ba5;font:inherit;font-weight:750;cursor:pointer}.expense-month-popover footer button:hover{text-decoration:underline}@keyframes expenseMonthOpen{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:560px){.expense-month-popover{width:min(330px,calc(100vw - 48px))}}
.expense-main-panel{position:relative;isolation:isolate}
.expense-main-panel::before{position:absolute;z-index:-1;top:calc(var(--expense-glow-y,35%)*.45);left:calc(var(--expense-glow-x,55%)*.72);width:340px;height:260px;border-radius:50%;background:rgba(36,196,216,.1);filter:blur(55px);content:"";pointer-events:none;transition:top .9s cubic-bezier(.22,1,.36,1),left .9s cubic-bezier(.22,1,.36,1)}
#billing.expense-only .report-card{background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(255,255,255,.79));box-shadow:0 15px 38px rgba(67,96,126,.09),inset 0 1px 0 rgba(255,255,255,.94);-webkit-backdrop-filter:blur(15px)}
#billing.expense-only .expense-filter-card::before{position:absolute;inset:0;background:radial-gradient(260px circle at var(--expense-glow-x,58%) var(--expense-glow-y,28%),rgba(35,196,215,.13),transparent 72%);content:"";pointer-events:none}
#billing.expense-only .expense-filter-card::after{animation:expenseGlowBreathe 5.5s ease-in-out infinite}
@keyframes expenseGlowBreathe{0%,100%{opacity:.45;transform:scale(.82)}50%{opacity:1;transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.expense-main-panel::before{transition:none}#billing.expense-only .expense-filter-card::after{animation:none}}
.expense-attachment-preview-modal{z-index:10100;display:grid;place-items:center;padding:24px;background:rgba(15,23,42,.58)}
.expense-attachment-preview-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(1100px,96vw);height:min(860px,92vh);overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 24px 80px rgba(15,23,42,.35)}
.expense-attachment-preview-card header,.expense-attachment-preview-card footer{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e2e8f0}
.expense-attachment-preview-card footer{justify-content:flex-end;border-top:1px solid #e2e8f0;border-bottom:0}
.expense-attachment-preview-card h2,.expense-attachment-preview-card p{margin:0}.expense-attachment-preview-card p{margin-top:4px;color:#64748b}
.expense-attachment-preview-card header>button{border:0;background:transparent;color:#64748b;font-size:28px;cursor:pointer}
.expense-attachment-preview-stage{display:grid;place-items:center;min-height:0;overflow:auto;background:#eef2f7}
.expense-attachment-preview-stage img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.expense-attachment-preview-stage iframe{width:100%;height:100%;border:0;background:#fff}
.expense-filter-card,.expense-overview-card { padding: 16px; }
.expense-filter-grid { display: grid; grid-template-columns: repeat(6,minmax(150px,1fr)); gap: 12px; }
.expense-filter-grid .expense-time-filter { grid-column: span 2; }
.finance-time-filter-shell { display: grid; grid-template-columns: minmax(190px,1fr) auto; gap: 9px; align-items: center; }
.finance-time-mode { min-width: 148px; font-weight: 750; color: #187b92 !important; cursor: pointer; }
.finance-time-mode + .system-card-select { width: 168px; min-width: 168px; }
.finance-time-mode + .system-card-select .system-card-select-trigger { min-width: 168px; }
.finance-time-mode + .system-card-select .system-card-select-value,
.finance-time-mode + .system-card-select .system-card-select-menu button span { overflow: visible; text-overflow: clip; white-space: nowrap; }
.finance-time-mode + .system-card-select .system-card-select-menu { right: 0; left: 0; width: 168px; min-width: 168px; box-sizing: border-box; }
.finance-date-range { display: block; min-width: 300px; }
.finance-time-filter-shell:has(.finance-date-range:not([hidden])) { grid-template-columns: minmax(300px,1fr) auto; }
.finance-date-range[hidden], [data-expense-time-month][hidden], [data-wage-time-month][hidden], [data-wage-time-range][hidden] { display: none !important; }
.finance-range-trigger { display: grid; grid-template-columns: minmax(0,1fr) 22px; align-items: center; gap: 8px; width: 100%; min-height: 42px; box-sizing: border-box; border: 1px solid rgba(140,166,192,.35); border-radius: 10px; padding: 0 12px; background: #f9fcff; color: #253b53; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.finance-range-trigger:hover,.finance-range-trigger[aria-expanded="true"] { border-color: #48bed2; box-shadow: 0 0 0 4px rgba(10,169,199,.1); transform: translateY(-1px); }
.finance-range-trigger span { overflow: visible; color: #253b53; font-size: 13px; font-weight: 760; text-overflow: clip; white-space: nowrap; }
.finance-range-trigger i { position: relative; width: 18px; height: 18px; color: #079fbd; }
.finance-range-trigger i::before { position: absolute; inset: 2px 1px 1px; border: 1.7px solid currentColor; border-radius: 4px; content: ""; }
.finance-range-trigger i::after { position: absolute; top: 5px; left: 3px; width: 12px; border-top: 1.7px solid currentColor; box-shadow: 3px -3px 0 -2px currentColor,-3px -3px 0 -2px currentColor; content: ""; }
.finance-range-popover { position: fixed; z-index: 14000; box-sizing: border-box; padding: 16px; border: 1px solid rgba(111,176,194,.3); border-radius: 18px; background: rgba(255,255,255,.99); box-shadow: 0 26px 70px rgba(35,74,98,.24),inset 0 1px 0 #fff; backdrop-filter: blur(18px); }
.finance-range-selected { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px; border-radius: 12px; background: linear-gradient(100deg,#eefafd,#f5f8ff); }
.finance-range-selected>div { display: grid; gap: 3px; min-width: 0; }
.finance-range-selected small { color: #7b8da0; font-size: 11px; font-weight: 750; }
.finance-range-selected strong { overflow: hidden; color: #20384f; font-size: 14px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.finance-range-selected i { color: #0aa9c7; font-style: normal; text-align: center; }
.finance-range-calendars { display: grid; grid-template-columns: 1fr; }
.finance-range-calendar>header { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; min-height: 38px; margin-bottom: 7px; }
.finance-range-calendar>header strong { color: #21384f; text-align: center; font-size: 15px; }
.finance-range-calendar>header button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: #eff8fa; color: #188fa7; font: inherit; font-size: 22px; cursor: pointer; }
.finance-range-calendar>header button:hover { background: #dff6fa; }
.finance-range-week,.finance-range-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; }
.finance-range-week span { display: grid; place-items: center; height: 27px; color: #8293a3; font-size: 11px; font-weight: 750; }
.finance-range-days button { position: relative; z-index: 0; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 0; border-radius: 8px; padding: 0; background: transparent; color: #31475e; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.finance-range-days button:hover { background: #e4f8fb; color: #078da8; }
.finance-range-days button.outside { color: #b4bdc7; }
.finance-range-days button.today { box-shadow: inset 0 0 0 1px #63c8da; color: #078da8; }
.finance-range-days button.in-range { border-radius: 5px; background: #dff6fa; color: #116d82; }
.finance-range-days button.range-start,.finance-range-days button.range-end { border-radius: 8px; background: linear-gradient(135deg,#0bb4cf,#078db7); color: #fff; box-shadow: 0 6px 14px rgba(7,157,189,.24); }
.finance-range-popover>footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #e2edf1; }
.finance-range-popover>footer>div { display: flex; align-items: center; gap: 8px; }
.finance-range-popover>footer span { color: #7b8da0; font-size: 12px; }
.finance-range-popover>footer button { min-height: 36px; border: 1px solid #c8e2e8; border-radius: 9px; padding: 0 13px; background: #fff; color: #078ba5; font: inherit; font-weight: 750; cursor: pointer; }
.finance-range-popover>footer button.confirm { border-color: #079fbd; background: linear-gradient(135deg,#0bb4cf,#078db7); color: #fff; }
.finance-range-popover>footer button:disabled { opacity: .45; cursor: not-allowed; }
.finance-range-warning { margin: 10px 0 0; border-radius: 9px; padding: 9px 11px; background: #fff7e8; color: #9a6515; font-size: 12px; line-height: 1.5; }
.expense-filter-grid label,.expense-form-grid label,.expense-advanced-fields label { display: grid; gap: 7px; color: #334155; font-size: 14px; font-weight: 700; }
.expense-filter-card:has(.system-card-select.open) { z-index: 80 !important; }
.expense-filter-grid label:has(.system-card-select.open) { position: relative; z-index: 90; }
.expense-filter-grid .system-card-select.open,
.expense-filter-grid .system-card-select-menu { z-index: 100; }
.expense-filter-grid input,.expense-filter-grid select,.expense-form-grid input,.expense-form-grid select,.expense-form-grid textarea,.expense-advanced-fields input,.expense-advanced-fields select { width: 100%; min-height: 38px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 10px; background: #fff; color: #1e293b; font: inherit; }
.expense-filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.expense-filter-actions>div { display: flex; flex-wrap: wrap; gap: 10px; }
.expense-kpis { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.expense-kpis.single-cost-kpis { grid-template-columns: 1fr; }

/* All-expense overview: month, add action and category composition only. */
#monthlyExpenseContent.all-expense-only .expense-main-panel>.expense-filter-card{order:1;display:grid;grid-template-columns:minmax(260px,340px) 1fr;align-items:end;gap:18px;padding:20px 24px}
#monthlyExpenseContent.all-expense-only .expense-main-panel>.expense-all-chart-card{order:2}
#monthlyExpenseContent.all-expense-only .expense-main-panel>.expense-overview-card,
#monthlyExpenseContent.all-expense-only .expense-main-panel>.performance-tabs,
#monthlyExpenseContent.all-expense-only .expense-main-panel>.performance-table-card{display:none}
#monthlyExpenseContent.all-expense-only .expense-filter-card>.performance-title-row,
#monthlyExpenseContent.all-expense-only .expense-filter-grid>label:not(:first-child),
#monthlyExpenseContent.all-expense-only .expense-filter-actions>div:first-child,
#monthlyExpenseContent.all-expense-only #expenseColumns{display:none}
#monthlyExpenseContent.all-expense-only .expense-filter-grid{display:grid;grid-template-columns:1fr;gap:0}
#monthlyExpenseContent.all-expense-only .expense-filter-actions{display:flex;align-items:flex-end;justify-content:flex-end;margin:0}
#monthlyExpenseContent.all-expense-only .expense-filter-actions>div:last-child{display:flex;justify-content:flex-end;width:100%}
.expense-all-chart-card{overflow:hidden;padding:0!important}.expense-all-chart-card[hidden]{display:none}.expense-all-chart-card>header{padding:24px 26px 0}.expense-all-chart-card h2{margin:0;color:#17283c;font-size:20px}.expense-all-chart-card header p{margin:6px 0 0;color:#7c8da0;font-size:13px}.expense-all-chart-body{display:grid;justify-items:center;padding:24px 28px 30px}.expense-all-donut{display:grid;place-items:center;width:220px;height:220px;border-radius:50%;background:#e8eef2;transition:background .25s ease}.expense-all-donut>div{display:grid;place-items:center;width:132px;height:132px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(125,157,178,.08)}.expense-all-donut span{color:#7b8ba0;font-size:13px}.expense-all-donut strong{margin-top:7px;color:#17283c;font-size:25px;font-variant-numeric:tabular-nums}.expense-all-legend{display:grid;gap:12px;width:100%;margin-top:26px}.expense-all-legend div{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:10px;color:#607488}.expense-all-legend i{width:10px;height:10px;border-radius:50%}.expense-all-legend b{color:#26384d;font-variant-numeric:tabular-nums}.expense-all-legend p{color:#8090a0;text-align:center}@media(max-width:700px){#monthlyExpenseContent.all-expense-only .expense-main-panel>.expense-filter-card{grid-template-columns:1fr}#monthlyExpenseContent.all-expense-only .expense-filter-actions,#monthlyExpenseContent.all-expense-only .expense-filter-actions>div:last-child{justify-content:stretch}#monthlyExpenseContent.all-expense-only #expenseAdd{width:100%}.expense-all-donut{width:190px;height:190px}.expense-all-donut>div{width:112px;height:112px}}
.expense-kpis article { display: grid; gap: 7px; padding: 14px; border: 1px solid #dbeafe; border-radius: 8px; background: #f8fbff; }
.expense-kpis span { color: #64748b; font-size: 13px; font-weight: 700; }
.expense-kpis b { color: #0f172a; font-size: 22px; font-variant-numeric: tabular-nums; }
.expense-kpis small { color: #64748b; }
.expense-kpi-link{width:100%;margin-top:4px;border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;background:rgba(241,245,249,.88);color:#475569;font:inherit;font-size:13px;text-align:left;cursor:pointer}.expense-kpi-link:hover{border-color:#16aec6;background:#ecfeff;color:#087e97}

/* Read-only monthly finance metrics use a restrained SVG bento gradient. */
#billing.expense-only .expense-kpis { gap: 16px; }
#billing.expense-only .expense-kpis .expense-bento-card {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 154px;
  overflow: hidden;
  border: 1px solid rgba(133, 165, 202, .28);
  border-radius: 16px;
  padding: 0;
  background: rgba(250, 253, 255, .82);
  box-shadow: 0 16px 34px rgba(66, 101, 139, .1), inset 0 1px 0 rgba(255, 255, 255, .92);
  transform: translateZ(0);
}
#billing.expense-only .expense-kpis .expense-bento-card::after { display: none; }
#billing.expense-only .expense-kpis .expense-bento-card:hover {
  transform: translateY(-2px);
  border-color: rgba(91, 139, 194, .38);
  box-shadow: 0 19px 38px rgba(66, 101, 139, .13), inset 0 1px 0 rgba(255, 255, 255, .94);
}
.expense-bento-gradient { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.expense-bento-gradient::after { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255,255,255,.5), rgba(255,255,255,.12) 48%, rgba(255,255,255,.38)); content: ""; }
.expense-bento-orb { position: absolute; width: 72%; height: auto; opacity: .56; filter: blur(26px); will-change: transform; }
.expense-bento-orb-1 { top: -62%; left: -12%; animation: expenseBentoDriftA 34s cubic-bezier(.445,.05,.55,.95) infinite; }
.expense-bento-orb-2 { right: -24%; bottom: -70%; animation: expenseBentoDriftB 38s cubic-bezier(.445,.05,.55,.95) -9s infinite; }
.expense-bento-orb-3 { top: -30%; right: 12%; width: 56%; animation: expenseBentoDriftC 42s cubic-bezier(.445,.05,.55,.95) -17s infinite; }
.expense-bento-content { position: relative; z-index: 1; display: grid; align-content: center; min-height: 154px; gap: 8px; padding: 22px 24px; box-sizing: border-box; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#billing.expense-only .expense-kpis .expense-bento-content span { color: #54677d; font-size: 14px; font-weight: 800; }
#billing.expense-only .expense-kpis .expense-bento-content b { margin: 0; color: #14243a; font-size: clamp(27px, 2vw, 34px); font-weight: 850; line-height: 1.15; letter-spacing: -.025em; }
#billing.expense-only .expense-kpis .expense-bento-content small { max-width: 72ch; color: #5d7087; font-size: 12px; line-height: 1.65; }
#billing.expense-only .expense-kpis .expense-kpi-link { position: relative; z-index: 2; margin-top: 2px; border-color: rgba(86, 132, 184, .22); background: rgba(248, 251, 255, .72); color: #315f91; font-weight: 700; text-align: center; }
#billing.expense-only .expense-kpis .expense-kpi-link:hover { border-color: rgba(36, 145, 175, .48); background: rgba(238, 250, 253, .94); color: #087e97; }
.expense-bento-card.is-entering { animation: expenseBentoEnter .5s cubic-bezier(.16,1,.3,1) both; }
.expense-bento-card.is-entering:nth-child(2) { animation-delay: .08s; }
@keyframes expenseBentoEnter { from { opacity: 0; transform: translate3d(0,10px,0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes expenseBentoDriftA { 0%,100% { transform: translate3d(-5%,0,0) scale(.96); } 40% { transform: translate3d(34%,22%,0) scale(1.08); } 72% { transform: translate3d(12%,38%,0) scale(1.02); } }
@keyframes expenseBentoDriftB { 0%,100% { transform: translate3d(4%,2%,0) scale(1); } 38% { transform: translate3d(-32%,-20%,0) scale(1.12); } 76% { transform: translate3d(-12%,-34%,0) scale(.96); } }
@keyframes expenseBentoDriftC { 0%,100% { transform: translate3d(0,-4%,0) scale(.94); } 45% { transform: translate3d(-26%,24%,0) scale(1.1); } 78% { transform: translate3d(14%,34%,0) scale(1); } }
html.dark #billing.expense-only .expense-kpis .expense-bento-card,
html[data-theme="dark"] #billing.expense-only .expense-kpis .expense-bento-card { background: rgba(24, 35, 52, .88); border-color: rgba(155, 177, 209, .25); }
html.dark #billing.expense-only .expense-bento-orb,
html[data-theme="dark"] #billing.expense-only .expense-bento-orb { opacity: .2; }
html.dark #billing.expense-only .expense-kpis .expense-bento-content b,
html[data-theme="dark"] #billing.expense-only .expense-kpis .expense-bento-content b { color: #edf5ff; }
html.dark #billing.expense-only .expense-kpis .expense-bento-content span,
html.dark #billing.expense-only .expense-kpis .expense-bento-content small,
html[data-theme="dark"] #billing.expense-only .expense-kpis .expense-bento-content span,
html[data-theme="dark"] #billing.expense-only .expense-kpis .expense-bento-content small { color: #b7c6d9; }
@media (max-width: 900px) { #billing.expense-only .expense-kpis { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .expense-bento-content { min-height: 140px; padding: 18px; } #billing.expense-only .expense-kpis .expense-bento-card { min-height: 140px; } }
@media (prefers-reduced-motion: reduce) { .expense-bento-card.is-entering, .expense-bento-orb { animation: none !important; } }
.expense-salary-details{margin-top:14px;overflow:hidden;border:1px solid #d9e8f2;border-radius:12px;background:rgba(255,255,255,.82)}.expense-salary-details[hidden]{display:none}.expense-salary-title{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 16px;border-bottom:1px solid #e2edf4;background:linear-gradient(90deg,rgba(231,249,252,.72),rgba(248,251,255,.72))}.expense-salary-title h3,.expense-salary-title p{margin:0}.expense-salary-title h3{color:#172b42;font-size:15px}.expense-salary-title p{margin-top:3px;color:#718096;font-size:12px}.expense-salary-title>span{border-radius:999px;padding:5px 10px;background:#dff7fb;color:#078da6;font-size:12px;font-weight:800}.expense-salary-table-wrap{overflow-x:auto}.expense-salary-details table{width:100%;min-width:760px;border-collapse:collapse}.expense-salary-details th,.expense-salary-details td{padding:10px 14px;border-bottom:1px solid #edf2f7;color:#334155;font-size:13px;text-align:left}.expense-salary-details th{background:#f7fafc;color:#64748b;font-size:12px}.expense-salary-details td.numeric,.expense-salary-details th.numeric{text-align:right;font-variant-numeric:tabular-nums}.expense-salary-details tbody button{border:0;background:transparent;color:#0798b4;font:inherit;font-weight:750;cursor:pointer}.expense-salary-details tfoot td{border-bottom:0;background:#edf9fc;color:#153047;font-weight:800}.expense-readonly-badge{display:inline-flex;border-radius:999px;padding:3px 8px;background:#e8f4f7;color:#287587;font-size:12px;font-weight:750}.expense-sync-row td{background:rgba(240,249,252,.62)}
.expense-material-table{min-width:1120px!important}.expense-material-table tbody tr:hover td{background:#f8fcfd}.expense-material-table .material-product-name{min-width:170px;color:#172b42}.material-kind-badge,.material-invoice-badge{display:inline-flex;align-items:center;min-height:24px;border-radius:7px;padding:3px 8px;font-size:12px;font-weight:750;white-space:nowrap}.material-kind-badge.material{background:#e8f6fb;color:#14758b}.material-kind-badge.drug{background:#eef4ff;color:#4165a4}.material-kind-badge.high-value{background:#fff3df;color:#9b6513}.material-invoice-badge.has-invoice{background:#e8f8ef;color:#23704a}.material-invoice-badge.no-invoice{background:#fff3e8;color:#a85e1b}.expense-material-empty{height:84px;color:#7c8b9b!important;text-align:center!important}.expense-material-details tfoot td{white-space:nowrap}
.expense-misc-card[hidden]{display:none}.expense-misc-card{overflow:hidden;padding:0!important}.expense-misc-card>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;border-bottom:1px solid #e1ebf2;background:linear-gradient(90deg,rgba(233,249,252,.76),rgba(249,251,255,.82))}.expense-misc-card h2,.expense-misc-card p{margin:0}.expense-misc-card h2{color:#172b42;font-size:19px}.expense-misc-card p{margin-top:5px;color:#718096;font-size:13px}.expense-misc-card>header button{flex:0 0 auto;min-width:104px;white-space:nowrap}.expense-misc-summary{display:grid;gap:8px;min-height:150px;padding:25px 24px;background:radial-gradient(circle at 88% 30%,rgba(18,183,207,.11),transparent 27%),rgba(255,255,255,.74)}.expense-misc-summary span{color:#64748b;font-size:13px;font-weight:750}.expense-misc-summary strong{color:#13253a;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}.expense-misc-summary small{color:#7a8999;font-size:13px}
.expense-reimbursement-card[hidden]{display:none}.expense-reimbursement-card{overflow:hidden;padding:0!important}.expense-reimbursement-card>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;border-bottom:1px solid #e1ebf2;background:linear-gradient(90deg,rgba(233,249,252,.76),rgba(249,251,255,.82))}.expense-reimbursement-card h2,.expense-reimbursement-card p{margin:0}.expense-reimbursement-card h2{color:#172b42;font-size:19px}.expense-reimbursement-card>header p{margin-top:5px;color:#718096;font-size:13px}.expense-reimbursement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:18px}.expense-reimbursement-grid article{position:relative;display:grid;align-content:start;gap:9px;min-height:170px;overflow:hidden;border:1px solid rgba(140,175,207,.22);border-radius:14px;padding:22px;background:linear-gradient(145deg,rgba(249,253,255,.98),rgba(237,247,252,.82));box-shadow:0 12px 28px rgba(45,104,129,.07)}.expense-reimbursement-grid article::after{position:absolute;right:-34px;bottom:-52px;width:118px;height:118px;border-radius:50%;background:rgba(21,178,201,.1);filter:blur(14px);content:"";pointer-events:none}.expense-reimbursement-grid .expense-reimbursement-uninvoiced{border-color:rgba(220,146,70,.25);background:linear-gradient(145deg,rgba(255,253,249,.98),rgba(255,247,235,.84))}.expense-reimbursement-grid .expense-reimbursement-uninvoiced::after{background:rgba(220,146,70,.11)}.expense-reimbursement-grid span{color:#52677d;font-size:14px;font-weight:800}.expense-reimbursement-card-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.expense-reimbursement-card-title button{position:relative;z-index:1;min-width:92px;padding:8px 14px;white-space:nowrap}.expense-reimbursement-grid strong{color:#13253a;font-size:32px;line-height:1;font-variant-numeric:tabular-nums}.expense-reimbursement-grid small{color:#4d667c;font-size:13px;font-weight:750}.expense-reimbursement-grid p{max-width:46ch;color:#788899;font-size:13px;line-height:1.55}
.expense-category-detail-card[hidden]{display:none}.expense-category-detail-card{overflow:hidden;padding:0!important}.expense-category-detail-card>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 20px;border-bottom:1px solid #dce9f1;background:linear-gradient(90deg,rgba(232,248,252,.82),rgba(250,252,255,.9))}.expense-category-detail-card h2,.expense-category-detail-card p{margin:0}.expense-category-detail-card h2{color:#172b42;font-size:17px}.expense-category-detail-card header p{margin-top:4px;color:#718096;font-size:12px}.expense-category-detail-card header>span{display:inline-flex;border-radius:999px;padding:5px 10px;background:#ddf6fa;color:#078ca5;font-size:12px;font-weight:800;white-space:nowrap}.expense-category-detail-wrap{overflow-x:auto}.expense-category-detail-card table{width:100%;min-width:1380px;border-collapse:collapse}.expense-category-detail-card th,.expense-category-detail-card td{padding:12px 14px;border-bottom:1px solid #e8eff4;color:#34475c;font-size:13px;text-align:left;vertical-align:middle}.expense-category-detail-card th{background:#f6f9fc;color:#61748a;font-size:12px;font-weight:800;white-space:nowrap}.expense-category-detail-card td.numeric,.expense-category-detail-card th.numeric{text-align:right;font-variant-numeric:tabular-nums}.expense-category-detail-card tbody tr:hover td{background:#f7fcfd}.expense-category-detail-card tfoot td{border-bottom:0;background:#eaf8fb;color:#173148;font-weight:850}.expense-detail-type{display:inline-flex;align-items:center;border-radius:7px;padding:4px 8px;background:#e8f7fb;color:#11788f;font-size:12px;font-weight:800;white-space:nowrap}.expense-detail-type.no-invoice{background:#fff2e4;color:#a45c19}.expense-detail-type.has-invoice{background:#e8f8ef;color:#23704a}.expense-detail-attachments{display:flex;align-items:center;gap:7px;white-space:nowrap}.expense-detail-attachments button{border:0;border-radius:7px;padding:5px 8px;background:#e9f7fb;color:#078ca5;font:inherit;font-size:12px;font-weight:750;cursor:pointer}.expense-detail-attachments button:hover{background:#d9f2f7}.expense-detail-remark{max-width:240px;white-space:normal;word-break:break-word}.expense-category-detail-empty{height:96px;color:#7a8999!important;text-align:center!important}.expense-category-detail-card .expense-row-actions{white-space:nowrap}
.expense-category-detail-card.patient-refund-detail table{min-width:980px}.expense-detail-attachments .expense-attachment-thumb{display:grid;grid-template-columns:54px auto;align-items:center;gap:8px;padding:4px 9px 4px 4px;background:#eef9fb}.expense-attachment-thumb img{display:block;width:54px;height:42px;border:1px solid #d4e7ec;border-radius:6px;background:#fff;object-fit:cover}.expense-attachment-thumb span{color:#078ca5;font-size:12px;font-weight:800}

.expense-denture-factory-section[hidden]{display:none}.expense-denture-factory-section{overflow:hidden;padding:0!important}.expense-denture-factory-section>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 20px;border-bottom:1px solid #dce9f1;background:linear-gradient(90deg,rgba(232,248,252,.82),rgba(250,252,255,.9))}.expense-denture-factory-section h2,.expense-denture-factory-section p{margin:0}.expense-denture-factory-section h2{color:#172b42;font-size:17px}.expense-denture-factory-section header p{margin-top:4px;color:#718096;font-size:12px}.expense-denture-factory-section header>span{border-radius:999px;padding:5px 10px;background:#ddf6fa;color:#078ca5;font-size:12px;font-weight:800}.expense-denture-factory-grid{display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));gap:16px;padding:20px}.expense-denture-factory-card{display:flex;min-height:190px;padding:24px;flex-direction:column;align-items:flex-start;border:1px solid #d6e7ee;border-radius:18px;background:linear-gradient(145deg,#fff 42%,#e8f9fc);box-shadow:0 12px 28px rgba(26,55,78,.08);color:#20364e;text-align:left;cursor:pointer;transition:.2s ease}.expense-denture-factory-card:hover{border-color:#0aa9c7;box-shadow:0 18px 38px rgba(10,169,199,.16);transform:translateY(-2px)}.expense-denture-factory-card span{color:#0a9bb7;font-size:12px;font-weight:850;letter-spacing:.08em}.expense-denture-factory-card h3{margin:14px 0 8px;font-size:22px}.expense-denture-factory-card strong{color:#08243d;font-size:30px}.expense-denture-factory-card small{margin-top:auto;color:#73859a;font-weight:700}.expense-denture-factory-empty{grid-column:1/-1;padding:48px;color:#7b8b9c;text-align:center}.expense-denture-detail-modal{z-index:270}.expense-denture-detail-card{width:min(1500px,calc(100vw - 36px));max-height:calc(100dvh - 36px);overflow:hidden}.expense-denture-detail-filters{display:grid;grid-template-columns:minmax(320px,1fr) minmax(220px,.55fr);gap:16px;padding:18px 22px;border-bottom:1px solid #dce8ee;background:#f7fbfd}.expense-denture-detail-filters label{display:grid;gap:8px;color:#344b63;font-weight:800}.expense-denture-detail-filters select{min-height:46px;border:1px solid #ccdee7;border-radius:11px;padding:0 12px;background:#fff;color:#263c53;font:inherit}.expense-denture-detail-table{max-height:calc(100dvh - 300px);padding:18px;overflow:auto}.expense-denture-detail-card>.supplier-form-actions{padding:14px 20px;border-top:1px solid #dce8ee}@media(max-width:900px){.expense-denture-factory-grid{grid-template-columns:1fr}.expense-denture-detail-filters{grid-template-columns:1fr}}
.expense-salary-modal .performance-modal-card{width:min(760px,calc(100vw - 32px))}.expense-salary-modal header p{margin:4px 0 0;color:#64748b;font-size:13px}.expense-salary-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px}.expense-salary-detail-grid article{display:grid;gap:6px;border:1px solid #dce8f0;border-radius:10px;padding:13px;background:#f8fbfd}.expense-salary-detail-grid article.primary{border-color:#9edfeb;background:#eafafd}.expense-salary-detail-grid span{color:#64748b;font-size:12px}.expense-salary-detail-grid b{color:#172b42;font-size:18px}.expense-salary-modal footer{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:1px solid #e2e8f0}
.inbound-finance-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}.inbound-finance-fields label{display:grid;gap:6px;color:#415469;font-size:13px;font-weight:750}.inbound-finance-fields input,.inbound-finance-fields select{width:100%;min-height:40px;border:1px solid #cbd8e5;border-radius:9px;padding:0 11px;background:#fff;color:#213247;font:inherit}@media(max-width:760px){.inbound-finance-fields{grid-template-columns:1fr}}
#monthlyExpenseContent.human-cost-only .expense-main-panel>.expense-filter-card,
#monthlyExpenseContent.human-cost-only .expense-main-panel>.performance-tabs,
#monthlyExpenseContent.human-cost-only .expense-main-panel>.performance-table-card,
#monthlyExpenseContent.material-cost-only .expense-main-panel>.expense-filter-card,
#monthlyExpenseContent.material-cost-only .expense-main-panel>.performance-tabs,
#monthlyExpenseContent.material-cost-only .expense-main-panel>.performance-table-card,
#monthlyExpenseContent.denture-cost-only .expense-main-panel>.expense-filter-card,
#monthlyExpenseContent.denture-cost-only .expense-main-panel>.expense-overview-card,
#monthlyExpenseContent.denture-cost-only .expense-main-panel>.performance-tabs,
#monthlyExpenseContent.denture-cost-only .expense-main-panel>.performance-table-card,
#monthlyExpenseContent.reimbursement-cost-only .expense-main-panel>.expense-filter-card,
#monthlyExpenseContent.reimbursement-cost-only .expense-main-panel>.expense-overview-card,
#monthlyExpenseContent.reimbursement-cost-only .expense-main-panel>.performance-tabs,
#monthlyExpenseContent.reimbursement-cost-only .expense-main-panel>.performance-table-card,
#monthlyExpenseContent.misc-cost-only .expense-main-panel>.expense-filter-card,
#monthlyExpenseContent.misc-cost-only .expense-main-panel>.expense-overview-card,
#monthlyExpenseContent.misc-cost-only .expense-main-panel>.performance-tabs,
#monthlyExpenseContent.misc-cost-only .expense-main-panel>.performance-table-card{display:none}
.expense-risk-hint { display: inline-block; margin: 12px 14px 0 0; color: #b45309; font-size: 13px; }
.expense-summary-view { display: flex; gap: 10px; overflow-x: auto; padding: 12px 16px; border-bottom: 1px solid #e2e8f0; }
.expense-summary-view article { display: grid; flex: 0 0 180px; gap: 5px; padding: 10px 12px; border-radius: 7px; background: #eff6ff; }
.expense-summary-view span { color: #64748b; font-size: 12px; }
.expense-summary-view b { color: #1d4ed8; }
.expense-table { min-width: 1900px; }
.expense-table .expense-no-invoice { background: #fffbeb!important; }
.expense-table .expense-no-invoice:hover { background: #fef3c7!important; }
.expense-row-actions { display: flex; gap: 6px; }
.expense-row-actions button { border: 0; background: transparent; color: #1677ff; cursor: pointer; }
.expense-row-actions button:last-child { color: #dc2626; }
.expense-form-card { width: min(820px,calc(100vw - 32px)); }
.expense-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 16px; }
.expense-form-wide { grid-column: 1/-1; }
.expense-denture-factory-field,.expense-denture-sheet-field{border:1px solid rgba(8,169,198,.2);border-radius:14px;padding:16px;background:linear-gradient(135deg,rgba(232,249,253,.82),rgba(242,247,255,.9));box-shadow:0 10px 24px rgba(38,104,132,.07)}.expense-denture-factory-field>span,.expense-denture-sheet-field>span{color:#087f98;font-size:15px}.expense-denture-factory-field>small,.expense-denture-sheet-field>small{color:#71869a;font-size:12px;font-weight:650}.expense-denture-factory-field[hidden],.expense-denture-sheet-field[hidden]{display:none}.expense-denture-sheet-field input[type="file"]{border:1px dashed #8ed5e5;border-radius:11px;padding:11px;background:rgba(255,255,255,.78)}
.expense-form-grid textarea { resize: vertical; }
.expense-form-card footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px; border-top: 1px solid #e2e8f0; }
.expense-advanced-fields { display: grid; gap: 12px; padding: 16px; }
@media(max-width:1400px){.expense-filter-grid{grid-template-columns:repeat(3,minmax(160px,1fr));}}
@media(max-width:900px){.expense-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.expense-filter-grid .expense-time-filter{grid-column:1/-1}.expense-kpis{grid-template-columns:1fr}.expense-salary-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.expense-filter-actions{align-items:flex-start;flex-direction:column;}}
@media(max-width:620px){.finance-time-filter-shell,.finance-time-filter-shell:has(.finance-date-range:not([hidden])){grid-template-columns:1fr}.finance-date-range{min-width:0}.finance-time-mode{width:100%}}
@media(max-width:720px){.expense-reimbursement-grid{grid-template-columns:1fr}.expense-reimbursement-card>header{align-items:stretch;flex-direction:column}.expense-reimbursement-card>header button{width:100%}}
@media(max-width:640px){.expense-misc-card>header{align-items:stretch;flex-direction:column}.expense-misc-card>header button{width:100%}.expense-misc-summary{min-height:130px}.expense-misc-summary strong{font-size:28px}.expense-reimbursement-grid{padding:12px}.expense-reimbursement-grid article{min-height:145px;padding:18px}.expense-reimbursement-grid strong{font-size:28px}}

.denture-record-form-table {
  min-width: 1760px;
}

.denture-record-form-table th:nth-child(7),
.denture-record-form-table td:nth-child(7) {
  width: 340px;
  min-width: 340px;
}

.denture-record-form-table [data-denture-field="registrationNo"] {
  min-width: 320px;
  white-space: nowrap;
}

.denture-delivery-date-picker {
  display: grid;
  grid-template-columns: minmax(142px, 1fr) 42px;
  min-width: 205px;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  background: #fff;
}

.denture-record-form-table .denture-delivery-date-picker [data-denture-field="deliveryTime"] {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 0;
  border-radius: 0;
  padding: 0 10px;
  background: transparent;
  box-shadow: none;
  color: #20364e;
  font: inherit;
}

.denture-delivery-date-picker > button {
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid #e1eaf1;
  background: #f3fbfd;
  color: #078eaa;
  cursor: pointer;
}

.denture-delivery-date-picker > button:hover { background: #e4f8fc; transform: none; }
.denture-delivery-date-picker > button svg { width: 18px; height: 18px; }

.denture-delivery-date-popover {
  position: fixed;
  z-index: 10020;
  overflow: hidden;
  border: 1px solid rgba(9, 171, 201, .24);
  border-radius: 16px;
  padding: 10px;
  background: radial-gradient(circle at 22% 0, rgba(57, 210, 235, .14), transparent 62%), rgba(255, 255, 255, .99);
  box-shadow: 0 22px 48px rgba(20, 65, 88, .22), 0 6px 16px rgba(9, 157, 187, .12);
}

.denture-delivery-date-popover header {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  min-height: 42px;
  border: 0;
  padding: 0;
  background: transparent;
}

.denture-delivery-date-popover header strong { color: #17304b; text-align: center; font-size: 15px; }
.denture-delivery-date-popover header button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: #edfafd; color: #078da9; font-size: 24px; cursor: pointer; }
.denture-delivery-calendar-week, .denture-delivery-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.denture-delivery-calendar-week { padding: 8px 0 5px; color: #72869a; text-align: center; font-size: 12px; font-weight: 750; }
.denture-delivery-calendar-days button { display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: 9px; background: transparent; color: #20364e; font: inherit; cursor: pointer; }
.denture-delivery-calendar-days button:hover { background: #e8f9fc; transform: none; }
.denture-delivery-calendar-days button.outside { color: #aebbc7; }
.denture-delivery-calendar-days button.today { box-shadow: inset 0 0 0 1px #10abc7; color: #078da9; font-weight: 800; }
.denture-delivery-calendar-days button.selected { background: linear-gradient(135deg, #16b6d0, #079ab7); box-shadow: 0 5px 12px rgba(7, 154, 183, .22); color: #fff; font-weight: 800; }
.denture-delivery-date-popover footer { display: flex; justify-content: space-between; margin-top: 7px; border-top: 1px solid rgba(9, 171, 201, .13); padding: 8px 0 0; background: transparent; }
.denture-delivery-date-popover footer button { min-height: 34px; border: 0; border-radius: 8px; padding: 0 10px; background: transparent; color: #078da9; font: inherit; font-weight: 750; cursor: pointer; }
.denture-delivery-date-popover footer button:hover { background: #e7fafe; transform: none; box-shadow: none; }

.expense-denture-detail-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mf-kpis article.mf-kpi-action { cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.mf-kpis article.mf-kpi-action:hover,.mf-kpis article.mf-kpi-action:focus-visible { border-color: rgba(15,143,181,.4); box-shadow: 0 14px 34px rgba(32,112,149,.14); outline: 0; transform: translateY(-2px); }
.mf-kpis article.mf-kpi-action em { position: absolute; right: 18px; bottom: 15px; color: #0b91ad; font-size: 11px; font-style: normal; font-weight: 750; opacity: .82; }
.mf-summary-modal { z-index: 10200; display: grid; place-items: center; padding: 24px; background: rgba(20,38,56,.54); backdrop-filter: blur(6px); }
.mf-summary-card { width: min(780px,calc(100vw - 32px)); overflow: hidden; border-radius: 22px; }
.mf-summary-card .modal-head { background: radial-gradient(circle at 12% 0,rgba(48,205,229,.15),transparent 58%),linear-gradient(120deg,#f9feff,#f4f7ff); }
.mf-summary-card .modal-head p { margin: 0 0 6px; color: #0798b4; font-size: 11px; font-weight: 850; letter-spacing: .16em; }
.mf-summary-card .modal-head h2 { margin: 0; }
.mf-summary-card .modal-head span { display: block; margin-top: 6px; color: #72859a; font-size: 13px; }
.mf-summary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 22px; background: #f6fafc; }
.mf-summary-grid article { position: relative; display: grid; gap: 11px; min-height: 112px; overflow: hidden; border: 1px solid #dce9ef; border-radius: 16px; padding: 20px; background: linear-gradient(145deg,#fff 42%,#eaf9fc); }
.mf-summary-grid article:before { position: absolute; inset: 0 auto 0 0; width: 4px; background: #13a9c4; content: ""; }
.mf-summary-grid article.tone-2:before { background: #3ba47e; }.mf-summary-grid article.tone-3:before { background: #e78d68; }.mf-summary-grid article.tone-4:before { background: #7f8fb0; }.mf-summary-grid article.tone-5:before { background: #c69e3b; }
.mf-summary-grid span { color: #66798c; font-size: 13px; font-weight: 750; }.mf-summary-grid strong { color: #172b42; font-size: 25px; }
.mf-summary-card>footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid #dce8ee; padding: 16px 22px; background: #fff; }
.mf-summary-card>footer div { display: flex; align-items: baseline; gap: 12px; color: #64788b; font-weight: 750; }.mf-summary-card>footer b { color: #078fa9; font-size: 23px; }
.wage-metric-help-card { width: min(920px,calc(100vw - 32px)); }
.wage-metric-help-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 24px; background: #f7fbfd; }
.wage-metric-help-grid article { display: grid; gap: 8px; min-height: 112px; padding: 18px 20px; border: 1px solid #d8e7ee; border-left: 4px solid #12abc5; border-radius: 16px; background: linear-gradient(135deg,#fff,#f1fbfd); }
.wage-metric-help-grid strong { color: #183047; font-size: 16px; }
.wage-metric-help-grid span { color: #6d8294; font-size: 14px; line-height: 1.65; }
.mf-receivable-kpi { align-content: stretch !important; }
.mf-receivable-values { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px; }
.monthly-finance-view .mf-receivable-values>div { min-width:0;border-left:3px solid #90a0b5;padding-left:12px; }
.monthly-finance-view .mf-receivable-values>div:first-child { border-left-color:#d89b37; }
.monthly-finance-view .mf-receivable-values small { display:block;color:#718399;font-size:11px; }
.monthly-finance-view .mf-receivable-values strong { overflow:hidden;margin:6px 0 0;font-size:clamp(20px,1.45vw,27px);text-overflow:ellipsis;white-space:nowrap; }
.mf-receivable-card { width:min(860px,calc(100vw - 32px));overflow:hidden;border-radius:22px; }
.mf-receivable-card .modal-head { background:radial-gradient(circle at 12% 0,rgba(48,205,229,.15),transparent 58%),linear-gradient(120deg,#f9feff,#f4f7ff); }
.mf-receivable-card .modal-head p { margin:0 0 6px;color:#0798b4;font-size:11px;font-weight:850;letter-spacing:.16em; }
.mf-receivable-card .modal-head h2 { margin:0; }.mf-receivable-card .modal-head span { display:block;margin-top:6px;color:#72859a;font-size:13px; }
.mf-receivable-tabs { display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:14px 20px 0;background:#f6fafc; }
.mf-receivable-tabs button { min-height:42px;border:1px solid #d8e6ed;border-radius:11px;background:#fff;color:#65788b;font-weight:800;cursor:pointer; }
.mf-receivable-tabs button.active { border-color:#08a7c4;background:linear-gradient(135deg,#0bb4cf,#078db7);color:#fff;box-shadow:0 7px 16px rgba(7,157,189,.18); }
.mf-receivable-list { display:grid;gap:10px;max-height:min(460px,52vh);overflow:auto;padding:16px 20px 22px;background:#f6fafc; }
.mf-receivable-list article { display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:18px;border:1px solid #dce8ee;border-radius:14px;padding:15px 16px;background:#fff; }
.mf-receivable-list article>div { display:grid;gap:4px; }.mf-receivable-list article>div strong { color:#20334b;font-size:15px; }.mf-receivable-list article>div span { color:#8593a2;font-size:12px; }
.mf-receivable-list article>b { color:#c16d31;font-size:17px;font-variant-numeric:tabular-nums; }
.mf-receivable-list article>button { min-height:36px;border:1px solid #9eddec;border-radius:9px;padding:0 14px;background:#ebfafd;color:#078da9;font-weight:800;cursor:pointer; }
.mf-receivable-list article>button:hover { background:#08a7c4;color:#fff; }
.mf-receivable-empty { padding:54px 20px;color:#8494a5;text-align:center; }
.mf-receivable-card>footer { display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid #dce8ee;padding:16px 22px;background:#fff; }
.mf-receivable-card>footer div { display:flex;align-items:baseline;gap:12px;color:#64788b;font-weight:750; }.mf-receivable-card>footer b { color:#078fa9;font-size:23px; }
@media(max-width:640px){.mf-receivable-list article{grid-template-columns:1fr auto}.mf-receivable-list article>button{grid-column:1/-1}.mf-receivable-card>footer{align-items:flex-start;flex-direction:column}.mf-receivable-values{gap:8px}}
@media(max-width:640px){.mf-summary-grid{grid-template-columns:1fr}.mf-summary-card>footer{align-items:flex-start;flex-direction:column}}
@media(max-width:720px){.wage-metric-help-grid{grid-template-columns:1fr}}

.denture-patient-picker,
.denture-doctor-picker {
  position: relative;
}

.denture-factory-product-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  min-width: 180px;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.denture-factory-product-picker textarea {
  min-width: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.denture-factory-product-picker > button {
  border: 0;
  border-left: 1px solid #d5e0ea;
  background: rgba(240, 249, 252, 0.9);
  color: #527087;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
}

.denture-factory-product-picker > button:hover {
  color: var(--primary);
  background: rgba(8, 169, 198, 0.12);
}

.denture-factory-product-menu {
  position: fixed;
  z-index: 10030;
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow: auto;
  padding: 10px;
  border: 1px solid rgba(180, 211, 224, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(16px);
}

.denture-factory-product-menu > button {
  display: grid;
  grid-template-columns: minmax(120px, 1.1fr) minmax(100px, 1fr);
  gap: 5px 12px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(216, 228, 236, 0.95);
  border-radius: 11px;
  background: linear-gradient(135deg, #fff, #f5fbfd);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.denture-factory-product-menu > button:hover {
  border-color: rgba(8, 169, 198, 0.45);
  background: rgba(8, 169, 198, 0.08);
}

.denture-factory-product-menu strong,
.denture-factory-product-menu small {
  grid-column: 1 / -1;
}

.denture-factory-product-menu span,
.denture-factory-product-menu small,
.denture-factory-product-menu > p {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.denture-factory-product-menu span b {
  margin-right: 6px;
  color: #7890a2;
}

.denture-patient-suggestions,
.denture-doctor-suggestions {
  position: fixed;
  z-index: 10020;
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
  backdrop-filter: blur(14px);
}

.denture-patient-suggestions.hidden,
.denture-doctor-suggestions.hidden {
  display: none;
}

.denture-patient-suggestions button,
.denture-doctor-suggestions button {
  display: grid;
  gap: 3px;
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 9px 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.denture-patient-suggestions button:hover,
.denture-doctor-suggestions button:hover {
  background: rgba(8, 169, 198, 0.1);
}

.denture-patient-suggestions strong,
.denture-doctor-suggestions strong {
  font-size: 14px;
  font-weight: 900;
}

.denture-patient-suggestions small,
.denture-patient-suggestions > span,
.denture-doctor-suggestions small,
.denture-doctor-suggestions > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.denture-tooth-cell {
  width: 100%;
  min-width: 110px;
  min-height: 40px;
  border: 1px solid #d5e0ea;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 800;
  white-space: normal;
}

.denture-tooth-cell.treatment-tooth-map {
  display: inline-block;
  width: var(--invoice-tooth-map-width, 92px);
  min-width: var(--invoice-tooth-map-width, 92px);
  height: 58px;
  vertical-align: middle;
}

.denture-tooth-cell em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-style: normal;
  font-size: 13px;
  font-weight: 900;
}

.denture-record-form-card [data-save-denture-record-form] {
  pointer-events: auto;
  opacity: 1;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  text-indent: 0;
}

.denture-record-form-card [data-save-denture-record-form],
.denture-record-form-card [data-save-denture-record-form] span {
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.denture-record-upload-box {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 10px 14px;
}

.denture-record-upload-trigger {
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 52px;
  cursor: pointer;
}

.denture-record-upload-trigger input {
  display: none;
}

.denture-record-upload-trigger > button {
  display: grid;
  place-items: center;
  gap: 4px;
  width: 100%;
  min-height: 72px;
  border: 1px dashed rgba(10, 169, 199, .45);
  border-radius: 12px;
  background: rgba(241, 251, 255, .82);
  cursor: pointer;
  font: inherit;
}

.denture-record-upload-trigger > button:hover,
.denture-record-upload-trigger > button:focus-visible {
  border-color: #0aa9c7;
  box-shadow: 0 0 0 4px rgba(10, 169, 199, .1);
  outline: none;
}

.denture-record-upload-trigger span {
  color: var(--muted);
  font-weight: 900;
}

.denture-record-upload-trigger small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.denture-ledger-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.denture-export-card {
  width: min(620px, calc(100vw - 32px));
}

.denture-export-body {
  padding: 24px;
}

.denture-export-body > label {
  display: grid;
  gap: 10px;
  color: var(--ink);
  font-weight: 850;
}

.denture-export-range-trigger {
  min-height: 50px;
}

.denture-record-upload-preview {
  align-items: center;
  min-height: 52px;
  gap: 10px;
}

.denture-record-upload-preview .supplier-upload-empty {
  align-self: center;
  margin: 0;
}

.denture-record-upload-preview .inbound-upload-thumb {
  grid-template-columns: 74px 86px;
  justify-items: center;
  align-items: center;
  gap: 8px;
}

.denture-record-upload-preview .inbound-upload-thumb > button:first-child {
  width: 74px;
  height: 52px;
  border-radius: 10px;
}

.denture-record-upload-preview .inbound-upload-thumb img {
  object-fit: contain;
  background: #fff;
}

.denture-record-upload-preview .inbound-upload-thumb .light-btn {
  min-width: 86px;
  height: 42px;
  padding: 0 12px;
}

.denture-tooth-modal {
  z-index: 260;
}

.denture-tooth-card {
  width: min(620px, calc(100vw - 42px));
}

.denture-tooth-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 22px 26px;
}

.denture-tooth-grid label {
  display: grid;
  cursor: pointer;
}

.denture-tooth-grid input {
  position: absolute;
  opacity: 0;
}

.denture-tooth-grid span {
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-weight: 900;
}

.denture-tooth-grid input:checked + span {
  border-color: #08a9c6;
  background: rgba(8, 169, 198, 0.12);
  color: #08a9c6;
}

.denture-form-card {
  width: min(1280px, calc(100vw - 42px));
}

.patient-denture-panel {
  margin: 28px 12px;
}

.denture-mini-stat {
  position: relative;
  padding-right: 56px;
}

.denture-mini-stat button {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  transform: translateY(-50%);
  background: #08a9c6;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
}

.inbound-record-section {
  display: grid;
  gap: 12px;
}

[data-inbound-records-region] {
  min-width: 0;
}

.inventory-inbound-module-card {
  padding-top: 20px;
}

.inbound-record-switcher {
  border: 1px solid #dce8ee;
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(244, 251, 253, .9));
  box-shadow: 0 10px 28px rgba(40, 77, 99, .07);
}

.inbound-record-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.inbound-record-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: 70px;
  border: 1px solid #d8e6ed;
  border-radius: 12px;
  padding: 14px 18px;
  background: #fff;
  color: #263d53;
  cursor: pointer;
  transition: border-color .2s ease-out, box-shadow .2s ease-out, background .2s ease-out;
}

.inbound-record-tabs button:hover { border-color: #9edbe6; }
.inbound-record-tabs button.active {
  border-color: #10abc6;
  background: linear-gradient(135deg, #effcff, #f8feff);
  box-shadow: inset 0 -3px 0 #10abc6, 0 8px 20px rgba(16, 171, 198, .1);
}
.inbound-record-tabs strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbound-record-tabs span { flex: 0 0 auto; margin-left: 12px; color: #00a6c2; font-weight: 800; }

.inbound-record-tab-panel { min-width: 0; }

.inbound-project-table-wrap {
  height: 420px;
  max-width: 100%;
  overflow: auto;
  border: 1px solid #e0e9ee;
  border-radius: 12px;
  background: #fff;
}

.inbound-project-table {
  width: 1680px;
  min-width: 1680px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.inbound-project-table th,
.inbound-project-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #e6edf1;
  white-space: nowrap;
  text-align: left;
}

.inbound-project-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f7fa;
  color: #53687b;
  font-size: 13px;
}

.inbound-project-table tbody tr:last-child td { border-bottom: 0; }
.inbound-project-table tbody tr:hover { background: #f5fbfc; }
.inbound-project-table td strong { color: #20384f; }
.inbound-project-table th:last-child,
.inbound-project-table td:last-child {
  width: 250px;
  text-align: right;
}

.inbound-project-relation {
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbound-project-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  width: 100%;
}

@media (max-width: 900px) {
  .inbound-record-tabs { gap: 8px; }
  .inbound-record-tabs button { padding: 12px; }
}

.inbound-project-actions button {
  min-height: 30px;
  border: 1px solid #cfe1e9;
  border-radius: 7px;
  padding: 0 10px;
  background: #fff;
  color: #078da8;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.inbound-project-actions button:hover { border-color: #59c7d9; background: #edfafd; }
.inbound-project-actions button.danger { border-color: #f0cbc8; color: #b6473f; }

.inbound-project-status {
  display: inline-flex;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 850;
}

.inbound-project-status.available { background: #e9f8fb; color: #078ca8; }
.inbound-project-status.used { background: #dcfce7; color: #15803d; }

.inbound-record-section + .inbound-record-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(220, 226, 234, 0.9);
}

.inbound-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.inbound-section-title h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.inbound-section-title span {
  color: #08a9c6;
  font-weight: 900;
}

.inbound-record-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.inbound-flip-card {
  height: 270px;
  min-height: 270px;
  max-height: 270px;
  padding: 0;
  overflow: visible;
  cursor: pointer;
  perspective: 1200px;
}

.inbound-card-inner {
  position: relative;
  height: 100%;
  min-height: 270px;
  max-height: 270px;
  transition: transform 0.25s ease;
  transform-style: preserve-3d;
}

.inbound-flip-card.flipped .inbound-card-inner {
  transform: rotateY(180deg);
}

.inbound-card-face {
  position: absolute;
  inset: 0;
  display: grid;
  box-sizing: border-box;
  height: 100%;
  max-height: 270px;
  pointer-events: none;
  visibility: hidden;
  backface-visibility: hidden;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.9);
}

.inbound-card-front {
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 28px;
  text-align: center;
  pointer-events: auto;
  visibility: visible;
}

.inbound-flip-card.flipped .inbound-card-front {
  pointer-events: none;
  visibility: hidden;
}

.inbound-card-front span {
  color: #08a9c6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.inbound-card-front h2 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
}

.inbound-card-front p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.drug-inbound-card {
  height: 270px;
  min-height: 270px;
  max-height: 270px;
}

.drug-inbound-card .inbound-card-inner {
  height: 100%;
  min-height: 270px;
  max-height: 270px;
}

.inbound-card-back {
  align-content: start;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px 18px;
  overflow: auto;
  transform: rotateY(180deg);
}

.inbound-flip-card.flipped .inbound-card-back {
  pointer-events: auto;
  visibility: visible;
}

.inbound-back-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.inbound-back-head h2 {
  margin: 0;
  font-size: 120%;
}

.inbound-back-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.inbound-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.supplier-card-actions.inbound-back-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  justify-content: stretch;
  flex-wrap: nowrap;
  gap: 10px;
  width: min(88%, 620px);
  margin: 0 auto;
}

.supplier-card-actions.inbound-back-actions .compact {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  padding: 0 12px;
}

.drug-card-company {
  display: grid;
  gap: 6px;
  min-width: min(520px, 100%);
}

.drug-card-company span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.drug-card-company textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  padding: 9px 12px;
  resize: none;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.88);
  color: var(--text);
  font: inherit;
  font-weight: 900;
}

.inbound-card-table-wrap {
  align-self: stretch;
  width: min(88%, 620px);
  max-width: 100%;
  min-width: 0;
  max-height: calc(100% - 10px);
  margin: 0 auto 10px;
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-gutter: stable both-edges;
}

.inbound-detail-table {
  width: max-content;
  min-width: 980px;
  font-size: 13px;
}

.drug-inbound-detail-table {
  min-width: 1880px;
}

.drug-inbound-table-wrap {
  max-height: 188px;
}

.drug-image-group-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.drug-image-group-summary span {
  border: 1px solid #d5e0ea;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(248, 252, 255, 0.8);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.inbound-detail-table th,
.inbound-detail-table td {
  padding: 12px 12px;
  white-space: nowrap;
}

.inbound-image-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  max-height: 54px;
  overflow-x: auto;
}

.inbound-image-strip > strong {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 28px;
  font-weight: 900;
}

.inbound-detail-preview-modal {
  z-index: 158;
}

.inbound-detail-preview-card {
  width: min(1180px, calc(100vw - 42px));
  max-height: min(90vh, 860px);
  border-radius: 22px;
}

.inbound-detail-preview-card .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(218, 226, 235, 0.9);
}

.inbound-detail-preview-card .modal-head h2 {
  margin: 0;
}

.inbound-detail-preview-card .modal-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.inbound-detail-preview-body {
  display: grid;
  gap: 18px;
  padding: 22px 26px 8px;
}

.inbound-detail-preview-table-wrap {
  max-height: min(46vh, 420px);
}

.inbound-detail-preview-images {
  display: grid;
  gap: 10px;
}

.inbound-detail-preview-images > strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
}

.inbound-detail-preview-actions {
  padding: 18px 26px 26px;
}

.inbound-image-strip button {
  flex: 0 0 auto;
  overflow: hidden;
  width: 80px;
  height: 50px;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  padding: 0;
  background: #fff;
  cursor: zoom-in;
}

.inbound-image-strip button.active {
  border-color: #08a9c6;
  box-shadow: 0 0 0 2px rgba(8, 169, 198, 0.16);
}

.inbound-image-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inbound-image-strip > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.inventory-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.inventory-table-wrap {
  overflow: auto;
  border: 1px solid #e3e8ef;
  border-radius: 14px;
  background: #fff;
}

.inventory-module-table {
  width: 100%;
  border-collapse: collapse;
}

.inventory-module-table th,
.inventory-module-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e8edf3;
  text-align: left;
}

.inventory-module-table th {
  background: #f8fafc;
  color: #1f2937;
  font-weight: 900;
}

.system-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  gap: 16px;
}

.system-panel {
  padding: 18px;
  border: 1px solid #d9dfe6;
  background: #fff;
}

.system-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.system-actions select {
  min-width: 150px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d7e0e8;
  border-radius: 6px;
  background: #fff;
  color: #384350;
  font-weight: 700;
}

.system-list {
  display: grid;
  gap: 8px;
}

.system-list-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid #e3e8ee;
  background: #f8fafc;
  color: #384350;
}

.system-list-row small {
  display: block;
  margin-top: 4px;
  color: #6b7684;
  font-size: 12px;
  line-height: 1.35;
}

.settings-card-grid {
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 18px;
  align-items: start;
}

.settings-content .settings-glow-card {
  position: relative;
  isolation: isolate;
  min-height: 220px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(214, 222, 232, 0.9);
  border-radius: 20px;
  background:
    radial-gradient(360px 360px at var(--settings-card-x, 50%) var(--settings-card-y, 0%), rgba(8, 169, 198, 0.13), transparent 56%),
    rgba(255, 255, 255, 0.84);
  box-shadow: 0 20px 48px rgba(20, 36, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.settings-content .settings-glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px 260px at var(--settings-card-x, 50%) var(--settings-card-y, 0%), rgba(8, 169, 198, 0.9), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.settings-content .settings-glow-card:hover {
  transform: translateY(-2px);
  border-color: rgba(8, 169, 198, 0.28);
  box-shadow: 0 24px 58px rgba(20, 36, 56, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.settings-content .settings-glow-card:hover::before {
  opacity: 1;
}

.glow-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(214, 222, 232, 0.9);
  border-radius: 20px;
  background:
    radial-gradient(360px 360px at var(--settings-card-x, 50%) var(--settings-card-y, 0%), rgba(8, 169, 198, 0.13), transparent 56%),
    rgba(255, 255, 255, 0.84);
  box-shadow: 0 20px 48px rgba(20, 36, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.glow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px 260px at var(--settings-card-x, 50%) var(--settings-card-y, 0%), rgba(8, 169, 198, 0.9), transparent 62%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.glow-card:hover {
  transform: translateY(-2px);
  border-color: rgba(8, 169, 198, 0.28);
  box-shadow: 0 24px 58px rgba(20, 36, 56, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.glow-card:hover::before {
  opacity: 1;
}

.settings-content .settings-glow-card .panel-head {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(220, 226, 234, 0.82);
}

.settings-content .settings-glow-card .panel-head h2 {
  font-size: 120%;
  font-weight: 900;
}

.settings-content .settings-glow-card .panel-head p {
  margin-top: 5px;
  color: #6b7686;
}

.settings-content .settings-glow-card .system-actions {
  gap: 10px;
  margin-bottom: 14px;
}

.settings-content .settings-glow-card .system-actions input,
.settings-content .settings-glow-card .system-actions select {
  border-color: rgba(203, 213, 225, 0.9);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
}

/* 收费项目分类菜单需要越过卡片底部完整显示。 */
.settings-content [data-settings-panel="charge-projects"]:has(.system-card-select.open) {
  z-index: 80;
  overflow: visible;
}

.settings-content [data-settings-panel="charge-projects"] .system-actions:has(.system-card-select.open) {
  position: relative;
  z-index: 90;
}

.settings-content [data-settings-panel="charge-projects"] .system-card-select.open,
.settings-content [data-settings-panel="charge-projects"] .system-card-select-menu {
  z-index: 100;
}

.settings-content .settings-glow-card .system-list {
  display: grid;
  gap: 10px;
}

.settings-content .settings-glow-card .system-list-row {
  min-height: 62px;
  padding: 14px;
  border: 1px solid rgba(218, 225, 234, 0.86);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.82);
  box-shadow: 0 10px 24px rgba(31, 41, 55, 0.04);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.settings-content .settings-glow-card .system-list-row:hover {
  transform: translateY(-1px);
  border-color: rgba(8, 169, 198, 0.28);
  background: rgba(255, 255, 255, 0.94);
}

.settings-content .settings-glow-card .system-row-actions {
  gap: 8px;
}

.settings-content .settings-glow-card .system-row-actions .light-btn {
  min-height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.settings-content .settings-glow-card .empty-state {
  min-height: 120px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(177, 189, 204, 0.8);
  border-radius: 14px;
  background: rgba(248, 250, 252, 0.58);
  color: #6b7686;
}

.settings-content .settings-panel-single {
  max-width: 1160px;
}

.system-project-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.system-project-actions b {
  min-width: 78px;
  text-align: right;
}

.system-icon-action {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #d7e0e8;
  border-radius: 6px;
  background: #fff;
  color: #526171;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.system-icon-action:hover {
  border-color: #08a9c6;
  color: #008dab;
}

.system-icon-action.danger {
  font-size: 22px;
}

.system-icon-action.danger:hover {
  border-color: #efb2b2;
  color: #c43d3d;
}

.settings-submenu-label {
  display: block;
  margin: 12px 14px 5px;
  color: #7890a3;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.medical-insurance-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(170px, 1fr) minmax(210px, 1.3fr) auto auto;
  align-items: center;
}

/* Keep the province/city option layers outside the compact reference panel. */
#system [data-settings-panel="medical-insurance-references"] {
  overflow: visible !important;
}

#system .settings-content:has([data-settings-panel="medical-insurance-references"] .system-card-select.open) {
  overflow: visible !important;
}

#system [data-settings-panel="medical-insurance-references"]:has(.system-card-select.open) {
  z-index: 80;
}

#system [data-settings-panel="medical-insurance-references"] .medical-insurance-toolbar,
#system [data-settings-panel="medical-insurance-references"] .system-actions {
  overflow: visible;
}

#system [data-settings-panel="medical-insurance-references"] .system-card-select.open {
  z-index: 90;
}

#system [data-settings-panel="medical-insurance-references"] .system-card-select-menu {
  z-index: 100;
  max-height: min(420px, 50dvh);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgba(231, 239, 234, .38) rgba(255, 255, 255, .06);
  scrollbar-gutter: stable;
}

#system [data-settings-panel="medical-insurance-references"] .system-card-select-menu::-webkit-scrollbar {
  width: 8px;
}

#system [data-settings-panel="medical-insurance-references"] .system-card-select-menu::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}

#system [data-settings-panel="medical-insurance-references"] .system-card-select-menu::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(231, 239, 234, .38);
  background-clip: padding-box;
}

.medical-insurance-toolbar button[hidden] {
  display: none !important;
}

.medical-insurance-toolbar select,
.medical-import-conflict select {
  min-height: 38px;
  border: 1px solid #d7e0e8;
  border-radius: 6px;
  background: #fff;
  color: #26384a;
  padding: 0 11px;
  font: inherit;
}

.medical-insurance-toolbar select:disabled,
.medical-insurance-toolbar button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.medical-insurance-location-note {
  margin: 2px 0 14px;
  padding: 11px 13px;
  border-left: 3px solid #0aa9c7;
  border-radius: 0 6px 6px 0;
  background: #f1fafc;
  color: #587083;
  font-size: 13px;
}

.medical-insurance-list .system-project-actions b {
  min-width: 118px;
  color: #087f98;
  font-size: 17px;
}

.medical-insurance-list .system-list-row small em {
  margin-left: 7px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e9f7fa;
  color: #078ba5;
  font-style: normal;
}

.medical-insurance-form textarea {
  width: 100%;
  resize: vertical;
  border: 1px solid #d7e0e8;
  border-radius: 6px;
  padding: 10px;
  font: inherit;
}

.medical-insurance-form .wide { grid-column: 1 / -1; }

.medical-import-conflict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #526171;
  font-weight: 700;
}

.medical-import-preview-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.medical-import-preview-table th,
.medical-import-preview-table td { padding: 8px; border-bottom: 1px solid #e3ebf1; text-align: left; }
.medical-import-preview-table th { color: #526171; background: #f5f9fc; }
.medical-import-error { color: #bd3d3d; }

.medical-region-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}
.medical-region-summary span {
  padding: 10px 14px;
  border: 1px solid #d9e7ee;
  border-radius: 8px;
  background: #f7fbfd;
  color: #587083;
}
.medical-region-summary strong { margin-right: 5px; color: #078ba5; font-size: 20px; }
.medical-region-list { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.medical-region-list > button {
  position: relative;
  padding: 12px 34px 12px 12px;
  border: 1px solid #dfe9ef;
  border-radius: 8px;
  background: #fff;
  color: #26384a;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.medical-region-list > button:hover { border-color: #8dd7e5; background: #f1fafc; transform: translateY(-1px); }
.medical-region-list > button:focus-visible { outline: 3px solid rgba(10,169,199,.2); outline-offset: 2px; }
.medical-region-list > button > span { position: absolute; top: 50%; right: 13px; color: #0aa9c7; font-size: 24px; transform: translateY(-52%); }
.medical-region-list strong,.medical-region-list small { display: block; }
.medical-region-list small { margin-top: 4px; color: #7b8d9d; }
.medical-region-card-status {
  display: inline-flex;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f1f4f6;
  color: #718291;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}
.medical-region-card-status.complete { background: #e3f7ef; color: #08795e; }
.medical-region-card-status.partial { background: #e7f6fa; color: #087f99; }
.medical-region-card-status.empty,
.medical-region-card-status.loading { background: #f1f4f6; color: #718291; }
.medical-region-card-status.error { background: #fff0f0; color: #a74a4a; }

.medical-region-city-card { width: min(720px, calc(100vw - 32px)); max-height: min(780px, calc(100dvh - 48px)); overflow: hidden; }
.medical-region-city-loading { padding: 28px; color: #6d8293; text-align: center; }
.medical-region-city-list { display: grid; gap: 8px; max-height: 590px; overflow: auto; padding: 4px 22px 24px; }
.medical-region-city-list > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #e0e9ef;
  border-radius: 8px;
  background: #fff;
  color: #26384a;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.medical-region-city-list > button:hover { border-color: #8dd7e5; background: #f1fafc; transform: translateX(2px); }
.medical-region-city-list > button:focus-visible { outline: 3px solid rgba(10,169,199,.2); outline-offset: 1px; }
.medical-region-city-list span strong,.medical-region-city-list span small { display: block; }
.medical-region-city-list span small { margin-top: 3px; color: #8092a1; }
.medical-region-city-list em { flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 800; }
.medical-region-city-list em.maintained { background: #e2f7ee; color: #13835f; }
.medical-region-city-list em.pending { background: #edf1f4; color: #71808d; }

@media (max-width: 980px) {
  .medical-insurance-toolbar { grid-template-columns: 1fr 1fr; }
  .medical-insurance-toolbar select:nth-child(3) { grid-column: 1 / -1; }
  .medical-region-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .medical-insurance-toolbar { grid-template-columns: 1fr; }
  .medical-insurance-toolbar select:nth-child(3) { grid-column: auto; }
  .medical-region-list { grid-template-columns: 1fr; }
}

.consent-template-actions {
  align-items: center;
}

.consent-template-actions input,
.consent-template-actions select {
  height: 36px;
  border: 1px solid #d7e0e8;
  border-radius: 6px;
  background: #fff;
  color: #1f2937;
  font: inherit;
  font-size: 13px;
  padding: 0 10px;
}

.consent-template-actions input {
  min-width: 260px;
  flex: 1 1 260px;
}

.consent-template-row.disabled {
  opacity: 0.58;
}

.consent-template-form-modal { z-index:13200; padding:22px; background:rgba(17,38,56,.5); backdrop-filter:blur(12px) saturate(112%); }
.consent-template-form-card { display:grid; grid-template-rows:auto minmax(0,1fr); width:min(880px,calc(100vw - 44px)); height:min(880px,calc(100dvh - 44px)); overflow:hidden; border:1px solid rgba(20,174,203,.28); border-radius:22px; background:linear-gradient(145deg,rgba(253,254,255,.99),rgba(241,249,253,.98)); box-shadow:0 32px 86px rgba(17,49,72,.3),inset 0 1px 0 rgba(255,255,255,.95); }
.consent-template-form-card>header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:20px 24px 18px; border-bottom:1px solid rgba(8,169,198,.15); background:radial-gradient(circle at 18% 20%,rgba(49,202,226,.13),transparent 34%),linear-gradient(110deg,rgba(235,251,254,.96),rgba(249,251,255,.9)); }
.consent-template-form-card>header>div { min-width:0; }
.consent-template-form-card>header span { color:#078ea9; font-size:11px; font-weight:900; letter-spacing:.12em; }
.consent-template-form-card h2 { margin:5px 0 6px; color:#172b42; font-size:22px; line-height:1.25; }
.consent-template-form-card>header p { margin:0; color:#718498; font-size:13px; }
.consent-template-form-card>header .icon-btn { flex:0 0 auto; border:1px solid rgba(8,169,198,.18); background:rgba(255,255,255,.82); color:#436079; }
.consent-template-form { display:grid; grid-template-rows:minmax(0,1fr) auto; min-height:0; }
.consent-template-form-body { display:grid; align-content:start; gap:16px; min-height:0; overflow:auto; padding:22px 24px 26px; }
.consent-template-form-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(220px,.75fr); gap:14px; }
.consent-template-form label:not(.check-line) { display:grid; gap:7px; color:#43586d; font-size:13px; font-weight:850; }
.consent-template-form input:not([type="checkbox"]),.consent-template-form textarea { width:100%; border:1px solid rgba(154,183,200,.48); border-radius:11px; background:rgba(255,255,255,.94); color:#24384d; font:inherit; padding:10px 12px; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.consent-template-form input:not([type="checkbox"]) { min-height:46px; }
.consent-template-form textarea { resize:vertical; min-height:92px; line-height:1.65; }
.consent-template-form textarea[name="contentText"] { min-height:300px; font-size:14px; }
.consent-template-form input:not([type="checkbox"]):focus,.consent-template-form textarea:focus { outline:0; border-color:#35b7cd; background:#fff; box-shadow:0 0 0 4px rgba(8,169,198,.1); }
.consent-template-file-field { padding:14px; border:1px solid rgba(151,184,201,.35); border-radius:13px; background:rgba(240,248,251,.78); }
.consent-template-file-field input[type="file"] { padding:6px; background:#fff; }
.consent-template-file-field input[type="file"]::file-selector-button { min-height:32px; margin-right:10px; border:1px solid rgba(8,169,198,.28); border-radius:8px; padding:0 12px; background:#edf9fb; color:#078ba5; font:inherit; font-weight:800; cursor:pointer; }
.consent-template-file-field small { color:#7a8b9c; font-size:12px; font-weight:650; }
.consent-template-file-note { display:flex; align-items:center; gap:12px; margin:0; padding:12px 14px; border:1px solid rgba(8,169,198,.18); border-radius:11px; background:#f2fafc; color:#536b7f; font-size:13px; }
.consent-template-file-note span { flex:0 0 auto; color:#078da8; font-weight:850; }
.consent-template-file-note strong { min-width:0; overflow-wrap:anywhere; color:#385166; }
.consent-template-enabled { display:flex; align-items:center; gap:12px; min-height:66px; margin:0; padding:12px 14px; border:1px solid rgba(151,184,201,.35); border-radius:13px; background:rgba(255,255,255,.8); cursor:pointer; }
.consent-template-enabled input { width:19px; height:19px; flex:0 0 auto; accent-color:#08a9c6; }
.consent-template-enabled span { display:grid; gap:4px; }
.consent-template-enabled strong { color:#2f465b; font-size:13px; }
.consent-template-enabled small { color:#7a8b9c; font-size:12px; }
.consent-template-form>footer { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:15px 24px 18px; border-top:1px solid rgba(8,169,198,.14); background:rgba(252,254,255,.97); box-shadow:0 -10px 24px rgba(39,85,108,.04); }
.consent-template-form>footer button { min-width:108px; min-height:42px; border-radius:10px; white-space:nowrap; }
.consent-template-form>footer .save-btn { border-color:#079fbd; background:linear-gradient(135deg,#0bb4cf,#078db7); color:#fff; box-shadow:0 8px 20px rgba(7,157,189,.18); }
@media(max-width:700px){.consent-template-form-modal{align-items:end;padding:0}.consent-template-form-card{width:100vw;height:94dvh;border-width:1px 0 0;border-radius:20px 20px 0 0}.consent-template-form-card>header{padding:17px 16px 15px}.consent-template-form-body{padding:16px}.consent-template-form-grid{grid-template-columns:1fr}.consent-template-form textarea[name="contentText"]{min-height:260px}.consent-template-form>footer{display:grid;grid-template-columns:1fr 1fr;padding:12px 16px 16px}.consent-template-form>footer button{width:100%}}
@media(prefers-reduced-motion:reduce){.consent-template-form-modal *{scroll-behavior:auto!important;transition:none!important}}

.consent-template-preview-modal { z-index:13200; padding:22px; background:rgba(17,38,56,.5); backdrop-filter:blur(12px) saturate(112%); }
.consent-template-preview-card { display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:min(980px,calc(100vw - 44px)); height:min(820px,calc(100dvh - 44px)); overflow:hidden; border:1px solid rgba(20,174,203,.28); border-radius:22px; background:linear-gradient(145deg,rgba(253,254,255,.99),rgba(241,249,253,.98)); box-shadow:0 32px 86px rgba(17,49,72,.3),inset 0 1px 0 rgba(255,255,255,.95); }
.consent-template-preview-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:20px 24px 18px; border-bottom:1px solid rgba(8,169,198,.15); background:radial-gradient(circle at 18% 20%,rgba(49,202,226,.13),transparent 34%),linear-gradient(110deg,rgba(235,251,254,.96),rgba(249,251,255,.9)); }
.consent-template-preview-head>div { min-width:0; }
.consent-template-preview-head>div>span { color:#078ea9; font-size:11px; font-weight:900; letter-spacing:.12em; }
.consent-template-preview-head h2 { margin:5px 0 8px; color:#172b42; font-size:22px; line-height:1.25; }
.consent-template-preview-head p { display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; margin:0; color:#62768a; font-size:13px; }
.consent-template-preview-head p small { position:relative; color:#75889a; font:inherit; }
.consent-template-preview-head p small::before { display:inline-block; width:1px; height:12px; margin-right:12px; background:#cad9e3; content:""; vertical-align:-2px; }
.consent-template-preview-head .icon-btn { flex:0 0 auto; border:1px solid rgba(8,169,198,.18); background:rgba(255,255,255,.82); color:#436079; }
.consent-template-preview-stage { min-height:0; overflow:auto; padding:22px; background:linear-gradient(180deg,#edf5f8,#f5f9fb); }
.consent-template-preview-document { width:min(760px,100%); min-height:100%; margin:0 auto; padding:42px 48px; border:1px solid #dce6ec; border-radius:14px; background:#fff; box-shadow:0 14px 34px rgba(29,70,94,.1); }
.consent-template-preview-document pre { margin:0; color:#24374a; font:15px/1.9 "PingFang SC","Microsoft YaHei",sans-serif; white-space:pre-wrap; word-break:break-word; }
.consent-template-preview-frame { display:block; width:100%; height:100%; min-height:560px; border:0; border-radius:14px; background:#fff; }
.consent-template-preview-image { display:block; max-width:100%; max-height:100%; margin:auto; border-radius:12px; background:#fff; box-shadow:0 14px 34px rgba(29,70,94,.12); object-fit:contain; }
.consent-template-preview-loading { display:grid; gap:14px; width:min(720px,100%); margin:20px auto; padding:42px 48px; border:1px solid #dce8ee; border-radius:14px; background:#fff; }
.consent-template-preview-loading i { display:block; height:12px; border-radius:6px; background:#e7eff3; }
.consent-template-preview-loading i:nth-child(2) { width:88%; }
.consent-template-preview-loading i:nth-child(3) { width:94%; }
.consent-template-preview-loading i:nth-child(4) { width:64%; }
.consent-template-preview-unsupported { display:grid; place-items:center; align-content:center; min-height:320px; padding:42px; border:1px dashed #bfd5e0; border-radius:14px; background:rgba(255,255,255,.76); text-align:center; }
.consent-template-preview-unsupported strong { color:#24394e; font-size:18px; }
.consent-template-preview-unsupported p { max-width:46ch; margin:10px 0 0; color:#718396; line-height:1.7; }
.consent-template-preview-unsupported.error { border-color:rgba(204,91,73,.3); background:#fff8f6; }
.consent-template-preview-unsupported.error strong { color:#aa4939; }
.consent-template-preview-actions { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 24px 18px; border-top:1px solid rgba(8,169,198,.14); background:rgba(252,254,255,.96); }
.consent-template-preview-actions p { margin:0; color:#75879a; font-size:12px; }
.consent-template-preview-actions>div { display:flex; gap:10px; flex:0 0 auto; }
.consent-template-preview-actions button { min-height:42px; padding:0 18px; border-radius:10px; white-space:nowrap; }
@media(max-width:700px){.consent-template-preview-modal{align-items:end;padding:0}.consent-template-preview-card{width:100vw;height:94dvh;border-width:1px 0 0;border-radius:20px 20px 0 0}.consent-template-preview-head{padding:17px 16px 15px}.consent-template-preview-stage{padding:12px}.consent-template-preview-document{padding:28px 22px}.consent-template-preview-actions{align-items:stretch;padding:12px 16px 16px}.consent-template-preview-actions p{display:none}.consent-template-preview-actions>div{display:grid;grid-template-columns:1fr 1fr;width:100%}.consent-template-preview-actions button{width:100%}}
@media(prefers-reduced-motion:reduce){.consent-template-preview-modal *{scroll-behavior:auto!important;transition:none!important}}
@media print{
  body.printing-consent-template>*:not(#consentTemplatePreviewModal){display:none!important}
  body.printing-consent-template #consentTemplatePreviewModal{position:static!important;display:block!important;padding:0!important;background:#fff!important;backdrop-filter:none!important}
  body.printing-consent-template .consent-template-preview-card{display:block!important;width:auto!important;height:auto!important;overflow:visible!important;border:0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important}
  body.printing-consent-template .consent-template-preview-head,
  body.printing-consent-template .consent-template-preview-actions{display:none!important}
  body.printing-consent-template .consent-template-preview-stage{overflow:visible!important;padding:0!important;background:#fff!important}
  body.printing-consent-template .consent-template-preview-document{width:auto!important;min-height:0!important;margin:0!important;padding:8mm 10mm!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  body.printing-consent-template .consent-template-preview-document pre{color:#000!important;font:11.5pt/1.52 "SimSun","Songti SC",serif!important;white-space:pre-wrap!important}
  @page{size:A4 portrait;margin:8mm}
}

.system-combo-row.disabled {
  opacity: 0.58;
}

.charge-combo-form-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(1180px, calc(100vw - 48px));
  max-height: min(90vh, 860px);
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
}

.charge-combo-form-card header,
.charge-combo-form-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid #dde4eb;
}

.charge-combo-form-card header h2 {
  margin: 0 0 4px;
  color: #1f2833;
  font-size: 20px;
}

.charge-combo-form-card header span,
.charge-combo-form-card footer span {
  color: #667386;
  font-size: 14px;
  font-weight: 900;
}

.charge-combo-form-card footer {
  border-top: 1px solid #dde4eb;
  border-bottom: 0;
}

.charge-combo-form-card footer > div {
  display: flex;
  gap: 10px;
}

.charge-combo-form-meta {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr);
  gap: 12px;
  padding: 16px 22px;
  border-bottom: 1px solid #edf1f5;
}

.charge-combo-form-meta label,
.charge-combo-selected-row label {
  display: grid;
  gap: 5px;
  color: #5f6d7d;
  font-size: 13px;
  font-weight: 900;
}

.charge-combo-form-meta input,
.charge-combo-form-search input,
.charge-combo-selected-row input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #d7e0e8;
  border-radius: 6px;
  color: #1f2937;
  font: inherit;
}

.charge-combo-form-body {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  min-height: 0;
}

.charge-combo-form-body > section {
  min-height: 0;
  overflow: auto;
}

.charge-combo-form-body > section:first-child {
  border-right: 1px solid #edf1f5;
}

.charge-combo-form-search {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 14px 18px;
  background: #fff;
  border-bottom: 1px solid #edf1f5;
}

.charge-combo-project-list {
  padding: 6px 18px 16px;
}

.charge-combo-project-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  border-bottom: 1px solid #edf1f5;
  cursor: pointer;
}

.charge-combo-project-row input {
  width: 21px;
  height: 21px;
  accent-color: #08a9c6;
}

.charge-combo-project-row span,
.charge-combo-selected-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.charge-combo-project-row b,
.charge-combo-selected-row b {
  color: #243141;
  overflow-wrap: anywhere;
}

.charge-combo-project-row small,
.charge-combo-selected-row small {
  color: #6c7788;
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.charge-combo-project-row em,
.charge-combo-selected-row strong {
  color: #1f2937;
  font-style: normal;
  font-weight: 900;
}

.charge-combo-selected-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px 18px 16px;
  background: #fbfdff;
}

.charge-combo-selected-panel h3 {
  margin: 0;
  color: #1f2937;
  font-size: 16px;
}

.charge-combo-selected-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px auto 28px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #dfe7ef;
  border-radius: 6px;
  background: #fff;
}

.charge-combo-selected-row input {
  width: 100%;
}

.charge-combo-selected-row button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #f3f6f9;
  color: #667386;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.charge-combo-selected-row button:hover {
  background: #fff0f0;
  color: #d14343;
}

@media (max-width: 900px) {
  .charge-combo-form-meta,
  .charge-combo-form-body {
    grid-template-columns: 1fr;
  }

  .charge-combo-form-body > section:first-child {
    border-right: 0;
    border-bottom: 1px solid #edf1f5;
  }
}

/* Patient billing: refund workflow and historical billing print cards. */
.patient-refund-modal,
.patient-history-print-modal {
  z-index: 10120;
  padding: 28px;
}

.single-bill-print-modal {
  z-index: 10130;
  padding: 28px;
}

.patient-refund-card {
  width: min(980px, calc(100vw - 48px));
  max-height: min(90vh, 860px);
  overflow: hidden;
  border: 1px solid #d5e4ec;
  border-radius: 16px;
}

.patient-refund-card > header div p {
  margin: 5px 0 0;
  color: #64748b;
  font-size: 13px;
}

.patient-refund-body {
  display: grid;
  grid-template-columns: minmax(330px, 0.9fr) minmax(380px, 1.1fr);
  gap: 18px;
  padding: 20px;
  overflow: auto;
}

.patient-refund-bill-list {
  display: grid;
  align-content: start;
  gap: 10px;
}

.patient-refund-bill-card {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid #d9e6ed;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.patient-refund-bill-card.selected {
  border-color: #57c5d8;
  background: #f0fbfd;
  box-shadow: 0 8px 22px rgba(8, 169, 198, 0.1);
}

.patient-refund-bill-card span {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.patient-refund-bill-card small {
  overflow: hidden;
  color: #64748b;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patient-refund-bill-card em {
  color: #b24339;
  font-style: normal;
  font-weight: 900;
}

.patient-refund-form-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid #dce8ee;
  border-radius: 14px;
  background: #f8fbfd;
}

.patient-refund-application-entry {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 58px;
  border: 1px solid #79cfdf;
  border-radius: 11px;
  padding: 11px 14px;
  background: linear-gradient(135deg, #eafafd, #f5fbff);
  color: #078ca7;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.patient-refund-application-entry span { font-weight: 900; }
.patient-refund-application-entry small { color: #688196; font-size: 11px; }
.patient-refund-application-entry:hover { border-color: #08a9c6; box-shadow: 0 8px 20px rgba(8,169,198,.1); }

.refund-application-form-modal { z-index: 10300; padding: 24px; background: rgba(19,35,52,.6); backdrop-filter: blur(7px); }
.refund-application-sheet { display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(1040px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:hidden;border:1px solid #d5e4ec;border-radius:18px;background:#fff;box-shadow:0 28px 80px rgba(16,38,58,.28); }
.refund-application-sheet>header { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;border-bottom:1px solid #deebf1;background:linear-gradient(115deg,#edfafd,#fff 58%,#f1f5ff); }
.refund-application-sheet>header span { color:#0794b0;font-size:10px;font-weight:900;letter-spacing:.16em; }
.refund-application-sheet>header h2 { margin:5px 0 0;color:#172b42;font-size:23px; }
.refund-application-sheet>header p { margin:5px 0 0;color:#75879a;font-size:12px; }
.refund-application-sheet>header button { width:40px;height:40px;border:0;border-radius:10px;background:#edf3f7;color:#6d8093;font-size:25px;cursor:pointer; }
.refund-application-sheet>main { display:grid;gap:14px;overflow:auto;padding:20px 24px 26px;background:#f5f8fb; }
.refund-application-sheet fieldset,.refund-application-top { margin:0;border:1px solid #dce7ed;border-radius:13px;padding:16px 18px;background:#fff; }
.refund-application-sheet fieldset { min-width:0; }
.refund-application-sheet legend { padding:0 7px;color:#20384f;font-size:15px;font-weight:900; }
.refund-application-top,.refund-application-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px; }
.refund-application-top { grid-template-columns:1.3fr 1fr 1fr; }
.refund-application-sheet label { display:grid;gap:6px;color:#4b6175;font-size:12px;font-weight:800; }
.refund-application-sheet label.wide { grid-column:1/-1; }
.refund-application-sheet input { box-sizing:border-box;width:100%;height:40px;border:1px solid #cadbe5;border-radius:8px;padding:0 11px;background:#fff;color:#172b42;font:inherit;font-size:13px; }
.refund-application-sheet input[readonly] { background:#f6f9fb;color:#53697d; }
.refund-choice-line,.refund-account-options,.refund-reason-options { display:flex;flex-wrap:wrap;gap:10px 20px; }
.refund-choice-line label,.refund-account-options label,.refund-reason-options>label { display:flex;align-items:center;gap:7px;min-height:34px;color:#334b60;font-size:13px;cursor:pointer; }
.refund-application-sheet input[type="radio"],.refund-application-sheet input[type="checkbox"] { width:17px;height:17px;min-height:0;padding:0;accent-color:#079fbd; }
.refund-amount-line { display:grid;grid-template-columns:minmax(260px,.7fr) minmax(280px,1.3fr);align-items:end;gap:16px;margin:13px 0; }
.refund-amount-line>span { min-height:40px;display:flex;align-items:center;border-radius:8px;padding:0 12px;background:#edf9fc;color:#557084;font-size:12px; }
.refund-amount-line b { margin-left:5px;color:#078da8;font-size:14px; }
.refund-other-reason { flex:1 1 320px!important; }
.refund-other-reason input[type="text"] { flex:1; }
.refund-designated-account { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:13px;padding:13px;border-radius:10px;background:#f4f7f9;opacity:.48; }
.refund-designated-account.enabled { background:#eef9fc;opacity:1; }
.refund-approval-block { display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px; }
.refund-approval-block>section { display:flex;min-width:0;min-height:150px;flex-direction:column;border:1px solid #e1e9ee;border-radius:10px;padding:16px;background:#fbfdfe; }
.refund-approval-block strong,.refund-completion-grid strong { color:#263f55;font-size:13px; }
.refund-approval-block p { margin:0;color:#63788b;font-size:12px;line-height:1.7; }
.refund-handwriting-date { margin-top:auto;color:#4b6175;font-size:12px;font-weight:800; }
.refund-inline-fill { flex:1 1 220px!important;display:flex!important;align-items:center!important;grid-template-columns:auto minmax(100px,1fr); }
.refund-inline-fill input { flex:1; }
.refund-signature-grid { display:grid;grid-template-columns:1fr minmax(140px,.72fr);gap:10px; }
.refund-completion-grid { display:grid;grid-template-columns:minmax(220px,.65fr) minmax(360px,1.35fr);align-items:end;gap:14px 18px; }
.refund-completion-grid>label:nth-of-type(2),.refund-patient-confirmation,.refund-patient-signature { grid-column:1/-1; }
.refund-patient-confirmation { margin:2px 0 0;border-left:3px solid #0aa9c7;padding:11px 14px;background:#eefafd;color:#3e596e;font-size:12px;line-height:1.8; }
.refund-patient-handwriting { grid-column:1/-1;display:grid;grid-template-columns:1.4fr .6fr;gap:24px;min-height:92px;padding:14px 4px 2px;color:#334b60;font-size:13px;font-weight:800; }
.refund-patient-handwriting span { align-self:end; }
.refund-application-sheet>footer { display:flex;justify-content:flex-end;gap:10px;padding:15px 24px;border-top:1px solid #dce8ee;background:#fff; }
.refund-application-sheet>footer button { min-width:128px; }
.refund-application-footer-spacer { flex:1; }
.refund-application-print-btn { border-color:#79cfdf!important;color:#078da8!important; }
@media(max-width:900px){.refund-approval-block{grid-template-columns:1fr}.refund-completion-grid{grid-template-columns:1fr}.refund-completion-grid>*{grid-column:1!important}}
@media(max-width:760px){.refund-application-form-modal{padding:8px}.refund-application-sheet{width:100%;max-height:calc(100dvh - 16px)}.refund-application-top,.refund-application-grid,.refund-amount-line,.refund-designated-account,.refund-signature-grid{grid-template-columns:1fr}.patient-refund-application-entry{align-items:flex-start;flex-direction:column;gap:4px}.refund-application-sheet>footer{padding:10px}.refund-application-sheet>footer button{min-width:0}.refund-application-footer-spacer{display:none}}

@media print {
  @page { size: A4 portrait; margin: 6mm; }
  body.refund-application-printing > :not(#refundApplicationFormModal) { display:none!important; }
  body.refund-application-printing { overflow:visible!important;background:#fff!important; }
  body.refund-application-printing #refundApplicationFormModal { position:static!important;display:block!important;padding:0!important;background:#fff!important;backdrop-filter:none!important; }
  body.refund-application-printing .refund-application-sheet { display:block!important;width:100%!important;max-height:none!important;overflow:visible!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:#172b42!important;font-size:8.5px!important; }
  body.refund-application-printing .refund-application-sheet>header { padding:2mm 3mm 2.5mm!important;background:#fff!important; }
  body.refund-application-printing .refund-application-sheet>header span { font-size:7px!important; }
  body.refund-application-printing .refund-application-sheet>header h2 { margin:1mm 0 0!important;font-size:16px!important;line-height:1.15!important; }
  body.refund-application-printing .refund-application-sheet>header p { margin:1mm 0 0!important;font-size:7.5px!important; }
  body.refund-application-printing .refund-application-sheet>header button,
  body.refund-application-printing .refund-application-sheet>footer { display:none!important; }
  body.refund-application-printing .refund-application-sheet>main { display:grid!important;gap:2mm!important;overflow:visible!important;padding:2.5mm 3mm!important;background:#fff!important; }
  body.refund-application-printing .refund-application-sheet fieldset,
  body.refund-application-printing .refund-application-top { margin:0!important;break-inside:avoid;background:#fff!important;border-radius:2mm!important;padding:2.5mm 3mm!important; }
  body.refund-application-printing .refund-application-sheet fieldset { padding:2mm 3mm 2.5mm!important; }
  body.refund-application-printing .refund-application-sheet legend { padding:0 1.5mm!important;font-size:9px!important; }
  body.refund-application-printing .refund-application-top { grid-template-columns:1.25fr .8fr 1fr!important;gap:1.5mm 3mm!important; }
  body.refund-application-printing .refund-application-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1.5mm 3mm!important; }
  body.refund-application-printing .refund-amount-line { grid-template-columns:.75fr 1.25fr!important;gap:3mm!important;margin:1.5mm 0!important; }
  body.refund-application-printing .refund-designated-account { grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2mm!important;margin-top:1.5mm!important;padding:1.5mm!important; }
  body.refund-application-printing .refund-approval-block { grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:2mm!important; }
  body.refund-application-printing .refund-completion-grid { grid-template-columns:.72fr 1.28fr!important;gap:1.5mm 3mm!important; }
  body.refund-application-printing .refund-completion-grid>label:nth-of-type(2),
  body.refund-application-printing .refund-patient-confirmation,
  body.refund-application-printing .refund-patient-handwriting { grid-column:1/-1!important; }
  body.refund-application-printing .refund-application-sheet label { gap:.7mm!important;font-size:7.5px!important; }
  body.refund-application-printing .refund-application-sheet input { height:7mm!important;border-color:#8b98a5!important;border-radius:1.2mm!important;padding:0 2mm!important;background:#fff!important;font-size:8.5px!important; }
  body.refund-application-printing .refund-choice-line,
  body.refund-application-printing .refund-account-options,
  body.refund-application-printing .refund-reason-options { gap:1mm 3mm!important; }
  body.refund-application-printing .refund-choice-line label,
  body.refund-application-printing .refund-account-options label,
  body.refund-application-printing .refund-reason-options>label { min-height:5mm!important;font-size:8px!important; }
  body.refund-application-printing .refund-application-sheet input[type="checkbox"] { width:3.2mm!important;height:3.2mm!important;padding:0!important; }
  body.refund-application-printing .refund-amount-line>span { min-height:7mm!important;padding:0 2mm!important;font-size:7.5px!important; }
  body.refund-application-printing .refund-amount-line b { font-size:8.5px!important; }
  body.refund-application-printing .refund-approval-block>section { min-height:22mm!important;border-radius:1.5mm!important;padding:2.5mm!important; }
  body.refund-application-printing .refund-approval-block strong,
  body.refund-application-printing .refund-completion-grid strong { font-size:8px!important; }
  body.refund-application-printing .refund-handwriting-date { font-size:7.5px!important; }
  body.refund-application-printing .refund-patient-confirmation { margin:0!important;padding:1.5mm 2mm!important;font-size:7.5px!important;line-height:1.45!important; }
  body.refund-application-printing .refund-patient-handwriting { grid-template-columns:1.4fr .6fr!important;min-height:12mm!important;padding:1.5mm 1mm 0!important;font-size:8px!important; }
}

.patient-refund-form-card label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-weight: 800;
}

.patient-refund-form-card label.wide,
.patient-refund-link-note {
  grid-column: 1 / -1;
}

.patient-refund-form-card :is(input, select, textarea) {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cbdce5;
  border-radius: 9px;
  padding: 10px 12px;
  background: #fff;
  color: #172033;
  font: inherit;
}

.patient-refund-link-note {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid #9edfeb;
  border-radius: 10px;
  background: #eafafd;
  color: #34536a;
}

.patient-refund-link-note strong { color: #078da6; }
.patient-refund-empty { display: grid; place-items: center; gap: 8px; min-height: 260px; color: #64748b; }
.patient-refund-empty strong { color: #334155; font-size: 20px; }

.patient-history-print-card {
  width: min(1120px, calc(100vw - 48px));
  max-height: min(92vh, 920px);
  overflow: hidden;
  border: 1px solid #d5e4ec;
  border-radius: 16px;
}

.patient-history-print-head {
  position: relative;
  display: grid !important;
  justify-items: center !important;
  gap: 4px;
  padding: 22px 64px 18px !important;
  text-align: center;
}

.patient-history-print-head > button {
  position: absolute;
  top: 14px;
  right: 18px;
}

.patient-history-print-head h2 { font-size: 22px !important; }
.patient-history-print-head p { margin: 0; color: #64748b; }
.patient-history-print-logo { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #8bd7e4; border-radius: 14px; background: #effcff; color: #078da6; }
.patient-history-print-logo .print-icon { width: 23px; height: 23px; }
.patient-history-print-list { display: grid; gap: 14px; max-height: calc(92vh - 190px); overflow: auto; padding: 20px 24px; background: #f5f9fb; }
.patient-history-bill-card { padding: 16px; border: 1px solid #d9e6ed; border-radius: 13px; background: #fff; box-shadow: 0 7px 20px rgba(28, 70, 91, 0.06); }
.patient-history-bill-card > header,
.patient-history-bill-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.patient-history-bill-card > header { padding-bottom: 12px; border-bottom: 1px solid #e5edf2; }
.patient-history-bill-card > header span { color: #078da6; font-weight: 800; }
.patient-history-bill-card > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 14px 0; }
.patient-history-bill-card p { margin: 0; min-width: 0; }
.patient-history-bill-card small { display: block; margin-bottom: 4px; color: #64748b; }
.patient-history-bill-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.patient-history-bill-card > footer { padding-top: 12px; border-top: 1px solid #e5edf2; color: #475569; }
.patient-history-bill-card > footer strong { color: #078da6; }
.patient-history-bill-card ul { margin: 12px 0 0; padding: 10px 12px 10px 30px; border-radius: 9px; background: #fff6f5; color: #93453f; }
.patient-history-print-empty { padding: 58px 20px; border: 1px dashed #cbdce5; border-radius: 12px; background: #fff; color: #64748b; text-align: center; }
.patient-history-print-card > footer .report-primary-btn { display: inline-flex; align-items: center; gap: 8px; }
.patient-history-print-frame { position: fixed; width: 0; height: 0; border: 0; opacity: 0; }

.single-bill-print-card {
  width: min(980px, calc(100vw - 48px));
  max-height: min(92vh, 860px);
  overflow: hidden;
  border: 1px solid #d5e4ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(30, 58, 82, 0.24);
}

.single-bill-print-head {
  position: relative;
  display: grid !important;
  justify-items: center !important;
  gap: 4px;
  padding: 22px 64px 18px !important;
  text-align: center;
}

.single-bill-print-head > button {
  position: absolute;
  top: 14px;
  right: 18px;
}

.single-bill-print-head h2 { margin: 2px 0 0 !important; font-size: 22px !important; }
.single-bill-print-head p { margin: 0; color: #64748b; }

.single-bill-print-body {
  display: grid;
  gap: 16px;
  max-height: calc(92vh - 190px);
  overflow: auto;
  padding: 22px 26px;
  background: #f5f9fb;
}

.single-bill-print-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #d9e6ed;
  border-radius: 13px;
  background: #dfe9ef;
}

.single-bill-print-summary > div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 14px;
  background: #fff;
}

.single-bill-print-summary small { color: #64748b; }
.single-bill-print-summary strong { overflow: hidden; color: #243141; text-overflow: ellipsis; white-space: nowrap; }

.single-bill-print-items {
  overflow: hidden;
  border: 1px solid #d9e6ed;
  border-radius: 13px;
  background: #fff;
}

.single-bill-print-items > header,
.single-bill-print-items > div {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 120px 90px 130px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}

.single-bill-print-items > header {
  background: #edf6fa;
  color: #496174;
  font-weight: 800;
}

.single-bill-print-items > div + div { border-top: 1px solid #e5edf2; }
.single-bill-print-items > div :not(:first-child) { text-align: right; }
.single-bill-print-items b { color: #078da6; }

.single-bill-print-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.single-bill-print-totals span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 62px;
  padding: 12px 16px;
  border: 1px solid #d9e6ed;
  border-radius: 12px;
  background: #fff;
  color: #64748b;
}

.single-bill-print-totals strong { color: #172033; font-size: 20px; }
.single-bill-print-totals .has-debt { border-color: #f0c3bf; background: #fff7f6; }
.single-bill-print-totals .has-debt strong { color: #c4473d; }
.single-bill-print-note { margin: 0; padding: 13px 15px; border: 1px solid #d9e6ed; border-radius: 11px; background: #fff; color: #526174; }
.single-bill-print-card > footer .report-primary-btn { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 760px) {
  .patient-refund-modal,
  .patient-history-print-modal,
  .single-bill-print-modal { padding: 10px; }
  .patient-refund-card,
  .patient-history-print-card,
  .single-bill-print-card { width: calc(100vw - 20px); }
  .patient-refund-body { grid-template-columns: 1fr; padding: 14px; }
  .patient-refund-form-card { grid-template-columns: 1fr; }
  .patient-history-bill-card > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patient-history-bill-card > footer { flex-wrap: wrap; }
  .single-bill-print-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .single-bill-print-items > header,
  .single-bill-print-items > div { grid-template-columns: minmax(150px, 1fr) 80px 54px 90px; }
  .single-bill-print-totals { grid-template-columns: 1fr; }
}

.system-row-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
}

.system-row-actions .light-btn {
  height: 30px;
  padding: 0 9px;
  font-size: 12px;
}

.charge-import-card {
  width: min(980px, calc(100vw - 48px));
  max-height: min(90vh, 820px);
}

.charge-project-form-card {
  width: min(520px, calc(100vw - 48px));
}

.charge-project-form {
  display: grid;
  gap: 14px;
  padding: 18px 22px;
}

.charge-project-form label {
  display: grid;
  gap: 6px;
  color: #344050;
  font-weight: 800;
}

.charge-project-form input,
.charge-project-form select {
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d7e0e8;
  border-radius: 6px;
  background: #fff;
  color: #1f2937;
  font: inherit;
}

.charge-project-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
}

.charge-project-form-actions div {
  display: flex;
  gap: 10px;
}

.charge-project-picker-card {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: min(1080px, calc(100vw - 48px));
  height: min(90vh, 860px);
  max-height: calc(100vh - 36px);
  overflow: hidden;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
}

.charge-project-picker-modal {
  align-items: flex-start;
  justify-items: center;
  padding-top: 18px;
  z-index: 10020;
}

.charge-project-picker-card header,
.charge-project-picker-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid #dde4eb;
}

.charge-project-picker-card header h2 {
  margin: 0 0 4px;
  color: #1f2833;
  font-size: 20px;
}

.charge-project-picker-card header span,
.charge-project-picker-card footer span {
  color: #667386;
  font-size: 14px;
  font-weight: 800;
}

.charge-project-picker-card footer {
  display: grid;
  grid-template-columns: auto minmax(360px, 1fr) auto;
  align-items: end;
  border-top: 1px solid #dde4eb;
  border-bottom: 0;
}

.charge-project-picker-card footer > div:last-child {
  display: flex;
  gap: 10px;
}

.charge-project-picker-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid #edf1f5;
}

.charge-project-picker-combos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 22px;
  border-bottom: 1px solid #edf1f5;
  background: linear-gradient(180deg, rgba(248, 251, 253, 0.74), rgba(255, 255, 255, 0.92));
}

.charge-combo-glass-pill {
  display: inline-grid;
  place-items: center;
  min-width: 132px;
  max-width: 220px;
  min-height: 34px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36)),
    rgba(255, 255, 255, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -10px 18px rgba(255, 255, 255, 0.28),
    0 10px 24px rgba(31, 41, 55, 0.11),
    0 2px 5px rgba(31, 41, 55, 0.08);
  color: #1f2937;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.charge-combo-glass-pill:hover {
  border-color: rgba(8, 169, 198, 0.42);
  transform: translateY(-1px);
}

.charge-combo-glass-pill:active {
  transform: translateY(1px) scale(0.99);
}

.charge-combo-glass-pill.selected {
  border-color: rgba(8, 169, 198, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -10px 20px rgba(255, 255, 255, 0.34),
    0 0 0 2px rgba(8, 169, 198, 0.12),
    0 12px 26px rgba(8, 169, 198, 0.16);
}

.charge-combo-glass-pill.disabled {
  cursor: not-allowed;
  filter: grayscale(0.25);
  opacity: 0.42;
}

.charge-project-picker-combo-empty {
  color: #7b8796;
  font-weight: 800;
}

.charge-project-picker-toolbar input {
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d7e0e8;
  border-radius: 6px;
  background: #fff;
  color: #1f2937;
  font: inherit;
}

.charge-project-picker-toolbar strong,
.charge-project-picker-card footer b {
  color: #08a9c6;
  font-weight: 900;
}

.charge-project-picker-list {
  overflow: visible;
  max-height: none;
  padding: 8px 22px 10px;
  border-bottom: 1px solid #edf1f5;
}

.charge-project-picker-scroll {
  min-height: 0;
  overflow: auto;
  padding-bottom: 14px;
}

.charge-project-picker-placeholder {
  padding: 28px 22px;
  border-bottom: 1px solid #edf1f5;
  color: #7b8796;
  font-weight: 800;
}

.charge-project-picker-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 10px 0;
  border-bottom: 1px solid #edf1f5;
  cursor: pointer;
}

.charge-project-picker-row input {
  width: 24px;
  height: 24px;
  accent-color: #08a9c6;
}

.charge-project-picker-row span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.charge-project-picker-row b {
  color: #243141;
  overflow-wrap: anywhere;
}

.charge-project-picker-row small {
  color: #6c7788;
  font-size: 13px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.charge-project-picker-row em {
  color: #1f2937;
  font-style: normal;
  font-weight: 900;
}

.charge-project-picker-empty {
  padding: 42px 12px;
  color: #7b8796;
  text-align: center;
  font-weight: 800;
}

.charge-project-picker-selected {
  display: grid;
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding: 12px 22px;
  border-bottom: 1px solid #edf1f5;
  background: #fbfdff;
}

.charge-project-picker-selected h3 {
  margin: 0;
  color: #1f2937;
  font-size: 15px;
}

.charge-project-picker-selected-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px auto 32px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid #dfe7ef;
  border-radius: 6px;
  background: #fff;
}

.charge-project-picker-selected-row span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.charge-project-picker-selected-row small {
  color: #6c7788;
  font-size: 12px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.charge-project-picker-selected-row strong {
  color: #1f2937;
}

.charge-project-picker-selected-row label {
  display: grid;
  gap: 3px;
  color: #6c7788;
  font-size: 12px;
  font-weight: 800;
}

.charge-project-picker-selected-row input {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #d7e0e8;
  border-radius: 5px;
  color: #1f2937;
  font: inherit;
  font-size: 13px;
}

.charge-project-picker-adjust,
.treatment-fee-adjust {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.charge-project-picker-adjust {
  flex: 1 1 420px;
}

@media (max-width: 900px) {
  .charge-project-picker-card footer {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .charge-project-picker-adjust {
    grid-template-columns: 1fr;
  }

  .charge-project-picker-card footer > div:last-child {
    justify-content: flex-end;
  }
}

.charge-project-picker-adjust label,
.treatment-fee-adjust label {
  display: grid;
  gap: 5px;
  color: #5f6d7d;
  font-size: 13px;
  font-weight: 900;
}

.charge-project-picker-adjust input,
.treatment-fee-adjust input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #d7e0e8;
  border-radius: 6px;
  color: #1f2937;
  font: inherit;
}

.treatment-fee-adjust {
  flex: 1 1 420px;
}

.charge-project-picker-selected-row button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #f3f6f9;
  color: #667386;
  font-size: 20px;
  line-height: 1;
}

.charge-project-picker-selected-row button:hover {
  background: #fff0f0;
  color: #d14343;
}

.charge-import-body {
  display: grid;
  gap: 14px;
  padding: 18px 22px;
}

.charge-import-toolbar,
.charge-import-actions,
.charge-import-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.charge-import-toolbar {
  justify-content: flex-start;
}

.charge-import-actions {
  justify-content: flex-end;
  padding: 14px 22px 18px;
  border-top: 1px solid #e1e7ee;
}

.charge-import-dropzone {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 132px;
  border: 1px dashed #b9c6d3;
  border-radius: 8px;
  background: #f8fafc;
  color: #344050;
  text-align: center;
  cursor: pointer;
}

.charge-import-dropzone strong {
  color: #1f2937;
  font-size: 17px;
}

.charge-import-dropzone span,
.charge-import-summary {
  color: #687588;
  font-size: 13px;
}

.charge-import-dropzone.dragging {
  border-color: #08a9c6;
  background: #eefbfe;
}

.charge-import-summary.has-error {
  color: #c43d3d;
  font-weight: 800;
}

.charge-import-summary.has-conflict {
  color: #9a6500;
  font-weight: 800;
}

.charge-import-preview {
  min-height: 120px;
}

.charge-import-table-wrap {
  overflow: auto;
  border: 1px solid #dbe3eb;
}

.charge-import-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
}

.charge-import-table th,
.charge-import-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #e3e9f0;
  text-align: left;
  vertical-align: top;
}

.charge-import-table th {
  background: #f4f7fa;
  color: #2d3745;
  font-weight: 800;
}

.charge-import-table tr.invalid {
  background: #fff1f1;
}

.charge-import-table tr.conflict {
  background: #fff8e7;
}

.charge-import-table .error-text {
  color: #c43d3d;
  line-height: 1.45;
}

.charge-import-pagination {
  justify-content: space-between;
  margin-top: 12px;
  color: #657386;
  font-size: 13px;
}

.charge-import-pagination div {
  display: flex;
  gap: 8px;
}

.charge-import-pagination button:disabled,
#confirmChargeProjectImport:disabled,
#downloadChargeProjectErrors:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.people-admin {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.people-admin h3 {
  margin: 8px 0 0;
}

.permission-admin-panel {
  grid-column: 1 / -1;
}

.permission-admin-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 720px);
  margin-bottom: 18px;
  border: 1px solid #d8e1e8;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.permission-admin-tabs button {
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border: 0;
  border-right: 1px solid #d8e1e8;
  background: #fff;
  color: #536071;
  font-weight: 800;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}

.permission-admin-tabs button:last-child {
  border-right: 0;
}

.permission-admin-tabs button.active {
  background: #08a9c6;
  color: #fff;
}

.permission-admin-tabs button:focus-visible {
  position: relative;
  outline: 3px solid rgba(8, 169, 198, .24);
  outline-offset: -3px;
}

.permission-admin-view {
  display: none;
}

.permission-admin-view.active {
  display: grid;
  gap: 16px;
}

.people-permission-workspace {
  min-width: 0;
}

#peopleAdminView > .panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.permission-form {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e0e7ee;
  border-radius: 8px;
  background: #fbfdff;
}

.employee-form {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.permission-form label {
  display: grid;
  gap: 6px;
  color: #374151;
  font-weight: 800;
}

.permission-form input,
.permission-form select {
  height: 40px;
  padding: 0 10px;
  border: 1px solid #d7e0e8;
  border-radius: 6px;
  background: #fff;
}

.permission-form .inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.permission-form .inline-check input {
  width: 18px;
  height: 18px;
}

.permission-form .employee-person-field small {
  color: #8190a5;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}

.permission-form .employee-person-field small.bound {
  color: #079bb5;
}

.permission-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.permission-check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid #e0e7ee;
  border-radius: 6px;
  background: #fff;
  font-weight: 700;
}

.permission-check-grid input {
  width: 18px;
  height: 18px;
}

.permission-default-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(11, 174, 201, 0.24);
  border-radius: 8px;
  color: #087f98;
  background: linear-gradient(110deg, rgba(222, 249, 253, 0.9), rgba(235, 243, 255, 0.8));
  font-size: 13px;
  font-weight: 700;
}

.permission-check-grid input[data-doctor-default] {
  accent-color: #0aaec9;
  opacity: 1;
}

.permission-list {
  display: grid;
  gap: 10px;
}

.permission-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(260px, 2fr) auto;
  gap: 12px;
  align-items: center;
}

.permission-row strong {
  color: #1f2937;
}

.permission-row small {
  color: #697386;
  line-height: 1.5;
}

.permission-row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.record-page {
  display: grid;
  gap: 16px;
  min-height: calc(100vh - 118px);
}

.record-toolbar {
  display: grid;
  grid-template-columns: auto 210px 260px minmax(420px, 1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid #d6dde6;
  background: #eef3f9;
}

.record-filter-title {
  padding-right: 18px;
  border-right: 2px solid #2b3037;
  color: #252b34;
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
}

.record-toolbar select {
  height: 44px;
  border-radius: 0;
  background: #fff;
  font-size: 16px;
}

.record-toolbar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.record-toolbar-actions button {
  min-height: 40px;
  border-radius: 4px;
}

.record-workspace {
  display: block;
  min-height: 660px;
  border: 1px solid #dbe2ea;
  background: #fff;
}

.record-history,
.record-workspace.hidden,
.record-footer.hidden {
  display: none;
}

.record-history {
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 620px;
}

.record-history:not(.hidden) {
  display: grid;
}

.record-patient-card {
  display: grid;
  gap: 8px;
  padding: 22px;
  border: 1px solid #dbe2ea;
  background: #fff;
}

.record-patient-card span,
.record-patient-card small {
  color: #657386;
}

.record-patient-card strong {
  color: #17212f;
  font-size: 28px;
}

.record-history-list {
  display: grid;
  gap: 14px;
}

.record-history-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  border: 1px solid #dbe2ea;
  background: #fff;
}

.record-history-date {
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 20px;
  border-right: 1px solid #e5ebf1;
  color: #06a9c5;
  text-align: center;
}

.record-history-date strong {
  font-size: 24px;
}

.record-history-body {
  display: grid;
  gap: 10px;
  padding: 18px 22px;
}

.record-history-head,
.record-history-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.record-history-head strong {
  color: #303742;
  font-size: 20px;
}

.record-history-head span {
  padding: 5px 10px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-weight: 800;
}

.record-history-head .signed {
  color: #1aa36f;
}

.record-history-head .unsigned {
  color: #ff6774;
}

.record-history-body p {
  margin: 0;
  color: #3e4650;
  line-height: 1.6;
}

.record-history-meta {
  justify-content: flex-start;
  color: #657386;
}

.record-timebar {
  display: grid;
  grid-template-rows: 120px 1fr;
  border-right: 1px solid #e3e8ee;
  background: #fff;
}

.record-calendar {
  place-self: center;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #06a9c5;
  color: #fff;
  font-size: 22px;
}

.record-time-line {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-top: 46px;
  border-top: 1px solid #edf0f4;
  color: #06a9c5;
  text-align: center;
  font-size: 18px;
}

.record-time-line strong {
  font-size: 20px;
}

.record-editor {
  min-width: 0;
  border-right: 1px solid #dbe2ea;
}

.record-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 66px;
  padding: 0 20px;
  border-bottom: 1px solid #cfdae5;
  background: #e8f8fd;
}

.record-editor-head div {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #444b55;
  font-size: 17px;
}

.record-editor-head strong {
  font-size: 18px;
}

.record-editor-head b {
  font-weight: 600;
}

.unsigned-stamp {
  display: inline-grid;
  place-items: center;
  min-width: 120px;
  min-height: 36px;
  border: 2px solid rgba(255, 103, 116, 0.35);
  color: #ff6774;
  font-size: 18px;
  font-weight: 800;
  transform: rotate(-2deg);
}

.record-writing-form {
  display: grid;
}

.record-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  min-height: 72px;
  padding: 18px 22px;
  border-bottom: 1px solid #dbe2ea;
  color: #3e4650;
  font-size: 18px;
  font-weight: 700;
}

.record-row.tall {
  min-height: 132px;
}

.record-row textarea {
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #303742;
  font-size: 18px;
  font-weight: 500;
}

.record-row.tall textarea {
  min-height: 96px;
}

.record-row textarea:focus {
  outline: 1px solid #08a9c8;
  background: #fff;
}

.record-side-panel {
  display: grid;
  grid-template-rows: 66px 1fr;
  background: #fff;
}

.record-side-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid #dbe2ea;
}

.record-side-panel dl {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-content: start;
  gap: 18px 8px;
  margin: 0;
  padding: 22px;
  color: #303742;
  font-size: 18px;
}

.record-side-panel dt {
  font-weight: 800;
}

.record-side-panel dd {
  margin: 0;
  font-weight: 700;
}

.record-tag {
  display: inline-grid;
  place-items: center;
  min-width: 58px;
  min-height: 34px;
  border: 1px solid #cfd8e3;
  border-radius: 4px;
  background: #fff;
}

.record-create-layout {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  background: #fff;
}

.record-create-top {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px 28px;
  align-items: center;
  padding: 14px 16px 26px;
  border-bottom: 1px dashed #d7dce2;
}

.record-create-top label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #2d333b;
  font-size: 18px;
  font-weight: 700;
}

.record-create-top select,
.record-create-top input {
  height: 48px;
  border-radius: 0;
  color: #5d6671;
  font-size: 18px;
  font-weight: 500;
}

.record-visit-time {
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #2d333b;
  font-size: 18px;
  font-weight: 700;
}

.record-visit-time input {
  width: 300px;
}

.record-visit-time button {
  width: 44px;
  height: 48px;
  border: 1px solid #d6dde6;
  border-radius: 0;
  background: #f7f8f8;
  color: #555e69;
  font-size: 20px;
}

.record-type-line {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  color: #2d333b;
  font-size: 18px;
}

.record-type-line label {
  display: flex;
  grid-template-columns: none;
  gap: 7px;
  align-items: center;
  font-weight: 500;
}

.record-type-line input {
  width: 18px;
  height: 18px;
  accent-color: #1677ff;
}

.record-type-line b {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #08a9c8;
  color: #fff;
  font-size: 16px;
}

.record-section-nav {
  position: sticky;
  top: 12px;
  display: grid;
  align-content: start;
  gap: 0;
  align-self: start;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 16px 18px;
  border-right: 1px solid #e2e7ed;
  background: #fff;
  color: #586270;
  font-size: 18px;
}

.record-section-nav strong {
  margin: 0 0 12px;
  color: #4c5663;
  font-size: 20px;
}

.record-section-nav a {
  margin: 0 -18px;
  padding: 14px 18px 14px 44px;
  border-right: 4px solid transparent;
  color: #5e6874;
  text-decoration: none;
  cursor: pointer;
}

.record-section-nav a:hover {
  color: #06a9c5;
  border-right-color: #06a9c5;
  background: #e5f8fa;
}

.record-writing-form {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 0 8px 24px 18px;
}

.record-template-btn {
  height: 42px;
  margin: 0 0 6px;
  border: 1px solid #06a9c5;
  border-radius: 4px;
  background: #fff;
  color: #06a9c5;
  font-size: 18px;
}

.record-form-section {
  display: grid;
  gap: 5px;
}

.record-form-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #222831;
  font-size: 20px;
}

.record-form-section h3 button {
  width: 32px;
  height: 32px;
  border: 1px solid #818a95;
  background: #fff;
  color: #333;
}

.record-tooth-sync {
  margin-left: 4px;
  color: #566172;
  font-size: 14px;
  font-weight: 600;
}

.record-form-section textarea {
  min-height: 45px;
  height: 45px;
  padding: 4px 8px;
  border-radius: 0;
  border-color: #cfd3d8;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  color: #242a32;
  font-size: 18px;
  line-height: 1.25;
  resize: vertical;
}

.tooth-input-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 45px;
  height: auto;
  padding: 0 12px;
  border: 1px solid #d9d9d9;
}

.tooth-input-row + .tooth-input-row {
  margin-top: -10px;
  border-top-color: #ececec;
}

.tooth-input-row.large {
  min-height: 45px;
  height: auto;
}

.tooth-input-row textarea {
  align-self: stretch;
  min-height: 43px;
  height: 43px;
  padding: 4px 10px;
  border: 0;
  box-shadow: none;
  background: transparent;
  overflow-y: hidden;
  resize: none;
}

.tooth-input-row.large textarea {
  min-height: 43px;
  height: 43px;
}

.tooth-cross {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 240px !important;
  min-width: 240px;
  height: 68px !important;
  min-height: 68px;
  padding: 0;
  border: 0;
  background: transparent !important;
  justify-self: center;
  color: #4b5563;
  font-size: 14px;
  cursor: pointer;
}

.tooth-cross::before,
.tooth-cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #06a9c5;
  transform: translate(-50%, -50%);
}

.tooth-cross::before {
  width: 240px;
  height: 1px;
}

.tooth-cross::after {
  width: 1px;
  height: 68px;
}

.tooth-cross:hover::before,
.tooth-cross:hover::after {
  background: #008caf;
}

.tooth-cross .quadrant {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  align-items: center;
  min-width: 0;
  min-height: 0;
  padding: 1px 2px;
  overflow: hidden;
  color: #1f2937;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  word-break: break-word;
}

.tooth-mark-row {
  display: flex;
  gap: 3px;
  align-items: center;
  min-height: 10px;
  line-height: 10px;
}

.tooth-cross.dense .tooth-mark-row { gap: 1px; }
.tooth-cross.dense .tooth-mark { font-size: 20px; }

.tooth-mark-row:empty {
  display: none;
}

.tooth-cross .q1 .tooth-mark-row,
.tooth-cross .q4 .tooth-mark-row {
  justify-content: flex-end;
}

.tooth-cross .q2 .tooth-mark-row,
.tooth-cross .q3 .tooth-mark-row {
  justify-content: flex-start;
}

.tooth-mark {
  display: inline-flex;
  align-items: flex-start;
  white-space: nowrap;
}

.tooth-mark sup {
  margin-left: 1px;
  font-size: 0.68em;
  line-height: 1;
  transform: translateY(-0.15em);
}

.tooth-cross .q1 {
  grid-column: 1;
  grid-row: 1;
}

.tooth-cross .q2 {
  grid-column: 2;
  grid-row: 1;
}

.tooth-cross .q3 {
  grid-column: 2;
  grid-row: 2;
}

.tooth-cross .q4 {
  grid-column: 1;
  grid-row: 2;
}

.tooth-cross .q1,
.tooth-cross .q4 {
  justify-content: flex-end;
  text-align: right;
}

.tooth-cross .q2,
.tooth-cross .q3 {
  justify-content: flex-start;
  text-align: left;
}

.tooth-cross .q1,
.tooth-cross .q2 {
  align-items: flex-end;
  padding-bottom: 8px;
}

.tooth-cross .q3,
.tooth-cross .q4 {
  align-items: flex-start;
  padding-top: 8px;
}

.record-add-tooth,
.record-section-tools {
  justify-self: end;
}

.record-add-tooth,
.record-section-tools button {
  border: 0;
  background: transparent;
  color: #808891;
  font-size: 18px;
}

.record-section-tools {
  display: flex;
  gap: 24px;
}

.record-image-list {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.record-image-add {
  display: grid;
  place-items: center;
  width: 260px;
  height: 170px;
  border: 1px dashed #d7dce2;
  border-radius: 4px;
  background: #fff;
  color: #333;
  font-size: 18px;
}

.record-image-add span {
  display: block;
  color: #333;
  font-size: 58px;
  line-height: 1;
}

.record-image-preview {
  width: 260px;
  margin: 0;
  border: 1px solid #d7dce2;
  background: #fff;
}

.record-image-preview img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.record-image-preview figcaption {
  overflow: hidden;
  padding: 8px 10px;
  color: #5e6874;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tooth-picker-mask {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(15, 23, 42, 0.18);
}

.tooth-picker-mask.hidden {
  display: none;
}

.tooth-picker-panel {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 9999;
  display: grid;
  grid-template-columns: minmax(640px, 1fr) 190px;
  gap: 24px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  margin: 0;
  padding: 18px;
  border: 1px solid #d9dde3;
  background: #fff;
  box-shadow: 0 8px 28px rgba(20, 35, 55, 0.12);
}

.tooth-picker-panel.hidden {
  display: none;
}

.tooth-picker-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.tooth-picker-head > strong {
  color: #263746;
  font-size: 18px;
  white-space: nowrap;
}

.tooth-fast-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tooth-fast-actions button,
.tooth-picker-close {
  min-height: 38px;
  border: 1px solid #e1e7ee;
  background: #fff;
  color: #566172;
  font-size: 18px;
}

.tooth-search-actions {
  display: none;
  gap: 12px;
  margin-top: 18px;
}

.tooth-search-mode .tooth-surfaces {
  display: none;
}

.tooth-search-mode .tooth-search-actions {
  display: grid;
}

.tooth-search-actions small {
  color: #68788a;
  font-size: 13px;
  line-height: 1.5;
}

.tooth-search-actions .primary-btn {
  min-height: 40px;
}

.tooth-selection-summary-list {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 104px;
  text-align: left;
}

.tooth-selection-summary-list > span {
  color: #42566a;
  font-size: 14px;
  font-weight: 800;
}

.tooth-selection-summary-list > strong {
  max-height: 118px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #dbe5ed;
  background: #fff;
  color: #167e99;
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.tooth-selection-summary-list > small {
  color: #718096;
  font-size: 12px;
}

.tooth-picker-close {
  margin-left: auto;
  width: 42px;
  font-size: 28px;
}

.tooth-chart {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  grid-template-rows: 122px 122px;
  gap: 20px 0;
  align-items: center;
  padding: 26px 20px 34px;
}

.tooth-arch {
  display: grid;
  gap: 7px 0;
}

.baby-row,
.adult-row {
  display: grid;
  grid-template-columns: repeat(8, 42px);
  gap: 7px;
}

.baby-row {
  grid-template-columns: repeat(5, 42px);
}

.tooth-arch.right .baby-row {
  justify-content: end;
}

.tooth-arch.left .baby-row {
  justify-content: start;
}

.tooth-arch.left {
  grid-column: 3;
}

.tooth-arch.right {
  grid-column: 1;
}

.tooth-arch.upper {
  grid-row: 1;
}

.tooth-arch.lower {
  grid-row: 2;
}

.tooth-arch.left {
  justify-content: start;
}

.tooth-arch.right {
  justify-content: end;
}

.tooth-choice {
  position: relative;
  width: 42px;
  height: 38px;
  border: 1px solid #e1e7ee;
  background: #fff;
  color: #566172;
  font-size: 20px;
}

.tooth-choice.selected {
  border-color: #06a9c5;
  background: #e6f8fc;
  color: #008caf;
  font-weight: 800;
}

.tooth-choice.active-tooth {
  box-shadow: 0 0 0 3px rgba(6, 169, 197, 0.18);
}

.tooth-choice.selected[data-surface]:not([data-surface=""])::after {
  content: attr(data-surface);
  position: absolute;
  right: 3px;
  top: 1px;
  font-size: 11px;
  line-height: 1;
}

.tooth-midline {
  position: absolute;
  background: #9aa3af;
}

.tooth-midline.horizontal {
  left: 20px;
  right: 20px;
  top: 50%;
  height: 1px;
}

.tooth-midline.vertical {
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 1px;
}

.tooth-side {
  position: absolute;
  top: calc(50% - 13px);
  color: #818a95;
  font-size: 18px;
  background: #fff;
}

.right-label {
  left: calc(50% - 190px);
}

.left-label {
  right: calc(50% - 190px);
}

.tooth-surface-panel {
  align-self: center;
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #f0f2f5;
  color: #566172;
  text-align: center;
  font-size: 16px;
}

.tooth-surfaces {
  display: grid;
  grid-template-columns: repeat(3, 44px);
  gap: 7px;
  justify-content: center;
}

.tooth-surfaces button {
  position: relative;
  height: 40px;
  border: 0;
  background: #fff;
  color: #566172;
  font-size: 18px;
}

.tooth-surfaces button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.tooth-surfaces button.selected,
.tooth-surfaces button:not(:disabled):hover {
  background: #06a9c5;
  color: #fff;
}

.tooth-surfaces button::before {
  content: attr(title);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 2;
  display: none;
  min-width: 54px;
  padding: 5px 8px;
  background: #555c68;
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.tooth-surfaces button:not(:disabled):hover::before {
  display: block;
}

.quick-phrase-panel {
  position: fixed;
  z-index: 70;
  overflow: auto;
  border: 1px solid #d5dce4;
  background: #fff;
  box-shadow: 0 10px 26px rgba(20, 35, 55, 0.14);
}

.quick-phrase-panel.hidden {
  display: none;
}

.quick-phrase-tabs {
  display: flex;
  align-items: center;
  gap: 36px;
  min-height: 58px;
  padding: 0 22px;
  border-bottom: 1px solid #d8dde4;
}

.quick-phrase-tabs button {
  border: 0;
  background: transparent;
  color: #89919d;
  font-size: 20px;
}

.quick-phrase-tabs .active {
  align-self: stretch;
  border-bottom: 4px solid #08a9c8;
  color: #08a9c8;
}

.quick-phrase-close {
  margin-left: auto;
  color: #5d6671 !important;
  font-size: 34px !important;
}

.quick-phrase-groups {
  display: grid;
  gap: 22px;
  padding: 30px 28px;
}

.quick-phrase-group {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  color: #5b6471;
  font-size: 20px;
}

.quick-phrase-group > div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-phrase-group button {
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  background: #f7f7f8;
  color: #5b6471;
  font-size: 18px;
}

.quick-phrase-group button:hover {
  background: #e5f8fa;
  color: #08a9c8;
}

.record-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 12px;
  background: #fff;
  border: 1px solid #dbe2ea;
}

.record-footer button {
  min-width: 120px;
  min-height: 44px;
  font-size: 18px;
}

.inventory-card {
  padding: 18px;
}

.inventory-supply-card {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 210px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  transform-origin: center;
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.2, 1.16), border-color 0.24s ease, box-shadow 0.24s ease;
}

.inventory-supply-card-title {
  margin: 0;
  color: var(--text);
  font-size: 26px;
  line-height: 1.25;
  font-weight: 900;
}

.inventory-supply-card:hover,
.inventory-supply-card:focus-visible {
  border-color: rgba(8, 169, 198, 0.38);
  box-shadow: 0 24px 58px rgba(20, 36, 56, 0.12), 0 0 28px rgba(8, 169, 198, 0.12);
  transform: none;
}

.inventory-card-delete {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #dc2626;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(20, 36, 56, 0.08);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.inventory-card-delete:hover,
.inventory-card-delete:focus-visible {
  border-color: rgba(220, 38, 38, 0.38);
  background: #fff5f5;
  box-shadow: 0 14px 30px rgba(220, 38, 38, 0.16);
  transform: translateY(-1px);
}

.inventory-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.inventory-card-foot b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(8, 169, 198, 0.28);
  border-radius: 50%;
  color: #111827;
  background: rgba(255, 255, 255, 0.88);
  font-size: 20px;
  line-height: 1;
}

.inventory-sub-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(15, 23, 42, 0.36);
  backdrop-filter: blur(7px);
  animation: inventorySubBackdrop 0.24s ease both;
}

.inventory-sub-panel {
  position: fixed;
  top: clamp(70px, 9vh, 110px);
  right: clamp(22px, 6vw, 90px);
  bottom: clamp(22px, 7vh, 70px);
  left: calc(220px + 18px + clamp(22px, 6vw, 90px));
  z-index: 191;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 18px;
  padding: 28px;
  overflow: auto;
  border-radius: 24px;
  animation: inventorySubPanelSpring 0.42s cubic-bezier(0.18, 0.98, 0.24, 1.08) both;
}

.inventory-sub-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.inventory-sub-panel-head span {
  color: #08a9c6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.inventory-sub-panel-head h2 {
  margin: 8px 0 6px;
  color: var(--text);
  font-size: 30px;
}

.inventory-sub-panel-head p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.inventory-sub-panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inventory-sub-panel-toolbar {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  align-items: end;
  gap: 14px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(205, 218, 230, 0.84);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.66);
}

.inventory-sub-search {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.inventory-sub-search span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.inventory-sub-search input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(189, 215, 228, 0.95);
  border-radius: 8px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  outline: none;
}

.inventory-sub-add-btn {
  align-self: end;
  min-width: 128px;
  min-height: 48px;
  border: 1px solid rgba(8, 169, 198, 0.82);
  border-radius: 8px;
  padding: 0 18px;
  background: #08a9c6;
  color: #fff;
  font: inherit;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(8, 169, 198, 0.18);
  cursor: pointer;
}

.inventory-sub-add-btn:hover {
  background: #0797b2;
}

.inventory-sub-add-btn:active {
  transform: translateY(1px);
}

.inventory-sub-search input:focus {
  border-color: rgba(8, 169, 198, 0.54);
  box-shadow: 0 0 0 3px rgba(8, 169, 198, 0.12);
}

.inventory-sub-panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  grid-auto-rows: max-content;
  gap: 16px;
  align-items: stretch;
  align-content: start;
}

.inventory-sub-item-card {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 14px;
  height: auto;
  min-height: 246px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(205, 218, 230, 0.88);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 252, 254, 0.9));
  box-shadow: 0 14px 36px rgba(25, 45, 65, 0.06);
}

.inventory-sub-item-card {
  animation: inventorySubItemRise 0.32s ease both;
}

.inventory-sub-item-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(219, 229, 236, 0.86);
}

.inventory-sub-item-card-head > strong {
  min-width: 0;
  color: var(--text);
  font-size: 19px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.inventory-sub-item-card-head > div {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.inventory-sub-item-card-head .compact {
  min-width: 68px;
  min-height: 36px;
  border-radius: 8px;
}

.inventory-sub-item-fields-display {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.inventory-sub-item-fields-display > div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(224, 232, 238, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.inventory-sub-item-fields-display span,
.inventory-sub-item-photo-area > span,
.inventory-sub-empty-text {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.inventory-sub-item-fields-display strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.inventory-sub-item-photo-area {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 2px;
}

.inventory-sub-cert-area {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.inventory-sub-cert-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.inventory-sub-cert-block > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.inventory-sub-image-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.inventory-sub-image-strip button {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid #d5e0ea;
  border-radius: 8px;
  padding: 0;
  background: #fff;
  cursor: zoom-in;
}

.inventory-sub-image-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inventory-sub-image-empty,
.inventory-sub-empty-text {
  display: grid;
  place-items: center;
  min-height: 86px;
  border: 1px dashed rgba(189, 205, 220, 0.9);
  border-radius: 8px;
  background: rgba(248, 251, 253, 0.74);
  text-align: center;
}

.inventory-sub-item-card .light-btn {
  justify-self: end;
  min-height: 36px;
}

.inventory-item-form-card {
  width: min(760px, calc(100vw - 44px));
  border-radius: 22px;
}

.inventory-item-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 22px;
}

.inventory-item-form label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 900;
}

.inventory-item-form label.wide,
.inventory-item-form footer {
  grid-column: 1 / -1;
}

.inventory-item-form input,
.inventory-item-form textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d5e0ea;
  border-radius: 12px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.inventory-item-form textarea {
  min-height: 96px;
  padding: 12px;
  resize: vertical;
}

.inventory-item-form footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}

.inventory-sub-item-fields,
.inventory-sub-upload,
.inventory-sub-cert-upload-grid {
  grid-column: 1 / -1;
}

.inventory-sub-item-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.inventory-sub-upload {
  display: grid;
  gap: 10px;
}

.inventory-sub-cert-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.inventory-sub-upload .supplier-upload-box {
  min-height: 132px;
}

@keyframes inventorySubBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes inventorySubPanelSpring {
  from {
    opacity: 0;
    transform: translateY(44px) scale(0.86);
  }
  70% {
    opacity: 1;
    transform: translateY(-4px) scale(1.012);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes inventorySubItemRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1100px) {
  .inventory-sub-panel {
    inset: 5vh 18px;
  }

  .inventory-sub-panel-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

@media (max-width: 760px) {
  .inventory-sub-panel-head,
  .inventory-sub-panel-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .inventory-sub-panel-grid,
  .inventory-item-form,
  .inventory-sub-item-fields,
  .inventory-sub-item-fields-display,
  .inventory-sub-cert-area,
  .inventory-sub-cert-upload-grid {
    grid-template-columns: 1fr;
  }

  .inventory-sub-panel-toolbar {
    grid-template-columns: 1fr;
  }

  .inventory-sub-add-btn {
    width: 100%;
  }
}

/* Visual print template designer */
.settings-content .print-template-panel {
  width: min(100%, 1500px);
  min-height: 620px;
  padding: 0;
}

.print-template-toolbar {
  display: flex;
  gap: 12px;
  padding: 18px 24px;
  border-bottom: 1px solid #e4eaf0;
}

.print-template-toolbar input,
.print-template-toolbar select {
  height: 42px;
  padding: 0 12px;
  border: 1px solid #d6e0e9;
  border-radius: 6px;
  background: #fff;
  color: #344052;
  font: inherit;
}

.print-template-toolbar input { flex: 1; min-width: 180px; }
.print-template-toolbar select { width: 220px; }

.print-template-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 14px;
  padding: 20px 24px 28px;
}

.print-template-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dfe6ed;
  border-radius: 8px;
  background: #fff;
}

.print-template-card-head,
.print-template-card-meta,
.print-template-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.print-template-card h3 { margin: 0; color: #263242; font-size: 16px; }
.print-template-card-meta { justify-content: flex-start; color: #788597; font-size: 12px; }
.print-template-card-meta span { padding: 4px 7px; border-radius: 4px; background: #f2f6f8; }
.print-template-card-actions { justify-content: flex-end; }
.print-template-empty { grid-column: 1 / -1; padding: 80px 20px; color: #8b96a5; text-align: center; }

.print-designer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  background: #fff;
}

.print-designer.hidden { display: none; }

.print-designer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 16px;
  border-bottom: 1px solid #dfe6ed;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 39, 56, 0.05);
}

.print-designer-title-group,
.print-designer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.print-designer-title-group input,
.print-designer-title-group select {
  height: 40px;
  padding: 0 11px;
  border: 1px solid #d5dee8;
  border-radius: 6px;
  background: #fff;
  color: #2f3a49;
  font: inherit;
  font-weight: 700;
}

.print-designer-title-group input { width: 230px; }
.print-designer-title-group select { width: 180px; }

.print-designer-body {
  display: grid;
  grid-template-columns: 220px minmax(420px, 1fr) 290px;
  min-height: 0;
}

.print-component-sidebar,
.print-property-panel {
  overflow-y: auto;
  background: #fff;
}

.print-component-sidebar {
  padding: 18px 14px;
  border-right: 1px solid #dfe6ed;
}

.print-component-sidebar h3,
.print-property-panel h3 {
  margin: 0 0 14px;
  color: #2a3544;
  font-size: 15px;
}

.print-component-group {
  display: grid;
  gap: 6px;
  margin-bottom: 22px;
}

.print-component-group > span {
  color: #8490a0;
  font-size: 12px;
  font-weight: 800;
}

.print-component-group button {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #4c5868;
  font: inherit;
  text-align: left;
  cursor: grab;
}

.print-component-group button:hover {
  border-color: #cce8ee;
  background: #eef9fb;
  color: #078da8;
}

.print-business-field-library #printBusinessFieldLibrary {
  display: grid;
  gap: 12px;
}

.print-business-field-library #printBusinessFieldLibrary section {
  display: grid;
  gap: 4px;
}

.print-business-field-library #printBusinessFieldLibrary small {
  padding: 0 8px;
  color: #98a2af;
  font-size: 11px;
  font-weight: 800;
}

.print-canvas-stage {
  min-width: 0;
  overflow: auto;
  background: #eef2f5;
}

.print-canvas-shell {
  display: flex;
  min-width: 100%;
  min-height: 100%;
  align-items: flex-start;
  justify-content: center;
  padding: 40px;
}

.print-paper-canvas {
  --paper-scale: 2.5;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid #d7dee6;
  background: #fff;
  box-shadow: 0 12px 30px rgba(25, 39, 56, 0.14);
}

.print-margin-guide {
  position: absolute;
  z-index: 0;
  border: 1px dashed #80d4e3;
  pointer-events: none;
}

.print-canvas-component {
  position: absolute;
  z-index: 2;
  min-width: 20px;
  min-height: 16px;
  overflow: hidden;
  border: 1px solid transparent;
  color: #111827;
  cursor: move;
  user-select: none;
}

.print-canvas-component:hover { border-color: #a7dfe8; }
.print-canvas-component.selected { border: 2px solid #08a9c6; }
.print-canvas-component-content { position: relative; width: 100%; height: 100%; overflow: hidden; }
.print-canvas-component .print-field-placeholder { color: #078da8; }
.print-canvas-divider {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  border-top: 1px solid currentColor;
  transform: translateY(-50%);
}
.print-canvas-image { display: block; width: 100%; height: 100%; }
.print-image-empty { display: grid; width: 100%; height: 100%; place-items: center; border: 1px dashed #aab5c1; color: #8792a0; font-size: 12px; }

.print-canvas-component-content[contenteditable="true"] {
  cursor: text;
  outline: 0;
  background: #eefbfe;
  user-select: text;
}

.print-canvas-table {
  width: 100%;
  min-width: 0 !important;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: inherit;
}

.print-canvas-table th,
.print-canvas-table td {
  min-width: 0;
  padding: 3px 5px;
  overflow-wrap: anywhere;
  border: 1px solid #9aa4b1;
  text-align: inherit;
}
.print-canvas-summary { font-weight: 900; }
.print-canvas-code { display: grid; height: 100%; place-items: center; border: 1px solid #9aa4b1; letter-spacing: 2px; }

.print-canvas-tooth {
  position: relative;
  width: 100%;
  height: 100%;
}

.print-canvas-tooth::before,
.print-canvas-tooth::after { content: ""; position: absolute; background: #687383; }
.print-canvas-tooth::before { left: 8%; right: 8%; top: 50%; height: 1px; }
.print-canvas-tooth::after { top: 8%; bottom: 8%; left: 50%; width: 1px; }
.print-canvas-tooth span { position: absolute; left: 54%; top: 16%; font-size: 11px; }

.print-medical-record-module {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #8f9aa8;
  background: #fff;
  color: inherit;
  text-align: left;
}

.print-medical-record-title {
  padding: 5px 7px;
  border-bottom: 1px solid #8f9aa8;
  background: #f1f5f7;
  font-weight: 900;
  text-align: center;
}

.print-medical-record-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px;
  padding: 4px 7px;
  border-bottom: 1px solid #d4dbe1;
  line-height: 1.35;
}

.print-medical-record-row:last-child { border-bottom: 0; }
.print-medical-record-row strong { white-space: nowrap; }
.print-medical-record-row span { min-width: 0; overflow-wrap: anywhere; }

.print-component-resize {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #08a9c6;
  cursor: nwse-resize;
}

.print-property-panel {
  padding: 18px 16px 28px;
  border-left: 1px solid #dfe6ed;
}

.print-property-panel section + section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e4e9ef;
}

.print-property-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.print-property-grid label,
.print-component-property-form label {
  display: grid;
  gap: 5px;
  color: #697586;
  font-size: 11px;
  font-weight: 800;
}

.print-property-grid label:first-child,
.print-component-property-form .property-wide { grid-column: 1 / -1; }

.print-property-grid input,
.print-property-grid select,
.print-component-property-form input,
.print-component-property-form select,
.print-component-property-form textarea {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid #d7e0e8;
  border-radius: 5px;
  background: #fff;
  color: #344052;
  font: inherit;
}

.print-page-break {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #4d5969;
  font-size: 13px;
  font-weight: 700;
}

.print-page-break input { accent-color: #08a9c6; }
.print-property-empty { color: #8c97a5; font-size: 13px; }
.print-component-property-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.print-component-property-actions { display: flex; grid-column: 1 / -1; gap: 8px; justify-content: flex-end; }

.print-table-column-editor { grid-column: 1 / -1; display: grid; gap: 8px; }
.print-table-column-row { display: grid; grid-template-columns: 1fr 1fr 62px 30px; gap: 5px; align-items: center; }
.print-table-column-row button { width: 30px; height: 30px; border: 1px solid #efb7bd; border-radius: 4px; background: #fff7f7; color: #d62839; cursor: pointer; }
.print-table-column-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }

.print-preview-frame {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  grid-template-rows: 60px minmax(0, 1fr);
  background: #e9eef2;
}

.print-preview-actions { display: flex; justify-content: center; gap: 10px; align-items: center; background: #fff; border-bottom: 1px solid #dfe5eb; }
.print-preview-paper { margin: 28px auto; position: relative; background: #fff; box-shadow: 0 12px 30px rgba(20,30,45,.15); }

@media print {
  body:has(.print-preview-frame) > *:not(.print-preview-frame) { display: none !important; }
  .print-preview-frame { position: static; display: block; background: #fff; }
  .print-preview-actions { display: none !important; }
  .print-preview-paper { margin: 0; box-shadow: none; break-inside: avoid; }
}

@media (max-width: 1050px) {
  .print-designer-body { grid-template-columns: 180px minmax(360px, 1fr) 250px; }
  .print-designer-actions .light-btn:nth-child(-n+2) { display: none; }
}

@media (max-width: 760px) {
  .print-template-list { grid-template-columns: 1fr; }
  .print-designer-body { grid-template-columns: 150px minmax(330px, 1fr); }
  .print-property-panel { position: fixed; top: 64px; right: 0; bottom: 0; z-index: 2; width: 270px; box-shadow: -8px 0 24px rgba(20,30,45,.12); }
  .print-designer-title-group select { display: none; }
}

.supplier-flip-card {
  min-height: 270px;
  padding: 0;
  cursor: pointer;
  perspective: 1200px;
}

.supplier-card-inner {
  position: relative;
  min-height: 270px;
  transform-style: preserve-3d;
  transition: transform 0.25s ease;
}

.supplier-flip-card.flipped .supplier-card-inner {
  transform: rotateY(180deg);
}

.supplier-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 20px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.supplier-card-front {
  justify-content: space-between;
}

.supplier-card-front.denture-card-front {
  align-items: center;
  justify-content: center;
}

.supplier-front-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
}

.supplier-front-meta > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.supplier-front-meta span {
  color: var(--muted);
  font-weight: 800;
}

.supplier-front-meta strong {
  overflow: hidden;
  color: var(--text);
  font-size: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-front-meta > div:last-child {
  text-align: right;
}

.supplier-card-back {
  gap: 14px;
  overflow: auto;
  transform: rotateY(180deg);
}

.supplier-back-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.supplier-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.light-btn.danger {
  border-color: rgba(244, 63, 94, 0.28);
  background: rgba(255, 247, 247, 0.9);
  color: #dc2626;
}

.light-btn.danger:hover {
  border-color: rgba(244, 63, 94, 0.42);
  background: rgba(254, 226, 226, 0.95);
}

.supplier-back-head h2 {
  margin: 0 0 4px;
  font-size: 20px;
}

.supplier-back-head p {
  margin: 0;
  color: var(--muted);
}

.supplier-detail-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.supplier-detail-list div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.supplier-detail-list dt {
  color: var(--muted);
  font-size: 12px;
}

.supplier-detail-list dd {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-license-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.supplier-license-card {
  display: grid;
  grid-template-rows: minmax(92px, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

.supplier-license-card h3 {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-license-thumb,
.supplier-license-empty {
  min-height: 92px;
  border: 1px solid rgba(205, 218, 230, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
}

.supplier-license-thumb {
  position: relative;
  overflow: hidden;
  padding: 0;
  cursor: zoom-in;
}

.supplier-license-thumb img {
  width: 100%;
  height: 100%;
  min-height: 92px;
  object-fit: cover;
  opacity: 0.92;
}

.supplier-license-empty {
  display: grid;
  place-items: center;
  padding: 12px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.denture-license-grid {
  grid-template-columns: repeat(5, minmax(160px, 1fr));
}

.denture-license-card {
  justify-items: center;
  overflow: hidden;
}

.denture-license-card h3 {
  width: 100%;
  text-align: center;
}

.denture-license-strip {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.denture-license-strip .supplier-license-empty {
  flex: 0 0 100%;
}

.denture-license-thumb {
  flex: 0 0 96px;
  width: 96px;
}

.denture-factory-license-form {
  display: grid;
  gap: 14px;
}

.denture-registration-number-form {
  display: grid;
  gap: 10px;
}

.denture-registration-number-head,
.denture-registration-number-row {
  align-items: center;
  gap: 10px;
}

.denture-registration-number-head {
  justify-content: space-between;
  font-weight: 700;
}

.denture-registration-number-list {
  display: grid;
  gap: 10px;
}

.denture-registration-number-columns,
.denture-registration-number-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(220px, 2fr) minmax(260px, 2fr) 86px;
  gap: 14px;
  align-items: center;
}

.denture-registration-number-columns {
  padding: 0 2px;
  color: var(--text);
  font-weight: 900;
}

.denture-registration-number-row input {
  width: 100%;
  min-width: 0;
}

@media (max-width: 1100px) {
  .denture-registration-number-columns {
    display: none;
  }

  .denture-registration-number-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .denture-registration-number-row .danger {
    grid-column: 2;
    justify-self: end;
  }
}

.denture-factory-license-form > span {
  color: var(--text);
  font-weight: 900;
}

.denture-factory-license-upload-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 12px;
}

.denture-factory-license-upload {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.denture-factory-license-upload > span {
  display: block;
  text-align: center;
}

.denture-factory-license-box {
  display: flex;
  min-height: 216px;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 18px 14px;
}

.denture-factory-license-trigger {
  display: grid;
  place-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: center;
}

.denture-factory-license-trigger input {
  display: none;
}

.denture-factory-license-trigger span {
  color: var(--muted);
  font-weight: 900;
}

.denture-factory-license-trigger small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.denture-factory-license-preview {
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.denture-factory-license-preview .inbound-upload-thumb {
  flex: 0 0 110px;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: start;
  gap: 6px;
}

.denture-factory-license-preview .inbound-upload-thumb > button:first-child {
  width: 150px;
  height: 96px;
}

.denture-factory-license-preview .inbound-upload-thumb img {
  object-fit: contain;
  background: #fff;
}

.denture-factory-license-delete-preview {
  display: flex;
  justify-content: center;
  gap: 12px;
  min-height: 38px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.denture-factory-license-delete-preview .light-btn {
  flex: 0 0 150px;
  width: 150px;
  min-height: 36px;
  padding: 0 10px;
}

.denture-factory-license-preview .supplier-upload-empty {
  display: block;
  width: 100%;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.inventory-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 14px 0;
  color: var(--muted);
}

.stock-number {
  font-size: 30px;
  font-weight: 800;
}

.followup-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.followup-column {
  min-height: 460px;
  padding: 16px;
}

.followup-card {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.followup-card span {
  color: var(--muted);
  font-size: 13px;
}

.followup-modal {
  position: fixed;
  inset: 0;
  display: block;
  pointer-events: none;
  background: rgba(20, 30, 40, 0);
  z-index: 180;
  backdrop-filter: blur(0);
  transition: background 0.24s ease, backdrop-filter 0.24s ease;
}

.followup-modal.open {
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
}

.followup-modal-card {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  grid-template-columns: minmax(350px, 34%) minmax(680px, 66%);
  width: min(1420px, 72vw);
  height: 100vh;
  background: #fff;
  box-shadow: -22px 0 56px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  transform: translateX(100%);
  transition: transform 0.28s ease;
}

.followup-modal.open .followup-modal-card {
  transform: translateX(0);
}

.followup-modal-left {
  display: grid;
  grid-template-rows: 42px 40px minmax(0, 1fr);
  border-right: 4px solid #08a9c6;
  background: #fff;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.followup-record-list {
  min-height: 0;
  overflow: auto;
}

.followup-modal-left header {
  display: flex;
  align-items: center;
  height: 42px;
  background: #4bc1c7;
}

.followup-modal-left header button {
  height: 42px;
  min-width: 102px;
  border: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0;
  background: #2ba8ad;
  color: #fff;
  font-size: 16px;
}

.followup-modal-left header button.active {
  background: #dff8fb;
  color: #14a6bc;
}

.followup-modal-close {
  display: grid !important;
  place-items: center;
  margin-left: auto;
  width: 44px !important;
  min-width: 44px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  color: #fff !important;
  font-size: 30px !important;
  line-height: 1 !important;
}

.followup-modal-close:hover {
  background: rgba(255, 255, 255, 0.14) !important;
}

.followup-modal-close:focus,
.followup-modal-close:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}

.followup-expand-check {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  color: #69737f;
  font-size: 15px;
}

.followup-expand-check input {
  width: 18px;
  height: 18px;
}

.followup-record-item header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 38px;
  padding: 0 8px;
  background: #dff8fb;
  color: #60717b;
  font-size: 15px;
}

.followup-record-item header span {
  min-width: 0;
}

.followup-record-item div {
  padding: 10px 8px 14px;
}

.followup-record-item p {
  display: grid;
  grid-template-columns: 72px 1fr 80px 1fr;
  gap: 6px;
  margin: 8px 0;
  color: #67727f;
  font-size: 14px;
}

.followup-medical-preview {
  background: #fff;
}

.followup-record-paper {
  margin: 10px 12px 16px;
  padding: 14px 14px 16px !important;
  border: 1px solid #d9e5ec;
  background: #fff;
  box-shadow: 0 8px 18px rgba(9, 30, 43, 0.08);
  transform-origin: top left;
}

.followup-record-paper-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 8px !important;
  border-bottom: 1px solid #e6edf2;
}

.followup-record-paper-head strong {
  color: #2d3743;
  font-size: 17px;
}

.followup-record-paper-head .signed,
.followup-record-paper-head .unsigned {
  display: inline-grid;
  place-items: center;
  min-width: 72px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid currentColor;
  font-size: 13px;
  font-weight: 700;
  transform: rotate(-2deg);
}

.followup-record-paper-head .signed {
  color: #28a668;
}

.followup-record-paper-head .unsigned {
  color: #ff6078;
}

.followup-record-paper-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  padding: 10px 0 !important;
  color: #5c6875;
  font-size: 13px;
}

.followup-record-paper-meta span:last-child {
  grid-column: 1 / -1;
}

.followup-record-paper-lines {
  display: grid;
  gap: 0;
  padding: 0 !important;
  border-top: 1px solid #e6edf2;
}

.followup-record-paper-lines .patient-record-line {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  min-height: 34px;
  padding: 7px 0;
  border-bottom: 1px solid #eef2f5;
  color: #4f5b67;
  font-size: 13px;
}

.followup-record-paper-lines .patient-record-line span {
  color: #2d3743;
  font-weight: 700;
}

.followup-record-paper-lines .patient-record-line p {
  margin: 0;
  line-height: 1.55;
}

.followup-note-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px 16px !important;
  background: #fff;
}

.followup-note-card p {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  color: #66717e;
  font-size: 14px;
}

.followup-note-card b {
  color: #4b5563;
}

.followup-modal-right {
  display: grid;
  grid-template-rows: 42px auto auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  background: #fff;
}

.followup-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding-left: 12px;
  background: #078fa4;
  color: #fff;
}

.followup-modal-head h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.followup-modal-tabs {
  display: flex;
  height: 44px;
  padding-left: 16px;
  border-bottom: 1px solid #e1e6ec;
}

.followup-modal-tabs button {
  min-width: 98px;
  border: 1px solid #dde4ea;
  border-top: 3px solid transparent;
  border-bottom: 0;
  border-radius: 0;
  background: #f4f7f9;
  color: #5b6672;
  font-size: 15px;
}

.followup-modal-tabs button.active {
  border-top-color: #08a9c6;
  background: #fff;
  color: #08a9c6;
}

.followup-patient-summary {
  display: grid;
  grid-template-columns: 56px 130px 78px 130px 132px 132px 48px;
  align-items: center;
  gap: 10px;
  min-height: 72px;
  margin: 10px 16px;
  padding: 10px 16px;
  border: 1px solid #e0e5ea;
  border-radius: 6px;
  background: #fbfbfb;
}

.followup-patient-summary div {
  display: grid;
  gap: 5px;
  color: #6b7280;
  font-size: 14px;
}

.followup-patient-summary strong,
.followup-patient-summary b {
  color: #4d5965;
  font-weight: 600;
}

.followup-patient-summary button {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 8px;
  background: #08a9c6;
  color: #fff;
  font-size: 22px;
}

.followup-plan-form {
  min-height: 0;
  overflow: auto;
  padding: 0 16px 16px;
}

.followup-form-row {
  display: grid;
  grid-template-columns: 78px minmax(220px, 300px) 72px minmax(220px, 300px);
  gap: 10px;
  align-items: center;
  margin: 8px 0 10px;
  color: #68727e;
  font-size: 15px;
}

.followup-visit-time-display {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(99, 145, 171, .27);
  border-radius: 11px;
  background: linear-gradient(145deg, #fff, #f4fbfe);
  color: #263d55;
  font-weight: 700;
}

.followup-plan-form select,
.followup-plan-form input,
.followup-plan-form textarea {
  height: 38px;
  border-radius: 0;
  border-color: #d9e1e8;
  font-size: 14px;
}

.followup-config {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  border: 1px solid #d9e1e8;
}

.followup-config-head {
  display: contents;
}

.followup-config-head span {
  padding: 18px 0 0;
  text-align: center;
  color: #68727e;
  font-size: 15px;
}

.followup-config-head select {
  border-top: 0;
  border-right: 0;
  border-left: 0;
}

.followup-config-body {
  grid-column: 2 / 3;
  display: grid;
  gap: 12px;
  padding: 14px;
  border-left: 1px solid #d9e1e8;
}

.followup-radio-line {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #68727e;
  font-size: 14px;
}

.followup-radio-line label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.followup-radio-line input {
  width: 18px;
  height: 18px;
}

.followup-radio-line b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #08a9c6;
  color: #fff;
  font-size: 12px;
}

.followup-plan-box {
  border: 1px solid #d9e1e8;
}

.followup-plan-list {
  display: grid;
  gap: 14px;
}

.followup-plan-box header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid #d9e1e8;
}

.followup-plan-box header span,
.followup-plan-box header button {
  color: #08a9c6;
}

.followup-plan-box header button {
  border: 0;
  background: transparent;
  font-size: 15px;
}

.followup-plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 34px;
  padding: 12px 14px;
}

.followup-plan-grid label {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: #7a838e;
  font-size: 14px;
}

.followup-plan-grid label:has(textarea) {
  grid-column: 1 / -1;
  grid-row: auto;
  grid-template-columns: 92px minmax(0, 1fr);
}

.followup-plan-grid textarea {
  grid-column: 2;
  width: 100%;
  min-height: 150px;
  resize: vertical;
}

.followup-plan-grid label:has(textarea) > .system-card-select {
  grid-column: 2;
  width: 100%;
}

.followup-time-unit {
  display: grid;
  grid-template-columns: 76px repeat(3, 52px) 32px;
  gap: 4px;
}

.followup-time-unit button,
.followup-time-unit input {
  border-radius: 0;
}

.followup-time-unit button {
  border: 1px solid #d9e1e8;
  background: #fff;
  color: #68727e;
}

.followup-time-unit button.active {
  background: #08a9c6;
  color: #fff;
}

.followup-time-unit span {
  display: grid;
  place-items: center;
}

.followup-plan-grid p {
  align-self: center;
  color: #08a9c6;
  font-size: 14px;
}

.followup-add-plan {
  width: 100px;
  height: 38px;
  margin: 0 0 0 104px;
  border: 1px solid #08a9c6;
  background: #fff;
  color: #08a9c6;
  font-weight: 700;
}

.followup-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid #e0e6eb;
  background: #f5fafb;
}

.followup-modal-actions .primary-btn,
.followup-modal-actions .light-btn {
  height: 40px;
  min-width: 92px;
  border-radius: 0;
  font-size: 16px;
}

@media (max-width: 1280px) {
  .followup-modal-card {
    width: min(1180px, 86vw);
    grid-template-columns: minmax(320px, 36%) minmax(560px, 64%);
  }

  .followup-patient-summary {
    grid-template-columns: 52px 120px 72px 1fr 1fr 1fr 42px;
  }
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(9, 18, 29, 0.48);
  z-index: 20;
}

.modal.open {
  display: grid;
}

.modal-card {
  width: min(720px, 100%);
  max-height: min(86vh, 780px);
  overflow: auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.24);
}

.inventory-item-form-modal {
  z-index: 230;
  background: rgba(9, 18, 29, 0.18);
}

.inventory-item-form-modal .inventory-item-form-card {
  width: min(760px, calc(100vw - 44px));
  max-height: min(88vh, 820px);
}

.patient-modal-card {
  width: min(1180px, calc(100vw - 44px));
  max-height: min(92vh, 980px);
  border: 2px solid #5d8db7;
  border-radius: 0;
}

.patient-modal {
  z-index: 120;
}

.patient-modal-card .modal-head {
  min-height: 44px;
  padding: 0 10px;
  border-bottom: 0;
  background: #6293bd;
  color: #fff;
}

.patient-modal-card .modal-head h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 500;
}

.patient-modal-card .icon-btn {
  background: transparent;
  color: #eaf3fb;
}

.supplier-form-modal,
.supplier-image-modal {
  z-index: 150;
}

.supplier-image-modal {
  z-index: 260;
}

.supplier-form-card {
  width: min(1040px, calc(100vw - 42px));
  max-height: min(90vh, 860px);
  border-radius: 22px;
}

.supplier-form-card .modal-head,
.supplier-image-card .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(218, 226, 235, 0.9);
}

.supplier-form-card .modal-head h2,
.supplier-image-card .modal-head h2 {
  margin: 0;
}

.supplier-form-card .modal-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.supplier-form {
  display: grid;
  gap: 18px;
  padding: 24px 26px 26px;
}

.supplier-form label,
.supplier-upload-field {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 800;
}

.supplier-form input,
.supplier-form select {
  min-height: 46px;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.supplier-contact-select {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.supplier-contact-select .compact {
  min-width: 86px;
  min-height: 46px;
}

.supplier-form-grid,
.supplier-upload-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.supplier-upload-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.supplier-upload-box {
  display: grid;
  place-items: center;
  min-height: 138px;
  border: 1px dashed #b9cad9;
  border-radius: 16px;
  background: rgba(248, 252, 255, 0.8);
  cursor: pointer;
}

.supplier-upload-box.upload-box-with-preview {
  align-content: center;
  justify-items: center;
  gap: 12px;
  min-height: 178px;
  padding: 18px;
  cursor: default;
}

.supplier-upload-trigger {
  display: grid;
  place-items: center;
  gap: 8px;
  width: 100%;
  cursor: pointer;
}

.supplier-upload-box input {
  display: none;
}

.supplier-upload-box small,
.supplier-upload-empty {
  color: var(--muted);
  font-weight: 700;
}

.supplier-upload-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
}

.supplier-upload-thumb {
  overflow: hidden;
  width: 94px;
  height: 54px;
  border: 1px solid #d5e0ea;
  border-radius: 12px;
  padding: 0;
  background: #fff;
  cursor: zoom-in;
}

.supplier-upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.supplier-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}

.supplier-form-actions button,
.supplier-upload-preview .compact {
  min-width: 96px;
  min-height: 40px;
}

.inbound-form-modal,
.inbound-export-modal,
.inbound-image-modal {
  z-index: 156;
}

.inbound-image-modal {
  z-index: 260;
}

.inbound-form-card {
  width: min(1320px, calc(100vw - 42px));
  max-height: min(92vh, 900px);
  border-radius: 22px;
  background:
    radial-gradient(360px 360px at var(--settings-card-x, 50%) var(--settings-card-y, 0%), rgba(8, 169, 198, 0.13), transparent 56%),
    rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.inbound-form-card .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(218, 226, 235, 0.9);
}

.inbound-form-card .modal-head h2 {
  margin: 0;
}

.inbound-form-card .modal-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.inbound-form {
  display: grid;
  gap: 16px;
  padding: 24px 26px 26px;
}

.inbound-supplier-field,
.inbound-export-body label {
  display: grid;
  gap: 8px;
  color: var(--text);
  font-weight: 900;
}

.inbound-supplier-field input,
.inbound-export-body input {
  min-height: 46px;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.inbound-supplier-combobox {
  position: relative;
}

.inbound-supplier-combobox input {
  width: 100%;
}

.inbound-supplier-options {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 12;
  display: none;
  overflow: hidden;
  border: 1px solid #d5e0ea;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(20, 36, 56, 0.14);
}

.inbound-supplier-options.open {
  display: grid;
}

.inbound-supplier-options button,
.inbound-supplier-options > span {
  display: grid;
  gap: 3px;
  border: 0;
  border-bottom: 1px solid #e8edf3;
  padding: 11px 14px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.inbound-supplier-options button {
  cursor: pointer;
}

.inbound-supplier-options button:hover {
  background: rgba(8, 169, 198, 0.08);
}

.inbound-supplier-options span {
  color: var(--muted);
  font-size: 12px;
}

.inbound-product-suggestions {
  position: fixed;
  z-index: 10030;
  display: grid;
  gap: 5px;
  max-height: 250px;
  overflow: auto;
  padding: 8px;
  border: 1px solid rgba(203, 213, 225, 0.92);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(14px);
}

.inbound-product-suggestions.hidden {
  display: none;
}

.inbound-product-suggestions button {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 10px 11px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.inbound-product-suggestions button:hover {
  background: rgba(8, 169, 198, 0.1);
}

.inbound-product-suggestions strong {
  font-size: 14px;
  font-weight: 900;
}

.inbound-product-suggestions small,
.inbound-product-suggestions > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.inbound-product-suggestions > span {
  padding: 10px 11px;
}

.inbound-form-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.inbound-upload-excel {
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.inbound-form-table-wrap {
  max-height: 360px;
}

.inbound-form-table {
  min-width: 1360px;
  font-size: 12px;
}

.high-value-inbound-form-table {
  min-width: 1560px;
}

.inbound-form-table [data-inbound-field="spec"] {
  min-width: 150px;
}

.inbound-spec-input {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 34px;
  align-items: center;
  gap: 6px;
}

.inbound-project-search {
  min-width: 190px;
}

.inbound-project-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  min-width: 190px;
  align-items: stretch;
}

.inbound-project-input-wrap > input[type="search"] {
  min-width: 0;
  width: 100%;
  border-radius: 8px 0 0 8px !important;
}

.inbound-project-input-wrap > input.is-unlinked {
  border-color: #cbd9e2;
  background: #f8fbfd;
  color: #60758a;
}

.inbound-project-input-wrap > button {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  border: 1px solid #d5e0ea;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: #fff;
  color: #435a70;
  font: inherit;
  font-size: 17px;
  cursor: pointer;
}

.inbound-project-input-wrap > button:hover,
.inbound-project-input-wrap > button:focus-visible {
  background: #eef9fc;
  color: #0799b6;
  outline: none;
}

.inbound-charge-project-menu {
  position: fixed;
  z-index: 100000;
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #d7e4ec;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(29, 54, 75, .2);
}

.inbound-charge-project-menu.hidden {
  display: none;
}

.inbound-charge-project-menu button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #1e3041;
  text-align: left;
  cursor: pointer;
}

.inbound-charge-project-menu button:hover,
.inbound-charge-project-menu button:focus-visible {
  background: #eef9fc;
  outline: none;
}

.inbound-charge-project-menu strong {
  font-size: 14px;
  line-height: 1.35;
}

.inbound-charge-project-menu small {
  color: #71859a;
  font-size: 12px;
}

.inbound-project-empty {
  display: block;
  padding: 12px;
  color: #71859a;
  font-size: 13px;
}

.inbound-spec-add {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg, #16bad0, #0799b6);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(8, 169, 198, .22);
}

.inbound-spec-add:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.inbound-spec-variant-row td {
  border-top: 1px dashed #b9dce5;
  background: rgba(237, 249, 252, .72);
}

.inbound-spec-variant-row input {
  background: #fff;
}

.inbound-spec-variant-label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: #078da7;
  font-weight: 800;
  white-space: nowrap;
}

.inbound-spec-inherit-tip {
  color: #78909f;
  font-weight: 600;
  white-space: nowrap;
}

.drug-inbound-form-table {
  min-width: 1980px;
}

.inbound-form-table th,
.inbound-form-table td {
  padding: 8px;
}

.inbound-form-table input,
.inbound-form-table textarea {
  width: 100%;
  min-width: 98px;
  min-height: 34px;
  border: 1px solid #d5e0ea;
  border-radius: 8px;
  padding: 0 8px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.inbound-form-table textarea {
  min-width: 150px;
  min-height: 40px;
  resize: none;
  overflow: hidden;
  padding: 8px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.inbound-form-table input[readonly] {
  background: #f5f8fb;
  color: #657386;
}

.drug-company-field textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  padding: 12px 14px;
  resize: none;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.drug-template-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.drug-template-toolbar select {
  min-height: 44px;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font: inherit;
  font-weight: 800;
}

.drug-image-upload-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 12px;
}

.drug-image-upload-field .supplier-upload-box {
  min-height: 120px;
}

.drug-inbound-form-card {
  width: min(1460px, calc(100vw - 42px));
}

.inbound-date-combo {
  position: relative;
  display: grid;
  grid-template-columns: minmax(118px, 1fr) 36px;
  gap: 6px;
  align-items: center;
}

.inbound-date-combo input[type="text"] {
  min-width: 118px;
}

.inbound-date-combo input[type="date"] {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
}

.inbound-date-combo .icon-btn {
  width: 36px;
  height: 34px;
  border-radius: 8px;
}

.inbound-image-upload {
  padding-top: 4px;
}

.inbound-upload-preview {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  min-height: 58px;
  width: 100%;
}

.inbound-upload-thumb {
  display: grid;
  grid-template-columns: 96px auto;
  align-items: center;
  gap: 8px;
}

.inbound-upload-thumb > button:first-child {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 96px;
  height: 60px;
  border: 1px solid #d5e0ea;
  border-radius: 12px;
  padding: 0;
  background: #fff;
  cursor: zoom-in;
}

.inbound-upload-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inbound-export-card {
  width: min(560px, calc(100vw - 42px));
}

.inbound-export-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 22px 26px 8px;
}

.inbound-image-card {
  width: min(1120px, calc(100vw - 42px));
}

.inbound-image-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-bottom: 1px solid #e8edf3;
}

.inbound-image-tools span {
  margin-left: auto;
  color: var(--muted);
  font-weight: 900;
}

.inbound-image-stage {
  overflow: auto;
  min-height: min(58vh, 620px);
}

.inbound-image-stage img {
  max-width: 100%;
  transform-origin: center;
  transition: transform 0.25s ease;
}

.preview-strip {
  padding: 12px 22px 18px;
}

.supplier-back-head .compact {
  min-width: 78px;
  min-height: 40px;
}

.danger-btn {
  border: 0;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff;
  box-shadow: 0 12px 28px rgba(220, 38, 38, 0.18);
}

.danger-btn:hover {
  filter: brightness(1.02);
  transform: translateY(-1px);
}

.supplier-method-modal {
  z-index: 160;
}

.supplier-method-card {
  width: min(620px, calc(100vw - 42px));
  border-radius: 22px;
}

.supplier-method-card .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(218, 226, 235, 0.9);
}

.supplier-method-card .modal-head h2 {
  margin: 0;
}

.supplier-method-card .modal-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.supplier-method-body {
  display: grid;
  gap: 16px;
  padding: 22px 26px 8px;
}

.supplier-method-list {
  display: grid;
  gap: 10px;
}

.supplier-method-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
}

.supplier-method-row input,
.supplier-method-add input {
  min-height: 44px;
  border: 1px solid #d5e0ea;
  border-radius: 10px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.supplier-method-row .icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid #d5e0ea;
  background: rgba(245, 249, 253, 0.86);
  color: var(--muted);
}

.supplier-method-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
}

.supplier-method-empty {
  display: grid;
  min-height: 64px;
  place-items: center;
  border: 1px dashed #c7d5e1;
  border-radius: 14px;
  color: var(--muted);
  font-weight: 800;
}

.supplier-method-actions {
  padding: 16px 26px 24px;
}

.supplier-delete-modal {
  z-index: 165;
}

.system-confirm-modal {
  z-index: 4200;
}

.supplier-delete-card {
  width: min(560px, calc(100vw - 42px));
  border-radius: 24px;
}

.supplier-delete-card .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(218, 226, 235, 0.9);
}

.supplier-delete-card .modal-head h2 {
  margin: 0;
}

.supplier-delete-card .modal-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.supplier-delete-body {
  display: grid;
  gap: 8px;
  padding: 24px 26px 8px;
}

.supplier-delete-body span {
  color: var(--muted);
  font-weight: 800;
}

.supplier-delete-body strong {
  color: var(--text);
  font-size: 24px;
}

.supplier-delete-body p {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.supplier-delete-actions {
  padding: 18px 26px 26px;
}

.supplier-image-card {
  width: min(980px, calc(100vw - 42px));
  border-radius: 22px;
}

.supplier-image-stage {
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(248, 252, 255, 0.74);
}

.supplier-image-stage img {
  max-width: 100%;
  max-height: 72vh;
  border-radius: 16px;
  object-fit: contain;
  box-shadow: 0 18px 44px rgba(20, 36, 56, 0.16);
}

.supplier-image-download-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-top: 1px solid rgba(218, 226, 235, .9);
  background: #fff;
}

.supplier-image-download-footer[hidden] {
  display: none;
}

.supplier-image-download-footer span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.cancel-appointment-modal {
  z-index: 130;
}

.cancel-appointment-card {
  width: min(1150px, calc(100vw - 64px));
  border-radius: 4px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}

.plain-close {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 30px;
  line-height: 1;
}

.cancel-appointment-body {
  display: grid;
  gap: 20px;
  padding: 24px 32px 28px;
}

.cancel-info-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  color: #111827;
  font-size: 20px;
}

.cancel-info-row span,
.cancel-note-row span {
  font-weight: 700;
}

.cancel-info-row strong {
  font-size: 22px;
}

.cancel-note-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
  align-items: start;
  color: #111827;
  font-size: 20px;
}

.cancel-note-row textarea {
  min-height: 78px;
  resize: vertical;
}

.cancel-appointment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px 12px 36px;
  border-top: 1px solid var(--line);
}

.cancel-appointment-actions > div {
  display: flex;
  gap: 26px;
}

.cancel-appointment-actions .save-btn,
.cancel-appointment-actions .light-btn {
  min-width: 122px;
  height: 52px;
  font-size: 20px;
}

.move-appointment-modal {
  background: rgba(17, 24, 39, 0.42);
}

.move-appointment-card {
  width: min(720px, calc(100vw - 48px));
}

.move-appointment-body {
  display: grid;
  gap: 16px;
  padding: 22px 28px 28px;
  color: #1f2b38;
  font-size: 16px;
}

.move-appointment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: #fafafa;
}

.move-appointment-actions .save-btn,
.move-appointment-actions .light-btn {
  min-width: 122px;
  height: 52px;
  font-size: 20px;
}

.move-appointment-modal.simple-confirm .move-appointment-card {
  width: min(520px, calc(100vw - 48px));
}

.move-appointment-modal.simple-confirm .modal-head {
  justify-content: flex-start;
  gap: 12px;
  padding: 28px 32px 12px;
  border-bottom: 0;
}

.move-appointment-modal.simple-confirm .modal-head::before {
  content: "?";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid #f5a623;
  border-radius: 50%;
  color: #f5a623;
  font-size: 20px;
  font-weight: 800;
}

.move-appointment-modal.simple-confirm .modal-head h2 {
  font-size: 26px;
}

.move-appointment-modal.simple-confirm .plain-close,
.move-appointment-modal.simple-confirm .move-appointment-body {
  display: none;
}

.move-appointment-modal.simple-confirm .move-appointment-actions {
  justify-content: center;
  gap: 14px;
  padding: 26px 24px 28px;
  border-top: 0;
  background: #fff;
}

.move-appointment-modal.simple-confirm .move-appointment-actions .save-btn,
.move-appointment-modal.simple-confirm .move-appointment-actions .light-btn {
  min-width: 122px;
  height: 50px;
  font-size: 20px;
}

.duplicate-appointment-modal {
  background: rgba(17, 24, 39, 0.42);
  z-index: 260;
}

.delete-record-modal {
  background: rgba(17, 24, 39, 0.42);
  z-index: 260;
}

.duplicate-appointment-card {
  width: min(650px, calc(100vw - 48px));
}

.duplicate-appointment-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 30px 34px 22px;
}

.duplicate-appointment-head::before {
  content: "?";
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border: 2px solid #f5a623;
  border-radius: 50%;
  color: #f5a623;
  font-size: 20px;
  font-weight: 800;
}

.duplicate-appointment-head h2 {
  margin: 0;
  color: #1f2b38;
  font-size: 26px;
  line-height: 1.45;
}

.duplicate-appointment-actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 22px 22px 28px;
  background: #fff;
}

.duplicate-appointment-actions .save-btn,
.duplicate-appointment-actions .light-btn {
  min-width: 122px;
  height: 50px;
  font-size: 20px;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.modal-head h2 {
  margin: 0;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--muted);
  background: #eef3f8;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 20px;
}

.patient-registration-form {
  display: block;
  padding: 22px 24px 78px;
  color: #666;
}

.patient-form-section {
  padding-bottom: 18px;
}

.patient-form-section h3 {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #edf0f3;
  color: #4f5964;
  font-size: 20px;
  font-weight: 500;
}

.patient-form-row {
  display: grid;
  grid-template-columns: 110px minmax(260px, 380px) 110px minmax(260px, 380px);
  gap: 12px 18px;
  align-items: center;
  min-height: 56px;
  margin-bottom: 10px;
}

.patient-form-row > label,
.patient-form-row > span {
  color: #858585;
  font-size: 18px;
  font-weight: 400;
}

.patient-form-row > label.required::before {
  content: "*";
  margin-right: 0;
  color: #ff2a2a;
}

.patient-registration-form input,
.patient-registration-form select,
.patient-registration-form textarea {
  height: 42px;
  border-radius: 0;
  border-color: #cfd6dd;
  color: #4e5661;
  font-size: 18px;
  font-weight: 400;
}

.patient-registration-form input::placeholder,
.patient-registration-form textarea::placeholder {
  color: #9a9a9a;
}

.patient-registration-form input[readonly] {
  background: #e9e9e9;
  color: #555;
}

.patient-registration-form textarea {
  height: 42px;
  min-height: 42px;
}

.patient-name-row {
  grid-template-columns: 110px minmax(300px, 380px) 110px minmax(260px, 380px);
  align-items: center;
}

.patient-sex-field {
  grid-column: 3 / 5;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 42px;
  color: #666;
  font-size: 18px;
}

.patient-sex-field span {
  margin-right: 36px;
  color: #858585;
}

.patient-sex-field label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4f5964;
  font-size: 18px;
}

.patient-sex-field input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.patient-type-switch {
  display: inline-flex;
  width: max-content;
  border: 1px solid #c9cfd5;
  border-radius: 5px;
  overflow: hidden;
}

.patient-type-switch label {
  display: grid;
  place-items: center;
  min-width: 68px;
  height: 44px;
  color: #333;
  font-size: 18px;
}

.patient-type-switch input {
  display: none;
}

.patient-type-switch label:has(input:checked) {
  background: #2f80bd;
  color: #fff;
}

.record-generate-line {
  display: grid;
  grid-template-columns: minmax(0, 260px) 50px;
  gap: 8px;
}

.record-generate-line button,
.relation-input button,
.source-search button {
  display: grid;
  place-items: center;
  border: 1px solid #cfd6dd;
  background: #fff;
  color: #333;
  font-size: 24px;
}

.birth-line {
  display: grid;
  grid-template-columns: minmax(0, 170px) 160px;
  align-items: center;
  gap: 14px;
}

.birth-line input {
  margin: 0;
}

.birth-line .unknown-birth {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #4f5964;
  font-size: 18px;
  font-weight: 400;
}

.birth-line .unknown-birth input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.age-line {
  display: grid;
  grid-template-columns: 105px 32px;
  align-items: center;
  gap: 8px;
}

.age-line span {
  color: #333;
  font-size: 18px;
}

.two-cols {
  grid-template-columns: 110px minmax(270px, 380px) 90px minmax(270px, 380px);
}

.relation-input {
  display: grid;
  grid-template-columns: minmax(0, 170px) 92px 52px;
}

.patient-contact-list {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.patient-contact-extra {
  animation: patient-contact-enter .16s ease-out;
}

.patient-contact-extra > button {
  color: #d45261;
  font-size: 24px;
}

@keyframes patient-contact-enter {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.relation-input input,
.relation-input select,
.relation-input button {
  border-radius: 0;
}

.relation-input select,
.relation-input button {
  border-left: 0;
}

.relation-input select {
  background: #fff;
}

.relation-input .patient-card-select-trigger {
  min-height: 42px;
  padding: 0 11px;
  font-size: 15px;
  font-weight: 650;
}

.relation-input .patient-card-select-menu button {
  min-height: 36px;
  padding: 7px 9px;
  font-size: 14px;
  font-weight: 650;
}

.relation-input > button {
  font-size: 20px;
}

.address-row {
  grid-template-columns: 110px 120px 120px 120px minmax(220px, 380px);
}

.address-row select:disabled {
  background: #f4f5f7;
  color: #a0a7af;
  cursor: not-allowed;
}

.source-row {
  grid-template-columns: 110px 160px minmax(0, 1fr);
}

.source-search {
  display: grid;
  grid-column: 2 / 4;
  grid-template-columns: minmax(0, 540px) 54px;
}

.source-search button {
  border-left: 0;
  background: #f1f3f5;
}

.note-row {
  grid-template-columns: 110px minmax(0, 860px);
}

.patient-modal-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 28px -24px -78px;
  padding: 10px 20px;
  border-top: 1px solid #d4d9df;
  background: #f0f0f0;
}

.patient-modal-actions .light-btn,
.patient-modal-actions .save-btn {
  min-width: 96px;
  height: 44px;
  font-size: 18px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

input,
select,
textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  outline: 0;
}

input,
select {
  height: 40px;
  padding: 0 10px;
}

textarea {
  resize: vertical;
  padding: 10px;
}

.wide {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .metrics,
  .inventory-grid,
  .inbound-record-grid,
  .inventory-dashboard-grid,
  .followup-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .billing-layout,
  .system-grid,
  .record-toolbar,
  .record-workspace,
  .charge-summary,
  .charge-builder,
  .cashier-toolbar,
  .payment-line,
  .cashier-form,
  .bill-form {
    grid-template-columns: 1fr;
  }

  .charge-summary article {
    border-right: 0;
    border-bottom: 1px solid #d8dde3;
  }

  .charge-summary article:last-child {
    border-bottom: 0;
  }

  .schedule-board {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media print {
  .sidebar,
  .topbar,
  .charge-summary,
  .charge-actions,
  .charge-items-panel,
  .cashier-toolbar,
  .payment-box,
  .cashier-footer {
    display: none !important;
  }

  .app-shell,
  .main,
  .charge-builder {
    display: block;
  }

  .view {
    display: none !important;
  }

  .view.active {
    display: block !important;
  }

  .charge-cashier {
    min-height: 0;
    border: 0;
    background: #fff;
  }
}

@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .clinic-card {
    display: none;
  }

  .topbar,
  .top-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .search {
    width: 100%;
  }

  .topbar.dashboard-topbar .global-search-box {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .main {
    padding: 16px;
  }

  .metrics,
  .inventory-grid,
  .inbound-record-grid,
  .inventory-dashboard-grid,
  .system-grid,
  .people-admin,
  .followup-board,
  .schedule-board,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .appointment {
    grid-template-columns: 54px 1fr;
  }

  .appointment .status {
    grid-column: 2;
    justify-self: start;
  }
}

/* LinkedCare-style dense operations console */
:root {
  --bg: #f2f3f5;
  --panel: #ffffff;
  --ink: #1f2733;
  --muted: #7b8492;
  --line: #d8dee6;
  --primary: #08a9c6;
  --primary-dark: #0696b0;
  --nav: #20292c;
  --nav-deep: #171f22;
  --warn: #f05a52;
  --orange: #ff8a00;
  --shadow: none;
}

body {
  overflow-x: hidden;
  background: var(--bg);
  font-size: 14px;
}

.app-shell {
  grid-template-columns: 118px minmax(0, 1fr);
}

.sidebar {
  width: 118px;
  padding: 0;
  background: var(--nav-deep);
  border-right: 1px solid #101618;
}

.brand {
  justify-content: center;
  height: 82px;
  margin: 0;
  background: var(--nav);
}

.brand > div:not(.brand-mark) {
  display: none;
}

.brand-mark {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.nav {
  display: block;
}

.nav-submenu {
  display: grid;
  gap: 4px;
  max-height: 0;
  margin: 0;
  padding: 0 8px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  transition: max-height 0.24s ease, opacity 0.22s ease, transform 0.22s ease, padding 0.22s ease;
}

.nav-submenu.open {
  max-height: 420px;
  padding: 6px 8px 8px 42px;
  opacity: 1;
  transform: translateY(0);
}

.nav-submenu button {
  min-height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #aeb9c6;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.nav-submenu button:hover {
  transform: translateX(2px);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.nav-submenu button.active {
  background: linear-gradient(135deg, rgba(8, 169, 198, 0.22), rgba(37, 99, 235, 0.18));
  color: #e0faff;
  box-shadow: inset 3px 0 0 rgba(8, 169, 198, 0.95);
}

.nav-item {
  position: relative;
  gap: 9px;
  height: 54px;
  min-height: 54px;
  padding: 0 12px;
  color: #c8d0d5;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-size: 18px;
}

.nav-item::after {
  content: "";
  margin-left: auto;
}

.nav-item.nav-expandable::after {
  content: "";
  display: none;
}

.nav-item svg {
  width: 22px;
  height: 22px;
}

.nav-item.active,
.nav-item:hover {
  background: #05a8c3;
  color: #fff;
}

.nav-item.nav-expandable.active::after,
.nav-item.nav-expandable:hover::after {
  content: "";
  display: none;
}

.clinic-card {
  display: none;
}

.sidebar-mobile-toggle,
.sidebar-mobile-backdrop {
  display: none;
}

@media (min-width: 901px) {
  .app-shell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 80;
    width: 72px;
    height: 100vh;
    padding: 14px 10px;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(17, 24, 39, 0.98), rgba(15, 23, 42, 0.98)),
      #0f172a;
    border-right: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 10px 0 26px rgba(15, 23, 42, 0.12);
    transition: width 0.24s ease, box-shadow 0.24s ease;
  }

  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.sidebar-hold-open {
    width: 260px;
    box-shadow: 18px 0 40px rgba(15, 23, 42, 0.18);
  }

  .sidebar.sidebar-force-closed,
  .sidebar.sidebar-force-closed:hover,
  .sidebar.sidebar-force-closed:focus-within {
    width: 72px;
    box-shadow: 10px 0 26px rgba(15, 23, 42, 0.12);
  }

  .brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    height: 56px;
    margin: 0 0 18px;
    padding: 0 4px;
    background: transparent;
  }

  .brand-mark {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .brand:focus-visible {
    outline: 2px solid rgba(148, 163, 184, 0.8);
    outline-offset: 2px;
    border-radius: 8px;
  }

  .brand > div:not(.brand-mark) {
    display: block;
    min-width: 150px;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .sidebar:hover .brand > div:not(.brand-mark),
  .sidebar:focus-within .brand > div:not(.brand-mark),
  .sidebar.sidebar-hold-open .brand > div:not(.brand-mark) {
    opacity: 1;
    transform: translateX(0);
  }

  .sidebar.sidebar-force-closed .brand > div:not(.brand-mark) {
    opacity: 0;
    transform: translateX(-8px);
  }

  .brand strong {
    color: #f8fafc;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .brand span {
    color: #94a3b8;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .nav {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  .nav-item {
    position: relative;
    justify-content: flex-start;
    gap: 14px;
    height: 46px;
    min-height: 46px;
    width: 100%;
    padding: 0 14px;
    overflow: hidden;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #cbd5e1;
    font-size: 0;
    font-weight: 800;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, font-size 0.18s ease;
  }

  .sidebar:hover .nav-item,
  .sidebar:focus-within .nav-item,
  .sidebar.sidebar-hold-open .nav-item {
    font-size: 24px;
  }

  .sidebar.sidebar-force-closed .nav-item {
    font-size: 0;
    transform: none;
  }

  .sidebar.sidebar-force-closed .nav-submenu,
  .sidebar:not(:hover):not(:focus-within):not(.sidebar-hold-open) .nav-submenu {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    transform: translateY(-6px);
  }

  .nav-item svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    color: inherit;
  }

  .nav-item:hover {
    transform: translateX(3px);
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
  }

  .nav-item.active {
    background: linear-gradient(135deg, rgba(8, 169, 198, 0.95), rgba(37, 99, 235, 0.9));
    color: #fff;
    box-shadow: 0 12px 24px rgba(8, 169, 198, 0.22);
  }

  .nav-item::after,
  .nav-item.nav-expandable::after {
    content: "";
    display: none;
  }

  .sidebar:hover .nav-item.nav-expandable::after,
  .sidebar:focus-within .nav-item.nav-expandable::after,
  .sidebar.sidebar-hold-open .nav-item.nav-expandable::after {
    content: "";
    display: none;
  }

  .sidebar.sidebar-force-closed .nav-item.nav-expandable::after {
    content: "";
    display: none;
  }

  .clinic-card {
    display: block;
    margin-top: auto;
    padding: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.68);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .sidebar:hover .clinic-card,
  .sidebar:focus-within .clinic-card,
  .sidebar.sidebar-hold-open .clinic-card {
    opacity: 1;
    transform: translateY(0);
  }

  .sidebar.sidebar-force-closed .clinic-card {
    opacity: 0;
    transform: translateY(8px);
  }

  .clinic-card span,
  .clinic-card small {
    color: #94a3b8;
  }

  .clinic-card strong {
    margin: 6px 0;
    color: #f8fafc;
    font-size: 30px;
  }
}

@media (max-width: 900px) {
  .sidebar-mobile-toggle {
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 121;
    display: grid;
    place-content: center;
    gap: 4px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  }

  .sidebar-mobile-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #1f2733;
  }

  .sidebar-mobile-backdrop {
    position: fixed;
    inset: 0;
    z-index: 110;
    display: block;
    pointer-events: none;
    background: rgba(15, 23, 42, 0);
    transition: background 0.2s ease;
  }

  body.sidebar-mobile-open .sidebar-mobile-backdrop {
    pointer-events: auto;
    background: rgba(15, 23, 42, 0.46);
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 120;
    width: min(82vw, 300px) !important;
    height: 100dvh !important;
    padding: 18px 16px !important;
    transform: translateX(-104%);
    transition: transform 0.24s ease;
    background: #0f172a !important;
  }

  body.sidebar-mobile-open .sidebar {
    transform: translateX(0);
  }

  .brand {
    display: flex !important;
    justify-content: flex-start !important;
    height: auto !important;
    margin: 0 0 22px !important;
    background: transparent !important;
  }

  .brand > div:not(.brand-mark) {
    display: block !important;
  }

  .nav {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
  }

  .nav-item {
    justify-content: flex-start !important;
    min-height: 48px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
  }
}

.settings-console {
  min-height: calc(100vh - 82px);
  background:
    radial-gradient(circle at 18% 8%, rgba(8, 169, 198, 0.09), transparent 30%),
    radial-gradient(circle at 82% 0%, rgba(37, 99, 235, 0.07), transparent 28%),
    #f6f8fb;
  border-left: 1px solid #e1e6eb;
}

.communication-video-page{display:grid;align-content:start;gap:18px;min-height:calc(100vh - 82px);box-sizing:border-box;padding:10px 20px 20px;background:radial-gradient(circle at 18% 8%,rgba(8,169,198,.09),transparent 30%),radial-gradient(circle at 82% 0%,rgba(37,99,235,.07),transparent 28%),#f6f8fb}
.communication-video-library{display:grid;align-content:start;gap:14px;min-height:0;border:1px solid rgba(112,164,190,.22);border-radius:18px;padding:22px;background:rgba(255,255,255,.94)}
.communication-video-library>header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.communication-video-library>header span{color:#08a9c6;font-size:11px;font-weight:900;letter-spacing:.15em}.communication-video-library>header h3{margin:6px 0 0;color:#20384f;font-size:24px}.communication-video-library>header p{margin:7px 0 0;color:#75889a;font-size:13px}.communication-video-library>header>strong{color:#08a9c6;font-size:18px}
.communication-video-header-actions{display:flex;align-items:center;gap:12px}.communication-video-header-actions>strong{color:#08a9c6;font-size:18px}.communication-video-header-actions button{min-height:38px;border:1px solid #08a9c6;border-radius:9px;padding:0 16px;background:#08a9c6;color:#fff;font-weight:800;cursor:pointer}.communication-video-header-actions button[hidden]{display:none}
.communication-video-categories{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.communication-video-categories button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;height:48px;min-height:48px;border:1px solid #d9e7ed;border-radius:12px;padding:7px 10px;background:#fff;color:#294157;text-align:center;cursor:pointer;transition:border-color .2s ease-out,box-shadow .2s ease-out,background .2s ease-out}.communication-video-categories button:hover{border-color:#91d7e4}.communication-video-categories button.active{border-color:#08a9c6;background:linear-gradient(135deg,#effcff,#f8feff);box-shadow:inset 0 -3px 0 #08a9c6,0 9px 22px rgba(8,169,198,.1)}.communication-video-categories svg{width:25px;height:25px;flex:0 0 auto;fill:none;stroke:#08a9c6;stroke-width:1.7}.communication-video-categories svg path:last-child{fill:#08a9c6;stroke:none}.communication-video-categories span{display:flex;align-items:center;min-width:0;gap:6px}.communication-video-categories strong{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.communication-video-categories small{color:#8293a3;font-size:11px;white-space:nowrap}
.communication-video-category-content{display:grid;place-items:center;align-content:center;min-height:max(360px,calc(100vh - 360px));border:1px dashed #c6dce6;border-radius:14px;background:#f9fcfd;text-align:center}.communication-video-category-content svg{width:62px;height:62px;margin-bottom:13px;fill:none;stroke:#08a9c6;stroke-width:2}.communication-video-category-content svg path:last-child{fill:#08a9c6;stroke:none}.communication-video-category-content strong{color:#21384e;font-size:19px}.communication-video-category-content p{margin:7px 0 0;color:#75889a;font-size:13px}@media(max-width:1200px){.communication-video-categories{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.communication-video-categories{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:480px){.communication-video-categories{grid-template-columns:1fr}}
.communication-video-category-content.has-videos{display:block;min-height:max(360px,calc(100vh - 360px));padding:14px;text-align:left}.communication-video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,260px));align-content:start;justify-content:start;gap:14px;width:100%;min-height:100%}.communication-video-item{overflow:hidden;border:1px solid #d7e6ec;border-radius:14px;background:#fff;box-shadow:0 10px 28px rgba(31,61,82,.08)}
.communication-video-preview{position:relative;display:block;overflow:hidden;width:100%;aspect-ratio:16/9;border:0;padding:0;background:#0b151f;cursor:pointer}.communication-video-preview video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .2s ease-out,filter .2s ease-out}.communication-video-preview::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(4,15,23,.42));opacity:.72;transition:opacity .2s ease-out}.communication-video-preview-play{position:absolute;z-index:2;top:50%;left:50%;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(11,31,44,.62);color:#fff;font-size:16px;box-shadow:0 8px 24px rgba(0,0,0,.24);backdrop-filter:blur(9px);transform:translate(-50%,-50%);transition:transform .2s ease-out,background .2s ease-out}.communication-video-preview:hover video{filter:brightness(.9);transform:scale(1.025)}.communication-video-preview:hover .communication-video-preview-play{background:#08a9c6;transform:translate(-50%,-50%) scale(1.08)}
.communication-video-stage{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:16/9;background:#0b151f;outline:none}.communication-video-stage video{display:block;width:100%;height:100%;background:#0b151f;object-fit:contain;cursor:pointer}.communication-video-stage::after{content:"";position:absolute;z-index:1;inset:auto 0 0;height:42%;pointer-events:none;background:linear-gradient(transparent,rgba(3,12,20,.52));opacity:0;transition:opacity .2s ease-out}.communication-video-stage:hover::after,.communication-video-stage:focus-within::after,.communication-video-item.is-paused .communication-video-stage::after{opacity:1}
.communication-video-center-play{position:absolute;z-index:3;top:50%;left:50%;display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(255,255,255,.38);border-radius:50%;padding:0;background:rgba(13,35,49,.55);color:#fff;cursor:pointer;box-shadow:0 10px 35px rgba(0,0,0,.24);backdrop-filter:blur(14px);transform:translate(-50%,-50%) scale(1);opacity:1;transition:opacity .2s ease-out,transform .2s ease-out,background .2s ease-out}.communication-video-center-play:hover{background:rgba(8,169,198,.78);transform:translate(-50%,-50%) scale(1.06)}.communication-video-center-play span{font-size:23px;line-height:1;transform:translateX(2px)}.communication-video-item.is-playing .communication-video-center-play{pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.82)}
.communication-video-controls{position:absolute;z-index:4;right:12px;bottom:12px;left:12px;display:grid;gap:7px;border:1px solid rgba(255,255,255,.16);border-radius:13px;padding:9px 11px;background:rgba(6,18,28,.72);color:#fff;box-shadow:0 12px 34px rgba(0,0,0,.26);backdrop-filter:blur(14px) saturate(130%);opacity:0;transform:translateY(8px);transition:opacity .2s ease-out,transform .2s ease-out}.communication-video-stage:hover .communication-video-controls,.communication-video-stage:focus-within .communication-video-controls,.communication-video-item.is-paused .communication-video-controls{opacity:1;transform:translateY(0)}
.communication-video-progress-row{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:7px}.communication-video-progress-row time{color:rgba(255,255,255,.82);font-size:10px;font-variant-numeric:tabular-nums;text-align:center}.communication-video-control-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.communication-video-control-group{display:flex;align-items:center;gap:5px;min-width:0}.communication-video-control-group button{display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border:0;border-radius:7px;padding:0;background:transparent;color:#fff;cursor:pointer;transition:background .2s ease-out,transform .2s ease-out}.communication-video-control-group button:hover,.communication-video-control-group button:focus-visible{background:rgba(255,255,255,.16);outline:none;transform:translateY(-1px)}.communication-video-control-group button span{font-size:14px;line-height:1}.communication-video-volume{width:62px}.communication-video-speed-group{margin-left:auto;padding:2px;border-radius:8px;background:rgba(255,255,255,.08)}.communication-video-speed-group button{width:auto;min-width:29px;height:24px;border-radius:6px;padding:0 5px;color:rgba(255,255,255,.7);font-size:9px;font-weight:800}.communication-video-speed-group button.active{background:rgba(8,169,198,.92);color:#fff}
.communication-video-stage input[type=range]{--video-progress:0%;--video-volume:100%;height:14px;margin:0;appearance:none;background:transparent;cursor:pointer}.communication-video-stage input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:99px;background:linear-gradient(90deg,#08a9c6 var(--video-progress),rgba(255,255,255,.28) var(--video-progress))}.communication-video-stage .communication-video-volume::-webkit-slider-runnable-track{background:linear-gradient(90deg,#08a9c6 var(--video-volume),rgba(255,255,255,.28) var(--video-volume))}.communication-video-stage input[type=range]::-webkit-slider-thumb{width:10px;height:10px;margin-top:-3.5px;border:0;border-radius:50%;appearance:none;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.35)}.communication-video-stage input[type=range]::-moz-range-track{height:3px;border:0;border-radius:99px;background:rgba(255,255,255,.28)}.communication-video-stage input[type=range]::-moz-range-progress{height:3px;border-radius:99px;background:#08a9c6}.communication-video-stage input[type=range]::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#fff}.communication-video-stage:fullscreen{aspect-ratio:auto;background:#000}.communication-video-stage:fullscreen video{object-fit:contain}
.communication-video-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 13px}.communication-video-meta strong{overflow:hidden;color:#263e53;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.communication-video-meta small{flex:0 0 auto;color:#81909e;font-size:11px}.communication-video-item.has-error .communication-video-stage::before{content:"视频暂时无法播放";position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:rgba(7,17,25,.86);color:#fff;font-size:13px;font-weight:800}
.communication-video-meta-actions{display:flex;align-items:center;flex:0 0 auto;gap:8px}.communication-video-meta-actions button{min-height:26px;border:1px solid #efc4c4;border-radius:7px;padding:0 9px;background:#fff7f7;color:#c33b3b;font-size:11px;font-weight:800;cursor:pointer;transition:border-color .18s ease-out,background .18s ease-out,color .18s ease-out}.communication-video-meta-actions button:hover{border-color:#df6565;background:#c94747;color:#fff}
.communication-video-player-modal{position:fixed;z-index:5200;inset:0;display:grid;place-items:center;padding:28px;background:rgba(5,15,24,.76);backdrop-filter:blur(12px);animation:communication-video-modal-in .2s ease-out}.communication-video-player-dialog{position:relative;width:min(1080px,calc(100vw - 56px));max-height:calc(100vh - 56px)}.communication-video-player-close{position:absolute;z-index:8;top:-16px;right:-16px;display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(255,255,255,.48);border-radius:50%;background:rgba(16,35,49,.9);color:#fff;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.28);transition:background .2s ease-out,transform .2s ease-out}.communication-video-player-close:hover{background:#08a9c6;transform:scale(1.06)}.communication-video-item-modal{border-color:rgba(255,255,255,.22);box-shadow:0 30px 90px rgba(0,0,0,.38)}.communication-video-item-modal .communication-video-stage{max-height:calc(100vh - 130px)}.communication-video-item-modal .communication-video-meta{background:#fff}.communication-video-item-modal .communication-video-controls{right:18px;bottom:18px;left:18px;padding:11px 14px}@keyframes communication-video-modal-in{from{opacity:0}to{opacity:1}}
.communication-video-upload-modal{position:fixed;inset:0;z-index:4600;display:grid;place-items:center;padding:20px;background:rgba(13,27,42,.58);backdrop-filter:blur(5px)}.communication-video-upload-modal>section{width:min(620px,calc(100vw - 32px));overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 28px 80px rgba(8,25,44,.28)}.communication-video-upload-modal header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px;border-bottom:1px solid #deebf0;background:linear-gradient(135deg,#f1fcfe,#f9fbff)}.communication-video-upload-modal header span{color:#08a9c6;font-size:10px;font-weight:900;letter-spacing:.16em}.communication-video-upload-modal header h2{margin:5px 0;color:#21384e}.communication-video-upload-modal header p{margin:0;color:#718496;font-size:13px}.communication-video-upload-modal header button{border:0;background:transparent;color:#708496;font-size:26px;cursor:pointer}.communication-video-upload-modal form{display:grid;gap:16px;padding:22px}.communication-video-upload-modal label{display:grid;gap:7px;color:#40566b;font-size:13px;font-weight:800}.communication-video-upload-modal input,.communication-video-upload-modal select{box-sizing:border-box;width:100%;min-height:44px;border:1px solid #cfdee6;border-radius:9px;padding:0 12px;background:#fff;color:#263c51;font:inherit}.communication-video-file-field{padding:16px;border:1px dashed #9acdd8;border-radius:11px;background:#f7fcfd}.communication-video-file-field input{padding:9px}.communication-video-file-field small{color:#7a8d9e;font-weight:500}.communication-video-upload-progress{position:relative;overflow:hidden;height:34px;border-radius:8px;background:#edf5f7;text-align:center}.communication-video-upload-progress i{position:absolute;inset:0 auto 0 0;width:0;background:#b9edf3;transition:width .15s ease-out}.communication-video-upload-progress span{position:relative;z-index:1;display:grid;place-items:center;height:100%;color:#087e93;font-size:12px;font-weight:800}.communication-video-upload-modal footer{display:flex;justify-content:flex-end;gap:10px}.communication-video-upload-modal footer button{min-height:40px;border:1px solid #cedce4;border-radius:8px;padding:0 16px;background:#fff;color:#41586c;font-weight:800;cursor:pointer}.communication-video-upload-modal footer button[type=submit]{border-color:#08a9c6;background:#08a9c6;color:#fff}.communication-video-upload-modal footer button:disabled{cursor:wait;opacity:.6}@media(max-width:1000px){.communication-video-grid{grid-template-columns:repeat(auto-fill,minmax(210px,260px))}}@media(max-width:650px){.communication-video-grid{grid-template-columns:1fr}.communication-video-library>header{align-items:flex-start;flex-direction:column}.communication-video-header-actions{width:100%;justify-content:space-between}.communication-video-player-modal{padding:14px}.communication-video-player-dialog{width:calc(100vw - 28px)}.communication-video-player-close{top:8px;right:8px}}

.settings-layout {
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  min-height: auto;
  padding: 18px 20px 20px;
}

.settings-category-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 18px;
  padding: 20px 20px 0;
}

.settings-console > .settings-category-cards:not(.inventory-category-cards) {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
}

.settings-category-card {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 118px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(214, 222, 232, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 44px rgba(20, 36, 56, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(12px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.settings-category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at var(--settings-card-x, 20%) var(--settings-card-y, 0%), rgba(8, 169, 198, 0.16), transparent 30%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.34), transparent 45%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.settings-category-card:hover,
.settings-category-card.active {
  transform: translateY(-2px);
  border-color: rgba(8, 169, 198, 0.44);
  box-shadow: 0 24px 58px rgba(8, 169, 198, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.settings-category-card:hover::after,
.settings-category-card.active::after {
  opacity: 1;
}

.settings-category-card.active {
  background: linear-gradient(135deg, rgba(8, 169, 198, 0.12), rgba(255, 255, 255, 0.9) 48%, rgba(37, 99, 235, 0.08));
}

.settings-category-card span,
.settings-category-card strong,
.settings-category-card small {
  position: relative;
  z-index: 1;
}

.settings-category-card span {
  color: #08a9c6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-category-card strong {
  color: #1f2733;
  font-size: 22px;
  font-weight: 900;
}

.settings-category-card small {
  color: #697586;
  font-size: 14px;
  font-weight: 700;
}

.settings-menu {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 360px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(214, 222, 232, 0.9);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 16px 34px rgba(20, 36, 56, 0.06);
  backdrop-filter: blur(14px);
}

.settings-menu-group {
  display: none;
  gap: 8px;
  opacity: 0;
  transform: translateX(-8px);
}

.settings-menu-group.active {
  display: grid;
  animation: settingsMenuFade 0.24s ease both;
}

@keyframes settingsMenuFade {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.settings-menu-title,
.settings-submenu button {
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-menu-title:focus,
.settings-submenu button:focus {
  outline: none;
}

.settings-menu-title {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 8px;
  color: #0f1419;
  font-size: 17px;
  font-weight: 800;
}

.settings-menu-title:hover {
  color: #17202a;
}

.settings-menu-arrow {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.settings-menu-arrow::before {
  content: ">";
  color: #0f1419;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
}

.settings-menu-group.expanded .settings-menu-arrow::before {
  content: "∨";
  font-size: 18px;
}

.settings-submenu {
  display: grid;
  gap: 10px;
  padding-left: 0;
}

.settings-menu-group:not(.expanded) .settings-submenu {
  display: none;
}

.settings-submenu button {
  min-height: 46px;
  padding: 0 14px;
  color: #1f2933;
  font-size: 15px;
  font-weight: 800;
  border-radius: 12px;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.settings-submenu button:hover,
.settings-submenu button.active {
  background: linear-gradient(135deg, rgba(8, 169, 198, 0.11), rgba(37, 99, 235, 0.08));
  color: #17202a;
  box-shadow: inset 3px 0 0 rgba(8, 169, 198, 0.9);
}

.settings-submenu button:hover {
  transform: translateX(2px);
}

.settings-submenu button.active {
  color: #078da8;
  font-weight: 900;
}

.settings-content {
  min-width: 0;
  padding: 0;
  overflow: auto;
}

.settings-hero {
  display: none;
}

.settings-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(8, 169, 198, 0.11), transparent 32%, rgba(37, 99, 235, 0.08));
}

.settings-hero > div {
  position: relative;
  z-index: 1;
}

.settings-hero span {
  display: block;
  margin-bottom: 5px;
  color: #08a9c6;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.settings-hero h2 {
  margin: 0;
  color: #1f2733;
  font-size: 26px;
  font-weight: 900;
}

.settings-hero p {
  margin: 6px 0 0;
  color: #697586;
  font-size: 14px;
}

.system-panel.settings-panel-hidden {
  display: none;
}

.system-grid.settings-panel-single {
  grid-template-columns: minmax(320px, 1120px);
  align-content: start;
}

.settings-content-switching .settings-card-grid {
  animation: settingsContentSwitch 0.24s ease both;
}

@keyframes settingsContentSwitch {
  from {
    opacity: 0.42;
    transform: translateX(10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.system-grid.settings-panel-single .system-panel {
  grid-column: auto;
}

.main {
  padding: 0 10px 12px;
}

.topbar {
  position: relative;
  height: 70px;
  margin: 0 -10px 10px;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #dfe3e8;
  box-shadow: 0 1px 3px rgba(26, 36, 46, 0.06);
}

.system-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 340px;
}

h1 {
  font-size: 24px;
  font-weight: 800;
}

.module-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #cfd7df;
  border-radius: 6px;
  color: #111827;
  background: #f8fafc;
  font-size: 0;
}

.ai-logo-btn {
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #2563eb 52%, #7c3aed);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.26);
}

.ai-logo-btn::before {
  content: "AI";
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.top-actions {
  flex: 1;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.global-search-box,
.top-new-patient {
  display: none;
}

.topbar.dashboard-topbar .top-actions {
  justify-content: center;
}

.topbar.dashboard-topbar .global-search-box,
.topbar.dashboard-topbar .top-new-patient {
  display: flex;
}

.topbar.dashboard-topbar .global-search-box {
  width: min(54vw, 760px);
}

.search {
  height: 45px;
  width: min(36vw, 490px);
  border-color: #dce2e8;
  border-radius: 5px;
  background: #fff;
  color: #8c96a3;
}

.search input::placeholder {
  color: #bcc4cc;
}

.primary-btn,
.light-btn {
  min-height: 40px;
  border: 1px solid #dbe1e8;
  border-radius: 5px;
  background: #fff;
  color: #384350;
  box-shadow: none;
}

.primary-btn {
  color: #05a8c3;
  background: #fff;
  font-size: 16px;
  min-width: 110px;
  white-space: nowrap;
}

.primary-btn svg {
  width: 17px;
  height: 17px;
}

.neon-button {
  position: relative;
  overflow: hidden;
  border-color: rgba(8, 169, 198, 0.32) !important;
  background: rgba(8, 169, 198, 0.04) !important;
  color: #05a8c3 !important;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.neon-button:hover {
  border-color: rgba(8, 169, 198, 0.62) !important;
  background: rgba(8, 169, 198, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(8, 169, 198, 0.12), 0 12px 26px rgba(8, 169, 198, 0.18);
}

.neon-button-solid {
  border-color: transparent !important;
  background: #08a9c6 !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(8, 169, 198, 0.24);
}

.neon-button-solid:hover {
  border-color: rgba(255, 255, 255, 0.44) !important;
  background: #078eab !important;
  box-shadow: 0 0 0 1px rgba(8, 169, 198, 0.18), 0 16px 34px rgba(8, 169, 198, 0.28);
}

.neon-button-sm {
  min-width: 0;
  padding: 0;
}

.sub-tabs {
  display: flex;
  align-items: end;
  height: 55px;
  gap: 6px;
}

.sub-tabs button {
  height: 44px;
  min-width: 186px;
  border: 1px solid #cdd6e1;
  border-bottom-color: #c7d0db;
  border-radius: 4px 4px 0 0;
  background: #dbe3ee;
  color: #25313f;
  font-size: 20px;
  font-weight: 800;
}

.sub-tabs button.active {
  color: #05a8c3;
  background: #fff;
  border-top: 4px solid #05a8c3;
  border-bottom-color: #fff;
}

.queue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.queue-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 108px;
  padding: 18px;
}

.queue-card:nth-child(4) {
  grid-column: auto;
}

.queue-card strong {
  display: block;
  color: #697586;
  font-size: 15px;
  font-weight: 800;
}

.dashboard-stat-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid rgba(8, 169, 198, 0.18);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(8, 169, 198, 0.14), rgba(47, 109, 235, 0.12));
  color: #05a8c3;
  font-size: 16px;
  font-weight: 900;
}

.dashboard-stat-copy {
  min-width: 0;
}

.queue-card b {
  display: block;
  margin-top: 8px;
  color: #05a8c3;
  font-size: 31px;
  font-weight: 900;
  line-height: 1;
}

/* Workbench personal memo and administrator-assigned task center. */
.dashboard-task-summary { position: relative; cursor: pointer; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.dashboard-task-summary:hover { transform: translateY(-3px); border-color: rgba(8,169,198,.38); box-shadow: 0 18px 36px rgba(35,105,133,.13); }
.dashboard-task-summary:focus-visible { outline: 3px solid rgba(8,169,198,.2); outline-offset: 3px; }
.pending-record-summary,.pending-followup-summary { cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.pending-record-summary:hover,.pending-followup-summary:hover { transform:translateY(-3px); border-color:rgba(8,169,198,.38); box-shadow:0 18px 36px rgba(35,105,133,.13); }
.pending-record-summary:active,.pending-followup-summary:active { transform:translateY(1px) scale(.99); }
.pending-record-summary:focus-visible,.pending-followup-summary:focus-visible { outline:3px solid rgba(8,169,198,.2); outline-offset:3px; }

.pending-record-modal { position:fixed; inset:0; z-index:13000; display:grid; place-items:center; padding:24px; background:rgba(17,38,56,.46); opacity:0; backdrop-filter:blur(12px) saturate(112%); transition:opacity .18s ease; }
.pending-record-modal.open { opacity:1; }
.pending-record-dialog { display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:min(900px,calc(100vw - 40px)); max-height:min(720px,calc(100dvh - 48px)); overflow:hidden; border:1px solid rgba(49,181,207,.3); border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(240,249,253,.97)); box-shadow:0 30px 80px rgba(14,43,64,.3),0 7px 22px rgba(7,164,194,.1); transform:translateY(10px) scale(.985); transition:transform .18s ease; }
.pending-record-modal.open .pending-record-dialog { transform:none; }
.pending-record-dialog>header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px 24px 18px; border-bottom:1px solid rgba(8,169,198,.14); background:linear-gradient(110deg,rgba(225,249,253,.92),rgba(245,248,255,.86)); }
.pending-record-dialog>header span { color:#08a7c4; font-size:11px; font-weight:900; letter-spacing:.14em; }
.pending-record-dialog>header h2 { margin:4px 0 0; color:#132d46; font-size:23px; font-weight:880; }
.pending-record-dialog>header p { margin:5px 0 0; color:#60758a; font-size:13px; }
.pending-record-dialog>header button { display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:12px; background:#e8f7fb; color:#62778a; font-size:25px; cursor:pointer; }
.pending-record-content { min-height:260px; overflow:auto; padding:20px 24px; }
.pending-record-table-wrap { overflow:auto; border:1px solid rgba(79,143,172,.18); border-radius:14px; background:rgba(255,255,255,.82); }
.pending-record-table { width:100%; border-collapse:collapse; color:#29425a; font-size:14px; }
.pending-record-table th { padding:13px 16px; background:#edf8fb; color:#5e7488; text-align:left; font-size:12px; font-weight:850; white-space:nowrap; }
.pending-record-table td { padding:15px 16px; border-top:1px solid rgba(79,143,172,.13); vertical-align:middle; }
.pending-record-table tbody tr:hover { background:rgba(232,248,252,.48); }
.pending-record-table td:first-child { width:68px; color:#8294a5; font-variant-numeric:tabular-nums; }
.pending-record-table td:last-child { width:112px; }
.pending-record-table strong,.pending-record-table small { display:block; }
.pending-record-table strong { color:#17324a; }
.pending-record-table small { margin-top:4px; color:#8798a8; font-size:12px; }
.pending-record-write-btn { min-height:36px; padding:0 14px; border:0; border-radius:10px; background:linear-gradient(135deg,#12b5d2,#078eac); color:#fff; font-weight:800; white-space:nowrap; box-shadow:0 7px 16px rgba(8,151,180,.16); cursor:pointer; }
.pending-record-write-btn:hover { transform:translateY(-1px); }
.pending-record-write-btn:active { transform:translateY(1px) scale(.98); }
.pending-followup-actions { display:flex; align-items:center; gap:8px; }
.pending-followup-complete-btn { min-height:36px; padding:0 14px; border:1px solid rgba(32,163,130,.25); border-radius:10px; background:#edf9f5; color:#23866e; font-weight:800; white-space:nowrap; cursor:pointer; }
.pending-followup-complete-btn:hover { border-color:rgba(32,163,130,.48); background:#e3f6ef; }
.pending-followup-dialog { width:min(1040px,calc(100vw - 40px)); }
.pending-followup-table td:last-child { width:176px; }
.pending-record-empty { display:grid; justify-items:center; align-content:center; min-height:310px; color:#8797a7; text-align:center; }
.pending-record-empty span { display:grid; place-items:center; width:58px; height:58px; margin-bottom:14px; border-radius:18px; background:#e9f6f8; color:#72afbb; font-size:25px; }
.pending-record-empty strong { color:#728596; font-size:16px; }
.pending-record-empty p { margin:7px 0 0; color:#9aa8b5; font-size:13px; }
.pending-record-dialog>footer { display:flex; justify-content:flex-end; padding:14px 24px 18px; border-top:1px solid rgba(8,169,198,.13); background:rgba(250,253,255,.9); }
.pending-record-dialog>footer .light-btn { min-width:92px; min-height:42px; border-radius:11px; }
@media(max-width:640px){.pending-record-modal{padding:0;align-items:end}.pending-record-dialog{width:100vw;max-height:92dvh;border-width:1px 0 0;border-radius:20px 20px 0 0}.pending-record-dialog>header,.pending-record-content,.pending-record-dialog>footer{padding-left:16px;padding-right:16px}.pending-record-table{min-width:650px}}
@media(prefers-reduced-motion:reduce){.pending-record-modal,.pending-record-dialog,.pending-record-summary,.pending-record-write-btn{transition:none!important}}

/* Dedicated follow-up execution workspace; the plan-creation modal remains unchanged. */
.execute-followup-modal {
  position: fixed;
  inset: 0;
  z-index: 13500;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(18, 39, 57, .5);
  backdrop-filter: blur(12px) saturate(112%);
}
.execute-followup-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(980px, calc(100vw - 36px));
  max-height: calc(100dvh - 44px);
  overflow: hidden;
  border: 1px solid rgba(53, 177, 204, .3);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.99), rgba(239,249,253,.98));
  box-shadow: 0 32px 86px rgba(13, 43, 64, .34), 0 8px 24px rgba(7, 164, 194, .1);
}
.execute-followup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 24px 17px;
  border-bottom: 1px solid rgba(8, 169, 198, .15);
  background: linear-gradient(110deg, rgba(221,248,252,.94), rgba(246,249,255,.9));
}
.execute-followup-head span { color: #079db9; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.execute-followup-head h2 { margin: 4px 0 0; color: #17314a; font-size: 24px; font-weight: 900; }
.execute-followup-head p { margin: 4px 0 0; color: #6f8293; font-size: 13px; }
.execute-followup-head > button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 13px;
  background: #e7f6fa;
  color: #637a8d;
  font-size: 25px;
  cursor: pointer;
}
#executeFollowupForm { display: flex; min-height: 0; flex-direction: column; }
.execute-followup-scroll { min-height: 0; overflow-y: auto; padding: 20px 24px 22px; }
.execute-patient-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(74, 168, 193, .22);
  border-radius: 16px;
  background: linear-gradient(120deg, #f8fdfe, #eef8fc 62%, #f1f5ff);
  box-shadow: 0 10px 25px rgba(49, 105, 132, .08);
}
.execute-patient-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #16b6d1, #087f9f); color: #fff; font-size: 18px; font-weight: 900; box-shadow: 0 8px 18px rgba(8, 142, 169, .2); }
.execute-patient-card > div:not(.execute-patient-avatar) { display: grid; gap: 3px; min-width: 0; }
.execute-patient-card small { color: #8294a3; font-size: 11px; }
.execute-patient-card strong { overflow: hidden; color: #263e55; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.execute-patient-card span { color: #718698; font-size: 12px; }
.execute-followup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 18px; }
.execute-followup-field { display: grid; align-content: start; gap: 8px; min-width: 0; margin: 0; border: 0; padding: 0; color: #41586c; font-size: 13px; font-weight: 800; }
.execute-followup-field > span, .execute-followup-field > legend { padding: 0; color: #40576b; font-size: 13px; font-weight: 850; }
.execute-followup-wide { grid-column: 1 / -1; }
.execute-satisfaction-field[hidden] { display: none !important; }
.execute-satisfaction-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.execute-satisfaction-options label { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 46px; padding: 8px 10px; border: 1px solid #d0e0e7; border-radius: 11px; background: linear-gradient(145deg,#fff,#f5fbfe); color: #41586c; cursor: pointer; transition: border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease; }
.execute-satisfaction-options label:hover { border-color: #84c9d7; color: #078da8; transform: translateY(-1px); }
.execute-satisfaction-options label.checked { border-color: #08a9c6; background: linear-gradient(135deg,#dff8fc,#e8f1ff); color: #078da9; box-shadow: 0 0 0 3px rgba(8,169,198,.09); }
.execute-satisfaction-options input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: #08a9c6; }
.execute-satisfaction-field > p { margin: 0; color: #078fa9; font-size: 12px; font-weight: 650; line-height: 1.6; }
.execute-readonly-value { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border: 1px solid #d3e2e9; border-radius: 11px; background: rgba(249,252,254,.92); }
.execute-readonly-value strong { color: #243d54; font-size: 14px; }
.execute-readonly-value small { color: #8a9ba9; font-size: 11px; font-weight: 650; }
.execute-followup-field textarea {
  width: 100%;
  min-height: 112px;
  resize: vertical;
  border: 1px solid #cddfe7;
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  color: #243c52;
  font: inherit;
  font-weight: 600;
  line-height: 1.6;
}
.execute-followup-field textarea::placeholder { color: #8798a6; opacity: 1; }
.execute-followup-field textarea:focus { outline: 0; border-color: #08a9c6; box-shadow: 0 0 0 4px rgba(8,169,198,.11); }
.execute-channel-group, .execute-status-group { display: flex; flex-wrap: wrap; gap: 8px; }
.execute-channel-group button, .execute-status-group button { min-width: 76px; min-height: 40px; border: 1px solid #d0e0e7; border-radius: 10px; padding: 0 14px; background: #fff; color: #5a6e80; font: inherit; font-weight: 800; cursor: pointer; }
.execute-channel-group button:hover, .execute-status-group button:hover { border-color: #84c9d7; color: #078da8; }
.execute-channel-group button.active, .execute-status-group button.active { border-color: #08a9c6; background: #e8f9fc; color: #078da8; box-shadow: inset 0 0 0 1px rgba(8,169,198,.12); }
.execute-channel-group button:active, .execute-status-group button:active, .execute-followup-head > button:active { transform: translateY(1px) scale(.98); }
.execute-followup-field .system-card-select-trigger { min-height: 48px; border-radius: 11px; background: #fff; font-weight: 750; }
.execute-followup-field .system-card-select-menu { position: relative; z-index: 2; top: auto; right: auto; left: auto; max-height: 230px; margin-top: 7px; }
.execute-followup-actions { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 10px; padding: 14px 24px 18px; border-top: 1px solid rgba(8,169,198,.14); background: rgba(250,253,255,.96); }
.execute-followup-actions button { min-height: 44px; border-radius: 11px; padding: 0 18px; white-space: nowrap; }
.execute-followup-actions .primary-btn { min-width: 112px; }
.execute-appointment-btn { border-color: rgba(8,169,198,.35); color: #078da8; }
@media(max-width:720px){.execute-followup-modal{align-items:end;padding:0}.execute-followup-dialog{width:100vw;max-height:94dvh;border-width:1px 0 0;border-radius:20px 20px 0 0}.execute-followup-head,.execute-followup-scroll,.execute-followup-actions{padding-left:16px;padding-right:16px}.execute-patient-card{grid-template-columns:44px 1fr}.execute-patient-card>div:nth-child(n+3){grid-column:2}.execute-followup-grid{grid-template-columns:1fr}.execute-followup-wide{grid-column:auto}.execute-followup-actions{display:grid;grid-template-columns:1fr 1fr}.execute-followup-actions .execute-appointment-btn{grid-column:1/-1;grid-row:1}.execute-followup-actions button{width:100%}}
@media(prefers-reduced-motion:reduce){.execute-followup-modal *{scroll-behavior:auto!important;transition:none!important}}
.dashboard-task-summary .dashboard-stat-copy { padding-right: 4px; }
.dashboard-refund-pending-count { display:inline-flex; align-items:center; width:max-content; margin-top:7px; padding:5px 9px; border:1px solid rgba(205,91,67,.24); border-radius:9px; background:rgba(255,241,237,.9); color:#b54f3c; font-size:12px; font-weight:850; line-height:1.2; white-space:nowrap; }
.dashboard-task-summary-actions { display: grid; gap: 6px; margin-left: auto; }
.dashboard-task-summary-actions button { min-height: 30px; padding: 0 9px; border-radius: 9px; font-size: 11px; line-height: 1; white-space: nowrap; }
.dashboard-task-summary-actions .light-btn { border-color: rgba(8,169,198,.25); color: #078ca7; }
.dashboard-task-summary-actions .primary-btn { border: 0; background: #079fbc; color: #fff; }

.dashboard-task-center { position: fixed; inset: 0; z-index: 2600; display: grid; place-items: center; padding: 24px; background: rgba(17,38,56,.46); backdrop-filter: blur(12px) saturate(112%); }
.dashboard-task-center-card { display: grid; grid-template-rows: auto auto auto minmax(0,1fr); width: min(1040px,calc(100vw - 40px)); max-height: min(860px,calc(100dvh - 40px)); overflow: hidden; border: 1px solid rgba(23,174,203,.28); border-radius: 24px; background: linear-gradient(145deg,rgba(252,254,255,.99),rgba(241,249,253,.98)); box-shadow: 0 34px 90px rgba(18,49,72,.3),0 8px 24px rgba(5,166,196,.1); animation: dashboardTaskCenterIn .2s ease-out; }
@keyframes dashboardTaskCenterIn { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.dashboard-task-center-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 100px; padding: 20px 24px; border-bottom: 1px solid rgba(9,171,201,.14); background: radial-gradient(circle at 22% 25%,rgba(59,211,232,.13),transparent 34%),linear-gradient(110deg,rgba(235,251,254,.95),rgba(249,251,255,.88)); }
.dashboard-task-center-head span { color: #079bb7; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.dashboard-task-center-head h2 { margin: 4px 0; color: #132b44; font-size: 24px; }
.dashboard-task-center-head p { margin: 0; color: #6d7f91; font-size: 13px; }
.dashboard-task-center-head>button { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 13px; background: #e8f7fb; color: #62768a; font-size: 27px; transition: background .18s ease,color .18s ease,transform .18s ease; }
.dashboard-task-center-head>button:hover { background: #d8f2f7; color: #078ba6; transform: rotate(3deg); }
.dashboard-task-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; border-bottom: 1px solid rgba(9,171,201,.12); background: rgba(255,255,255,.74); }
.dashboard-task-toolbar>div { display: flex; gap: 9px; }
.dashboard-task-toolbar button { min-height: 38px; border-radius: 10px; padding: 0 15px; }
.dashboard-task-toolbar .primary-btn,.dashboard-task-composer .primary-btn { border: 0; background: linear-gradient(135deg,#12b5d2,#078eac); color: #fff; }
.dashboard-task-toolbar>span { color: #6c7e90; font-size: 12px; font-weight: 700; }
.dashboard-task-history-toggle { color: #526b80; }
.dashboard-task-date-group { display: grid; gap: 9px; margin-top: 16px; }
.dashboard-task-date-group>h4 { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 8px; border-bottom: 1px solid rgba(113,151,177,.16); color: #314b63; font-size: 14px; }
.dashboard-task-date-group>h4 span { display: inline-grid; place-items: center; min-width: 23px; height: 23px; padding: 0 7px; border-radius: 8px; background: #e8f8fb; color: #078da9; font-size: 11px; }
.dashboard-date-task-notice { margin: 0; padding: 8px 18px; border-top: 1px solid rgba(8,169,198,.12); background: linear-gradient(90deg,rgba(230,249,253,.85),rgba(245,249,255,.8)); color: #527085; font-size: 12px; }
.dashboard-date-task-notice::before { content: "ⓘ"; margin-right: 6px; color: #08a9c6; }
#dashboardTodayMark.active { color: #fff; background: linear-gradient(135deg,#10b6d2,#078da9); box-shadow: 0 6px 14px rgba(8,151,180,.2); }
.dashboard-task-composer { display: grid; grid-template-columns: minmax(180px,.55fr) minmax(280px,1fr); gap: 14px 18px; margin: 14px 24px 0; padding: 16px; border: 1px solid rgba(8,169,198,.25); border-radius: 16px; background: linear-gradient(135deg,rgba(235,250,253,.96),rgba(249,252,255,.97)); box-shadow: 0 12px 26px rgba(35,104,132,.08); }
.dashboard-task-composer>div:first-child b { color: #17314b; font-size: 16px; }
.dashboard-task-composer>div:first-child p { margin: 5px 0 0; color: #708194; font-size: 12px; line-height: 1.5; }
.dashboard-task-composer label,.dashboard-task-composer fieldset { display: grid; gap: 7px; min-width: 0; margin: 0; color: #30465d; font-size: 13px; font-weight: 750; }
.dashboard-task-composer fieldset { grid-column: 1 / -1; padding: 0; border: 0; }
.dashboard-task-composer legend { margin-bottom: 8px; }
.dashboard-task-composer textarea,.dashboard-task-composer input { width: 100%; border: 1px solid rgba(116,153,177,.32); border-radius: 11px; background: #fff; color: #17304b; }
.dashboard-task-composer textarea { min-height: 78px; padding: 11px 12px; resize: vertical; }
.dashboard-task-composer input { height: 42px; padding: 0 12px; }
.dashboard-task-composer textarea:focus,.dashboard-task-composer input:focus { outline: 0; border-color: rgba(5,175,207,.78); box-shadow: 0 0 0 4px rgba(5,175,207,.11); }
.dashboard-task-deadline-label { position: relative; z-index: 18; }
.dashboard-task-deadline { position: relative; }
.dashboard-task-deadline-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 52px; padding: 0 13px 0 15px; border: 1px solid rgba(116,153,177,.32); border-radius: 12px; background: linear-gradient(145deg,#fff,#f5fbfd); color: #6c7d8e; font: inherit; font-weight: 750; text-align: left; cursor: pointer; transition: border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.dashboard-task-deadline-trigger:hover,.dashboard-task-deadline-trigger[aria-expanded="true"] { border-color: rgba(5,175,207,.72); background: #fff; box-shadow: 0 0 0 4px rgba(5,175,207,.1); }
.dashboard-task-deadline-trigger.has-value { color: #17304b; }
.dashboard-task-deadline-trigger i { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 8px; background: #e7f7fa; color: #078eaa; font-style: normal; font-size: 12px; font-weight: 900; }
.dashboard-task-datetime-popover[hidden] { display: none !important; }
.dashboard-task-datetime-popover { position: absolute; top: calc(100% + 9px); right: 0; z-index: 120; width: min(420px,calc(100vw - 56px)); padding: 14px; border: 1px solid rgba(8,169,198,.28); border-radius: 16px; background: rgba(255,255,255,.99); box-shadow: 0 24px 60px rgba(18,55,78,.24),0 7px 20px rgba(8,169,198,.11); color: #263f57; }
.dashboard-task-datetime-popover.above { top: auto; bottom: calc(100% + 9px); }
.dashboard-task-datetime-popover.centered { position: fixed; top: 50%; right: auto; left: 50%; width: min(420px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; transform: translate(-50%,-50%); }
.dashboard-task-datetime-popover>header { display: grid; grid-template-columns: 38px minmax(0,1fr) 38px; align-items: center; gap: 8px; margin-bottom: 10px; }
.dashboard-task-datetime-popover>header strong { text-align: center; font-size: 15px; font-variant-numeric: tabular-nums; }
.dashboard-task-datetime-popover>header button { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 10px; background: #edf8fb; color: #537087; font-size: 24px; cursor: pointer; }
.dashboard-task-datetime-popover>header button:hover { background: #dff4f8; color: #078da8; }
.dashboard-task-calendar-week,.dashboard-task-calendar-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; }
.dashboard-task-calendar-week { margin-bottom: 4px; color: #8191a0; text-align: center; font-size: 11px; font-weight: 800; }
.dashboard-task-calendar-week span { padding: 5px 0; }
.dashboard-task-calendar-days button { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 0; border-radius: 10px; background: transparent; color: #31475c; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; transition: background .14s ease,color .14s ease,transform .14s ease; }
.dashboard-task-calendar-days button:hover { background: #e9f8fb; color: #078da8; transform: translateY(-1px); }
.dashboard-task-calendar-days button.outside { color: #acb7c1; }
.dashboard-task-calendar-days button.today { box-shadow: inset 0 0 0 1px rgba(8,169,198,.45); color: #078da8; }
.dashboard-task-calendar-days button.selected { background: linear-gradient(135deg,#11b4d0,#078da9); color: #fff; box-shadow: 0 6px 14px rgba(8,151,180,.2); }
.dashboard-task-datetime-popover>footer { display: grid; grid-template-columns: minmax(126px,1fr) auto minmax(90px,.85fr); align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(113,151,177,.16); }
.dashboard-task-datetime-popover>footer button { min-height: 40px; border-radius: 10px; }
.dashboard-task-datetime-popover>footer .primary-btn { justify-self: stretch; }
.dashboard-task-time-control { position: relative; min-width: 0; }
.dashboard-task-time-control>input { width: 100%; height: 40px; padding: 0 38px 0 12px; border: 1px solid rgba(105,151,176,.34); border-radius: 10px; background: #fff; color: #19344d; font: inherit; font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.dashboard-task-time-control>input:focus { outline: 0; border-color: #08a9c6; box-shadow: 0 0 0 3px rgba(8,169,198,.1); }
.dashboard-task-time-steppers { position: absolute; top: 2px; right: 2px; bottom: 2px; display: grid; grid-template-rows: 1fr 1fr; width: 32px; overflow: hidden; border-left: 1px solid #d8e9ee; border-radius: 0 8px 8px 0; }
.dashboard-task-time-steppers>button { display: grid; place-items: center; min-height: 0 !important; padding: 0; border: 0; border-radius: 0 !important; background: #eff8fa; color: #547386; font-size: 10px; line-height: 1; cursor: pointer; }
.dashboard-task-time-steppers>button+button { border-top: 1px solid #d8e9ee; }
.dashboard-task-time-steppers>button:hover { background: #dff5f9; color: #078da8; }
.dashboard-task-composer footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; }
.dashboard-task-composer footer button { min-height: 38px; border-radius: 10px; padding: 0 15px; }
.dashboard-task-recipients { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.dashboard-task-recipients>label { position: relative; display: block; }
.dashboard-task-recipients input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dashboard-task-recipients label span { display: grid; gap: 2px; min-height: 54px; padding: 9px 11px; border: 1px solid rgba(116,153,177,.25); border-radius: 11px; background: #fff; cursor: pointer; transition: border-color .16s ease,background .16s ease,transform .16s ease; }
.dashboard-task-recipients label span:hover { transform: translateY(-1px); border-color: rgba(8,169,198,.42); }
.dashboard-task-recipients input:checked+span { border-color: #08a9c6; background: #e9f9fc; box-shadow: 0 0 0 3px rgba(8,169,198,.09); }
.dashboard-task-recipients small { color: #7a8a9a; font-size: 11px; }
.dashboard-task-inline-empty { margin: 0; color: #7a8a9a; font-weight: 500; }
.dashboard-task-scroll { min-height: 0; overflow: auto; padding: 18px 24px 24px; }
.dashboard-task-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dashboard-task-section-title h3 { margin: 0; color: #17304a; font-size: 17px; }
.dashboard-task-section-title span,.dashboard-task-archive summary span,.dashboard-task-admin-history summary span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 8px; background: #e9f8fb; color: #078da9; font-size: 12px; font-weight: 850; }
.dashboard-task-list { display: grid; gap: 10px; }
.dashboard-task-item { position: relative; display: grid; grid-template-columns: 5px minmax(0,1fr); overflow: hidden; border: 1px solid rgba(126,153,177,.2); border-radius: 14px; background: rgba(255,255,255,.94); box-shadow: 0 8px 20px rgba(35,90,116,.055); }
.dashboard-task-item.assigned { border-color: rgba(34,126,211,.22); background: linear-gradient(135deg,#fff,rgba(237,247,255,.85)); }
.dashboard-task-item.refund-approval { border-color: rgba(206,112,91,.3); background: linear-gradient(135deg,#fff,rgba(255,246,243,.92)); }
.dashboard-task-item.completed { opacity: .88; background: #f8fafc; }
.dashboard-task-marker { background: #aab5c1; }
.dashboard-task-item.assigned .dashboard-task-marker { background: #2789dc; }
.dashboard-task-item.refund-approval .dashboard-task-marker { background: #ce705b; }
.dashboard-task-item.completed .dashboard-task-marker { background: #70aa9b; }
.dashboard-task-item-main { min-width: 0; padding: 13px 15px; }
.dashboard-task-item-main>header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dashboard-task-item-main>header>div { display: grid; gap: 6px; min-width: 0; }
.dashboard-task-item-main>header strong { color: #20364d; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.dashboard-task-type { width: max-content; color: #718193; font-size: 11px; font-weight: 850; }
.dashboard-task-item.assigned .dashboard-task-type { color: #237cc4; }
.dashboard-task-item.refund-approval .dashboard-task-type { color: #ad4e3c; }
.dashboard-task-status { padding: 4px 8px; border-radius: 7px; background: #e7f5f1; color: #35806e; font-size: 11px; font-weight: 850; white-space: nowrap; }
.dashboard-task-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; color: #718193; font-size: 11px; }
.dashboard-task-personal-action { display: flex; justify-content: flex-end; margin-top: 9px; }
.dashboard-task-personal-action button { min-height: 34px; border-radius: 9px; color: #52677b; }
.dashboard-refund-approval-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(206,112,91,.16); }
.dashboard-refund-approval-actions button { min-width: 96px; min-height: 38px; border-radius: 10px; }
.dashboard-refund-approval-actions .primary-btn { border: 1px solid #b95442; background: #b95442; color: #fff; }
.dashboard-refund-approval-actions .light-btn { border-color: #dfc0b9; color: #8d5145; background: #fff; }
.dashboard-task-feedback { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(39,137,220,.13); }
.dashboard-task-feedback label { display: grid; gap: 6px; color: #36516b; font-size: 12px; font-weight: 750; }
.dashboard-task-feedback textarea { width: 100%; min-height: 64px; padding: 9px 11px; border: 1px solid rgba(89,139,181,.27); border-radius: 10px; background: #fff; resize: vertical; }
.dashboard-task-feedback textarea:focus { outline: 0; border-color: #258bcf; box-shadow: 0 0 0 3px rgba(37,139,207,.1); }
.dashboard-task-feedback>div { display: grid; justify-items: end; gap: 6px; }
.dashboard-task-feedback small { color: #8493a1; font-size: 10px; }
.dashboard-task-feedback button { min-height: 36px; border: 0; border-radius: 9px; padding: 0 13px; background: #2188d0; color: #fff; }
.dashboard-task-feedback button:disabled { cursor: not-allowed; background: #d9e3eb; color: #8c9aa7; }
.dashboard-task-feedback-record { margin-top: 11px; padding: 10px 12px; border-radius: 10px; background: #eef7f4; color: #355f55; }
.dashboard-task-feedback-record b { font-size: 11px; }
.dashboard-task-feedback-record p { margin: 4px 0; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.dashboard-task-feedback-record small { color: #718a83; font-size: 10px; }
.dashboard-task-empty { padding: 34px 20px; border: 1px dashed rgba(9,171,201,.25); border-radius: 14px; background: rgba(247,252,254,.72); text-align: center; }
.dashboard-task-empty b { color: #36516a; }
.dashboard-task-empty p { margin: 6px 0 0; color: #7a8998; font-size: 12px; }
.dashboard-task-empty.compact { padding: 18px; }
.dashboard-task-archive,.dashboard-task-admin-history { margin-top: 16px; border-top: 1px solid rgba(113,151,177,.17); }
.dashboard-task-archive summary,.dashboard-task-admin-history summary { display: flex; align-items: center; gap: 8px; padding: 14px 2px 10px; color: #334a61; font-size: 14px; font-weight: 850; cursor: pointer; }

@media(max-width:1100px){
  .dashboard-task-recipients { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px){
  .dashboard-task-center { padding: 0; }
  .dashboard-task-center-card { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .dashboard-task-center-head { min-height: 88px; padding: 16px; }
  .dashboard-task-toolbar { align-items: flex-start; flex-direction: column; padding: 12px 16px; }
  .dashboard-task-toolbar>div { width: 100%; }
  .dashboard-task-toolbar button { flex: 1; }
  .dashboard-task-composer { grid-template-columns: 1fr; margin: 12px 16px 0; }
  .dashboard-task-composer footer,.dashboard-task-composer fieldset { grid-column: auto; }
  .dashboard-task-recipients { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-task-scroll { padding: 16px; }
  .dashboard-task-feedback { grid-template-columns: 1fr; }
  .dashboard-task-feedback>div { display: flex; align-items: center; justify-content: space-between; }
  .dashboard-task-datetime-popover,.dashboard-task-datetime-popover.above,.dashboard-task-datetime-popover.centered { position: fixed; top: 50%; right: auto; bottom: auto; left: 50%; width: min(420px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; transform: translate(-50%,-50%); }
}
@media(prefers-reduced-motion:reduce){
  .dashboard-task-center-card { animation: none; }
  .dashboard-task-summary,.dashboard-task-recipients label span,.dashboard-task-center button { transition: none !important; }
  .dashboard-task-summary:hover,.dashboard-task-recipients label span:hover,.dashboard-task-center-head>button:hover { transform: none; }
}

.ops-row {
  display: grid;
  grid-template-columns: minmax(420px, 1fr);
  gap: 14px;
  margin-top: 16px;
  align-items: start;
}

.work-card,
.visit-board {
  border-radius: 20px;
}

.work-card {
  padding: 18px;
}

.work-card h2 {
  margin: 0 0 14px;
  font-size: 23px;
}

.work-card h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.15;
}

.work-revenue-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 0;
  background: transparent;
  color: #87929e;
  cursor: pointer;
}

.work-revenue-eye svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.work-revenue-eye.visible {
  color: #08a9c6;
}

.work-revenue-eye:hover {
  color: #08a9c6;
}

.work-card h2 span {
  color: #9aa4ad;
  font-size: 18px;
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.mini-stats div {
  display: grid;
  align-content: center;
  min-height: 92px;
  padding: 16px;
  font-size: 16px;
}

.mini-stats span {
  color: #56616f;
  font-size: 14px;
  font-weight: 700;
}

.mini-stats b {
  color: #070b10;
  margin-top: 8px;
  font-size: 25px;
  font-weight: 900;
}

.warn-box b {
  color: #ff524b;
}

.visit-board {
  margin-top: 20px;
  overflow: visible;
}

.visit-board.glow-card::before {
  pointer-events: none;
}

.visit-tabs {
  display: flex;
  align-items: center;
  height: 58px;
  padding: 0 10px;
  border-bottom: 1px solid #d9dee5;
}

.visit-tabs button {
  height: 58px;
  min-width: 150px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #4a5260;
  font-size: 20px;
  font-weight: 800;
}

.visit-tabs button.active {
  color: #08a9c6;
  border-bottom-color: #08a9c6;
}

.visit-tabs .board-setting {
  margin-left: auto;
  height: 42px;
  min-width: 168px;
  border: 1px solid #cfd6de;
  border-radius: 4px;
  color: #5b6572;
  background: #fff;
  font-size: 16px;
}

.visit-tools {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 78px;
  padding: 10px;
  border-bottom: 1px solid #dce1e7;
  overflow: visible;
}

.date-box {
  position: relative;
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 0;
  min-width: 270px;
  height: 44px;
  color: #3d4651;
  cursor: pointer;
}

.date-box input {
  flex: 1;
  width: 228px;
  height: 44px;
  padding: 0 58px 0 16px;
  border-radius: 4px 0 0 4px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.date-box span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 44px;
  color: #fff;
  background: #08a9c6;
  border-radius: 0 4px 4px 0;
  font-weight: 800;
  cursor: pointer;
}

.date-box::after {
  content: "□";
  position: absolute;
  right: 55px;
  top: 50%;
  transform: translateY(-52%);
  color: #b8c1ca;
  font-size: 19px;
  pointer-events: none;
}

.dashboard-calendar {
  position: absolute;
  top: 62px;
  left: 10px;
  z-index: 90;
  width: 430px;
  border: 1px solid #d6dde5;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}

.dashboard-calendar.hidden {
  display: none;
}

.dashboard-calendar-value {
  height: 56px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e8edf2;
  color: #1f2935;
  font-size: 22px;
  font-weight: 500;
}

.dashboard-calendar-head {
  display: grid;
  grid-template-columns: 40px 40px 1fr 40px 40px;
  align-items: center;
  height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid #edf1f5;
}

.dashboard-calendar-head button {
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  color: #a5adb7;
  font-size: 30px;
  cursor: pointer;
}

.dashboard-calendar-head strong {
  text-align: center;
  color: #1f2935;
  font-size: 22px;
}

.dashboard-calendar-week,
.dashboard-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 22px;
}

.dashboard-calendar-week {
  height: 52px;
  align-items: center;
  color: #1f2935;
  font-size: 20px;
  font-weight: 700;
}

.dashboard-calendar-week span {
  text-align: center;
}

.dashboard-calendar-days {
  row-gap: 8px;
  padding-bottom: 20px;
}

.dashboard-calendar-day {
  place-self: center;
  width: 42px;
  height: 42px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #1f2935;
  font-size: 21px;
  cursor: pointer;
}

.dashboard-calendar-day:hover {
  background: #e9fbff;
  border-color: #19aecb;
}

.dashboard-calendar-day.muted {
  color: #bcc3cb;
}

.dashboard-calendar-day.active {
  border-color: #02a9c8;
  background: #d9f8fb;
  color: #0497b2;
  font-weight: 800;
}

.dashboard-calendar-day.today:not(.active) {
  color: #08a9c6;
  font-weight: 800;
}

.dashboard-calendar-today {
  display: block;
  width: 100%;
  height: 60px;
  border: 0;
  border-top: 1px solid #edf1f5;
  background: #fff;
  color: #05a9c8;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
}

.square-btn,
.light-btn {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #cfd7df;
  border-radius: 5px;
  background: #fff;
  color: #5c6672;
  font-size: 28px;
}

.light-btn {
  min-width: 104px;
  font-size: 16px;
  font-weight: 800;
}

.check-line {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 44px;
  white-space: nowrap;
  color: #2d3743;
  font-size: 17px;
}

.check-line input {
  width: 19px;
  height: 19px;
  accent-color: #08a9c6;
}

.board-search {
  flex: 0 0 245px;
  width: 245px;
}

.visit-select {
  min-width: 240px;
  height: 44px;
  border-radius: 5px;
  color: #a4adb7;
  font-size: 17px;
}

.settings {
  margin-left: auto;
  font-size: 20px;
}

.dense-table-wrap {
  overflow-x: auto;
}

.visit-table {
  min-width: 1320px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 18px;
}

.visit-table th,
.visit-table td {
  height: 54px;
  padding: 0 10px;
  border-right: 1px solid #d3d8df;
  border-bottom: 1px solid #d3d8df;
  text-align: center;
  white-space: nowrap;
}

.visit-table th {
  background: #f3f5f7;
  color: #202a36;
  font-size: 18px;
  font-weight: 900;
}

.visit-table tbody tr {
  background: #fff;
  color: #1d4a56;
  cursor: pointer;
}

.visit-table tbody tr:nth-child(even) {
  background: #fff;
}

.visit-table tbody tr.selected,
.visit-table tbody tr.selected:nth-child(even) {
  background: #0aa9bf;
  color: #fff;
}

.visit-table tbody tr.selected .patient-cell strong {
  color: #fff;
}

.visit-table tbody tr.selected .patient-name-link {
  color: #fff;
}

.visit-table tbody tr.selected .visit-type-badge {
  background: #fff;
  color: #0aa9bf;
}

.visit-table td.patient-cell {
  text-align: center;
}

.patient-name-wrap {
  display: inline-grid;
  grid-template-columns: 31px max-content max-content;
  align-items: center;
  justify-content: start;
  column-gap: 8px;
  width: 170px;
}

.patient-cell strong {
  display: inline;
  color: #1d4a56;
}

.patient-name-link,
.patient-table-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: #1d4a56;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.patient-name-link:hover,
.patient-table-link:hover {
  color: #08a9c6;
  text-decoration: underline;
}

.visit-type-badge {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #08a9c6;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
}

.patient-row-badges {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.cancelled-appointment-row { background: #f8fafc; color: #7c8998; }
.cancelled-appointment-row .patient-name-link { color: #596779; }
.cancelled-appointment-row .table-plus:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(1); }
.cancelled-type-badge { position: relative; display: inline-grid; place-items: center; min-width: 34px; height: 20px; border-radius: 6px; padding: 0 6px; background: #e8edf2; color: #566678; font-size: 11px; font-weight: 800; line-height: 1; cursor: help; }
.cancelled-type-badge::after { position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 9px); width: max-content; max-width: 280px; padding: 9px 11px; border-radius: 8px; background: #172235; color: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.2); content: "取消原因：" attr(data-cancel-tooltip); font-size: 12px; font-weight: 600; line-height: 1.45; white-space: normal; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .16s ease, transform .16s ease; }
.cancelled-type-badge::before { position: absolute; z-index: 31; left: 50%; bottom: calc(100% + 4px); border: 5px solid transparent; border-top-color: #172235; content: ""; opacity: 0; transform: translateX(-50%); transition: opacity .16s ease; }
.cancelled-type-badge:hover::after, .cancelled-type-badge:focus-visible::after, .cancelled-type-badge:hover::before, .cancelled-type-badge:focus-visible::before { opacity: 1; }
.cancelled-type-badge:hover::after, .cancelled-type-badge:focus-visible::after { transform: translate(-50%, 0); }
.cancelled-type-badge:focus-visible { outline: 2px solid rgba(23,119,255,.45); outline-offset: 2px; }
.visit-table tbody tr.selected .cancelled-type-badge { background: #fff; color: #596779; }

.debt-type-badge {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #ff6969;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.visit-table td:has(.table-plus) {
  padding: 0;
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 31px;
  height: 31px;
  margin-right: 0;
  vertical-align: middle;
  border-radius: 50%;
  background: #fff;
  color: #08a9c6;
  font-weight: 900;
}

.patient-avatar-icon {
  position: relative;
  overflow: hidden;
  background: #f0f7ff;
  color: transparent;
  flex: 0 0 auto;
}

.patient-avatar-icon::before,
.patient-avatar-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  background: #dfe5ea;
  transform: translateX(-50%);
}

.patient-avatar-icon.male {
  background: #edf5ff;
}

.patient-avatar-icon.male::before,
.patient-avatar-icon.male::after {
  background: #6f95d8;
}

.patient-avatar-icon.female {
  background: #fff0f7;
}

.patient-avatar-icon.female::before,
.patient-avatar-icon.female::after {
  background: #d85a98;
}

.patient-avatar-icon::before {
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.patient-avatar-icon::after {
  bottom: 6px;
  width: 18px;
  height: 10px;
  border-radius: 10px 10px 6px 6px;
}

.table-plus {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 auto;
  border: 1px solid #b8c3ce;
  border-radius: 5px;
  background: #f8fbfd;
  color: #75808b;
  font-size: 0;
  line-height: 1;
  vertical-align: middle;
}

.table-plus::before,
.table-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.table-plus::before {
  width: 20px;
  height: 3px;
}

.table-plus::after {
  width: 3px;
  height: 20px;
}

.table-plus.arrived,
.table-plus.charged,
.table-plus.recorded,
.table-plus.scheduled,
.table-plus.followed,
.table-plus.planned,
.table-plus.treatment-completed {
  border-color: #168dff !important;
  background: #168dff !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(22, 141, 255, 0.16), 0 10px 22px rgba(22, 141, 255, 0.2);
}

.visit-table .table-plus.neon-button,
.visit-table .table-plus.neon-button.arrived,
.visit-table .table-plus.neon-button.charged,
.visit-table .table-plus.neon-button.recorded,
.visit-table .table-plus.neon-button.scheduled,
.visit-table .table-plus.neon-button.followed,
.visit-table .table-plus.neon-button.planned,
.visit-table .table-plus.neon-button.treatment-completed,
.visit-table tbody tr.selected .table-plus.neon-button {
  border-color: #cfd7e1 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #111827 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1);
}

.visit-table .table-plus.neon-button:hover,
.visit-table tbody tr.selected .table-plus.neon-button:hover {
  border-color: #111827 !important;
  background: #fff !important;
  color: #111827 !important;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.12), 0 10px 22px rgba(15, 23, 42, 0.16);
}

.visit-table .table-plus.neon-button.treatment-plan-link.planned,
.visit-table tbody tr.selected .table-plus.neon-button.treatment-plan-link.planned,
.visit-table .table-plus.neon-button.treatment-plan-link.planned:hover {
  border-color: #168dff !important;
  background: #168dff !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(22, 141, 255, 0.16), 0 10px 22px rgba(22, 141, 255, 0.2) !important;
}

.visit-table .table-plus.neon-button.followed,
.visit-table tbody tr.selected .table-plus.neon-button.followed,
.visit-table .table-plus.neon-button.followed:hover {
  border-color: #168dff !important;
  background: #168dff !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(22, 141, 255, 0.16), 0 10px 22px rgba(22, 141, 255, 0.2) !important;
}

.visit-table .table-plus.neon-button.scheduled,
.visit-table tbody tr.selected .table-plus.neon-button.scheduled,
.visit-table .table-plus.neon-button.scheduled:hover {
  border-color: #168dff !important;
  background: #168dff !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(22, 141, 255, 0.16), 0 10px 22px rgba(22, 141, 255, 0.2) !important;
}

.visit-table .table-plus.neon-button.recorded,
.visit-table tbody tr.selected .table-plus.neon-button.recorded,
.visit-table .table-plus.neon-button.recorded:hover {
  border-color: #168dff !important;
  background: #168dff !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(22, 141, 255, 0.16), 0 10px 22px rgba(22, 141, 255, 0.2) !important;
}

.visit-table .table-plus.neon-button.arrived,
.visit-table tbody tr.selected .table-plus.neon-button.arrived,
.visit-table .table-plus.neon-button.arrived:hover {
  border-color: #168dff !important;
  background: #168dff !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(22, 141, 255, 0.16), 0 10px 22px rgba(22, 141, 255, 0.2) !important;
}

.visit-table .table-plus.neon-button.outbound-link.issued,
.visit-table tbody tr.selected .table-plus.neon-button.outbound-link.issued,
.visit-table .table-plus.neon-button.outbound-link.issued:hover {
  border-color: #168dff !important;
  background: #168dff !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(22, 141, 255, 0.16), 0 10px 22px rgba(22, 141, 255, 0.2) !important;
}

.visit-table .table-plus.neon-button.outbound-link:active {
  transform: translateY(1px) scale(.98);
}

.legacy-hidden {
  display: none;
}

.status {
  border-radius: 3px;
}

.modal-card {
  border-radius: 4px;
}

.modal-head {
  background: #f3f5f7;
}

.inbound-form-modal .inbound-form-card.glow-card {
  border-radius: 22px;
  background:
    radial-gradient(360px 360px at var(--settings-card-x, 50%) var(--settings-card-y, 0%), rgba(8, 169, 198, 0.13), transparent 56%),
    rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 58px rgba(20, 36, 56, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
}

.modal.denture-tooth-modal.open {
  z-index: 260;
}

@media (max-width: 1000px) {
  .queue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ops-row {
    grid-template-columns: 1fr;
  }

  .queue-card:nth-child(4) {
    grid-column: auto;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .mini-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
  }

  .brand {
    display: none;
  }

  .nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .nav-item {
    justify-content: center;
    font-size: 15px;
  }

  .nav-item::after {
    display: none;
  }

  .topbar {
    height: auto;
    padding: 10px;
  }

  .top-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .search {
    width: 100%;
  }

  .sub-tabs button {
    min-width: 120px;
  }

  .queue-card {
    min-height: 96px;
  }

  .ops-row {
    grid-template-columns: 1fr;
  }

  .mini-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .queue-grid,
  .mini-stats {
    grid-template-columns: 1fr;
  }
}

/* Appointment board */
.schedule-tabs {
  display: flex;
  align-items: center;
  height: 62px;
  margin: 0 -10px;
  padding: 0 14px;
  border-bottom: 1px solid #d6dce3;
  background: #fff;
}

.schedule-tabs > button {
  height: 62px;
  min-width: 118px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: #26313e;
  font-size: 17px;
  font-weight: 800;
}

.schedule-tabs > button.active {
  color: #08a9c6;
  border-bottom-color: #08a9c6;
}

.schedule-tabs .disabled {
  margin-left: auto;
  min-width: 112px;
  height: 46px;
  border-radius: 5px;
  color: #c6ccd3;
  background: #f0f2f5;
}

.schedule-tabs .primary-line {
  min-width: 126px;
  height: 46px;
  margin-left: auto;
  border: 1px solid #08a9c6;
  border-radius: 5px;
  color: #08a9c6;
  background: #fff;
}

.booking-layout {
  position: relative;
  display: grid;
  grid-template-columns: 386px minmax(560px, 1fr);
  min-height: calc(100vh - 132px);
  margin: 0 -10px;
  background: #fff;
  overflow: hidden;
  transition: grid-template-columns 0.18s ease;
}

.booking-left,
.booking-center,
.booking-form-panel {
  min-width: 0;
  border-right: 1px solid #d8dee5;
}

.booking-left {
  background: #fbfcfd;
  overflow: hidden;
  transition: opacity 0.14s ease, visibility 0.14s ease;
}

.schedule-date-picker {
  margin: 18px 18px 22px;
  padding: 14px;
  border: 1px solid #dfe6ee;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(20, 36, 56, 0.08);
}

.calendar-head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) 34px 34px 40px;
  align-items: center;
  gap: 10px;
  height: auto;
  padding: 0 0 14px;
  color: #303b49;
  font-size: 16px;
}

.calendar-head button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.calendar-title-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 38px;
  border: 1px solid #d7e0ea !important;
  border-radius: 10px;
  background: #fff !important;
  white-space: nowrap;
  color: #303b49;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.calendar-title-btn::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  border-right: 2px solid #b5bec8;
  border-bottom: 2px solid #b5bec8;
  transform: translateY(-4px) rotate(45deg);
}

.calendar-title-btn:hover {
  color: #08a9c6;
}

.calendar-title-btn:hover::after {
  border-color: #08a9c6;
}

.calendar-arrow {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px !important;
  color: #667385;
  font-size: 26px;
  text-align: center;
}

.calendar-arrow:hover {
  background: #f1f7fb !important;
  color: #08a9c6;
}

.calendar-today-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #08a9c6 !important;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.calendar-today-btn:hover {
  background: #0694ad !important;
}

.calendar-dropdown {
  position: absolute;
  top: 44px;
  left: 0;
  z-index: 40;
  display: grid;
  width: 150px;
  max-height: 340px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #dfe6ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18);
}

.calendar-month-dropdown {
  left: calc(50% - 18px);
  width: 132px;
}

.calendar-dropdown.hidden {
  display: none;
}

.calendar-dropdown button {
  height: 38px;
  border-radius: 10px;
  padding: 0 14px;
  color: #1f2b38;
  font-size: 15px;
  text-align: left;
}

.calendar-dropdown button:hover,
.calendar-dropdown button.active {
  background: #eef8fb;
  color: #08a9c6;
}

.mini-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 0;
  border-bottom: 0;
}

.mini-calendar b {
  height: 28px;
  color: #6b7787;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.mini-calendar button {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #283442;
  overflow: visible;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.mini-calendar button::before {
  content: none;
}

.mini-calendar button:hover {
  border-color: rgba(8, 169, 198, 0.28);
  background: #eef9fc;
  color: #08a9c6;
  transform: translateY(-1px);
}

.mini-calendar button strong {
  position: relative;
  z-index: 1;
  line-height: 18px;
  font-size: 18px;
}

.mini-calendar button small {
  position: relative;
  z-index: 1;
  color: #8d97a3;
  font-size: 11px;
}

.mini-calendar button.active {
  color: #fff;
  background: #08a9c6;
  border-color: #08a9c6;
  box-shadow: 0 10px 24px rgba(8, 169, 198, 0.26);
}

.mini-calendar button.active::before {
  opacity: 0;
}

.mini-calendar button.active small {
  color: #e9fbff;
}

.mini-calendar button:not(.active) small:has(+ *) {
  color: inherit;
}

.booking-side-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #d8dee5;
}

.booking-side-tabs button {
  min-height: 58px;
  border: 0;
  border-right: 1px solid #d8dee5;
  background: #f7f8fa;
  color: #6d7783;
  font-size: 17px;
  font-weight: 800;
}

.booking-side-tabs button.active {
  background: #fff;
  color: #3c4652;
}

.status-filter {
  padding: 14px 22px;
}

.status-filter h3 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 14px;
  color: #6b7480;
  font-size: 17px;
}

.status-filter label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 10px;
  height: 38px;
  color: #3c4652;
  font-size: 18px;
  font-weight: 700;
}

.status-filter input {
  width: 20px;
  height: 20px;
  accent-color: #08a9c6;
}

.booking-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 72px;
  padding: 0 18px;
  border-bottom: 1px solid #d8dee5;
  border-radius: 16px 16px 0 0;
  background: rgba(255, 255, 255, 0.94);
  overflow-x: auto;
}

.back-btn {
  height: 44px;
  min-width: 174px;
  border: 1px solid #08a9c6;
  border-radius: 5px;
  background: #fff;
  color: #08a9c6;
  font-size: 18px;
  font-weight: 800;
}

.back-btn.hidden {
  display: none;
}

.schedule-chip-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plain-arrow {
  border: 0;
  background: transparent;
  color: #9aa4af;
  font-size: 36px;
}

.booking-toolbar strong {
  margin-left: 12px;
  white-space: nowrap;
  font-size: 20px;
}

.booking-center {
  position: relative;
  padding: 18px;
  background: #f3f7fa;
}

.schedule-board-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: calc(100vh - 168px);
  min-height: 620px;
  overflow: hidden;
  border: 1px solid #dfe8ef;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 54px rgba(20, 36, 56, 0.1);
}

.schedule-board-card .week-head,
.schedule-board-card .time-board {
  min-width: 0;
}

.mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: auto;
  border: 1px solid #d4dbe3;
  border-radius: 5px;
  overflow: hidden;
}

.mode-switch button {
  width: 62px;
  height: 44px;
  border: 0;
  background: #fff;
  color: #5d6874;
  font-size: 18px;
}

.mode-switch button.active {
  background: #9aa1ad;
  color: #fff;
}

.week-head {
  display: grid;
  grid-template-columns: 78px repeat(7, minmax(100px, 1fr));
  height: 70px;
  border-bottom: 1px solid #d8dee5;
  background: #fff;
}

.week-head > span,
.week-head button {
  display: grid;
  place-items: center;
  border: 0;
  border-right: 1px solid #d8dee5;
  background: #fff;
}

.week-head button {
  color: #202a36;
  font-size: 18px;
  font-weight: 900;
}

.week-head button strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}

.week-head button em {
  display: inline-grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 3px;
  background: #08a9c6;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  line-height: 1;
}

.week-head button small {
  margin-top: 5px;
  color: #a2aab3;
  font-size: 13px;
}

.week-head button.active {
  background: #f0fbfd;
  box-shadow: inset 0 3px 0 #08a9c6;
}

.time-board {
  display: grid;
  grid-template-columns: 78px repeat(7, minmax(100px, 1fr));
  height: auto;
  min-height: 0;
  overflow: auto;
  background: #fff;
}

.time-label {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding-top: 0;
  border-right: 1px solid #d8dee5;
  border-bottom: 1px solid #edf0f3;
  background: rgba(255, 255, 255, 0.96);
  color: #7d8897;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

.time-label strong {
  font-weight: 900;
}

.time-cell {
  position: relative;
  height: 40px;
  border: 0;
  border-right: 1px solid #d8dee5;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
}

.time-cell:hover,
.time-cell.selected-day:hover {
  background: #eaf9fc;
}

.time-cell.selected-day {
  background: rgba(8, 169, 198, 0.025);
}

.time-cell.drag-selected,
.time-cell.selected-day.drag-selected {
  background: rgba(8, 169, 198, 0.18);
  box-shadow: inset 0 0 0 1px rgba(8, 169, 198, 0.45);
}

.schedule-chip {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 4px;
  z-index: 3;
  display: grid;
  grid-auto-rows: min-content;
  gap: 2px;
  align-content: start;
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
  padding: 9px 10px;
  border: 1px solid rgba(178, 151, 65, 0.12);
  border-radius: 10px;
  outline: none;
  background: #f5e6a7;
  color: #776321;
  font-size: 15px;
  font-weight: 900;
  text-align: left;
  box-shadow:
    0 1px 2px rgba(73, 65, 36, 0.06),
    0 5px 14px rgba(73, 65, 36, 0.08);
  opacity: 1;
  transform: translateZ(0) scale(1);
  transform-origin: center;
  transition:
    transform 0.2s ease-out,
    opacity 0.2s ease-out,
    box-shadow 0.2s ease-out,
    background-color 0.2s ease-out,
    border-color 0.2s ease-out;
  -webkit-tap-highlight-color: transparent;
}

.schedule-chip[data-appointment-index].is-dragging {
  z-index: 8;
  border-color: transparent;
  outline: none;
  opacity: 0.95;
  transform: translateZ(0) scale(1.04);
  box-shadow:
    0 10px 24px rgba(25, 97, 137, 0.18),
    0 0 20px rgba(42, 181, 223, 0.28),
    0 0 42px rgba(88, 129, 255, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  will-change: transform, opacity;
  pointer-events: none;
}

.schedule-chip strong,
.schedule-chip time,
.schedule-chip b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-chip strong {
  color: inherit;
  font-size: 16px;
  line-height: 1.1;
}

.schedule-chip strong em {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  border-radius: 5px;
  background: #08a9c6;
  color: #fff;
  font-size: 11px;
  font-style: normal;
}

.schedule-chip time,
.schedule-chip b {
  color: #1f2b38;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.08;
}

.schedule-chip small {
  display: block;
  overflow: hidden;
  color: #8a7727;
  font-size: 11px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-chip.compact {
  gap: 1px;
  padding: 5px 8px;
}

.schedule-chip.compact strong {
  font-size: 13px;
}

.schedule-chip.compact strong em {
  width: 15px;
  height: 15px;
  margin-left: 3px;
  border-radius: 4px;
  font-size: 10px;
}

.schedule-chip.compact time {
  font-size: 13px;
}

.schedule-chip.compact b {
  display: none;
}

.schedule-chip.compact small {
  font-size: 10px;
}

.schedule-chip.tiny {
  gap: 0;
  padding: 4px 7px;
}

.schedule-chip.tiny strong {
  font-size: 12px;
  line-height: 1;
}

.schedule-chip.tiny strong em {
  width: 14px;
  height: 14px;
  margin-left: 3px;
  border-radius: 4px;
  font-size: 9px;
}

.schedule-chip.tiny time {
  font-size: 11px;
  line-height: 1;
}

.schedule-chip.tiny b,
.schedule-chip.tiny small {
  display: none;
}

.schedule-chip.lane-pair {
  padding-inline: 6px;
}

.schedule-chip.lane-pair strong {
  font-size: 14px;
}

.schedule-chip.lane-pair time,
.schedule-chip.lane-pair b {
  font-size: 12px;
}

.schedule-chip.lane-tight {
  display: flex;
  align-items: flex-start;
  padding: 6px 5px;
}

.schedule-chip.lane-tight strong {
  display: block;
  width: 100%;
  min-width: 0;
  color: #5f501c;
  font-size: 14px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-chip.lane-tight strong em {
  display: none;
}

.schedule-chip.lane-tight time,
.schedule-chip.lane-tight b,
.schedule-chip.lane-tight small {
  display: none;
}

.schedule-chip.in-treatment {
  background: #9ee6f0;
  color: #076a79;
}

.schedule-chip.normal {
  background: #bff2c3;
  color: #25713c;
}

.schedule-chip.pending {
  background: #6f6f6f;
  color: #fff;
}

.schedule-chip.pending small {
  color: #f1f3f5;
}

.schedule-chip.drag-preview-chip {
  z-index: 4;
  align-content: start;
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(82, 82, 82, 0.92);
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
  box-shadow: none;
}

.schedule-chip[data-appointment-index] {
  cursor: pointer;
}

.schedule-resize-handle {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 14px;
  border-radius: 8px 8px 0 0;
  background: rgba(255, 255, 255, 0.92);
  color: #08a9c6;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.12s ease;
  pointer-events: auto;
  cursor: ns-resize;
  font-style: normal;
}

.schedule-chip[data-appointment-index]:hover .schedule-resize-handle {
  opacity: 1;
}

.schedule-chip[data-appointment-index].resizing {
  cursor: ns-resize;
  z-index: 6;
  pointer-events: none;
  outline: none;
}

.schedule-chip[data-appointment-index].resizing .schedule-resize-handle {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .schedule-chip {
    transition-duration: 0.01ms;
  }

  .schedule-chip[data-appointment-index].is-dragging {
    transform: translateZ(0) scale(1);
  }
}

.appointment-drawer {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: block;
}

.appointment-drawer.hidden {
  display: none;
}

.treatment-plan-drawer {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: block;
}

.treatment-plan-drawer.hidden {
  display: none;
}

.treatment-plan-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.34);
}

.treatment-plan-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  grid-template-rows: 86px minmax(0, 1fr);
  width: min(82vw, 1180px);
  height: 100vh;
  background: #fff;
  color: #242c35;
  box-shadow: -14px 0 34px rgba(15, 23, 42, 0.22);
  animation: treatmentPlanDrawerIn 0.22s ease-out;
}

@keyframes treatmentPlanDrawerIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.treatment-plan-head {
  display: grid;
  grid-template-columns: 1fr 38px;
  align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid #dfe4ea;
  text-align: center;
}

.treatment-plan-head strong {
  display: block;
  color: #1587e8;
  font-size: 30px;
  line-height: 1.05;
}

.treatment-plan-head h2 {
  margin: 8px 0 0;
  color: #111820;
  font-size: 17px;
  font-weight: 900;
}

.treatment-plan-body {
  min-height: 0;
  overflow: auto;
  padding: 28px 32px 36px;
  background: #fff;
}

.treatment-patient-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 64px;
  margin-bottom: 18px;
  color: #313942;
  font-size: 16px;
}

.treatment-plan-body > .glow-card {
  margin: 0 0 24px;
  padding: 22px;
  overflow: visible;
}

.treatment-plan-body > .glow-card:last-of-type {
  margin-bottom: 24px;
}

.treatment-patient-grid.glow-card {
  align-items: center;
}

.treatment-patient-grid span {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.treatment-patient-grid b {
  flex: 1;
  min-width: 72px;
  border-bottom: 1px solid #e5e9ef;
  color: #202832;
  font-weight: 700;
}

.treatment-patient-grid .treatment-tooth-field {
  align-items: center;
  gap: 0;
}

.treatment-tooth-label {
  display: inline;
  flex: 0 0 auto;
}

.treatment-patient-grid .treatment-tooth-field b {
  display: none;
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  border-bottom: 0;
}

.treatment-tooth-map {
  position: relative;
  flex: 0 0 auto;
  width: var(--invoice-tooth-map-width, 92px);
  min-width: 92px;
  max-width: 320px;
  height: 58px;
  border: 1px solid #cfd7e1;
  border-radius: 6px;
  background: #fff;
  color: #283340;
  cursor: pointer;
}

.treatment-tooth-map:hover {
  border-color: #08a9c6;
  background: #f3fcfe;
}

.treatment-tooth-map .tooth-line {
  position: absolute;
  background: #08a9c6;
}

.treatment-tooth-map .horizontal {
  left: var(--invoice-tooth-line-left, 12px);
  top: 50%;
  width: var(--invoice-tooth-line-width, calc(100% - 24px));
  height: 1px;
}

.treatment-tooth-map .vertical {
  left: var(--invoice-tooth-center-x, 50%);
  top: 7px;
  width: 1px;
  height: calc(100% - 14px);
}

.treatment-tooth-map .invoice-tooth-quadrant {
  display: block;
  position: absolute;
  max-width: none;
  overflow: visible;
  color: #1f2937;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}

.treatment-tooth-map .invoice-tooth-quadrant.q1 {
  right: var(--invoice-tooth-right-offset, calc(50% + 6px));
  top: 8px;
  text-align: right;
}

.treatment-tooth-map .invoice-tooth-quadrant.q2 {
  left: var(--invoice-tooth-left-offset, calc(50% + 6px));
  top: 8px;
}

.treatment-tooth-map .invoice-tooth-quadrant.q3 {
  left: var(--invoice-tooth-left-offset, calc(50% + 6px));
  top: calc(50% + 8px);
}

.treatment-tooth-map .invoice-tooth-quadrant.q4 {
  right: var(--invoice-tooth-right-offset, calc(50% + 6px));
  top: calc(50% + 8px);
  text-align: right;
}

.treatment-tooth-popover {
  position: fixed;
  z-index: 10000;
  filter: drop-shadow(0 24px 52px rgba(20, 36, 56, 0.16));
}

.treatment-tooth-popover.hidden {
  display: none;
}

.treatment-tooth-card {
  padding: 14px;
  border-radius: 20px;
}

.treatment-tooth-toolbar {
  grid-template-columns: repeat(8, minmax(48px, 1fr)) 34px;
  gap: 8px;
}

.treatment-tooth-toolbar button {
  height: 36px;
  font-size: 14px;
}

.treatment-tooth-board {
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  gap: 10px;
  min-height: 138px;
  padding: 14px 12px;
  overflow: hidden;
}

.treatment-tooth-board .charge-tooth-quadrant {
  gap: clamp(4px, 0.7vw, 8px);
  min-width: 0;
}

.treatment-tooth-board .charge-tooth-unit {
  min-width: 0;
  width: clamp(34px, 4.1vw, 42px);
  min-height: 36px;
}

.treatment-tooth-board .charge-tooth-label {
  min-width: 0;
  width: 100%;
  height: 31px;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 31px;
}

.treatment-tooth-summary {
  min-height: 30px;
  padding-top: 8px;
  font-size: 14px;
}

.treatment-compare.glow-card {
  margin: 0 0 24px;
}

.treatment-compare.glow-card h3 {
  margin-bottom: 16px;
}

.treatment-compare.glow-card table,
.treatment-fees.glow-card table {
  overflow: hidden;
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.treatment-compare h3,
.treatment-fees h3 {
  margin: 0 0 10px;
  color: #1f2833;
  font-size: 18px;
  font-weight: 900;
}

.treatment-compare table,
.treatment-fees table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e3e7ec;
  table-layout: fixed;
  background: #fff;
  font-size: 15px;
}

.treatment-compare th,
.treatment-compare td,
.treatment-fees th,
.treatment-fees td {
  padding: 9px 10px;
  border: 1px solid #e7ebf0;
  text-align: left;
  vertical-align: top;
}

.treatment-compare th,
.treatment-fees th {
  background: #fbfcfd;
  color: #1f2833;
  font-size: 16px;
  font-weight: 900;
}

.treatment-compare th:first-child {
  width: 15%;
}

.treatment-plan-headline {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
}

.treatment-plan-toggle {
  float: right;
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #b8c3ce;
  border-radius: 5px;
  background: #f8fbfd;
  color: #08a9c6;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.treatment-plan-toggle.remove {
  margin-right: 8px;
  color: #6f7a86;
}

.treatment-plan-toggle:hover {
  border-color: #08a9c6;
  background: #eaf9fc;
}

.treatment-row-label {
  background: #fbfcfd;
  color: #1f2833;
  font-size: 18px;
  font-weight: 900;
}

.treatment-edit-cell {
  position: relative;
  min-height: 44px;
  overflow: hidden;
  border: 1px solid #d8dee5;
  border-radius: 5px;
  background: #fff;
}

.treatment-edit-cell textarea {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #26313e;
  font: inherit;
  resize: none;
  overflow: hidden;
  padding: 9px 38px 9px 10px;
  line-height: 1.45;
}

.treatment-cost-cell {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  overflow: visible;
}

.treatment-cost-pill {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36)),
    rgba(255, 255, 255, 0.46);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -10px 18px rgba(255, 255, 255, 0.28),
    0 10px 24px rgba(31, 41, 55, 0.11),
    0 2px 5px rgba(31, 41, 55, 0.08);
  color: #1f2937;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.treatment-cost-pill span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

.treatment-cost-pill b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: #0b9fba;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.treatment-cost-pill:hover {
  border-color: rgba(8, 169, 198, 0.42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.46)),
    rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -10px 20px rgba(255, 255, 255, 0.34),
    0 14px 30px rgba(8, 169, 198, 0.13),
    0 4px 9px rgba(31, 41, 55, 0.1);
  transform: translateY(-1px);
}

.treatment-cost-pill:active {
  box-shadow:
    inset 0 2px 8px rgba(31, 41, 55, 0.12),
    inset 0 -6px 14px rgba(255, 255, 255, 0.2),
    0 6px 14px rgba(31, 41, 55, 0.1);
  transform: translateY(1px) scale(0.99);
}

.treatment-cost-pill:focus-visible {
  outline: 3px solid rgba(8, 169, 198, 0.22);
  outline-offset: 3px;
}

.treatment-phrase-trigger {
  position: absolute;
  right: 7px;
  bottom: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #cfd7e1;
  border-radius: 5px;
  background: #fff;
  color: #687380;
  font-size: 16px;
  line-height: 1;
}

.treatment-phrase-trigger:hover {
  border-color: #08a9c6;
  color: #08a9c6;
  background: #effbfe;
}

.treatment-phrase-popover {
  position: fixed;
  z-index: 260;
  display: grid;
  gap: 8px;
  width: 320px;
  max-height: 260px;
  padding: 8px;
  border: 1px solid #cfd7e1;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.treatment-phrase-list {
  display: grid;
  gap: 4px;
  max-height: 178px;
  overflow: auto;
}

.treatment-phrase-row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  border-radius: 4px;
  background: #fff;
}

.treatment-phrase-row:hover {
  background: #eaf9fc;
}

.treatment-phrase-list .treatment-phrase-text,
.treatment-phrase-list span {
  display: block;
  width: auto;
  min-width: 0;
  padding: 8px 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #26313e;
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}

.treatment-phrase-list .treatment-phrase-text {
  flex: 0 1 auto;
  overflow-wrap: anywhere;
}

.treatment-phrase-list .treatment-phrase-text:hover {
  background: transparent;
  color: #078da5;
}

.treatment-phrase-icon {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #667384;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.treatment-phrase-icon:hover {
  background: #ddf7fb;
  color: #078da5;
  transform: translateY(-1px);
}

.treatment-phrase-icon.danger {
  font-size: 18px;
}

.treatment-phrase-icon.danger:hover {
  background: #fff0f0;
  color: #d14343;
}

.treatment-phrase-list span {
  width: 100%;
  color: #8a94a0;
}

.treatment-phrase-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid #e5e9ee;
}

.treatment-phrase-actions button {
  height: 30px;
  border: 1px solid #d8dee5;
  border-radius: 5px;
  background: #fff;
  color: #4c5764;
  font-size: 13px;
}

.treatment-phrase-action-modal {
  z-index: 520;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(2px);
}

.treatment-phrase-action-card {
  width: min(460px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24);
}

.treatment-phrase-action-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid #edf1f6;
}

.treatment-phrase-action-kicker {
  display: block;
  margin-bottom: 6px;
  color: #078da5;
  font-size: 12px;
  font-weight: 700;
}

.treatment-phrase-action-head h2 {
  margin: 0;
  color: #1f2a37;
  font-size: 20px;
  line-height: 1.25;
}

.treatment-phrase-action-close {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #f2f6fa;
  color: #6b7785;
  font-size: 20px;
  cursor: pointer;
}

.treatment-phrase-action-close:hover {
  background: #e7eef6;
  color: #1f2a37;
}

.treatment-phrase-action-body {
  padding: 18px 22px 20px;
}

.treatment-phrase-action-field {
  display: grid;
  gap: 8px;
  color: #4b5563;
  font-size: 14px;
  font-weight: 700;
}

.treatment-phrase-action-field textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid #cfd9e5;
  border-radius: 8px;
  color: #1f2a37;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
}

.treatment-phrase-action-field textarea:focus {
  outline: 2px solid rgba(8, 169, 198, 0.18);
  border-color: #08a9c6;
}

.treatment-phrase-action-copy {
  margin: 0 0 12px;
  color: #526071;
  font-size: 14px;
  line-height: 1.55;
}

.treatment-phrase-delete-preview {
  padding: 13px 14px;
  border: 1px solid #ffd2d2;
  border-radius: 8px;
  background: #fff7f7;
  color: #9f2626;
  font-size: 15px;
  line-height: 1.45;
}

.treatment-phrase-action-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 20px;
  background: #f8fafc;
}

.treatment-phrase-action-footer .light-btn,
.treatment-phrase-action-footer .save-btn {
  min-width: 92px;
  height: 36px;
}

.treatment-phrase-action-footer .save-btn.danger {
  background: #d94141;
  color: #fff;
}

.treatment-phrase-action-footer .save-btn.danger:hover {
  background: #bf3030;
}

.treatment-choice {
  background: #fff;
}

.treatment-choice-module {
  margin: 18px 0;
  padding: 0;
}

.treatment-choice-module.glow-card,
.treatment-fees.glow-card,
.treatment-consents.glow-card {
  margin: 0 0 24px;
  padding: 22px;
}

.treatment-choice-module h3 {
  margin: 0 0 10px;
  color: #1f2833;
  font-size: 18px;
  font-weight: 900;
}

.treatment-choice-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(max-content, 1fr));
  column-gap: clamp(10px, 3vw, 42px);
  row-gap: 10px;
  overflow-x: auto;
  padding: 14px 16px;
  border: 1px solid #e3e7ec;
  border-radius: 14px;
  background: #fff;
}

.treatment-choice-item {
  display: grid;
  gap: 7px;
  margin-bottom: 9px;
}

.treatment-choice-list .treatment-choice-item {
  margin-bottom: 0;
}

.treatment-choice-item.has-extra {
  grid-column: 1 / -1;
}

.treatment-choice-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  line-height: 1.2;
}

.treatment-choice-item input[type="checkbox"],
.treatment-fee-group span {
  accent-color: #08a9c6;
}

.treatment-choice-item input[type="checkbox"] {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-width: 32px;
  margin: 0;
  padding: 0;
}

.treatment-choice-item span {
  display: inline-flex;
  align-items: center;
}

.treatment-choice-item textarea {
  width: 100%;
  min-height: 44px;
  resize: none;
  overflow: hidden;
  padding: 9px 10px;
  border: 1px solid #d8dee5;
  border-radius: 5px;
  background: #fff;
  color: #26313e;
  font: inherit;
  line-height: 1.45;
}

.treatment-choice-item textarea[hidden] {
  display: none;
}

.treatment-fees th:nth-child(1) {
  width: 20%;
}

.treatment-fees th:nth-child(3) {
  width: 10%;
}

.treatment-fees th:nth-child(4),
.treatment-fees th:nth-child(5) {
  width: 8%;
}

.treatment-fees th:nth-child(6),
.treatment-fees th:nth-child(7) {
  width: 12%;
}

.treatment-fee-group td {
  background: #fbfcfd;
  color: #1f2833;
  font-weight: 900;
}

.treatment-fee-item input,
.treatment-fee-item select {
  width: 100%;
  min-width: 0;
  height: 32px;
  border: 1px solid #d8dee5;
  border-radius: 4px;
  background: #fff;
  color: #26313e;
  font: inherit;
  font-size: 14px;
  padding: 4px 6px;
}

.treatment-fee-type {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid #d8dee5;
  border-radius: 4px;
  background: #fff;
  color: #26313e;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.treatment-fee-delete {
  float: right;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #7b8794;
  font-size: 18px;
  line-height: 22px;
  cursor: pointer;
}

.treatment-fee-delete:hover {
  background: #fff0f0;
  color: #d14343;
}

.treatment-fee-empty td {
  color: #8b96a3;
  font-size: 13px;
}

.treatment-fee-subtotal td,
.treatment-fee-total td {
  background: #f8fafc;
  font-weight: 900;
}

.treatment-fee-total td {
  color: #0b9fba;
}

.treatment-fee-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 10px;
}

.treatment-fee-actions > .light-btn {
  flex: 0 0 auto;
  height: 36px;
  margin-bottom: 0;
  white-space: nowrap;
}

.treatment-consents {
  margin-top: 18px;
}

.treatment-consents.glow-card {
  margin-top: 0;
}

.treatment-consents h3 {
  margin: 0 0 10px;
  color: #1f2833;
  font-size: 18px;
  font-weight: 900;
}

.treatment-consent-list {
  display: grid;
  gap: 12px;
}

.treatment-consent-card {
  overflow: hidden;
  border: 1px solid #e0e6ed;
  border-radius: 6px;
  background: #fff;
}

.treatment-consent-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #edf1f5;
  background: #fbfcfd;
}

.treatment-consent-card strong,
.treatment-consent-card small {
  display: block;
}

.treatment-consent-card strong {
  color: #1f2833;
  font-size: 16px;
  font-weight: 900;
}

.treatment-consent-card small {
  margin-top: 4px;
  color: #687380;
  font-size: 13px;
  font-weight: 700;
}

.treatment-consent-card button {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #6b7785;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.treatment-consent-card button:hover {
  background: #fff0f0;
  color: #d14343;
}

.treatment-consent-card textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px;
  border: 0;
  background: #fff;
  color: #26313e;
  font: inherit;
  font-size: 15px;
  line-height: 1.65;
  overflow: hidden;
  resize: none;
}

.treatment-consent-picker-modal {
  z-index: 10030;
  align-items: flex-start;
  padding-top: 28px;
}

.treatment-consent-picker-card {
  width: min(760px, calc(100vw - 40px));
  max-height: calc(100vh - 70px);
  overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 24px 68px rgba(15, 23, 42, 0.25);
}

.treatment-consent-picker-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #edf1f5;
}

.treatment-consent-picker-card h2 {
  margin: 0 0 5px;
  color: #1f2833;
  font-size: 22px;
  font-weight: 900;
}

.treatment-consent-picker-card header span {
  color: #687380;
  font-size: 14px;
  font-weight: 800;
}

.treatment-consent-picker-search {
  padding: 16px 22px;
  border-bottom: 1px solid #edf1f5;
}

.treatment-consent-picker-search input {
  width: 100%;
  height: 42px;
  padding: 0 13px;
  border: 1px solid #cfd9e5;
  border-radius: 6px;
  color: #26313e;
  font: inherit;
}

.treatment-consent-picker-list {
  display: grid;
  gap: 8px;
  max-height: min(560px, calc(100vh - 230px));
  overflow: auto;
  padding: 14px 22px 22px;
}

.treatment-consent-picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e0e6ed;
  border-radius: 6px;
  background: #fff;
  color: #26313e;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.treatment-consent-picker-row:hover {
  border-color: #08a9c6;
  background: #f1fbfd;
}

.treatment-consent-picker-row.selected {
  background: #f7fafc;
  color: #8390a0;
}

.treatment-consent-picker-row strong,
.treatment-consent-picker-row small {
  display: block;
}

.treatment-consent-picker-row strong {
  font-size: 16px;
  font-weight: 900;
}

.treatment-consent-picker-row small {
  margin-top: 4px;
  color: #687380;
  font-size: 13px;
  line-height: 1.35;
}

.treatment-consent-picker-row em {
  flex: 0 0 auto;
  color: #08a9c6;
  font-style: normal;
  font-weight: 900;
}

.treatment-consent-picker-empty {
  padding: 40px 16px;
  color: #8792a0;
  text-align: center;
  font-weight: 800;
}

@media print {
  .treatment-plan-backdrop,
  .treatment-plan-head .icon-btn,
  .treatment-plan-actions,
  .treatment-fee-actions,
  .treatment-consent-card button {
    display: none !important;
  }

  .treatment-plan-drawer,
  .treatment-plan-panel {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  .treatment-plan-body {
    overflow: visible !important;
  }

  .treatment-consent-card {
    break-inside: avoid;
    page-break-inside: avoid;
    border-color: #cfd7e1;
  }

  .treatment-consent-card textarea {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
    color: #111827;
  }
}

.treatment-fee-group span {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border: 2px solid #08a9c6;
  border-radius: 50%;
  vertical-align: -4px;
}

.treatment-plan-actions {
  position: sticky;
  bottom: -36px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 24px -32px -36px;
  padding: 14px 32px;
  border-top: 1px solid #dfe4ea;
  background: #fff;
}

.appointment-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.36);
}

.appointment-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  grid-template-rows: 58px minmax(0, 1fr);
  box-sizing: border-box;
  width: min(84vw, 1680px);
  height: 100vh;
  min-height: 0;
  background: #fff;
  box-shadow: -14px 0 34px rgba(15, 23, 42, 0.2);
  animation: appointmentDrawerIn 0.18s ease-out;
}

@keyframes appointmentDrawerIn {
  from {
    transform: translateX(24px);
    opacity: 0.72;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.appointment-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid #d8dee5;
}

.appointment-drawer-head h2 {
  margin: 0;
  color: #26313e;
  font-size: 18px;
}

.appointment-drawer-body {
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 420px;
  height: calc(100vh - 58px);
  min-height: 0;
  overflow: hidden;
}

.drawer-board {
  display: grid;
  grid-template-rows: 42px 38px 42px minmax(0, 1fr);
  min-width: 0;
  border-right: 1px solid #d8dee5;
  background: #fff;
}

.drawer-board-title,
.drawer-week-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.drawer-board-title {
  color: #26313e;
  font-size: 15px;
  font-weight: 800;
}

.drawer-board-title::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: #08a9c6;
}

.drawer-board-title strong {
  font-size: 15px;
}

.drawer-week-nav button {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #a0a9b4;
  font-size: 32px;
  line-height: 1;
}

.drawer-week-nav button:hover:not(:disabled) {
  color: #08a9c6;
}

.drawer-week-nav button:disabled {
  color: #d2d8df;
  cursor: not-allowed;
}

.drawer-week-nav strong {
  margin-left: 6px;
  color: #303b49;
  font-size: 15px;
}

.drawer-week-head,
.drawer-time-board {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(88px, 1fr));
}

.drawer-week-head {
  border-top: 1px solid #edf0f3;
  border-bottom: 1px solid #d8dee5;
}

.drawer-week-head span,
.drawer-week-head button {
  display: grid;
  place-items: center;
  border: 0;
  border-right: 1px solid #d8dee5;
  background: #fff;
  color: #202a36;
  font-size: 17px;
  font-weight: 900;
}

.drawer-week-head button.active {
  background: #f0fbfd;
  box-shadow: inset 0 2px 0 #08a9c6;
}

.drawer-week-head em {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  border-radius: 3px;
  background: #08a9c6;
  color: #fff;
  font-size: 12px;
  font-style: normal;
}

.drawer-time-board {
  min-height: 0;
  overflow: auto;
}

.drawer-time-label {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 32px;
  padding-top: 2px;
  border-right: 1px solid #d8dee5;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
  color: #8a94a0;
  font-size: 13px;
}

.drawer-time-cell {
  position: relative;
  height: 32px;
  border: 0;
  border-right: 1px solid #d8dee5;
  border-bottom: 1px solid #edf0f3;
  background: #fff;
}

.drawer-time-cell:hover,
.drawer-time-cell.selected-day:hover,
.drawer-time-cell.drag-over {
  background: #eaf9fc;
}

.drawer-time-cell.selected-day {
  background: rgba(8, 169, 198, 0.025);
}

.drawer-chip {
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  z-index: 3;
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 0;
  overflow: hidden;
  padding: 7px 8px;
  border-radius: 5px;
  background: #ffe889;
  color: #776321;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.2);
}

.drawer-chip.pending {
  background: #6f6f6f;
  color: #fff;
  cursor: grab;
}

.drawer-chip.waiting {
  background: #ffe889;
  color: #776321;
}

.drawer-chip.normal {
  background: #bff2c3;
  color: #25713c;
}

.drawer-chip.in-treatment {
  background: #9ee6f0;
  color: #076a79;
}

.drawer-chip.floating {
  position: fixed;
  right: auto;
  z-index: 300;
  cursor: grabbing;
  pointer-events: none;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.28);
  transform: rotate(1deg);
}

.drawer-chip strong,
.drawer-chip time,
.drawer-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-chip strong {
  font-size: 14px;
  line-height: 1.08;
}

.drawer-chip time {
  color: #1f2b38;
  font-size: 12px;
}

.drawer-chip small {
  color: #8a7727;
  font-size: 11px;
}

.drawer-chip.pending time,
.drawer-chip.pending small {
  color: #fff;
}

.drawer-chip.normal small {
  color: #25713c;
}

.drawer-chip.in-treatment small {
  color: #076a79;
}

.drawer-appointment-form {
  display: block;
  height: calc(100vh - 58px);
  min-height: 0;
  overflow-y: auto;
  background: #fff;
}

.drawer-appointment-form section {
  padding: 16px 18px 8px;
  border-bottom: 1px solid #e5e9ee;
}

.drawer-appointment-form section:nth-of-type(3) {
  min-height: 0;
  overflow: hidden;
}

.drawer-appointment-form h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: #26313e;
  font-size: 15px;
}

.drawer-appointment-form h3::before {
  content: "";
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: #08a9c6;
}

.drawer-appointment-form p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #6b7480;
  font-size: 14px;
}

.drawer-appointment-form p strong {
  color: #26313e;
}

.drawer-appointment-form label {
  position: relative;
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  color: #4f5965;
  font-size: 14px;
}

.drawer-appointment-form input,
.drawer-appointment-form select,
.drawer-appointment-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #d8dee5;
  border-radius: 5px;
  background: #fff;
  color: #26313e;
  font: inherit;
}

.drawer-appointment-form input,
.drawer-appointment-form select {
  height: 38px;
  padding: 0 10px;
}

.drawer-appointment-form textarea {
  resize: vertical;
  padding: 10px;
}

.duration-field {
  z-index: 8;
}

.duration-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #d8dee5;
  border-radius: 5px;
  background: #fff;
  color: #26313e;
  font: inherit;
  text-align: left;
}

.duration-trigger::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1px solid #8d97a3;
  border-bottom: 1px solid #8d97a3;
  transform: translateY(-2px) rotate(45deg);
}

.duration-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #cfd6de;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.duration-menu.hidden {
  display: none;
}

.duration-menu button {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #26313e;
  font: inherit;
  text-align: left;
}

.duration-menu button:hover,
.duration-menu button.active {
  background: #58a1f6;
  color: #fff;
}

.duration-menu button.active::before {
  content: "✓";
  width: 20px;
  font-weight: 900;
}

.drawer-appointment-form .type-toggle {
  margin-bottom: 10px;
}

.drawer-project-search {
  display: grid;
  grid-template-columns: 1fr 32px;
  align-items: center;
  margin-bottom: 12px;
}

.drawer-project-search span {
  display: grid;
  place-items: center;
  height: 38px;
  border: 1px solid #d8dee5;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  color: #6b7480;
}

.drawer-project-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  max-height: 340px;
  overflow: auto;
}

.drawer-project-groups h4 {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  color: #26313e;
  font-size: 15px;
}

.drawer-project-groups label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.drawer-project-groups input {
  width: 16px;
  height: 16px;
  accent-color: #08a9c6;
}

.drawer-actions {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid #d8dee5;
  background: #fff;
}

.drawer-actions .light-btn,
.drawer-actions .save-btn {
  min-width: 88px;
  height: 40px;
}

.schedule-detail-popover {
  position: absolute;
  z-index: 45;
  width: 430px;
}

.schedule-detail-popover.hidden {
  display: none;
}

.schedule-popover-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  max-height: calc(100vh - 28px);
  padding: 22px 18px 14px;
  border-top: 8px solid #fff2a2;
  background: #fff;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.22);
  color: #4f5965;
  overflow: visible;
}

.schedule-popover-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  color: #8b95a1;
  font-size: 26px;
  line-height: 1;
}

.schedule-popover-person h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: #1f2b38;
  font-size: 30px;
  line-height: 1.1;
}

.schedule-patient-link {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  cursor: pointer;
}

.schedule-patient-link:hover {
  color: #08a9c6;
}

.schedule-popover-person h2 em,
.schedule-popover-person h2 i {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #08a9c6;
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.schedule-popover-person h2 i {
  background: #f4a51c;
}

.person-meta-icon {
  color: #08a9c6;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.person-meta-icon.female {
  color: #08a9c6;
}

.person-meta-icon.male {
  color: #08a9c6;
}

.schedule-popover-person p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
  color: #5f6975;
  font-size: 17px;
  font-weight: 700;
}

.schedule-popover-person p span {
  color: #7e8792;
  font-size: 16px;
}

.schedule-popover-person p b,
.schedule-popover-person p small {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 20px;
  padding: 0 4px;
  background: #d2d6dc;
  color: #4f5965;
  font-size: 13px;
}

.schedule-popover-person p small {
  background: #969da8;
  color: #fff;
}

.schedule-detail-tabs {
  display: flex;
  margin-top: 12px;
  border-bottom: 1px solid #ccd4dc;
}

.schedule-detail-tabs button {
  height: 44px;
  padding: 0 18px;
  border: 1px solid #d8dee5;
  border-bottom: 0;
  background: #fff;
  color: #303b49;
  font-size: 16px;
}

.schedule-detail-tabs button + button {
  margin-left: -1px;
}

.schedule-detail-tabs button.active {
  color: #08a9c6;
  font-weight: 900;
}

.schedule-detail-body {
  flex: 1;
  min-height: 240px;
  max-height: calc(100vh - 360px);
  overflow: auto;
  padding-top: 12px;
}

.schedule-detail-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.schedule-detail-list div {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: baseline;
  min-height: 24px;
}

.schedule-detail-list dt {
  color: #697381;
  font-size: 16px;
  font-weight: 800;
}

.schedule-detail-list dd {
  margin: 0;
  color: #1f2b38;
  font-size: 17px;
  font-weight: 900;
}

.log-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid #d0d6dd;
  color: #8a94a0;
  font-size: 13px;
  font-weight: 700;
}

.schedule-record-list {
  display: grid;
  gap: 6px;
}

.schedule-record-list button {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 0;
  background: transparent;
  color: #1f2b38;
  text-align: left;
  font-size: 17px;
}

.schedule-record-list button.current span {
  color: #08a9c6;
}

.schedule-record-list small {
  padding-left: 14px;
  color: #6f7985;
  font-size: 16px;
}

.schedule-record-list em {
  margin-left: 8px;
  padding: 1px 5px;
  background: #e7e7e7;
  color: #4f5965;
  font-size: 13px;
  font-style: normal;
}

.schedule-popover-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e6eb;
}

.schedule-popover-actions > button,
.split-action > button {
  min-width: 92px;
  height: 40px;
  border: 1px solid #08a9c6;
  border-radius: 4px;
  background: #fff;
  color: #08a9c6;
  font-size: 16px;
  font-weight: 800;
}

.split-action {
  position: relative;
  display: flex;
}

.split-action > button:first-child {
  border-radius: 4px 0 0 4px;
}

.split-action > button + button {
  min-width: 42px;
  border-left: 0;
  border-radius: 0 4px 4px 0;
}

.more-action {
  margin-left: auto;
}

.more-action > button {
  min-width: 116px;
  border-radius: 4px;
}

.schedule-action-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  display: none;
  min-width: 150px;
  max-height: 280px;
  overflow: auto;
  padding: 8px 0;
  border: 1px solid #d8dee5;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.more-action .schedule-action-menu {
  right: 0;
  left: auto;
}

.schedule-action-menu.open {
  display: grid;
}

.schedule-action-menu button {
  height: 42px;
  padding: 0 18px;
  border: 0;
  background: #fff;
  color: #08a9c6;
  font-size: 16px;
  text-align: left;
}

.schedule-action-menu button:hover {
  background: #eefbfe;
}

.schedule-action-menu button:disabled {
  color: #c5cbd2;
  cursor: not-allowed;
}

.booking-form-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: min(820px, calc(100% - 386px));
  background: #fff;
  border-left: 1px solid #d8dee5;
  box-shadow: -10px 0 24px rgba(15, 23, 42, 0.12);
}

.booking-form-panel.hidden {
  display: none;
}

.form-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid #d8dee5;
  font-size: 18px;
}

.form-panel-head button {
  border: 0;
  background: transparent;
  color: #7a8490;
  font-size: 30px;
}

.inline-appointment-form {
  display: grid;
  grid-template-columns: 320px minmax(360px, 1fr);
  gap: 0;
  min-height: 0;
  overflow: auto;
}

.inline-appointment-form section:nth-of-type(1),
.inline-appointment-form section:nth-of-type(2) {
  grid-column: 1;
}

.inline-appointment-form section:nth-of-type(3) {
  grid-column: 2;
  grid-row: 1 / 3;
  border-left: 1px solid #e2e6eb;
  overflow: auto;
}

.inline-appointment-form section {
  padding: 12px 18px 8px;
  border-bottom: 1px solid #e2e6eb;
}

.inline-appointment-form h3 {
  margin: 0 0 12px;
  padding-left: 8px;
  border-left: 4px solid #08a9c6;
  color: #1d2733;
  font-size: 18px;
}

.inline-appointment-form label {
  margin-bottom: 10px;
  color: #323d49;
  font-size: 15px;
}

.inline-appointment-form input,
.inline-appointment-form select,
.inline-appointment-form textarea {
  border-radius: 4px;
}

.patient-search-line {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 8px;
  margin-bottom: 12px;
}

.patient-search-line button {
  border: 1px solid #d4dbe3;
  border-radius: 4px;
  background: #fff;
  color: #5e6874;
  font-size: 26px;
}

.patient-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  width: min(560px, calc(100vw - 40px));
  max-height: 520px;
  overflow: auto;
  border: 1px solid #d8dee5;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}

.patient-search-dropdown.hidden {
  display: none;
}

.patient-search-count {
  padding: 18px 22px;
  border-bottom: 1px solid #d8dee5;
  color: #1f2b38;
  font-size: 20px;
  font-weight: 700;
}

.patient-search-option {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  width: 100%;
  padding: 16px 22px;
  border: 0;
  border-bottom: 1px solid #d8dee5;
  background: #fff;
  color: #596574;
  text-align: left;
}

.patient-search-option:hover {
  background: #eefbfe;
}

.patient-search-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e8f2ff;
  color: #08a9c6;
  font-size: 20px;
  font-weight: 900;
}

.patient-search-option strong {
  display: block;
  margin-bottom: 6px;
  color: #1f2b38;
  font-size: 20px;
}

.patient-search-option em {
  margin-left: 8px;
  color: #6a7480;
  font-style: normal;
  font-weight: 600;
}

.patient-search-option small {
  display: block;
  color: #66717e;
  font-size: 17px;
  line-height: 1.55;
}

.patient-search-empty {
  padding: 18px 22px;
  color: #8a94a0;
  font-size: 18px;
}

.type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 10px;
  border: 1px solid #d4dbe3;
  border-radius: 4px;
  overflow: hidden;
}

.type-toggle label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  margin: 0;
  color: #5c6672;
}

.type-toggle input {
  display: none;
}

.type-toggle label:has(input:checked) {
  color: #08a9c6;
  background: #effbfe;
  box-shadow: inset 0 0 0 1px #08a9c6;
}

.project-search {
  display: grid;
  grid-template-columns: 1fr 42px;
  align-items: center;
  margin-bottom: 10px;
}

.project-search input {
  border-radius: 4px 0 0 4px;
}

.project-search span {
  display: grid;
  place-items: center;
  height: 40px;
  border: 1px solid #d4dbe3;
  border-left: 0;
  border-radius: 0 4px 4px 0;
  font-size: 26px;
}

.project-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.project-groups h4 {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid #e1e5ea;
  color: #2d3743;
  font-size: 16px;
}

.project-groups label {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
}

.project-groups input {
  width: 18px;
  height: 18px;
}

.inline-actions {
  position: sticky;
  bottom: 0;
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 18px;
  border-top: 1px solid #d8dee5;
  background: #fff;
}

.save-btn {
  min-width: 116px;
  height: 40px;
  border: 0;
  border-radius: 4px;
  background: #08a9c6;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

@media (max-width: 1500px) {
  .booking-layout {
    grid-template-columns: 300px minmax(420px, 1fr);
  }

  .booking-form-panel {
    width: min(760px, calc(100% - 300px));
  }

  .calendar-head {
    padding: 0 18px;
  }

  .mini-calendar {
    padding-inline: 14px;
  }

  .inline-appointment-form section {
    padding-inline: 14px;
  }
}

@media (max-width: 1160px) {
  .booking-layout {
    grid-template-columns: 300px minmax(520px, 1fr);
  }

  .booking-form-panel {
    left: 300px;
    width: auto;
  }
}

.booking-layout.schedule-form-open {
  grid-template-columns: 386px minmax(0, 1fr) 600px;
}

.booking-layout.schedule-form-open .booking-center {
  grid-column: 2;
}

.booking-layout.schedule-form-open .schedule-board-card {
  height: calc(100vh - 168px);
  min-height: 560px;
}

.booking-layout.schedule-form-open .booking-form-panel {
  position: relative;
  grid-column: 3;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  min-height: calc(100vh - 132px);
  box-shadow: -6px 0 18px rgba(15, 23, 42, 0.1);
}

.booking-layout.schedule-form-open .booking-left {
  opacity: 1;
  visibility: visible;
  border-right: 1px solid #d8dee5;
}

.booking-layout.schedule-form-open .week-head,
.booking-layout.schedule-form-open .time-board {
  grid-template-columns: 46px repeat(7, minmax(0, 1fr));
}

.booking-layout.schedule-form-open .week-head button {
  min-width: 0;
  font-size: 17px;
}

.booking-layout.schedule-form-open .schedule-chip {
  left: 5px;
  right: 5px;
  padding-inline: 6px;
  font-size: 13px;
}

.booking-layout.schedule-form-open .inline-appointment-form {
  grid-template-columns: 280px minmax(300px, 1fr);
}

.booking-layout.schedule-form-open .inline-appointment-form section {
  padding-inline: 12px;
}

#patientDetail {
  padding: 0;
}

.patient-center-shell {
  display: grid;
  grid-template-columns: 128px 240px minmax(0, 1fr);
  min-height: calc(100vh - 92px);
  margin: 0;
  background: #fff;
  color: #4f5965;
}

.patient-center-menu {
  border-right: 1px solid #dbe2e8;
  background: #fbfcfd;
  padding: 10px 0;
}

.patient-center-menu-title {
  padding: 10px 14px;
  color: #202a36;
  font-size: 16px;
  font-weight: 800;
}

.patient-center-menu-item {
  width: calc(100% - 16px);
  height: 40px;
  margin: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #4f5965;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.patient-center-menu-item.active,
.patient-center-menu-item:hover {
  background: #f0f2f5;
  color: #202a36;
}

.patient-center-menu-group {
  padding: 14px 18px 8px;
  color: #202a36;
  font-size: 15px;
  font-weight: 800;
}

.patient-center-list {
  border-right: 1px solid #dbe2e8;
  background: #fff;
  overflow: hidden;
}

.patient-center-list-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 42px;
  border-bottom: 1px solid #dbe2e8;
  background: #f3f6f9;
}

.patient-center-list-tabs button {
  border: 0;
  border-right: 1px solid #dbe2e8;
  background: transparent;
  color: #4f5965;
  font-size: 14px;
  font-weight: 700;
}

.patient-center-list-tabs button.active {
  border-bottom: 2px solid #00a9c7;
  background: #fff;
  color: #00a9c7;
}

.patient-center-list-body {
  max-height: calc(100vh - 134px);
  overflow: auto;
}

.patient-center-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border: 0;
  border-bottom: 1px solid #e5ebf1;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.patient-center-card:hover,
.patient-center-card.active {
  background: #eef8fb;
  box-shadow: inset 3px 0 0 #08a9c6;
}

.patient-center-card .patient-avatar-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

.patient-center-card .patient-avatar-icon::before {
  top: 8px;
  width: 10px;
  height: 10px;
}

.patient-center-card .patient-avatar-icon::after {
  bottom: 7px;
  width: 22px;
  height: 12px;
}

.patient-center-card-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #64748b;
}

.patient-center-card-main strong {
  color: #202a36;
  font-size: 16px;
  font-weight: 800;
}

.patient-center-card-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.patient-center-empty {
  padding: 16px;
  color: #94a3b8;
}

.patients-console {
  display: grid;
  grid-template-columns: 128px 240px minmax(760px, 1fr);
  min-height: calc(100vh - 92px);
  margin: 0 -10px -12px;
  background: #fff;
  border-top: 1px solid #dbe2e8;
  color: #4f5965;
}

.patients-console-menu {
  padding: 10px 0;
  border-right: 1px solid #dbe2e8;
  background: #fbfcfd;
}

.patients-console-title {
  padding: 10px 14px;
  color: #202a36;
  font-size: 16px;
  font-weight: 900;
}

.patients-console-menu button {
  width: calc(100% - 16px);
  height: 40px;
  margin: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #4f5965;
  font-size: 15px;
  font-weight: 700;
}

.patients-console-menu button.active,
.patients-console-menu button:hover {
  background: #f0f2f5;
  color: #202a36;
}

.patients-console-menu strong {
  display: block;
  padding: 14px 18px 8px;
  color: #202a36;
  font-size: 15px;
}

.patients-filter-panel {
  border-right: 1px solid #dbe2e8;
  background: #fff;
}

.patients-filter-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 42px;
  border-bottom: 1px solid #dbe2e8;
  background: #f3f6f9;
}

.patients-filter-tabs button {
  border: 0;
  border-right: 1px solid #dbe2e8;
  background: transparent;
  color: #4f5965;
  font-size: 14px;
  font-weight: 700;
}

.patients-filter-tabs button.active {
  border-top: 2px solid #08a9c6;
  background: #fff;
  color: #08a9c6;
}

.patients-filter-list button,
.patients-filter-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid #edf1f5;
  background: #fff;
  color: #4f5965;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.patients-filter-list button.active {
  color: #08a9c6;
}

.patients-filter-list b,
.patients-filter-list i {
  color: #08a9c6;
  font-style: normal;
}

.patients-list-workspace {
  min-width: 0;
  overflow: hidden;
  background: #fff;
}

.patients-querybar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 10px 14px;
  border-bottom: 1px solid #dbe2e8;
  background: #fff;
}

.patients-querybar label {
  display: flex;
  align-items: center;
  height: 40px;
  min-width: 180px;
  border: 1px solid #dbe2e8;
  border-radius: 4px;
  background: #fff;
}

.patients-querybar label:first-child {
  min-width: 260px;
}

.patients-querybar input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 12px;
  color: #4f5965;
}

.patients-link-btn,
.patients-ai-btn,
.patients-batch-btn {
  height: 40px;
  border: 1px solid #dbe2e8;
  border-radius: 4px;
  background: #fff;
  color: #08a9c6;
  font-weight: 800;
}

.patients-ai-btn {
  border-color: #7da7ff;
  color: #3272ff;
}

.patients-batch-btn {
  margin-left: auto;
}

.patients-card-list-wrap {
  height: calc(100vh - 160px);
  overflow: auto;
  padding: 14px;
  background: #f6f9fb;
}

.patients-card-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  margin-bottom: 10px;
  color: #6b7787;
  font-size: 13px;
  font-weight: 800;
}

.patients-card-list-head label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.patients-card-list-status {
  display: flex;
  align-items: center;
  gap: 10px;
}

.patient-marquee-toggle {
  min-height: 30px;
  border: 1px solid rgba(8, 169, 198, 0.25);
  border-radius: 8px;
  padding: 0 10px;
  background: rgba(239, 250, 253, 0.9);
  color: #078ba5;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.patient-marquee-toggle:hover,
.patient-marquee-toggle[aria-pressed="true"] {
  border-color: rgba(8, 169, 198, 0.5);
  background: #def6fa;
}

.patient-marquee {
  --patient-marquee-duration: 40s;
  --patient-marquee-gap: 14px;
  position: relative;
  min-width: 0;
  overflow: visible;
  border-radius: 14px;
}

.patient-marquee:focus-visible {
  outline: 3px solid rgba(8, 169, 198, 0.22);
  outline-offset: 4px;
}

.patient-marquee.is-animated {
  height: max(520px, calc(100dvh - 290px));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}

.patient-marquee-track {
  min-width: 0;
}

.patient-marquee.is-animated .patient-marquee-track {
  display: flex;
  flex-direction: column;
  gap: var(--patient-marquee-gap);
  will-change: transform;
  animation: patient-cards-marquee var(--patient-marquee-duration) linear infinite;
}

.patient-marquee:hover .patient-marquee-track,
.patient-marquee:focus-within .patient-marquee-track,
.patient-marquee.is-manually-paused .patient-marquee-track {
  animation-play-state: paused;
}

.patient-marquee-group {
  flex: 0 0 auto;
  width: 100%;
}

@keyframes patient-cards-marquee {
  to { transform: translateY(calc(-50% - 7px)); }
}

.patients-card-list-head input,
.patient-card-select input {
  width: 17px;
  height: 17px;
  accent-color: #08a9c6;
}

.patients-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 12px;
  align-content: start;
}

.patients-card-grid > .empty-state {
  grid-column: 1 / -1;
}

.patient-list-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbe5ed;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(31, 58, 78, 0.06);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.patient-list-card:hover {
  border-color: rgba(8, 169, 198, 0.38);
  box-shadow: 0 12px 28px rgba(31, 78, 96, 0.1);
  transform: translateY(-1px);
}

.patient-list-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 12px 14px;
  border-bottom: 1px solid #e8eef3;
}

.patient-card-select {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.patient-list-card-head .patients-name-cell {
  min-width: 0;
  flex: 1;
}

.patient-list-card-head .patient-table-link {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patient-card-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.patient-card-actions .patients-row-action {
  min-width: 48px;
  min-height: 34px;
  border: 1px solid #d8e2ea;
  border-radius: 6px;
  padding: 0 10px;
  background: #fff;
}

.patient-card-actions .patients-row-action:hover {
  border-color: rgba(8, 169, 198, 0.46);
  background: rgba(8, 169, 198, 0.07);
}

.patient-card-actions .patients-row-action + .patients-row-action {
  margin-left: 0;
}

.patient-list-card-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 4px 14px 12px;
}

.patient-list-card-fields > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 10px 10px 8px 0;
}

.patient-list-card-fields span {
  color: #8793a3;
  font-size: 12px;
  font-weight: 800;
}

.patient-list-card-fields strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #303b49;
  font-size: 14px;
  line-height: 1.35;
}

@media (max-width: 1280px) {
  .patients-card-grid {
    grid-template-columns: 1fr;
  }
}

.patients-table-wrap {
  height: calc(100vh - 160px);
  overflow: auto;
  background: #fff;
}

.patients-table {
  min-width: 1380px;
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.patients-table th,
.patients-table td {
  height: 52px;
  padding: 0 12px;
  border-right: 1px solid #dfe5eb;
  border-bottom: 1px solid #e6ebf0;
  color: #687383;
  text-align: left;
  white-space: nowrap;
}

.patients-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 42px;
  background: #f5f6f7;
  color: #303944;
  font-weight: 900;
}

.patients-table tbody tr:nth-child(even) {
  background: #f4f5f6;
}

.patients-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #08a9c6;
}

.patients-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.patients-name-cell .patient-avatar-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.patients-name-cell .patient-avatar-icon::before {
  top: 7px;
  width: 10px;
  height: 10px;
}

.patients-name-cell .patient-avatar-icon::after {
  bottom: 7px;
  width: 22px;
  height: 12px;
}

.patients-row-action {
  border: 0;
  background: transparent;
  color: #08a9c6;
  font-weight: 800;
}

.patients-row-action + .patients-row-action {
  margin-left: 8px;
}

.patient-center-shell .patient-detail-page {
  min-width: 0;
  margin: 0;
  overflow: auto;
}

.patient-center-shell .patient-profile-head {
  grid-template-columns: 250px 230px 230px minmax(160px, 1fr) auto;
}

.patient-detail-page {
  min-height: calc(100vh - 120px);
  margin: -10px -20px 0;
  background: #fff;
  color: #4f5965;
}

.patient-profile-head {
  display: grid;
  grid-template-columns: 300px 280px 280px 1fr auto;
  align-items: stretch;
  min-height: 68px;
  border: 1px solid #dbe2e8;
  border-left: 0;
  border-right: 0;
  background: #f8fafc;
}

.patient-profile-main,
.patient-profile-meta,
.patient-profile-source {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-right: 1px solid #dbe2e8;
}

.patient-profile-main .avatar {
  width: 42px;
  height: 42px;
}

.patient-profile-main .patient-avatar-icon::before {
  top: 9px;
  width: 12px;
  height: 12px;
}

.patient-profile-main .patient-avatar-icon::after {
  bottom: 8px;
  width: 24px;
  height: 13px;
}

.patient-profile-main div,
.patient-profile-meta {
  display: grid;
  gap: 4px;
}

.patient-profile-main strong {
  color: #202a36;
  font-size: 17px;
}

.patient-profile-main small,
.patient-profile-main span,
.patient-profile-meta span {
  font-size: 15px;
}

.patient-profile-meta b {
  color: #202a36;
  font-weight: 700;
}

.gender-dot {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.gender-dot.male {
  background: #4e8df4;
}

.gender-dot.female {
  background: #ff7aaa;
}

.patient-profile-source {
  color: #4f5965;
  font-size: 16px;
}

.patient-profile-head .primary-btn {
  align-self: center;
  margin: 0 16px;
  height: 38px;
}

.patient-detail-tabs {
  display: flex;
  align-items: flex-end;
  overflow-x: auto;
  border-bottom: 1px solid #08a9c6;
  background: #fff;
}

.patient-detail-tabs button {
  min-width: 92px;
  height: 38px;
  border: 1px solid #dbe2e8;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #fff;
  color: #3f4854;
  font-size: 16px;
  font-weight: 700;
}

.patient-detail-tabs button.active {
  border-color: #08a9c6;
  background: #08a9c6;
  color: #fff;
}

.patient-treatment-plan-panel {
  display: grid;
  gap: 14px;
  margin: 28px 12px;
}

.patient-treatment-plan-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid #dde3e9;
  border-radius: 4px;
  background: #fff;
}

.patient-treatment-plan-panel h2 {
  margin: 0;
  color: #202a36;
  font-size: 20px;
  font-weight: 900;
}

.patient-treatment-plan-panel header span {
  color: #687380;
  font-weight: 800;
}

.patient-treatment-timeline-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.patient-treatment-timeline-row > time {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: end;
  padding: 16px 18px 0 0;
  color: #6b7685;
  font-weight: 800;
}

.patient-treatment-timeline-row > time::after {
  content: "";
  position: absolute;
  top: 21px;
  right: 0;
  width: 10px;
  height: 10px;
  border: 3px solid #08a9c6;
  border-radius: 50%;
  background: #fff;
}

.patient-treatment-timeline-row > time::before {
  content: "";
  position: absolute;
  top: 35px;
  right: 6px;
  bottom: -24px;
  width: 2px;
  background: #d9edf3;
}

.patient-treatment-timeline-row > time strong {
  color: #202a36;
  font-size: 16px;
}

.patient-treatment-timeline-row > time span {
  color: #08a9c6;
  font-size: 15px;
}

.patient-treatment-plan-card {
  overflow: hidden;
  border: 1px solid #dde3e9;
  border-radius: 4px;
  background: #fff;
}

.patient-treatment-plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid #e7ebf0;
  background: #fbfcfd;
}

.patient-treatment-plan-head strong {
  color: #202a36;
  font-size: 17px;
  font-weight: 900;
}

.patient-treatment-plan-head small {
  color: #687380;
  font-weight: 700;
}

.patient-treatment-plan-head-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.patient-treatment-print {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 82px;
  height: 36px;
  padding: 0 12px;
}

.patient-treatment-print .print-icon {
  width: 16px;
  height: 16px;
}

.treatment-plan-print-frame {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1px;
  height: 1px;
  border: 0;
  pointer-events: none;
}

.patient-treatment-plan-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #edf1f5;
  color: #526071;
  font-weight: 700;
}

.patient-treatment-plan-meta b {
  color: #202a36;
}

.patient-treatment-basic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 28px;
  padding: 16px;
  border-bottom: 1px solid #edf1f5;
}

.patient-treatment-basic-grid > span {
  padding-bottom: 7px;
  border-bottom: 1px solid #e8edf3;
  color: #526071;
  font-size: 15px;
  font-weight: 700;
}

.patient-treatment-basic-grid > span > b {
  margin-left: 8px;
  color: #202a36;
  font-size: 16px;
}

.patient-treatment-basic-grid .patient-treatment-tooth-field {
  display: flex;
  align-items: center;
  min-height: 66px;
  padding-bottom: 0;
}

.patient-treatment-tooth-map {
  display: inline-block;
  margin-left: 8px;
  cursor: default;
}

.patient-treatment-tooth-map:hover {
  border-color: #cfd7e1;
  background: #fff;
}

.patient-treatment-empty-tooth {
  margin-left: 8px;
  color: #202a36;
  font-size: 16px;
  font-weight: 800;
}

.patient-disposal-detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: stretch;
  border-top: 1px solid #e8f0f4;
  background: #fff;
}

.patient-disposal-detail .patient-disposal-tooth {
  display: grid;
  place-items: center;
  min-width: 132px;
  min-height: 118px;
  padding: 18px 20px;
  border: 0;
  border-right: 1px solid #e8f0f4;
  background: #fbfdfe;
}

.patient-disposal-detail .patient-disposal-tooth .patient-treatment-tooth-map {
  margin-left: 0;
}

.patient-disposal-detail .patient-disposal-content {
  min-width: 0;
  padding: 20px 22px;
}

.patient-disposal-detail.no-tooth .patient-disposal-content {
  grid-column: 1 / -1;
}

html.dark .patient-disposal-detail,
html[data-theme="dark"] .patient-disposal-detail,
html.dark .patient-disposal-detail .patient-disposal-tooth,
html[data-theme="dark"] .patient-disposal-detail .patient-disposal-tooth {
  border-color: rgba(151, 180, 204, 0.14);
  background: #213247;
}

@media (max-width: 760px) {
  .patient-disposal-detail {
    grid-template-columns: 1fr;
  }

  .patient-disposal-detail .patient-disposal-tooth {
    justify-items: start;
    min-height: 96px;
    border-right: 0;
    border-bottom: 1px solid #e8f0f4;
  }
}

.patient-treatment-plan-section,
.patient-treatment-choice-section,
.patient-treatment-fee-detail {
  padding: 14px 16px 16px;
  border-bottom: 1px solid #edf1f5;
}

.patient-treatment-plan-section h4,
.patient-treatment-choice-section h4,
.patient-treatment-fee-detail h4 {
  margin: 0 0 12px;
  color: #202a36;
  font-size: 18px;
  font-weight: 900;
}

.patient-treatment-fee-detail h4 span {
  margin-left: 8px;
  color: #08a9c6;
  font-size: 14px;
}

.patient-treatment-plan-card table,
.patient-treatment-fee-detail table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.patient-treatment-plan-card th,
.patient-treatment-plan-card td,
.patient-treatment-fee-detail th,
.patient-treatment-fee-detail td {
  padding: 10px 12px;
  border: 1px solid #edf1f5;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
  word-break: break-word;
}

.patient-treatment-plan-card th {
  background: #fbfcfd;
  color: #202a36;
  font-weight: 900;
}

.patient-treatment-compare-table th:first-child {
  width: 180px;
}

.patient-treatment-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  padding: 12px 14px;
  border: 1px solid #edf1f5;
  background: #fbfcfd;
}

.patient-treatment-choice-list span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 92px;
  color: #6b7685;
  font-weight: 800;
}

.patient-treatment-choice-list span::before {
  content: "";
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #9aa4af;
  border-radius: 3px;
  background: #fff;
}

.patient-treatment-choice-list span.checked::before {
  content: "✓";
  border-color: #08a9c6;
  background: #08a9c6;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.patient-treatment-choice-list em {
  color: #202a36;
  font-style: normal;
  font-weight: 800;
}

.patient-treatment-fee-group td,
.patient-treatment-fee-subtotal td,
.patient-treatment-fee-detail tfoot td {
  background: #fbfcfd;
  font-weight: 900;
}

.patient-treatment-fee-group span {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid #08a9c6;
  border-radius: 50%;
  vertical-align: -2px;
}

.patient-treatment-fee-detail tfoot td:last-child {
  color: #08a9c6;
}

.patient-treatment-consents {
  padding: 14px 16px 16px;
}

.patient-treatment-consents > h4 {
  margin: 0 0 12px;
  color: #202a36;
  font-size: 18px;
  font-weight: 900;
}

.patient-treatment-consent-document {
  overflow: hidden;
  border: 1px solid #dfe6ed;
  border-radius: 4px;
  background: #fff;
}

.patient-treatment-consent-document + .patient-treatment-consent-document {
  margin-top: 12px;
}

.patient-treatment-consent-document header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e7edf2;
  background: #f8fafc;
}

.patient-treatment-consent-document header strong {
  color: #202a36;
  font-size: 16px;
}

.patient-treatment-consent-document header small {
  color: #687380;
  font-weight: 700;
}

.patient-treatment-consent-document > div {
  padding: 16px;
  color: #303b49;
  font-size: 15px;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
}

.patient-info-card {
  margin: 28px 12px;
  border: 1px solid #dde3e9;
  border-radius: 4px;
  background: #fff;
}

.patient-info-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid #dde3e9;
  background: #f7f7f7;
}

.patient-info-card h2 {
  margin: 0;
  color: #30363d;
  font-size: 18px;
  font-weight: 900;
}

.patient-info-card h3 {
  margin: 22px 22px 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e8ed;
  color: #30363d;
  font-size: 17px;
  font-weight: 900;
}

.patient-info-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr) 360px;
  gap: 34px;
  padding: 16px 22px 28px;
}

.patient-info-grid p {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  min-height: 36px;
  margin: 0;
  color: #6b7280;
  font-size: 16px;
}

.patient-contact-grid p {
  display: grid;
  grid-template-columns: 92px auto 1fr;
  align-items: center;
  min-height: 36px;
  margin: 0;
  color: #6b7280;
  font-size: 16px;
}

.patient-info-grid span,
.patient-contact-grid span {
  color: #6b7280;
}

.patient-info-grid b,
.patient-contact-grid b {
  color: #4a5563;
  font-weight: 500;
}

.patient-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 4px 34px;
  padding: 16px 22px 36px;
  border-top: 1px solid #e4e8ed;
}

.patient-contact-grid em {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 26px;
  margin-right: 10px;
  border-radius: 16px;
  background: #6ed322;
  color: #fff;
  font-style: normal;
  font-weight: 800;
}

.patient-contact-grid .light-btn {
  width: max-content;
  height: 30px;
  margin-left: 8px;
  padding: 0 10px;
}

.patient-extra-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 8px 34px;
  padding: 18px 22px 30px;
  border-top: 1px solid #e4e8ed;
}

.patient-extra-grid p {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 34px;
  margin: 0;
  color: #6b7280;
  font-size: 16px;
}

.patient-extra-grid span {
  color: #6b7280;
}

.patient-extra-grid b {
  color: #4a5563;
  font-weight: 500;
}

.patient-eye-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #3d4651;
  font-size: 17px;
}

.family-relation-card {
  margin: 18px 22px 26px;
  min-height: 420px;
  border: 1px solid #dde3e9;
  border-radius: 4px;
  background: #fff;
}

.family-relation-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 12px;
  border-bottom: 0;
  background: #fff;
}

.family-relation-card h4 {
  margin: 0;
  color: #202a36;
  font-size: 18px;
  font-weight: 900;
}

.family-relation-card header > div:first-child > p {
  margin: 4px 0 0;
  color: #7b8ba0;
  font-size: 12px;
  font-weight: 600;
}

.family-relation-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.family-relation-actions .light-btn {
  height: 38px;
  padding: 0 16px;
}

.square-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 38px;
  padding: 0;
  font-size: 18px;
}

.family-relation-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 330px;
  color: #6d7683;
  font-size: 16px;
  font-weight: 700;
}

.family-relation-empty > p { margin: 14px 0 16px; }
.family-relation-empty > .light-btn { min-width: 150px; }

.family-relation-loading {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 260px;
  color: #6e8096;
  font-weight: 700;
}

.family-relation-loading span {
  width: 34px;
  height: 34px;
  border: 3px solid #d9eef4;
  border-top-color: #09abc9;
  border-radius: 50%;
  animation: patient-relative-spin .8s linear infinite;
}

@keyframes patient-relative-spin { to { transform: rotate(360deg); } }

.patient-relative-table-wrap {
  overflow: auto;
  margin: 18px;
  border: 1px solid #dceaf1;
  border-radius: 15px;
  background: rgba(255, 255, 255, .92);
}

.patient-relative-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  color: #30445e;
  font-size: 14px;
}

.patient-relative-table th,
.patient-relative-table td {
  padding: 15px 16px;
  border-bottom: 1px solid #e5eef3;
  text-align: left;
  vertical-align: middle;
}

.patient-relative-table th {
  background: #f3f9fc;
  color: #64778d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.patient-relative-table tbody tr:last-child td { border-bottom: 0; }
.patient-relative-table tbody tr:hover { background: #f8fdff; }
.patient-relative-table td small { display: block; margin-top: 5px; color: #8a98a9; }

.patient-relative-name {
  padding: 0;
  border: 0;
  background: transparent;
  color: #058eab;
  font: inherit;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.patient-relative-name:hover { color: #036f89; text-decoration: underline; text-underline-offset: 3px; }

.patient-relative-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid #bfeaf3;
  border-radius: 999px;
  background: #ebfbfe;
  color: #058dab;
  font-size: 12px;
  font-weight: 850;
}

.patient-relative-row-actions { display: flex; align-items: center; gap: 7px; }
.patient-relative-row-actions .light-btn { height: 32px; padding: 0 12px; }
.patient-relative-row-actions .danger-text-btn { color: #dc5261; }

.patient-relative-list {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.patient-relative-list-item {
  display: grid;
  grid-template-columns: 52px minmax(200px, 1.5fr) minmax(160px, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 17px 18px;
  border: 1px solid #dcebf2;
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 20px rgba(39, 102, 128, .05);
}

.patient-relative-avatar,
.patient-relative-preview-avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #bce8f1;
  border-radius: 15px;
  background: linear-gradient(145deg, #dbf8fc, #edf3ff);
  color: #078fab;
  font-size: 18px;
  font-weight: 900;
}

button.patient-relative-avatar { cursor: pointer; }
.patient-relative-main { min-width: 0; }
.patient-relative-main .patient-relative-badge { margin-left: 9px; }
.patient-relative-main p,
.patient-relative-remark p { margin: 7px 0 0; color: #74859a; font-size: 13px; }
.patient-relative-remark > span { color: #9aa7b5; font-size: 11px; font-weight: 800; }

.patient-relative-modal {
  z-index: 1200;
  padding: clamp(12px, 3vw, 34px);
  background: radial-gradient(circle at 50% 12%, rgba(65, 208, 234, .16), transparent 38%), rgba(20, 39, 58, .53);
  backdrop-filter: blur(12px) saturate(112%);
}

.patient-relative-modal-card {
  overflow: hidden;
  width: min(820px, calc(100vw - 28px));
  max-height: 92vh;
  border: 1px solid rgba(9, 171, 201, .25);
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, #f5fbfe);
  box-shadow: 0 34px 90px rgba(18, 46, 70, .34);
}

.patient-relative-modal-card > .modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(9, 171, 201, .15);
  background: linear-gradient(110deg, #e5f9fd, #f7faff);
}

.patient-relative-modal-card .modal-head span { color: #08a6c4; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.patient-relative-modal-card .modal-head h2 { margin: 4px 0 0; color: #142943; font-size: 23px; }
.patient-relative-modal-card .modal-head p { margin: 5px 0 0; color: #73839a; }
.patient-relative-modal-card .modal-head .icon-btn { width: 42px; height: 42px; border: 0; border-radius: 13px; background: #e8f6fa; color: #63778c; font-size: 23px; }

.patient-relative-form { overflow: auto; max-height: calc(92vh - 104px); padding: 22px 24px 0; }
.patient-relative-form-section { display: grid; gap: 13px; }
.patient-relative-field { display: grid; gap: 8px; color: #2f465f; font-size: 14px; font-weight: 800; }
.patient-relative-field > span em { color: #e45566; font-style: normal; }
.patient-relative-field > span small { color: #9aa7b7; font-weight: 650; }
.patient-relative-field input,
.patient-relative-field select,
.patient-relative-field textarea {
  width: 100%;
  border: 1px solid #cfdee8;
  border-radius: 13px;
  background: #fff;
  color: #273c54;
  font: inherit;
  font-weight: 650;
  outline: none;
}
.patient-relative-field input,
.patient-relative-field select { height: 48px; padding: 0 14px; }
.patient-relative-field textarea { min-height: 104px; padding: 13px 14px; resize: vertical; }
.patient-relative-field input:focus,
.patient-relative-field select:focus,
.patient-relative-field textarea:focus { border-color: #09abc9; box-shadow: 0 0 0 4px rgba(9, 171, 201, .1); }

.patient-relative-searchbox { position: relative; }
.patient-relative-searchbox svg { position: absolute; left: 15px; top: 15px; width: 18px; height: 18px; color: #7d90a3; }
.patient-relative-searchbox input { padding-left: 43px; }
.patient-relative-search-results {
  overflow: auto;
  max-height: 220px;
  border: 1px solid #dce9f0;
  border-radius: 14px;
  background: #fff;
}
.patient-relative-search-results > p { margin: 0; padding: 22px; color: #8493a6; text-align: center; }
.patient-relative-search-results button {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 13px;
  border: 0;
  border-bottom: 1px solid #edf2f5;
  background: #fff;
  color: #2c4057;
  text-align: left;
  cursor: pointer;
}
.patient-relative-search-results button:last-child { border-bottom: 0; }
.patient-relative-search-results button:hover,
.patient-relative-search-results button.selected { background: #ecfafd; }
.patient-relative-search-results button > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #e4f8fc; color: #078fab; font-weight: 900; }
.patient-relative-search-results button b,
.patient-relative-search-results button small { display: block; }
.patient-relative-search-results button small { margin-top: 3px; color: #8493a6; }
.patient-relative-search-results button em { color: #08a0be; font-size: 12px; font-style: normal; font-weight: 850; }

.patient-relative-selected-preview,
.patient-relative-locked-patient {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid #bde8f1;
  border-radius: 15px;
  background: #edfbfe;
}
.patient-relative-selected-preview[hidden] { display: none; }
.patient-relative-selected-preview > div { flex: 1; }
.patient-relative-selected-preview b,
.patient-relative-locked-patient b { color: #213850; }
.patient-relative-selected-preview p { margin: 4px 0 0; color: #73869a; font-size: 13px; }
.patient-relative-selected-preview > strong { color: #0794b1; font-size: 12px; }
.patient-relative-locked-patient { display: grid; grid-template-columns: 1fr auto; }
.patient-relative-locked-patient span { color: #6c7f94; font-size: 13px; }
.patient-relative-locked-patient small { grid-column: 2; grid-row: 1 / 3; color: #0794b1; }

.patient-relative-form-grid { display: grid; grid-template-columns: 220px 1fr; gap: 16px; margin-top: 18px; }
.patient-relative-form-error { margin: 14px 0 0; padding: 10px 13px; border-radius: 11px; background: #fff0f2; color: #cf3f50; font-weight: 750; }
.patient-relative-form-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; margin: 22px -24px 0; padding: 16px 24px; border-top: 1px solid #deebf1; background: rgba(250, 253, 255, .96); backdrop-filter: blur(10px); }
.patient-relative-form-actions button { min-width: 112px; }

/* Keep the relation picker attached to its field and above the sticky footer. */
.patient-relative-modal-card:has(.patient-relative-form-grid .system-card-select.open),
.patient-relative-modal-card:has(.patient-relative-form-grid .system-card-select.open) .patient-relative-form {
  overflow: visible;
}
.patient-relative-form-grid > .patient-relative-field:has(.system-card-select.open) {
  position: relative;
  z-index: 80;
}
.patient-relative-form-grid .system-card-select-menu {
  z-index: 1000;
  top: calc(100% + 2px);
  max-height: min(280px, 38vh);
  box-shadow: 0 18px 44px rgba(31,54,76,.24);
}
.patient-relative-form-grid .system-card-select.open .system-card-select-trigger {
  border-radius: 10px 10px 6px 6px;
}
.patient-relative-form-actions {
  z-index: 10;
}

@media (max-width: 760px) {
  .patient-relative-list-item { grid-template-columns: 46px 1fr; }
  .patient-relative-remark,
  .patient-relative-list-item > .patient-relative-row-actions { grid-column: 2; }
  .patient-relative-form-grid { grid-template-columns: 1fr; }
  .patient-relative-modal-card > .modal-head,
  .patient-relative-form { padding-left: 16px; padding-right: 16px; }
  .patient-relative-form-actions { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

.patient-image-center {
  overflow: hidden;
  margin: 18px 22px 28px;
  min-height: 560px;
  border: 1px solid rgba(9, 171, 201, .2);
  border-radius: 18px;
  background: rgba(250, 253, 255, .9);
  box-shadow: 0 13px 32px rgba(37, 101, 126, .08);
}

.patient-image-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-bottom: 1px solid #deebf1;
  background: linear-gradient(105deg, rgba(227, 249, 253, .82), rgba(248, 250, 255, .82));
}
.patient-image-toolbar h2 { margin: 0; color: #19304a; font-size: 22px; }
.patient-image-toolbar p { margin: 6px 0 0; color: #70839a; font-size: 13px; }
.patient-image-toolbar > div:last-child { display: flex; gap: 10px; }
.patient-image-toolbar button { min-width: 116px; white-space: nowrap; }

.patient-image-category-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 12px 18px;
  border-bottom: 1px solid #e1edf2;
  background: #fff;
  scrollbar-width: thin;
}
.patient-image-category-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #52677f;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
}
.patient-image-category-tabs button:hover { background: #f1f9fc; color: #078eaa; }
.patient-image-category-tabs button.active { border-color: #b9e8f1; background: #e8f9fc; color: #068eaa; box-shadow: inset 0 -2px 0 #09abc9; }

.patient-image-content { min-height: 430px; padding: 20px; }
.patient-image-timeline { position: relative; max-width: 1320px; margin: 0 auto; }
.patient-image-timeline::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 2px; background: #d7e9ef; }
.patient-image-visit { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
.patient-image-visit:last-child { padding-bottom: 0; }
.patient-image-timeline-marker { position: relative; z-index: 1; padding-top: 24px; }
.patient-image-timeline-marker span { display: block; width: 14px; height: 14px; margin: 0 auto; border: 3px solid #f8fcfd; border-radius: 50%; background: #9bb3c2; box-shadow: 0 0 0 2px #cfe3ea; }
.patient-image-visit.is-today .patient-image-timeline-marker span { background: #08a8c6; box-shadow: 0 0 0 3px #bdebf3; }
.patient-image-visit > article { overflow: hidden; border: 1px solid #d9e8ee; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(41, 91, 112, .06); }
.patient-image-visit.is-today > article { border-color: #a9deea; box-shadow: 0 10px 28px rgba(9, 158, 187, .1); }
.patient-image-visit > article > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 19px; border-bottom: 1px solid #e3edf1; background: #f9fcfd; }
.patient-image-visit.is-today > article > header { background: #effbfe; }
.patient-image-visit header time { color: #557088; font-size: 13px; font-weight: 800; }
.patient-image-visit header b { display: inline-block; margin-left: 9px; padding: 3px 7px; border-radius: 6px; background: #0aa8c5; color: #fff; font-size: 11px; }
.patient-image-visit header h3 { margin: 7px 0 0; color: #263d55; font-size: 17px; }
.patient-image-visit header p { margin: 5px 0 0; color: #8293a3; font-size: 12px; }
.patient-image-visit .patient-image-grid, .patient-image-visit .patient-cbct-list { margin: 16px; }
.patient-image-visit-empty { display: flex; align-items: center; gap: 9px; padding: 24px 19px; color: #8596a6; }
.patient-image-visit-empty strong { color: #536b7f; font-size: 13px; }
.patient-image-visit-empty span { font-size: 12px; }
.patient-image-upload-fields { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.patient-image-empty { display: grid; place-items: center; align-content: center; min-height: 390px; text-align: center; }
.patient-image-empty h3 { margin: 18px 0 0; color: #31465f; font-size: 18px; }
.patient-image-empty p { max-width: 440px; margin: 8px 0 18px; color: #8290a1; line-height: 1.6; }
.patient-image-empty-visual { position: relative; width: 118px; height: 92px; border: 1px solid #cdeaf1; border-radius: 18px; background: #f5fbfd; }
.patient-image-empty-visual::before { content: ""; position: absolute; left: 18px; top: 22px; width: 78px; height: 50px; border-radius: 10px; background: linear-gradient(145deg, #dff4f8 0 54%, #ccebf2 55%); }
.patient-image-empty-visual span { position: absolute; z-index: 1; right: 26px; top: 30px; width: 17px; height: 17px; border-radius: 50%; background: #7bcbdc; }
.patient-image-empty-visual i { position: absolute; right: -8px; bottom: -8px; width: 34px; height: 34px; border: 4px solid #fff; border-radius: 11px; background: #09abc9; box-shadow: 0 6px 14px rgba(9, 150, 179, .2); }
.patient-image-empty-visual i::before,
.patient-image-empty-visual i::after { content: ""; position: absolute; left: 9px; top: 14px; width: 10px; height: 2px; border-radius: 2px; background: #fff; }
.patient-image-empty-visual i::after { transform: rotate(90deg); }

.patient-image-skeleton { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.patient-image-skeleton span { aspect-ratio: 4 / 3; border-radius: 15px; background: linear-gradient(90deg, #edf4f7 20%, #f7fbfc 45%, #edf4f7 70%); background-size: 240% 100%; animation: patient-image-shimmer 1.4s ease infinite; }
@keyframes patient-image-shimmer { to { background-position: -240% 0; } }
@media (prefers-reduced-motion: reduce) { .patient-image-skeleton span { animation: none; } }

.patient-image-group + .patient-image-group { margin-top: 26px; }
.patient-image-group > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
.patient-image-group > header > div { display: flex; align-items: center; gap: 9px; }
.patient-image-group > header h3 { margin: 0; color: #263c55; font-size: 17px; }
.patient-image-group > header span { color: #7890a4; font-size: 12px; }
.patient-image-group > header p { margin: 0; color: #8a99a9; font-size: 12px; }

.patient-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 16px; }
.patient-image-tile { overflow: hidden; border: 1px solid #d7e7ee; border-radius: 15px; background: #fff; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.patient-image-tile:hover { transform: translateY(-2px); border-color: #a9dfeb; box-shadow: 0 13px 28px rgba(34, 98, 123, .12); }
.patient-image-tile.selected { border-color: #09abc9; box-shadow: 0 0 0 3px rgba(9, 171, 201, .1); }
.patient-image-thumb { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #eef5f8; }
.patient-image-thumb img { width: 100%; height: 100%; object-fit: cover; }
.patient-image-select { position: absolute; z-index: 4; left: 11px; top: 11px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: rgba(255, 255, 255, .92); box-shadow: 0 3px 10px rgba(22, 52, 72, .14); cursor: pointer; }
.patient-image-select input { position: absolute; opacity: 0; pointer-events: none; }
.patient-image-select span { width: 15px; height: 15px; border: 1.5px solid #8ca0b3; border-radius: 5px; }
.patient-image-select input:checked + span { border-color: #0799b6; background: #0799b6; box-shadow: inset 0 0 0 3px #fff; }
.patient-image-type-label { position: absolute; z-index: 2; right: 10px; top: 10px; padding: 5px 9px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 8px; background: rgba(26, 56, 75, .7); color: #fff; font-size: 11px; font-weight: 800; backdrop-filter: blur(8px); }
.patient-image-hover-actions { position: absolute; inset: auto 0 0; display: flex; justify-content: flex-end; gap: 7px; padding: 28px 10px 10px; background: linear-gradient(transparent, rgba(19, 42, 58, .72)); opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; }
.patient-image-tile:hover .patient-image-hover-actions,
.patient-image-tile:focus-within .patient-image-hover-actions { opacity: 1; transform: translateY(0); }
.patient-image-hover-actions button { min-height: 32px; padding: 0 11px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 9px; background: rgba(255, 255, 255, .9); color: #234159; font-weight: 750; cursor: pointer; }
.patient-image-tile > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 13px; }
.patient-image-tile > footer > div { min-width: 0; }
.patient-image-tile > footer strong,
.patient-image-tile > footer small { display: block; }
.patient-image-tile > footer strong { overflow: hidden; color: #30465e; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.patient-image-tile > footer small { margin-top: 5px; color: #8a98a8; font-size: 11px; }
.patient-image-tile > footer button { border: 0; background: transparent; color: #d34f60; font-size: 12px; font-weight: 750; cursor: pointer; }

.patient-cbct-list { overflow: hidden; border: 1px solid #d9e8ef; border-radius: 15px; background: #fff; }
.patient-cbct-row { position: relative; display: grid; grid-template-columns: 30px 44px minmax(220px, 1.5fr) minmax(135px, .8fr) minmax(90px, .6fr) auto; align-items: center; gap: 13px; padding: 14px 15px; border-bottom: 1px solid #e7eff3; color: #4b6076; }
.patient-cbct-row:last-child { border-bottom: 0; }
.patient-cbct-row:hover { background: #f8fcfe; }
.patient-cbct-row.selected { background: #ecfafd; }
.patient-cbct-row .patient-image-select { position: relative; left: auto; top: auto; box-shadow: none; }
.patient-cbct-file-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #e5f7fb; color: #078da9; font-size: 12px; font-weight: 900; }
.patient-cbct-row strong,
.patient-cbct-row small { display: block; }
.patient-cbct-row strong { overflow: hidden; color: #263e57; text-overflow: ellipsis; white-space: nowrap; }
.patient-cbct-row small { margin-top: 4px; color: #8796a7; }
.patient-cbct-row time { color: #718399; font-size: 13px; }
.patient-cbct-row > span { color: #718399; font-size: 13px; }
.patient-cbct-actions { display: flex; gap: 7px; }
.patient-cbct-actions button { height: 32px; padding: 0 11px; }
.patient-cbct-actions .danger-text-btn { color: #d54f61; }

.patient-image-upload-modal { z-index: 1220; padding: clamp(12px, 3vw, 34px); background: rgba(20, 39, 58, .55); backdrop-filter: blur(12px); }
.patient-image-upload-card { overflow: hidden; width: min(760px, calc(100vw - 28px)); max-height: 92vh; border: 1px solid rgba(9, 171, 201, .25); border-radius: 22px; background: #fafdff; box-shadow: 0 34px 90px rgba(18, 46, 70, .34); }
.patient-image-upload-card > .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #d9eaf1; background: linear-gradient(105deg, #e5f9fd, #f7faff); }
.patient-image-upload-card .modal-head span { color: #078fac; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.patient-image-upload-card .modal-head h2 { margin: 4px 0 0; color: #18304a; font-size: 22px; }
.patient-image-upload-card .modal-head p { margin: 5px 0 0; color: #74869a; }
.patient-image-upload-card .modal-head .icon-btn { width: 42px; height: 42px; border: 0; border-radius: 12px; background: #e7f6fa; color: #657a8f; font-size: 22px; }
.patient-image-upload-card form { overflow: auto; max-height: calc(92vh - 96px); padding: 20px 24px 0; }
.patient-image-upload-type { display: grid; gap: 8px; color: #344b63; font-weight: 800; }
.patient-image-upload-type select { height: 48px; padding: 0 13px; border: 1px solid #cadde7; border-radius: 12px; background: #fff; color: #31465e; font: inherit; }
.patient-image-dropzone { display: grid; place-items: center; margin-top: 16px; min-height: 210px; border: 1.5px dashed #9edbe8; border-radius: 16px; background: #f2fbfd; color: #61778c; outline: none; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.patient-image-dropzone:hover,
.patient-image-dropzone:focus,
.patient-image-dropzone.dragging { border-color: #079bb8; background: #e9f9fc; box-shadow: 0 0 0 4px rgba(9, 171, 201, .09); }
.patient-image-drop-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #dff6fa; color: #078fab; font-size: 26px; }
.patient-image-dropzone h3 { margin: 11px 0 0; color: #2c455e; font-size: 17px; }
.patient-image-dropzone p { margin: 5px 0; }
.patient-image-dropzone small { color: #8495a7; }
.patient-image-upload-files { display: grid; gap: 8px; margin-top: 14px; }
.patient-image-upload-files > p { margin: 0; padding: 12px; border-radius: 10px; background: #f4f7f9; color: #8a98a8; text-align: center; }
.patient-image-upload-files article { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; border: 1px solid #dce9ef; border-radius: 11px; background: #fff; }
.patient-image-upload-files strong,
.patient-image-upload-files small { display: block; }
.patient-image-upload-files strong { color: #30475f; }
.patient-image-upload-files small { margin-top: 3px; color: #8a98a8; }
.patient-image-upload-files button { border: 0; background: transparent; color: #d34d5f; font-weight: 750; }
.patient-image-upload-error { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff0f2; color: #ca4051; font-weight: 750; }
.patient-image-upload-progress { position: relative; overflow: hidden; margin-top: 13px; height: 38px; border-radius: 10px; background: #e8f1f5; }
.patient-image-upload-progress span { position: absolute; inset: 0 auto 0 0; width: 0; background: #bcecf4; transition: width .2s ease; }
.patient-image-upload-progress p { position: relative; z-index: 1; margin: 0; padding: 10px 12px; color: #31536b; font-size: 12px; font-weight: 800; }
.patient-image-upload-card form > footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; margin: 18px -24px 0; padding: 15px 24px; border-top: 1px solid #dceaf0; background: rgba(250, 253, 255, .96); }
.patient-image-upload-card form > footer button { min-width: 110px; }

.patient-image-preview-modal { z-index: 1240; padding: 24px; background: rgba(13, 28, 43, .78); backdrop-filter: blur(10px); }
.patient-image-preview-modal > section { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; width: min(1100px, calc(100vw - 36px)); height: min(820px, calc(100vh - 36px)); border-radius: 18px; background: #f6fafc; box-shadow: 0 34px 90px rgba(3, 15, 26, .45); }
.patient-image-preview-modal header,
.patient-image-preview-modal footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: #fff; }
.patient-image-preview-modal header { border-bottom: 1px solid #dbe8ee; }
.patient-image-preview-modal footer { border-top: 1px solid #dbe8ee; }
.patient-image-preview-modal header strong,
.patient-image-preview-modal header span { display: block; }
.patient-image-preview-modal header strong { color: #263c55; }
.patient-image-preview-modal header span { margin-top: 3px; color: #8190a1; font-size: 12px; }
.patient-image-preview-modal header button { width: 38px; height: 38px; border: 0; border-radius: 11px; background: #edf5f8; color: #5d7288; font-size: 22px; }
.patient-image-preview-modal > section > img { width: 100%; height: 100%; object-fit: contain; background: #1e2d3a; }
.patient-image-preview-modal footer small { color: #75879b; }

@media (max-width: 820px) {
  .patient-image-center { margin: 14px 16px 22px; }
  .patient-image-toolbar { align-items: flex-start; flex-direction: column; }
  .patient-image-toolbar > div:last-child { width: 100%; }
  .patient-image-toolbar button { flex: 1; min-width: 0; }
  .patient-image-content { padding: 14px; }
  .patient-cbct-row { grid-template-columns: 30px 44px 1fr auto; }
  .patient-cbct-row time,
  .patient-cbct-row > span { display: none; }
  .patient-cbct-actions { grid-column: 3 / 5; }
  .patient-image-visit { gap: 9px; }
  .patient-image-visit > article > header { align-items: flex-start; flex-direction: column; }
  .patient-image-visit > article > header button { width: 100%; }
  .patient-image-upload-fields { grid-template-columns: 1fr; }
}

.family-empty-illustration {
  position: relative;
  width: 170px;
  height: 120px;
  margin-bottom: 18px;
}

.family-empty-illustration::before {
  content: "";
  position: absolute;
  left: 26px;
  bottom: 14px;
  width: 96px;
  height: 58px;
  background: linear-gradient(145deg, #f3f6f9 0 55%, #e8edf2 55% 100%);
  box-shadow: 18px -12px 0 #f8fafc;
}

.family-empty-illustration::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: 20px;
  width: 18px;
  height: 62px;
  border-radius: 12px 12px 3px 3px;
  background: #18a8c6;
  box-shadow: 0 -18px 0 -5px #8b2f26;
}

.family-empty-illustration span {
  position: absolute;
  left: 68px;
  top: 22px;
  width: 26px;
  height: 20px;
  border-radius: 12px;
  background: #dfe4ea;
  box-shadow: 58px 16px 0 #aab2bf, 98px -14px 0 -5px #eceff3;
}

.patient-record-card header .primary-btn {
  height: 34px;
}

.patient-record-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e4e8ed;
  background: #f8fafc;
}

.patient-record-list {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.patient-record-item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 220px;
  gap: 18px;
  border: 1px solid #dbe8ef;
  background: #fff;
}

.patient-record-item time {
  display: grid;
  place-items: center;
  min-height: 150px;
  border-right: 1px solid #e3edf2;
  color: #08a9c6;
  font-size: 17px;
  font-weight: 800;
}

.patient-record-item > div {
  padding: 18px 0;
}

.patient-record-item strong {
  display: block;
  margin-bottom: 12px;
  color: #202a36;
  font-size: 17px;
}

.patient-record-item p {
  margin: 8px 0;
  color: #4f5965;
  font-size: 15px;
}

.patient-record-item p span {
  color: #202a36;
  font-weight: 800;
}

.patient-record-item aside {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 18px;
  border-left: 1px solid #e3edf2;
  background: #f8fbfd;
}

.patient-record-item aside b {
  color: #202a36;
}

.patient-record-item aside span {
  width: max-content;
  padding: 3px 8px;
  border: 1px solid #ffb7c0;
  color: #ff5f72;
  font-weight: 800;
}

.patient-record-page {
  min-height: calc(100vh - 198px);
  background: #fff;
  border-top: 1px solid #dfe7ef;
}

.patient-record-subtabs {
  display: flex;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid #08a9c6;
  background: #fff;
}

.patient-record-subtabs button {
  min-width: 130px;
  height: 40px;
  margin-left: 18px;
  border: 0;
  border-right: 1px solid #e5e9ee;
  background: transparent;
  color: #303944;
  font-size: 17px;
  font-weight: 800;
}

.patient-record-subtabs button.active {
  min-width: 108px;
  border-radius: 20px;
  background: #08a9c6;
  color: #fff;
}

.patient-record-subtabs span {
  margin-left: auto;
  padding-right: 22px;
  color: #6b7280;
  font-size: 16px;
}

.patient-record-subtabs em {
  color: #ff3b14;
  font-style: italic;
  font-weight: 900;
}

.patient-record-subtabs b {
  margin-left: 12px;
  color: #08a9c6;
}

.patient-record-search-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 120px;
  padding: 24px 28px 18px;
  background: #fff;
}

.record-crosshair {
  position: relative;
  display: block;
  width: 146px;
  height: 58px;
  color: #303944;
}

.record-crosshair::before,
.record-crosshair::after {
  content: "";
  position: absolute;
  background: #08a9c6;
}

.record-crosshair::before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.record-crosshair::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}

.record-crosshair input {
  position: absolute;
  left: calc(50% - 16px);
  top: calc(50% + 2px);
  z-index: 1;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #303944;
  font-size: 18px;
  text-align: center;
}

.patient-record-keyword-input {
  width: 320px;
  height: 48px;
  border: 1px solid #d7dce2;
  border-radius: 0;
}

.patient-record-tooth-query {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  width: min(430px, 100%);
}

.patient-record-tooth-query > span {
  color: #42566a;
  font-size: 14px;
  font-weight: 800;
}

.patient-record-tooth-query > small {
  align-self: center;
  color: #718096;
  font-size: 12px;
}

.patient-record-tooth-query .patient-record-keyword-input {
  grid-column: 1 / -1;
  width: 100%;
  padding: 0 14px;
}

.patient-record-keyword-input.input-error {
  border-color: #d14343 !important;
  box-shadow: 0 0 0 3px rgba(209, 67, 67, 0.12) !important;
}

.patient-record-search-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.patient-record-search-strip #patientRecordToothSearchButton {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
}

.patient-record-tooth-map {
  display: grid;
  width: 200px !important;
  min-width: 200px;
  height: 72px !important;
  min-height: 72px;
}

.patient-record-tooth-map::before {
  right: auto;
  left: 50%;
  top: 50%;
  width: 196px;
  transform: translate(-50%, -50%);
}

.patient-record-tooth-map::after {
  top: 50%;
  bottom: auto;
  left: 50%;
  height: 68px;
  transform: translate(-50%, -50%);
}

.patient-record-tooth-map .quadrant {
  font-size: 15px;
}

.patient-record-tooth-map .tooth-mark-row {
  gap: 4px;
}

.patient-record-tooth-map:focus-visible {
  outline: 3px solid rgba(8, 169, 198, 0.22);
  outline-offset: 4px;
}

.patient-record-tooth-highlight {
  padding: 0 2px;
  border-radius: 3px;
  background: #fff0a8;
  color: #263746;
  font-weight: 900;
}

.patient-record-search-strip .light-btn {
  height: 48px;
  min-width: 96px;
  color: #303944;
  font-weight: 800;
}

.patient-record-topbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 76px;
  padding: 12px 14px;
  background: #eaf1f8;
  border: 1px solid #dbe5ed;
}

.patient-record-filter-title {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #202a36;
  font-size: 18px;
  font-weight: 900;
}

.patient-record-topbar select {
  height: 42px;
  border: 1px solid #d7e1ea;
  background: #fff;
  color: #4f5965;
  font-size: 16px;
  padding: 0 16px;
}

.patient-record-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}

.patient-record-actions .primary-btn,
.patient-record-actions .light-btn {
  height: 38px;
  padding: 0 14px;
  min-width: auto;
  white-space: nowrap;
  font-size: 15px;
}

.patient-record-search-summary {
  padding: 8px 28px 0;
  background: #fff;
  color: #303944;
  font-size: 17px;
}

.patient-record-search-summary b {
  color: #e53935;
  font-weight: 900;
}

.patient-record-rangebar {
  display: flex;
  justify-content: flex-end;
  padding: 18px 0 0;
  background: #fff;
}

.patient-record-rangebar .light-btn {
  margin-right: 16px;
  height: 34px;
  color: #05a9c6;
  border-color: #08a9c6;
}

.patient-record-timeline-shell {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  min-height: 540px;
  padding: 0 14px 36px 0;
  background: #fff;
}

.patient-record-rail {
  position: relative;
  padding-top: 8px;
  color: #8793a0;
}

.patient-record-rail::after {
  content: "";
  position: absolute;
  top: 76px;
  bottom: 0;
  left: 76px;
  width: 2px;
  background: #16aac5;
}

.patient-record-month {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 76px;
  color: #08a9c6;
  font-size: 18px;
  font-weight: 900;
}

.record-calendar-dot {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #08a9c6;
  color: #fff;
  font-size: 19px;
}

.record-calendar-dot.muted {
  background: #8f96a3;
  color: #fff;
}

.record-collapse-btn {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #08a9c6;
  border-radius: 4px;
  color: #08a9c6;
  font-size: 14px;
}

.patient-record-year-marker {
  position: relative;
  z-index: 1;
  margin: 46px 0 0 52px;
  font-size: 18px;
  font-weight: 900;
}

.patient-record-timeline-list {
  display: grid;
  gap: 0;
  padding-top: 84px;
}

.patient-record-year-timeline {
  display: block;
  min-height: 520px;
  padding: 0 14px 36px 0;
}

.patient-record-year-timeline .patient-record-timeline-list {
  padding-top: 0;
}

.patient-record-year-group {
  display: grid;
  gap: 0;
}

.patient-record-year-heading {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  min-height: 112px;
  border-bottom: 1px solid #edf1f5;
}

.patient-record-year-heading .record-calendar-dot {
  justify-self: center;
}

.patient-record-year-toggle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: #8e96a3;
  font: inherit;
  cursor: pointer;
}

.patient-record-year-toggle strong {
  color: #8e96a3;
  font-size: 22px;
  font-weight: 900;
}

.patient-record-year-toggle span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #9aa5b2;
  border-radius: 4px;
  color: #8f98a5;
  font-size: 17px;
  line-height: 1;
}

.patient-record-year-toggle:hover strong,
.patient-record-year-toggle:hover span {
  color: #08a9c6;
  border-color: #08a9c6;
}

.patient-record-year-group.expanded .patient-record-year-heading {
  border-bottom-color: transparent;
}

.patient-record-year-break {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  min-height: 42px;
}

.patient-record-year-break span {
  justify-self: end;
  width: 100%;
  padding-right: 12px;
  border-bottom: 1px solid #9aa8b7;
  color: #8793a0;
  font-size: 18px;
  font-weight: 900;
  text-align: right;
}

.patient-record-year-break::after {
  content: "";
  height: 1px;
  background: #dbe5ed;
}

.patient-record-timeline-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
}

.patient-record-time {
  display: grid;
  align-content: center;
  justify-items: end;
  min-height: 94px;
  padding-right: 10px;
  border-bottom: 1px solid #9aa8b7;
  color: #08a9c6;
  font-weight: 800;
  line-height: 1.35;
}

.patient-record-time strong {
  font-size: 22px;
}

.patient-record-timeline-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px 180px;
  min-height: 94px;
  border: 1px solid #d8e6ee;
  background: #fff;
}

.patient-record-main {
  min-width: 0;
  border-right: 1px solid #d8e6ee;
}

.patient-record-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 10px 14px;
  border-bottom: 1px solid #cce8ef;
  background: #e6f8fb;
}

.patient-record-head strong {
  flex: 1 1 420px;
  min-width: 0;
  color: #3b4551;
  font-size: 17px;
}

.patient-record-sign {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 8px;
  font-weight: 900;
}

.patient-record-sign.unsigned {
  border: 1px solid #ffb7c0;
  color: #ff5f72;
  background: rgba(255, 95, 114, 0.04);
  transform: rotate(-2deg);
}

.patient-record-sign.signed {
  border: 1px solid #9ed9ae;
  color: #239a4b;
  background: #f0fff4;
}

.patient-record-head-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
}

.patient-record-link-btn {
  border: 0;
  background: transparent;
  color: #05a9c6;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.patient-record-link-btn.record-edit-locked,
.patient-record-link-btn.record-edit-locked:disabled {
  color: #94a3b8;
  cursor: not-allowed;
  opacity: 0.82;
}

.patient-record-detail-block {
  padding: 8px 14px 10px;
}

.patient-record-line {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-height: 42px;
  padding: 9px 0;
  border-bottom: 1px solid #dce7ed;
}

.patient-record-line span {
  color: #202a36;
  font-weight: 900;
}

.patient-record-line p {
  margin: 0;
  color: #3e4650;
  line-height: 1.6;
}

.patient-record-section-value {
  display: grid;
  grid-template-columns: minmax(116px, auto) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.patient-record-paired-list { display: grid; gap: 7px; min-width: 0; }
.patient-record-paired-list .patient-record-section-value + .patient-record-section-value {
  border-top: 1px dashed #d9e5eb;
}
.patient-record-section-tooth small {
  display: block;
  margin-bottom: 3px;
  color: #78909f;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.patient-record-section-tooth {
  display: grid;
  place-items: center;
  min-width: 116px;
  min-height: 66px;
  padding: 7px 10px;
  border-right: 1px solid #e2ebf0;
  background: #f8fcfd;
}

.patient-record-section-tooth .patient-treatment-tooth-map {
  margin-left: 0;
}

.patient-record-orthodontic-line {
  padding: 13px 0;
}

.patient-record-orthodontic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 9px;
  min-width: 0;
}

.patient-record-orthodontic-item {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid #dce9ef;
  border-radius: 10px;
  background: #f8fcfd;
}

.patient-record-orthodontic-item small {
  color: #78909f;
  font-size: 11px;
  font-weight: 800;
}

.patient-record-orthodontic-item strong {
  overflow-wrap: anywhere;
  color: #263746;
  font-size: 13px;
  line-height: 1.55;
}

.patient-record-orthodontic-empty {
  color: #94a3b8 !important;
}

.patient-record-orthodontic-plans {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.patient-record-orthodontic-plans section {
  padding: 12px;
  border: 1px solid #d7e7ee;
  border-radius: 12px;
  background: #fbfdfe;
}

.patient-record-orthodontic-plans h5 {
  margin: 0 0 10px;
  color: #079eba;
  font-size: 13px;
}

.patient-record-orthodontic-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  min-width: 0;
}

.patient-record-orthodontic-attachments article {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid #dce9ef;
  border-radius: 10px;
  background: #f8fcfd;
}

.patient-record-orthodontic-attachments img,
.patient-record-orthodontic-pdf {
  width: 72px;
  height: 54px;
  border-radius: 7px;
  object-fit: cover;
}

.patient-record-orthodontic-pdf {
  display: grid;
  place-items: center;
  background: #fff0f0;
  color: #c43f3f;
  font-weight: 900;
}

.patient-record-orthodontic-attachments div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.patient-record-orthodontic-attachments small {
  color: #78909f;
}

.patient-record-orthodontic-attachments strong {
  overflow: hidden;
  color: #263746;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.dark .patient-record-section-tooth,
html[data-theme="dark"] .patient-record-section-tooth {
  border-color: rgba(151, 180, 204, 0.16);
  background: rgba(33, 50, 71, 0.62);
}

html.dark .patient-record-orthodontic-item,
html.dark .patient-record-orthodontic-plans section,
html.dark .patient-record-orthodontic-attachments article,
html[data-theme="dark"] .patient-record-orthodontic-item,
html[data-theme="dark"] .patient-record-orthodontic-plans section,
html[data-theme="dark"] .patient-record-orthodontic-attachments article {
  border-color: rgba(151, 180, 204, 0.16);
  background: rgba(33, 50, 71, 0.62);
}

@media (max-width: 1180px) {
  .patient-record-orthodontic-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

/* WenXiBuddy skin v3: unified ultra-thin white-light glass across product views. */
:root {
  --skin-canvas: #020304;
  --skin-glass: rgba(12, 15, 16, .52);
  --skin-glass-soft: rgba(18, 21, 22, .38);
  --skin-glass-raised: rgba(22, 25, 27, .58);
  --skin-line: rgba(244, 248, 246, .18);
  --skin-line-soft: rgba(244, 248, 246, .10);
  --skin-white: #f7faf8;
  --skin-white-muted: rgba(247, 250, 248, .76);
  --skin-white-dim: rgba(247, 250, 248, .54);
  --skin-highlight: linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015) 42%, transparent 66%);
  --skin-shadow: 0 16px 44px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .10);
}
html,
body,
.app-shell,
.main,
.view,
.view.active {
  color: var(--skin-white) !important;
  background-color: var(--skin-canvas) !important;
}
body,
.main,
.view.active {
  background-image:
    radial-gradient(circle at 14% 5%, rgba(255, 255, 255, .035), transparent 25%),
    radial-gradient(circle at 82% 16%, rgba(255, 255, 255, .018), transparent 28%) !important;
}
.topbar,
.sidebar,
.schedule-tabs {
  color: var(--skin-white) !important;
  border-color: var(--skin-line-soft) !important;
  background-color: rgba(5, 7, 8, .72) !important;
  background-image: var(--skin-highlight) !important;
}

/* Primary surfaces and cards share one thin material instead of opaque grey slabs. */
body :where(
  .glow-card, .report-card, .settings-glow-card, .finance-hub-card,
  .queue-card, .work-card, .mini-stat-card, .visit-board,
  .patients-console-menu, .patients-filter-panel, .patients-querybar,
  .patients-card-list-wrap, .patient-list-card, .patients-family-card,
  .patients-family-summary article, .patient-center-shell,
  .schedule-date-picker, .schedule-board-card, .booking-form-panel,
  .expense-hero, .expense-section-nav, .expense-main-panel > section,
  .mf-header, [class^="mf-"][class$="-card"], [class*=" mf-"][class$="-card"],
  .communication-video-library, .communication-video-category-content,
  .tax-panel, .tax-rule-panel, .tax-summary article,
  .inventory-module-card, .inventory-card, .salary-card,
  .modal-card, [class$="-modal-card"], [class$="-drawer-card"]
) {
  color: var(--skin-white) !important;
  border: 1px solid var(--skin-line) !important;
  background-color: var(--skin-glass) !important;
  background-image: var(--skin-highlight) !important;
  box-shadow: var(--skin-shadow) !important;
  -webkit-backdrop-filter: blur(18px) saturate(108%) !important;
  backdrop-filter: blur(18px) saturate(108%) !important;
}

/* Nested cards stay visibly lighter and thinner than their parent surface. */
body :where(
  .mini-stat-card, .patient-list-card, .global-search-result,
  .expense-kpis article, .expense-summary-view article,
  .patients-family-summary article, .patients-family-card,
  .communication-video-categories button, .tax-source-grid article,
  .inventory-card, .salary-card
) {
  border-color: var(--skin-line-soft) !important;
  background-color: var(--skin-glass-soft) !important;
  background-image:
    radial-gradient(ellipse 70% 42% at 4% 0%, rgba(255, 255, 255, .09), transparent 70%),
    linear-gradient(145deg, rgba(255, 255, 255, .04), transparent 48%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .075), 0 8px 24px rgba(0, 0, 0, .16) !important;
}

/* Remove remaining white page islands from patient, schedule and finance views. */
#patients,
#patients .patients-console,
#patients .patients-list-workspace,
#patients .patients-family-workspace,
#billing,
#billing .performance-layout,
#billing .expense-content,
#billing .expense-workspace,
#monthlyFinance,
#schedule,
.booking-layout,
.booking-left,
.booking-center,
.schedule-board,
.week-head,
.time-board,
.expense-workspace,
.expense-main-panel,
.performance-content {
  color: var(--skin-white) !important;
  background-color: transparent !important;
  background-image: none !important;
}
#schedule .week-head,
#schedule .time-board,
#schedule .booking-toolbar,
.schedule-board-card .week-head,
.schedule-board-card .time-board,
.performance-table-wrap,
.expense-category-detail-wrap,
.dense-table-wrap {
  color: var(--skin-white) !important;
  border-color: var(--skin-line-soft) !important;
  background-color: rgba(7, 9, 10, .54) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 42%) !important;
}

/* White-forward typography with restrained secondary hierarchy. */
.view :where(h1, h2, h3, h4, h5, h6, strong, b, th),
.modal :where(h1, h2, h3, h4, strong, b),
.drawer :where(h1, h2, h3, h4, strong, b) {
  color: var(--skin-white) !important;
  text-shadow: 0 1px 12px rgba(255, 255, 255, .035);
}
.view :where(p, span, small, label, legend, figcaption, td, em),
.modal :where(p, span, small, label, legend),
.drawer :where(p, span, small, label, legend) {
  color: var(--skin-white-muted) !important;
}
.view :where(button, a, [role="button"]) {
  color: var(--skin-white) !important;
}
.view :where(input, textarea, select),
.modal :where(input, textarea, select),
.drawer :where(input, textarea, select) {
  color: var(--skin-white) !important;
  border-color: var(--skin-line) !important;
  background-color: rgba(255, 255, 255, .035) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .04), transparent 48%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065) !important;
}
.view :where(input, textarea)::placeholder,
.modal :where(input, textarea)::placeholder,
.drawer :where(input, textarea)::placeholder {
  color: var(--skin-white-dim) !important;
  opacity: 1;
}

/* Tables use translucent rows and fine white grid lines. */
.view table,
.view thead,
.view tbody,
.view tfoot {
  color: var(--skin-white) !important;
  background: transparent !important;
}
.view table th {
  color: var(--skin-white-muted) !important;
  border-color: var(--skin-line-soft) !important;
  background-color: rgba(255, 255, 255, .045) !important;
}
.view table td {
  color: var(--skin-white) !important;
  border-color: rgba(244, 248, 246, .075) !important;
  background-color: rgba(8, 10, 11, .44) !important;
}
.view table tbody tr:hover td {
  background-color: rgba(255, 255, 255, .065) !important;
}

/* Neutral glass controls; emerald remains a small state accent only. */
.view :where(button, [role="button"]):not(.nav-item) {
  border-color: var(--skin-line) !important;
  background-color: rgba(255, 255, 255, .045) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 50%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .075) !important;
}
.view :where(button, [role="button"]):not(.nav-item):hover {
  border-color: rgba(255, 255, 255, .34) !important;
  background-color: rgba(255, 255, 255, .085) !important;
}
.view :where(.active, [aria-selected="true"]):where(button, [role="button"]) {
  color: #fff !important;
  box-shadow: inset 2px 0 var(--wb-green), inset 0 1px rgba(255, 255, 255, .09) !important;
}

@media (prefers-reduced-transparency: reduce) {
  body :where(.glow-card, .report-card, .patient-list-card, .schedule-date-picker, .schedule-board-card, .expense-hero) {
    background-color: #101314 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Patient charge overview: keep only the operational summaries. */
#patientDetail .patient-charge-overview {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Medical record writing: align the legacy light workspace with the system dark UI. */
#medicalRecord {
  --record-cyan: #19c980;
  --record-cyan-dark: #64e2a8;
  --record-ink: #f7faf8;
  --record-line: rgba(244, 248, 246, .16);
  color: #f4f7f5 !important;
  background-color: #020304 !important;
  background-image:
    radial-gradient(ellipse 44% 20% at 10% 0%, rgba(255, 255, 255, .055), transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .012), transparent 54%) !important;
}
#medicalRecord :where(.record-workspace, .record-page, .record-create-layout, .record-writing-form) {
  color: #f4f7f5 !important;
  background: transparent !important;
}
#medicalRecord :where(
  .record-toolbar, .record-create-top, .record-section-nav,
  .record-form-section, .record-footer
) {
  color: #f4f7f5 !important;
  border-color: rgba(244, 248, 246, .16) !important;
  background-color: rgba(14, 17, 18, .94) !important;
  background-image:
    radial-gradient(ellipse 58% 32% at var(--record-card-x, 5%) var(--record-card-y, 0%), rgba(255, 255, 255, .075), transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 56%) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .06) !important;
}
#medicalRecord :where(
  .record-toolbar, .record-create-top, .record-section-nav,
  .record-form-section, .record-footer
):hover {
  border-color: rgba(244, 248, 246, .24) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .08) !important;
}
#medicalRecord :where(
  .record-filter-title, .record-form-section h3, .record-section-nav strong,
  .record-create-top label, .record-visit-time, .record-visit-time > label,
  .record-type-line, .record-type-line label
) {
  color: #f7faf8 !important;
  -webkit-text-fill-color: currentColor !important;
}
#medicalRecord .record-section-nav a {
  color: rgba(244, 247, 245, .68) !important;
}
#medicalRecord .record-section-nav a:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .07) !important;
  box-shadow: inset 3px 0 #19c980 !important;
}
#medicalRecord :where(select, input[type="text"], input[type="number"], textarea),
#medicalRecord .record-visit-time select,
#medicalRecord .tooth-input-row {
  color: #f4f7f5 !important;
  -webkit-text-fill-color: #f4f7f5 !important;
  border-color: rgba(244, 248, 246, .18) !important;
  background-color: rgba(255, 255, 255, .045) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 58%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05) !important;
}
#medicalRecord :where(select, input, textarea):focus,
#medicalRecord .record-visit-time select:focus {
  outline: none !important;
  border-color: rgba(100, 226, 168, .60) !important;
  background-color: rgba(255, 255, 255, .065) !important;
  box-shadow: 0 0 0 3px rgba(25, 201, 128, .11), inset 0 1px rgba(255, 255, 255, .07) !important;
}
#medicalRecord textarea::placeholder { color: rgba(244, 247, 245, .34) !important; }
#medicalRecord select option { color: #f4f7f5; background: #151819; }
#medicalRecord :where(.record-template-btn, .record-add-tooth, .record-section-tools button, .record-visit-time button, .record-image-add) {
  color: rgba(247, 250, 248, .84) !important;
  border-color: rgba(244, 248, 246, .18) !important;
  background-color: rgba(255, 255, 255, .05) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 60%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06) !important;
}
#medicalRecord :where(.record-template-btn, .record-add-tooth, .record-section-tools button, .record-visit-time button, .record-image-add):hover {
  color: #fff !important;
  border-color: rgba(244, 248, 246, .30) !important;
  background-color: rgba(255, 255, 255, .085) !important;
}
#medicalRecord .record-visit-time small {
  color: #9beac2 !important;
  background: rgba(25, 201, 128, .10) !important;
}
#medicalRecord :where(input[type="radio"], input[type="checkbox"]) { accent-color: #19c980 !important; }

#medicalRecord .quick-phrase-panel,
.quick-phrase-panel {
  color: #f4f7f5 !important;
  border: 1px solid rgba(244, 248, 246, .20) !important;
  border-radius: 16px !important;
  background-color: rgba(15, 18, 19, .985) !important;
  background-image:
    radial-gradient(ellipse 60% 30% at 6% 0%, rgba(255, 255, 255, .09), transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 58%) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
.quick-phrase-tabs {
  border-color: rgba(244, 248, 246, .13) !important;
  background: transparent !important;
}
.quick-phrase-tabs button { color: rgba(244, 247, 245, .58) !important; }
.quick-phrase-tabs button.active {
  color: #fff !important;
  border-bottom-color: #19c980 !important;
}
.quick-phrase-close { color: rgba(247, 250, 248, .76) !important; }
.quick-phrase-group { color: rgba(244, 247, 245, .62) !important; }
.quick-phrase-group > span,
.quick-phrase-group > strong { color: rgba(247, 250, 248, .72) !important; }
.quick-phrase-group button {
  color: rgba(247, 250, 248, .80) !important;
  border: 1px solid rgba(244, 248, 246, .13) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .045) !important;
}
.quick-phrase-group button:hover {
  color: #fff !important;
  border-color: rgba(100, 226, 168, .42) !important;
  background: rgba(25, 201, 128, .12) !important;
}

@media (max-width: 760px) {
  #patientDetail .patient-charge-overview { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-transparency: reduce) {
  #medicalRecord :where(.record-toolbar, .record-create-top, .record-section-nav, .record-form-section, .record-footer),
  .quick-phrase-panel {
    background-image: none !important;
    background-color: #111415 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Doctor performance date panel follows the system dark theme. */
.performance-datetime-popover {
  color: #f7faf8 !important;
  border-color: rgba(244, 248, 246, .22) !important;
  background-color: rgba(18, 21, 22, .96) !important;
  background-image:
    radial-gradient(ellipse 58% 26% at 3% 0%, rgba(255, 255, 255, .10), transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 52%) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .09) !important;
}
.performance-datetime-popover > header strong { color: #fff !important; }
.performance-datetime-popover > header button,
.performance-datetime-popover > footer button {
  color: #fff !important;
  border-color: rgba(244, 248, 246, .16) !important;
  background-color: rgba(255, 255, 255, .055) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06) !important;
}
.performance-datetime-popover > header button:hover,
.performance-datetime-popover > footer button:hover {
  color: #fff !important;
  border-color: rgba(244, 248, 246, .30) !important;
  background-color: rgba(255, 255, 255, .10) !important;
}
.performance-datetime-popover .performance-calendar-week,
.performance-datetime-popover .performance-calendar-week span {
  color: rgba(255, 255, 255, .68) !important;
}
.performance-datetime-popover .performance-calendar-grid button {
  color: rgba(255, 255, 255, .88) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.performance-datetime-popover .performance-calendar-grid button:hover {
  color: #fff !important;
  border-color: rgba(244, 248, 246, .16) !important;
  background: rgba(255, 255, 255, .075) !important;
}
.performance-datetime-popover .performance-calendar-grid button.outside {
  color: rgba(255, 255, 255, .38) !important;
}
.performance-datetime-popover .performance-calendar-grid button.today {
  color: #fff !important;
  border-color: rgba(23, 217, 122, .50) !important;
  box-shadow: inset 0 0 0 1px rgba(23, 217, 122, .16) !important;
}
.performance-datetime-popover .performance-calendar-grid button.selected {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .46) !important;
  background: rgba(23, 217, 122, .72) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .20) !important;
}
.performance-datetime-popover .performance-time-row {
  color: rgba(255, 255, 255, .76) !important;
  background: rgba(255, 255, 255, .045) !important;
}
.performance-datetime-popover .performance-time-row :where(label, b) { color: rgba(255, 255, 255, .76) !important; }
.performance-datetime-popover .performance-time-row select {
  color: #fff !important;
  border-color: rgba(244, 248, 246, .18) !important;
  background: rgba(255, 255, 255, .055) !important;
}
.performance-datetime-popover > footer { border-color: rgba(244, 248, 246, .12) !important; }

@media (prefers-reduced-transparency: reduce) {
  .performance-datetime-popover {
    background-image: none !important;
    background-color: #151819 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Skin v3.1: repair legacy high-specificity light themes and restore contrast. */
#system.view.active,
#inventory.view.active,
#denture.view.active,
#communicationVideos.view.active,
#billing.view.active,
#wageSettlement.wage-view.active {
  color: var(--skin-white) !important;
  background: var(--skin-canvas) !important;
}
#system .settings-console,
#inventory .settings-console,
#denture .settings-console,
#system .settings-layout,
#inventory .settings-layout,
#denture .settings-layout,
#system .settings-content,
#inventory .settings-content,
#denture .settings-content,
#inventory .inventory-module-shell,
#denture .denture-module-shell,
#communicationVideos .communication-video-page {
  color: var(--skin-white) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* One material recipe for the affected navigation, hero, card and panel layers. */
body :where(
  #system .settings-category-card, #system .settings-menu, #system .settings-hero, #system .system-panel,
  #inventory .settings-menu, #inventory .inventory-module-shell > section, #inventory .inventory-module-shell > header,
  #denture .settings-category-card, #denture .settings-menu, #denture .denture-module-shell > section, #denture .denture-module-shell > header,
  #communicationVideos .communication-video-library,
  #communicationVideos .communication-video-category-content,
  #wageSettlement .wage-hero, #wageSettlement .performance-sidebar, #wageSettlement .report-card,
  #billing .performance-hero, #billing .performance-sidebar, #billing .report-card
) {
  color: var(--skin-white) !important;
  border: 1px solid var(--skin-line) !important;
  border-radius: 18px !important;
  background-color: rgba(12, 15, 16, .56) !important;
  background-image:
    radial-gradient(ellipse 68% 38% at 4% 0%, rgba(255, 255, 255, .10), transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .008) 52%, transparent) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .20), inset 0 1px rgba(255, 255, 255, .09) !important;
  -webkit-backdrop-filter: blur(18px) saturate(108%) !important;
  backdrop-filter: blur(18px) saturate(108%) !important;
}

/* Lists and data cards are thinner than their container, never solid white or flat grey. */
body :where(
  #system .settings-submenu, #system .consent-template-list > *, #system [class$="-list"] > article,
  #inventory .inventory-table-wrap, #inventory .inventory-module-table,
  #denture .inventory-table-wrap, #denture .inventory-module-table,
  #communicationVideos .communication-video-categories button,
  #communicationVideos [class*="video-card"],
  #wageSettlement .wage-kpis article,
  #billing .performance-table-wrap
) {
  color: var(--skin-white) !important;
  border-color: var(--skin-line-soft) !important;
  background-color: rgba(19, 22, 23, .40) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 48%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065) !important;
}

/* Dynamic inventory and denture shells frequently inject white blocks. */
#inventory .inventory-module-shell :where(header, section, article, .inventory-table-wrap),
#denture .denture-module-shell :where(header, section, article, .inventory-table-wrap) {
  border-color: var(--skin-line-soft) !important;
  background-color: rgba(14, 17, 18, .44) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 52%) !important;
}
#inventory .inventory-module-shell table,
#denture .denture-module-shell table,
#system .system-panel table,
#wageSettlement table,
#billing table {
  background: transparent !important;
}

/* Explicit type hierarchy: bright titles, readable body, dim metadata only. */
body :where(#system, #inventory, #denture, #communicationVideos, #billing, #wageSettlement)
  :where(h1, h2, h3, h4, strong, b, button, th) {
  color: #f8fbf9 !important;
  opacity: 1 !important;
}
body :where(#system, #inventory, #denture, #communicationVideos, #billing, #wageSettlement)
  :where(p, label, td, .settings-submenu-label) {
  color: rgba(248, 251, 249, .82) !important;
  opacity: 1 !important;
}
body :where(#system, #inventory, #denture, #communicationVideos, #billing, #wageSettlement)
  :where(small, em) {
  color: rgba(248, 251, 249, .62) !important;
  opacity: 1 !important;
}
body :where(#system, #inventory, #denture, #communicationVideos, #billing, #wageSettlement)
  :where(input, textarea, select) {
  color: #f8fbf9 !important;
  border-color: var(--skin-line) !important;
  background: rgba(255, 255, 255, .045) !important;
}
body :where(#system, #inventory, #denture, #communicationVideos, #billing, #wageSettlement)
  :where(input, textarea)::placeholder {
  color: rgba(248, 251, 249, .48) !important;
}

/* Active items use contrast plus a fine emerald locator, not a pale filled tile. */
body :where(#system, #inventory, #denture, #communicationVideos, #billing, #wageSettlement)
  button.active {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .28) !important;
  background-color: rgba(255, 255, 255, .075) !important;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, .075), transparent 58%) !important;
  box-shadow: inset 3px 0 var(--wb-green), inset 0 1px rgba(255, 255, 255, .09) !important;
}

/* Eliminate the remaining light KPI and media caption tiles. */
#wageSettlement .wage-kpis article,
#wageSettlement .wage-table .calculated,
#wageSettlement .performance-table tfoot td,
#communicationVideos [class*="video-card"] :where(footer, figcaption, div:last-child),
#inventory .inventory-module-shell .empty,
#denture .denture-module-shell .empty {
  color: var(--skin-white) !important;
  border-color: var(--skin-line-soft) !important;
  background: rgba(18, 21, 22, .42) !important;
}

/* Keep print-only payslips intentionally white; screen UI remains dark glass. */
@media screen {
  #system .settings-menu,
  #inventory .settings-menu,
  #denture .settings-menu {
    background-color: rgba(10, 13, 14, .58) !important;
  }
}

.patient-record-preview {
  padding: 12px 14px;
  color: #3e4650;
}

.patient-record-preview p {
  margin: 0;
}

.patient-record-foot-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
}

.patient-record-staff,
.patient-record-plan-panel {
  padding: 14px;
  background: #f8fbfd;
}

.patient-record-staff p,
.patient-record-plan-panel p {
  margin: 0 0 12px;
  color: #202a36;
}

.patient-record-staff b {
  color: #202a36;
}

.patient-record-side-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.patient-record-plan-panel {
  border-left: 1px solid #d8e6ee;
}

.patient-record-plan-panel h4 {
  margin: 0 0 18px;
  text-align: center;
  color: #202a36;
}

.patient-record-plan-panel .light-btn {
  min-width: 68px;
  color: #b8c0c9;
}

@media (max-width: 1400px) {
  .patient-record-timeline-card {
    grid-template-columns: minmax(0, 1fr) 230px;
  }

  .patient-record-plan-panel {
    display: none;
  }

  .patient-record-topbar {
    grid-template-columns: auto 180px 220px minmax(0, 1fr);
  }
}

.patient-charge-workspace {
  padding: 0 8px 28px;
  background: #fff;
}

.patient-charge-overview {
  display: grid;
  grid-template-columns: 1.25fr 0.9fr 1.15fr 1fr;
  min-height: 140px;
  border-right: 1px solid #e5e9ee;
  border-bottom: 1px solid #e5e9ee;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04);
}

.patient-charge-overview article {
  padding: 18px 18px 16px;
  border-left: 1px solid #e5e9ee;
}

.patient-charge-overview h2 {
  position: relative;
  margin: 0 0 24px;
  color: #202a36;
  font-size: 18px;
  font-weight: 900;
}

.patient-charge-overview h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -11px;
  width: 40px;
  height: 3px;
  background: #08a9c6;
}

.patient-charge-overview h2 span {
  color: #69717c;
  font-size: 15px;
}

.patient-charge-metrics {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
}

.patient-charge-metrics span {
  display: grid;
  min-width: 110px;
  gap: 8px;
  padding-right: 20px;
  margin-right: 20px;
  border-right: 1px solid #dde3e9;
  color: #3f4854;
  font-size: 15px;
}

.patient-charge-metrics b {
  color: #2a3038;
  font-size: 20px;
  font-weight: 900;
}

.patient-charge-metrics b.danger {
  color: #f00;
}

.patient-charge-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 34px 0 26px;
}

.patient-charge-tabs {
  display: flex;
  align-items: center;
}

.patient-charge-tabs button {
  min-width: 118px;
  height: 44px;
  border: 1px solid #d5dbe2;
  background: #fff;
  color: #55606c;
  font-size: 17px;
  font-weight: 700;
}

.patient-charge-tabs button.active {
  background: linear-gradient(#f1f1f1, #dedede);
  color: #30363d;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.patient-charge-actions > div:last-child {
  display: flex;
  gap: 14px;
}

.patient-charge-actions .light-btn,
.patient-charge-filterbar .light-btn {
  min-width: 120px;
  height: 42px;
  border-radius: 10px;
  background: #fff;
  font-size: 16px;
}

.patient-charge-actions .patient-charge-action-card {
  min-width: 132px;
  min-height: 56px;
  height: auto;
  padding: 10px 18px;
  border: 1px solid #cfe1ea;
  border-radius: 12px;
  background: #fff;
  color: #435164;
  box-shadow: 0 8px 22px rgba(28, 70, 91, 0.07);
  font-weight: 800;
  white-space: nowrap;
}

.patient-charge-actions .patient-charge-action-card:hover,
.patient-charge-actions .patient-charge-action-card:focus-visible {
  border-color: #61c8da;
  background: #f2fcfe;
  color: #078da6;
  box-shadow: 0 10px 26px rgba(8, 169, 198, 0.12);
}

.patient-charge-actions .patient-invoice-info-entry {
  border-color: #e8ca78;
  background: #fffcf3;
  color: #74570f;
}

.patient-charge-actions .patient-refund-entry {
  border-color: #efb7b1;
  background: #fff8f7;
  color: #b24339;
}

.patient-history-print-entry {
  min-width: 210px !important;
  min-height: 50px;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(28, 70, 91, 0.07);
}

.patient-charge-filterbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 12px;
  border-bottom: 3px solid #08a9c6;
}

.patient-charge-checks {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  color: #3f4854;
  font-size: 17px;
  font-weight: 800;
}

.patient-charge-checks strong {
  color: #343b44;
  font-size: 18px;
}

.patient-charge-checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.patient-charge-checks input {
  width: 20px;
  height: 20px;
  accent-color: #1178ef;
}

.patient-charge-checks select {
  min-width: 150px;
  height: 38px;
  border: 1px solid #d8dde3;
  color: #596472;
  font-size: 16px;
}

.patient-charge-ledger {
  border-bottom: 3px solid #08a9c6;
}

.patient-charge-table {
  min-width: 1510px;
}

.patient-charge-table th {
  height: 44px;
  color: #687280;
  border-bottom: 1px solid #08a9c6;
}

.patient-charge-table td {
  height: 58px;
  border-bottom: 1px solid #e3e7ec;
}

.ledger-expand {
  width: 26px;
  height: 22px;
  border: 1px solid #aeb8c4;
  border-radius: 4px;
  background: #fff;
  color: #69717c;
  font-weight: 900;
}

.patient-ledger-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.patient-ledger-actions button {
  min-width: 24px;
  border: 0;
  background: transparent;
  color: #606a76;
  font-size: 20px;
  font-weight: 900;
}

.patient-ledger-actions .patient-print-bill {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border: 1px solid #d4dce5;
  border-radius: 4px;
  background: #fff;
}

.patient-ledger-actions .patient-delete-bill {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-width: 30px;
  height: 30px;
  border: 1px solid #efc8c5;
  border-radius: 4px;
  background: #fff8f7;
  color: #c44940;
  cursor: pointer;
}

.patient-ledger-actions .patient-delete-bill:hover {
  border-color: #dc766e;
  background: #fff0ef;
}

.patient-ledger-actions .patient-delete-bill svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.linked-treatment-plan-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  margin-left: 8px;
  padding: 0 8px;
  border: 1px solid #9bdbe7;
  border-radius: 999px;
  background: #eefcff;
  color: #08a9c6;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.linked-treatment-plan-badge:hover {
  border-color: #08a9c6;
  background: #dff8fd;
}

.prescription-panel {
  min-height: 640px;
  background: #fff;
}

.prescription-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 112px;
  padding: 18px 22px;
  border-bottom: 1px solid #d8dde3;
  background: linear-gradient(135deg, #f9fdff 0%, #f3fbfd 55%, #f8fafc 100%);
}

.prescription-entry-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 240px));
  gap: 12px;
}

.prescription-entry-card {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 72px;
  padding: 13px 16px;
  border: 1px solid #d7e4ea;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #25384b;
  text-align: left;
  box-shadow: 0 7px 20px rgba(31, 55, 76, 0.08);
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.prescription-entry-card:hover {
  transform: translateY(-2px);
  border-color: rgba(8, 169, 198, 0.55);
  background: #fff;
  box-shadow: 0 12px 28px rgba(8, 169, 198, 0.14);
}

.prescription-entry-card:active {
  transform: translateY(0) scale(0.99);
}

.prescription-entry-card:focus-visible {
  outline: 3px solid rgba(8, 169, 198, 0.2);
  outline-offset: 2px;
}

.prescription-entry-card-primary {
  border-color: rgba(8, 169, 198, 0.35);
  background: linear-gradient(135deg, #ffffff 0%, #ebfbff 100%);
}

.prescription-entry-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #e7f8fc;
  color: #079bb8;
  font-size: 21px;
  font-weight: 900;
}

.prescription-entry-card-primary .prescription-entry-icon {
  background: linear-gradient(135deg, #13b7d4, #0797b5);
  color: #fff;
  box-shadow: 0 6px 14px rgba(8, 169, 198, 0.24);
}

.prescription-entry-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.prescription-entry-copy strong {
  color: #18324a;
  font-size: 16px;
  line-height: 1.2;
}

.prescription-entry-copy small {
  color: #7b8a99;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.prescription-table-wrap {
  overflow: auto;
}

.prescription-table {
  min-width: 1500px;
  width: 100%;
  border-collapse: collapse;
}

.prescription-table th {
  height: 46px;
  padding: 0 16px;
  border-right: 1px solid #d8dde3;
  border-bottom: 1px solid #d8dde3;
  background: #f7f9fb;
  color: #1f2937;
  font-weight: 900;
  text-align: left;
}

.prescription-table td {
  min-height: 56px;
  padding: 12px 16px;
  border-bottom: 1px solid #edf1f4;
  color: #374151;
}

.prescription-table tbody tr:hover {
  background: #f8fbfc;
}

.prescription-table tr.void {
  color: #9aa4b2;
  background: #fbfbfb;
}

.prescription-empty {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 430px;
  color: #7d8896;
  font-size: 16px;
}

.prescription-empty-art {
  position: relative;
  width: 132px;
  height: 100px;
  margin-bottom: 16px;
}

.prescription-empty-art .box {
  position: absolute;
  left: 22px;
  bottom: 12px;
  width: 72px;
  height: 44px;
  background: linear-gradient(145deg, #eef2f6, #fff);
  clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%);
}

.prescription-empty-art .doctor {
  position: absolute;
  right: 20px;
  bottom: 8px;
  width: 20px;
  height: 48px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(#fff 0 58%, #7bd1df 58%);
  box-shadow: 0 -10px 0 -4px #dca27d;
}

.prescription-empty-art::before,
.prescription-empty-art::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: #eef2f6;
}

.prescription-empty-art::before {
  left: 8px;
  top: 22px;
  width: 30px;
  height: 14px;
}

.prescription-empty-art::after {
  right: 44px;
  top: 12px;
  width: 22px;
  height: 12px;
}

.prescription-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prescription-row-actions button {
  height: 28px;
  border: 1px solid #d4dce5;
  border-radius: 4px;
  background: #fff;
  color: #08a9c6;
  font-weight: 800;
}

.prescription-sign {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 13px;
  font-weight: 900;
}

.prescription-sign.signed {
  background: #e7f9f5;
  color: #078a78;
}

.prescription-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid #edf1f4;
}

.prescription-modal,
.drug-maintenance-modal {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: grid;
  align-items: stretch;
  justify-items: stretch;
  background: rgba(255, 255, 255, 0.96);
}

.prescription-modal {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 24px 28px 24px 0;
  background: rgba(15, 23, 42, 0.32);
}

.prescription-modal-card,
.drug-maintenance-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: #fff;
  color: #1f2937;
}

.prescription-modal-card {
  width: min(1520px, calc(100vw - 520px));
  min-width: 1080px;
  height: calc(100vh - 48px);
  border-radius: 4px;
  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.26);
  overflow: hidden;
}

.prescription-modal-card > header,
.drug-maintenance-card > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 58px;
  padding: 0 8px;
  border-bottom: 1px solid #d8dde3;
}

.prescription-modal-card h2,
.drug-maintenance-card h2 {
  margin: 0;
  font-size: 18px;
}

.prescription-modal-card .icon-btn,
.drug-maintenance-card .icon-btn {
  width: 38px;
  min-width: 38px;
  border: 0;
  background: transparent;
  color: #606b78;
  font-size: 30px;
}

.prescription-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 10px 18px;
  padding: 10px 8px 4px;
}

.prescription-form-grid label,
.prescription-note-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606b78;
  font-weight: 800;
}

.prescription-form-grid .wide {
  grid-column: 1 / -1;
}

.prescription-form-grid .prescription-diagnosis-field {
  grid-column: 1 / -1;
  width: max-content;
  min-width: min(360px, 100%);
}

.prescription-form-grid input,
.prescription-form-grid select,
.prescription-note-line input,
.prescription-drug-table input,
.drug-maintenance-table input {
  width: 100%;
  height: 42px;
  border: 1px solid #d4dce5;
  border-radius: 4px;
  background: #fff;
  color: #1f2937;
  font-size: 15px;
  font-weight: 700;
}

.prescription-form-grid label > span {
  flex: 0 0 auto;
}

.prescription-diagnosis-field {
  align-items: stretch;
}

.prescription-diagnosis-glass {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 22px;
  width: max-content;
  max-width: none;
  min-height: 56px;
  padding: 10px 22px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34));
  color: #1f2937;
  font-size: 17px;
  font-weight: 900;
  text-align: left;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -10px 18px rgba(226, 232, 240, 0.45),
    0 12px 28px rgba(15, 23, 42, 0.12);
  backdrop-filter: blur(18px) saturate(1.25);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.prescription-diagnosis-glass:hover {
  border-color: rgba(8, 169, 198, 0.42);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 -10px 18px rgba(226, 232, 240, 0.5),
    0 16px 34px rgba(15, 23, 42, 0.16);
}

.prescription-diagnosis-glass:active {
  transform: translateY(1px) scale(0.995);
}

.prescription-diagnosis-glass span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prescription-diagnosis-display-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
}

.prescription-diagnosis-display-row,
.prescription-diagnosis-display-row > span {
  overflow: visible;
  text-overflow: clip;
}

.prescription-diagnosis-glass .placeholder {
  color: #5f6874;
}

.prescription-diagnosis-mini-tooth {
  position: relative;
  flex: 0 0 98px;
  width: 98px;
  height: 42px;
  background:
    linear-gradient(#08a9c6, #08a9c6) center / 98px 1px no-repeat,
    linear-gradient(#08a9c6, #08a9c6) center / 1px 42px no-repeat;
}

.prescription-diagnosis-mini-tooth b {
  position: absolute;
  display: none;
  max-width: 42px;
  overflow: hidden;
  color: #08a9c6;
  font-size: 14px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
  white-space: nowrap;
}

.prescription-diagnosis-mini-tooth.filled b:not(:empty) {
  display: block;
}

.prescription-diagnosis-mini-tooth .q1 {
  left: 4px;
  top: 1px;
}

.prescription-diagnosis-mini-tooth .q2 {
  right: 4px;
  top: 1px;
}

.prescription-diagnosis-mini-tooth .q3 {
  right: 4px;
  bottom: 1px;
}

.prescription-diagnosis-mini-tooth .q4 {
  left: 4px;
  bottom: 1px;
}

.prescription-drug-table-wrap {
  position: relative;
  flex: 1;
  min-height: 380px;
  margin-top: 4px;
  overflow: auto;
  border-top: 1px solid #d8dde3;
  border-bottom: 1px solid #d8dde3;
}

.prescription-drug-table {
  min-width: 1900px;
  width: 100%;
  border-collapse: collapse;
}

.prescription-drug-table th {
  height: 42px;
  padding: 0 8px;
  border-right: 1px solid #d8dde3;
  border-bottom: 1px solid #d8dde3;
  background: #f4f6f8;
  text-align: left;
  font-weight: 900;
}

.prescription-drug-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #edf1f4;
}

.prescription-drug-name-cell {
  position: relative;
  min-width: 300px;
}

.prescription-option-cell {
  position: relative;
  min-width: 150px;
}

.prescription-duration-cell,
.prescription-unit-cell {
  position: relative;
  min-width: 150px;
}

.prescription-duration-cell input,
.prescription-unit-cell input {
  padding-right: 34px;
}

.prescription-duration-cell span,
.prescription-unit-cell span {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #64748b;
  font-size: 15px;
  font-weight: 900;
  pointer-events: none;
}

.prescription-option-panel {
  position: absolute;
  top: 48px;
  left: 8px;
  z-index: 5;
  width: 260px;
  max-height: 330px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
}

.prescription-option-list {
  max-height: 270px;
  overflow: auto;
  padding: 8px 0;
}

.prescription-option-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 8px 0 14px;
}

.prescription-option-item:hover {
  background: #f8fbfc;
}

.prescription-option-item > button {
  min-width: 0;
  height: 42px;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 15px;
  font-weight: 900;
  text-align: left;
}

.prescription-option-item span {
  display: flex;
  gap: 4px;
}

.prescription-option-item span button {
  width: 28px;
  height: 28px;
  border: 1px solid #d8e1ea;
  border-radius: 6px;
  background: #fff;
  color: #64748b;
  font-size: 16px;
  font-weight: 900;
}

.prescription-option-item span button:hover {
  border-color: #08a9c6;
  color: #08a9c6;
}

.prescription-option-panel p {
  margin: 0;
  padding: 12px 16px;
  color: #94a3b8;
  font-weight: 800;
}

.prescription-option-add {
  width: 100%;
  height: 42px;
  border: 0;
  border-top: 1px solid #edf1f4;
  background: #f8fbfc;
  color: #08a9c6;
  font-size: 15px;
  font-weight: 900;
}

.prescription-option-add:hover {
  background: #eefcff;
}

.prescription-option-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 10150;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.38);
}

.prescription-option-confirm-card {
  width: min(430px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.92);
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.26);
}

.prescription-option-confirm-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 0 18px;
  border-bottom: 1px solid #edf1f4;
}

.prescription-option-confirm-card h2 {
  margin: 0;
  font-size: 20px;
}

.prescription-option-confirm-card .icon-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 24px;
  font-weight: 900;
}

.prescription-option-confirm-card .icon-btn:hover {
  background: #e8eef5;
  color: #1f2937;
}

.prescription-option-confirm-body {
  padding: 22px 22px 20px;
}

.prescription-option-confirm-body p {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
}

.prescription-option-confirm-body span {
  color: #64748b;
  font-size: 14px;
  font-weight: 700;
}

.prescription-option-confirm-card footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid #edf1f4;
}

.prescription-option-confirm-card .light-btn,
.prescription-option-confirm-card .danger-btn {
  min-width: 96px;
  height: 42px;
  border-radius: 8px;
  font-weight: 900;
}

.prescription-option-confirm-card .danger-btn {
  border: 1px solid #ef4444;
  background: #ef4444;
  color: #fff;
}

.prescription-option-confirm-card .danger-btn:hover {
  border-color: #dc2626;
  background: #dc2626;
}

.prescription-drug-suggest {
  position: absolute;
  top: 48px;
  left: 8px;
  right: 8px;
  z-index: 3;
  max-height: 260px;
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

.prescription-drug-suggest.hidden {
  display: none;
}

.prescription-drug-suggest button {
  display: grid;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-bottom: 1px solid #edf1f4;
  background: #fff;
  color: #1f2937;
  text-align: left;
}

.prescription-drug-suggest button:hover {
  background: #eefcff;
}

.prescription-drug-suggest span,
.prescription-drug-suggest p {
  color: #64748b;
  font-size: 13px;
}

.prescription-row-amount {
  min-width: 92px;
  font-weight: 900;
  text-align: right;
}

.prescription-add-row {
  position: sticky;
  left: 8px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #08a9c6;
  font-size: 30px;
  font-weight: 900;
}

.prescription-table-total {
  position: sticky;
  right: 8px;
  bottom: 10px;
  float: right;
  color: #64748b;
  font-weight: 900;
}

.prescription-note-line {
  padding: 0 8px;
}

.prescription-note-line span {
  flex: 0 0 auto;
}

.prescription-modal-card > footer,
.drug-maintenance-card > footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  min-height: 78px;
  padding: 0 10px;
}

.prescription-modal-card .primary-btn.dark {
  background: #0582b5;
}

@media (max-width: 1500px) {
  .prescription-modal {
    padding: 18px;
  }

  .prescription-modal-card {
    width: calc(100vw - 220px);
    min-width: 980px;
    height: calc(100vh - 36px);
  }
}

@media (max-width: 1180px) {
  .prescription-modal {
    padding: 12px;
  }

  .prescription-modal-card {
    width: calc(100vw - 24px);
    min-width: 0;
    height: calc(100vh - 24px);
  }
}

.drug-maintenance-card > header span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-weight: 800;
}

.drug-maintenance-actions {
  padding: 12px 18px;
}

.drug-maintenance-table-wrap {
  flex: 1;
  overflow: auto;
  padding: 0 18px 18px;
}

.drug-maintenance-table {
  min-width: 1280px;
  width: 100%;
  border-collapse: collapse;
}

.drug-maintenance-table th,
.drug-maintenance-table td {
  padding: 8px;
  border: 1px solid #dfe5ec;
  text-align: left;
}

/* Drug maintenance stays inside the patient page as a system card dialog. */
.drug-maintenance-modal.modal {
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(15, 31, 45, 0.48);
  backdrop-filter: blur(5px);
}

.drug-maintenance-modal .drug-maintenance-card {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100vw - 56px));
  height: min(760px, calc(100vh - 56px));
  max-height: calc(100vh - 56px);
  border: 1px solid rgba(199, 224, 233, 0.95);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 31, 45, 0.3);
  overflow: hidden;
  outline: 0;
}

.drug-maintenance-backdrop {
  position: absolute;
  inset: 0;
}

.drug-maintenance-modal .drug-maintenance-card > header {
  flex: 0 0 auto;
  min-height: 78px;
  height: auto;
  padding: 0 22px 0 26px;
  border-bottom: 1px solid #d7e8ee;
  background: linear-gradient(135deg, #eafcff 0%, #f8fdff 58%, #f7f9fc 100%);
}

.drug-maintenance-modal .drug-maintenance-card h2 {
  color: #17344e;
  font-size: 22px;
}

.drug-maintenance-modal .drug-maintenance-card > header span {
  color: #708498;
  font-size: 13px;
}

.drug-maintenance-modal .drug-maintenance-card .icon-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 1px solid #d7e8ee;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  color: #62768a;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.drug-maintenance-modal .drug-maintenance-actions {
  flex: 0 0 auto;
  padding: 16px 22px 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.drug-index-summary {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: #365064;
}

.drug-index-summary strong {
  color: #0582b5;
  font-size: 22px;
}

.drug-index-summary span { font-weight: 800; }
.drug-index-summary small { margin-left: 8px; color: #71869a; }

.drug-maintenance-modal .drug-maintenance-table-wrap {
  min-height: 0;
  padding: 0 22px 18px;
  scrollbar-gutter: stable;
}

.drug-maintenance-modal .drug-maintenance-table {
  min-width: 1360px;
}

.drug-index-name {
  min-width: 150px;
  display: grid;
  gap: 4px;
}

.drug-index-name strong { color: #1f3448; }
.drug-index-name span { color: #0582b5; font-size: 11px; font-weight: 800; }

.drug-index-value {
  display: block;
  min-width: 94px;
  color: #52687b;
  font-size: 13px;
}

.drug-stock-value {
  display: inline-grid;
  min-width: 42px;
  height: 28px;
  place-items: center;
  border-radius: 8px;
  background: #edf8fb;
  color: #087da8;
  font-weight: 900;
}

.drug-index-empty {
  height: 220px;
  text-align: center !important;
  color: #6d8193;
}

.drug-index-empty strong,
.drug-index-empty span { display: block; }
.drug-index-empty strong { margin-bottom: 8px; color: #29455c; font-size: 16px; }

.drug-maintenance-modal .drug-maintenance-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f2f8fa;
  color: #324a5f;
  font-size: 13px;
  white-space: nowrap;
}

.drug-maintenance-modal .drug-maintenance-table td {
  background: #fff;
}

.drug-maintenance-modal .drug-maintenance-table input {
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
}

.drug-maintenance-modal .drug-maintenance-card > footer {
  flex: 0 0 auto;
  min-height: 72px;
  padding: 12px 22px;
  border-top: 1px solid #e1ebef;
  background: #f8fbfc;
}

.drug-maintenance-modal .drug-maintenance-card > footer .light-btn,
.drug-maintenance-modal .drug-maintenance-card > footer .primary-btn {
  min-width: 96px;
}

@media (max-width: 760px) {
  .prescription-toolbar {
    justify-content: stretch;
    padding: 14px;
  }

  .prescription-entry-cards {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .drug-maintenance-modal.modal {
    padding: 12px;
  }

  .drug-maintenance-modal .drug-maintenance-card {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    max-height: calc(100vh - 24px);
    border-radius: 14px;
  }
}

.prescription-diagnosis-modal {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.42);
}

.prescription-diagnosis-card {
  width: min(920px, calc(100vw - 40px));
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.3);
  overflow: visible;
}

.prescription-diagnosis-card header,
.prescription-diagnosis-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding: 0 18px;
  border-bottom: 1px solid #d8dde3;
}

.prescription-diagnosis-card footer {
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #d8dde3;
  border-bottom: 0;
}

.prescription-diagnosis-card h2 {
  margin: 0;
  font-size: 22px;
}

.prescription-diagnosis-card .icon-btn {
  width: 42px;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 34px;
}

.prescription-diagnosis-rows {
  display: grid;
  gap: 0;
  max-height: min(52vh, 460px);
  overflow: auto;
}

.prescription-diagnosis-body {
  display: grid;
  grid-template-columns: 280px minmax(260px, 1fr) 48px 48px;
  gap: 26px;
  align-items: center;
  min-height: 126px;
  padding: 24px 40px 10px;
  border-bottom: 1px solid #edf1f4;
}

.diagnosis-tooth-picker {
  position: relative;
  display: grid;
  place-items: center;
  height: 64px;
  width: 260px;
}

.diagnosis-tooth-picker .tooth-display {
  position: absolute;
  z-index: 1;
  display: none;
  max-width: 150px;
  min-height: 24px;
  line-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: transparent;
  color: #08a9c6;
  font-size: 16px;
  font-weight: 900;
  text-align: center;
  overflow: visible;
  white-space: nowrap;
  box-shadow: none;
  pointer-events: none;
}

.diagnosis-tooth-picker .tooth-display.filled {
  display: block;
}

.diagnosis-tooth-picker .tooth-display.q1 {
  left: 22px;
  top: 4px;
}

.diagnosis-tooth-picker .tooth-display.q2 {
  right: 22px;
  top: 4px;
}

.diagnosis-tooth-picker .tooth-display.q3 {
  right: 22px;
  bottom: 4px;
}

.diagnosis-tooth-picker .tooth-display.q4 {
  left: 22px;
  bottom: 4px;
}

.diagnosis-tooth-picker input {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  color: transparent;
  caret-color: #08a9c6;
}

.diagnosis-tooth-open {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.tooth-cross {
  width: 230px;
  height: 64px;
  background:
    linear-gradient(#08a9c6, #08a9c6) center / 230px 1px no-repeat,
    linear-gradient(#08a9c6, #08a9c6) center / 1px 64px no-repeat;
}

.diagnosis-search-shell {
  position: relative;
  align-self: start;
  min-height: 52px;
  border: 1px solid #d4dce5;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}

.diagnosis-search-shell:focus-within {
  border-color: #08a9c6;
  box-shadow: 0 0 0 3px rgba(8, 169, 198, 0.08);
}

.diagnosis-search-input-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 10px;
}

.diagnosis-search-shell input {
  flex: 1 1 220px;
  min-width: 180px;
  height: 38px;
  border: 0;
  border-radius: 0;
  color: #1f2937;
  font-size: 18px;
  font-weight: 800;
  padding: 0;
}

.diagnosis-search-shell input:focus {
  outline: none;
}

.diagnosis-suggestions {
  position: static;
  max-height: 260px;
  overflow: auto;
  border-top: 1px solid #eef2f6;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.diagnosis-suggestions.hidden {
  display: none;
}

.diagnosis-suggestions button {
  display: block;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  background: #fff;
  color: #1f2937;
  font-size: 17px;
  font-weight: 800;
  text-align: left;
}

.diagnosis-suggestions button:hover {
  background: #f2f4f6;
}

.diagnosis-suggestions p {
  padding: 14px 18px;
  color: #7d8896;
}

.diagnosis-plus,
.diagnosis-minus {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #1f2937;
  font-size: 36px;
  font-weight: 300;
}

.diagnosis-tooth-popover {
  margin: 0 0 14px;
  padding: 18px 14px 22px;
  border-top: 1px solid #d8dde3;
  border-bottom: 1px solid #d8dde3;
  background: #fff;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.18);
}

.diagnosis-tooth-popover.hidden {
  display: none;
}

.diagnosis-tooth-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}

.diagnosis-tooth-presets button {
  height: 38px;
  min-width: 72px;
  border: 1px solid #dfe5ec;
  background: #fff;
  color: #4b5563;
  font-size: 18px;
  font-weight: 800;
}

.diagnosis-tooth-presets button:last-child {
  margin-left: auto;
  min-width: 38px;
  border: 0;
  color: #7d8896;
  font-size: 34px;
}

.diagnosis-tooth-board {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px 28px;
  padding: 0 16px;
}

.diagnosis-tooth-board::before,
.diagnosis-tooth-board::after {
  content: "";
  position: absolute;
  background: #9aa4b2;
}

.diagnosis-tooth-board::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.diagnosis-tooth-board::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}

.tooth-quadrant {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.tooth-quadrant.left {
  justify-items: start;
}

.tooth-row {
  display: grid;
  grid-template-columns: repeat(8, 46px);
  gap: 8px;
}

.tooth-row.milk {
  grid-template-columns: repeat(5, 46px);
}

.tooth-row button {
  height: 42px;
  border: 1px solid #dfe5ec;
  background: #fff;
  color: #4b5563;
  font-size: 20px;
  font-weight: 800;
}

.tooth-row button:hover {
  border-color: #08a9c6;
  color: #08a9c6;
}

.tooth-board-right,
.tooth-board-left {
  position: absolute;
  top: calc(50% - 14px);
  background: #fff;
  color: #7d8896;
  font-size: 20px;
  font-weight: 800;
}

.tooth-board-right {
  left: 23%;
}

.tooth-board-left {
  right: 23%;
}

.diagnosis-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
  padding: 0 40px 20px;
}

.diagnosis-search-shell .diagnosis-selected-list {
  flex: 0 1 auto;
  min-height: 0;
  padding: 0;
}

.diagnosis-selected-list span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #9bdbe7;
  border-radius: 999px;
  background: #eefcff;
  color: #087f96;
  font-weight: 900;
}

.diagnosis-selected-list button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: rgba(8, 169, 198, 0.14);
  color: #087f96;
  font-weight: 900;
}

.prescription-diagnosis-row.disabled {
  opacity: 0.5;
}

/* Template-style primary sidebar overrides */
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr !important;
  }

  .sidebar-mobile-toggle {
    position: fixed !important;
    top: 14px !important;
    left: 14px !important;
    z-index: 121 !important;
    display: grid !important;
  }

  .sidebar-mobile-backdrop {
    display: block !important;
  }

  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 120 !important;
    width: min(82vw, 300px) !important;
    height: 100dvh !important;
    padding: 18px 16px !important;
    transform: translateX(-104%) !important;
    transition: transform 0.24s ease !important;
  }

  body.sidebar-mobile-open .sidebar {
    transform: translateX(0) !important;
  }

  body.sidebar-mobile-open .sidebar-mobile-backdrop {
    pointer-events: auto !important;
    background: rgba(15, 23, 42, 0.46) !important;
  }

  .sidebar .clinic-card {
    display: block !important;
    margin-top: auto !important;
  }

  .settings-layout {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 14px 14px;
  }

  .settings-category-cards {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 14px 0;
  }

  .settings-category-card {
    min-height: 96px;
    padding: 18px;
  }

  .settings-menu {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .settings-card-grid {
    grid-template-columns: 1fr;
  }

  .supplier-form-grid,
  .supplier-upload-grid,
  .supplier-license-grid {
    grid-template-columns: 1fr;
  }

  .settings-content {
    padding: 0;
  }

  .settings-hero {
    padding: 16px;
  }

  .settings-content .settings-glow-card {
    padding: 16px;
    border-radius: 16px;
  }
}

.denture-record-form-card .supplier-form-actions .denture-record-save-btn,
.denture-record-form-card .supplier-form-actions button[data-save-denture-record-form] {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 112px !important;
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #08a9c6 !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  box-shadow: 0 16px 34px rgba(8, 169, 198, 0.22) !important;
}

.denture-record-form-card .supplier-form-actions .denture-record-save-btn span,
.denture-record-form-card .supplier-form-actions button[data-save-denture-record-form] span {
  display: inline !important;
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.denture-record-form-card .supplier-form-actions .denture-record-save-btn:hover,
.denture-record-form-card .supplier-form-actions button[data-save-denture-record-form]:hover {
  background: #0796b0 !important;
  color: #fff !important;
}

.denture-record-form-card .denture-record-upload-box {
  width: min(460px, 100%) !important;
  min-height: 96px !important;
  max-height: 132px !important;
  margin: 0 auto !important;
  padding: 10px 12px !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  align-items: center !important;
}

.denture-record-form-card .denture-record-upload-field {
  width: 100% !important;
  justify-items: center !important;
}

.denture-record-form-card .denture-record-upload-field > span {
  justify-self: stretch !important;
}

.denture-record-form-card .denture-record-upload-trigger {
  min-height: 72px !important;
}

.denture-record-form-card .denture-record-upload-preview {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 72px !important;
  overflow-x: auto !important;
}

.denture-record-form-card .denture-record-image-thumb {
  display: grid !important;
  place-items: center !important;
  width: 86px !important;
  height: 56px !important;
  overflow: hidden !important;
  border: 1px solid #d5e0ea !important;
  border-radius: 10px !important;
  padding: 0 !important;
  background: #fff !important;
  cursor: zoom-in !important;
}

.denture-record-form-card .denture-record-image-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  background: #fff !important;
}

.denture-record-form-card .denture-record-upload-delete-preview {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: min(460px, 100%) !important;
  margin: 8px auto 0 !important;
}

.denture-record-form-card .denture-record-upload-delete-preview .light-btn {
  min-width: 72px !important;
  width: 72px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

.denture-record-form-card .denture-record-image-upload-grid {
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  align-items: start !important;
}

.denture-record-form-card .denture-record-image-upload {
  width: 100% !important;
  justify-items: stretch !important;
}

.denture-record-form-card .denture-record-image-upload > span {
  justify-self: center !important;
  text-align: center !important;
}

.denture-record-form-card .denture-record-upload-box {
  display: flex !important;
  width: 100% !important;
  min-height: 216px !important;
  max-height: none !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 18px 14px !important;
}

.denture-record-form-card .denture-record-upload-trigger {
  min-height: auto !important;
}

.denture-record-form-card .denture-record-upload-preview {
  justify-content: center !important;
  flex-wrap: nowrap !important;
  min-height: 96px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: thin !important;
}

.denture-record-form-card .denture-record-upload-preview .inbound-upload-thumb {
  flex: 0 0 150px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 6px !important;
}

.denture-record-form-card .denture-record-upload-preview .inbound-upload-thumb > button:first-child {
  width: 150px !important;
  height: 96px !important;
  border-radius: 10px !important;
}

.denture-record-form-card .denture-record-upload-preview .inbound-upload-thumb img {
  object-fit: contain !important;
  background: #fff !important;
}

.denture-record-form-card .denture-record-upload-delete-preview {
  width: 100% !important;
  min-height: 38px !important;
  justify-content: center !important;
  gap: 12px !important;
  margin: 10px 0 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin !important;
}

.denture-record-form-card .denture-record-upload-delete-preview .light-btn {
  flex: 0 0 150px !important;
  width: 150px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

/* Clinic print configuration */
.settings-content .print-config-panel {
  width: min(100%, 1500px);
  min-height: 680px;
  padding: 0;
}

.print-config-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid #e3e9ef;
}

.print-config-heading h2,
.print-config-heading p {
  margin: 0;
}

.print-config-heading p {
  margin-top: 6px;
  color: #718096;
  font-size: 14px;
}

.print-config-workspace {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 600px;
}

.print-config-tree {
  padding: 16px 12px 24px;
  overflow-y: auto;
  border-right: 1px solid #e3e9ef;
  background: rgba(248, 250, 252, 0.78);
}

.print-config-tree-group + .print-config-tree-group {
  margin-top: 8px;
}

.print-config-tree-title {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #273444;
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
}

.print-config-tree-title::before {
  content: "▾";
  width: 14px;
  color: #718096;
}

.print-config-tree-group.collapsed .print-config-tree-title::before {
  content: "▸";
}

.print-config-tree-items {
  display: grid;
  gap: 2px;
  padding: 2px 0 6px 22px;
}

.print-config-tree-group.collapsed .print-config-tree-items {
  display: none;
}

.print-config-tree-item {
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #566273;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.print-config-tree-item:hover,
.print-config-tree-item.active {
  background: #e8f6fa;
  color: #078da8;
}

.print-config-tree-item.active {
  box-shadow: inset 3px 0 0 #08a9c6;
}

.print-config-main {
  min-width: 0;
  padding: 18px;
}

.print-config-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 12px;
  align-items: end;
  padding-bottom: 18px;
}

.print-config-filters label,
.print-config-form label,
.print-config-template-field {
  display: grid;
  gap: 7px;
  color: #344052;
  font-size: 13px;
  font-weight: 800;
}

.print-config-filters select,
.print-config-filters input,
.print-config-form select {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid #d6e0e9;
  border-radius: 6px;
  background: #fff;
  color: #2f3a49;
  font: inherit;
}

.print-config-filters input[readonly] {
  background: #f7f9fb;
}

.print-config-filter-actions,
.print-config-form-actions {
  display: flex;
  gap: 8px;
}

.print-config-filter-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.print-config-table-wrap {
  overflow-x: auto;
  border: 1px solid #e0e6ed;
  border-radius: 8px;
}

.print-config-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  table-layout: fixed;
}

.print-config-table th,
.print-config-table td {
  padding: 13px 12px;
  border-bottom: 1px solid #e7ecf1;
  color: #3c4757;
  font-size: 13px;
  text-align: left;
  vertical-align: middle;
}

.print-config-table th {
  background: #f7f9fb;
  color: #596576;
  font-weight: 900;
}

.print-config-table tr:last-child td {
  border-bottom: 0;
}

.print-config-table th:nth-child(1) { width: 130px; }
.print-config-table th:nth-child(2) { width: 150px; }
.print-config-table th:nth-child(3) { width: 190px; }
.print-config-table th:nth-child(4) { width: 105px; }
.print-config-table th:nth-child(6) { width: 100px; }
.print-config-table th:nth-child(7) { width: 150px; }

.print-config-device small {
  display: block;
  margin-top: 3px;
  color: #8a95a4;
}

.print-config-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #667386;
  font-weight: 800;
}

.print-config-state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a8b1bd;
}

.print-config-state.enabled {
  color: #087f5b;
}

.print-config-state.enabled::before {
  background: #12b886;
}

.print-config-row-actions {
  display: flex;
  gap: 8px;
}

.print-config-empty {
  padding: 64px 20px !important;
  color: #8a95a4 !important;
  text-align: center !important;
}

.print-config-modal {
  z-index: 90;
}

.print-config-modal-card {
  width: min(680px, calc(100vw - 32px));
  border-radius: 10px;
}

.print-config-modal-card .modal-head {
  align-items: flex-start;
}

.print-config-modal-card .modal-head h2,
.print-config-modal-card .modal-head p {
  margin: 0;
}

.print-config-modal-card .modal-head p {
  margin-top: 5px;
  color: #788597;
  font-size: 13px;
}

.print-config-form {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.print-config-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.print-config-auto-field {
  grid-template-columns: auto 1fr;
  align-items: start;
  padding: 14px;
  border: 1px solid #dce5ed;
  border-radius: 8px;
  background: #f8fafc;
  cursor: pointer;
}

.print-config-auto-field input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #08a9c6;
}

.print-config-auto-field span {
  display: grid;
  gap: 4px;
}

.print-config-auto-field small {
  color: #7a8797;
  font-weight: 600;
}

.print-config-form-actions {
  justify-content: flex-end;
  padding-top: 4px;
}

@media (max-width: 1100px) {
  .print-config-workspace {
    grid-template-columns: 210px minmax(0, 1fr);
  }

}

@media (max-width: 760px) {
  .print-config-heading,
  .print-config-workspace {
    display: grid;
  }

  .print-config-workspace {
    grid-template-columns: 1fr;
  }

  .print-config-tree {
    max-height: 260px;
    border-right: 0;
    border-bottom: 1px solid #e3e9ef;
  }

  .print-config-filters,
.print-config-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Final tax-center theme overrides: inherit the application's public card tokens. */
.tax-center{color:var(--ink)}
.tax-toolbar,.tax-summary article,.tax-panel{background:var(--system-card-bg,var(--panel));border-color:var(--line);box-shadow:var(--shadow)}
.tax-profile-panel{margin-bottom:14px}.tax-profile-panel select{width:100%;height:40px;padding:0 11px;border:1px solid var(--line);border-radius:8px;background:var(--system-card-bg,var(--panel));color:var(--ink);font:inherit}
.tax-source-panel{margin-bottom:14px}.tax-source-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.tax-source-grid article{padding:14px;border:1px solid var(--line);border-radius:10px}.tax-source-grid span,.tax-source-grid small{display:block;color:var(--muted);font-size:13px}.tax-source-grid b{display:block;margin:7px 0;font-size:20px}@media(max-width:760px){.tax-source-grid{grid-template-columns:1fr}}
.tax-toolbar p,.tax-summary span,.tax-panel-head span,.tax-breakdown span{color:var(--muted)}
.tax-eyebrow{color:var(--primary)!important}
.tax-actions input,.tax-actions select{height:40px;padding:0 11px;color:var(--ink);background:var(--system-card-bg,var(--panel));border:1px solid var(--line);border-radius:8px;font:inherit}
.tax-breakdown{background:var(--line)}.tax-breakdown div{background:var(--system-card-bg,var(--panel))}
.tax-center .visit-table th,.tax-center .visit-table td{background:var(--system-card-bg,var(--panel));color:var(--ink);border-color:var(--line)}
.performance-view{--report-blue:#1677ff;--report-border:#e2e8f0;background:#f5f7fa;padding:12px!important;font-size:14px}.performance-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:12px;align-items:start}.report-card{border:1px solid var(--report-border);border-radius:8px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}.performance-sidebar{position:sticky;top:76px;display:grid;padding:8px}.performance-sidebar strong{padding:12px 10px;border-bottom:1px solid var(--report-border);font-size:16px}.performance-sidebar button{border:0;border-left:3px solid transparent;padding:12px 10px;background:transparent;color:#475569;text-align:left;font:inherit;font-weight:700;cursor:pointer}.performance-sidebar button:hover,.performance-sidebar button.active{border-left-color:var(--report-blue);background:#eff6ff;color:var(--report-blue)}.performance-content{display:grid;gap:12px;min-width:0}.performance-filter-card{padding:16px}.performance-title-row,.performance-filter-body,.performance-filter-row,.performance-actions,.performance-date-filter{display:flex;align-items:center;gap:10px}.performance-title-row{justify-content:space-between;margin-bottom:16px}.performance-title-row h2{margin:0;font-size:16px}.report-text-btn{border:0;background:transparent;color:var(--report-blue);font:inherit;cursor:pointer}.performance-filter-body{justify-content:space-between}.performance-filter-fields{display:grid;gap:10px;min-width:0}.performance-date-filter{flex-wrap:wrap}.performance-date-filter input,.performance-filter-row input,.performance-filter-row select,.performance-sidebar select{min-height:38px;border:1px solid #cbd5e1;border-radius:6px;padding:0 10px;background:#fff;color:#1e293b;font:inherit}.performance-date-filter button{width:30px;height:30px;border:0;border-radius:5px;background:#f1f5f9;color:#64748b;cursor:pointer}.report-primary-btn,.report-secondary-btn{min-height:38px;border-radius:6px;padding:0 16px;font:inherit;font-weight:700;white-space:nowrap;cursor:pointer}.report-primary-btn{border:1px solid var(--report-blue);background:var(--report-blue);color:#fff}.report-secondary-btn{border:1px solid #bfdbfe;background:#fff;color:var(--report-blue)}.report-primary-btn:active,.report-secondary-btn:active{transform:translateY(1px)}.performance-tabs{display:flex;overflow-x:auto;padding:0 16px}.performance-tabs button{flex:0 0 auto;border:0;border-bottom:3px solid transparent;padding:14px 16px;background:transparent;color:#64748b;font:inherit;font-weight:700;cursor:pointer}.performance-tabs button.active{border-bottom-color:var(--report-blue);color:var(--report-blue)}.performance-table-card{min-width:0;overflow:hidden}.performance-table-wrap{max-height:calc(100vh - 330px);min-height:420px;overflow:auto}.performance-table{width:100%;min-width:1320px;border-collapse:separate;border-spacing:0;font-size:13px}.performance-table th,.performance-table td{border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;padding:12px;white-space:nowrap}.performance-table thead th{position:sticky;top:0;z-index:3;background:#164e85;color:#fff;text-align:left}.performance-table tbody tr:nth-child(even){background:#f8fafc}.performance-table tbody tr:hover{background:#eff6ff}.performance-table .numeric{text-align:right;font-variant-numeric:tabular-nums}.performance-table tfoot td{position:sticky;bottom:0;z-index:2;background:#eaf2fb;color:#172554;font-weight:900}.performance-expand{width:20px;border:0;background:transparent;color:#64748b;cursor:pointer}.performance-modal{display:grid;place-items:center;background:rgba(15,23,42,.35);z-index:10050}.performance-modal-card{width:min(560px,calc(100vw - 32px));border-radius:8px;background:#fff;box-shadow:0 18px 60px rgba(15,23,42,.24)}.performance-modal-card header,.performance-modal-card footer{display:flex;align-items:center;justify-content:space-between;padding:16px}.performance-modal-card header{border-bottom:1px solid #e2e8f0}.performance-modal-card header h2{margin:0;font-size:16px}.performance-modal-card header button{border:0;background:transparent;font-size:24px}.performance-modal-card footer{justify-content:flex-end;border-top:1px solid #e2e8f0}.performance-column-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px}.performance-column-options label{display:flex;gap:8px;align-items:center}.performance-view input:focus,.performance-view select:focus,.performance-view button:focus-visible{outline:2px solid color-mix(in srgb,var(--report-blue) 35%,transparent);outline-offset:2px}@media(max-width:980px){.performance-layout{grid-template-columns:1fr}.performance-sidebar{position:static;display:flex;overflow-x:auto}.performance-sidebar strong{display:none}.performance-sidebar button{flex:0 0 auto;border-left:0;border-bottom:3px solid transparent}.performance-sidebar button.active{border-bottom-color:var(--report-blue)}.performance-filter-body{align-items:flex-start;flex-direction:column}.performance-filter-row{flex-wrap:wrap}}
.performance-modal .report-primary-btn,.referral-modal .report-primary-btn{border-color:#1677ff;background:#1677ff;color:#fff}.performance-modal .report-secondary-btn,.referral-modal .report-secondary-btn{border-color:#bfdbfe;background:#fff;color:#1677ff}

/* Salary standard configuration */
.people-employee-head,.people-employee-row{display:grid;grid-template-columns:1.2fr 1.2fr 1fr .8fr 1fr;gap:12px;align-items:center}.people-employee-head{padding:10px 16px;border-radius:8px 8px 0 0;background:#164e85;color:#fff;font-size:13px;font-weight:700}.people-employee-row{padding:13px 16px}.people-role-badge,.people-status{width:max-content;padding:3px 9px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-size:12px}.people-status{background:#f1f5f9;color:#64748b}.people-status.enabled{background:#dcfce7;color:#15803d}.people-row-actions{display:flex;align-items:center;gap:8px}.people-row-actions .light-btn{min-height:30px;padding:0 10px}.people-employee-modal{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.48)}.people-employee-form{width:min(640px,100%);border-radius:8px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.3);overflow:hidden}.people-employee-form header,.people-employee-form footer{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0}.people-employee-form header h2{margin:0;font-size:17px}.people-employee-form header p{margin:5px 0 0;color:#64748b}.people-employee-form header>button{border:0;background:transparent;font-size:25px}.people-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px}.people-form-grid label{display:grid;gap:6px;color:#475569;font-size:13px}.people-form-grid input,.people-form-grid select{width:100%;height:40px;border:1px solid #cbd5e1;border-radius:6px;padding:0 10px;font:inherit;box-sizing:border-box}.people-form-grid .people-enabled{display:flex;align-items:center;gap:8px}.people-form-grid .people-enabled input{width:18px;height:18px}.people-employee-form footer{justify-content:flex-end;gap:8px;border-top:1px solid #e2e8f0;border-bottom:0}@media(max-width:760px){.people-employee-head{display:none}.people-employee-row{grid-template-columns:1fr 1fr}.people-form-grid{grid-template-columns:1fr}}
.people-employee-head,.people-employee-row{grid-template-columns:1.5fr 1fr 1fr}.people-form-grid .people-enabled{display:none}
.salary-standards-panel{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.salary-settings-stack{display:grid;gap:12px}.salary-card{min-width:0;padding:16px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08)}.salary-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.salary-card-head h2{margin:0;font-size:16px}.salary-card-head p{margin:6px 0 0;color:#64748b;font-size:13px}.salary-card-head>div:last-child{display:flex;gap:8px;flex-wrap:wrap}.salary-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr)) auto;gap:12px;align-items:end}.salary-filter-grid label,.salary-modal-body label,.salary-template-grid label{display:grid;gap:6px;color:#475569;font-size:13px}.salary-filter-grid input,.salary-filter-grid select,.salary-modal-body input,.salary-modal-body textarea,.salary-template-grid input{width:100%;min-height:38px;border:1px solid #cbd5e1;border-radius:6px;padding:0 10px;background:#fff;color:#0f172a;font:inherit;box-sizing:border-box}.salary-filter-actions{display:flex;gap:8px;flex-wrap:wrap}.salary-table-wrap{max-height:520px;overflow:auto}.salary-table{width:100%;min-width:1900px;border-collapse:separate;border-spacing:0;font-size:13px}.salary-table th,.salary-table td{padding:11px 10px;border-right:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0;white-space:nowrap}.salary-table thead th{position:sticky;top:0;z-index:2;background:#164e85;color:#fff;text-align:left}.salary-table tbody tr:nth-child(even){background:#f8fafc}.salary-table tbody tr.salary-unconfigured{background:#fff7ed}.salary-table .numeric{text-align:right;font-variant-numeric:tabular-nums}.salary-table .salary-editable{background:color-mix(in srgb,#1677ff 5%,transparent);cursor:cell}.salary-warning{margin-left:6px;padding:2px 6px;border-radius:9px;background:#fed7aa;color:#9a3412}.salary-row-actions{display:flex;gap:8px}.salary-row-actions button{border:0;background:transparent;color:#1677ff;cursor:pointer}.salary-template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.salary-template-grid section{padding:16px;border:1px solid #dbeafe;border-radius:8px;background:#f8fbff}.salary-template-grid h3{margin:0 0 14px}.salary-template-grid label{grid-template-columns:1fr 110px;align-items:center;margin-top:10px}.salary-template-grid label span{display:flex;align-items:center;gap:5px}.salary-modal{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.48)}.salary-modal-card{width:min(720px,100%);max-height:92vh;overflow:auto;border-radius:8px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.3)}.salary-modal-card header,.salary-modal-card footer{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0}.salary-modal-card header h2{margin:0;font-size:17px}.salary-modal-card header p{margin:5px 0 0;color:#64748b}.salary-modal-card header>button{border:0;background:transparent;font-size:25px}.salary-modal-card nav{display:flex;padding:0 20px;border-bottom:1px solid #e2e8f0}.salary-modal-card nav button{border:0;border-bottom:3px solid transparent;padding:13px 16px;background:transparent;color:#64748b}.salary-modal-card nav button.active{border-bottom-color:#1677ff;color:#1677ff}.salary-modal-body{display:none;grid-template-columns:repeat(2,1fr);gap:14px;padding:20px}.salary-modal-body.active{display:grid}.salary-modal-body .wide{grid-column:1/-1}.salary-modal-body textarea{min-height:90px;padding:10px;resize:vertical}.salary-modal-body label span{display:flex;align-items:center;gap:6px}.salary-modal-card footer{justify-content:flex-end;border-top:1px solid #e2e8f0;border-bottom:0}@media(max-width:1100px){.salary-filter-grid{grid-template-columns:repeat(2,minmax(160px,1fr))}.salary-template-grid{grid-template-columns:1fr}}@media(max-width:700px){.salary-filter-grid,.salary-modal-body{grid-template-columns:1fr}.salary-card-head{flex-direction:column}.salary-modal-body .wide{grid-column:auto}}
/* People settings: use the same soft system-card language as charge item management. */
.system-grid.settings-panel-single:has([data-settings-panel="people-admin"]:not(.settings-panel-hidden)){grid-template-columns:minmax(0,1fr);max-width:none;width:100%}[data-settings-panel="people-admin"]{width:100%;min-width:0}.people-table-wrap{width:100%;max-width:100%;overflow-x:auto;padding-bottom:4px;scrollbar-gutter:stable}.people-table-wrap::-webkit-scrollbar{height:10px}.people-table-wrap::-webkit-scrollbar-track{border-radius:999px;background:#edf2f7}.people-table-wrap::-webkit-scrollbar-thumb{border:2px solid #edf2f7;border-radius:999px;background:#a8bacb}.people-employee-head,.people-employee-list{min-width:720px}.people-employee-head,.people-employee-row{grid-template-columns:minmax(220px,1.5fr) minmax(160px,1fr) minmax(220px,1fr)}.people-employee-head{min-height:48px;padding:0 18px;border:1px solid rgba(214,222,232,.9);border-radius:12px;background:#f1f6fa;color:#263445;font-size:14px;font-weight:900}.settings-content .settings-glow-card .people-employee-list{gap:10px;margin-top:10px}.settings-content .settings-glow-card .people-employee-row{min-height:68px;padding:12px 18px;border:1px solid rgba(218,225,234,.86);border-radius:14px;background:rgba(248,250,252,.82);box-shadow:0 10px 24px rgba(31,41,55,.04)}.settings-content .settings-glow-card .people-employee-row:hover{border-color:rgba(8,169,198,.28);background:rgba(255,255,255,.96)}.people-role-badge{background:rgba(8,169,198,.09);color:#078da8;font-weight:800}.people-row-actions{justify-content:flex-start}.people-row-actions .light-btn{min-width:86px;min-height:38px;border-radius:10px;background:rgba(255,255,255,.9);color:#5c6672}.people-row-actions .danger-line{color:#c2413a}.settings-content [data-settings-panel="people-admin"]>.panel-head{display:flex;align-items:flex-start;justify-content:space-between}.settings-content [data-settings-panel="people-admin"]>.panel-head .primary-btn{flex:0 0 auto;min-height:42px;border-radius:10px;color:#078da8;background:#fff}.settings-content [data-settings-panel="people-admin"]>.panel-head .primary-btn:hover{color:#fff;background:#08a9c6}@media(max-width:760px){.people-employee-head{display:grid}.people-employee-row{grid-template-columns:minmax(220px,1.5fr) minmax(160px,1fr) minmax(220px,1fr)}}

/* Salary settings: match the clinic settings cards and keep every table field reachable. */
.system-grid.settings-panel-single:has(.salary-standards-panel:not(.settings-panel-hidden)){grid-template-columns:minmax(0,1fr);max-width:none;width:100%}.salary-standards-panel{width:100%;min-width:0}.salary-settings-stack{gap:18px}.salary-card{position:relative;isolation:isolate;padding:22px;overflow:hidden;border:1px solid rgba(214,222,232,.9);border-radius:20px;background:radial-gradient(360px 360px at 50% 0%,rgba(8,169,198,.09),transparent 56%),rgba(255,255,255,.84);box-shadow:0 20px 48px rgba(20,36,56,.08),inset 0 1px 0 rgba(255,255,255,.86);backdrop-filter:blur(12px)}.salary-card-head{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(220,226,234,.82)}.salary-card-head h2{color:#1f2733;font-size:20px;font-weight:900}.salary-card-head p{margin-top:5px;color:#6b7686;font-size:14px}.salary-card .primary-btn,.salary-card .light-btn{min-height:42px;border-radius:10px}.salary-card .primary-btn{border-color:#08a9c6;background:#08a9c6}.salary-card .light-btn{border-color:rgba(203,213,225,.95);background:rgba(255,255,255,.86)}.salary-filter-grid{grid-template-columns:repeat(3,minmax(190px,1fr)) auto;gap:14px}.salary-filter-grid label{color:#465364;font-size:14px;font-weight:700}.salary-filter-grid input,.salary-filter-grid select{min-height:44px;border-color:rgba(203,213,225,.95);border-radius:10px;background:rgba(255,255,255,.88)}.salary-filter-grid input:focus,.salary-filter-grid select:focus,.salary-template-grid input:focus{outline:2px solid rgba(8,169,198,.22);border-color:#08a9c6}.salary-table-card{overflow:hidden}.salary-table-wrap{width:100%;max-width:100%;max-height:560px;overflow-x:scroll;overflow-y:auto;padding-bottom:8px;scrollbar-gutter:stable both-edges;overscroll-behavior-inline:contain}.salary-table-wrap::-webkit-scrollbar{width:12px;height:12px}.salary-table-wrap::-webkit-scrollbar-track{border-radius:999px;background:#edf2f7}.salary-table-wrap::-webkit-scrollbar-thumb{border:3px solid #edf2f7;border-radius:999px;background:#9fb3c8}.salary-table{width:max-content;min-width:1880px;border:1px solid #dbe3ec;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.9);font-size:13px}.salary-table th,.salary-table td{height:48px;padding:10px 12px;border-right:1px solid #e3e9f0;border-bottom:1px solid #e3e9f0;box-sizing:border-box}.salary-table thead th{top:0;background:#f1f6fa;color:#263445;font-weight:900;box-shadow:inset 0 -1px 0 #d4dee8}.salary-table tbody tr:nth-child(even){background:rgba(248,250,252,.86)}.salary-table tbody tr.salary-unconfigured{background:#fff8ed}.salary-table tbody tr:hover{background:#f0fbfd}.salary-table .salary-editable{background:rgba(8,169,198,.035);color:#1f2937}.salary-table th:nth-child(1),.salary-table td:nth-child(1){position:sticky;left:0;width:58px;min-width:58px}.salary-table th:nth-child(2),.salary-table td:nth-child(2){position:sticky;left:58px;width:62px;min-width:62px}.salary-table th:nth-child(3),.salary-table td:nth-child(3){position:sticky;left:120px;width:94px;min-width:94px}.salary-table th:nth-child(4),.salary-table td:nth-child(4){position:sticky;left:214px;width:78px;min-width:78px}.salary-table th:nth-child(5),.salary-table td:nth-child(5){position:sticky;left:292px;width:126px;min-width:126px}.salary-table tbody td:nth-child(-n+5){z-index:1;background:#fff}.salary-table tbody tr:nth-child(even) td:nth-child(-n+5){background:#f8fafc}.salary-table tbody tr.salary-unconfigured td:nth-child(-n+5){background:#fff8ed}.salary-table thead th:nth-child(-n+5){z-index:4}.salary-table th:last-child,.salary-table td:last-child{position:sticky;right:0;z-index:2;min-width:210px;background:#fff;box-shadow:-8px 0 16px rgba(31,41,55,.06)}.salary-table thead th:last-child{z-index:5;background:#f1f6fa}.salary-row-actions{gap:4px}.salary-row-actions button{padding:6px 8px;border-radius:7px;color:#078da8;font-weight:700}.salary-row-actions button:hover{background:#e8f8fb}.salary-template-grid{gap:16px}.salary-template-grid section{padding:20px;border-color:rgba(196,220,236,.9);border-radius:14px;background:rgba(248,251,254,.82)}.salary-template-grid input{height:42px;border-radius:9px}.salary-warning{background:#ffe0ad;color:#9a4c08}@media(max-width:1250px){.salary-filter-grid{grid-template-columns:repeat(2,minmax(190px,1fr))}.salary-filter-actions{grid-column:1/-1}}@media(max-width:700px){.salary-card{padding:16px;border-radius:16px}.salary-filter-grid{grid-template-columns:1fr}.salary-filter-actions{grid-column:auto}}

.salary-card .primary-btn{color:#fff!important;-webkit-text-fill-color:#fff!important;text-shadow:none!important}.salary-card .primary-btn:hover{border-color:#078da8!important;background:#078da8!important;color:#fff!important}.salary-card .primary-btn:disabled{border-color:#8bd3df!important;background:#8bd3df!important;color:#fff!important;opacity:.72}.salary-card .light-btn{color:#5c6672!important;-webkit-text-fill-color:#5c6672!important}

.salary-card{background:radial-gradient(360px 360px at var(--settings-card-x,50%) var(--settings-card-y,0%),rgba(8,169,198,.13),transparent 56%),rgba(255,255,255,.84);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}.salary-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;padding:1px;background:radial-gradient(260px 260px at var(--settings-card-x,50%) var(--settings-card-y,0%),rgba(8,169,198,.9),transparent 62%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .18s ease}.salary-card:hover{transform:translateY(-2px);border-color:rgba(8,169,198,.3);box-shadow:0 24px 58px rgba(20,36,56,.12),inset 0 1px 0 rgba(255,255,255,.92)}.salary-card:hover::before{opacity:1}.settings-content [data-settings-panel="people-admin"]{background:radial-gradient(360px 360px at var(--settings-card-x,50%) var(--settings-card-y,0%),rgba(8,169,198,.13),transparent 56%),rgba(255,255,255,.84)}.settings-content [data-settings-panel="people-admin"]:hover{border-color:rgba(8,169,198,.3);box-shadow:0 24px 58px rgba(20,36,56,.12),inset 0 1px 0 rgba(255,255,255,.92)}.settings-content [data-settings-panel="people-admin"]:hover::before{opacity:1}

/* Wage settlement */
.wage-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:12px}.wage-filter-grid label{display:grid;gap:6px;color:#475569;font-size:13px}.wage-filter-grid input,.wage-filter-grid select{height:38px;border:1px solid #cbd5e1;border-radius:6px;padding:0 10px;background:#fff;color:#1e293b;font:inherit}.wage-toolbar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}.wage-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}.wage-kpis{display:grid;grid-template-columns:repeat(4,1fr);padding:16px}.wage-kpis article{padding:4px 20px;border-right:1px solid #e2e8f0}.wage-kpis article:last-child{border:0}.wage-kpis span{display:block;color:#64748b}.wage-kpis strong{display:block;margin-top:8px;font-size:24px;color:#0f172a}.wage-kpi-note{margin:0;padding:0 36px 14px;color:#64748b}.wage-table .calculated{background:#f0fdf4!important}.wage-table input[type=number]{width:92px;height:30px;border:1px solid #bfdbfe;border-radius:5px;padding:0 7px;text-align:right}.wage-table .deduct{color:#dc2626}.wage-table .row-actions{display:flex;gap:6px}.wage-table .row-actions button{border:0;background:transparent;color:#1677ff;cursor:pointer}.wage-modal{position:fixed;inset:0;z-index:11000;display:grid;place-items:center;padding:24px;background:rgba(15,23,42,.5)}.wage-modal.hidden{display:none}.wage-modal-shell{width:min(900px,100%);max-height:94vh;overflow:auto;border-radius:8px;background:#f8fafc;box-shadow:0 24px 70px rgba(15,23,42,.3)}.wage-modal-actions{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-bottom:1px solid #e2e8f0;background:#fff}.payslip-sheet{width:210mm;min-height:277mm;margin:16px auto;padding:18mm;background:#fff;color:#111;box-shadow:0 2px 12px rgba(15,23,42,.12)}.payslip-head{text-align:center;border-bottom:2px solid #111;padding-bottom:12px}.payslip-head h1{margin:0 0 6px;font-size:24px}.payslip-info{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.payslip-block{margin-top:18px}.payslip-block h3{margin:0;padding:8px;background:#f1f5f9;font-size:15px}.payslip-lines{display:grid;grid-template-columns:1fr 1fr}.payslip-lines div{display:flex;justify-content:space-between;padding:9px 12px;border-bottom:1px solid #e2e8f0}.payslip-total{display:flex;justify-content:flex-end;gap:40px;margin-top:18px;padding:14px;border-top:2px solid #111;font-size:17px}.payslip-signatures{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;margin-top:60px}.payslip-signatures span{padding-top:8px;border-top:1px solid #111;text-align:center}.wage-column-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px}.wage-badge{padding:3px 8px;border-radius:10px;background:#fff7ed;color:#c2410c}.wage-badge.done{background:#dcfce7;color:#15803d}@media(max-width:980px){.wage-filter-grid,.wage-kpis{grid-template-columns:repeat(2,1fr)}.payslip-sheet{width:auto;min-height:0;margin:10px;padding:20px}}@media print{body.printing-payslip>*:not(.wage-modal){display:none!important}.wage-modal{position:static;display:block!important;padding:0;background:#fff}.wage-modal-shell{width:auto;max-height:none;overflow:visible;box-shadow:none}.wage-modal-actions{display:none!important}.payslip-sheet{width:auto;min-height:0;margin:0;padding:12mm;box-shadow:none;page-break-after:always}@page{size:A4 portrait;margin:0}}
.wage-filter-grid .wage-time-filter{grid-column:span 2;min-width:0}.wage-period-hint{display:block;margin-top:2px;color:#63788c;font-size:11px;line-height:1.45}.wage-period-hint.warning{border-radius:8px;padding:7px 9px;background:#fff7e8;color:#9a6515}
#wageSettlement .wage-filter-grid:has([data-wage-time-range]:not([hidden])){grid-template-columns:repeat(3,minmax(0,1fr))}
#wageSettlement .wage-filter-grid:has([data-wage-time-range]:not([hidden])) .wage-time-filter{grid-column:1/-1}
#wageSettlement .wage-time-filter .finance-time-filter-shell:has([data-wage-time-range]:not([hidden])){grid-template-columns:310px 168px;justify-content:start;width:max-content;max-width:100%}

#wageSettlement.wage-view{--wage-cyan:#0aa9c7;--wage-ink:#172235;display:none;padding:10px 22px 44px!important;background:radial-gradient(circle at 18% 5%,rgba(31,194,214,.09),transparent 25%),linear-gradient(135deg,#f4f9fc,#f7f8fc 54%,#eef3ff)}#wageSettlement.wage-view.active{display:block}.wage-hero{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;min-height:142px;overflow:hidden;margin-bottom:22px;padding:26px 32px;border:1px solid rgba(10,169,199,.25);border-radius:18px;background:linear-gradient(120deg,rgba(218,248,252,.88),rgba(255,255,255,.94) 42%,rgba(231,237,255,.78));box-shadow:0 18px 42px rgba(66,104,139,.11)}.wage-hero::before,.wage-hero::after{position:absolute;z-index:-1;width:320px;height:220px;border-radius:50%;background:rgba(43,198,219,.16);filter:blur(48px);content:"";animation:expenseGlowDrift 8s ease-in-out infinite alternate}.wage-hero::before{top:-105px;left:24%}.wage-hero::after{right:5%;bottom:-100px;background:rgba(91,122,255,.12);animation-duration:10s}.wage-hero span{color:var(--wage-cyan);font-size:12px;font-weight:900;letter-spacing:.18em}.wage-hero h2{margin:8px 0 6px;color:var(--wage-ink);font-size:30px}.wage-hero p{margin:0;color:#69798c;font-weight:650}.wage-hero-status{display:grid;justify-items:end;gap:3px}.wage-hero-status small,.wage-hero-status em{color:#77889c;font-style:normal}.wage-hero-status strong{color:var(--wage-cyan);font-size:28px}#wageSettlement .wage-workspace{grid-template-columns:220px minmax(0,1fr);gap:22px}#wageSettlement .performance-sidebar{position:sticky;top:82px;gap:4px;padding:14px;border:1px solid rgba(151,177,203,.24);border-radius:18px;background:rgba(255,255,255,.83);box-shadow:0 18px 45px rgba(64,92,122,.1);backdrop-filter:blur(18px)}#wageSettlement .performance-sidebar strong{padding:12px 14px 15px;border:0}#wageSettlement .performance-sidebar button{height:50px;border:0;border-radius:12px;padding:0 15px;transition:.2s}#wageSettlement .performance-sidebar button:hover{transform:translateX(3px);background:rgba(10,169,199,.07);color:#078ba5}#wageSettlement .performance-sidebar button.active{border:0;background:linear-gradient(100deg,rgba(203,243,249,.92),rgba(230,238,255,.92));color:#078ba5;box-shadow:inset 3px 0 0 var(--wage-cyan),0 8px 22px rgba(31,177,199,.1)}#wageSettlement .performance-content{gap:16px}#wageSettlement .report-card{border:1px solid rgba(151,177,203,.24);border-radius:18px;background:rgba(255,255,255,.86);box-shadow:0 15px 38px rgba(67,96,126,.09);backdrop-filter:blur(15px)}#wageSettlement .performance-filter-card{padding:22px 24px}#wageSettlement .wage-filter-grid input,#wageSettlement .wage-filter-grid select{border-color:rgba(140,166,192,.35);border-radius:10px;background:#f9fcff}#wageSettlement .wage-filter-grid input:focus,#wageSettlement .wage-filter-grid select:focus{border-color:var(--wage-cyan);box-shadow:0 0 0 4px rgba(10,169,199,.11)}#wageSettlement .report-primary-btn{border-color:#079fbd;background:linear-gradient(135deg,#0bb4cf,#078db7);box-shadow:0 8px 20px rgba(7,157,189,.22)}#wageSettlement .report-secondary-btn{border-color:rgba(10,169,199,.25);border-radius:9px;color:#078ba5}#wageSettlement .wage-kpis{gap:12px;padding:16px}#wageSettlement .wage-kpis article{border:1px solid rgba(140,175,207,.2);border-radius:14px;padding:18px 20px;background:linear-gradient(145deg,#f8fcff,#edf8fc);transition:.22s}#wageSettlement .wage-kpis article:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(38,133,158,.13)}#wageSettlement .performance-tabs button.active{border-bottom-color:var(--wage-cyan);color:#078ba5}#wageSettlement .performance-table thead th{background:#f4f8fb;color:#334155}#wageSettlement .performance-table tbody tr:hover{background:#effbfc;box-shadow:inset 3px 0 0 var(--wage-cyan)}#wageSettlement .performance-table tfoot td{background:#ecf7fa}@media(max-width:980px){#wageSettlement .wage-workspace{grid-template-columns:1fr}#wageSettlement .performance-sidebar{position:static}.wage-hero{align-items:flex-start}.wage-hero-status{justify-items:start}}@media(prefers-reduced-motion:reduce){.wage-hero::before,.wage-hero::after{animation:none}}
.tax-material-card small{display:block;margin:6px 0;color:#60758a;font-size:11px;line-height:1.45}.tax-payable-summary{grid-template-columns:repeat(4,minmax(0,1fr))}.tax-total-payable{border-color:rgba(10,169,199,.35)!important;background:linear-gradient(145deg,#effbfd,#e8f3ff)!important}.tax-total-payable b{color:#079fbd!important}.tax-risk.warning{border-color:#f59e0b;background:#fff8e8;color:#92400e}.tax-breakdown>div:last-child:nth-child(odd){grid-column:1/-1}@media(max-width:980px){.tax-payable-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.charge-project-section-title{grid-column:1/-1;margin:4px 0;padding-bottom:9px;border-bottom:1px solid var(--line);font-size:15px}.charge-consumable-link{position:relative;grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px;border:1px solid rgba(10,169,199,.2);border-radius:8px;background:rgba(242,251,253,.72)}.charge-consumable-link.hidden{display:none}.charge-consumable-link .wide,.charge-consumable-help,.charge-gross-profit-preview{grid-column:1/-1}.charge-consumable-suggestions{position:absolute;z-index:20;top:68px;left:0;right:0;max-height:260px;overflow:auto;border:1px solid #cfe2ec;border-radius:8px;background:#fff;box-shadow:0 18px 38px rgba(35,67,90,.18)}.charge-consumable-suggestions.hidden{display:none}.charge-consumable-suggestions button{display:flex;justify-content:space-between;width:100%;padding:11px 13px;border:0;border-bottom:1px solid #edf2f6;background:#fff;text-align:left}.charge-consumable-suggestions button:hover{background:#effafd}.charge-consumable-suggestions span,.charge-consumable-suggestions small{display:block}.charge-consumable-suggestions em{color:#078ba5;font-style:normal}.charge-consumable-help{margin:0;color:var(--muted);font-size:12px}.charge-gross-profit-preview{display:flex;align-items:center;gap:14px;padding:12px;border-radius:8px;background:#fff}.charge-gross-profit-preview strong{color:#078ba5;font-size:22px}.charge-gross-profit-preview strong.zero{color:#94a3b8}.charge-gross-profit-preview strong.negative{color:#dc2626}.charge-gross-profit-preview small{margin-left:auto;color:var(--muted)}.consumable-project-table{overflow:auto}.consumable-table-wrap table{width:100%;border-collapse:separate;border-spacing:0}.consumable-table-wrap th,.consumable-table-wrap td{padding:13px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.consumable-table-wrap th{position:sticky;top:0;background:#f5f9fc}.consumable-table-wrap td small{display:block;color:var(--muted)}.consumable-table-wrap tr.zero .margin{color:#94a3b8}.consumable-table-wrap tr.negative .margin{color:#dc2626;font-weight:800}.consumable-table-wrap td button{border:0;background:transparent;color:#078ba5}.consumable-table-wrap td button:last-child{color:#dc2626}@media(max-width:700px){.charge-consumable-link{grid-template-columns:1fr}.charge-consumable-link>*{grid-column:1!important}.charge-gross-profit-preview{align-items:flex-start;flex-direction:column}.charge-gross-profit-preview small{margin-left:0}}

.high-value-trace-card .inbound-card-front{align-items:flex-start;text-align:left;padding:28px 34px}.high-value-card-status{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px}.high-value-card-status>span{color:#08a6c6;font-size:13px;font-weight:900;letter-spacing:2px}.high-value-card-status>b{display:inline-flex;align-items:center;border-radius:999px;padding:6px 12px;background:#e8f7fb;color:#078ca8;font-size:13px}.high-value-trace-card.is-used .high-value-card-status>b{background:#dcfce7;color:#15803d}.high-value-trace-card .inbound-card-front>h2{margin:20px 0 6px;font-size:25px}.high-value-card-identity{display:grid;gap:5px;margin-top:14px;color:#64748b;font-size:13px}.high-value-card-patient{width:100%;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-top:16px;padding:12px 14px;border:1px solid #bbf7d0;border-radius:12px;background:linear-gradient(135deg,#f0fdf4,#ecfeff)}.high-value-card-patient em{grid-row:1/3;color:#16a34a;font-size:12px;font-style:normal;font-weight:800}.high-value-card-patient strong{color:#172033;font-size:14px}.high-value-card-patient small{color:#64748b}.patient-high-value-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;padding:18px}.patient-high-value-card{padding:22px;border:1px solid #d9e8ef;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(235,249,252,.88));box-shadow:0 14px 32px rgba(57,90,110,.09)}.patient-high-value-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:15px;border-bottom:1px solid #e2e8f0}.patient-high-value-card-head span{color:#08a6c6;font-size:12px;font-weight:900;letter-spacing:1.5px}.patient-high-value-card-head h3{margin:7px 0 0;font-size:20px}.patient-high-value-card-head>b{border-radius:999px;padding:6px 11px;background:#dcfce7;color:#15803d;font-size:13px}.patient-high-value-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 20px;margin:17px 0 0}.patient-high-value-card dl>div{min-width:0}.patient-high-value-card dt{color:#8793a7;font-size:12px}.patient-high-value-card dd{overflow-wrap:anywhere;margin:4px 0 0;color:#243044;font-weight:700}@media(max-width:760px){.patient-high-value-card-grid{grid-template-columns:1fr;padding:12px}.patient-high-value-card dl{grid-template-columns:1fr}.high-value-trace-card .inbound-card-front{padding:22px}}
.patient-disposal-panel{display:grid;gap:18px;padding:18px 20px 30px}.patient-disposal-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:20px 22px;border:1px solid rgba(112,164,190,.22);border-radius:18px;background:linear-gradient(115deg,rgba(226,249,253,.88),rgba(255,255,255,.96) 58%,rgba(239,245,255,.92));box-shadow:0 14px 34px rgba(48,88,112,.08)}.patient-disposal-panel-head h2{margin:0;color:#183149;font-size:23px}.patient-disposal-panel-head p{margin:7px 0 0;color:#73879a;font-size:13px}.patient-disposal-panel-head>strong{color:#62778a;font-size:14px;white-space:nowrap}.patient-disposal-panel-head>strong b{color:#078ca7;font-size:25px;font-variant-numeric:tabular-nums}.patient-disposal-timeline{display:grid}.patient-disposal-timeline-row{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding-bottom:20px}.patient-disposal-timeline-row:last-child{padding-bottom:0}.patient-disposal-timeline-row>time{position:relative;display:grid;align-content:start;justify-items:end;gap:4px;padding:15px 23px 0 0;color:#71869a;font-variant-numeric:tabular-nums}.patient-disposal-timeline-row>time strong{color:#263f57;font-size:15px}.patient-disposal-timeline-row>time span{font-size:13px}.patient-disposal-timeline-row>time::before{position:absolute;top:0;right:6px;width:2px;height:100%;background:#d7e9f0;content:""}.patient-disposal-timeline-row>time::after{position:absolute;top:19px;right:0;width:14px;height:14px;border:3px solid #fff;border-radius:50%;background:#08a9c6;box-shadow:0 0 0 1px rgba(8,169,198,.28);content:""}.patient-disposal-timeline-row:last-child>time::before{height:26px}.patient-disposal-card{overflow:hidden;border:1px solid rgba(112,164,190,.24);border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 14px 36px rgba(42,82,108,.08)}.patient-disposal-card>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;border-bottom:1px solid #e4eef3;background:#f7fbfd}.patient-disposal-card>header>div{display:flex;align-items:center;gap:11px}.patient-disposal-card>header strong{color:#1c354c;font-size:17px}.patient-disposal-card>header span{border-radius:8px;padding:4px 9px;background:#e5f7fa;color:#078da8;font-size:12px;font-weight:800}.patient-disposal-card>header small{color:#7c8ea0}.patient-disposal-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#e5eef3}.patient-disposal-meta>span{display:grid;gap:5px;min-height:76px;padding:14px 18px;background:#fff}.patient-disposal-meta small,.patient-disposal-tooth small{color:#8293a4;font-size:11px}.patient-disposal-meta b,.patient-disposal-tooth b{overflow-wrap:anywhere;color:#30465a;font-size:14px}.patient-disposal-tooth{display:flex;align-items:center;gap:18px;min-height:86px;padding:13px 18px;border-top:1px solid #e8f0f4;background:#fbfdfe}.patient-disposal-tooth>div{display:grid;gap:5px;min-width:90px}.patient-disposal-tooth .patient-treatment-tooth-map{margin-left:0}.patient-disposal-tooth-empty{color:#8b9baa;font-size:13px}.patient-disposal-content,.patient-disposal-advice{padding:18px 20px}.patient-disposal-content h3,.patient-disposal-advice h3{margin:0 0 9px;color:#1e3a50;font-size:14px}.patient-disposal-content p,.patient-disposal-advice p{margin:0;color:#455d72;font-size:14px;line-height:1.8;white-space:pre-wrap;word-break:break-word}.patient-disposal-advice{border-top:1px solid #e6eff3;background:#f2fbfd}.patient-disposal-empty{display:grid;place-items:center;align-content:center;min-height:260px;border:1px dashed #c8dce7;border-radius:18px;background:rgba(255,255,255,.74);text-align:center}.patient-disposal-empty strong{color:#294358;font-size:18px}.patient-disposal-empty p{margin:8px 0 0;color:#73879a;font-size:13px}html.dark .patient-disposal-panel-head,html[data-theme="dark"] .patient-disposal-panel-head,html.dark .patient-disposal-card,html[data-theme="dark"] .patient-disposal-card{border-color:rgba(151,180,204,.2);background:#192638;box-shadow:0 16px 36px rgba(3,9,18,.25)}html.dark .patient-disposal-panel-head h2,html[data-theme="dark"] .patient-disposal-panel-head h2,html.dark .patient-disposal-card>header strong,html[data-theme="dark"] .patient-disposal-card>header strong{color:#edf5ff}html.dark .patient-disposal-card>header,html[data-theme="dark"] .patient-disposal-card>header,html.dark .patient-disposal-meta>span,html[data-theme="dark"] .patient-disposal-meta>span,html.dark .patient-disposal-tooth,html[data-theme="dark"] .patient-disposal-tooth{border-color:rgba(151,180,204,.14);background:#213247}html.dark .patient-disposal-content p,html[data-theme="dark"] .patient-disposal-content p,html.dark .patient-disposal-advice p,html[data-theme="dark"] .patient-disposal-advice p,html.dark .patient-disposal-meta b,html[data-theme="dark"] .patient-disposal-meta b,html.dark .patient-disposal-tooth b,html[data-theme="dark"] .patient-disposal-tooth b{color:#d8e5f1}html.dark .patient-disposal-advice,html[data-theme="dark"] .patient-disposal-advice{border-color:rgba(151,180,204,.14);background:#1c3345}@media(max-width:760px){.patient-disposal-panel{padding:12px}.patient-disposal-panel-head{align-items:flex-start;flex-direction:column}.patient-disposal-timeline-row{grid-template-columns:1fr;gap:8px}.patient-disposal-timeline-row>time{justify-items:start;padding:0 0 0 25px}.patient-disposal-timeline-row>time::before{right:auto;left:6px}.patient-disposal-timeline-row>time::after{top:2px;right:auto;left:0}.patient-disposal-timeline-row:last-child>time::before{height:100%}.patient-disposal-meta{grid-template-columns:1fr}.patient-disposal-tooth{align-items:flex-start;flex-direction:column}.patient-disposal-card>header{align-items:flex-start;flex-direction:column}}
.patient-material-usage-panel{gap:12px}.patient-material-usage-summary{display:flex;align-items:center;gap:24px;padding:0 14px;color:#62778a;font-size:13px}.patient-material-usage-summary span{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}.patient-material-usage-summary b{color:#078ca7;font-size:19px;font-variant-numeric:tabular-nums}.patient-material-usage-table-wrap{overflow:auto;border:1px solid rgba(126,166,190,.25);border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(48,88,112,.07)}.patient-material-usage-table{width:100%;min-width:1540px;border-collapse:separate;border-spacing:0}.patient-material-usage-table th,.patient-material-usage-table td{padding:13px 14px;border-bottom:1px solid #e7eef3;color:#34485c;font-size:13px;text-align:left;vertical-align:middle}.patient-material-usage-table th{position:sticky;top:0;z-index:1;background:#f3f8fb;color:#5e7286;font-size:12px;font-weight:850;white-space:nowrap}.patient-material-usage-table tbody tr:last-child td{border-bottom:0}.patient-material-usage-table tbody tr:hover td{background:#f4fbfd}.patient-material-usage-table td.numeric{text-align:right;font-variant-numeric:tabular-nums;font-weight:750;white-space:nowrap}.patient-material-kind,.patient-material-status{display:inline-flex;align-items:center;min-height:25px;border-radius:7px;padding:3px 9px;font-size:12px;font-weight:800;white-space:nowrap}.patient-material-kind.material{background:#e7f7fb;color:#11778e}.patient-material-kind.highValue{background:#fff2dc;color:#97620f}.patient-material-kind.drug{background:#edf3ff;color:#4664a2}.patient-material-status{background:#e7f8ee;color:#237149}.patient-material-item{min-width:180px}.patient-material-item strong,.patient-material-item small,.patient-material-trace span{display:block}.patient-material-item strong{color:#172f45;font-size:14px}.patient-material-item small{margin-top:4px;color:#8090a0;font-size:11px}.patient-material-trace{display:grid;gap:3px;min-width:190px;color:#62778a;font-size:12px}.patient-material-note{min-width:150px;max-width:260px;white-space:normal;word-break:break-word}.patient-material-usage-empty{display:grid;place-items:center;align-content:center;min-height:230px;border:1px dashed #c8dce7;border-radius:14px;background:rgba(255,255,255,.72);text-align:center}.patient-material-usage-empty strong{color:#2a4258;font-size:17px}.patient-material-usage-empty p{margin:8px 0 0;color:#73879a;font-size:13px}html.dark .patient-material-usage-table-wrap,html[data-theme="dark"] .patient-material-usage-table-wrap{border-color:rgba(151,180,204,.2);background:#192638;box-shadow:0 16px 36px rgba(3,9,18,.28)}html.dark .patient-material-usage-table th,html[data-theme="dark"] .patient-material-usage-table th{background:#213247;color:#b7c7d8}html.dark .patient-material-usage-table td,html[data-theme="dark"] .patient-material-usage-table td{border-bottom-color:rgba(151,180,204,.14);color:#d8e5f1}html.dark .patient-material-usage-table tbody tr:hover td,html[data-theme="dark"] .patient-material-usage-table tbody tr:hover td{background:#1d3043}html.dark .patient-material-item strong,html[data-theme="dark"] .patient-material-item strong{color:#edf5ff}html.dark .patient-material-usage-empty,html[data-theme="dark"] .patient-material-usage-empty{border-color:rgba(151,180,204,.25);background:rgba(25,38,56,.76)}html.dark .patient-material-usage-empty strong,html[data-theme="dark"] .patient-material-usage-empty strong{color:#edf5ff}@media(max-width:760px){.patient-material-usage-summary{gap:12px;overflow-x:auto;padding:0 4px 4px}.patient-material-usage-table-wrap{border-radius:12px}.patient-material-usage-table th,.patient-material-usage-table td{padding:11px 12px}}
.high-value-trace-card{height:320px;min-height:320px;max-height:320px}.high-value-trace-card .inbound-card-inner{height:320px;min-height:320px;max-height:320px}.high-value-trace-card .inbound-card-face{max-height:320px}.high-value-trace-card .inbound-card-front>h2{margin:14px 0 2px}.high-value-trace-card .high-value-card-identity{margin-top:9px}.high-value-trace-card .high-value-card-patient{margin-top:10px;padding:10px 12px}
.outbound-record-section+.outbound-record-section{margin-top:24px;padding-top:22px;border-top:1px solid #dce7ee}.outbound-high-value-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:18px}.outbound-high-value-card{padding:22px;border:1px solid rgba(8,169,198,.2);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(235,249,252,.9));box-shadow:0 14px 34px rgba(48,88,112,.09)}.outbound-high-value-head{display:flex;justify-content:space-between;gap:15px;padding-bottom:14px;border-bottom:1px solid #e2e8f0}.outbound-high-value-head span{color:#08a6c6;font-size:12px;font-weight:900;letter-spacing:1.4px}.outbound-high-value-head h3{margin:7px 0 0;font-size:21px}.outbound-high-value-head>b{align-self:flex-start;border-radius:999px;padding:6px 11px;background:#dcfce7;color:#15803d;font-size:13px}.outbound-high-value-patient{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:15px 0;padding:11px 13px;border-radius:12px;background:#f0fdf4}.outbound-high-value-patient em{grid-row:1/3;color:#16a34a;font-size:12px;font-style:normal;font-weight:800}.outbound-high-value-patient strong{color:#172033}.outbound-high-value-patient small{color:#64748b}.outbound-high-value-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}.outbound-high-value-card dt{color:#8793a7;font-size:12px}.outbound-high-value-card dd{overflow-wrap:anywhere;margin:3px 0 0;color:#243044;font-weight:700}.outbound-form-card{width:min(860px,94vw)}.outbound-record-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;padding:22px}.outbound-record-form label{display:grid;gap:7px;color:#344256;font-weight:750}.outbound-record-form label>small{color:#7b8da0;font-size:12px;font-weight:600;line-height:1.45}.outbound-record-form label>#outboundStockHint{color:#078da7;font-weight:750}.outbound-record-form input,.outbound-record-form select,.outbound-record-form textarea{width:100%;box-sizing:border-box;border:1px solid #cedde7;border-radius:10px;padding:11px 12px;background:#fbfdff;color:#172033;font:inherit}.outbound-record-form input[readonly]{background:#f0f5f8;color:#617589;cursor:not-allowed}.outbound-record-form .wide,.outbound-record-form footer{grid-column:1/-1}.outbound-high-value-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}.outbound-record-form footer{display:flex;justify-content:flex-end;gap:10px;padding-top:7px}@media(max-width:720px){.outbound-record-form,.outbound-high-value-fields{grid-template-columns:1fr}.outbound-record-form>*{grid-column:1!important}.outbound-high-value-card dl{grid-template-columns:1fr}}

.outbound-udi-section{display:grid;gap:10px;padding:14px;border:1px solid #cce4eb;border-radius:12px;background:linear-gradient(135deg,#f1fbfd,#f8fbff)}
.outbound-udi-section>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.outbound-udi-section strong{color:#17334b}.outbound-udi-section small{color:#74899a;font-size:12px}.outbound-udi-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.outbound-udi-list>p{grid-column:1/-1;margin:0;color:#8496a5;font-size:13px}.outbound-udi-list label span{font-size:12px}.outbound-photo-upload{align-content:start;padding:13px;border:1px dashed #8dcfdd;border-radius:12px;background:#f7fcfd}.outbound-photo-upload>span{color:#24445b;font-weight:800}.outbound-photo-upload input[type="file"]{padding:8px;background:#fff}.outbound-photo-upload img{width:100%;height:150px;border-radius:9px;object-fit:cover;background:#eaf2f5}.outbound-photo-upload img[hidden]{display:none}@media(max-width:720px){.outbound-udi-list{grid-template-columns:1fr}.outbound-udi-section>div:first-child{align-items:flex-start;flex-direction:column}}

/* 领用出库筛选与分类导出。 */
.outbound-filter-panel{position:relative;overflow:visible;margin-bottom:24px;border:1px solid rgba(91,151,179,.24);border-radius:15px;padding:18px;background:rgba(248,252,254,.96);box-shadow:0 8px 24px rgba(43,84,108,.06)}
.outbound-record-switcher{min-width:0;border:1px solid #dce8ee;border-radius:16px;padding:16px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(244,251,253,.9));box-shadow:0 10px 28px rgba(40,77,99,.07)}
.outbound-record-tabs{margin-bottom:16px}
.outbound-record-tab-panel{min-width:0}
.outbound-record-table-wrap{height:420px;max-width:100%;overflow:auto;border:1px solid #e0e9ee;border-radius:12px;background:#fff}
.outbound-record-table{width:1680px;min-width:1680px;table-layout:fixed;border-collapse:separate;border-spacing:0}
.outbound-record-table th{position:sticky;top:0;z-index:1;background:#f1f7fa}
.outbound-record-table th,.outbound-record-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.outbound-record-section+.outbound-record-section{margin-top:0;padding-top:0;border-top:0}
.inventory-overview-switcher{min-width:0;border:1px solid #dce8ee;border-radius:16px;padding:16px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(244,251,253,.9));box-shadow:0 10px 28px rgba(40,77,99,.07)}
.inventory-overview-tabs{margin-bottom:16px}
.inventory-overview-table-wrap{height:420px;max-width:100%;overflow:auto;border:1px solid #e0e9ee;border-radius:12px;background:#fff}
.inventory-overview-project-table{width:1500px;min-width:1500px;table-layout:fixed;border-collapse:separate;border-spacing:0}
.inventory-overview-project-table th{position:sticky;top:0;z-index:1;background:#f1f7fa}
.inventory-overview-project-table th,.inventory-overview-project-table td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.outbound-filter-grid{display:grid;grid-template-columns:repeat(5,minmax(128px,1fr));gap:12px}
.outbound-filter-grid-range{grid-template-columns:minmax(300px,1.35fr) repeat(3,minmax(150px,1fr))}
.outbound-filter-range-field{position:relative;z-index:2}.outbound-filter-range-field:has(.outbound-filter-range-picker.open){z-index:30}
.outbound-filter-range-picker{position:relative;display:grid;min-width:0}
.outbound-filter-range-calendar{width:min(360px,calc(100vw - 48px))}
.outbound-range-hint{margin:0 2px 7px;color:#73879a;font-size:11px;font-weight:700;text-align:center}
.outbound-filter-calendar-day.in-range{border-radius:0;background:#e2f8fc;color:#087f98}
.outbound-filter-calendar-day.range-start{border-radius:8px 0 0 8px}
.outbound-filter-calendar-day.range-end{border-radius:0 8px 8px 0}
.outbound-filter-calendar-day.range-start.range-end{border-radius:8px}
.outbound-filter-grid label{display:grid;gap:7px;min-width:0;color:#526579;font-size:12px;font-weight:800}
.outbound-filter-grid input,.outbound-filter-grid select{width:100%;height:42px;min-width:0;box-sizing:border-box;border:1px solid #cddde7;border-radius:9px;padding:0 11px;background:#fff;color:#203047;font:inherit;font-size:14px;outline:0}
.outbound-filter-grid input:focus,.outbound-filter-grid select:focus{border-color:#0aa9c7;box-shadow:0 0 0 3px rgba(10,169,199,.11)}
.outbound-filter-date-field{position:relative;z-index:2}.outbound-filter-date-field:has(.outbound-filter-date-picker.open){z-index:30}
.outbound-filter-date-picker{position:relative;display:grid;min-width:0}
.outbound-filter-date-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:42px;box-sizing:border-box;border:1px solid #cddde7;border-radius:9px;padding:0 11px;background:#fff;color:#203047;font:inherit;font-size:14px;font-weight:750;text-align:left;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.outbound-filter-date-trigger svg{width:18px;height:18px;flex:0 0 auto;fill:currentColor;color:#078da9}.outbound-filter-date-picker.open .outbound-filter-date-trigger{border-color:#0aa9c7;background:#fff;box-shadow:0 0 0 3px rgba(10,169,199,.11)}
.outbound-filter-date-calendar{position:absolute;top:calc(100% + 8px);left:0;z-index:40;display:grid;width:min(320px,calc(100vw - 48px));box-sizing:border-box;border:1px solid rgba(9,171,201,.25);border-radius:15px;padding:10px;background:rgba(255,255,255,.99);box-shadow:0 20px 44px rgba(20,65,88,.19),0 5px 14px rgba(9,157,187,.08)}
.outbound-filter-date-calendar[hidden]{display:none}.outbound-filter-date-calendar header{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;min-height:40px}.outbound-filter-date-calendar header strong{color:#17304b;text-align:center;font-size:14px}.outbound-filter-date-calendar header button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:8px;background:#edfafd;color:#078da9;font:inherit;font-size:21px;cursor:pointer}.outbound-filter-date-calendar header button:hover{background:#d9f6fb}
.outbound-filter-calendar-week,.outbound-filter-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.outbound-filter-calendar-week span{display:grid;place-items:center;height:27px;color:#728296;font-size:11px;font-weight:700}.outbound-filter-calendar-day{display:grid;place-items:center;aspect-ratio:1;min-width:0;border:0;border-radius:8px;padding:0;background:transparent;color:#263b54;font:inherit;font-size:12px;font-weight:700;cursor:pointer}.outbound-filter-calendar-day:hover{background:#e4f9fd;color:#078da9}.outbound-filter-calendar-day.outside{color:#a8b3bf}.outbound-filter-calendar-day.today{box-shadow:inset 0 0 0 1px rgba(8,169,198,.55);color:#078da9}.outbound-filter-calendar-day.selected{background:#079ab7;color:#fff;box-shadow:0 6px 14px rgba(8,150,181,.2)}
.outbound-filter-date-calendar footer{display:flex;justify-content:space-between;margin-top:7px;border-top:1px solid rgba(9,171,201,.13);padding-top:8px}.outbound-filter-date-calendar footer button{min-height:32px;border:0;border-radius:8px;padding:0 10px;background:transparent;color:#078da9;font:inherit;font-size:12px;font-weight:750;cursor:pointer}.outbound-filter-date-calendar footer button:hover{background:#e7fafe}
.outbound-filter-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:15px;padding-top:14px;border-top:1px solid #deeaef}
.outbound-filter-summary{display:flex;align-items:center;flex:1;flex-wrap:wrap;gap:8px 18px;color:#687b8e;font-size:13px}
.outbound-filter-summary span:first-child{color:#25384d;font-weight:750}.outbound-filter-summary b{color:#0794af;font-size:18px}
.outbound-filter-actions button{min-height:40px;white-space:nowrap}
.outbound-filter-actions .primary-btn{border-color:#08a7c5;background:#08a7c5;color:#fff}
.outbound-high-value-detail-table{min-width:1500px}.outbound-high-value-detail-table td:nth-child(2),.outbound-high-value-detail-table td:nth-child(3){min-width:150px}.outbound-high-value-detail-table td:nth-child(12){min-width:180px}
.outbound-export-card{width:min(780px,94vw);overflow:hidden}
.outbound-export-card .modal-head{padding:22px 24px;border-bottom:1px solid #dfe9ef}
.outbound-export-card .modal-head h2{margin:0;color:#1d3047}.outbound-export-card .modal-head p{margin:6px 0 0;color:#718497;font-size:13px}
.outbound-export-card .icon-btn{width:40px;height:40px;border:0;border-radius:10px;background:#edf5f8;color:#64748b;font-size:20px;cursor:pointer}
.outbound-export-body{display:grid;gap:16px;padding:22px 24px}
.outbound-export-range-card{display:grid;gap:14px;border:1px solid rgba(9,169,199,.22);border-radius:14px;padding:16px 18px;background:linear-gradient(115deg,#f1fbfd 0%,#f7f9ff 100%);box-shadow:0 8px 22px rgba(38,91,115,.06)}
.outbound-export-range-card>header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}.outbound-export-range-card>header div{display:grid;gap:3px}.outbound-export-range-card>header span{color:#0799b5;font-size:10px;font-weight:900;letter-spacing:.14em}.outbound-export-range-card>header b{color:#20364d;font-size:15px}.outbound-export-range-card>header small{color:#71869a;font-size:12px}
.outbound-export-date-grid{display:grid;grid-template-columns:1fr 30px 1fr;align-items:end;gap:10px}.outbound-export-date-grid label{display:grid;gap:7px;color:#52677b;font-size:12px;font-weight:800}.outbound-export-date-grid input{width:100%;height:43px;box-sizing:border-box;border:1px solid #cbdde7;border-radius:10px;padding:0 12px;background:#fff;color:#20364d;font:inherit;font-size:14px;font-weight:700;outline:0}.outbound-export-date-grid input:focus{border-color:#09a7c5;box-shadow:0 0 0 3px rgba(9,167,197,.11)}.outbound-export-date-grid i{display:grid;place-items:center;height:43px;color:#7c8ea0;font-size:12px;font-style:normal;font-weight:800}.outbound-export-range-card>p{margin:0;color:#dc4c4c;font-size:12px;font-weight:700}
.outbound-export-date-grid label{position:relative;z-index:2}.outbound-export-date-grid label:has(.outbound-filter-date-picker.open){z-index:60}.outbound-export-date-grid .outbound-filter-date-trigger{height:43px;border-radius:10px}.outbound-export-date-grid label:last-child .outbound-filter-date-calendar{right:0;left:auto}
.outbound-export-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.outbound-export-options label{display:flex;align-items:flex-start;gap:11px;min-height:68px;box-sizing:border-box;border:1px solid #d7e4eb;border-radius:11px;padding:13px;background:#fff;cursor:pointer}
.outbound-export-options label:hover{border-color:#76c8d9;background:#f6fcfd}.outbound-export-options input{width:17px;height:17px;margin:2px 0 0;accent-color:#08a7c5}.outbound-export-options span{display:grid;gap:4px}.outbound-export-options b{color:#26394e;font-size:14px}.outbound-export-options small{color:#7a8c9d;font-size:12px}
.outbound-export-card>footer{display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #dfe9ef;padding:16px 24px;background:#f9fcfd}.outbound-export-card>footer button{min-width:112px;min-height:42px}.outbound-export-card>footer .primary-btn{border-color:#08a7c5;background:#08a7c5;color:#fff}
@media(max-width:1200px){.outbound-filter-grid{grid-template-columns:repeat(2,minmax(150px,1fr))}.outbound-filter-range-field{grid-column:1/-1}}
@media(max-width:720px){.outbound-filter-panel{padding:14px}.outbound-filter-grid{grid-template-columns:1fr 1fr}.outbound-filter-grid>label:last-child{grid-column:1/-1}.outbound-filter-date-field:nth-child(2) .outbound-filter-date-calendar{right:0;left:auto}.outbound-filter-actions{align-items:stretch;flex-wrap:wrap}.outbound-filter-summary{flex-basis:100%}.outbound-filter-actions button{flex:1}.outbound-export-options{grid-template-columns:1fr}.outbound-export-range-card>header{align-items:flex-start;flex-direction:column}.outbound-export-date-grid{grid-template-columns:1fr}.outbound-export-date-grid i{height:auto}.outbound-export-card>footer{position:sticky;bottom:0}.outbound-export-card>footer button{min-width:0;flex:1}}
@media(prefers-reduced-motion:reduce){.outbound-filter-date-trigger{transition:none}}
#wageSettlement .performance-content,#wageSettlement .performance-filter-card,#wageSettlement .wage-filter-grid,#wageSettlement .wage-month-picker{overflow:visible}#wageSettlement .performance-filter-card{position:relative;z-index:5}#wageSettlement .performance-filter-card:has(.wage-month-trigger[aria-expanded="true"]){z-index:2000}#wageSettlement .wage-month-picker{position:relative;z-index:2100}#wageSettlement .wage-month-popover{z-index:2200;max-height:min(460px,calc(100vh - 180px));overflow-y:auto;isolation:isolate}

@media(max-width:760px){.finance-range-popover{max-height:calc(100vh - 24px);overflow:auto;padding:13px}.finance-range-popover>footer{align-items:stretch;flex-direction:column}.finance-range-popover>footer>div{justify-content:space-between}.finance-range-selected{grid-template-columns:1fr 24px 1fr}.wage-filter-grid .wage-time-filter{grid-column:1/-1}#wageSettlement .wage-filter-grid:has([data-wage-time-range]:not([hidden])){grid-template-columns:1fr}#wageSettlement .wage-time-filter .finance-time-filter-shell:has([data-wage-time-range]:not([hidden])){grid-template-columns:1fr;width:100%}}
#wageSettlement .wage-table .wage-money-edit{width:100px;height:34px;border-color:rgba(10,169,199,.32);border-radius:8px;background:#f9fcff;color:#172235;font-weight:700}#wageSettlement .wage-table .wage-money-edit:focus{border-color:#0aa9c7;box-shadow:0 0 0 3px rgba(10,169,199,.12);outline:0}#wageSettlement .wage-table .wage-deduction-edit{border-color:rgba(239,68,68,.25);color:#dc2626;background:#fffafa}#wageSettlement .wage-table .wage-deduction-edit:focus{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.1)}

/* Patient family center. */
.patients-console-menu .patients-console-section-link{display:block;width:100%;border:0;border-radius:10px;padding:12px 14px;background:transparent;color:#415b72;font:inherit;font-weight:800;text-align:left;cursor:pointer}.patients-console-menu .patients-console-section-link:hover,.patients-console-menu .patients-console-section-link.active{background:linear-gradient(100deg,#d5f4f8,#e5edff);color:#078aa5;box-shadow:inset 3px 0 0 #08a9c6}.patient-center-family-link{display:block;width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.patients-family-workspace{min-width:0;padding:24px}.patients-family-workspace>header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.patients-family-workspace>header span{color:#08a1bd;font-size:11px;font-weight:900;letter-spacing:.16em}.patients-family-workspace>header h2{margin:6px 0;color:#173047;font-size:26px}.patients-family-workspace>header p{margin:0;color:#74889b}.patients-family-summary{display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:12px;margin-bottom:16px}.patients-family-summary article{border:1px solid rgba(112,164,190,.2);border-radius:14px;padding:17px 19px;background:#fff;box-shadow:0 10px 24px rgba(37,88,112,.07)}.patients-family-summary span,.patients-family-summary small{display:block;color:#72869a;font-size:12px}.patients-family-summary b{display:block;margin:6px 0;color:#078ba5;font-size:27px}.patients-family-list{display:grid;gap:12px}.patients-family-card{display:grid;grid-template-columns:minmax(210px,1fr) 110px minmax(210px,1fr) minmax(160px,.7fr);align-items:center;gap:15px;border:1px solid rgba(112,164,190,.2);border-radius:15px;padding:18px 20px;background:rgba(255,255,255,.96);box-shadow:0 10px 26px rgba(38,83,108,.07)}.patients-family-person{display:flex;align-items:center;gap:11px;min-width:0}.patients-family-person>button{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border:0;border-radius:50%;background:linear-gradient(135deg,#13b6c9,#4389dc);color:#fff;font:inherit;font-weight:900;cursor:pointer}.patients-family-person strong,.patients-family-person small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.patients-family-person strong{color:#20384d}.patients-family-person small{margin-top:4px;color:#7b8e9f;font-size:12px}.patients-family-relation{display:flex;align-items:center;justify-content:center;gap:8px}.patients-family-relation span{border-radius:999px;padding:5px 10px;background:#e7f7fa;color:#078aa5;font-size:12px;font-weight:800}.patients-family-relation i{color:#94a6b5;font-style:normal}.patients-family-card>p{margin:0;color:#667b8d;font-size:13px}.patients-family-empty,.patients-family-state{display:grid;place-items:center;min-height:250px;border:1px dashed #cbdde7;border-radius:16px;background:rgba(255,255,255,.7);color:#708496;text-align:center}.patients-family-empty b{color:#294358;font-size:17px}.patients-family-empty p{margin:7px 0 0}.patients-family-state span{width:28px;height:28px;border:3px solid #d5e8ef;border-top-color:#09a8c3;border-radius:50%;animation:patientFamilySpin .8s linear infinite}.patients-family-state p{margin:10px 0}@keyframes patientFamilySpin{to{transform:rotate(360deg)}}@media(max-width:1050px){.patients-family-card{grid-template-columns:1fr 80px 1fr}.patients-family-card>p{grid-column:1/-1}}@media(max-width:700px){.patients-family-workspace{padding:16px}.patients-family-summary{grid-template-columns:1fr 1fr}.patients-family-card{grid-template-columns:1fr}.patients-family-relation{justify-content:flex-start}.patients-family-relation i{transform:rotate(90deg)}}

/* Monthly finance report — clinical blue direction. */
.monthly-finance-view{--mf-blue:#167fbd;--mf-green:#2ca77e;--mf-coral:#e98568;min-height:100%;padding:26px 30px 48px!important;background:#f4f8fb;color:#162235}.mf-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}.mf-header p{margin:0 0 7px;color:var(--mf-blue);font-size:11px;font-weight:850;letter-spacing:.17em}.mf-header h2{margin:0;font-size:29px;letter-spacing:-.04em}.mf-header span{display:block;margin-top:7px;color:#718297;font-size:13px}.mf-header-actions{display:flex;align-items:center;gap:9px}.mf-header-actions label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.mf-header-actions input,.mf-header-actions button{height:40px;border:1px solid #d5e2ea;border-radius:9px;padding:0 13px;background:#fff;color:#34465a;font:inherit}.mf-header-actions button{border-color:#b9d8e9;color:#0f719f;font-weight:750;cursor:pointer}.mf-header-actions button:active{transform:translateY(1px)}.mf-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px}.mf-kpis article,.mf-card{border:1px solid #e0eaf0;background:#fff;box-shadow:0 8px 26px rgba(42,84,112,.07)}.mf-kpis article{position:relative;overflow:hidden;min-height:128px;border-radius:14px;padding:20px 21px}.mf-kpis article:before{position:absolute;top:0;left:0;width:100%;height:3px;background:var(--mf-blue);content:""}.mf-kpis article:nth-child(2):before{background:var(--mf-coral)}.mf-kpis article:nth-child(3):before{background:var(--mf-green)}.mf-kpis article:nth-child(4):before{background:#7a8ca3}.mf-kpis span{display:block;color:#6a7b8e;font-size:13px}.mf-kpis strong{display:block;margin:9px 0 5px;color:#142337;font-size:25px;font-variant-numeric:tabular-nums}.mf-kpis strong.negative{color:#bd4e42}.mf-kpis small{color:#8493a3;font-size:12px}.mf-kpis .mf-compare.positive{color:#23805f;font-weight:750}.mf-kpis .mf-compare.negative{color:#bd5a4b;font-weight:750}.mf-kpis .mf-compare.neutral{color:#8493a3}.mf-chart-grid{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(280px,.8fr);gap:14px;margin-bottom:14px}.mf-card{border-radius:14px}.mf-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 21px 0}.mf-card h3{margin:0;color:#19283a;font-size:16px}.mf-card header p{margin:5px 0 0;color:#8794a3;font-size:12px}.mf-legend{display:flex;gap:15px;color:#728093;font-size:12px}.mf-legend span:before{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--mf-blue);content:""}.mf-legend .expense:before{background:var(--mf-coral)}.mf-chart{height:285px;padding:12px 16px 10px}.mf-chart svg{width:100%;height:100%;overflow:visible}.mf-chart line{stroke:#e8eef2;stroke-width:1}.mf-chart polyline{fill:none;stroke-linecap:round;stroke-linejoin:round}.mf-income-line{stroke:var(--mf-blue);stroke-width:4}.mf-expense-line{stroke:var(--mf-coral);stroke-width:3}.mf-chart text{fill:#8a98a8;font-size:10px}.mf-donut-wrap{display:grid;justify-items:center;padding:18px 20px 20px}.mf-donut{display:grid;place-items:center;width:154px;height:154px;border-radius:50%;background:#e7eef2}.mf-donut>div{display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:white}.mf-donut small{color:#8392a2;font-size:11px}.mf-donut b{margin-top:3px;font-size:16px}.mf-breakdown-list{display:grid;gap:9px;width:100%;margin-top:19px}.mf-breakdown-list div{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px;color:#607185;font-size:12px}.mf-breakdown-list i{width:8px;height:8px;border-radius:50%}.mf-breakdown-list b{color:#2f4054}.mf-breakdown-list p{color:#8997a5;text-align:center}@media(max-width:1150px){.mf-kpis{grid-template-columns:repeat(2,1fr)}.mf-chart-grid{grid-template-columns:1fr}}@media(max-width:700px){.monthly-finance-view{padding:20px 14px 36px!important}.mf-header{align-items:flex-start;flex-direction:column}.mf-header-actions{width:100%}.mf-header-actions input{flex:1}.mf-kpis{grid-template-columns:1fr}.mf-chart{height:240px}}

/* Monthly finance report: system-aligned card workspace with full-height charts. */
.monthly-finance-view.active {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 18px;
  min-height: calc(100dvh - 92px);
  padding: 14px 18px 18px !important;
  background:
    radial-gradient(circle at 18% 4%, rgba(31, 194, 214, .09), transparent 27%),
    linear-gradient(135deg, #f4f9fc, #f7f8fc 54%, #eef3ff);
}

.monthly-finance-view .mf-header {
  position: relative;
  isolation: isolate;
  align-items: center;
  min-height: 126px;
  overflow: visible;
  margin: 0;
  padding: 24px 30px;
  border: 1px solid rgba(10, 169, 199, .25);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(218, 248, 252, .9), rgba(255, 255, 255, .96) 45%, rgba(231, 237, 255, .82));
  box-shadow: 0 18px 42px rgba(66, 104, 139, .11);
}

.monthly-finance-view .mf-header::after {
  position: absolute;
  z-index: -1;
  right: 7%;
  bottom: -100px;
  width: 340px;
  height: 210px;
  border-radius: 50%;
  background: rgba(30, 170, 205, .12);
  filter: blur(48px);
  content: "";
  pointer-events: none;
}

.monthly-finance-view .mf-header p {
  margin-bottom: 8px;
  color: #079bb8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.monthly-finance-view .mf-header h2 {
  font-size: clamp(30px, 2vw, 38px);
}

.monthly-finance-view .mf-header span {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 650;
}

.monthly-finance-view .mf-header-actions {
  gap: 12px;
}

.monthly-finance-view .mf-header-actions input,
.monthly-finance-view .mf-header-actions button {
  height: 48px;
  border-radius: 11px;
  padding: 0 17px;
  background: rgba(255, 255, 255, .9);
  font-size: 15px;
}

.monthly-finance-view .mf-header-actions button {
  min-width: 104px;
  border-color: rgba(10, 169, 199, .35);
  color: #078ba5;
  box-shadow: 0 8px 20px rgba(31, 145, 177, .1);
}

.monthly-finance-view .mf-header:has(.mf-month-picker.open) {
  z-index: 120;
}

.monthly-finance-view .mf-month-picker {
  position: relative;
  min-width: 190px;
}

.monthly-finance-view .mf-month-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  min-width: 190px;
  color: #30465b;
  text-align: left;
}

.monthly-finance-view .mf-month-trigger span {
  margin: 0;
  color: inherit;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.monthly-finance-view .mf-month-trigger svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: #078ba5;
}

.monthly-finance-view .mf-month-picker.open .mf-month-trigger,
.monthly-finance-view .mf-month-trigger:focus-visible {
  border-color: #0aa9c7;
  outline: 0;
  box-shadow: 0 0 0 4px rgba(10, 169, 199, .13), 0 10px 24px rgba(31, 145, 177, .12);
}

.monthly-finance-view .mf-month-popover[hidden] {
  display: none;
}

.monthly-finance-view .mf-month-popover {
  position: absolute;
  z-index: 140;
  top: calc(100% + 12px);
  right: 0;
  width: 360px;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid rgba(112, 164, 190, .28);
  border-radius: 18px;
  background: rgba(252, 254, 255, .98);
  box-shadow: 0 24px 58px rgba(36, 70, 96, .22), inset 0 1px 0 rgba(255, 255, 255, .82);
}

.monthly-finance-view .mf-month-popover-head {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.monthly-finance-view .mf-month-popover-head strong {
  color: #20384d;
  font-size: 17px;
  text-align: center;
}

.monthly-finance-view .mf-month-popover :is(.mf-month-popover-head button, footer button) {
  min-width: 0;
  height: 40px;
  border: 1px solid #d7e4ec;
  border-radius: 10px;
  padding: 0 13px;
  background: #f7fbfd;
  color: #456176;
  box-shadow: none;
}

.monthly-finance-view .mf-month-popover-head button {
  padding: 0;
  font-size: 27px;
  line-height: 1;
}

.monthly-finance-view .mf-month-popover button:is(:hover, :focus-visible) {
  border-color: rgba(10, 169, 199, .55);
  outline: 0;
  background: #eefafd;
  color: #078ba5;
}

.monthly-finance-view .mf-month-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.monthly-finance-view .mf-month-grid button {
  display: grid;
  justify-items: start;
  min-width: 0;
  height: 64px;
  border: 1px solid #e0e9ef;
  border-radius: 12px;
  padding: 10px 12px;
  background: #f8fbfd;
  color: #30475c;
  box-shadow: none;
  text-align: left;
}

.monthly-finance-view .mf-month-grid button span {
  margin: 0;
  color: inherit;
  font-size: 15px;
  font-weight: 850;
}

.monthly-finance-view .mf-month-grid button small {
  color: #94a3b1;
  font-size: 10px;
}

.monthly-finance-view .mf-month-grid button.current:not(.selected) {
  border-color: rgba(10, 169, 199, .4);
  background: #effafd;
}

.monthly-finance-view .mf-month-grid button.selected {
  border-color: #0aa9c7;
  background: linear-gradient(135deg, #0aa9c7, #2889cc);
  color: #fff;
  box-shadow: 0 9px 18px rgba(12, 145, 184, .22);
}

.monthly-finance-view .mf-month-grid button.selected small {
  color: rgba(255, 255, 255, .8);
}

.monthly-finance-view .mf-month-popover footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid #e5edf2;
}

.monthly-finance-view .mf-month-popover footer button.primary {
  border-color: #0aa9c7;
  background: #0aa9c7;
  color: #fff;
}

.monthly-finance-view .mf-kpis {
  gap: 18px;
  margin: 0;
}

.monthly-finance-view .mf-kpis article,
.monthly-finance-view .mf-card {
  border-color: rgba(151, 177, 203, .25);
  border-radius: 18px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 15px 38px rgba(67, 96, 126, .09);
}

.monthly-finance-view .mf-kpis article {
  display: grid;
  align-content: center;
  min-height: 164px;
  padding: 26px 28px;
}

.monthly-finance-view .mf-kpis article:nth-child(1) {
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(235, 248, 253, .9));
}

.monthly-finance-view .mf-kpis article:nth-child(2) {
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(255, 243, 239, .88));
}

.monthly-finance-view .mf-kpis article:nth-child(3) {
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(236, 249, 244, .9));
}

.monthly-finance-view .mf-kpis article:nth-child(4) {
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(241, 245, 250, .94));
}

.monthly-finance-view .mf-kpis span {
  font-size: 15px;
  font-weight: 750;
}

.monthly-finance-view .mf-kpis strong {
  margin: 12px 0 8px;
  font-size: clamp(29px, 2vw, 36px);
  line-height: 1.05;
}

.monthly-finance-view .mf-kpis small {
  font-size: 13px;
}

.monthly-finance-view .mf-chart-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(360px, .8fr);
  gap: 18px;
  min-height: 0;
  height: 100%;
  margin: 0;
}

.monthly-finance-view .mf-chart-grid > .mf-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

.monthly-finance-view .mf-chart-grid > .mf-trend-card {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.monthly-finance-view .mf-card > header {
  padding: 26px 28px 0;
}

.monthly-finance-view .mf-card h3 {
  font-size: 19px;
}

.monthly-finance-view .mf-card header p,
.monthly-finance-view .mf-legend {
  font-size: 13px;
}

.monthly-finance-view .mf-chart {
  width: 100%;
  height: 100%;
  min-height: 360px;
  padding: 18px 24px 24px;
}

.monthly-finance-view .mf-daily-chart .mf-y-tick line {
  stroke: #dfe9ef;
  stroke-width: 1;
}

.monthly-finance-view .mf-daily-chart .mf-axis-line {
  stroke: #aebfcb;
  stroke-width: 1.25;
}

.monthly-finance-view .mf-daily-chart :is(.mf-y-tick text, .mf-x-tick text, .mf-axis-title) {
  fill: #718398;
  font-size: 11px;
  font-weight: 700;
}

.monthly-finance-view .mf-daily-chart .mf-x-tick line {
  stroke: #aebfcb;
  stroke-width: 1;
}

.monthly-finance-view .mf-daily-chart .mf-day-guide {
  opacity: 0;
  stroke: #88a7b8;
  stroke-width: 1;
  stroke-dasharray: 4 5;
  transition: opacity .15s ease;
}

.monthly-finance-view .mf-daily-chart .mf-day-hit {
  fill: transparent;
  cursor: crosshair;
  pointer-events: all;
}

.monthly-finance-view .mf-daily-chart .mf-series-area {
  pointer-events: none;
}

.monthly-finance-view .mf-daily-chart .mf-income-area {
  fill: url(#mfIncomeArea);
}

.monthly-finance-view .mf-daily-chart .mf-expense-area {
  fill: url(#mfExpenseArea);
}

.monthly-finance-view .mf-daily-chart .mf-series-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.monthly-finance-view .mf-daily-chart .mf-income-line {
  stroke-width: 2.35;
}

.monthly-finance-view .mf-daily-chart .mf-expense-line {
  stroke-width: 2.1;
}

.monthly-finance-view .mf-daily-chart .mf-income-point {
  fill: var(--mf-blue);
  stroke: #f7fbfd;
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity .15s ease, r .15s ease;
}

.monthly-finance-view .mf-daily-chart .mf-expense-point {
  fill: var(--mf-coral);
  stroke: #f7fbfd;
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity .15s ease, stroke-width .15s ease;
}

.monthly-finance-view .mf-daily-chart .mf-day-group:is(:hover, .selected) .mf-day-guide {
  opacity: .75;
}

.monthly-finance-view .mf-daily-chart .mf-day-group:is(:hover, .selected) .mf-income-point {
  opacity: 1;
  r: 5.5px;
}

.monthly-finance-view .mf-daily-chart .mf-day-group:is(:hover, .selected) .mf-expense-point {
  opacity: 1;
  stroke-width: 2.5;
}

.monthly-finance-view .mf-chart-detail {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 58px;
  padding: 12px 28px;
  border-top: 1px solid #e2ebf1;
  background: rgba(247, 251, 253, .82);
  color: #61758a;
  font-size: 13px;
}

.monthly-finance-view .mf-chart-detail strong {
  margin-right: auto;
  color: #243b51;
  font-size: 15px;
}

.monthly-finance-view .mf-chart-detail span {
  white-space: nowrap;
}

.monthly-finance-view .mf-chart-detail b {
  margin-left: 5px;
  font-size: 14px;
}

.monthly-finance-view .mf-chart-detail b.income {
  color: #147fb8;
}

.monthly-finance-view .mf-chart-detail b.expense {
  color: #c96650;
}

.monthly-finance-view .mf-donut-wrap {
  align-content: center;
  min-height: 0;
  padding: 20px 28px 28px;
}

.monthly-finance-view .mf-donut {
  width: clamp(190px, 22vh, 250px);
  height: clamp(190px, 22vh, 250px);
}

.monthly-finance-view .mf-donut > div {
  width: 61%;
  height: 61%;
}

.monthly-finance-view .mf-donut small {
  font-size: 13px;
}

.monthly-finance-view .mf-donut b {
  font-size: 20px;
}

.monthly-finance-view .mf-breakdown-list {
  gap: 12px;
  max-width: 520px;
  margin-top: 26px;
}

.monthly-finance-view .mf-breakdown-list div {
  font-size: 14px;
}

html.dark .monthly-finance-view.active,
html[data-theme="dark"] .monthly-finance-view.active {
  background: linear-gradient(135deg, #111b29, #152031 54%, #151d2f);
  color: #e8f1fb;
}

html.dark .monthly-finance-view .mf-header,
html.dark .monthly-finance-view .mf-kpis article,
html.dark .monthly-finance-view .mf-card,
html[data-theme="dark"] .monthly-finance-view .mf-header,
html[data-theme="dark"] .monthly-finance-view .mf-kpis article,
html[data-theme="dark"] .monthly-finance-view .mf-card {
  border-color: rgba(154, 183, 211, .2);
  background: rgba(24, 36, 52, .92);
  box-shadow: 0 16px 38px rgba(4, 10, 20, .24);
}

html.dark .monthly-finance-view :is(.mf-header h2, .mf-kpis strong, .mf-card h3, .mf-breakdown-list b, .mf-donut b),
html[data-theme="dark"] .monthly-finance-view :is(.mf-header h2, .mf-kpis strong, .mf-card h3, .mf-breakdown-list b, .mf-donut b) {
  color: #edf5ff;
}

html.dark .monthly-finance-view .mf-donut > div,
html[data-theme="dark"] .monthly-finance-view .mf-donut > div {
  background: #182434;
}

html.dark .monthly-finance-view .mf-chart-detail,
html[data-theme="dark"] .monthly-finance-view .mf-chart-detail {
  border-top-color: rgba(154, 183, 211, .18);
  background: rgba(19, 31, 46, .72);
  color: #aebed0;
}

html.dark .monthly-finance-view .mf-chart-detail strong,
html[data-theme="dark"] .monthly-finance-view .mf-chart-detail strong {
  color: #edf5ff;
}

html.dark .monthly-finance-view .mf-daily-chart :is(.mf-y-tick text, .mf-x-tick text, .mf-axis-title),
html[data-theme="dark"] .monthly-finance-view .mf-daily-chart :is(.mf-y-tick text, .mf-x-tick text, .mf-axis-title) {
  fill: #9fb0c4;
}

html.dark .monthly-finance-view .mf-daily-chart .mf-y-tick line,
html[data-theme="dark"] .monthly-finance-view .mf-daily-chart .mf-y-tick line {
  stroke: rgba(159, 176, 196, .18);
}

html.dark .monthly-finance-view .mf-month-trigger,
html[data-theme="dark"] .monthly-finance-view .mf-month-trigger {
  border-color: rgba(154, 183, 211, .25);
  background: rgba(28, 43, 60, .96);
  color: #e5eff8;
}

html.dark .monthly-finance-view .mf-month-popover,
html[data-theme="dark"] .monthly-finance-view .mf-month-popover {
  border-color: rgba(154, 183, 211, .24);
  background: #182535;
  box-shadow: 0 24px 58px rgba(3, 9, 18, .48), inset 0 1px 0 rgba(255, 255, 255, .05);
}

html.dark .monthly-finance-view .mf-month-popover-head strong,
html[data-theme="dark"] .monthly-finance-view .mf-month-popover-head strong {
  color: #edf5ff;
}

html.dark .monthly-finance-view .mf-month-popover :is(.mf-month-popover-head button, footer button, .mf-month-grid button),
html[data-theme="dark"] .monthly-finance-view .mf-month-popover :is(.mf-month-popover-head button, footer button, .mf-month-grid button) {
  border-color: rgba(154, 183, 211, .2);
  background: #213247;
  color: #dbe8f5;
}

html.dark .monthly-finance-view .mf-month-grid button.selected,
html[data-theme="dark"] .monthly-finance-view .mf-month-grid button.selected {
  border-color: #16b6d1;
  background: linear-gradient(135deg, #079dbb, #277fc2);
  color: #fff;
}

html.dark .monthly-finance-view .mf-month-popover footer,
html[data-theme="dark"] .monthly-finance-view .mf-month-popover footer {
  border-top-color: rgba(154, 183, 211, .18);
}

html.dark .monthly-finance-view .mf-month-popover footer button.primary,
html[data-theme="dark"] .monthly-finance-view .mf-month-popover footer button.primary {
  border-color: #0aa9c7;
  background: #0aa9c7;
  color: #fff;
}

@media (max-width: 1150px) {
  .monthly-finance-view.active {
    display: block;
    min-height: calc(100dvh - 92px);
  }

  .monthly-finance-view .mf-header,
  .monthly-finance-view .mf-kpis {
    margin-bottom: 18px;
  }

  .monthly-finance-view .mf-chart-grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .monthly-finance-view .mf-chart-grid > .mf-card {
    min-height: 470px;
  }
}

@media (max-width: 700px) {
  .monthly-finance-view.active {
    padding: 10px !important;
  }

  .monthly-finance-view .mf-header {
    align-items: flex-start;
    min-height: 0;
    padding: 22px;
  }

  .monthly-finance-view .mf-header-actions {
    width: 100%;
  }

  .monthly-finance-view .mf-month-picker {
    flex: 1;
    min-width: 0;
  }

  .monthly-finance-view .mf-month-trigger {
    min-width: 0;
  }

  .monthly-finance-view .mf-month-popover {
    right: auto;
    left: 0;
    width: min(360px, calc(100vw - 44px));
  }

  .monthly-finance-view .mf-header-actions button {
    min-width: 96px;
  }

  .monthly-finance-view .mf-kpis article {
    min-height: 142px;
    padding: 22px;
  }

  .monthly-finance-view .mf-chart-grid > .mf-card {
    min-height: 420px;
  }

  .monthly-finance-view .mf-chart {
    min-height: 300px;
    padding: 12px;
  }

  .monthly-finance-view .mf-chart-detail {
    flex-wrap: wrap;
    gap: 7px 16px;
    padding: 12px 18px;
  }

  .monthly-finance-view .mf-chart-detail strong {
    flex: 0 0 100%;
  }

  .monthly-finance-view .mf-donut {
    width: 190px;
    height: 190px;
  }
}

/* Monthly finance template integration: shadcn-like surfaces + restrained border beam. */
.monthly-finance-view .mf-header {
  overflow: hidden;
  border-color: rgba(116, 164, 192, .2);
  background:
    radial-gradient(circle at 11% 10%, rgba(47, 196, 218, .13), transparent 30%),
    linear-gradient(118deg, rgba(250, 254, 255, .98), rgba(246, 250, 255, .96) 58%, rgba(238, 244, 255, .94));
}

.monthly-finance-view .mf-header > *:not(.mf-template-border-beam) {
  position: relative;
  z-index: 2;
}

.monthly-finance-view .mf-template-border-beam {
  position: absolute;
  z-index: 1;
  inset: -1px;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
}

.monthly-finance-view .mf-template-border-beam::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 190%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, transparent 0 73%, rgba(8, 157, 190, .08) 78%, rgba(8, 157, 190, .8) 84%, rgba(77, 126, 220, .52) 89%, transparent 95%);
  content: "";
  transform: translate(-50%, -50%);
  animation: mfTemplateBorderBeam 9s linear infinite;
}

@keyframes mfTemplateBorderBeam {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

.monthly-finance-view .mf-kpis article,
.monthly-finance-view .mf-card {
  border-color: rgba(137, 166, 191, .2);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(39, 72, 98, .035),
    0 12px 30px rgba(53, 89, 119, .075);
}

.monthly-finance-view .mf-kpis article {
  transition: border-color .2s ease-out, box-shadow .2s ease-out, transform .2s ease-out;
}

.monthly-finance-view .mf-kpis article:is(.mf-kpi-action):is(:hover, :focus-visible) {
  border-color: rgba(8, 157, 190, .36);
  outline: none;
  box-shadow:
    0 1px 2px rgba(39, 72, 98, .04),
    0 18px 38px rgba(26, 123, 154, .12);
  transform: translateY(-2px);
}

.monthly-finance-view .mf-card > header {
  align-items: center;
  padding-top: 24px;
}

.monthly-finance-view .mf-card-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #078da9;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.monthly-finance-view .mf-card h3 {
  font-size: 18px;
  letter-spacing: -.015em;
}

.monthly-finance-view .mf-legend {
  padding: 7px 10px;
  border: 1px solid rgba(139, 168, 191, .18);
  border-radius: 9px;
  background: rgba(247, 250, 252, .82);
}

html.dark .monthly-finance-view .mf-template-border-beam::after,
html[data-theme="dark"] .monthly-finance-view .mf-template-border-beam::after {
  background: conic-gradient(from 0deg, transparent 0 73%, rgba(49, 198, 224, .08) 78%, rgba(49, 198, 224, .85) 85%, rgba(97, 136, 232, .6) 90%, transparent 96%);
}

html.dark .monthly-finance-view .mf-legend,
html[data-theme="dark"] .monthly-finance-view .mf-legend {
  border-color: rgba(154, 183, 211, .18);
  background: rgba(20, 32, 47, .72);
}

@media (prefers-reduced-motion: reduce) {
  .monthly-finance-view .mf-template-border-beam::after {
    animation: none;
  }

  .monthly-finance-view .mf-kpis article {
    transition: none;
  }
}

/* Monthly finance card unification: one surface, one radius, one elevation. */
.monthly-finance-view {
  --mf-card-bg: rgba(255, 255, 255, .96);
  --mf-card-border: rgba(137, 166, 191, .22);
  --mf-card-shadow: 0 1px 2px rgba(39, 72, 98, .035), 0 12px 30px rgba(53, 89, 119, .075);
  --mf-card-radius: 16px;
}

.monthly-finance-view .mf-kpis article,
.monthly-finance-view .mf-card {
  border: 1px solid var(--mf-card-border);
  border-radius: var(--mf-card-radius);
  background: var(--mf-card-bg);
  box-shadow: var(--mf-card-shadow);
}

.monthly-finance-view .mf-kpis article:nth-child(1),
.monthly-finance-view .mf-kpis article:nth-child(2),
.monthly-finance-view .mf-kpis article:nth-child(3),
.monthly-finance-view .mf-kpis article:nth-child(4) {
  background: var(--mf-card-bg);
}

.monthly-finance-view .mf-kpis article::before {
  display: none;
}

.monthly-finance-view .mf-kpis article {
  min-height: 164px;
  padding: 26px 28px;
}

.monthly-finance-view .mf-receivable-values {
  gap: 0;
}

.monthly-finance-view .mf-receivable-values > div,
.monthly-finance-view .mf-receivable-values > div:first-child {
  border-left-color: #d7e3eb;
}

.monthly-finance-view .mf-card > header {
  min-height: 104px;
  box-sizing: border-box;
  padding: 24px 28px 18px;
  border-bottom: 1px solid rgba(137, 166, 191, .14);
}

.monthly-finance-view .mf-card header p {
  margin-top: 5px;
}

.monthly-finance-view .mf-card-eyebrow {
  margin-bottom: 6px;
}

html.dark .monthly-finance-view,
html[data-theme="dark"] .monthly-finance-view {
  --mf-card-bg: rgba(24, 36, 52, .94);
  --mf-card-border: rgba(154, 183, 211, .2);
  --mf-card-shadow: 0 1px 2px rgba(3, 9, 18, .16), 0 14px 32px rgba(3, 9, 18, .22);
}

html.dark .monthly-finance-view .mf-card > header,
html[data-theme="dark"] .monthly-finance-view .mf-card > header {
  border-bottom-color: rgba(154, 183, 211, .14);
}

/* Primary navigation icon system: one size, one stroke weight, one accent. */
.sidebar .nav-item {
  gap: 12px;
  padding-left: 14px;
  padding-right: 14px;
  color: #e5e7eb;
}

.sidebar .nav-item .nav-icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  overflow: visible;
  fill: none;
  color: inherit;
  shape-rendering: geometricPrecision;
}

.sidebar .nav-item .nav-icon :is(path, rect, circle, line) {
  vector-effect: non-scaling-stroke;
}

.sidebar .nav-item:hover,
.sidebar .nav-item.active,
.sidebar .nav-item:focus-visible {
  color: #1677ff;
  background: rgba(22, 119, 255, 0.14);
  box-shadow: inset 3px 0 0 #1677ff;
}

.sidebar .nav-item:focus-visible {
  outline: 2px solid rgba(22, 119, 255, 0.42);
  outline-offset: 2px;
}

@media (min-width: 901px) {
  .sidebar:hover .nav-item,
  .sidebar:focus-within .nav-item,
  .sidebar.sidebar-hold-open .nav-item {
    font-size: 14px;
  }

  .sidebar.sidebar-force-closed .nav-item {
    font-size: 0;
  }
}

@media (max-width: 900px) {
  .sidebar .nav-item {
    justify-content: flex-start;
    gap: 12px;
    min-height: 46px;
    padding-left: 14px;
    font-size: 15px;
  }
}

/* Tax entry: compact hierarchy with the same blue interaction language as navigation. */
.sidebar .tax-sidebar-entry {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label mark"
    "description mark";
  gap: 5px 14px;
  width: 100%;
  margin-top: auto;
  min-height: 104px;
  padding: 17px 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: rgba(17, 27, 48, 0.78);
  color: #e5e7eb;
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.sidebar .tax-sidebar-entry::before {
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #1677ff;
  opacity: 0;
  content: "";
  transition: opacity 0.18s ease;
}

.sidebar .tax-sidebar-entry span {
  grid-area: label;
  align-self: end;
  color: #b9c3d3;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.sidebar .tax-sidebar-entry strong {
  grid-area: mark;
  align-self: center;
  margin: 0;
  color: #f8fafc;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  transition: color 0.18s ease, transform 0.18s ease;
}

.sidebar .tax-sidebar-entry small {
  grid-area: description;
  align-self: start;
  color: #8f9db1;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}

.sidebar .tax-sidebar-entry:hover,
.sidebar .tax-sidebar-entry.active,
.sidebar .tax-sidebar-entry:focus-visible {
  border-color: rgba(22, 119, 255, 0.72);
  background: rgba(22, 119, 255, 0.14);
  color: #1677ff;
  box-shadow: inset 0 0 0 1px rgba(22, 119, 255, 0.12), 0 10px 24px rgba(2, 12, 30, 0.18);
  transform: translateY(-2px);
}

.sidebar .tax-sidebar-entry:hover::before,
.sidebar .tax-sidebar-entry.active::before,
.sidebar .tax-sidebar-entry:focus-visible::before {
  opacity: 1;
}

.sidebar .tax-sidebar-entry:hover span,
.sidebar .tax-sidebar-entry.active span,
.sidebar .tax-sidebar-entry:focus-visible span,
.sidebar .tax-sidebar-entry:hover strong,
.sidebar .tax-sidebar-entry.active strong,
.sidebar .tax-sidebar-entry:focus-visible strong {
  color: #1677ff;
}

.sidebar .tax-sidebar-entry:hover small,
.sidebar .tax-sidebar-entry.active small,
.sidebar .tax-sidebar-entry:focus-visible small {
  color: #b8cdf3;
}

.sidebar .tax-sidebar-entry:hover strong {
  transform: scale(1.04);
}

.sidebar .tax-sidebar-entry:focus-visible {
  outline: 2px solid rgba(22, 119, 255, 0.45);
  outline-offset: 3px;
}

.sidebar .tax-sidebar-entry:active {
  transform: translateY(0) scale(0.985);
}

.sidebar .system-version {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 10px 18px;
  color: #718198;
  font-size: 10px;
  letter-spacing: .04em;
}

.sidebar .tax-sidebar-entry.permission-hidden + .system-version {
  margin-top: auto;
}

.sidebar .system-version span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar .system-version b {
  color: #91a4bc;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 901px) {
  .sidebar:not(:hover):not(:focus-within):not(.sidebar-hold-open) .system-version span { display: none; }
  .sidebar:not(:hover):not(:focus-within):not(.sidebar-hold-open) .system-version { justify-content: center; padding-right: 2px; padding-left: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .tax-sidebar-entry,
  .sidebar .tax-sidebar-entry::before,
  .sidebar .tax-sidebar-entry strong {
    transition: none;
  }
}

/* New patient: system card surface and in-flow dropdown menus. */
.patient-modal { padding: 18px; background: rgba(17,38,56,.46); backdrop-filter: blur(12px) saturate(112%); }
.patient-modal-card { width: min(1180px,calc(100vw - 36px)); max-height: calc(100dvh - 36px); overflow: auto; border: 1px solid rgba(49,181,207,.3); border-radius: 22px; background: linear-gradient(145deg,rgba(255,255,255,.99),rgba(240,249,253,.97)); box-shadow: 0 30px 80px rgba(14,43,64,.3),0 7px 22px rgba(7,164,194,.1); }
.patient-modal-card .modal-head { position: sticky; top: 0; z-index: 8; min-height: 70px; padding: 0 24px; border-bottom: 1px solid rgba(8,169,198,.14); background: linear-gradient(110deg,rgba(225,249,253,.96),rgba(245,248,255,.94)); }
.patient-modal-card .modal-head h2 { color: #142e47; font-size: 24px; font-weight: 880; }
.patient-modal-card .icon-btn { width: 42px; height: 42px; border-radius: 13px; background: #e8f7fb; color: #61768a; }
.patient-registration-form { padding: 22px 24px 82px; }
.patient-form-section { margin-bottom: 14px; padding: 20px; border: 1px solid rgba(66,173,201,.17); border-radius: 17px; background: linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,250,253,.86)); box-shadow: 0 10px 24px rgba(39,104,130,.07); }
.patient-form-section h3 { color: #18324c; font-weight: 820; }
.patient-registration-form input,.patient-registration-form select,.patient-registration-form textarea { border-color: rgba(100,146,172,.28); border-radius: 11px; background: rgba(252,254,255,.95); transition: border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.patient-registration-form input:focus,.patient-registration-form textarea:focus { border-color: rgba(5,175,207,.76); box-shadow: 0 0 0 4px rgba(5,175,207,.1); background: #fff; }
.patient-modal-actions { z-index: 9; margin: 20px -24px -82px; padding: 14px 20px; border-top-color: rgba(8,169,198,.14); background: rgba(250,253,255,.95); backdrop-filter: blur(12px); }
.patient-modal-actions button { border-radius: 11px; }
.patient-modal-actions .save-btn { border-color: transparent; background: linear-gradient(135deg,#12b5d2,#078eac); box-shadow: 0 8px 18px rgba(8,151,180,.18); }
.patient-card-select-source { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.patient-card-select { position: relative; display: grid; min-width: 0; align-self: start; }
.patient-card-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 42px; padding: 0 13px; border: 1px solid rgba(100,146,172,.28); border-radius: 11px; background: linear-gradient(145deg,#fff,#f3fbfe); color: #263d55; font: inherit; font-size: 16px; font-weight: 720; text-align: left; cursor: pointer; transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.patient-card-select-trigger:hover,.patient-card-select-trigger[aria-expanded="true"] { border-color: rgba(5,175,207,.76); box-shadow: 0 0 0 4px rgba(5,175,207,.1); }
.patient-card-select-trigger:active { transform: translateY(1px); }
.patient-card-select-trigger i { color: #078fa9; font-size: 18px; font-style: normal; }
.patient-card-select.is-disabled .patient-card-select-trigger { cursor: not-allowed; background: #f3f6f8; color: #9aa8b5; box-shadow: none; }
.patient-card-select-menu { position: relative; z-index: 2; display: grid; gap: 5px; width: 100%; max-height: 220px; overflow: auto; margin-top: 7px; padding: 8px; border: 1px solid rgba(8,169,198,.22); border-radius: 13px; background: rgba(255,255,255,.99); box-shadow: 0 15px 34px rgba(20,65,88,.14); }
.patient-card-select-menu.hidden { display: none !important; }
.patient-card-select-menu button { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 7px; min-height: 39px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: #3b5268; font: inherit; font-size: 15px; font-weight: 700; text-align: left; cursor: pointer; }
.patient-card-select-menu button:hover,.patient-card-select-menu button:focus-visible { outline: 0; background: #e6f9fd; color: #078ca7; }
.patient-card-select-menu button b { opacity: 0; color: #0799b6; }
.patient-card-select-menu button[aria-selected="true"] { background: linear-gradient(105deg,#d8f7fc,#e7efff); color: #078ca8; }
.patient-card-select-menu button[aria-selected="true"] b { opacity: 1; }
.patient-form-row:has(.patient-card-select.open) { align-items: start; }
@media (max-width: 900px) {
  .patient-modal { padding: 0; }
  .patient-modal-card { width: 100vw; max-height: 100dvh; border: 0; border-radius: 0; }
  .patient-registration-form { padding: 14px 14px 78px; }
  .patient-form-section { padding: 16px; }
  .patient-form-row,.patient-form-row.two-cols,.patient-name-row,.address-row,.source-row,.note-row { grid-template-columns: 1fr; }
  .patient-sex-field { grid-column: 1; }
  .source-search { grid-column: 1; grid-template-columns: minmax(0,1fr) 48px; }
  .patient-modal-actions { margin-right: -14px; margin-left: -14px; overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .patient-registration-form input,.patient-registration-form textarea,.patient-card-select-trigger { transition: none !important; }
  .patient-card-select-trigger:active { transform: none !important; }
}

/* Patient center: unified cyan cards and pointer spotlight. */
#patientDetail {
  --patient-detail-cyan: #08a9c6;
  --patient-detail-dark: #078ba5;
  --patient-detail-line: rgba(151, 177, 203, 0.27);
  padding: 18px 22px 32px !important;
  background:
    radial-gradient(circle at 12% 4%, rgba(8, 169, 198, 0.08), transparent 24%),
    linear-gradient(135deg, #f3f9fc 0%, #f8f9fc 55%, #edf3fb 100%);
}
#patientDetail .patient-center-shell {
  grid-template-columns: 170px 250px minmax(0, 1fr);
  gap: 16px;
  min-height: calc(100dvh - 125px);
  background: transparent;
}
#patientDetail .patient-center-menu,
#patientDetail .patient-center-list,
#patientDetail .patient-profile-head,
#patientDetail .patient-detail-tabs,
#patientDetail .patient-record-subtabs,
#patientDetail .patient-record-search-strip,
#patientDetail .patient-record-topbar,
#patientDetail .patient-record-rangebar,
#patientDetail .patient-record-timeline-shell,
#patientDetail .patient-record-timeline-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--patient-detail-line);
  background:
    radial-gradient(430px circle at var(--detail-card-x, 50%) var(--detail-card-y, 18%), rgba(8, 169, 198, 0.11), transparent 68%),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 15px 36px rgba(55, 88, 118, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
#patientDetail .patient-center-menu:hover,
#patientDetail .patient-center-list:hover,
#patientDetail .patient-profile-head:hover,
#patientDetail .patient-detail-tabs:hover,
#patientDetail .patient-record-subtabs:hover,
#patientDetail .patient-record-search-strip:hover,
#patientDetail .patient-record-topbar:hover,
#patientDetail .patient-record-rangebar:hover,
#patientDetail .patient-record-timeline-card:hover {
  border-color: rgba(8, 169, 198, 0.43);
  box-shadow: 0 21px 46px rgba(36, 124, 149, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}
#patientDetail .patient-center-menu,
#patientDetail .patient-center-list { align-self: start; border-radius: 18px; }
#patientDetail .patient-center-menu { min-height: 330px; padding: 12px 10px; }
#patientDetail .patient-center-menu-title { margin-bottom: 8px; padding: 12px 10px; border-bottom: 1px solid rgba(151, 177, 203, 0.22); color: #203247; }
#patientDetail .patient-center-menu-item {
  width: 100%;
  margin: 3px 0;
  border-radius: 10px;
  color: #56697d;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
#patientDetail .patient-center-menu-item.active,
#patientDetail .patient-center-menu-item:hover {
  background: linear-gradient(100deg, rgba(202, 243, 249, 0.94), rgba(226, 237, 255, 0.9));
  color: var(--patient-detail-dark);
  box-shadow: inset 3px 0 0 var(--patient-detail-cyan);
  transform: translateX(2px);
}
#patientDetail .patient-center-menu-group { padding: 14px 10px 8px; color: #34465a; }
#patientDetail .patient-center-list-tabs { height: 48px; padding: 5px; gap: 4px; border: 0; background: rgba(235, 245, 250, 0.72); }
#patientDetail .patient-center-list-tabs button { border: 0; border-radius: 9px; color: #607286; transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; }
#patientDetail .patient-center-list-tabs button.active { border: 0; background: #fff; color: var(--patient-detail-dark); box-shadow: 0 6px 16px rgba(39, 111, 134, 0.11), inset 0 -3px 0 var(--patient-detail-cyan); }
#patientDetail .patient-center-list-body { max-height: calc(100dvh - 190px); padding: 7px; }
#patientDetail .patient-center-card {
  margin: 3px 0;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
#patientDetail .patient-center-card:hover,
#patientDetail .patient-center-card.active {
  border-color: rgba(8, 169, 198, 0.24);
  background: linear-gradient(100deg, rgba(218, 247, 251, 0.82), rgba(235, 241, 255, 0.78));
  box-shadow: inset 3px 0 0 var(--patient-detail-cyan), 0 8px 18px rgba(38, 133, 158, 0.08);
  transform: translateX(2px);
}

#patientDetail .patient-detail-page { display: grid; align-content: start; gap: 14px; min-width: 0; min-height: 0; margin: 0; overflow: visible; background: transparent; }
#patientDetail .patient-profile-head {
  grid-template-columns: minmax(220px, 1.2fr) minmax(190px, 1fr) minmax(210px, 1fr) minmax(130px, 1fr) auto;
  min-height: 92px;
  border-radius: 18px;
}
#patientDetail .patient-profile-main,
#patientDetail .patient-profile-meta,
#patientDetail .patient-profile-source { border-right-color: rgba(151, 177, 203, 0.22); }
#patientDetail .patient-profile-head .primary-btn {
  border-color: #079fbd;
  border-radius: 10px;
  background: linear-gradient(135deg, #0bb4cf, #078db7);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 8px 18px rgba(7, 157, 189, 0.2);
}
#patientDetail .patient-detail-tabs {
  align-items: center;
  min-height: 52px;
  padding: 6px;
  gap: 4px;
  border-radius: 16px;
}
#patientDetail .patient-detail-tabs button {
  height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #526579;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
#patientDetail .patient-detail-tabs button.active {
  background: linear-gradient(135deg, #0bb4cf, #078db7);
  color: #fff;
  box-shadow: 0 7px 16px rgba(7, 157, 189, 0.2);
}
#patientDetail .patient-detail-tabs button:hover { background: rgba(8, 169, 198, 0.08); color: var(--patient-detail-dark); transform: translateY(-1px); }
#patientDetail .patient-detail-tabs button.active:hover { background: linear-gradient(135deg, #0bb4cf, #078db7); color: #fff; }
#patientDetail .patient-detail-tabs button:active { transform: scale(0.97); }

#patientDetail .patient-record-page { display: grid; gap: 14px; min-height: 0; border: 0; background: transparent; }
#patientDetail .patient-record-subtabs { min-height: 58px; padding: 7px 10px; gap: 5px; border-radius: 16px; }
#patientDetail .patient-record-subtabs button { min-width: 120px; height: 40px; margin: 0; border: 0; border-radius: 9px; color: #526579; }
#patientDetail .patient-record-subtabs button.active { min-width: 120px; border-radius: 9px; background: linear-gradient(135deg, #0bb4cf, #078db7); box-shadow: 0 7px 16px rgba(7, 157, 189, 0.18); }
#patientDetail .patient-record-search-strip { min-height: 94px; padding: 16px 20px; border-radius: 16px; }
#patientDetail .patient-record-keyword-input {
  height: 44px;
  border-color: rgba(151, 177, 203, 0.38);
  border-radius: 10px;
  background: rgba(249, 252, 255, 0.9);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
#patientDetail .patient-record-keyword-input:focus { outline: none; border-color: var(--patient-detail-cyan); background: #fff; box-shadow: 0 0 0 4px rgba(8, 169, 198, 0.1); }
#patientDetail .patient-record-search-strip .light-btn { height: 44px; border-radius: 10px; color: var(--patient-detail-dark); }
#patientDetail .patient-record-topbar {
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 72px;
  padding: 12px 14px;
  border-radius: 16px;
}
#patientDetail .patient-record-topbar select { height: 42px; border-color: rgba(151, 177, 203, 0.36); border-radius: 10px; background: rgba(255, 255, 255, 0.88); }
#patientDetail .patient-record-topbar select:focus { outline: none; border-color: var(--patient-detail-cyan); box-shadow: 0 0 0 3px rgba(8, 169, 198, 0.1); }
#patientDetail .patient-record-actions .primary-btn,
#patientDetail .patient-record-actions .light-btn { border-radius: 9px; }
#patientDetail .patient-record-actions .primary-btn { border-color: #079fbd; background: linear-gradient(135deg, #0bb4cf, #078db7); color: #fff !important; -webkit-text-fill-color: #fff !important; }
#patientDetail .patient-record-rangebar { min-height: 60px; align-items: center; padding: 8px 12px; border-radius: 16px; }
#patientDetail .patient-record-rangebar .light-btn { margin: 0; border-radius: 9px; }
#patientDetail .patient-record-timeline-shell { padding: 10px 14px 34px; border-radius: 18px; }
#patientDetail .patient-record-timeline-card { border-radius: 14px; }
#patientDetail .patient-record-timeline-card:hover { transform: translateY(-2px); }
#patientDetail .patient-record-head { background: linear-gradient(100deg, rgba(217, 247, 251, 0.9), rgba(232, 240, 255, 0.86)); }
#patientDetail .patient-record-foot-actions button,
#patientDetail .patient-record-side-actions button { border-radius: 9px; transition: transform 0.18s ease, box-shadow 0.18s ease; }
#patientDetail button:active { transform: scale(0.97); }

@media (max-width: 1350px) {
  #patientDetail .patient-center-shell { grid-template-columns: 150px 220px minmax(0, 1fr); gap: 12px; }
  #patientDetail .patient-profile-head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #patientDetail .patient-profile-source { border-top: 1px solid rgba(151, 177, 203, 0.22); }
  #patientDetail .patient-profile-head .primary-btn { justify-self: end; }
  #patientDetail .patient-record-topbar { grid-template-columns: auto minmax(0, 1fr); }
}

@media (max-width: 980px) {
  #patientDetail { padding: 14px !important; }
  #patientDetail .patient-center-shell { grid-template-columns: 180px minmax(0, 1fr); }
  #patientDetail .patient-center-menu { display: none; }
  #patientDetail .patient-center-list { grid-column: 1; }
  #patientDetail .patient-detail-page { grid-column: 2; }
  #patientDetail .patient-record-timeline-row,
  #patientDetail .patient-record-year-heading,
  #patientDetail .patient-record-year-break { grid-template-columns: 105px minmax(0, 1fr); }
  #patientDetail .patient-record-timeline-card { grid-template-columns: 1fr; }
  #patientDetail .patient-record-staff,
  #patientDetail .patient-record-plan-panel { display: none; }
}

@media (max-width: 700px) {
  #patientDetail { padding: 10px !important; }
  #patientDetail .patient-center-shell { grid-template-columns: 1fr; }
  #patientDetail .patient-center-list { position: static; min-height: 0; }
  #patientDetail .patient-center-list-body { display: flex; max-height: none; overflow-x: auto; }
  #patientDetail .patient-center-card { flex: 0 0 190px; }
  #patientDetail .patient-detail-page { grid-column: 1; }
  #patientDetail .patient-profile-head { grid-template-columns: 1fr; }
  #patientDetail .patient-profile-main,
  #patientDetail .patient-profile-meta,
  #patientDetail .patient-profile-source { border-right: 0; border-bottom: 1px solid rgba(151, 177, 203, 0.2); }
  #patientDetail .patient-profile-head .primary-btn { justify-self: stretch; margin: 10px 14px; }
  #patientDetail .patient-detail-tabs,
  #patientDetail .patient-record-subtabs { overflow-x: auto; }
  #patientDetail .patient-detail-tabs button,
  #patientDetail .patient-record-subtabs button { flex: 0 0 auto; }
  #patientDetail .patient-record-subtabs span { display: none; }
  #patientDetail .patient-record-search-strip { align-items: stretch; flex-direction: column; }
  #patientDetail .record-crosshair { width: 180px; }
  #patientDetail .patient-record-tooth-map { width: 100% !important; max-width: 240px; }
  #patientDetail .patient-record-tooth-query { width: 100%; }
  #patientDetail .patient-record-keyword-input { width: 100%; }
  #patientDetail .patient-record-topbar { grid-template-columns: 1fr; }
  #patientDetail .patient-record-actions { grid-column: 1; justify-content: flex-start; overflow-x: auto; }
  #patientDetail .patient-record-timeline-row,
  #patientDetail .patient-record-year-heading,
  #patientDetail .patient-record-year-break { grid-template-columns: 1fr; }
  #patientDetail .patient-record-time { justify-items: start; min-height: 62px; padding: 8px 12px; border-bottom: 0; }
  #patientDetail .patient-record-year-heading { padding: 12px; }
  #patientDetail .patient-record-year-heading .record-calendar-dot { justify-self: start; }
  #patientDetail .patient-record-year-break span { justify-self: start; text-align: left; }
  #patientDetail .patient-record-head { align-items: flex-start; }
  #patientDetail .patient-record-head-actions { width: 100%; margin-left: 0; overflow-x: auto; }
  #patientDetail .patient-record-line { grid-template-columns: 88px minmax(0, 1fr); }
  #patientDetail .patient-record-section-value { grid-template-columns: 1fr; gap: 8px; }
  #patientDetail .patient-record-section-tooth {
    place-items: start;
    min-height: 58px;
    border-right: 0;
    border-bottom: 1px solid #e2ebf0;
  }
}

@media (max-width: 900px) {
  .tooth-picker-panel {
    grid-template-columns: minmax(720px, 1fr);
  }

  .tooth-picker-panel .tooth-surface-panel {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #patientDetail .patient-center-menu,
  #patientDetail .patient-center-list,
  #patientDetail .patient-profile-head,
  #patientDetail .patient-detail-tabs,
  #patientDetail .patient-record-subtabs,
  #patientDetail .patient-record-search-strip,
  #patientDetail .patient-record-topbar,
  #patientDetail .patient-record-rangebar,
  #patientDetail .patient-record-timeline-card,
  #patientDetail button,
  #patientDetail input,
  #patientDetail select { transition: none !important; }
  #patientDetail *:hover,
  #patientDetail *:active,
  #patientDetail *:focus { transform: none !important; }
}

/* Global patient search: compact card results matching the system UI. */
.global-search-dropdown {
  width: min(640px, calc(100vw - 28px));
  max-height: min(720px, calc(100dvh - 86px));
  padding: 8px;
  border: 1px solid rgba(151, 177, 203, 0.34);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0%, rgba(8, 169, 198, 0.1), transparent 30%),
    rgba(246, 250, 253, 0.96);
  box-shadow: 0 22px 54px rgba(34, 68, 98, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.global-search-head,
.global-search-foot {
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}
.global-search-head { margin-bottom: 8px; }
.global-search-head strong { color: #203247; }
.global-search-head label { color: #607286; cursor: pointer; }
.global-search-head label:focus-within { color: #078ba5; }

.global-search-result-list {
  display: grid;
  gap: 9px;
  max-height: min(570px, calc(100dvh - 210px));
  padding: 1px 2px 8px;
  background: transparent;
  scrollbar-gutter: stable;
}

.global-search-result {
  position: relative;
  isolation: isolate;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  min-height: 128px;
  padding: 14px 16px;
  overflow: hidden;
  border: 1px solid rgba(151, 177, 203, 0.28);
  border-radius: 14px;
  background:
    radial-gradient(340px circle at var(--search-card-x, 50%) var(--search-card-y, 22%), rgba(8, 169, 198, 0.15), transparent 68%),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(54, 88, 115, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.global-search-result:hover,
.global-search-result:focus-visible {
  outline: none;
  border-color: rgba(8, 169, 198, 0.5);
  background:
    radial-gradient(340px circle at var(--search-card-x, 50%) var(--search-card-y, 22%), rgba(8, 169, 198, 0.19), transparent 68%),
    rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 32px rgba(28, 117, 143, 0.13), 0 0 0 3px rgba(8, 169, 198, 0.06);
  transform: translateY(-2px);
}
.global-search-result:active { transform: translateY(0) scale(0.99); }
.global-search-result .patient-avatar-icon { width: 34px; height: 34px; }
.global-search-result-main { gap: 6px; color: #66778b; font-size: 15px; line-height: 1.35; }
.global-search-result-main strong { color: #1f3044; font-size: 19px; }
.global-search-result-main i { background: rgba(151, 177, 203, 0.42); }
.global-search-result em {
  align-self: center;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(8, 169, 198, 0.08);
  color: #078ba5;
  font-size: 20px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.global-search-result:hover em { background: rgba(8, 169, 198, 0.14); transform: translateX(2px); }

.global-search-foot {
  margin-top: 1px;
  border-top: 1px solid rgba(151, 177, 203, 0.22);
}
.global-search-foot button {
  min-height: 38px;
  padding: 0 10px;
  border-radius: 9px;
  color: #078ba5;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.global-search-foot button:hover { background: rgba(8, 169, 198, 0.08); color: #056f87; transform: translateY(-1px); }
.global-search-foot button:active { transform: scale(0.97); }
.global-search-empty {
  border: 1px dashed rgba(151, 177, 203, 0.4);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  text-align: center;
}

@media (max-width: 680px) {
  .global-search-dropdown {
    position: fixed;
    top: 68px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100dvh - 78px);
  }
  .global-search-head { align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; min-height: 68px; }
  .global-search-result-list { max-height: calc(100dvh - 225px); }
  .global-search-result { grid-template-columns: 36px minmax(0, 1fr); padding: 13px; }
  .global-search-result em { display: none; }
  .global-search-result-main { font-size: 14px; }
  .global-search-result-main i { margin: 0 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .global-search-result,
  .global-search-result em,
  .global-search-foot button { transition: none !important; }
  .global-search-result:hover,
  .global-search-result:focus-visible,
  .global-search-result:active,
  .global-search-result:hover em,
  .global-search-foot button:hover,
  .global-search-foot button:active { transform: none !important; }
}

/* Patient management: finance-aligned cyan card system. */
#patients {
  --patient-cyan: #08a9c6;
  --patient-cyan-dark: #078ba5;
  --patient-line: rgba(151, 177, 203, 0.26);
  padding: 18px 22px 30px !important;
  background:
    radial-gradient(circle at 13% 4%, rgba(20, 186, 211, 0.08), transparent 24%),
    linear-gradient(135deg, #f3f9fc 0%, #f7f9fc 54%, #eef3fb 100%);
}

#patients .patients-console {
  display: grid;
  grid-template-columns: 170px 250px minmax(0, 1fr);
  gap: 16px;
  min-height: calc(100dvh - 120px);
  margin: 0;
  border: 0;
  background: transparent;
}

#patients .patients-console-menu,
#patients .patients-filter-panel,
#patients .patients-querybar,
#patients .patients-card-list-wrap,
#patients .patient-list-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--patient-line);
  background:
    radial-gradient(360px circle at var(--patient-card-x, 50%) var(--patient-card-y, 18%), rgba(8, 169, 198, 0.12), transparent 68%),
    rgba(255, 255, 255, 0.9);
  box-shadow: 0 15px 36px rgba(55, 88, 118, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

#patients .patients-console-menu:hover,
#patients .patients-filter-panel:hover,
#patients .patients-querybar:hover,
#patients .patients-card-list-wrap:hover,
#patients .patient-list-card:hover {
  border-color: rgba(8, 169, 198, 0.42);
  box-shadow: 0 21px 46px rgba(36, 124, 149, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

#patients .patients-console-menu,
#patients .patients-filter-panel {
  align-self: start;
  min-height: 330px;
  border-radius: 18px;
}

#patients .patients-console-menu { padding: 13px 10px; }
#patients .patients-console-title {
  margin: 0 4px 8px;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(151, 177, 203, 0.22);
  color: #1f2d3e;
  font-size: 17px;
}
#patients .patients-console-menu button {
  width: 100%;
  height: 42px;
  margin: 3px 0;
  border-radius: 10px;
  color: #526579;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
#patients .patients-console-menu button.active,
#patients .patients-console-menu button:hover {
  background: linear-gradient(100deg, rgba(202, 243, 249, 0.94), rgba(226, 237, 255, 0.9));
  color: var(--patient-cyan-dark);
  box-shadow: inset 3px 0 0 var(--patient-cyan);
  transform: translateX(2px);
}
#patients .patients-console-menu strong { padding: 15px 10px 8px; color: #34465a; }

#patients .patients-filter-panel { padding-bottom: 10px; }
#patients .patients-filter-tabs {
  height: 48px;
  padding: 5px;
  gap: 4px;
  border: 0;
  background: rgba(235, 245, 250, 0.7);
}
#patients .patients-filter-tabs button {
  border: 0;
  border-radius: 9px;
  color: #607286;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
#patients .patients-filter-tabs button.active {
  border: 0;
  background: #fff;
  color: var(--patient-cyan-dark);
  box-shadow: 0 6px 16px rgba(39, 111, 134, 0.11), inset 0 -3px 0 var(--patient-cyan);
}
#patients .patients-filter-tabs button:active { transform: scale(0.97); }
#patients .patients-filter-list { padding: 7px; }
#patients .patients-filter-list button,
#patients .patients-filter-list div {
  min-height: 42px;
  margin: 2px 0;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
#patients .patients-filter-list button.active,
#patients .patients-filter-list button:hover,
#patients .patients-filter-list div:hover {
  background: rgba(8, 169, 198, 0.07);
  color: var(--patient-cyan-dark);
  transform: translateX(2px);
}

#patients .patients-list-workspace {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
  overflow: visible;
  background: transparent;
}
#patients .patients-querybar {
  flex-wrap: wrap;
  min-height: 74px;
  padding: 14px;
  border-radius: 18px;
}
#patients .patients-querybar label {
  height: 42px;
  border-color: rgba(151, 177, 203, 0.38);
  border-radius: 10px;
  background: rgba(249, 252, 255, 0.9);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
#patients .patients-querybar label:focus-within {
  border-color: var(--patient-cyan);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(8, 169, 198, 0.1);
  transform: translateY(-1px);
}
#patients .patients-querybar input { height: 100%; background: transparent; color: #243548; }
#patients .patients-querybar input::placeholder { color: #8392a4; }
#patients .patients-link-btn,
#patients .patients-ai-btn,
#patients .patients-batch-btn,
#patients .patients-querybar .light-btn,
#patients .patients-querybar .primary-btn {
  height: 42px;
  border-radius: 10px;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
#patients .patients-querybar .primary-btn {
  border-color: #079fbd;
  background: linear-gradient(135deg, #0bb4cf, #078db7);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 8px 18px rgba(7, 157, 189, 0.2);
}
#patients .patients-ai-btn { border-color: rgba(46, 112, 230, 0.38); background: rgba(241, 246, 255, 0.9); }
#patients .patients-batch-btn { margin-left: auto; }
#patients .patients-querybar button:hover { box-shadow: 0 9px 19px rgba(38, 133, 158, 0.13); transform: translateY(-2px); }
#patients .patients-querybar button:active { transform: translateY(0) scale(0.97); }

#patients .patients-card-list-wrap {
  height: auto;
  min-height: calc(100dvh - 225px);
  overflow: visible;
  padding: 14px;
  border-radius: 18px;
}
#patients .patients-card-list-head {
  min-height: 42px;
  margin: 0 0 10px;
  padding: 0 8px;
  color: #607286;
}
#patients .patients-card-grid { gap: 14px; }
#patients .patient-list-card { border-radius: 14px; }
#patients .patient-list-card:hover { transform: translateY(-3px); }
#patients .patient-list-card-head { min-height: 66px; padding: 12px 15px; border-bottom-color: rgba(151, 177, 203, 0.2); }
#patients .patient-card-actions .patients-row-action {
  min-height: 36px;
  border-color: rgba(8, 169, 198, 0.24);
  border-radius: 9px;
  color: var(--patient-cyan-dark);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
#patients .patient-card-actions .patients-row-action:hover { background: rgba(8, 169, 198, 0.09); box-shadow: 0 6px 14px rgba(38, 133, 158, 0.1); transform: translateY(-1px); }
#patients .patient-card-actions .patients-row-action:active { transform: scale(0.96); }
#patients .patient-list-card-fields { padding: 5px 15px 13px; }

@media (max-width: 1450px) {
  #patients .patients-console { grid-template-columns: 150px 220px minmax(0, 1fr); gap: 12px; }
  #patients .patients-querybar label:first-child { flex: 1 1 260px; }
  #patients .patients-batch-btn { margin-left: 0; }
}

@media (max-width: 1050px) {
  #patients { padding: 14px !important; }
  #patients .patients-console { grid-template-columns: 170px minmax(0, 1fr); }
  #patients .patients-filter-panel { grid-column: 1; }
  #patients .patients-list-workspace { grid-column: 2; grid-row: 1 / span 2; }
  #patients .patients-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  #patients { padding: 10px !important; }
  #patients .patients-console { grid-template-columns: 1fr; }
  #patients .patients-console-menu { display: flex; min-height: 0; padding: 8px; overflow-x: auto; }
  #patients .patients-console-title { display: none; }
  #patients .patients-console-menu button { flex: 0 0 auto; width: auto; padding: 0 14px; }
  #patients .patients-console-menu strong { display: none; }
  #patients .patients-filter-panel,
  #patients .patients-list-workspace { grid-column: 1; grid-row: auto; }
  #patients .patients-filter-panel { min-height: 0; }
  #patients .patients-filter-list { display: flex; overflow-x: auto; }
  #patients .patients-filter-list button,
  #patients .patients-filter-list div { flex: 0 0 auto; width: auto; gap: 8px; white-space: nowrap; }
  #patients .patients-querybar { align-items: stretch; }
  #patients .patients-querybar label,
  #patients .patients-querybar label:first-child { flex: 1 1 100%; min-width: 0; }
  #patients .patients-querybar > span { display: none; }
  #patients .patients-batch-btn { width: 100%; }
  #patients .patients-card-list-wrap { min-height: 420px; padding: 10px; }
  #patients .patient-marquee.is-animated { height: max(460px, calc(100dvh - 310px)); }
  #patients .patient-list-card-head { flex-wrap: wrap; }
  #patients .patient-card-actions { width: 100%; padding-left: 27px; }
  #patients .patient-list-card-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #patients .patient-marquee-toggle { display: none !important; }
  #patients .patients-console-menu,
  #patients .patients-filter-panel,
  #patients .patients-querybar,
  #patients .patients-card-list-wrap,
  #patients .patient-list-card,
  #patients button,
  #patients label { transition: none !important; }
  #patients .patient-marquee { height: auto !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  #patients .patient-marquee-track { display: block !important; animation: none !important; transform: none !important; }
  #patients .patient-marquee-copy { display: none !important; }
  #patients .patients-console-menu:hover,
  #patients .patients-filter-panel:hover,
  #patients .patients-querybar:hover,
  #patients .patients-card-list-wrap:hover,
  #patients .patient-list-card:hover,
  #patients button:hover,
  #patients button:active,
  #patients label:focus-within { transform: none !important; }
}

/* Medical record writing workspace: cohesive cyan cards and local pointer light. */
#medicalRecord {
  --record-cyan: #0aa9c7;
  --record-cyan-dark: #078ba5;
  --record-ink: #172235;
  --record-line: rgba(151, 177, 203, 0.24);
  padding: 10px 22px 44px !important;
  background: radial-gradient(circle at 18% 5%, rgba(31, 194, 214, 0.09), transparent 25%), linear-gradient(135deg, #f4f9fc 0%, #f7f8fc 54%, #eef3ff 100%);
}

#medicalRecord .record-page {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
}

#medicalRecord .record-toolbar,
#medicalRecord .record-create-top,
#medicalRecord .record-section-nav,
#medicalRecord .record-form-section,
#medicalRecord .record-footer {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--record-line);
  border-radius: 18px;
  background: radial-gradient(420px circle at var(--record-card-x, 50%) var(--record-card-y, 24%), rgba(10, 169, 199, 0.13), transparent 66%), rgba(255, 255, 255, 0.88);
  box-shadow: 0 15px 38px rgba(67, 96, 126, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

#medicalRecord .record-toolbar:hover,
#medicalRecord .record-create-top:hover,
#medicalRecord .record-section-nav:hover,
#medicalRecord .record-form-section:hover,
#medicalRecord .record-footer:hover {
  border-color: rgba(10, 169, 199, 0.44);
  box-shadow: 0 22px 52px rgba(38, 133, 158, 0.15), 0 0 0 1px rgba(10, 169, 199, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transform: translateY(-2px);
}

#medicalRecord .record-toolbar {
  grid-template-columns: 1fr;
  min-height: 68px;
  padding: 10px 16px;
  background: radial-gradient(360px circle at var(--record-card-x, 30%) var(--record-card-y, 25%), rgba(10, 169, 199, 0.15), transparent 66%), linear-gradient(120deg, rgba(218, 248, 252, 0.74), rgba(255, 255, 255, 0.92) 46%, rgba(231, 237, 255, 0.7));
}

#medicalRecord .record-filter-title {
  color: var(--record-ink);
  font-size: 22px;
  font-weight: 850;
}

#medicalRecord .record-toolbar select,
#medicalRecord .record-create-top select,
#medicalRecord .record-create-top input,
#medicalRecord .record-form-section textarea {
  border: 1px solid rgba(140, 166, 192, 0.38);
  border-radius: 10px;
  background: rgba(249, 252, 255, 0.92);
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

#medicalRecord .record-toolbar select:focus,
#medicalRecord .record-create-top select:focus,
#medicalRecord .record-create-top input:focus,
#medicalRecord .record-form-section textarea:focus {
  outline: none;
  border-color: var(--record-cyan);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(10, 169, 199, 0.11);
  transform: translateY(-1px);
}

#medicalRecord .record-workspace { border: 0; background: transparent; box-shadow: none; }
#medicalRecord .record-create-layout {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  background: transparent;
}

#medicalRecord .record-create-top {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px 22px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--record-line);
}

#medicalRecord .record-create-top label { color: #3b4b5e; font-size: 15px; }
#medicalRecord .record-create-top select,
#medicalRecord .record-create-top input { height: 44px; font-size: 15px; }
#medicalRecord .record-visit-time { color: #3b4b5e; font-size: 15px; }
#medicalRecord .record-visit-time input { width: min(300px, 100%); }
#medicalRecord .record-visit-time > label {
  display: block;
  flex: 0 0 auto;
  color: #3b4b5e;
  font-size: 15px;
  font-weight: 800;
}
#medicalRecord .record-visit-time select {
  flex: 1 1 420px;
  min-width: 280px;
  height: 44px;
  padding: 0 42px 0 14px;
  border: 1px solid rgba(10, 169, 199, 0.32);
  border-radius: 11px;
  background-color: rgba(255, 255, 255, 0.92);
  color: #40566b;
  font-size: 15px;
  font-weight: 750;
  box-shadow: 0 7px 18px rgba(38, 133, 158, 0.08);
  cursor: pointer;
}
#medicalRecord .record-visit-time select:focus {
  border-color: var(--record-cyan);
  outline: 3px solid rgba(10, 169, 199, 0.13);
}
#medicalRecord .record-visit-time select:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}
#medicalRecord .record-visit-time small {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eaf9fc;
  color: var(--record-cyan-dark);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
#medicalRecord .record-visit-time button {
  width: 42px;
  height: 44px;
  border: 1px solid rgba(10, 169, 199, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--record-cyan-dark);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
#medicalRecord .record-visit-time button:hover { border-color: var(--record-cyan); box-shadow: 0 8px 18px rgba(38, 133, 158, 0.12); transform: translateY(-2px); }
#medicalRecord .record-type-line { padding-top: 4px; color: #3b4b5e; font-size: 15px; }
#medicalRecord .record-type-line input { accent-color: var(--record-cyan); }
#medicalRecord .record-type-line b { background: var(--record-cyan); }

#medicalRecord .record-section-nav {
  position: sticky;
  top: 82px;
  z-index: 4;
  gap: 4px;
  max-height: calc(100vh - 105px);
  max-height: calc(100dvh - 105px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 14px;
  border-right: 1px solid var(--record-line);
  color: #526579;
  font-size: 15px;
}

#medicalRecord .record-section-nav strong {
  margin: 7px 0 4px;
  padding: 8px 10px;
  color: var(--record-ink);
  font-size: 15px;
}

#medicalRecord .record-section-nav a {
  margin: 0;
  padding: 11px 13px;
  border: 0;
  border-radius: 10px;
  color: #526579;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

#medicalRecord .record-section-nav a:hover {
  border: 0;
  background: linear-gradient(100deg, rgba(203, 243, 249, 0.88), rgba(230, 238, 255, 0.86));
  color: var(--record-cyan-dark);
  box-shadow: inset 3px 0 0 var(--record-cyan);
  transform: translateX(3px);
}

#medicalRecord .record-writing-form { gap: 12px; padding: 0; }
#medicalRecord .record-template-btn {
  height: 44px;
  margin: 0;
  border: 1px solid rgba(10, 169, 199, 0.3);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--record-cyan-dark);
  font-size: 15px;
  font-weight: 750;
  box-shadow: 0 8px 20px rgba(67, 96, 126, 0.07);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
#medicalRecord .record-template-btn:hover { border-color: var(--record-cyan); box-shadow: 0 12px 24px rgba(38, 133, 158, 0.13); transform: translateY(-2px); }

#medicalRecord .record-form-section { gap: 9px; padding: 16px 18px; }
#medicalRecord .record-form-section h3 { color: var(--record-ink); font-size: 17px; }
#medicalRecord .record-form-section textarea {
  min-height: 56px;
  height: 56px;
  padding: 13px 12px;
  font-size: 28px;
  line-height: 28px;
  overflow-y: auto;
  resize: vertical;
}
#medicalRecord .tooth-input-row {
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 54px;
  padding: 5px 10px;
  border: 1px solid rgba(151, 177, 203, 0.28);
  border-radius: 10px;
  background: rgba(249, 252, 255, 0.72);
}
#medicalRecord .tooth-input-row textarea {
  align-self: center;
  width: 100%;
  min-height: 56px;
  height: 56px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  box-sizing: border-box;
}
#medicalRecord .tooth-input-row textarea:focus { box-shadow: 0 0 0 3px rgba(10, 169, 199, 0.09); }
#medicalRecord .record-add-tooth,
#medicalRecord .record-section-tools button {
  min-height: 34px;
  border: 1px solid rgba(10, 169, 199, 0.24);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--record-cyan-dark);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
#medicalRecord .record-add-tooth:hover,
#medicalRecord .record-section-tools button:hover { background: rgba(218, 245, 249, 0.72); box-shadow: 0 8px 18px rgba(38, 133, 158, 0.11); transform: translateY(-2px); }

#medicalRecord .record-image-add { border-radius: 12px; border-color: rgba(10, 169, 199, 0.28); background: rgba(249, 252, 255, 0.78); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
#medicalRecord .record-image-add:hover { border-color: var(--record-cyan); box-shadow: 0 12px 24px rgba(38, 133, 158, 0.13); transform: translateY(-2px); }

#medicalRecord .record-footer {
  justify-content: flex-end;
  gap: 12px;
  padding: 12px 16px;
}
#medicalRecord .record-footer button {
  min-height: 40px;
  border-radius: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#medicalRecord .record-footer .primary-btn {
  border-color: #079fbd;
  background: linear-gradient(135deg, #0bb4cf, #078db7);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(0, 67, 92, 0.2);
  box-shadow: 0 8px 20px rgba(7, 157, 189, 0.2);
}
#medicalRecord .record-footer .primary-btn:hover {
  border-color: #0688a7;
  background: linear-gradient(135deg, #08a9c6, #067fa8);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
#medicalRecord .record-footer .primary-btn:disabled {
  border-color: #76cbd9;
  background: linear-gradient(135deg, #69c8d8, #58abc4);
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 0.78;
}
#medicalRecord .record-footer button:hover { box-shadow: 0 10px 22px rgba(38, 133, 158, 0.14); transform: translateY(-2px); }
#medicalRecord .record-footer button:active,
#medicalRecord .record-template-btn:active,
#medicalRecord .record-visit-time button:active { transform: translateY(0) scale(0.98); }

/* Orthodontic medical record: structured, dense clinical workspace. */
#medicalRecord .ortho-record-form {
  display: grid;
  grid-column: 2;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
#medicalRecord .record-writing-form[hidden],
#medicalRecord .record-writing-form.record-mode-hidden,
#medicalRecord .ortho-record-form[hidden] { display: none !important; }

#medicalRecord .record-section-nav [hidden],
#medicalRecord .record-section-nav .record-followup-hidden,
#medicalRecord .record-form-section[hidden],
#medicalRecord .record-form-section.record-followup-hidden {
  display: none !important;
}
#medicalRecord .ortho-section { padding: 20px; }
#medicalRecord .ortho-section > h3,
#medicalRecord .ortho-section-heading {
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(151, 177, 203, 0.25);
  color: var(--record-ink);
  font-size: 24px;
  font-weight: 850;
}
#medicalRecord .ortho-section > h4 {
  margin: 22px 0 10px;
  padding-left: 10px;
  border-left: 3px solid var(--record-cyan);
  color: #28374a;
  font-size: 19.2px;
}
#medicalRecord .ortho-form-grid,
#medicalRecord .ortho-section { min-width: 0; }
#medicalRecord .ortho-field-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  align-items: center;
  min-height: 64px;
  gap: 16px;
  padding: 7px 0;
}
#medicalRecord .ortho-field-label {
  color: #667589;
  font-size: 18px;
  font-weight: 750;
  text-align: right;
}
#medicalRecord .ortho-field-control { min-width: 0; }
#medicalRecord .ortho-choice-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px 20px;
}
#medicalRecord .ortho-choice-group label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  color: #263548;
  font-size: 120%;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
#medicalRecord .ortho-choice-group input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--record-cyan);
}
#medicalRecord .ortho-field-control > input[type="text"],
#medicalRecord .ortho-field-control > input[type="number"],
#medicalRecord .ortho-plan-grid input,
#medicalRecord .ortho-record-form textarea {
  width: 100%;
  border: 1px solid rgba(151, 177, 203, 0.42);
  border-radius: 10px;
  background: rgba(250, 252, 255, 0.86);
  color: #1f2d3d;
  font: inherit;
  font-size: 120%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
#medicalRecord .ortho-field-control > input,
#medicalRecord .ortho-plan-grid input { min-height: 42px; padding: 0 12px; }
#medicalRecord .ortho-record-form textarea {
  min-height: 64px;
  padding: 12px;
  resize: vertical;
  line-height: 1.5;
}
#medicalRecord .ortho-field-control > input:focus,
#medicalRecord .ortho-plan-grid input:focus,
#medicalRecord .ortho-record-form textarea:focus {
  outline: none;
  border-color: var(--record-cyan);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(10, 169, 199, 0.1);
}
#medicalRecord .tooth-choice-row .ortho-field-control,
#medicalRecord .tooth-text-row .ortho-field-control {
  display: flex;
  align-items: center;
  gap: 14px;
}
#medicalRecord .tooth-choice-row .tooth-cross,
#medicalRecord .tooth-text-row .tooth-cross,
#medicalRecord .plan-tooth-field .tooth-cross {
  flex: 0 0 240px;
  width: 240px;
  height: 78px;
  border: 1px dashed rgba(10, 169, 199, 0.48);
  border-radius: 10px;
  background-color: rgba(247, 252, 254, 0.78);
}
#medicalRecord .tooth-text-row textarea { flex: 1 1 auto; }
#medicalRecord .ortho-tooth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 22px;
}
#medicalRecord .ortho-tooth-grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#medicalRecord .ortho-tooth-grid .ortho-field-row { grid-template-columns: 105px minmax(0, 1fr); }
#medicalRecord .ortho-measure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 20px;
}
#medicalRecord .ortho-measure-grid .ortho-field-row { grid-template-columns: 90px minmax(0, 1fr); }
#medicalRecord .ortho-measure-grid .ortho-field-control { display: flex; align-items: center; gap: 8px; }
#medicalRecord .ortho-measure-grid em { color: #546174; font-style: normal; }
#medicalRecord .ortho-plan-grid > label,
#medicalRecord .ortho-measure-grid em,
#medicalRecord .ortho-upload-button,
#medicalRecord .ortho-upload-zone,
#medicalRecord .ortho-attachment-card,
#medicalRecord .ortho-empty-attachment { font-size: 120%; }
#medicalRecord .ortho-upload-button,
#medicalRecord .ortho-section-heading button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(10, 169, 199, 0.34);
  border-radius: 9px;
  background: #fff;
  color: var(--record-cyan-dark);
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
#medicalRecord .ortho-upload-button:hover,
#medicalRecord .ortho-section-heading button:hover {
  background: #eaf9fc;
  box-shadow: 0 8px 18px rgba(38, 133, 158, 0.12);
  transform: translateY(-1px);
}
#medicalRecord .ortho-upload-zone {
  display: grid;
  place-items: center;
  gap: 7px;
  width: min(300px, 100%);
  min-height: 150px;
  border: 1px dashed rgba(10, 169, 199, 0.42);
  border-radius: 12px;
  background: rgba(248, 252, 255, 0.78);
  color: #647286;
  cursor: pointer;
}
#medicalRecord .ortho-upload-zone strong { color: var(--record-cyan); font-size: 34px; line-height: 1; }
#medicalRecord .ortho-attachment-list { display: grid; gap: 10px; margin-top: 14px; }
#medicalRecord .ortho-attachment-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  max-width: 620px;
  min-height: 68px;
  padding: 8px;
  border: 1px solid rgba(151, 177, 203, 0.3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
}
#medicalRecord .ortho-attachment-card img { width: 58px; height: 50px; border-radius: 7px; object-fit: cover; }
#medicalRecord .ortho-attachment-card div { display: grid; gap: 3px; min-width: 0; }
#medicalRecord .ortho-attachment-card strong { overflow: hidden; color: #263548; text-overflow: ellipsis; white-space: nowrap; }
#medicalRecord .ortho-attachment-card small { color: #768499; }
#medicalRecord .ortho-attachment-card button { border: 0; background: transparent; color: #9a5660; font-size: 22px; }
#medicalRecord .ortho-pdf-mark { display: grid; place-items: center; width: 58px; height: 50px; border-radius: 7px; background: #edf7fa; color: #087f9c; font-weight: 900; }
#medicalRecord .ortho-empty-attachment { margin: 0; color: #8491a2; }
#medicalRecord .ortho-section-heading { display: flex; align-items: center; justify-content: space-between; }
#medicalRecord .ortho-section-heading h3 { margin: 0; }
#medicalRecord #orthodonticPlanList { display: grid; gap: 14px; }
#medicalRecord .ortho-plan-card {
  overflow: hidden;
  border: 1px solid rgba(151, 177, 203, 0.34);
  border-radius: 14px;
  background: rgba(250, 252, 255, 0.8);
}
#medicalRecord .ortho-plan-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(151, 177, 203, 0.24);
  color: #223247;
}
#medicalRecord .ortho-plan-card > header button { border: 0; background: transparent; color: #b34d58; font-weight: 750; }
#medicalRecord .ortho-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; padding: 16px; }
#medicalRecord .ortho-plan-grid > label { display: grid; align-content: start; gap: 7px; color: #657387; font-weight: 750; }
#medicalRecord .ortho-plan-grid .wide { grid-column: 1 / -1; }
#medicalRecord .plan-tooth-field > span { display: block; }

@media (max-width: 1180px) {
  #medicalRecord .ortho-tooth-grid.three-col,
  #medicalRecord .ortho-measure-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  #medicalRecord .ortho-record-form { grid-column: 1; }
  #medicalRecord .ortho-section { padding: 15px; }
  #medicalRecord .ortho-field-row,
  #medicalRecord .ortho-tooth-grid .ortho-field-row,
  #medicalRecord .ortho-measure-grid .ortho-field-row { grid-template-columns: 1fr; gap: 7px; }
  #medicalRecord .ortho-field-label { text-align: left; }
  #medicalRecord .ortho-tooth-grid,
  #medicalRecord .ortho-tooth-grid.three-col,
  #medicalRecord .ortho-measure-grid,
  #medicalRecord .ortho-plan-grid { grid-template-columns: 1fr; }
  #medicalRecord .ortho-plan-grid .wide { grid-column: auto; }
  #medicalRecord .tooth-choice-row .ortho-field-control,
  #medicalRecord .tooth-text-row .ortho-field-control { align-items: stretch; flex-direction: column; }
  #medicalRecord .tooth-choice-row .tooth-cross,
  #medicalRecord .tooth-text-row .tooth-cross,
  #medicalRecord .plan-tooth-field .tooth-cross { flex-basis: 78px; width: 240px; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #medicalRecord .ortho-upload-button,
  #medicalRecord .ortho-section-heading button,
  #medicalRecord .ortho-record-form input,
  #medicalRecord .ortho-record-form textarea { transition: none !important; }
  #medicalRecord .ortho-upload-button:hover,
  #medicalRecord .ortho-section-heading button:hover { transform: none !important; }
}

@media (max-width: 1100px) {
  #medicalRecord { padding: 10px 14px 32px !important; }
  #medicalRecord .record-create-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #medicalRecord .record-create-layout { grid-template-columns: 210px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  #medicalRecord { padding: 8px 10px 28px !important; }
  #medicalRecord .record-toolbar { align-items: stretch; grid-template-columns: 1fr; }
  #medicalRecord .record-toolbar select { width: 100%; }
  #medicalRecord .record-create-layout { grid-template-columns: 1fr; }
  #medicalRecord .record-create-top { grid-template-columns: 1fr; padding: 16px; }
  #medicalRecord .record-visit-time,
  #medicalRecord .record-type-line { grid-column: 1; flex-wrap: wrap; }
  #medicalRecord .record-visit-time input { flex: 1 1 220px; }
  #medicalRecord .record-visit-time select { flex: 1 1 100%; min-width: 0; }
  #medicalRecord .record-section-nav { position: static; display: flex; max-height: none; overflow-x: auto; white-space: nowrap; }
  #medicalRecord .record-section-nav strong { display: none; }
  #medicalRecord .record-section-nav a { flex: 0 0 auto; }
  #medicalRecord .record-form-section { padding: 14px; }
  #medicalRecord .tooth-input-row { grid-template-columns: 1fr; }
  #medicalRecord .tooth-cross { justify-self: start; max-width: 100%; }
  #medicalRecord .record-footer { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  #medicalRecord .record-toolbar,
  #medicalRecord .record-create-top,
  #medicalRecord .record-section-nav,
  #medicalRecord .record-form-section,
  #medicalRecord .record-footer,
  #medicalRecord button,
  #medicalRecord input,
  #medicalRecord select,
  #medicalRecord textarea,
  #medicalRecord .record-section-nav a { transition: none !important; }
  #medicalRecord .record-toolbar:hover,
  #medicalRecord .record-create-top:hover,
  #medicalRecord .record-section-nav:hover,
  #medicalRecord .record-form-section:hover,
  #medicalRecord .record-footer:hover,
  #medicalRecord button:hover,
  #medicalRecord .record-section-nav a:hover { transform: none !important; }
}

/* New bill workspace: monthly-expense card language with restrained pointer light. */
#billCreate {
  --bill-cyan: #0aa9c7;
  --bill-cyan-dark: #078ba5;
  --bill-ink: #172235;
  --bill-line: rgba(151, 177, 203, 0.24);
  padding: 10px 22px 44px !important;
  background: radial-gradient(circle at 18% 5%, rgba(31, 194, 214, 0.09), transparent 25%), linear-gradient(135deg, #f4f9fc 0%, #f7f8fc 54%, #eef3ff 100%);
}

#billCreate .charge-page {
  gap: 16px;
  width: 100%;
  max-width: 1900px;
  margin: 0 auto;
}

#billCreate .charge-summary,
#billCreate .charge-actions,
#billCreate .charge-items-panel,
#billCreate .charge-cashier,
#billCreate .payment-history.active,
#billCreate .debt-confirm-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bill-line);
  border-radius: 18px;
  background: radial-gradient(420px circle at var(--bill-card-x, 50%) var(--bill-card-y, 25%), rgba(10, 169, 199, 0.13), transparent 66%), rgba(255, 255, 255, 0.88);
  box-shadow: 0 15px 38px rgba(67, 96, 126, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

#billCreate .charge-summary:hover,
#billCreate .charge-actions:hover,
#billCreate .charge-items-panel:hover,
#billCreate .charge-cashier:hover,
#billCreate .payment-history.active:hover,
#billCreate .debt-confirm-card:hover {
  border-color: rgba(10, 169, 199, 0.44);
  box-shadow: 0 22px 52px rgba(38, 133, 158, 0.15), 0 0 0 1px rgba(10, 169, 199, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transform: translateY(-2px);
}

#billCreate .charge-summary {
  grid-template-columns: 1fr;
  padding: 8px;
}

#billCreate .charge-summary article {
  min-height: 116px;
  padding: 18px 20px 14px;
  border-right: 0;
  background: transparent;
}

#billCreate .charge-summary h2 {
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom-color: var(--bill-cyan);
  color: var(--bill-ink);
}

#billCreate .summary-values span { border-right-color: rgba(151, 177, 203, 0.28); color: #64748b; }
#billCreate .summary-values b { color: var(--bill-ink); font-variant-numeric: tabular-nums; }
#billCreate .summary-values .danger { color: #dc4d57; }

#billCreate .charge-actions {
  min-height: 66px;
  padding: 10px 14px;
}

#billCreate .charge-tabs { gap: 4px; }
#billCreate .charge-tabs button,
#billCreate .charge-buttons button {
  min-height: 42px;
  border-color: rgba(10, 169, 199, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
  color: #526579;
  font-size: 15px;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

#billCreate .charge-tabs button:hover,
#billCreate .charge-buttons button:hover {
  border-color: rgba(10, 169, 199, 0.42);
  color: var(--bill-cyan-dark);
  transform: translateY(-2px);
}

#billCreate .charge-tabs button.active {
  border-color: rgba(10, 169, 199, 0.32);
  background: linear-gradient(100deg, rgba(203, 243, 249, 0.92), rgba(230, 238, 255, 0.92));
  color: var(--bill-cyan-dark);
  box-shadow: inset 3px 0 0 var(--bill-cyan), 0 8px 20px rgba(31, 177, 199, 0.1);
}

#billCreate .charge-buttons .primary-btn,
#billCreate .cashier-footer .primary-btn {
  border-color: #079fbd;
  background: linear-gradient(135deg, #0bb4cf, #078db7);
  color: #fff;
  box-shadow: 0 8px 20px rgba(7, 157, 189, 0.2);
}

#billCreate .charge-buttons button:active,
#billCreate .cashier-footer button:active,
#billCreate .table-action:active { transform: translateY(0) scale(0.98); }

#billCreate .charge-builder { grid-template-columns: 300px minmax(0, 1fr); gap: 16px; }
#billCreate .charge-items-panel { padding-bottom: 12px; }
#billCreate .charge-panel-title { border: 0; padding: 20px 20px 15px; background: transparent; color: var(--bill-ink); }
#billCreate .charge-category-tabs { padding: 0 14px 12px; gap: 7px; }
#billCreate .charge-category-tabs button { border-radius: 10px; }
#billCreate .charge-search { padding: 0 14px 12px; }
#billCreate .charge-search input { border: 1px solid rgba(140, 166, 192, 0.35); border-radius: 10px; background: rgba(249, 252, 255, 0.92); }
#billCreate .charge-project-list { margin: 0 8px; border-radius: 10px; }
#billCreate .charge-project-list button { transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; }
#billCreate .charge-project-list button:hover { background: rgba(10, 169, 199, 0.08); color: var(--bill-cyan-dark); transform: translateX(3px); }

#billCreate .charge-cashier { min-width: 0; padding: 14px; }
#billCreate .invoice-table-wrap,
#billCreate .charge-table-wrap { overflow: auto; border: 1px solid rgba(151, 177, 203, 0.2); border-radius: 12px; background: rgba(255, 255, 255, 0.8); }
#billCreate .invoice-table thead th,
#billCreate .charge-table thead th { background: #f4f8fb; color: #435469; border-color: #e4edf4; }
#billCreate .invoice-table tbody tr,
#billCreate .charge-table tbody tr { transition: background 0.18s ease, box-shadow 0.18s ease; }
#billCreate .invoice-table tbody tr:hover,
#billCreate .charge-table tbody tr:hover { background: #effbfc; box-shadow: inset 3px 0 0 var(--bill-cyan); }

#billCreate .invoice-total,
#billCreate .whole-discount-row,
#billCreate .payment-box,
#billCreate .cashier-form { border-radius: 12px; background: rgba(248, 252, 255, 0.82); }
#billCreate .invoice-total { margin-top: 12px; border: 1px solid rgba(151, 177, 203, 0.2); }
#billCreate .whole-discount-row { margin-top: 10px; border: 1px solid rgba(151, 177, 203, 0.2); }
#billCreate .payment-box { margin-top: 10px; border: 1px solid rgba(151, 177, 203, 0.2); }
#billCreate .cashier-form { margin-top: 10px; border: 1px solid rgba(151, 177, 203, 0.2); }

#billCreate input,
#billCreate select,
#billCreate textarea {
  border-color: rgba(140, 166, 192, 0.38);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.92);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#billCreate input:focus,
#billCreate select:focus,
#billCreate textarea:focus {
  outline: none;
  border-color: var(--bill-cyan);
  box-shadow: 0 0 0 4px rgba(10, 169, 199, 0.11);
  transform: translateY(-1px);
}

#billCreate .payment-result { border-top-color: rgba(151, 177, 203, 0.24); }
#billCreate .payment-result b { color: var(--bill-ink); }
#billCreate .payment-result .danger { color: #dc4d57; }
#billCreate .payment-result .success { color: #199e71; }
#billCreate .cashier-footer { padding: 14px 2px 2px; }
#billCreate .cashier-footer button { min-height: 40px; border-radius: 10px; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
#billCreate .cashier-footer button:hover { transform: translateY(-2px); box-shadow: 0 9px 20px rgba(38, 133, 158, 0.14); }

#billCreate .payment-history.active { gap: 14px; padding: 14px; }
#billCreate .history-toolbar { padding: 4px 2px 0; }
#billCreate .debt-confirm { border-radius: 18px; }

@media (max-width: 1100px) {
  #billCreate { padding: 10px 14px 32px !important; }
  #billCreate .charge-summary { grid-template-columns: 1fr; }
  #billCreate .charge-builder { grid-template-columns: 1fr; }
  #billCreate .charge-items-panel { max-height: 440px; }
  #billCreate .cashier-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #billCreate .cashier-form #cashierDoctor,
  #billCreate .cashier-form #cashierNurse { max-width: none; }
}

@media (max-width: 680px) {
  #billCreate { padding: 8px 10px 28px !important; }
  #billCreate .charge-summary { grid-template-columns: 1fr; }
  #billCreate .charge-summary article { border-right: 0; border-bottom: 1px solid rgba(151, 177, 203, 0.25); }
  #billCreate .charge-summary article:last-child { border-bottom: 0; }
  #billCreate .charge-actions,
  #billCreate .whole-discount-row,
  #billCreate .payment-result { align-items: stretch; flex-direction: column; }
  #billCreate .charge-tabs,
  #billCreate .charge-buttons { width: 100%; overflow-x: auto; }
  #billCreate .charge-tabs button,
  #billCreate .charge-buttons button { flex: 0 0 auto; padding: 0 18px; }
  #billCreate .payment-line,
  #billCreate .cashier-form { grid-template-columns: 1fr; }
  #billCreate .payment-result { gap: 10px; }
  #billCreate .payment-result b { font-size: 24px; }
  #billCreate .cashier-footer { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  #billCreate .charge-summary,
  #billCreate .charge-actions,
  #billCreate .charge-items-panel,
  #billCreate .charge-cashier,
  #billCreate .payment-history.active,
  #billCreate .debt-confirm-card,
  #billCreate button,
  #billCreate input,
  #billCreate select,
  #billCreate textarea { transition: none !important; }
  #billCreate .charge-summary:hover,
  #billCreate .charge-actions:hover,
  #billCreate .charge-items-panel:hover,
  #billCreate .charge-cashier:hover,
  #billCreate .payment-history.active:hover,
  #billCreate .debt-confirm-card:hover,
  #billCreate button:hover { transform: none !important; }
}

/* Performance reports use the same calm card language as Monthly Expense. */
#billing:not(.expense-only) {
  --report-cyan: #0aa9c7;
  --report-ink: #172235;
  --report-line: rgba(151, 177, 203, 0.24);
  padding: 10px 22px 44px !important;
  background: radial-gradient(circle at 18% 5%, rgba(31, 194, 214, 0.09), transparent 25%), linear-gradient(135deg, #f4f9fc 0%, #f7f8fc 54%, #eef3ff 100%);
}

#billing.expense-only > .performance-hero { display: none; }

#billing:not(.expense-only) > .performance-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 142px;
  overflow: hidden;
  margin-bottom: 22px;
  padding: 26px 32px;
  border: 1px solid rgba(10, 169, 199, 0.25);
  border-radius: 18px;
  background: radial-gradient(380px circle at var(--report-card-x, 42%) var(--report-card-y, 28%), rgba(10, 169, 199, 0.18), transparent 64%), linear-gradient(120deg, rgba(218, 248, 252, 0.88), rgba(255, 255, 255, 0.94) 42%, rgba(231, 237, 255, 0.78));
  box-shadow: 0 18px 42px rgba(66, 104, 139, 0.11);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

#billing:not(.expense-only) > .performance-hero:hover {
  border-color: rgba(10, 169, 199, 0.46);
  box-shadow: 0 22px 52px rgba(38, 133, 158, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  transform: translateY(-2px);
}

.performance-hero span { color: var(--report-cyan); font-size: 12px; font-weight: 900; letter-spacing: 0.18em; }
.performance-hero h2 { margin: 8px 0 6px; color: var(--report-ink); font-size: 30px; letter-spacing: -0.04em; }
.performance-hero p { margin: 0; color: #69798c; font-weight: 650; }
.performance-hero-summary { display: grid; justify-items: end; gap: 3px; padding-right: 8px; }
.performance-hero-summary small, .performance-hero-summary em { color: #77889c; font-style: normal; }
.performance-hero-summary strong { color: var(--report-cyan); font-size: 30px; font-variant-numeric: tabular-nums; }

#billing:not(.expense-only) .performance-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
#billing:not(.expense-only) .performance-content { gap: 16px; }
#billing:not(.expense-only) .performance-sidebar,
#billing:not(.expense-only) #performanceReportContent .report-card {
  border: 1px solid var(--report-line);
  border-radius: 18px;
  background: radial-gradient(360px circle at var(--report-card-x, 50%) var(--report-card-y, 24%), rgba(10, 169, 199, 0.14), transparent 66%), rgba(255, 255, 255, 0.86);
  box-shadow: 0 15px 38px rgba(67, 96, 126, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(15px);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

#billing:not(.expense-only) .performance-sidebar:hover,
#billing:not(.expense-only) #performanceReportContent .report-card:hover {
  border-color: rgba(10, 169, 199, 0.42);
  box-shadow: 0 22px 52px rgba(38, 133, 158, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.96);
  transform: translateY(-2px);
}

#billing:not(.expense-only) .performance-sidebar { top: 82px; gap: 4px; padding: 14px; }
#billing:not(.expense-only) .performance-sidebar:hover { transform: translateX(2px); }
#billing:not(.expense-only) .performance-sidebar strong { padding: 12px 14px 15px; border-bottom: 0; color: var(--report-ink); }
#billing:not(.expense-only) .performance-sidebar button { height: 48px; border: 0; border-radius: 12px; padding: 0 15px; transition: transform 0.2s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; }
#billing:not(.expense-only) .performance-sidebar button:hover { transform: translateX(3px); background: rgba(10, 169, 199, 0.07); color: #078ba5; }
#billing:not(.expense-only) .performance-sidebar button.active { border: 0; background: linear-gradient(100deg, rgba(203, 243, 249, 0.92), rgba(230, 238, 255, 0.92)); color: #078ba5; box-shadow: inset 3px 0 0 var(--report-cyan), 0 8px 22px rgba(31, 177, 199, 0.1); }
#billing:not(.expense-only) .performance-filter-card { padding: 22px 24px; }
#billing:not(.expense-only) .performance-date-filter input,
#billing:not(.expense-only) .performance-filter-row input,
#billing:not(.expense-only) .performance-filter-row select { border-color: rgba(140, 166, 192, 0.35); border-radius: 10px; background: rgba(249, 252, 255, 0.9); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
#billing:not(.expense-only) .performance-date-filter input:focus,
#billing:not(.expense-only) .performance-filter-row input:focus,
#billing:not(.expense-only) .performance-filter-row select:focus { border-color: var(--report-cyan); box-shadow: 0 0 0 4px rgba(10, 169, 199, 0.11); transform: translateY(-1px); }
#billing:not(.expense-only) .report-primary-btn { border-color: #079fbd; background: linear-gradient(135deg, #0bb4cf, #078db7); box-shadow: 0 8px 20px rgba(7, 157, 189, 0.22); }
#billing:not(.expense-only) .report-secondary-btn { border-color: rgba(10, 169, 199, 0.25); border-radius: 9px; color: #078ba5; background: rgba(255, 255, 255, 0.74); }
#billing:not(.expense-only) .performance-tabs button.active { border-bottom-color: var(--report-cyan); color: #078ba5; }
#billing:not(.expense-only) .performance-table thead th { background: #f4f8fb; color: #334155; border-color: #e4edf4; }
#billing:not(.expense-only) .performance-table tbody tr { transition: background 0.18s ease, box-shadow 0.18s ease; }
#billing:not(.expense-only) .performance-table tbody tr:hover { background: #effbfc; box-shadow: inset 3px 0 0 var(--report-cyan); }
#billing:not(.expense-only) .performance-table tfoot td { background: #ecf7fa; }

.performance-datetime-trigger { display: grid; grid-template-columns: 1fr 22px; align-items: center; gap: 8px; min-width: 190px; min-height: 46px; padding: 0 13px; border: 1px solid rgba(140, 166, 192, 0.35); border-radius: 11px; background: rgba(249, 252, 255, 0.94); color: #253b53; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.performance-datetime-trigger:hover, .performance-datetime-trigger[aria-expanded="true"] { border-color: #48bed2; box-shadow: 0 0 0 4px rgba(10, 169, 199, .1); transform: translateY(-1px); }
.performance-datetime-trigger span { color: #253b53; font-size: 14px; font-weight: 760; letter-spacing: 0; }
.performance-datetime-trigger small { color: #71869a; font-size: 13px; font-variant-numeric: tabular-nums; }
.performance-datetime-trigger i { color: #079fbd; font-size: 15px; font-style: normal; text-align: center; }
.performance-datetime-trigger.is-empty span, .performance-datetime-trigger.is-empty small { color: #94a3b1; }
.performance-datetime-popover { position: fixed; z-index: 12000; padding: 16px; border: 1px solid rgba(111, 176, 194, .3); border-radius: 16px; background: rgba(255, 255, 255, .98); box-shadow: 0 24px 64px rgba(35, 74, 98, .22), inset 0 1px 0 #fff; backdrop-filter: blur(18px); }
.performance-datetime-popover > header { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; margin-bottom: 12px; }
.performance-datetime-popover > header strong { color: #21384f; font-size: 16px; text-align: center; }
.performance-datetime-popover > header button { height: 36px; border: 0; border-radius: 10px; background: #eff8fa; color: #188fa7; font-size: 24px; cursor: pointer; }
.performance-calendar-week, .performance-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.performance-calendar-week { margin-bottom: 5px; color: #8293a3; font-size: 12px; text-align: center; }
.performance-calendar-week span { padding: 6px 0; color: inherit; font-size: inherit; font-weight: 700; letter-spacing: 0; }
.performance-calendar-grid button { aspect-ratio: 1; border: 0; border-radius: 9px; background: transparent; color: #31475e; font: inherit; font-weight: 700; cursor: pointer; }
.performance-calendar-grid button:hover { background: #eaf8fb; color: #078da8; }
.performance-calendar-grid button.outside { color: #b3bdc7; }
.performance-calendar-grid button.today { box-shadow: inset 0 0 0 1px #63c8da; color: #078da8; }
.performance-calendar-grid button.selected { background: linear-gradient(135deg, #0bb4cf, #078db7); color: #fff; box-shadow: 0 6px 14px rgba(7, 157, 189, .24); }
.performance-time-row { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 12px; border-radius: 11px; background: #f2f8fa; color: #526b80; font-size: 13px; font-weight: 750; }
.performance-time-row label { display: flex; align-items: center; gap: 6px; }
.performance-time-row select { width: 62px; height: 34px; border: 1px solid #c9dce4; border-radius: 8px; background: #fff; color: #263e55; font: inherit; text-align: center; }
.performance-time-row b { color: #71879a; }
.performance-datetime-popover > footer { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding-top: 13px; border-top: 1px solid #e2edf1; }
.performance-datetime-popover > footer div { display: flex; gap: 8px; }
.performance-datetime-popover > footer button { min-height: 36px; padding: 0 13px; border: 1px solid #c8e2e8; border-radius: 9px; background: #fff; color: #078ba5; font: inherit; font-weight: 750; cursor: pointer; }
.performance-datetime-popover > footer button.confirm { border-color: #079fbd; background: linear-gradient(135deg, #0bb4cf, #078db7); color: #fff; }
.performance-datetime-popover button:active { transform: translateY(1px); }

@media (max-width: 980px) {
  #billing:not(.expense-only) { padding: 10px 12px 32px !important; }
  #billing:not(.expense-only) .performance-layout { grid-template-columns: 1fr; }
  #billing:not(.expense-only) .performance-sidebar { position: static; }
  #billing:not(.expense-only) > .performance-hero { align-items: flex-start; gap: 20px; }
  .performance-hero-summary { justify-items: start; }
}

@media (max-width: 640px) {
  #billing:not(.expense-only) > .performance-hero { flex-direction: column; padding: 22px; }
  .performance-hero h2 { font-size: 26px; }
  .performance-date-filter input { flex-basis: 100%; width: 100%; }
  .performance-datetime-trigger { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #billing:not(.expense-only) > .performance-hero,
  #billing:not(.expense-only) .performance-sidebar,
  #billing:not(.expense-only) #performanceReportContent .report-card,
  #billing:not(.expense-only) .performance-sidebar button { transition: none; }
  #billing:not(.expense-only) > .performance-hero:hover,
  #billing:not(.expense-only) .performance-sidebar:hover,
  #billing:not(.expense-only) #performanceReportContent .report-card:hover { transform: none; }
}

/* Keep the monthly expense workspace aligned with the other primary modules. */
#billing.expense-only .expense-content {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

/* Wage settlement cards share the system's pointer-following cyan glow. */
#wageSettlement .wage-hero,
#wageSettlement .performance-sidebar,
#wageSettlement .report-card,
#wageSettlement .wage-kpis article {
  --wage-glow-alpha: 0;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

#wageSettlement .wage-hero {
  background:
    radial-gradient(360px circle at var(--wage-card-x, 50%) var(--wage-card-y, 20%), rgba(10, 169, 199, var(--wage-glow-alpha)), transparent 64%),
    linear-gradient(120deg, rgba(218, 248, 252, 0.88), rgba(255, 255, 255, 0.94) 42%, rgba(231, 237, 255, 0.78));
}

#wageSettlement .performance-sidebar {
  background:
    radial-gradient(300px circle at var(--wage-card-x, 50%) var(--wage-card-y, 20%), rgba(10, 169, 199, var(--wage-glow-alpha)), transparent 66%),
    rgba(255, 255, 255, 0.83);
}

#wageSettlement .report-card {
  background:
    radial-gradient(420px circle at var(--wage-card-x, 50%) var(--wage-card-y, 20%), rgba(10, 169, 199, var(--wage-glow-alpha)), transparent 64%),
    rgba(255, 255, 255, 0.86);
}

#wageSettlement .wage-kpis article {
  background:
    radial-gradient(260px circle at var(--wage-card-x, 50%) var(--wage-card-y, 20%), rgba(10, 169, 199, var(--wage-glow-alpha)), transparent 62%),
    linear-gradient(145deg, #f8fcff, #edf8fc);
}

#wageSettlement .wage-hero:hover,
#wageSettlement .performance-sidebar:hover,
#wageSettlement .report-card:hover,
#wageSettlement .wage-kpis article:hover {
  --wage-glow-alpha: 0.18;
  border-color: rgba(10, 169, 199, 0.46);
  box-shadow: 0 22px 52px rgba(38, 133, 158, 0.16), 0 0 0 1px rgba(10, 169, 199, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  transform: translateY(-2px);
}

#wageSettlement .performance-sidebar:hover {
  transform: translateX(2px);
}

#wageSettlement .wage-kpis article:hover {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  #wageSettlement .wage-hero,
  #wageSettlement .performance-sidebar,
  #wageSettlement .report-card,
  #wageSettlement .wage-kpis article {
    transition: none;
  }

  #wageSettlement .wage-hero:hover,
  #wageSettlement .performance-sidebar:hover,
  #wageSettlement .report-card:hover,
  #wageSettlement .wage-kpis article:hover {
    transform: none;
  }
}

/* Unified cyan-glass UI for inventory, supplier, outbound and expense overlays. */
.inventory-item-form-modal,
.supplier-form-modal,
.outbound-form-modal,
.performance-modal#expenseFormModal {
  --overlay-cyan: #09abc9;
  --overlay-cyan-dark: #078da9;
  --overlay-ink: #10223b;
  --overlay-muted: #64748b;
  padding: clamp(10px, 3vw, 34px);
  background: radial-gradient(circle at 50% 15%, rgba(69, 211, 235, .14), transparent 38%), rgba(15, 31, 49, .46);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  backdrop-filter: blur(12px) saturate(112%);
}

.inventory-item-form-card,
.supplier-form-card,
.outbound-form-card,
#expenseFormModal .expense-form-card {
  position: relative;
  isolation: isolate;
  overflow: auto;
  max-height: min(92vh, 980px);
  border: 1px solid rgba(13, 168, 199, .24);
  border-radius: 22px;
  background: radial-gradient(circle 350px at var(--overlay-x, 50%) var(--overlay-y, 0%), rgba(58, 210, 235, .18), transparent 62%), linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(246, 252, 255, .97));
  box-shadow: 0 30px 85px rgba(19, 48, 72, .28), 0 6px 20px rgba(12, 168, 198, .08);
  color: var(--overlay-ink);
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s ease;
}

.inventory-item-form-card:hover,
.supplier-form-card:hover,
.outbound-form-card:hover,
#expenseFormModal .expense-form-card:hover {
  border-color: rgba(10, 170, 202, .4);
  box-shadow: 0 34px 94px rgba(19, 48, 72, .3), 0 10px 28px rgba(12, 168, 198, .11);
}

.inventory-item-form-card .modal-head,
.supplier-form-card .modal-head,
.outbound-form-card .modal-head,
#expenseFormModal .expense-form-card > header {
  position: relative;
  z-index: 1;
  min-height: 76px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(11, 156, 187, .14);
  background: linear-gradient(110deg, rgba(232, 250, 254, .9), rgba(248, 250, 255, .76));
}

.inventory-item-form-card .modal-head h2,
.supplier-form-card .modal-head h2,
.outbound-form-card .modal-head h2,
#expenseFormModal .expense-form-card > header h2 {
  color: var(--overlay-ink);
  font-size: clamp(18px, 1.55vw, 23px);
  letter-spacing: -.02em;
}

.inventory-item-form-card .modal-head p,
.supplier-form-card .modal-head p,
.outbound-form-card .modal-head p { margin-top: 5px; color: var(--overlay-muted); }

.inventory-item-form-card .icon-btn,
.supplier-form-card .icon-btn,
.outbound-form-card .icon-btn,
#expenseFormModal .expense-form-card > header button {
  width: 42px;
  height: 42px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: rgba(235, 248, 252, .88);
  color: #64748b;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease, border-color .18s ease;
}

.inventory-item-form-card .icon-btn:hover,
.supplier-form-card .icon-btn:hover,
.outbound-form-card .icon-btn:hover,
#expenseFormModal .expense-form-card > header button:hover {
  border-color: rgba(10, 169, 199, .25);
  background: #def7fc;
  color: var(--overlay-cyan-dark);
  transform: rotate(4deg) scale(1.04);
}

.inventory-item-form,
.supplier-form,
.outbound-record-form,
#expenseFormModal .expense-form-grid { position: relative; z-index: 1; }

.inventory-item-form,
.outbound-record-form,
#expenseFormModal .expense-form-grid { padding: 22px 24px; }

.inventory-item-form label,
.supplier-form label,
.outbound-record-form label,
#expenseFormModal .expense-form-grid label { color: #233550; font-weight: 750; }

.inventory-item-form input,
.supplier-form input,
.supplier-form select,
.outbound-record-form input,
.outbound-record-form select,
.outbound-record-form textarea,
#expenseFormModal .expense-form-grid input,
#expenseFormModal .expense-form-grid select,
#expenseFormModal .expense-form-grid textarea {
  border: 1px solid rgba(117, 153, 177, .3);
  border-radius: 13px;
  background: rgba(250, 253, 255, .9);
  color: var(--overlay-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.inventory-item-form input:focus,
.supplier-form input:focus,
.supplier-form select:focus,
.outbound-record-form input:focus,
.outbound-record-form select:focus,
.outbound-record-form textarea:focus,
#expenseFormModal .expense-form-grid input:focus,
#expenseFormModal .expense-form-grid select:focus,
#expenseFormModal .expense-form-grid textarea:focus {
  outline: 0;
  border-color: rgba(5, 175, 207, .75);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(5, 175, 207, .11), 0 10px 24px rgba(10, 151, 180, .08);
}

.supplier-upload-box,
#expenseFormModal input[type="file"] {
  border: 1px dashed rgba(10, 169, 199, .4);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(244, 252, 255, .97), rgba(249, 251, 255, .92));
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.supplier-upload-box:hover,
#expenseFormModal input[type="file"]:hover {
  border-color: var(--overlay-cyan);
  background: #eefcff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(8, 158, 188, .1);
}

.inventory-item-form footer,
.supplier-form-actions,
.outbound-record-form footer,
#expenseFormModal .expense-form-card > footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(11, 156, 187, .13);
  background: rgba(250, 253, 255, .82);
}

.inventory-item-form footer button,
.supplier-form-actions button,
.outbound-record-form footer button,
#expenseFormModal .expense-form-card > footer button {
  min-height: 44px;
  border-radius: 12px;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.inventory-item-form footer button[type="submit"],
.supplier-form-actions .primary-btn,
.outbound-record-form footer .primary-btn,
#expenseFormModal .expense-form-card > footer .report-primary-btn {
  border-color: transparent;
  background: linear-gradient(135deg, #12b5d2, #078eac);
  color: #fff;
  box-shadow: 0 10px 22px rgba(8, 150, 181, .2);
}

.inventory-item-form footer button:hover,
.supplier-form-actions button:hover,
.outbound-record-form footer button:hover,
#expenseFormModal .expense-form-card > footer button:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(8, 150, 181, .16); }

.inventory-item-form footer button:active,
.supplier-form-actions button:active,
.outbound-record-form footer button:active,
#expenseFormModal .expense-form-card > footer button:active { transform: translateY(0) scale(.98); }

#expenseFormModal .expense-misc-item-field{position:relative;z-index:35}
#expenseFormModal .expense-category-card-field{position:relative;z-index:100}
#expenseFormModal .expense-category-card-select{z-index:100}
#expenseFormModal .expense-category-card-menu{grid-template-columns:1fr;width:100%;min-width:220px;background:#fff;box-shadow:0 24px 54px rgba(20,52,73,.3),0 8px 20px rgba(9,157,187,.14)}
#expenseFormModal .expense-category-card-select.single-choice .expense-card-select-trigger:disabled{opacity:1;cursor:default;color:#20344c;background:rgba(244,249,252,.94)}
#expenseFormModal .expense-card-select{position:relative;min-width:0}
#expenseFormModal .expense-card-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:46px;border:1px solid rgba(117,153,177,.3);border-radius:13px;padding:0 14px;background:rgba(250,253,255,.94);color:#20344c;font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
#expenseFormModal .expense-card-select-trigger b{font-weight:760}
#expenseFormModal .expense-card-select-trigger i{color:#078da9;font-style:normal;font-size:18px;transition:transform .16s ease}
#expenseFormModal .expense-card-select.open .expense-card-select-trigger{border-color:rgba(5,175,207,.75);background:#fff;box-shadow:0 0 0 4px rgba(5,175,207,.11),0 10px 24px rgba(10,151,180,.08)}
#expenseFormModal .expense-card-select.open .expense-card-select-trigger i{transform:rotate(180deg)}
#expenseFormModal .expense-card-select-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:80;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(430px,calc(100vw - 70px));border:1px solid rgba(9,171,201,.24);border-radius:16px;padding:12px;background:radial-gradient(circle at 18% 0,rgba(57,210,235,.14),transparent 55%),rgba(255,255,255,.99);box-shadow:0 22px 48px rgba(20,65,88,.22),0 6px 16px rgba(9,157,187,.1);animation:expenseFormCalendarOpen .16s ease-out}
#expenseFormModal .expense-card-select-menu[hidden]{display:none}
#expenseFormModal .expense-card-select-menu button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:45px;border:1px solid #dce9ef;border-radius:11px;padding:0 12px;background:rgba(247,252,254,.92);color:#2d4258;font:inherit;font-weight:730;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}
#expenseFormModal .expense-card-select-menu button:hover,#expenseFormModal .expense-card-select-menu button.selected{border-color:#6ed1df;background:#eafafd;color:#078da9;transform:translateY(-1px)}
#expenseFormModal .expense-card-select-menu button i{opacity:0;color:#0798b4;font-style:normal;font-weight:900}
#expenseFormModal .expense-card-select-menu button.selected i{opacity:1}
#expenseFormModal .expense-misc-item-field>small{color:#7b8c9d;font-size:12px;font-weight:600}
#expenseFormModal .expense-claimant-field{position:relative;z-index:34}
#expenseFormModal .expense-person-search{position:relative;min-width:0}
#expenseFormModal .expense-person-search-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:80;display:grid;gap:7px;width:min(360px,calc(100vw - 70px));max-height:280px;overflow:auto;border:1px solid rgba(9,171,201,.24);border-radius:16px;padding:10px;background:radial-gradient(circle at 18% 0,rgba(57,210,235,.14),transparent 55%),rgba(255,255,255,.99);box-shadow:0 22px 48px rgba(20,65,88,.22),0 6px 16px rgba(9,157,187,.1);animation:expenseFormCalendarOpen .16s ease-out}
#expenseFormModal .expense-person-search-menu[hidden]{display:none}
#expenseFormModal .expense-person-search-menu button{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;border:1px solid #dce9ef;border-radius:11px;padding:7px 12px;background:rgba(247,252,254,.94);color:#2d4258;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease}
#expenseFormModal .expense-person-search-menu button:hover{border-color:#6ed1df;background:#eafafd;transform:translateY(-1px)}
#expenseFormModal .expense-person-search-menu button span{display:grid;gap:2px}
#expenseFormModal .expense-person-search-menu button b{color:#20364e;font-size:14px}
#expenseFormModal .expense-person-search-menu button small{color:#788b9d;font-size:11px;font-weight:650}
#expenseFormModal .expense-person-search-menu button i{color:#078da9;font-style:normal;font-size:12px;font-weight:800}
#expenseFormModal .expense-person-search-menu p{margin:0;padding:16px;color:#7c8d9e;text-align:center;font-size:13px}
#expenseFormModal .expense-claimant-field>small{color:#7b8c9d;font-size:12px;font-weight:600}
@media(max-width:620px){#expenseFormModal .expense-card-select-menu{grid-template-columns:1fr}}

#expenseFormModal .expense-form-date-field { position: relative; }
#expenseFormModal .expense-form-date-field:has(.expense-form-date-picker.open) { z-index: 30; }
#expenseFormModal .expense-form-date-picker { position: relative; display: grid; min-width: 0; }
#expenseFormModal .expense-form-date-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; border: 1px solid rgba(117, 153, 177, .3); border-radius: 13px; padding: 0 13px; background: rgba(250, 253, 255, .9); color: var(--overlay-ink); font: inherit; font-weight: 760; text-align: left; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
#expenseFormModal .expense-form-date-trigger svg { width: 19px; height: 19px; flex: 0 0 auto; fill: currentColor; color: var(--overlay-cyan-dark); }
#expenseFormModal .expense-form-date-picker.open .expense-form-date-trigger { border-color: rgba(5, 175, 207, .75); background: #fff; box-shadow: 0 0 0 4px rgba(5, 175, 207, .11), 0 10px 24px rgba(10, 151, 180, .08); }
#expenseFormModal .expense-form-date-popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; display: grid; width: min(330px, calc(100vw - 64px)); overflow: hidden; border: 1px solid rgba(9, 171, 201, .24); border-radius: 16px; padding: 10px; background: radial-gradient(circle at 22% 0, rgba(57, 210, 235, .14), transparent 62%), rgba(255, 255, 255, .99); box-shadow: 0 22px 48px rgba(20, 65, 88, .2), 0 6px 16px rgba(9, 157, 187, .1); animation: expenseFormCalendarOpen .16s ease-out; }
#expenseFormModal .expense-form-date-popover[hidden] { display: none; }
#expenseFormModal .expense-form-date-popover header { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; min-height: 42px; padding: 0; border: 0; background: transparent; }
#expenseFormModal .expense-form-date-popover header strong { color: #17304b; text-align: center; font-size: 15px; }
#expenseFormModal .expense-form-date-popover header button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: #edfafd; color: #078da9; font: inherit; font-size: 22px; cursor: pointer; }
#expenseFormModal .expense-form-date-popover header button:hover { background: #d9f6fb; transform: none; }
#expenseFormModal .expense-form-calendar-week,
#expenseFormModal .expense-form-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
#expenseFormModal .expense-form-calendar-week span { display: grid; place-items: center; height: 28px; color: #728296; font-size: 12px; font-weight: 700; }
#expenseFormModal .expense-form-calendar-day { display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 0; border-radius: 9px; padding: 0; background: transparent; color: #263b54; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease; }
#expenseFormModal .expense-form-calendar-day:hover { background: #e4f9fd; color: #078da9; transform: translateY(-1px); box-shadow: none; }
#expenseFormModal .expense-form-calendar-day.outside { color: #a8b3bf; }
#expenseFormModal .expense-form-calendar-day.today { box-shadow: inset 0 0 0 1px rgba(8, 169, 198, .55); color: #078da9; }
#expenseFormModal .expense-form-calendar-day.selected { background: linear-gradient(135deg, #19b7d3, #078faa); color: #fff; box-shadow: 0 7px 15px rgba(8, 150, 181, .2); }
#expenseFormModal .expense-form-date-popover footer { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; border-top: 1px solid rgba(9, 171, 201, .13); padding: 8px 0 0; background: transparent; }
#expenseFormModal .expense-form-date-popover footer button { min-height: 34px; border: 0; border-radius: 8px; padding: 0 10px; background: transparent; color: #078da9; font: inherit; font-weight: 750; cursor: pointer; }
#expenseFormModal .expense-form-date-popover footer button:hover { background: #e7fafe; transform: none; box-shadow: none; }
@keyframes expenseFormCalendarOpen { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .inventory-item-form-modal,
  .supplier-form-modal,
  .outbound-form-modal,
  .performance-modal#expenseFormModal { padding: 8px; align-items: end; }
  .inventory-item-form-card,
  .supplier-form-card,
  .outbound-form-card,
  #expenseFormModal .expense-form-card { width: 100%; max-height: 94dvh; border-radius: 20px 20px 12px 12px; }
  .inventory-item-form-card .modal-head,
  .supplier-form-card .modal-head,
  .outbound-form-card .modal-head,
  #expenseFormModal .expense-form-card > header { padding: 16px 18px; }
  .inventory-item-form,
  .outbound-record-form,
  #expenseFormModal .expense-form-grid { padding: 18px; grid-template-columns: 1fr; }
  .supplier-form { padding: 18px; }
  .supplier-form-grid,
  .supplier-upload-grid,
  .outbound-high-value-fields { grid-template-columns: 1fr; }
  .inventory-item-form footer,
  .supplier-form-actions,
  .outbound-record-form footer,
  #expenseFormModal .expense-form-card > footer { position: sticky; bottom: 0; padding: 14px 18px; }
  #expenseFormModal .expense-form-date-popover { position: static; width: 100%; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .inventory-item-form-card,
  .supplier-form-card,
  .outbound-form-card,
  #expenseFormModal .expense-form-card,
  .inventory-item-form-card *,
  .supplier-form-card *,
  .outbound-form-card *,
  #expenseFormModal .expense-form-card * { transition: none !important; animation: none !important; }
}

/* Patient information tab and editor share the cyan card language. */
#patientDetail .patient-info-card {
  --info-x: 50%;
  --info-y: 0%;
  overflow: hidden;
  margin: 18px 0;
  border: 1px solid rgba(9, 171, 201, .22);
  border-radius: 22px;
  background: radial-gradient(circle 420px at var(--info-x) var(--info-y), rgba(58, 210, 235, .15), transparent 65%), rgba(255, 255, 255, .93);
  box-shadow: 0 20px 52px rgba(36, 101, 126, .12), inset 0 1px 0 rgba(255, 255, 255, .96);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

#patientDetail .patient-info-card:hover {
  border-color: rgba(9, 171, 201, .4);
  box-shadow: 0 25px 62px rgba(36, 101, 126, .15), inset 0 1px 0 #fff;
}

#patientDetail .patient-info-card > header {
  min-height: 66px;
  padding: 0 22px;
  border-bottom: 1px solid rgba(12, 165, 195, .15);
  background: linear-gradient(110deg, rgba(231, 250, 254, .82), rgba(248, 250, 255, .64));
}

#patientDetail .patient-info-card > header h2 { color: #10223b; font-size: 20px; }

#patientDetail .patient-info-edit-btn {
  min-width: 92px;
  height: 42px;
  border-color: rgba(9, 171, 201, .26);
  border-radius: 12px;
  background: rgba(255, 255, 255, .82);
  color: #078da9;
  box-shadow: 0 8px 18px rgba(10, 156, 185, .08);
  font-weight: 800;
}

#patientDetail .patient-info-edit-btn:hover { color: #fff; background: linear-gradient(135deg, #12b5d2, #078eac); transform: translateY(-2px); }
#patientDetail .patient-info-edit-btn:active { transform: translateY(0) scale(.98); }

#patientDetail .patient-info-card h3 {
  margin: 22px 24px 12px;
  border-bottom-color: rgba(111, 154, 178, .18);
  color: #17304b;
}

#patientDetail .patient-info-grid,
#patientDetail .patient-contact-grid,
#patientDetail .patient-extra-grid { gap: 12px 28px; padding-left: 24px; padding-right: 24px; border-top-color: rgba(111, 154, 178, .14); }

#patientDetail .patient-info-grid > div,
#patientDetail .patient-contact-grid,
#patientDetail .patient-extra-grid {
  border-radius: 16px;
}

#patientDetail .patient-info-grid p,
#patientDetail .patient-contact-grid p,
#patientDetail .patient-extra-grid p {
  min-height: 42px;
  color: #6a7b91;
}

#patientDetail .patient-info-grid b,
#patientDetail .patient-contact-grid b,
#patientDetail .patient-extra-grid b { color: #21344d; font-weight: 650; }

#patientDetail .family-relation-card {
  border: 1px solid rgba(9, 171, 201, .18);
  border-radius: 18px;
  background: rgba(250, 253, 255, .78);
  box-shadow: 0 12px 30px rgba(37, 101, 126, .08);
}

#patientDetail .family-relation-card header { background: transparent; border-bottom: 1px solid rgba(111, 154, 178, .14); }

.patient-info-edit-modal {
  --overlay-cyan: #09abc9;
  --overlay-cyan-dark: #078da9;
  padding: clamp(10px, 3vw, 32px);
  background: radial-gradient(circle at 50% 15%, rgba(69, 211, 235, .14), transparent 38%), rgba(15, 31, 49, .48);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  backdrop-filter: blur(12px) saturate(112%);
}

.patient-info-edit-card {
  position: relative;
  isolation: isolate;
  overflow: auto;
  width: min(980px, calc(100vw - 30px));
  max-height: 92vh;
  border: 1px solid rgba(9, 171, 201, .25);
  border-radius: 22px;
  background: radial-gradient(circle 380px at var(--overlay-x, 50%) var(--overlay-y, 0%), rgba(58, 210, 235, .18), transparent 64%), linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(246, 252, 255, .97));
  box-shadow: 0 32px 90px rgba(18, 46, 70, .3), 0 8px 24px rgba(9, 157, 187, .1);
}

.patient-info-edit-card > .modal-head {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  padding: 18px 24px;
  border-bottom: 1px solid rgba(9, 171, 201, .15);
  background: linear-gradient(110deg, rgba(228, 249, 254, .96), rgba(248, 250, 255, .94));
  backdrop-filter: blur(14px);
}

.patient-info-edit-card .modal-head span { color: #08a7c4; font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.patient-info-edit-card .modal-head h2 { margin: 4px 0 0; color: #10223b; font-size: 22px; }
.patient-info-edit-card .modal-head p { margin: 5px 0 0; color: #64748b; }
.patient-info-edit-card .icon-btn { width: 42px; height: 42px; border: 1px solid transparent; border-radius: 13px; background: #eaf8fc; color: #64748b; font-size: 22px; }
.patient-info-edit-card .icon-btn:hover { border-color: rgba(9, 171, 201, .25); background: #ddf7fc; color: #078da9; transform: rotate(4deg) scale(1.04); }

.patient-info-edit-form { position: relative; z-index: 1; padding: 8px 24px 0; }
.patient-info-edit-form > section { padding: 18px 0 20px; border-bottom: 1px solid rgba(111, 154, 178, .16); }
.patient-info-edit-form h3 { margin: 0 0 16px; color: #17304b; font-size: 17px; }
.patient-info-edit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.patient-info-edit-grid label { display: grid; gap: 7px; color: #2c4059; font-weight: 750; }
.patient-info-edit-grid label.wide { grid-column: 1 / -1; }

.patient-info-edit-grid input,
.patient-info-edit-grid select,
.patient-info-edit-grid textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(117, 153, 177, .3);
  border-radius: 13px;
  padding: 0 12px;
  background: rgba(250, 253, 255, .92);
  color: #10223b;
  font: inherit;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.patient-info-edit-grid textarea { min-height: 88px; padding: 12px; resize: vertical; }
.patient-info-edit-grid input:focus,
.patient-info-edit-grid select:focus,
.patient-info-edit-grid textarea:focus { outline: 0; border-color: rgba(5, 175, 207, .75); background: #fff; box-shadow: 0 0 0 4px rgba(5, 175, 207, .11), 0 10px 24px rgba(10, 151, 180, .08); }

.patient-info-edit-form > footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 0 -24px;
  padding: 16px 24px;
  border-top: 1px solid rgba(9, 171, 201, .14);
  background: rgba(250, 253, 255, .94);
  backdrop-filter: blur(14px);
}

.patient-info-edit-form > footer button { min-width: 108px; min-height: 44px; border-radius: 12px; transition: transform .16s ease, box-shadow .16s ease; }
.patient-info-edit-form > footer .primary-btn { border-color: transparent; background: linear-gradient(135deg, #12b5d2, #078eac); box-shadow: 0 10px 22px rgba(8, 150, 181, .2); }
.patient-info-edit-form > footer .primary-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-weight: 850;
  text-shadow: 0 1px 1px rgba(0, 80, 100, .16);
}
.patient-info-edit-form > footer button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(8, 150, 181, .14); }
.patient-info-edit-form > footer button:active { transform: translateY(0) scale(.98); }

.patient-info-edit-grid label:has(.patient-card-select-picker) { position: relative; z-index: 2; }
.patient-info-edit-grid label:has(.patient-card-select-picker.open) { z-index: 20; }
.patient-card-native-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.patient-card-select-picker { position: relative; min-width: 0; }

.patient-card-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(117, 153, 177, .3);
  border-radius: 13px;
  padding: 0 14px;
  background: rgba(250, 253, 255, .92);
  color: #10223b;
  font: inherit;
  font-weight: 720;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.patient-card-select-trigger i {
  width: 9px;
  height: 9px;
  border-right: 2px solid #40536a;
  border-bottom: 2px solid #40536a;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}

.patient-card-select-picker.open .patient-card-select-trigger {
  border-color: rgba(5, 175, 207, .75);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(5, 175, 207, .11), 0 12px 25px rgba(10, 151, 180, .1);
}

.patient-card-select-picker.open .patient-card-select-trigger i { transform: translateY(3px) rotate(225deg); }

.patient-card-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 80;
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(9, 171, 201, .25);
  border-radius: 15px;
  background: radial-gradient(circle at 30% 0, rgba(57, 210, 235, .16), transparent 65%), rgba(255, 255, 255, .98);
  box-shadow: 0 20px 48px rgba(20, 65, 88, .2), 0 4px 14px rgba(9, 157, 187, .1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.985);
  transform-origin: top;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.patient-card-select-picker.open .patient-card-select-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }

.patient-card-select-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  background: transparent;
  color: #263b54;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, transform .14s ease;
}

.patient-card-select-menu button:hover { background: #e9faff; color: #078da9; transform: translateX(2px); }
.patient-card-select-menu button[aria-selected="true"] { background: linear-gradient(135deg, #19b7d3, #078faa); color: #fff; box-shadow: 0 8px 18px rgba(8, 150, 181, .18); }
.patient-card-select-menu button b { opacity: 0; font-size: 17px; }
.patient-card-select-menu button[aria-selected="true"] b { opacity: 1; }

@media (max-width: 1100px) {
  #patientDetail .patient-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #patientDetail .patient-contact-grid,
  #patientDetail .patient-extra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patient-info-edit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  #patientDetail .patient-info-grid,
  #patientDetail .patient-contact-grid,
  #patientDetail .patient-extra-grid { grid-template-columns: 1fr; padding: 14px 16px 24px; }
  #patientDetail .patient-info-card > header { padding: 0 16px; }
  #patientDetail .family-relation-card { margin: 14px 16px 20px; }
  #patientDetail .family-relation-card header { align-items: flex-start; flex-direction: column; padding: 14px; }
  #patientDetail .family-relation-actions { overflow-x: auto; width: 100%; }
  .patient-info-edit-modal { padding: 8px; align-items: end; }
  .patient-info-edit-card { width: 100%; max-height: 94dvh; border-radius: 20px 20px 12px 12px; }
  .patient-info-edit-card > .modal-head { padding: 15px 18px; }
  .patient-info-edit-card .modal-head p { display: none; }
  .patient-info-edit-form { padding: 6px 18px 0; }
  .patient-info-edit-grid { grid-template-columns: 1fr; }
  .patient-info-edit-grid label.wide { grid-column: auto; }
  .patient-info-edit-form > footer { margin: 0 -18px; padding: 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #patientDetail .patient-info-card,
  #patientDetail .patient-info-card *,
  .patient-info-edit-card,
  .patient-info-edit-card * { transition: none !important; animation: none !important; }
}

/* New appointment: cyan card-based form panel. */
.booking-form-panel {
  --appointment-x: 50%;
  --appointment-y: 0%;
  padding: 10px;
  border-left: 1px solid rgba(9, 171, 201, .2);
  background: linear-gradient(145deg, #eefaff, #f5f7fc);
  box-shadow: -18px 0 46px rgba(30, 78, 102, .16);
}

@media (min-width: 701px) {
  .booking-layout.schedule-form-open .booking-form-panel {
    padding-top: 18px;
  }
}

.booking-form-panel .form-panel-head {
  flex: 0 0 auto;
  height: 66px;
  padding: 0 18px;
  border: 1px solid rgba(9, 171, 201, .2);
  border-radius: 18px;
  background: radial-gradient(circle 260px at var(--appointment-x) var(--appointment-y), rgba(58, 210, 235, .17), transparent 65%), rgba(255, 255, 255, .9);
  box-shadow: 0 12px 30px rgba(36, 101, 126, .1), inset 0 1px 0 #fff;
  color: #10223b;
  font-size: 20px;
  font-weight: 900;
}

.booking-form-panel .form-panel-head button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: #eaf8fc;
  color: #64748b;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.booking-form-panel .form-panel-head button:hover { background: #dcf7fc; color: #078da9; transform: rotate(4deg) scale(1.04); }

.booking-form-panel .inline-appointment-form {
  grid-template-columns: minmax(270px, .9fr) minmax(320px, 1.1fr);
  gap: 12px;
  padding: 12px 0 0;
  background: transparent;
}

.booking-form-panel .inline-appointment-form section {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(9, 171, 201, .18);
  border-radius: 18px;
  background: radial-gradient(circle 280px at var(--appointment-x) var(--appointment-y), rgba(58, 210, 235, .14), transparent 66%), rgba(255, 255, 255, .9);
  box-shadow: 0 14px 34px rgba(36, 101, 126, .09), inset 0 1px 0 rgba(255, 255, 255, .94);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.booking-form-panel .inline-appointment-form section:hover {
  border-color: rgba(9, 171, 201, .38);
  box-shadow: 0 19px 42px rgba(36, 101, 126, .13), inset 0 1px 0 #fff;
  transform: translateY(-1px);
}

.booking-form-panel .inline-appointment-form section:nth-of-type(3) {
  border-left: 1px solid rgba(9, 171, 201, .18);
  overflow: auto;
}

.booking-form-panel .inline-appointment-form h3 {
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 4px solid #09abc9;
  color: #17304b;
  font-size: 18px;
}

.booking-form-panel .inline-appointment-form label { color: #2b4058; font-weight: 680; }

.booking-form-panel .inline-appointment-form input,
.booking-form-panel .inline-appointment-form select,
.booking-form-panel .inline-appointment-form textarea {
  min-height: 44px;
  border: 1px solid rgba(117, 153, 177, .3);
  border-radius: 12px;
  background: rgba(250, 253, 255, .92);
  color: #10223b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.booking-form-panel .inline-appointment-form input:focus,
.booking-form-panel .inline-appointment-form select:focus,
.booking-form-panel .inline-appointment-form textarea:focus {
  outline: 0;
  border-color: rgba(5, 175, 207, .75);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(5, 175, 207, .11), 0 10px 24px rgba(10, 151, 180, .08);
}

.booking-form-panel label:has(.appointment-card-select-picker) { position: relative; z-index: 2; }
.booking-form-panel label:has(.appointment-card-select-picker.open) { z-index: 16; }
.appointment-card-native-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.appointment-card-select-picker { position: relative; display: grid; min-width: 0; }

.appointment-card-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(117, 153, 177, .3);
  border-radius: 12px;
  padding: 0 14px;
  background: rgba(250, 253, 255, .92);
  color: #10223b;
  font: inherit;
  font-weight: 720;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.appointment-card-select-trigger i {
  width: 9px;
  height: 9px;
  border-right: 2px solid #40536a;
  border-bottom: 2px solid #40536a;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}

.appointment-card-select-picker.open .appointment-card-select-trigger {
  border-color: rgba(5, 175, 207, .76);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(5, 175, 207, .11), 0 11px 24px rgba(10, 151, 180, .08);
}
.appointment-card-select-picker.open .appointment-card-select-trigger i { transform: translateY(3px) rotate(225deg); }

/* The menu stays in normal flow, so it expands the card instead of covering fields below. */
.appointment-card-select-menu {
  position: static;
  display: grid;
  gap: 5px;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  padding: 0 7px;
  border: 0 solid rgba(9, 171, 201, .24);
  border-radius: 14px;
  background: radial-gradient(circle at 30% 0, rgba(57, 210, 235, .15), transparent 65%), rgba(255, 255, 255, .98);
  box-shadow: none;
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
  transition: max-height .22s ease, margin .18s ease, padding .18s ease, border-width .18s ease, opacity .16s ease, transform .16s ease, box-shadow .18s ease;
}

.appointment-card-select-picker.open .appointment-card-select-menu {
  max-height: 270px;
  overflow: auto;
  margin-top: 8px;
  padding: 7px;
  border-width: 1px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  box-shadow: 0 16px 36px rgba(20, 65, 88, .16), 0 4px 12px rgba(9, 157, 187, .08);
}

.appointment-card-select-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 41px;
  border: 0;
  border-radius: 10px;
  padding: 0 12px;
  background: transparent;
  color: #263b54;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color .14s ease, background .14s ease, transform .14s ease;
}
.appointment-card-select-menu button:hover { background: #e9faff; color: #078da9; transform: translateX(2px); }
.appointment-card-select-menu button[aria-selected="true"] { background: linear-gradient(135deg, #19b7d3, #078faa); color: #fff; box-shadow: 0 8px 18px rgba(8, 150, 181, .18); }
.appointment-card-select-menu button b { opacity: 0; font-size: 17px; }
.appointment-card-select-menu button[aria-selected="true"] b { opacity: 1; }

.appointment-card-date-native { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; opacity:0!important; pointer-events:none!important; }
.appointment-card-date-picker { position:relative; display:grid; width:100%; min-width:0; }
.appointment-card-date-trigger { width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border:1px solid rgba(117,153,177,.3); border-radius:12px; background:rgba(250,253,255,.94); color:#10223b; font:inherit; font-weight:760; text-align:left; cursor:pointer; box-shadow:inset 0 1px 0 rgba(255,255,255,.82); transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.appointment-card-date-trigger i { display:grid; place-items:center; width:25px; height:25px; border:1px solid rgba(7,157,187,.2); border-radius:8px; background:#effbfe; color:#078da9; font-style:normal; }
.appointment-card-date-picker.open .appointment-card-date-trigger { border-color:rgba(5,175,207,.76); background:#fff; box-shadow:0 0 0 4px rgba(5,175,207,.11),0 11px 24px rgba(10,151,180,.08); }
.appointment-card-calendar { position:static; display:grid; max-height:0; overflow:hidden; margin-top:0; padding:0 10px; border:0 solid rgba(9,171,201,.24); border-radius:16px; background:radial-gradient(circle at 22% 0,rgba(57,210,235,.14),transparent 62%),rgba(255,255,255,.99); opacity:0; pointer-events:none; transform:translateY(-5px); transition:max-height .24s ease,margin .18s ease,padding .18s ease,border-width .18s ease,opacity .16s ease,transform .16s ease,box-shadow .18s ease; }
.appointment-card-date-picker.open .appointment-card-calendar { max-height:430px; overflow:visible; margin-top:8px; padding:10px; border-width:1px; opacity:1; pointer-events:auto; transform:translateY(0); box-shadow:0 18px 38px rgba(20,65,88,.16),0 5px 14px rgba(9,157,187,.08); }
.appointment-card-calendar header { display:grid; grid-template-columns:38px 1fr 38px; align-items:center; min-height:42px; }
.appointment-card-calendar header strong { color:#17304b; text-align:center; font-size:15px; }
.appointment-card-calendar header button { width:34px; height:34px; border:0; border-radius:9px; background:#edfafd; color:#078da9; font-size:22px; cursor:pointer; }
.appointment-card-calendar header button:hover { background:#d9f6fb; }
.appointment-calendar-week,.appointment-calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.appointment-calendar-week span { display:grid; place-items:center; height:28px; color:#728296; font-size:12px; font-weight:700; }
.appointment-calendar-day { aspect-ratio:1; min-width:0; border:0; border-radius:9px; background:transparent; color:#263b54; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.appointment-calendar-day:hover { background:#e4f9fd; color:#078da9; }
.appointment-calendar-day.outside { color:#a8b3bf; }
.appointment-calendar-day.today { box-shadow:inset 0 0 0 1px rgba(8,169,198,.55); color:#078da9; }
.appointment-calendar-day.selected { background:linear-gradient(135deg,#19b7d3,#078faa); color:#fff; box-shadow:0 7px 15px rgba(8,150,181,.2); }
.appointment-card-calendar footer { display:flex; justify-content:space-between; padding-top:8px; margin-top:7px; border-top:1px solid rgba(9,171,201,.13); }
.appointment-card-calendar footer button { min-height:34px; padding:0 10px; border:0; border-radius:8px; background:transparent; color:#078da9; font-weight:750; cursor:pointer; }
.appointment-card-calendar footer button:hover { background:#e7fafe; }
@media(prefers-reduced-motion:reduce){.appointment-card-date-trigger,.appointment-card-calendar{transition:none!important}}

.booking-form-panel .patient-search-line { gap: 9px; }
.booking-form-panel .inline-appointment-form section:has(.patient-search-dropdown:not(.hidden)) {
  z-index: 20;
}
.booking-form-panel .patient-search-line button {
  border-color: rgba(9, 171, 201, .3);
  border-radius: 12px;
  background: #effbfe;
  color: #078da9;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.booking-form-panel .patient-search-line button:hover { background: #dff8fc; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(9, 155, 184, .12); }

.booking-form-panel .patient-search-dropdown {
  top: calc(100% + 8px);
  max-width: calc(100vw - 40px);
  overflow: hidden auto;
  border: 1px solid rgba(9, 171, 201, .24);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 52px rgba(20, 65, 88, .2);
}
.booking-form-panel .patient-search-option {
  border-bottom-color: rgba(111, 154, 178, .14);
  background: transparent;
}
.booking-form-panel .patient-search-option > span:last-child { min-width: 0; }
.booking-form-panel .patient-search-option strong,
.booking-form-panel .patient-search-option small {
  overflow-wrap: anywhere;
}
.booking-form-panel .patient-search-option:hover { background: #eafaff; }

.booking-form-panel .type-toggle {
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(9, 171, 201, .19);
  border-radius: 13px;
  background: #f3f9fc;
}
.booking-form-panel .type-toggle label { height: 42px; border-radius: 9px; transition: color .16s ease, background .16s ease, box-shadow .16s ease; }
.booking-form-panel .type-toggle label:has(input:checked) { color: #fff; background: linear-gradient(135deg, #16b6d2, #078faa); box-shadow: 0 8px 18px rgba(8, 150, 181, .18); }

.booking-form-panel .project-search { grid-template-columns: 1fr 42px; }
.booking-form-panel .project-search input { border-radius: 12px 0 0 12px; }
.booking-form-panel .project-search span { height: 44px; border-color: rgba(117, 153, 177, .3); border-radius: 0 12px 12px 0; background: #f1fbfd; color: #078da9; }

.booking-form-panel .project-groups { gap: 8px 12px; }
.booking-form-panel .project-groups h4 { padding: 12px 4px 4px; border-top-color: rgba(111, 154, 178, .17); color: #17304b; }
.booking-form-panel .project-groups label {
  min-height: 42px;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: rgba(246, 250, 253, .8);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.booking-form-panel .project-groups label:hover { border-color: rgba(9, 171, 201, .22); background: #eafaff; transform: translateX(2px); }
.booking-form-panel .project-groups input { accent-color: #08a9c6; }

.booking-form-panel .inline-actions {
  gap: 10px;
  margin-top: 0;
  padding: 12px 16px;
  border: 1px solid rgba(9, 171, 201, .17);
  border-radius: 16px;
  background: rgba(250, 253, 255, .95);
  box-shadow: 0 12px 30px rgba(36, 101, 126, .1);
  backdrop-filter: blur(12px);
}
.booking-form-panel .inline-actions button { min-height: 44px; border-radius: 12px; transition: transform .16s ease, box-shadow .16s ease; }
.booking-form-panel .inline-actions .save-btn { background: linear-gradient(135deg, #12b5d2, #078eac); box-shadow: 0 10px 22px rgba(8, 150, 181, .2); }
.booking-form-panel .inline-actions button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(8, 150, 181, .14); }
.booking-form-panel .inline-actions button:active { transform: translateY(0) scale(.98); }

body.schedule-form-locked {
  overflow: hidden;
  overscroll-behavior: none;
}

.booking-layout.schedule-form-open #timeBoard .time-cell {
  pointer-events: none;
  cursor: default;
}

.booking-layout.schedule-form-open #timeBoard .schedule-chip {
  cursor: default;
}

.booking-layout.schedule-form-open .booking-form-panel {
  position: fixed;
  top: var(--schedule-panel-top, 132px);
  right: 0;
  bottom: 0;
  left: auto;
  z-index: 90;
  display: flex;
  flex-direction: column;
  width: min(600px, calc(100vw - 386px));
  height: calc(100dvh - var(--schedule-panel-top, 132px));
  min-height: 0;
  max-height: calc(100dvh - var(--schedule-panel-top, 132px));
  padding: 18px 10px 10px;
  overflow: hidden;
}

.booking-form-panel .form-panel-head {
  flex: 0 0 auto;
}

.booking-form-panel .inline-appointment-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
}

.booking-form-panel .inline-appointment-scroll {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(230px, .9fr) minmax(280px, 1.1fr);
  gap: 12px;
  min-height: 0;
  padding: 12px 0 20px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
}

.booking-form-panel .inline-appointment-scroll > section:nth-of-type(1),
.booking-form-panel .inline-appointment-scroll > section:nth-of-type(2) {
  grid-column: 1;
}

.booking-form-panel .inline-appointment-scroll > section:nth-of-type(3) {
  grid-column: 2;
  grid-row: 1 / 3;
  overflow: visible;
}

.booking-form-panel .inline-actions {
  position: relative;
  bottom: auto;
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid rgba(9, 171, 201, .2);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 -10px 24px rgba(36, 101, 126, .08);
}

.booking-form-panel .inline-appointment-form input,
.booking-form-panel .inline-appointment-form select,
.booking-form-panel .appointment-card-select-trigger,
.booking-form-panel .appointment-card-date-trigger {
  height: 42px;
  min-height: 42px;
}

.booking-form-panel .inline-appointment-form label {
  margin-bottom: 8px;
}

.booking-form-panel .inline-appointment-scroll > section:nth-of-type(3) {
  padding: 14px;
}

.booking-form-panel .inline-appointment-scroll > section:nth-of-type(3) > h3 {
  margin-bottom: 10px;
}

.booking-form-panel .project-search {
  margin-bottom: 6px;
}

.booking-form-panel .project-search input,
.booking-form-panel .project-search span {
  height: 40px;
  min-height: 40px;
}

.booking-form-panel .project-groups {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 18px;
}

.booking-form-panel .project-groups h4 {
  margin: 6px 0 1px;
  padding: 9px 2px 2px;
  line-height: 1.3;
}

.booking-form-panel .project-groups h4:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.booking-form-panel .project-groups label {
  gap: 6px;
  min-width: 0;
  min-height: 28px;
  margin: 0;
  padding: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 1.25;
  transition: color .15s ease;
}

.booking-form-panel .project-groups label:hover {
  border-color: transparent;
  background: transparent;
  color: #078da9;
  transform: none;
}

.booking-form-panel .project-groups input {
  flex: 0 0 auto;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
}

@media (max-width: 1180px) {
  .booking-layout.schedule-form-open {
    grid-template-columns: 300px minmax(0, 1fr) min(600px, calc(100vw - 300px));
  }
  .booking-layout.schedule-form-open .booking-form-panel {
    width: min(600px, calc(100vw - 300px));
  }
  .booking-form-panel .inline-appointment-scroll { grid-template-columns: 1fr; }
  .booking-form-panel .inline-appointment-form section:nth-of-type(1),
  .booking-form-panel .inline-appointment-form section:nth-of-type(2),
  .booking-form-panel .inline-appointment-form section:nth-of-type(3) { grid-column: 1; grid-row: auto; }
}

@media (max-width: 700px) {
  .booking-layout.schedule-form-open .booking-form-panel {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    padding: 7px;
  }
  .booking-form-panel .inline-appointment-form { display: block; padding-top: 8px; }
  .booking-form-panel .inline-appointment-scroll { display: block; height: calc(100dvh - 132px); padding: 8px 0 16px; }
  .booking-form-panel .inline-appointment-form section { margin-bottom: 9px; padding: 15px; border-radius: 16px; }
  .booking-form-panel .project-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .booking-form-panel .project-groups h4 { grid-column: 1 / -1; }
  .booking-form-panel .inline-actions { position: absolute; right: 7px; bottom: 7px; left: 7px; }
}

@media (max-width: 420px) {
  .booking-form-panel .project-groups { grid-template-columns: 1fr; }
  .booking-form-panel .project-groups h4 { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .booking-form-panel .form-panel-head,
  .booking-form-panel .inline-appointment-form section,
  .booking-form-panel .inline-appointment-form * { transition: none !important; animation: none !important; }
  .booking-form-panel .inline-appointment-form section:hover { transform: none; }
}

/* People and department management. */
.people-panel-actions { display: flex; align-items: center; gap: 10px; }
.people-panel-actions .light-btn,
.people-panel-actions .primary-btn { min-height: 42px; border-radius: 11px; padding: 0 18px; }
.people-panel-actions .light-btn { border-color: rgba(9,171,201,.28); background: #fff; color: #078da9; }
.people-panel-actions .primary-btn { background: linear-gradient(135deg,#12b5d2,#078eac); color: #fff !important; }
.settings-content #peopleAdminView > .panel-head .people-panel-actions #openPeopleEmployeeForm {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 116px;
  border: 1px solid #079ab7 !important;
  background: linear-gradient(135deg,#12b5d2,#078eac) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 850;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: 0 1px 1px rgba(0,70,90,.14);
}
.settings-content #peopleAdminView > .panel-head .people-panel-actions #openPeopleEmployeeForm:hover {
  border-color: #067f9a !important;
  background: linear-gradient(135deg,#0fa7c2,#067f9a) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(8,150,181,.2);
}

.people-employee-head,
.people-employee-row { grid-template-columns: minmax(220px,1.4fr) minmax(140px,.8fr) minmax(170px,1fr) minmax(220px,1fr) !important; }
.people-department { color: #263b54; font-weight: 700; }
.people-department.none { width: max-content; padding: 3px 10px; border-radius: 999px; background: #f1f5f9; color: #94a3b8; }
.people-department-field { grid-column: 1 / -1; }

.people-employee-modal {
  background: radial-gradient(circle at 50% 15%,rgba(69,211,235,.14),transparent 38%),rgba(15,31,49,.48);
  backdrop-filter: blur(12px) saturate(112%);
}
.people-employee-form {
  border: 1px solid rgba(9,171,201,.24);
  border-radius: 22px;
  background: linear-gradient(145deg,rgba(255,255,255,.99),rgba(246,252,255,.97));
  box-shadow: 0 30px 85px rgba(19,48,72,.28),0 6px 20px rgba(12,168,198,.08);
}
.people-employee-form header { min-height: 78px; border-bottom-color: rgba(9,171,201,.14); background: linear-gradient(110deg,rgba(232,250,254,.9),rgba(248,250,255,.76)); }
.people-employee-form header h2 { color: #10223b; font-size: 21px; }
.people-employee-form header>button { width: 42px; height: 42px; border-radius: 13px; background: #eaf8fc; color: #64748b; }
.people-form-grid { padding: 22px; }
.people-form-grid label { color: #2b4058; font-weight: 750; }
.people-form-grid input,.people-form-grid select { height: 44px; border-color: rgba(117,153,177,.3); border-radius: 12px; background: #fafdff; }
.people-form-grid input:focus,.people-form-grid select:focus { outline: 0; border-color: rgba(5,175,207,.75); box-shadow: 0 0 0 4px rgba(5,175,207,.11); }
.people-employee-form footer { border-top-color: rgba(9,171,201,.14); background: rgba(250,253,255,.84); }
.people-employee-form footer button { min-height: 42px; border-radius: 11px; }
.people-employee-form footer .primary-btn { background: linear-gradient(135deg,#12b5d2,#078eac); color: #fff !important; }

.department-manager-card { width: min(720px,100%); }
.department-manager-toolbar { display: flex; justify-content: flex-end; padding: 16px 20px 10px; }
.department-manager-toolbar .primary-btn { min-height: 42px; border-radius: 11px; background: linear-gradient(135deg,#12b5d2,#078eac); color: #fff; }
.department-manager-list { display: grid; gap: 10px; max-height: 52vh; overflow: auto; padding: 10px 20px 20px; }
.department-manager-list article { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 62px; padding: 10px 14px; border: 1px solid rgba(9,171,201,.18); border-radius: 14px; background: rgba(249,253,255,.88); box-shadow: 0 9px 22px rgba(36,101,126,.06); }
.department-manager-list article:hover { border-color: rgba(9,171,201,.38); background: #fff; }
.department-manager-list article strong { color: #17304b; }
.department-manager-list article>div { display: flex; gap: 8px; }
.department-manager-list .light-btn { min-height: 36px; border-radius: 9px; }
.department-new-editor { padding: 0 20px 8px; }
.department-inline-editor { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; width: 100%; }
.department-inline-editor label { display: grid; gap: 7px; min-width: 0; color: #2b4058; font-weight: 750; }
.department-inline-editor label span { font-size: 13px; }
.department-inline-editor input { width: 100%; height: 44px; padding: 0 13px; border: 1px solid rgba(117,153,177,.3); border-radius: 12px; background: #fafdff; color: #17304b; }
.department-inline-editor input:focus { outline: 0; border-color: rgba(5,175,207,.75); box-shadow: 0 0 0 4px rgba(5,175,207,.11); }
.department-inline-actions { display: flex; gap: 8px; }
.department-inline-actions button { min-height: 44px !important; padding: 0 16px; border-radius: 11px !important; white-space: nowrap; }
.department-inline-actions .primary-btn { border: 0; background: linear-gradient(135deg,#12b5d2,#078eac); color: #fff; }
.department-manager-list article.department-editor-row { padding: 12px 14px; border-color: rgba(9,171,201,.38); background: linear-gradient(135deg,rgba(239,251,254,.96),#fff); }
.department-manager-toolbar button:disabled { cursor: default; opacity: .5; transform: none; }

@media(max-width:760px){
  .permission-admin-tabs { width: 100%; }
  .permission-admin-tabs button { min-height: 46px; padding: 0 8px; font-size: 13px; }
  .settings-content #peopleAdminView>.panel-head { gap: 14px; flex-direction: column; }
  .people-panel-actions { width: 100%; }
  .people-panel-actions button { flex: 1; }
  .people-employee-head,.people-employee-row { grid-template-columns: minmax(180px,1.3fr) minmax(120px,.8fr) minmax(140px,.9fr) minmax(190px,1fr) !important; }
  .people-form-grid { grid-template-columns: 1fr; }
  .people-department-field { grid-column: auto; }
  .department-manager-list article { align-items: flex-start; flex-direction: column; }
  .department-inline-editor { grid-template-columns: 1fr; align-items: stretch; }
  .department-inline-actions { justify-content: flex-end; }
}

/* Performance report card-style filters. */
.performance-filter-card { position: relative; z-index: 8; overflow: visible !important; }
.performance-filter-row { overflow: visible !important; }
.performance-native-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.performance-card-select,.performance-value-control,.performance-value-picker { position: relative; min-width: 190px; }
.performance-value-control { flex: 1 1 220px; }
.performance-value-control>input { width: 100%; }
.performance-value-picker.hidden,
.performance-value-control>input.hidden { display: none !important; }
#billing:not(.expense-only) .performance-filter-row { align-items: center; }
#billing:not(.expense-only) .performance-filter-row .performance-card-select,
#billing:not(.expense-only) .performance-filter-row .performance-value-control,
#billing:not(.expense-only) .performance-filter-row .performance-value-picker { align-self: center; }
#billing:not(.expense-only) .performance-filter-row .performance-select-trigger,
#billing:not(.expense-only) .performance-filter-row .performance-value-control>input,
#billing:not(.expense-only) .performance-filter-row>.report-secondary-btn,
#billing:not(.expense-only) .performance-filter-row>.report-primary-btn {
  box-sizing: border-box;
  height: 52px;
  min-height: 52px;
  margin: 0;
}
.performance-select-trigger { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 14px; border: 1px solid rgba(89,145,173,.25); border-radius: 11px; background: linear-gradient(145deg,#fff,#f4fbfe); color: #20364f; font: inherit; font-weight: 700; cursor: pointer; transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.performance-select-trigger:hover,.performance-select-trigger[aria-expanded="true"] { border-color: rgba(3,171,205,.7); box-shadow: 0 0 0 4px rgba(3,171,205,.1),0 10px 22px rgba(29,113,143,.1); }
.performance-select-trigger:active { transform: translateY(1px); }
.performance-select-trigger i { color: #0799b6; font-style: normal; font-size: 18px; }
.performance-select-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 80; width: max(100%,240px); max-height: 280px; overflow: auto; display: grid; gap: 5px; padding: 8px; border: 1px solid rgba(3,171,205,.25); border-radius: 15px; background: rgba(255,255,255,.98); box-shadow: 0 22px 48px rgba(24,64,91,.2),0 6px 18px rgba(3,171,205,.1); backdrop-filter: blur(18px); }
.performance-select-menu.hidden { display: none !important; }
.performance-select-menu button { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: #30465d; text-align: left; font: inherit; font-weight: 700; cursor: pointer; }
.performance-select-menu button:hover,.performance-select-menu button:focus-visible { outline: 0; background: linear-gradient(105deg,rgba(207,247,253,.95),rgba(227,237,255,.88)); color: #008eac; }
.performance-select-menu button:active { background: #c8f2f8; transform: scale(.99); }
@media(max-width:760px){.performance-card-select,.performance-value-control,.performance-value-picker{width:100%;min-width:0}.performance-select-menu{width:100%}}
@media(prefers-reduced-motion:reduce){.performance-select-trigger,.performance-select-menu button{transition:none!important}.performance-select-trigger:active,.performance-select-menu button:active{transform:none!important}}

/* Follow-up workspace — same cyan card system as the rest of the product. */
.followup-board { gap:18px; padding:18px; border-radius:22px; background:linear-gradient(145deg,rgba(238,249,253,.8),rgba(245,248,255,.88)); }
.followup-column { padding:16px; border:1px solid rgba(65,174,201,.2); border-radius:17px; background:rgba(255,255,255,.88); box-shadow:0 14px 30px rgba(34,100,128,.08); }
.followup-column>h2 { margin:0 0 14px; color:#18324c; font-size:18px; }
.followup-card { border:1px solid rgba(83,164,190,.17); border-radius:13px; background:linear-gradient(135deg,#fff,#f2fbfd); box-shadow:0 8px 20px rgba(37,102,128,.06); }
.followup-card:hover { transform:translateY(-2px); }
.followup-modal {
  padding: 18px;
  overflow: hidden;
  visibility: hidden;
  background: rgba(19,42,61,0);
  transition: background .24s ease,backdrop-filter .24s ease;
}
.followup-modal.open {
  visibility: visible;
  background: rgba(21,42,60,.38);
  backdrop-filter: blur(12px) saturate(112%);
}
.followup-modal:not(.open) .followup-modal-card { box-shadow: none; }
.followup-modal-card {
  top: 18px;
  right: 18px;
  bottom: 18px;
  width: min(1520px,calc(100vw - 36px));
  height: auto;
  grid-template-columns: minmax(330px,32%) minmax(640px,68%);
  overflow: hidden;
  border: 1px solid rgba(59,185,211,.3);
  border-radius: 24px;
  background: linear-gradient(145deg,rgba(248,253,255,.99),rgba(239,248,253,.97));
  box-shadow: 0 34px 90px rgba(14,43,65,.3),0 8px 24px rgba(7,166,197,.12);
}
.followup-modal-left {
  grid-template-rows: 58px 48px minmax(0,1fr);
  gap: 0;
  padding: 0 12px 14px;
  border-right: 1px solid rgba(7,166,197,.2);
  background: linear-gradient(155deg,rgba(244,252,255,.98),rgba(255,255,255,.96));
}
.followup-modal-left header {
  height: 58px;
  gap: 7px;
  margin: 0 -12px;
  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid rgba(7,166,197,.16);
  background: rgba(255,255,255,.82);
}
.followup-modal-left header button {
  height: 40px;
  min-width: 92px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #536b80;
  font-size: 15px;
  font-weight: 760;
  transition: transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease;
}
.followup-modal-left header button:hover { background: #eefafd; color: #078eaa; }
.followup-modal-left header button.active {
  border-color: rgba(6,169,199,.2);
  background: linear-gradient(125deg,#d9f8fc,#e7efff);
  color: #058fab;
  box-shadow: 0 8px 18px rgba(8,155,184,.12);
}
.followup-modal-close,.followup-modal-left header .followup-modal-close {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: #eaf8fc !important;
  color: #667b8e !important;
  font-size: 25px !important;
}
.followup-modal-close:hover { background: #d8f3f8 !important; color: #087f98 !important; transform: rotate(3deg); }
.followup-expand-check { height: 48px; padding: 0 5px; color: #64778a; }
.followup-record-list { display: grid; align-content: start; gap: 12px; padding: 2px 3px 12px; }
.followup-record-item { overflow: hidden; border: 1px solid rgba(122,165,187,.2); border-radius: 15px; background: rgba(255,255,255,.84); box-shadow: 0 10px 24px rgba(39,96,121,.07); }
.followup-record-item header { min-height: 44px; padding: 0 13px; background: linear-gradient(105deg,rgba(218,248,252,.9),rgba(235,241,255,.72)); color: #456078; font-weight: 720; }
.followup-record-paper { margin: 10px 12px 14px; border-color: rgba(66,164,191,.18); border-radius: 13px; box-shadow: none; }
.followup-note-card { background: rgba(255,255,255,.72); }
.followup-modal-right {
  grid-template-rows: 58px 54px auto minmax(0,1fr) 66px;
  background: linear-gradient(155deg,rgba(249,253,255,.98),rgba(240,249,253,.94));
}
.followup-modal-head {
  height: 58px;
  padding: 0 14px 0 20px;
  border-bottom: 1px solid rgba(7,166,197,.16);
  background: rgba(255,255,255,.82);
  color: #122c45;
}
.followup-modal-head h2 { color: #112c45; font-size: 20px; font-weight: 850; }
.followup-modal-tabs { height: 54px; gap: 8px; padding: 7px 18px; border: 0; background: rgba(248,252,255,.72); }
.followup-modal-tabs button { min-width: 112px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: #63768a; font-weight: 760; }
.followup-modal-tabs button:hover { background: #eefafd; color: #078eaa; }
.followup-modal-tabs button.active { border: 1px solid rgba(6,169,199,.2); background: linear-gradient(125deg,#d8f8fc,#e7efff); color: #078faa; box-shadow: 0 8px 18px rgba(8,155,184,.1); }
.followup-patient-summary {
  grid-template-columns: 56px 130px 78px minmax(120px,1fr) minmax(120px,1fr) minmax(120px,1fr) 48px;
  min-height: 88px;
  margin: 10px 18px 12px;
  padding: 14px 16px;
  border-color: rgba(63,173,201,.22);
  border-radius: 16px;
  background: linear-gradient(125deg,rgba(255,255,255,.94),rgba(235,249,253,.86));
  box-shadow: 0 12px 28px rgba(40,108,135,.08);
}
.followup-patient-summary button { border-radius: 12px; background: linear-gradient(135deg,#12b5d2,#078eac); box-shadow: 0 8px 18px rgba(8,151,180,.2); }
.followup-plan-form { padding: 0 18px 18px; }
.followup-form-row { grid-template-columns: 80px minmax(200px,1fr) 72px minmax(200px,1fr); margin: 0 0 12px; }
.followup-plan-form select,.followup-plan-form input,.followup-plan-form textarea {
  border: 1px solid rgba(99,145,171,.27);
  border-radius: 11px;
  background: rgba(253,255,255,.94);
  color: #263d55;
  transition: border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.followup-native-select { display:none!important; }
.followup-card-select { position:relative; display:grid; min-width:0; width:100%; }
.followup-card-select-trigger { width:100%; min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 14px; border:1px solid rgba(99,145,171,.27); border-radius:11px; background:linear-gradient(145deg,#fff,#f4fbfe); color:#263d55; font:inherit; font-weight:700; text-align:left; cursor:pointer; transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.followup-card-select-trigger:hover,.followup-card-select-trigger[aria-expanded="true"] { border-color:rgba(5,175,207,.72); box-shadow:0 0 0 4px rgba(5,175,207,.1),0 9px 20px rgba(28,112,143,.08); }
.followup-card-select-trigger:active { transform:translateY(1px); }
.followup-card-select-trigger i { color:#0799b6; font-size:18px; font-style:normal; }
.followup-card-select-menu { position:relative; z-index:2; display:grid; gap:5px; width:100%; max-height:230px; overflow:auto; margin-top:7px; padding:8px; border:1px solid rgba(3,171,205,.23); border-radius:13px; background:rgba(255,255,255,.98); box-shadow:0 14px 32px rgba(24,64,91,.14),0 5px 14px rgba(3,171,205,.08); }
.followup-card-select-menu.hidden { display:none!important; }
.followup-card-select-menu button { min-height:40px; padding:8px 12px; border:0; border-radius:9px; background:transparent; color:#3d5368; font:inherit; font-weight:680; text-align:left; cursor:pointer; }
.followup-card-select-menu button:hover,.followup-card-select-menu button:focus-visible { outline:0; background:linear-gradient(105deg,rgba(207,247,253,.95),rgba(227,237,255,.86)); color:#008ba7; }
.followup-card-select-menu button.selected { background:linear-gradient(105deg,#d8f7fc,#e7efff); color:#078ca8; }
.followup-form-row:has(.followup-card-select-menu:not(.hidden)) { align-items:start; }
.followup-config-head:has(.followup-card-select-menu:not(.hidden)) .followup-card-select { padding:8px 10px 10px; background:rgba(244,251,254,.8); }
.followup-plan-grid label:has(.followup-card-select-menu:not(.hidden)) { align-items:start; }
.followup-plan-form select:focus,.followup-plan-form input:focus,.followup-plan-form textarea:focus { outline: 0; border-color: rgba(5,175,207,.78); background: #fff; box-shadow: 0 0 0 4px rgba(5,175,207,.11); }
.followup-config {
  grid-template-columns: 92px minmax(0,1fr);
  overflow: hidden;
  border-color: rgba(62,173,201,.22);
  border-radius: 17px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 12px 30px rgba(40,108,135,.08);
}
.followup-config-head span { padding-top: 20px; color: #496177; font-weight: 760; }
.followup-config-head select { height: 48px; border-radius: 0; border-top: 0; border-right: 0; border-left: 0; background: rgba(244,251,254,.8); }
.followup-config-body { grid-column: 2/3; gap: 14px; padding: 16px; border-left-color: rgba(62,173,201,.18); }
.followup-radio-line { flex-wrap: wrap; color: #536b80; }
.followup-radio-line input { accent-color: #09a9c7; }
.followup-plan-box { overflow: hidden; border-color: rgba(62,173,201,.2); border-radius: 15px; background: rgba(253,255,255,.86); box-shadow: 0 9px 22px rgba(40,108,135,.06); }
.followup-plan-box header { min-height: 46px; border-bottom-color: rgba(62,173,201,.16); background: linear-gradient(105deg,rgba(223,249,252,.75),rgba(242,247,255,.78)); }
.followup-plan-grid { gap: 12px 24px; padding: 15px; }
.followup-time-unit { grid-template-columns: 76px repeat(3,52px) 32px; gap: 4px; }
.followup-time-unit button,.followup-time-unit input { border-radius: 9px; }
.followup-time-unit button { border-color: rgba(99,145,171,.25); }
.followup-time-unit button:hover { border-color: #08a9c6; color: #078faa; }
.followup-time-unit button.active { border-color: transparent; background: linear-gradient(135deg,#12b5d2,#078eac); box-shadow: 0 6px 14px rgba(8,151,180,.18); }
.followup-add-plan { width: auto; min-width: 112px; height: 40px; margin: 0 0 14px 104px; padding: 0 15px; border-radius: 10px; background: #fff; }
.followup-add-plan:hover { background: #eafafd; box-shadow: 0 8px 18px rgba(8,151,180,.1); transform: translateY(-1px); }
.followup-modal-actions { align-items: center; gap: 10px; padding: 10px 18px; border-top-color: rgba(62,173,201,.16); background: rgba(250,253,255,.9); }
.followup-modal-actions .primary-btn,.followup-modal-actions .light-btn { height: 44px; min-width: 104px; border-radius: 11px; white-space: nowrap; }
.followup-modal-actions .primary-btn { border-color: transparent; background: linear-gradient(135deg,#12b5d2,#078eac); color: #fff; box-shadow: 0 8px 18px rgba(8,151,180,.18); }
.followup-modal-actions button:hover { transform: translateY(-1px); }
.followup-modal-actions button:active { transform: translateY(1px) scale(.99); }
.followup-glow-card { position: relative; isolation: isolate; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.followup-glow-card::before { content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; background:radial-gradient(240px circle at var(--followup-glow-x,50%) var(--followup-glow-y,50%),rgba(84,215,237,.18),transparent 68%); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.followup-glow-card:hover { border-color: rgba(7,175,207,.42); box-shadow: 0 16px 34px rgba(26,116,148,.11); }
.followup-glow-card:hover::before { opacity:1; }
@media(max-width:1050px){
  .followup-modal-card { grid-template-columns: minmax(280px,34%) minmax(520px,66%); }
  .followup-patient-summary { grid-template-columns: 48px repeat(3,minmax(100px,1fr)); }
  .followup-patient-summary>div:nth-of-type(n+4) { display:none; }
  .followup-form-row { grid-template-columns: 80px minmax(170px,1fr); }
  .followup-plan-grid { grid-template-columns:1fr; }
}
@media(max-width:760px){
  .followup-modal { padding:0; }
  .followup-modal-card { inset:0; width:100vw; height:100dvh; grid-template-columns:1fr; grid-template-rows:minmax(220px,34dvh) minmax(0,1fr); border:0; border-radius:0; }
  .followup-modal-left { border-right:0; border-bottom:1px solid rgba(7,166,197,.2); }
  .followup-modal-left header button { min-width:0; flex:1; padding:0 8px; }
  .followup-modal-right { grid-template-rows:58px 54px auto minmax(0,1fr) 66px; }
  .followup-patient-summary { grid-template-columns:48px 1fr 68px 42px; margin-inline:12px; }
  .followup-patient-summary>div:nth-of-type(n+3) { display:none; }
  .followup-plan-form { padding-inline:12px; }
  .followup-config { grid-template-columns:1fr; }
  .followup-config-head { display:grid; }
  .followup-config-head span { padding:12px 14px 4px; text-align:left; }
  .followup-config-body { grid-column:1; border-left:0; }
  .followup-form-row { grid-template-columns:1fr; }
  .followup-modal-actions { overflow-x:auto; }
}
@media(prefers-reduced-motion:reduce){
  .followup-modal,.followup-modal-card,.followup-glow-card,.followup-modal button { transition:none!important; animation:none!important; }
  .followup-glow-card:hover,.followup-modal-actions button:hover,.followup-add-plan:hover { transform:none!important; }
  .followup-glow-card::before { display:none!important; }
}

/* New appointment drawer and referral modal card surfaces. */
.appointment-drawer,.treatment-plan-drawer { overflow:hidden; }
.appointment-drawer { background:rgba(18,39,57,.42); }
.appointment-drawer-backdrop { background:rgba(18,39,57,.48); backdrop-filter:blur(10px) saturate(110%); }
.appointment-drawer-panel { top:0; right:0; bottom:0; width:min(96vw,1720px); height:100vh; grid-template-rows:64px minmax(0,1fr); overflow:hidden; border:1px solid rgba(44,180,207,.28); border-right:0; border-radius:24px 0 0 24px; background:linear-gradient(145deg,rgba(248,253,255,.99),rgba(238,248,253,.97)); box-shadow:0 34px 90px rgba(15,43,63,.3),0 8px 24px rgba(7,164,194,.12); }
.appointment-drawer-head { padding:0 22px; border-bottom-color:rgba(8,169,198,.16); background:linear-gradient(110deg,rgba(230,249,253,.92),rgba(247,250,255,.86)); }
.appointment-drawer-head h2 { color:#142e47; font-size:21px; font-weight:860; }
.appointment-drawer-head .plain-close { width:42px; height:42px; display:grid; place-items:center; border:0; border-radius:13px; background:#e8f7fb; color:#61768a; font-size:27px; transition:background .18s ease,color .18s ease,transform .18s ease; }
.appointment-drawer-head .plain-close:hover { background:#d7f3f8; color:#078ba6; transform:rotate(3deg); }
.appointment-drawer-body { height:auto; min-height:0; grid-template-columns:minmax(680px,1fr) 430px; gap:14px; padding:14px; background:linear-gradient(145deg,rgba(236,248,252,.78),rgba(244,247,254,.82)); }
.drawer-board { grid-template-rows:48px 44px 48px minmax(0,1fr); overflow:hidden; border:1px solid rgba(63,174,201,.2); border-radius:18px; background:rgba(255,255,255,.92); box-shadow:0 14px 32px rgba(35,101,127,.08); }
.drawer-board-title { background:linear-gradient(105deg,rgba(219,248,252,.72),rgba(240,246,255,.74)); color:#18324c; }
.drawer-week-nav { background:rgba(250,253,255,.92); }
.drawer-week-nav button { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#eefafd; color:#078fa9; font-size:26px; }
.drawer-week-nav button:hover:not(:disabled) { background:#dcf6fb; transform:translateY(-1px); }
.drawer-week-head { border-color:rgba(106,150,174,.18); background:#f9fcfe; }
.drawer-week-head span,.drawer-week-head button { border-right-color:rgba(106,150,174,.17); background:transparent; color:#2a4058; }
.drawer-week-head button.active { background:linear-gradient(135deg,#dbf8fc,#e6efff); box-shadow:inset 0 3px 0 #08a9c6; }
.drawer-time-board { background:#fbfdff; }
.drawer-time-label { border-color:rgba(121,157,179,.15); background:#f8fcfe; color:#7b8da0; }
.drawer-time-cell { border-color:rgba(121,157,179,.14); background:rgba(255,255,255,.86); transition:background .14s ease,box-shadow .14s ease; }
.drawer-time-cell:hover,.drawer-time-cell.selected-day:hover,.drawer-time-cell.drag-over { background:#def8fc; box-shadow:inset 0 0 0 1px rgba(8,169,198,.2); }
.drawer-appointment-form { height:100%; padding:0 10px 12px; border:1px solid rgba(63,174,201,.2); border-radius:18px; background:rgba(250,253,255,.88); box-shadow:0 14px 32px rgba(35,101,127,.08); }
.drawer-appointment-form section { margin-top:10px; padding:15px; border:1px solid rgba(66,173,201,.17); border-radius:15px; background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(241,250,253,.86)); box-shadow:0 9px 22px rgba(39,104,130,.06); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.drawer-appointment-form section:hover { border-color:rgba(8,169,198,.36); box-shadow:0 14px 30px rgba(31,111,142,.1); transform:translateY(-1px); }
.drawer-appointment-form h3 { color:#18324c; font-size:17px; }
.drawer-appointment-form input,.drawer-appointment-form select,.drawer-appointment-form textarea { border-color:rgba(106,150,174,.26); border-radius:11px; background:rgba(252,254,255,.94); }
.drawer-appointment-form input:focus,.drawer-appointment-form select:focus,.drawer-appointment-form textarea:focus { outline:0; border-color:rgba(5,175,207,.76); box-shadow:0 0 0 4px rgba(5,175,207,.1); }
.drawer-actions { position:sticky; bottom:-12px; z-index:8; display:flex; justify-content:flex-end; gap:10px; margin:12px -10px -12px; padding:12px 16px; border-top:1px solid rgba(8,169,198,.15); background:rgba(250,253,255,.96); backdrop-filter:blur(12px); }
.drawer-actions button { min-height:44px; border-radius:11px; white-space:nowrap; }
.drawer-actions .save-btn { background:linear-gradient(135deg,#12b5d2,#078eac); box-shadow:0 8px 18px rgba(8,151,180,.18); }

.referral-modal { padding:20px; background:rgba(17,38,56,.46); backdrop-filter:blur(12px) saturate(112%); }
.referral-modal-card { gap:18px; width:min(650px,calc(100vw - 34px)); padding:0; overflow:hidden; border:1px solid rgba(49,181,207,.3); border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(240,249,253,.97)); box-shadow:0 30px 80px rgba(14,43,64,.3),0 7px 22px rgba(7,164,194,.1); }
.referral-modal-card header { padding:20px 22px 18px; border-bottom:1px solid rgba(8,169,198,.14); background:linear-gradient(110deg,rgba(225,249,253,.92),rgba(245,248,255,.86)); }
.referral-modal-card header h2 { color:#132d46; font-size:23px; font-weight:880; }
.referral-modal-card header p { color:#60758a; }
.referral-modal-card header>button { width:40px; height:40px; border-radius:12px; background:#e8f7fb; color:#62778a; }
.referral-modal-card>label { margin:0 22px; color:#29425a; }
.referral-modal-card textarea { min-height:104px; border-color:rgba(100,146,172,.28); border-radius:12px; background:#fbfdff; transition:border-color .18s ease,box-shadow .18s ease; }
.referral-modal-card textarea:focus { outline:0; border-color:rgba(5,175,207,.76); box-shadow:0 0 0 4px rgba(5,175,207,.1); }
.referral-modal-card footer { padding:16px 22px 20px; border-top:1px solid rgba(8,169,198,.13); background:rgba(250,253,255,.9); }
.referral-modal-card footer .report-secondary-btn,.referral-modal-card footer .report-primary-btn { min-height:44px; border-radius:11px; }
.referral-modal-card footer .report-primary-btn { border-color:transparent; background:linear-gradient(135deg,#12b5d2,#078eac); box-shadow:0 8px 18px rgba(8,151,180,.18); }
.referral-native-select { position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }
.referral-card-select { display:grid; width:100%; }
.referral-card-select-trigger { width:100%; min-height:46px; display:flex; align-items:center; justify-content:space-between; padding:0 14px; border:1px solid rgba(100,146,172,.28); border-radius:12px; background:linear-gradient(145deg,#fff,#f3fbfe); color:#243d55; font:inherit; font-weight:750; cursor:pointer; }
.referral-card-select-trigger[aria-expanded="true"] { border-color:rgba(5,175,207,.76); box-shadow:0 0 0 4px rgba(5,175,207,.1); }
.referral-card-select-trigger i { color:#078fa9; font-size:18px; font-style:normal; }
.referral-card-select-menu { display:grid; gap:5px; max-height:230px; overflow:auto; margin-top:8px; padding:8px; border:1px solid rgba(8,169,198,.22); border-radius:14px; background:rgba(255,255,255,.98); box-shadow:0 16px 36px rgba(20,65,88,.15); }
.referral-card-select-menu.hidden { display:none!important; }
.referral-card-select-menu button { min-height:41px; padding:8px 12px; border:0; border-radius:9px; background:transparent; color:#3b5268; font:inherit; font-weight:700; text-align:left; cursor:pointer; }
.referral-card-select-menu button:hover { background:#e6f9fd; color:#078ca7; }
.referral-card-select-menu button.selected { background:linear-gradient(105deg,#d8f7fc,#e7efff); color:#078ca8; }
@media(max-width:900px){.appointment-drawer-panel{inset:0;width:100vw;height:100dvh;border:0;border-radius:0}.appointment-drawer-body{grid-template-columns:1fr;padding:10px;overflow:auto}.drawer-board{min-height:55dvh}.drawer-appointment-form{height:auto;overflow:visible}.appointment-drawer-head{height:64px}.appointment-drawer-panel{grid-template-rows:64px minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.appointment-drawer-panel,.drawer-appointment-form section,.referral-modal-card,.referral-card-select-trigger{animation:none!important;transition:none!important}.drawer-appointment-form section:hover{transform:none!important}}

/* Salary filters: personnel-linked inline card selects. */
.salary-card-select-source { display: none !important; }
.salary-filter-grid label:has(.salary-card-select.open),
.salary-filter-grid:has(.salary-card-select.open) { align-self: start; }
.salary-card-select { position: relative; display: grid; min-width: 0; }
.salary-card-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid rgba(203,213,225,.95); border-radius: 10px; background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(244,251,254,.96)); color: #263d55; font: inherit; font-weight: 750; text-align: left; cursor: pointer; transition: border-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.salary-card-select-trigger:hover,
.salary-card-select-trigger[aria-expanded="true"] { border-color: rgba(5,175,207,.76); box-shadow: 0 0 0 4px rgba(5,175,207,.1),0 9px 20px rgba(28,112,143,.08); }
.salary-card-select-trigger:active { transform: translateY(1px); }
.salary-card-select-trigger i { color: #078fa9; font-size: 18px; font-style: normal; }
.salary-card-select-menu { position: relative; z-index: 1; display: grid; gap: 5px; width: 100%; max-height: 220px; overflow: auto; margin-top: 7px; padding: 8px; border: 1px solid rgba(3,171,205,.23); border-radius: 13px; background: rgba(255,255,255,.98); box-shadow: 0 14px 32px rgba(24,64,91,.14),0 5px 14px rgba(3,171,205,.08); }
.salary-card-select-menu.hidden { display: none !important; }
.salary-card-select-menu button { display: grid; grid-template-columns: 20px minmax(0,1fr); align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 9px; background: transparent; color: #3d5368; font: inherit; font-weight: 700; text-align: left; cursor: pointer; transition: background .16s ease,color .16s ease,transform .16s ease; }
.salary-card-select-menu button:hover,
.salary-card-select-menu button:focus-visible { outline: 0; background: linear-gradient(105deg,rgba(207,247,253,.95),rgba(227,237,255,.86)); color: #008ba7; }
.salary-card-select-menu button:active { transform: scale(.99); }
.salary-card-select-menu button b { opacity: 0; color: #0799b6; }
.salary-card-select-menu button[aria-selected="true"] { background: linear-gradient(105deg,#d8f7fc,#e7efff); color: #078ca8; }
.salary-card-select-menu button[aria-selected="true"] b { opacity: 1; }
.salary-filter-grid:has(.salary-card-select.open) { align-items: start; }
@media (prefers-reduced-motion: reduce) {
  .salary-card-select-trigger,
  .salary-card-select-menu button { transition: none !important; }
  .salary-card-select-trigger:active,
  .salary-card-select-menu button:active { transform: none !important; }
}

/* Keep the salary editor aligned after legacy salary rules. */
.salary-modal .salary-modal-card{position:relative;overflow:visible;width:min(780px,calc(100vw - 28px));max-height:calc(100dvh - 28px);border:1px solid rgba(8,169,198,.26);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(241,249,252,.98));box-shadow:0 30px 84px rgba(19,48,70,.32),inset 0 1px 0 #fff}
.salary-modal .salary-modal-card>header{padding:20px 24px;border-bottom-color:rgba(167,195,211,.3);border-radius:20px 20px 0 0;background:linear-gradient(110deg,rgba(223,248,252,.96),rgba(244,248,255,.96))}.salary-modal .salary-modal-card header h2{color:#1d344b;font-size:21px;font-weight:900}.salary-modal .salary-modal-card header>button{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#e6f5f9;color:#647b8e}
.salary-modal .salary-modal-card nav{gap:8px;padding:8px 20px 0;border-bottom-color:rgba(184,205,216,.36);background:rgba(255,255,255,.62)}.salary-modal .salary-modal-card nav button{min-height:46px;border-bottom-width:2px;border-radius:9px 9px 0 0;padding:0 16px;font-weight:800}.salary-modal .salary-modal-card nav button.active{border-bottom-color:#08a9c6;color:#078da8}
.salary-modal .salary-modal-body{gap:16px;padding:22px 24px 24px}.salary-modal .salary-modal-body label{position:relative;gap:8px;color:#42566a;font-weight:800}.salary-modal .salary-modal-body input,.salary-modal .salary-modal-body textarea{min-height:46px;border-color:rgba(157,184,200,.46);border-radius:11px;background:#fff;color:#243b52}.salary-modal .salary-modal-body textarea{min-height:104px;padding:12px}
.salary-modal .salary-modal-card>footer{gap:10px;padding:16px 24px 20px;border-top-color:rgba(177,201,214,.34);border-radius:0 0 20px 20px;background:rgba(249,252,253,.92)}
@media(max-width:700px){.salary-modal .salary-modal-card{overflow:auto}}

/* ADMS attendance workspace. */
.attendance-view{padding:10px 22px 44px!important;background:linear-gradient(135deg,#f4f9fc,#f7f8fc 55%,#eef3ff)}.attendance-hero{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding:25px 30px;border:1px solid rgba(10,169,199,.25);border-radius:18px;background:linear-gradient(120deg,#daf8fc,#fff 45%,#e7edff);box-shadow:0 18px 42px rgba(66,104,139,.1)}.attendance-hero span{color:#079bb8;font-size:11px;font-weight:900;letter-spacing:.14em}.attendance-hero h2{margin:7px 0 5px;color:#172b40;font-size:29px}.attendance-hero p{margin:0;color:#6f8193}.attendance-live{display:flex;align-items:center;gap:9px}.attendance-live b{width:10px;height:10px;border-radius:50%;background:#17b77b;box-shadow:0 0 0 5px rgba(23,183,123,.12)}.system-card.attendance-toolbar,.attendance-tabs,.attendance-panel{border:1px solid rgba(151,177,203,.25);border-radius:16px;background:rgba(255,255,255,.9);box-shadow:0 14px 36px rgba(67,96,126,.08)}.attendance-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:18px 20px}.attendance-toolbar>div{display:flex;gap:10px;flex-wrap:wrap}.attendance-filters label{display:grid;gap:6px;color:#506579;font-size:12px;font-weight:800}.attendance-filters input,.attendance-filters select,.attendance-record-filters select,.attendance-unmatched-actions select{min-width:180px;height:42px;border:1px solid #cbdde5;border-radius:10px;padding:0 12px;background:#fff;color:#294157}.attendance-tabs{display:flex;margin:15px 0;overflow:hidden}.attendance-tabs button{min-height:48px;border:0;border-bottom:3px solid transparent;padding:0 20px;background:transparent;color:#677b8e;font-weight:800}.attendance-tabs button.active{border-bottom-color:#08a9c6;color:#078da8}.attendance-tabs span{padding:2px 7px;border-radius:9px;background:#e8f8fb}.attendance-panel{padding:16px;overflow:hidden}.attendance-calendar-wrap{overflow:auto;max-height:620px}.attendance-calendar{border-collapse:separate;border-spacing:0;min-width:1800px}.attendance-calendar th,.attendance-calendar td{border-right:1px solid #e4edf1;border-bottom:1px solid #e4edf1;padding:4px}.attendance-calendar thead th{position:sticky;top:0;z-index:2;min-width:54px;height:50px;background:#f1f6f9;color:#435a6f}.attendance-calendar thead small,.attendance-calendar tbody th small{display:block;margin-top:3px;color:#8a9aa8}.attendance-calendar tbody th{position:sticky;left:0;z-index:1;min-width:120px;background:#fff;text-align:left}.attendance-day{display:grid;align-content:center;width:100%;min-height:76px;border:0;border-radius:9px;padding:6px;background:#fff;color:#40566a}.attendance-day:hover{box-shadow:0 0 0 2px #55c2d5}.attendance-day.rest{background:#edf1f4}.attendance-day.leave{background:#fff2d7}.attendance-day.overtime{background:#e3f8ed}.attendance-day.empty{background:#f8fafb;color:#a1adb8}.attendance-day b{font-size:11px}.attendance-day small{margin-top:4px;font-size:9px}.attendance-day em{margin-top:5px;color:#078da8;font-size:9px;font-style:normal}.attendance-day em.late,.attendance-day em.early,.attendance-status.late,.attendance-status.early{color:#d97706}.attendance-day em.absent,.attendance-status.absent{color:#dc4455}.attendance-record-list{display:grid;gap:9px;margin-top:12px}.attendance-record-list article,.attendance-unmatched-row,.attendance-device-list article{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;border:1px solid #dce8ed;border-radius:12px;background:#fafdfe}.attendance-record-list span,.attendance-unmatched-row small,.attendance-device-list small{display:block;margin-top:4px;color:#7d8fa0;font-size:12px}.attendance-status{margin-left:auto;color:#078da8}.attendance-unmatched-actions{display:flex;gap:10px;margin-bottom:12px}.attendance-unmatched-row{justify-content:flex-start}.attendance-unmatched-row code{margin-left:auto;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#738698}.attendance-modal{position:fixed;inset:0;z-index:13000;display:grid;place-items:center;padding:18px;background:rgba(20,39,58,.55);backdrop-filter:blur(12px)}.attendance-modal-card{width:min(760px,100%);overflow:hidden;border:1px solid rgba(9,171,201,.25);border-radius:20px;background:#fafdff;box-shadow:0 30px 82px rgba(18,46,70,.34)}.attendance-modal-card>header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #d9eaf1;background:linear-gradient(105deg,#e5f9fd,#f7faff)}.attendance-modal-card header span{color:#078fac;font-size:11px;font-weight:900}.attendance-modal-card header h2{margin:5px 0 0;color:#18304a}.attendance-modal-card header button{border:0;background:transparent;font-size:24px}.attendance-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px 24px}.attendance-modal-grid label,.attendance-device-form label{display:grid;gap:7px;color:#435a70;font-size:13px;font-weight:800}.attendance-modal-grid input,.attendance-modal-grid select,.attendance-modal-grid textarea,.attendance-device-form input{height:44px;border:1px solid #cbdde5;border-radius:10px;padding:0 11px}.attendance-modal-grid textarea{height:86px;padding:10px}.attendance-modal-grid .wide{grid-column:1/-1}.attendance-modal-card>footer{display:flex;justify-content:flex-end;gap:10px;padding:15px 24px;border-top:1px solid #dceaf0}.attendance-device-list{display:grid;gap:8px;max-height:260px;overflow:auto;padding:18px 22px 0}.attendance-device-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px 22px}.attendance-device-form button{align-self:end}.attendance-switch{display:flex!important;align-items:center}.attendance-switch input{width:18px}.hidden{display:none!important}@media(max-width:760px){.attendance-view{padding:10px!important}.attendance-hero,.attendance-toolbar{align-items:flex-start;flex-direction:column}.attendance-modal-grid,.attendance-device-form{grid-template-columns:1fr}.attendance-modal-grid .wide{grid-column:auto}}
.audio-config-panel { max-width: 980px; }
.audio-config-list { display: grid; gap: 12px; margin-top: 20px; }
.audio-config-row { display: grid; grid-template-columns: minmax(190px, 1fr) auto minmax(240px, 1.2fr) auto; align-items: center; gap: 16px; padding: 18px; border: 1px solid #dfe7ef; border-radius: 14px; background: #fbfdff; }
.audio-config-title strong { display: block; color: #172b3d; font-size: 15px; }
.audio-config-title small, .audio-config-footer small, .audio-permission-note { color: #748596; }
.audio-config-row select { min-height: 40px; border: 1px solid #cbd7e2; border-radius: 9px; padding: 0 34px 0 12px; background: #fff; color: #263b4d; }
.audio-config-row select:disabled { background: #eef2f5; color: #98a5b0; cursor: not-allowed; }
.audio-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; color: #405567; }
.audio-switch input { position: absolute; opacity: 0; pointer-events: none; }
.audio-switch-track { width: 42px; height: 24px; padding: 3px; border-radius: 999px; background: #b8c4ce; transition: background .18s ease; }
.audio-switch-track::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(25, 45, 60, .22); transition: transform .18s ease; }
.audio-switch input:checked + .audio-switch-track { background: #16837a; }
.audio-switch input:checked + .audio-switch-track::after { transform: translateX(18px); }
.audio-switch input:disabled + .audio-switch-track { opacity: .55; cursor: not-allowed; }
.audio-config-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-top: 20px; }
.audio-config-loading { padding: 26px; color: #748596; text-align: center; }
@media (max-width: 760px) { .audio-config-row { grid-template-columns: 1fr auto; } .audio-config-row select { grid-column: 1 / -1; width: 100%; } .audio-preview-btn { grid-column: 1 / -1; } }

.attendance-person-filter { position: relative; min-width: 210px; }
.attendance-person-trigger { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 210px; height: 42px; border: 1px solid #cbdde5; border-radius: 10px; padding: 0 13px; background: #fff; color: #294157; font: inherit; font-weight: 800; cursor: pointer; }
.attendance-person-trigger i { font-size: 18px; font-style: normal; transition: transform .18s; }
.attendance-person-trigger[aria-expanded="true"] i { transform: rotate(180deg); }
.attendance-person-card { position: absolute; z-index: 40; top: calc(100% + 8px); left: 0; width: 290px; max-height: 340px; overflow: auto; border: 1px solid #d5e1e8; border-radius: 14px; padding: 8px; background: rgba(255,255,255,.98); box-shadow: 0 18px 44px rgba(31,54,76,.2); }
.attendance-person-card button { display: grid; grid-template-columns: 34px minmax(0,1fr) 20px; align-items: center; gap: 10px; width: 100%; border: 0; border-radius: 10px; padding: 9px; background: transparent; color: #294157; text-align: left; cursor: pointer; }
.attendance-person-card button:hover, .attendance-person-card button[aria-selected="true"] { background: #edf7fb; color: #078da8; }
.attendance-person-card button > span:nth-child(2) { display: grid; gap: 3px; }
.attendance-person-card button b { font-size: 13px; }
.attendance-person-card button small { color: #7d8fa0; font-size: 11px; }
.attendance-person-card button i { visibility: hidden; color: #08a9c6; font-style: normal; font-weight: 900; }
.attendance-person-card button[aria-selected="true"] i { visibility: visible; }
.attendance-person-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: linear-gradient(135deg,#dff7fb,#e8edff); color: #078da8; font-weight: 900; }

.system-card-select-source { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; }
.system-card-select { position: relative; display: inline-block; width: 100%; min-width: 0; color: #294157; font: inherit; }
.system-card-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 120px; min-height: 40px; border: 1px solid #cbdde5; border-radius: 10px; padding: 0 12px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.system-card-select-trigger:hover { border-color: #8dcbd8; background: #fbfeff; }
.system-card-select-trigger:focus-visible, .system-card-select.open .system-card-select-trigger { outline: none; border-color: #08a9c6; box-shadow: 0 0 0 3px rgba(8,169,198,.12); }
.system-card-select-trigger:disabled { background: #eef3f6; color: #8b9aa7; cursor: not-allowed; }
.system-card-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.system-card-select-chevron { flex: 0 0 auto; color: #61788c; font-size: 17px; font-style: normal; transition: transform .16s ease; }
.system-card-select.open .system-card-select-chevron { transform: rotate(180deg); }
.system-card-select-menu { position: absolute; z-index: 120; top: calc(100% + 7px); right: 0; left: 0; max-height: 280px; overflow: auto; border: 1px solid #d5e1e8; border-radius: 12px; padding: 6px; background: rgba(255,255,255,.98); box-shadow: 0 16px 40px rgba(31,54,76,.18); backdrop-filter: blur(12px); }
.system-card-select-menu button { display: grid; grid-template-columns: minmax(0,1fr) 18px; align-items: center; gap: 10px; width: 100%; min-height: 38px; border: 0; border-radius: 8px; padding: 7px 9px; background: transparent; color: #334b60; font: inherit; text-align: left; cursor: pointer; }
.system-card-select-menu button:hover, .system-card-select-menu button[aria-selected="true"] { background: #edf8fb; color: #078da8; }
.system-card-select-menu button:disabled { color: #a3afb9; cursor: not-allowed; }
.system-card-select-menu button i { visibility: hidden; color: #08a9c6; font-style: normal; font-weight: 900; }
.system-card-select-menu button[aria-selected="true"] i { visibility: visible; }
.modal, .attendance-modal, .people-employee-modal, .salary-modal, .wage-modal, .system-confirm-modal { isolation: isolate; }
.modal .system-card-select-menu, .attendance-modal .system-card-select-menu, .people-employee-modal .system-card-select-menu, .salary-modal .system-card-select-menu, .wage-modal .system-card-select-menu { z-index: 20; }
.people-employee-modal { overflow-y: auto; }
.people-employee-form:has(.people-role-field .system-card-select.open),
.people-employee-form:has(.people-department-field .system-card-select.open) { overflow: visible; }
.people-form-grid:has(.people-role-field .system-card-select.open),
.people-form-grid:has(.people-department-field .system-card-select.open) { padding-bottom: min(300px, 38vh); }
.people-role-field:has(.system-card-select.open),
.people-department-field:has(.system-card-select.open) { position: relative; z-index: 80; }
.people-role-field .system-card-select-menu,
.people-department-field .system-card-select-menu { z-index: 90; max-height: min(280px, 38vh); overscroll-behavior: contain; }
@media (max-width: 760px) {
  .people-form-grid:has(.people-role-field .system-card-select.open),
  .people-form-grid:has(.people-department-field .system-card-select.open) { padding-bottom: min(250px, 34vh); }
  .people-role-field .system-card-select-menu,
  .people-department-field .system-card-select-menu { max-height: min(230px, 34vh); }
}

/* Medical record visit selector: keep the full appointment label visible. */
#medicalRecord .record-create-top,
#medicalRecord .record-visit-time {
  overflow: visible;
}

#medicalRecord .record-create-top {
  z-index: 40;
}

#medicalRecord .record-visit-time {
  position: relative;
  z-index: 30;
  grid-column: 1 / -1;
  flex-wrap: nowrap;
}

#medicalRecord .record-visit-time:has(.system-card-select.open) {
  z-index: 200;
}

#medicalRecord .record-visit-time > .system-card-select {
  flex: 1 1 760px;
  width: min(900px, calc(100% - 92px));
  min-width: 560px;
  max-width: 900px;
}

#medicalRecord .record-visit-time .system-card-select-trigger {
  width: 100%;
  min-width: 0;
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  border-color: rgba(10, 169, 199, 0.32);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 7px 18px rgba(38, 133, 158, 0.08);
}

#medicalRecord .record-visit-time .system-card-select-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#medicalRecord .record-visit-time .system-card-select-menu {
  right: auto;
  left: 0;
  z-index: 1000;
  width: max(100%, 720px);
  max-width: min(920px, calc(100vw - 72px));
  max-height: min(420px, calc(100vh - 240px));
  overflow-x: auto;
  overflow-y: auto;
  border-radius: 14px;
  padding: 8px;
}

#medicalRecord .record-visit-time .system-card-select-menu button {
  width: 100%;
  height: auto;
  min-height: 48px;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  transform: none;
}

#medicalRecord .record-visit-time .system-card-select-menu button:hover {
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

#medicalRecord .record-visit-time .system-card-select-menu button:disabled,
#medicalRecord .record-visit-time .system-card-select-menu button:disabled:hover {
  background: #f1f3f5;
  color: #a2acb6;
  opacity: 0.78;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

#medicalRecord .record-visit-time .system-card-select-trigger:disabled {
  border-color: #d9e0e6;
  background: #f0f3f5;
  color: #98a3ad;
  box-shadow: none;
}

#medicalRecord .record-visit-time .system-card-select-menu button span {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

@media (max-width: 760px) {
  #medicalRecord .record-visit-time {
    flex-wrap: wrap;
  }

  #medicalRecord .record-visit-time > .system-card-select {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  #medicalRecord .record-visit-time .system-card-select-menu {
    width: 100%;
    min-width: 100%;
    max-width: calc(100vw - 40px);
  }
}

/* Keep the follow-up plan heading and its card select on one visual baseline. */
.followup-config-head > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0;
  line-height: 1.25;
}
.followup-config-head > .system-card-select {
  display: flex;
  align-items: center;
  align-self: stretch;
  min-height: 48px;
}
.followup-config-head > .system-card-select > .system-card-select-trigger {
  height: 48px;
  min-height: 48px;
  padding-block: 0;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: rgba(244,251,254,.8);
  line-height: 1.25;
}
.followup-config-head .system-card-select-value {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding-top: 0;
}

/* Patient center follow-up results: chronological card timeline. */
#patientDetail .patient-followup-panel {
  overflow: hidden;
  margin: 18px 0;
  border: 1px solid rgba(9, 171, 201, .22);
  border-radius: 22px;
  background:
    radial-gradient(circle 420px at 20% 0, rgba(58, 210, 235, .14), transparent 68%),
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(246, 251, 255, .94));
  box-shadow: 0 20px 52px rgba(36, 101, 126, .11), inset 0 1px 0 #fff;
}

#patientDetail .patient-followup-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 98px;
  padding: 18px 26px;
  border-bottom: 1px solid rgba(9, 171, 201, .15);
  background: linear-gradient(110deg, rgba(229, 250, 254, .78), rgba(248, 250, 255, .62));
}

#patientDetail .patient-followup-panel-head > div > span {
  color: #08a7c4;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
}

#patientDetail .patient-followup-panel-head h2 {
  margin: 5px 0 3px;
  color: #10223b;
  font-size: 22px;
}

#patientDetail .patient-followup-panel-head p { margin: 0; color: #6b7d91; font-size: 13px; }
#patientDetail .patient-followup-panel-head > strong {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 104px;
  justify-content: center;
  border: 1px solid rgba(9, 171, 201, .18);
  border-radius: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .78);
  color: #60758c;
  font-size: 13px;
}
#patientDetail .patient-followup-panel-head > strong b { color: #079fbd; font-size: 23px; }

#patientDetail .patient-followup-timeline { display: grid; padding: 24px 26px 32px; }
#patientDetail .patient-followup-timeline-row {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  min-width: 0;
}

#patientDetail .patient-followup-timeline-row > time {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 5px;
  padding: 17px 21px 28px 0;
  color: #66798e;
}

#patientDetail .patient-followup-timeline-row > time::after {
  content: "";
  position: absolute;
  top: 21px;
  right: -6px;
  z-index: 1;
  width: 11px;
  height: 11px;
  border: 3px solid #08a9c6;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 5px rgba(8, 169, 198, .1);
}

#patientDetail .patient-followup-timeline-row.failed > time::after { border-color: #e69247; box-shadow: 0 0 0 5px rgba(230, 146, 71, .11); }
#patientDetail .patient-followup-timeline-row > time::before {
  content: "";
  position: absolute;
  top: 38px;
  right: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(#bfe9f1, #dcecf2);
}
#patientDetail .patient-followup-timeline-row:last-child > time::before { display: none; }
#patientDetail .patient-followup-timeline-row > time strong { color: #263b54; font-size: 15px; }
#patientDetail .patient-followup-timeline-row > time span { color: #079fbd; font-size: 14px; font-weight: 850; }

#patientDetail .patient-followup-result-card {
  min-width: 0;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid rgba(9, 171, 201, .2);
  border-radius: 18px;
  background:
    radial-gradient(circle 300px at 86% 0, rgba(70, 210, 233, .11), transparent 72%),
    rgba(255, 255, 255, .94);
  box-shadow: 0 14px 34px rgba(37, 101, 126, .09), inset 0 1px 0 #fff;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

#patientDetail .patient-followup-result-card:hover {
  transform: translateY(-2px);
  border-color: rgba(9, 171, 201, .38);
  box-shadow: 0 20px 42px rgba(37, 101, 126, .13), inset 0 1px 0 #fff;
}

#patientDetail .patient-followup-result-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(111, 154, 178, .14);
  background: rgba(246, 251, 254, .72);
}

#patientDetail .patient-followup-result-card > header > div { display: flex; flex-wrap: wrap; gap: 8px; }
#patientDetail .patient-followup-project,
#patientDetail .patient-followup-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 850;
}
#patientDetail .patient-followup-project { background: #e8f8fc; color: #078da9; }
#patientDetail .patient-followup-status { background: #e8f7f1; color: #238263; }
#patientDetail .patient-followup-timeline-row.failed .patient-followup-status { background: #fff2e7; color: #b76325; }
#patientDetail .patient-followup-result-card > header small { color: #74869a; font-weight: 700; }

#patientDetail .patient-followup-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(111, 154, 178, .12);
}
#patientDetail .patient-followup-meta-grid > span { display: grid; gap: 4px; min-width: 0; }
#patientDetail .patient-followup-meta-grid small { color: #8291a1; font-size: 11px; font-weight: 700; }
#patientDetail .patient-followup-meta-grid b { overflow: hidden; color: #2a4058; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }

#patientDetail .patient-followup-result-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 12px;
  padding: 14px 16px 16px;
}
#patientDetail .patient-followup-result-grid > section {
  min-width: 0;
  border: 1px solid rgba(111, 154, 178, .13);
  border-radius: 13px;
  padding: 12px 14px;
  background: #fbfdff;
}
#patientDetail .patient-followup-result-grid > .patient-followup-result-highlight {
  border-color: rgba(9, 171, 201, .19);
  background: linear-gradient(145deg, #effbfe, #f7fbff);
}
#patientDetail .patient-followup-result-grid h3 { margin: 0 0 7px; color: #668097; font-size: 12px; }
#patientDetail .patient-followup-result-grid p { margin: 0; color: #253a52; font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }

#patientDetail .patient-followup-empty {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 40px;
  text-align: center;
}
#patientDetail .patient-followup-empty span { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 12px; border-radius: 18px; background: #e8f8fc; color: #08a7c4; font-size: 25px; }
#patientDetail .patient-followup-empty strong { color: #263b54; font-size: 17px; }
#patientDetail .patient-followup-empty p { margin: 7px 0 0; color: #7b8b9d; }

@media (max-width: 1050px) {
  #patientDetail .patient-followup-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  #patientDetail .patient-followup-panel-head { align-items: flex-start; padding: 16px 18px; }
  #patientDetail .patient-followup-panel-head > strong { min-width: auto; }
  #patientDetail .patient-followup-timeline { padding: 18px 14px 26px; }
  #patientDetail .patient-followup-timeline-row { grid-template-columns: 1fr; gap: 0; padding-left: 18px; }
  #patientDetail .patient-followup-timeline-row > time { justify-items: start; grid-template-columns: auto auto; gap: 8px; padding: 0 0 10px 17px; }
  #patientDetail .patient-followup-timeline-row > time::after { top: 4px; right: auto; left: -24px; }
  #patientDetail .patient-followup-timeline-row > time::before { top: 20px; right: auto; bottom: -18px; left: -18px; }
  #patientDetail .patient-followup-result-grid,
  #patientDetail .patient-followup-meta-grid { grid-template-columns: 1fr; }
  #patientDetail .patient-followup-result-card > header { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  #patientDetail .patient-followup-result-card { transition: none; }
}

/* Patient center satisfaction return-visit cards. */
#patientDetail .patient-return-visit-panel {
  overflow: hidden;
  margin: 18px 0;
  border: 1px solid rgba(9, 171, 201, .22);
  border-radius: 22px;
  background: radial-gradient(circle 420px at 16% 0, rgba(58, 210, 235, .14), transparent 68%), rgba(250, 253, 255, .96);
  box-shadow: 0 20px 52px rgba(36, 101, 126, .1), inset 0 1px 0 #fff;
}

#patientDetail .patient-return-visit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 98px;
  padding: 18px 26px;
  border-bottom: 1px solid rgba(9, 171, 201, .15);
  background: linear-gradient(110deg, rgba(229, 250, 254, .8), rgba(246, 248, 255, .74));
}

#patientDetail .patient-return-visit-head > div > span {
  color: #08a7c4;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

#patientDetail .patient-return-visit-head h2 { margin: 5px 0 3px; color: #10223b; font-size: 22px; }
#patientDetail .patient-return-visit-head p { margin: 0; color: #6b7d91; font-size: 13px; }
#patientDetail .patient-return-visit-head > strong { display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid rgba(9,171,201,.18); border-radius: 14px; padding: 10px 14px; background: rgba(255,255,255,.78); color: #60758c; font-size: 13px; white-space: nowrap; }
#patientDetail .patient-return-visit-head > strong b { color: #079fbd; font-size: 23px; }

#patientDetail .patient-return-visit-list { display: grid; gap: 14px; padding: 22px 26px 30px; }
#patientDetail .patient-return-visit-card { overflow: hidden; border: 1px solid rgba(9,171,201,.2); border-radius: 18px; background: rgba(255,255,255,.96); box-shadow: 0 14px 34px rgba(37,101,126,.08); }
#patientDetail .patient-return-visit-card > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 10px 16px; border-bottom: 1px solid rgba(111,154,178,.14); background: linear-gradient(110deg,rgba(235,250,253,.8),rgba(248,250,255,.82)); }
#patientDetail .patient-return-visit-card > header span { display: inline-flex; align-items: center; min-height: 30px; border-radius: 999px; padding: 0 13px; background: #dff7fb; color: #078da9; font-size: 13px; font-weight: 900; }
#patientDetail .patient-return-visit-card > header time { color: #75879a; font-size: 12px; font-weight: 750; }
#patientDetail .patient-return-visit-content { display: grid; grid-template-columns: 104px minmax(0,1fr); gap: 14px; align-items: start; padding: 18px 20px; }
#patientDetail .patient-return-visit-content strong { color: #577086; font-size: 13px; }
#patientDetail .patient-return-visit-content p { margin: 0; color: #223950; font-size: 15px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
#patientDetail .patient-return-visit-satisfaction { display: inline-flex; align-items: center; min-height: 30px; padding: 0 13px; border-radius: 999px; background: #e2f8f0; color: #12815f; font-size: 13px; font-weight: 850; line-height: 1; white-space: nowrap; }
#patientDetail .patient-return-visit-satisfaction.neutral { background: #fff5d9; color: #a56b00; }
#patientDetail .patient-return-visit-satisfaction.poor { background: #ffebe8; color: #c8493d; }
#patientDetail .patient-return-visit-card > footer { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; padding: 13px 16px 16px; border-top: 1px solid rgba(111,154,178,.12); background: #f9fcfe; }
#patientDetail .patient-return-visit-card > footer span { display: grid; gap: 4px; min-width: 0; }
#patientDetail .patient-return-visit-card > footer small { color: #8796a5; font-size: 11px; }
#patientDetail .patient-return-visit-card > footer b { overflow: hidden; color: #334a60; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
#patientDetail .patient-return-visit-empty { display: grid; place-items: center; min-height: 300px; padding: 40px; text-align: center; }
#patientDetail .patient-return-visit-empty span { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 12px; border-radius: 18px; background: #e8f8fc; color: #08a7c4; font-size: 25px; }
#patientDetail .patient-return-visit-empty strong { color: #263b54; font-size: 17px; }
#patientDetail .patient-return-visit-empty p { margin: 7px 0 0; color: #7b8b9d; }

@media (max-width: 900px) {
  #patientDetail .patient-return-visit-card > footer { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  #patientDetail .patient-return-visit-head { align-items: flex-start; flex-direction: column; padding: 16px 18px; }
  #patientDetail .patient-return-visit-list { padding: 16px 14px 24px; }
  #patientDetail .patient-return-visit-content { grid-template-columns: 1fr; }
  #patientDetail .patient-return-visit-card > footer { grid-template-columns: 1fr; }
}

/* Dashboard follow-up plans and results are actionable statistic cards. */
.mini-stats .dashboard-work-action-card {
  position: relative;
  cursor: pointer;
  outline: 0;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mini-stats .dashboard-work-action-card::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #08a9c6;
  border-right: 2px solid #08a9c6;
  transform: rotate(45deg);
}
.mini-stats .dashboard-work-action-card small {
  margin-top: 7px;
  color: #079fbd;
  font-size: 11px;
  font-weight: 750;
}
.mini-stats .dashboard-work-action-card:hover,
.mini-stats .dashboard-work-action-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(8, 169, 198, .42);
  box-shadow: 0 16px 34px rgba(29, 105, 132, .14), 0 0 0 3px rgba(8, 169, 198, .08);
}
.mini-stats .dashboard-work-action-card:active { transform: translateY(0) scale(.99); }

/* ClauseOS-inspired workbench shell. Layout only: business IDs and handlers stay unchanged. */
@media (min-width: 901px) {
.app-shell {
  grid-template-columns: 248px minmax(0, 1fr);
}

.app-shell > .main {
  grid-column: 2;
  width: auto;
  min-width: 0;
}

  .sidebar,
  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.sidebar-hold-open,
  .sidebar.sidebar-force-closed,
  .sidebar.sidebar-force-closed:hover,
  .sidebar.sidebar-force-closed:focus-within {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 80;
    width: 248px;
    height: 100dvh;
    padding: 18px 14px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(180deg, #071b13 0%, #0b2118 58%, #081710 100%);
    border-right: 1px solid rgba(202, 217, 208, .16);
    box-shadow: none;
    transition: none;
  }

  .sidebar .nav {
    gap: 5px;
  }

  .sidebar .nav-item,
  .sidebar:hover .nav-item,
  .sidebar:focus-within .nav-item,
  .sidebar.sidebar-hold-open .nav-item,
  .sidebar.sidebar-force-closed .nav-item {
    gap: 12px;
    min-height: 44px;
    height: 44px;
    padding: 0 13px;
    overflow: visible;
    border-radius: 11px;
    color: #b8c9c0;
    font-size: 14px;
    font-weight: 760;
    transform: none;
    transition: background .16s ease, color .16s ease;
  }

  .sidebar .nav-item:hover {
    transform: none;
    background: rgba(202, 217, 208, .09);
    color: #f0f6f2;
  }

  .sidebar .nav-item.active {
    background: #cad9d0;
    color: #105222;
    box-shadow: none;
  }

  .sidebar .nav-submenu,
  .sidebar.sidebar-force-closed .nav-submenu,
  .sidebar:not(:hover):not(:focus-within):not(.sidebar-hold-open) .nav-submenu {
    padding-left: 40px;
  }

  .sidebar .clinic-card,
  .sidebar:hover .clinic-card,
  .sidebar:focus-within .clinic-card,
  .sidebar.sidebar-hold-open .clinic-card,
  .sidebar.sidebar-force-closed .clinic-card {
    display: block;
    opacity: 1;
    transform: none;
    border-color: rgba(202, 217, 208, .16);
    border-radius: 12px;
    background: rgba(4, 17, 7, .4);
  }

  .sidebar .clinic-card span,
  .sidebar .clinic-card small {
    color: #93aa9e;
  }

  .sidebar .clinic-card strong {
    color: #eef5f0;
  }

  .sidebar .system-version {
    color: #70877b;
  }
}

#dashboard {
  --clause-ink: #16251d;
  --clause-muted: #6f7e75;
  --clause-line: #dce3de;
  --clause-panel: #f9faf8;
  --clause-accent: #105222;
  color: var(--clause-ink);
}

.topbar.dashboard-topbar {
  border-bottom-color: #e0e5e1;
  background: rgba(249, 250, 248, .96);
  box-shadow: none;
}

.topbar.dashboard-topbar .search {
  border-color: #dce3de;
  border-radius: 10px;
  background: #fff;
}

.topbar.dashboard-topbar .top-new-patient {
  border-radius: 10px;
  background: #105222 !important;
  box-shadow: none;
}

.dashboard-clause-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(290px, 23vw, 360px);
  align-items: start;
  gap: 16px;
}

.dashboard-clause-main {
  min-width: 0;
}

.dashboard-clause-rail {
  position: sticky;
  top: 82px;
  min-width: 0;
}

#dashboard .glow-card {
  border: 1px solid var(--clause-line);
  border-radius: 14px;
  background: var(--clause-panel);
  box-shadow: 0 8px 24px rgba(28, 54, 39, .055);
  backdrop-filter: none;
}

#dashboard .glow-card::before {
  display: none;
}

#dashboard .glow-card:hover {
  transform: none;
  border-color: #cad9d0;
  box-shadow: 0 10px 28px rgba(28, 54, 39, .075);
}

#dashboard .queue-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

#dashboard .queue-card {
  min-height: 122px;
  padding: 17px;
}

#dashboard .dashboard-stat-index {
  width: 38px;
  height: 38px;
  border-color: #cad9d0;
  border-radius: 10px;
  background: #e8eee9;
  color: var(--clause-accent);
  font-size: 13px;
}

#dashboard .queue-card strong {
  color: #66746b;
  font-size: 13px;
}

#dashboard .queue-card b {
  color: var(--clause-accent);
  font-size: 27px;
}

#dashboard .dashboard-task-summary-actions {
  display: flex;
}

#dashboard .pending-record-summary:hover,
#dashboard .pending-followup-summary:hover,
#dashboard .dashboard-task-summary:hover {
  transform: none;
  border-color: #9bb6a3;
  box-shadow: 0 10px 28px rgba(28, 54, 39, .09);
}

#dashboard .visit-board {
  margin-top: 16px;
}

#dashboard .visit-tabs {
  height: 54px;
  border-bottom-color: var(--clause-line);
}

#dashboard .visit-tabs button {
  height: 54px;
  min-width: 118px;
  color: #647269;
  font-size: 15px;
}

#dashboard .visit-tabs button.active {
  color: var(--clause-accent);
  border-bottom-color: var(--clause-accent);
}

#dashboard .visit-tabs .board-setting {
  min-width: 144px;
  border-color: var(--clause-line);
  border-radius: 9px;
  color: #5e6c63;
  background: #fff;
  font-size: 13px;
}

#dashboard .visit-tools {
  flex-wrap: wrap;
  min-height: 70px;
  border-bottom-color: var(--clause-line);
}

#dashboard .date-box {
  min-width: 178px;
}

#dashboard .date-box input {
  width: 136px;
  padding-left: 12px;
  font-size: 14px;
}

#dashboard .date-box span {
  background: var(--clause-accent);
}

#dashboard .date-box::after {
  display: none;
}

#dashboard .board-search {
  flex: 1 1 210px;
  width: auto;
  min-width: 190px;
}

#dashboard .visit-select {
  flex: 1 1 180px;
  min-width: 170px;
}

#dashboard .visit-table th {
  background: #edf1ee;
  color: #4e5e54;
}

#dashboard .visit-table td {
  background: #fff;
  border-color: #e1e6e2;
}

#dashboard .ops-row {
  display: block;
  margin: 0;
}

#dashboard .work-card {
  padding: 18px;
}

#dashboard .work-card h2 {
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
  color: var(--clause-ink);
  font-size: 18px;
}

#dashboard .work-revenue-eye {
  width: 34px;
  height: 34px;
  color: #78877e;
}

#dashboard .work-revenue-eye.visible,
#dashboard .work-revenue-eye:hover {
  color: var(--clause-accent);
}

#dashboard .mini-stats {
  grid-template-columns: 1fr;
  gap: 8px;
}

#dashboard .mini-stats div {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 72px;
  padding: 13px 14px;
  border-radius: 11px;
  font-size: 14px;
}

#dashboard .mini-stats span {
  color: #56665c;
  font-size: 13px;
}

#dashboard .mini-stats b {
  margin: 0;
  color: #17271e;
  font-size: 22px;
  text-align: right;
}

#dashboard .mini-stats .dashboard-work-action-card small {
  grid-column: 1 / -1;
  margin-top: 4px;
  color: var(--clause-accent);
}

#dashboard .mini-stats .dashboard-work-action-card::after {
  top: 16px;
  right: 14px;
  border-color: var(--clause-accent);
}

#dashboard .mini-stats .dashboard-work-action-card:hover,
#dashboard .mini-stats .dashboard-work-action-card:focus-visible {
  transform: none;
  border-color: #9bb6a3;
  box-shadow: 0 8px 18px rgba(28, 54, 39, .08);
}

@media (min-width: 901px) and (max-width: 1220px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .sidebar,
  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.sidebar-hold-open,
  .sidebar.sidebar-force-closed,
  .sidebar.sidebar-force-closed:hover,
  .sidebar.sidebar-force-closed:focus-within {
    width: 220px;
  }

  .dashboard-clause-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
  }

  #dashboard .queue-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .dashboard-clause-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-clause-rail {
    position: static;
    grid-row: 1;
  }

  #dashboard .mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dashboard .queue-grid {
    grid-template-columns: 1fr;
  }
}

.dashboard-followup-stats-dialog {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(1120px, calc(100vw - 40px));
  max-height: min(820px, calc(100dvh - 48px));
  overflow: hidden;
  border: 1px solid rgba(49, 181, 207, .3);
  border-radius: 24px;
  background:
    radial-gradient(circle 520px at 18% 0, rgba(67, 211, 235, .15), transparent 68%),
    linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(240, 249, 253, .97));
  box-shadow: 0 30px 90px rgba(14, 43, 64, .32), 0 7px 22px rgba(7, 164, 194, .1);
  transform: translateY(10px) scale(.985);
  transition: transform .18s ease;
}
.pending-record-modal.open .dashboard-followup-stats-dialog { transform: none; }
.dashboard-followup-results-dialog { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.dashboard-followup-stats-dialog > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid rgba(8, 169, 198, .14);
  background: linear-gradient(110deg, rgba(225, 249, 253, .92), rgba(245, 248, 255, .86));
}
.dashboard-followup-stats-dialog > header span { color: #08a7c4; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.dashboard-followup-stats-dialog > header h2 { margin: 4px 0 0; color: #132d46; font-size: 23px; font-weight: 880; }
.dashboard-followup-stats-dialog > header p { margin: 5px 0 0; color: #60758a; font-size: 13px; }
.dashboard-followup-stats-dialog > header button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 13px;
  background: #e8f7fb;
  color: #62778a;
  font-size: 25px;
  cursor: pointer;
}
.dashboard-followup-stats-dialog > header button:hover { background: #dff5fa; color: #078da9; }
.dashboard-followup-results-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 10px 24px 0;
  border-bottom: 1px solid rgba(8, 169, 198, .13);
  background: rgba(250, 253, 255, .9);
}
.dashboard-followup-results-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border: 0;
  border-radius: 13px 13px 0 0;
  background: transparent;
  color: #60758b;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.dashboard-followup-results-tabs button::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: -1px;
  left: 14px;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}
.dashboard-followup-results-tabs button:hover { color: #078da9; background: rgba(229, 248, 252, .62); }
.dashboard-followup-results-tabs button.active {
  background: linear-gradient(110deg, rgba(222, 248, 252, .9), rgba(235, 242, 255, .84));
  color: #078ca8;
}
.dashboard-followup-results-tabs button.active::after { background: #08a9c6; }
.dashboard-followup-results-tabs button b {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 9px;
  padding: 0 7px;
  background: rgba(255, 255, 255, .82);
  color: inherit;
  font-size: 12px;
}
.dashboard-followup-stats-content { min-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px; }
.dashboard-followup-results-panel[hidden] { display: none !important; }
.dashboard-followup-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.dashboard-followup-plan-card,
.dashboard-followup-result-card {
  overflow: hidden;
  border: 1px solid rgba(70, 157, 185, .2);
  border-radius: 17px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 28px rgba(34, 91, 115, .09), inset 0 1px 0 #fff;
}
.dashboard-followup-plan-card > header,
.dashboard-followup-result-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(101, 155, 179, .13);
  background: linear-gradient(110deg, #f0fafc, #f8fbfe);
}
.dashboard-followup-plan-card > header > div,
.dashboard-followup-result-card > header > div { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-width: 0; }
.dashboard-followup-plan-card > header > div > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #e3f6fb;
  color: #078da9;
  font-size: 11px;
  font-weight: 900;
}
.dashboard-followup-plan-card > header strong,
.dashboard-followup-result-card > header strong { color: #1d354e; font-size: 16px; }
.dashboard-followup-plan-card > header em,
.dashboard-followup-result-card > header em {
  border-radius: 999px;
  padding: 5px 9px;
  background: #eaf8f3;
  color: #268268;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}
.dashboard-followup-plan-card > header em.pending { background: #eef5ff; color: #3f76aa; }
.dashboard-followup-plan-card > header small { color: #7f90a1; font-size: 11px; }
.dashboard-followup-plan-body,
.dashboard-followup-result-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}
.dashboard-followup-plan-body > span,
.dashboard-followup-result-meta > span { display: grid; gap: 4px; min-width: 0; }
.dashboard-followup-plan-body small,
.dashboard-followup-result-meta small { color: #8191a2; font-size: 11px; font-weight: 700; }
.dashboard-followup-plan-body b,
.dashboard-followup-result-meta b { overflow: hidden; color: #284058; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-followup-plan-card > p {
  min-height: 52px;
  margin: 0 14px 14px;
  border-radius: 12px;
  padding: 10px 12px;
  background: #f6fafc;
  color: #40566c;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.dashboard-followup-plan-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  padding: 9px 14px;
  border-top: 1px solid rgba(101, 155, 179, .13);
  color: #7b8b9c;
  font-size: 11px;
}
.dashboard-followup-plan-card > footer button {
  min-height: 34px;
  border: 1px solid rgba(212, 99, 89, .25);
  border-radius: 9px;
  padding: 0 12px;
  background: #fff4f1;
  color: #c05a50;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.dashboard-followup-plan-card > footer button:hover { border-color: rgba(212, 99, 89, .45); background: #ffebe7; }

.dashboard-followup-result-card > header > div > span {
  border-radius: 999px;
  padding: 5px 10px;
  background: #e7f7fb;
  color: #078da9;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: normal;
}
.dashboard-followup-result-card.failed > header em { background: #fff1e6; color: #b9672a; }
.dashboard-return-visit-card > header em.satisfaction.positive { background: #e2f8f0; color: #12815f; }
.dashboard-return-visit-card > header em.satisfaction.neutral { background: #fff5d9; color: #a56b00; }
.dashboard-return-visit-card > header em.satisfaction.poor { background: #ffebe8; color: #c8493d; }
.dashboard-followup-result-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 14px 14px; }
.dashboard-followup-result-copy section { border: 1px solid rgba(101, 155, 179, .13); border-radius: 12px; padding: 11px 12px; background: #f8fbfd; }
.dashboard-followup-result-copy section:last-child { border-color: rgba(8, 169, 198, .18); background: #eefafd; }
.dashboard-followup-result-copy h3 { margin: 0 0 6px; color: #6c8094; font-size: 11px; }
.dashboard-followup-result-copy p { margin: 0; color: #2b4158; font-size: 13px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.dashboard-followup-stats-dialog > footer { display: flex; justify-content: flex-end; padding: 14px 24px 18px; border-top: 1px solid rgba(8, 169, 198, .13); background: rgba(250, 253, 255, .92); }
.dashboard-followup-stats-dialog > footer button { min-width: 94px; min-height: 42px; border-radius: 11px; }

@media (max-width: 780px) {
  .dashboard-followup-stats-modal { padding: 0; align-items: end; }
  .dashboard-followup-stats-dialog { width: 100vw; max-height: 92dvh; border-width: 1px 0 0; border-radius: 21px 21px 0 0; }
  .dashboard-followup-card-list { grid-template-columns: 1fr; }
  .dashboard-followup-stats-dialog > header,
  .dashboard-followup-results-tabs,
  .dashboard-followup-stats-content,
  .dashboard-followup-stats-dialog > footer { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 520px) {
  .dashboard-followup-plan-body,
  .dashboard-followup-result-meta,
  .dashboard-followup-result-copy { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-followup-stats-dialog,
  .mini-stats .dashboard-work-action-card { transition: none !important; }
}
/* External medical record OCR import */
.patient-ocr-import-entry {
  border-color: #0ba9c2 !important;
  color: #087f95 !important;
  background: #f1fcfe !important;
}

.patient-record-import-source {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid #8ad8e5;
  border-radius: 999px;
  color: #087f95;
  background: #effcff;
  font-size: 12px;
  white-space: nowrap;
}

.medical-ocr-import-modal {
  z-index: 2800;
  padding: 18px;
  background: rgba(8, 18, 36, .68);
}

.medical-ocr-import-card {
  width: min(1540px, 98vw);
  height: min(930px, 95vh);
  margin: auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #d5e2ea;
  border-radius: 22px;
  background: #f8fbfd;
  box-shadow: 0 28px 80px rgba(7, 25, 48, .28);
}

.medical-ocr-import-head,
.medical-ocr-source-modal header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px 18px;
  border-bottom: 1px solid #dce7ed;
  background: #fff;
}

.medical-ocr-import-head span,
.medical-ocr-source-modal header span {
  color: #0aa8c0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
}

.medical-ocr-import-head h2,
.medical-ocr-source-modal header h2 { margin: 4px 0; color: #18283f; font-size: 25px; }
.medical-ocr-import-head p,
.medical-ocr-source-modal header p { margin: 0; color: #708094; }

.medical-ocr-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 10px 24px;
  border-bottom: 1px solid #dce7ed;
  background: #f4f9fb;
}

.medical-ocr-toolbar > span { margin-left: auto; color: #66768a; font-size: 13px; }

.medical-ocr-workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(390px, .85fr) minmax(560px, 1.35fr);
}

.medical-ocr-source-pane {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 18px;
  border-right: 1px solid #dce7ed;
  background: #eef5f8;
}

.medical-ocr-dropzone {
  padding: 13px;
  text-align: center;
  border: 1px dashed #58bfd0;
  border-radius: 12px;
  color: #26788a;
  background: rgba(255,255,255,.72);
}
.medical-ocr-dropzone strong,
.medical-ocr-dropzone small { display: block; }
.medical-ocr-dropzone small { margin-top: 4px; color: #7b8997; }

.medical-ocr-file-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 3px;
}

.medical-ocr-file-item {
  flex: 0 0 210px;
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid #d5e2e8;
  border-radius: 11px;
  text-align: left;
  background: #fff;
  cursor: grab;
}
.medical-ocr-file-item.active { border-color: #08a9c2; box-shadow: 0 0 0 2px rgba(8,169,194,.13); }
.medical-ocr-file-item.low-confidence { background: #fffaf0; }
.medical-ocr-file-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 7px; background: #e7eef2; }
.medical-ocr-file-item span { min-width: 0; }
.medical-ocr-file-item b,
.medical-ocr-file-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medical-ocr-file-item b { color: #24354a; font-size: 12px; }
.medical-ocr-file-item small { margin-top: 4px; color: #788797; font-size: 10px; }
.medical-ocr-file-item em { color: #9ba7b2; font-style: normal; }

.medical-ocr-original {
  min-height: 0;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #d6e2e8;
  border-radius: 14px;
  background: #dce6eb;
}
.medical-ocr-original img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.medical-ocr-original figcaption { padding: 9px 12px; color: #657486; background: #fff; font-size: 12px; }

.medical-ocr-result-pane { min-height: 0; overflow-y: auto; padding: 20px 22px 28px; background: #fff; }
.medical-ocr-review-head { display: flex; align-items: end; gap: 12px; margin-bottom: 12px; }
.medical-ocr-review-head label { flex: 1; }
.medical-ocr-review-head label span,
.medical-ocr-field-grid .medical-ocr-field-card > span { display: block; margin-bottom: 6px; color: #35465a; font-size: 13px; font-weight: 700; }
.medical-ocr-review-head input,
.medical-ocr-field-grid textarea,
.medical-ocr-raw textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cfdce4;
  border-radius: 10px;
  color: #202f42;
  background: #fff;
}
.medical-ocr-review-head input { min-height: 42px; padding: 8px 11px; }
.medical-ocr-field-grid textarea,
.medical-ocr-raw textarea { resize: vertical; min-height: 82px; padding: 10px 12px; line-height: 1.55; }
.medical-ocr-confidence { padding: 9px 11px; border-radius: 9px; color: #168261; background: #eaf9f2; font-size: 12px; white-space: nowrap; }
.medical-ocr-confidence.low { color: #9a6712; background: #fff3c9; }
.medical-ocr-warning { margin: 10px 0; padding: 10px 12px; border-left: 3px solid #e4ac23; color: #80590b; background: #fff8df; border-radius: 6px; }
.medical-ocr-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.medical-ocr-field-grid .medical-ocr-field-card.low-confidence { padding: 10px; border-radius: 12px; background: #fffbec; }
.medical-ocr-field-grid .medical-ocr-field-card.low-confidence textarea { border-color: #e9c968; }
.medical-ocr-pair-list { display: grid; gap: 8px; }
.medical-ocr-pair-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 38%) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 9px;
  border: 1px solid #d8e8ee;
  border-radius: 11px;
  background: #f5fbfd;
}
.medical-ocr-pair-tooth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 6px;
  min-width: 0;
}
.medical-ocr-pair-tooth small { color: #688093; font-weight: 800; white-space: nowrap; }
.medical-ocr-pair-tooth .patient-treatment-tooth-map { margin-left: 0; }
.medical-ocr-pair-picker {
  width: 100% !important;
  min-width: 0;
  max-width: 170px;
  height: 76px !important;
  min-height: 76px;
  justify-self: stretch;
  cursor: pointer;
  border: 1px solid #b9dbe3;
  border-radius: 9px;
  background: #fff !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.medical-ocr-pair-picker::before { width: calc(100% - 22px); }
.medical-ocr-pair-picker::after { height: calc(100% - 16px); }
.medical-ocr-pair-picker[data-selected-count="0"]::after {
  content: "点击选择牙位";
  left: 50%;
  top: auto;
  bottom: 3px;
  width: auto;
  height: auto;
  color: #7d94a3;
  background: #fff;
  font-size: 10px;
  line-height: 16px;
  white-space: nowrap;
  transform: translateX(-50%);
}
.medical-ocr-pair-picker:hover,
.medical-ocr-pair-picker:focus-visible {
  border-color: #08a9c2;
  box-shadow: 0 0 0 3px rgba(8, 169, 194, .14);
  transform: translateY(-1px);
}
.medical-ocr-pair-tooth input {
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid #c8d9e2;
  border-radius: 8px;
  background: #fff;
}
.medical-ocr-pair-row textarea { min-height: 104px; }
.medical-ocr-pair-remove { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; }
.medical-ocr-pair-add { justify-self: start; min-height: 34px; padding: 6px 10px; }
.medical-ocr-tooth-review {
  display: grid;
  grid-template-columns: minmax(116px, auto) minmax(120px, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 7px 9px;
  border: 1px solid #d8e8ee;
  border-radius: 10px;
  background: #f5fbfd;
}
.medical-ocr-tooth-review > div { display: flex; align-items: center; gap: 8px; }
.medical-ocr-tooth-review small { color: #688093; font-weight: 700; white-space: nowrap; }
.medical-ocr-tooth-review .patient-treatment-tooth-map { margin-left: 0; }
.medical-ocr-tooth-review input {
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid #c8d9e2;
  border-radius: 8px;
  color: #24374c;
  background: #fff;
}

.patient-bill-ocr-import {
  color: #078ba4;
  border-color: #8fd4df;
  background: #f4fcfd;
}

.patient-invoice-info-entry { color: #7b5b10; border-color: #e3c56e; background: #fffaf0; }
.patient-invoice-info-modal { z-index: 2200; padding: 20px; }
.patient-invoice-info-card { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(1280px, 96vw); max-height: 92vh; overflow: hidden; border: 1px solid #d8e4e9; border-radius: 20px; color: #243448; background: #f7fafc; box-shadow: 0 28px 80px rgba(26, 49, 66, .28); }
.patient-invoice-info-card > header,
.patient-invoice-info-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: #fff; }
.patient-invoice-info-card > header { border-bottom: 1px solid #dbe7eb; }
.patient-invoice-info-card > header span { color: #0b9bb7; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.patient-invoice-info-card > header h2 { margin: 4px 0 0; font-size: 24px; }
.patient-invoice-info-card > header p { margin: 5px 0 0; color: #6c7e8e; font-size: 13px; }
.patient-invoice-info-card > header button { width: 42px; height: 42px; border: 0; border-radius: 12px; color: #718391; background: #eef4f7; font-size: 24px; }
.patient-invoice-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 20px; border-bottom: 1px solid #dbe7eb; background: #f2f7f9; }
.patient-invoice-summary button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 13px 15px; border: 1px solid #dce8ed; border-radius: 14px; color: inherit; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.patient-invoice-summary button:hover { border-color: #83ceda; background: #f8fdfe; }
.patient-invoice-summary button.active { border-color: #15aac1; background: #eaf9fb; box-shadow: 0 0 0 2px rgba(21, 170, 193, .1); }
.patient-invoice-summary button span { color: #5d7182; font-size: 12px; font-weight: 800; }
.patient-invoice-summary button span em { display: block; margin-top: 2px; color: #b07818; font-size: 10px; font-style: normal; font-weight: 700; }
.patient-invoice-summary button strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #1f3348; font-size: 20px; }
.patient-invoice-summary button small { color: #0b98b3; font-weight: 900; }
.patient-invoice-info-card > main { display: grid; gap: 14px; min-height: 0; overflow-y: auto; padding: 18px 20px 24px; }
.patient-invoice-category-section { overflow: hidden; border: 1px solid #dbe7ec; border-radius: 16px; background: #fff; }
.patient-invoice-category-section > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid #e2eaee; background: #f8fbfc; }
.patient-invoice-category-section > header div { display: flex; align-items: center; gap: 10px; }
.patient-invoice-category-section > header b { color: #24394f; font-size: 16px; }
.patient-invoice-category-section > header b small { margin-left: 7px; color: #b07818; font-size: 11px; font-weight: 700; }
.patient-invoice-category-section > header span { padding: 3px 8px; border-radius: 999px; color: #078da8; background: #e7f8fb; font-size: 11px; font-weight: 800; }
.patient-invoice-category-section > header strong { color: #0a8fa9; }
.patient-invoice-ticket-list { display: grid; }
.patient-invoice-ticket { display: grid; grid-template-columns: 64px minmax(260px, 1.6fr) minmax(150px, .7fr) minmax(170px, .8fr); align-items: center; gap: 14px; min-height: 82px; padding: 12px 16px; border-bottom: 1px solid #edf2f4; }
.patient-invoice-ticket:last-child { border-bottom: 0; }
.patient-invoice-ticket > div { display: grid; gap: 4px; min-width: 0; }
.patient-invoice-ticket span { color: #7a8c9a; font-size: 11px; font-weight: 800; }
.patient-invoice-ticket strong { overflow: hidden; color: #263b50; text-overflow: ellipsis; white-space: nowrap; }
.patient-invoice-ticket small { overflow: hidden; color: #788b99; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.patient-invoice-ticket-index { place-items: center; align-self: stretch; border-right: 1px solid #e4ecef; }
.patient-invoice-ticket-index b { color: #0a9bb7; font-size: 24px; }
.patient-invoice-ticket-amount { text-align: right; }
.patient-invoice-ticket-amount strong { color: #d68613; font-size: 18px; }
.patient-invoice-empty-category { margin: 0; padding: 18px; color: #8998a4; text-align: center; }
.patient-invoice-empty { display: grid; place-items: center; align-content: center; min-height: 340px; color: #718492; text-align: center; }
.patient-invoice-empty > span { display: grid; place-items: center; width: 70px; height: 70px; margin-bottom: 14px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #22b8d1, #078fa9); font-size: 28px; font-weight: 900; }
.patient-invoice-empty strong { color: #263b50; font-size: 20px; }
.patient-invoice-empty p { margin: 7px 0 0; }
.patient-invoice-info-card > footer { border-top: 1px solid #dbe7eb; }
.patient-invoice-info-card > footer p { margin: 0; color: #657887; }
@media (max-width: 800px) {
  .patient-invoice-info-modal { padding: 0; }
  .patient-invoice-info-card { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .patient-invoice-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .patient-invoice-ticket { grid-template-columns: 52px minmax(0, 1fr); }
  .patient-invoice-ticket > div:nth-child(n + 3) { grid-column: 2; }
  .patient-invoice-ticket-amount { text-align: left; }
}

.sidebar .pending-invoice-sidebar-entry {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label count"
    "description count";
  gap: 5px 14px;
  width: 100%;
  min-height: 104px;
  margin-top: auto;
  padding: 17px 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 14px;
  background: rgba(17, 27, 48, .78);
  color: #e5e7eb;
  text-align: left;
  box-shadow: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}
.sidebar .pending-invoice-sidebar-entry::before {
  position: absolute;
  inset: 12px auto 12px 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #1677ff;
  opacity: 0;
  content: "";
  transition: opacity .18s ease;
}
.sidebar .pending-invoice-sidebar-entry span {
  grid-area: label;
  align-self: end;
  color: #b9c3d3;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}
.sidebar .pending-invoice-sidebar-entry strong {
  grid-area: count;
  align-self: center;
  margin: 0;
  color: #f8fafc;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  transition: color .18s ease, transform .18s ease;
}
.sidebar .pending-invoice-sidebar-entry small {
  grid-area: description;
  align-self: start;
  color: #8f9db1;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  white-space: nowrap;
}
.sidebar .pending-invoice-sidebar-entry:hover,
.sidebar .pending-invoice-sidebar-entry:focus-visible {
  border-color: rgba(22, 119, 255, .72);
  background: rgba(22, 119, 255, .14);
  color: #1677ff;
  box-shadow: inset 0 0 0 1px rgba(22, 119, 255, .12), 0 10px 24px rgba(2, 12, 30, .18);
  transform: translateY(-2px);
}
.sidebar .pending-invoice-sidebar-entry:hover::before,
.sidebar .pending-invoice-sidebar-entry:focus-visible::before { opacity: 1; }
.sidebar .pending-invoice-sidebar-entry:hover span,
.sidebar .pending-invoice-sidebar-entry:focus-visible span { color: #1677ff; }
.sidebar .pending-invoice-sidebar-entry:hover strong,
.sidebar .pending-invoice-sidebar-entry:focus-visible strong { color: #1677ff; }
.sidebar .pending-invoice-sidebar-entry:hover small,
.sidebar .pending-invoice-sidebar-entry:focus-visible small { color: #b8cdf3; }
.sidebar .pending-invoice-sidebar-entry:hover strong { transform: scale(1.04); }
.sidebar .pending-invoice-sidebar-entry:focus-visible { outline: 2px solid rgba(22, 119, 255, .45); outline-offset: 3px; }
.sidebar .pending-invoice-sidebar-entry:active { transform: translateY(0) scale(.985); }
.sidebar .tax-sidebar-entry { margin-top: 8px !important; }
.tax-sidebar-entry.active { border-color: rgba(103, 232, 249, .5); background: rgba(8, 145, 178, .18); box-shadow: inset 3px 0 #22d3ee; }
@media (prefers-reduced-motion: reduce) {
  .sidebar .pending-invoice-sidebar-entry,
  .sidebar .pending-invoice-sidebar-entry::before,
  .sidebar .pending-invoice-sidebar-entry strong { transition: none; }
}
.pending-invoice-center { color: #22354a; }
.pending-invoice-mode-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}.pending-invoice-mode-card{position:relative;display:block;min-height:132px;box-sizing:border-box;border:1px solid #dce7ec;border-radius:18px;padding:22px 110px 22px 26px;color:#22354a;background:rgba(255,255,255,.92);box-shadow:0 14px 35px rgba(40,83,101,.08);font:inherit;text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease}.pending-invoice-mode-card:hover{border-color:#86d2e0;box-shadow:0 17px 38px rgba(40,83,101,.11);transform:translateY(-1px)}.pending-invoice-mode-card.active{border-color:#8ad7e6;background:linear-gradient(115deg,#e9fbfd 0%,#eff5ff 100%);box-shadow:0 16px 38px rgba(43,125,156,.12)}.pending-invoice-mode-card>span{color:#0798b2;font-size:11px;font-weight:900;letter-spacing:.14em}.pending-invoice-mode-card h2{margin:7px 0 6px;color:#203448;font-size:24px}.pending-invoice-mode-card p{margin:0;color:#708493;font-size:13px;line-height:1.5}.pending-invoice-mode-card>strong{position:absolute;top:50%;right:26px;display:flex;align-items:baseline;gap:5px;color:#738493;font-size:13px;transform:translateY(-50%)}.pending-invoice-mode-card>strong b{color:#078da8;font-size:32px}.pending-invoice-mode-card:not(.active)>strong b{color:#61778a}
.pending-invoice-hero { position:relative;display:flex;min-height:132px;box-sizing:border-box;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px;padding:24px 560px 24px 28px;border:1px solid #d8e7ec;border-radius:18px;background:linear-gradient(115deg,#fff 0%,#f4fbfd 62%,#eaf8fb 100%);box-shadow:0 14px 35px rgba(40,83,101,.08); }
.pending-invoice-hero > div > span { color: #0798b2; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.pending-invoice-hero h2 { margin: 5px 0 4px; font-size: 28px; }
.pending-invoice-hero p { margin: 0; color: #708493; }
.pending-invoice-hero-actions{position:absolute;inset:16px 24px 16px auto;display:grid;width:520px;grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:auto 1fr;align-items:start;gap:8px 14px}.pending-invoice-hero-actions .invoice-status-tabs{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0;padding:4px;border-color:#cfe2e8;border-radius:11px;box-shadow:none}.pending-invoice-hero-actions .invoice-status-tabs button{width:100%;min-width:0;height:38px;padding:0 14px;border-radius:8px;font-size:13px}.pending-invoice-hero-actions .invoice-status-tabs span{min-width:20px;height:20px;font-size:11px}.pending-invoice-hero-actions .pending-invoice-hero-count{grid-column:2;grid-row:2;align-self:end}
.pending-invoice-hero-count { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; min-width: 150px; padding: 13px 18px; border-left: 3px solid #0aa8bf; border-radius: 10px; background: rgba(255,255,255,.82); }
.pending-invoice-hero-count small { margin-right: auto; color: #718391; }
.pending-invoice-hero-count strong { color: #d88718; font-size: 30px; }
.pending-invoice-hero-count em { color: #697d8d; font-style: normal; }
.pending-invoice-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 16px; }
.pending-invoice-kpis article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 17px 20px; border: 1px solid #dbe7ec; border-radius: 15px; background: #fff; box-shadow: 0 10px 28px rgba(35, 76, 94, .06); }
.pending-invoice-kpis span { color: #6e8191; font-size: 13px; }
.pending-invoice-kpis strong { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 23px; }
.pending-invoice-kpis small { color: #0b98b3; font-weight: 800; }
.pending-invoice-kpis article.pending strong { color: #d88718; }
.pending-invoice-kpis article.complete strong { color: #16875e; }
.pending-invoice-panel { overflow: hidden; border: 1px solid #d9e6eb; border-radius: 18px; background: #fff; box-shadow: 0 14px 36px rgba(36, 79, 96, .07); }
.invoice-status-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:8px;margin-bottom:14px;padding:6px;border:1px solid #d8e6eb;border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(36,79,96,.06)}.invoice-status-tabs button{display:flex;width:100%;align-items:center;justify-content:center;gap:9px;height:44px;border:0;border-radius:10px;color:#65798a;background:transparent;font:inherit;font-weight:850;cursor:pointer}.invoice-status-tabs button:hover{color:#078da7;background:#effafd}.invoice-status-tabs button.active{color:#fff;background:linear-gradient(135deg,#0bb1cd,#078da8);box-shadow:0 7px 18px rgba(8,157,185,.2)}.invoice-status-tabs span{display:inline-grid;min-width:23px;height:23px;place-items:center;border-radius:999px;padding:0 5px;color:inherit;background:rgba(113,139,153,.13);font-size:12px}.invoice-status-tabs button.active span{background:rgba(255,255,255,.2)}.invoice-status-workspace{display:block}.invoice-status-workspace [data-invoice-status-panel][hidden]{display:none}.issued-invoice-panel{border-color:#cfe5dc}.issued-invoice-panel>header{background:linear-gradient(110deg,#f5fcf8,#fff)}
.pending-invoice-panel > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid #dce8ec; }
.pending-invoice-panel h3 { margin: 0; font-size: 18px; }
.pending-invoice-panel header p { margin: 5px 0 0; color: #748795; font-size: 12px; }
.pending-invoice-filters { display: flex; gap: 10px; }
.pending-invoice-filters input,
.pending-invoice-filters select { height: 40px; padding: 0 12px; border: 1px solid #cddde4; border-radius: 9px; color: #263a4d; background: #fff; font: inherit; }
.pending-invoice-filters input { width: min(300px, 30vw); }
.pending-invoice-table th { color: #617484; background: #f5f9fb; }
.pending-invoice-table td { padding-top: 12px; padding-bottom: 12px; vertical-align: middle; }
.pending-invoice-table th:first-child { width: 18%; }
.pending-invoice-table th:nth-child(2) { width: 18%; }
.pending-invoice-table th:last-child { width: 64%; text-align: center; }
.pending-invoice-table td:last-child { text-align: center; }
.pending-invoice-patient { display: grid; gap: 4px; }
.pending-invoice-patient strong { color: #24384c; }
.pending-invoice-patient small { color: #7a8d9a; }
.pending-invoice-preview { display: grid; width: 100%; gap: 4px; padding: 10px 12px; border: 1px solid #d7e6eb; border-radius: 10px; color: inherit; background: #fbfdfe; text-align: left; cursor: pointer; }
.pending-invoice-preview:hover { border-color: #67c8d7; background: #f2fbfd; box-shadow: 0 7px 18px rgba(10, 157, 183, .1); }
.pending-invoice-preview span { color: #098ba4; font-size: 11px; font-weight: 900; }
.pending-invoice-preview span em { margin-left: 5px; color: #b07818; font-style: normal; font-weight: 700; }
.pending-invoice-preview strong { color: #263b4e; }
.pending-invoice-preview small { color: #788b99; }
.pending-invoice-preview-simple { display: inline-flex; width: auto; min-width: 132px; align-items: center; justify-content: center; padding: 11px 20px; border-color: #8bd5e0; color: #078ba5; background: #f2fbfd; text-align: center; }
.pending-invoice-preview-simple strong { color: inherit; }
.pending-invoice-review { display: grid; position: relative; justify-items: stretch; align-items: center; gap: 8px; padding-bottom: 22px; }
.pending-invoice-review > small { position: absolute; right: 0; bottom: 0; color: #7b8d99; font-size: 10px; text-align: right; }
.pending-invoice-review-actions { display: grid; grid-template-columns: minmax(0,1fr) auto 190px; width: 100%; align-items: stretch; gap: 8px; }
.pending-invoice-review-actions.issued{grid-template-columns:minmax(0,1fr) 190px}
.pending-invoice-thumbnail-zone { display: flex; width: 100%; min-width: 0; align-items: stretch; justify-content: flex-start; }
.pending-invoice-status-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 170px; padding: 4px; border: 1px solid #d3e1e6; border-radius: 10px; background: #f4f8fa; }
.pending-invoice-status-toggle button { min-width: 0; height: 32px; border: 0; border-radius: 7px; color: #687c8c; background: transparent; font-weight: 800; cursor: pointer; }
.pending-invoice-status-toggle button.active { color: #fff; background: #0aa8bf; box-shadow: 0 4px 12px rgba(10, 168, 191, .2); }
.pending-invoice-status-toggle button:first-child.active { background: #d58a1d; box-shadow: 0 4px 12px rgba(213, 138, 29, .18); }
.pending-invoice-upload,
.pending-invoice-attachment-preview { min-height: 40px; padding: 0 14px; border: 1px solid #81cad7; border-radius: 9px; color: #087f96; background: #fff; font-weight: 800; cursor: pointer; white-space: nowrap; }
.pending-invoice-upload { color: #fff; border-color: #0aa8bf; background: #0aa8bf; }
.pending-invoice-upload:hover { border-color: #078da7; background: #078da7; box-shadow: 0 7px 16px rgba(10, 151, 176, .2); }
.pending-invoice-upload:active,
.pending-invoice-attachment-preview:active,
.pending-invoice-preview:active { transform: translateY(1px); }
.pending-invoice-thumbnails { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); width: 100%; min-width: 0; height: 104px; align-items: stretch; gap: 10px; }
.pending-invoice-thumbnail-item { position: relative; width: min(100%,220px); min-width: 0; height: 104px; margin: 0; }
.pending-invoice-thumbnail-item:first-child { justify-self: start; }
.pending-invoice-thumbnail-item:nth-child(2),
.pending-invoice-thumbnail-item:nth-child(3) { justify-self: center; }
.pending-invoice-thumbnail-item:nth-child(4) { justify-self: end; }
.pending-invoice-thumbnails button { position: relative; width: 100%; height: 104px; overflow: hidden; padding: 0; border: 1px solid #c8dce4; border-radius: 10px; background: linear-gradient(135deg,#edf5f8,#dfeef3); cursor: pointer; }
.pending-invoice-thumbnails button:hover { border-color: #28abc2; box-shadow: 0 5px 14px rgba(12,133,157,.17); transform: translateY(-1px); }
.pending-invoice-thumbnails button.load-failed::after { display: grid; position: absolute; inset: 0; place-items: center; color: #8b9ba7; background: #edf3f6; content: "图片"; font-size: 10px; }
.pending-invoice-thumbnails img { display: block; width: 100%; height: 100%; object-fit: cover; }
.invoice-pdf-thumb{display:block;width:100%;height:100%;border:0;background:#fff;pointer-events:none}.invoice-attachment-image iframe{display:block;width:100%;height:100%;min-height:420px;border:0;background:#fff}
.pending-invoice-thumbnail-item > small { position: absolute; right: 0; bottom: -22px; left: 0; overflow: hidden; color: #687f8e; font-size: 10px; font-weight: 750; line-height: 1.25; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.pending-invoice-upload,
.pending-invoice-status-toggle { align-self: center; }
.pending-invoice-thumbnails > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: #078aa3; background: #e8f7fa; font-size: 11px; font-weight: 900; }

.invoice-attachment-upload-modal { z-index: 2350; padding: 22px; }
.invoice-attachment-upload-modal > section { display: grid; grid-template-rows: auto minmax(0,1fr) auto; width: min(1040px,96vw); max-height: 92vh; overflow: hidden; border: 1px solid #d6e5ea; border-radius: 20px; color: #26394b; background: #f4f9fb; box-shadow: 0 30px 86px rgba(26,56,73,.3); }
.invoice-attachment-upload-modal > section > header,
.invoice-attachment-upload-modal > section > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: #fff; }
.invoice-attachment-upload-modal > section > header { border-bottom: 1px solid #dce8ec; }
.invoice-attachment-upload-modal > section > header span { color: #0798b2; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.invoice-attachment-upload-modal h2 { margin: 4px 0 0; font-size: 25px; }
.invoice-attachment-upload-modal > section > header p { margin: 5px 0 0; color: #708391; font-size: 13px; }
.invoice-attachment-upload-modal > section > header > button { width: 42px; height: 42px; border: 0; border-radius: 12px; color: #6e8290; background: #edf4f7; font-size: 24px; cursor: pointer; }
.invoice-attachment-upload-modal > section > main { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; overflow-y: auto; padding: 20px; }
.invoice-category-upload-card { display: grid; grid-template-columns: 150px minmax(0,1fr); grid-template-areas: "head head" "slot thumbs"; gap: 13px 16px; min-height: 210px; padding: 17px; border: 1px solid #d6e6eb; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px rgba(41,82,99,.07); }
.invoice-category-upload-card > header { grid-area: head; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid #e5eef1; }
.invoice-category-upload-card > header span { color: #8293a0; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.invoice-category-upload-card h3 { margin: 4px 0 0; color: #263b4e; font-size: 17px; }
.invoice-category-upload-card > header strong { color: #0797b1; }
.invoice-category-upload-slot { grid-area: slot; display: grid; place-items: center; align-content: center; gap: 3px; min-height: 116px; border: 1.5px dashed #67c8d8; border-radius: 13px; color: #078ba5; background: #f2fbfd; cursor: pointer; }
.invoice-category-upload-slot:hover { border-color: #079bb6; background: #e8f8fb; box-shadow: 0 8px 20px rgba(10,158,183,.12); }
.invoice-category-upload-slot b { font-size: 28px; line-height: 1; }
.invoice-category-upload-slot span { font-weight: 850; }
.invoice-category-upload-slot small { color: #8095a2; font-size: 10px; }
.invoice-category-upload-card .pending-invoice-thumbnails { grid-area: thumbs; align-content: start; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; }
.invoice-category-upload-card .pending-invoice-thumbnails button { width: 72px; height: 58px; }
.invoice-managed-thumbnails { grid-area: thumbs; display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; padding: 1px 1px 5px; }
.invoice-managed-thumbnails > article { flex: 0 0 156px; overflow: hidden; border: 1px solid #d4e2e7; border-radius: 11px; background: #f8fbfc; }
.invoice-managed-preview { display: block; width: 100%; height: 86px; overflow: hidden; padding: 0; border: 0; border-bottom: 1px solid #dce8ec; background: #eaf2f5; cursor: zoom-in; }
.invoice-managed-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.invoice-managed-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: #dce8ec; }
.invoice-managed-actions button { min-width: 0; height: 30px; padding: 0 3px; border: 0; color: #087f96; background: #fff; font-size: 10px; font-weight: 850; cursor: pointer; }
.invoice-managed-actions button:hover { color: #056b7e; background: #eaf8fb; }
.invoice-managed-actions button.danger { color: #ba4a4a; }
.invoice-managed-actions button.danger:hover { color: #9f2727; background: #fff0f0; }
.invoice-category-upload-empty { grid-area: thumbs; align-self: center; margin: 0; color: #8a9aa5; font-size: 12px; text-align: center; }
.invoice-attachment-upload-modal > section > footer { justify-content: flex-end; border-top: 1px solid #dce8ec; }

.invoice-attachment-preview-modal { z-index: 2300; padding: 22px; }
.invoice-attachment-preview-modal > section { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(1120px, 96vw); max-height: 92vh; overflow: hidden; border: 1px solid #d8e5ea; border-radius: 18px; color: #26394b; background: #f6fafc; box-shadow: 0 28px 80px rgba(31, 59, 75, .28); }
.invoice-attachment-preview-modal header,
.invoice-attachment-preview-modal footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; background: #fff; }
.invoice-attachment-preview-modal header { border-bottom: 1px solid #dce7eb; }
.invoice-attachment-preview-modal header span { color: #0798b2; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.invoice-attachment-preview-modal h2 { margin: 4px 0 0; font-size: 24px; }
.invoice-attachment-preview-modal header p { margin: 5px 0 0; color: #708391; font-size: 13px; }
.invoice-attachment-preview-modal header > button { width: 42px; height: 42px; border: 0; border-radius: 11px; color: #6f8290; background: #eef4f7; font-size: 24px; }
.invoice-attachment-preview-modal main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-height: 220px; overflow-y: auto; padding: 18px; }
.invoice-attachment-preview-modal figure { display: grid; align-content: start; gap: 9px; margin: 0; padding: 10px; border: 1px solid #d8e6eb; border-radius: 13px; background: #fff; }
.invoice-attachment-image { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 9px; background: #edf3f6; }
.invoice-attachment-preview-modal img { display: block; width: 100%; height: 100%; object-fit: contain; }
.invoice-attachment-preview-modal figcaption { display: grid; gap: 3px; min-width: 0; }
.invoice-attachment-preview-modal figcaption > span { color: #078da7; font-size: 11px; font-weight: 900; }
.invoice-attachment-preview-modal figcaption strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-attachment-preview-modal figcaption small { color: #718492; }
.invoice-attachment-preview-modal footer { justify-content: flex-end; border-top: 1px solid #dce7eb; }
.invoice-attachment-preview-modal.single-file > section { width: min(980px, 94vw); }
.invoice-attachment-preview-modal.single-file main { grid-template-columns: minmax(0, 1fr); }
.invoice-attachment-preview-modal.single-file figure { min-width: 0; }
.invoice-attachment-preview-modal.single-file .invoice-attachment-image { aspect-ratio: auto; min-height: 420px; max-height: 64vh; }
@media (max-width: 900px) {
  .pending-invoice-sidebar-entry { margin-top: auto !important; }
  .tax-sidebar-entry { margin-top: 8px !important; }
  .pending-invoice-hero,
  .pending-invoice-panel > header { align-items: stretch; flex-direction: column; }
  .pending-invoice-mode-cards{grid-template-columns:1fr}.pending-invoice-mode-card{min-height:118px}
  .pending-invoice-hero{min-height:0;padding:22px}.pending-invoice-hero-actions{position:static;display:grid;width:auto;grid-template-columns:1fr;grid-template-rows:auto auto;align-items:stretch}.pending-invoice-hero-actions .invoice-status-tabs{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.pending-invoice-hero-actions .invoice-status-tabs button{width:100%;min-width:0}.pending-invoice-hero-actions .pending-invoice-hero-count{grid-column:1;grid-row:2;justify-content:flex-end}
  .pending-invoice-kpis { grid-template-columns: 1fr; }
  .pending-invoice-filters { flex-direction: column; }
  .pending-invoice-filters input { width: 100%; }
  .pending-invoice-table-wrap { overflow-x: auto; }
  .pending-invoice-table { min-width: 820px; }
  .invoice-status-tabs button{min-width:0;flex:1}.invoice-status-workspace .pending-invoice-table{min-width:720px}
  .invoice-attachment-preview-modal { padding: 0; }
  .invoice-attachment-preview-modal > section { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .invoice-attachment-preview-modal main { grid-template-columns: 1fr; }
  .invoice-attachment-upload-modal { padding: 0; }
  .invoice-attachment-upload-modal > section { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .invoice-attachment-upload-modal > section > main { grid-template-columns: 1fr; }
}

.bill-ocr-import-modal { z-index: 2100; padding: 18px; }
.bill-ocr-import-card {
  width: min(1540px, 98vw);
  height: min(900px, 94vh);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #d8e4e9;
  border-radius: 18px;
  color: #243448;
  background: #fff;
  box-shadow: 0 24px 70px rgba(32, 56, 72, .22);
}
.bill-ocr-import-head,
.bill-ocr-toolbar,
.bill-ocr-footer { display: flex; align-items: center; gap: 12px; }
.bill-ocr-import-head { justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid #dbe7eb; }
.bill-ocr-import-head h2 { margin: 0; font-size: 22px; }
.bill-ocr-import-head p { margin: 5px 0 0; color: #6c7e8e; font-size: 13px; }
.bill-ocr-toolbar { padding: 10px 18px; border-bottom: 1px solid #dbe7eb; background: #f5fafc; }
.bill-ocr-toolbar > span { margin-left: auto; color: #687d8e; font-size: 12px; }
.bill-ocr-workspace { min-height: 0; display: grid; grid-template-columns: minmax(280px, 31%) minmax(0, 1fr); }
.bill-ocr-source-pane {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border-right: 1px solid #dbe7eb;
  background: #edf5f8;
}
.bill-ocr-dropzone { padding: 15px; border: 1px dashed #65c4d4; border-radius: 11px; text-align: center; color: #168da3; background: #f9feff; }
.bill-ocr-dropzone strong,
.bill-ocr-dropzone small { display: block; }
.bill-ocr-dropzone small { margin-top: 4px; color: #788b99; }
.bill-ocr-file-list { display: flex; gap: 7px; overflow-x: auto; }
.bill-ocr-file-item {
  flex: 0 0 190px;
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 7px;
  border: 1px solid #cbdce3;
  border-radius: 9px;
  text-align: left;
  background: #fff;
}
.bill-ocr-file-item.active { border-color: #0aa8bf; box-shadow: 0 0 0 2px rgba(10, 168, 191, .12); }
.bill-ocr-file-item img { width: 42px; height: 42px; object-fit: cover; border-radius: 6px; background: #dfe9ed; }
.bill-ocr-file-item b,
.bill-ocr-file-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-ocr-file-item small { margin-top: 3px; color: #718491; font-size: 10px; }
.bill-ocr-original { min-height: 0; margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; border: 1px solid #d2e1e7; border-radius: 12px; background: #dce8ec; }
.bill-ocr-original img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.bill-ocr-original figcaption { padding: 8px 10px; color: #687c8b; background: #fff; font-size: 11px; }
.bill-ocr-result-pane { min-height: 0; overflow-y: auto; padding: 16px 18px 24px; }
.bill-ocr-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bill-ocr-result-head div { display: flex; align-items: baseline; gap: 10px; }
.bill-ocr-result-head span { color: #718391; font-size: 12px; }
.bill-ocr-warning { margin-bottom: 12px; padding: 9px 11px; border-left: 3px solid #d9a126; border-radius: 6px; color: #78570d; background: #fff8df; }
.bill-ocr-record-list { display: grid; gap: 10px; }
.bill-ocr-record-card { padding: 12px; border: 1px solid #d5e3e8; border-radius: 12px; background: #fbfdfe; }
.bill-ocr-record-card > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.bill-ocr-record-grid { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 9px; align-items: start; }
.bill-ocr-record-grid label { min-width: 0; }
.bill-ocr-record-grid label > span,
.bill-ocr-datetime-field > span { display: block; margin-bottom: 4px; color: #5b6f7f; font-size: 11px; font-weight: 700; }
.bill-ocr-record-grid input { width: 100%; min-width: 0; height: 38px; box-sizing: border-box; padding: 7px 9px; border: 1px solid #cbd9e0; border-radius: 8px; color: #27384a; background: #fff; }
.bill-ocr-record-grid input:focus { border-color: #0aa8bf; outline: 2px solid rgba(10, 168, 191, .14); }
.bill-ocr-field-bill_no { grid-column: 1 / span 2; grid-row: 1; }
.bill-ocr-field-bill_type { grid-column: 3 / span 2; grid-row: 1; }
.bill-ocr-field-charge_time { grid-column: 5 / span 3; grid-row: 1; }
.bill-ocr-field-bill_status { grid-column: 8 / span 7; grid-row: 1; }
.bill-ocr-field-visit_time { grid-column: 1 / span 3; grid-row: 2; }
.bill-ocr-field-doctor { grid-column: 4 / span 2; grid-row: 2; }
.bill-ocr-field-amount { grid-column: 6 / span 2; grid-row: 2; }
.bill-ocr-field-paid_amount { grid-column: 8 / span 2; grid-row: 2; }
.bill-ocr-field-debt { grid-column: 10 / span 2; grid-row: 2; }
.bill-ocr-field-note { grid-column: 12 / span 3; grid-row: 2; }
.bill-ocr-status-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.bill-ocr-status-field legend { margin-bottom: 4px; padding: 0; color: #5b6f7f; font-size: 11px; font-weight: 700; }
.bill-ocr-status-field > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 3px; border: 1px solid #cbd9e0; border-radius: 8px; background: #fff; }
.bill-ocr-status-field button { min-width: 0; height: 30px; padding: 0 5px; border: 0; border-radius: 6px; color: #607486; background: transparent; font-size: 11px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.bill-ocr-status-field button:hover { color: #087f96; background: #eefafd; }
.bill-ocr-status-field button.active { color: #fff; background: #0aa8bf; box-shadow: 0 3px 9px rgba(10, 168, 191, .2); }
.bill-ocr-status-field button:focus-visible { outline: 2px solid rgba(10, 168, 191, .35); outline-offset: 1px; }
.bill-ocr-datetime-field,
.bill-ocr-datetime-card { min-width: 0; }
.bill-ocr-datetime-card > summary { min-height: 38px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid #cbd9e0; border-radius: 8px; color: #27384a; background: #fff; cursor: pointer; list-style: none; }
.bill-ocr-datetime-card > summary::-webkit-details-marker { display: none; }
.bill-ocr-datetime-card > summary b { min-width: 0; overflow: hidden; color: #27384a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.bill-ocr-datetime-card > summary i { flex: 0 0 24px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: #078ba4; background: #e9f8fb; font-size: 11px; font-style: normal; font-weight: 800; }
.bill-ocr-datetime-card[open] > summary { border-color: #0aa8bf; box-shadow: 0 0 0 2px rgba(10, 168, 191, .12); }
.bill-ocr-datetime-panel { margin-top: 7px; padding: 10px; border: 1px solid #cfe1e7; border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(29, 73, 91, .12); }
.bill-ocr-datetime-panel > header { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; margin-bottom: 7px; }
.bill-ocr-datetime-panel > header strong { text-align: center; font-size: 12px; }
.bill-ocr-datetime-panel > header button,
.bill-ocr-datetime-panel footer button { min-height: 30px; border: 1px solid #d2e1e6; border-radius: 7px; color: #4d6373; background: #f8fbfc; cursor: pointer; }
.bill-ocr-calendar-week,
.bill-ocr-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.bill-ocr-calendar-week span { padding: 3px 0; text-align: center; color: #8797a3; font-size: 9px; }
.bill-ocr-calendar-days button { aspect-ratio: 1.4; min-height: 25px; border: 0; border-radius: 6px; color: #394e60; background: transparent; font-size: 11px; cursor: pointer; }
.bill-ocr-calendar-days button.outside { color: #b1bdc5; }
.bill-ocr-calendar-days button.today { color: #078ba4; box-shadow: inset 0 0 0 1px #70c8d6; }
.bill-ocr-calendar-days button:hover { color: #087f96; background: #eaf8fb; }
.bill-ocr-calendar-days button.selected { color: #fff; background: #0aa8bf; box-shadow: none; }
.bill-ocr-time-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; padding: 7px 8px; border-radius: 8px; background: #f2f9fb; }
.bill-ocr-time-row > span { color: #596f80; font-size: 11px; font-weight: 700; }
.bill-ocr-time-row label { display: flex; align-items: center; gap: 5px; }
.bill-ocr-time-row select { width: 54px; height: 30px; border: 1px solid #c9dce3; border-radius: 7px; color: #263a4b; background: #fff; text-align: center; }
.bill-ocr-datetime-panel footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.bill-ocr-datetime-panel footer > div { display: flex; gap: 6px; }
.bill-ocr-datetime-panel footer button { padding: 5px 10px; font-size: 11px; font-weight: 700; }
.bill-ocr-datetime-panel footer button.confirm { color: #fff; border-color: #0aa8bf; background: #0aa8bf; }
.bill-ocr-add-record { margin-top: 12px; }
.bill-ocr-empty,
.bill-ocr-empty-result { padding: 42px 20px; text-align: center; color: #647988; }
.bill-ocr-empty h3 { margin: 0 0 8px; color: #2c4053; }
.bill-ocr-empty p,
.bill-ocr-empty-result p { margin: 5px 0 14px; }
.bill-ocr-footer { justify-content: flex-end; padding: 12px 18px; border-top: 1px solid #dbe7eb; background: #fff; }
.bill-ocr-footer p { margin-right: auto; color: #647989; }

@media (max-width: 1100px) {
  .bill-ocr-record-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bill-ocr-record-grid > * { grid-row: auto; }
  .bill-ocr-field-bill_no,
  .bill-ocr-field-bill_type,
  .bill-ocr-field-doctor,
  .bill-ocr-field-amount,
  .bill-ocr-field-paid_amount,
  .bill-ocr-field-debt { grid-column: span 2; }
  .bill-ocr-field-charge_time,
  .bill-ocr-field-visit_time,
  .bill-ocr-field-note { grid-column: span 3; }
  .bill-ocr-field-bill_status { grid-column: span 6; }
}
@media (max-width: 760px) {
  .bill-ocr-import-modal { padding: 0; }
  .bill-ocr-import-card { width: 100vw; height: 100dvh; border-radius: 0; }
  .bill-ocr-toolbar { flex-wrap: wrap; }
  .bill-ocr-toolbar > span { width: 100%; margin-left: 0; }
  .bill-ocr-workspace { display: block; overflow-y: auto; }
  .bill-ocr-source-pane { min-height: 420px; border-right: 0; border-bottom: 1px solid #dbe7eb; }
  .bill-ocr-result-pane { overflow: visible; }
  .bill-ocr-record-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bill-ocr-record-grid > * { grid-column: span 1; }
  .bill-ocr-field-charge_time,
  .bill-ocr-field-visit_time,
  .bill-ocr-field-bill_status,
  .bill-ocr-field-note { grid-column: span 2; }
  .bill-ocr-footer p { display: none; }
}
.medical-ocr-raw { margin-top: 16px; color: #536477; }
.medical-ocr-raw summary { margin-bottom: 9px; cursor: pointer; font-weight: 700; }
.medical-ocr-empty { height: 100%; display: grid; place-content: center; justify-items: center; text-align: center; color: #718196; }
.medical-ocr-empty > span { font-size: 42px; color: #0aaac2; }
.medical-ocr-empty h3 { margin: 10px 0 4px; color: #26384d; }
.medical-ocr-empty p { margin: 0 0 18px; }

.medical-ocr-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid #dce7ed;
  background: #fff;
}
.medical-ocr-footer p { margin: 0 auto 0 0; color: #758397; font-size: 13px; }

.medical-ocr-source-modal { z-index: 2850; padding: 30px; background: rgba(8,18,36,.7); }
.medical-ocr-source-modal > section { width: min(1100px, 94vw); max-height: 92vh; margin: auto; overflow: auto; border-radius: 20px; background: #f4f8fa; }
.medical-ocr-source-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; padding: 22px; }
.medical-ocr-source-gallery figure { margin: 0; overflow: hidden; border: 1px solid #d5e1e7; border-radius: 14px; background: #fff; }
.medical-ocr-source-gallery img { width: 100%; max-height: 70vh; object-fit: contain; background: #e8eef1; }
.medical-ocr-source-gallery figcaption { padding: 10px 12px; color: #607083; }

@media (max-width: 900px) {
  .medical-ocr-import-modal { padding: 0; }
  .medical-ocr-import-card { width: 100vw; height: 100dvh; border-radius: 0; }
  .medical-ocr-toolbar { flex-wrap: wrap; }
  .medical-ocr-toolbar > span { width: 100%; margin-left: 0; }
  .medical-ocr-workspace { display: block; overflow-y: auto; }
  .medical-ocr-source-pane { height: 460px; border-right: 0; border-bottom: 1px solid #dce7ed; }
  .medical-ocr-result-pane { overflow: visible; }
  .medical-ocr-field-grid { grid-template-columns: 1fr; }
  .medical-ocr-review-head { align-items: stretch; flex-direction: column; }
  .medical-ocr-footer p { display: none; }
}

/* New-patient dropdowns: overlay menus without shifting surrounding rows. */
#patientForm .patient-form-row:has(.patient-card-select.open) {
  align-items: center;
}

#patientForm .patient-card-select {
  position: relative;
}

#patientForm .patient-card-select.open {
  z-index: 160;
}

#patientForm .patient-card-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  width: auto;
  margin: 0;
}

#patientForm .patient-card-select.open .patient-card-select-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

#patientForm .patient-card-select-trigger i {
  display: block;
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #078fa9;
  border-bottom: 2px solid #078fa9;
  color: transparent;
  font-size: 0;
  line-height: 0;
  transform: translateY(-2px) rotate(45deg);
}

#patientForm .relation-input .patient-card-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#patientForm .patient-card-select.open .patient-card-select-trigger i {
  transform: translateY(2px) rotate(225deg);
}

#patientForm .patient-card-select-menu button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#patientForm .patient-card-select-menu button b {
  display: none;
}
.expense-denture-detail-modal .expense-denture-detail-card{
  width:min(1540px,calc(100vw - 48px))!important;
  max-width:none!important;
  max-height:calc(100dvh - 48px)!important;
  overflow:hidden!important;
  border-radius:18px;
}
.expense-denture-detail-modal .expense-denture-detail-table{
  max-height:calc(100dvh - 310px);
  padding:22px 26px;
}
.expense-denture-detail-modal .expense-denture-price-table{
  min-width:1080px;
  table-layout:auto;
}
.expense-denture-detail-modal .expense-denture-price-table th,
.expense-denture-detail-modal .expense-denture-price-table td{
  white-space:nowrap;
}
@media(max-width:900px){
  .expense-denture-detail-modal .expense-denture-detail-card{width:calc(100vw - 20px)!important;max-height:calc(100dvh - 20px)!important}
}
.expense-denture-price-table{width:100%;min-width:900px}.expense-denture-price-table th,.expense-denture-price-table td{padding:13px 14px}.expense-denture-price-table tfoot td{background:#eaf8fb;color:#173148;font-weight:850}.expense-denture-price-input{display:flex;align-items:center;width:170px;border:1px solid #cbdde6;border-radius:10px;background:#fff;overflow:hidden}.expense-denture-price-input span{padding-left:12px;color:#078ca5;font-weight:900}.expense-denture-price-input input{width:100%;min-height:42px;border:0;padding:0 12px;color:#18334d;font:inherit;font-weight:800;outline:0}.expense-denture-price-input:focus-within{border-color:#0aa9c7;box-shadow:0 0 0 4px rgba(10,169,199,.1)}.expense-denture-modal-total{margin-right:auto;color:#60758a;font-weight:750}.expense-denture-modal-total b{margin-left:5px;color:#078ca5;font-size:18px}
.login-log-panel{width:100%;min-width:0}.login-log-heading{display:flex;align-items:flex-start;justify-content:space-between}.login-log-summary{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}.login-log-summary span{display:flex;align-items:baseline;gap:6px;padding:12px 16px;border:1px solid #dbe7ee;border-radius:12px;background:#f7fbfd;color:#607082}.login-log-summary strong{font-size:20px;color:#233244}.login-log-summary .success strong{color:#0b9270}.login-log-summary .failed strong{color:#c34b48}.login-log-filters{display:grid;grid-template-columns:minmax(180px,240px) minmax(220px,360px);gap:14px;margin-bottom:16px}.login-log-filters label{display:grid;gap:7px;color:#465364;font-size:14px;font-weight:700}.login-log-filters select,.login-log-filters input{min-height:42px;padding:0 12px;border:1px solid #d3dee8;border-radius:10px;background:#fff}.login-log-table-wrap{overflow:auto;border:1px solid #dbe5ed;border-radius:14px}.login-log-table{width:100%;min-width:760px;border-collapse:collapse;background:rgba(255,255,255,.92)}.login-log-table th,.login-log-table td{padding:13px 16px;border-bottom:1px solid #e7edf2;text-align:left}.login-log-table th{background:#f1f6fa;color:#344357;font-size:13px}.login-log-table td{color:#526174;font-size:14px}.login-log-table tbody tr:hover{background:#f4fbfc}.login-log-status{display:inline-flex;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800}.login-log-status.success{background:#e5f7f0;color:#087b5e}.login-log-status.failed{background:#fff0ef;color:#b53d39}.login-log-empty{text-align:center!important;color:#8290a0!important}@media(max-width:700px){.login-log-filters{grid-template-columns:1fr}}

.patient-ledger-actions .patient-settle-debt{min-width:72px;height:32px;padding:0 12px;border:1px solid #0aa9c7;border-radius:8px;background:linear-gradient(135deg,#12b7cf,#079bb9);color:#fff;font-size:13px;cursor:pointer}.patient-ledger-actions .patient-settle-debt:hover{filter:brightness(.96)}
.patient-ledger-actions .icon-detail-btn{display:inline-grid;place-items:center;width:30px;min-width:30px;height:30px;border:1px solid #cfe0e8;border-radius:4px;background:#f8fcfd;color:#078da6;cursor:pointer}.patient-ledger-actions .icon-detail-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.patient-charge-table .patient-ledger-actions{display:grid;grid-template-columns:72px 30px 30px 30px;align-items:center;justify-content:center;gap:10px;min-width:192px}.patient-charge-table .patient-ledger-actions .patient-settle-debt{grid-column:1}.patient-charge-table .patient-ledger-actions .icon-detail-btn{grid-column:2}.patient-charge-table .patient-ledger-actions .patient-print-bill{grid-column:3}.patient-charge-table .patient-ledger-actions .patient-delete-bill{grid-column:4}
.patient-bill-detail-card{width:min(900px,calc(100vw - 36px));overflow:hidden}.patient-bill-detail-card>header{display:flex;justify-content:space-between;gap:20px;padding:24px 28px;border-bottom:1px solid #dce8ee;background:linear-gradient(135deg,#effcff,#f5f7ff)}.patient-bill-detail-card>header p{margin:0 0 6px;color:#079bb9;font-size:12px;font-weight:900;letter-spacing:.18em}.patient-bill-detail-card>header h2{margin:0 0 6px;color:#18334d}.patient-bill-detail-card>header span{color:#718398}.patient-bill-detail-card>header button{width:42px;height:42px;border:0;border-radius:12px;background:#edf5f8;color:#708397;font-size:22px;cursor:pointer}.patient-bill-detail-table{max-height:55vh;padding:24px 28px;overflow:auto}.patient-bill-detail-table table{width:100%;border-collapse:collapse}.patient-bill-detail-table th,.patient-bill-detail-table td{padding:14px 12px;border-bottom:1px solid #e3ebf0;text-align:left}.patient-bill-detail-table th{background:#f3f8fb;color:#53687b}.patient-bill-detail-card>footer{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-top:1px solid #dce8ee;background:#fbfdfe}.patient-bill-detail-card>footer div{display:flex;align-items:baseline;gap:12px;color:#60758a;font-weight:750}.patient-bill-detail-card>footer b{color:#078da6;font-size:24px}
.patient-bill-detail-table .patient-bill-category-row th{padding:12px 14px;border-top:12px solid #fff;border-bottom:1px solid #cfe5ec;background:linear-gradient(90deg,#e9f9fc,#f4f8ff);color:#087f98;font-size:14px;font-weight:900}.patient-bill-detail-table .patient-bill-category-row th:last-child{text-align:right;color:#18334d}

/* The application sheet is a child workflow of the refund dialog and must
   remain above the parent dialog regardless of the shared modal rule order. */
body > .modal.refund-application-form-modal.open {
  z-index: 40000;
}

/* ClauseOS compliance visual system — presentation only. */
@media (min-width: 901px) {
  .app-shell { grid-template-columns: 252px minmax(0, 1fr); }
  .app-shell > .main { grid-column: 2; min-width: 0; }

  .sidebar,
  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.sidebar-hold-open,
  .sidebar.sidebar-force-closed,
  .sidebar.sidebar-force-closed:hover,
  .sidebar.sidebar-force-closed:focus-within {
    width: 252px;
    padding: 20px 16px 16px;
    border-right: 1px solid rgba(148, 163, 184, .12);
    background: linear-gradient(180deg, #111a35 0%, #0d152d 58%, #0a1228 100%);
    box-shadow: 14px 0 40px rgba(15, 23, 42, .06);
  }
}

.clause-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  margin: 0 4px 20px;
  padding: 0 8px 16px;
  border-bottom: 1px solid rgba(148, 163, 184, .13);
}

.clause-brand-mark {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(125, 211, 252, .36);
  border-radius: 10px;
  color: #eff6ff;
  background: linear-gradient(145deg, #3158d7, #1d3a9d);
  box-shadow: 0 8px 22px rgba(37, 79, 190, .28);
  font-size: 16px;
  font-weight: 800;
}

.clause-brand-copy { min-width: 0; display: grid; gap: 2px; }
.clause-brand-copy strong { color: #f8fafc; font-size: 16px; font-weight: 750; letter-spacing: -.02em; }
.clause-brand-copy small { color: #8291b2; font-size: 9px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }

@media (min-width: 901px) {
  .sidebar .nav { gap: 7px; }
  .sidebar .nav-item,
  .sidebar:hover .nav-item,
  .sidebar:focus-within .nav-item,
  .sidebar.sidebar-hold-open .nav-item,
  .sidebar.sidebar-force-closed .nav-item {
    position: relative;
    min-height: 43px;
    height: 43px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #aab5cc;
    font-size: 13px;
    font-weight: 620;
    letter-spacing: .01em;
  }
  .sidebar .nav-item .nav-icon { width: 18px; height: 18px; color: #7f8eae; }
  .sidebar .nav-item:hover {
    color: #e8eefc;
    border-color: rgba(148, 163, 184, .11);
    background: rgba(255, 255, 255, .045);
  }
  .sidebar .nav-item.active {
    color: #f4f7ff;
    border-color: rgba(103, 143, 255, .22);
    background: linear-gradient(90deg, rgba(61, 99, 221, .28), rgba(61, 99, 221, .1));
    box-shadow: inset 3px 0 #5f87ff;
  }
  .sidebar .nav-item.active .nav-icon { color: #8da8ff; }
  .sidebar .clinic-card,
  .sidebar:hover .clinic-card,
  .sidebar:focus-within .clinic-card,
  .sidebar.sidebar-hold-open .clinic-card,
  .sidebar.sidebar-force-closed .clinic-card {
    border-color: rgba(148, 163, 184, .13);
    border-radius: 12px;
    background: rgba(255, 255, 255, .032);
    box-shadow: none;
  }
  .sidebar .clinic-card span, .sidebar .clinic-card small { color: #8491ac; }
  .sidebar .clinic-card strong { color: #dce6fb; }
  .sidebar .system-version { color: #5f6d8b; }
}

body { background: #eef2f8; color: #17233f; font-family: Inter, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif; }
.main { background: #f1f4f9; }

.topbar.dashboard-topbar {
  height: 64px;
  min-height: 64px;
  padding: 0 22px;
  border-bottom: 1px solid #dfe5ef;
  background: rgba(247, 249, 252, .94);
  backdrop-filter: blur(16px);
}
.topbar.dashboard-topbar .top-actions { gap: 10px; }
.topbar.dashboard-topbar .global-search-box {
  width: clamp(250px, 34vw, 500px);
  height: 38px;
  border-color: transparent;
  border-radius: 10px;
  background: #e9eef5;
  box-shadow: inset 0 0 0 1px rgba(121, 138, 166, .1);
}
.topbar.dashboard-topbar .global-search-box:focus-within {
  border-color: #6f8ee8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(76, 111, 214, .11);
}
.topbar.dashboard-topbar .current-user-badge { color: #596780; font-size: 12px; }
.topbar.dashboard-topbar #logoutButton {
  min-height: 36px;
  border-color: #d9e0eb;
  border-radius: 9px;
  color: #536078;
  background: #fff;
}
.topbar.dashboard-topbar .top-new-patient {
  min-height: 38px;
  border: 1px solid #345ac5 !important;
  border-radius: 9px;
  background: #345ac5 !important;
  box-shadow: 0 7px 16px rgba(52, 90, 197, .18) !important;
}
.topbar.dashboard-topbar .top-new-patient:hover { background: #2b4eaf !important; }

#dashboard {
  --clause-ink: #18233e;
  --clause-muted: #718098;
  --clause-line: #dfe5ee;
  --clause-panel: #ffffff;
  --clause-accent: #345ac5;
  --clause-positive: #0c8b79;
  padding: 24px 24px 34px;
  color: var(--clause-ink);
}

.dashboard-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.dashboard-page-kicker { display: block; margin-bottom: 8px; color: #5c76c5; font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.dashboard-page-head h2 { margin: 0; color: #17213a; font-size: clamp(25px, 2.1vw, 32px); font-weight: 750; letter-spacing: -.035em; }
.dashboard-page-head p { margin: 7px 0 0; color: #738099; font-size: 13px; line-height: 1.6; }
.dashboard-page-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 11px;
  border: 1px solid #d8e7e4;
  border-radius: 999px;
  color: #477169;
  background: #f6fbfa;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.dashboard-page-status i { width: 7px; height: 7px; border-radius: 50%; background: #22a690; box-shadow: 0 0 0 3px rgba(34, 166, 144, .12); }

.dashboard-clause-layout { grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 340px); gap: 20px; }
.dashboard-clause-rail { top: 84px; }

#dashboard .glow-card {
  border: 1px solid var(--clause-line);
  border-radius: 14px;
  background: var(--clause-panel);
  box-shadow: 0 6px 22px rgba(31, 45, 78, .045);
}
#dashboard .glow-card:hover { border-color: #ccd6e5; box-shadow: 0 8px 26px rgba(31, 45, 78, .07); }
#dashboard .queue-grid { gap: 14px; }
#dashboard .queue-card {
  position: relative;
  min-height: 132px;
  padding: 18px 18px 16px;
  overflow: hidden;
}
#dashboard .queue-card::after {
  content: "实时";
  position: absolute;
  right: 16px;
  bottom: 14px;
  padding: 4px 8px;
  border-radius: 999px;
  color: #5e6d85;
  background: #f1f4f8;
  font-size: 10px;
  font-weight: 650;
}
#dashboard .queue-card:first-child {
  border-color: #4e70ce;
  background: linear-gradient(145deg, #233f96 0%, #345ac5 100%);
  box-shadow: 0 12px 28px rgba(42, 75, 168, .18);
}
#dashboard .queue-card:first-child::after { color: #dce7ff; background: rgba(255, 255, 255, .12); }
#dashboard .dashboard-stat-index {
  width: 36px;
  height: 36px;
  border: 1px solid #dbe2ee;
  border-radius: 9px;
  color: #526987;
  background: #f3f6fa;
  font-size: 11px;
}
#dashboard .queue-card:first-child .dashboard-stat-index { color: #eff4ff; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.1); }
#dashboard .queue-card strong { color: #738198; font-size: 12px; font-weight: 650; }
#dashboard .queue-card b { margin-top: 8px; color: #1b2845; font-size: 30px; font-weight: 750; letter-spacing: -.035em; }
#dashboard .queue-card:first-child strong, #dashboard .queue-card:first-child b { color: #fff; }
#dashboard .pending-record-summary:hover, #dashboard .pending-followup-summary:hover, #dashboard .dashboard-task-summary:hover { border-color: #9cadd2; box-shadow: 0 9px 25px rgba(39, 61, 111, .09); }

#dashboard .visit-board { margin-top: 20px; overflow: hidden; }
#dashboard .visit-tabs { height: 58px; padding: 0 12px; border-bottom-color: #e3e8f0; }
#dashboard .visit-tabs button { height: 58px; min-width: 116px; color: #6d7990; font-size: 13px; font-weight: 650; }
#dashboard .visit-tabs button.active { color: #294fac; border-bottom: 2px solid #345ac5; }
#dashboard .visit-tabs .board-setting { min-width: 142px; height: 34px; margin: 12px 0; border-color: #dce3ee; border-radius: 9px; color: #647188; background: #f8fafc; }
#dashboard .visit-tools { gap: 10px; min-height: 74px; padding: 12px 14px; border-bottom-color: #e3e8f0; background: #fbfcfe; }
#dashboard .visit-tools input, #dashboard .visit-tools select, #dashboard .visit-tools button,
#dashboard .visit-select-trigger {
  min-height: 38px;
  border-color: #dce3ed;
  border-radius: 9px;
  color: #4e5d75;
  background-color: #f1f4f8;
  box-shadow: none;
}
#dashboard .visit-tools input:focus, #dashboard .visit-tools select:focus, #dashboard .visit-tools button:focus-visible { border-color: #6785d8; outline: 3px solid rgba(52, 90, 197, .1); }
#dashboard .date-box span { background: #345ac5; }
#dashboard .date-box { min-width: 164px; }
#dashboard .board-search { min-width: 210px; }
#dashboard .visit-select { min-width: 178px; }
#dashboard #refreshDashboardToday { color: #fff; border-color: #345ac5; background: #345ac5; }

#dashboard .dense-table-wrap { min-height: 260px; background: #fff; }
#dashboard .visit-table { min-width: 1460px; }
#dashboard .visit-table th {
  height: 46px;
  padding: 0 12px;
  border-color: #e1e7f0;
  color: #53617a;
  background: #eef2f7;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
#dashboard .visit-table td {
  min-height: 56px;
  padding: 12px;
  border-color: #e8ecf2;
  color: #3d4b64;
  background: #fff;
  font-size: 13px;
}
#dashboard .visit-table tbody tr:hover td { background: #f7f9fc; }
#dashboard .visit-table td:nth-child(5), #dashboard .visit-table td:nth-child(6) { color: #2851af; font-weight: 650; }
#dashboard .visit-table .square-btn, #dashboard .visit-table button {
  border-color: #d9e1ec;
  border-radius: 8px;
  color: #46607f;
  background: #f6f8fb;
  box-shadow: none;
}
#dashboard .visit-table .table-plus.charged,
#dashboard .visit-table .table-plus.recorded,
#dashboard .visit-table .table-plus.scheduled,
#dashboard .visit-table .table-plus.followed,
#dashboard .visit-table .table-plus.issued,
#dashboard .visit-table .table-plus.arrived,
#dashboard .visit-table .table-plus.planned,
#dashboard .visit-table .table-plus.treatment-completed {
  color: #087664;
  border-color: #b9ded6;
  background: #e9f7f3;
}
#dashboard .visit-table .table-plus:disabled {
  color: #a3adbc;
  border-color: #e2e6ec;
  background: #f2f4f7;
  opacity: .72;
}
#dashboard .visit-type-badge { color: #2851af; background: #e8eefc; }
#dashboard .cancelled-type-badge, #dashboard .debt-type-badge { color: #b54747; background: #fff0ef; }
#dashboard .referral-type-badge { color: #9b6014; background: #fff4df; }

#dashboard .work-card { padding: 18px; }
#dashboard .work-card h2 { margin: 0 0 8px; color: #1b2743; font-size: 16px; font-weight: 720; }
#dashboard .work-card h2::after {
  content: "6";
  order: -1;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-right: 8px;
  border-radius: 999px;
  color: #3155b8;
  background: #e9eefc;
  font-size: 11px;
}
#dashboard .work-revenue-eye { margin-left: auto; color: #72809a; background: #f3f6fa; }
#dashboard .mini-stats { gap: 0; }
#dashboard .mini-stats div {
  position: relative;
  min-height: 78px;
  padding: 15px 12px 15px 18px;
  border: 0;
  border-top: 1px solid #e7ebf2;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#dashboard .mini-stats div::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #36a995;
  box-shadow: 0 0 0 4px rgba(54, 169, 149, .1);
}
#dashboard .mini-stats div:nth-child(2)::before, #dashboard .mini-stats div:nth-child(3)::before { background: #e6a245; box-shadow: 0 0 0 4px rgba(230, 162, 69, .11); }
#dashboard .mini-stats span { color: #536078; font-size: 12px; font-weight: 650; }
#dashboard .mini-stats b { color: #1c2843; font-size: 20px; font-weight: 740; }
#dashboard .mini-stats div:not(.dashboard-work-action-card)::after {
  content: "今日 · 已同步";
  grid-column: 1 / -1;
  margin-top: 4px;
  color: #919caf;
  font-size: 10px;
}
#dashboard .mini-stats .dashboard-work-action-card small { color: #4b68bb; }
#dashboard .mini-stats .dashboard-work-action-card::after { border-color: #5874c6; }
#dashboard .mini-stats .dashboard-work-action-card:hover, #dashboard .mini-stats .dashboard-work-action-card:focus-visible { border-color: transparent; background: #f7f9fc; box-shadow: none; }

#dashboard .dashboard-empty-row td { height: 245px; padding: 28px; text-align: center; background: #fff !important; }
.dashboard-empty-row td > * { display: block; }
.dashboard-empty-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 13px;
  border: 1px solid #d8e1ee;
  border-radius: 12px;
  background: linear-gradient(135deg, #f7f9fc, #e9eef6);
  box-shadow: inset 0 0 0 9px #fff;
}
.dashboard-empty-row strong { color: #4d5a72; font-size: 14px; font-weight: 700; }
.dashboard-empty-row small { max-width: 360px; margin: 7px auto 0; color: #929caf; font-size: 11px; line-height: 1.65; }

@media (min-width: 901px) and (max-width: 1220px) {
  .app-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .app-shell > .main { grid-column: 2; }
  .sidebar,
  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.sidebar-hold-open,
  .sidebar.sidebar-force-closed,
  .sidebar.sidebar-force-closed:hover,
  .sidebar.sidebar-force-closed:focus-within { width: 220px; }
  #dashboard { padding: 20px 18px 30px; }
  .dashboard-clause-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; }
  #dashboard .queue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #dashboard .queue-card { min-height: 120px; padding: 14px; }
}

@media (max-width: 900px) {
  .clause-brand { margin-top: 38px; }
  #dashboard { padding: 18px 14px 28px; }
  .dashboard-page-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .dashboard-clause-layout { grid-template-columns: 1fr; }
  .dashboard-clause-rail { position: static; grid-row: auto; }
  #dashboard .queue-grid { grid-template-columns: 1fr; }
  #dashboard .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #dashboard *, .sidebar * { scroll-behavior: auto !important; transition: none !important; }
}

/* ClauseOS Design Spec v2.0 — Blue Charcoal / Harmony Green dark workspace. */
:root {
  --clause-bg-primary: #1a1d23;
  --clause-bg-secondary: #111318;
  --clause-accent-primary: #00c897;
  --clause-accent-secondary: #3b82f6;
  --clause-accent-soft: rgba(0, 200, 151, .09);
  --clause-success: #10b981;
  --clause-warning: #f59e0b;
  --clause-error: #ef4444;
  --clause-text-primary: #e5e7eb;
  --clause-text-secondary: #9ca3af;
  --clause-text-tertiary: #6b7280;
  --clause-border: rgba(255, 255, 255, .08);
  --clause-border-active: rgba(0, 200, 151, .28);
  --clause-radius-sm: 6px;
  --clause-radius-md: 10px;
  --clause-radius-lg: 16px;
  --clause-radius-xl: 20px;
  --clause-radius-full: 9999px;
  --clause-shadow-sm: 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .03);
  --clause-shadow-md: 0 4px 16px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05);
  --clause-shadow-glow: 0 0 20px rgba(0, 200, 151, .14), 0 4px 16px rgba(0, 0, 0, .3);
  --clause-fast: 150ms;
  --clause-normal: 250ms;
  --clause-ease: cubic-bezier(.16, 1, .3, 1);
}

body { color: var(--clause-text-primary); background: #0a0b0f; }
.main { background: var(--clause-bg-primary); }

@media (min-width: 1440px) {
  .app-shell { grid-template-columns: 280px minmax(0, 1fr); }
  .app-shell > .main { grid-column: 2; }
  .sidebar,
  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.sidebar-hold-open,
  .sidebar.sidebar-force-closed,
  .sidebar.sidebar-force-closed:hover,
  .sidebar.sidebar-force-closed:focus-within { width: 280px; }
}

@media (min-width: 901px) {
  .sidebar,
  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.sidebar-hold-open,
  .sidebar.sidebar-force-closed,
  .sidebar.sidebar-force-closed:hover,
  .sidebar.sidebar-force-closed:focus-within {
    border-right: 1px solid rgba(255, 255, 255, .1);
    background: rgba(10, 11, 15, .78);
    box-shadow: var(--clause-shadow-md);
    backdrop-filter: blur(20px) saturate(140%);
  }
  .sidebar .nav { gap: 4px; }
  .sidebar .nav-item,
  .sidebar:hover .nav-item,
  .sidebar:focus-within .nav-item,
  .sidebar.sidebar-hold-open .nav-item,
  .sidebar.sidebar-force-closed .nav-item {
    min-height: 44px;
    height: 44px;
    border-radius: var(--clause-radius-md);
    color: var(--clause-text-secondary);
    font-weight: 500;
    transition: color var(--clause-fast), background var(--clause-fast), transform var(--clause-fast);
  }
  .sidebar .nav-item .nav-icon { width: 24px; height: 24px; color: var(--clause-text-tertiary); stroke-width: 1.6; }
  .sidebar .nav-item:hover { color: var(--clause-text-primary); background: rgba(255, 255, 255, .08); }
  .sidebar .nav-item.active {
    color: var(--clause-accent-primary);
    border-color: rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .13);
    box-shadow: inset 3px 0 var(--clause-accent-primary), var(--clause-shadow-sm);
  }
  .sidebar .nav-item.active .nav-icon { color: var(--clause-accent-primary); }
  .sidebar .clinic-card,
  .sidebar:hover .clinic-card,
  .sidebar:focus-within .clinic-card,
  .sidebar.sidebar-hold-open .clinic-card,
  .sidebar.sidebar-force-closed .clinic-card {
    border-color: rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .05);
    box-shadow: var(--clause-shadow-sm);
    backdrop-filter: blur(12px) saturate(120%);
  }
  .sidebar .clinic-card span { color: var(--clause-text-secondary); }
  .sidebar .clinic-card small, .sidebar .system-version { color: var(--clause-text-tertiary); }
  .sidebar .clinic-card strong { color: var(--clause-text-primary); }
}

.clause-brand { border-bottom-color: rgba(255, 255, 255, .08); }
.clause-brand-mark {
  border-color: rgba(0, 200, 151, .3);
  color: #07110e;
  background: var(--clause-accent-primary);
  box-shadow: var(--clause-shadow-glow);
  font-family: Urbanist, "SF Pro Display", sans-serif;
}
.clause-brand-copy strong { color: var(--clause-text-primary); font-family: Urbanist, "SF Pro Display", sans-serif; font-size: 18px; font-weight: 700; }
.clause-brand-copy small { color: var(--clause-text-tertiary); }

.topbar.dashboard-topbar {
  height: 64px;
  min-height: 64px;
  border-bottom-color: rgba(255, 255, 255, .08);
  background: rgba(26, 29, 35, .76);
  box-shadow: none;
  backdrop-filter: blur(20px) saturate(140%);
}
.topbar.dashboard-topbar .global-search-box {
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--clause-radius-sm);
  color: var(--clause-text-primary);
  background: rgba(255, 255, 255, .04);
  box-shadow: none;
}
.topbar.dashboard-topbar .global-search-box input { color: var(--clause-text-primary); }
.topbar.dashboard-topbar .global-search-box input::placeholder { color: var(--clause-text-tertiary); }
.topbar.dashboard-topbar .global-search-box svg { color: var(--clause-text-tertiary); fill: currentColor; }
.topbar.dashboard-topbar .global-search-box:focus-within { border-color: var(--clause-accent-primary); background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 3px rgba(0, 200, 151, .12); }
.topbar.dashboard-topbar .current-user-badge { color: var(--clause-text-secondary); }
.topbar.dashboard-topbar #logoutButton {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--clause-radius-full);
  color: var(--clause-text-secondary);
  background: rgba(255, 255, 255, .04);
}
.topbar.dashboard-topbar #logoutButton:hover { color: var(--clause-text-primary); background: rgba(255, 255, 255, .08); }
.topbar.dashboard-topbar .top-new-patient {
  min-height: 44px;
  padding-inline: 18px;
  border-color: var(--clause-accent-primary) !important;
  border-radius: var(--clause-radius-full);
  color: #08130f !important;
  background: var(--clause-accent-primary) !important;
  box-shadow: var(--clause-shadow-glow) !important;
  font-weight: 650;
}
.topbar.dashboard-topbar .top-new-patient:hover { filter: brightness(1.08); background: var(--clause-accent-primary) !important; }
.topbar.dashboard-topbar button:active, #dashboard button:active { transform: scale(.97); }

#dashboard {
  --clause-ink: var(--clause-text-primary);
  --clause-muted: var(--clause-text-secondary);
  --clause-line: rgba(255, 255, 255, .08);
  --clause-panel: var(--clause-bg-secondary);
  --clause-accent: var(--clause-accent-primary);
  color: var(--clause-text-primary);
  background:
    radial-gradient(circle at 82% 8%, rgba(0, 200, 151, .055), transparent 28%),
    var(--clause-bg-primary);
}
.dashboard-page-kicker { color: var(--clause-accent-primary); }
.dashboard-page-head h2 { color: var(--clause-text-primary); font-family: Urbanist, "SF Pro Display", sans-serif; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.dashboard-page-head p { color: var(--clause-text-secondary); font-size: 13px; }
.dashboard-page-status {
  min-height: 32px;
  border-color: rgba(0, 200, 151, .18);
  color: var(--clause-accent-primary);
  background: rgba(0, 200, 151, .07);
}
.dashboard-page-status i { background: var(--clause-accent-primary); box-shadow: 0 0 0 3px rgba(0, 200, 151, .12); }

@media (min-width: 1440px) {
  .dashboard-clause-layout { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; }
}
.dashboard-clause-rail { top: 88px; }

#dashboard .glow-card {
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--clause-radius-lg);
  color: var(--clause-text-primary);
  background: rgba(255, 255, 255, .055);
  box-shadow: var(--clause-shadow-sm);
  backdrop-filter: blur(12px) saturate(120%);
  transition: transform var(--clause-normal) var(--clause-ease), border-color var(--clause-normal), background var(--clause-normal);
}
#dashboard .glow-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .075); box-shadow: var(--clause-shadow-sm); }
#dashboard .queue-grid { gap: 24px; }
#dashboard .queue-card { min-height: 120px; padding: 16px; }
#dashboard .queue-card:first-child {
  border-color: var(--clause-border-active);
  background: rgba(0, 200, 151, .085);
  box-shadow: var(--clause-shadow-glow);
}
#dashboard .queue-card::after { color: var(--clause-text-tertiary); background: rgba(255, 255, 255, .05); }
#dashboard .queue-card:first-child::after { color: var(--clause-accent-primary); background: rgba(0, 200, 151, .1); }
#dashboard .dashboard-stat-index {
  border-color: rgba(255, 255, 255, .08);
  color: var(--clause-text-secondary);
  background: rgba(255, 255, 255, .05);
}
#dashboard .queue-card:first-child .dashboard-stat-index { color: var(--clause-accent-primary); border-color: var(--clause-border-active); background: rgba(0, 200, 151, .08); }
#dashboard .queue-card strong, #dashboard .queue-card:first-child strong { color: var(--clause-text-secondary); font-size: 12px; font-weight: 500; }
#dashboard .queue-card b, #dashboard .queue-card:first-child b { color: var(--clause-text-primary); font-size: 28px; font-weight: 700; }

#dashboard .visit-board {
  border-color: rgba(255, 255, 255, .08);
  background: var(--clause-bg-secondary);
  box-shadow: var(--clause-shadow-sm);
  backdrop-filter: none;
}
#dashboard .visit-board:hover { transform: none; border-color: rgba(255, 255, 255, .1); background: var(--clause-bg-secondary); }
#dashboard .visit-tabs { border-bottom-color: rgba(255, 255, 255, .06); background: #14161c; }
#dashboard .visit-tabs button { color: var(--clause-text-secondary); }
#dashboard .visit-tabs button.active { color: var(--clause-accent-primary); border-bottom-color: var(--clause-accent-primary); }
#dashboard .visit-tabs .board-setting {
  border-color: rgba(255, 255, 255, .08);
  border-radius: var(--clause-radius-full);
  color: var(--clause-text-secondary);
  background: rgba(255, 255, 255, .04);
}
#dashboard .visit-tools { border-bottom-color: rgba(255, 255, 255, .06); background: #15171d; }
#dashboard .visit-tools input, #dashboard .visit-tools select, #dashboard .visit-tools button,
#dashboard .visit-select-trigger {
  min-height: 40px;
  border-color: rgba(255, 255, 255, .08);
  border-radius: var(--clause-radius-sm);
  color: var(--clause-text-secondary);
  background-color: rgba(255, 255, 255, .04);
}
#dashboard .visit-tools input { color: var(--clause-text-primary); }
#dashboard .visit-tools input::placeholder { color: var(--clause-text-tertiary); }
#dashboard .visit-tools input:focus, #dashboard .visit-tools select:focus, #dashboard .visit-tools button:focus-visible { border-color: var(--clause-accent-primary); outline: 3px solid rgba(0, 200, 151, .12); }
#dashboard .date-box span, #dashboard #refreshDashboardToday { color: #07120e; border-color: var(--clause-accent-primary); background: var(--clause-accent-primary); }

#dashboard .dense-table-wrap { background: var(--clause-bg-secondary); }
#dashboard .visit-table th {
  height: 48px;
  padding-inline: 16px;
  border-color: rgba(255, 255, 255, .04);
  color: var(--clause-text-tertiary);
  background: rgba(255, 255, 255, .03);
  font-size: 12px;
  font-weight: 500;
}
#dashboard .visit-table td {
  height: 48px;
  padding-inline: 16px;
  border-color: rgba(255, 255, 255, .04);
  color: var(--clause-text-secondary);
  background: var(--clause-bg-secondary);
  font-size: 13px;
}
#dashboard .visit-table tbody tr:hover td { background: rgba(255, 255, 255, .03); }
#dashboard .visit-table tbody tr.selected td { background: var(--clause-accent-soft); }
#dashboard .visit-table td:nth-child(5), #dashboard .visit-table td:nth-child(6) { color: var(--clause-accent-secondary); }
#dashboard .visit-table .patient-name-link { color: var(--clause-text-primary); }
#dashboard .visit-table .table-plus, #dashboard .visit-table button {
  border-color: rgba(255, 255, 255, .08);
  color: var(--clause-text-secondary);
  background: rgba(255, 255, 255, .04);
}
#dashboard .visit-table .table-plus:hover { color: var(--clause-accent-primary); border-color: var(--clause-border-active); background: var(--clause-accent-soft); }
#dashboard .visit-table .table-plus.charged,
#dashboard .visit-table .table-plus.recorded,
#dashboard .visit-table .table-plus.scheduled,
#dashboard .visit-table .table-plus.followed,
#dashboard .visit-table .table-plus.issued,
#dashboard .visit-table .table-plus.arrived,
#dashboard .visit-table .table-plus.planned,
#dashboard .visit-table .table-plus.treatment-completed { color: var(--clause-accent-primary); border-color: var(--clause-border-active); background: rgba(0, 200, 151, .1); }
#dashboard .visit-type-badge { color: var(--clause-accent-secondary); background: rgba(59, 130, 246, .1); }
#dashboard .cancelled-type-badge, #dashboard .debt-type-badge { color: var(--clause-error); background: rgba(239, 68, 68, .1); }
#dashboard .referral-type-badge { color: var(--clause-warning); background: rgba(245, 158, 11, .1); }

#dashboard .work-card { background: rgba(255, 255, 255, .07); backdrop-filter: blur(20px) saturate(140%); }
#dashboard .work-card h2 { color: var(--clause-text-primary); font-size: 16px; font-weight: 500; }
#dashboard .work-card h2::after { color: #07120e; background: var(--clause-accent-primary); }
#dashboard .work-revenue-eye { color: var(--clause-text-secondary); background: rgba(255, 255, 255, .04); }
#dashboard .work-revenue-eye:hover, #dashboard .work-revenue-eye.visible { color: var(--clause-accent-primary); }
#dashboard .mini-stats div { border-top-color: rgba(255, 255, 255, .06); background: transparent; backdrop-filter: none; }
#dashboard .mini-stats div:hover { transform: none; background: rgba(255, 255, 255, .04); }
#dashboard .mini-stats div::before { background: var(--clause-success); box-shadow: 0 0 0 4px rgba(16, 185, 129, .1); }
#dashboard .mini-stats div:nth-child(2)::before, #dashboard .mini-stats div:nth-child(3)::before { background: var(--clause-warning); box-shadow: 0 0 0 4px rgba(245, 158, 11, .1); }
#dashboard .mini-stats span { color: var(--clause-text-secondary); font-weight: 500; }
#dashboard .mini-stats b { color: var(--clause-text-primary); }
#dashboard .mini-stats div:not(.dashboard-work-action-card)::after { color: var(--clause-text-tertiary); }
#dashboard .mini-stats .dashboard-work-action-card small { color: var(--clause-accent-primary); }
#dashboard .mini-stats .dashboard-work-action-card::after { border-color: var(--clause-accent-primary); }

#dashboard .dashboard-empty-row td { color: var(--clause-text-secondary); background: var(--clause-bg-secondary) !important; }
.dashboard-empty-icon { border-color: rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 9px #111318; }
.dashboard-empty-row strong { color: var(--clause-text-secondary); }
.dashboard-empty-row small { color: var(--clause-text-tertiary); }

#dashboard :is(button, input, select, [tabindex]):focus-visible,
.sidebar :is(button, [tabindex]):focus-visible,
.topbar :is(button, input):focus-visible { outline: 2px solid var(--clause-accent-primary) !important; outline-offset: 2px; }

@media (min-width: 1024px) and (max-width: 1439px) {
  .app-shell { grid-template-columns: 64px minmax(0, 1fr); }
  .app-shell > .main { grid-column: 2; }
  .sidebar,
  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.sidebar-hold-open,
  .sidebar.sidebar-force-closed,
  .sidebar.sidebar-force-closed:hover,
  .sidebar.sidebar-force-closed:focus-within { width: 64px; padding: 14px 8px; }
  .clause-brand { justify-content: center; margin: 0 0 16px; padding: 0 0 14px; }
  .clause-brand-mark { flex-basis: 36px; width: 36px; height: 36px; }
  .clause-brand-copy { display: none; }
  .sidebar .nav-item,
  .sidebar:hover .nav-item,
  .sidebar:focus-within .nav-item,
  .sidebar.sidebar-hold-open .nav-item,
  .sidebar.sidebar-force-closed .nav-item { justify-content: center; width: 48px; padding: 0; font-size: 0; }
  .sidebar .nav-item .nav-icon { margin: 0; }
  .sidebar .nav-submenu, .sidebar .clinic-card, .sidebar .system-version { display: none !important; }
  #dashboard { padding: 24px; }
  .dashboard-clause-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
  #dashboard .queue-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 16px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .app-shell { grid-template-columns: 64px minmax(0, 1fr); }
  .app-shell > .main { grid-column: 2; }
  .sidebar,
  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.sidebar-hold-open,
  .sidebar.sidebar-force-closed,
  .sidebar.sidebar-force-closed:hover,
  .sidebar.sidebar-force-closed:focus-within { position: fixed; inset: 0 auto 0 0; width: 64px; height: 100dvh; padding: 14px 8px; transform: none; }
  .clause-brand { justify-content: center; margin: 0 0 16px; padding: 0 0 14px; }
  .clause-brand-copy, .sidebar .nav-submenu, .sidebar .clinic-card, .sidebar .system-version { display: none !important; }
  .sidebar .nav-item { justify-content: center; width: 48px; min-height: 44px; padding: 0; font-size: 0; }
  .sidebar .nav-item .nav-icon { width: 24px; height: 24px; margin: 0; }
  .dashboard-clause-layout { grid-template-columns: 1fr; }
  .dashboard-clause-rail { position: static; grid-row: auto; }
  #dashboard .queue-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 767px) {
  .app-shell { display: block; }
  .main { min-height: 100dvh; padding-bottom: 76px; }
  .sidebar-mobile-toggle, .sidebar-mobile-backdrop { display: none !important; }
  .sidebar,
  .sidebar:hover,
  .sidebar:focus-within,
  .sidebar.sidebar-hold-open,
  .sidebar.sidebar-force-closed,
  .sidebar.sidebar-force-closed:hover,
  .sidebar.sidebar-force-closed:focus-within {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1000;
    width: 100%;
    height: 68px;
    padding: 6px 8px;
    overflow: hidden;
    transform: none !important;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(10, 11, 15, .86);
    backdrop-filter: blur(20px) saturate(140%);
  }
  .clause-brand, .sidebar .clinic-card, .sidebar .system-version, .sidebar .nav-submenu { display: none !important; }
  .sidebar .nav { flex: 1; display: flex; gap: 4px; overflow-x: auto; }
  .sidebar .nav-item { flex: 0 0 58px; min-width: 58px; height: 54px; justify-content: center; padding: 0; font-size: 0; border-radius: var(--clause-radius-md); }
  .sidebar .nav-item .nav-icon { width: 24px; height: 24px; margin: 0; }
  .topbar.dashboard-topbar { padding: 0 12px; }
  .topbar.dashboard-topbar .global-search-box { min-width: 0; width: 100%; }
  .topbar.dashboard-topbar .current-user-badge, .topbar.dashboard-topbar #logoutButton { display: none; }
  .topbar.dashboard-topbar .top-new-patient { flex: 0 0 44px; width: 44px; padding: 0; overflow: hidden; font-size: 0; }
  #dashboard { padding: 16px 12px 28px; }
  .dashboard-page-head { margin-bottom: 16px; }
  .dashboard-page-status { display: none; }
  .dashboard-clause-layout { grid-template-columns: 1fr; gap: 16px; }
  #dashboard .queue-grid { grid-template-columns: 1fr; gap: 12px; }
  #dashboard .mini-stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* WenXiBuddy thin-glass card skin. No structure or interaction changes. */
:root {
  --thin-glass-fill: rgba(255, 255, 255, .052);
  --thin-glass-fill-hover: rgba(255, 255, 255, .072);
  --thin-glass-edge: rgba(255, 255, 255, .22);
  --thin-glass-edge-soft: rgba(255, 255, 255, .09);
  --thin-glass-shine: rgba(255, 255, 255, .16);
  --thin-glass-shadow: 0 14px 38px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .13), inset 1px 0 0 rgba(255, 255, 255, .035);
}

#dashboard .glow-card,
.sidebar .clinic-card,
.sidebar:hover .clinic-card,
.sidebar:focus-within .clinic-card,
.sidebar.sidebar-hold-open .clinic-card,
.sidebar.sidebar-force-closed .clinic-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--thin-glass-edge) !important;
  border-right-color: rgba(255, 255, 255, .13) !important;
  border-bottom-color: rgba(255, 255, 255, .11) !important;
  border-radius: 14px !important;
  background-color: var(--thin-glass-fill) !important;
  background-image:
    radial-gradient(ellipse 72% 42% at 108% 112%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, .105) 24%, rgba(255, 255, 255, .028) 48%, transparent 68%),
    radial-gradient(ellipse 55% 16% at 18% -4%, rgba(255, 255, 255, .10), transparent 72%),
    linear-gradient(138deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 48%, rgba(255, 255, 255, .035)) !important;
  background-clip: padding-box !important;
  box-shadow: var(--thin-glass-shadow) !important;
  backdrop-filter: blur(14px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(118%) !important;
  transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease !important;
}

#dashboard .glow-card:hover,
.sidebar .clinic-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .30) !important;
  border-right-color: rgba(255, 255, 255, .18) !important;
  border-bottom-color: rgba(255, 255, 255, .16) !important;
  background-color: var(--thin-glass-fill-hover) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .17), inset 1px 0 0 rgba(255, 255, 255, .05) !important;
}

#dashboard .glow-card:focus-visible,
#dashboard .glow-card[tabindex]:focus-visible,
.sidebar .clinic-card:focus-visible {
  border-color: rgba(255, 255, 255, .38) !important;
  outline: 2px solid var(--clause-accent-primary) !important;
  outline-offset: 3px;
}

/* The table remains an opaque content layer inside its glass frame. */
#dashboard .visit-board {
  background-color: rgba(17, 19, 24, .82) !important;
}
#dashboard .visit-board:hover { transform: none; }
#dashboard .visit-board .visit-tabs,
#dashboard .visit-board .visit-tools,
#dashboard .visit-board .dense-table-wrap { position: relative; z-index: 1; }

/* Nested summary cards use a quieter reflection so the hierarchy stays clear. */
#dashboard .mini-stat-card {
  border-color: rgba(255, 255, 255, .11) !important;
  background-color: rgba(255, 255, 255, .028) !important;
  background-image:
    radial-gradient(ellipse 68% 46% at 108% 116%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035) 38%, transparent 68%),
    linear-gradient(145deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  backdrop-filter: blur(10px) saturate(112%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(112%) !important;
}
#dashboard .mini-stat-card:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .18) !important;
  background-color: rgba(255, 255, 255, .045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

/* Active cards retain the same material, with success shown only as a fine edge. */
#dashboard .queue-card:first-child {
  border-color: rgba(0, 200, 151, .42) !important;
  background-color: rgba(0, 200, 151, .065) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .28), 0 0 18px rgba(0, 200, 151, .09), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #dashboard .glow-card,
  .sidebar .clinic-card { background-color: #1c1f25 !important; }
  #dashboard .mini-stat-card { background-color: #191c21 !important; }
}

@media (prefers-reduced-transparency: reduce) {
  #dashboard .glow-card,
  .sidebar .clinic-card { background-color: #1c1f25 !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #dashboard .mini-stat-card { background-color: #191c21 !important; }
}

@media (prefers-reduced-motion: reduce) {
  #dashboard .glow-card:hover,
  .sidebar .clinic-card:hover { transform: none; }
}

/* WenXiBuddy white-light appointment calendar. Interaction hooks are unchanged. */
#schedule .booking-left {
  position: relative;
  border-right-color: rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 255, 255, .055), transparent 26%),
    radial-gradient(circle at 76% 78%, rgba(255, 255, 255, .035), transparent 24%),
    #0b0d11;
}

#schedule .booking-left::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .22) .55px, transparent .75px);
  background-size: 17px 17px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

#schedule .schedule-date-picker {
  position: relative;
  isolation: isolate;
  min-height: 438px;
  margin: 20px 18px 24px;
  padding: 22px 18px 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .38);
  border-right-color: rgba(255, 255, 255, .20);
  border-bottom-color: rgba(255, 255, 255, .28);
  border-radius: 22px;
  color: rgba(255, 255, 255, .94);
  background-color: rgba(255, 255, 255, .065);
  background-image:
    radial-gradient(ellipse 74% 42% at 8% 2%, rgba(255, 255, 255, .25), rgba(255, 255, 255, .07) 38%, transparent 70%),
    radial-gradient(ellipse 72% 45% at 102% 104%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .065) 42%, transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .025) 48%, rgba(255, 255, 255, .075));
  box-shadow:
    0 22px 54px rgba(0, 0, 0, .42),
    0 0 22px rgba(255, 255, 255, .08),
    inset 0 2px 1px rgba(255, 255, 255, .24),
    inset 1px 0 0 rgba(255, 255, 255, .08),
    inset -1px -1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(24px) saturate(128%);
  -webkit-backdrop-filter: blur(24px) saturate(128%);
}

#schedule .schedule-date-picker::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -28%;
  bottom: -20%;
  width: 94%;
  height: 58%;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .12), rgba(255, 255, 255, .025) 48%, transparent 72%);
  filter: blur(1px);
  pointer-events: none;
}

#schedule .calendar-head {
  grid-template-columns: 42px auto auto 42px minmax(66px, 1fr);
  gap: 4px;
  min-height: 62px;
  margin: -4px -2px 10px;
  padding: 0 2px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .96);
}
#schedule #schedulePrevMonth { grid-column: 1; grid-row: 1; }
#schedule #scheduleYearBtn { grid-column: 2; grid-row: 1; justify-content: flex-end; }
#schedule #scheduleMonthBtn { grid-column: 3; grid-row: 1; justify-content: flex-start; }
#schedule #scheduleNextMonth { grid-column: 4; grid-row: 1; }
#schedule #scheduleTodayBtn { grid-column: 5; grid-row: 1; justify-self: end; }

#schedule .calendar-title-btn {
  width: auto;
  min-height: 42px;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  color: rgba(255, 255, 255, .96);
  background: transparent !important;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -.025em;
}
#schedule .calendar-title-btn::after { display: none; }
#schedule .calendar-title-btn:hover { color: #fff; text-shadow: 0 0 14px rgba(255, 255, 255, .28); }

#schedule .calendar-arrow {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .20) !important;
  border-radius: 11px !important;
  color: rgba(255, 255, 255, .90);
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  font-size: 29px;
  font-weight: 300;
}
#schedule .calendar-arrow:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .36) !important;
  background: rgba(255, 255, 255, .11) !important;
  transform: translateY(-1px);
}

#schedule .calendar-today-btn {
  width: 66px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, .28) !important;
  border-radius: 999px;
  color: rgba(255, 255, 255, .96);
  background: rgba(255, 255, 255, .055) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  font-size: 0;
}
#schedule .calendar-today-btn::after { content: "今天"; font-size: 13px; font-weight: 650; }
#schedule .calendar-today-btn:hover { color: #07120e; border-color: #00c897 !important; background: #00c897 !important; }

#schedule .mini-calendar {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px 4px;
  padding: 2px 0 0;
}
#schedule .mini-calendar b {
  height: 34px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  font-weight: 550;
}
#schedule .mini-calendar > span { min-height: 44px; }
#schedule .mini-calendar button {
  width: 44px;
  min-width: 44px;
  height: 48px;
  min-height: 48px;
  justify-self: center;
  align-content: center;
  gap: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  color: rgba(255, 255, 255, .88);
  background: transparent;
  box-shadow: none;
  transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
#schedule .mini-calendar button strong { line-height: 18px; color: inherit; font-size: 16px; font-weight: 540; }
#schedule .mini-calendar button small { height: 13px; line-height: 13px; color: rgba(255, 255, 255, .42); font-size: 8px; }
#schedule .mini-calendar button:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  transform: translateY(-1px);
}
#schedule .mini-calendar button.today:not(.active) {
  color: #07120e;
  border-color: #00c897;
  background: #00c897;
  box-shadow: 0 0 18px rgba(0, 200, 151, .22);
}
#schedule .mini-calendar button.today:not(.active) small { color: rgba(7, 18, 14, .62); }
#schedule .mini-calendar button.active,
#schedule .mini-calendar button.active.today {
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .96);
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .055), 0 0 18px rgba(255, 255, 255, .14);
}
#schedule .mini-calendar button.active small { color: rgba(255, 255, 255, .58); }

#schedule .calendar-dropdown {
  top: 50px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 14px;
  color: rgba(255, 255, 255, .9);
  background:
    radial-gradient(ellipse 70% 34% at 10% 0%, rgba(255, 255, 255, .14), transparent 68%),
    rgba(21, 23, 28, .88);
  box-shadow: 0 20px 46px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .11);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
}
#schedule .calendar-month-dropdown { left: 42%; }
#schedule .calendar-dropdown button { color: rgba(255, 255, 255, .78); }
#schedule .calendar-dropdown button:hover,
#schedule .calendar-dropdown button.active { color: #07120e; background: #00c897; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #schedule .schedule-date-picker, #schedule .calendar-dropdown { background-color: #202329; }
}
@media (prefers-reduced-transparency: reduce) {
  #schedule .schedule-date-picker, #schedule .calendar-dropdown { background-image: none; background-color: #202329; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  #schedule .calendar-arrow:hover, #schedule .mini-calendar button:hover { transform: none; }
}

/* WenXiBuddy Prompt Pack — global ultra-thin white-light theme. Visual layer only. */
:root {
  --wb-canvas: #020304;
  --wb-canvas-soft: #07090a;
  --wb-glass: rgba(14, 17, 18, .72);
  --wb-glass-raised: rgba(24, 27, 29, .78);
  --wb-glass-control: rgba(255, 255, 255, .045);
  --wb-milk: rgba(255, 255, 255, .10);
  --wb-text: #f4f7f5;
  --wb-text-secondary: #a8b0ac;
  --wb-text-disabled: rgba(244, 247, 245, .32);
  --wb-border: rgba(224, 232, 228, .22);
  --wb-border-strong: rgba(244, 248, 246, .68);
  --wb-green: #17d97a;
  --wb-green-soft: #78f0b2;
  --wb-warning: #f2a72d;
  --wb-danger: #ff514d;
  --wb-info: #62afff;
  --wb-ease: cubic-bezier(.2, .8, .2, 1);
  --wb-panel-shadow: 0 24px 64px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .12);
  --wb-modal-shadow: 0 20px 50px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .12);
  color-scheme: dark;
}

html, body { background: var(--wb-canvas) !important; }
body {
  color: var(--wb-text);
  font-family: Inter, "Noto Sans SC", "PingFang SC", "SF Pro Text", -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .055) .5px, transparent .7px) !important;
  background-size: 18px 18px !important;
}
.app-shell, .main, .view { background-color: transparent !important; }
.main {
  background-image:
    radial-gradient(ellipse 32% 22% at 9% 2%, rgba(255, 255, 255, .04), transparent 70%),
    linear-gradient(rgba(2, 3, 4, .86), rgba(2, 3, 4, .94)) !important;
}
.view { color: var(--wb-text); }

body :where(h1, h2, h3, h4, h5, h6, strong, b) { color: var(--wb-text); }
body :where(p, small, label, legend, figcaption) { color: var(--wb-text-secondary); }
body :where(input, textarea, select, button) { font: inherit; font-variant-numeric: tabular-nums; }
body ::placeholder { color: var(--wb-text-disabled) !important; opacity: 1; }

/* Navigation and top chrome stay paper-thin and neutral. */
.sidebar,
.sidebar:hover,
.sidebar:focus-within,
.sidebar.sidebar-hold-open,
.sidebar.sidebar-force-closed,
.sidebar.sidebar-force-closed:hover,
.sidebar.sidebar-force-closed:focus-within {
  border-color: rgba(224, 232, 228, .16) !important;
  background-color: rgba(5, 7, 8, .82) !important;
  background-image:
    radial-gradient(ellipse 88% 22% at 0 0, rgba(255, 255, 255, .08), transparent 68%),
    linear-gradient(155deg, rgba(255, 255, 255, .025), transparent 46%) !important;
  box-shadow: 12px 0 40px rgba(0, 0, 0, .28), inset -1px 0 rgba(255, 255, 255, .035) !important;
  backdrop-filter: blur(22px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(110%) !important;
}
.clause-brand-mark {
  border: 1px solid rgba(244, 248, 246, .36) !important;
  color: var(--wb-text) !important;
  background: rgba(255, 255, 255, .07) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .13) !important;
}
.clause-brand-copy strong { color: var(--wb-text); }
.clause-brand-copy small { color: var(--wb-text-disabled); }
.sidebar .nav-item,
.sidebar:hover .nav-item,
.sidebar:focus-within .nav-item,
.sidebar.sidebar-hold-open .nav-item,
.sidebar.sidebar-force-closed .nav-item {
  color: var(--wb-text-secondary) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.sidebar .nav-item:hover { color: #fff !important; background: rgba(255, 255, 255, .055) !important; }
.sidebar .nav-item.active {
  color: #fff !important;
  border-color: rgba(244, 248, 246, .28) !important;
  background: rgba(255, 255, 255, .075) !important;
  box-shadow: inset 2px 0 rgba(244, 248, 246, .64) !important;
}
.sidebar .nav-item.active::after {
  content: "";
  position: absolute;
  right: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wb-green);
  box-shadow: 0 0 8px rgba(23, 217, 122, .34);
}
.sidebar .nav-icon { color: rgba(244, 247, 245, .72) !important; stroke-linecap: round; stroke-linejoin: round; }
.sidebar .nav-item:hover .nav-icon, .sidebar .nav-item.active .nav-icon { color: #fff !important; }

.topbar, .topbar.dashboard-topbar {
  border-bottom: 1px solid rgba(224, 232, 228, .14) !important;
  color: var(--wb-text);
  background-color: rgba(7, 9, 10, .76) !important;
  background-image: linear-gradient(110deg, rgba(255, 255, 255, .045), transparent 32%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055) !important;
  backdrop-filter: blur(22px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(110%) !important;
}
.topbar .current-user-badge { color: var(--wb-text-secondary) !important; }

/* Shared thin-glass surfaces. */
:where(
  .glow-card, .report-card, .metric-card, .modal-card, .performance-modal-card,
  .followup-modal-card, .attendance-modal-card, .salary-modal-card,
  .settings-glow-card, .system-panel, .tax-panel, .pending-invoice-panel,
  .patient-center-card, .patient-info-card, .patient-list-card,
  .inventory-module-card, .expense-bento-card, .mf-card, .salary-card,
  .schedule-board-card, .schedule-date-picker, .clinic-card
) {
  border: 1px solid var(--wb-border) !important;
  border-right-color: rgba(224, 232, 228, .14) !important;
  border-bottom-color: rgba(224, 232, 228, .13) !important;
  color: var(--wb-text);
  background-color: var(--wb-glass) !important;
  background-image:
    radial-gradient(ellipse 54% 18% at 4% -3%, rgba(255, 255, 255, .12), transparent 72%),
    radial-gradient(ellipse 58% 28% at 106% 108%, rgba(255, 255, 255, .085), transparent 70%),
    linear-gradient(138deg, rgba(255, 255, 255, .035), transparent 46%) !important;
  box-shadow: var(--wb-panel-shadow) !important;
  backdrop-filter: blur(22px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(110%) !important;
}
:where(.glow-card, .report-card, .metric-card, .settings-glow-card, .clinic-card):hover {
  border-color: rgba(244, 248, 246, .40) !important;
  background-color: rgba(18, 21, 22, .78) !important;
  box-shadow: 0 26px 66px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}

/* Inputs, searches, date fields and selectors. */
body :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select),
body :where(.search, [class$="-trigger"], [class*="date-trigger"], [class*="select-trigger"]) {
  border: 1px solid rgba(224, 232, 228, .20) !important;
  border-radius: 12px !important;
  color: var(--wb-text) !important;
  background-color: rgba(255, 255, 255, .042) !important;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .045), transparent 44%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .075) !important;
  transition: color 150ms var(--wb-ease), border-color 150ms var(--wb-ease), background 150ms var(--wb-ease), box-shadow 150ms var(--wb-ease) !important;
}
body :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):hover,
body :where(.search, [class$="-trigger"], [class*="date-trigger"], [class*="select-trigger"]):hover {
  border-color: rgba(244, 248, 246, .38) !important;
  background-color: rgba(255, 255, 255, .065) !important;
}
body :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus,
body :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select):focus-visible,
body :where(.search, [class$="-trigger"], [class*="date-trigger"], [class*="select-trigger"]):focus-visible {
  border-color: var(--wb-border-strong) !important;
  outline: 2px solid rgba(244, 248, 246, .80) !important;
  outline-offset: 2px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .09) !important;
}
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--wb-green); }
body :where(input, textarea, select, button):disabled { color: var(--wb-text-disabled) !important; opacity: .36; cursor: not-allowed; }

/* Buttons remain neutral; green is a locator, never a large fill. */
body :where(
  .primary-btn, .save-btn, .report-primary-btn, .neon-button-solid,
  .top-new-patient, .calendar-today-btn, .dashboard-calendar-today,
  [class*="confirm-btn"], [class*="submit-btn"]
) {
  border: 1px solid rgba(244, 248, 246, .40) !important;
  border-radius: 12px !important;
  color: var(--wb-text) !important;
  background-color: rgba(255, 255, 255, .085) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .025)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .14) !important;
  text-shadow: none !important;
  transition: transform 100ms var(--wb-ease), color 150ms var(--wb-ease), border-color 150ms var(--wb-ease), background 150ms var(--wb-ease) !important;
}
body :where(
  .light-btn, .report-secondary-btn, .icon-btn, .square-btn, .back-btn,
  .primary-line, .plain-arrow, .board-setting, [class*="close"]
) {
  border-color: rgba(224, 232, 228, .20) !important;
  border-radius: 12px !important;
  color: var(--wb-text-secondary) !important;
  background-color: rgba(255, 255, 255, .038) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 48%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065) !important;
}
body :where(button, [role="button"]):hover { color: #fff; }
body :where(.primary-btn, .save-btn, .report-primary-btn, .light-btn, .report-secondary-btn, .icon-btn, .square-btn):hover {
  border-color: rgba(244, 248, 246, .58) !important;
  background-color: rgba(255, 255, 255, .10) !important;
}
body :where(button, [role="button"]):active { transform: translateY(1px) !important; transition-duration: 100ms !important; }
body :where(.danger, [class*="delete"], [data-action*="删除"]) { color: var(--wb-danger) !important; border-color: rgba(255, 81, 77, .34) !important; background-color: rgba(255, 81, 77, .035) !important; }

/* Tabs: neutral hover, tiny emerald active underline only. */
body :where(.schedule-tabs, .visit-tabs, .performance-tabs, .booking-side-tabs) {
  border-color: rgba(224, 232, 228, .13) !important;
  color: var(--wb-text-secondary);
  background-color: rgba(10, 12, 13, .64) !important;
  background-image: linear-gradient(110deg, rgba(255, 255, 255, .035), transparent 32%) !important;
}
body :where(.visit-tabs, .performance-tabs, .booking-side-tabs) button,
body .schedule-tabs > button {
  color: var(--wb-text-secondary) !important;
  background: transparent !important;
}
body :where(.visit-tabs, .performance-tabs, .booking-side-tabs) button:hover,
body .schedule-tabs > button:hover { color: #fff !important; background: rgba(255, 255, 255, .035) !important; }
body :where(.visit-tabs, .performance-tabs, .booking-side-tabs) button.active,
body .schedule-tabs > button.active {
  color: #fff !important;
  border-bottom-color: var(--wb-green) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Tables and dense lists. */
body :where(.dense-table-wrap, .performance-table-wrap, .login-log-table-wrap, .patient-bill-detail-table) {
  border: 1px solid var(--wb-border) !important;
  border-radius: 18px !important;
  background-color: var(--wb-glass) !important;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .045), transparent 28%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 20px 48px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(20px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(108%) !important;
}
body table { color: var(--wb-text-secondary); background: transparent !important; }
body table :where(th, td) { border-color: rgba(224, 232, 228, .095) !important; }
body table th {
  color: rgba(244, 247, 245, .62) !important;
  background-color: rgba(255, 255, 255, .045) !important;
  background-image: linear-gradient(110deg, rgba(255, 255, 255, .035), transparent 45%) !important;
}
body table td { color: var(--wb-text-secondary) !important; background-color: rgba(7, 9, 10, .72) !important; }
body table tbody tr:hover td { color: var(--wb-text) !important; background-color: rgba(255, 255, 255, .055) !important; }
body table tbody tr.selected td { background-color: rgba(255, 255, 255, .075) !important; box-shadow: inset 2px 0 var(--wb-green); }
body table .empty, body table td.empty { color: var(--wb-text-disabled) !important; }

/* Floating layers, dropdowns and popovers. */
:where(
  .global-search-dropdown, .calendar-dropdown, .patient-search-dropdown,
  [class$="-select-menu"], [class*="-dropdown"], [class*="-popover"]
):not(.hidden) {
  border: 1px solid rgba(244, 248, 246, .28) !important;
  border-radius: 14px !important;
  color: var(--wb-text);
  background-color: var(--wb-glass-raised) !important;
  background-image:
    radial-gradient(ellipse 60% 24% at 4% -2%, rgba(255, 255, 255, .12), transparent 72%),
    linear-gradient(140deg, rgba(255, 255, 255, .035), transparent 48%) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .11) !important;
  backdrop-filter: blur(24px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(110%) !important;
}
:where(.global-search-dropdown, .calendar-dropdown, .patient-search-dropdown, [class$="-select-menu"]) button {
  color: var(--wb-text-secondary) !important;
  background: transparent !important;
}
:where(.global-search-dropdown, .calendar-dropdown, .patient-search-dropdown, [class$="-select-menu"]) button:hover,
:where(.global-search-dropdown, .calendar-dropdown, .patient-search-dropdown, [class$="-select-menu"]) button.active {
  color: #fff !important;
  background: rgba(255, 255, 255, .065) !important;
}
:where(.global-search-dropdown, .calendar-dropdown, .patient-search-dropdown, [class$="-select-menu"]) button.active { box-shadow: inset 2px 0 var(--wb-green); }

/* Modal and toast layers. */
:where(.modal, .attendance-modal, .people-employee-modal, .salary-modal, .wage-modal, .system-confirm-modal) {
  background: rgba(0, 0, 0, .66) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}
:where(.modal-card, .performance-modal-card, .followup-modal-card, .attendance-modal-card, .salary-modal-card) {
  border-radius: 20px !important;
  box-shadow: var(--wb-modal-shadow) !important;
}
:where(.modal-card, .performance-modal-card, .followup-modal-card, .attendance-modal-card, .salary-modal-card)
  :where(header, .modal-head, footer) {
  border-color: rgba(224, 232, 228, .12) !important;
  color: var(--wb-text);
  background-color: rgba(255, 255, 255, .025) !important;
  background-image: linear-gradient(110deg, rgba(255, 255, 255, .05), transparent 34%) !important;
}
.success-toast {
  border: 1px solid rgba(244, 248, 246, .30) !important;
  border-radius: 12px !important;
  color: var(--wb-text) !important;
  background-color: var(--wb-glass-raised) !important;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .08), transparent 46%) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(20px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(108%) !important;
}
.success-toast::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--wb-green); }

/* Restrained badges and states. */
body :where([class*="badge"], [class*="status"], [class*="chip"]) {
  border-color: rgba(224, 232, 228, .18) !important;
  color: var(--wb-text-secondary);
  background-color: rgba(255, 255, 255, .045) !important;
  box-shadow: none !important;
}
body :where(.success, [class*="completed"], [class*="charged"], [class*="recorded"]) { color: var(--wb-green-soft) !important; }
body :where(.warning, [class*="pending"], [class*="waiting"]) { color: var(--wb-warning) !important; }
body :where(.error, .failed, [class*="cancelled"], [class*="debt"]) { color: var(--wb-danger) !important; }

/* Existing SVGs keep their geometry; normalize optical weight and terminals. */
body svg:not(.icon-sprite) { stroke-linecap: round; stroke-linejoin: round; }
body :where(.nav-icon, button svg, .icon-btn svg) { width: 24px; height: 24px; }
body button:hover svg { color: #fff; }

/* One global motion language. */
body :where(button, input, textarea, select, [role="button"], .glow-card, .report-card, .modal-card, [class*="dropdown"], [class*="popover"]) {
  transition-timing-function: var(--wb-ease) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :where(.glow-card, .report-card, .metric-card, .modal-card, .performance-modal-card, .settings-glow-card, .tax-panel),
  :where(.global-search-dropdown, .calendar-dropdown, [class$="-select-menu"]) { background-color: #111415 !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :where(.sidebar, .topbar, .glow-card, .report-card, .metric-card, .modal-card, .performance-modal-card, .settings-glow-card, .tax-panel),
  :where(.global-search-dropdown, .calendar-dropdown, [class$="-select-menu"]) {
    background-image: none !important;
    background-color: #111415 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after { animation-duration: 0ms !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* Printing remains functional and intentionally ignores the dark glass theme. */
@media print {
  html, body, .main, .view { color: #111 !important; background: #fff !important; background-image: none !important; }
  :where(.modal-card, .performance-modal-card, .report-card, .glow-card, .dense-table-wrap) {
    color: #111 !important;
    border-color: #bbb !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  body table { color: #111 !important; background: #fff !important; }
  body table :where(th, td) { color: #111 !important; border-color: #ccc !important; background: #fff !important; }
}

/* Authentication and legacy white workspaces join the same neutral theme. */
.login-screen {
  color: var(--wb-text) !important;
  background-color: rgba(2, 3, 4, .94) !important;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .05) .5px, transparent .7px) !important;
  background-size: 18px 18px !important;
}
.login-illustration-panel, .login-form-panel {
  border-color: rgba(224, 232, 228, .12) !important;
  background-color: transparent !important;
  background-image: none !important;
}
.login-card {
  border: 1px solid var(--wb-border) !important;
  border-right-color: rgba(224, 232, 228, .14) !important;
  border-bottom-color: rgba(224, 232, 228, .13) !important;
  color: var(--wb-text) !important;
  background-color: var(--wb-glass) !important;
  background-image:
    radial-gradient(ellipse 62% 22% at 4% -2%, rgba(255, 255, 255, .13), transparent 72%),
    linear-gradient(138deg, rgba(255, 255, 255, .035), transparent 48%) !important;
  box-shadow: var(--wb-modal-shadow) !important;
  backdrop-filter: blur(24px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(108%) !important;
}
.login-card h2 { color: var(--wb-text) !important; }
.login-card :where(p, label, .login-session-note) { color: var(--wb-text-secondary) !important; }
.login-link, #loginPasswordToggle { color: var(--wb-text-secondary) !important; background: transparent !important; }
.login-character-stage, .login-character { filter: grayscale(1) saturate(0) contrast(.92); }
.login-brand-chip, .login-mobile-brand { color: var(--wb-text) !important; filter: grayscale(1); }
.login-panel-footer span { color: var(--wb-text-secondary) !important; border-color: var(--wb-border) !important; background: rgba(255, 255, 255, .035) !important; }

:where(.booking-layout, .booking-left, .booking-center, .performance-content, .expense-content, .system-layout, .patient-layout) {
  color: var(--wb-text);
  border-color: rgba(224, 232, 228, .10) !important;
  background-color: var(--wb-canvas-soft) !important;
  background-image: none !important;
}
.view :where(h1, h2, h3, h4, h5, h6, strong, b) { color: var(--wb-text) !important; }
.view :where(p, small, label, legend, figcaption) { color: var(--wb-text-secondary) !important; }

/* Schedule event colors become neutral glass with semantic pin accents. */
:where(.schedule-chip, .appointment-chip, [class*="schedule-event"], [class*="appointment-event"]) {
  border: 1px solid rgba(224, 232, 228, .22) !important;
  color: var(--wb-text) !important;
  background-color: rgba(24, 27, 29, .80) !important;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .075), transparent 42%) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .10) !important;
}
:where(.schedule-chip, .appointment-chip, [class*="schedule-event"], [class*="appointment-event"])::before {
  background: var(--wb-warning) !important;
}

/* Remove legacy large accent fills that have higher selector specificity. */
body .topbar.dashboard-topbar .top-new-patient,
body .topbar .top-new-patient,
#dashboard #refreshDashboardToday,
#dashboard .primary-btn,
#dashboard .neon-button,
#schedule .schedule-tabs .primary-line {
  color: var(--wb-text) !important;
  border-color: rgba(244, 248, 246, .38) !important;
  background-color: rgba(255, 255, 255, .075) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .12) !important;
}

/* Appointment calendar: compact toolbar trigger with a floating date picker. */
#schedule .schedule-tabs {
  position: relative;
  overflow: visible;
}

#schedule .schedule-date-menu {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

#schedule .schedule-date-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 174px;
  height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(244, 248, 246, .24);
  border-radius: 12px;
  color: var(--wb-text);
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px rgba(255, 255, 255, .09);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

#schedule .schedule-date-trigger svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

#schedule .schedule-date-trigger-caret {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 150ms var(--wb-ease);
}

#schedule .schedule-date-trigger[aria-expanded="true"] {
  border-color: rgba(244, 248, 246, .52);
  background: rgba(255, 255, 255, .10);
}

#schedule .schedule-date-trigger:hover {
  border-color: rgba(244, 248, 246, .42);
  background: rgba(255, 255, 255, .085);
}

#schedule .schedule-date-trigger[aria-expanded="true"] .schedule-date-trigger-caret {
  transform: translateY(2px) rotate(225deg);
}

#schedule .schedule-date-popover {
  position: absolute;
  z-index: 45;
  top: calc(100% + 8px);
  left: 0;
  width: 386px;
}

#schedule .schedule-date-popover.hidden {
  display: none;
}

#schedule .schedule-date-popover .schedule-date-picker {
  min-height: 0;
  margin: 0;
}

#schedule .booking-layout {
  grid-template-columns: minmax(560px, 1fr);
}

#schedule .booking-center {
  grid-column: 1;
}

#schedule .booking-layout.schedule-form-open {
  grid-template-columns: minmax(0, 1fr) 600px;
}

#schedule .booking-layout.schedule-form-open .booking-center {
  grid-column: 1;
}

#schedule .booking-layout.schedule-form-open .booking-form-panel {
  grid-column: 2;
}

@media (max-width: 1160px) {
  #schedule .booking-layout,
  #schedule .booking-layout.schedule-form-open {
    grid-template-columns: minmax(520px, 1fr);
  }

  #schedule .booking-layout.schedule-form-open .booking-form-panel {
    position: absolute;
    left: auto;
    width: min(760px, 92%);
  }
}

@media (max-width: 720px) {
  #schedule .schedule-date-trigger {
    min-width: 0;
  }

  #schedule .schedule-date-popover {
    position: fixed;
    top: 76px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}
#dashboard .queue-card:first-child {
  border-color: rgba(244, 248, 246, .30) !important;
  background-color: var(--wb-glass) !important;
  background-image:
    radial-gradient(ellipse 54% 18% at 4% -3%, rgba(255, 255, 255, .12), transparent 72%),
    radial-gradient(ellipse 58% 28% at 106% 108%, rgba(255, 255, 255, .085), transparent 70%),
    linear-gradient(138deg, rgba(255, 255, 255, .035), transparent 46%) !important;
  box-shadow: var(--wb-panel-shadow) !important;
}
#dashboard .queue-card:first-child::after { color: var(--wb-text-secondary); background: rgba(255, 255, 255, .045); }
#dashboard .queue-card:first-child .dashboard-stat-index {
  color: var(--wb-text) !important;
  border-color: rgba(244, 248, 246, .24) !important;
  background: rgba(255, 255, 255, .055) !important;
}
#dashboard .date-box span {
  color: #07100b !important;
  border-color: var(--wb-green) !important;
  background: var(--wb-green) !important;
  box-shadow: none !important;
}

/* Dashboard right rail: keep the compact layout, replace legacy thick grey tiles. */
#dashboard .dashboard-clause-rail .work-card {
  overflow: hidden;
  padding: 18px !important;
  border: 1px solid rgba(244, 248, 246, .25) !important;
  border-right-color: rgba(224, 232, 228, .12) !important;
  border-bottom-color: rgba(224, 232, 228, .11) !important;
  border-radius: 20px !important;
  background-color: rgba(14, 17, 18, .62) !important;
  background-image:
    radial-gradient(ellipse 76% 25% at 3% -4%, rgba(255, 255, 255, .14), transparent 72%),
    linear-gradient(137deg, rgba(255, 255, 255, .035), transparent 43%) !important;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .09) !important;
  backdrop-filter: blur(22px) saturate(106%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(106%) !important;
}
#dashboard .dashboard-clause-rail .work-card:hover { transform: none; }
#dashboard .dashboard-clause-rail .work-card h2 {
  position: relative;
  min-height: 34px;
  margin: 0 0 14px !important;
  color: var(--wb-text) !important;
  font-size: 18px !important;
  font-weight: 620 !important;
  letter-spacing: -.02em;
}
#dashboard .dashboard-clause-rail .work-card h2::after {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border: 1px solid rgba(244, 248, 246, .28);
  color: var(--wb-text-secondary) !important;
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08) !important;
  font-size: 10px;
  font-weight: 650;
}
#dashboard .dashboard-clause-rail .work-card h2::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 3px;
  z-index: 1;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--wb-green);
  box-shadow: 0 0 8px rgba(23, 217, 122, .42);
}
#dashboard .dashboard-clause-rail .work-revenue-eye {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(244, 248, 246, .13) !important;
  border-radius: 10px;
  color: var(--wb-text-disabled) !important;
  background: rgba(255, 255, 255, .025) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .045) !important;
}
#dashboard .dashboard-clause-rail .work-revenue-eye:hover,
#dashboard .dashboard-clause-rail .work-revenue-eye.visible {
  color: #fff !important;
  border-color: rgba(244, 248, 246, .28) !important;
  background: rgba(255, 255, 255, .06) !important;
}
#dashboard .dashboard-clause-rail .mini-stats { gap: 10px !important; }
#dashboard .dashboard-clause-rail .mini-stats .mini-stat-card {
  isolation: isolate;
  overflow: hidden;
  min-height: 86px;
  padding: 15px 16px !important;
  border: 1px solid rgba(244, 248, 246, .17) !important;
  border-right-color: rgba(224, 232, 228, .09) !important;
  border-bottom-color: rgba(224, 232, 228, .08) !important;
  border-radius: 14px !important;
  background-color: rgba(24, 27, 29, .34) !important;
  background-image:
    radial-gradient(ellipse 72% 35% at 2% -8%, rgba(255, 255, 255, .11), transparent 72%),
    radial-gradient(ellipse 58% 42% at 108% 112%, rgba(255, 255, 255, .055), transparent 70%),
    linear-gradient(142deg, rgba(255, 255, 255, .022), transparent 48%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 8px 22px rgba(0, 0, 0, .13) !important;
  backdrop-filter: blur(14px) saturate(104%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(104%) !important;
}
#dashboard .dashboard-clause-rail .mini-stats .mini-stat-card::before {
  top: 18px;
  left: 10px;
  width: 4px;
  height: 4px;
  background: rgba(244, 247, 245, .54) !important;
  box-shadow: none !important;
}
#dashboard .dashboard-clause-rail .mini-stats .mini-stat-card:nth-child(2)::before,
#dashboard .dashboard-clause-rail .mini-stats .mini-stat-card:nth-child(3)::before {
  background: var(--wb-warning) !important;
  box-shadow: 0 0 7px rgba(242, 167, 45, .28) !important;
}
#dashboard .dashboard-clause-rail .mini-stats .mini-stat-card:hover,
#dashboard .dashboard-clause-rail .mini-stats .mini-stat-card:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(244, 248, 246, .30) !important;
  background-color: rgba(255, 255, 255, .055) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .10), 0 12px 26px rgba(0, 0, 0, .20) !important;
}
#dashboard .dashboard-clause-rail .mini-stats span {
  padding-left: 8px;
  color: var(--wb-text-secondary) !important;
  font-size: 13px !important;
  font-weight: 560 !important;
}
#dashboard .dashboard-clause-rail .mini-stats b {
  color: var(--wb-text) !important;
  font-size: 23px !important;
  font-weight: 620 !important;
  letter-spacing: -.03em;
}
#dashboard .dashboard-clause-rail .mini-stats .dashboard-work-action-card small {
  margin-top: 6px;
  color: var(--wb-text-secondary) !important;
  font-size: 11px;
}
#dashboard .dashboard-clause-rail .mini-stats .dashboard-work-action-card::after {
  border-color: rgba(244, 248, 246, .56) !important;
}
#dashboard .dashboard-clause-rail .denture-mini-stat .neon-button {
  width: 32px;
  height: 32px;
  border-radius: 10px !important;
  color: var(--wb-text) !important;
  border-color: rgba(244, 248, 246, .22) !important;
  background: rgba(255, 255, 255, .055) !important;
}

@media (prefers-reduced-transparency: reduce) {
  #dashboard .dashboard-clause-rail .work-card { background-color: #111415 !important; }
  #dashboard .dashboard-clause-rail .mini-stats .mini-stat-card { background-color: #171a1b !important; }
}

/* Signed-in account lives at the bottom of the navigation, without a version footer. */
.sidebar .system-version { display: none !important; }
.sidebar-account-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  min-height: 62px;
  margin: 12px 12px 14px;
  padding: 10px;
  border: 1px solid rgba(244, 248, 246, .21);
  border-right-color: rgba(224, 232, 228, .11);
  border-bottom-color: rgba(224, 232, 228, .10);
  border-radius: 15px;
  color: var(--wb-text);
  background-color: rgba(14, 17, 18, .62);
  background-image: radial-gradient(ellipse 70% 34% at 3% -6%, rgba(255, 255, 255, .13), transparent 72%), linear-gradient(138deg, rgba(255, 255, 255, .03), transparent 48%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(20px) saturate(106%);
  -webkit-backdrop-filter: blur(20px) saturate(106%);
}
.sidebar-account-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(244, 248, 246, .24);
  border-radius: 50%;
  color: rgba(244, 247, 245, .82);
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px rgba(255, 255, 255, .10);
}
.sidebar-account-avatar svg { width: 22px !important; height: 22px !important; }
.sidebar-account-avatar i {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 7px;
  height: 7px;
  border: 2px solid #0b0d0e;
  border-radius: 50%;
  background: var(--wb-green);
  box-shadow: 0 0 8px rgba(23, 217, 122, .38);
}
.sidebar-account-card .current-user-badge {
  display: block !important;
  min-width: 0;
  overflow: hidden;
  color: var(--wb-text) !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 580;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: normal;
}
.sidebar-account-card .sidebar-account-logout {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(244, 248, 246, .13);
  border-radius: 10px;
  color: var(--wb-text-disabled);
  background: rgba(255, 255, 255, .025);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
  cursor: pointer;
  transition: color 150ms var(--wb-ease), border-color 150ms var(--wb-ease), background-color 150ms var(--wb-ease), transform 150ms var(--wb-ease);
}
.sidebar-account-card .sidebar-account-logout svg { width: 18px !important; height: 18px !important; }
.sidebar-account-card .sidebar-account-logout:hover {
  color: var(--wb-danger);
  border-color: rgba(255, 81, 77, .34);
  background: rgba(255, 81, 77, .045);
}
.sidebar-account-card .sidebar-account-logout:active { transform: translateY(1px); }
.sidebar-account-card .sidebar-account-logout:focus-visible { outline: 2px solid rgba(244, 248, 246, .66); outline-offset: 2px; }

@media (min-width: 901px) { .sidebar-account-card { margin-top: auto; } }
@media (max-width: 900px) { .sidebar-account-card { width: calc(100% - 20px); margin: auto 10px 12px; } }
@media (prefers-reduced-transparency: reduce) {
  .sidebar-account-card { background-color: #111415; background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Financial hub: monthly expense and income/expense reports share one sidebar entry. */
.finance-hub-cards {
  grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
  gap: 16px;
  padding: 14px 0 20px;
}
#billing > .finance-hub-cards { display: none; }
#billing.expense-only > .finance-hub-cards { display: grid; }
#billing.expense-only { padding-top: 0 !important; }
#billing.expense-only > .finance-hub-cards,
#monthlyFinance > .finance-hub-cards { max-width: 1900px; margin: 0 auto; }
.finance-hub-card {
  min-height: 104px;
  padding: 19px 21px;
  border-color: rgba(244, 248, 246, .18) !important;
  color: var(--wb-text);
  background-color: rgba(14, 17, 18, .58) !important;
  background-image: radial-gradient(ellipse 70% 40% at 3% -8%, rgba(255, 255, 255, .12), transparent 72%), linear-gradient(138deg, rgba(255, 255, 255, .028), transparent 48%) !important;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .07) !important;
}
.finance-hub-card::before {
  content: "";
  position: absolute;
  left: 20px;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--wb-green);
  box-shadow: 0 0 8px rgba(23, 217, 122, .28);
  transition: width 160ms var(--wb-ease);
}
.finance-hub-card.active {
  border-color: rgba(244, 248, 246, .31) !important;
  background-color: rgba(24, 27, 29, .68) !important;
}
.finance-hub-card.active::before { width: 34px; }
.finance-hub-card > span { color: var(--wb-green) !important; font-size: 11px; letter-spacing: .08em; }
.finance-hub-card > strong { color: var(--wb-text) !important; font-size: 20px; font-weight: 620; }
.finance-hub-card > small { color: var(--wb-text-secondary) !important; }
.finance-hub-card:hover { transform: translateY(-2px); border-color: rgba(244, 248, 246, .30) !important; }
.monthly-finance-view > .mf-header { margin-top: 0; }

@media (max-width: 720px) {
  .finance-hub-cards { grid-template-columns: 1fr !important; }
}

/* WenXiBuddy source effect: local pointer light only; no breathing or magnetism. */
.sidebar .nav-item {
  --pointer-x: 30%;
  --pointer-y: 50%;
  transform: none !important;
  animation: none !important;
}
.sidebar .nav-item:hover,
.sidebar .nav-item:focus-visible {
  color: #fff !important;
  border-color: rgba(238, 247, 253, .20) !important;
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, .15), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .022)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .17), 0 10px 24px rgba(0, 0, 0, .28) !important;
  transform: none !important;
  animation: none !important;
}
.sidebar .nav-item.active {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, .15), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .022)) !important;
}
.sidebar .nav-item.active:hover,
.sidebar .nav-item.active:focus-visible {
  border-color: rgba(238, 247, 253, .22) !important;
  box-shadow: inset 2px 0 rgba(244, 248, 246, .76), inset 0 1px rgba(255, 255, 255, .17), 0 10px 24px rgba(0, 0, 0, .28) !important;
}

/* Restore dashboard task actions hidden by a legacy visual-only override. */
#dashboard .dashboard-task-summary-actions {
  position: relative;
  z-index: 2;
  display: flex !important;
  flex: 0 1 254px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  margin: 0 46px 0 auto;
}
#dashboard .dashboard-task-summary-actions button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(244, 248, 246, .20) !important;
  border-radius: 10px;
  color: var(--wb-text-secondary) !important;
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06) !important;
}
#dashboard .dashboard-task-summary-actions button:hover,
#dashboard .dashboard-task-summary-actions button:focus-visible {
  color: #fff !important;
  border-color: rgba(244, 248, 246, .36) !important;
  background: rgba(255, 255, 255, .085) !important;
}
#dashboard .dashboard-task-summary-actions [data-task-summary-action="assign"]::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--wb-green);
  box-shadow: 0 0 7px rgba(23, 217, 122, .34);
}
#dashboard .queue-card::after { display: none !important; content: none !important; }
@media (max-width: 900px) {
  #dashboard .dashboard-task-summary { flex-wrap: wrap; }
  #dashboard .dashboard-task-summary-actions {
    flex: 1 0 100%;
    justify-content: flex-start;
    margin: 2px 0 0 52px;
  }
}
@media (max-width: 560px) {
  #dashboard .dashboard-task-summary-actions { margin-left: 0; }
  #dashboard .dashboard-task-summary-actions button { flex: 1 1 auto; }
}

/* Task summary controls sit in one full-width row below the card content. */
#dashboard .dashboard-task-summary {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  align-items: center;
  column-gap: 14px;
  row-gap: 14px;
}
#dashboard .dashboard-task-summary-actions {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  max-width: none;
  margin: 0 !important;
}
#dashboard .dashboard-task-summary-actions button {
  width: 100%;
  min-width: 0;
  white-space: nowrap;
}

/* Dashboard search and patient creation follow the board settings control. */
.topbar.dashboard-topbar { display: none !important; }
#dashboard .visit-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: auto;
  min-height: 72px;
  padding: 10px 14px;
}
#dashboard .visit-tabs > button { flex: 0 0 auto; height: 50px; }
#dashboard .dashboard-visit-actions {
  display: flex;
  flex: 0 1 780px;
  width: min(78vw, 780px);
  min-width: 280px;
  margin-inline: auto;
}
#dashboard .dashboard-visit-actions .top-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 46px;
}
#dashboard .dashboard-visit-actions .global-search-box {
  display: flex !important;
  flex: 1 1 520px;
  width: auto;
  min-width: 220px;
  max-width: 620px;
}
#dashboard .dashboard-visit-actions .top-new-patient:not(.permission-hidden) {
  display: inline-flex !important;
  flex: 0 0 auto;
  min-height: 46px;
  white-space: nowrap;
}
@media (max-width: 980px) {
  #dashboard .visit-tabs { flex-wrap: wrap; }
  #dashboard .dashboard-visit-actions { flex-basis: 100%; margin-left: 0; }
  #dashboard .dashboard-visit-actions .global-search-box { max-width: none; }
}
@media (max-width: 560px) {
  #dashboard .dashboard-visit-actions .top-actions { align-items: stretch; flex-direction: column; }
  #dashboard .dashboard-visit-actions .global-search-box { flex-basis: auto; width: 100%; min-width: 0; }
  #dashboard .dashboard-visit-actions .top-new-patient { width: 100%; }
}

/* Dashboard toolbar: retain date navigation and board settings only. */
#dashboard .visit-tools .board-search,
#dashboard .visit-tools .visit-select,
#dashboard .visit-tools .visit-select + .system-card-select,
#dashboard .visit-tools .visit-select-trigger,
#dashboard #refreshDashboardToday {
  display: none !important;
}
#dashboard .visit-tools {
  flex-wrap: nowrap;
  min-height: 72px;
}
#dashboard .visit-tools .date-box {
  flex: 0 0 270px;
  width: 270px;
  min-width: 270px;
}
#dashboard .visit-tools .date-box input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 0 16px;
}
#dashboard .visit-tools .visit-first-summary,
#dashboard .visit-tools .visit-today-summary,
#dashboard .visit-tools .board-setting {
  flex: 0 0 auto;
  min-height: 48px;
  padding-inline: 20px;
  border: 1px solid rgba(224, 232, 228, .20);
  border-radius: 14px;
  color: var(--wb-text-secondary);
  background: rgba(255, 255, 255, .038);
  white-space: nowrap;
}
#dashboard .visit-tools .visit-first-summary {
  margin-left: auto;
  color: var(--wb-text-secondary) !important;
}
#dashboard .visit-tools .visit-today-summary {
  color: var(--wb-text) !important;
  border-bottom-color: var(--wb-green);
}
#dashboard .visit-tools .settings {
  margin-left: 0;
}

/* Right-rail patient actions sit directly above Today's Work. */
#dashboard .dashboard-clause-rail > .dashboard-visit-actions {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0 0 14px;
}
#dashboard .dashboard-clause-rail > .dashboard-visit-actions .top-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-width: 0;
}
#dashboard .dashboard-clause-rail .global-search-box {
  position: static;
  display: flex !important;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 54px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid rgba(224, 232, 228, .20) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .038) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065) !important;
}
#dashboard .dashboard-clause-rail .global-search-box input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: var(--wb-text) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
#dashboard .dashboard-clause-rail .global-search-box input:focus,
#dashboard .dashboard-clause-rail .global-search-box input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
#dashboard .dashboard-clause-rail .global-search-box:focus-within {
  border-color: rgba(244, 248, 246, .48) !important;
  box-shadow: 0 0 0 2px rgba(244, 248, 246, .08), inset 0 1px rgba(255, 255, 255, .10) !important;
}
#dashboard .dashboard-clause-rail .top-new-patient:not(.permission-hidden) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 116px;
  min-height: 54px;
  padding-inline: 16px;
  white-space: nowrap;
}
#dashboard .dashboard-clause-rail .global-search-dropdown {
  position: static;
  inset: auto;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  box-sizing: border-box;
}
#dashboard .dashboard-clause-rail .global-search-head,
#dashboard .dashboard-clause-rail .global-search-foot,
#dashboard .dashboard-clause-rail .global-search-result-list,
#dashboard .dashboard-clause-rail .global-search-result {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#dashboard .dashboard-clause-rail .global-search-head {
  padding-inline: 14px;
}
#dashboard .dashboard-clause-rail .global-search-head label {
  display: none;
}
#dashboard .dashboard-clause-rail .global-search-head,
#dashboard .dashboard-clause-rail .global-search-foot {
  display: none !important;
}
#dashboard .dashboard-clause-rail .global-search-dropdown {
  padding: 8px;
}
#dashboard .dashboard-clause-rail .global-search-result-list {
  padding: 0;
}
#dashboard .dashboard-clause-rail .global-search-result:last-child {
  margin-bottom: 0;
}
#dashboard .dashboard-clause-rail .global-search-result {
  grid-template-columns: 38px minmax(0, 1fr);
  padding: 14px;
}
#dashboard .dashboard-clause-rail .global-search-result-main,
#dashboard .dashboard-clause-rail .global-search-result-main > span {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
#dashboard .dashboard-clause-rail .global-search-result-main i {
  margin-inline: 7px;
}
#dashboard .dashboard-clause-rail .global-search-result > em {
  display: none;
}
@media (max-width: 1180px) {
  #dashboard .dashboard-clause-rail > .dashboard-visit-actions .top-actions {
    grid-template-columns: 1fr;
  }
  #dashboard .dashboard-clause-rail .top-new-patient:not(.permission-hidden) {
    width: 100%;
  }
}

/* FINAL SKIN OVERRIDES — kept last so legacy page themes cannot repaint light surfaces. */
#system.view.active,
#denture.view.active,
#inventory.view.active,
#billing.view.active,
#wageSettlement.wage-view.active,
#patients.view.active,
#communicationVideos.view.active {
  color: #f7faf8 !important;
  background-color: #020304 !important;
  background-image: none !important;
}

/* Unified category and hero cards: thin neutral glass with a restrained corner reflection. */
body :where(
  #system .settings-category-card,
  #denture .settings-category-card,
  #billing .finance-hub-card,
  #billing .performance-hero,
  #billing .expense-hero,
  #wageSettlement .wage-hero
) {
  color: #f7faf8 !important;
  border: 1px solid rgba(244, 248, 246, .20) !important;
  border-radius: 18px !important;
  background-color: rgba(13, 16, 17, .58) !important;
  background-image:
    radial-gradient(ellipse 42% 82% at 0% 0%, rgba(255, 255, 255, .11), transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 50%) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .20), inset 0 1px rgba(255, 255, 255, .085) !important;
  -webkit-backdrop-filter: blur(18px) saturate(108%) !important;
  backdrop-filter: blur(18px) saturate(108%) !important;
}
body :where(
  #system .settings-category-card,
  #denture .settings-category-card,
  #billing .finance-hub-card,
  #billing .performance-hero,
  #billing .expense-hero,
  #wageSettlement .wage-hero
)::before,
body :where(
  #system .settings-category-card,
  #denture .settings-category-card,
  #billing .finance-hub-card,
  #billing .performance-hero,
  #billing .expense-hero,
  #wageSettlement .wage-hero
)::after {
  opacity: .18 !important;
  filter: blur(56px) !important;
}

/* Consistent readable type hierarchy on dark glass. */
body :where(#system, #denture, #inventory, #billing, #wageSettlement, #patients, #communicationVideos)
  :where(h1, h2, h3, h4, strong, b) {
  color: #f8fbf9 !important;
  opacity: 1 !important;
}
body :where(#system, #denture, #inventory, #billing, #wageSettlement, #patients, #communicationVideos)
  :where(p, label, td, span) {
  color: rgba(248, 251, 249, .80) !important;
  opacity: 1 !important;
}
body :where(#system, #denture, #inventory, #billing, #wageSettlement, #patients, #communicationVideos)
  :where(small, em) {
  color: rgba(248, 251, 249, .60) !important;
  opacity: 1 !important;
}

/* Wage table must never inherit legacy white/grey zebra or calculated-row fills. */
#wageSettlement .wage-table tbody tr,
#wageSettlement .wage-table tbody tr:nth-child(even),
#wageSettlement .wage-table tbody tr:nth-child(odd),
#wageSettlement .wage-table tbody tr.selected,
#wageSettlement .wage-table tbody tr.calculated {
  color: #f7faf8 !important;
  background: transparent !important;
}
#wageSettlement .wage-table tbody tr td,
#wageSettlement .wage-table tbody tr:nth-child(even) td,
#wageSettlement .wage-table tbody tr:nth-child(odd) td,
#wageSettlement .wage-table tbody tr.selected td,
#wageSettlement .wage-table tbody tr.calculated td,
#wageSettlement .wage-table td.calculated {
  color: #f7faf8 !important;
  border-color: rgba(244, 248, 246, .075) !important;
  background-color: rgba(7, 9, 10, .54) !important;
  background-image: none !important;
  box-shadow: none !important;
}
#wageSettlement .wage-table tbody tr:hover td,
#wageSettlement .wage-table tbody tr.selected:hover td {
  background-color: rgba(255, 255, 255, .065) !important;
}

/* Patient console and filters: remove remaining pale panels and input tiles. */
#patients .patients-console,
#patients .patients-console-menu,
#patients .patients-filter-panel,
#patients .patients-list-workspace,
#patients .patients-querybar,
#patients .patients-card-list-wrap {
  color: #f7faf8 !important;
  border-color: rgba(244, 248, 246, .16) !important;
  background-color: rgba(10, 13, 14, .48) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 48%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065) !important;
}
#patients .patients-querybar :where(input, select),
#patients .patients-filter-panel :where(input, select),
#patients .system-card-select-trigger {
  color: #f7faf8 !important;
  border: 1px solid rgba(244, 248, 246, .18) !important;
  background-color: rgba(255, 255, 255, .045) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .04), transparent 50%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065) !important;
}
#patients .patients-querybar :where(input, textarea)::placeholder {
  color: rgba(248, 251, 249, .46) !important;
  opacity: 1 !important;
}
#patients .patients-filter-tabs button,
#patients .patients-filter-list button,
#patients .patients-console-menu button {
  color: rgba(248, 251, 249, .78) !important;
  background-color: transparent !important;
  background-image: none !important;
}
#patients :where(.patients-filter-tabs, .patients-filter-list, .patients-console-menu) button.active {
  color: #fff !important;
  background-color: rgba(255, 255, 255, .07) !important;
  box-shadow: inset 3px 0 #17d97a !important;
}

/* Settings, denture and inventory inner surfaces follow the same glass recipe. */
body :where(
  #system .settings-console, #system .settings-layout, #system .settings-menu, #system .settings-content, #system .system-panel,
  #denture .settings-console, #denture .settings-layout, #denture .settings-menu, #denture .settings-content,
  #inventory .settings-console, #inventory .settings-layout, #inventory .settings-menu, #inventory .settings-content,
  #denture .denture-module-shell > *, #inventory .inventory-module-shell > *
) {
  color: #f7faf8 !important;
  border-color: rgba(244, 248, 246, .16) !important;
  background-color: rgba(11, 14, 15, .50) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 48%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065) !important;
}

/* Appointment board time axis: dark sticky gutter with readable time labels. */
#schedule .time-board .time-label,
.schedule-board-card .time-board .time-label {
  color: rgba(248, 251, 249, .72) !important;
  border-right-color: rgba(244, 248, 246, .14) !important;
  border-bottom-color: rgba(244, 248, 246, .09) !important;
  background-color: rgba(10, 13, 14, .96) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 58%) !important;
  box-shadow: 8px 0 18px rgba(0, 0, 0, .18) !important;
  opacity: 1 !important;
}
#schedule .time-board .time-label strong,
.schedule-board-card .time-board .time-label strong {
  color: #f4f7f5 !important;
  font-variant-numeric: tabular-nums;
  opacity: 1 !important;
  text-shadow: 0 1px 8px rgba(255, 255, 255, .08);
}
#schedule .week-head > span,
.schedule-board-card .week-head > span {
  border-right-color: rgba(244, 248, 246, .14) !important;
  background-color: rgba(10, 13, 14, .92) !important;
  background-image: none !important;
}

/* Appointment cards need a distinct glass layer above the dark schedule grid. */
#schedule .time-board .schedule-chip,
.schedule-board-card .time-board .schedule-chip,
#schedule .time-board .schedule-chip.normal,
#schedule .time-board .schedule-chip.pending,
#schedule .time-board .schedule-chip.in-treatment {
  border: 1px solid rgba(244, 248, 246, .36) !important;
  background-color: rgba(39, 43, 44, .90) !important;
  background-image:
    radial-gradient(ellipse 76% 34% at 8% 0%, rgba(255, 255, 255, .16), transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018) 52%, transparent) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, .42),
    inset 0 1px rgba(255, 255, 255, .15),
    inset 0 0 0 1px rgba(255, 255, 255, .025) !important;
  -webkit-backdrop-filter: blur(16px) saturate(108%) !important;
  backdrop-filter: blur(16px) saturate(108%) !important;
}
#schedule .time-board .schedule-chip :where(strong, time, b),
.schedule-board-card .time-board .schedule-chip :where(strong, time, b) {
  color: #f7faf8 !important;
  opacity: 1 !important;
  text-shadow: 0 1px 7px rgba(0, 0, 0, .65);
}
#schedule .time-board .schedule-chip small,
.schedule-board-card .time-board .schedule-chip small {
  color: rgba(247, 250, 248, .72) !important;
  opacity: 1 !important;
}
#schedule .time-board .schedule-chip:hover,
.schedule-board-card .time-board .schedule-chip:hover {
  border-color: rgba(255, 255, 255, .52) !important;
  background-color: rgba(48, 52, 53, .94) !important;
  box-shadow: 0 15px 32px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .20) !important;
}

/* Unified thin-glass confirmation layer — visual only; existing IDs/events stay intact. */
:where(
  .system-confirm-modal, .supplier-delete-modal, .cancel-appointment-modal,
  .move-appointment-modal, .duplicate-appointment-modal, .delete-record-modal,
  .treatment-phrase-action-modal, .prescription-option-confirm-modal
) {
  background-color: rgba(0, 0, 0, .72) !important;
  background-image: radial-gradient(ellipse 55% 45% at 50% 42%, rgba(255, 255, 255, .025), transparent 72%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(92%) !important;
  backdrop-filter: blur(14px) saturate(92%) !important;
}
:where(
  .system-confirm-modal .supplier-delete-card,
  .supplier-delete-modal .supplier-delete-card,
  .cancel-appointment-card, .move-appointment-card, .duplicate-appointment-card,
  .treatment-phrase-action-card, .prescription-option-confirm-card
) {
  overflow: hidden !important;
  color: #f4f7f5 !important;
  border: 1px solid rgba(244, 248, 246, .48) !important;
  border-radius: 22px !important;
  background-color: rgba(18, 21, 22, .76) !important;
  background-image:
    radial-gradient(ellipse 62% 48% at 4% 0%, rgba(255, 255, 255, .15), transparent 72%),
    radial-gradient(ellipse 28% 44% at 100% 100%, rgba(255, 255, 255, .10), transparent 78%),
    linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 52%) !important;
  box-shadow:
    0 30px 78px rgba(0, 0, 0, .58),
    inset 0 1px rgba(255, 255, 255, .18),
    inset -1px -1px rgba(255, 255, 255, .07) !important;
  -webkit-backdrop-filter: blur(28px) saturate(108%) !important;
  backdrop-filter: blur(28px) saturate(108%) !important;
}

/* Crisp silver-white rim from the reference, kept to a physically thin 1px edge. */
:where(
  .system-confirm-modal .supplier-delete-card,
  .supplier-delete-modal .supplier-delete-card,
  .cancel-appointment-card, .move-appointment-card, .duplicate-appointment-card,
  .treatment-phrase-action-card, .prescription-option-confirm-card
) {
  border-color: rgba(255, 255, 255, .82) !important;
  box-shadow:
    0 30px 78px rgba(0, 0, 0, .62),
    0 0 20px rgba(255, 255, 255, .055),
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    inset 0 1px rgba(255, 255, 255, .24),
    inset -1px -1px rgba(255, 255, 255, .12) !important;
}

/* Optical glass depth: soft milk-white reflection and concentrated edge light. */
:where(
  .system-confirm-modal .supplier-delete-card,
  .supplier-delete-modal .supplier-delete-card,
  .cancel-appointment-card, .move-appointment-card, .duplicate-appointment-card,
  .treatment-phrase-action-card, .prescription-option-confirm-card
) {
  position: relative !important;
  isolation: isolate;
  background-color: rgba(27, 30, 32, .66) !important;
  background-image:
    radial-gradient(ellipse 58% 76% at -4% -8%, rgba(255, 255, 255, .26), rgba(255, 255, 255, .075) 38%, transparent 72%),
    radial-gradient(ellipse 38% 56% at 103% 108%, rgba(255, 255, 255, .20), rgba(255, 255, 255, .04) 48%, transparent 76%),
    linear-gradient(118deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .018) 38%, rgba(0, 0, 0, .08) 68%, rgba(255, 255, 255, .035)) !important;
}
:where(
  .system-confirm-modal .supplier-delete-card,
  .supplier-delete-modal .supplier-delete-card,
  .cancel-appointment-card, .move-appointment-card, .duplicate-appointment-card,
  .treatment-phrase-action-card, .prescription-option-confirm-card
)::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .13), transparent 22%, transparent 72%, rgba(255, 255, 255, .055)),
    radial-gradient(ellipse 36% 16% at 13% 0%, rgba(255, 255, 255, .16), transparent 74%);
  mix-blend-mode: screen;
  opacity: .76;
}
:where(
  .system-confirm-modal .supplier-delete-card,
  .supplier-delete-modal .supplier-delete-card,
  .cancel-appointment-card, .move-appointment-card, .duplicate-appointment-card,
  .treatment-phrase-action-card, .prescription-option-confirm-card
)::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -8%;
  bottom: -24%;
  width: 48%;
  height: 62%;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, .20);
  filter: blur(42px);
  opacity: .56;
}
:where(
  .system-confirm-modal .supplier-delete-card,
  .supplier-delete-modal .supplier-delete-card,
  .cancel-appointment-card, .move-appointment-card, .duplicate-appointment-card,
  .treatment-phrase-action-card, .prescription-option-confirm-card
) > * {
  position: relative;
  z-index: 1;
}

/* FLOATING LAYERS ONLY — WenXiBuddy ultra-thin white-light glass. */
:where(
  .global-search-dropdown, .calendar-dropdown, .patient-search-dropdown,
  .schedule-detail-popover, .schedule-popover-card, .schedule-action-menu,
  .charge-tooth-popover, .treatment-tooth-popover, .diagnosis-tooth-popover,
  .treatment-phrase-popover, .expense-month-popover, .mf-month-popover,
  .salary-month-popover, .finance-range-popover, .performance-datetime-popover,
  .expense-form-date-popover, .denture-delivery-date-popover,
  .dashboard-task-datetime-popover, .system-card-select-menu,
  .patient-card-select-menu, .expense-card-select-menu, .salary-card-select-menu,
  .tax-custom-select-menu
) {
  color: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(224, 232, 228, .20) !important;
  background-color: rgba(255, 255, 255, .09) !important;
  background-image:
    radial-gradient(ellipse 54% 26% at 2% 0%, rgba(255, 255, 255, .105), transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 48%) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(104%) !important;
  backdrop-filter: blur(20px) saturate(104%) !important;
}
:where(
  .global-search-dropdown, .calendar-dropdown, .patient-search-dropdown,
  .schedule-detail-popover, .schedule-action-menu,
  .charge-tooth-popover, .treatment-tooth-popover, .diagnosis-tooth-popover,
  .treatment-phrase-popover, [class$="-select-menu"]
):not(.hidden):not([hidden]) {
  animation: wbThinGlassFloatIn 140ms cubic-bezier(.2,.8,.2,1) both !important;
}
@keyframes wbThinGlassFloatIn {
  from { opacity: 0; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}
:where(
  .global-search-dropdown, .calendar-dropdown, .patient-search-dropdown,
  .schedule-popover-card, .schedule-action-menu, .charge-tooth-popover,
  .treatment-tooth-popover, .diagnosis-tooth-popover, .treatment-phrase-popover,
  .expense-month-popover, .mf-month-popover, .salary-month-popover,
  .finance-range-popover, .performance-datetime-popover, .expense-form-date-popover,
  .denture-delivery-date-popover, .dashboard-task-datetime-popover,
  [class$="-select-menu"]
) :where(h1, h2, h3, h4, strong, b, label) {
  color: rgba(255, 255, 255, .96) !important;
}
:where(
  .global-search-dropdown, .calendar-dropdown, .patient-search-dropdown,
  .schedule-popover-card, .schedule-action-menu, .charge-tooth-popover,
  .treatment-tooth-popover, .diagnosis-tooth-popover, .treatment-phrase-popover,
  .expense-month-popover, .mf-month-popover, .salary-month-popover,
  .finance-range-popover, .performance-datetime-popover, .expense-form-date-popover,
  .denture-delivery-date-popover, .dashboard-task-datetime-popover,
  [class$="-select-menu"]
) :where(p, span, small, em, i) {
  color: rgba(255, 255, 255, .76) !important;
}
:where(
  .calendar-dropdown, .patient-search-dropdown, .schedule-action-menu,
  .treatment-phrase-popover, .expense-month-popover, .mf-month-popover,
  .salary-month-popover, .dashboard-task-datetime-popover,
  [class$="-select-menu"]
) button {
  color: rgba(255, 255, 255, .82) !important;
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transition: color 140ms cubic-bezier(.2,.8,.2,1), background-color 140ms cubic-bezier(.2,.8,.2,1), border-color 140ms cubic-bezier(.2,.8,.2,1) !important;
}
:where(
  .calendar-dropdown, .patient-search-dropdown, .schedule-action-menu,
  .treatment-phrase-popover, .expense-month-popover, .mf-month-popover,
  .salary-month-popover, .dashboard-task-datetime-popover,
  [class$="-select-menu"]
) button:is(:hover, :focus-visible) {
  color: #fff !important;
  outline: none !important;
  background-color: rgba(255, 255, 255, .07) !important;
}
:where(
  .calendar-dropdown, .patient-search-dropdown, .schedule-action-menu,
  .treatment-phrase-popover, .expense-month-popover, .mf-month-popover,
  .salary-month-popover, .dashboard-task-datetime-popover,
  [class$="-select-menu"]
) button:is(.active, .selected, [aria-selected="true"]) {
  color: #fff !important;
  border-color: rgba(23, 217, 122, .42) !important;
  background-color: rgba(255, 255, 255, .055) !important;
  box-shadow: inset 2px 0 #17d97a !important;
}

/* Tooltip and helper bubbles generated from pseudo-elements. */
.cancelled-type-badge::after,
[data-tooltip]::after,
[data-help-text]::after {
  color: rgba(255, 255, 255, .90) !important;
  border: 1px solid rgba(224, 232, 228, .20) !important;
  border-radius: 10px !important;
  background-color: rgba(255, 255, 255, .10) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 52%) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .20), inset 0 1px rgba(255, 255, 255, .07) !important;
  -webkit-backdrop-filter: blur(18px) saturate(104%) !important;
  backdrop-filter: blur(18px) saturate(104%) !important;
}
.cancelled-type-badge::before,
[data-tooltip]::before,
[data-help-text]::before {
  border-width: 8px !important;
  border-top-color: rgba(224, 232, 228, .20) !important;
}

/* Validation hints: neutral glass; warning/error lives only in the icon/text. */
:where(.validation-hint, [class*="validation-hint"], .tax-cost-error, .field-error, .form-error) {
  color: #ff625e !important;
  border: 1px solid rgba(224, 232, 228, .20) !important;
  border-radius: 10px !important;
  padding: 8px 11px;
  background-color: rgba(255, 255, 255, .09) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .045), transparent) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18) !important;
}

/* Confirmation dialogs: override the earlier stronger rim/glow with the scoped spec. */
:where(
  .system-confirm-modal .supplier-delete-card,
  .supplier-delete-modal .supplier-delete-card,
  .cancel-appointment-card, .move-appointment-card, .duplicate-appointment-card,
  .treatment-phrase-action-card, .prescription-option-confirm-card
) {
  border: 1px solid rgba(224, 232, 228, .20) !important;
  background-color: rgba(255, 255, 255, .09) !important;
  background-image:
    radial-gradient(ellipse 56% 34% at 2% 0%, rgba(255, 255, 255, .105), transparent 74%),
    linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 50%) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .08) !important;
  -webkit-backdrop-filter: blur(22px) saturate(104%) !important;
  backdrop-filter: blur(22px) saturate(104%) !important;
  animation: wbConfirmFloatIn 150ms cubic-bezier(.2,.8,.2,1) both !important;
}
@keyframes wbConfirmFloatIn {
  from { opacity: 0; translate: 0 4px; }
  to { opacity: 1; translate: 0 0; }
}
:where(
  .system-confirm-modal .supplier-delete-card,
  .supplier-delete-modal .supplier-delete-card,
  .cancel-appointment-card, .move-appointment-card, .duplicate-appointment-card,
  .treatment-phrase-action-card, .prescription-option-confirm-card
)::before {
  background: linear-gradient(112deg, rgba(255, 255, 255, .07), transparent 24%, transparent 82%) !important;
  opacity: .55 !important;
}
:where(
  .system-confirm-modal .supplier-delete-card,
  .supplier-delete-modal .supplier-delete-card,
  .cancel-appointment-card, .move-appointment-card, .duplicate-appointment-card,
  .treatment-phrase-action-card, .prescription-option-confirm-card
)::after {
  display: none !important;
}
:where(
  .system-confirm-modal, .supplier-delete-modal, .cancel-appointment-modal,
  .move-appointment-modal, .duplicate-appointment-modal, .delete-record-modal,
  .treatment-phrase-action-modal, .prescription-option-confirm-modal
) :where(button, .light-btn, .primary-btn, .save-btn) {
  transition: color 140ms cubic-bezier(.2,.8,.2,1), background-color 140ms cubic-bezier(.2,.8,.2,1), border-color 140ms cubic-bezier(.2,.8,.2,1), translate 140ms cubic-bezier(.2,.8,.2,1) !important;
}
:where(
  .system-confirm-modal, .supplier-delete-modal, .cancel-appointment-modal,
  .move-appointment-modal, .duplicate-appointment-modal, .delete-record-modal,
  .treatment-phrase-action-modal, .prescription-option-confirm-modal
) :where(button, .light-btn, .primary-btn, .save-btn):hover {
  filter: brightness(1.10);
  translate: 0 -1px;
}
:where(
  .system-confirm-modal, .supplier-delete-modal, .cancel-appointment-modal,
  .move-appointment-modal, .duplicate-appointment-modal, .delete-record-modal,
  .treatment-phrase-action-modal, .prescription-option-confirm-modal
) :where(.light-btn, .primary-btn, .save-btn, button[data-system-confirm-cancel], button[data-system-confirm-ok]) {
  color: rgba(255, 255, 255, .88) !important;
  border: 1px solid rgba(224, 232, 228, .20) !important;
  background-color: rgba(255, 255, 255, .07) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .05), transparent 58%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07) !important;
}
:where(
  .system-confirm-modal, .supplier-delete-modal, .delete-record-modal,
  .treatment-phrase-action-modal, .prescription-option-confirm-modal
) :where(.danger-btn, .save-btn.danger, button[data-system-confirm-ok].danger-btn) {
  color: #ff625e !important;
  border-color: rgba(255, 81, 77, .28) !important;
  background-color: rgba(255, 255, 255, .045) !important;
}
@media (prefers-reduced-motion: reduce) {
  :where(.modal-card, [class*="-popover"], [class*="-dropdown"], [class$="-select-menu"]) { animation: none !important; }
}

/* LOGIN THEME RESTORE — authentication keeps its original light/blue identity. */
.login-screen {
  color: #172033 !important;
  background-color: #f8fafc !important;
  background-image: none !important;
  background-size: auto !important;
}
.login-illustration-panel {
  color: #fff !important;
  border-color: transparent !important;
  background-color: #2563eb !important;
  background-image:
    radial-gradient(circle at 72% 22%, rgba(255, 255, 255, .20), transparent 24%),
    radial-gradient(circle at 22% 78%, rgba(255, 255, 255, .14), transparent 28%),
    linear-gradient(135deg, #0ea5e9 0%, #2563eb 54%, #6d28d9 100%) !important;
}
.login-illustration-panel::before {
  opacity: .16 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .38) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
}
.login-form-panel {
  border-color: transparent !important;
  background-color: #f8fafc !important;
  background-image: radial-gradient(circle at 78% 24%, rgba(14, 165, 233, .12), transparent 26%) !important;
}
.login-card {
  color: #172033 !important;
  border: 1px solid rgba(203, 213, 225, .74) !important;
  background-color: rgba(255, 255, 255, .82) !important;
  background-image: none !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .14) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  backdrop-filter: blur(18px) !important;
}
.login-card h2 { color: #16202c !important; }
.login-card :where(p, .login-hint) { color: #677487 !important; }
.login-card :where(label, .login-session-note) { color: #2e3947 !important; }
.login-card input,
.login-card input:is(:hover, :focus) {
  color: #172033 !important;
  border: 1px solid #d7e0ea !important;
  background-color: rgba(255, 255, 255, .94) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* System theme sync: appointment form, communication videos and tax center. */
#schedule .booking-form-panel {
  color: var(--wb-text) !important;
  border-color: rgba(224, 232, 228, .14) !important;
  background-color: #080a0b !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 42%) !important;
  box-shadow: -18px 0 46px rgba(0, 0, 0, .34) !important;
}
#schedule .booking-form-panel :where(.form-panel-head, .inline-appointment-form section, .inline-actions) {
  color: var(--wb-text) !important;
  border-color: rgba(244, 248, 246, .18) !important;
  background-color: rgba(18, 21, 22, .82) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 48%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .075), 0 12px 30px rgba(0, 0, 0, .18) !important;
}
#schedule .booking-form-panel :where(h3, h4, strong) { color: #f7faf8 !important; }
#schedule .booking-form-panel :where(label, p, span) { color: rgba(247, 250, 248, .72) !important; }
#schedule .booking-form-panel :where(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .appointment-card-select-trigger, .appointment-card-date-trigger
) {
  color: #f7faf8 !important;
  border-color: rgba(244, 248, 246, .18) !important;
  background-color: rgba(255, 255, 255, .045) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 60%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055) !important;
}
#schedule .booking-form-panel :where(input, textarea)::placeholder { color: rgba(247, 250, 248, .38) !important; }
#schedule .booking-form-panel :where(
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .appointment-card-select-trigger, .appointment-card-date-trigger
):focus,
#schedule .booking-form-panel :where(.appointment-card-select-picker, .appointment-card-date-picker).open > :where(.appointment-card-select-trigger, .appointment-card-date-trigger) {
  border-color: rgba(244, 248, 246, .38) !important;
  background-color: rgba(255, 255, 255, .075) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .045), inset 0 1px rgba(255, 255, 255, .08) !important;
}
#schedule .booking-form-panel :where(
  .appointment-card-select-menu, .appointment-card-calendar, .patient-search-dropdown
) {
  color: var(--wb-text) !important;
  border-color: rgba(244, 248, 246, .22) !important;
  background-color: rgba(24, 27, 29, .96) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 54%) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .08) !important;
}
#schedule .booking-form-panel :where(.appointment-card-select-menu button, .appointment-calendar-day, .patient-search-option) {
  color: rgba(247, 250, 248, .78) !important;
  background-color: transparent !important;
  background-image: none !important;
}
#schedule .booking-form-panel :where(.appointment-card-select-menu button, .appointment-calendar-day, .patient-search-option):hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, .07) !important;
}
#schedule .booking-form-panel .appointment-calendar-day.selected,
#schedule .booking-form-panel .appointment-card-select-menu button[aria-selected="true"] {
  color: #07120e !important;
  border-color: var(--wb-green) !important;
  background: var(--wb-green) !important;
  box-shadow: none !important;
}
#schedule .booking-form-panel :where(.type-toggle, .project-search span, .appointment-card-date-trigger i) {
  color: rgba(247, 250, 248, .72) !important;
  border-color: rgba(244, 248, 246, .16) !important;
  background: rgba(255, 255, 255, .04) !important;
}
#schedule .booking-form-panel .type-toggle label:has(input:checked) {
  color: #07120e !important;
  background: var(--wb-green) !important;
  box-shadow: none !important;
}
#schedule .booking-form-panel .project-groups label:hover { color: #fff !important; }
#schedule .booking-form-panel input:is([type="checkbox"], [type="radio"]) { accent-color: var(--wb-green) !important; }

#communicationVideos .communication-video-item,
#communicationVideos .communication-video-item-modal,
#communicationVideos .communication-video-meta,
#communicationVideos .communication-video-item-modal .communication-video-meta {
  color: var(--wb-text) !important;
  border-color: rgba(244, 248, 246, .18) !important;
  background-color: rgba(18, 21, 22, .88) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 52%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065), 0 12px 28px rgba(0, 0, 0, .24) !important;
}
#communicationVideos .communication-video-meta strong { color: #f7faf8 !important; }
#communicationVideos .communication-video-meta small { color: rgba(247, 250, 248, .58) !important; }
.communication-video-upload-modal > section,
.communication-video-upload-modal :where(header, form, footer) {
  color: var(--wb-text) !important;
  border-color: rgba(244, 248, 246, .16) !important;
  background-color: rgba(18, 21, 22, .96) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 52%) !important;
}
.communication-video-upload-modal :where(h2, label) { color: #f7faf8 !important; }
.communication-video-upload-modal :where(p, small) { color: rgba(247, 250, 248, .62) !important; }
.communication-video-upload-modal :where(input, select, .communication-video-file-field) {
  color: #f7faf8 !important;
  border-color: rgba(244, 248, 246, .18) !important;
  background: rgba(255, 255, 255, .045) !important;
}

#taxCenter.view.active {
  color: var(--wb-text) !important;
  background-color: var(--wb-canvas) !important;
  background-image: none !important;
}
#taxCenter :where(
  .tax-toolbar, .tax-rule-panel, .tax-panel, .tax-summary article,
  .tax-rule-grid article, .tax-source-grid article, .tax-inventory-adjustment-kpis article,
  .tax-breakdown div, .dense-table-wrap
) {
  color: var(--wb-text) !important;
  border-color: rgba(244, 248, 246, .18) !important;
  background-color: rgba(15, 18, 19, .76) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .04), transparent 52%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065) !important;
}
#taxCenter :where(h2, h3, h4, strong, b) { color: #f7faf8 !important; opacity: 1 !important; }
#taxCenter :where(p, label, span, small) { color: rgba(247, 250, 248, .66) !important; opacity: 1 !important; }
#taxCenter :where(input, select, .tax-custom-select-button) {
  color: #f7faf8 !important;
  border-color: rgba(244, 248, 246, .18) !important;
  background-color: rgba(255, 255, 255, .045) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055) !important;
}
#taxCenter :where(.tax-period-tip, .tax-refresh-hint) {
  color: rgba(247, 250, 248, .74) !important;
  border-left-color: var(--wb-green) !important;
  background: rgba(255, 255, 255, .045) !important;
}
#taxCenter .tax-breakdown { background: rgba(244, 248, 246, .12) !important; }
#taxCenter .tax-total-payable {
  border-color: rgba(244, 248, 246, .30) !important;
  background-color: rgba(255, 255, 255, .075) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .075), transparent 55%) !important;
}
#taxCenter .tax-total-payable b { color: #f7faf8 !important; }
#taxCenter table :where(th, td) {
  color: rgba(247, 250, 248, .76) !important;
  border-color: rgba(244, 248, 246, .10) !important;
  background-color: rgba(10, 12, 13, .72) !important;
}
#taxCenter table th { color: rgba(247, 250, 248, .60) !important; background-color: rgba(255, 255, 255, .04) !important; }

@media (prefers-reduced-transparency: reduce) {
  #schedule .booking-form-panel,
  #schedule .booking-form-panel :where(.form-panel-head, .inline-appointment-form section, .inline-actions),
  #communicationVideos .communication-video-item,
  #taxCenter :where(.tax-toolbar, .tax-rule-panel, .tax-panel, .tax-summary article) {
    background-image: none !important;
    background-color: #111415 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* SETTINGS — remove remaining light legacy surfaces without changing structure. */
#system :where(
  .system-list-row, .salary-card, .salary-template-grid section,
  .permission-form, .login-log-summary span, .login-log-table-wrap,
  .medical-region-summary span, .print-template-card,
  .print-config-tree, .print-config-main, .print-config-filters,
  .print-config-table-wrap
) {
  color: #f4f7f5 !important;
  border-color: rgba(244, 248, 246, .15) !important;
  background-color: rgba(255, 255, 255, .035) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .045), transparent 60%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055) !important;
}
#system .settings-content .settings-glow-card .system-list-row,
#system :where([data-settings-panel="charge-projects"], [data-settings-panel="charge-combos"], [data-settings-panel="prescription-admin"]) .system-list-row {
  color: rgba(247, 250, 248, .84) !important;
  border-color: rgba(244, 248, 246, .14) !important;
  background: rgba(255, 255, 255, .035) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055) !important;
}
#system .settings-content .settings-glow-card .system-list-row:hover {
  color: #fff !important;
  border-color: rgba(244, 248, 246, .26) !important;
  background: rgba(255, 255, 255, .07) !important;
}
#system .system-list-row :where(strong, b) { color: #f7faf8 !important; }
#system .system-list-row small { color: rgba(244, 247, 245, .55) !important; }
#system :where(.salary-card-head h2, .salary-template-grid h3, .print-template-card h3,
  .print-config-tree-title, .medical-region-summary strong, .login-log-summary strong) {
  color: #f7faf8 !important;
}
#system :where(.salary-card-head p, .salary-filter-grid label, .salary-template-grid label,
  .print-template-card-meta, .login-log-filters label) {
  color: rgba(244, 247, 245, .62) !important;
}
#system :where(.salary-filter-grid input, .salary-filter-grid select, .salary-template-grid input,
  .permission-form input, .permission-form select, .login-log-filters input,
  .login-log-filters select, .print-template-toolbar input, .print-template-toolbar select,
  .print-config-filters input, .print-config-filters select) {
  color: #f4f7f5 !important;
  border-color: rgba(244, 248, 246, .17) !important;
  background: rgba(255, 255, 255, .04) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05) !important;
}
#system :where(.permission-form input, .salary-filter-grid input, .salary-template-grid input,
  .login-log-filters input, .print-template-toolbar input, .print-config-filters input)::placeholder {
  color: rgba(244, 247, 245, .36) !important;
}
#system .salary-table { color: #f4f7f5 !important; border-color: rgba(244, 248, 246, .12) !important; background: rgba(5, 8, 9, .50) !important; }
#system .salary-table :where(th, td) { color: rgba(247, 250, 248, .82) !important; border-color: rgba(244, 248, 246, .075) !important; background: transparent !important; }
#system .salary-table thead th { color: rgba(247, 250, 248, .76) !important; background: rgba(255, 255, 255, .055) !important; }
#system .salary-table tbody :where(tr:nth-child(even), tr.salary-unconfigured) { background: rgba(255, 255, 255, .025) !important; }
#system .salary-table tbody tr:nth-child(even) td:nth-child(-n+5),
#system .salary-table tbody tr.salary-unconfigured td:nth-child(-n+5),
#system .salary-table tbody td:nth-child(-n+5),
#system .salary-table tbody td:last-child { background: rgba(9, 12, 13, .92) !important; }
#system .salary-table tbody tr:hover,
#system .salary-table tbody tr:hover td { background: rgba(255, 255, 255, .05) !important; }
#system .salary-warning { color: #f2b85c !important; border: 1px solid rgba(242, 167, 45, .24) !important; background: rgba(242, 167, 45, .07) !important; }
#system .salary-table-wrap::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04) !important; }
#system .salary-table-wrap::-webkit-scrollbar-thumb { border-color: rgba(9, 12, 13, .92) !important; background: rgba(244, 248, 246, .32) !important; }
#system .permission-form label { color: rgba(244, 247, 245, .66) !important; }
#system .login-log-summary span { color: rgba(244, 247, 245, .62) !important; }
#system .login-log-table { color: #f4f7f5 !important; background: transparent !important; }
#system .login-log-table th { color: rgba(247, 250, 248, .74) !important; border-color: rgba(244, 248, 246, .08) !important; background: rgba(255, 255, 255, .05) !important; }
#system .login-log-table td { color: rgba(247, 250, 248, .82) !important; border-color: rgba(244, 248, 246, .07) !important; background: transparent !important; }
#system .login-log-table tbody tr:hover { background: rgba(255, 255, 255, .045) !important; }
#system .medical-region-summary span { color: rgba(244, 247, 245, .65) !important; }
#system .print-template-toolbar { border-color: rgba(244, 248, 246, .10) !important; }
#system .print-template-card-meta span { color: rgba(244, 247, 245, .66) !important; background: rgba(255, 255, 255, .05) !important; }
#system .print-config-tree { border-color: rgba(244, 248, 246, .10) !important; }
#system .print-config-tree-title { background: transparent !important; }
#system .print-config-tree-item { color: rgba(244, 247, 245, .67) !important; background: transparent !important; }
#system .print-config-tree-item:is(:hover, .active) { color: #fff !important; background: rgba(255, 255, 255, .065) !important; box-shadow: inset 2px 0 #17d97a !important; }
#system :where(.print-config-table, .print-config-table th, .print-config-table td) { color: rgba(247, 250, 248, .80) !important; border-color: rgba(244, 248, 246, .08) !important; background: transparent !important; }
#system .print-config-table th { color: rgba(247, 250, 248, .72) !important; background: rgba(255, 255, 255, .05) !important; }

/* SETTINGS / PEOPLE — align the remaining tab strip and employee table. */
#system [data-settings-panel="people-admin"] .permission-admin-tabs {
  color: #f4f7f5 !important;
  border: 1px solid rgba(244, 248, 246, .14) !important;
  background: rgba(255, 255, 255, .028) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055) !important;
}
#system [data-settings-panel="people-admin"] .permission-admin-tabs button {
  color: rgba(244, 247, 245, .64) !important;
  border-color: transparent !important;
  background: transparent !important;
}
#system [data-settings-panel="people-admin"] .permission-admin-tabs button:is(:hover, .active) {
  color: #fff !important;
  border-color: rgba(244, 248, 246, .14) !important;
  background: rgba(255, 255, 255, .065) !important;
  box-shadow: inset 0 -2px #17d97a !important;
}
#system [data-settings-panel="people-admin"] .people-employee-head {
  color: rgba(247, 250, 248, .76) !important;
  border-color: rgba(244, 248, 246, .13) !important;
  background: rgba(255, 255, 255, .05) !important;
}
#system .settings-content .settings-glow-card .people-employee-row {
  color: rgba(247, 250, 248, .84) !important;
  border-color: rgba(244, 248, 246, .12) !important;
  background: rgba(255, 255, 255, .028) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .045) !important;
}
#system .settings-content .settings-glow-card .people-employee-row:hover {
  border-color: rgba(244, 248, 246, .24) !important;
  background: rgba(255, 255, 255, .06) !important;
}
#system [data-settings-panel="people-admin"] :where(.people-role-badge, .people-status) {
  color: rgba(247, 250, 248, .72) !important;
  border: 1px solid rgba(244, 248, 246, .13) !important;
  background: rgba(255, 255, 255, .045) !important;
}
#system [data-settings-panel="people-admin"] .people-status.enabled { color: #65e6a4 !important; }
#system [data-settings-panel="people-admin"] .people-table-wrap::-webkit-scrollbar-track { background: rgba(255, 255, 255, .035) !important; }
#system [data-settings-panel="people-admin"] .people-table-wrap::-webkit-scrollbar-thumb { border-color: rgba(7, 10, 11, .9) !important; background: rgba(244, 248, 246, .30) !important; }

/* FINANCE DATE RANGE — ultra-thin white-light glass floating layer. */
.finance-range-popover {
  color: rgba(247, 250, 248, .88) !important;
  border: 1px solid rgba(244, 248, 246, .22) !important;
  background-color: rgba(14, 17, 18, .82) !important;
  background-image: radial-gradient(ellipse 58% 28% at 2% 0%, rgba(255, 255, 255, .12), transparent 72%), radial-gradient(ellipse 42% 24% at 100% 100%, rgba(255, 255, 255, .06), transparent 74%) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .10) !important;
  -webkit-backdrop-filter: blur(24px) saturate(108%) !important;
  backdrop-filter: blur(24px) saturate(108%) !important;
}
.finance-range-popover .finance-range-selected {
  border: 1px solid rgba(244, 248, 246, .12) !important;
  background: rgba(255, 255, 255, .045) !important;
}
.finance-range-popover .finance-range-selected small { color: rgba(244, 247, 245, .52) !important; }
.finance-range-popover .finance-range-selected strong { color: #f7faf8 !important; }
.finance-range-popover .finance-range-selected i { color: rgba(244, 247, 245, .56) !important; }
.finance-range-popover .finance-range-calendar > header strong { color: #f7faf8 !important; }
.finance-range-popover .finance-range-calendar > header button,
.finance-range-popover > footer button {
  color: rgba(247, 250, 248, .82) !important;
  border: 1px solid rgba(244, 248, 246, .16) !important;
  background: rgba(255, 255, 255, .045) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05) !important;
}
.finance-range-popover .finance-range-calendar > header button:hover,
.finance-range-popover > footer button:hover { color: #fff !important; border-color: rgba(244, 248, 246, .28) !important; background: rgba(255, 255, 255, .085) !important; }
.finance-range-popover .finance-range-week span { color: rgba(244, 247, 245, .52) !important; }
.finance-range-popover .finance-range-days button {
  color: rgba(247, 250, 248, .76) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.finance-range-popover .finance-range-days button:hover { color: #fff !important; border-color: rgba(244, 248, 246, .15) !important; background: rgba(255, 255, 255, .07) !important; }
.finance-range-popover .finance-range-days button.outside { color: rgba(244, 247, 245, .30) !important; }
.finance-range-popover .finance-range-days button.in-range { color: rgba(247, 250, 248, .90) !important; background: rgba(255, 255, 255, .10) !important; }
.finance-range-popover .finance-range-days button.today { color: #fff !important; border-color: rgba(23, 217, 122, .46) !important; }
.finance-range-popover .finance-range-days button.range-start,
.finance-range-popover .finance-range-days button.range-end {
  color: #fff !important;
  border-color: rgba(23, 217, 122, .44) !important;
  background: rgba(23, 217, 122, .18) !important;
  box-shadow: inset 0 0 0 1px rgba(23, 217, 122, .16), 0 5px 16px rgba(0, 0, 0, .18) !important;
}
.finance-range-popover > footer { border-color: rgba(244, 248, 246, .11) !important; }
.finance-range-popover > footer span { color: rgba(244, 247, 245, .55) !important; }
.finance-range-popover > footer button.confirm { color: #101314 !important; border-color: rgba(255, 255, 255, .66) !important; background: rgba(244, 247, 245, .91) !important; }
.finance-range-popover .finance-range-warning { color: #f2b85c !important; border: 1px solid rgba(242, 167, 45, .22) !important; background: rgba(242, 167, 45, .055) !important; }

/* PATIENT CENTER — all tab contents use the same dark thin-glass skin. */
#patientDetail :where(
  .patient-charge-workspace, .patient-charge-overview, .patient-charge-filterbar,
  .patient-charge-metrics, .patient-charge-actions, .patient-charge-ledger,
  .patient-record-page, .patient-record-timeline-shell, .patient-record-timeline-card,
  .patient-image-center, .patient-image-toolbar, .patient-image-content,
  .patient-image-tile, .patient-cbct-row,
  .patient-disposal-panel-head, .patient-disposal-card,
  .patient-followup-panel, .patient-followup-panel-head, .patient-followup-result-card,
  .patient-return-visit-panel, .patient-return-visit-head, .patient-return-visit-card,
  .patient-treatment-plan-panel, .patient-treatment-plan-card,
  .patient-treatment-plan-section, .patient-treatment-consent-document,
  .patient-prescription-panel, .patient-prescription-card,
  .patient-denture-panel, .patient-material-usage-panel,
  .patient-material-usage-table-wrap, .patient-material-usage-empty,
  .patient-info-card
) {
  color: #f4f7f5 !important;
  border-color: rgba(244, 248, 246, .16) !important;
  background-color: rgba(12, 15, 16, .62) !important;
  background-image:
    radial-gradient(ellipse 54% 32% at 2% 0%, rgba(255, 255, 255, .085), transparent 72%),
    radial-gradient(ellipse 46% 28% at 100% 100%, rgba(255, 255, 255, .045), transparent 74%),
    linear-gradient(145deg, rgba(255, 255, 255, .022), transparent 56%) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .075) !important;
  -webkit-backdrop-filter: blur(18px) saturate(108%) !important;
  backdrop-filter: blur(18px) saturate(108%) !important;
}
#patientDetail :where(
  .patient-charge-overview, .patient-charge-filterbar, .patient-charge-metrics,
  .patient-charge-actions, .patient-charge-ledger,
  .patient-image-toolbar, .patient-image-content,
  .patient-treatment-plan-panel, .patient-material-usage-table-wrap
) { border-radius: 18px !important; }
#patientDetail :where(
  .patient-treatment-plan-panel, .patient-material-usage-panel,
  .patient-followup-panel, .patient-return-visit-panel,
  .patient-disposal-panel, .patient-image-center
) > header,
#patientDetail :where(
  .patient-treatment-plan-panel, .patient-material-usage-panel,
  .patient-followup-panel, .patient-return-visit-panel,
  .patient-disposal-card, .patient-image-group, .patient-image-tile
) > header,
#patientDetail :where(
  .patient-disposal-card, .patient-return-visit-card,
  .patient-followup-result-card, .patient-image-tile
) > footer {
  color: #f4f7f5 !important;
  border-color: rgba(244, 248, 246, .10) !important;
  background-color: rgba(255, 255, 255, .025) !important;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, .035), transparent 66%) !important;
}
#patientDetail :where(
  .patient-treatment-plan-panel, .patient-material-usage-panel,
  .patient-followup-panel, .patient-return-visit-panel,
  .patient-disposal-card, .patient-image-center,
  .patient-charge-workspace, .patient-record-page
) :where(h2, h3, h4, strong, b) {
  color: #f7faf8 !important;
  opacity: 1 !important;
}
#patientDetail :where(
  .patient-treatment-plan-panel, .patient-material-usage-panel,
  .patient-followup-panel, .patient-return-visit-panel,
  .patient-disposal-card, .patient-image-center,
  .patient-charge-workspace, .patient-record-page
) :where(p, small, time, label) {
  color: rgba(244, 247, 245, .64) !important;
  opacity: 1 !important;
}
#patientDetail :where(
  .patient-disposal-meta, .patient-disposal-meta > span, .patient-disposal-tooth,
  .patient-disposal-content, .patient-disposal-advice,
  .patient-followup-meta-grid, .patient-followup-result-grid,
  .patient-followup-result-grid > section,
  .patient-return-visit-content, .patient-return-visit-card > footer,
  .patient-treatment-basic-grid, .patient-treatment-choice-section,
  .patient-treatment-fee-detail, .patient-treatment-consents
) {
  color: #f4f7f5 !important;
  border-color: rgba(244, 248, 246, .09) !important;
  background-color: rgba(255, 255, 255, .022) !important;
  background-image: none !important;
}
#patientDetail :where(
  .patient-disposal-meta b, .patient-disposal-tooth b,
  .patient-disposal-content p, .patient-disposal-advice p,
  .patient-followup-meta-grid b, .patient-followup-result-grid p,
  .patient-return-visit-content p, .patient-return-visit-card > footer b
) { color: rgba(247, 250, 248, .84) !important; }
#patientDetail :where(
  .patient-material-usage-table-wrap, .patient-charge-ledger,
  .patient-treatment-compare-table, .patient-denture-table-wrap,
  [class*="patient-"][class*="table-wrap"]
) {
  overflow: auto;
  color: #f4f7f5 !important;
  border: 1px solid rgba(244, 248, 246, .14) !important;
  background-color: rgba(6, 9, 10, .50) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 58%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055) !important;
}
#patientDetail :where(.patient-material-usage-table, .patient-charge-table, .patient-treatment-compare-table) {
  background: transparent !important;
}
#patientDetail :where(.patient-material-usage-table, .patient-charge-table, .patient-treatment-compare-table) th {
  color: rgba(247, 250, 248, .74) !important;
  border-color: rgba(244, 248, 246, .09) !important;
  background: rgba(255, 255, 255, .055) !important;
}
#patientDetail :where(.patient-material-usage-table, .patient-charge-table, .patient-treatment-compare-table) td {
  color: rgba(247, 250, 248, .82) !important;
  border-color: rgba(244, 248, 246, .075) !important;
  background: transparent !important;
}
#patientDetail :where(.patient-material-usage-table, .patient-charge-table, .patient-treatment-compare-table) tbody tr:hover td {
  color: #fff !important;
  background: rgba(255, 255, 255, .045) !important;
}
#patientDetail .patient-material-usage-summary { color: rgba(244, 247, 245, .65) !important; }
#patientDetail .patient-material-usage-summary b { color: #f7faf8 !important; }
#patientDetail .patient-material-item strong { color: #f7faf8 !important; }
#patientDetail .patient-material-item small,
#patientDetail .patient-material-trace,
#patientDetail .patient-material-note { color: rgba(244, 247, 245, .60) !important; }
#patientDetail :where(.patient-material-kind, .patient-material-status,
  .patient-followup-project, .patient-followup-status,
  .patient-return-visit-satisfaction, .linked-treatment-plan-badge) {
  border: 1px solid rgba(244, 248, 246, .15) !important;
  background-color: rgba(255, 255, 255, .045) !important;
  background-image: none !important;
}
#patientDetail :where(.patient-material-status, .patient-followup-status) { color: #65e6a4 !important; }
#patientDetail :where(.patient-material-kind.highValue, .patient-return-visit-satisfaction.neutral) { color: #f2b85c !important; }
#patientDetail :where(.patient-followup-empty, .patient-return-visit-empty,
  .patient-disposal-empty, .patient-material-usage-empty, .patient-image-empty) {
  color: rgba(244, 247, 245, .62) !important;
  border-color: rgba(244, 248, 246, .14) !important;
  background: rgba(255, 255, 255, .018) !important;
}
#patientDetail :where(.patient-followup-empty, .patient-return-visit-empty,
  .patient-disposal-empty, .patient-material-usage-empty, .patient-image-empty) :where(strong, h3) {
  color: rgba(247, 250, 248, .88) !important;
}
.login-card input:focus {
  border-color: #0ea5e9 !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, .12) !important;
}
.login-card input::placeholder { color: #94a3b8 !important; opacity: 1 !important; }
.login-link,
#loginPasswordToggle {
  color: #0284c7 !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.login-submit,
.login-submit:is(:hover, :focus-visible) {
  color: #fff !important;
  border-color: transparent !important;
  background-color: #2563eb !important;
  background-image: linear-gradient(135deg, #0ea5e9, #2563eb 58%, #6d28d9) !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .22) !important;
}
.login-character-stage,
.login-character,
.login-brand-chip,
.login-mobile-brand {
  filter: none !important;
}
.login-brand-chip,
.login-brand-chip b,
.login-panel-footer span { color: rgba(255, 255, 255, .90) !important; }
.login-brand-chip span {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .58) !important;
  background-color: rgba(255, 255, 255, .13) !important;
  background-image: none !important;
}
.login-panel-footer span {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.login-character-purple { background-color: #6c3ff5 !important; }
.login-character-dark { background-color: #252b34 !important; }
.login-character-orange { background-color: #ff9b6b !important; }
.login-character-yellow { background-color: #e8d754 !important; }
.login-eyes i { background-color: #fff !important; }
.login-eyes i::after,
.login-dot-eyes i,
.login-character-yellow em { background-color: #252b34 !important; }
.login-hint {
  color: #677487 !important;
  border-color: #e0f2fe !important;
  background-color: #f3f8fb !important;
}

/* Dashboard task card — high-transmission glass with two directional corner beams. */
#dashboard .queue-card.dashboard-task-summary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(244, 248, 246, .34) !important;
  background-color: rgba(255, 255, 255, .025) !important;
  background-image:
    radial-gradient(ellipse 68% 88% at -8% -18%, rgba(255, 255, 255, .30), rgba(255, 255, 255, .075) 37%, transparent 70%),
    radial-gradient(ellipse 62% 86% at 110% 118%, rgba(255, 255, 255, .27), rgba(255, 255, 255, .065) 38%, transparent 72%),
    linear-gradient(138deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .012) 42%, rgba(0, 0, 0, .035) 66%, rgba(255, 255, 255, .04)) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, .26),
    inset 0 1px rgba(255, 255, 255, .20),
    inset 1px 0 rgba(255, 255, 255, .09),
    inset -1px -1px rgba(255, 255, 255, .11) !important;
  -webkit-backdrop-filter: blur(26px) saturate(112%) contrast(104%) !important;
  backdrop-filter: blur(26px) saturate(112%) contrast(104%) !important;
}
#dashboard .queue-card.dashboard-task-summary::before,
#dashboard .queue-card.dashboard-task-summary::after {
  content: "" !important;
  position: absolute;
  z-index: 0;
  display: block !important;
  width: 58%;
  height: 86%;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(30px);
  mix-blend-mode: screen;
}
#dashboard .queue-card.dashboard-task-summary::before {
  top: -56%;
  left: -22%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .42), rgba(255, 255, 255, .12) 38%, transparent 72%) !important;
  opacity: .78;
}
#dashboard .queue-card.dashboard-task-summary::after {
  right: -23%;
  bottom: -59%;
  color: transparent !important;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .40), rgba(255, 255, 255, .11) 40%, transparent 74%) !important;
  opacity: .74;
}
#dashboard .queue-card.dashboard-task-summary > * {
  position: relative;
  z-index: 1;
}
#dashboard .queue-card.dashboard-task-summary:hover {
  border-color: rgba(255, 255, 255, .46) !important;
  background-color: rgba(255, 255, 255, .04) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .30), inset 0 1px rgba(255, 255, 255, .24), inset -1px -1px rgba(255, 255, 255, .14) !important;
}

/* PATIENT CENTER — follow the system dark ultra-thin glass skin. */
#patientDetail.view,
#patientDetail.view.active {
  --patient-detail-cyan: #17d97a;
  --patient-detail-dark: #f4f7f5;
  --patient-detail-line: rgba(244, 248, 246, .16);
  color: #f4f7f5 !important;
  background-color: #020304 !important;
  background-image:
    radial-gradient(circle at 18% 4%, rgba(255, 255, 255, .025), transparent 28%),
    radial-gradient(circle, rgba(255, 255, 255, .025) .5px, transparent .7px) !important;
  background-size: auto, 18px 18px !important;
}
#patientDetail :where(
  .patient-center-menu, .patient-center-list, .patient-profile-head,
  .patient-detail-tabs, .patient-record-subtabs, .patient-record-search-strip,
  .patient-record-topbar, .patient-record-rangebar, .patient-record-timeline-shell,
  .patient-record-timeline-card, .patient-info-card
) {
  color: #f4f7f5 !important;
  border-color: rgba(244, 248, 246, .16) !important;
  background-color: rgba(12, 15, 16, .60) !important;
  background-image:
    radial-gradient(ellipse 56% 30% at 2% 0%, rgba(255, 255, 255, .09), transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 50%) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .20), inset 0 1px rgba(255, 255, 255, .07) !important;
  -webkit-backdrop-filter: blur(18px) saturate(104%) !important;
  backdrop-filter: blur(18px) saturate(104%) !important;
}
#patientDetail :where(
  .patient-center-menu, .patient-center-list, .patient-profile-head,
  .patient-detail-tabs, .patient-record-subtabs, .patient-record-search-strip,
  .patient-record-topbar, .patient-record-rangebar, .patient-record-timeline-card,
  .patient-info-card
):hover {
  border-color: rgba(244, 248, 246, .24) !important;
  background-color: rgba(17, 20, 21, .66) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .10) !important;
}
#patientDetail :where(
  .patient-center-menu-title, .patient-center-menu-group,
  .patient-profile-main, .patient-profile-meta, .patient-profile-source,
  .patient-info-card > header, .patient-record-head
) {
  color: #f4f7f5 !important;
  border-color: rgba(244, 248, 246, .12) !important;
  background-color: transparent !important;
  background-image: none !important;
}
#patientDetail :where(h1, h2, h3, h4, h5, strong, b, .patient-record-filter-title) {
  color: #f7faf8 !important;
  opacity: 1 !important;
}
#patientDetail :where(p, span, small, label, time, em) {
  color: rgba(244, 247, 245, .66) !important;
  opacity: 1 !important;
}
#patientDetail :where(
  .patient-center-menu-item, .patient-center-menu-group,
  .patient-center-list-tabs button, .patient-center-card,
  .patient-detail-tabs button, .patient-record-subtabs button,
  .patient-record-link-btn
) {
  color: rgba(244, 247, 245, .72) !important;
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
#patientDetail :where(
  .patient-center-menu-item, .patient-center-list-tabs button,
  .patient-center-card, .patient-detail-tabs button,
  .patient-record-subtabs button
):is(:hover, .active) {
  color: #fff !important;
  border-color: rgba(244, 248, 246, .16) !important;
  background-color: rgba(255, 255, 255, .065) !important;
  background-image: linear-gradient(100deg, rgba(255, 255, 255, .07), transparent 72%) !important;
  box-shadow: inset 2px 0 #17d97a, inset 0 1px rgba(255, 255, 255, .06) !important;
}
#patientDetail .patient-center-list-tabs {
  border-bottom: 1px solid rgba(244, 248, 246, .10) !important;
  background-color: rgba(255, 255, 255, .025) !important;
  background-image: none !important;
}
#patientDetail .patient-center-card.active :where(strong, span),
#patientDetail :where(.patient-detail-tabs button.active, .patient-record-subtabs button.active) {
  color: #fff !important;
}
#patientDetail :where(input, select, textarea, .system-card-select-trigger) {
  color: #f4f7f5 !important;
  border: 1px solid rgba(244, 248, 246, .18) !important;
  background-color: rgba(255, 255, 255, .045) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 58%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055) !important;
}
#patientDetail :where(input, textarea)::placeholder {
  color: rgba(244, 247, 245, .38) !important;
  opacity: 1 !important;
}
#patientDetail :where(input, select, textarea):focus {
  outline: none !important;
  color: #fff !important;
  border-color: rgba(244, 248, 246, .34) !important;
  background-color: rgba(255, 255, 255, .065) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .045), inset 0 1px rgba(255, 255, 255, .08) !important;
}
#patientDetail :where(.light-btn, .primary-btn) {
  color: rgba(247, 250, 248, .86) !important;
  border: 1px solid rgba(244, 248, 246, .20) !important;
  background-color: rgba(255, 255, 255, .055) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .055), transparent 60%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07) !important;
}
#patientDetail :where(.light-btn, .primary-btn):hover {
  color: #fff !important;
  border-color: rgba(244, 248, 246, .32) !important;
  background-color: rgba(255, 255, 255, .09) !important;
}
#patientDetail :where(table, thead, tbody, tr, th, td) {
  color: rgba(244, 247, 245, .78) !important;
  border-color: rgba(244, 248, 246, .08) !important;
  background-color: transparent !important;
  background-image: none !important;
}
#patientDetail thead th {
  color: rgba(247, 250, 248, .82) !important;
  background-color: rgba(255, 255, 255, .045) !important;
}
#patientDetail .patient-record-timeline-shell:empty,
#patientDetail .patient-record-timeline-list:empty {
  min-height: 220px;
}
:where(
  .system-confirm-modal .supplier-delete-card,
  .supplier-delete-modal .supplier-delete-card,
  .cancel-appointment-card, .move-appointment-card, .duplicate-appointment-card,
  .treatment-phrase-action-card, .prescription-option-confirm-card
) :where(.modal-head, header, .duplicate-appointment-head, .treatment-phrase-action-head) {
  color: #f4f7f5 !important;
  border-bottom: 1px solid rgba(244, 248, 246, .13) !important;
  background: transparent !important;
}
:where(
  .system-confirm-modal .supplier-delete-card,
  .supplier-delete-modal .supplier-delete-card,
  .cancel-appointment-card, .move-appointment-card, .duplicate-appointment-card,
  .treatment-phrase-action-card, .prescription-option-confirm-card
) :where(h2, strong) {
  color: #f7faf8 !important;
  opacity: 1 !important;
}
:where(
  .system-confirm-modal .supplier-delete-card,
  .supplier-delete-modal .supplier-delete-card,
  .cancel-appointment-card, .move-appointment-card, .duplicate-appointment-card,
  .treatment-phrase-action-card, .prescription-option-confirm-card
) :where(p, span, small, label) {
  color: rgba(244, 247, 245, .68) !important;
  opacity: 1 !important;
}
:where(
  .system-confirm-modal .supplier-delete-body,
  .supplier-delete-modal .supplier-delete-body,
  .cancel-appointment-body, .move-appointment-body,
  .treatment-phrase-action-body, .prescription-option-confirm-body
) {
  color: #f4f7f5 !important;
  background: transparent !important;
}
:where(
  .system-confirm-modal .supplier-delete-actions,
  .supplier-delete-modal .supplier-delete-actions,
  .cancel-appointment-actions, .move-appointment-actions,
  .duplicate-appointment-actions, .treatment-phrase-action-actions,
  .prescription-option-confirm-card footer
) {
  border-top: 1px solid rgba(244, 248, 246, .13) !important;
  background: transparent !important;
}
:where(
  .system-confirm-modal, .supplier-delete-modal, .cancel-appointment-modal,
  .move-appointment-modal, .duplicate-appointment-modal, .delete-record-modal,
  .treatment-phrase-action-modal, .prescription-option-confirm-modal
) :where(.light-btn, button[data-system-confirm-cancel], button[id*="Cancel"], button[id*="cancel"]) {
  color: rgba(247, 250, 248, .82) !important;
  border: 1px solid rgba(244, 248, 246, .22) !important;
  background-color: rgba(255, 255, 255, .025) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055) !important;
}
:where(
  .system-confirm-modal, .supplier-delete-modal, .cancel-appointment-modal,
  .move-appointment-modal, .duplicate-appointment-modal, .delete-record-modal,
  .treatment-phrase-action-modal, .prescription-option-confirm-modal
) :where(.primary-btn, .save-btn, button[data-system-confirm-ok]) {
  color: #101314 !important;
  border: 1px solid rgba(255, 255, 255, .68) !important;
  background-color: rgba(244, 247, 245, .90) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(218, 222, 220, .82)) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24), inset 0 1px #fff !important;
}
:where(
  .system-confirm-modal, .supplier-delete-modal, .delete-record-modal,
  .treatment-phrase-action-modal, .prescription-option-confirm-modal
) :where(.danger-btn, .save-btn.danger, button[data-system-confirm-ok].danger-btn) {
  color: #ff625e !important;
  border-color: rgba(255, 81, 77, .34) !important;
  background-color: rgba(255, 81, 77, .035) !important;
  background-image: linear-gradient(145deg, rgba(255, 255, 255, .035), transparent) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055) !important;
}
:where(
  .system-confirm-modal, .supplier-delete-modal, .cancel-appointment-modal,
  .move-appointment-modal, .duplicate-appointment-modal, .delete-record-modal,
  .treatment-phrase-action-modal, .prescription-option-confirm-modal
) :where(.icon-btn, .plain-close, [aria-label="关闭"]) {
  color: rgba(247, 250, 248, .78) !important;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Schedule grid: keep 15-minute precision with one visible divider per hour. */
#schedule .time-board :where(.time-label, .time-cell) {
  border-bottom: 0 !important;
}
#schedule .time-board :where(.time-label, .time-cell)[data-time$=":45"] {
  border-bottom: 1px solid rgba(244, 248, 246, .14) !important;
}
#schedule .time-board .time-cell:hover,
#schedule .time-board .time-cell.selected-day:hover {
  background-color: rgba(255, 255, 255, .045) !important;
}
#schedule .time-board .time-cell.drag-selected,
#schedule .time-board .time-cell.selected-day.drag-selected {
  background-color: rgba(23, 217, 122, .16) !important;
  background-image: linear-gradient(145deg, rgba(23, 217, 122, .08), transparent 58%) !important;
  box-shadow: inset 0 0 0 1px rgba(101, 230, 164, .62) !important;
}
#schedule .time-board .schedule-chip.drag-preview-chip {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .52) !important;
  background-color: rgba(18, 142, 87, .96) !important;
  background-image:
    radial-gradient(ellipse 74% 38% at 8% 0%, rgba(255, 255, 255, .20), transparent 72%),
    linear-gradient(145deg, rgba(23, 217, 122, .34), rgba(9, 91, 56, .22)) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .20) !important;
}

/* Patient information: two-column details and system-themed family card. */
#patientDetail .patient-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
#patientDetail .family-relation-card {
  color: #f4f7f5 !important;
  border: 1px solid rgba(244, 248, 246, .18) !important;
  background-color: rgba(12, 15, 16, .72) !important;
  background-image:
    radial-gradient(ellipse 56% 30% at 2% 0%, rgba(255, 255, 255, .09), transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, .025), transparent 54%) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .075) !important;
}
#patientDetail .family-relation-card > header {
  color: #f4f7f5 !important;
  border-bottom: 1px solid rgba(244, 248, 246, .12) !important;
  background: transparent !important;
}
#patientDetail .family-relation-card :where(h4, strong, b) { color: #f7faf8 !important; }
#patientDetail .family-relation-card :where(p, small, span) { color: rgba(247, 250, 248, .66) !important; }
#patientDetail .family-relation-empty {
  min-height: 300px;
  color: rgba(247, 250, 248, .62) !important;
  background-color: rgba(255, 255, 255, .018) !important;
  background-image: none !important;
}
#patientDetail .family-empty-illustration {
  opacity: .58;
  filter: grayscale(1) brightness(.8);
}
#patientDetail :where(.patient-relative-table-wrap, .patient-relative-list-item) {
  color: #f4f7f5 !important;
  border-color: rgba(244, 248, 246, .14) !important;
  background-color: rgba(255, 255, 255, .035) !important;
  background-image: none !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .045) !important;
}
#patientDetail .patient-relative-table :where(th, td) {
  color: rgba(247, 250, 248, .74) !important;
  border-color: rgba(244, 248, 246, .10) !important;
  background-color: transparent !important;
}

@media (max-width: 700px) {
  #patientDetail .patient-info-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-transparency: reduce) {
  #patientDetail .family-relation-card {
    background-image: none !important;
    background-color: #111415 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Patient detail is a destination view: remove the duplicated patient-center rails. */
#patientDetail .patient-center-shell {
  grid-template-columns: minmax(0, 1fr) !important;
}
#patientDetail :where(.patient-center-menu, .patient-center-list) {
  display: none !important;
}
#patientDetail .patient-detail-page {
  grid-column: 1 !important;
  width: 100% !important;
}

/* Schedule board day/week mode. */
#schedule .schedule-board-card.schedule-day-mode :where(.week-head, .time-board) {
  grid-template-columns: 78px minmax(0, 1fr) !important;
}
#schedule .mode-switch button {
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
#schedule .mode-switch button.active {
  color: #fff !important;
  background-color: rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 -2px #f4f7f5 !important;
}
#schedule .mode-switch button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid rgba(244, 248, 246, .68);
  outline-offset: -3px;
}

/* Dashboard board switcher and ClauseOS drawer board. */
#dashboard .visit-board { overflow: visible !important; }
#dashboard .dashboard-board-picker { position: relative; flex: 0 0 auto; }
#dashboard .dashboard-board-picker .board-setting { min-width: 142px; }
#dashboard .dashboard-board-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 24;
  display: grid; gap: 4px; width: 220px; padding: 8px;
  border: 1px solid rgba(255,255,255,.10); border-radius: 16px;
  background: rgba(18,21,22,.96);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
}
#dashboard .dashboard-board-menu.hidden { display: none; }
#dashboard .dashboard-board-menu button {
  display: grid; gap: 3px; min-height: 54px; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 10px;
  color: #9ca3af; background: transparent; text-align: left;
}
#dashboard .dashboard-board-menu button span { color: #e5e7eb; font-size: 14px; font-weight: 650; }
#dashboard .dashboard-board-menu button small { color: #6b7280; font-size: 11px; }
#dashboard .dashboard-board-menu button:hover,
#dashboard .dashboard-board-menu button.active { border-color: rgba(0,200,151,.25); background: rgba(0,200,151,.08); }
#dashboard .dashboard-board-menu button.active span { color: #00c897; }

#dashboard .dashboard-drawer-board {
  min-height: 520px; padding: 24px; color: #e5e7eb;
  background: radial-gradient(ellipse 54% 36% at 50% 20%, rgba(0,200,151,.07), transparent 72%), #111318;
}
#dashboard .dashboard-drawer-board.hidden { display: none; }
#dashboard .dashboard-drawer-stage {
  position: relative; display: grid; place-items: center; min-height: 300px;
  perspective: 1200px; overflow: hidden;
}
#dashboard .dashboard-drawer-ring { position: relative; width: min(100%, 980px); height: 250px; transform-style: preserve-3d; }
#dashboard .dashboard-drawer-card {
  position: absolute; left: 50%; top: 28px;
  display: grid; grid-template-columns: 42px minmax(0,1fr); grid-template-rows: auto auto auto;
  align-content: center; gap: 4px 12px;
  width: 230px; min-height: 174px; padding: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18); border-radius: 16px; color: #e5e7eb;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.035)), rgba(18,21,22,.66);
  box-shadow: 0 2px 6px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.16);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  opacity: var(--drawer-opacity);
  transform: translateX(calc(-50% + var(--drawer-x))) translateY(var(--drawer-y)) translateZ(var(--drawer-z)) rotateY(var(--drawer-rotate));
  transition: transform 250ms cubic-bezier(.16,1,.3,1), opacity 250ms ease, border-color 150ms ease, background-color 150ms ease;
}
#dashboard .dashboard-drawer-card.ring-hidden { visibility: hidden; pointer-events: none; }
#dashboard .dashboard-drawer-card.active {
  z-index: 6; border-color: rgba(0,200,151,.48);
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,200,151,.08)), rgba(18,21,22,.76);
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 20px rgba(0,200,151,.12), inset 0 1px rgba(255,255,255,.20);
}
#dashboard .dashboard-drawer-card:hover { border-color: rgba(255,255,255,.28); }
#dashboard .dashboard-drawer-card .avatar { grid-row: 1 / span 2; width: 42px; height: 42px; }
#dashboard .dashboard-drawer-card strong { align-self: end; overflow: hidden; color: #f3f4f6; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
#dashboard .dashboard-drawer-card small { color: #9ca3af; font-size: 12px; }
#dashboard .dashboard-drawer-card > span:not(.avatar):not(.dashboard-drawer-card-shine) { grid-column: 1 / -1; margin-top: 9px; color: #9ca3af; font-size: 12px; }
#dashboard .dashboard-drawer-card > b { grid-column: 1 / -1; justify-self: start; margin-top: 5px; color: #00c897; font-size: 11px; font-weight: 600; }
#dashboard .dashboard-drawer-card.cancelled > b { color: #ef4444; }
#dashboard .dashboard-drawer-card-shine { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18% 0%, rgba(255,255,255,.24), transparent 34%); }
#dashboard .dashboard-drawer-nav {
  position: absolute; z-index: 12; top: 126px; display: grid; place-items: center;
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.10); border-radius: 9999px;
  color: #e5e7eb; background: rgba(255,255,255,.06); backdrop-filter: blur(16px);
}
#dashboard .dashboard-drawer-nav.previous { left: 10px; }
#dashboard .dashboard-drawer-nav.next { right: 10px; }
#dashboard .dashboard-drawer-position { position: absolute; bottom: 8px; margin: 0; color: #6b7280; font-size: 12px; }
#dashboard .dashboard-drawer-empty { display: grid; place-items: center; gap: 8px; color: #9ca3af; text-align: center; }
#dashboard .dashboard-drawer-empty span { width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.10); border-radius: 10px; background: rgba(255,255,255,.04); }
#dashboard .dashboard-drawer-empty small { color: #6b7280; }

#dashboard .dashboard-drawer-action-panel {
  max-width: 1120px; margin: 0 auto; overflow: hidden;
  border: 1px solid rgba(0,200,151,.32); border-radius: 20px; color: #e5e7eb;
  background: radial-gradient(ellipse 60% 90% at 18% 0%, rgba(255,255,255,.10), transparent 64%), linear-gradient(135deg, rgba(0,200,151,.34), rgba(6,76,56,.92));
  box-shadow: 0 8px 32px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.16);
  opacity: 0; transform: translateY(10px);
}
#dashboard .dashboard-drawer-action-panel.active { opacity: 1; transform: translateY(0); transition: opacity 250ms cubic-bezier(.16,1,.3,1), transform 250ms cubic-bezier(.16,1,.3,1); }
#dashboard .dashboard-drawer-action-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.14); }
#dashboard .dashboard-drawer-action-panel > header > button { display: grid; gap: 3px; border: 0; color: #e5e7eb; background: transparent; text-align: left; }
#dashboard .dashboard-drawer-action-panel > header strong { font-size: 16px; }
#dashboard .dashboard-drawer-action-panel > header span,
#dashboard .dashboard-drawer-action-panel > header small { color: rgba(229,231,235,.72); font-size: 12px; }
#dashboard .dashboard-drawer-actions { display: grid; grid-template-columns: repeat(8, minmax(88px,1fr)); }
#dashboard .dashboard-drawer-action {
  display: grid; place-items: center; align-content: center; gap: 5px; min-height: 96px;
  border: 0; border-right: 1px solid rgba(255,255,255,.12);
  color: #e5e7eb; background: rgba(10,11,15,.16);
}
#dashboard .dashboard-drawer-action:last-child { border-right: 0; }
#dashboard .dashboard-drawer-action span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.30); border-radius: 10px; font-size: 25px; font-weight: 300; }
#dashboard .dashboard-drawer-action b { font-size: 12px; font-weight: 600; }
#dashboard .dashboard-drawer-action small { color: rgba(229,231,235,.66); font-size: 10px; }
#dashboard .dashboard-drawer-action:hover { color: #0a0b0f; background: rgba(255,255,255,.54); }
#dashboard .dashboard-drawer-action.completed span { color: #0a0b0f; border-color: rgba(255,255,255,.72); background: rgba(229,231,235,.88); }
#dashboard .dashboard-drawer-action:disabled { opacity: .36; cursor: not-allowed; }

@media (max-width: 1180px) {
  #dashboard .dashboard-drawer-actions { grid-template-columns: repeat(5, minmax(90px,1fr)); }
  #dashboard .dashboard-drawer-action { border-bottom: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 767px) {
  #dashboard .dashboard-board-picker { position: static; }
  #dashboard .dashboard-board-menu { left: 12px; right: 12px; width: auto; }
  #dashboard .dashboard-drawer-board { min-height: 500px; padding: 16px 10px; }
  #dashboard .dashboard-drawer-card { width: 200px; transform: translateX(calc(-50% + var(--drawer-mobile-x))) translateY(var(--drawer-y)) translateZ(var(--drawer-z)) rotateY(var(--drawer-rotate)); }
  #dashboard .dashboard-drawer-actions { grid-template-columns: repeat(3, minmax(82px,1fr)); }
  #dashboard .dashboard-drawer-action-panel > header { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-transparency: reduce) {
  #dashboard .dashboard-board-menu,
  #dashboard .dashboard-drawer-card { background-image: none; background-color: #1a1d23; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  #dashboard .dashboard-drawer-card,
  #dashboard .dashboard-drawer-action-panel { transition: none !important; }
}

/* ClauseOS drawer refinement: regular liquid-glass web approximation. */
#dashboard .dashboard-drawer-board {
  --dashboard-drawer-accent: #68E78E;
  position: relative;
  min-height: 520px;
  padding: 22px 24px 18px;
  overflow: visible;
  background:
    radial-gradient(ellipse 48% 32% at 50% 27%, rgba(104,231,142,.055), transparent 72%),
    linear-gradient(180deg, #111419 0%, #0f1216 100%);
}
#dashboard .dashboard-drawer-stage {
  --drawer-drag-x: 0px;
  min-height: 382px;
  perspective: 1400px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
#dashboard .dashboard-drawer-ring {
  width: min(100%, 1040px);
  height: 334px;
  cursor: grab;
  transform-style: preserve-3d;
}
#dashboard .dashboard-drawer-stage.dragging .dashboard-drawer-ring { cursor: grabbing; }
#dashboard .dashboard-drawer-card {
  top: 25px;
  z-index: var(--drawer-order);
  width: 224px;
  min-height: 180px;
  padding: 20px;
  border-color: rgba(218,225,230,.17);
  border-radius: 16px;
  background:
    linear-gradient(142deg, rgba(255,255,255,.115) 0%, rgba(255,255,255,.035) 43%, rgba(255,255,255,.018) 100%),
    rgba(17,21,24,.70);
  box-shadow:
    0 18px 38px rgba(2,5,8,.25),
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 1px 0 0 rgba(255,255,255,.045);
  backdrop-filter: blur(18px) saturate(118%);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  opacity: var(--drawer-opacity);
  transform:
    translateX(calc(-50% + var(--drawer-x) + var(--drawer-drag-x)))
    translateY(var(--drawer-y))
    translateZ(var(--drawer-z))
    rotateY(var(--drawer-rotate-y))
    rotateZ(var(--drawer-rotate-z))
    scale(var(--drawer-scale));
  transform-origin: var(--drawer-origin-x, 50%) 88%;
  will-change: transform, opacity;
  transition:
    transform 240ms cubic-bezier(.22,.8,.2,1),
    opacity 220ms ease,
    border-color 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}
#dashboard .dashboard-drawer-stage.dragging .dashboard-drawer-card { transition: none; }
#dashboard .dashboard-drawer-card.current { z-index: 14; }
#dashboard .dashboard-drawer-card.selected {
  z-index: 16;
  color: #f5fff7;
  border-color: rgba(104,231,142,.58);
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.25), transparent 37%),
    linear-gradient(138deg, rgba(104,231,142,.48), rgba(104,231,142,.17) 54%, rgba(20,67,42,.54)),
    rgba(19,42,30,.72);
  box-shadow:
    0 22px 46px rgba(3,12,7,.38),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 1px 0 0 rgba(104,231,142,.22);
}
#dashboard .dashboard-drawer-card.selected strong,
#dashboard .dashboard-drawer-card.selected small,
#dashboard .dashboard-drawer-card.selected > span:not(.avatar):not(.dashboard-drawer-card-shine),
#dashboard .dashboard-drawer-card.selected > b { color: #f4fff7; }
#dashboard .dashboard-drawer-card strong,
#dashboard .dashboard-drawer-action-panel > header strong {
  font-family: Urbanist, "SF Pro Display", "PingFang SC", sans-serif;
}
#dashboard .dashboard-drawer-card,
#dashboard .dashboard-drawer-action-panel { font-family: Inter, "SF Pro Text", "PingFang SC", sans-serif; }
#dashboard .dashboard-drawer-card-shine {
  background:
    radial-gradient(circle at 14% -5%, rgba(255,255,255,.25), transparent 34%),
    linear-gradient(108deg, rgba(255,255,255,.055), transparent 38%);
}
#dashboard .dashboard-drawer-card:focus-visible {
  outline: 2px solid var(--dashboard-drawer-accent);
  outline-offset: 3px;
}
#dashboard .dashboard-drawer-position { bottom: 4px; color: rgba(229,231,235,.62); }
#dashboard .dashboard-drawer-nav {
  top: 164px;
  border-color: rgba(218,225,230,.16);
  background: rgba(26,30,33,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
#dashboard .dashboard-drawer-nav:hover { border-color: rgba(104,231,142,.46); color: var(--dashboard-drawer-accent); }

#dashboard .dashboard-drawer-action-panel {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: 16px;
  z-index: 22;
  width: min(1120px, calc(100vw - 48px));
  max-width: 1120px;
  margin: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  border: 1px solid rgba(104,231,142,.46);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 50% 90% at 12% 0%, rgba(255,255,255,.18), transparent 62%),
    linear-gradient(132deg, rgba(104,231,142,.36), rgba(34,104,64,.52) 52%, rgba(16,63,39,.78)),
    rgba(18,45,29,.82);
  box-shadow:
    0 22px 52px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 1px 0 0 rgba(104,231,142,.18);
  backdrop-filter: blur(22px) saturate(128%);
  -webkit-backdrop-filter: blur(22px) saturate(128%);
  opacity: 0;
  transform: translate(-50%, calc(100% + 28px));
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.22,.8,.2,1), visibility 0s linear 220ms;
}
#dashboard .dashboard-drawer-action-panel.active {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.22,.8,.2,1), visibility 0s;
}
#dashboard .dashboard-drawer-action-panel > header {
  position: relative;
  min-height: 72px;
  padding: 15px 20px;
  border-bottom-color: rgba(255,255,255,.16);
  background: linear-gradient(90deg, rgba(255,255,255,.075), transparent 42%);
}
#dashboard .dashboard-drawer-action-panel > header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  width: 126px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--dashboard-drawer-accent);
  opacity: .92;
}
#dashboard .dashboard-drawer-action-panel > header > button { color: #f4fff7; }
#dashboard .dashboard-drawer-action-panel > header span,
#dashboard .dashboard-drawer-action-panel > header small { color: rgba(244,255,247,.72); }
#dashboard .dashboard-drawer-action {
  min-height: 92px;
  border-right-color: rgba(255,255,255,.15);
  color: #f4fff7;
  background: rgba(8,24,15,.14);
  transition: color 180ms ease, background-color 180ms ease, transform 120ms ease;
}
#dashboard .dashboard-drawer-action:hover {
  color: #102418;
  background: rgba(104,231,142,.76);
}
#dashboard .dashboard-drawer-action:active { transform: translateY(1px); }
#dashboard .dashboard-drawer-action span {
  border-color: rgba(244,255,247,.38);
  background: rgba(255,255,255,.035);
}
#dashboard .dashboard-drawer-action.completed span {
  color: #102418;
  border-color: rgba(104,231,142,.84);
  background: var(--dashboard-drawer-accent);
}

@media (max-width: 767px) {
  #dashboard .dashboard-drawer-board { padding: 16px 10px; }
  #dashboard .dashboard-drawer-card {
    width: 196px;
    transform:
      translateX(calc(-50% + var(--drawer-mobile-x) + var(--drawer-drag-x)))
      translateY(var(--drawer-y)) translateZ(var(--drawer-z))
      rotateY(var(--drawer-rotate-y)) rotateZ(var(--drawer-rotate-z)) scale(var(--drawer-scale));
  }
  #dashboard .dashboard-drawer-action-panel { bottom: 8px; border-radius: 16px; }
}

@media (prefers-reduced-transparency: reduce) {
  #dashboard .dashboard-drawer-card { background: #1b2023; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #dashboard .dashboard-drawer-card.selected { background: #285e3b; }
  #dashboard .dashboard-drawer-action-panel { background: #285e3b; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  #dashboard .dashboard-drawer-card,
  #dashboard .dashboard-drawer-action-panel,
  #dashboard .dashboard-drawer-action { transition: none !important; }
}

/* Appointment folders adapted from the layered open-source sleeve construction. */
#dashboard .dashboard-drawer-card {
  display: block;
  width: var(--drawer-card-width, clamp(196px, 20vw, 232px));
  min-height: var(--drawer-card-height, 272px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 26px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#dashboard .dashboard-drawer-card:hover,
#dashboard .dashboard-drawer-card.current,
#dashboard .dashboard-drawer-card.selected {
  border: 0;
  background: transparent;
  box-shadow: none;
}
#dashboard .dashboard-folder-back,
#dashboard .dashboard-folder-tab,
#dashboard .dashboard-folder-paper,
#dashboard .dashboard-folder-front,
#dashboard .dashboard-folder-refraction,
#dashboard .dashboard-folder-copy {
  position: absolute;
  pointer-events: none;
}
#dashboard .dashboard-folder-back {
  z-index: 1;
  inset: 18px 3px 3px;
  border: 1px solid rgba(242,249,255,.26);
  border-radius: 25px 25px 29px 29px;
  background: linear-gradient(152deg, rgba(255,255,255,.09), rgba(255,255,255,.018) 52%, rgba(255,255,255,.038));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 18px 34px rgba(0,0,0,.30);
  backdrop-filter: blur(9px) saturate(120%);
  -webkit-backdrop-filter: blur(9px) saturate(120%);
}
#dashboard .dashboard-folder-tab {
  z-index: 2;
  top: 5px;
  left: 14px;
  width: 54%;
  height: 34px;
  border: 1px solid rgba(240,248,255,.25);
  border-bottom: 0;
  border-radius: 17px 20px 5px 5px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.025));
  box-shadow: inset 0 1px rgba(255,255,255,.30);
}
#dashboard .dashboard-folder-paper {
  z-index: 3;
  left: 50%;
  top: 35px;
  width: 72%;
  height: calc(var(--drawer-card-height, 272px) * .67);
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 13px 13px 8px 8px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 12px, rgba(54,66,73,.20) 12px 14px),
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(211,226,234,.43));
  box-shadow: 0 9px 20px rgba(0,0,0,.20);
  transform-origin: bottom center;
}
#dashboard .dashboard-folder-paper.paper-one { opacity: .56; transform: translateX(-58%) rotate(-3deg); }
#dashboard .dashboard-folder-paper.paper-two { opacity: .38; transform: translateX(-41%) rotate(3deg) translateY(4px); }
#dashboard .dashboard-folder-front {
  z-index: 5;
  inset: calc(var(--drawer-card-height, 272px) * .38) 3px 3px;
  overflow: hidden;
  border: 1px solid rgba(247,251,255,.36);
  border-radius: 23px 27px 29px 29px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.27), transparent 28%),
    linear-gradient(151deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 58%, rgba(255,255,255,.058));
  box-shadow: inset 0 1px rgba(255,255,255,.50), 0 14px 29px rgba(0,0,0,.28);
  backdrop-filter: blur(9px) saturate(128%);
  -webkit-backdrop-filter: blur(9px) saturate(128%);
}
#dashboard .dashboard-folder-refraction {
  z-index: 6;
  inset: calc(var(--drawer-card-height, 272px) * .38) 3px 3px;
  overflow: hidden;
  border-radius: 23px 27px 29px 29px;
  background:
    linear-gradient(118deg, transparent 0 68%, rgba(128,211,255,.14) 83%, transparent 91%),
    linear-gradient(205deg, transparent 0 75%, rgba(255,135,206,.08) 87%, transparent 96%);
  mix-blend-mode: screen;
}
#dashboard .dashboard-drawer-card-shine {
  z-index: 7;
  inset: calc(var(--drawer-card-height, 272px) * .38) 3px 3px;
  border-radius: 23px 27px 29px 29px;
  background: radial-gradient(circle at 15% 0%, rgba(255,255,255,.24), transparent 31%);
}
#dashboard .dashboard-folder-copy {
  z-index: 8;
  inset: calc(var(--drawer-card-height, 272px) * .44) 13px 13px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 3px 10px;
  color: #eef3f4;
  text-align: left;
}
#dashboard .dashboard-folder-copy .avatar { grid-row: 1 / span 2; width: 38px; height: 38px; }
#dashboard .dashboard-folder-copy strong {
  align-self: end;
  overflow: hidden;
  color: #f4f7f8;
  font-family: Urbanist, "SF Pro Display", "PingFang SC", sans-serif;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dashboard .dashboard-folder-copy small { color: rgba(230,237,239,.66); font-size: 11px; }
#dashboard .dashboard-folder-copy > span:not(.avatar) {
  grid-column: 1 / -1;
  margin-top: 9px;
  overflow: hidden;
  color: rgba(232,239,241,.75);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#dashboard .dashboard-folder-copy b {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 5px;
  color: rgba(232,239,241,.82);
  font-size: 10px;
  font-weight: 650;
}
#dashboard .dashboard-drawer-card.selected .dashboard-folder-back { border-color: rgba(104,231,142,.56); }
#dashboard .dashboard-drawer-card.selected .dashboard-folder-tab {
  border-color: rgba(104,231,142,.64);
  background: linear-gradient(145deg, rgba(104,231,142,.34), rgba(104,231,142,.10));
}
#dashboard .dashboard-drawer-card.selected .dashboard-folder-front {
  border-color: rgba(104,231,142,.82);
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,.34), transparent 26%),
    radial-gradient(ellipse at 50% 125%, rgba(104,231,142,.66), transparent 58%),
    linear-gradient(151deg, rgba(104,231,142,.54), rgba(37,101,58,.52) 58%, rgba(22,70,39,.68));
  box-shadow: inset 0 1px rgba(255,255,255,.66), inset 0 -18px 34px rgba(104,231,142,.18), 0 24px 48px rgba(0,0,0,.46);
}
#dashboard .dashboard-drawer-card:not(.selected) { filter: brightness(.78) saturate(.72); }
#dashboard .dashboard-drawer-card.selected { filter: brightness(1.04) saturate(1.08); }
#dashboard .dashboard-drawer-card.selected .dashboard-folder-paper { opacity: .30; }
#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy strong,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy small,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy > span,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy b {
  color: #f7fff9;
  text-shadow: 0 1px 8px rgba(7,30,15,.72);
}
#dashboard .dashboard-drawer-card.cancelled .dashboard-folder-copy b { color: #ff8b8b; }
#dashboard .dashboard-drawer-action-panel { z-index: 900; }

@media (min-width: 768px) and (max-width: 1180px) {
  #dashboard .dashboard-drawer-stage { min-height: 352px; }
  #dashboard .dashboard-drawer-ring { width: 100%; height: 310px; }
  #dashboard .dashboard-drawer-card { width: var(--drawer-card-width, 160px); min-height: var(--drawer-card-height, 259px); }
}

@media (max-width: 767px) {
  #dashboard .dashboard-drawer-card {
    width: var(--drawer-card-width, 136px);
    min-height: var(--drawer-card-height, 220px);
    transform:
      translateX(calc(-50% + var(--drawer-x)))
      translateY(var(--drawer-y)) translateZ(var(--drawer-z))
      rotateY(var(--drawer-rotate-y)) rotateZ(var(--drawer-rotate-z)) scale(var(--drawer-scale));
  }
  #dashboard .dashboard-folder-copy { inset-inline: 14px; }
  #dashboard .dashboard-drawer-action-panel { width: calc(100vw - 20px); }
}

@media (prefers-reduced-transparency: reduce) {
  #dashboard .dashboard-folder-back,
  #dashboard .dashboard-folder-front { background: #1b2023; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #dashboard .dashboard-drawer-card.selected .dashboard-folder-front { background: #285e3b; }
}

/* Portaled bottom folder: fixed to the viewport, independent of dashboard transforms. */
.dashboard-drawer-action-panel.dashboard-panel-portal {
  position: fixed;
  z-index: 2400;
  right: auto;
  bottom: 0;
  left: 50%;
  width: min(1120px, calc(100vw - 48px));
  max-width: 1120px;
  margin: 0;
  padding-top: 18px;
  overflow: visible;
  visibility: hidden;
  pointer-events: none;
  border: 0;
  border-radius: 24px 24px 0 0;
  color: #f4fff7;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  transform: translate(-50%, calc(100% + 30px));
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.22,.8,.2,1), visibility 0s linear 220ms;
}
.dashboard-drawer-action-panel.dashboard-panel-portal::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 18px 0 0;
  border: 1px solid rgba(104,231,142,.50);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background:
    radial-gradient(ellipse 45% 100% at 12% 0%, rgba(255,255,255,.17), transparent 60%),
    linear-gradient(132deg, rgba(104,231,142,.40), rgba(34,104,64,.62) 56%, rgba(16,63,39,.90));
  box-shadow: 0 -18px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.26);
  backdrop-filter: blur(22px) saturate(128%);
  -webkit-backdrop-filter: blur(22px) saturate(128%);
}
.dashboard-drawer-action-panel.dashboard-panel-portal::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  left: 24px;
  width: 176px;
  height: 42px;
  border: 1px solid rgba(104,231,142,.54);
  border-bottom: 0;
  border-radius: 18px 22px 4px 4px;
  background: linear-gradient(145deg, rgba(104,231,142,.40), rgba(32,91,53,.68));
  box-shadow: inset 0 1px rgba(255,255,255,.26);
}
.dashboard-drawer-action-panel.dashboard-panel-portal.active {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.22,.8,.2,1), visibility 0s;
}
.dashboard-drawer-action-panel.dashboard-panel-portal > header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: calc(100% - 48px);
  min-height: 72px;
  margin: 0 24px;
  padding: 14px 18px;
  border: 1px solid rgba(244,255,247,.22);
  border-bottom: 0;
  border-radius: 18px 18px 7px 7px;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.055));
  box-shadow: inset 0 1px rgba(255,255,255,.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dashboard-drawer-action-panel.dashboard-panel-portal > header::before { display: none; }
.dashboard-drawer-action-panel.dashboard-panel-portal > header > button {
  display: grid;
  gap: 3px;
  border: 0;
  color: #f7fff9;
  background: transparent;
  text-align: left;
}
.dashboard-drawer-action-panel.dashboard-panel-portal > header strong {
  font-family: Urbanist, "SF Pro Display", "PingFang SC", sans-serif;
  font-size: 17px;
}
.dashboard-drawer-action-panel.dashboard-panel-portal > header span,
.dashboard-drawer-action-panel.dashboard-panel-portal > header small { color: rgba(244,255,247,.76); font-size: 12px; }
.dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(8, minmax(88px,1fr));
  overflow: hidden;
  border: 1px solid rgba(104,231,142,.48);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.17), transparent 28%),
    linear-gradient(132deg, rgba(104,231,142,.38), rgba(25,84,48,.88));
  box-shadow: inset 0 1px rgba(255,255,255,.22);
}
.dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-action {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  min-height: 98px;
  border: 0;
  border-right: 1px solid rgba(255,255,255,.15);
  color: #f7fff9;
  background: rgba(8,24,15,.10);
}
.dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-action:last-child { border-right: 0; }
.dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-action span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(244,255,247,.42);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  font-size: 25px;
  font-weight: 300;
}
.dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-action b { font-size: 12px; font-weight: 650; }
.dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-action small { color: rgba(244,255,247,.68); font-size: 10px; }
.dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-action:hover { color: #102418; background: rgba(104,231,142,.78); }
.dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-action:active { transform: translateY(1px); }
.dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-action.completed span {
  color: #102418;
  border-color: rgba(235,255,241,.88);
  background: #68e78e;
}
.dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-action:disabled {
  cursor: not-allowed;
  opacity: .36;
}

#dashboard .dashboard-drawer-card {
  transition: transform 240ms cubic-bezier(.22,.8,.2,1), opacity 220ms ease, filter 220ms ease;
}
#dashboard .dashboard-drawer-card:not(.selected) {
  filter: brightness(.64) saturate(.62) contrast(.94);
}
#dashboard .dashboard-drawer-card.selected {
  filter: none;
  opacity: 1 !important;
}

@media (max-width: 900px) {
  .dashboard-drawer-action-panel.dashboard-panel-portal { width: calc(100vw - 20px); }
  .dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-actions { grid-template-columns: repeat(4, minmax(76px,1fr)); }
  .dashboard-drawer-action-panel.dashboard-panel-portal > header { width: calc(100% - 24px); margin-inline: 12px; }
}

@media (prefers-reduced-transparency: reduce) {
  .dashboard-drawer-action-panel.dashboard-panel-portal::before,
  .dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-actions { background: #285e3b; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-drawer-action-panel.dashboard-panel-portal,
  .dashboard-drawer-action-panel.dashboard-panel-portal .dashboard-drawer-action { transition: none !important; }
}

/* Compact dashboard list columns after removing redundant appointment fields. */
#dashboard #dashboardListBoard .visit-table {
  width: 100%;
  min-width: 980px;
  table-layout: fixed;
}

#dashboard #dashboardListBoard .visit-col-sequence { width: 44px; }
#dashboard #dashboardListBoard .visit-col-patient { width: 126px; }
#dashboard #dashboardListBoard .visit-col-register { width: 108px; }
#dashboard #dashboardListBoard .visit-col-time { width: 108px; }

/* Drawer board: side-on file stack adapted from the supplied open-source fan view. */
#dashboard .dashboard-drawer-stage {
  min-height: 282px;
  perspective: 1280px;
}

#dashboard .dashboard-drawer-ring {
  width: min(100%, 1080px);
  height: 240px;
}

#dashboard .dashboard-drawer-card {
  z-index: var(--drawer-order) !important;
  transform-origin: var(--drawer-origin-x, 18%) 88%;
}

#dashboard .dashboard-drawer-card:not(.selected) {
  filter: saturate(.40) brightness(.76) contrast(.96);
}

#dashboard .dashboard-drawer-card.current:not(.selected) {
  filter: saturate(.62) brightness(.90) contrast(.98);
}

#dashboard .dashboard-drawer-card.selected {
  filter: saturate(1.06) brightness(1.04);
}

#dashboard .dashboard-drawer-card.selected .dashboard-folder-back {
  border-color: rgba(104,231,142,.78);
  background: linear-gradient(148deg, rgba(104,231,142,.52), rgba(31,102,58,.68));
}

#dashboard .dashboard-drawer-card.selected .dashboard-folder-tab {
  border-color: rgba(151,244,179,.82);
  background: linear-gradient(145deg, rgba(104,231,142,.72), rgba(41,128,72,.68));
}

#dashboard .dashboard-drawer-card.selected .dashboard-folder-paper {
  border-color: rgba(178,249,198,.54);
  background:
    repeating-linear-gradient(to bottom, transparent 0 12px, rgba(25,79,44,.20) 12px 14px),
    linear-gradient(145deg, rgba(170,246,193,.74), rgba(75,170,102,.48));
  opacity: .56;
}

#dashboard .dashboard-folder-back,
#dashboard .dashboard-folder-front {
  box-shadow:
    -10px 22px 38px rgba(0,0,0,.42),
    inset 0 1px rgba(255,255,255,.40),
    inset -10px 0 20px rgba(20,28,25,.12);
}

/* The back element is structural only. Painting its full rectangle makes the
   folder look as though it is wrapped in a second low-opacity card. */
#dashboard .dashboard-folder-back,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-back {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Keep the glass highlights, but remove every external drop shadow from the
   folder pieces so overlapping folders do not create a dark outer silhouette. */
#dashboard .dashboard-folder-front,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-front {
  box-shadow:
    inset 0 1px rgba(255,255,255,.46),
    inset -8px 0 16px rgba(20,28,25,.08);
}

#dashboard .dashboard-folder-paper,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-paper {
  box-shadow: inset 0 1px rgba(255,255,255,.28);
}

#dashboard .dashboard-drawer-card:not(.selected) .dashboard-folder-copy {
  opacity: .42;
  transition: opacity 220ms ease;
}

#dashboard .dashboard-drawer-card.current .dashboard-folder-copy,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy {
  opacity: 1;
}

/* Side-facing folder with a separate, readable patient sheet attached on the
   right. Only the focused folder exposes its sheet, matching a file index tab. */
#dashboard .dashboard-folder-copy {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 58%;
  z-index: 12;
  width: 156px;
  min-height: 118px;
  padding: 14px;
  border: 1px solid rgba(244,251,247,.72);
  border-radius: 18px;
  color: #142219;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.92), transparent 34%),
    linear-gradient(145deg, rgba(241,248,244,.94), rgba(178,207,190,.78));
  box-shadow: inset 0 1px rgba(255,255,255,.78);
  opacity: 0 !important;
  transform:
    translate3d(18%, -50%, 78px)
    rotateZ(var(--drawer-copy-counter-z, 0deg))
    rotateY(var(--drawer-copy-counter-y, 0deg));
  transform-origin: left center;
  transition: opacity 200ms ease, transform 230ms cubic-bezier(.22,.8,.2,1);
}

#dashboard .dashboard-drawer-card.current .dashboard-folder-copy,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy {
  opacity: 1 !important;
}

#dashboard .dashboard-folder-copy strong,
#dashboard .dashboard-folder-copy small,
#dashboard .dashboard-folder-copy > span:not(.avatar),
#dashboard .dashboard-folder-copy b,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy strong,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy small,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy > span,
#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy b {
  color: #142219;
  text-shadow: none;
}

#dashboard .dashboard-folder-copy small { color: rgba(20,34,25,.62); }
#dashboard .dashboard-folder-copy b { color: #277044; }

#dashboard .dashboard-drawer-card.selected .dashboard-folder-copy {
  border-color: rgba(104,231,142,.88);
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.92), transparent 34%),
    linear-gradient(145deg, rgba(218,250,227,.96), rgba(104,231,142,.74));
}

/* Match the focused folder's locked +80deg face while compensating for its
   projected width, so the printed name and time remain legible. */
#dashboard .dashboard-folder-copy {
  display: none !important;
}

#dashboard .dashboard-folder-cover-print {
  position: absolute;
  top: 61%;
  left: calc(50% + var(--dashboard-cover-x, 0px));
  z-index: 1250;
  display: grid;
  gap: 5px;
  width: 110px;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  color: #07150b;
  text-align: center;
  background: transparent;
  text-shadow: 0 1px rgba(225, 252, 233, .28);
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    rotateY(var(--dashboard-cover-angle, 80deg))
    scaleX(5.7588);
  transform-origin: center;
  transform-style: preserve-3d;
}

#dashboard .dashboard-folder-cover-print strong,
#dashboard .dashboard-folder-cover-print small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboard .dashboard-folder-cover-print strong {
  font-size: 17px;
  font-weight: 850;
  line-height: 1.2;
}

#dashboard .dashboard-folder-cover-print small {
  color: rgba(7, 21, 11, .68);
  font-size: 12px;
  line-height: 1.25;
}

/* Legacy in-folder copy rules are retained below for structural compatibility,
   but the element stays hidden because 3D projection makes it unreadable. */
#dashboard .dashboard-folder-copy {
  top: 58% !important;
  right: auto !important;
  bottom: auto !important;
  left: 52% !important;
  z-index: 40 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 5px !important;
  width: 156px !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: rgba(218, 250, 227, .88) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .46) !important;
  transform:
    translate3d(12%, -50%, 82px)
    rotateZ(var(--drawer-copy-counter-z, 0deg))
    rotateY(var(--drawer-copy-counter-y, 0deg)) !important;
  transform-origin: left center !important;
}

#dashboard .dashboard-folder-copy .avatar,
#dashboard .dashboard-folder-copy > span:not(.avatar),
#dashboard .dashboard-folder-copy b {
  display: none !important;
}

#dashboard .dashboard-folder-copy strong,
#dashboard .dashboard-folder-copy small {
  grid-column: 1 !important;
  overflow: hidden !important;
  color: #102418 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#dashboard .dashboard-folder-copy strong {
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

#dashboard .dashboard-folder-copy small {
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  opacity: .68 !important;
}

#dashboard .dashboard-folder-copy {
  display: none !important;
}

@media (max-width: 767px) {
  #dashboard .dashboard-drawer-stage { min-height: 248px; }
  #dashboard .dashboard-drawer-ring { height: 216px; }
  #dashboard .dashboard-folder-copy {
    left: 54%;
    width: 140px;
    min-height: 108px;
    padding: 11px;
  }
}
#dashboard #dashboardListBoard .visit-col-doctor { width: 72px; }
#dashboard #dashboardListBoard .visit-col-plan { width: 82px; }
#dashboard #dashboardListBoard .visit-col-action { width: 66px; }

#dashboard #dashboardListBoard .visit-table th,
#dashboard #dashboardListBoard .visit-table td {
  overflow: hidden;
  padding-inline: 7px;
  text-overflow: ellipsis;
}

#dashboard #dashboardListBoard .patient-name-wrap {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  column-gap: 5px;
  width: 112px;
}

#dashboard #dashboardListBoard .patient-avatar-icon {
  width: 28px;
  height: 28px;
}

/* Treatment-plan tooth picker: ClauseOS dark glass skin. */
.charge-tooth-popover {
  width: min(760px, calc(100vw - 32px));
  filter: none;
}

.charge-tooth-arrow {
  border-right-color: rgba(20,25,25,.96);
  filter: none;
}

.charge-tooth-card {
  padding: 14px;
  border-color: rgba(255,255,255,.16);
  border-radius: 18px;
  background:
    radial-gradient(360px 190px at 16% 0%, rgba(104,231,142,.10), transparent 66%),
    linear-gradient(145deg, rgba(24,29,29,.97), rgba(12,16,17,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.12);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.charge-tooth-card::before {
  background: radial-gradient(260px 150px at 12% 0%, rgba(104,231,142,.50), transparent 70%);
  opacity: .42;
}

.charge-tooth-toolbar {
  grid-template-columns: repeat(8, minmax(54px, 1fr)) 36px;
  gap: 7px;
  margin-bottom: 10px;
}

.charge-tooth-toolbar button {
  height: 36px;
  border-color: rgba(255,255,255,.13);
  border-radius: 9px;
  color: rgba(244,247,246,.82);
  background: rgba(255,255,255,.055);
  font-size: 13px;
  font-weight: 700;
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

.charge-tooth-toolbar button:hover {
  border-color: rgba(104,231,142,.44);
  color: #f7fff9;
  background: rgba(104,231,142,.12);
}

.charge-tooth-toolbar button.active {
  border-color: rgba(104,231,142,.80);
  color: #102418;
  background: #68e78e;
  box-shadow: inset 0 1px rgba(255,255,255,.38);
}

.charge-tooth-toolbar .charge-tooth-close {
  color: rgba(236,242,239,.62);
  background: transparent;
  font-size: 26px;
}

.charge-tooth-board {
  gap: 10px;
  min-height: 126px;
  padding: 13px;
  border-color: rgba(255,255,255,.11);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.charge-tooth-board::before { background: rgba(104,231,142,.42); }
.charge-tooth-quadrant { gap: 6px; }
.charge-tooth-unit { min-width: 34px; min-height: 32px; }

.charge-tooth-label {
  min-width: 32px;
  height: 30px;
  border-radius: 7px;
  color: rgba(244,247,246,.74);
  background: rgba(255,255,255,.055);
  font-size: 14px;
  line-height: 30px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
}

.charge-tooth-unit:hover .charge-tooth-label {
  color: #f7fff9;
  box-shadow: inset 0 0 0 1px rgba(104,231,142,.46);
}

.charge-tooth-unit.selected .charge-tooth-label {
  color: #102418;
  background: #68e78e;
  box-shadow: inset 0 0 0 1px rgba(232,255,239,.72);
}

.charge-tooth-extra {
  margin-top: 10px;
  color: rgba(235,241,238,.74);
}

.charge-tooth-extra label { color: rgba(235,241,238,.72); font-size: 14px; }
.charge-tooth-diagnosis { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.charge-tooth-diagnosis span { color: rgba(243,247,245,.86); }
.charge-tooth-diagnosis button,
.charge-tooth-edit { color: rgba(243,247,245,.68); }
.charge-tooth-edit { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.055); }
.charge-tooth-note {
  border-color: rgba(255,255,255,.12);
  border-radius: 10px;
  color: #f2f7f4;
  background: rgba(255,255,255,.05);
}

@media (max-width: 860px) {
  .charge-tooth-popover { width: min(640px, calc(100vw - 20px)); }
  .charge-tooth-toolbar { grid-template-columns: repeat(4, 1fr) 36px; }
}

/* Billing workspace: align the legacy light page with ClauseOS dark glass. */
#billCreate {
  --bill-cyan: #68e78e;
  --bill-cyan-dark: #68e78e;
  --bill-ink: #f2f5f3;
  --bill-line: rgba(255,255,255,.12);
  color: #eef3f0;
  background:
    radial-gradient(circle at 30% 0%, rgba(104,231,142,.055), transparent 28%),
    #050808;
}

#billCreate .charge-summary,
#billCreate .charge-actions,
#billCreate .charge-items-panel,
#billCreate .charge-cashier,
#billCreate .payment-history.active,
#billCreate .debt-confirm-card {
  border-color: rgba(255,255,255,.12);
  background:
    radial-gradient(420px circle at var(--bill-card-x, 50%) var(--bill-card-y, 25%), rgba(104,231,142,.07), transparent 68%),
    linear-gradient(145deg, rgba(24,29,29,.94), rgba(10,14,14,.96));
  box-shadow: inset 0 1px rgba(255,255,255,.09);
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
}

#billCreate .charge-summary:hover,
#billCreate .charge-actions:hover,
#billCreate .charge-items-panel:hover,
#billCreate .charge-cashier:hover,
#billCreate .payment-history.active:hover,
#billCreate .debt-confirm-card:hover {
  border-color: rgba(104,231,142,.34);
  box-shadow: inset 0 1px rgba(255,255,255,.11);
  transform: none;
}

#billCreate .charge-summary h2,
#billCreate .charge-panel-title { color: #f2f5f3; }
#billCreate .summary-values span { border-right-color: rgba(255,255,255,.12); color: rgba(233,239,235,.58); }
#billCreate .summary-values b { color: #f5f8f6; }
#billCreate .summary-values .danger,
#billCreate .payment-result .danger { color: #ff858d; }

#billCreate .charge-tabs button,
#billCreate .charge-buttons button,
#billCreate .cashier-footer button,
#billCreate .table-action {
  border-color: rgba(255,255,255,.14);
  color: rgba(242,246,244,.80);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}

#billCreate .charge-tabs button:hover,
#billCreate .charge-buttons button:hover,
#billCreate .cashier-footer button:hover {
  border-color: rgba(104,231,142,.42);
  color: #f7fff9;
  background: rgba(104,231,142,.10);
  box-shadow: none;
  transform: none;
}

#billCreate .charge-tabs button.active,
#billCreate .charge-buttons .primary-btn,
#billCreate .cashier-footer .primary-btn {
  border-color: rgba(104,231,142,.78);
  color: #102418;
  background: #68e78e;
  box-shadow: inset 0 1px rgba(255,255,255,.36);
}

#billCreate .charge-category-tabs .neon-button {
  border-color: rgba(255,255,255,.12);
  color: rgba(239,244,241,.68);
  background: rgba(255,255,255,.045);
  box-shadow: none;
}

#billCreate .charge-category-tabs .neon-button[aria-pressed="true"],
#billCreate .charge-category-tabs .neon-button:hover {
  border-color: rgba(104,231,142,.50);
  color: #dffff0;
  background: rgba(104,231,142,.12);
}

#billCreate .charge-search input,
#billCreate input,
#billCreate select,
#billCreate textarea {
  border-color: rgba(255,255,255,.13);
  color: #eef3f0;
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}

#billCreate input::placeholder,
#billCreate textarea::placeholder { color: rgba(229,236,232,.38); }

#billCreate input:focus,
#billCreate select:focus,
#billCreate textarea:focus {
  border-color: rgba(104,231,142,.68);
  box-shadow: 0 0 0 3px rgba(104,231,142,.10);
  transform: none;
}

#billCreate .charge-project-list {
  border-color: rgba(255,255,255,.09);
  background: rgba(0,0,0,.12);
}

#billCreate .charge-project-list button,
#billCreate .charge-project {
  border-bottom-color: rgba(255,255,255,.075);
  color: rgba(238,244,240,.74);
  background: transparent;
}

#billCreate .charge-project-list button:hover,
#billCreate .charge-project:hover,
#billCreate .charge-project.selected {
  color: #effff4;
  background: rgba(104,231,142,.10);
  box-shadow: inset 3px 0 #68e78e;
  transform: none;
}

#billCreate .charge-project strong { color: #eef4f0; }
#billCreate .charge-project small { color: rgba(232,239,235,.46); }

#billCreate .invoice-table-wrap,
#billCreate .charge-table-wrap {
  border-color: rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}

#billCreate .invoice-table,
#billCreate .charge-table { color: rgba(238,243,240,.78); }
#billCreate .invoice-table thead th,
#billCreate .charge-table thead th {
  border-color: rgba(255,255,255,.09);
  color: rgba(238,243,240,.64);
  background: rgba(255,255,255,.055);
}
#billCreate .invoice-table td,
#billCreate .charge-table td { border-color: rgba(255,255,255,.075); }
#billCreate .invoice-table tbody tr:hover,
#billCreate .charge-table tbody tr:hover {
  background: rgba(104,231,142,.075);
  box-shadow: inset 3px 0 #68e78e;
}

#billCreate .invoice-total,
#billCreate .whole-discount-row,
#billCreate .payment-box,
#billCreate .cashier-form {
  border-color: rgba(255,255,255,.10);
  color: rgba(235,241,237,.68);
  background: rgba(255,255,255,.035);
}

#billCreate .payment-result { border-top-color: rgba(255,255,255,.10); }
#billCreate .payment-result b { color: #f3f7f5; }
#billCreate .payment-result .success { color: #68e78e; }

@media (prefers-reduced-transparency: reduce) {
  #billCreate,
  #billCreate .charge-summary,
  #billCreate .charge-actions,
  #billCreate .charge-items-panel,
  #billCreate .charge-cashier { background: #101414; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

#dashboard #dashboardListBoard .patient-name-link {
  overflow: hidden;
  max-width: 58px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dashboard #dashboardListBoard .patient-row-badges { gap: 2px; }

#dashboard #dashboardListBoard .table-plus {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
}

/* ClauseOS list board + treatment plan surface refresh (screen only). */
@media screen {
  #dashboard #dashboardListBoard {
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    background:
      radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .055), transparent 28%),
      #0d1113;
    box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 18px 46px rgba(0, 0, 0, .24);
  }

  #dashboard #dashboardListBoard .visit-table {
    border-collapse: separate;
    border-spacing: 0 6px;
    background: transparent;
  }

  #dashboard #dashboardListBoard .visit-table thead th {
    height: 42px;
    padding-block: 8px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .025);
    color: rgba(244, 247, 245, .68);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
  }

  #dashboard #dashboardListBoard .visit-table tbody td {
    height: 52px;
    border-top: 1px solid rgba(255, 255, 255, .075);
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .055);
    background: rgba(255, 255, 255, .035);
    color: rgba(244, 247, 245, .82);
    font-size: 12px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .025);
  }

  #dashboard #dashboardListBoard .visit-table tbody td:first-child {
    border-left: 1px solid rgba(255, 255, 255, .075);
    border-radius: 12px 0 0 12px;
  }

  #dashboard #dashboardListBoard .visit-table tbody td:last-child {
    border-right: 1px solid rgba(255, 255, 255, .075);
    border-radius: 0 12px 12px 0;
  }

  #dashboard #dashboardListBoard .visit-table tbody tr:hover td {
    background: rgba(255, 255, 255, .065);
  }

  #dashboard #dashboardListBoard .visit-table tbody tr.selected td {
    border-color: rgba(104, 231, 142, .24);
    background: linear-gradient(180deg, rgba(104, 231, 142, .16), rgba(104, 231, 142, .095));
    color: #f5fff8;
  }

  #dashboard #dashboardListBoard .visit-table tbody tr.selected td:first-child {
    border-left: 2px solid #68e78e;
  }

  #dashboard #dashboardListBoard .visit-table td:nth-child(5),
  #dashboard #dashboardListBoard .visit-table td:nth-child(6) {
    color: rgba(244, 247, 245, .82);
  }

  #dashboard #dashboardListBoard .patient-name-link {
    color: #f4f7f5;
    font-weight: 700;
  }

  #dashboard #dashboardListBoard .patient-avatar-icon {
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .22);
  }

  #dashboard #dashboardListBoard .visit-table .table-plus,
  #dashboard #dashboardListBoard .visit-table button {
    border-color: rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .045);
    color: rgba(244, 247, 245, .76);
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
  }

  #dashboard #dashboardListBoard .visit-table .table-plus:hover,
  #dashboard #dashboardListBoard .visit-table button:hover {
    border-color: rgba(104, 231, 142, .55);
    background: rgba(104, 231, 142, .12);
    color: #68e78e;
  }

  .treatment-plan-backdrop {
    background: rgba(2, 5, 6, .76);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .treatment-plan-panel {
    grid-template-rows: 82px minmax(0, 1fr);
    width: min(84vw, 1220px);
    border-left: 1px solid rgba(255, 255, 255, .12);
    background: #090d0f;
    color: #f4f7f5;
    box-shadow: -30px 0 80px rgba(0, 0, 0, .52);
  }

  .treatment-plan-head {
    padding: 12px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background:
      radial-gradient(circle at 18% 0%, rgba(104, 231, 142, .10), transparent 32%),
      rgba(255, 255, 255, .025);
    text-align: left;
  }

  .treatment-plan-head strong {
    color: #68e78e;
    font-family: Urbanist, Inter, system-ui, sans-serif;
    font-size: 20px;
    letter-spacing: -.01em;
  }

  .treatment-plan-head h2 {
    margin-top: 5px;
    color: rgba(244, 247, 245, .68);
    font-size: 13px;
    font-weight: 600;
  }

  .treatment-plan-head .icon-btn {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .045);
    color: rgba(244, 247, 245, .72);
  }

  .treatment-plan-head .icon-btn:hover {
    border-color: rgba(104, 231, 142, .42);
    color: #68e78e;
  }

  .treatment-plan-body {
    padding: 24px 28px 32px;
    background:
      radial-gradient(circle at 88% 5%, rgba(104, 231, 142, .045), transparent 24%),
      #090d0f;
    color: rgba(244, 247, 245, .78);
    scrollbar-color: rgba(104, 231, 142, .35) transparent;
  }

  .treatment-plan-body > .glow-card {
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 18px;
    background:
      radial-gradient(circle at 10% 0%, rgba(255, 255, 255, .065), transparent 30%),
      rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 18px 45px rgba(0, 0, 0, .18);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
  }

  .treatment-patient-grid {
    color: rgba(244, 247, 245, .62);
  }

  .treatment-patient-grid b {
    border-color: rgba(255, 255, 255, .12);
    color: #f4f7f5;
  }

  .treatment-compare h3,
  .treatment-fees h3,
  .treatment-choice-module h3,
  .treatment-consents h3 {
    color: #f4f7f5;
    font-family: Urbanist, Inter, system-ui, sans-serif;
  }

  .treatment-compare.glow-card table,
  .treatment-fees.glow-card table,
  .treatment-compare table,
  .treatment-fees table {
    border-color: rgba(255, 255, 255, .09);
    background: rgba(7, 10, 12, .72);
    box-shadow: none;
  }

  .treatment-compare th,
  .treatment-fees th,
  .treatment-compare td,
  .treatment-fees td {
    border-color: rgba(255, 255, 255, .075);
    background: transparent;
    color: rgba(244, 247, 245, .76);
  }

  .treatment-compare th,
  .treatment-fees th,
  .treatment-row-label,
  .treatment-fee-group td,
  .treatment-fee-subtotal td,
  .treatment-fee-total td {
    background: rgba(255, 255, 255, .045);
    color: #f4f7f5;
  }

  .treatment-plan-toggle {
    border-color: rgba(104, 231, 142, .42);
    border-radius: 9px;
    background: rgba(104, 231, 142, .10);
    color: #68e78e;
  }

  .treatment-plan-toggle:hover {
    border-color: #68e78e;
    background: rgba(104, 231, 142, .18);
  }

  .treatment-edit-cell,
  .treatment-choice-item textarea,
  .treatment-fee-item input,
  .treatment-fee-item select,
  .treatment-fee-type,
  .treatment-plan-body input:not([type="checkbox"]):not([type="hidden"]),
  .treatment-plan-body select,
  .treatment-plan-body textarea {
    border-color: rgba(255, 255, 255, .12);
    background: #101518;
    color: #f4f7f5;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  }

  .treatment-edit-cell textarea,
  .treatment-consent-card textarea {
    background: transparent;
    color: #f4f7f5;
  }

  /* The editable control owns the field surface; its layout wrapper stays invisible. */
  .treatment-edit-cell:not(.treatment-cost-cell) {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .treatment-edit-cell:not(.treatment-cost-cell) textarea {
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: #101518;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  }

  .treatment-edit-cell:not(.treatment-cost-cell) textarea:focus {
    border-color: rgba(104, 231, 142, .72);
    outline: 2px solid rgba(104, 231, 142, .13);
    outline-offset: 1px;
  }

  .treatment-cost-pill {
    border-color: rgba(104, 231, 142, .22);
    background: linear-gradient(180deg, rgba(104, 231, 142, .10), rgba(255, 255, 255, .035));
    box-shadow: inset 0 1px rgba(255, 255, 255, .09);
    color: #f4f7f5;
  }

  .treatment-cost-pill b,
  .treatment-fee-total td {
    color: #68e78e;
  }

  .treatment-choice-list,
  .treatment-choice,
  .treatment-consent-card,
  .treatment-consent-card header {
    border-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .025);
    color: rgba(244, 247, 245, .78);
  }

  .treatment-choice-item input[type="checkbox"] {
    accent-color: #68e78e;
  }

  .treatment-consent-card strong { color: #f4f7f5; }
  .treatment-consent-card small { color: rgba(244, 247, 245, .52); }

  .treatment-tooth-map {
    border-color: rgba(104, 231, 142, .32);
    background: rgba(255, 255, 255, .04);
    color: #f4f7f5;
  }

  .treatment-tooth-map:hover {
    border-color: #68e78e;
    background: rgba(104, 231, 142, .08);
  }

  .treatment-tooth-map .tooth-line { background: #68e78e; }
  .treatment-tooth-map .invoice-tooth-quadrant { color: #f4f7f5; }

  .treatment-plan-actions {
    bottom: -32px;
    margin: 24px -28px -32px;
    padding: 14px 28px;
    border-color: rgba(255, 255, 255, .10);
    background: rgba(9, 13, 15, .92);
    box-shadow: 0 -16px 36px rgba(0, 0, 0, .26);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .treatment-plan-actions .light-btn {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: #f4f7f5;
  }

  .treatment-plan-actions .save-btn {
    border-color: rgba(104, 231, 142, .72);
    background: #68e78e;
    color: #102418;
    box-shadow: 0 10px 24px rgba(104, 231, 142, .16);
  }

  @media (max-width: 760px) {
    .treatment-plan-panel { width: 100vw; }
    .treatment-plan-body { padding: 18px 14px 24px; }
    .treatment-patient-grid { grid-template-columns: 1fr; gap: 12px; }
    .treatment-plan-body > .glow-card { padding: 16px; }
    .treatment-plan-actions { margin-inline: -14px; padding-inline: 14px; }
  }
}

/* The existing medical-record editor can also act as a ClauseOS drawer. */
@media screen {
  #medicalRecord > .medical-record-drawer-backdrop,
  #medicalRecord > .medical-record-drawer-head {
    display: none;
  }

  #medicalRecord.drawer-mode {
    position: fixed !important;
    inset: 0 !important;
    z-index: 134;
    display: block !important;
    padding: 0 !important;
    overflow: hidden;
    background: transparent;
  }

  #medicalRecord.drawer-mode > .medical-record-drawer-backdrop {
    position: absolute;
    inset: 0;
    display: block;
    background: rgba(2, 5, 6, .76);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #medicalRecord.drawer-mode > .medical-record-drawer-head {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 1fr 38px;
    align-items: center;
    width: min(84vw, 1220px);
    height: 82px;
    padding: 12px 26px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    border-left: 1px solid rgba(255, 255, 255, .12);
    background:
      radial-gradient(circle at 18% 0%, rgba(104, 231, 142, .10), transparent 32%),
      #0d1113;
    box-sizing: border-box;
  }

  #medicalRecord.drawer-mode > .medical-record-drawer-head strong {
    display: block;
    color: #68e78e;
    font: 700 20px/1.1 Urbanist, Inter, system-ui, sans-serif;
  }

  #medicalRecord.drawer-mode > .medical-record-drawer-head h2 {
    margin: 5px 0 0;
    color: rgba(244, 247, 245, .68);
    font-size: 13px;
    font-weight: 600;
  }

  #medicalRecord.drawer-mode > .medical-record-drawer-head .plain-close {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 11px;
    background: rgba(255, 255, 255, .045);
    color: rgba(244, 247, 245, .72);
    font-size: 25px;
  }

  #medicalRecord.drawer-mode > .medical-record-drawer-head .plain-close:hover {
    border-color: rgba(104, 231, 142, .42);
    color: #68e78e;
  }

  #medicalRecord.drawer-mode > .record-page {
    position: absolute;
    top: 82px;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: grid;
    align-content: start;
    gap: 16px;
    width: min(84vw, 1220px);
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 20px 24px 28px;
    overflow: auto;
    box-sizing: border-box;
    border-left: 1px solid rgba(255, 255, 255, .12);
    background:
      radial-gradient(circle at 88% 5%, rgba(104, 231, 142, .045), transparent 24%),
      #090d0f;
    box-shadow: -30px 0 80px rgba(0, 0, 0, .52);
    scrollbar-color: rgba(104, 231, 142, .35) transparent;
    animation: treatmentPlanDrawerIn 220ms ease-out;
  }

  #medicalRecord.drawer-mode .record-toolbar,
  #medicalRecord.drawer-mode .record-create-top,
  #medicalRecord.drawer-mode .record-section-nav,
  #medicalRecord.drawer-mode .record-form-section,
  #medicalRecord.drawer-mode .record-footer {
    border-color: rgba(255, 255, 255, .10);
    background:
      radial-gradient(circle at 10% 0%, rgba(255, 255, 255, .065), transparent 30%),
      rgba(255, 255, 255, .035);
    color: rgba(244, 247, 245, .76);
    box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 18px 45px rgba(0, 0, 0, .16);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    transform: none;
  }

  #medicalRecord.drawer-mode .record-toolbar:hover,
  #medicalRecord.drawer-mode .record-create-top:hover,
  #medicalRecord.drawer-mode .record-section-nav:hover,
  #medicalRecord.drawer-mode .record-form-section:hover,
  #medicalRecord.drawer-mode .record-footer:hover {
    border-color: rgba(104, 231, 142, .26);
    box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 18px 45px rgba(0, 0, 0, .18);
    transform: none;
  }

  #medicalRecord.drawer-mode .record-filter-title,
  #medicalRecord.drawer-mode .record-section-nav strong,
  #medicalRecord.drawer-mode .record-form-section h3,
  #medicalRecord.drawer-mode .record-form-section h4 {
    color: #f4f7f5;
  }

  #medicalRecord.drawer-mode .record-create-top label,
  #medicalRecord.drawer-mode .record-visit-time,
  #medicalRecord.drawer-mode .record-visit-time > label,
  #medicalRecord.drawer-mode .record-type-line,
  #medicalRecord.drawer-mode .record-section-nav,
  #medicalRecord.drawer-mode .record-section-nav a {
    color: rgba(244, 247, 245, .62);
  }

  #medicalRecord.drawer-mode .record-section-nav a:hover {
    background: rgba(104, 231, 142, .10);
    color: #68e78e;
    box-shadow: inset 3px 0 #68e78e;
  }

  #medicalRecord.drawer-mode .record-toolbar select,
  #medicalRecord.drawer-mode .record-create-top select,
  #medicalRecord.drawer-mode .record-create-top input,
  #medicalRecord.drawer-mode .record-visit-time select,
  #medicalRecord.drawer-mode .record-form-section textarea,
  #medicalRecord.drawer-mode .record-form-section input[type="text"],
  #medicalRecord.drawer-mode .ortho-field-control input,
  #medicalRecord.drawer-mode .ortho-field-control textarea {
    border-color: rgba(255, 255, 255, .12);
    background: #101518;
    color: #f4f7f5;
    box-shadow: inset 0 1px rgba(255, 255, 255, .035);
  }

  #medicalRecord.drawer-mode .record-form-section textarea {
    min-height: 62px;
    height: auto;
    font-size: 15px;
    line-height: 1.55;
  }

  #medicalRecord.drawer-mode .record-toolbar select:focus,
  #medicalRecord.drawer-mode .record-create-top select:focus,
  #medicalRecord.drawer-mode .record-create-top input:focus,
  #medicalRecord.drawer-mode .record-form-section textarea:focus {
    border-color: rgba(104, 231, 142, .7);
    background: #12191a;
    box-shadow: 0 0 0 3px rgba(104, 231, 142, .10);
    transform: none;
  }

  #medicalRecord.drawer-mode .record-type-line input,
  #medicalRecord.drawer-mode input[type="checkbox"],
  #medicalRecord.drawer-mode input[type="radio"] {
    accent-color: #68e78e;
  }

  #medicalRecord.drawer-mode .record-type-line b {
    background: #68e78e;
    color: #102418;
  }

  #medicalRecord.drawer-mode .record-template-btn,
  #medicalRecord.drawer-mode .record-add-tooth,
  #medicalRecord.drawer-mode .record-section-tools button {
    border-color: rgba(104, 231, 142, .28);
    background: rgba(104, 231, 142, .075);
    color: #68e78e;
    box-shadow: none;
  }

  #medicalRecord.drawer-mode .tooth-input-row {
    border-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .025);
  }

  #medicalRecord.drawer-mode .record-section-nav {
    display: none;
  }

  #medicalRecord.drawer-mode .record-create-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    min-height: 0;
  }

  #medicalRecord.drawer-mode .record-workspace {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #medicalRecord.drawer-mode .record-writing-form,
  #medicalRecord.drawer-mode .ortho-record-form {
    grid-column: 1;
    width: 100%;
  }

  #medicalRecord.drawer-mode .record-create-top {
    align-self: stretch;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #medicalRecord.drawer-mode .record-create-top select,
  #medicalRecord.drawer-mode .record-create-top input,
  #medicalRecord.drawer-mode .record-visit-time select,
  #medicalRecord.drawer-mode .record-create-top .system-card-select-trigger,
  #medicalRecord.drawer-mode .record-visit-time .system-card-select-trigger {
    height: 35px;
    min-height: 35px;
  }

  #medicalRecord.drawer-mode .record-create-top {
    gap: 11px 18px;
    padding: 16px 18px;
  }

  #medicalRecord.drawer-mode .record-form-section {
    padding-block: 13px;
  }

  #medicalRecord.drawer-mode .record-form-section textarea,
  #medicalRecord.drawer-mode .ortho-field-control textarea {
    height: 50px;
    min-height: 50px;
    padding-block: 10px;
  }

  #medicalRecord.drawer-mode .record-form-section input:not([type="hidden"]),
  #medicalRecord.drawer-mode .ortho-field-control input:not([type="hidden"]) {
    min-height: 35px;
  }

  #medicalRecord.drawer-mode .tooth-input-row {
    min-height: 43px;
    padding-block: 4px;
  }

  #medicalRecord.drawer-mode .record-footer {
    position: static !important;
    inset: auto !important;
    bottom: auto !important;
    z-index: auto;
    order: 99;
    width: 100%;
    box-sizing: border-box;
    transform: none !important;
    grid-column: 1 / -1;
    align-self: stretch;
    margin: 18px 0 0;
    padding: 14px 24px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .035);
    box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 18px 45px rgba(0, 0, 0, .16);
  }

  #medicalRecord.drawer-mode .record-footer .primary-btn {
    border-color: rgba(104, 231, 142, .72);
    background: #68e78e;
    color: #102418;
  }

  #medicalRecord.drawer-mode .record-footer .light-btn {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: #f4f7f5;
  }

  @media (max-width: 760px) {
    #medicalRecord.drawer-mode > .medical-record-drawer-head,
    #medicalRecord.drawer-mode > .record-page { width: 100vw; }
    #medicalRecord.drawer-mode > .record-page { padding: 14px 12px 22px; }
    #medicalRecord.drawer-mode .record-create-layout { display: flex; }
    #medicalRecord.drawer-mode .record-create-top { grid-template-columns: 1fr; }
    #medicalRecord.drawer-mode .record-footer { margin-inline: 0; padding-inline: 12px; }
  }
}
/* 2026-08-04 — Appointment, follow-up and referral overlays: ClauseOS dark glass */
.appointment-drawer-panel,
.followup-modal-card,
.referral-modal-card {
  --overlay-accent: #68e78e;
  --overlay-ink: #f4f7f6;
  --overlay-muted: #94a09d;
  --overlay-line: rgba(255, 255, 255, .11);
  --overlay-panel: rgba(13, 18, 18, .96);
  color: var(--overlay-ink) !important;
  border-color: var(--overlay-line) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(104, 231, 142, .08), transparent 34%),
    linear-gradient(145deg, rgba(20, 25, 25, .98), rgba(8, 12, 12, .98)) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .05) !important;
}

.appointment-drawer-backdrop,
.followup-modal,
.referral-modal {
  background: rgba(0, 4, 4, .72) !important;
  backdrop-filter: blur(12px) saturate(90%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(90%) !important;
}

/* New appointment drawer */
.appointment-drawer-head {
  color: var(--overlay-ink) !important;
  border-color: var(--overlay-line) !important;
  background: rgba(11, 16, 16, .94) !important;
}
.appointment-drawer-head h2 { color: var(--overlay-ink) !important; }
.appointment-drawer-head .plain-close,
.followup-modal-close,
.referral-modal-card header > button {
  color: #c8d0ce !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  background: rgba(255, 255, 255, .055) !important;
}
.appointment-drawer-head .plain-close:hover,
.followup-modal-close:hover,
.referral-modal-card header > button:hover {
  color: #07100a !important;
  border-color: rgba(104, 231, 142, .48) !important;
  background: var(--overlay-accent) !important;
}
.appointment-drawer-body { background: #090d0d !important; }
.drawer-board,
.drawer-appointment-form section {
  color: var(--overlay-ink) !important;
  border-color: var(--overlay-line) !important;
  background: linear-gradient(145deg, rgba(24, 29, 29, .9), rgba(12, 17, 17, .94)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .035) !important;
}
.drawer-board-title,
.drawer-week-nav,
.drawer-week-head {
  color: var(--overlay-ink) !important;
  border-color: var(--overlay-line) !important;
  background: rgba(17, 22, 22, .96) !important;
}
.drawer-board-title::before { background: var(--overlay-accent) !important; }
.drawer-board-title strong,
.drawer-appointment-form h3::before { color: var(--overlay-accent) !important; }
.drawer-week-nav button {
  color: #dce3e1 !important;
  border-color: var(--overlay-line) !important;
  background: rgba(255, 255, 255, .05) !important;
}
.drawer-week-nav button:hover:not(:disabled) { color: #07100a !important; background: var(--overlay-accent) !important; }
.drawer-week-head span,
.drawer-week-head button { color: #cbd3d1 !important; border-color: var(--overlay-line) !important; background: rgba(255,255,255,.025) !important; }
.drawer-week-head button.active { color: #07100a !important; border-color: var(--overlay-accent) !important; background: var(--overlay-accent) !important; }
.drawer-time-board {
  color: #dce3e1 !important;
  background-color: #0c1111 !important;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) !important;
}
.drawer-time-label,
.drawer-time-cell { color: #aeb9b6 !important; border-color: rgba(255,255,255,.07) !important; background: rgba(255,255,255,.012) !important; }
.drawer-time-cell:hover,
.drawer-time-cell.drag-over { background: rgba(104,231,142,.09) !important; }
.drawer-time-cell.selected-day { background: rgba(104,231,142,.045) !important; }
.drawer-appointment-form h3,
.drawer-appointment-form label,
.drawer-appointment-form p { color: #dbe2e0 !important; }
.drawer-appointment-form p span { color: var(--overlay-muted) !important; }
.drawer-appointment-form input,
.drawer-appointment-form select,
.drawer-appointment-form textarea,
.drawer-project-search {
  color: var(--overlay-ink) !important;
  border-color: var(--overlay-line) !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}
.drawer-appointment-form :is(input, select, textarea):focus {
  outline: 0 !important;
  border-color: rgba(104,231,142,.7) !important;
  box-shadow: 0 0 0 3px rgba(104,231,142,.1) !important;
}
.drawer-project-groups h4 { color: var(--overlay-accent) !important; border-color: var(--overlay-line) !important; }
.drawer-project-groups label { color: #c7d0ce !important; }
.drawer-actions { border-color: var(--overlay-line) !important; background: rgba(9,13,13,.96) !important; }

/* Follow-up workspace */
.followup-modal-left,
.followup-modal-right { color: var(--overlay-ink) !important; background: #0a0f0f !important; }
.followup-modal-left { border-color: var(--overlay-line) !important; }
.followup-modal-left header,
.followup-modal-head,
.followup-modal-tabs,
.followup-modal-actions {
  border-color: var(--overlay-line) !important;
  background: rgba(14, 19, 19, .96) !important;
}
.followup-modal-head h2 { color: var(--overlay-ink) !important; }
.followup-modal-left header button,
.followup-modal-tabs button { color: #9ba7a4 !important; background: transparent !important; }
.followup-modal-left header button.active,
.followup-modal-tabs button.active {
  color: #07100a !important;
  border-color: rgba(104,231,142,.5) !important;
  background: var(--overlay-accent) !important;
  box-shadow: none !important;
}
.followup-expand-check { color: var(--overlay-muted) !important; }
.followup-record-item,
.followup-record-paper,
.followup-note-card,
.followup-patient-summary,
.followup-config {
  color: #dce3e1 !important;
  border-color: var(--overlay-line) !important;
  background: linear-gradient(145deg, rgba(24,29,29,.9), rgba(13,18,18,.94)) !important;
  box-shadow: none !important;
}
.followup-record-item header,
.followup-config-head { color: #dce3e1 !important; border-color: var(--overlay-line) !important; background: rgba(255,255,255,.035) !important; }
.followup-plan-form,
.followup-config-body { color: #d5dddb !important; background: transparent !important; }
.followup-plan-form select,
.followup-plan-form input,
.followup-plan-form textarea,
.followup-visit-time-display,
.followup-card-select-trigger {
  color: var(--overlay-ink) !important;
  border-color: var(--overlay-line) !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}
.followup-card-select-menu {
  color: var(--overlay-ink) !important;
  border-color: var(--overlay-line) !important;
  background: #151b1b !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.42) !important;
}
.followup-card-select-menu button { color: #cbd4d1 !important; }
.followup-card-select-menu button:hover { color: #07100a !important; background: var(--overlay-accent) !important; }
.followup-radio-line b,
.followup-add-plan { color: var(--overlay-accent) !important; }
.followup-plan-box { border-color: var(--overlay-line) !important; background: rgba(255,255,255,.025) !important; }
.followup-modal-actions { position: sticky; bottom: 0; }

/* Referral dialog */
.referral-modal-card { gap: 16px !important; }
.referral-modal-card header,
.referral-modal-card footer {
  color: var(--overlay-ink) !important;
  border-color: var(--overlay-line) !important;
  background: rgba(12, 17, 17, .96) !important;
}
.referral-modal-card header h2 { color: var(--overlay-ink) !important; }
.referral-modal-card header p { color: var(--overlay-muted) !important; }
.referral-modal-card > label { color: #dbe2e0 !important; }
.referral-modal-card select,
.referral-modal-card textarea {
  color: var(--overlay-ink) !important;
  border-color: var(--overlay-line) !important;
  background: rgba(255,255,255,.045) !important;
}
.referral-modal-card :is(select, textarea):focus {
  outline: 0 !important;
  border-color: rgba(104,231,142,.72) !important;
  box-shadow: 0 0 0 3px rgba(104,231,142,.1) !important;
}
.referral-modal-card footer .report-secondary-btn {
  color: #d8dfdd !important;
  border-color: var(--overlay-line) !important;
  background: rgba(255,255,255,.05) !important;
}
.referral-modal-card footer .report-primary-btn,
.appointment-drawer .save-btn,
.followup-modal .primary-btn {
  color: #07100a !important;
  border-color: var(--overlay-accent) !important;
  background: var(--overlay-accent) !important;
  box-shadow: 0 10px 24px rgba(104,231,142,.14) !important;
}

@media (max-width: 900px) {
  .appointment-drawer-body { grid-template-columns: 1fr !important; }
  .followup-modal-card { grid-template-columns: 1fr !important; }
  .followup-modal-left { display: none !important; }
}

/* 2026-08-04 — Patient centre density and dark-glass alignment */
#patients {
  --patient-accent: #68e78e;
  --patient-text: #f3f7f5;
  --patient-muted: #8d9996;
  --patient-border: rgba(255, 255, 255, .1);
  padding: 20px 24px 32px !important;
  color: var(--patient-text) !important;
  background:
    radial-gradient(circle at 18% 5%, rgba(104, 231, 142, .045), transparent 28%),
    #050808 !important;
}

#patients .patients-console {
  grid-template-columns: 156px minmax(0, 1fr) !important;
  gap: 14px !important;
}

#patients .patients-list-workspace,
#patients .patients-family-workspace {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

#patients :is(.patients-console-menu, .patients-filter-panel, .patients-querybar, .patients-card-list-wrap) {
  border: 1px solid var(--patient-border) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .035), transparent 52%),
    rgba(11, 16, 16, .92) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .045) !important;
  backdrop-filter: blur(14px) saturate(86%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(86%) !important;
}

#patients :is(.patients-console-menu, .patients-filter-panel) {
  min-height: 300px !important;
  border-radius: 16px !important;
}

#patients .patients-console-title {
  margin: 0 6px 8px !important;
  padding: 10px 8px 13px !important;
  color: var(--patient-text) !important;
  border-color: rgba(255,255,255,.075) !important;
  font-size: 15px !important;
}

#patients .patients-console-menu button,
#patients .patients-filter-list button,
#patients .patients-filter-list div {
  min-height: 40px !important;
  color: #aab4b1 !important;
  border-radius: 10px !important;
}

#patients :is(.patients-console-menu button, .patients-filter-list button).active,
#patients :is(.patients-console-menu button, .patients-filter-list button, .patients-filter-list div):hover {
  color: #f7faf8 !important;
  background: linear-gradient(90deg, rgba(104,231,142,.13), rgba(255,255,255,.045)) !important;
  box-shadow: inset 3px 0 var(--patient-accent) !important;
  transform: none !important;
}

#patients .patients-filter-tabs {
  height: 48px !important;
  padding: 5px !important;
  border-bottom: 1px solid rgba(255,255,255,.075) !important;
  background: rgba(255,255,255,.025) !important;
}

#patients .patients-filter-tabs button {
  color: #8f9b98 !important;
  border-radius: 9px !important;
  background: transparent !important;
}

#patients .patients-filter-tabs button.active {
  color: #07100a !important;
  background: var(--patient-accent) !important;
  box-shadow: none !important;
}

#patients .patients-filter-list b { color: #dfe6e3 !important; }
#patients .patients-filter-list i { color: var(--patient-accent) !important; }

#patients .patients-list-workspace { gap: 14px !important; }
#patients .patients-querybar {
  min-height: 70px !important;
  padding: 13px !important;
  gap: 10px !important;
  border-radius: 16px !important;
}

#patients .patients-querybar label {
  height: 40px !important;
  color: var(--patient-text) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}

#patients .patients-querybar label:focus-within {
  border-color: rgba(104,231,142,.68) !important;
  background: rgba(104,231,142,.045) !important;
  box-shadow: 0 0 0 3px rgba(104,231,142,.08) !important;
  transform: none !important;
}

#patients .patients-querybar input {
  color: var(--patient-text) !important;
  background: transparent !important;
}
#patients .patients-querybar input::placeholder { color: rgba(235,242,239,.4) !important; }

#patients :is(.patients-link-btn, .patients-ai-btn, .patients-batch-btn, .patients-querybar .light-btn, .patients-querybar .primary-btn) {
  height: 40px !important;
  color: #dbe2df !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.03) !important;
}

#patients .patients-querybar .primary-btn {
  color: #07100a !important;
  -webkit-text-fill-color: #07100a !important;
  border-color: var(--patient-accent) !important;
  background: var(--patient-accent) !important;
}

#patients :is(.patients-link-btn, .patients-ai-btn, .patients-batch-btn, .patients-querybar .light-btn):hover {
  color: #fff !important;
  border-color: rgba(104,231,142,.42) !important;
  background: rgba(104,231,142,.09) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

#patients .patients-card-list-wrap {
  min-height: calc(100dvh - 218px) !important;
  padding: 12px !important;
  border-radius: 16px !important;
}

#patients .patients-card-list-head {
  min-height: 40px !important;
  color: var(--patient-muted) !important;
}

#patients .patients-card-grid { gap: 12px !important; }
#patients .patient-list-card {
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 58%),
    rgba(12,17,17,.92) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}

#patients .patient-list-card:hover {
  border-color: rgba(104,231,142,.32) !important;
  background:
    linear-gradient(135deg, rgba(104,231,142,.07), transparent 58%),
    rgba(14,19,19,.96) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.045) !important;
  transform: translateY(-2px) !important;
}

#patients .patient-list-card-head {
  min-height: 58px !important;
  padding: 10px 13px !important;
  border-color: rgba(255,255,255,.075) !important;
}

#patients .patient-table-link { color: #f1f5f3 !important; }
#patients .patient-list-card-fields { padding: 9px 13px 12px !important; }
#patients .patient-list-card-fields span { color: #778480 !important; }
#patients .patient-list-card-fields strong { color: #dfe5e3 !important; }
#patients .patient-card-actions .patients-row-action {
  color: #dfe6e3 !important;
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.045) !important;
}
#patients .patient-card-actions .patients-row-action:hover {
  color: #07100a !important;
  border-color: var(--patient-accent) !important;
  background: var(--patient-accent) !important;
  box-shadow: none !important;
}

@media (max-width: 1450px) {
  #patients .patients-console { grid-template-columns: 145px minmax(0, 1fr) !important; }
}

@media (max-width: 1050px) {
  #patients .patients-console { grid-template-columns: 165px minmax(0, 1fr) !important; }
  #patients .patients-list-workspace,
  #patients .patients-family-workspace { grid-column: 2 !important; grid-row: 1 !important; }
}

@media (max-width: 720px) {
  #patients { padding: 10px !important; }
  #patients .patients-console { grid-template-columns: 1fr !important; }
  #patients .patients-list-workspace,
  #patients .patients-family-workspace { grid-column: 1 !important; grid-row: auto !important; }
}

/* 2026-08-04 — Keep the patient date-range layer above the results table. */
#patients .patients-console,
#patients .patients-list-workspace {
  overflow: visible !important;
}

#patients .patients-list-workspace {
  position: relative !important;
  isolation: isolate;
}

#patients .patients-querybar {
  position: relative !important;
  z-index: 20 !important;
  overflow: visible !important;
}

#patients .patient-date-range {
  position: relative !important;
  z-index: 21 !important;
}

#patients .patient-date-range-popover {
  z-index: 1000 !important;
}

#patients .patients-card-list-wrap {
  position: relative !important;
  z-index: 1 !important;
}

/* 2026-08-04 — Dashboard list: compact dark-glass rows and neutral today control. */
#dashboard .visit-tools .date-box > #dashboardTodayMark,
#dashboard .visit-tools .date-box > #dashboardTodayMark.active {
  color: #e6ece9 !important;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065) !important;
}

#dashboard .visit-tools .date-box > #dashboardTodayMark:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .22) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .055)) !important;
}

#dashboard #dashboardListBoard {
  padding: 8px !important;
  border: 1px solid rgba(255, 255, 255, .095) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, .04), transparent 30%),
    rgba(9, 13, 14, .96) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .04) !important;
}

#dashboard #dashboardListBoard .visit-table {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
  background: transparent !important;
}

#dashboard #dashboardListBoard .visit-table thead,
#dashboard #dashboardListBoard .visit-table thead tr {
  background: transparent !important;
}

#dashboard #dashboardListBoard .visit-table thead th {
  height: 40px !important;
  padding: 0 8px !important;
  color: rgba(232, 239, 236, .61) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  background: rgba(255, 255, 255, .018) !important;
  font-size: 11px !important;
  font-weight: 680 !important;
}

#dashboard #dashboardListBoard .visit-table tbody tr,
#dashboard #dashboardListBoard .visit-table tbody tr:nth-child(odd),
#dashboard #dashboardListBoard .visit-table tbody tr:nth-child(even) {
  color: #dfe6e3 !important;
  background: transparent !important;
}

#dashboard #dashboardListBoard .visit-table tbody td,
#dashboard #dashboardListBoard .visit-table tbody tr:nth-child(odd) td,
#dashboard #dashboardListBoard .visit-table tbody tr:nth-child(even) td {
  height: 54px !important;
  padding: 0 8px !important;
  color: rgba(235, 241, 238, .82) !important;
  border-top: 1px solid rgba(255, 255, 255, .075) !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
  background-color: rgba(255, 255, 255, .032) !important;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, .026), transparent 40%) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .022) !important;
  font-size: 12px !important;
}

#dashboard #dashboardListBoard .visit-table tbody td:first-child {
  border-left: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 11px 0 0 11px !important;
}

#dashboard #dashboardListBoard .visit-table tbody td:last-child {
  border-right: 1px solid rgba(255, 255, 255, .075) !important;
  border-radius: 0 11px 11px 0 !important;
}

#dashboard #dashboardListBoard .visit-table tbody tr:hover td {
  border-color: rgba(255, 255, 255, .12) !important;
  background-color: rgba(255, 255, 255, .062) !important;
  background-image: linear-gradient(105deg, rgba(255, 255, 255, .045), transparent 42%) !important;
}

#dashboard #dashboardListBoard .visit-table tbody tr.selected td,
#dashboard #dashboardListBoard .visit-table tbody tr.selected:nth-child(odd) td,
#dashboard #dashboardListBoard .visit-table tbody tr.selected:nth-child(even) td {
  color: #f3fff7 !important;
  border-color: rgba(104, 231, 142, .25) !important;
  background-color: rgba(104, 231, 142, .105) !important;
  background-image: linear-gradient(105deg, rgba(104, 231, 142, .13), rgba(104, 231, 142, .045)) !important;
}

#dashboard #dashboardListBoard .visit-table tbody tr.selected td:first-child {
  border-left: 2px solid #68e78e !important;
}

#dashboard #dashboardListBoard .patient-name-link {
  color: #f2f6f4 !important;
  font-weight: 720 !important;
}

#dashboard #dashboardListBoard .visit-table .table-plus,
#dashboard #dashboardListBoard .visit-table button {
  border-color: rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .045) !important;
  color: rgba(237, 243, 240, .72) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .065) !important;
}

#dashboard #dashboardListBoard .visit-table .table-plus:hover,
#dashboard #dashboardListBoard .visit-table button:hover {
  color: #f5faf7 !important;
  border-color: rgba(255, 255, 255, .25) !important;
  background: rgba(255, 255, 255, .085) !important;
  box-shadow: none !important;
}
/* 2026-08-04 — ClauseOS dark inventory entry overlays
   Visual-only overrides for supplier and inbound forms. */
#supplierFormModal,
#inboundFormModal,
#drugInboundFormModal {
    background: rgba(0, 4, 5, 0.76) !important;
    backdrop-filter: blur(14px) saturate(112%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(112%) !important;
}

#supplierFormModal .supplier-form-card,
#inboundFormModal .inbound-form-card,
#drugInboundFormModal .inbound-form-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 40px) !important;
    overflow: hidden !important;
    color: #f5f7f6 !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 32%),
        #0c1011 !important;
    border: 1px solid rgba(220, 232, 228, 0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38) !important;
}

#supplierFormModal .modal-head,
#inboundFormModal .modal-head,
#drugInboundFormModal .modal-head {
    flex: 0 0 auto;
    min-height: 78px;
    padding: 18px 24px !important;
    color: #f5f7f6 !important;
    background: linear-gradient(100deg, rgba(104, 231, 142, 0.07), rgba(255, 255, 255, 0.025) 38%, transparent) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
}

#supplierFormModal .modal-head h3,
#inboundFormModal .modal-head h3,
#drugInboundFormModal .modal-head h3 {
    margin: 0 0 5px !important;
    color: #f7f9f8 !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em;
}

#supplierFormModal .modal-head p,
#inboundFormModal .modal-head p,
#drugInboundFormModal .modal-head p {
    margin: 0 !important;
    color: rgba(231, 238, 235, 0.62) !important;
    font-size: 13px !important;
}

#supplierFormModal .modal-close,
#inboundFormModal .modal-close,
#drugInboundFormModal .modal-close {
    width: 38px !important;
    height: 38px !important;
    color: rgba(244, 248, 246, 0.72) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
}

#supplierFormModal .modal-close:hover,
#inboundFormModal .modal-close:hover,
#drugInboundFormModal .modal-close:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
}

#supplierFormModal .supplier-form,
#inboundFormModal .inbound-form,
#drugInboundFormModal .drug-inbound-form {
    min-height: 0;
    overflow: auto !important;
    padding: 20px 24px 0 !important;
    color: #f2f5f3 !important;
    background: transparent !important;
    scrollbar-color: rgba(104, 231, 142, 0.34) transparent;
}

#supplierFormModal label,
#inboundFormModal label,
#drugInboundFormModal label,
#supplierFormModal .field-label,
#inboundFormModal .field-label,
#drugInboundFormModal .field-label {
    color: rgba(235, 241, 238, 0.72) !important;
}

#supplierFormModal input,
#supplierFormModal select,
#supplierFormModal textarea,
#inboundFormModal input,
#inboundFormModal select,
#inboundFormModal textarea,
#drugInboundFormModal input,
#drugInboundFormModal select,
#drugInboundFormModal textarea,
#supplierFormModal .supplier-contact-select,
#inboundFormModal .inbound-supplier-combobox {
    min-height: 42px !important;
    color: #f5f7f6 !important;
    caret-color: #68e78e !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(219, 231, 227, 0.16) !important;
    border-radius: 10px !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#supplierFormModal input::placeholder,
#supplierFormModal textarea::placeholder,
#inboundFormModal input::placeholder,
#inboundFormModal textarea::placeholder,
#drugInboundFormModal input::placeholder,
#drugInboundFormModal textarea::placeholder {
    color: rgba(226, 234, 230, 0.34) !important;
}

#supplierFormModal input:focus,
#supplierFormModal select:focus,
#supplierFormModal textarea:focus,
#inboundFormModal input:focus,
#inboundFormModal select:focus,
#inboundFormModal textarea:focus,
#drugInboundFormModal input:focus,
#drugInboundFormModal select:focus,
#drugInboundFormModal textarea:focus,
#supplierFormModal input:focus-visible,
#supplierFormModal select:focus-visible,
#supplierFormModal textarea:focus-visible,
#inboundFormModal input:focus-visible,
#inboundFormModal select:focus-visible,
#inboundFormModal textarea:focus-visible,
#drugInboundFormModal input:focus-visible,
#drugInboundFormModal select:focus-visible,
#drugInboundFormModal textarea:focus-visible {
    border-color: rgba(104, 231, 142, 0.76) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 2px rgba(104, 231, 142, 0.12) !important;
}

#supplierFormModal option,
#inboundFormModal option,
#drugInboundFormModal option {
    color: #f5f7f6;
    background: #151a1b;
}

#supplierFormModal .supplier-form-grid,
#supplierFormModal .supplier-contact-grid,
#inboundFormModal .inbound-finance-fields {
    gap: 14px !important;
}

#supplierFormModal .supplier-contact-select,
#inboundFormModal .inbound-supplier-combobox {
    padding: 0 !important;
    overflow: hidden;
}

#supplierFormModal .supplier-contact-select select,
#supplierFormModal .supplier-contact-select input,
#inboundFormModal .inbound-supplier-combobox input,
#inboundFormModal .inbound-supplier-combobox select {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#inboundFormModal .inbound-form-toolbar,
#drugInboundFormModal .inbound-form-toolbar {
    gap: 8px !important;
    margin: 2px 0 14px !important;
}

#supplierFormModal button,
#inboundFormModal button,
#drugInboundFormModal button {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#supplierFormModal .light-btn,
#inboundFormModal .light-btn,
#drugInboundFormModal .light-btn,
#supplierFormModal .secondary-btn,
#inboundFormModal .secondary-btn,
#drugInboundFormModal .secondary-btn {
    color: rgba(245, 248, 246, 0.84) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

#supplierFormModal .light-btn:hover,
#inboundFormModal .light-btn:hover,
#drugInboundFormModal .light-btn:hover,
#supplierFormModal .secondary-btn:hover,
#inboundFormModal .secondary-btn:hover,
#drugInboundFormModal .secondary-btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: none !important;
}

#supplierFormModal .primary-btn,
#inboundFormModal .primary-btn,
#drugInboundFormModal .primary-btn {
    color: #071109 !important;
    background: #68e78e !important;
    border: 1px solid #68e78e !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

#supplierFormModal .primary-btn:hover,
#inboundFormModal .primary-btn:hover,
#drugInboundFormModal .primary-btn:hover {
    background: #79eba0 !important;
    border-color: #79eba0 !important;
    transform: none !important;
}

#inboundFormModal .inventory-table-wrap,
#drugInboundFormModal .inventory-table-wrap {
    overflow: auto !important;
    color: #edf2ef !important;
    background: rgba(0, 0, 0, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#inboundFormModal .inventory-module-table,
#drugInboundFormModal .inventory-module-table {
    color: #edf2ef !important;
    background: transparent !important;
}

#inboundFormModal .inventory-module-table thead th,
#drugInboundFormModal .inventory-module-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 42px !important;
    padding: 9px 10px !important;
    color: rgba(235, 241, 238, 0.64) !important;
    background: #171c1d !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    white-space: nowrap;
}

#inboundFormModal .inventory-module-table tbody tr,
#drugInboundFormModal .inventory-module-table tbody tr {
    background: rgba(255, 255, 255, 0.018) !important;
}

#inboundFormModal .inventory-module-table tbody tr:hover,
#drugInboundFormModal .inventory-module-table tbody tr:hover {
    background: rgba(104, 231, 142, 0.035) !important;
}

#inboundFormModal .inventory-module-table td,
#drugInboundFormModal .inventory-module-table td {
    height: 52px !important;
    padding: 7px 8px !important;
    color: #edf2ef !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.07) !important;
}

#inboundFormModal .inventory-module-table td input,
#inboundFormModal .inventory-module-table td select,
#drugInboundFormModal .inventory-module-table td input,
#drugInboundFormModal .inventory-module-table td select {
    min-width: 82px;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
}

#inboundFormModal .inbound-row-add-btn,
#inboundFormModal .inbound-row-remove-btn,
#drugInboundFormModal .inbound-row-add-btn,
#drugInboundFormModal .inbound-row-remove-btn {
    color: #68e78e !important;
    background: rgba(104, 231, 142, 0.08) !important;
    border-color: rgba(104, 231, 142, 0.34) !important;
    box-shadow: none !important;
}

#supplierFormModal .supplier-upload-grid,
#drugInboundFormModal .drug-image-upload-grid {
    gap: 12px !important;
}

#supplierFormModal .supplier-upload-field,
#inboundFormModal .supplier-upload-field,
#drugInboundFormModal .supplier-upload-field,
#drugInboundFormModal .drug-image-upload-field {
    color: rgba(235, 241, 238, 0.74) !important;
}

#supplierFormModal .supplier-upload-box,
#inboundFormModal .supplier-upload-box,
#drugInboundFormModal .supplier-upload-box,
#supplierFormModal .supplier-upload-trigger,
#inboundFormModal .supplier-upload-trigger,
#drugInboundFormModal .supplier-upload-trigger {
    min-height: 122px !important;
    color: rgba(235, 241, 238, 0.58) !important;
    background:
        radial-gradient(circle at 50% 10%, rgba(104, 231, 142, 0.055), transparent 48%),
        rgba(255, 255, 255, 0.035) !important;
    border: 1px dashed rgba(225, 237, 232, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

#supplierFormModal .supplier-upload-box:hover,
#inboundFormModal .supplier-upload-box:hover,
#drugInboundFormModal .supplier-upload-box:hover,
#supplierFormModal .supplier-upload-trigger:hover,
#inboundFormModal .supplier-upload-trigger:hover,
#drugInboundFormModal .supplier-upload-trigger:hover {
    color: rgba(245, 249, 247, 0.88) !important;
    background: rgba(104, 231, 142, 0.055) !important;
    border-color: rgba(104, 231, 142, 0.58) !important;
    transform: none !important;
}

#supplierFormModal .supplier-upload-preview,
#inboundFormModal .inbound-upload-preview,
#drugInboundFormModal .inbound-upload-preview {
    color: rgba(235, 241, 238, 0.7) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}

#supplierFormModal .supplier-form-actions,
#inboundFormModal .supplier-form-actions,
#drugInboundFormModal .supplier-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex: 0 0 auto;
    margin: 16px -24px 0 !important;
    padding: 12px 24px !important;
    background: rgba(13, 17, 18, 0.94) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: none !important;
}

@media (max-width: 1100px) {
    #supplierFormModal .supplier-upload-grid,
    #drugInboundFormModal .drug-image-upload-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Factory qualification upload controls use the same dark form material. */
#dentureFactoryFormModal .denture-factory-license-upload > span {
    color: rgba(244, 248, 246, 0.82) !important;
    font-weight: 750;
}

#dentureFactoryFormModal .denture-factory-license-box {
    border: 1px dashed rgba(220, 232, 227, 0.2) !important;
    border-radius: 12px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(104, 231, 142, 0.055), transparent 48%),
        rgba(255, 255, 255, 0.035) !important;
    color: #eaf1ed !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035) !important;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

#dentureFactoryFormModal .denture-factory-license-box:hover,
#dentureFactoryFormModal .denture-factory-license-box:focus-within {
    border-color: rgba(104, 231, 142, 0.54) !important;
    background-color: rgba(104, 231, 142, 0.045) !important;
}

#dentureFactoryFormModal .denture-factory-license-trigger {
    width: 100%;
    min-height: 64px;
    border-radius: 9px;
    color: #eaf1ed !important;
}

#dentureFactoryFormModal .denture-factory-license-trigger span {
    color: #dff6e7 !important;
    font-size: 14px;
    font-weight: 850;
    -webkit-text-fill-color: #dff6e7 !important;
}

#dentureFactoryFormModal .denture-factory-license-trigger span::before {
    content: "+";
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-right: 7px;
    border: 1px solid rgba(104, 231, 142, 0.42);
    border-radius: 7px;
    color: #68e78e;
    background: rgba(104, 231, 142, 0.08);
    vertical-align: -2px;
}

#dentureFactoryFormModal .denture-factory-license-trigger small {
    color: rgba(235, 242, 238, 0.56) !important;
    font-size: 12px;
    line-height: 1.5;
    -webkit-text-fill-color: rgba(235, 242, 238, 0.56) !important;
}

#dentureFactoryFormModal .denture-factory-license-preview {
    color: rgba(235, 242, 238, 0.66) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

#dentureFactoryFormModal .denture-factory-license-preview .supplier-upload-empty {
    color: rgba(235, 242, 238, 0.52) !important;
    -webkit-text-fill-color: rgba(235, 242, 238, 0.52) !important;
}

#dentureFactoryFormModal .denture-factory-license-delete-preview:empty {
    display: none;
}

@media (max-width: 1180px) {
    #dentureFactoryFormModal .denture-factory-license-upload-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
    }
}

@media (max-width: 650px) {
    #dentureFactoryFormModal .denture-factory-license-upload-grid {
        grid-template-columns: 1fr;
    }
}

/* Personnel table: department values must stay readable in the system skin.
   Legacy light styles used dark text, while the unassigned badge kept a white
   fill, making both assigned and unassigned department names disappear. */
#system #peopleAdminView .people-employee-row .people-department {
    display: inline-flex;
    align-items: center;
    width: max-content;
    min-height: 28px;
    border: 1px solid rgba(104, 231, 142, 0.22) !important;
    border-radius: 8px;
    padding: 4px 10px;
    color: #dff6e7 !important;
    background: rgba(104, 231, 142, 0.075) !important;
    font-weight: 750;
    line-height: 1.2;
    opacity: 1 !important;
    -webkit-text-fill-color: #dff6e7 !important;
}

#system #peopleAdminView .people-employee-row .people-department.none {
    border-color: rgba(220, 232, 227, 0.12) !important;
    color: rgba(235, 242, 238, 0.68) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    -webkit-text-fill-color: rgba(235, 242, 238, 0.68) !important;
}

/* Denture workspace: top cards replace the legacy secondary sidebar. */
#denture .denture-category-cards {
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    gap: 14px !important;
    padding: 20px 22px 0 !important;
}

#denture .denture-category-cards .settings-category-card {
    min-height: 116px;
    padding: 18px 20px !important;
    border: 1px solid rgba(244, 248, 246, 0.14) !important;
    border-radius: 16px !important;
    background-color: rgba(15, 19, 19, 0.82) !important;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 50%) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.065) !important;
    transform: none !important;
}

#denture .denture-category-cards .settings-category-card:hover {
    border-color: rgba(244, 248, 246, 0.24) !important;
    background-color: rgba(20, 24, 24, 0.92) !important;
}

#denture .denture-category-cards .settings-category-card.active {
    border-color: rgba(43, 217, 130, 0.46) !important;
    background-color: rgba(14, 24, 19, 0.92) !important;
    background-image: linear-gradient(110deg, rgba(43, 217, 130, 0.1), transparent 52%) !important;
    box-shadow: inset 3px 0 #2bd982, inset 0 1px rgba(255, 255, 255, 0.07) !important;
}

#denture .denture-category-cards .settings-category-card span {
    color: #2bd982 !important;
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
}

#denture .denture-category-cards .settings-category-card strong {
    color: #f6faf7 !important;
    font-size: 21px !important;
}

#denture .denture-category-cards .settings-category-card small {
    color: rgba(235, 242, 238, 0.6) !important;
    font-size: 13px !important;
}

#denture .denture-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 14px 22px 24px !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

#denture .denture-page-content {
    width: 100%;
    min-width: 0;
    overflow: visible;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

#denture .denture-ledger-search {
    display: grid;
    grid-template-columns: auto minmax(260px, 520px);
    align-items: center;
    justify-content: start;
    gap: 12px;
    margin: 16px 0;
}

#denture .denture-ledger-search label {
    color: rgba(242, 247, 244, 0.76) !important;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

#denture .denture-ledger-search input {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(244, 248, 246, 0.16) !important;
    border-radius: 10px;
    padding: 0 13px;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f5f8f6 !important;
    caret-color: #2bd982;
    font: inherit;
    font-weight: 700;
}

#denture .denture-ledger-search input::placeholder {
    color: rgba(235, 242, 238, 0.42) !important;
}

#denture .denture-ledger-search input:focus {
    outline: 0;
    border-color: rgba(43, 217, 130, 0.62) !important;
    box-shadow: 0 0 0 3px rgba(43, 217, 130, 0.09) !important;
}

@media (max-width: 760px) {
    #denture .denture-category-cards {
        grid-template-columns: 1fr !important;
        padding: 12px 12px 0 !important;
    }

    #denture .denture-layout {
        padding: 12px !important;
    }

    #denture .denture-ledger-search {
        grid-template-columns: 1fr;
        gap: 7px;
    }
}

@media (max-width: 720px) {
    #supplierFormModal .supplier-form-card,
    #inboundFormModal .inbound-form-card,
    #drugInboundFormModal .inbound-form-card {
        width: calc(100vw - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 14px !important;
    }

    #supplierFormModal .modal-head,
    #inboundFormModal .modal-head,
    #drugInboundFormModal .modal-head {
        padding: 16px !important;
    }

    #supplierFormModal .supplier-form,
    #inboundFormModal .inbound-form,
    #drugInboundFormModal .drug-inbound-form {
        padding: 16px 16px 0 !important;
    }

    #supplierFormModal .supplier-form-grid,
    #supplierFormModal .supplier-contact-grid,
    #inboundFormModal .inbound-finance-fields,
    #supplierFormModal .supplier-upload-grid,
    #drugInboundFormModal .drug-image-upload-grid {
        grid-template-columns: 1fr !important;
    }

    #supplierFormModal .supplier-form-actions,
    #inboundFormModal .supplier-form-actions,
    #drugInboundFormModal .supplier-form-actions {
        margin-inline: -16px !important;
        padding: 12px 16px !important;
    }
}

/* Final scoped theme lock: work memo / history / pending-work dialogs. */
#dashboardTaskCenter,
.pending-record-modal,
.pending-followup-modal {
    background: rgba(2, 8, 12, 0.76) !important;
    backdrop-filter: blur(16px) saturate(112%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(112%) !important;
}

#dashboardTaskCenter .dashboard-task-center-card,
.pending-record-modal .pending-record-dialog,
.pending-followup-modal .pending-followup-dialog {
    color: #f4f8f6 !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(104, 231, 142, 0.11), transparent 34%),
        linear-gradient(145deg, rgba(22, 29, 31, 0.98), rgba(8, 13, 15, 0.98)) !important;
    border: 1px solid rgba(213, 229, 221, 0.18) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.08) !important;
}

#dashboardTaskCenter .dashboard-task-center-head,
.pending-record-modal .pending-record-head,
.pending-followup-modal .pending-followup-head {
    color: #f6faf8 !important;
    background: linear-gradient(105deg, rgba(104, 231, 142, 0.12), rgba(255, 255, 255, 0.025) 55%, transparent) !important;
    border-bottom: 1px solid rgba(213, 229, 221, 0.12) !important;
}

#dashboardTaskCenter :is(h2, h3, h4, label, strong),
.pending-record-modal :is(h2, h3, h4, label, strong),
.pending-followup-modal :is(h2, h3, h4, label, strong) {
    color: #f4f8f6 !important;
}

#dashboardTaskCenter :is(p, small, .muted, .dashboard-task-counts),
.pending-record-modal :is(p, small, .muted),
.pending-followup-modal :is(p, small, .muted) {
    color: #8f9c97 !important;
}

#dashboardTaskCenter :is(.dashboard-task-toolbar, .dashboard-task-composer, .dashboard-task-section, .dashboard-task-item, .dashboard-task-empty, .dashboard-task-recipients, .dashboard-task-datetime-popover),
.pending-record-modal :is(.pending-record-content, .pending-record-table-wrap, .pending-record-empty),
.pending-followup-modal :is(.pending-followup-content, .pending-followup-table-wrap, .pending-followup-empty) {
    color: #e9efec !important;
    background: rgba(10, 16, 18, 0.78) !important;
    border-color: rgba(213, 229, 221, 0.13) !important;
    box-shadow: none !important;
}

#dashboardTaskCenter :is(input, textarea, select),
.pending-record-modal :is(input, textarea, select),
.pending-followup-modal :is(input, textarea, select) {
    color: #f4f8f6 !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(213, 229, 221, 0.16) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035) !important;
}

#dashboardTaskCenter :is(input, textarea)::placeholder,
.pending-record-modal :is(input, textarea)::placeholder,
.pending-followup-modal :is(input, textarea)::placeholder {
    color: #71807a !important;
}

.pending-record-modal table,
.pending-followup-modal table {
    color: #dce5e1 !important;
    background: transparent !important;
}

.pending-record-modal thead,
.pending-followup-modal thead {
    background: rgba(255, 255, 255, 0.045) !important;
}

.pending-record-modal :is(th, td),
.pending-followup-modal :is(th, td) {
    color: inherit !important;
    background: transparent !important;
    border-color: rgba(213, 229, 221, 0.10) !important;
}

.pending-record-modal tbody tr,
.pending-followup-modal tbody tr {
    background: rgba(255, 255, 255, 0.018) !important;
}

.pending-record-modal tbody tr:hover,
.pending-followup-modal tbody tr:hover {
    background: rgba(104, 231, 142, 0.075) !important;
}

#dashboardTaskCenter button,
.pending-record-modal button,
.pending-followup-modal button {
    color: #dce5e1 !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(213, 229, 221, 0.16) !important;
}

#dashboardTaskCenter :is(.primary, .dashboard-task-submit),
.pending-record-modal .pending-record-write-btn,
.pending-followup-modal .pending-followup-complete-btn {
    color: #07110b !important;
    background: #68e78e !important;
    border-color: #68e78e !important;
    box-shadow: 0 8px 24px rgba(104, 231, 142, 0.16) !important;
}

#dashboardTaskCenter button:disabled,
.pending-record-modal button:disabled,
.pending-followup-modal button:disabled {
    color: #64706b !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border-color: rgba(213, 229, 221, 0.08) !important;
    box-shadow: none !important;
    opacity: 0.72 !important;
}

#dashboardTaskCenter .dashboard-task-center-close,
.pending-record-modal .pending-record-close,
.pending-followup-modal .pending-followup-close {
    color: #afbbb6 !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

/* 2026-08-05 — Keep dashboard follow-up and denture work dialogs in the
   same dark system skin. These rules intentionally sit at the end of the
   cascade because both modules still contain legacy light-theme blocks. */
.pending-record-modal .dashboard-followup-stats-dialog {
    color: #f3f7f5 !important;
    border-color: rgba(220, 232, 227, 0.16) !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(104, 231, 142, 0.075), transparent 32%),
        linear-gradient(145deg, #151918, #0a0e0f) !important;
    box-shadow: 0 28px 82px rgba(0, 0, 0, 0.54), inset 0 1px rgba(255, 255, 255, 0.06) !important;
}

.pending-record-modal .dashboard-followup-stats-dialog > header {
    border-color: rgba(220, 232, 227, 0.1) !important;
    background: linear-gradient(105deg, rgba(104, 231, 142, 0.075), rgba(255, 255, 255, 0.018) 58%, transparent) !important;
}

.pending-record-modal .dashboard-followup-stats-dialog > header span {
    color: #68e78e !important;
}

.pending-record-modal .dashboard-followup-stats-dialog > header h2,
.pending-record-modal .dashboard-followup-plan-card > header strong,
.pending-record-modal .dashboard-followup-result-card > header strong {
    color: #f5f8f6 !important;
}

.pending-record-modal .dashboard-followup-stats-dialog > header p,
.pending-record-modal .dashboard-followup-plan-card > header small,
.pending-record-modal .dashboard-followup-plan-body small,
.pending-record-modal .dashboard-followup-result-meta small {
    color: rgba(235, 242, 238, 0.58) !important;
}

.pending-record-modal .dashboard-followup-results-tabs,
.pending-record-modal .dashboard-followup-stats-dialog > footer {
    border-color: rgba(220, 232, 227, 0.09) !important;
    background: rgba(7, 11, 12, 0.8) !important;
}

.pending-record-modal .dashboard-followup-results-tabs button {
    color: rgba(235, 242, 238, 0.65) !important;
    background: transparent !important;
}

.pending-record-modal .dashboard-followup-results-tabs button:is(:hover, .active) {
    color: #f4fff7 !important;
    background: rgba(104, 231, 142, 0.075) !important;
}

.pending-record-modal .dashboard-followup-results-tabs button.active::after {
    background: #68e78e !important;
}

.pending-record-modal .dashboard-followup-results-tabs button b {
    color: inherit !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

.pending-record-modal .dashboard-followup-stats-content {
    background: transparent !important;
}

.pending-record-modal :is(.dashboard-followup-plan-card, .dashboard-followup-result-card) {
    color: #e8eeeb !important;
    border-color: rgba(220, 232, 227, 0.1) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04) !important;
}

.pending-record-modal :is(.dashboard-followup-plan-card, .dashboard-followup-result-card) > header {
    border-color: rgba(220, 232, 227, 0.08) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

.pending-record-modal :is(.dashboard-followup-plan-body, .dashboard-followup-result-meta) b,
.pending-record-modal .dashboard-followup-result-copy p,
.pending-record-modal .dashboard-followup-plan-card > p {
    color: #dbe5e0 !important;
}

.pending-record-modal .dashboard-followup-plan-card > p,
.pending-record-modal .dashboard-followup-result-copy section {
    border-color: rgba(220, 232, 227, 0.09) !important;
    background: rgba(255, 255, 255, 0.025) !important;
}

.pending-record-modal .dashboard-followup-result-copy section:last-child {
    border-color: rgba(104, 231, 142, 0.15) !important;
    background: rgba(104, 231, 142, 0.045) !important;
}

.pending-record-modal .dashboard-followup-result-copy h3,
.pending-record-modal .dashboard-followup-plan-card > footer {
    color: rgba(235, 242, 238, 0.58) !important;
    border-color: rgba(220, 232, 227, 0.08) !important;
}

#dentureRecordFormModal {
    background: rgba(0, 4, 5, 0.78) !important;
    -webkit-backdrop-filter: blur(16px) saturate(110%) !important;
    backdrop-filter: blur(16px) saturate(110%) !important;
}

#dentureRecordFormModal .denture-record-form-card {
    color: #f3f7f5 !important;
    border: 1px solid rgba(220, 232, 227, 0.16) !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.045), transparent 32%), #0c1011 !important;
    box-shadow: 0 28px 82px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.06) !important;
}

#dentureRecordFormModal .modal-head {
    color: #f5f8f6 !important;
    border-color: rgba(220, 232, 227, 0.09) !important;
    background: linear-gradient(105deg, rgba(104, 231, 142, 0.07), rgba(255, 255, 255, 0.02) 48%, transparent) !important;
}

#dentureRecordFormModal :is(h2, h3, strong, b, label, th) { color: #f5f8f6 !important; }
#dentureRecordFormModal :is(p, small) { color: rgba(235, 242, 238, 0.58) !important; }
#dentureRecordFormModal .inbound-form { color: #edf3f0 !important; background: transparent !important; }

#dentureRecordFormModal :is(input:not([type="file"]), select, textarea),
#dentureRecordFormModal .denture-delivery-date-picker {
    color: #f3f7f5 !important;
    caret-color: #68e78e !important;
    border-color: rgba(220, 232, 227, 0.16) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    box-shadow: none !important;
}

#dentureRecordFormModal :is(input, textarea)::placeholder { color: rgba(235, 242, 238, 0.36) !important; }
#dentureRecordFormModal option { color: #f3f7f5; background: #151a1b; }

#dentureRecordFormModal :is(input, select, textarea):focus {
    outline: 0 !important;
    border-color: rgba(104, 231, 142, 0.72) !important;
    box-shadow: 0 0 0 3px rgba(104, 231, 142, 0.1) !important;
}

#dentureRecordFormModal .inventory-table-wrap {
    color: #edf3f0 !important;
    border-color: rgba(220, 232, 227, 0.1) !important;
    background: rgba(0, 0, 0, 0.18) !important;
    box-shadow: none !important;
}

#dentureRecordFormModal .inventory-module-table { color: #edf3f0 !important; background: transparent !important; }
#dentureRecordFormModal .inventory-module-table thead th { color: rgba(235, 242, 238, 0.62) !important; border-color: rgba(220, 232, 227, 0.08) !important; background: #171c1d !important; }
#dentureRecordFormModal .inventory-module-table tbody tr { background: rgba(255, 255, 255, 0.018) !important; }
#dentureRecordFormModal .inventory-module-table td { color: #edf3f0 !important; border-color: rgba(220, 232, 227, 0.07) !important; background: transparent !important; }

#dentureRecordFormModal .supplier-upload-field > span { color: rgba(242, 247, 244, 0.78) !important; }
#dentureRecordFormModal .denture-record-upload-box {
    color: rgba(235, 242, 238, 0.64) !important;
    border-color: rgba(220, 232, 227, 0.18) !important;
    background: radial-gradient(circle at 50% 0%, rgba(104, 231, 142, 0.05), transparent 46%), rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
}

#dentureRecordFormModal .denture-record-upload-trigger button {
    color: #dce6e1 !important;
    border-color: rgba(104, 231, 142, 0.32) !important;
    background: rgba(104, 231, 142, 0.07) !important;
}

#dentureRecordFormModal .supplier-form-actions {
    border-color: rgba(220, 232, 227, 0.09) !important;
    background: rgba(10, 14, 15, 0.95) !important;
}

#dentureRecordFormModal .light-btn,
#dentureRecordFormModal .icon-btn {
    color: rgba(245, 248, 246, 0.82) !important;
    border-color: rgba(220, 232, 227, 0.13) !important;
    background: rgba(255, 255, 255, 0.055) !important;
}

@media (prefers-reduced-transparency: reduce) {
    .pending-record-modal .dashboard-followup-stats-dialog,
    #dentureRecordFormModal .denture-record-form-card {
        background-image: none !important;
        background-color: #101415 !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

/* Follow-up workspace color lock: white type, black controls, green selection. */
#followupModal {
    --followup-white: #f4f8f6;
    --followup-muted: rgba(244, 248, 246, 0.66);
    --followup-black: #0b1010;
    --followup-control: #121717;
    --followup-control-hover: #1a2020;
    --followup-line: rgba(244, 248, 246, 0.13);
    --followup-green: #68e78e;
    --followup-green-ink: #07110b;
}

#followupModal :is(h1, h2, h3, h4, strong, label, p, span, small, b, em) {
    color: var(--followup-white) !important;
    -webkit-text-fill-color: currentColor !important;
}

#followupModal :is(.followup-expand-check, .followup-form-row, .followup-config-head > span, .followup-radio-line, .followup-plan-grid label) {
    color: var(--followup-white) !important;
}

#followupModal :is(.followup-record-paper-meta, .followup-record-paper-lines .patient-record-line, .followup-note-card p) {
    color: var(--followup-muted) !important;
}

#followupModal :is(input, select, textarea, .followup-visit-time-display, .followup-card-select-trigger) {
    color: var(--followup-white) !important;
    border-color: var(--followup-line) !important;
    background: var(--followup-control) !important;
    box-shadow: none !important;
}

#followupModal :is(input, textarea)::placeholder {
    color: rgba(244, 248, 246, 0.42) !important;
}

#followupModal :is(input, select, textarea, .followup-card-select-trigger):focus,
#followupModal .followup-card-select.open .followup-card-select-trigger {
    outline: 0 !important;
    border-color: rgba(104, 231, 142, 0.58) !important;
    background: var(--followup-control) !important;
    box-shadow: 0 0 0 3px rgba(104, 231, 142, 0.08) !important;
}

#followupModal input:is([type="radio"], [type="checkbox"]) {
    accent-color: var(--followup-green) !important;
}

#followupModal :is(button, .primary-btn, .light-btn, .followup-add-plan) {
    color: var(--followup-white) !important;
    border-color: var(--followup-line) !important;
    background: var(--followup-black) !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-text-fill-color: var(--followup-white) !important;
}

#followupModal :is(button, .primary-btn, .light-btn, .followup-add-plan):hover:not(.active):not(:disabled) {
    color: var(--followup-white) !important;
    border-color: rgba(244, 248, 246, 0.24) !important;
    background: var(--followup-control-hover) !important;
    transform: none !important;
}

#followupModal :is(button.active, .followup-modal-tabs button.active, .followup-modal-left header button.active, .followup-time-unit button.active) {
    color: var(--followup-green-ink) !important;
    border-color: var(--followup-green) !important;
    background: var(--followup-green) !important;
    background-image: none !important;
    box-shadow: none !important;
    -webkit-text-fill-color: var(--followup-green-ink) !important;
}

#followupModal .followup-plan-box header [data-followup-plan-date] {
    color: var(--followup-white) !important;
}

#followupModal .followup-plan-box header button {
    color: var(--followup-white) !important;
    border: 1px solid var(--followup-line) !important;
    border-radius: 8px;
    padding: 5px 9px;
    background: var(--followup-black) !important;
}

#followupModal .followup-radio-line b {
    color: var(--followup-white) !important;
    border: 1px solid var(--followup-line);
    background: var(--followup-black) !important;
    -webkit-text-fill-color: var(--followup-white) !important;
}

#followupModal .followup-plan-grid > p {
    color: var(--followup-white) !important;
    -webkit-text-fill-color: var(--followup-white) !important;
}

#followupModal .followup-patient-summary button {
    color: var(--followup-white) !important;
    border: 1px solid var(--followup-line) !important;
    background: var(--followup-black) !important;
}

#followupModal :is(.treatment-tooth-map, .patient-treatment-tooth-map, .invoice-tooth-map) {
    border-color: var(--followup-line) !important;
    background: var(--followup-black) !important;
    box-shadow: none !important;
}

#followupModal :is(.treatment-tooth-map, .patient-treatment-tooth-map, .invoice-tooth-map) .tooth-line {
    background: rgba(244, 248, 246, 0.72) !important;
}

#followupModal :is(.treatment-tooth-map, .patient-treatment-tooth-map, .invoice-tooth-map) .invoice-tooth-quadrant {
    color: var(--followup-white) !important;
    -webkit-text-fill-color: var(--followup-white) !important;
}

#followupModal .charge-tooth-card {
    color: var(--followup-white) !important;
    border-color: var(--followup-line) !important;
    background: #101515 !important;
}

#followupModal .charge-tooth-unit {
    color: var(--followup-white) !important;
    border-color: var(--followup-line) !important;
    background: var(--followup-black) !important;
}

#followupModal .charge-tooth-unit.selected {
    color: var(--followup-green-ink) !important;
    border-color: var(--followup-green) !important;
    background: var(--followup-green) !important;
    -webkit-text-fill-color: var(--followup-green-ink) !important;
}

#followupModal .followup-modal-close {
    color: var(--followup-white) !important;
    border-color: var(--followup-line) !important;
    background: var(--followup-black) !important;
}

/* Today-work metric actions: value first, centered action control second. */
#dashboard .dashboard-clause-rail .mini-stats :is(.dashboard-work-action-card, .denture-mini-stat) {
    position: relative;
    padding-right: 104px !important;
}

#dashboard .dashboard-clause-rail .mini-stats :is(.dashboard-work-action-card, .denture-mini-stat) > b {
    position: absolute;
    top: 50%;
    right: 62px;
    margin: 0 !important;
    transform: translateY(-50%);
    text-align: right;
    line-height: 1;
}

#dashboard .dashboard-clause-rail .mini-stats .dashboard-work-action-card::after {
    content: "›" !important;
    top: 50% !important;
    right: 16px !important;
    display: grid;
    place-items: center;
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(244, 248, 246, 0.18) !important;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.045);
    color: rgba(244, 248, 246, 0.76);
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
    transform: translateY(-50%) !important;
}

#dashboard .dashboard-clause-rail .denture-mini-stat .neon-button {
    top: 50% !important;
    right: 16px !important;
    display: grid !important;
    place-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
    text-align: center;
}

#dashboard .dashboard-clause-rail .mini-stats .dashboard-work-action-card > small {
    padding-right: 0;
}

/* Denture record modal: keep compound pickers and their popovers on the dark surface. */
#dentureRecordFormModal .denture-factory-product-picker {
    overflow: hidden;
    border-color: rgba(244, 248, 246, 0.15) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    box-shadow: none !important;
}

#dentureRecordFormModal .denture-factory-product-picker textarea {
    border: 0 !important;
    background: transparent !important;
    color: #f4f8f6 !important;
    box-shadow: none !important;
}

#dentureRecordFormModal .denture-factory-product-picker textarea::placeholder {
    color: rgba(244, 248, 246, 0.42) !important;
}

#dentureRecordFormModal .denture-factory-product-picker > button,
#dentureRecordFormModal .denture-delivery-date-picker > button {
    border-color: rgba(244, 248, 246, 0.12) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: rgba(244, 248, 246, 0.76) !important;
    box-shadow: none !important;
}

#dentureRecordFormModal .denture-factory-product-picker > button:hover,
#dentureRecordFormModal .denture-delivery-date-picker > button:hover {
    background: rgba(54, 225, 143, 0.12) !important;
    color: #65e6a4 !important;
}

.denture-factory-product-menu,
.denture-delivery-date-popover {
    border-color: rgba(244, 248, 246, 0.16) !important;
    background: #111616 !important;
    color: #f4f8f6 !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.56) !important;
}

.denture-factory-product-menu button,
.denture-delivery-date-popover button {
    border-color: rgba(244, 248, 246, 0.12) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #f4f8f6 !important;
}

.denture-factory-product-menu button:hover,
.denture-delivery-date-popover button:hover {
    border-color: rgba(54, 225, 143, 0.42) !important;
    background: rgba(54, 225, 143, 0.12) !important;
}

.denture-factory-product-menu small,
.denture-delivery-date-popover :is(small, .muted) {
    color: rgba(244, 248, 246, 0.58) !important;
}

.denture-delivery-date-popover :is(header, footer, .calendar-weekdays) {
    border-color: rgba(244, 248, 246, 0.1) !important;
    background: transparent !important;
    color: rgba(244, 248, 246, 0.68) !important;
}

.denture-delivery-date-popover button:is(.active, [aria-selected="true"]),
.denture-delivery-date-popover .is-selected {
    border-color: #36e18f !important;
    background: #36e18f !important;
    color: #07110c !important;
}

.denture-delivery-date-popover header strong {
    color: #f4f8f6 !important;
}

.denture-delivery-calendar-week {
    color: rgba(244, 248, 246, 0.54) !important;
}

.denture-delivery-calendar-days button {
    background: transparent !important;
    color: rgba(244, 248, 246, 0.84) !important;
}

.denture-delivery-calendar-days button.outside {
    color: rgba(244, 248, 246, 0.28) !important;
}

.denture-delivery-calendar-days button.today {
    color: #65e6a4 !important;
    box-shadow: inset 0 0 0 1px rgba(54, 225, 143, 0.64) !important;
}

.denture-delivery-calendar-days button.selected {
    background: #36e18f !important;
    color: #07110c !important;
    box-shadow: none !important;
}

/* Inventory cost-adjustment ledger: remove the remaining legacy light surfaces. */
#inventory .inventory-adjustment-ledger {
    border-color: rgba(244, 248, 246, 0.12) !important;
    background: #101514 !important;
}

#inventory .inventory-adjustment-ledger .inventory-adjustment-toolbar {
    border-bottom-color: rgba(244, 248, 246, 0.1) !important;
    background: rgba(255, 255, 255, 0.025) !important;
}

#inventory .inventory-adjustment-ledger .inventory-adjustment-toolbar label {
    color: rgba(244, 248, 246, 0.68) !important;
}

#inventory .inventory-adjustment-ledger .inventory-adjustment-toolbar input {
    border-color: rgba(244, 248, 246, 0.15) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: #f4f8f6 !important;
    color-scheme: dark;
    box-shadow: none !important;
}

#inventory .inventory-adjustment-ledger .inventory-adjustment-toolbar .light-btn {
    border-color: rgba(244, 248, 246, 0.15) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    color: #f4f8f6 !important;
}

#inventory .inventory-adjustment-ledger .inventory-adjustment-toolbar .light-btn:hover {
    border-color: rgba(54, 225, 143, 0.42) !important;
    background: rgba(54, 225, 143, 0.12) !important;
}

#inventory .inventory-adjustment-ledger .inventory-adjustment-kpis {
    gap: 1px;
    border-bottom-color: rgba(244, 248, 246, 0.1) !important;
    background: rgba(244, 248, 246, 0.1) !important;
}

#inventory .inventory-adjustment-ledger .inventory-adjustment-kpis article {
    background: rgba(255, 255, 255, 0.04) !important;
}

#inventory .inventory-adjustment-ledger .inventory-adjustment-kpis span {
    color: rgba(244, 248, 246, 0.58) !important;
}

#inventory .inventory-adjustment-ledger .inventory-adjustment-kpis strong:not(.negative):not(.positive) {
    color: #f4f8f6 !important;
}

/* People and department dialogs: dark application theme. */
.people-employee-modal .people-employee-form {
    border-color: rgba(244, 248, 246, 0.15) !important;
    background: #101514 !important;
    color: #f4f8f6 !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62) !important;
}

.people-employee-modal .people-employee-form header {
    border-bottom-color: rgba(244, 248, 246, 0.1) !important;
    background: radial-gradient(circle at 12% 0, rgba(54, 225, 143, 0.1), transparent 55%), rgba(255, 255, 255, 0.025) !important;
}

.people-employee-modal .people-employee-form header h2,
.people-employee-modal .department-manager-list article strong {
    color: #f4f8f6 !important;
}

.people-employee-modal .people-employee-form header p {
    color: rgba(244, 248, 246, 0.58) !important;
}

.people-employee-modal .people-employee-form header > button {
    border: 1px solid rgba(244, 248, 246, 0.1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(244, 248, 246, 0.7) !important;
}

.people-employee-modal .people-employee-form header > button:hover {
    background: rgba(54, 225, 143, 0.12) !important;
    color: #65e6a4 !important;
}

.people-employee-modal .people-form-grid label,
.people-employee-modal .department-inline-editor label {
    color: rgba(244, 248, 246, 0.76) !important;
}

.people-employee-modal :is(.people-form-grid, .department-inline-editor) :is(input, select),
.people-employee-modal .system-card-select,
.people-employee-modal .system-card-select-trigger {
    border-color: rgba(244, 248, 246, 0.15) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: #f4f8f6 !important;
    box-shadow: none !important;
    color-scheme: dark;
}

.people-employee-modal :is(input, textarea)::placeholder {
    color: rgba(244, 248, 246, 0.36) !important;
}

.people-employee-modal .system-card-select-menu {
    border-color: rgba(244, 248, 246, 0.15) !important;
    background: #151b19 !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.58) !important;
}

.people-employee-modal .system-card-select-menu button {
    background: transparent !important;
    color: rgba(244, 248, 246, 0.78) !important;
}

.people-employee-modal .system-card-select-menu button:hover,
.people-employee-modal .system-card-select-menu button.active {
    background: rgba(54, 225, 143, 0.12) !important;
    color: #65e6a4 !important;
}

.people-employee-modal .people-employee-form footer {
    border-top-color: rgba(244, 248, 246, 0.1) !important;
    background: rgba(255, 255, 255, 0.025) !important;
}

.people-employee-modal .light-btn {
    border-color: rgba(244, 248, 246, 0.14) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f4f8f6 !important;
}

.people-employee-modal .primary-btn {
    border-color: #36e18f !important;
    background: #36e18f !important;
    color: #07110c !important;
    box-shadow: none !important;
}

.people-employee-modal button:disabled {
    border-color: rgba(244, 248, 246, 0.08) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: rgba(244, 248, 246, 0.3) !important;
}

.people-employee-modal .department-manager-list article,
.people-employee-modal .department-manager-list article.department-editor-row {
    border-color: rgba(244, 248, 246, 0.12) !important;
    background: rgba(255, 255, 255, 0.035) !important;
    box-shadow: none !important;
}

.people-employee-modal .department-manager-list article:hover {
    border-color: rgba(54, 225, 143, 0.34) !important;
    background: rgba(54, 225, 143, 0.055) !important;
}

/* Invoice center: remove legacy light KPI and empty-state surfaces. */
#pendingInvoices .pending-invoice-kpis {
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(244, 248, 246, 0.12);
    border-radius: 15px;
    background: rgba(244, 248, 246, 0.1) !important;
}

#pendingInvoices .pending-invoice-kpis article {
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: none !important;
}

#pendingInvoices .pending-invoice-kpis span {
    color: rgba(244, 248, 246, 0.58) !important;
}

#pendingInvoices .pending-invoice-kpis small {
    color: rgba(244, 248, 246, 0.7) !important;
}

#pendingInvoices .pending-invoice-kpis strong {
    color: #f4f8f6 !important;
}

#pendingInvoices .pending-invoice-panel,
#pendingInvoices .pending-invoice-panel > header,
#pendingInvoices .pending-invoice-table-wrap {
    border-color: rgba(244, 248, 246, 0.12) !important;
    background: #101514 !important;
    box-shadow: none !important;
}

#pendingInvoices .pending-invoice-table :is(th, td) {
    border-color: rgba(244, 248, 246, 0.09) !important;
    background: rgba(255, 255, 255, 0.025) !important;
    color: rgba(244, 248, 246, 0.76) !important;
}

#pendingInvoices .pending-invoice-table th {
    background: rgba(255, 255, 255, 0.055) !important;
    color: rgba(244, 248, 246, 0.68) !important;
}

#pendingInvoices .pending-invoice-table td.empty {
    height: 54px;
    background: rgba(255, 255, 255, 0.035) !important;
    color: rgba(244, 248, 246, 0.42) !important;
}

#pendingInvoices .pending-invoice-table tbody tr,
#pendingInvoices .pending-invoice-table tbody tr:nth-child(even) {
    background: #101514 !important;
    color: rgba(244, 248, 246, 0.76) !important;
}

#pendingInvoices .pending-invoice-table tbody td {
    background: #121817 !important;
}

#pendingInvoices .pending-invoice-table tbody tr:hover td {
    background: #18211e !important;
    color: #f4f8f6 !important;
}

#pendingInvoices .pending-invoice-patient strong,
#pendingInvoices .pending-invoice-preview strong {
    color: #f4f8f6 !important;
}

#pendingInvoices :is(.pending-invoice-patient small, .pending-invoice-review > small) {
    color: rgba(244, 248, 246, 0.5) !important;
}

#pendingInvoices .pending-invoice-preview,
#pendingInvoices .pending-invoice-upload,
#pendingInvoices .pending-invoice-status-toggle {
    border-color: rgba(244, 248, 246, 0.14) !important;
    background: rgba(255, 255, 255, 0.045) !important;
    color: rgba(244, 248, 246, 0.78) !important;
    box-shadow: none !important;
}

#pendingInvoices .pending-invoice-status-toggle button:not(.active) {
    background: transparent !important;
    color: rgba(244, 248, 246, 0.62) !important;
}

/* Invoice information dialog: dark readable surfaces. */
.patient-invoice-info-modal .patient-invoice-info-card {
    border-color: rgba(244, 248, 246, 0.15) !important;
    background: #0f1413 !important;
    color: #f4f8f6 !important;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.68) !important;
}

.patient-invoice-info-modal .patient-invoice-info-card > :is(header, footer) {
    border-color: rgba(244, 248, 246, 0.1) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.patient-invoice-info-modal .patient-invoice-info-card > header h2,
.patient-invoice-info-modal .patient-invoice-empty strong {
    color: #f4f8f6 !important;
}

.patient-invoice-info-modal .patient-invoice-info-card > header p,
.patient-invoice-info-modal .patient-invoice-info-card > footer p {
    color: rgba(244, 248, 246, 0.56) !important;
}

.patient-invoice-info-modal .patient-invoice-info-card > header span {
    color: #65e6a4 !important;
}

.patient-invoice-info-modal .patient-invoice-info-card > header button {
    border: 1px solid rgba(244, 248, 246, 0.1) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(244, 248, 246, 0.72) !important;
}

.patient-invoice-info-modal .patient-invoice-summary {
    border-bottom-color: rgba(244, 248, 246, 0.1) !important;
    background: rgba(255, 255, 255, 0.018) !important;
}

.patient-invoice-info-modal .patient-invoice-summary button {
    border-color: rgba(244, 248, 246, 0.12) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(244, 248, 246, 0.74) !important;
    box-shadow: none !important;
}

.patient-invoice-info-modal .patient-invoice-summary button:hover {
    border-color: rgba(54, 225, 143, 0.38) !important;
    background: rgba(54, 225, 143, 0.07) !important;
}

.patient-invoice-info-modal .patient-invoice-summary button.active {
    border-color: #36e18f !important;
    background: rgba(54, 225, 143, 0.12) !important;
}

.patient-invoice-info-modal .patient-invoice-summary button :is(span, strong, small) {
    color: inherit !important;
}

.patient-invoice-info-modal .patient-invoice-summary button.active :is(span, strong, small) {
    color: #65e6a4 !important;
}

.patient-invoice-info-modal .patient-invoice-info-card > main {
    background: #0f1413 !important;
}

.patient-invoice-info-modal .patient-invoice-category-section {
    border-color: rgba(244, 248, 246, 0.12) !important;
    background: #121817 !important;
}

.patient-invoice-info-modal .patient-invoice-category-section > header {
    border-bottom-color: rgba(244, 248, 246, 0.1) !important;
    background: rgba(255, 255, 255, 0.035) !important;
}

.patient-invoice-info-modal .patient-invoice-category-section > header b,
.patient-invoice-info-modal .patient-invoice-ticket strong {
    color: #f4f8f6 !important;
}

.patient-invoice-info-modal .patient-invoice-category-section > header span {
    background: rgba(54, 225, 143, 0.12) !important;
    color: #65e6a4 !important;
}

.patient-invoice-info-modal .patient-invoice-category-section > header > strong,
.patient-invoice-info-modal .patient-invoice-ticket-index b {
    color: #65e6a4 !important;
}

.patient-invoice-info-modal .patient-invoice-ticket {
    border-bottom-color: rgba(244, 248, 246, 0.08) !important;
    background: #121817 !important;
}

.patient-invoice-info-modal .patient-invoice-ticket-index {
    border-right-color: rgba(244, 248, 246, 0.1) !important;
}

.patient-invoice-info-modal .patient-invoice-ticket :is(span, small),
.patient-invoice-info-modal .patient-invoice-empty,
.patient-invoice-info-modal .patient-invoice-empty-category {
    color: rgba(244, 248, 246, 0.5) !important;
}

.patient-invoice-info-modal .patient-invoice-ticket-amount strong {
    color: #f0bc67 !important;
}

.patient-invoice-info-modal .patient-invoice-info-card > footer .primary-btn {
    border-color: rgba(244, 248, 246, 0.14) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    color: #f4f8f6 !important;
    box-shadow: none !important;
}