:root {
  color-scheme: light;
  --ink: #172126;
  --muted: #66717a;
  --line: #dde4e8;
  --panel: #ffffff;
  --page: #f4f7f6;
  --side: #203035;
  --side-ink: #edf7f4;
  --teal: #118c7e;
  --teal-dark: #0c6f65;
  --green: #2f7d4f;
  --amber: #a66614;
  --red: #b83232;
  --lavender: #6656a5;
  --shadow: 0 12px 26px rgba(22, 32, 36, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--page);
  color: var(--ink);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

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

button {
  cursor: pointer;
}

button:disabled,
.btn:disabled {
  cursor: progress;
  opacity: 0.62;
  filter: grayscale(0.12);
}

form.is-busy {
  position: relative;
}

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

.sidebar {
  background: var(--side);
  color: var(--side-ink);
  padding: 20px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  margin-bottom: 26px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #e7f7f0;
  color: var(--teal-dark);
  font-weight: 800;
}

.brand-title {
  font-size: 18px;
  font-weight: 760;
}

.brand-subtitle {
  color: #b7c7c3;
  font-size: 12px;
  margin-top: 2px;
}

.build-marker {
  color: #9eb0ac;
  font-size: 11px;
  margin: -14px 0 20px 54px;
}

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

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

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

.nav-glyph {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 800;
}

.main {
  min-width: 0;
}

.topbar {
  min-height: 72px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  position: sticky;
  top: 0;
  z-index: 5;
}

.page-title {
  font-size: 22px;
  font-weight: 760;
  margin: 0;
}

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

.user-chip {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  min-width: 180px;
}

.user-chip strong {
  font-size: 13px;
}

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

.content {
  padding: 24px 28px 44px;
}

.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 440px) minmax(0, 1fr);
  background:
    linear-gradient(120deg, rgba(17, 140, 126, 0.12), rgba(47, 125, 79, 0.06)),
    var(--page);
}

.login-panel {
  background: var(--panel);
  padding: 48px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-visual {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(17, 140, 126, 0.9), rgba(32, 48, 53, 0.94)),
    repeating-linear-gradient(90deg, transparent 0 52px, rgba(255, 255, 255, 0.08) 52px 53px);
}

.login-visual::before,
.login-visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.login-visual::before {
  width: min(520px, 66vw);
  height: 320px;
  right: 9%;
  top: 18%;
}

.login-visual::after {
  width: min(420px, 58vw);
  height: 180px;
  right: 16%;
  top: 56%;
}

.login-title {
  margin: 22px 0 8px;
  font-size: 30px;
}

.login-copy {
  margin: 0 0 28px;
  color: var(--muted);
  line-height: 1.5;
}

.form-grid {
  display: grid;
  gap: 14px;
}

