/*
 * Jenny Ponente Maternity and Lying-In Clinic
 * Shared application skin — Bootstrap 5 / CoreUI inspired, no build step.
 */

:root {
  --font-body: "DM Sans", Arial, sans-serif;
  --font-display: "Manrope", "DM Sans", Arial, sans-serif;
  --clinic-green-950: #0b2f24;
  --clinic-green-900: #123d2f;
  --clinic-green-800: #174f3b;
  --clinic-green-700: #206247;
  --clinic-green-600: #2d7658;
  --clinic-green-500: #438a6c;
  --clinic-green-200: #bcd9cc;
  --clinic-green-100: #dcece4;
  --clinic-green-50: #f0f7f3;
  --clinic-gold-700: #8c641e;
  --clinic-gold-600: #a97922;
  --clinic-gold-500: #c7983d;
  --clinic-gold-300: #e2c77e;
  --clinic-gold-100: #f6edcf;
  --clinic-coral-700: #a73d36;
  --clinic-coral-600: #c65048;
  --clinic-coral-500: #dc675c;
  --clinic-coral-100: #f9dfdc;
  --clinic-ink: #16231e;
  --clinic-muted: #596a63;
  --clinic-border: #dce5e0;
  --clinic-surface: #ffffff;
  --clinic-canvas: #f5f7f5;
  --clinic-sidebar-width: 17.25rem;
  --clinic-sidebar-collapsed: 5.25rem;
  --clinic-topbar-height: 4.5rem;
  --clinic-radius-sm: 0.55rem;
  --clinic-radius: 0.85rem;
  --clinic-radius-lg: 1.25rem;
  --clinic-shadow-sm: 0 2px 8px rgba(19, 61, 47, 0.07);
  --clinic-shadow: 0 12px 32px rgba(19, 61, 47, 0.1);
  --clinic-shadow-lg: 0 24px 64px rgba(11, 47, 36, 0.16);
  --clinic-focus: 0 0 0 0.22rem rgba(45, 118, 88, 0.24);
  --bs-primary: var(--clinic-green-700);
  --bs-primary-rgb: 32, 98, 71;
  --bs-body-font-family: var(--font-body);
  --bs-font-sans-serif: var(--font-body);
  --bs-secondary: var(--clinic-muted);
  --bs-success: #287753;
  --bs-danger: #bb443d;
  --bs-warning: #b27a16;
  --bs-info: #29758c;
  --bs-body-color: var(--clinic-ink);
  --bs-body-bg: var(--clinic-canvas);
  --bs-border-color: var(--clinic-border);
  --bs-link-color: var(--clinic-green-700);
  --bs-link-hover-color: var(--clinic-green-900);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--clinic-ink);
  background: var(--clinic-canvas);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
}

h1,
h2,
.h1,
.h2 {
  letter-spacing: -0.035em;
}

.topbar-title > strong,
.card-title,
.stat-value,
.vital-value,
.amount,
.care-count-tile strong,
.invoice-summary dd,
.receipt-total {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

body.no-scroll,
body.sidebar-open {
  overflow: hidden;
}

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

a {
  color: var(--clinic-green-700);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--clinic-green-900);
}

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

button,
[role="button"] {
  touch-action: manipulation;
}

:focus-visible {
  outline: 3px solid rgba(45, 118, 88, 0.42);
  outline-offset: 2px;
}

::selection {
  color: #fff;
  background: var(--clinic-green-700);
}

.visually-hidden-focusable:not(:focus):not(:focus-within),
.sr-only:not(:focus) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10000;
  padding: 0.65rem 1rem;
  color: #fff;
  background: var(--clinic-green-900);
  border-radius: var(--clinic-radius-sm);
  transform: translateY(-160%);
  transition: transform 0.18s ease;
}

.skip-link:focus {
  color: #fff;
  transform: translateY(0);
}

/* Application shell ------------------------------------------------------ */

.app-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 92% 2%, rgba(226, 199, 126, 0.16), transparent 19rem),
    var(--clinic-canvas);
}

.sidebar,
#sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  display: flex;
  width: var(--clinic-sidebar-width);
  min-height: 100vh;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.88);
  background:
    radial-gradient(circle at 50% -8%, rgba(226, 199, 126, 0.22), transparent 15rem),
    linear-gradient(165deg, var(--clinic-green-800), var(--clinic-green-950) 78%);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 8px 0 30px rgba(11, 47, 36, 0.12);
  transition: width 0.24s ease, transform 0.24s ease;
}

.sidebar::after,
#sidebar::after {
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: 12rem;
  height: 12rem;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(226, 199, 126, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 2.5rem rgba(226, 199, 126, 0.03), 0 0 0 5rem rgba(226, 199, 126, 0.025);
}

