:root {
  --navy-950: #0b2538;
  --navy-900: #12344c;
  --navy-800: #173f5b;
  --navy-700: #22577a;
  --navy-600: #2c6a8f;
  --teal-700: #087f76;
  --teal-600: #00a896;
  --teal-500: #2fb996;
  --teal-100: #dff7f2;
  --sky-100: #e8f5fb;
  --cream: #f0f3bd;
  --ink: #183142;
  --ink-soft: #587080;
  --muted: #738694;
  --line: #dfe8ed;
  --line-strong: #cedbe2;
  --surface: #ffffff;
  --surface-soft: #f6f9fb;
  --surface-tint: #eef5f7;
  --background: #f2f6f8;
  --success: #1c8a68;
  --success-bg: #e4f6ef;
  --warning: #9a6700;
  --warning-bg: #fff4d8;
  --danger: #b34351;
  --danger-bg: #fdebed;
  --info: #286f98;
  --info-bg: #e5f2f8;
  --shadow-sm: 0 1px 2px rgba(15, 39, 55, 0.05), 0 2px 10px rgba(15, 39, 55, 0.04);
  --shadow-md: 0 16px 40px rgba(15, 39, 55, 0.12);
  --shadow-lg: 0 28px 80px rgba(6, 28, 42, 0.24);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --sidebar-width: 268px;
  --topbar-height: 72px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--background);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 0;
  scroll-behavior: smooth;
  background: var(--background);
}

body {
  min-width: 0;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 85% 5%, rgba(47, 185, 150, 0.07), transparent 24rem),
    var(--background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.modal-open {
  overflow: hidden;
}

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

button,
a,
select,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

button:not(:disabled),
select:not(:disabled),
input[type="checkbox"]:not(:disabled),
input[type="file"]:not(:disabled) {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(0, 168, 150, 0.28);
  outline-offset: 2px;
}

img,
svg {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
dl,
dd,
ul {
  margin-top: 0;
}

h1,
h2,
h3,
strong {
  color: var(--ink);
}

h1 {
  font-size: clamp(1.65rem, 2.4vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
}

h2 {
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

h3 {
  font-size: 0.95rem;
  line-height: 1.35;
}

p {
  line-height: 1.55;
}

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.icon.flip {
  transform: rotate(180deg);
}

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

.section-kicker,
.eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--teal-700);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.prototype-pill,
.demo-label {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.09);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Login */
.login-page {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(430px, 0.88fr);
  background: var(--surface);
}

.login-brand-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(40px, 7vw, 96px);
  color: white;
  background:
    linear-gradient(145deg, rgba(11, 37, 56, 0.98), rgba(23, 63, 91, 0.96) 50%, rgba(8, 127, 118, 0.94));
}

.login-brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.login-brand-content {
  position: relative;
  z-index: 2;
  width: min(720px, 100%);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.brand-mark img {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,.14);
}

.brand-mark.large {
  margin-bottom: 36px;
  color: white;
  font-size: 2rem;
}

.brand-mark.large img {
  width: 56px;
  height: 56px;
  border-radius: 17px;
}

.login-brand-content h1 {
  max-width: 680px;
  margin: 22px 0 20px;
  color: white;
  font-size: clamp(2.6rem, 5vw, 5.3rem);
  line-height: 0.99;
  letter-spacing: -0.065em;
}

.login-brand-content > p {
  max-width: 650px;
  margin-bottom: 42px;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.login-feature-grid {
  max-width: 700px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.login-feature-grid > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
}

.login-feature-grid .icon {
  color: var(--cream);
}

.login-feature-grid span {
  min-width: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.83rem;
  line-height: 1.35;
}

.login-feature-grid strong {
  color: white;
}

.brand-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}

.orb-one {
  right: -130px;
  bottom: -170px;
  width: 430px;
  height: 430px;
  background: radial-gradient(circle at 35% 35%, rgba(240, 243, 189, 0.32), rgba(0, 168, 150, 0.03) 68%);
}

.orb-two {
  top: 8%;
  right: 10%;
  width: 170px;
  height: 170px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.login-form-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: clamp(28px, 5vw, 72px);
  background:
    radial-gradient(circle at 70% 10%, rgba(0, 168, 150, 0.08), transparent 16rem),
    var(--surface);
}

.login-card {
  width: min(460px, 100%);
  display: grid;
  gap: 19px;
}

.login-card h2 {
  margin: 4px 0 4px;
  font-size: 1.85rem;
  letter-spacing: -0.04em;
}

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

.login-form-panel footer,
.public-form-footer {
  color: var(--muted);
  font-size: 0.76rem;
  text-align: center;
}

.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #f0d99f;
  border-radius: 13px;
  padding: 12px 14px;
  color: #75520a;
  background: #fff8e7;
  font-size: 0.8rem;
  line-height: 1.45;
}

.demo-banner .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.field-label {
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #385364;
  font-size: 0.77rem;
  font-weight: 750;
}

.field-label input,
.field-label select,
.field-label textarea,
.search-field input,
.search-field select {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  padding: 11px 12px;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.field-label textarea {
  resize: vertical;
  line-height: 1.5;
}

.field-label input:hover,
.field-label select:hover,
.field-label textarea:hover,
.search-field input:hover,
.search-field select:hover {
  border-color: #abc2ce;
}

.field-label input:focus,
.field-label select:focus,
.field-label textarea:focus,
.search-field input:focus,
.search-field select:focus {
  border-color: var(--teal-600);
  box-shadow: 0 0 0 4px rgba(0, 168, 150, 0.09);
}

.input-with-icon,
.search-field {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
}

.input-with-icon .icon,
.search-field .icon {
  position: absolute;
  left: 13px;
  z-index: 1;
  width: 18px;
  height: 18px;
  color: #6f8794;
  pointer-events: none;
}

.input-with-icon input,
.search-field input,
.search-field select {
  padding-left: 42px;
}

.demo-credentials {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
}

code {
  max-width: 100%;
  overflow-wrap: anywhere;
  border-radius: 6px;
  padding: 2px 5px;
  color: var(--navy-800);
  background: var(--surface-tint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
}

.login-legal {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.55;
}

/* Shared buttons */
.button,
.icon-button,
.text-button,
.back-button {
  border: 0;
  text-decoration: none;
}

.button {
  min-width: 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.2;
  transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button.primary {
  color: white;
  background: linear-gradient(135deg, var(--navy-700), var(--teal-700));
  box-shadow: 0 8px 18px rgba(25, 95, 112, 0.16);
}

.button.primary:hover {
  box-shadow: 0 10px 24px rgba(25, 95, 112, 0.22);
}

.button.secondary {
  border: 1px solid var(--line-strong);
  color: var(--navy-700);
  background: var(--surface);
}

.button.secondary:hover,
.button.subtle:hover {
  border-color: #aac5d1;
  background: #f8fbfc;
}

.button.subtle {
  border: 1px solid var(--line);
  color: #426174;
  background: var(--surface-soft);
}

.button.danger-outline {
  border: 1px solid #e6afb6;
  color: var(--danger);
  background: white;
}

.button.wide {
  width: 100%;
}

.button.tiny {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.72rem;
}

.button .icon {
  width: 17px;
  height: 17px;
}

.icon-button {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: transparent;
  transition: background 150ms ease, color 150ms ease;
}

.icon-button:hover {
  color: var(--navy-700);
  background: var(--surface-tint);
}

.icon-button.quiet {
  color: #68808e;
}

.text-button,
.back-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px;
  color: var(--navy-700);
  background: transparent;
  font-size: 0.75rem;
  font-weight: 800;
}

.text-button .icon,
.back-button .icon {
  width: 16px;
  height: 16px;
}

.back-button {
  margin-bottom: 12px;
  color: #5f7888;
}

/* App shell */
.app-shell {
  min-width: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  min-width: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 20px 14px 14px;
  color: white;
  background:
    radial-gradient(circle at 40% 0%, rgba(0,168,150,.18), transparent 17rem),
    linear-gradient(180deg, var(--navy-950), #102f45 58%, #0e2b3e);
  box-shadow: 5px 0 22px rgba(10, 36, 52, 0.08);
}

.sidebar-top {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 8px 16px;
}

.sidebar-top .brand-mark {
  color: white;
}

.sidebar-top .demo-label {
  max-width: 92px;
  padding: 5px 7px;
  font-size: 0.54rem;
  text-align: center;
}

.nav-list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 8px 0 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.14) transparent;
}

.nav-item {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 11px;
  padding: 7px 10px;
  color: rgba(238, 247, 250, 0.7);
  background: transparent;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

.nav-item:hover {
  color: white;
  background: rgba(255,255,255,.07);
  transform: translateX(1px);
}

.nav-item.active {
  color: white;
  background: linear-gradient(90deg, rgba(47,185,150,.24), rgba(255,255,255,.08));
  box-shadow: inset 3px 0 0 var(--teal-500);
}

.nav-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: rgba(255,255,255,.65);
}

.nav-item.active .nav-icon {
  color: var(--cream);
  background: rgba(255,255,255,.08);
}

.nav-icon .icon {
  width: 19px;
  height: 19px;
}

.nav-badge {
  min-width: 23px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  padding: 0 6px;
  color: #d8fbf2;
  background: rgba(47,185,150,.18);
  font-size: .65rem;
  font-weight: 900;
}

.sidebar-bottom {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.09);
  padding-top: 13px;
}

.integration-mini-status,
.profile-card {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 11px;
  padding: 10px;
}

.integration-mini-status {
  color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.05);
  font-size: .72rem;
}

