.availability-slot { cursor: pointer; }
.availability-slot:hover { border-left-color: var(--sepro-blue-dark); background: #e3f7f8; }
.availability-slot:focus-visible { outline: 3px solid var(--sepro-blue-dark); outline-offset: 2px; }
.availability-slot button { cursor: pointer; }
.dark-theme .availability-slot:hover { background: #203d49; }
:root {
  --sepro-navy: #23364a;
  --sepro-navy-deep: #182a3d;
  --sepro-blue: #4cc7d2;
  --sepro-blue-dark: #249eae;
  --sepro-green: #b7d93f;
  --sepro-blue-soft: #e8f8fa;
  --sepro-green-soft: #f3f9dc;

  --bg-page: #f3f3f6;
  --bg-soft: #f5f5f7;
  --line-soft: #ebeaf2;
  --text-main: #25195f;
  --text-sub: #4b4382;
  --text-muted: #8d87aa;

  --purple-900: #23115f;
  --purple-700: #4f33b9;
  --purple-600: #5d3fd0;
  --purple-300: #b6addd;

  --orange-500: #ff8a33;
  --green-200: #cdeedb;
  --green-700: #29a061;
  --blue-200: #d3e5ff;

  --radius-btn: 12px;
  --radius-card: 16px;
  --radius-panel: 30px;

  --shadow-soft: 0 8px 30px rgba(37, 25, 95, 0.07);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-page);
  color: var(--text-main);
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.45;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: min(1080px, calc(100% - 2.5rem));
  margin-inline: auto;
}

.container-header {
  width: min(1600px, calc(100% - 2.5rem));
}

.section-pad {
  padding: 88px 0;
}

.site-header {
  background: #fff;
  border-bottom: 1px solid #f0eef7;
  position: sticky;
  top: 0;
  z-index: 80;
}

.nav-row {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  position: relative;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1;
  flex: 0 0 auto;
}

.brand-logo {
  display: block;
  width: auto;
  height: 42px;
  object-fit: contain;
}

.brand-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #2a2a75;
}

.main-nav {
  display: inline-flex;
  align-items: center;
  gap: 33px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
}

.mobile-nav-actions { display: none; }

.main-nav > a {
  font-size: 13px;
  font-weight: 600;
  color: #5946b0;
  line-height: 1;
}

.nav-dropdown {
  position: relative;
}

.nav-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #5946b0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.nav-caret {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.nav-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: -10px;
  min-width: 186px;
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid #e6e1f2;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(37, 25, 95, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.nav-menu a {
  padding: 10px 8px;
  border-radius: 8px;
  color: #4f4197;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.nav-menu a:hover {
  background: #f6f3ff;
}

.nav-menu-wide {
  min-width: 220px;
}

.nav-dropdown:hover .nav-menu,
.nav-dropdown:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown:hover .nav-select,
.nav-dropdown:focus-within .nav-select {
  color: #432fa1;
}

.header-right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}

.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  transition: 0.2s ease;
}

.btn-header {
  min-width: 72px;
  min-height: 31px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
}

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

.btn-orange {
  background: var(--orange-500);
  color: #fff;
}

.btn-outline {
  border-color: #c4bce8;
  color: #5e43c8;
  background: #fff;
}

.btn-outline-strong {
  border-color: #8c7ddd;
}

.btn-purple {
  background: var(--purple-700);
  color: #fff;
}

.btn-outline-on-dark {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.lang-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #5946b0;
  cursor: pointer;
}

.lang-icon {
  font-size: 12px;
  line-height: 1;
}

#currentLang {
  font-size: 13px;
}

.lang-switcher {
  position: relative;
  margin-left: 10px;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: 120px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e5e0f3;
  box-shadow: 0 10px 24px rgba(37, 25, 95, 0.12);
}

.lang-option {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 8px;
  border-radius: 10px;
  font: inherit;
  color: #4d4676;
  cursor: pointer;
}

.lang-option:hover,
.lang-option.is-active {
  background: #f6f3ff;
  color: #3c2c8c;
}

.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 26px;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 9px;
  background: #5946b0;
  margin: 4px 0;
}

.hero {
  min-height: 632px;
  position: relative;
  overflow: hidden;
}

.section-grid-bg {
  background:
    repeating-linear-gradient(to right, transparent 0, transparent 125px, var(--line-soft) 125px, var(--line-soft) 126px),
    var(--bg-soft);
}

.hero-inner {
  min-height: 632px;
  display: grid;
  place-items: center;
  position: relative;
}

.hero-content {
  max-width: 676px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: -26px;
}