.sidebar-brand {
  position: relative;
  display: flex;
  min-height: var(--clinic-topbar-height);
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-brand:hover {
  color: #fff;
}

.sidebar-logo,
.brand-logo {
  width: 3rem;
  height: 3rem;
  flex: 0 0 3rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

.brand-copy {
  min-width: 0;
  line-height: 1.15;
}

.sidebar-brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: 1.15;
}

.sidebar-brand-copy strong {
  overflow: hidden;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.04rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-brand-copy small {
  margin-top: 0.25rem;
  overflow: hidden;
  color: var(--clinic-gold-300);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-name {
  display: block;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-subtitle {
  display: block;
  margin-top: 0.24rem;
  color: var(--clinic-gold-300);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-close {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: auto;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  border-radius: 50%;
}

.sidebar-nav {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding: 0.85rem 0.75rem 1rem;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  scrollbar-width: thin;
}

.sidebar-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar-context strong {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.68rem;
  text-overflow: ellipsis;
}

.sidebar-nav ul,
.sidebar-menu {
  padding: 0;
  margin: 0;
  list-style: none;
}

.nav-title,
.sidebar-heading,
.nav-section-label {
  display: block;
  padding: 0.85rem 0.8rem 0.4rem;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.sidebar .nav-item,
#sidebar .nav-item {
  margin: 0.16rem 0;
}

.sidebar .nav-link,
#sidebar .nav-link,
.sidebar-link {
  position: relative;
  display: flex;
  min-height: 2.85rem;
  align-items: center;
  gap: 0.8rem;
  padding: 0.68rem 0.8rem;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.sidebar .nav-link:hover,
#sidebar .nav-link:hover,
.sidebar-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  transform: translateX(2px);
}

.sidebar .nav-link.active,
#sidebar .nav-link.active,
.sidebar-link.active,
.sidebar .nav-item.active > .nav-link {
  color: #fff;
  background: linear-gradient(90deg, rgba(220, 103, 92, 0.32), rgba(255, 255, 255, 0.1));
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 3px 0 0 var(--clinic-gold-300);
}

.sidebar .nav-icon,
#sidebar .nav-icon,
.sidebar-link > i:first-child,
.sidebar-link > .app-icon {
  display: inline-grid;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 1.55rem;
  place-items: center;
  font-size: 1.08rem;
}

.app-icon {
  display: inline-block;
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  vertical-align: -0.16em;
}

.nav-badge {
  min-width: 1.35rem;
  margin-left: auto;
  padding: 0.13rem 0.38rem;
  color: #fff;
  background: var(--clinic-coral-600);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.sidebar-user {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.avatar,
.user-avatar {
  display: inline-grid;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 2.45rem;
  overflow: hidden;
  place-items: center;
  color: var(--clinic-green-900);
  background: var(--clinic-gold-100);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  font-weight: 800;
}

.avatar img,
.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-user-info {
  min-width: 0;
  line-height: 1.25;
}

.sidebar-user-name {
  overflow: hidden;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-role {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.sidebar-care-card {
  position: relative;
  z-index: 1;
  display: grid;
  margin: 0 0.75rem 0.85rem;
  padding: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.75rem;
  font-size: 0.7rem;
}

.sidebar-care-card .care-card-icon {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.55rem;
  place-items: center;
  color: var(--clinic-gold-300);
  background: rgba(226, 199, 126, 0.1);
  border-radius: 0.55rem;
}

.sidebar-care-card strong {
  margin-bottom: 0.2rem;
  color: #fff;
  font-size: 0.76rem;
}

.sidebar-care-card small {
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}

.main-wrapper,
.app-main {
  min-height: 100vh;
  margin-left: var(--clinic-sidebar-width);
  transition: margin-left 0.24s ease;
}

.topbar,
.app-header {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  min-height: var(--clinic-topbar-height);
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem clamp(1rem, 2.2vw, 2rem);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(220, 229, 224, 0.92);
  box-shadow: 0 4px 18px rgba(19, 61, 47, 0.045);
  backdrop-filter: blur(12px);
}

.sidebar-toggle,
.menu-toggle,
[data-sidebar-toggle] {
  display: inline-grid;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 2.6rem;
  place-items: center;
  color: var(--clinic-green-800);
  background: var(--clinic-green-50);
  border: 1px solid var(--clinic-green-100);
  border-radius: 0.7rem;
  font-size: 1.2rem;
  transition: background 0.16s ease, transform 0.16s ease;
}

.sidebar-toggle:hover,
.menu-toggle:hover,
[data-sidebar-toggle]:hover {
  background: var(--clinic-green-100);
  transform: translateY(-1px);
}

.topbar-title {
  display: flex;
  min-width: 0;
  flex-direction: column;
  margin: 0;
  color: var(--clinic-ink);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
}

.topbar-title > span {
  color: var(--clinic-muted);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.topbar-title > strong {
  display: block;
  margin-top: 0.16rem;
  overflow: hidden;
  color: var(--clinic-green-950);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-left {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.7rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
}

.topbar-action {
  position: relative;
  display: inline-grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  color: var(--clinic-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  text-decoration: none;
}

.icon-button {
  display: inline-grid;
  width: 2.55rem;
  height: 2.55rem;
  flex: 0 0 2.55rem;
  padding: 0;
  place-items: center;
  color: var(--clinic-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.7rem;
  text-decoration: none;
}

.icon-button:hover {
  color: var(--clinic-green-800);
  background: var(--clinic-green-50);
  border-color: var(--clinic-green-100);
}

.icon-button .app-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.topbar-action:hover {
  color: var(--clinic-green-800);
  background: var(--clinic-green-50);
  border-color: var(--clinic-green-100);
}

.notification-dot {
  position: absolute;
  top: 0.3rem;
  right: 0.32rem;
  display: block;
  width: 0.58rem;
  height: 0.58rem;
  background: var(--clinic-coral-600);
  border: 2px solid #fff;
  border-radius: 50%;
}

.notification-dot:not(:empty) {
  top: -0.1rem;
  right: -0.2rem;
  display: inline-grid;
  width: auto;
  min-width: 1.28rem;
  height: 1.28rem;
  padding: 0 0.3rem;
  place-items: center;
  color: #fff;
  border-width: 2px;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
}

.user-menu {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.35rem;
  color: var(--clinic-ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.7rem;
}

.user-menu:hover,
.user-menu[aria-expanded="true"] {
  background: var(--clinic-green-50);
  border-color: var(--clinic-green-100);
}

.user-menu .user-avatar {
  width: 2.15rem;
  height: 2.15rem;
  flex-basis: 2.15rem;
  border: 0;
  font-size: 0.78rem;
}

.user-copy {
  display: flex;
  min-width: 0;
  max-width: 12rem;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
}

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

.user-copy strong {
  color: var(--clinic-green-950);
  font-size: 0.78rem;
}

.user-copy small {
  margin-top: 0.2rem;
  color: var(--clinic-muted);
  font-size: 0.65rem;
}

.user-chevron {
  color: var(--clinic-muted);
  font-size: 0.75rem;
}

.user-dropdown {
  min-width: 15rem;
}

.dropdown-user-summary {
  padding: 0.45rem 0.65rem 0.65rem;
  overflow: hidden;
  color: var(--clinic-muted);
  border-bottom: 1px solid var(--clinic-border);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-dropdown form {
  margin: 0;
}

.user-dropdown form .dropdown-item {
  width: 100%;
}

.mobile-backdrop,
.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 1030;
  display: none;
  background: rgba(7, 30, 23, 0.58);
  opacity: 0;
  backdrop-filter: blur(2px);
  transition: opacity 0.22s ease;
}

.page-content,
.content-area {
  width: 100%;
  max-width: 1720px;
  padding: clamp(1rem, 2.2vw, 2rem);
  margin: 0 auto;
}

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.8rem clamp(1rem, 2.2vw, 2rem) 1.25rem;
  color: #78867f;
  font-size: 0.68rem;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.page-title {
  margin: 0;
  color: var(--clinic-green-950);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.page-subtitle {
  max-width: 52rem;
  margin: 0.35rem 0 0;
  color: var(--clinic-muted);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.breadcrumb {
  margin-bottom: 0.55rem;
  font-size: 0.78rem;
}

.breadcrumb-item a {
  color: var(--clinic-green-700);
  text-decoration: none;
}

.breadcrumb-item.active {
  color: var(--clinic-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #94a29c;
}

/* Collapsed desktop shell */

@media (min-width: 992px) {
  body.sidebar-collapsed .sidebar,
  body.sidebar-collapsed #sidebar {
    width: var(--clinic-sidebar-collapsed);
  }

  body.sidebar-collapsed .main-wrapper,
  body.sidebar-collapsed .app-main {
    margin-left: var(--clinic-sidebar-collapsed);
  }

  body.sidebar-collapsed .brand-copy,
  body.sidebar-collapsed .sidebar-brand-copy,
  body.sidebar-collapsed .sidebar-context,
  body.sidebar-collapsed .nav-title,
  body.sidebar-collapsed .sidebar-heading,
  body.sidebar-collapsed .nav-section-label,
  body.sidebar-collapsed .sidebar .nav-link > span,
  body.sidebar-collapsed #sidebar .nav-link > span,
  body.sidebar-collapsed .sidebar-link > span,
  body.sidebar-collapsed .nav-badge,
  body.sidebar-collapsed .sidebar-user-info {
    width: 0;
    opacity: 0;
    visibility: hidden;
  }

  body.sidebar-collapsed .sidebar-care-card {
    display: none;
  }

  body.sidebar-collapsed .sidebar-brand,
  body.sidebar-collapsed .sidebar-user {
    justify-content: center;
    padding-inline: 0.7rem;
  }

  body.sidebar-collapsed .sidebar .nav-link,
  body.sidebar-collapsed #sidebar .nav-link,
  body.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding-inline: 0.6rem;
  }

  body.sidebar-collapsed .sidebar .nav-link:hover,
  body.sidebar-collapsed #sidebar .nav-link:hover,
  body.sidebar-collapsed .sidebar-link:hover {
    transform: none;
  }
}

/* Authentication -------------------------------------------------------- */

.auth-page {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  overflow-x: clip;
  overflow-y: visible;
  background:
    radial-gradient(circle at 14% 8%, rgba(226, 199, 126, 0.34), transparent 24rem),
    radial-gradient(circle at 90% 90%, rgba(220, 103, 92, 0.17), transparent 24rem),
    linear-gradient(145deg, #f9fbf8, #edf5f0);
}

.auth-page::before,
.auth-page::after {
  position: fixed;
  z-index: 0;
  width: 28rem;
  height: 28rem;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(32, 98, 71, 0.08);
  border-radius: 50%;
}

.auth-page::before {
  top: -14rem;
  right: -8rem;
  box-shadow: 0 0 0 4rem rgba(32, 98, 71, 0.025), 0 0 0 8rem rgba(32, 98, 71, 0.018);
}

.auth-page::after {
  bottom: -18rem;
  left: -9rem;
  border-color: rgba(220, 103, 92, 0.09);
  box-shadow: 0 0 0 4rem rgba(220, 103, 92, 0.02), 0 0 0 8rem rgba(220, 103, 92, 0.016);
}

.auth-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, 68rem);
  min-height: 39rem;
  grid-template-columns: minmax(0, 0.95fr) minmax(23rem, 0.75fr);
  overflow: hidden;
  background: var(--clinic-surface);
  border: 1px solid rgba(220, 229, 224, 0.9);
  border-radius: clamp(1rem, 2.2vw, 1.65rem);
  box-shadow: var(--clinic-shadow-lg);
}

.auth-showcase {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(226, 199, 126, 0.35), transparent 13rem),
    linear-gradient(155deg, var(--clinic-green-700), var(--clinic-green-950));
}

.auth-visual {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 88% 10%, rgba(226, 199, 126, 0.38), transparent 13rem),
    linear-gradient(155deg, var(--clinic-green-700), var(--clinic-green-950));
}

.auth-visual::after {
  position: absolute;
  right: -4.5rem;
  bottom: -3.5rem;
  width: 25rem;
  height: 25rem;
  pointer-events: none;
  content: "";
  background: url("../../icon-white.png") center / contain no-repeat;
  opacity: 0.08;
  filter: grayscale(1);
}

.auth-visual-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.13));
}

.auth-visual .auth-brand {
  align-items: flex-start;
}

.auth-brand-logo {
  flex: 0 0 auto;
}

.auth-visual .auth-brand .eyebrow {
  display: block;
  margin-bottom: 0.38rem;
  color: var(--clinic-gold-300);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.auth-visual .auth-brand h1 {
  max-width: 22rem;
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.14;
}

.auth-quote {
  position: relative;
  z-index: 1;
  max-width: 27rem;
  margin-block: auto 1.5rem;
  padding-top: 4rem;
}

.quote-mark {
  display: block;
  height: 2.5rem;
  color: var(--clinic-gold-300);
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
}

.auth-quote p {
  margin: 0 0 0.8rem;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.18;
}

.auth-quote small {
  display: block;
  max-width: 24rem;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.78rem;
  line-height: 1.55;
}

.auth-showcase::before {
  position: absolute;
  right: -5rem;
  bottom: -7rem;
  width: 24rem;
  height: 24rem;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  box-shadow: 0 0 0 3.2rem rgba(255, 255, 255, 0.025), 0 0 0 6.4rem rgba(255, 255, 255, 0.02);
}

.auth-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: #fff;
  text-decoration: none;
}

.auth-brand:hover {
  color: #fff;
}

.auth-brand img {
  width: 4.25rem;
  height: 4.25rem;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
}

.auth-brand-title {
  display: block;
  max-width: 19rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.12;
}

.auth-brand-kicker {
  display: block;
  margin-bottom: 0.26rem;
  color: var(--clinic-gold-300);
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.auth-message {
  position: relative;
  z-index: 1;
  max-width: 27rem;
  margin-block: auto;
  padding-block: 3rem;
}

.auth-message .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1rem;
  color: var(--clinic-gold-300);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-message h1 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.15rem);
  line-height: 1.08;
}

.auth-message p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
}

.auth-trust-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.1rem;
  padding: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.76rem;
  list-style: none;
}

.auth-trust-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.auth-trust-list i {
  color: var(--clinic-gold-300);
}

.auth-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  background: rgba(255, 255, 255, 0.98);
}

.auth-card {
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
}

.auth-card-wrap {
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
}

.auth-mobile-brand {
  display: none;
  margin-bottom: 1.5rem;
  text-align: center;
}

.auth-mobile-brand {
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  color: var(--clinic-green-900);
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.auth-mobile-brand img {
  width: 5rem;
  height: 5rem;
  object-fit: contain;
}

.auth-title {
  margin: 0;
  color: var(--clinic-green-950);
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.auth-heading {
  margin-bottom: 1.2rem;
}

.auth-heading .eyebrow,
.eyebrow {
  display: inline-block;
  color: var(--clinic-green-700);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.auth-heading h2 {
  margin: 0.35rem 0 0;
  color: var(--clinic-green-950);
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.auth-intro {
  margin: 0 0 1.4rem;
  color: var(--clinic-muted);
  font-size: 0.88rem;
}

.auth-options {
  gap: 0.75rem;
  margin: 0.8rem 0 1rem;
  font-size: 0.78rem;
}

.auth-options .form-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 0;
  padding-left: 0;
  margin: 0;
}

.auth-options .form-check-input {
  float: none;
  margin: 0;
}

.auth-options a {
  font-weight: 700;
  text-decoration: none;
}

.auth-submit {
  min-height: 3rem;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.15rem 0;
  color: #84918b;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  height: 1px;
  flex: 1;
  content: "";
  background: var(--clinic-border);
}

.demo-accounts {
  padding: 0.75rem;
  margin-top: 1.1rem;
  color: var(--clinic-muted);
  background: #f8faf8;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius-sm);
  font-size: 0.7rem;
}

.demo-accounts summary {
  color: var(--clinic-green-800);
  font-weight: 800;
  cursor: pointer;
}

.demo-account-grid {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.demo-account-grid span,
.demo-account-grid strong {
  display: block;
}

.demo-accounts p {
  margin: 0.65rem 0 0;
}

.auth-subtitle {
  margin: 0.5rem 0 1.75rem;
  color: var(--clinic-muted);
}

.auth-links {
  margin-top: 1.4rem;
  color: var(--clinic-muted);
  font-size: 0.86rem;
  text-align: center;
}

.auth-links a {
  font-weight: 700;
  text-decoration: none;
}

.auth-footer {
  margin-top: 2rem;
  color: #74827c;
  font-size: 0.73rem;
  text-align: center;
}

.auth-card-wrap > .auth-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding-top: 1rem;
  border-top: 1px solid var(--clinic-border);
  text-align: left;
}

.secure-note {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--clinic-green-700);
  white-space: nowrap;
}

.security-note {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  margin: 1rem 0;
  color: var(--clinic-green-800);
  background: var(--clinic-green-50);
  border: 1px solid var(--clinic-green-100);
  border-radius: var(--clinic-radius-sm);
  font-size: 0.78rem;
}

/* Cards and dashboard ---------------------------------------------------- */

.card {
  --bs-card-border-color: var(--clinic-border);
  --bs-card-border-radius: var(--clinic-radius);
  --bs-card-cap-bg: rgba(240, 247, 243, 0.46);
  background: var(--clinic-surface);
  box-shadow: var(--clinic-shadow-sm);
}

.card-header {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  color: var(--clinic-green-950);
  border-bottom-color: var(--clinic-border);
  font-weight: 700;
}

.card-title {
  margin: 0;
  color: var(--clinic-green-950);
  font-size: 1rem;
  font-weight: 800;
}

.card-subtitle {
  margin-top: 0.22rem;
  color: var(--clinic-muted);
  font-size: 0.78rem;
}

.card-body {
  padding: 1.1rem;
}

.dashboard-grid,
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.stat-card {
  position: relative;
  min-width: 0;
  padding: 1.15rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius);
  box-shadow: var(--clinic-shadow-sm);
}

.stat-card::after {
  position: absolute;
  top: -2.8rem;
  right: -2.8rem;
  width: 7rem;
  height: 7rem;
  pointer-events: none;
  content: "";
  background: var(--stat-soft, var(--clinic-green-50));
  border-radius: 50%;
}

.stat-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.stat-icon {
  position: relative;
  z-index: 1;
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  place-items: center;
  color: var(--stat-color, var(--clinic-green-700));
  background: var(--stat-soft, var(--clinic-green-50));
  border-radius: 0.78rem;
  font-size: 1.23rem;
}

.stat-label {
  color: var(--clinic-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.stat-value {
  margin-top: 0.28rem;
  color: var(--clinic-green-950);
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.stat-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.8rem;
  color: var(--clinic-muted);
  font-size: 0.72rem;
}

.stat-meta .trend-up {
  color: #21704d;
  font-weight: 800;
}

.stat-meta .trend-down {
  color: var(--clinic-coral-700);
  font-weight: 800;
}

.stat-card.stat-gold {
  --stat-color: var(--clinic-gold-700);
  --stat-soft: var(--clinic-gold-100);
}

.stat-card.stat-coral {
  --stat-color: var(--clinic-coral-700);
  --stat-soft: var(--clinic-coral-100);
}

.stat-card.stat-blue {
  --stat-color: #276c85;
  --stat-soft: #e1f0f5;
}

.quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
}

.quick-action {
  display: flex;
  min-height: 5.25rem;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem;
  color: var(--clinic-ink);
  background: #fff;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius-sm);
  text-decoration: none;
  transition: border 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.quick-action:hover {
  color: var(--clinic-green-900);
  border-color: var(--clinic-green-200);
  box-shadow: var(--clinic-shadow-sm);
  transform: translateY(-2px);
}

.quick-action-icon {
  display: inline-grid;
  width: 2.65rem;
  height: 2.65rem;
  flex: 0 0 2.65rem;
  place-items: center;
  color: var(--clinic-green-700);
  background: var(--clinic-green-50);
  border-radius: 0.72rem;
  font-size: 1.18rem;
}

.quick-action strong {
  display: block;
  font-size: 0.86rem;
}

.quick-action small {
  display: block;
  margin-top: 0.14rem;
  color: var(--clinic-muted);
  font-size: 0.7rem;
}

.chart-wrap,
.chart-container {
  position: relative;
  min-height: 18rem;
}

.chart-wrap canvas,
.chart-container canvas {
  max-height: 22rem;
}

.activity-list,
.timeline {
  padding: 0;
  margin: 0;
  list-style: none;
}

.activity-item,
.timeline-item {
  position: relative;
  display: flex;
  gap: 0.8rem;
  padding: 0.8rem 0;
}

.activity-item + .activity-item,
.timeline-item + .timeline-item {
  border-top: 1px solid #edf1ef;
}

.activity-icon,
.timeline-icon {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  flex: 0 0 2.25rem;
  place-items: center;
  color: var(--clinic-green-700);
  background: var(--clinic-green-50);
  border-radius: 50%;
}

.activity-content,
.timeline-content {
  min-width: 0;
  flex: 1;
}

.activity-title,
.timeline-title {
  margin: 0;
  color: var(--clinic-ink);
  font-size: 0.84rem;
  font-weight: 700;
}

.activity-meta,
.timeline-meta {
  margin-top: 0.18rem;
  color: var(--clinic-muted);
  font-size: 0.72rem;
}

/* Buttons --------------------------------------------------------------- */

.btn {
  --bs-btn-border-radius: 0.62rem;
  --bs-btn-font-weight: 700;
  --bs-btn-padding-y: 0.56rem;
  --bs-btn-padding-x: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  box-shadow: none;
}

.btn:focus-visible {
  box-shadow: var(--clinic-focus);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--clinic-green-700);
  --bs-btn-border-color: var(--clinic-green-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--clinic-green-800);
  --bs-btn-hover-border-color: var(--clinic-green-800);
  --bs-btn-active-bg: var(--clinic-green-900);
  --bs-btn-active-border-color: var(--clinic-green-900);
  --bs-btn-disabled-bg: #779889;
  --bs-btn-disabled-border-color: #779889;
}

.btn-outline-primary {
  --bs-btn-color: var(--clinic-green-700);
  --bs-btn-border-color: var(--clinic-green-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--clinic-green-700);
  --bs-btn-hover-border-color: var(--clinic-green-700);
  --bs-btn-active-bg: var(--clinic-green-800);
  --bs-btn-active-border-color: var(--clinic-green-800);
}

.btn-soft-primary {
  color: var(--clinic-green-800);
  background: var(--clinic-green-50);
  border: 1px solid var(--clinic-green-100);
}

.btn-soft-primary:hover {
  color: var(--clinic-green-950);
  background: var(--clinic-green-100);
  border-color: var(--clinic-green-200);
}

.btn-soft-danger {
  color: var(--clinic-coral-700);
  background: #fff1ef;
  border: 1px solid var(--clinic-coral-100);
}

.btn-soft-danger:hover {
  color: #7f2924;
  background: var(--clinic-coral-100);
  border-color: #edb9b4;
}

.btn-icon {
  display: inline-grid;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  place-items: center;
  border-radius: 0.58rem;
}

.btn-loading {
  pointer-events: none;
  opacity: 0.8;
}

.btn-loading::before {
  width: 0.92rem;
  height: 0.92rem;
  content: "";
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: clinic-spin 0.7s linear infinite;
}

@keyframes clinic-spin {
  to { transform: rotate(360deg); }
}

/* Forms ----------------------------------------------------------------- */

.form-label,
.col-form-label {
  margin-bottom: 0.42rem;
  color: #34453e;
  font-size: 0.8rem;
  font-weight: 700;
}

.required-mark,
.form-label.required::after,
label[data-required]::after {
  color: var(--clinic-coral-700);
  content: " *";
}

.form-control,
.form-select {
  min-height: 2.72rem;
  color: var(--clinic-ink);
  background-color: #fff;
  border-color: #cfdad4;
  border-radius: 0.62rem;
  font-size: 0.86rem;
}

.form-control::placeholder {
  color: #8c9993;
  opacity: 1;
}

.form-control:hover,
.form-select:hover {
  border-color: #aebfb6;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--clinic-green-500);
  box-shadow: var(--clinic-focus);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  color: #63716b;
  background: #f1f4f2;
}

textarea.form-control {
  min-height: 7rem;
  resize: vertical;
}

.form-text {
  color: #6b7a74;
  font-size: 0.72rem;
}

.form-check-input:checked {
  background-color: var(--clinic-green-700);
  border-color: var(--clinic-green-700);
}

.form-check-label {
  color: #3d4d46;
  font-size: 0.82rem;
}

.input-group-text {
  color: var(--clinic-muted);
  background: var(--clinic-green-50);
  border-color: #cfdad4;
}

.password-field {
  position: relative;
}

.password-control {
  position: relative;
}

.password-field .form-control {
  padding-right: 4.2rem;
}

/* Password fields own the right-side action area. Bootstrap's generated
   validity icon would occupy the same space as the Show button. */
.was-validated .password-field .form-control:valid,
.was-validated .password-field .form-control:invalid,
.password-field .form-control.is-valid,
.password-field .form-control.is-invalid {
  padding-right: 4.2rem;
  background-image: none;
}

.password-field .password-toggle,
.password-field [data-password-toggle] {
  position: absolute;
  top: 50%;
  right: 0.42rem;
  z-index: 4;
  display: inline-grid;
  width: auto;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.48rem;
  place-items: center;
  color: var(--clinic-muted);
  background: transparent;
  border: 0;
  border-radius: 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
  transform: translateY(-50%);
}

.password-field .password-toggle:hover,
.password-field [data-password-toggle]:hover {
  color: var(--clinic-green-800);
  background: var(--clinic-green-50);
}

.password-field .password-toggle:focus-visible,
.password-field [data-password-toggle]:focus-visible {
  outline: 2px solid var(--clinic-green-500);
  outline-offset: 1px;
}

.password-control .password-toggle,
.password-control [data-password-toggle] {
  top: 50%;
}

.form-floating.password-field > .form-control {
  padding-right: 4.2rem;
}

.field-shell {
  margin-bottom: 1rem;
}

.field-error,
.invalid-feedback {
  color: #9f342e;
  font-size: 0.73rem;
  font-weight: 600;
}

.validation-feedback:not([hidden]),
.was-validated .validation-feedback:not([hidden]),
.is-invalid ~ .validation-feedback:not([hidden]) {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.38rem;
  line-height: 1.35;
}

/* Bootstrap's :invalid sibling rules must never reveal a hidden message. */
.validation-feedback[hidden] {
  display: none !important;
}

.validation-feedback-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Optional empty controls are neutral, not successfully validated. */
.was-validated .form-control:not([required]):valid {
  padding-right: 0.75rem;
  background-image: none;
  border-color: #cfdad4;
}

.validation-feedback::before {
  display: inline-grid;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  margin-top: 0.02rem;
  place-items: center;
  color: #fff;
  content: "!";
  background: var(--clinic-coral-600);
  border-radius: 50%;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.input-group + .validation-feedback,
.password-control + .validation-feedback,
.form-floating + .validation-feedback {
  margin-top: 0.38rem;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--clinic-coral-600);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--clinic-green-600);
}

.form-section {
  padding: 1.1rem;
  margin-bottom: 1rem;
  background: #fff;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius);
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding-bottom: 0.8rem;
  margin: 0 0 1rem;
  color: var(--clinic-green-900);
  border-bottom: 1px solid #e8eeeb;
  font-size: 0.98rem;
  font-weight: 800;
}

.form-section-title i {
  color: var(--clinic-gold-700);
}

.form-actions {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
  padding: 0.8rem 1rem;
  margin-top: 1rem;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius);
  box-shadow: 0 -6px 20px rgba(19, 61, 47, 0.05);
  backdrop-filter: blur(10px);
}

.char-counter {
  float: right;
  color: var(--clinic-muted);
  font-size: 0.68rem;
}

.char-counter.is-near-limit {
  color: var(--clinic-coral-700);
  font-weight: 700;
}

.progress-steps {
  display: flex;
  padding: 0;
  margin: 0 0 1.25rem;
  overflow-x: auto;
  list-style: none;
}

.progress-step {
  position: relative;
  display: flex;
  min-width: 8rem;
  flex: 1;
  align-items: center;
  gap: 0.55rem;
  color: #7b8983;
  font-size: 0.74rem;
  font-weight: 700;
}

.progress-step:not(:last-child)::after {
  height: 2px;
  flex: 1;
  margin-right: 0.5rem;
  content: "";
  background: var(--clinic-border);
}

.progress-step-number {
  display: inline-grid;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 1.8rem;
  place-items: center;
  background: #edf1ef;
  border-radius: 50%;
}

.progress-step.is-active,
.progress-step.is-complete {
  color: var(--clinic-green-800);
}

.progress-step.is-active .progress-step-number {
  color: #fff;
  background: var(--clinic-green-700);
  box-shadow: var(--clinic-focus);
}

.progress-step.is-complete .progress-step-number,
.progress-step.is-complete::after {
  color: #fff;
  background: var(--clinic-green-500);
}

/* OTP verification */

.otp-group,
[data-otp-group] {
  display: grid;
  grid-template-columns: repeat(6, minmax(2.65rem, 1fr));
  gap: clamp(0.35rem, 1.4vw, 0.6rem);
  max-width: 25rem;
  margin: 1.2rem auto;
}

.otp-input {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1 / 1.08;
  padding: 0.25rem;
  color: var(--clinic-green-950);
  background: #fff;
  border: 1px solid #c7d4cd;
  border-radius: 0.68rem;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 800;
  text-align: center;
  caret-color: var(--clinic-green-700);
}

.otp-input:focus {
  outline: 0;
  border-color: var(--clinic-green-600);
  box-shadow: var(--clinic-focus);
}

.otp-input.is-filled {
  color: var(--clinic-green-900);
  background: var(--clinic-green-50);
  border-color: var(--clinic-green-500);
}

.otp-resend {
  color: var(--clinic-muted);
  font-size: 0.82rem;
  text-align: center;
}

.otp-resend [disabled] {
  color: #8a9791;
  pointer-events: none;
}

/* Tables and filters ----------------------------------------------------- */

.table-card {
  overflow: hidden;
}

.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  background: #fff;
  border-bottom: 1px solid var(--clinic-border);
}

.table-toolbar .search-box {
  position: relative;
  min-width: min(100%, 15rem);
  flex: 1 1 18rem;
  max-width: 26rem;
}

.search-box > i,
.search-box .search-icon {
  position: absolute;
  top: 50%;
  left: 0.86rem;
  z-index: 4;
  color: #7e8c86;
  pointer-events: none;
  transform: translateY(-50%);
}

.search-box .form-control,
.table-search {
  padding-left: 2.45rem;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.filter-chip {
  padding: 0.43rem 0.72rem;
  color: var(--clinic-muted);
  background: #fff;
  border: 1px solid var(--clinic-border);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
}

.filter-chip:hover,
.filter-chip.active,
.filter-chip[aria-pressed="true"] {
  color: var(--clinic-green-900);
  background: var(--clinic-green-50);
  border-color: var(--clinic-green-300, var(--clinic-green-200));
}

.table-responsive {
  scrollbar-color: #bdccc4 transparent;
  scrollbar-width: thin;
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--clinic-ink);
  --bs-table-border-color: #e6ece9;
  margin-bottom: 0;
  font-size: 0.81rem;
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  padding: 0.82rem 0.9rem;
}

.table thead th {
  color: #53645c;
  background: #f4f8f5;
  border-bottom-width: 1px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table tbody tr {
  transition: background 0.14s ease;
}

.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: var(--clinic-green-50);
  color: var(--clinic-ink);
}

.table tbody tr.is-highlighted > * {
  background: #fff9e9;
}

.table-primary-text {
  color: var(--clinic-green-950);
  font-weight: 700;
}

.table-secondary-text {
  display: block;
  margin-top: 0.1rem;
  color: var(--clinic-muted);
  font-size: 0.7rem;
}

.table-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.3rem;
  white-space: nowrap;
}

.sortable {
  cursor: pointer;
  user-select: none;
}

.sortable::after {
  margin-left: 0.35rem;
  color: #9ba7a1;
  font-family: "bootstrap-icons";
  font-size: 0.65rem;
  content: "\f229";
}

.table-empty-row td {
  padding: 2rem !important;
  color: var(--clinic-muted);
  text-align: center;
}

.pagination {
  --bs-pagination-color: var(--clinic-green-700);
  --bs-pagination-hover-color: var(--clinic-green-900);
  --bs-pagination-hover-bg: var(--clinic-green-50);
  --bs-pagination-hover-border-color: var(--clinic-green-100);
  --bs-pagination-focus-color: var(--clinic-green-900);
  --bs-pagination-focus-bg: var(--clinic-green-50);
  --bs-pagination-focus-box-shadow: var(--clinic-focus);
  --bs-pagination-active-bg: var(--clinic-green-700);
  --bs-pagination-active-border-color: var(--clinic-green-700);
  --bs-pagination-border-color: var(--clinic-border);
  gap: 0.2rem;
}

.page-link {
  min-width: 2.2rem;
  border-radius: 0.48rem !important;
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
}

/* Statuses and data labels ---------------------------------------------- */

.status-badge,
.badge-status {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  gap: 0.32rem;
  padding: 0.23rem 0.55rem;
  color: #46554f;
  background: #edf1ef;
  border: 1px solid #dde5e1;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.status-badge::before,
.badge-status::before {
  width: 0.42rem;
  height: 0.42rem;
  flex: 0 0 0.42rem;
  content: "";
  background: currentColor;
  border-radius: 50%;
  opacity: 0.75;
}

.status-active,
.status-approved,
.status-completed,
.status-paid,
.status-in-stock,
.status-confirmed,
.status-success {
  color: #176341;
  background: #e3f4ea;
  border-color: #bfe4ce;
}

.status-pending,
.status-scheduled,
.status-partial,
.status-low-stock,
.status-warning {
  color: #805814;
  background: #fbf1d7;
  border-color: #eddba6;
}

.status-cancelled,
.status-rejected,
.status-overdue,
.status-out-of-stock,
.status-expired,
.status-danger {
  color: #97362f;
  background: #fbe7e5;
  border-color: #efc5c1;
}

.status-processing,
.status-admitted,
.status-dispensed,
.status-info {
  color: #1f617a;
  background: #e3f2f7;
  border-color: #c0e0eb;
}

.status-inactive,
.status-draft,
.status-archived,
.status-muted {
  color: #56635e;
  background: #edf1ef;
  border-color: #dbe3df;
}

.role-badge {
  display: inline-flex;
  padding: 0.25rem 0.58rem;
  color: var(--clinic-green-800);
  background: var(--clinic-green-50);
  border: 1px solid var(--clinic-green-100);
  border-radius: 0.45rem;
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: capitalize;
}

.stock-meter {
  width: 7rem;
}

.stock-meter .progress {
  height: 0.36rem;
  margin-top: 0.28rem;
  background: #e8eeeb;
}

.stock-meter .progress-bar {
  background: var(--clinic-green-600);
}

.stock-meter.is-low .progress-bar {
  background: var(--clinic-gold-600);
}

.stock-meter.is-critical .progress-bar {
  background: var(--clinic-coral-600);
}

/* Booking and calendars ------------------------------------------------- */

.booking-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, 0.7fr);
  gap: 1rem;
}

.booking-card,
.appointment-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.95rem;
  background: #fff;
  border: 1px solid var(--clinic-border);
  border-left: 4px solid var(--appointment-color, var(--clinic-green-600));
  border-radius: var(--clinic-radius-sm);
  box-shadow: var(--clinic-shadow-sm);
}

.booking-card + .booking-card,
.appointment-card + .appointment-card {
  margin-top: 0.65rem;
}

.appointment-time {
  min-width: 4.6rem;
  color: var(--clinic-green-900);
  font-size: 0.82rem;
  font-weight: 800;
}

.appointment-content {
  min-width: 0;
  flex: 1;
}

.appointment-title {
  margin: 0;
  color: var(--clinic-ink);
  font-size: 0.87rem;
  font-weight: 800;
}

.appointment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  margin-top: 0.26rem;
  color: var(--clinic-muted);
  font-size: 0.72rem;
}