.integration-mini-status > div,
.profile-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.integration-mini-status strong,
.profile-card strong {
  overflow: hidden;
  color: white;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-mini-status small,
.profile-card small {
  color: rgba(255,255,255,.52);
}

.profile-card {
  width: 100%;
  border: 0;
  color: white;
  background: transparent;
  text-align: left;
}

.profile-card:hover {
  background: rgba(255,255,255,.07);
}

.profile-card > span:nth-child(2) {
  flex: 1;
  font-size: .76rem;
}

.profile-card .icon {
  width: 17px;
  color: rgba(255,255,255,.5);
}

.workspace {
  min-width: 0;
  min-height: 100dvh;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 22;
  min-width: 0;
  min-height: var(--topbar-height);
  display: grid;
  grid-template-columns: auto minmax(240px, 560px) auto;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(205, 220, 228, 0.8);
  padding: 10px 30px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
}

.topbar-title {
  display: none;
  min-width: 0;
}

.mobile-menu-button {
  display: none;
}

.global-search-wrap {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-self: center;
  width: min(560px, 100%);
}

.global-search-wrap > .icon {
  position: absolute;
  left: 14px;
  z-index: 2;
  width: 18px;
  color: #6f8491;
  pointer-events: none;
}

.global-search-wrap input {
  min-width: 0;
  width: 100%;
  height: 43px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 74px 0 43px;
  color: var(--ink);
  background: var(--surface-soft);
  outline: none;
}

.global-search-wrap input:focus {
  border-color: var(--teal-600);
  background: white;
  box-shadow: 0 0 0 4px rgba(0,168,150,.08);
}

.global-search-wrap kbd {
  position: absolute;
  right: 10px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 3px 7px;
  color: #718793;
  background: white;
  font-family: inherit;
  font-size: .65rem;
}

.global-results {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  z-index: 50;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  background: white;
  box-shadow: var(--shadow-md);
}

.global-results button {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  padding: 9px;
  background: transparent;
  text-align: left;
}

.global-results button:hover {
  background: var(--surface-soft);
}

.global-results button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.global-results strong,
.global-results small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-results small,
.global-no-results {
  color: var(--muted);
  font-size: .72rem;
}

.global-no-results {
  padding: 18px;
  text-align: center;
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.notification-button {
  position: relative;
  border: 1px solid var(--line);
  background: white;
}

.notification-button > span {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border: 2px solid white;
  border-radius: 50%;
  background: var(--danger);
}

.role-switcher,
.select-control {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
}

.role-switcher > .icon:first-child,
.select-control > .icon:first-child {
  margin-left: 11px;
  color: var(--teal-700);
}

.role-switcher > .icon:last-child,
.select-control > .icon:last-child {
  position: absolute;
  right: 9px;
  width: 15px;
  pointer-events: none;
}

.role-switcher select,
.select-control select {
  min-width: 0;
  border: 0;
  padding: 10px 32px 10px 8px;
  color: #365466;
  background: transparent;
  font-size: .73rem;
  font-weight: 750;
  outline: none;
  appearance: none;
}

.mobile-scrim,
.mobile-bottom-nav {
  display: none;
}

.main-content {
  min-width: 0;
  max-width: 1700px;
  margin: 0 auto;
  padding: 29px clamp(20px, 2.8vw, 42px) 90px;
}

.page-heading {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}

.page-heading-copy {
  min-width: 0;
  max-width: 850px;
}

.page-heading h1 {
  margin: 0 0 7px;
}

.page-heading p {
  max-width: 760px;
  margin: 0;
  color: var(--ink-soft);
  font-size: .88rem;
}

.page-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.panel,
.toolbar-card,
.template-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-sm);
}

.panel {
  padding: 19px;
}

.panel-header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.panel-header > div:first-child {
  min-width: 0;
}

.panel-header h2 {
  margin: 0;
}

.count-chip,
.toolbar-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--navy-700);
  background: var(--sky-100);
  font-size: .68rem;
  font-weight: 850;
}

.status-badge {
  min-width: 0;
  width: max-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: .64rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
}

.status-badge.success {
  border-color: #c1e8da;
  color: #176b52;
  background: var(--success-bg);
}

.status-badge.warning {
  border-color: #efdca6;
  color: #7c5600;
  background: var(--warning-bg);
}

.status-badge.danger {
  border-color: #f0c5cb;
  color: #963744;
  background: var(--danger-bg);
}

.status-badge.info {
  border-color: #c8e3ee;
  color: #245f80;
  background: var(--info-bg);
}

.status-badge.neutral {
  border-color: var(--line);
  color: #5c7482;
  background: var(--surface-soft);
}

.status-dot,
.priority-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #a7b6be;
  box-shadow: 0 0 0 4px rgba(167,182,190,.12);
}

.status-dot.green,
.priority-dot.filed {
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(28,138,104,.12);
}

.status-dot.amber,
.priority-dot.routine {
  background: #d59a22;
  box-shadow: 0 0 0 4px rgba(213,154,34,.12);
}

.priority-dot.high {
  background: var(--danger);
  box-shadow: 0 0 0 4px rgba(179,67,81,.12);
}

.avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(34,87,122,.1);
  border-radius: 13px;
  color: var(--navy-700);
  background: linear-gradient(135deg, #e8f5f8, #e2f5ed);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: -.02em;
}

.avatar.tiny {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  border-radius: 9px;
  font-size: .6rem;
}

.avatar.small {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 10px;
  font-size: .64rem;
}

.avatar.large {
  width: 55px;
  height: 55px;
  flex-basis: 55px;
  border-radius: 16px;
  font-size: .85rem;
}

.avatar.xlarge {
  width: 72px;
  height: 72px;
  flex-basis: 72px;
  border-radius: 20px;
  font-size: 1.05rem;
}

.inline-notice {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 12px;
  color: #526d7c;
  background: var(--surface-soft);
  font-size: .73rem;
  line-height: 1.45;
}

.inline-notice .icon {
  width: 17px;
  height: 17px;
  margin-top: 1px;
}

.inline-notice.info {
  border-color: #cce4ee;
  color: #31667e;
  background: #f0f8fb;
}

.inline-notice.warning {
  border-color: #ecd9a2;
  color: #795709;
  background: #fff9e9;
}

.inline-notice.neutral {
  background: var(--surface-soft);
}

.inline-notice.full,
.full-width-notice {
  width: 100%;
}