.hero-content h1 {
  font-size: clamp(36px, 3.8vw, 56px);
  line-height: 1.12;
  margin: 0 0 18px;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.hero-content p {
  max-width: 712px;
  margin: 0 auto;
  color: #3e366f;
  font-size: clamp(16px, 1.08vw, 20px);
  line-height: 1.55;
  font-weight: 500;
}

.hero-cta {
  margin-top: 29px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.hero-floating {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.float-column {
  position: absolute;
  display: grid;
  gap: 18px;
  animation: driftUp 18s linear infinite alternate;
  will-change: transform;
}

.float-column-left {
  left: 95px;
  top: 60px;
}

.float-column-center {
  left: 398px;
  top: 452px;
  gap: 16px;
  animation-duration: 20s;
}

.float-column-right {
  right: 90px;
  top: 24px;
  gap: 17px;
  animation-duration: 22s;
}

.float-card,
.float-chip,
.float-panel {
  position: absolute;
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  font-size: 12px;
  font-weight: 700;
  color: #666;
}

.float-column .float-card,
.float-column .float-chip,
.float-column .float-panel {
  position: relative;
}

.float-card {
  min-width: 126px;
  padding: 10px 12px;
}

.float-card small {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  font-size: 12px;
  color: #61617a;
}

.float-card.purple {
  background: #ece8ff;
  color: #7e66dc;
}

.float-card.green {
  background: var(--green-200);
  color: var(--green-700);
}

.float-card.blue {
  background: var(--blue-200);
  color: #2f77df;
}

.soft-card {
  min-width: 130px;
}

.second-purple {
  margin-top: -8px;
}

.second-green {
  margin-top: 76px;
}

.float-chip {
  background: #fff;
  padding: 8px 16px;
  border-radius: 999px;
  color: #8d8a98;
  font-weight: 600;
}

.chip-strong {
  background: #a890f2;
  color: #fff;
}

.chip-outline {
  border: 1px solid #ff9a46;
  color: #ff8b33;
}

.transcript-panel {
  width: 165px;
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(5px);
}

.transcript-panel span {
  display: block;
  margin-bottom: 8px;
  color: #c1bdce;
  font-size: 10px;
  font-weight: 700;
}

.transcript-panel i {
  display: block;
  height: 8px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(237, 237, 244, 0.95), rgba(248, 248, 251, 0.8));
}

.transcript-panel i:nth-of-type(1),
.transcript-panel i:nth-of-type(4) {
  width: 82%;
}

.transcript-panel i:nth-of-type(2),
.transcript-panel i:nth-of-type(5) {
  width: 88%;
}

.transcript-panel i:nth-of-type(3),
.transcript-panel i:nth-of-type(6) {
  width: 78%;
}

@keyframes driftUp {
  0% {
    transform: translateY(18px);
  }
  100% {
    transform: translateY(-24px);
  }
}

.trusted {
  background: var(--bg-soft);
  border-top: 1px solid #eceaf3;
  border-bottom: 1px solid #eceaf3;
  padding: 100px 0;
}

.trusted h2 {
  text-align: center;
  margin: 0 auto 52px;
  max-width: 780px;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 34px 26px;
}

.logo-grid img {
  width: 100%;
  max-width: 180px;
  max-height: 58px;
  justify-self: center;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.9;
}

.solutions-overview {
  background: var(--bg-page);
}

.section-head {
  text-align: center;
  margin-bottom: 44px;
}

.section-head h2 {
  font-size: clamp(30px, 3.3vw, 48px);
  margin: 0 0 12px;
}

.section-head p {
  font-size: clamp(16px, 1.05vw, 18px);
  color: #3e366f;
  margin: 0;
  line-height: 1.5;
}

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

.overview-card {
  background: transparent;
}

.illus {
  height: 220px;
  border-radius: 18px;
  margin-bottom: 20px;
  background: linear-gradient(140deg, #d9d6eb, #ece9f8);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.illus-b {
  background: linear-gradient(140deg, #d0dbff, #ece8f8);
}

.illus-c {
  background: linear-gradient(140deg, #d3e4f9, #ece8f8);
}

.illus img {
  width: 92%;
  height: 92%;
  object-fit: contain;
}

.overview-card h3 {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.4vw, 28px);
  line-height: 1.25;
}

.overview-card p {
  margin: 0 0 20px;
  font-size: clamp(16px, 1.02vw, 18px);
  color: #3f386f;
  line-height: 1.55;
}

.ai-assist {
  background: #241062;
  padding: 94px 0 90px;
  color: #fff;
}

.ai-head {
  max-width: 760px;
}

.ai-kicker {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.ai-kicker span {
  border: 1px solid #fd8b31;
  color: #fd8b31;
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: middle;
}

.ai-head h2 {
  margin: 0 0 12px;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.14;
}

.ai-head p {
  margin: 0 0 26px;
  color: #c6bfec;
  font-size: clamp(16px, 1.02vw, 18px);
  line-height: 1.55;
}

.ai-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 70px;
}

.ai-points article {
  color: #d2cdef;
  font-size: clamp(15px, 0.98vw, 17px);
  line-height: 1.55;
}

.feature-tabs {
  background: var(--bg-page);
}

.feature-grid {
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: 58px;
  align-items: center;
}

.feature-left h2 {
  margin: 0 0 18px;
  font-size: clamp(34px, 3.7vw, 56px);
  line-height: 1.14;
}

.feature-left > p {
  margin: 0 0 36px;
  color: #3f386f;
  font-size: clamp(16px, 1.02vw, 18px);
  line-height: 1.55;
}

.tabs-list {
  display: grid;
  border-top: 1px solid #d8d6e4;
  margin-bottom: 20px;
}

.segment {
  text-align: left;
  border: 0;
  border-bottom: 1px solid #d8d6e4;
  background: transparent;
  color: #4f3ea6;
  font-size: clamp(15px, 0.98vw, 17px);
  font-weight: 800;
  padding: 18px 10px;
  cursor: pointer;
  text-transform: uppercase;
}

.segment.is-active {
  color: #ff8a33;
}

.segment-content h3 {
  margin: 0 0 14px;
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.3;
}

.segment-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 10px;
}

.segment-content li {
  color: #b0abc6;
  font-size: clamp(16px, 1vw, 18px);
  font-weight: 700;
  line-height: 1.45;
}

.feature-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dot-indicators {
  display: grid;
  gap: 9px;
}

.dot-indicators i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8d6e5;
}

.dot-indicators i.active {
  background: #4f33b9;
}

.device-mock {
  width: min(100%, 470px);
  height: 560px;
  border-radius: var(--radius-panel);
  background: linear-gradient(150deg, #e8e3f4, #eeeaf7);
  display: grid;
  place-items: center;
  border: 1px solid #e2deef;
}

.mock-screen {
  width: 82%;
  height: 62%;
  border-radius: 22px;
  border: 5px solid #2a2a30;
  background: #f7f7fa;
  padding: 0;
  overflow: hidden;
}

.device-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.device-mock.practices .mock-screen {
  border-radius: 14px;
}

.device-mock.practitioners .mock-screen {
  border-radius: 28px;
}

.profession-tags {
  padding: 86px 0 92px;
  background: var(--bg-soft);
  border-top: 1px solid #eceaf3;
  border-bottom: 1px solid #eceaf3;
}

.profession-tags h2 {
  margin: 0 0 10px;
  text-align: center;
  font-size: clamp(30px, 3.2vw, 46px);
}

.profession-tags p {
  margin: 0;
  text-align: center;
  color: #3f386f;
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.5;
}

.tags-wrap {
  margin-top: 30px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.tags-wrap span {
  border-radius: 999px;
  padding: 10px 16px;
  background: #f2f0fb;
  color: #4f3ea6;
  font-size: 14px;
  font-weight: 700;
}

.testimonials {
  background: var(--bg-page);
}

.testimonials h2 {
  text-align: center;
  margin: 0 0 34px;
  font-size: clamp(32px, 3.2vw, 48px);
}

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

.quote-card {
  background: #f0eff4;
  border-radius: var(--radius-card);
  padding: 30px;
  min-height: 355px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quote-card p {
  margin: 0;
  font-size: clamp(16px, 1.04vw, 18px);
  line-height: 1.55;
}

.quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  background: #dbd6f0;
}

.quote-author strong {
  display: block;
  font-size: 16px;
}

.quote-author small {
  color: #4b4382;
  font-size: 13px;
}

.faq {
  background: var(--bg-soft);
}

.faq-wrap {
  max-width: 1080px;
}

.faq h2 {
  text-align: center;
  margin: 0 0 34px;
  font-size: clamp(32px, 3.2vw, 48px);
}

.faq-list {
  border-left: 2px solid #b7afe1;
  padding-left: 20px;
}

.faq-list details {
  border-bottom: 1px solid #d9d6e8;
  padding: 16px 0;
}

.faq-list summary {
  list-style: none;
  cursor: pointer;
  font-size: clamp(17px, 1.05vw, 20px);
  font-weight: 800;
  color: #2f236c;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-list summary::after {
  content: "+";
  color: #4f33b9;
  font-size: 27px;
  font-weight: 700;
}

.faq-list details[open] summary::after {
  content: "-";
}

.faq-list p {
  margin: 12px 0 0;
  color: #585380;
  font-size: clamp(15px, 0.98vw, 17px);
  line-height: 1.55;
}

.cta-final {
  background: #3a2288;
  color: #fff;
  text-align: center;
  padding: 74px 0;
}

.cta-final h2 {
  margin: 0 0 8px;
  font-size: clamp(32px, 3vw, 46px);
}

.cta-final p {
  margin: 0;
  color: #c9bfef;
  font-size: clamp(17px, 1.04vw, 19px);
  line-height: 1.5;
}

.cta-actions {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

body.modal-open {
  overflow: hidden;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 12px;
}

.modal[hidden] {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 16, 75, 0.58);
}

.modal-panel {
  position: relative;
  width: min(100%, 541px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(16, 14, 45, 0.22);
  font-family: "Inter", "Plus Jakarta Sans", sans-serif;
}

.modal-shell {
  position: relative;
  padding: 14px 32px 20px;
}

.modal-header {
  text-align: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #2f2f33;
}

.modal-header p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: #3c3c43;
}

.modal-header p a,
.discount-toggle,
.checkbox-field a {
  color: #674cf3;
}

.modal-close {
  position: absolute;
  top: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #b8b0c8;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.modal-close-muted {
  left: 32px;
  opacity: 0.35;
}

.modal-close-main {
  right: 32px;
}

.signup-form {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.form-field,
.checkbox-field {
  display: grid;
  gap: 8px;
}

.form-field > span,
.phone-field > span {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: #2e2f33;
}

.form-field input,
.phone-row select,
.phone-row input,
.combobox-control,
.discount-input-wrap {
  width: 100%;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #f5f5f7;
}

.form-field input,
.phone-row select,
.phone-row input,
.combobox-input {
  padding: 0 16px;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  color: #2c2c2c;
  outline: none;
}

.form-field input::placeholder,
.phone-row select,
.combobox-input::placeholder {
  color: #8b8c97;
}

.form-field-combobox {
  position: relative;
}

.combobox {
  position: relative;
}

.combobox-control {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.combobox.is-open .combobox-control {
  border-color: #bcafff;
  background: #fff;
}

.combobox-input {
  flex: 1;
  border: 0;
  background: transparent;
}

.combobox-toggle {
  flex: 0 0 48px;
  height: 40px;
  border: 0;
  background: transparent;
  font-size: 17px;
  color: #2b2b2f;
  cursor: pointer;
}

.combobox-menu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 420px;
  overflow: auto;
  padding: 8px 0;
  border-radius: 18px;
  border: 1px solid #e1dfeb;
  background: #fff;
  box-shadow: 0 12px 26px rgba(32, 22, 72, 0.14);
  z-index: 4;
}

.combobox-option {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  color: #2b2b2b;
  cursor: pointer;
}

.combobox-option:hover,
.combobox-option.is-hidden + .combobox-option:hover {
  background: #f6f3ff;
}

.combobox-option.is-hidden {
  display: none;
}

.phone-row {
  display: grid;
  grid-template-columns: 194px minmax(0, 1fr);
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #f5f5f7;
}

.phone-row select,
.phone-row input {
  border: 0;
  background: transparent;
}

.discount-wrap {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.discount-toggle {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.discount-field {
  position: relative;
  width: 100%;
}

.discount-field-label {
  width: 100%;
}

.discount-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  overflow: hidden;
}

.discount-input-wrap input {
  border: 0;
  background: transparent;
}

.discount-apply {
  border: 0;
  background: #d9d6da;
  color: #2f2f33;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.discount-close {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  background: transparent;
  color: #674cf3;
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.checkbox-field {
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 0;
}

.checkbox-field input {
  width: 22px;
  height: 22px;
  margin: 0;
}

.checkbox-field span {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: #303030;
}

.modal-submit {
  width: 100%;
  min-height: 40px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 400;
}

.auth-page {
  min-height: 100vh;
  background: linear-gradient(145deg, #f5fbfc 0%, var(--sepro-blue-soft) 58%, #f8fbef 100%);
}

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(220px, 290px) minmax(0, 520px);
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 24px;
}

.auth-role-card {
  padding: 25px;
  border: 1px solid rgba(35, 54, 74, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 42px rgba(35, 54, 74, 0.09);
}

.auth-role-kicker {
  margin: 0;
  color: var(--sepro-blue-dark);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.auth-language-toggle {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sepro-blue-dark);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.auth-language-toggle:hover,
.auth-language-toggle:focus-visible {
  color: var(--sepro-navy);
  text-decoration: underline;
}

.auth-role-card h1 {
  margin: 6px 0 18px;
  color: var(--sepro-navy);
  font-size: 23px;
}

.auth-role-options {
  display: grid;
  gap: 9px;
}

.auth-role-option {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 65px;
  padding: 11px;
  border: 1px solid #d9e6e8;
  border-radius: 8px;
  background: #fff;
  color: var(--sepro-navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.auth-role-option svg {
  width: 21px;
  color: var(--sepro-blue-dark);
}

.auth-role-option span {
  display: grid;
  gap: 2px;
}

.auth-role-option strong { font-size: 13px; }
.auth-role-option small { color: #647982; font-size: 11px; }
.auth-role-option:hover, .auth-role-option.is-selected { border-color: var(--sepro-blue-dark); background: var(--sepro-blue-soft); }

@media (max-width: 760px) {
  .auth-layout { grid-template-columns: minmax(0, 520px); gap: 12px; padding: 16px; }
  .auth-role-card { padding: 18px; }
  .auth-role-options { grid-template-columns: 1fr 1fr; }
  .auth-role-option { grid-template-columns: 27px minmax(0, 1fr); min-height: 56px; padding: 8px; }
}

.auth-card {
  width: min(100%, 520px);
  padding: 36px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(35, 54, 74, 0.1);
  box-shadow: 0 20px 60px rgba(35, 54, 74, 0.14);
}

.auth-brand {
  margin-bottom: 28px;
}

.auth-copy h1 {
  margin: 0;
  font-size: 34px;
  line-height: 1.15;
  color: var(--sepro-navy);
}

.auth-copy p,
.auth-alt {
  margin: 12px 0 0;
  font-size: 16px;
  color: #536777;
}

.auth-form {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.auth-submit {
  width: 100%;
  min-height: 48px;
  background: var(--sepro-blue);
  color: var(--sepro-navy-deep);
  border-color: var(--sepro-blue);
}

.auth-submit:hover,
.auth-submit:focus-visible {
  background: var(--sepro-green);
  border-color: var(--sepro-green);
  color: var(--sepro-navy-deep);
}

.auth-alt a {
  color: var(--sepro-blue-dark);
  font-weight: 700;
}

.auth-account-actions {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin-top: 12px;
}

.auth-account-actions .auth-alt {
  margin: 0;
}

.auth-link-button,
.auth-recovery-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sepro-blue-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.auth-link-button:hover,
.auth-link-button:focus-visible,
.auth-recovery-button:hover,
.auth-recovery-button:focus-visible {
  color: var(--sepro-navy);
  text-decoration: underline;
}

.auth-modal .modal-header p {
  margin: 8px 0 0;
  color: #536777;
  font-size: 14px;
}

.auth-modal-form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.auth-modal-form .form-field > span {
  color: var(--sepro-navy);
}

.auth-modal-form .form-field input {
  border-color: #d7e5e8;
}

.auth-modal-feedback {
  margin: 0;
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--sepro-green-soft);
  color: #35522b;
  font-size: 13px;
  line-height: 1.45;
}

/* Patient portal */
.patient-page { min-height: 100vh; background: #f4f8f8; color: var(--sepro-navy); }.patient-shell { display: grid; min-height: 100vh; grid-template-columns: 238px minmax(0, 1fr); }.patient-sidebar { display: grid; grid-template-rows: auto auto 1fr auto; gap: 20px; padding: 22px 14px; background: var(--sepro-navy-deep); color: #d8e7e9; }.patient-sidebar-top { padding: 0 7px; }.patient-sidebar .app-brand { color: #fff; }.patient-sidebar .app-brand img { width: 34px; height: 34px; }.patient-sidebar .app-brand span { font-size: 16px; }.patient-identity { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: 8px; background: rgba(255,255,255,.08); }.patient-identity > span:last-child { display: grid; gap: 3px; }.patient-identity strong { color: #fff; font-size: 12px; }.patient-identity small { color: #a9c0c5; font-size: 10px; }.patient-avatar, .doctor-avatar { display: grid; width: 34px; height: 34px; place-items: center; flex: 0 0 auto; border-radius: 50%; background: var(--sepro-blue); color: var(--sepro-navy-deep); font-size: 11px; font-weight: 800; }.patient-nav { display: grid; align-content: start; gap: 4px; }.patient-nav a, .patient-sidebar-bottom a { display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px; border-radius: 6px; color: #c4d6d9; font-size: 13px; font-weight: 700; }.patient-nav a svg, .patient-sidebar-bottom a svg { width: 17px; }.patient-nav a:hover, .patient-nav a.is-active { background: rgba(76,199,210,.18); color: #fff; }.patient-nav a.is-active { box-shadow: inset 3px 0 var(--sepro-green); }.patient-sidebar-bottom a:hover { background: rgba(255,255,255,.08); color: #fff; }.patient-main { min-width: 0; }.patient-topbar { display: flex; align-items: center; justify-content: space-between; min-height: 74px; padding: 14px 32px; border-bottom: 1px solid #dfe9eb; background: #fff; }.patient-topbar p { margin: 0; color: var(--sepro-blue-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; }.patient-topbar h1 { margin: 3px 0 0; font-size: 21px; }.patient-topbar > .patient-avatar { text-decoration: none; }.patient-content { max-width: 1050px; margin: 0 auto; padding: 31px; }.patient-search-panel { display: flex; align-items: end; justify-content: space-between; gap: 15px; padding: 18px; border: 1px solid #dce8ea; border-radius: 8px; background: #fff; }.patient-search-panel > div { display: grid; grid-template-columns: minmax(180px, 1fr) 160px; gap: 12px; flex: 1; }.patient-search-panel label, .patient-request-card label, .patient-fields label { display: grid; gap: 6px; color: #526a72; font-size: 11px; font-weight: 800; }.patient-search-panel select, .patient-search-panel input, .patient-request-card input, .patient-fields input, .patient-compose input { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid #d8e5e7; border-radius: 7px; background: #fff; color: var(--sepro-navy); font: inherit; }.patient-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 30px 0 14px; }.patient-section-heading span { color: var(--sepro-blue-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; }.patient-section-heading h2 { margin: 4px 0 0; font-size: 22px; }.patient-section-heading p { margin: 0; color: #70828a; font-size: 12px; }.clinic-results { display: grid; gap: 11px; }.clinic-card, .patient-document-grid article, .patient-request-card, .patient-profile-form section, .patient-messenger, .patient-profile-header { border: 1px solid #dce8ea; border-radius: 8px; background: #fff; }.clinic-card { padding: 16px; }.clinic-card-top, .clinic-doctor { display: flex; align-items: center; gap: 11px; }.clinic-card-top > div, .clinic-doctor > div { display: grid; gap: 3px; min-width: 0; }.clinic-card strong { font-size: 13px; }.clinic-card span:not(.clinic-icon):not(.availability-pill), .clinic-doctor span:not(.doctor-avatar) { color: #647982; font-size: 11px; }.clinic-icon, .patient-file-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 7px; background: var(--sepro-blue-soft); color: var(--sepro-blue-dark); }.clinic-icon svg, .patient-file-icon svg { width: 19px; }.availability-pill { margin-left: auto; padding: 5px 7px; border-radius: 5px; background: var(--sepro-green-soft); color: #466220; font-size: 10px; font-weight: 800; white-space: nowrap; }.clinic-doctor { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e6edef; }.clinic-doctor .outline-command { margin-left: auto; }.doctor-avatar.is-green { background: var(--sepro-green); }.doctor-avatar.is-lilac { background: #dbe2fc; color: #495596; }.patient-action-feedback { margin: 14px 0 0; padding: 10px 12px; border-radius: 7px; background: var(--sepro-green-soft); color: #466220; font-size: 12px; font-weight: 700; }.patient-document-grid { display: grid; gap: 9px; }.patient-document-grid article { display: flex; align-items: center; gap: 11px; padding: 13px; }.patient-document-grid article > div { display: grid; gap: 4px; }.patient-document-grid strong { font-size: 13px; }.patient-document-grid span:not(.patient-file-icon) { color: #657981; font-size: 11px; }.patient-document-grid button { display: grid; width: 34px; height: 34px; place-items: center; margin-left: auto; border: 0; border-radius: 6px; background: transparent; color: var(--sepro-blue-dark); cursor: pointer; }.patient-document-grid button:hover { background: var(--sepro-blue-soft); }.patient-document-grid button svg { width: 17px; }.patient-request-card { display: grid; gap: 16px; margin-top: 25px; padding: 19px; }.patient-request-card > div { display: flex; gap: 11px; }.patient-request-card > div > svg { width: 22px; color: var(--sepro-blue-dark); }.patient-request-card h2 { margin: 0; font-size: 15px; }.patient-request-card p { margin: 5px 0 0; color: #657981; font-size: 12px; }.patient-request-card form { display: flex; align-items: end; gap: 10px; }.patient-request-card label { flex: 1; }.patient-messenger { display: grid; grid-template-columns: 265px minmax(0, 1fr); min-height: 585px; overflow: hidden; }.patient-conversations { padding: 14px; border-right: 1px solid #e1eaec; background: #fbfdfd; }.patient-conversations h2 { margin: 4px 6px 14px; font-size: 14px; }.patient-conversations button { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; padding: 10px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--sepro-navy); font: inherit; text-align: left; cursor: pointer; }.patient-conversations button:hover, .patient-conversations button.is-active { background: var(--sepro-blue-soft); }.patient-conversations button > span:nth-child(2) { display: grid; gap: 2px; }.patient-conversations strong { font-size: 11px; }.patient-conversations small, .patient-conversations time { overflow: hidden; color: #71848b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.patient-thread { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; }.patient-thread header { display: flex; align-items: center; gap: 10px; padding: 14px 17px; border-bottom: 1px solid #e3eaec; }.patient-thread header div { display: grid; gap: 2px; }.patient-thread header strong { font-size: 13px; }.patient-thread header small { color: #70828a; font-size: 11px; }.patient-thread-body { display: grid; align-content: start; gap: 12px; overflow: auto; padding: 20px; background: #f8fbfb; }.patient-bubble { width: fit-content; max-width: min(78%, 490px); padding: 10px 12px; border-radius: 8px 8px 8px 1px; background: #fff; box-shadow: 0 1px 3px rgba(24,42,61,.08); }.patient-bubble.is-sent { justify-self: end; border-radius: 8px 8px 1px 8px; background: var(--sepro-blue); }.patient-bubble p, .patient-bubble time { margin: 0; }.patient-bubble p { font-size: 12px; line-height: 1.5; }.patient-bubble time { display: block; margin-top: 5px; color: #687d84; font-size: 10px; }.patient-compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e3eaec; }.patient-compose button { display: grid; min-width: 42px; place-items: center; padding: 0; }.patient-compose button svg { width: 17px; }.patient-profile-header { display: flex; align-items: center; gap: 15px; padding: 18px; }.patient-avatar-large { width: 55px; height: 55px; font-size: 16px; }.patient-profile-header h2 { margin: 0; font-size: 19px; }.patient-profile-header p { max-width: 570px; margin: 5px 0 0; color: #647982; font-size: 12px; }.patient-profile-form { display: grid; gap: 14px; margin-top: 18px; }.patient-profile-form section { padding: 19px; }.patient-profile-form section h2 { margin: 0 0 15px; font-size: 15px; }.patient-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; }.patient-loader { position: fixed; inset: 0; z-index: 300; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(244,250,251,.96); color: var(--sepro-navy); font-size: 14px; font-weight: 800; }.patient-loader[hidden] { display: none; }.patient-loader img { width: 58px; height: 58px; object-fit: contain; animation: sepro-pulse .65s ease-in-out infinite alternate; }

@media (max-width: 800px) { .patient-shell { grid-template-columns: 1fr; }.patient-sidebar { position: sticky; top: 0; z-index: 20; grid-template-columns: auto 1fr auto; grid-template-rows: auto; align-items: center; gap: 8px; padding: 9px 12px; }.patient-sidebar-top { padding: 0; }.patient-sidebar .app-brand span, .patient-identity > span:last-child, .patient-sidebar-bottom span { display: none; }.patient-nav { display: flex; justify-content: center; gap: 2px; }.patient-nav a { width: 39px; min-height: 38px; justify-content: center; padding: 0; }.patient-nav a span { display: none; }.patient-nav a.is-active { box-shadow: inset 0 -3px var(--sepro-green); }.patient-sidebar-bottom a { min-height: 38px; padding: 0 7px; }.patient-topbar { min-height: 65px; padding: 12px 16px; }.patient-content { padding: 20px 14px; }.patient-search-panel, .patient-request-card form { align-items: stretch; flex-direction: column; }.patient-search-panel > div, .patient-fields { grid-template-columns: 1fr; }.patient-section-heading { align-items: start; flex-direction: column; gap: 6px; }.patient-messenger { grid-template-columns: 1fr; min-height: 590px; }.patient-conversations { display: flex; gap: 7px; overflow: auto; padding: 9px; border-right: 0; border-bottom: 1px solid #e1eaec; }.patient-conversations h2 { display: none; }.patient-conversations button { min-width: 190px; }.patient-conversations button > .doctor-avatar { display: none; } }

.auth-form .form-field > span {
  color: var(--sepro-navy);
}

.auth-form .form-field input {
  border-color: #d7e5e8;
  background: #fbfdfd;
}

.auth-form .form-field input:focus {
  border-color: var(--sepro-green);
  box-shadow: 0 0 0 3px rgba(183, 217, 63, 0.22);
}

/* Sepro Health workspace */
.app-page { min-width: 320px; background: #f7fafb; color: var(--sepro-navy); font-size: 14px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.app-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; padding: 18px 12px; background: var(--sepro-navy); color: #e8f1f3; z-index: 10; }
.app-sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 18px; }
.app-brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 16px; font-weight: 800; }.app-brand img { width: 29px; height: 29px; object-fit: contain; }.app-close { color: #d8e5e8; }
.icon-button { position: relative; display: inline-grid; width: 34px; height: 34px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: inherit; cursor: pointer; }.icon-button:hover { background: rgba(35,54,74,.08); }.icon-button svg { width: 18px; height: 18px; stroke-width: 1.9; }
.practice-switcher { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid rgba(255,255,255,.12); background: transparent; color: inherit; text-align: left; cursor: pointer; }.practice-switcher > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }.practice-switcher strong { color: #fff; font-size: 13px; }.practice-switcher small { color: #b9cbd0; font-size: 11px; }.practice-switcher svg { width: 16px; }
.practice-avatar { display: inline-grid; flex: 0 0 auto; width: 31px; height: 31px; place-items: center; border-radius: 50%; background: var(--sepro-blue); color: var(--sepro-navy-deep); font-size: 11px; font-weight: 800; }
.app-nav { display: grid; flex: 1 1 auto; min-height: 0; align-content: start; gap: 6px; margin-top: 18px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }.nav-department { display: grid; gap: 3px; }.nav-department-toggle { display: flex; align-items: center; justify-content: space-between; min-height: 28px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #9bb1b7; font: inherit; font-size: 10px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; text-align: left; cursor: pointer; }.nav-department-toggle:hover, .nav-department-toggle[aria-expanded="true"] { background: rgba(255,255,255,.07); color: #dbe8eb; }.nav-department-toggle > span { display: inline-flex; align-items: center; gap: 7px; }.nav-department-toggle > svg { width: 14px; transition: transform .18s ease; }.nav-department-toggle > span > svg { width: 14px; }.nav-department-toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }.nav-department-content { display: grid; gap: 3px; }.nav-department-content[hidden] { display: none; }.app-nav a, .app-sidebar-bottom > a { display: flex; align-items: center; gap: 12px; min-height: 38px; padding: 0 9px; border-radius: 6px; color: #cfdbde; font-size: 13px; font-weight: 600; }.app-nav a:hover, .app-sidebar-bottom > a:hover { background: rgba(255,255,255,.09); color: #fff; }.app-nav a.is-active { background: rgba(76,199,210,.22); color: #fff; }.app-nav svg, .app-sidebar-bottom svg { width: 17px; height: 17px; stroke-width: 1.8; }.nav-badge { margin-left: auto; padding: 1px 6px; border-radius: 10px; background: var(--sepro-green); color: var(--sepro-navy-deep); font-size: 10px; }.app-sidebar-bottom { display: grid; flex: 0 0 auto; gap: 2px; margin-top: 12px; }.trial-card { display: grid; gap: 5px; margin-top: 8px; padding:12px; border-radius: 8px; background: rgba(255,255,255,.1); }.trial-card strong { font-size: 12px; color: #fff; }.trial-card span { font-size: 11px; color: #c4d8dc; }.trial-card button { border: 0; border-radius: 5px; padding: 7px 8px; background: var(--sepro-blue); color: var(--sepro-navy-deep); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.nav-expandable { display: grid; }.nav-expand-toggle { display: flex; align-items: center; justify-content: space-between; min-height: 38px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #cfdbde; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }.nav-expand-toggle > span { display: inline-flex; align-items: center; gap: 12px; }.nav-expand-toggle > svg { width: 16px; transition: transform .18s ease; }.nav-expand-toggle[aria-expanded="true"] { background: rgba(255,255,255,.09); color: #fff; }.nav-expand-toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }.nav-submenu { display: grid; gap: 2px; padding: 3px 0 5px 38px; }.nav-submenu[hidden] { display: none; }.nav-submenu a { min-height: 31px; font-size: 12px; }.help-chat { position: fixed; top: 0; right: 0; z-index: 100; display: grid; grid-template-rows: auto 1fr auto; width: min(390px, 100vw); height: 100vh; border-left: 1px solid #d8e4e6; background: #fff; box-shadow: -12px 0 26px rgba(24,42,61,.12); }.help-chat[hidden] { display: none; }.help-chat.is-expanded { inset: 7vh 13vw; width: auto; height: 86vh; border: 1px solid #d8e4e6; border-radius: 12px; box-shadow: 0 22px 70px rgba(24,42,61,.33); }.help-chat.is-expanded::before { position: fixed; inset: 0; z-index: -1; content: ""; background: rgba(24,42,61,.4); }.help-chat header { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 0 16px; border-bottom: 1px solid #d8e4e6; }.help-chat header strong { font-size: 17px; }.help-chat header > div { display: flex; gap: 2px; }.help-chat-content { display: grid; align-content: center; justify-items: center; gap: 12px; max-width: 520px; margin: auto; padding: 24px; color: #607480; text-align: center; }.help-chat-content > svg { width: 35px; height: 35px; color: var(--sepro-blue-dark); }.help-chat-content h2 { margin: 0; color: var(--sepro-navy); font-size: 19px; }.help-chat-content p { margin: 0; font-size: 13px; line-height: 1.6; }.help-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }.help-suggestions button { padding: 8px 10px; border: 0; border-radius: 7px; background: var(--sepro-blue-soft); color: var(--sepro-blue-dark); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }.help-chat-form { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 12px; border-top: 1px solid #d8e4e6; }.help-chat-form textarea { min-height: 40px; padding: 10px; border: 0; border-radius: 7px; background: #f1f5f5; font: inherit; resize: none; }.help-chat-form button { min-width: 80px; border: 0; border-radius: 7px; background: var(--sepro-blue); color: var(--sepro-navy-deep); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }.help-chat-form svg { width: 14px; vertical-align: -3px; }
.invoice-line-actions { display: flex; align-items: center; gap: 8px; }.invoice-line-actions button, button.invoice-line-actions { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 11px; border: 1px solid #c9e8ec; border-radius: 7px; background: #f3fbfc; color: var(--sepro-blue-dark); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }.invoice-line-actions button:hover, button.invoice-line-actions:hover { border-color: var(--sepro-blue-dark); background: var(--sepro-blue-soft); }.invoice-line-actions button:last-child { border-color: #f5c6d0; background: #fff8fa; color: #bd254c; }.invoice-line-actions svg { width: 15px; height: 15px; }.invoice-finalize-group { position: relative; }.invoice-finalize-controls { display: inline-flex; overflow: hidden; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(35,54,74,.06); }.invoice-finalize-controls .dialog-submit { border-radius: 7px 0 0 7px; }.invoice-finalize-toggle { display: grid; width: 35px; place-items: center; border: 0; border-left: 1px solid rgba(24,42,61,.18); border-radius: 0 7px 7px 0; background: var(--sepro-blue); color: var(--sepro-navy-deep); cursor: pointer; }.invoice-finalize-toggle svg { width: 17px; transition: transform .18s ease; }.invoice-finalize-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }.invoice-finalize-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; display: grid; width: 270px; padding: 6px; border: 1px solid #d7e3e6; border-radius: 9px; background: #fff; box-shadow: 0 14px 28px rgba(24,42,61,.2); }.invoice-finalize-menu[hidden] { display: none; }.invoice-finalize-menu button { min-height: 39px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--sepro-navy); text-align: left; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }.invoice-finalize-menu button:hover { background: var(--sepro-blue-soft); color: var(--sepro-blue-dark); }
.app-main { min-width: 0; background: #fff; }.app-topbar { display: flex; align-items: center; height: 66px; padding: 0 24px; border-bottom: 1px solid #e3eaec; }.app-topbar h1 { margin: 0; font-size: 19px; letter-spacing: 0; }.app-top-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }.user-menu { display: flex; align-items: center; gap: 6px; padding: 0 4px; border: 0; background: transparent; color: var(--sepro-navy); cursor: pointer; }.user-menu svg { width: 15px; }.notification-dot { position: absolute; right: 7px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--sepro-green); }
.top-menu-group { position: relative; }.top-popover { position: absolute; top: calc(100% + 13px); right: 0; z-index: 30; width: 280px; overflow: hidden; border: 1px solid #d7e3e6; border-radius: 10px; background: #fff; box-shadow: 0 14px 28px rgba(24,42,61,.18); }.top-popover[hidden] { display: none; }.profile-popover { display: grid; padding: 8px; }.profile-popover a, .profile-popover button { display: flex; align-items: center; gap: 12px; min-height: 45px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--sepro-navy); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }.profile-popover a:hover, .profile-popover button:hover { background: var(--sepro-blue-soft); }.profile-popover svg { width: 19px; }.notification-popover { width: 430px; }.notification-popover h2 { margin: 0; padding: 17px 20px; border-bottom: 1px solid #d7e3e6; font-size: 18px; }.empty-notification { display: grid; min-height: 220px; place-content: center; gap: 9px; color: #647982; text-align: center; }.empty-notification svg { width: 30px; height: 30px; margin: auto; }.empty-notification p { margin: 0; }
.app-menu { display: none; margin-right: 8px; }.calendar-toolbar { display: flex; align-items: center; gap: 8px; min-height: 72px; padding: 13px 22px; border-bottom: 1px solid #e3eaec; }.new-booking, .today-button, .view-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 35px; padding: 0 12px; border: 0; border-radius: 7px; color: var(--sepro-navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }.new-booking { background: var(--sepro-blue); }.new-booking:hover { background: var(--sepro-green); }.new-booking svg { width: 17px; }.today-button, .view-button { background: #edf2f3; }.date-controls { display: inline-flex; align-items: center; margin: 0 auto; border: 1px solid #dce5e8; border-radius: 7px; overflow: hidden; }.date-controls .icon-button { border-radius: 0; }.date-controls strong { min-width: 164px; text-align: center; font-size: 13px; }.calendar-view-actions { display: inline-flex; gap: 7px; }.view-button svg { width: 15px; }
.calendar-wrap { overflow: auto; height: calc(100vh - 138px); background: #fff; }.calendar-grid { position: relative; display: grid; grid-template-columns: 54px repeat(7, minmax(130px, 1fr)); grid-template-rows: 52px 4320px; min-width: 1050px; }.calendar-corner, .calendar-day { position: sticky; top: 0; z-index: 4; background: #fff; border-bottom: 1px solid #dce5e8; }.calendar-day { display: flex; align-items: center; justify-content: center; gap: 5px; color: #607480; font-size: 11px; }.calendar-day strong { color: var(--sepro-navy); font-size: 13px; }.calendar-day.is-today { background: var(--sepro-blue-soft); }.calendar-day.is-today strong { color: var(--sepro-blue-dark); }.calendar-day.is-closed { color: #98a6ab; }.time-labels { grid-column: 1; grid-row: 2; position: relative; background: #fff; border-right: 1px solid #dce5e8; }.time-labels span { position: absolute; right: 8px; color: #70818a; font-size: 10px; transform: translateY(-7px); }.day-column { grid-row: 2; position: relative; border-right: 1px solid #dce5e8; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 44px, #edf1f2 45px), repeating-linear-gradient(to bottom, transparent 0, transparent 179px, #d9e2e5 180px); background-size: 100% 45px, 100% 180px; }.closed-column { background-color: #f5f7f7; background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(35,54,74,.045) 4px, rgba(35,54,74,.045) 7px), repeating-linear-gradient(to bottom, transparent 0, transparent 44px, #edf1f2 45px), repeating-linear-gradient(to bottom, transparent 0, transparent 179px, #d9e2e5 180px); }.calendar-event { z-index: 2; align-self: start; margin: 4px; padding: 7px 8px; border-left: 4px solid var(--sepro-blue); border-radius: 3px; background: #eaf9fb; color: var(--sepro-navy); overflow: hidden; box-shadow: 0 1px 2px rgba(35,54,74,.08); font-size: 11px; }.calendar-event strong, .calendar-event span, .calendar-event small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.calendar-event strong { font-size: 11px; }.calendar-event span, .calendar-event small { margin-top: 2px; color: #55727a; }.event-followup { border-left-color: var(--sepro-green); background: var(--sepro-green-soft); }.event-telehealth { border-left-color: #557ca8; background: #eaf1fa; }.current-time { position: absolute; left: 54px; right: calc(2 * ((100% - 54px) / 7)); z-index: 3; height: 1px; background: #e55d7c; pointer-events: none; }.current-time span { position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: #e55d7c; }
.booking-dialog { width: min(100% - 32px, 430px); padding: 0; border: 0; border-radius: 12px; color: var(--sepro-navy); box-shadow: 0 24px 70px rgba(24,42,61,.3); }.booking-dialog::backdrop { background: rgba(24,42,61,.35); }.booking-dialog form { display: grid; gap: 17px; padding: 24px; }.dialog-heading { display: flex; justify-content: space-between; align-items: start; }.dialog-heading span { color: var(--sepro-blue-dark); font-size: 12px; font-weight: 700; }.dialog-heading h2 { margin: 3px 0 0; font-size: 21px; }.booking-dialog label { display: grid; gap: 7px; color: var(--sepro-navy); font-size: 13px; font-weight: 700; }.booking-dialog input, .booking-dialog select { min-height: 42px; padding: 0 11px; border: 1px solid #d7e5e8; border-radius: 7px; color: var(--sepro-navy); font: inherit; }.dialog-actions { display: flex; justify-content: end; gap: 9px; }.dialog-cancel, .dialog-submit { min-height: 38px; border: 0; border-radius: 7px; padding: 0 13px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }.dialog-cancel { background: #edf2f3; color: var(--sepro-navy); }.dialog-submit { background: var(--sepro-blue); color: var(--sepro-navy-deep); }

.day-column:not(.closed-column)::after {
  position: absolute;
  inset: 1440px 0 auto;
  height: 360px;
  content: "";
  background-color: #f5f7f7;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(35, 54, 74, 0.045) 4px, rgba(35, 54, 74, 0.045) 7px), repeating-linear-gradient(to bottom, transparent 0, transparent 44px, #edf1f2 45px), repeating-linear-gradient(to bottom, transparent 0, transparent 179px, #d9e2e5 180px);
  background-size: auto, 100% 45px, 100% 180px;
  pointer-events: none;
}

.day-column:not(.closed-column)::before,
.day-column:not(.closed-column)::after {
  z-index: 1;
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  background-color: #f5f7f7;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(35, 54, 74, 0.045) 4px, rgba(35, 54, 74, 0.045) 7px), repeating-linear-gradient(to bottom, transparent 0, transparent 44px, #edf1f2 45px), repeating-linear-gradient(to bottom, transparent 0, transparent 179px, #d9e2e5 180px);
  background-size: auto, 100% 45px, 100% 180px;
  pointer-events: none;
}

.day-column:not(.closed-column)::before {
  top: 0;
  height: 1800px;
}

.day-column:not(.closed-column)::after {
  top: 3780px;
  height: 540px;
}

.closed-column {
  background-color: #f5f7f7;
}

.closed-column::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  background-color: #f5f7f7;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(35, 54, 74, 0.06) 4px, rgba(35, 54, 74, 0.06) 7px), repeating-linear-gradient(to bottom, transparent 0, transparent 44px, #edf1f2 45px), repeating-linear-gradient(to bottom, transparent 0, transparent 179px, #d9e2e5 180px);
  background-size: auto, 100% 45px, 100% 180px;
  pointer-events: none;
}

.calendar-unavailable, .calendar-closed-overlay { grid-row: 2; position: relative; align-self: start; z-index: 1; margin: 0 1px; background-color: #f5f7f7; background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(35, 54, 74, 0.06) 4px, rgba(35, 54, 74, 0.06) 7px), repeating-linear-gradient(to bottom, transparent 0, transparent 44px, #edf1f2 45px), repeating-linear-gradient(to bottom, transparent 0, transparent 179px, #d9e2e5 180px); background-size: auto, 100% 45px, 100% 180px; pointer-events: none; }
.calendar-closed-overlay { align-self: stretch; margin: 0; }

.calendar-event, .calendar-break { grid-row: 2; position: relative; align-self: start; z-index: 2; }
.calendar-event { cursor: pointer; }.calendar-event:focus-visible { outline: 3px solid var(--sepro-green); outline-offset: 2px; }
.calendar-break { display: grid; align-content: start; gap: 3px; margin: 4px; padding: 8px; border: 0; border-left: 4px solid #aebfc4; border-radius: 3px; background: repeating-linear-gradient(-45deg, #f1f5f5, #f1f5f5 5px, #e8eeee 5px, #e8eeee 8px); color: #526a72; text-align: left; font: inherit; font-size: 11px; cursor: pointer; box-shadow: 0 1px 2px rgba(35,54,74,.06); }.calendar-break:hover { border-left-color: var(--sepro-blue-dark); background: #e8f8fa; }.calendar-break strong { font-size: 11px; }.calendar-break span { font-size: 10px; }
.schedule-dialog { width: min(100% - 32px, 660px); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 12px; color: var(--sepro-navy); box-shadow: 0 24px 70px rgba(24,42,61,.3); }.schedule-dialog::backdrop { background: rgba(24,42,61,.35); }.schedule-dialog form { display: grid; gap: 16px; padding: 28px 36px; }.schedule-dialog h2 { margin: 0; font-size: 24px; }.schedule-dialog label, .schedule-repeat > span, .schedule-ends > span { display: grid; gap: 7px; color: var(--sepro-navy); font-size: 14px; font-weight: 700; }.schedule-dialog label small { font-weight: 400; }.schedule-dialog input:not([type="checkbox"]):not([type="radio"]), .schedule-dialog select { min-height: 44px; width: 100%; padding: 0 12px; border: 0; border-radius: 8px; background: #f2f5f5; color: var(--sepro-navy); font: inherit; }.schedule-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.schedule-checkbox { display: flex !important; align-items: center; gap: 9px; }.schedule-checkbox input { width: 20px; height: 20px; accent-color: var(--sepro-blue-dark); }.schedule-repeat { display: grid; gap: 10px; }.schedule-repeat-inputs { display: grid; grid-template-columns: 90px 1fr; gap: 4px; }.weekday-picker { display: grid; grid-template-columns: repeat(7, 1fr); overflow: hidden; border-radius: 8px; }.weekday-picker button { min-height: 41px; border: 1px solid #dce5e8; background: #f0f3f4; color: var(--sepro-navy); font: inherit; cursor: pointer; }.weekday-picker button.is-selected { border-color: var(--sepro-blue-dark); background: var(--sepro-blue-dark); color: #fff; }.schedule-ends { display: grid; gap: 12px; }.schedule-ends label { display: flex; align-items: center; gap: 9px; }.schedule-ends input[type="radio"] { width: 20px; height: 20px; accent-color: var(--sepro-blue-dark); }.schedule-ends input[type="date"] { width: 165px !important; min-height: 38px !important; }.schedule-actions { margin-top: 6px; }.schedule-delete { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; border: 0; background: transparent; color: #bd254c; font: inherit; font-weight: 700; cursor: pointer; }.schedule-delete svg { width: 16px; }
.form-error { margin: -4px 0 0; color: #bd254c; font-size: 13px; font-weight: 600; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--sepro-navy); font-size: 13px; font-weight: 700; }.back-link svg { width: 17px; }.account-empty { display: grid; justify-items: center; align-content: center; min-height: calc(100vh - 66px); gap: 10px; padding: 24px; color: #607480; text-align: center; }.account-empty > svg { width: 42px; height: 42px; color: var(--sepro-blue-dark); }.account-empty h2, .account-empty p { margin: 0; }.account-empty h2 { color: var(--sepro-navy); font-size: 18px; }.account-empty p { max-width: 400px; font-size: 13px; }.invoice-dialog { width: min(calc(100% - 32px), 1120px); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 12px; color: var(--sepro-navy); box-shadow: 0 24px 70px rgba(24,42,61,.3); }.invoice-dialog::backdrop, .payment-dialog::backdrop { background: rgba(24,42,61,.4); }.invoice-dialog form, .payment-dialog form { display: grid; gap: 16px; padding: 28px; }.invoice-top-fields { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px 18px; }.invoice-dialog label, .payment-dialog label { display: grid; gap: 7px; color: var(--sepro-navy); font-size: 12px; font-weight: 700; }.invoice-dialog input, .invoice-dialog select, .invoice-dialog textarea, .payment-dialog input, .payment-dialog select, .payment-dialog textarea { width: 100%; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 7px; background: #f2f5f5; color: var(--sepro-navy); font: inherit; }.invoice-dialog textarea, .payment-dialog textarea { resize: vertical; }.invoice-lines { display: grid; gap: 8px; }.invoice-line { display: grid; grid-template-columns: 145px minmax(130px, 1.4fr) minmax(125px, 1.4fr) minmax(110px, 1.2fr) 68px 100px 38px; gap: 7px; align-items: center; }.invoice-line input, .invoice-line select { min-width: 0; }.invoice-line button, .payment-allocation button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #ee9aac; border-radius: 7px; background: #fff; color: #c64d68; cursor: pointer; }.invoice-line button svg, .payment-allocation button svg { width: 17px; }.invoice-line-actions { display: inline-flex; align-items: center; gap: 7px; width: max-content; padding: 0; border: 0; background: transparent; color: var(--sepro-blue-dark); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }.invoice-line-actions svg { width: 17px; }.invoice-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 185px; gap: 40px; align-items: end; }.invoice-bottom dl { display: grid; gap: 4px; margin: 0; font-size: 13px; }.invoice-bottom dl div { display: flex; justify-content: space-between; gap: 10px; }.invoice-bottom dt { color: #607480; }.invoice-bottom dd { margin: 0; font-weight: 700; }.invoice-total { padding-top: 7px; border-top: 1px solid #dce5e8; color: var(--sepro-navy); font-size: 15px; }.payment-dialog { width: min(calc(100% - 32px), 540px); padding: 0; border: 0; border-radius: 12px; color: var(--sepro-navy); box-shadow: 0 24px 70px rgba(24,42,61,.3); }.payment-allocations { display: grid; gap: 8px; }.payment-allocation { display: grid; grid-template-columns: 1fr 145px 38px; gap: 8px; align-items: end; }
.availability-overlay { grid-row: 2; position: relative; align-self: start; z-index: 1; margin: 0 2px; border-left: 3px solid #70dba2; background: rgba(112, 219, 162, .08); pointer-events: none; }.availability-page, .patients-page { padding: 32px; }.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; max-width: 1180px; margin: 0 auto 26px; }.page-heading > div > span { color: var(--sepro-blue-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; }.page-heading h2 { margin: 5px 0 7px; font-size: 27px; letter-spacing: 0; }.page-heading p { max-width: 660px; margin: 0; color: #607480; font-size: 14px; }.availability-notice { max-width: 1180px; margin: 0 auto 18px; padding: 13px 15px; border-left: 4px solid var(--sepro-green); border-radius: 6px; background: var(--sepro-green-soft); color: var(--sepro-navy); font-size: 13px; font-weight: 600; }.availability-board { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 11px; max-width: 1180px; margin: auto; }.availability-day { min-height: 235px; padding: 13px; border: 1px solid #dce5e8; border-radius: 8px; background: #fff; }.availability-day header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }.availability-day header strong { font-size: 14px; }.availability-day header button { display: grid; width: 28px; height: 28px; place-items: center; border: 0; border-radius: 6px; background: var(--sepro-blue-soft); color: var(--sepro-blue-dark); cursor: pointer; }.availability-day header svg { width: 16px; }.availability-day > p { margin: 45px 0; color: #88999f; font-size: 13px; text-align: center; }.availability-slot { display: grid; grid-template-columns: 17px 1fr 20px; align-items: center; gap: 6px; margin-top: 8px; padding: 9px 7px; border-left: 3px solid #70dba2; border-radius: 4px; background: #edf9f1; color: #315c49; font-size: 12px; font-weight: 700; }.availability-slot svg { width: 15px; }.availability-slot button { display: grid; place-items: center; border: 0; background: transparent; color: #b6576b; cursor: pointer; }.availability-slot button svg { width: 15px; }.patient-actions { display: flex; gap: 9px; }.patient-actions .today-button { gap: 7px; }.patient-toolbar { display: flex; justify-content: space-between; align-items: center; max-width: 1180px; margin: auto; padding: 12px 0; border-bottom: 1px solid #dce5e8; color: #647982; font-size: 13px; }.patient-toolbar label { display: flex; align-items: center; gap: 8px; width: min(100%, 390px); padding: 0 12px; border-radius: 7px; background: #f2f5f5; }.patient-toolbar svg { width: 17px; }.patient-toolbar input { width: 100%; min-height: 42px; border: 0; background: transparent; color: var(--sepro-navy); font: inherit; outline: 0; }.patient-list { display: grid; max-width: 1180px; margin: auto; }.patient-row { display: grid; grid-template-columns: 42px 1fr 20px; align-items: center; gap: 12px; padding: 15px 8px; border: 0; border-bottom: 1px solid #e4ecee; background: transparent; color: var(--sepro-navy); text-align: left; cursor: pointer; }.patient-row:hover { background: #f6fbfb; }.patient-row svg { width: 18px; color: #6e838b; }.patient-row strong, .patient-row small { display: block; }.patient-row strong { font-size: 14px; }.patient-row small { margin-top: 3px; color: #70818a; font-size: 12px; }.patient-initials { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--sepro-blue-soft); color: var(--sepro-blue-dark); font-size: 12px; font-weight: 800; }.patients-empty { display: grid; justify-items: center; gap: 9px; max-width: 470px; margin: 130px auto; color: #607480; text-align: center; }.patients-empty > svg { width: 42px; height: 42px; color: var(--sepro-blue-dark); }.patients-empty h3, .patients-empty p { margin: 0; }.patients-empty h3 { color: var(--sepro-navy); }.form-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.fields-dialog { width: min(100% - 32px, 620px); padding: 0; border: 0; border-radius: 12px; color: var(--sepro-navy); box-shadow: 0 24px 70px rgba(24,42,61,.3); }.fields-dialog::backdrop, .field-dialog::backdrop { background: rgba(24,42,61,.35); }.fields-dialog form, .field-dialog form { display: grid; gap: 15px; padding: 28px; }.profile-fields { display: grid; gap: 9px; }.profile-fields p { display: flex; gap: 8px; margin: 0 0 7px; color: #607480; font-size: 13px; }.profile-fields label { padding: 10px; border: 1px solid #dce5e8; border-radius: 7px; font-size: 14px; }.profile-fields input { accent-color: var(--sepro-blue-dark); }.outline-command { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; border: 1px solid var(--sepro-blue-dark); border-radius: 7px; background: #fff; color: var(--sepro-blue-dark); font: inherit; font-weight: 700; cursor: pointer; }.field-dialog { width: min(100% - 32px, 600px); padding: 0; border: 0; border-radius: 12px; color: var(--sepro-navy); box-shadow: 0 24px 70px rgba(24,42,61,.3); }.field-type-list { display: grid; gap: 7px; }.field-type-list button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 1px solid var(--sepro-blue-dark); border-radius: 7px; background: #fff; color: var(--sepro-blue-dark); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }.field-type-list button:hover { background: var(--sepro-blue-soft); }.field-type-list svg { width: 18px; }
.booking-dialog:has(.quick-booking) { width: min(calc(100% - 32px), 760px); }
.toolbar-menu-group { position: relative; }.date-picker-group { margin: 0 auto; }.date-picker-toggle { min-width: 164px; min-height: 34px; border: 0; border-inline: 1px solid #dce5e8; background: #fff; color: var(--sepro-navy); font: inherit; cursor: pointer; }.toolbar-menu { position: absolute; top: calc(100% + 9px); z-index: 20; min-width: 210px; border: 1px solid #d3dfe2; border-radius: 12px; background: #fff; box-shadow: 0 12px 25px rgba(24,42,61,.17); }.toolbar-menu[hidden] { display: none; }.calendar-picker { left: 50%; width: 360px; min-width: 0; padding: 12px; transform: translateX(-50%); }.mini-calendar-header { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 48px; border-radius: 9px; background: #edf2f3; }.mini-calendar-header strong { text-align: center; font-size: 16px; text-transform: capitalize; }.mini-calendar-weekdays, .mini-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }.mini-calendar-weekdays { margin-top: 14px; color: #607480; font-size: 11px; font-weight: 700; }.mini-calendar-days { gap: 2px; margin-top: 8px; }.mini-calendar-days button { min-height: 34px; border: 0; border-radius: 5px; background: transparent; color: var(--sepro-navy); font: inherit; font-size: 13px; cursor: pointer; }.mini-calendar-days button:hover { background: var(--sepro-blue-soft); }.mini-calendar-days button.is-outside { color: #a6b3b7; }.mini-calendar-days button.is-selected { background: var(--sepro-blue-dark); color: #fff; font-weight: 800; }.toolbar-actions-menu, .view-menu { right: 0; padding: 7px; }.toolbar-actions-menu { width: 265px; }.toolbar-actions-menu button, .view-menu button { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 42px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--sepro-navy); text-align: left; font: inherit; font-size: 14px; cursor: pointer; }.toolbar-actions-menu button:hover, .view-menu button:hover { background: var(--sepro-blue-soft); }.toolbar-actions-menu svg, .view-menu svg { width: 18px; }.toolbar-actions-menu label { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 9px; color: var(--sepro-navy); font-size: 14px; cursor: pointer; }.toolbar-actions-menu input { width: 17px; height: 17px; accent-color: var(--sepro-blue-dark); }.view-menu { width: 190px; }
.calendar-wrap > [hidden] { display: none !important; }
.day-appointment-secondary { top: auto; border-left-color: var(--sepro-green); background: var(--sepro-green-soft); }.day-appointment-late { border-left-color: #557ca8; background: #eaf1fa; }
.sidebar-collapsed { grid-template-columns: 74px minmax(0, 1fr); }.sidebar-collapsed .app-sidebar { padding-inline: 10px; overflow: visible; }.sidebar-collapsed .app-brand span, .sidebar-collapsed .practice-switcher > span:nth-child(2), .sidebar-collapsed .practice-switcher > svg, .sidebar-collapsed .nav-department h2, .sidebar-collapsed .app-nav a:not(.nav-badge), .sidebar-collapsed .app-sidebar-bottom > a, .sidebar-collapsed .trial-card { font-size: 0; }.sidebar-collapsed .nav-department h2 { display: none; }.sidebar-collapsed .app-nav { gap: 5px; }.sidebar-collapsed .nav-department { gap: 3px; }.sidebar-collapsed .app-sidebar-top { justify-content: center; gap: 4px; }.sidebar-collapsed .app-close { display: inline-grid; width: 28px; height: 28px; }.sidebar-collapsed .app-brand { gap: 0; }.sidebar-collapsed .practice-switcher { justify-content: center; min-height: 52px; padding-inline: 0; }.sidebar-collapsed .practice-switcher > span:nth-child(2), .sidebar-collapsed .practice-switcher > svg { display: none; }.sidebar-collapsed .practice-switcher .practice-avatar { width: 38px; height: 38px; font-size: 12px; }.sidebar-collapsed .app-nav a, .sidebar-collapsed .app-sidebar-bottom > a { justify-content: center; padding-inline: 0; }.sidebar-collapsed .app-nav svg, .sidebar-collapsed .app-sidebar-bottom svg { width: 20px; height: 20px; }.sidebar-collapsed .app-sidebar-bottom { justify-items: center; width: 100%; }.sidebar-collapsed .app-sidebar-bottom > a { width: 42px; }.sidebar-collapsed .trial-card { display: grid; width: 42px; height: 42px; margin-top: 13px; padding: 0; place-items: center; border-radius: 8px; background: rgba(255,255,255,.1); }.sidebar-collapsed .trial-card::before { content: "PRO"; color: var(--sepro-blue); font-size: 9px; font-weight: 800; }.sidebar-collapsed .trial-card > * { display: none; }.sidebar-collapsed .nav-badge { position: absolute; margin: 0 0 19px 22px; font-size: 10px; }.sidebar-collapsed .nav-expandable { position: relative; }.sidebar-collapsed .nav-expand-toggle { justify-content: center; width: 42px; min-height: 38px; padding: 0; font-size: 0; }.sidebar-collapsed .nav-expand-toggle > span { gap: 0; }.sidebar-collapsed .nav-expand-toggle > svg { display: none; }.sidebar-collapsed .nav-expand-toggle > span > svg { width: 20px; height: 20px; }.sidebar-collapsed .nav-submenu:not([hidden]) { position: absolute; top: 0; left: calc(100% + 8px); z-index: 40; display: grid; width: 178px; padding: 7px; border: 1px solid #d4e0e3; border-radius: 8px; background: #fff; box-shadow: 0 12px 25px rgba(24,42,61,.2); }.sidebar-collapsed .nav-submenu:not([hidden]) a { justify-content: flex-start; min-height: 38px; padding: 0 10px; color: var(--sepro-navy); font-size: 13px; }.sidebar-collapsed .nav-submenu:not([hidden]) a:hover { background: var(--sepro-blue-soft); color: var(--sepro-blue-dark); }.calendar-day-view, .calendar-month-view { min-height: calc(100vh - 138px); padding: 24px; background: #fff; }.calendar-day-view > header, .calendar-month-view > header { display: flex; justify-content: space-between; margin: 0 auto 20px; max-width: 820px; color: var(--sepro-navy); }.calendar-day-view > header strong, .calendar-month-view > header strong { font-size: 20px; }.calendar-day-view > header span { color: #607480; }.day-view-grid { display: grid; grid-template-columns: 70px minmax(0, 750px); max-width: 820px; margin: auto; }.day-times { display: flex; flex-direction: column; justify-content: space-between; height: 1000px; padding: 0 10px 0 0; color: #70818a; font-size: 12px; text-align: right; }.day-schedule { position: relative; height: 1000px; border: 1px solid #dce5e8; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 49px, #edf1f2 50px); }.day-unavailable { position: absolute; right: 0; left: 0; background: repeating-linear-gradient(-45deg, #f5f7f7, #f5f7f7 5px, #e9eeee 5px, #e9eeee 8px); }.day-overnight { top: 0; height: 420px; }.day-evening { bottom: 0; height: 125px; }.day-appointment, .day-break { position: absolute; right: 7px; left: 7px; z-index: 2; padding: 10px; border-radius: 5px; text-align: left; }.day-appointment { border-left: 4px solid var(--sepro-blue); background: #eaf9fb; }.day-appointment strong, .day-appointment span { display: block; }.day-break { border: 0; border-left: 4px solid #aebfc4; background: repeating-linear-gradient(-45deg, #f1f5f5, #f1f5f5 5px, #e8eeee 5px); color: #526a72; font: inherit; cursor: pointer; }.month-weekdays, .month-grid { display: grid; grid-template-columns: repeat(7, 1fr); max-width: 1100px; margin: auto; }.month-weekdays span { padding: 11px; border-bottom: 1px solid #dce5e8; color: #607480; font-size: 12px; font-weight: 700; text-align: center; }.month-grid { grid-template-rows: repeat(5, 145px); }.month-day { padding: 9px; border-right: 1px solid #dce5e8; border-bottom: 1px solid #dce5e8; color: var(--sepro-navy); }.month-day:nth-child(7n + 1) { border-left: 1px solid #dce5e8; }.month-day.is-today { background: var(--sepro-blue-soft); }.month-day.is-empty { background: #f7f9f9; }.month-day button { display: block; width: 100%; margin-top: 7px; padding: 5px; border: 0; border-left: 3px solid var(--sepro-blue); border-radius: 3px; background: #eaf9fb; color: var(--sepro-navy); text-align: left; font: inherit; font-size: 11px; cursor: pointer; }
.sidebar-collapsed [data-sidebar-label] { position: relative; }.sidebar-collapsed [data-sidebar-label]::after { position: absolute; left: calc(100% + 9px); top: 50%; z-index: 45; width: max-content; max-width: 190px; padding: 7px 9px; border-radius: 6px; background: var(--sepro-navy-deep); color: #fff; content: attr(data-sidebar-label); font-size: 12px; font-weight: 700; line-height: 1.2; opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(-4px); transition: opacity .14s ease, transform .14s ease; }.sidebar-collapsed [data-sidebar-label]:hover::after, .sidebar-collapsed [data-sidebar-label]:focus-visible::after { opacity: 1; transform: translateY(-50%) translateX(0); }.sidebar-collapsed .nav-expandable:has(.nav-submenu:not([hidden])) .nav-expand-toggle::after { display: none; }.sidebar-collapsed .sidebar-theme-toggle { justify-content: center; width: 42px; min-height: 38px; padding: 0; font-size: 0; }.sidebar-collapsed .sidebar-theme-toggle span { display: none; }.sidebar-collapsed .sidebar-theme-toggle svg { width: 20px; height: 20px; }.sidebar-collapsed .app-sidebar-bottom > * { max-width: 42px; }
.quick-booking { display: grid; gap: 28px; padding: 34px 40px 38px; }.quick-booking .dialog-heading { margin-bottom: 8px; }.quick-booking h2 { margin: 0; font-size: 29px; }.client-search-label { display: grid; gap: 11px; font-size: 17px; font-weight: 700; }.client-search { position: relative; display: grid; grid-template-columns: 1fr 48px; border-radius: 12px; background: #f2f5f5; }.client-search input { min-width: 0; height: 56px; padding: 0 18px; border: 1px solid transparent; border-radius: 12px 0 0 12px; background: transparent; color: var(--sepro-navy); font: inherit; font-size: 17px; outline: 0; }.client-search input:focus { border-color: var(--sepro-blue-dark); background: #fff; }.client-search > button { border: 0; border-radius: 0 12px 12px 0; background: transparent; color: var(--sepro-navy); cursor: pointer; }.client-search > button svg { width: 19px; }.client-search-menu { position: absolute; top: calc(100% + 3px); right: 0; left: 0; z-index: 4; display: grid; padding: 6px; border: 1px solid #d5e1e4; border-radius: 10px; background: #fff; box-shadow: 0 12px 25px rgba(24,42,61,.18); }.client-search-menu[hidden] { display: none; }.client-search-menu button { padding: 12px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--sepro-navy); text-align: left; font: inherit; font-size: 15px; cursor: pointer; }.client-search-menu button:hover { background: var(--sepro-blue-soft); }.client-search-menu svg { width: 16px; margin-right: 8px; vertical-align: -3px; }.quick-booking-divider { display: flex; align-items: center; gap: 14px; color: #6b7c83; font-size: 15px; }.quick-booking-divider::before, .quick-booking-divider::after { flex: 1; height: 1px; content: ""; background: #dbe4e6; }.quick-booking-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.quick-booking-actions button { min-height: 58px; border: 0; border-radius: 10px; background: #eaf0f1; color: var(--sepro-navy); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }.quick-booking-actions button:hover { background: var(--sepro-blue); }.quick-booking-actions svg { width: 20px; margin-right: 8px; vertical-align: -4px; }.client-dialog, .task-dialog { width: min(100% - 32px, 730px); max-height: calc(100vh - 32px); overflow: auto; padding: 0; border: 0; border-radius: 12px; color: var(--sepro-navy); box-shadow: 0 24px 70px rgba(24,42,61,.3); }.client-dialog::backdrop, .task-dialog::backdrop { background: rgba(24,42,61,.35); }.client-dialog form, .task-dialog form { display: grid; gap: 16px; padding: 32px 36px; }.client-dialog h2, .task-dialog h2 { margin: 0; font-size: 25px; }.client-dialog label, .task-dialog label { display: grid; gap: 7px; color: var(--sepro-navy); font-size: 14px; font-weight: 700; }.client-dialog input, .client-dialog select, .client-dialog textarea, .task-dialog input, .task-dialog select, .task-dialog textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 8px; background: #f2f5f5; color: var(--sepro-navy); font: inherit; }.client-dialog textarea, .task-dialog textarea { resize: vertical; }.client-extra-fields { display: grid; gap: 16px; }.task-custom-duration { display: grid; grid-template-columns: 90px 90px; gap: 12px; }.task-custom-duration label { display: grid; gap: 7px; }.task-schedule-fields[hidden] { display: none; }
@media (max-width: 800px) { .app-shell { display: block; }.app-sidebar { position: fixed; width: 250px; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 12px 0 28px rgba(24,42,61,.2); }.app-sidebar.is-open { transform: translateX(0); }.app-menu { display: inline-grid; }.calendar-toolbar { padding-inline: 12px; }.date-controls { margin-left: auto; }.calendar-view-actions { display: none; }.new-booking { font-size: 0; width: 36px; padding: 0; }.new-booking svg { margin: 0; }.today-button { display: none; }.app-topbar { padding: 0 12px; } }

.site-footer-dark {
  background: #210f5f;
  color: #c9c2ee;
  padding: 72px 0 32px;
}

.documents-page, .profile-page, .messages-page { max-width: 1180px; margin: 0 auto; padding: 32px; }.documents-toolbar { display: grid; grid-template-columns: minmax(250px, 1fr) 190px auto; align-items: center; gap: 12px; margin-bottom: 18px; }.documents-toolbar label { display: flex; align-items: center; gap: 8px; min-height: 39px; padding: 0 11px; border: 1px solid #dce5e8; border-radius: 7px; background: #fff; color: #6e828a; }.documents-toolbar svg { width: 16px; }.documents-toolbar input, .documents-toolbar select { min-width: 0; min-height: 39px; border: 0; background: transparent; color: var(--sepro-navy); font: inherit; outline: 0; }.documents-toolbar select { padding: 0 10px; border: 1px solid #dce5e8; border-radius: 7px; background: #fff; }.documents-toolbar > span { color: #607480; font-size: 12px; font-weight: 700; text-align: right; }.document-list { display: grid; border: 1px solid #dce5e8; border-radius: 8px; overflow: hidden; }.document-row { display: grid; grid-template-columns: 42px minmax(220px, 1fr) 170px 155px 38px; align-items: center; gap: 12px; min-height: 76px; padding: 10px 16px; border-bottom: 1px solid #e7edef; }.document-row:last-child { border-bottom: 0; }.document-row:hover { background: #f8fbfb; }.document-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 7px; background: var(--sepro-blue-soft); color: var(--sepro-blue-dark); }.document-icon svg { width: 18px; }.document-row div { display: grid; gap: 4px; }.document-row strong { font-size: 13px; }.document-row div span, .document-row time { color: #637780; font-size: 12px; }.document-type { width: max-content; padding: 5px 8px; border-radius: 5px; background: var(--sepro-green-soft); color: #50651a; font-size: 11px; font-weight: 800; }.document-row .icon-button { color: #bd254c; }.documents-empty, .messages-empty, .conversation-empty { display: grid; min-height: 270px; place-content: center; justify-items: center; gap: 9px; padding: 24px; color: #647982; text-align: center; }.documents-empty svg, .messages-empty > svg, .conversation-empty > svg { width: 38px; height: 38px; color: var(--sepro-blue-dark); }.documents-empty h3, .documents-empty p, .messages-empty h2, .messages-empty p, .conversation-empty h3, .conversation-empty p { margin: 0; }.documents-empty h3, .messages-empty h2, .conversation-empty h3 { color: var(--sepro-navy); font-size: 17px; }.documents-empty p, .messages-empty p, .conversation-empty p { font-size: 13px; }.document-dialog, .recipient-dialog { width: min(calc(100% - 32px), 560px); padding: 0; border: 0; border-radius: 12px; color: var(--sepro-navy); box-shadow: 0 24px 70px rgba(24,42,61,.3); }.document-dialog::backdrop, .recipient-dialog::backdrop, .patient-message-dialog::backdrop { background: rgba(24,42,61,.42); }.document-dialog form, .recipient-dialog form { display: grid; gap: 16px; padding: 28px; }.document-dialog label, .recipient-dialog label { display: grid; gap: 7px; color: var(--sepro-navy); font-size: 13px; font-weight: 700; }.document-dialog input, .document-dialog select, .document-dialog textarea, .recipient-dialog input { width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 7px; background: #f2f5f5; color: var(--sepro-navy); font: inherit; }.document-dialog textarea { resize: vertical; }

.profile-summary { display: flex; align-items: center; gap: 15px; margin-bottom: 21px; padding: 18px; border: 1px solid #dce5e8; border-radius: 8px; background: #f8fbfb; }.profile-large-avatar { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; background: var(--sepro-blue); color: var(--sepro-navy-deep); font-size: 16px; font-weight: 800; }.profile-summary div { display: grid; gap: 3px; }.profile-summary strong { font-size: 17px; }.profile-summary span { color: var(--sepro-blue-dark); font-size: 13px; font-weight: 700; }.profile-summary small { color: #667981; font-size: 12px; }.profile-form { display: grid; gap: 17px; }.profile-form section { padding: 20px; border: 1px solid #dce5e8; border-radius: 8px; }.profile-form h3 { margin: 0 0 16px; font-size: 15px; }.profile-fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }.profile-form label { display: grid; gap: 7px; font-size: 12px; font-weight: 700; }.profile-form input, .profile-form select { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid #dce5e8; border-radius: 7px; background: #fff; color: var(--sepro-navy); font: inherit; }.profile-form input:disabled, .profile-form select:disabled { border-color: transparent; background: #f2f5f5; color: #526a72; opacity: 1; }.profile-form-actions { display: flex; justify-content: end; gap: 9px; }.profile-form-actions[hidden] { display: none; }

.messages-page { max-width: none; min-height: calc(100vh - 66px); }.messages-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }.messages-heading h1 { margin: 0 0 11px; font-size: 25px; }.message-tabs, .patient-message-tabs { display: inline-flex; padding: 3px; border-radius: 7px; background: #eef2f3; }.message-tabs button, .patient-message-tabs button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: #5d7079; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }.message-tabs button.is-active, .patient-message-tabs button.is-active { background: #fff; color: var(--sepro-navy); box-shadow: 0 1px 3px rgba(24,42,61,.12); }.message-pane { min-height: calc(100vh - 205px); }.message-pane[hidden] { display: none; }.message-loader { display: grid; min-height: calc(100vh - 205px); place-items: center; }.message-loader[hidden] { display: none; }.message-loader img { width: 54px; height: 54px; object-fit: contain; animation: sepro-pulse .65s ease-in-out infinite alternate; }.message-list { display: grid; max-width: 900px; margin-top: 27px; border: 1px solid #dce5e8; border-radius: 8px; overflow: hidden; }.message-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px; align-items: center; min-height: 68px; padding: 10px 14px; border-bottom: 1px solid #e7edef; }.message-row:last-child { border-bottom: 0; }.message-avatar { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--sepro-green-soft); color: #52651d; font-size: 11px; font-weight: 800; }.message-row div { min-width: 0; }.message-row strong, .message-row p { display: block; margin: 0; }.message-row strong { font-size: 13px; }.message-row p { overflow: hidden; margin-top: 3px; color: #607480; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.message-row time { color: #7b8a90; font-size: 11px; }.recipient-dialog { width: min(calc(100% - 32px), 530px); }.message-recipient-search { position: relative; }.message-recipient-search input { padding-right: 38px; }.message-recipient-search > svg { position: absolute; right: 12px; bottom: 11px; width: 18px; color: #607480; }.recipient-results { display: grid; max-height: 255px; overflow: auto; border: 1px solid #dce5e8; border-radius: 7px; }.recipient-results:empty { display: none; }.recipient-results button { display: grid; gap: 4px; padding: 12px; border: 0; border-bottom: 1px solid #edf1f2; background: #fff; color: var(--sepro-navy); text-align: left; font: inherit; cursor: pointer; }.recipient-results button:hover { background: var(--sepro-blue-soft); }.recipient-results strong { font-size: 13px; }.recipient-results span, .recipient-results p { margin: 0; color: #647982; font-size: 12px; }.recipient-results p { padding: 14px; }

.patient-message-dialog { width: min(calc(100% - 32px), 900px); height: min(calc(100vh - 48px), 680px); padding: 0; border: 0; border-radius: 12px; color: var(--sepro-navy); box-shadow: 0 24px 70px rgba(24,42,61,.35); }.patient-message-shell { display: grid; grid-template-rows: auto auto 1fr; height: 100%; }.patient-message-shell > .dialog-heading { padding: 22px 26px 13px; border-bottom: 1px solid #e5ebed; }.patient-message-shell .dialog-heading h2 { margin: 0; font-size: 20px; }.patient-message-shell .dialog-heading span { display: block; margin-top: 4px; color: #647982; font-size: 12px; font-weight: 500; }.patient-message-tabs { width: auto; margin: 13px 26px; justify-self: start; }.patient-message-content { overflow: auto; padding: 8px 26px 26px; }.patient-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }.patient-detail-grid h3 { margin: 0 0 12px; font-size: 15px; }.patient-detail-grid dl { margin: 0; }.patient-detail-grid dl div { display: flex; justify-content: space-between; gap: 15px; padding: 9px 0; border-bottom: 1px solid #e4eaec; font-size: 13px; }.patient-detail-grid dt { color: #607480; }.patient-detail-grid dd { margin: 0; font-weight: 700; text-align: right; }.patient-detail-grid section > p { margin: 0; padding: 13px; border-radius: 7px; background: var(--sepro-blue-soft); font-size: 13px; line-height: 1.5; }.message-compose-form { display: grid; gap: 9px; max-width: 760px; margin: 24px auto 0; }.message-compose-form textarea { width: 100%; min-height: 120px; padding: 12px; border: 1px solid #b7e3e8; border-radius: 8px; color: var(--sepro-navy); font: inherit; resize: vertical; }.message-compose-form > div { display: flex; align-items: center; justify-content: space-between; }.message-compose-form span { color: #647982; font-size: 12px; }.patient-document-list { display: grid; gap: 8px; }.patient-document-list article { display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid #dce5e8; border-radius: 7px; }.patient-document-list svg { width: 19px; color: var(--sepro-blue-dark); }.patient-document-list div { display: grid; gap: 4px; }.patient-document-list strong { font-size: 13px; }.patient-document-list span { color: #647982; font-size: 12px; }@keyframes sepro-pulse { from { opacity: .42; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }

@media (max-width: 800px) { .documents-page, .profile-page, .messages-page { padding: 20px 14px; }.page-heading, .messages-heading { align-items: flex-start; flex-direction: column; }.documents-toolbar { grid-template-columns: 1fr; }.documents-toolbar > span { text-align: left; }.document-row { grid-template-columns: 40px minmax(0, 1fr) 34px; }.document-row .document-type, .document-row time { display: none; }.profile-fields-grid, .patient-detail-grid { grid-template-columns: 1fr; }.patient-message-dialog { width: calc(100% - 18px); height: calc(100vh - 34px); }.patient-message-shell > .dialog-heading { padding: 18px 18px 11px; }.patient-message-tabs { max-width: calc(100% - 36px); margin: 11px 18px; overflow: auto; }.patient-message-content { padding: 7px 18px 18px; }.message-row { grid-template-columns: 34px minmax(0, 1fr); }.message-row time { display: none; } }

.reports-page { min-height: calc(100vh - 66px); padding: 32px; background: #f7f9f9; }.reports-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; max-width: 1280px; margin: 0 auto 22px; }.reports-heading h1 { margin: 0 0 11px; font-size: 25px; }.report-tabs { display: inline-flex; padding: 3px; border-radius: 7px; background: #e9edef; }.report-tabs button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 5px; background: transparent; color: #5b6e76; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }.report-tabs button.is-active { background: #fff; color: var(--sepro-navy); box-shadow: 0 1px 3px rgba(24,42,61,.12); }.report-month-control { position: relative; display: inline-flex; align-items: center; overflow: visible; border-radius: 8px; background: #e9edef; }.report-month-control > .icon-button { width: 35px; height: 35px; border-radius: 7px; }.report-month-toggle { min-width: 130px; height: 35px; border: 0; border-inline: 1px solid #d5dfe1; background: #fff; color: var(--sepro-navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }.report-month-picker { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 280px; padding: 12px; border: 1px solid #cfdcde; border-radius: 10px; background: #fff; box-shadow: 0 14px 29px rgba(24,42,61,.18); }.report-month-picker[hidden] { display: none; }.report-year-control { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; min-height: 47px; overflow: hidden; border-radius: 7px; background: #edf2f3; }.report-year-control strong { color: var(--sepro-navy); font-size: 16px; text-align: center; }.report-month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 12px; }.report-month-grid button { min-height: 37px; border: 0; border-radius: 5px; background: transparent; color: var(--sepro-navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }.report-month-grid button:hover { background: var(--sepro-blue-soft); }.report-month-grid button.is-selected { background: var(--sepro-blue-dark); color: #fff; }.report-content { max-width: 1280px; margin: auto; }.report-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }.report-summary-grid article, .report-chart-card { padding: 17px; border: 1px solid #e4ebed; border-radius: 8px; background: #fff; }.report-summary-grid h2, .report-chart-card h2 { margin: 0; color: var(--sepro-navy); font-size: 15px; }.report-summary-grid dl { display: grid; gap: 7px; margin: 17px 0 0; font-size: 13px; }.report-summary-grid dl div { display: flex; justify-content: space-between; gap: 10px; }.report-summary-grid dt { color: #607480; }.report-summary-grid dd { margin: 0; font-weight: 800; }.report-chart-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-top: 14px; }.report-chart-card { min-height: 360px; }.report-chart-card header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.report-chart-card header p { margin: 8px 0 0; color: #61747c; font-size: 12px; }.report-chart-card header > svg { width: 16px; color: #607480; }.availability-chart { display: grid; grid-template-columns: 28px 1fr; gap: 10px; height: 225px; margin-top: 20px; }.chart-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 1px; color: #70818a; font-size: 10px; text-align: right; }.bar-chart { display: grid; grid-template-columns: repeat(14, 1fr); align-items: end; gap: 7px; height: 100%; padding: 0 5px; border-bottom: 1px solid #cfdadd; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 55px, #e8eeee 56px); }.bar-chart span { height: var(--report-height); min-height: 11px; border-radius: 3px 3px 0 0; background: var(--sepro-green); }.report-chart-card footer { display: flex; justify-content: center; gap: 16px; margin-top: 15px; color: #687b82; font-size: 11px; }.report-chart-card footer span { display: inline-flex; align-items: center; gap: 5px; }.report-chart-card footer i { width: 17px; height: 8px; border-radius: 2px; background: var(--sepro-green); }.report-chart-card footer span:last-child i { background: var(--sepro-blue-dark); }.trend-empty { display: grid; min-height: 250px; place-content: center; justify-items: center; gap: 9px; color: #647982; text-align: center; }.trend-empty svg { width: 35px; height: 35px; color: #a6b8bd; }.trend-empty strong { color: var(--sepro-navy); font-size: 13px; }.trend-empty span { max-width: 260px; font-size: 12px; }.report-library { display: grid; justify-items: start; gap: 16px; }.report-library h2 { margin: 0; font-size: 17px; }.report-card-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 13px; }.report-template-card { display: grid; align-content: space-between; justify-items: start; gap: 24px; width: 260px; min-height: 125px; padding: 18px; border: 1px solid #e3eaec; border-radius: 8px; background: #fff; color: var(--sepro-navy); text-align: left; font: inherit; cursor: pointer; }.report-template-card svg { width: 22px; color: var(--sepro-blue-dark); }.report-template-card strong { font-size: 13px; }.report-template-card span { color: #637780; font-size: 12px; }.report-template-card.is-create { border: 1px dashed var(--sepro-blue-dark); color: var(--sepro-blue-dark); }.report-template-card.is-create span { color: var(--sepro-blue-dark); }.report-template-card:hover { background: var(--sepro-blue-soft); }

.sidebar-theme-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 38px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #cfdbde; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }.sidebar-theme-toggle:hover { background: rgba(255,255,255,.09); color: #fff; }.sidebar-theme-toggle svg { width: 17px; height: 17px; }.updates-page { max-width: 960px; margin: 0 auto; padding: 46px 32px 80px; }.updates-hero { padding-bottom: 30px; border-bottom: 1px solid #dce6e8; }.updates-hero > span, .updates-date { color: var(--sepro-blue-dark); font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }.updates-hero h1 { margin: 8px 0 11px; font-size: 34px; }.updates-hero p { max-width: 690px; margin: 0; color: #607480; font-size: 15px; line-height: 1.6; }.updates-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }.updates-toc a { padding: 7px 10px; border-radius: 6px; background: #edf4f5; color: var(--sepro-blue-dark); font-size: 12px; font-weight: 700; }.updates-section { padding: 36px 0; border-bottom: 1px solid #e2eaec; }.updates-section h2 { margin: 8px 0 11px; font-size: 24px; }.updates-section > p { margin: 0; color: #50656e; font-size: 14px; line-height: 1.7; }.updates-callout { display: flex; gap: 12px; margin-top: 20px; padding: 15px; border-left: 4px solid var(--sepro-green); border-radius: 6px; background: var(--sepro-green-soft); }.updates-callout.is-blue { border-color: var(--sepro-blue-dark); background: var(--sepro-blue-soft); }.updates-callout svg { width: 21px; color: var(--sepro-blue-dark); }.updates-callout strong, .updates-callout p { display: block; margin: 0; }.updates-callout strong { font-size: 13px; }.updates-callout p { margin-top: 4px; color: #526a72; font-size: 13px; line-height: 1.5; }.updates-media { margin-top: 22px; overflow: hidden; border: 1px solid #cadde0; border-radius: 9px; background: #f5fbfc; }.updates-media-top { display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 0 14px; border-bottom: 1px solid #d7e5e7; background: var(--sepro-navy); color: #fff; font-size: 13px; font-weight: 700; }.updates-media-top svg { width: 17px; color: var(--sepro-green); }.updates-calendar-preview { display: grid; grid-template-columns: 55px 1fr; gap: 0; padding: 14px; font-size: 12px; }.updates-calendar-preview > span { padding: 8px 8px 8px 0; color: #68808a; }.updates-calendar-preview > div { min-height: 39px; margin-bottom: 2px; border-radius: 4px; background: #fff; }.updates-calendar-preview .is-booked { padding: 7px 10px; border-left: 4px solid var(--sepro-blue); background: #e9f9fb; color: var(--sepro-navy); font-weight: 700; }.updates-calendar-preview .secondary { border-color: var(--sepro-green); background: var(--sepro-green-soft); }.updates-calendar-preview small { color: #57727b; font-size: 10px; font-weight: 600; }.updates-calendar-preview .is-break { padding: 10px; border-left: 4px solid #9baeb4; background: repeating-linear-gradient(-45deg, #f1f5f5, #f1f5f5 5px, #e7eeee 5px, #e7eeee 8px); color: #62777f; }.updates-steps { display: grid; gap: 8px; margin: 20px 0 0; padding-left: 20px; color: #50656e; font-size: 13px; line-height: 1.5; }.updates-two-columns, .updates-roadmap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }.updates-two-columns article, .updates-roadmap article { padding: 18px; border: 1px solid #dce6e8; border-radius: 8px; background: #fff; }.updates-two-columns svg { width: 22px; color: var(--sepro-blue-dark); }.updates-two-columns h3, .updates-roadmap h3 { margin: 12px 0 6px; font-size: 15px; }.updates-two-columns p, .updates-roadmap p { margin: 0; color: #607780; font-size: 13px; line-height: 1.55; }.updates-roadmap span { color: var(--sepro-blue-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; }

.dark-theme .app-page, .dark-theme .app-main, .dark-theme .reports-page { background: #101c28; color: #e5eef0; }.dark-theme .app-topbar { border-color: #293c49; background: #152431; }.dark-theme .app-topbar h1, .dark-theme .back-link, .dark-theme .page-heading h2, .dark-theme .reports-heading h1, .dark-theme .messages-heading h1, .dark-theme .updates-hero h1, .dark-theme .updates-section h2 { color: #f4f8f9; }.dark-theme .app-main, .dark-theme .calendar-wrap, .dark-theme .calendar-corner, .dark-theme .calendar-day { background: #101c28; }.dark-theme .calendar-day, .dark-theme .page-heading p, .dark-theme .updates-hero p, .dark-theme .updates-section > p { color: #aebfc5; }.dark-theme .calendar-day strong { color: #edf5f6; }.dark-theme .app-sidebar { background: #152b3d; }.dark-theme .top-popover, .dark-theme .toolbar-menu, .dark-theme .nav-submenu:not([hidden]), .dark-theme .document-row, .dark-theme .profile-form section, .dark-theme .profile-summary, .dark-theme .report-summary-grid article, .dark-theme .report-chart-card, .dark-theme .report-template-card, .dark-theme .updates-two-columns article, .dark-theme .updates-roadmap article, .dark-theme .updates-media { border-color: #304653; background: #182a37; color: #e5eef0; }.dark-theme .document-row:hover, .dark-theme .report-template-card:hover { background: #203847; }.dark-theme input, .dark-theme select, .dark-theme textarea, .dark-theme .profile-form input:disabled, .dark-theme .profile-form select:disabled { border-color: #3a5360 !important; background: #13232f !important; color: #e6f0f2 !important; }.dark-theme .today-button, .dark-theme .view-button, .dark-theme .dialog-cancel { background: #263b47; color: #e4eef0; }.dark-theme .message-tabs, .dark-theme .report-tabs, .dark-theme .report-month-control { background: #263a47; }.dark-theme .message-tabs button, .dark-theme .report-tabs button, .dark-theme .report-month-grid button, .dark-theme .report-month-toggle { color: #b8c8cd; }.dark-theme .message-tabs button.is-active, .dark-theme .report-tabs button.is-active, .dark-theme .report-month-toggle, .dark-theme .report-month-picker { background: #1b303d; color: #f1f6f7; }.dark-theme .updates-hero, .dark-theme .updates-section { border-color: #304653; }.dark-theme .updates-toc a { background: #203b49; color: #72d4dc; }.dark-theme .updates-media-top { background: #0e1b25; }.dark-theme .updates-calendar-preview { background: #152734; }.dark-theme .updates-calendar-preview > div { background: #1d3340; }.dark-theme .updates-two-columns p, .dark-theme .updates-roadmap p, .dark-theme .updates-callout p { color: #b4c4c9; }.dark-theme .sidebar-theme-toggle { color: #cfdbde; }.dark-theme .sidebar-theme-toggle svg { color: var(--sepro-green); }

@media (max-width: 800px) { .reports-page { padding: 20px 14px; }.reports-heading { align-items: flex-start; flex-direction: column; }.report-summary-grid, .report-chart-grid { grid-template-columns: 1fr; }.report-month-control { align-self: flex-end; }.report-chart-card { min-height: 320px; } }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

.footer-grid h4 {
  margin: 0 0 12px;
  font-size: 18px;
  color: #fff;
}

.footer-grid a {
  display: block;
  margin: 0 0 10px;
  font-size: 15px;
  color: #bdb6e3;
}

.footer-bottom {
  margin-top: 24px;
  border-top: 1px solid #39277f;
  padding-top: 20px;
}

.footer-brand {
  color: #fff;
}

.footer-brand .brand-logo {
  height: 38px;
}

/* Settings administration */
.settings-page { max-width: 1280px; margin: 0 auto; padding: 32px; }.settings-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }.settings-heading > div > span, .settings-panel header > div > span, .member-editor-heading span { color: var(--sepro-blue-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; }.settings-heading h2 { margin: 5px 0 7px; font-size: 27px; }.settings-heading p, .settings-panel header p { max-width: 650px; margin: 0; color: #607480; font-size: 14px; line-height: 1.55; }.settings-role-switch { display: grid; gap: 6px; min-width: 245px; color: #607480; font-size: 11px; font-weight: 800; text-transform: uppercase; }.settings-role-switch select { min-height: 39px; padding: 0 10px; border: 1px solid #d5e2e5; border-radius: 7px; background: #fff; color: var(--sepro-navy); font: inherit; font-size: 12px; font-weight: 700; text-transform: none; }.settings-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }.settings-tabs { position: sticky; top: 22px; display: grid; gap: 4px; padding: 7px; border: 1px solid #dce6e8; border-radius: 8px; background: #f8fbfb; }.settings-tabs button { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #60747c; font: inherit; font-size: 13px; font-weight: 700; text-align: left; cursor: pointer; }.settings-tabs button:hover { color: var(--sepro-navy); background: #eef6f7; }.settings-tabs button.is-active { background: var(--sepro-navy); color: #fff; }.settings-tabs svg { width: 18px; }.settings-content { min-width: 0; }.settings-panel { padding: 25px; border: 1px solid #dce6e8; border-radius: 8px; background: #fff; }.settings-panel[hidden] { display: none; }.settings-panel > header { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-bottom: 21px; border-bottom: 1px solid #e4ecee; }.settings-panel h3 { margin: 5px 0 7px; font-size: 21px; }.settings-form, .organization-form { display: grid; gap: 22px; padding-top: 23px; }.settings-section-title { display: flex; gap: 12px; padding: 15px; border-left: 4px solid var(--sepro-green); border-radius: 6px; background: var(--sepro-green-soft); }.settings-section-title > svg { width: 21px; color: var(--sepro-blue-dark); }.settings-section-title h4 { margin: 0; font-size: 14px; }.settings-section-title p { margin: 4px 0 0; color: #50656e; font-size: 12px; }.brand-color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.brand-color-grid label { display: grid; grid-template-columns: auto 36px; align-items: center; gap: 9px; padding: 11px; border: 1px solid #dbe5e7; border-radius: 7px; font-size: 12px; font-weight: 700; }.brand-color-grid output { grid-column: 1; color: #667a81; font-size: 11px; text-transform: uppercase; }.brand-color-grid input { grid-row: 1 / span 2; grid-column: 2; width: 34px; height: 34px; padding: 2px; border: 1px solid #cfdde0; border-radius: 6px; background: #fff; cursor: pointer; }.settings-fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 18px; }.settings-fields-grid label { display: grid; gap: 7px; color: var(--sepro-navy); font-size: 12px; font-weight: 700; }.settings-fields-grid input, .settings-fields-grid select, .settings-fields-grid textarea { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid #d5e2e5; border-radius: 7px; background: #fff; color: var(--sepro-navy); font: inherit; }.settings-fields-grid textarea { resize: vertical; }.settings-full-field { grid-column: 1 / -1; }.settings-form-actions { display: flex; align-items: center; justify-content: end; gap: 16px; padding-top: 4px; }.settings-form-actions p { flex: 1; margin: 0; color: #2d7655; font-size: 12px; font-weight: 700; }.settings-form-actions .dialog-submit { display: inline-flex; align-items: center; gap: 7px; }.settings-form-actions svg { width: 16px; }.access-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin: 21px 0; }.access-overview article { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid #dce6e8; border-radius: 7px; background: #f8fbfb; }.access-overview i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 6px; background: var(--sepro-blue-soft); color: var(--sepro-blue-dark); }.access-overview i svg { width: 18px; }.access-overview div { display: grid; gap: 1px; }.access-overview strong { font-size: 18px; }.access-overview span { color: #647982; font-size: 11px; font-weight: 700; }.member-list { display: grid; border: 1px solid #dce6e8; border-radius: 8px; overflow: hidden; }.member-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 35px; align-items: center; gap: 12px; min-height: 66px; padding: 10px 13px; border-bottom: 1px solid #e5edef; }.member-row:last-child { border-bottom: 0; }.member-avatar { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--sepro-blue-soft); color: var(--sepro-blue-dark); font-size: 11px; font-weight: 800; }.member-row div { min-width: 0; }.member-row strong, .member-row span { display: block; }.member-row strong { font-size: 13px; }.member-row div span { overflow: hidden; margin-top: 3px; color: #657982; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.member-status { padding: 4px 7px; border-radius: 5px; background: #e4f7eb; color: #26704e; font-size: 11px; font-weight: 800; }.member-status.invited { background: #fff3d8; color: #8a651c; }.member-editor { display: grid; gap: 20px; margin-top: 20px; padding: 21px; border: 1px solid #bcdde2; border-radius: 8px; background: #f7fcfd; }.member-editor[hidden] { display: none; }.member-editor-heading { display: flex; align-items: start; justify-content: space-between; }.member-editor-heading h4 { margin: 4px 0 0; font-size: 18px; }.permission-matrix { margin: 0; padding: 0; border: 0; }.permission-matrix legend { color: var(--sepro-navy); font-size: 14px; font-weight: 800; }.permission-matrix > p { margin: 5px 0 12px; color: #637780; font-size: 12px; }.permission-matrix > div { display: grid; border: 1px solid #d6e3e6; border-radius: 7px; overflow: hidden; }.permission-row { display: grid; grid-template-columns: minmax(130px, 1fr) 110px 110px; align-items: center; min-height: 39px; padding: 0 11px; border-bottom: 1px solid #e4ecee; font-size: 12px; }.permission-row:last-child { border-bottom: 0; }.permission-row label { display: flex; align-items: center; gap: 6px; color: #5c7078; cursor: pointer; }.permission-row input { width: 16px; height: 16px; accent-color: var(--sepro-blue-dark); }.organization-cover { display: grid; min-height: 144px; place-content: center; gap: 7px; border: 2px dashed #d8e5e7; border-radius: 8px; color: #60747c; font-size: 12px; font-weight: 700; text-align: center; }.organization-cover svg { width: 21px; margin: auto; }.organization-identity { display: flex; align-items: center; gap: 13px; }.organization-logo { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 8px; background: #a66749; color: #fff; }.organization-logo svg { width: 25px; }.organization-identity div { display: grid; gap: 4px; }.organization-identity strong { font-size: 16px; }.organization-identity span { color: #61757d; font-size: 12px; }.organization-directory { margin-top: 24px; }.organization-directory h4 { margin: 0 0 11px; font-size: 14px; }.organization-directory > div { display: grid; border: 1px solid #dce6e8; border-radius: 8px; overflow: hidden; }.directory-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 18px; align-items: center; gap: 11px; padding: 11px; border: 0; border-bottom: 1px solid #e6edef; background: #fff; color: var(--sepro-navy); text-align: left; cursor: pointer; }.directory-row:last-child { border-bottom: 0; }.directory-row:hover { background: #f4fbfc; }.directory-row .organization-logo { width: 36px; height: 36px; border-radius: 6px; }.directory-row .organization-logo svg { width: 18px; }.directory-row > span:nth-child(2) { min-width: 0; }.directory-row strong, .directory-row small { display: block; }.directory-row strong { font-size: 13px; }.directory-row small { overflow: hidden; margin-top: 3px; color: #647982; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.directory-row em { padding: 4px 7px; border-radius: 5px; background: #e4f7eb; color: #26704e; font-size: 10px; font-style: normal; font-weight: 800; }.directory-row em.pending { background: #fff3d8; color: #8a651c; }.directory-row > svg { width: 17px; color: #71838a; }

.dark-theme .settings-page, .dark-theme .settings-panel { background: #101c28; color: #e5eef0; }.dark-theme .settings-heading h2, .dark-theme .settings-panel h3, .dark-theme .settings-section-title h4, .dark-theme .member-editor-heading h4, .dark-theme .permission-matrix legend, .dark-theme .settings-fields-grid label, .dark-theme .organization-identity strong { color: #f0f6f7; }.dark-theme .settings-heading p, .dark-theme .settings-panel header p, .dark-theme .settings-section-title p, .dark-theme .permission-matrix > p, .dark-theme .organization-identity span { color: #aebfc5; }.dark-theme .settings-tabs, .dark-theme .settings-panel, .dark-theme .member-list, .dark-theme .permission-matrix > div, .dark-theme .organization-directory > div { border-color: #304653; background: #182a37; }.dark-theme .settings-tabs button { color: #bbcbcf; }.dark-theme .settings-tabs button.is-active { background: #315265; }.dark-theme .settings-role-switch select, .dark-theme .settings-fields-grid input, .dark-theme .settings-fields-grid select, .dark-theme .settings-fields-grid textarea, .dark-theme .directory-row { border-color: #3a5360; background: #13232f; color: #e6f0f2; }.dark-theme .settings-section-title, .dark-theme .access-overview article, .dark-theme .member-editor { border-color: #304b57; background: #18323d; }.dark-theme .member-row, .dark-theme .permission-row { border-color: #304653; }.dark-theme .member-row strong, .dark-theme .directory-row strong, .dark-theme .permission-row strong { color: #e6f0f2; }.dark-theme .organization-cover { border-color: #3a5360; color: #afc2c7; }.dark-theme .directory-row:hover { background: #203a46; }

@media (max-width: 800px) { .settings-page { padding: 20px 14px; }.settings-heading { align-items: stretch; flex-direction: column; }.settings-role-switch { min-width: 0; }.settings-layout { grid-template-columns: 1fr; gap: 16px; }.settings-tabs { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }.settings-tabs button { justify-content: center; min-height: 48px; padding: 0 5px; font-size: 0; }.settings-tabs button svg { width: 20px; }.settings-panel { padding: 18px; }.settings-panel > header { align-items: stretch; flex-direction: column; }.brand-color-grid, .access-overview, .settings-fields-grid { grid-template-columns: 1fr; }.settings-full-field { grid-column: auto; }.member-row { grid-template-columns: 38px minmax(0, 1fr) 34px; }.member-status { display: none; }.permission-row { grid-template-columns: 1fr 1fr; gap: 5px; padding: 9px 11px; }.permission-row strong { grid-column: 1 / -1; }.directory-row { grid-template-columns: 42px minmax(0, 1fr) 18px; }.directory-row em { display: none; }.settings-form-actions { align-items: stretch; flex-direction: column; }.settings-form-actions .dialog-submit { justify-content: center; }.organization-cover { min-height: 118px; } }

.footer-brand .brand-name {
  color: #fff;
}

.footer-bottom p {
  margin: 10px 0 0;
  font-size: 14px;
  color: #a39acb;
}

.patient-allergy-field {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.patient-allergy-field legend {
  padding: 0;
  color: #526a72;
  font-size: 11px;
  font-weight: 800;
}

/* Dark doctor calendar: unavailable periods remain visibly distinct without bright surfaces. */
.dark-theme .calendar-wrap,
.dark-theme .day-column,
.dark-theme .time-labels {
  border-color: #2b404c;
}

.dark-theme .day-column {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 44px, #203541 45px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 179px, #2a424e 180px);
}

.dark-theme .closed-column,
.dark-theme .day-column:not(.closed-column)::before,
.dark-theme .day-column:not(.closed-column)::after,
.dark-theme .closed-column::before,
.dark-theme .calendar-unavailable,
.dark-theme .calendar-closed-overlay {
  background-color: #162733;
  background-image:
    repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(169, 196, 204, 0.08) 4px, rgba(169, 196, 204, 0.08) 7px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 44px, #203541 45px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 179px, #2a424e 180px);
}

.dark-theme .calendar-break {
  border-left-color: #65828a;
  background: repeating-linear-gradient(-45deg, #1a2d38, #1a2d38 5px, #203640 5px, #203640 8px);
  color: #c0d0d4;
}

.dark-theme .calendar-break:hover {
  background: #203d49;
}

.dark-theme .help-chat {
  border-color: #304653;
  background: #152431;
  color: #e5eef0;
}

.dark-theme .help-chat header,
.dark-theme .help-chat-form {
  border-color: #304653;
  background: #182a37;
}

.dark-theme .help-chat header strong,
.dark-theme .help-chat .icon-button,
.dark-theme .help-chat-content h2 {
  color: #eef6f7;
}

.dark-theme .help-chat-content,
.dark-theme .help-chat-content p {
  color: #b7c8cd;
}

.dark-theme .help-chat-content button {
  border-color: #2f5762;
  background: #1d3a46;
  color: #67d9e4;
}

.dark-theme .help-chat-content button:hover {
  background: #264b58;
}

.dark-theme .help-chat-form textarea {
  border-color: #34515c;
  background: #101f2a;
  color: #e6f0f2;
}

.dark-theme .help-chat-form textarea::placeholder {
  color: #91a8af;
}

/* Keep account links accessible when the compact doctor sidebar is collapsed. */
.sidebar-collapsed .nav-expandable:has(.nav-submenu:not([hidden])) {
  z-index: 60;
  overflow: visible;
}

.sidebar-collapsed .nav-submenu:not([hidden]) {
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  z-index: 70;
  width: 210px;
  min-width: 210px;
  overflow: visible;
}

.sidebar-flyout { position: fixed; z-index: 1000; border: 1px solid #cfe1e5; border-radius: 8px; background: #fff; box-shadow: 0 14px 30px rgba(24,42,61,.24); }.sidebar-label-flyout { width: max-content; max-width: 220px; padding: 8px 10px; color: var(--sepro-navy); font-size: 12px; font-weight: 700; }.sidebar-accounts-flyout { display: grid; width: 205px; padding: 7px; gap: 3px; }.sidebar-accounts-flyout strong { padding: 7px 8px 5px; color: #607480; font-size: 11px; text-transform: uppercase; }.sidebar-accounts-flyout a { min-height: 38px; padding: 0 9px; border-radius: 6px; color: var(--sepro-navy); font-size: 13px; font-weight: 700; text-decoration: none; display: flex; align-items: center; }.sidebar-accounts-flyout a:hover, .sidebar-accounts-flyout a.is-active { background: var(--sepro-blue-soft); color: var(--sepro-blue-dark); }.dark-theme .sidebar-flyout { border-color: #3a5360; background: #182a37; color: #e6f0f2; }.dark-theme .sidebar-accounts-flyout strong { color: #aec0c5; }.dark-theme .sidebar-accounts-flyout a { color: #e6f0f2; }.dark-theme .sidebar-accounts-flyout a:hover, .dark-theme .sidebar-accounts-flyout a.is-active { background: #294b58; color: #78dce5; }

/* Prescriptions and insurance quotes */
.prescriptions-page { max-width: 1180px; margin: 0 auto; padding: 32px; }.prescriptions-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }.prescriptions-heading > div > span { color: var(--sepro-blue-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; }.prescriptions-heading h2 { margin: 5px 0 7px; font-size: 27px; }.prescriptions-heading p { max-width: 650px; margin: 0; color: #607480; font-size: 14px; line-height: 1.55; }.prescription-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }.prescription-summary article { display: grid; gap: 5px; min-height: 112px; padding: 16px; border: 1px solid #dce6e8; border-radius: 8px; background: #fff; }.prescription-summary span, .prescription-summary small { color: #647982; font-size: 12px; font-weight: 600; }.prescription-summary strong { color: var(--sepro-navy); font-size: 23px; }.prescription-tabs { display: inline-flex; gap: 3px; margin-bottom: 16px; padding: 3px; border-radius: 8px; background: #e9f0f1; }.prescription-tabs button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 6px; background: transparent; color: #587079; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }.prescription-tabs button.is-active { background: #fff; color: var(--sepro-navy); box-shadow: 0 1px 3px rgba(24,42,61,.12); }.prescription-tools { display: grid; grid-template-columns: minmax(250px, 1fr) 180px; gap: 12px; margin-bottom: 14px; }.prescription-tools label { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 11px; border: 1px solid #dce5e8; border-radius: 7px; background: #fff; color: #6c8189; }.prescription-tools label svg { width: 17px; }.prescription-tools input, .prescription-tools select { min-width: 0; min-height: 38px; border: 0; background: transparent; color: var(--sepro-navy); font: inherit; outline: 0; }.prescription-tools select { padding: 0 9px; border: 1px solid #dce5e8; border-radius: 7px; background: #fff; font-size: 13px; }.prescription-list { overflow: hidden; border: 1px solid #dce5e8; border-radius: 8px; background: #fff; }.prescription-list > article { display: grid; grid-template-columns: 39px minmax(200px, 1fr) max-content max-content; gap: 13px; align-items: center; min-height: 78px; padding: 11px 14px; border-bottom: 1px solid #e7edef; }.prescription-list > article:last-child { border-bottom: 0; }.prescription-list > article:hover { background: #f8fbfb; }.prescription-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 7px; background: var(--sepro-blue-soft); color: var(--sepro-blue-dark); }.prescription-icon.is-quote { background: var(--sepro-green-soft); color: #557019; }.prescription-icon svg { width: 19px; }.prescription-main { display: grid; min-width: 0; gap: 3px; }.prescription-main strong { font-size: 13px; }.prescription-main span, .prescription-main small { overflow: hidden; color: #627780; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.prescription-main small { color: #8a9aa0; font-size: 11px; }.prescription-status { min-width: 94px; padding: 5px 8px; border-radius: 5px; font-size: 11px; font-weight: 800; text-align: center; }.prescription-status.is-pending { background: #fff3d7; color: #8e5e10; }.prescription-status.is-sent { background: #e3f6f8; color: #267485; }.prescription-status.is-review { background: #edf0ff; color: #5865a3; }.prescription-status.is-complete { background: var(--sepro-green-soft); color: #50651a; }.prescription-actions { display: flex; justify-content: end; gap: 6px; }.prescription-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 10px; border: 1px solid #bfdee3; border-radius: 7px; background: #f4fbfc; color: var(--sepro-blue-dark); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }.prescription-actions button:hover { border-color: var(--sepro-blue-dark); background: var(--sepro-blue-soft); }.prescription-actions button:disabled { opacity: .7; cursor: default; }.prescription-actions button svg { width: 15px; }.prescription-dialog { width: min(calc(100% - 32px), 650px); padding: 0; border: 0; border-radius: 12px; color: var(--sepro-navy); box-shadow: 0 24px 70px rgba(24,42,61,.3); }.prescription-dialog::backdrop { background: rgba(24,42,61,.4); }.prescription-dialog form { display: grid; gap: 19px; padding: 27px; }.prescription-dialog .dialog-heading span { color: var(--sepro-blue-dark); font-size: 12px; font-weight: 800; }.prescription-dialog .dialog-heading h2 { margin: 4px 0 0; font-size: 22px; }.prescription-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.prescription-form-grid label { display: grid; gap: 7px; color: var(--sepro-navy); font-size: 12px; font-weight: 700; }.prescription-form-grid select, .prescription-form-grid textarea { width: 100%; min-height: 40px; padding: 10px; border: 1px solid #d7e5e8; border-radius: 7px; background: #fff; color: var(--sepro-navy); font: inherit; resize: vertical; }.prescription-full-field { grid-column: 1 / -1; }

.dark-theme .prescriptions-page { color: #e5eef0; }.dark-theme .prescriptions-heading h2, .dark-theme .prescription-summary strong { color: #f0f6f7; }.dark-theme .prescriptions-heading p, .dark-theme .prescription-summary span, .dark-theme .prescription-summary small, .dark-theme .prescription-main span, .dark-theme .prescription-main small { color: #aec0c5; }.dark-theme .prescription-summary article, .dark-theme .prescription-list { border-color: #304653; background: #182a37; }.dark-theme .prescription-tabs { background: #263a47; }.dark-theme .prescription-tabs button { color: #b8c8cd; }.dark-theme .prescription-tabs button.is-active { background: #315265; color: #f0f6f7; }.dark-theme .prescription-tools label, .dark-theme .prescription-tools select { border-color: #3a5360; background: #13232f; color: #e6f0f2; }.dark-theme .prescription-list > article { border-color: #304653; }.dark-theme .prescription-list > article:hover { background: #203847; }.dark-theme .prescription-main strong, .dark-theme .prescription-form-grid label, .dark-theme .prescription-dialog { color: #e6f0f2; }.dark-theme .prescription-actions button { border-color: #315968; background: #1b3541; color: #74d8e1; }.dark-theme .prescription-dialog { background: #182a37; }.dark-theme .prescription-form-grid select, .dark-theme .prescription-form-grid textarea { border-color: #3a5360; background: #13232f; color: #e6f0f2; }

@media (max-width: 800px) { .prescriptions-page { padding: 20px 14px; }.prescriptions-heading { align-items: stretch; flex-direction: column; }.prescription-summary { grid-template-columns: 1fr; }.prescription-tools { grid-template-columns: 1fr; }.prescription-list > article { grid-template-columns: 39px minmax(0, 1fr) max-content; }.prescription-list > article .prescription-status { display: none; }.prescription-actions { grid-column: 2 / -1; justify-content: start; }.prescription-form-grid { grid-template-columns: 1fr; }.prescription-full-field { grid-column: auto; } }

.prescription-preview-dialog { width: min(calc(100% - 32px), 940px); height: min(calc(100vh - 32px), 900px); padding: 0; border: 0; border-radius: 10px; background: #edf2f3; color: var(--sepro-navy); box-shadow: 0 28px 80px rgba(24,42,61,.38); }.prescription-preview-dialog::backdrop { background: rgba(13,29,40,.62); }.prescription-preview-toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding: 0 16px; border-bottom: 1px solid #d6e1e3; background: #fff; }.prescription-preview-toolbar > div { display: flex; align-items: center; gap: 6px; }.prescription-preview-toolbar > div:first-child { display: grid; gap: 2px; }.prescription-preview-toolbar span { color: #647982; font-size: 11px; font-weight: 700; text-transform: uppercase; }.prescription-preview-toolbar strong { font-size: 14px; }.prescription-preview-stage { height: calc(100% - 62px); overflow: auto; padding: 28px; }.pdf-document { box-sizing: border-box; width: min(100%, 720px); min-height: 970px; margin: 0 auto; padding: 56px 60px; border-top: 7px solid var(--sepro-blue); background: #fff; box-shadow: 0 4px 16px rgba(24,42,61,.16); }.pdf-document-header { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: 1px solid #d8e5e8; }.pdf-brand { display: flex; align-items: center; gap: 10px; }.pdf-brand img { width: 38px; height: 38px; object-fit: contain; }.pdf-brand div, .pdf-document-meta, .pdf-patient-grid div, .pdf-signature div { display: grid; gap: 4px; }.pdf-brand strong { font-size: 18px; }.pdf-brand span, .pdf-document-meta span, .pdf-patient-grid span, .pdf-patient-grid small, .pdf-note, .pdf-signature small, .pdf-document-footer { color: #607480; font-size: 11px; }.pdf-document-meta { text-align: right; }.pdf-document-title { margin: 34px 0 24px; }.pdf-document-title > span { color: var(--sepro-blue-dark); font-size: 11px; font-weight: 800; text-transform: uppercase; }.pdf-document-title h1 { margin: 6px 0; font-size: 28px; }.pdf-patient-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 15px; border: 1px solid #d8e5e8; background: #f7fbfb; }.pdf-patient-grid strong { font-size: 14px; }.pdf-rx { display: grid; grid-template-columns: 54px 1fr; gap: 16px; margin-top: 28px; }.pdf-rx > span { color: var(--sepro-blue-dark); font-family: Georgia,serif; font-size: 42px; font-style: italic; }.pdf-rx strong { font-size: 15px; }.pdf-rx p { color: #536d76; line-height: 1.6; }.pdf-lines { margin-top: 28px; border: 1px solid #d8e5e8; }.pdf-line { display: grid; grid-template-columns: 1fr 60px 125px; padding: 13px; border-bottom: 1px solid #e4ecee; font-size: 13px; }.pdf-line:last-child { border-bottom: 0; }.pdf-line-heading { background: #edf7f8; color: #40616a; font-size: 11px; font-weight: 800; }.pdf-total { display: flex; align-items: center; justify-content: space-between; margin: 15px 0 22px; padding: 14px; background: #eaf9fb; }.pdf-total strong { font-size: 18px; }.pdf-note { line-height: 1.6; }.pdf-signature { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: 70px; }.pdf-signature-mark { display: grid; justify-items: center; gap: 5px; color: var(--sepro-blue-dark); font-size: 10px; }.pdf-signature-mark svg { width: 30px; }.pdf-document-footer { display: flex; justify-content: space-between; gap: 15px; margin-top: 60px; padding-top: 12px; border-top: 1px solid #d8e5e8; }

@media (max-width: 800px) { .prescription-preview-dialog { width: calc(100% - 14px); height: calc(100vh - 18px); }.prescription-preview-stage { padding: 14px; }.pdf-document { min-height: 780px; padding: 34px 25px; }.pdf-document-header, .pdf-signature, .pdf-document-footer { align-items: start; flex-direction: column; }.pdf-patient-grid { grid-template-columns: 1fr; }.pdf-line { grid-template-columns: 1fr 42px 88px; gap: 8px; padding: 10px; font-size: 11px; } }

.patient-checkbox-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.patient-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid #d8e5e7;
  border-radius: 6px;
  background: #fff;
  color: #526a72;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.patient-checkbox-group input {
  width: 15px;
  height: 15px;
  accent-color: var(--sepro-blue-dark);
}

.patient-sidebar-bottom button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #c4d6d9;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.patient-sidebar-bottom button:hover {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.patient-sidebar-bottom button svg {
  width: 17px;
}

@media (max-width: 1250px) {
  .hero-content p,
  .section-head p,
  .ai-head p,
  .segment-content li,
  .quote-card p,
  .faq-list summary,
  .faq-list p,
  .footer-grid a {
    font-size: clamp(14px, 1.2vw, 16px);
  }

  .hero-content h1,
  .trusted h2,
  .section-head h2,
  .overview-card h3,
  .ai-head h2,
  .feature-left h2,
  .segment-content h3,
  .profession-tags h2,
  .testimonials h2,
  .faq h2,
  .cta-final h2,
  .footer-grid h4 {
    font-size: clamp(26px, 2.9vw, 42px);
  }

  .ai-kicker {
    font-size: clamp(16px, 1.6vw, 18px);
  }
}

.sidebar-collapsed .nav-department-toggle { justify-content: center; width: 42px; min-height: 34px; padding: 0; font-size: 0; }.sidebar-collapsed .nav-department-toggle > span { gap: 0; }.sidebar-collapsed .nav-department-toggle > span > svg { width: 18px; height: 18px; }.sidebar-collapsed .nav-department-toggle > svg { display: none; }.sidebar-collapsed .nav-department-content { gap: 3px; }

/* Public Sepro Health identity */
.public-home { --bg-page: #f5fafb; --bg-soft: #f1f8f9; --line-soft: #d9e8ea; --text-main: #23364a; --text-sub: #41616b; --text-muted: #70858c; --purple-900: #182a3d; --purple-700: #249eae; --purple-600: #4cc7d2; --purple-300: #b7dfe3; --orange-500: #249eae; --shadow-soft: 0 10px 28px rgba(24,42,61,.1); }.public-home .site-header { border-color: #d9e8ea; background: #fff; }.public-home .brand-name { color: var(--sepro-navy); }.public-home .main-nav > a, .public-home .nav-select, .public-home .lang-link { color: var(--sepro-navy); }.public-home .nav-caret, .public-home .menu-toggle span { border-color: var(--sepro-blue-dark); background-color: var(--sepro-blue-dark); }.public-home .btn-orange, .public-home .btn-purple { background: var(--sepro-blue); color: var(--sepro-navy-deep); }.public-home .btn-orange:hover, .public-home .btn-purple:hover { background: var(--sepro-green); }.public-home .btn-outline { border-color: #9bdce3; color: var(--sepro-blue-dark); }.public-home .section-grid-bg { background: repeating-linear-gradient(to right, transparent 0, transparent 125px, #dcecee 125px, #dcecee 126px), #f4fafb; }.public-home .hero-content h1, .public-home .section-head h2, .public-home .feature-left h2, .public-home .testimonials h2, .public-home .faq h2 { color: var(--sepro-navy); }.public-home .hero-content p, .public-home .section-head p { color: #527078; }.public-home .float-card.purple, .public-home .second-purple, .public-home .ai-assist, .public-home .cta-final { background: var(--sepro-navy); }.public-home .float-card.blue, .public-home .soft-card { background: var(--sepro-blue); color: var(--sepro-navy-deep); }.public-home .float-card.green { background: var(--sepro-green); color: var(--sepro-navy-deep); }.public-home .overview-card, .public-home .feature-panel, .public-home .quote-card { border-color: #d5e6e9; }.public-home .ai-kicker, .public-home .faq-list summary::after { color: var(--sepro-blue-dark); }.public-home .site-footer-dark { background: var(--sepro-navy-deep); color: #c7dce0; }.public-home .site-footer-dark a, .public-home .footer-grid h4, .public-home .footer-brand { color: #fff; }.public-home .site-footer-dark .footer-brand .brand-name { color: #fff; }.public-home .site-footer-dark .footer-bottom p { color: #c7dce0; }

@media (max-width: 1024px) {
  .main-nav,
  .header-right { display: none; }

  .menu-toggle {
    display: block;
  }

  .main-nav.open {
    display: grid;
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 72px;
    z-index: 90;
    background: #fff;
    border: 1px solid #eee9fb;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    padding: 12px;
    gap: 8px;
    transform: none;
    margin-left: 0;
  }

  .main-nav.open .nav-dropdown { display: grid; gap: 6px; }
  .main-nav.open .nav-select { justify-content: space-between; min-height: 38px; width: 100%; padding: 0 8px; }
  .main-nav.open .nav-menu { display: none; position: static; min-width: 0; padding: 0 8px; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .main-nav.open .nav-dropdown.is-mobile-open .nav-menu { display: grid; }
  .main-nav.open .nav-menu a { white-space: normal; }
  .main-nav.open .mobile-nav-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid #e4edef; }
  .main-nav.open .mobile-nav-actions .btn { min-height: 38px; padding: 8px 12px; font-size: 12px; }
  .mobile-language-button { min-width: 42px; min-height: 38px; padding: 0 10px; border: 1px solid #9bdce3; border-radius: 8px; background: #fff; color: var(--sepro-blue-dark); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }

  .hero {
    min-height: 560px;
  }

  .hero-inner {
    min-height: 560px;
  }

  .hero-floating {
    opacity: 0.22;
  }

  .float-column-left {
    left: 20px;
  }

  .float-column-center {
    left: 280px;
  }

  .float-column-right {
    right: 24px;
  }

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

  .overview-cards,
  .ai-points,
  .testimonials-row,
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .feature-right {
    justify-content: center;
  }
}

@media (max-width: 680px) {
  .container {
    width: min(1080px, calc(100% - 1.25rem));
  }

  .container-header {
    width: min(1600px, calc(100% - 1.25rem));
  }

  .hero-content h1 {
    line-height: 1.12;
  }

  .hero,
  .hero-inner { min-height: 445px; }

  .hero-content { margin-top: 0; }

  .hero-floating { display: none; }

  .hero-content h1 { font-size: 34px; }

  .hero-content p { max-width: 350px; font-size: 15px; }


  .hero-cta,
  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .logo-grid,
  .overview-cards,
  .ai-points,
  .testimonials-row,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .logo-grid img {
    max-width: 200px;
  }

  .modal {
    padding: 0;
  }

  .modal-panel {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .modal-shell {
    padding: 14px 18px 20px;
  }

  .modal-close-muted {
    left: 18px;
  }

  .modal-close-main {
    right: 18px;
  }

  .phone-row {
    grid-template-columns: 1fr;
  }

  .discount-input-wrap {
    grid-template-columns: 1fr 84px;
  }

  .float-card,
  .float-chip,
  .float-panel,
  .dot-indicators {
    display: none;
  }

  .section-pad,
  .trusted,
  .profession-tags {
    padding: 68px 0;
  }

  .quote-card {
    min-height: auto;
  }
}

/* Patient appointment calendar */
body.patient-page:has([data-specialty-filter]) .patient-main {
  background:
    linear-gradient(rgba(244, 252, 253, 0.84), rgba(241, 250, 251, 0.9)),
    url("../img/bg-calendar.png") center / cover fixed;
}

body.patient-page:has([data-specialty-filter]) .patient-content {
  min-height: calc(100vh - 74px);
}

body.patient-page:has([data-specialty-filter]) .patient-search-panel,
body.patient-page:has([data-specialty-filter]) .clinic-card {
  background: rgba(255, 255, 255, 0.91);
  backdrop-filter: blur(8px);
}

body.patient-page:has([data-specialty-filter]) .patient-section-heading {
  padding: 13px 16px;
  border: 1px solid rgba(213, 232, 235, 0.86);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(8px);
}

@media (max-width: 800px) {
  body.patient-page:has([data-specialty-filter]) .patient-main {
    background-attachment: scroll;
  }
}

.patient-search-panel { position: relative; z-index: 5; }.patient-date-picker { position: relative; z-index: 1; }.patient-date-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #d7e5e8; border-radius: 7px; background: #fff; color: var(--sepro-navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }.patient-date-trigger:hover, .patient-date-trigger[aria-expanded="true"] { border-color: var(--sepro-blue-dark); box-shadow: 0 0 0 3px rgba(76, 199, 210, .16); }.patient-date-trigger svg { width: 17px; }.patient-date-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; width: 292px; overflow: hidden; padding: 13px; border: 1px solid #b8dfe4; border-radius: 9px; background: linear-gradient(rgba(255, 255, 255, .9), rgba(244, 252, 253, .94)), url("../img/bg-calendar.png") center / cover; box-shadow: 0 18px 32px rgba(24, 42, 61, .22); }.patient-date-popover[hidden] { display: none; }.patient-date-popover-head { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; margin-bottom: 11px; }.patient-date-popover-head strong { color: var(--sepro-navy); font-size: 14px; text-align: center; text-transform: capitalize; }.patient-date-popover-head button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 6px; background: rgba(255,255,255,.66); color: var(--sepro-navy); cursor: pointer; }.patient-date-popover-head button:hover { background: var(--sepro-blue); }.patient-date-popover-head svg { width: 18px; }.patient-date-weekdays, .patient-date-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }.patient-date-weekdays { margin-bottom: 5px; }.patient-date-weekdays span { color: #607480; font-size: 11px; font-weight: 800; text-align: center; }.patient-date-grid button { height: 32px; border: 0; border-radius: 5px; background: rgba(255,255,255,.62); color: var(--sepro-navy); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }.patient-date-grid button:hover { background: #d9f3f6; }.patient-date-grid button.is-outside { color: #8ca2a8; }.patient-date-grid button.is-selected { background: var(--sepro-blue-dark); color: #fff; box-shadow: 0 2px 5px rgba(24, 42, 61, .18); }.patient-date-today { display: block; margin: 11px 0 0 auto; padding: 0; border: 0; background: transparent; color: var(--sepro-blue-dark); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }.patient-date-today:hover { color: var(--sepro-navy); text-decoration: underline; }

@media (max-width: 800px) { .patient-date-popover { left: 0; right: auto; width: min(292px, calc(100vw - 44px)); } }