.appointment-prenatal { --appointment-color: var(--clinic-green-600); }
.appointment-consultation { --appointment-color: #3c86a0; }
.appointment-followup { --appointment-color: var(--clinic-gold-600); }
.appointment-delivery { --appointment-color: var(--clinic-coral-600); }

.calendar-shell {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius);
  box-shadow: var(--clinic-shadow-sm);
}

.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.9rem;
  border-bottom: 1px solid var(--clinic-border);
}

.calendar-title {
  margin: 0;
  color: var(--clinic-green-950);
  font-size: 1rem;
  font-weight: 800;
}

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

.calendar-weekday {
  padding: 0.55rem 0.25rem;
  color: var(--clinic-muted);
  background: #f5f8f6;
  border-bottom: 1px solid var(--clinic-border);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.calendar-day {
  position: relative;
  min-height: 6.7rem;
  padding: 0.48rem;
  background: #fff;
  border-right: 1px solid #e8eeeb;
  border-bottom: 1px solid #e8eeeb;
}

.calendar-day:nth-child(7n) {
  border-right: 0;
}

.calendar-day.is-muted {
  color: #9aa59f;
  background: #fafbfa;
}

.calendar-day.is-today {
  background: var(--clinic-green-50);
  box-shadow: inset 0 0 0 2px var(--clinic-green-500);
}

.calendar-date {
  display: inline-grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
}

.is-today .calendar-date {
  color: #fff;
  background: var(--clinic-green-700);
}

.calendar-event {
  display: block;
  padding: 0.25rem 0.36rem;
  margin-top: 0.3rem;
  overflow: hidden;
  color: var(--clinic-green-900);
  background: var(--clinic-green-100);
  border-left: 3px solid var(--clinic-green-600);
  border-radius: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.2rem, 1fr));
  gap: 0.5rem;
}