.divider {
  height: 1px;
  margin: 13px 0;
  background: var(--line);
}

/* Dashboard and shared lists */
.metric-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.metric-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 17px;
  background: white;
  box-shadow: var(--shadow-sm);
}

.metric-card::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -34px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: .55;
}

.metric-card.blue::after { background: var(--sky-100); }
.metric-card.green::after { background: var(--success-bg); }
.metric-card.amber::after { background: var(--warning-bg); }
.metric-card.rose::after { background: var(--danger-bg); }

.metric-icon {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 11px;
  color: var(--navy-700);
  background: var(--sky-100);
}

.metric-card.green .metric-icon { color: var(--success); background: var(--success-bg); }
.metric-card.amber .metric-icon { color: var(--warning); background: var(--warning-bg); }
.metric-card.rose .metric-icon { color: var(--danger); background: var(--danger-bg); }

.metric-icon .icon {
  width: 19px;
  height: 19px;
}

.metric-value {
  position: relative;
  z-index: 1;
  overflow-wrap: anywhere;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  font-weight: 900;
  letter-spacing: -.045em;
}

.metric-label {
  position: relative;
  z-index: 1;
  color: #365264;
  font-size: .76rem;
  font-weight: 800;
}

.metric-detail {
  position: relative;
  z-index: 1;
  margin-top: 5px;
  color: var(--muted);
  font-size: .68rem;
}

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

.dashboard-grid .span-two {
  grid-column: span 2;
}

.queue-list,
.compact-list,
.note-preview-list,
.soap-note-list,
.result-list,
.document-list,
.invoice-list,
.audit-list,
.rule-list {
  min-width: 0;
  display: grid;
}

.queue-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 48px auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 11px 2px;
  background: transparent;
  text-align: left;
}

.queue-item:first-child {
  border-top: 0;
}

.queue-item:hover {
  background: linear-gradient(90deg, transparent, var(--surface-soft), transparent);
}

.queue-time {
  color: var(--navy-700);
  font-size: .8rem;
  font-weight: 900;
}

.queue-person,
.stack-cell,
.person-cell > span:last-child,
.selected-patient-mini > div,
.note-preview-meta > div,
.result-content,
.invoice-main,
.document-name-cell > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.queue-person strong,
.queue-person small,
.stack-cell strong,
.stack-cell small,
.person-cell strong,
.person-cell small,
.document-name-cell strong,
.document-name-cell small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.queue-person strong,
.stack-cell strong,
.person-cell strong,
.document-name-cell strong {
  font-size: .77rem;
}

.queue-person small,
.stack-cell small,
.person-cell small,
.document-name-cell small {
  color: var(--muted);
  font-size: .68rem;
}

.wait-time {
  color: var(--muted);
  font-size: .66rem;
  white-space: nowrap;
}

.queue-item > .icon {
  width: 16px;
  color: #8799a3;
}

.compact-list {
  gap: 2px;
  margin-bottom: 12px;
}

.compact-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  padding: 9px 7px;
  background: transparent;
  text-align: left;
}

.compact-item:hover {
  background: var(--surface-soft);
}

.compact-item > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.compact-item strong,
.compact-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-item strong {
  font-size: .75rem;
}

.compact-item small,
.compact-item time {
  color: var(--muted);
  font-size: .65rem;
}

.compact-item .status-badge {
  font-size: .58rem;
}

.recall-mini-chart {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.recall-mini-chart > div {
  display: grid;
  gap: 2px;
  border-radius: 10px;
  padding: 10px;
  background: var(--surface-soft);
  text-align: center;
}

.recall-mini-chart strong {
  font-size: 1.05rem;
}

.recall-mini-chart span {
  color: var(--muted);
  font-size: .6rem;
}

.readiness-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
  margin-bottom: 13px;
}

.readiness-item {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px;
  background: var(--surface-soft);
}

.readiness-icon,
.integration-logo,
.result-icon,
.invoice-icon,
.file-type-icon,
.audit-icon,
.action-icon,
.template-icon,
.empty-icon {
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--navy-700);
  background: var(--sky-100);
}

.readiness-icon {
  width: 32px;
  height: 32px;
}

.readiness-icon .icon {
  width: 17px;
}

.readiness-item > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.readiness-item strong,
.readiness-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.readiness-item strong {
  font-size: .72rem;
}

.readiness-item small {
  color: var(--muted);
  font-size: .6rem;
}

.empty-state {
  min-width: 0;
  display: grid;
  justify-items: center;
  padding: 38px 18px;
  color: var(--muted);
  text-align: center;
}

.empty-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
}

.empty-state h3 {
  margin-bottom: 6px;
}

.empty-state p {
  max-width: 420px;
  margin-bottom: 15px;
  font-size: .78rem;
}

/* Toolbars and data grids */
.toolbar-card {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  padding: 12px 14px;
}

.date-nav {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.date-nav label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
}

.date-nav input {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 9px;
  color: var(--ink);
  background: white;
}

.segmented-filter {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  padding: 3px;
  border-radius: 11px;
  background: var(--surface-soft);
  scrollbar-width: none;
}

.segmented-filter::-webkit-scrollbar {
  display: none;
}

.segmented-filter button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  color: #667e8c;
  background: transparent;
  font-size: .67rem;
  font-weight: 800;
  white-space: nowrap;
}

.segmented-filter button.active {
  color: var(--navy-700);
  background: white;
  box-shadow: 0 2px 8px rgba(20, 58, 80, .08);
}

.data-grid {
  min-width: 0;
  display: grid;
  align-items: center;
  gap: 12px;
}