.patient-create-fields {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-row {
  display: grid;
  gap: 6px;
}

.form-row label {
  color: #3c4b51;
  font-size: 13px;
  font-weight: 680;
}

.field,
input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #cbd7dc;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}

textarea {
  min-height: 92px;
  resize: vertical;
}

.multi-select {
  min-height: 112px;
}

.staff-assignments {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.staff-workspace > .panel { min-width: 0; }
.branch-workspace > .panel { min-width: 0; }
.numbering-settings { margin-bottom: 18px; }
.numbering-settings form { max-width: 700px; }
.patient-id-list { overflow-wrap: anywhere; }
.staff-assignments legend {
  padding: 0 0 6px;
  color: #3c4b51;
  font-size: 13px;
  font-weight: 680;
}
.staff-branch-picker, .department-picker {
  border: 1px solid #cbd7dc;
  border-radius: 8px;
  padding: 6px;
  max-height: 300px;
  overflow-y: auto;
}
.staff-branch-option, .department-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px;
  cursor: pointer;
}
.staff-branch-option input, .department-option input {
  flex: 0 0 18px;
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
}
.staff-branch-option span, .department-option span {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.5;
}
.staff-branch-help { margin: 6px 0 0; font-size: 12px; }
#portal-controls, #portal-controls label { min-width: 0; overflow-wrap: anywhere; }
.portal-dialog { width: min(620px,94vw); max-height: 90vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; }
.portal-dialog::backdrop { background: rgba(0,0,0,.4); }
.account-security-recovery-dialog > .form-grid { gap: 16px; padding: 12px; }
.account-security-recovery-dialog h2, .account-security-recovery-dialog h3,
.account-security-recovery-dialog p { margin: 0; }
.account-security-recovery-dialog [data-security-countdown] { padding: 12px; border-radius: 8px; background: #e7f7f0; color: var(--teal-dark); }
.account-security-recovery-dialog [data-recovery-codes] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin: 0; padding: 16px 16px 16px 36px; border: 1px solid var(--line); border-radius: 8px; }
.account-security-recovery-dialog code { overflow-wrap: anywhere; }
.account-security-recovery-dialog .checkbox-row { display: flex; align-items: flex-start; gap: 10px; }
.account-security-recovery-dialog .checkbox-row input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.account-security-recovery-dialog button:disabled { cursor: not-allowed; }
@media (max-width: 480px) {
  .account-security-recovery-dialog [data-recovery-codes] { grid-template-columns: minmax(0, 1fr); }
}
.portal-code { overflow-wrap: anywhere; padding: 12px; background: #e4f5f0; user-select: all; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(17, 140, 126, 0.12);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3c4b51;
  font-size: 13px;
}

.checkbox-row input {
  width: 18px;
  min-height: 18px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.toolbar-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  gap: 8px;
  margin-bottom: 12px;
}

.section-copy {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.table-actions {
  gap: 6px;
}

.table-actions .btn {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
}

.invoice-lines {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfa;
  overflow-x: auto;
}

.invoice-lines-head,
.invoice-line-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.invoice-lines-head h4 {
  margin: 0;
  font-size: 16px;
}

.invoice-line-head,
.invoice-line-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.85fr) minmax(145px, 1fr) minmax(180px, 1.25fr) 68px 90px 76px 92px 88px 76px;
  gap: 8px;
  align-items: center;
  min-width: 1040px;
}

.invoice-line-head {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.invoice-line-row input,
.invoice-line-row select {
  min-height: 38px;
  padding: 8px 10px;
}

.invoice-line-row output {
  min-height: 38px;
  display: flex;
  align-items: center;
  font-weight: 720;
}

.invoice-line-field { display: grid; gap: 6px; min-width: 0; }
.invoice-line-field > span { display: none; color: var(--muted); font-size: 12px; font-weight: 600; }

.invoice-line-remove {
  min-height: 38px;
  padding-inline: 8px;
}

.invoice-line-summary {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.invoice-line-summary strong {
  color: var(--ink);
  font-size: 16px;
}

.btn {
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 14px;
  font-weight: 720;
  background: #edf3f1;
  color: #223135;
}

.btn:hover {
  filter: brightness(0.98);
}

.btn.primary {
  background: var(--teal);
  color: #ffffff;
}

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

.btn.warning {
  background: #fff4df;
  color: #74450b;
  border-color: #efd39e;
}

.btn.ghost {
  background: transparent;
  border-color: var(--line);
}

.btn.danger {
  background: #fff1f1;
  color: var(--red);
  border-color: #f1c4c4;
}

.section {
  margin-bottom: 24px;
}

.app-page-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 18px;
}

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

.section-title {
  margin: 0;
  font-size: 18px;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
}

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

.metric-card {
  min-height: 118px;
  padding: 16px;
  display: grid;
  align-content: space-between;
}

.metric-label {
  color: var(--muted);
  font-size: 13px;
}

.metric-value {
  font-size: 30px;
  font-weight: 820;
}

.metric-card.teal {
  border-top: 4px solid var(--teal);
}

.metric-card.green {
  border-top: 4px solid var(--green);
}

.metric-card.amber {
  border-top: 4px solid var(--amber);
}

.metric-card.lavender {
  border-top: 4px solid var(--lavender);
}

.metric-card.red {
  border-top: 4px solid var(--red);
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.billing-page .panel,
.whatsapp-page .panel {
  box-shadow: 0 10px 24px rgba(22, 32, 36, 0.06);
}

.billing-composer > .section-head {
  align-items: flex-start;
}

.billing-meta-grid,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}

.automation-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 12px 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfa;
}