.time-slot {
  padding: 0.58rem 0.45rem;
  color: var(--clinic-green-800);
  background: #fff;
  border: 1px solid var(--clinic-green-200);
  border-radius: 0.55rem;
  font-size: 0.77rem;
  font-weight: 700;
  text-align: center;
}

.time-slot:hover,
.time-slot.is-selected,
.time-slot[aria-pressed="true"] {
  color: #fff;
  background: var(--clinic-green-700);
  border-color: var(--clinic-green-700);
}

.time-slot:disabled,
.time-slot.is-unavailable {
  color: #8c9792;
  background: #f1f3f2;
  border-color: #e2e7e4;
  text-decoration: line-through;
  cursor: not-allowed;
}

.booking-summary {
  position: sticky;
  top: calc(var(--clinic-topbar-height) + 1rem);
}

.detail-list {
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.75fr) minmax(0, 1.25fr);
  gap: 0.7rem;
  margin: 0;
}

dl.detail-list dt {
  color: var(--clinic-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

dl.detail-list dd {
  margin: 0;
  color: var(--clinic-ink);
  font-size: 0.74rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.row.detail-list {
  display: flex;
  gap: 0;
}

.row.detail-list dt,
.row.detail-list dd {
  padding-top: 0.18rem;
  padding-bottom: 0.18rem;
}

.detail-row {
  display: grid;
  grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 1.3fr);
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid #edf1ef;
}

.detail-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.detail-row dt {
  color: var(--clinic-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.detail-row dd {
  margin: 0;
  color: var(--clinic-ink);
  font-size: 0.82rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Modals, dropdowns, alerts and toasts ---------------------------------- */

.modal-content {
  overflow: hidden;
  border: 0;
  border-radius: var(--clinic-radius-lg);
  box-shadow: var(--clinic-shadow-lg);
}

.modal-header {
  padding: 1rem 1.2rem;
  background: #f8faf8;
  border-bottom-color: var(--clinic-border);
}

.modal-title {
  color: var(--clinic-green-950);
  font-size: 1.05rem;
  font-weight: 800;
}

.modal-body {
  padding: 1.2rem;
}

.modal-footer {
  padding: 0.85rem 1.2rem;
  background: #fbfcfb;
  border-top-color: var(--clinic-border);
}

.modal-icon {
  display: grid;
  width: 3.6rem;
  height: 3.6rem;
  margin: 0 auto 1rem;
  place-items: center;
  color: var(--clinic-green-700);
  background: var(--clinic-green-50);
  border-radius: 50%;
  font-size: 1.55rem;
}

.modal-icon.is-danger {
  color: var(--clinic-coral-700);
  background: var(--clinic-coral-100);
}

.dropdown-menu {
  padding: 0.45rem;
  border-color: var(--clinic-border);
  border-radius: 0.7rem;
  box-shadow: var(--clinic-shadow);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.52rem 0.65rem;
  color: #34453e;
  border-radius: 0.48rem;
  font-size: 0.8rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--clinic-green-900);
  background: var(--clinic-green-50);
}

.dropdown-item.text-danger:hover {
  color: var(--clinic-coral-700) !important;
  background: #fff1ef;
}

.alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.8rem 2.8rem 0.8rem 0.9rem;
  border-radius: var(--clinic-radius-sm);
  font-size: 0.81rem;
}

.alert-success {
  color: #155739;
  background: #e7f5ed;
  border-color: #bde2ca;
}

.alert-danger {
  color: #8d302a;
  background: #fbe9e7;
  border-color: #efc4c0;
}

.alert-warning {
  color: #75500f;
  background: #fbf2da;
  border-color: #ecd99e;
}

.alert-info {
  color: #215e73;
  background: #e7f3f7;
  border-color: #bfdde8;
}

.flash-container,
.toast-container {
  position: fixed;
  top: calc(var(--clinic-topbar-height) + 0.8rem);
  right: 1rem;
  z-index: 1090;
  display: grid;
  width: min(25rem, calc(100vw - 2rem));
  gap: 0.6rem;
  pointer-events: none;
}

.flash-alert,
.app-toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 2.65rem 0.85rem 0.9rem;
  color: var(--clinic-ink);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--clinic-border);
  border-left: 4px solid var(--clinic-green-600);
  border-radius: var(--clinic-radius-sm);
  box-shadow: var(--clinic-shadow);
  pointer-events: auto;
  animation: clinic-toast-in 0.25s ease both;
}

.flash-alert.alert-danger,
.app-toast.is-danger { border-left-color: var(--clinic-coral-600); }
.flash-alert.alert-warning,
.app-toast.is-warning { border-left-color: var(--clinic-gold-600); }
.flash-alert.alert-info,
.app-toast.is-info { border-left-color: #29758c; }

.flash-alert.is-hiding,
.app-toast.is-hiding,
.alert.is-hiding {
  animation: clinic-toast-out 0.2s ease both;
}

@keyframes clinic-toast-in {
  from { opacity: 0; transform: translateY(-0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes clinic-toast-out {
  to { opacity: 0; transform: translateY(-0.5rem); }
}

.toast-icon {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  place-items: center;
  color: var(--clinic-green-700);
  background: var(--clinic-green-50);
  border-radius: 50%;
}

.toast-content {
  min-width: 0;
  flex: 1;
}

.toast-title {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 800;
}

.toast-message {
  margin: 0.15rem 0 0;
  color: var(--clinic-muted);
  font-size: 0.74rem;
}

/* Empty states and callouts --------------------------------------------- */

.empty-state {
  display: flex;
  min-height: 16rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  color: var(--clinic-muted);
  text-align: center;
}

.empty-state-icon {
  display: grid;
  width: 4.25rem;
  height: 4.25rem;
  margin-bottom: 1rem;
  place-items: center;
  color: var(--clinic-green-700);
  background: var(--clinic-green-50);
  border: 1px solid var(--clinic-green-100);
  border-radius: 50%;
  font-size: 1.7rem;
}

.empty-state h3,
.empty-state-title {
  margin: 0 0 0.35rem;
  color: var(--clinic-green-950);
  font-size: 1rem;
  font-weight: 800;
}

.empty-state p {
  max-width: 28rem;
  margin: 0 auto 1rem;
  font-size: 0.8rem;
}

.info-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  color: var(--clinic-green-900);
  background: linear-gradient(90deg, var(--clinic-green-50), #f8fbf9);
  border: 1px solid var(--clinic-green-100);
  border-left: 4px solid var(--clinic-green-600);
  border-radius: var(--clinic-radius-sm);
}

.info-callout.is-warning {
  color: #6e4a0b;
  background: #fdf8e9;
  border-color: #ebd8a1;
  border-left-color: var(--clinic-gold-600);
}

.info-callout.is-danger {
  color: #832d27;
  background: #fff3f1;
  border-color: #efc9c5;
  border-left-color: var(--clinic-coral-600);
}

/* Patient/profile and clinical summaries ------------------------------- */

.profile-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(226, 199, 126, 0.3), transparent 10rem),
    linear-gradient(135deg, var(--clinic-green-700), var(--clinic-green-900));
  border-radius: var(--clinic-radius);
}

.profile-header .avatar {
  width: 4.2rem;
  height: 4.2rem;
  flex-basis: 4.2rem;
  font-size: 1.25rem;
}

.profile-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  margin-top: 0.3rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.75rem;
}

.vital-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.65rem;
}

.vital-card {
  padding: 0.8rem;
  background: #f8faf9;
  border: 1px solid #e3eae6;
  border-radius: var(--clinic-radius-sm);
}

.vital-label {
  color: var(--clinic-muted);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}

.vital-value {
  margin-top: 0.2rem;
  color: var(--clinic-green-950);
  font-size: 1.05rem;
  font-weight: 800;
}

.vital-unit {
  color: var(--clinic-muted);
  font-size: 0.67rem;
  font-weight: 600;
}

.amount {
  color: var(--clinic-green-950);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  white-space: nowrap;
}

/* Project view compatibility -------------------------------------------- */

.page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.page-heading h1 {
  margin: 0.3rem 0 0;
  color: var(--clinic-green-950);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.page-heading p {
  max-width: 52rem;
  margin: 0.45rem 0 0;
  color: var(--clinic-muted);
}

.heading-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.panel-card {
  position: relative;
  padding: 1.1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius);
  box-shadow: var(--clinic-shadow-sm);
}

.panel-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.panel-card-header h2 {
  margin: 0.2rem 0 0;
  color: var(--clinic-green-950);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.panel-card-header p {
  margin: 0.25rem 0 0;
  color: var(--clinic-muted);
  font-size: 0.73rem;
}

.card-icon {
  display: inline-grid;
  width: 2.6rem;
  height: 2.6rem;
  flex: 0 0 2.6rem;
  place-items: center;
  color: var(--clinic-green-700);
  background: var(--clinic-green-50);
  border-radius: 0.7rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--clinic-green-700);
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.text-link .app-icon {
  width: 0.9rem;
  height: 0.9rem;
}

.stat-card-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.stat-trend {
  padding: 0.2rem 0.48rem;
  color: var(--stat-color, var(--clinic-green-700));
  background: var(--stat-soft, var(--clinic-green-50));
  border-radius: 999px;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stat-card > .stat-value {
  display: block;
  margin: 0;
}

.stat-card > .stat-label {
  display: block;
  margin-top: 0.45rem;
  color: var(--clinic-ink);
  font-size: 0.78rem;
  font-weight: 800;
}

.stat-card > small {
  display: block;
  margin-top: 0.18rem;
  color: var(--clinic-muted);
  font-size: 0.68rem;
}

.stat-card.tone-green {
  --stat-color: var(--clinic-green-700);
  --stat-soft: var(--clinic-green-50);
}

.stat-card.tone-coral {
  --stat-color: var(--clinic-coral-700);
  --stat-soft: var(--clinic-coral-100);
}

.stat-card.tone-gold {
  --stat-color: var(--clinic-gold-700);
  --stat-soft: var(--clinic-gold-100);
}

.stat-card.tone-sage {
  --stat-color: #50764e;
  --stat-soft: #e8f1e5;
}

.stat-card.tone-danger {
  --stat-color: #a8322d;
  --stat-soft: #f8dfdc;
}

.inventory-stat-grid {
  margin-bottom: 1.5rem;
}

.inventory-stat-card {
  min-height: 11rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.inventory-stat-card:hover {
  color: inherit;
  border-color: var(--stat-color);
  box-shadow: 0 0.8rem 1.75rem rgb(24 68 53 / 12%);
  transform: translateY(-2px);
}

.inventory-stat-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--stat-color) 28%, transparent);
  outline-offset: 3px;
}

.inventory-stat-card.active {
  border-color: var(--stat-color);
  box-shadow: 0 0 0 1px var(--stat-color), var(--clinic-shadow-sm);
}

.inventory-stat-card.active::before {
  position: absolute;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: 0.22rem;
  content: "";
  background: var(--stat-color);
  border-radius: 0 999px 999px 0;
}

.inventory-stat-card > .stat-value,
.inventory-stat-card > .stat-label,
.inventory-stat-card > small {
  position: relative;
  z-index: 1;
}

.chart-wrap-lg {
  min-height: 19rem;
}

.chart-wrap-doughnut {
  min-height: 19rem;
}

.table-primary {
  display: flex;
  min-width: 10rem;
  flex-direction: column;
  color: var(--clinic-ink);
}

.table-primary strong {
  font-size: 0.8rem;
}

.table-primary small {
  margin-top: 0.12rem;
  color: var(--clinic-muted);
  font-size: 0.67rem;
}

.table-empty {
  padding: 2rem 1rem;
  color: var(--clinic-muted);
  text-align: center;
}

.attention-card {
  padding-bottom: 0.45rem;
}

.attention-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.78rem 0;
  color: var(--clinic-ink);
  text-decoration: none;
  border-top: 1px solid #edf1ef;
}