.grid-head {
  border-bottom: 1px solid var(--line);
  padding: 0 8px 10px;
  color: #76909d;
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.appointment-grid {
  grid-template-columns: minmax(58px,.55fr) minmax(170px,1.4fr) minmax(150px,1.35fr) minmax(140px,1.15fr) minmax(100px,.82fr) minmax(105px,.9fr);
}

.patient-grid {
  grid-template-columns: minmax(190px,1.55fr) minmax(180px,1.35fr) minmax(145px,1fr) minmax(105px,.75fr) minmax(95px,.72fr) 48px;
}

.recall-grid {
  grid-template-columns: minmax(185px,1.4fr) minmax(180px,1.3fr) minmax(115px,.82fr) minmax(130px,.9fr) minmax(95px,.7fr) minmax(105px,.82fr);
}

.document-grid {
  grid-template-columns: minmax(200px,1.55fr) minmax(150px,1.05fr) minmax(90px,.65fr) minmax(120px,.85fr) minmax(85px,.62fr) minmax(115px,.75fr);
}

.enrolment-grid {
  grid-template-columns: minmax(155px,1.1fr) minmax(150px,1fr) minmax(90px,.65fr) minmax(220px,1.5fr) minmax(130px,.9fr) minmax(125px,.9fr);
}

.staff-grid {
  grid-template-columns: minmax(200px,1.45fr) minmax(125px,.85fr) minmax(90px,.65fr) minmax(100px,.65fr) minmax(80px,.58fr) 32px;
}

.appointment-row,
.patient-row,
.recall-row,
.document-row,
.enrolment-row,
.staff-row {
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
}

.appointment-row:last-child,
.patient-row:last-child,
.recall-row:last-child,
.document-row:last-child,
.enrolment-row:last-child,
.staff-row:last-child {
  border-bottom: 0;
}

.patient-row {
  width: 100%;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background: transparent;
  text-align: left;
}

.patient-row:hover,
.appointment-row:hover,
.recall-row:hover,
.document-row:hover,
.enrolment-row:hover,
.staff-row:hover {
  background: #fbfdfe;
}

.mobile-field-label {
  display: none;
}

.person-cell,
.patient-link {
  min-width: 0;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.person-cell {
  display: flex;
  align-items: center;
  gap: 9px;
}

.patient-link {
  width: max-content;
  max-width: 100%;
  color: var(--navy-700);
  font-size: .71rem;
  font-weight: 800;
}

.patient-link:hover {
  text-decoration: underline;
}

.patient-link.block {
  display: grid;
  gap: 3px;
}

.patient-link small {
  color: var(--muted);
  font-weight: 600;
}

.row-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.row-chevron {
  color: #91a2ac;
}

.row-chevron .icon {
  width: 16px;
}

.document-filename {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.document-filename .icon {
  width: 17px;
  flex: 0 0 17px;
  color: var(--navy-700);
}

.document-filename span {
  min-width: 0;
  overflow: hidden;
  color: #466271;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Appointments */
.schedule-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 258px;
  align-items: start;
  gap: 16px;
}

.schedule-panel {
  overflow: hidden;
}

.appointment-time {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.appointment-time strong {
  color: var(--navy-700);
  font-size: .82rem;
}

.appointment-time small {
  color: var(--muted);
  font-size: .65rem;
}

.day-summary {
  position: sticky;
  top: calc(var(--topbar-height) + 17px);
}

.day-summary > h2 {
  margin-bottom: 15px;
}

.flow-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
  color: #5d7685;
  font-size: .75rem;
}

.flow-stat:first-of-type {
  border-top: 0;
}

.flow-stat strong {
  min-width: 29px;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--navy-700);
  background: var(--surface-tint);
  font-size: .72rem;
  text-align: center;
}

.room-status {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 1px;
}

.room-status > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.room-status strong,
.room-status small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-status strong {
  font-size: .72rem;
}

.room-status small {
  color: var(--muted);
  font-size: .63rem;
}

/* Patient directory and record */
.patient-toolbar .search-field {
  flex: 1 1 420px;
}

.patient-toolbar .search-field.large {
  max-width: 720px;
}

.patient-toolbar .toolbar-count {
  margin-left: auto;
}

.patient-directory {
  overflow: hidden;
}

.patient-record {
  min-width: 0;
}

.patient-hero {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px;
}

.patient-identity {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.patient-identity > div {
  min-width: 0;
}

.patient-name-line {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.patient-name-line h1 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
}

.patient-identity p {
  margin: 5px 0 8px;
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.45;
}

.patient-contact-line {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: #5f7988;
  font-size: .71rem;
}

.patient-contact-line span {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow-wrap: anywhere;
}

.patient-contact-line .icon {
  width: 15px;
  height: 15px;
  color: var(--teal-700);
}

.patient-hero-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.patient-alert-strip {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
  border: 1px solid #efc2c8;
  border-radius: 13px;
  padding: 11px 14px;
  color: #8d3340;
  background: var(--danger-bg);
  font-size: .72rem;
}

.patient-alert-strip > .icon {
  width: 18px;
  height: 18px;
}

.patient-alert-strip > span {
  border: 1px solid rgba(179, 67, 81, .18);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255,255,255,.52);
  font-weight: 750;
}

.record-tabs {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  overflow-x: auto;
  margin: 13px 0 16px;
  border-bottom: 1px solid var(--line-strong);
  scrollbar-width: none;
}

.record-tabs::-webkit-scrollbar {
  display: none;
}

.record-tabs button {
  position: relative;
  flex: 0 0 auto;
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 13px;
  color: #667e8c;
  background: transparent;
  font-size: .72rem;
  font-weight: 820;
}

.record-tabs button:hover {
  color: var(--navy-700);
  background: linear-gradient(to bottom, transparent, rgba(34,87,122,.03));
}

.record-tabs button.active {
  border-bottom-color: var(--teal-600);
  color: var(--navy-700);
}

.record-tabs button span {
  min-width: 20px;
  border-radius: 999px;
  padding: 2px 5px;
  color: var(--teal-700);
  background: var(--teal-100);
  font-size: .58rem;
  text-align: center;
}

.record-content,
.record-grid,
.record-main-column,
.record-side-column {
  min-width: 0;
}

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

.record-main-column,
.record-side-column {
  display: grid;
  align-content: start;
  gap: 16px;
}

.summary-section {
  border-top: 1px solid var(--line);
  padding: 15px 0;
}

.summary-section:first-of-type {
  border-top: 0;
  padding-top: 3px;
}

.summary-section:last-child {
  padding-bottom: 1px;
}

.summary-section h3 {
  margin-bottom: 9px;
  color: #496675;
  font-size: .72rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.tag-list {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.clinical-tag {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  color: #496573;
  background: var(--surface-soft);
  font-size: .68rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.clinical-tag.allergy {
  border-color: #edc1c7;
  color: #963744;
  background: var(--danger-bg);
}

.clinical-tag.condition {
  border-color: #c8e3ee;
  color: #265f7e;
  background: var(--info-bg);
}

.medicine-list {
  min-width: 0;
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.medicine-list li {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border-radius: 9px;
  padding: 8px 9px;
  color: #405f70;
  background: var(--surface-soft);
  font-size: .7rem;
  line-height: 1.4;
}

.medicine-list li > .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--teal-700);
}

.medicine-list.detailed li > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.medicine-list.detailed strong {
  overflow-wrap: anywhere;
  font-size: .7rem;
}

.medicine-list.detailed small {
  color: var(--muted);
  font-size: .61rem;
}

.note-preview-list {
  gap: 10px;
}

.note-preview {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  background: var(--surface-soft);
}

.note-preview + .note-preview {
  margin-top: 1px;
}

.note-preview-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.note-preview-meta strong,
.note-preview-meta small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-preview-meta strong {
  font-size: .72rem;
}

.note-preview-meta small {
  color: var(--muted);
  font-size: .63rem;
}

.note-preview p {
  margin: 5px 0 0;
  color: #526d7c;
  font-size: .7rem;
  line-height: 1.5;
}

.detail-card .panel-header {
  margin-bottom: 8px;
}

.detail-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(90px, .75fr) minmax(0, 1.25fr);
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 9px 0;
  font-size: .68rem;
}

.detail-row:first-of-type {
  border-top: 0;
}

.detail-row > span {
  color: var(--muted);
}

.detail-row > strong {
  overflow-wrap: anywhere;
  color: #39586a;
  text-align: right;
}

.detail-card > h3 {
  margin: 14px 0 6px;
  color: #486574;
  font-size: .68rem;
  text-transform: uppercase;
}

.detail-card ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: #58717f;
  font-size: .67rem;
  line-height: 1.45;
}

.quick-actions-card {
  display: grid;
  gap: 3px;
}

.quick-actions-card h2 {
  margin-bottom: 9px;
}

.quick-actions-card button,
.action-menu-list button {
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  padding: 10px 8px;
  color: #466373;
  background: transparent;
  font-size: .71rem;
  font-weight: 750;
  text-align: left;
}

.quick-actions-card button:hover,
.action-menu-list button:hover {
  color: var(--navy-700);
  background: var(--surface-soft);
}

.quick-actions-card button .icon:first-child,
.action-menu-list button .icon:first-child {
  color: var(--teal-700);
}

.quick-actions-card button .icon:last-child,
.action-menu-list button .icon:last-child {
  width: 15px;
  color: #94a4ad;
}

/* Timeline and SOAP notes */
.timeline {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 12px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 19px;
  width: 1px;
  background: var(--line-strong);
}

.timeline-event {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
}

.timeline-marker {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--navy-700);
  background: white;
  box-shadow: var(--shadow-sm);
}

.timeline-marker .icon {
  width: 18px;
  height: 18px;
}

.timeline-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  background: var(--surface-soft);
}

.timeline-card h3 {
  margin: 9px 0 2px;
}

.timeline-card p {
  margin: 6px 0 0;
  color: #516d7c;
  font-size: .7rem;
}

.timeline-card .timeline-author {
  margin: 0;
  color: var(--muted);
  font-size: .64rem;
}

.timeline-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.timeline-meta time {
  color: var(--muted);
  font-size: .62rem;
}

.soap-note-list {
  gap: 14px;
}

.soap-note-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px;
  background: var(--surface-soft);
}

.soap-note-card > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.soap-note-card > header .note-preview-meta {
  margin: 0;
}