.automation-box .inline-section-head {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.status-metrics .metric-value {
  font-size: 26px;
}

.whatsapp-ops-grid {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.whatsapp-logs-grid {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.document-table table {
  min-width: 860px;
}

.visit-grid {
  grid-template-columns: minmax(340px, 520px) minmax(0, 1fr);
}

.setup-grid {
  margin-top: 18px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.panel {
  padding: 18px;
}

.physio-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid #d6e4df;
  border-radius: 8px;
  background: #f7fbf9;
}

.physio-panel .section-head {
  margin-bottom: 0;
}

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

.form-section {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #dce7e3;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.form-section h4 {
  margin: 0;
  color: #26383d;
  font-size: 14px;
}

.option-group {
  display: grid;
  gap: 8px;
}

.option-label {
  color: #3c4b51;
  font-size: 13px;
  font-weight: 680;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.option-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cbd7dc;
  border-radius: 8px;
  background: #ffffff;
  color: #26383d;
  font-size: 13px;
}

.option-chip input {
  width: 16px;
  min-height: 16px;
  margin: 0;
}

.measure-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.compact-field input,
.compact-field select {
  min-height: 38px;
}

.panel h3 {
  margin: 0 0 14px;
  font-size: 16px;
}

.table-wrap {
  width: 100%;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

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

.compact-table table {
  min-width: 520px;
}

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

th {
  color: #3c4b51;
  background: #f0f5f3;
  font-weight: 780;
}

tr:last-child td {
  border-bottom: 0;
}

tr.is-pending-row td {
  background: #fbf8ef;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 3px 9px;
  background: #edf3f1;
  color: #334349;
  font-size: 12px;
  font-weight: 720;
}

.badge.green {
  background: #e9f5ed;
  color: var(--green);
}

.badge.amber {
  background: #fff4df;
  color: var(--amber);
}

.badge.red {
  background: #fff1f1;
  color: var(--red);
}

.badge.teal {
  background: #e2f4f1;
  color: var(--teal-dark);
}

.muted {
  color: var(--muted);
}

.empty {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border: 1px dashed #c4d1d4;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.65);
  text-align: center;
  padding: 20px;
}

.empty.subtle {
  min-height: auto;
  place-items: start;
  justify-items: start;
  text-align: left;
  padding: 10px 12px;
  font-size: 13px;
}

.inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

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

.stacked-panels {
  display: grid;
  gap: 18px;
}

.toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  max-width: min(420px, calc(100vw - 40px));
  padding: 12px 14px;
  border-radius: 8px;
  background: #203035;
  color: #ffffff;
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 30;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.error-box {
  border: 1px solid #f0b7b7;
  border-radius: 8px;
  color: var(--red);
  background: #fff6f6;
  padding: 10px 12px;
  font-size: 13px;
}

.prescription-import {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f5faf9;
}

.prescription-import h4,
.prescription-import p {
  margin: 0;
}

.prescription-preview {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.prescription-review {
  padding: 14px;
  border: 1px solid #d5a242;
  border-radius: 8px;
  background: #fff7df;
  color: #61430d;
  display: grid;
  gap: 10px;
  overflow-wrap: anywhere;
}

.prescription-review dl { margin: 0; }
.prescription-review dt { font-weight: 600; }
.prescription-review dd { margin: 0 0 8px; white-space: pre-wrap; }
.prescription-review-check { display: flex; align-items: flex-start; gap: 10px; }
.prescription-review-check input { width: 18px; height: 18px; padding: 0; margin-top: 4px; flex-shrink: 0; }
.ai-filled { border-color: #b78b32; background: #fffdf5; }

.record-editing { border-color: #168c82; }
.record-editing > h3::after { content: " · Editing"; color: #168c82; font-size: 12px; }
.record-edit-fields { width: 100%; }
.app-page-stack > .panel,
.record-edit-fields,
.record-edit-fields .form-row { min-width: 0; }
.record-edit-fields:empty { display: none; }

.loading {
  min-height: 320px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.mobile-top {
  display: none;
}

@media (max-width: 1080px) {
  .branch-workspace { grid-template-columns: minmax(0, 1fr); }
  .staff-workspace { grid-template-columns: minmax(0, 1fr); }
  .invoice-line-field > span { display: block; }
  .metrics {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .workspace-grid {
    grid-template-columns: 1fr;
  }

  .billing-meta-grid,
  .settings-grid,
  .automation-box,
  .whatsapp-ops-grid,
  .whatsapp-logs-grid {
    grid-template-columns: 1fr;
  }

  .invoice-line-head {
    display: none;
  }

  .invoice-line-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 760px) {
  .billing-composer > .section-head { flex-wrap: wrap; }
  .billing-composer > .section-head > div { flex: 1 1 100%; min-width: 0; }
  .billing-composer > .section-head > .btn { flex: 1; }
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 12px;
  }

  .brand {
    margin-bottom: 12px;
  }

  .nav {
    grid-template-columns: repeat(3, 1fr);
  }

  .nav-button {
    justify-content: center;
    padding: 0 8px;
    font-size: 12px;
  }

  .nav-glyph {
    display: none;
  }

  .topbar {
    padding: 14px 16px;
    align-items: flex-start;
    gap: 12px;
    flex-direction: column;
  }

  .top-actions {
    width: 100%;
    justify-content: space-between;
  }

  .user-chip {
    min-width: 0;
    flex: 1;
  }

  .content {
    padding: 18px 16px 32px;
  }

  .login-page {
    grid-template-columns: 1fr;
  }

  .login-panel {
    min-height: 100vh;
    padding: 28px 20px;
    border-right: 0;
  }

  .login-visual {
    display: none;
  }

  .metrics,
  .two-col,
  .three-col,
  .measure-grid,
  .toolbar-row {
    grid-template-columns: 1fr;
  }

  .invoice-lines-head,
  .invoice-line-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .invoice-line-row {
    grid-template-columns: 1fr;
  }
}
:root { --visit-link-color: #087d73; }
.patient-history-link { border: 0; padding: 0; background: none; color: var(--visit-link-color); font: inherit; font-weight: 700; text-align: left; text-decoration: underline; cursor: pointer; }
.visit-history-dialog { width: min(1100px, 94vw); max-height: 90vh; overflow: auto; border: 1px solid #ccdcd9; border-radius: 14px; padding: 20px; }
.visit-history-dialog::backdrop { background: #142e38aa; }
.visit-history-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.visit-history-dialog h2 { overflow-wrap: anywhere; }
.visit-history-table tr[data-history-visit] { cursor: pointer; }
.visit-history-table tr[data-history-visit]:hover, .visit-history-table tr[data-history-visit]:focus { background: #e6f5f1; outline: 2px solid #087d73; outline-offset: -2px; }
.visit-detail-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.visit-detail-fields dt { font-weight: 700; }
.visit-detail-fields dd { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 650px) { .visit-detail-fields { grid-template-columns: 1fr; } .visit-history-dialog { padding: 12px; } }

/* Shared clinic design language: calm surfaces, clear hierarchy and generous targets. */
:root { --ink:#173136; --muted:#60747a; --line:#dce6e8; --page:#f4f7f9; --side:#102e32; --teal:#087f78; --teal-dark:#066a65; --shadow:0 3px 14px #183d4306; }
body { font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; }
button, a, input, select, textarea { -webkit-tap-highlight-color:transparent; }
button:focus-visible, a:focus-visible { outline:3px solid #54bdb4; outline-offset:3px; }
.skip-link { position:fixed; top:-100px; left:16px; background:white; color:var(--teal-dark); padding:12px 18px; z-index:100; border-radius:10px; }
.skip-link:focus { top:12px; }
.app-shell { grid-template-columns:242px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100dvh; overflow-y:auto; padding:26px 16px 18px; display:flex; flex-direction:column; }
.brand { margin-bottom:30px; }
.brand-mark { width:40px; height:40px; border-radius:12px; background:#e5f5f0; letter-spacing:-1px; }
.brand-title { font-size:17px; letter-spacing:-.3px; overflow-wrap:anywhere; }
.brand-subtitle { color:#9ebcba; font-size:11px; }
.nav-eyebrow { font-size:10px; font-weight:700; letter-spacing:1.7px; color:#789d9b; padding:0 12px 10px; }
.nav { gap:4px; }
.nav-button { border-radius:10px; min-height:44px; font-weight:500; color:#b8cfcd; padding:10px 12px; transition:background-color .15s,color .15s; }
.nav-button.active { background:#e3f4ef; color:#075c56; font-weight:700; }
.nav-button:hover:not(.active) { background:#ffffff0c; }
.nav-glyph { background:none; width:22px; height:22px; }
.sidebar-footer { margin-top:auto; padding:26px 10px 0; color:#90b0ad; font-size:10px; }
.sidebar-dot { display:inline-block; width:6px; height:6px; background:#5dbba6; border-radius:50%; margin-right:6px; }
.build-marker { margin:8px 0 0; font-size:9px; color:#6e9390; }
.topbar { min-height:88px; padding:16px 30px; background:#ffffffed; }
.page-heading { display:flex; align-items:center; gap:14px; min-width:0; }
.page-eyebrow { font-size:9px; letter-spacing:1.6px; color:var(--muted); font-weight:700; margin-bottom:3px; }
.page-title { font-size:24px; letter-spacing:-.7px; line-height:1.2; }
.user-chip { border:0; border-right:1px solid var(--line); border-radius:0; padding:0 18px 0 0; background:transparent; min-width:0; max-width:260px; }
.user-chip strong,.user-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-actions { gap:14px; }
.content { max-width:1800px; margin-inline:auto; padding:26px 30px 48px; }
.workspace-grid > *, .form-grid, .stacked-panels { min-width:0; }
fieldset { min-inline-size:0; }
.metric-card,.panel,.record-card { border-radius:16px; box-shadow:var(--shadow); }
.panel { padding:22px; }
.panel h3 { font-size:16px; font-weight:700; letter-spacing:-.25px; margin-top:0; }
.form-grid { gap:18px; }
.form-row label, #portal-controls label { font-size:12px; font-weight:600; color:#455f64; }
input,select,textarea { min-height:46px; border-color:var(--line); border-radius:10px; padding:12px 14px; font-size:14px; transition:border-color .15s,box-shadow .15s; }
input::placeholder,textarea::placeholder { color:#809195; }
input:disabled,select:disabled { background:#f4f7f8; color:#71858a; }
.btn { border-radius:10px; min-height:42px; padding:10px 16px; font-size:13px; font-weight:650; box-shadow:none; }
.btn.primary { background:var(--teal); }
.btn.ghost { border-color:var(--line); background:white; }
.btn.danger { background:#fff5f4; border-color:#f0d3d1; color:#a63e43; }
.btn:hover:not(:disabled) { filter:brightness(.97); }
.table-wrap { border-radius:12px; }
th { position:sticky; top:0; background:#f2f7f7; color:#52696f; font-size:11px; font-weight:700; letter-spacing:.3px; }
td { font-size:13px; padding:15px 14px; line-height:1.5; }
tbody tr:hover:not(.is-pending-row) td { background:#f8fbfb; }
.badge { border-radius:7px; font-size:11px; font-weight:650; padding:4px 9px; }
.table-actions .btn { min-height:34px; border-radius:8px; }
.patient-history-link { font-size:13px; text-decoration:none; }
.patient-history-link:hover { text-decoration:underline; }
.metric-card.teal,.metric-card.green,.metric-card.amber,.metric-card.lavender { border-top-width:1px; }
.metric-card { position:relative; padding:20px; min-height:120px; }
.metric-card::after { content:''; position:absolute; top:20px; right:20px; width:8px; height:8px; background:var(--teal); border-radius:50%; opacity:.6; }
.metric-card::after { content:none; }
.metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.workspace-grid form.panel { scroll-margin-top:110px; }
#patient-search-form { grid-template-columns:minmax(140px,.8fr) minmax(180px,1.4fr) auto auto; }
.metric-value { font-size:32px; font-weight:700; letter-spacing:-1.2px; font-variant-numeric:tabular-nums; }
.empty { border:1px dashed var(--line); border-radius:14px; background:#f9fbfc; color:var(--muted); line-height:1.7; }
.error-box { border-radius:12px; padding:14px 18px; line-height:1.6; }
.error-box strong { display:block; font-size:13px; margin-bottom:3px; }
.workspace-loading { color:var(--muted); font-size:13px; }
.skeleton-row { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:18px 0; }
.skeleton-row div { height:110px; }
.skeleton-panel { height:300px; }
.skeleton-row div,.skeleton-panel { border:1px solid var(--line); border-radius:16px; background:linear-gradient(110deg,#edf3f4 20%,#f9fbfc 40%,#edf3f4 60%); background-size:200% 100%; animation:workspace-pulse 1.6s ease infinite; }
@keyframes workspace-pulse { to { background-position:-200% 0; } }
.menu-toggle,.nav-close { display:none; }
.nav-scrim { position:fixed; inset:0; z-index:29; background:#082d3b66; border:0; border-radius:0; width:100%; }
.nav-scrim[hidden] { display:none; }
.password-field { position:relative; }
.password-field input { padding-right:72px; }
.password-field button { position:absolute; right:5px; top:3px; bottom:3px; width:62px; border:0; background:none; color:var(--teal-dark); font-weight:650; font-size:12px; }
.login-panel { padding:clamp(28px,5vw,64px); }
.login-title { letter-spacing:-1px; font-size:32px; }
.login-copy { font-size:14px; }
.login-visual { display:flex; align-items:center; padding:8%; background:radial-gradient(ellipse at 80% 10%,#26746e55,transparent 55%),#103c40; color:white; }
.login-visual::before,.login-visual::after { display:none; }
.login-hero { max-width:550px; }
.hero-kicker { color:#a0d4c9; font-size:11px; font-weight:700; letter-spacing:2px; }
.login-hero h2 { font-size:clamp(34px,4vw,58px); line-height:1.12; letter-spacing:-2px; margin:26px 0; }
.login-hero p { color:#b9d3d0; font-size:16px; max-width:370px; line-height:1.8; }
.hero-features { margin-top:42px; display:grid; gap:15px; font-size:13px; color:#d0e7e1; }
.hero-features span::before { content:'✓'; display:inline-grid; place-items:center; width:23px; height:23px; background:#ffffff10; border-radius:7px; margin-right:12px; color:#88cdb9; }
@media(min-width:1200px) { .workspace-grid { grid-template-columns:minmax(320px,.8fr) minmax(0,1.6fr); } }
@media(max-width:1023px) {
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workspace-grid { grid-template-columns:minmax(0,1fr); }
  .app-shell { display:block; }
  .sidebar { position:fixed; inset:0 auto 0 0; width:270px; height:100dvh; z-index:30; transform:translateX(-105%); transition:transform .2s ease; padding:26px 16px 18px; }
  .app-shell.nav-open .sidebar { transform:translateX(0); }
  body.navigation-open { overflow:hidden; }
  .nav { grid-template-columns:1fr; }
  .nav-button { justify-content:flex-start; font-size:14px; padding:10px 12px; }
  .nav-glyph { display:grid; }
  .nav-close { display:block; position:absolute; right:10px; top:8px; border:0; background:none; color:#cbe3dd; font-size:26px; width:40px; height:40px; }
  .menu-toggle { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:white; color:var(--ink); }
  .topbar { flex-direction:row; align-items:center; padding:14px 18px; gap:12px; min-height:80px; }
  .page-title { font-size:21px; }
  .content { padding:22px 18px 40px; }
  .user-chip { display:none; }
  .top-actions { width:auto; gap:8px; }
}
@media(max-width:600px) {
  .table-wrap::before { content:'Swipe to see all columns'; display:block; position:sticky; left:0; padding:8px 12px; color:var(--muted); font-size:11px; background:#f8fbfb; }
  #patient-search-form { grid-template-columns:minmax(0,1fr) auto auto; }
  #patient-search-form select { grid-column:1/-1; }
  .workspace-grid:has(#patient-form)>#patient-form { order:2; }
  .workspace-grid:has(#patient-form)>div.panel { order:1; }
  .top-actions { flex-wrap:wrap; }
  .topbar { padding:12px; flex-wrap:wrap; }
  .page-heading { flex:1; }
  .top-actions .btn { padding:8px 10px; min-height:40px; font-size:12px; }
  .page-eyebrow { font-size:8px; letter-spacing:1px; }
  .page-title { font-size:19px; }
  .content { padding:18px 12px 32px; }
  .panel { padding:18px 14px; border-radius:14px; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .metric-card { padding:16px; }
  .metric-value { font-size:28px; }
  .table-actions .btn { min-height:44px; }
  .login-panel { padding:32px 22px; }
  .login-visual { display:none; }
  .skeleton-row { grid-template-columns:1fr; gap:10px; }
  .skeleton-row div { height:70px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.record-list-workspace { grid-template-columns: minmax(0, 1fr) !important; }
.record-form-dialog {
  width: min(760px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--border, #d9e4e5);
  border-radius: 18px; background: var(--surface, #fff); color: inherit;
  box-shadow: 0 24px 80px #102f3d40; overscroll-behavior: contain;
}
.record-form-dialog::backdrop { background: #102b3e80; backdrop-filter: blur(3px); }
.record-form-dialog-visit, .record-form-dialog-billing, .record-form-dialog-whatsappTemplates { width: min(1120px, calc(100vw - 32px)); }
.whatsapp-form-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.whatsapp-form-actions .btn { min-height: 44px; }
.portal-form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.portal-listing-fields { display: grid; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.portal-listing-fields:disabled { opacity: .75; }
/* Appointment inbox: request list and reading pane share a stable workspace. */
.portal-workspace-summary > p { margin: 0; }
.panel.portal-inbox { padding: 0; overflow: hidden; margin-top: 20px; }
.portal-inbox-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 24px 16px; }
.portal-inbox-header h3 { margin: 0 0 6px; font-size: 19px; }
.portal-inbox-header p, .portal-reading-header p { margin: 0; color: var(--muted); font-size: 13px; }
.portal-inbox-header .portal-inbox-metrics { flex-basis: 100%; color: #657e82; font-size: 12px; line-height: 1.7; }
.portal-inbox-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 280px); gap: 14px; padding: 0 24px 18px; }
.portal-inbox-tools label { min-width: 0; font-size: 12px; font-weight: 600; color: #455f64; display: grid; gap: 6px; }
.portal-inbox-tools input, .portal-inbox-tools select { width: 100%; min-width: 0; margin: 0; }
.portal-inbox-folders { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 0 24px; border-bottom: 1px solid var(--line); }
.portal-inbox-folders button { display: inline-flex; align-items: center; gap: 8px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 12px 2px; background: transparent; color: #526b70; font: inherit; font-size: 13px; cursor: pointer; min-height: 44px; }
.portal-inbox-folders button[aria-pressed="true"] { color: #087b76; border-bottom-color: #087b76; font-weight: 700; }
.portal-inbox-panes { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); min-height: 560px; }
.portal-inbox-list { max-height: 700px; overflow-y: auto; overscroll-behavior: contain; border-right: 1px solid var(--line); background: #fbfdfd; min-width: 0; }
.portal-inbox-row { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #e6eded; border-left: 3px solid transparent; border-radius: 0; background: transparent; padding: 18px 16px; font: inherit; cursor: pointer; color: var(--ink); }
.portal-inbox-row:hover { background: #f0f7f6; }
.portal-inbox-row[aria-pressed="true"] { background: #e9f5f3; border-left-color: #087b76; }
.portal-inbox-row:focus-visible, .portal-inbox-folders button:focus-visible { outline: 2px solid #087b76; outline-offset: -3px; }
.portal-request-avatar { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #dcecea; color: #286660; font-weight: 700; font-size: 13px; }
.portal-request-preview { display: grid; gap: 6px; min-width: 0; flex: 1; }
.portal-request-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.portal-request-top strong { font-size: 14px; overflow-wrap: anywhere; }
.portal-request-top time { font-size: 11px; color: #667c80; white-space: nowrap; }
.portal-request-branch { font-size: 12px; color: #536f73; overflow-wrap: anywhere; }
.portal-request-snippet { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: #6b7e80; }
.portal-inbox-status { justify-self: start; display: inline-block; border-radius: 6px; padding: 3px 7px; background: #edf1f3; color: #526a70; font-size: 11px; font-weight: 600; }
.portal-inbox-status[data-status="requested"] { background: #fff2db; color: #8a5805; }
.portal-inbox-status[data-status="proposed"] { background: #eaf0ff; color: #425d9a; }
.portal-inbox-status[data-status="confirmed"] { background: #e0f3e9; color: #237348; }
.portal-inbox-reading { min-width: 0; max-height: 700px; overflow-y: auto; }
.portal-reading-content { padding: 28px 32px; overflow-wrap: anywhere; }
.portal-reading-header h3 { margin: 14px 0 8px; font-size: 25px; letter-spacing: -.4px; }
.portal-reading-header .portal-reading-branch { color: #345b60; font-weight: 600; margin-bottom: 5px; }
.portal-reading-time { display: grid; gap: 6px; margin: 24px 0; padding: 16px 18px; background: #f3f8f8; border: 1px solid #e1ebea; border-radius: 10px; }
.portal-reading-time span, .portal-reading-facts dt { color: #657e82; font-size: 12px; }
.portal-reading-time strong { font-size: 17px; }
.portal-reading-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin: 0 0 24px; }
.portal-reading-facts dd { margin: 5px 0 0; font-size: 14px; }
.portal-reading-message { border-top: 1px solid #e6eded; padding-top: 18px; margin-top: 18px; }
.portal-reading-message h4 { margin: 0 0 10px; font-size: 13px; color: #536f73; }
.portal-reading-message p { margin: 0; line-height: 1.65; white-space: pre-wrap; font-size: 14px; }
.portal-reading-actions { margin-top: 26px; }
.portal-reading-actions p { font-size: 12px; color: #657e82; line-height: 1.6; }
.portal-reading-empty, .portal-inbox-empty { text-align: center; padding: 56px 24px; color: #657e82; }
.portal-reading-empty > span { font-size: 42px; color: #99b8b7; }
.portal-reading-empty h3, .portal-inbox-empty h4 { color: #345b60; }
.portal-inbox-back { display: none; }
@media (max-width: 1100px) and (min-width: 801px) {
  .portal-inbox-panes { grid-template-columns: minmax(230px, 290px) minmax(0,1fr); }
  .portal-reading-content { padding: 24px; }
  .portal-reading-facts { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 800px) {
  .portal-inbox-header { padding: 20px 16px 16px; }
  .portal-inbox-tools { grid-template-columns: minmax(0,1fr); padding: 0 16px 16px; }
  .portal-inbox-folders { padding: 0 16px; gap: 0 14px; }
  .portal-inbox-panes { display: block; min-height: 0; }
  .portal-inbox-list { max-height: 65dvh; border: 0; }
  .portal-inbox-reading { display: none; max-height: none; }
  .portal-inbox[data-detail="true"] .portal-inbox-list { display: none; }
  .portal-inbox[data-detail="true"] .portal-inbox-tools, .portal-inbox[data-detail="true"] .portal-inbox-folders { display: none; }
  .portal-inbox[data-detail="true"] .portal-inbox-reading { display: block; }
  .portal-reading-content { padding: 20px 16px; }
  .portal-inbox-back { display: inline-flex; margin-bottom: 20px; }
  .portal-reading-facts { grid-template-columns: minmax(0,1fr); }
  .portal-reading-header h3 { font-size: 23px; }
}
.whatsapp-logs-grid, .whatsapp-logs-grid > .panel { min-width: 0; }
.whatsapp-page .toolbar-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.record-dialog-header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; background: #fff; border-bottom: 1px solid #d9e4e5; }
.record-dialog-header h2 { margin: 4px 0 0; font-size: 22px; }
.record-dialog-header p { margin: 0; }
.record-form-dialog > .panel { margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 24px; }
.record-form-dialog > .error-box { margin: 16px 24px 0; }
.record-dialog-footer { position: sticky; bottom: 0; z-index: 2; grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 12px; margin: 0 -24px 0; padding: 16px 24px; background: white; border-top: 1px solid #d9e4e5; }
.record-dialog-footer .btn { width: auto; }
body:has(.record-form-dialog[open]) { overflow: hidden; }
@media (max-width: 600px) {
  .portal-form-actions .btn { flex: 1 1 100%; white-space: normal; }
  .whatsapp-form-actions .btn { flex: 1 1 100%; }
  .record-form-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
  .record-dialog-header { padding: 16px; }
  .record-form-dialog > .panel { padding: 16px; }
  .record-dialog-footer { bottom: 0; margin: 0 -16px 0; padding: 12px 16px; }
  .record-dialog-footer .btn { flex: 1; }
}