.attention-row:hover {
  color: var(--clinic-green-900);
}

.attention-row > span:nth-child(2) {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.attention-row strong {
  font-size: 0.78rem;
}

.attention-row small {
  margin-top: 0.12rem;
  color: var(--clinic-muted);
  font-size: 0.66rem;
}

.attention-row > .app-icon {
  width: 0.9rem;
  height: 0.9rem;
  color: #89968f;
}

.attention-icon {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  color: var(--clinic-green-700);
  background: var(--clinic-green-50);
  border-radius: 0.62rem;
}

.attention-icon.warning {
  color: var(--clinic-gold-700);
  background: var(--clinic-gold-100);
}

.attention-icon.coral {
  color: var(--clinic-coral-700);
  background: var(--clinic-coral-100);
}

.privacy-callout {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem;
  color: var(--clinic-green-900);
  background: linear-gradient(135deg, var(--clinic-green-50), #fff);
  border: 1px solid var(--clinic-green-100);
  border-radius: var(--clinic-radius-sm);
}

.privacy-callout > .app-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  margin-top: 0.1rem;
}

.privacy-callout strong {
  font-size: 0.78rem;
}

.privacy-callout p {
  margin: 0.2rem 0 0;
  color: var(--clinic-muted);
  font-size: 0.68rem;
  line-height: 1.5;
}

.info-tile {
  display: flex;
  min-height: 7rem;
  flex-direction: column;
  padding: 0.85rem;
  background: linear-gradient(145deg, var(--clinic-green-50), #fff);
  border: 1px solid var(--clinic-green-100);
  border-radius: var(--clinic-radius-sm);
}

.info-tile .info-label {
  margin-bottom: auto;
  color: var(--clinic-green-700);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.info-tile strong {
  display: block;
  margin-top: 0.8rem;
  color: var(--clinic-green-950);
  font-size: 0.85rem;
}

.info-tile small {
  display: block;
  margin-top: 0.2rem;
  color: var(--clinic-muted);
  font-size: 0.68rem;
}

.section-label {
  margin: 0 0 0.45rem;
  color: var(--clinic-green-800);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.action-panel {
  height: 100%;
  background: #f7f9f8;
  border: 1px solid var(--clinic-border);
}

.patient-detail-panel {
  border-left: 4px solid var(--clinic-green-600) !important;
}

.avatar-lg {
  width: 3.5rem;
  height: 3.5rem;
  flex-basis: 3.5rem;
  font-size: 1.05rem;
}

.filter-tabs {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.25rem;
  background: #eaf1ed;
  border-radius: 0.65rem;
}

.filter-tab {
  padding: 0.42rem 0.8rem;
  color: var(--clinic-muted);
  border-radius: 0.48rem;
  font-size: 0.74rem;
  font-weight: 800;
  text-decoration: none;
}

.filter-tab:hover,
.filter-tab.active {
  color: var(--clinic-green-900);
  background: #fff;
  box-shadow: var(--clinic-shadow-sm);
}

.notification-list-card {
  padding: 0;
}

.notification-list {
  display: grid;
}

.notification-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.95rem 1rem;
  color: var(--clinic-ink);
  text-decoration: none;
  border-bottom: 1px solid #edf1ef;
}

.notification-row:last-child {
  border-bottom: 0;
}

.notification-row:hover {
  color: var(--clinic-green-900);
  background: var(--clinic-green-50);
}

.notification-row.unread {
  background: #f4faf6;
}

.notification-type-icon {
  display: inline-grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  color: var(--clinic-green-700);
  background: var(--clinic-green-100);
  border-radius: 0.7rem;
}

.notification-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.notification-copy strong {
  font-size: 0.82rem;
}

.notification-copy > span {
  margin-top: 0.16rem;
  color: var(--clinic-muted);
  font-size: 0.74rem;
}

.notification-copy small {
  margin-top: 0.32rem;
  color: #7c8983;
  font-size: 0.65rem;
}

.unread-pip {
  width: 0.52rem;
  height: 0.52rem;
  margin-top: 0.45rem;
  background: var(--clinic-coral-600);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--clinic-coral-100);
}

.empty-state.compact {
  min-height: 12rem;
}

.smtp-card > p {
  color: var(--clinic-muted);
  font-size: 0.75rem;
}

.delivery-status {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem;
  margin-bottom: 0.85rem;
  color: #6e4a0b;
  background: #fdf7e7;
  border: 1px solid #ecd9a5;
  border-radius: var(--clinic-radius-sm);
}

.delivery-status.ready {
  color: #185d3d;
  background: #e8f6ee;
  border-color: #c2e4cf;
}

.delivery-status .status-dot {
  width: 0.55rem;
  height: 0.55rem;
  flex: 0 0 0.55rem;
  margin-top: 0.35rem;
  background: var(--clinic-gold-600);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(199, 152, 61, 0.15);
}

.delivery-status.ready .status-dot {
  background: var(--clinic-green-600);
  box-shadow: 0 0 0 3px rgba(45, 118, 88, 0.15);
}

.delivery-status > div {
  display: flex;
  flex-direction: column;
}

.delivery-status strong {
  font-size: 0.76rem;
}

.delivery-status span:not(.status-dot) {
  margin-top: 0.15rem;
  font-size: 0.67rem;
}

.settings-summary {
  display: grid;
  gap: 0.2rem;
  margin: 1rem 0;
}

.settings-summary > div {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.48rem 0;
  border-bottom: 1px solid #edf1ef;
}

.settings-summary dt {
  color: var(--clinic-muted);
  font-size: 0.68rem;
}

.settings-summary dd {
  margin: 0;
  overflow: hidden;
  color: var(--clinic-ink);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Authentication details */

.auth-card-wide,
.auth-card-wrap:has(.auth-card-wide) {
  max-width: 34rem;
}

.auth-back-link,
.auth-resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.15rem;
  color: var(--clinic-muted);
  font-size: 0.76rem;
  text-align: center;
  text-decoration: none;
}

.auth-back-link {
  color: var(--clinic-green-700);
  font-weight: 800;
}

.auth-resend a {
  font-weight: 800;
  text-decoration: none;
}

.dev-code-note {
  display: grid;
  padding: 0.85rem;
  margin-bottom: 1rem;
  color: var(--clinic-green-900);
  background: var(--clinic-gold-100);
  border: 1px dashed var(--clinic-gold-500);
  border-radius: var(--clinic-radius-sm);
  text-align: center;
}

.dev-code-note > span {
  color: var(--clinic-gold-700);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dev-code-note > strong {
  margin: 0.2rem 0;
  font-size: 1.5rem;
  letter-spacing: 0.28em;
}

.dev-code-note > small {
  color: var(--clinic-muted);
  font-size: 0.64rem;
}

.password-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.65rem 0 1rem;
  clear: both;
}

.password-rules span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.25rem 0.48rem;
  color: #6d7974;
  background: #f1f4f2;
  border: 1px solid #e0e6e3;
  border-radius: 999px;
  font-size: 0.63rem;
  font-weight: 700;
}

.password-rules span::before {
  content: "○";
  font-size: 0.75rem;
}

.password-rules span.is-valid {
  color: #176341;
  background: #e6f5ec;
  border-color: #c0e3cd;
}

.password-rules span.is-valid::before {
  content: "✓";
  font-weight: 900;
}

.form-privacy-note {
  padding: 0.7rem;
  margin: 0.8rem 0 1rem;
  color: var(--clinic-muted);
  background: #f7f9f8;
  border-radius: var(--clinic-radius-sm);
  font-size: 0.68rem;
}

.password-toggle.label-aligned {
  top: 3.18rem;
}

/* Clinical workflows */

.clinical-step-tabs {
  flex-wrap: nowrap;
  padding-bottom: 0.35rem;
  overflow-x: auto;
}

.clinical-step-tabs .nav-link {
  min-width: max-content;
  padding: 0.5rem 0.75rem;
  color: var(--clinic-muted);
  background: #f4f7f5;
  border: 1px solid var(--clinic-border);
  border-radius: 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
}

.clinical-step-tabs .nav-link:hover {
  color: var(--clinic-green-900);
  background: var(--clinic-green-50);
}

.clinical-step-tabs .nav-link.active {
  color: #fff;
  background: var(--clinic-green-700);
  border-color: var(--clinic-green-700);
}

.section-heading,
.form-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  margin: 0 0 1rem;
  border-bottom: 1px solid var(--clinic-border);
}