.soap-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.soap-block {
  min-width: 0;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px;
  background: white;
}

.soap-block > span {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--navy-700);
  background: var(--sky-100);
  font-size: .72rem;
  font-weight: 900;
}

.soap-block h3 {
  margin: 1px 0 4px;
  color: #3f5e6e;
  font-size: .68rem;
}

.soap-block p {
  margin: 0;
  color: #5b7381;
  font-size: .68rem;
  line-height: 1.48;
}

.note-photos {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 9px;
  margin-top: 11px;
}

.note-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 10px;
  object-fit: cover;
}

/* Clinical workspace */
.clinical-workspace-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.patient-picker-card {
  position: sticky;
  top: calc(var(--topbar-height) + 17px);
  display: grid;
  gap: 12px;
}

.selected-patient-mini {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  background: var(--surface-soft);
}

.selected-patient-mini h2,
.selected-patient-mini p,
.selected-patient-mini strong,
.selected-patient-mini small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selected-patient-mini h2 {
  margin: 0 0 3px;
  white-space: nowrap;
}

.selected-patient-mini p {
  margin: 0;
  color: var(--muted);
  font-size: .65rem;
  white-space: nowrap;
}

.selected-patient-mini strong {
  font-size: .72rem;
}

.selected-patient-mini small {
  color: var(--muted);
  font-size: .62rem;
}

.mini-alert {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid #efc5ca;
  border-radius: 10px;
  padding: 9px 10px;
  color: #8e3542;
  background: var(--danger-bg);
  font-size: .66rem;
  line-height: 1.4;
}

.mini-alert .icon {
  width: 15px;
  height: 15px;
  margin-top: 1px;
}

.quick-clinical-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}

.quick-clinical-facts > div {
  min-width: 0;
  display: grid;
  gap: 2px;
  border-radius: 10px;
  padding: 9px 5px;
  background: var(--surface-soft);
  text-align: center;
}

.quick-clinical-facts span {
  overflow: hidden;
  color: var(--muted);
  font-size: .56rem;
  text-overflow: ellipsis;
}

.quick-clinical-facts strong {
  font-size: .9rem;
}

.soap-composer-inline form,
.soap-modal-form {
  min-width: 0;
  display: grid;
  gap: 11px;
}

.autosave-indicator,
.live-sync {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #5f7785;
  font-size: .64rem;
  white-space: nowrap;
}

.autosave-indicator .status-dot {
  width: 7px;
  height: 7px;
  flex-basis: 7px;
}

.live-sync .icon {
  width: 15px;
  color: var(--teal-700);
}

.soap-editor-section {
  min-width: 0;
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px;
  background: var(--surface-soft);
}

.soap-editor-section > label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 5px;
  color: #3f5f70;
  font-size: .7rem;
}

.soap-letter {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  font-size: .7rem;
  font-weight: 900;
}

.soap-letter.blue { color: #225f80; background: var(--info-bg); }
.soap-letter.green { color: #176b52; background: var(--success-bg); }
.soap-letter.amber { color: #7c5600; background: var(--warning-bg); }
.soap-letter.rose { color: #963744; background: var(--danger-bg); }

.soap-editor-section textarea {
  min-width: 0;
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 10px;
  color: var(--ink);
  background: white;
  box-shadow: inset 0 0 0 1px var(--line);
  line-height: 1.5;
  resize: vertical;
  outline: none;
}

.soap-editor-section textarea:focus {
  box-shadow: inset 0 0 0 1px var(--teal-600), 0 0 0 4px rgba(0,168,150,.07);
}

.composer-attachments,
.composer-footer,
.prescription-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.composer-attachments {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.composer-footer,
.prescription-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.file-button {
  position: relative;
  overflow: hidden;
}

.file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.file-name {
  min-width: 0;
  flex: 1 1 150px;
  overflow: hidden;
  color: var(--muted);
  font-size: .66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patient-context-strip {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: var(--surface-soft);
}

.patient-context-strip > span:nth-child(2) {
  min-width: 0;
  flex: 1 1 180px;
  display: grid;
  gap: 2px;
}

.patient-context-strip strong,
.patient-context-strip small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.patient-context-strip strong {
  font-size: .72rem;
}

.patient-context-strip small {
  color: var(--muted);
  font-size: .62rem;
}

/* Inbox */
.inbox-toolbar .search-field {
  width: min(330px, 100%);
}

.inbox-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  align-items: start;
  gap: 16px;
}

.inbox-list-panel {
  overflow: hidden;
}

.result-list {
  min-width: 0;
  gap: 0;
}

.result-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 14px 2px;
}

.result-item:first-child {
  border-top: 0;
}

.result-item.high-priority {
  margin: 0 -7px;
  border: 1px solid #efc2c8;
  border-radius: 12px;
  padding: 13px 9px;
  background: linear-gradient(90deg, rgba(253,235,237,.72), rgba(255,255,255,.3));
}

.result-item.compact {
  grid-template-columns: 39px minmax(0, 1fr) auto;
}

.result-icon,
.invoice-icon,
.file-type-icon,
.audit-icon,
.action-icon,
.template-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.result-icon .icon,
.invoice-icon .icon,
.file-type-icon .icon,
.audit-icon .icon,
.action-icon .icon,
.template-icon .icon {
  width: 19px;
  height: 19px;
}

.result-item.high-priority .result-icon {
  color: var(--danger);
  background: var(--danger-bg);
}

.result-content {
  gap: 5px;
}

.result-title-line {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.result-title-line h3 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.result-content > p {
  margin: 2px 0;
  color: #536e7c;
  font-size: .7rem;
  line-height: 1.5;
}

.result-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 10px;
  color: var(--muted);
  font-size: .61rem;
}

.result-meta span:not(:first-child)::before,
.result-meta time::before {
  content: "·";
  margin-right: 10px;
  color: #a5b1b8;
}

.result-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}

.inbox-safety-panel {
  position: sticky;
  top: calc(var(--topbar-height) + 17px);
}

.inbox-safety-panel > h2 {
  margin-bottom: 12px;
}

.safety-stat {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 11px 0;
}

.safety-stat:first-of-type {
  border-top: 0;
}

.safety-stat > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.safety-stat strong {
  font-size: .69rem;
}

.safety-stat small {
  color: var(--muted);
  font-size: .61rem;
}

/* Recall workspace */
.recall-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 302px;
  align-items: start;
  gap: 16px;
}

.recall-worklist-panel {
  overflow: hidden;
}

.recall-rules-panel {
  position: sticky;
  top: calc(var(--topbar-height) + 17px);
}

.rule-list {
  gap: 8px;
  margin-bottom: 12px;
}

.rule-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px;
  background: var(--surface-soft);
}

.rule-card > div {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.rule-card strong {
  overflow-wrap: anywhere;
  font-size: .68rem;
}

.rule-card p,
.rule-card small {
  margin: 0;
  color: var(--muted);
  font-size: .61rem;
  line-height: 1.43;
}

.rule-card small {
  display: block;
  margin-top: 6px;
  color: var(--teal-700);
  font-weight: 750;
}

/* Prescribing */
.prescribing-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: start;
  gap: 16px;
}

.prescribing-side {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.patient-selection-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(230px, 1fr);
  align-items: end;
  gap: 10px;
  margin-bottom: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px;
  background: var(--surface-soft);
}

.patient-selection-card .mini-alert {
  grid-column: 1 / -1;
}

.form-grid,
.document-form-fields,
.prescription-form {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.form-grid > .full,
.document-form-fields > .full,
.prescription-form > .full {
  grid-column: 1 / -1;
}

.check-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
  color: #526e7d;
  font-size: .68rem;
}

.check-row:first-of-type {
  border-top: 0;
}

.check-row .icon {
  width: 16px;
  height: 16px;
}

.check-row.pending .icon {
  color: var(--warning);
}

.safety-check-card > h2 {
  margin-bottom: 7px;
}

/* Documents */
.template-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.template-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--line);
  padding: 13px;
  color: inherit;
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.template-card:hover {
  transform: translateY(-2px);
  border-color: #b6cfda;
  box-shadow: 0 10px 25px rgba(15, 39, 55, .08);
}