.section-heading {
  justify-content: flex-start;
  padding: 0.7rem;
  background: #f7faf8;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius-sm);
}

.section-heading h3,
.form-section-heading h3 {
  margin: 0.15rem 0 0;
  color: var(--clinic-green-950);
  font-size: 0.9rem;
  font-weight: 800;
}

.section-icon {
  display: inline-grid;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 2.4rem;
  place-items: center;
  color: var(--clinic-green-700);
  background: var(--clinic-green-100);
  border-radius: 0.65rem;
}

.clinical-note,
.patient-summary-card {
  padding: 0.85rem;
  background: #f8faf9;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius-sm);
}

.clinical-note p {
  color: #3d4b45;
  font-size: 0.77rem;
  line-height: 1.6;
}

.patient-summary-card {
  background: linear-gradient(145deg, var(--clinic-green-50), #fff);
  border-color: var(--clinic-green-100);
}

.info-label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--clinic-green-700);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vital-chip {
  display: flex;
  min-height: 4.6rem;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.7rem;
  background: #fff;
  border: 1px solid var(--clinic-border);
  border-radius: 0.6rem;
}

.vital-chip > span {
  color: var(--clinic-muted);
  font-size: 0.64rem;
  font-weight: 700;
}

.vital-chip > strong {
  color: var(--clinic-green-950);
  font-size: 0.95rem;
}

.vital-chip > strong small {
  color: var(--clinic-muted);
  font-size: 0.62rem;
  font-weight: 600;
}

.care-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0.85rem;
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius-sm);
}

.care-timeline-step {
  position: relative;
  display: flex;
  min-width: 8rem;
  align-items: center;
  flex-direction: column;
  padding: 0 0.5rem;
  color: var(--clinic-muted);
  text-align: center;
}

.care-timeline-step:not(:last-child)::after {
  position: absolute;
  top: 1rem;
  left: calc(50% + 1rem);
  width: calc(100% - 2rem);
  height: 2px;
  content: "";
  background: var(--clinic-border);
}

.care-timeline-step.is-complete:not(:last-child)::after {
  background: var(--clinic-green-500);
}

.step-dot {
  position: relative;
  z-index: 1;
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.45rem;
  place-items: center;
  color: #7b8882;
  background: #edf1ef;
  border-radius: 50%;
}

.is-complete .step-dot {
  color: #fff;
  background: var(--clinic-green-600);
}

.care-timeline-step strong {
  color: var(--clinic-ink);
  font-size: 0.7rem;
}

.care-timeline-step small {
  margin-top: 0.14rem;
  font-size: 0.6rem;
}

.document-status-card {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem;
  background: #fff;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius-sm);
}

.document-status-card > i {
  display: inline-grid;
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 2.35rem;
  place-items: center;
  color: var(--clinic-green-700);
  background: var(--clinic-green-50);
  border-radius: 0.6rem;
  font-size: 1rem;
}

.document-status-card > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.document-status-card span {
  color: var(--clinic-muted);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
}

.document-status-card strong {
  margin-top: 0.15rem;
  color: var(--clinic-green-950);
  font-size: 0.76rem;
}

.document-status-card small {
  margin-top: 0.22rem;
  color: var(--clinic-muted);
  font-size: 0.64rem;
}

/* Inventory and pharmacy */

.stock-cell,
.date-cell {
  display: flex;
  min-width: 7.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.18rem;
}

.stock-cell > strong,
.date-cell > strong {
  color: var(--clinic-green-950);
  font-size: 0.78rem;
}

.stock-cell > small,
.date-cell > small {
  color: var(--clinic-muted);
  font-size: 0.63rem;
}

.quantity-change {
  display: inline-flex;
  padding: 0.2rem 0.4rem;
  border-radius: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
}

.quantity-change.positive {
  color: #176341;
  background: #e6f5ec;
}

.quantity-change.negative {
  color: #96362f;
  background: #fbe7e5;
}

.toolbar-note {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  margin-left: auto;
  color: var(--clinic-muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.status-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  background: #7a8781;
  border-radius: 50%;
}

.status-dot.success {
  background: var(--clinic-green-600);
  box-shadow: 0 0 0 3px rgba(45, 118, 88, 0.13);
}

.stock-current,
.balance-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem;
  margin-bottom: 1rem;
  color: var(--clinic-muted);
  background: var(--clinic-green-50);
  border: 1px solid var(--clinic-green-100);
  border-radius: var(--clinic-radius-sm);
  font-size: 0.75rem;
}

.stock-current strong,
.balance-callout strong {
  color: var(--clinic-green-950);
  font-size: 1rem;
}

.dispense-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem;
  margin-top: 1rem;
  color: var(--clinic-green-900);
  background: var(--clinic-green-50);
  border: 1px solid var(--clinic-green-100);
  border-radius: var(--clinic-radius-sm);
}

.dispense-bar > div {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.dispense-bar > div > .app-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.dispense-bar span {
  display: flex;
  flex-direction: column;
}

.dispense-bar strong {
  font-size: 0.76rem;
}

.dispense-bar small {
  color: var(--clinic-muted);
  font-size: 0.64rem;
}

/* Billing and printable prescriptions */

.mini-stat {
  position: relative;
  display: flex;
  min-height: 7.3rem;
  flex-direction: column;
  justify-content: center;
  padding: 0.9rem 1rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--clinic-border);
  border-left: 4px solid var(--clinic-gold-600);
  border-radius: var(--clinic-radius-sm);
  box-shadow: var(--clinic-shadow-sm);
}

.mini-stat.green { border-left-color: var(--clinic-green-600); }
.mini-stat.coral { border-left-color: var(--clinic-coral-600); }
.mini-stat.danger { border-left-color: #a8322d; }

.mini-stat > span,
.mini-stat > small {
  color: var(--clinic-muted);
  font-size: 0.66rem;
}

.mini-stat > strong {
  margin: 0.18rem 0;
  color: var(--clinic-green-950);
  font-size: 1.25rem;
  font-weight: 800;
}

.invoice-sheet,
.prescription-detail {
  width: min(100%, 60rem);
  padding: clamp(1rem, 2.5vw, 2rem);
  margin-inline: auto;
}

.invoice-letterhead,
.prescription-letterhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--clinic-green-800);
}

.invoice-brand,
.prescription-letterhead > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
}

.invoice-brand img,
.prescription-letterhead > img {
  width: 4.5rem;
  height: 4.5rem;
  flex: 0 0 4.5rem;
  object-fit: contain;
}

.invoice-brand > div,
.prescription-letterhead > div {
  display: flex;
  flex-direction: column;
}

.invoice-brand strong,
.prescription-letterhead > div > span {
  color: var(--clinic-green-900);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
}

.invoice-brand span,
.prescription-letterhead small {
  max-width: 27rem;
  color: var(--clinic-muted);
  font-size: 0.62rem;
}

.invoice-title {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.invoice-title > span {
  color: var(--clinic-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.invoice-title > strong {
  margin: 0.15rem 0 0.3rem;
  color: var(--clinic-green-950);
  font-size: 1rem;
}

.prescription-letterhead > strong {
  color: var(--clinic-coral-700);
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 400;
}

.invoice-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.55fr);
  gap: 1.5rem;
  padding: 0.85rem;
  margin-bottom: 1rem;
  background: #f8faf9;
  border-radius: var(--clinic-radius-sm);
}

.invoice-meta > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.invoice-meta > div > span {
  color: var(--clinic-muted);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.invoice-meta > div > strong {
  margin: 0.15rem 0;
  color: var(--clinic-green-950);
  font-size: 0.9rem;
}

.invoice-meta > div > small {
  color: var(--clinic-muted);
  font-size: 0.64rem;
}

.invoice-meta dl,
.invoice-summary dl {
  margin: 0;
}

.invoice-meta dl > div,
.invoice-summary dl > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.2rem 0;
  font-size: 0.68rem;
}

.invoice-meta dt,
.invoice-summary dt {
  color: var(--clinic-muted);
  font-weight: 600;
}

.invoice-meta dd,
.invoice-summary dd {
  margin: 0;
  color: var(--clinic-ink);
  font-weight: 800;
}

.invoice-table tbody td:first-child {
  display: flex;
  flex-direction: column;
}

.invoice-table tbody td:first-child small {
  color: var(--clinic-muted);
  font-size: 0.62rem;
}

.invoice-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.55fr);
  gap: 1.5rem;
  padding-top: 1rem;
}

.invoice-notes {
  color: var(--clinic-muted);
  font-size: 0.7rem;
}

.invoice-notes p {
  margin: 0.25rem 0 0;
}

.invoice-summary .invoice-total,
.invoice-summary .invoice-balance {
  padding: 0.45rem 0;
  margin-top: 0.2rem;
  border-top: 1px solid var(--clinic-border);
  font-size: 0.78rem;
}

.invoice-summary .invoice-balance {
  color: var(--clinic-coral-700);
  border-top: 2px solid var(--clinic-green-800);
}

.invoice-summary .invoice-balance dt,
.invoice-summary .invoice-balance dd {
  color: inherit;
}

.payment-history {
  display: grid;
  gap: 0.35rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--clinic-border);
  font-size: 0.68rem;
}

.payment-history > div {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  color: var(--clinic-muted);
}

.payment-history > div > strong {
  color: var(--clinic-green-900);
  white-space: nowrap;
}

.invoice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--clinic-border);
}

.form-section-heading h3 {
  margin: 0.1rem 0 0;
}

.bill-item-row,
.prescription-item-row {
  display: grid;
  align-items: end;
  gap: 0.55rem;
  padding: 0.75rem;
  margin-bottom: 0.6rem;
  background: #f8faf9;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius-sm);
}

.bill-item-row {
  grid-template-columns: 2rem 0.8fr 1.4fr 0.55fr 0.7fr 2.35rem;
}

.prescription-item-row {
  grid-template-columns: 2rem 1.3fr repeat(3, minmax(7rem, 0.8fr)) 0.45fr 0.55fr 2.35rem;
}

.bill-row-index,
.prescription-row-index {
  display: inline-grid;
  width: 1.8rem;
  height: 1.8rem;
  margin-bottom: 0.45rem;
  place-items: center;
  color: var(--clinic-green-800);
  background: var(--clinic-green-100);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
}

.remove-bill-row,
.remove-prescription-row {
  margin-bottom: 0.18rem;
  color: var(--clinic-coral-700);
  background: var(--clinic-coral-100);
  border-color: #efc7c3;
  font-size: 1.15rem;
}

/* Toolbar forms */

.table-toolbar form.table-search {
  position: relative;
  display: flex;
  min-width: min(100%, 15rem);
  max-width: 28rem;
  flex: 1 1 18rem;
  align-items: center;
  padding: 0;
}

.table-toolbar form.table-search > .app-icon {
  position: absolute;
  left: 0.8rem;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  color: #7e8c86;
  pointer-events: none;
}

.table-toolbar form.table-search input[type="search"] {
  width: 100%;
  min-height: 2.72rem;
  padding: 0.55rem 0.75rem 0.55rem 2.35rem;
  color: var(--clinic-ink);
  background: #fff;
  border: 1px solid #cfdad4;
  border-radius: 0.62rem;
  outline: 0;
}

.table-toolbar form.table-search input[type="search"]:focus {
  border-color: var(--clinic-green-500);
  box-shadow: var(--clinic-focus);
}

.toolbar-select {
  width: auto;
  min-width: 11rem;
  max-width: 15rem;
}

/* Profile and access states */

.access-denied-state {
  min-height: min(28rem, 68vh);
}

.profile-summary-card {
  overflow: hidden;
}

.profile-summary-card .card-body:first-child {
  background:
    radial-gradient(circle at 90% 0, rgba(226, 199, 126, 0.2), transparent 8rem),
    linear-gradient(145deg, var(--clinic-green-50), #fff);
}

.profile-avatar {
  display: grid;
  width: 5rem;
  height: 5rem;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--clinic-green-600), var(--clinic-green-900));
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px rgba(19, 61, 47, 0.2);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

.person-avatar {
  display: inline-grid;
  overflow: hidden;
  flex-shrink: 0;
  vertical-align: middle;
  color: #fff;
  background: var(--clinic-green-700, #174d3a);
}

.person-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.person-cell > :last-child { min-width: 0; }
.person-avatar.profile-avatar { display: grid; }
.profile-photo-preview {
  width: 8rem;
  height: 8rem;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--clinic-green-200);
}

.patient-number-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.68rem;
  color: var(--clinic-green-800);
  background: var(--clinic-green-100);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
}

.care-count-tile {
  display: flex;
  min-height: 6rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.22rem;
  padding: 0.55rem 0.25rem;
  color: var(--clinic-muted);
  background: #f8faf9;
  border: 1px solid var(--clinic-border);
  border-radius: 0.62rem;
  text-decoration: none;
  transition: border-color 0.16s ease, transform 0.16s ease;
}

.care-count-tile:hover {
  color: var(--clinic-green-900);
  border-color: var(--clinic-green-200);
  transform: translateY(-2px);
}

.care-count-tile i {
  color: var(--clinic-green-600);
  font-size: 1rem;
}

.care-count-tile strong {
  color: var(--clinic-green-950);
  font-size: 1.15rem;
}

.care-count-tile span {
  font-size: 0.6rem;
  font-weight: 700;
}

.security-icon {
  display: inline-grid;
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 2.8rem;
  place-items: center;
  color: var(--clinic-green-700);
  background: var(--clinic-green-50);
  border: 1px solid var(--clinic-green-100);
  border-radius: 0.72rem;
  font-size: 1.1rem;
}

/* Patient portal */

.portal-welcome {
  color: #fff;
  background:
    radial-gradient(circle at 88% 5%, rgba(226, 199, 126, 0.34), transparent 14rem),
    linear-gradient(135deg, var(--clinic-green-700), var(--clinic-green-950));
  box-shadow: var(--clinic-shadow);
}

.portal-welcome::before,
.portal-welcome::after {
  position: absolute;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
}

.portal-welcome::before {
  right: -4rem;
  bottom: -8rem;
  width: 20rem;
  height: 20rem;
  box-shadow: 0 0 0 3rem rgba(255, 255, 255, 0.025), 0 0 0 6rem rgba(255, 255, 255, 0.018);
}

.portal-welcome::after {
  top: -5rem;
  right: 24%;
  width: 10rem;
  height: 10rem;
}

.portal-welcome .eyebrow {
  color: var(--clinic-gold-300);
}

.portal-welcome h1 {
  font-family: var(--font-display);
  font-weight: 700;
}

.portal-welcome .btn-light {
  color: var(--clinic-green-900);
  background: #fff;
  border-color: #fff;
}

.portal-stat-card {
  color: var(--clinic-ink);
  border-top: 3px solid var(--clinic-green-600) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.portal-stat-card:hover {
  color: var(--clinic-green-900);
  box-shadow: var(--clinic-shadow) !important;
  transform: translateY(-3px);
}

.portal-stat-card .card-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.25rem 0.65rem;
}

.portal-stat-card .stat-icon {
  grid-row: span 2;
}

.portal-stat-card .card-body > span {
  color: var(--clinic-muted);
  font-size: 0.66rem;
  font-weight: 700;
}

.portal-stat-card .card-body > strong {
  color: var(--clinic-green-950);
  font-size: 1.2rem;
  line-height: 1.1;
}

.portal-content-card {
  overflow: hidden;
}

.portal-content-card > .card-header {
  display: block;
}

.portal-tabs {
  padding: 0 0.75rem;
  scrollbar-width: thin;
}

.portal-tabs .nav-link {
  min-width: max-content;
  padding: 0.95rem 0.8rem;
  color: var(--clinic-muted);
  border-bottom: 3px solid transparent;
  font-size: 0.74rem;
  font-weight: 800;
  text-decoration: none;
}

.portal-tabs .nav-link:hover {
  color: var(--clinic-green-800);
}

.portal-tabs .nav-link.active {
  color: var(--clinic-green-900);
  border-bottom-color: var(--clinic-coral-600);
}

.portal-record-date {
  display: flex;
  width: 4rem;
  flex: 0 0 4rem;
  flex-direction: column;
  color: var(--clinic-green-900);
  line-height: 1.15;
}

.portal-record-date strong {
  font-size: 0.78rem;
}

.portal-record-date small {
  margin-top: 0.2rem;
  color: var(--clinic-muted);
  font-size: 0.63rem;
}

.portal-content-card .accordion-button {
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  color: var(--clinic-ink);
  background: #fff;
  box-shadow: none;
  font-size: 0.78rem;
}

.portal-content-card .accordion-button:not(.collapsed) {
  color: var(--clinic-green-900);
  background: var(--clinic-green-50);
}

.portal-content-card .accordion-button:focus {
  border-color: var(--clinic-green-500);
  box-shadow: inset var(--clinic-focus);
}

.portal-content-card .accordion-body {
  padding: 1rem;
  background: #fbfcfb;
}

.portal-list-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.68rem 0;
  border-bottom: 1px solid #edf1ef;
}

.portal-list-item:last-child {
  border-bottom: 0;
}

.portal-list-item .list-icon {
  display: inline-grid;
  width: 2.3rem;
  height: 2.3rem;
  flex: 0 0 2.3rem;
  place-items: center;
  color: var(--clinic-green-700);
  background: var(--clinic-green-50);
  border-radius: 0.62rem;
}

.portal-list-item .flex-grow-1 {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.portal-list-item strong {
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-list-item .flex-grow-1 > span {
  margin-top: 0.12rem;
  overflow: hidden;
  color: var(--clinic-muted);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.next-appointment-card {
  position: relative;
  overflow: hidden;
  color: var(--clinic-ink);
  background:
    radial-gradient(circle at 95% 10%, rgba(226, 199, 126, 0.22), transparent 10rem),
    var(--clinic-green-50);
  border: 1px solid var(--clinic-green-100);
}

.appointment-date-block {
  display: grid;
  width: 4.3rem;
  height: 4.3rem;
  flex: 0 0 4.3rem;
  place-content: center;
  color: #fff;
  background: linear-gradient(145deg, var(--clinic-coral-500), var(--clinic-coral-700));
  border-radius: 0.85rem;
  text-align: center;
  box-shadow: 0 7px 18px rgba(167, 61, 54, 0.2);
}

.appointment-date-block strong {
  font-size: 1.35rem;
  line-height: 1;
}

.appointment-date-block span {
  margin-top: 0.18rem;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.empty-state-soft {
  color: var(--clinic-muted);
  background: #f7faf8;
  border: 1px dashed var(--clinic-green-200);
}

.empty-state-soft > i {
  color: var(--clinic-green-600);
  font-size: 1.6rem;
}

.profile-readiness {
  background: linear-gradient(145deg, #fffaf0, #fff);
  border: 1px solid var(--clinic-gold-100);
}

.profile-readiness .progress,
.progress-thin {
  height: 0.45rem;
  overflow: hidden;
  background: #e8eeeb;
  border-radius: 999px;
}

.profile-readiness .progress-bar,
.progress-thin .progress-bar {
  background: linear-gradient(90deg, var(--clinic-green-600), var(--clinic-green-500));
  border-radius: inherit;
}

.receipt,
.invoice-sheet {
  width: min(100%, 52rem);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--clinic-border);
  border-radius: var(--clinic-radius);
  box-shadow: var(--clinic-shadow-sm);
}

.receipt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--clinic-green-800);
}

.receipt-logo {
  width: 4.3rem;
  height: 4.3rem;
  object-fit: contain;
}

.receipt-clinic-name {
  margin: 0;
  color: var(--clinic-green-900);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
}

.receipt-meta {
  color: var(--clinic-muted);
  font-size: 0.72rem;
}

.receipt-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  margin-top: 1rem;
  color: var(--clinic-green-950);
  background: var(--clinic-green-50);
  border-radius: var(--clinic-radius-sm);
  font-size: 1.05rem;
  font-weight: 800;
}

/* Utility additions ----------------------------------------------------- */

.text-clinic { color: var(--clinic-green-700) !important; }
.text-coral { color: var(--clinic-coral-700) !important; }
.text-gold { color: var(--clinic-gold-700) !important; }
.text-muted { color: var(--clinic-muted) !important; }
.bg-clinic-soft { background: var(--clinic-green-50) !important; }
.bg-gold-soft { background: var(--clinic-gold-100) !important; }
.bg-coral-soft { background: var(--clinic-coral-100) !important; }
.border-clinic { border-color: var(--clinic-green-200) !important; }
.font-serif { font-family: var(--font-display) !important; }
.fw-800 { font-weight: 800 !important; }
.min-w-0 { min-width: 0 !important; }
.cursor-pointer { cursor: pointer !important; }
.overflow-wrap-anywhere { overflow-wrap: anywhere !important; }

.skeleton {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  background: #e8eeeb !important;
  border-color: transparent !important;
  border-radius: 0.35rem;
}

.skeleton::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: translateX(-100%);
  animation: clinic-shimmer 1.4s infinite;
}

@keyframes clinic-shimmer {
  100% { transform: translateX(100%); }
}

[hidden],
.is-hidden,
.filtered-out {
  display: none !important;
}

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1199.98px) {
  .dashboard-grid,
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .prescription-item-row {
    grid-template-columns: 2rem repeat(3, minmax(0, 1fr));
  }

  .prescription-item-row > :nth-child(2) {
    grid-column: span 2;
  }
}

@media (max-width: 991.98px) {
  .sidebar,
  #sidebar {
    width: min(var(--clinic-sidebar-width), calc(100vw - 3rem));
    transform: translateX(-102%);
  }

  body.sidebar-open .sidebar,
  body.sidebar-open #sidebar,
  .sidebar.show,
  #sidebar.show {
    transform: translateX(0);
  }

  .sidebar-close {
    display: inline-grid;
    place-items: center;
  }

  .main-wrapper,
  .app-main,
  body.sidebar-collapsed .main-wrapper,
  body.sidebar-collapsed .app-main {
    margin-left: 0;
  }

  body.sidebar-open .mobile-backdrop,
  body.sidebar-open .sidebar-overlay,
  .mobile-backdrop.show,
  .sidebar-overlay.show {
    display: block;
    opacity: 1;
  }

  .booking-layout {
    grid-template-columns: 1fr;
  }

  .booking-summary {
    position: static;
  }
}