.template-card > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.template-card strong,
.template-card small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-card strong {
  font-size: .72rem;
}

.template-card small {
  color: var(--muted);
  font-size: .61rem;
  line-height: 1.35;
}

.template-card > .icon {
  width: 16px;
  color: #91a2ac;
}

.document-name-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.file-type-icon {
  width: 35px;
  height: 35px;
  flex-basis: 35px;
}

.file-type-icon .icon {
  width: 17px;
}

.document-composer-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(300px, .98fr);
  align-items: start;
  gap: 18px;
}

.document-preview {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 16px;
  background: #e9eef1;
}

.document-paper,
.pdf-page {
  width: min(100%, 520px);
  min-height: 630px;
  margin: 0 auto;
  border: 1px solid #d6dfe4;
  padding: clamp(24px, 4vw, 48px);
  background: white;
  box-shadow: 0 8px 22px rgba(24,49,66,.12);
}

.document-letterhead {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 2px solid var(--navy-700);
  padding-bottom: 12px;
  margin-bottom: 26px;
}

.document-letterhead img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

.document-letterhead > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.document-letterhead strong {
  font-size: .83rem;
}

.document-letterhead span {
  color: var(--muted);
  font-size: .61rem;
}

.document-paper p,
.pdf-page p {
  color: #4d6877;
  font-size: .67rem;
  line-height: 1.55;
}

.document-paper h3,
.pdf-page h3 {
  margin: 20px 0 14px;
  font-size: 1rem;
}

.preview-date {
  text-align: right;
}

.preview-lines {
  height: 210px;
  margin-top: 20px;
  background: repeating-linear-gradient(to bottom, #edf1f3 0, #edf1f3 1px, transparent 1px, transparent 23px);
}

.preview-lines.long {
  height: 390px;
}

/* Enrolments */
.enrolment-flow-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.enrolment-action-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  justify-items: start;
}

.action-step {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--navy-700);
  background: var(--surface-tint);
  font-size: .62rem;
  font-weight: 900;
}

.enrolment-action-card .action-icon {
  margin-bottom: 13px;
}

.enrolment-action-card h2 {
  margin-bottom: 4px;
}

.enrolment-action-card p {
  min-height: 47px;
  margin-bottom: 13px;
  color: var(--muted);
  font-size: .68rem;
}

/* Billing */
.billing-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.invoice-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto 36px;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding: 12px 1px;
}

.invoice-row:first-child {
  border-top: 0;
}

.invoice-main {
  gap: 3px;
}

.invoice-main > strong {
  min-width: 0;
  overflow: hidden;
  font-size: .72rem;
  text-overflow: ellipsis;
}

.invoice-main > small {
  color: var(--muted);
  font-size: .61rem;
}

.invoice-amount {
  color: var(--navy-700);
  font-size: .75rem;
  white-space: nowrap;
}

.account-summary-card {
  position: sticky;
  top: calc(var(--topbar-height) + 17px);
  text-align: center;
}

.account-balance {
  display: block;
  margin: 10px 0 3px;
  color: var(--navy-700);
  font-size: 2rem;
  letter-spacing: -.045em;
}

.account-summary-card p {
  margin-bottom: 15px;
  color: var(--muted);
  font-size: .7rem;
}

/* Integrations */
.integration-hero {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 16px;
  padding: 22px;
  color: white;
  background:
    radial-gradient(circle at 90% 0, rgba(240,243,189,.16), transparent 16rem),
    linear-gradient(135deg, var(--navy-900), var(--navy-700) 62%, var(--teal-700));
}

.integration-hero h2 {
  margin-bottom: 5px;
  color: white;
  font-size: 1.25rem;
}

.integration-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: .75rem;
}

.integration-hero .section-kicker {
  color: var(--cream);
}

.integration-score {
  flex: 0 0 auto;
  min-width: 128px;
  display: grid;
  justify-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255,255,255,.08);
}

.integration-score strong {
  color: white;
  font-size: 2rem;
}

.integration-score span,
.integration-score small {
  color: rgba(255,255,255,.72);
  font-size: .64rem;
}

.integration-score small {
  margin-top: 3px;
  color: rgba(255,255,255,.5);
}

.integration-card-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.integration-card {
  display: flex;
  flex-direction: column;
}

.integration-card > header {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.integration-card > header > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.integration-card > header h2,
.integration-card > header span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-card > header h2 {
  margin: 0;
  font-size: .85rem;
}

.integration-card > header > div > span {
  color: var(--muted);
  font-size: .61rem;
}

.integration-logo {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.integration-logo.large {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

.integration-card > p {
  flex: 1;
  margin: 13px 0;
  color: #587180;
  font-size: .69rem;
  line-height: 1.48;
}

.integration-card dl {
  display: grid;
  gap: 7px;
  margin: 0 0 13px;
}

.integration-card dl > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 7px;
  font-size: .62rem;
}

.integration-card dt {
  color: var(--muted);
}

.integration-card dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #3f5f70;
  text-align: right;
}

.integration-card > footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

/* Administration */
.admin-layout {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 16px;
}

.admin-users-panel {
  overflow: hidden;
}

.admin-side {
  min-width: 0;
  display: grid;
  gap: 16px;
}

.security-policy-card > h2 {
  margin-bottom: 8px;
}

.policy-row {
  min-width: 0;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.policy-row:first-of-type {
  border-top: 0;
}

.policy-row > .icon {
  width: 17px;
  color: var(--teal-700);
}

.policy-row > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.policy-row strong {
  font-size: .68rem;
}

.policy-row small {
  color: var(--muted);
  font-size: .6rem;
}

.audit-list {
  gap: 0;
}

.audit-list > article {
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding: 10px 0;
}

.audit-list > article:first-child {
  border-top: 0;
}

.audit-icon {
  width: 32px;
  height: 32px;
}

.audit-icon .icon {
  width: 16px;
}

.audit-list > article > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.audit-list strong,
.audit-list small,
.audit-list time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audit-list strong {
  font-size: .67rem;
}

.audit-list small,
.audit-list time {
  color: var(--muted);
  font-size: .59rem;
}

/* Forms, modals and overlays */
.checkbox-row {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #4f6978;
  font-size: .69rem;
  line-height: 1.45;
}

.checkbox-row input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 1px 0 0;
  accent-color: var(--teal-600);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 24, 37, .58);
  backdrop-filter: blur(7px);
}

.modal {
  width: min(560px, 100%);
  max-height: min(900px, calc(100dvh - 48px));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 20px;
  background: white;
  box-shadow: var(--shadow-lg);
  animation: modal-in 180ms ease-out;
}

.modal.large {
  width: min(800px, 100%);
}

.modal.xlarge {
  width: min(1120px, 100%);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px 15px;
}

.modal-header > div {
  min-width: 0;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.15rem;
}

.modal-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: .69rem;
}

.modal-body {
  min-width: 0;
  overflow-y: auto;
  padding: 18px 20px;
  overscroll-behavior: contain;
}

.modal-footer {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 13px 20px;
  background: var(--surface-soft);
}

.profile-modal {
  display: grid;
  justify-items: center;
  text-align: center;
}

.profile-modal h3 {
  margin: 10px 0 2px;
}

.profile-modal > p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: .7rem;
}

.modal-details {
  width: 100%;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 7px 12px;
  background: var(--surface-soft);
}

.qr-modal-content {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 18px;
}

.qr-frame {
  width: min(100%, 260px);
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 15px;
  background: white;
  box-shadow: var(--shadow-sm);
}

.qr-modal-content h3 {
  margin-bottom: 5px;
}

.qr-modal-content p {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: .72rem;
}

.qr-modal-content code {
  display: inline-block;
  margin-bottom: 12px;
}

.action-menu-list {
  display: grid;
  gap: 3px;
}

.readiness-checklist {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.integration-modal-heading {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.integration-modal-heading > div {
  min-width: 0;
}

.integration-modal-heading h3 {
  margin: 2px 0 4px;
}

.integration-modal-heading p {
  margin: 0;
  color: var(--muted);
  font-size: .68rem;
}

.checklist-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 10px;
  background: var(--surface-soft);
}

.check-number {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--navy-700);
  background: white;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: .67rem;
  font-weight: 900;
}

.checklist-item > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.checklist-item strong {
  font-size: .68rem;
}

.checklist-item small {
  color: var(--muted);
  font-size: .6rem;
}

.enrolment-review {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(270px, .85fr);
  align-items: start;
  gap: 18px;
}

.pdf-preview-placeholder {
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 16px;
  background: #e8edf0;
}

.pdf-page {
  min-height: 700px;
}

.review-details {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px;
  background: var(--surface-soft);
}

.review-details .field-label {
  margin-top: 12px;
  text-align: left;
}

/* Public enrolment form */
.public-form-page {
  min-height: 100dvh;
  padding: 28px clamp(16px, 4vw, 48px) 40px;
  background:
    radial-gradient(circle at 10% 0, rgba(47,185,150,.12), transparent 26rem),
    radial-gradient(circle at 100% 15%, rgba(34,87,122,.09), transparent 28rem),
    var(--background);
}

.public-form-header {
  width: min(980px, 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 auto 22px;
}

.public-form-header .prototype-pill {
  border-color: var(--line-strong);
  color: var(--navy-700);
  background: white;
}

.public-form-shell {
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 0;
  overflow: hidden;
  margin: 0 auto 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: white;
  box-shadow: var(--shadow-md);
}

.public-form-intro {
  min-height: 100%;
  padding: clamp(24px, 4vw, 44px);
  color: white;
  background:
    radial-gradient(circle at 100% 100%, rgba(240,243,189,.15), transparent 20rem),
    linear-gradient(145deg, var(--navy-950), var(--navy-700) 60%, var(--teal-700));
}

.public-form-intro .section-kicker {
  color: var(--cream);
}

.public-form-intro h1 {
  margin-bottom: 12px;
  color: white;
  font-size: clamp(2rem, 4vw, 3.6rem);
}

.public-form-intro > p {
  color: rgba(255,255,255,.72);
  font-size: .82rem;
}

.public-form-intro .demo-banner {
  margin-top: 24px;
  border-color: rgba(255,255,255,.17);
  color: rgba(255,255,255,.88);
  background: rgba(255,255,255,.08);
}

.public-enrolment-form {
  padding: clamp(24px, 4vw, 44px);
}

.public-form-footer {
  margin-top: 18px;
}

.public-success-card {
  width: min(540px, 100%);
  display: grid;
  justify-items: center;
  margin: max(70px, 10vh) auto 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: clamp(28px, 6vw, 60px);
  background: white;
  box-shadow: var(--shadow-md);
  text-align: center;
}

.success-check {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 20px;
  color: var(--success);
  background: var(--success-bg);
}

.success-check .icon {
  width: 29px;
  height: 29px;
}

.public-success-card h1 {
  margin-bottom: 10px;
}

.public-success-card p {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: .8rem;
}

/* Toasts */
#toast-root {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 180;
  width: min(390px, calc(100vw - 36px));
  display: grid;
  gap: 8px;
  pointer-events: none;
}

.toast {
  min-width: 0;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  border: 1px solid #cbe6dc;
  border-radius: 12px;
  padding: 12px 13px;
  color: #255f4d;
  background: rgba(244,252,249,.97);
  box-shadow: var(--shadow-md);
  font-size: .72rem;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: auto;
}

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

.toast.info {
  border-color: #c7e1ed;
  color: #2b627e;
  background: rgba(242,249,252,.98);
}

.toast.danger {
  border-color: #edc0c6;
  color: #8d3541;
  background: rgba(254,245,246,.98);
}

.toast .icon {
  width: 18px;
  height: 18px;
}

/* Responsive */
@media (max-width: 1320px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .integration-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid .span-two {
    grid-column: span 2;
  }

  .record-grid,
  .admin-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
  }
}