@media (max-width: 767.98px) {
  :root {
    --clinic-topbar-height: 4rem;
  }

  .auth-page {
    display: block;
    padding: 0;
    background: #fff;
  }

  .auth-shell {
    display: block;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .auth-showcase,
  .auth-visual {
    display: none;
  }

  .auth-panel {
    min-height: 100svh;
    padding: 2rem 1.25rem;
  }

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

  .page-header {
    flex-direction: column;
  }

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

  .page-actions .btn {
    flex: 1 1 auto;
  }

  .table-toolbar > * {
    flex: 1 1 100%;
    max-width: none !important;
  }

  .table-toolbar .form-select {
    width: 100%;
  }

  .calendar-day {
    min-height: 4.6rem;
    padding: 0.3rem;
  }

  .calendar-event {
    width: 0.42rem;
    height: 0.42rem;
    padding: 0;
    margin: 0.2rem auto 0;
    overflow: hidden;
    border: 0;
    border-radius: 50%;
    color: transparent;
    background: var(--clinic-green-600);
  }

  .detail-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

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

  .page-heading {
    flex-direction: column;
  }

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

  .heading-actions .btn {
    flex: 1 1 auto;
  }

  .care-timeline {
    grid-template-columns: repeat(5, 8rem);
  }

  .invoice-letterhead,
  .prescription-letterhead {
    align-items: flex-start;
  }

  .invoice-meta,
  .invoice-summary {
    grid-template-columns: 1fr;
  }

  .bill-item-row {
    grid-template-columns: 2rem repeat(2, minmax(0, 1fr)) 2.35rem;
  }

  .bill-item-row > :nth-child(3) {
    grid-column: span 2;
  }

  .prescription-item-row {
    grid-template-columns: 2rem repeat(2, minmax(0, 1fr)) 2.35rem;
  }

  .prescription-item-row > :nth-child(2) {
    grid-column: span 2;
  }

  .dispense-bar {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 575.98px) {
  body {
    font-size: 0.9rem;
  }

  .topbar,
  .app-header {
    padding-inline: 0.75rem;
  }

  .topbar-title {
    font-size: 0.92rem;
  }

  .user-copy,
  .user-chevron {
    display: none;
  }

  .page-content,
  .content-area {
    padding: 0.85rem;
  }

  .dashboard-grid,
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 1rem;
  }

  .form-section,
  .card-body {
    padding: 0.9rem;
  }

  .form-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .form-actions .btn {
    width: 100%;
  }

  .otp-group,
  [data-otp-group] {
    gap: 0.28rem;
  }

  .otp-input {
    border-radius: 0.5rem;
  }

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

  .flash-container,
  .toast-container {
    top: 0.75rem;
    right: 0.75rem;
    width: calc(100vw - 1.5rem);
  }

  .app-footer {
    align-items: flex-start;
    flex-direction: column;
    padding-inline: 0.85rem;
  }

  .calendar-weekday {
    font-size: 0.58rem;
  }

  .calendar-date {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 0.65rem;
  }

  .auth-card-wrap > .auth-footer,
  .auth-resend {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .invoice-letterhead,
  .prescription-letterhead {
    flex-wrap: wrap;
  }

  .invoice-title {
    width: 100%;
    align-items: flex-start;
  }

  .bill-item-row,
  .prescription-item-row {
    grid-template-columns: 1.8rem minmax(0, 1fr) 2.35rem;
  }

  .bill-item-row > *,
  .prescription-item-row > * {
    grid-column: 2;
  }

  .bill-item-row > :first-child,
  .prescription-item-row > :first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .bill-item-row > :last-child,
  .prescription-item-row > :last-child {
    grid-column: 3;
    grid-row: 1;
  }

  .table-toolbar .toolbar-select {
    width: 100%;
    max-width: none;
  }
}

/* Print receipts, bills, reports ---------------------------------------- */

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  :root {
    --clinic-canvas: #fff;
  }

  html,
  body {
    min-height: auto;
    color: #111 !important;
    background: #fff !important;
    font-size: 10pt;
  }

  .sidebar,
  #sidebar,
  .topbar,
  .app-header,
  .mobile-backdrop,
  .sidebar-overlay,
  .page-header,
  .page-actions,
  .form-actions,
  .table-toolbar,
  .pagination,
  .toast-container,
  .flash-container,
  .no-print,
  [data-print],
  [data-print-button] {
    display: none !important;
  }

  .main-wrapper,
  .app-main {
    min-height: auto;
    margin: 0 !important;
  }

  .page-content,
  .content-area {
    max-width: none;
    padding: 0;
  }

  .card,
  .receipt,
  .invoice-sheet,
  .print-area {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
  }

  .card-header,
  .card-body {
    padding-inline: 0;
  }

  .table-responsive {
    overflow: visible !important;
  }

  .table {
    width: 100% !important;
    font-size: 8.5pt;
  }

  .table > :not(caption) > * > * {
    padding: 5pt 6pt;
    color: #111 !important;
    background: #fff !important;
    border-color: #bbb !important;
  }

  .status-badge,
  .badge-status,
  .role-badge {
    color: #111 !important;
    background: #fff !important;
    border: 1px solid #777 !important;
  }

  a[href]::after {
    content: none !important;
  }

  .receipt-header {
    break-inside: avoid;
  }

  .invoice-sheet,
  .prescription-detail {
    width: 100%;
    max-width: none;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .invoice-letterhead,
  .prescription-letterhead,
  .invoice-meta,
  .invoice-summary,
  .payment-history {
    break-inside: avoid;
  }

  .receipt-total {
    color: #111;
    background: #f2f2f2 !important;
    border: 1px solid #bbb;
  }

  tr,
  img,
  .stat-card,
  .booking-card,
  .appointment-card {
    break-inside: avoid;
  }

  .print-only {
    display: block !important;
  }

  body.print-target-mode * {
    visibility: hidden !important;
  }

  body.print-target-mode .print-target,
  body.print-target-mode .print-target * {
    visibility: visible !important;
  }

  body.print-target-mode .print-target {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }
}

@media screen {
  .print-only {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --clinic-border: #9eada6;
    --clinic-muted: #43524c;
  }

  .form-control,
  .form-select,
  .card,
  .stat-card {
    border-width: 2px;
  }
}

/* Authentication experience refresh ----------------------------------- */

.auth-shell {
  width: min(100%, 66rem);
  min-height: 41rem;
  grid-template-columns: minmax(20rem, 0.88fr) minmax(25rem, 1fr);
}

.auth-shell--register {
  width: min(100%, 78rem);
  min-height: 0;
  grid-template-columns: minmax(19rem, 0.68fr) minmax(38rem, 1.32fr);
}

.auth-shell--register .auth-visual {
  padding: clamp(2rem, 3vw, 3rem);
}

.auth-shell--register .auth-quote p {
  font-size: clamp(1.55rem, 2.6vw, 2rem);
}

.auth-shell--register .auth-panel {
  justify-content: flex-start;
  padding: clamp(2rem, 3.5vw, 3.25rem);
}

.auth-panel {
  padding: clamp(2.25rem, 4vw, 3.75rem);
}

.auth-page--register {
  align-items: start;
}

.auth-page--register .auth-shell {
  margin-block: auto;
}

.auth-card,
.auth-card-wrap {
  max-width: 30rem;
}

.auth-page--register .auth-card-wrap,
.auth-card--register {
  max-width: 48rem;
}

.auth-heading {
  margin-bottom: 0.8rem;
}

.auth-heading h2 {
  max-width: 35rem;
  margin-top: 0.45rem;
  font-size: clamp(1.8rem, 3vw, 2.35rem);
  line-height: 1.1;
}

.auth-intro {
  max-width: 38rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
  line-height: 1.65;
}

.auth-form .form-control {
  min-height: 3rem;
  padding-inline: 0.85rem;
  border-color: #c9d6cf;
  border-radius: 0.7rem;
  font-size: 0.9rem;
}

.auth-form .form-control:focus {
  background: #fff;
}

.auth-card--compact .auth-form {
  margin-top: 0.2rem;
}

.auth-card--compact .btn,
.auth-card--register .btn {
  min-height: 3.15rem;
  border-radius: 0.7rem;
  font-size: 0.88rem;
  font-weight: 800;
}

.auth-secure {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--clinic-green-700);
  white-space: nowrap;
}

.auth-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0;
  margin: 0.25rem 0 1.5rem;
  list-style: none;
}

.auth-progress li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.38rem;
  color: #8a9691;
  font-size: 0.68rem;
  text-align: center;
}

.auth-progress li:not(:last-child)::after {
  position: absolute;
  top: 0.78rem;
  left: calc(50% + 1rem);
  width: calc(100% - 2rem);
  height: 2px;
  content: "";
  background: #dfe7e3;
}

.auth-progress li > span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 1.6rem;
  height: 1.6rem;
  place-items: center;
  background: #f3f6f4;
  border: 1px solid #d8e1dc;
  border-radius: 50%;
  font-weight: 800;
}

.auth-progress li > small {
  font-size: inherit;
  font-weight: 700;
}

.auth-progress li.is-active,
.auth-progress li.is-complete {
  color: var(--clinic-green-700);
}

.auth-progress li.is-active > span,
.auth-progress li.is-complete > span {
  color: #fff;
  background: var(--clinic-green-700);
  border-color: var(--clinic-green-700);
}

.auth-progress li.is-complete::after {
  background: var(--clinic-green-500);
}

.registration-section {
  padding: 1.35rem 0;
  border-top: 1px solid #e4ebe7;
}

.registration-section:first-of-type {
  padding-top: 0.2rem;
  border-top: 0;
}

.registration-section-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.registration-section-number {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  flex: 0 0 1.8rem;
  place-items: center;
  color: #fff;
  background: var(--clinic-green-700);
  border-radius: 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(32, 98, 71, 0.18);
}

.registration-section-heading h3 {
  margin: 0;
  color: var(--clinic-green-950);
  font-size: 0.98rem;
  line-height: 1.25;
}

.registration-section-heading p {
  margin: 0.12rem 0 0;
  color: var(--clinic-muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.auth-form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1rem;
}

.auth-field {
  min-width: 0;
  grid-column: span 3;
}

.auth-field--full {
  grid-column: 1 / -1;
}

.auth-field--location,
.auth-form-grid--name .auth-field:not(:last-child) {
  grid-column: span 2;
}

.auth-form-grid--name .auth-field:last-child {
  grid-column: span 3;
}

.auth-field .form-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.38rem;
  color: #2a3c34;
  font-size: 0.76rem;
}

.auth-field .form-label > span {
  color: var(--clinic-coral-700);
}

.auth-field .form-label small {
  color: #89958f;
  font-size: 0.62rem;
  font-weight: 600;
}

.auth-field input[type="date"] {
  min-width: 0;
}

.auth-card--register .password-rules {
  margin: 0.75rem 0 0;
}

.auth-card--register .password-toggle.label-aligned {
  top: 3.1rem;
}

.registration-submit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding-top: 0.25rem;
}

.registration-submit .form-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0;
  margin: 0;
  background: transparent;
  font-size: 0.69rem;
  line-height: 1.5;
}

.registration-submit .form-privacy-note i {
  margin-top: 0.08rem;
  color: var(--clinic-green-600);
  font-size: 1rem;
}

.registration-submit .auth-submit {
  min-width: 14rem;
  padding-inline: 1.35rem;
}

.auth-switch {
  margin: 1.25rem 0 0;
  color: var(--clinic-muted);
  font-size: 0.8rem;
  text-align: center;
}

.auth-switch a {
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 1040px) and (min-width: 768px) {
  .auth-shell--register {
    grid-template-columns: minmax(16rem, 0.55fr) minmax(34rem, 1.45fr);
  }

  .auth-shell--register .auth-brand h1 {
    font-size: 1.25rem;
  }
}

@media (max-width: 899.98px) {
  .auth-shell,
  .auth-shell--register {
    display: block;
    width: min(100%, 48rem);
    grid-template-columns: none;
  }

  .auth-visual,
  .auth-shell--register .auth-visual {
    display: none;
  }

  .auth-panel,
  .auth-shell--register .auth-panel {
    min-height: 0;
    padding: clamp(2rem, 6vw, 3.5rem);
  }

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

  .auth-page--register .auth-card-wrap,
  .auth-card--register {
    max-width: 42rem;
  }
}

@media (max-width: 767.98px) {
  .auth-page,
  .auth-page--register {
    background:
      linear-gradient(180deg, var(--clinic-green-900) 0, var(--clinic-green-900) 5.25rem, #f7faf8 5.25rem, #f7faf8 100%);
  }

  .auth-page::before,
  .auth-page::after {
    display: none;
  }

  .auth-shell,
  .auth-shell--register {
    min-height: 100svh;
    background: transparent;
  }

  .auth-panel,
  .auth-shell--register .auth-panel {
    min-height: 100svh;
    justify-content: flex-start;
    padding: 1rem clamp(1rem, 4vw, 1.5rem) 1.5rem;
    background: transparent;
  }

  .auth-card-wrap {
    max-width: 36rem;
    padding: 1.35rem clamp(1rem, 4vw, 1.5rem);
    background: #fff;
    border: 1px solid rgba(220, 229, 224, 0.9);
    border-radius: 1rem;
    box-shadow: 0 14px 40px rgba(11, 47, 36, 0.11);
  }

  .auth-page--register .auth-card-wrap,
  .auth-card--register {
    max-width: 36rem;
  }

  .auth-mobile-brand {
    display: flex;
    justify-content: flex-start;
    margin: 0 0 1.15rem;
    font-size: 0.88rem;
    line-height: 1.2;
  }

  .auth-mobile-brand img {
    width: 3.25rem;
    height: 3.25rem;
  }

  .auth-heading h2 {
    font-size: clamp(1.65rem, 8vw, 2rem);
  }

  .auth-form-grid,
  .auth-form-grid--name {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .auth-field,
  .auth-field--full,
  .auth-field--location,
  .auth-form-grid--name .auth-field,
  .auth-form-grid--name .auth-field:last-child {
    grid-column: 1;
  }

  .registration-submit {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .registration-submit .auth-submit {
    width: 100%;
    min-width: 0;
  }

  .auth-card-wrap > .auth-footer {
    margin-top: 1.5rem;
  }
}

@media (max-width: 390px) {
  .auth-panel,
  .auth-shell--register .auth-panel {
    padding-inline: 0.65rem;
  }

  .auth-card-wrap {
    padding-inline: 1rem;
  }

  .auth-options {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .otp-group,
  [data-otp-group] {
    gap: 0.2rem;
  }

  .otp-input {
    font-size: 1.05rem;
  }
}