@media (max-width: 1120px) {
  :root {
    --sidebar-width: 236px;
  }

  .topbar {
    padding-inline: 20px;
  }

  .schedule-layout,
  .inbox-layout,
  .recall-layout,
  .prescribing-layout,
  .admin-layout,
  .record-grid,
  .billing-record-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .day-summary,
  .inbox-safety-panel,
  .recall-rules-panel,
  .account-summary-card,
  .patient-picker-card {
    position: static;
  }

  .clinical-workspace-grid {
    grid-template-columns: minmax(260px, .58fr) minmax(0, 1.42fr);
  }

  .billing-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-side {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 920px) {
  :root {
    --topbar-height: 64px;
  }

  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 70;
    width: min(320px, 86vw);
    transform: translateX(-105%);
    transition: transform 210ms ease;
    box-shadow: 18px 0 50px rgba(4, 24, 36, .25);
  }

  .app-shell.menu-open .sidebar {
    transform: translateX(0);
  }

  .mobile-scrim {
    position: fixed;
    inset: 0;
    z-index: 65;
    display: block;
    background: rgba(5,24,37,.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
  }

  .app-shell.menu-open .mobile-scrim {
    opacity: 1;
    visibility: visible;
  }

  .mobile-menu-button,
  .topbar-title {
    display: flex;
  }

  .topbar-title {
    min-width: 0;
    flex-direction: column;
    gap: 1px;
  }

  .topbar-title span,
  .topbar-title small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar-title span {
    color: var(--ink);
    font-size: .78rem;
    font-weight: 850;
  }

  .topbar-title small {
    color: var(--muted);
    font-size: .58rem;
  }

  .topbar {
    grid-template-columns: 38px minmax(105px, .55fr) minmax(210px, 1.45fr) auto;
    gap: 10px;
    min-height: 64px;
    padding: 8px 14px;
  }

  .global-search-wrap {
    justify-self: stretch;
  }

  .main-content {
    padding: 22px 16px 92px;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 40;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(210,223,229,.9);
    border-radius: 17px;
    padding: 5px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 38px rgba(8,31,45,.2);
    backdrop-filter: blur(16px);
  }

  .mobile-nav-item {
    min-width: 0;
    min-height: 48px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    border: 0;
    border-radius: 11px;
    padding: 4px 2px;
    color: #6e8592;
    background: transparent;
    font-size: .55rem;
    font-weight: 800;
  }

  .mobile-nav-item .icon {
    width: 19px;
    height: 19px;
  }

  .mobile-nav-item.active {
    color: var(--navy-700);
    background: var(--surface-tint);
  }

  .grid-head {
    display: none;
  }

  .appointment-grid,
  .patient-grid,
  .recall-grid,
  .document-grid,
  .enrolment-grid,
  .staff-grid,
  .appointment-row,
  .patient-row,
  .recall-row,
  .document-row,
  .enrolment-row,
  .staff-row {
    grid-template-columns: minmax(92px, .38fr) minmax(0, 1fr);
  }

  .appointment-row,
  .patient-row,
  .recall-row,
  .document-row,
  .enrolment-row,
  .staff-row {
    min-width: 0;
    gap: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 12px;
    background: white;
    box-shadow: var(--shadow-sm);
  }

  .appointment-row:last-child,
  .patient-row:last-child,
  .recall-row:last-child,
  .document-row:last-child,
  .enrolment-row:last-child,
  .staff-row:last-child {
    border-bottom: 1px solid var(--line);
  }

  .appointment-list,
  .patient-directory > div:last-child,
  .recall-list,
  .document-list,
  .enrolment-list,
  .admin-users-panel > div:last-child {
    display: grid;
    gap: 0;
  }

  .schedule-panel,
  .patient-directory,
  .recall-worklist-panel,
  .admin-users-panel {
    overflow: visible;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .mobile-field-label {
    min-width: 0;
    display: block;
    align-self: center;
    color: #78909c;
    font-size: .59rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
  }

  .row-chevron {
    display: none;
  }

  .row-actions {
    flex-wrap: wrap;
  }

  .clinical-workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .patient-picker-card {
    position: static;
  }

  .patient-picker-card .quick-clinical-facts {
    max-width: 460px;
  }

  .document-composer-grid,
  .enrolment-review {
    grid-template-columns: minmax(0, 1fr);
  }

  .document-preview,
  .pdf-preview-placeholder {
    max-height: 480px;
  }

  .public-form-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .public-form-intro {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .login-page {
    grid-template-columns: minmax(0, 1fr);
  }

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

  .login-form-panel {
    min-height: 100dvh;
    justify-content: center;
    padding: 24px 18px;
  }

  .mobile-login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    color: var(--navy-700);
    font-size: 1.3rem;
    font-weight: 900;
  }

  .mobile-login-brand img {
    width: 42px;
    height: 42px;
    border-radius: 13px;
  }

  .topbar {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 10px;
  }

  .global-search-wrap {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .global-search-wrap input {
    height: 40px;
  }

  .global-search-wrap kbd {
    display: none;
  }

  .role-switcher {
    display: none;
  }

  .topbar-actions {
    grid-column: 3;
    grid-row: 1;
  }

  .page-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .page-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .page-actions .button {
    flex: 1 1 150px;
  }

  .metric-grid,
  .dashboard-grid,
  .integration-card-grid,
  .template-grid,
  .enrolment-flow-grid,
  .admin-side,
  .soap-grid,
  .billing-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-grid .span-two {
    grid-column: auto;
  }

  .toolbar-card,
  .patient-toolbar,
  .inbox-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .date-nav {
    justify-content: space-between;
  }

  .segmented-filter {
    width: 100%;
  }

  .patient-toolbar .toolbar-count {
    margin-left: 0;
    align-self: flex-start;
  }

  .patient-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .patient-hero-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .patient-hero-actions .button {
    flex: 1 1 130px;
  }

  .patient-identity {
    align-items: flex-start;
  }

  .patient-contact-line {
    display: grid;
  }

  .record-tabs button {
    padding-inline: 10px;
  }

  .patient-selection-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .patient-selection-card .mini-alert {
    grid-column: auto;
  }

  .soap-editor-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .soap-editor-section > label {
    padding-top: 0;
  }

  .composer-footer,
  .prescription-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .composer-footer .button,
  .prescription-actions .button {
    width: 100%;
  }

  .result-item,
  .result-item.compact {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .result-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .integration-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .integration-score {
    width: 100%;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .form-grid,
  .document-form-fields,
  .prescription-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-grid > .full,
  .document-form-fields > .full,
  .prescription-form > .full {
    grid-column: auto;
  }

  .qr-modal-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-backdrop {
    align-items: end;
    padding: 0;
  }

  .modal,
  .modal.large,
  .modal.xlarge {
    width: 100%;
    max-height: 94dvh;
    border-radius: 20px 20px 0 0;
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .document-paper,
  .pdf-page {
    min-height: 520px;
    padding: 24px;
  }

  .public-form-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .main-content {
    padding-inline: 12px;
  }

  .panel {
    padding: 15px;
  }

  .page-heading h1 {
    font-size: 1.55rem;
  }

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

  .metric-card {
    padding: 13px;
  }

  .metric-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 13px;
  }

  .metric-value {
    font-size: 1.35rem;
  }

  .metric-label {
    font-size: .67rem;
  }

  .metric-detail {
    font-size: .59rem;
  }

  .queue-item {
    grid-template-columns: 44px 34px minmax(0, 1fr) auto;
    gap: 7px;
  }

  .queue-item .wait-time,
  .queue-item > .icon {
    display: none;
  }

  .queue-item .status-badge {
    grid-column: 3 / -1;
    justify-self: start;
  }

  .readiness-grid,
  .recall-mini-chart {
    grid-template-columns: minmax(0, 1fr);
  }

  .readiness-grid {
    gap: 6px;
  }

  .appointment-grid,
  .patient-grid,
  .recall-grid,
  .document-grid,
  .enrolment-grid,
  .staff-grid,
  .appointment-row,
  .patient-row,
  .recall-row,
  .document-row,
  .enrolment-row,
  .staff-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .patient-identity {
    display: grid;
    grid-template-columns: 55px minmax(0,1fr);
  }

  .patient-identity .avatar.xlarge {
    width: 55px;
    height: 55px;
    flex-basis: 55px;
    border-radius: 15px;
  }

  .patient-name-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .patient-name-line h1 {
    font-size: 1.25rem;
  }

  .patient-alert-strip {
    align-items: flex-start;
  }

  .detail-row {
    grid-template-columns: minmax(80px, .75fr) minmax(0, 1.25fr);
  }

  .invoice-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
  }

  .invoice-row .invoice-amount {
    grid-column: 2;
    justify-self: start;
  }

  .invoice-row .status-badge {
    grid-column: 2;
    justify-self: start;
  }

  .invoice-row > .icon-button {
    grid-column: 3;
    grid-row: 1;
  }

  .integration-card > header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .integration-card > header > .status-badge {
    grid-column: 1 / -1;
    margin-left: 50px;
  }

  .checklist-item {
    grid-template-columns: 29px minmax(0, 1fr);
  }

  .checklist-item > .status-badge {
    grid-column: 2;
    justify-self: start;
  }

  .modal-footer .button {
    flex: 1 1 130px;
  }

  .public-form-page {
    padding-inline: 12px;
  }

  .public-form-shell {
    border-radius: 18px;
  }

  .public-form-intro,
  .public-enrolment-form {
    padding: 22px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  body {
    background: white;
  }

  .sidebar,
  .topbar,
  .mobile-bottom-nav,
  .page-actions,
  .toolbar-card,
  .back-button,
  .record-tabs,
  .row-actions,
  .icon-button,
  #toast-root,
  .modal-backdrop {
    display: none !important;
  }

  .app-shell,
  .workspace,
  .main-content {
    display: block;
    width: 100%;
    max-width: none;
    min-height: auto;
    margin: 0;
    padding: 0;
  }

  .panel,
  .metric-card,
  .template-card {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* Keep dense clinical tables readable before the mobile shell breakpoint. */
@media (max-width: 1180px) {
  .grid-head {
    display: none;
  }

  .appointment-grid,
  .patient-grid,
  .recall-grid,
  .document-grid,
  .enrolment-grid,
  .staff-grid,
  .appointment-row,
  .patient-row,
  .recall-row,
  .document-row,
  .enrolment-row,
  .staff-row {
    grid-template-columns: minmax(98px, .38fr) minmax(0, 1fr);
  }

  .appointment-row,
  .patient-row,
  .recall-row,
  .document-row,
  .enrolment-row,
  .staff-row {
    min-width: 0;
    gap: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 12px;
    background: white;
    box-shadow: var(--shadow-sm);
  }

  .appointment-row:last-child,
  .patient-row:last-child,
  .recall-row:last-child,
  .document-row:last-child,
  .enrolment-row:last-child,
  .staff-row:last-child {
    border-bottom: 1px solid var(--line);
  }

  .mobile-field-label {
    min-width: 0;
    display: block;
    align-self: center;
    color: #78909c;
    font-size: .59rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
  }

  .row-chevron {
    display: none;
  }
}

@media (max-width: 720px) {
  .segmented-filter {
    flex-wrap: wrap;
    overflow: visible;
  }

  .segmented-filter button {
    flex: 1 1 auto;
  }

  .record-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 3px;
    background: var(--surface-soft);
  }

  .record-tabs button {
    min-width: 0;
    min-height: 38px;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    padding: 6px 3px;
    font-size: .62rem;
    white-space: normal;
  }

  .record-tabs button.active {
    border: 0;
    background: white;
    box-shadow: 0 2px 8px rgba(20, 58, 80, .08);
  }
}