/* Clinic Sales — a calm, light workspace. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Leelawadee UI", Tahoma, sans-serif;
  font-size: 15px;
  color: #1d1d1f;
  background: #f5f5f7;
  color-scheme: light;
  --muted: #6e6e73;
  --line: #e5e5ea;
  --border: #e5e5ea;
  --teal: #0071e3;
  --blue: #0071e3;
  --surface: #fff;
  --shadow: 0 4px 24px rgba(29, 29, 31, .035);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; line-height: 1.6; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a.button, .navlink {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 19px; border: 1px solid transparent;
  border-radius: 999px; background: #eaeaef; color: #1d1d1f;
  font-weight: 500; font-size: 13px; line-height: 1.5;
  cursor: pointer; text-decoration: none;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}
button:hover, a.button:hover { background: #e0e0e7; }
button.primary, a.primary, .navlink { background: var(--blue); color: #fff; border-color: transparent; }
button.primary:hover, a.primary:hover, .navlink:hover { background: #0077ed; box-shadow: 0 4px 14px #0071e31a; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #0071e3; outline-offset: 4px;
}
a { color: #0066cc; text-underline-offset: 3px; }
button.link, .text-button {
  border: 0; border-radius: 6px; background: transparent; color: #0066cc;
  text-align: left; justify-content: flex-start; padding: 5px 0; min-height: 32px;
}
button.link:hover, .text-button:hover { background: transparent; text-decoration: underline; }
button svg, a svg { width: 18px; height: 18px; flex-shrink: 0; }
input, select, textarea {
  width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px;
  color: #1d1d1f; background: #fff; border: 1px solid #d2d2d7;
  border-radius: 12px; font-size: 15px; line-height: 1.5;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input::placeholder, textarea::placeholder { color: #6e6e73; }
input:focus, select:focus, textarea:focus {
  border-color: #0071e3; outline: 0; box-shadow: 0 0 0 4px #0071e31a;
}
input[type=checkbox], input[type=radio] {
  width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0;
  accent-color: var(--blue); flex-shrink: 0;
}
input:disabled, select:disabled, textarea:disabled { color: #6e6e73; background: #f5f5f7; }
textarea { min-height: 112px; resize: vertical; }
label { display: grid; gap: 8px; min-width: 0; font-size: 13px; font-weight: 500; color: #515154; }
fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 22px 0; }
legend { padding: 0 7px; color: #515154; font-size: 13px; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { color: #1d1d1f; letter-spacing: -.025em; }
h1 { font-size: 36px; line-height: 1.35; font-weight: 650; margin: 0 0 8px; }
h2 { font-size: 22px; line-height: 1.45; font-weight: 600; margin: 0 0 14px; }
h3 { font-size: 17px; line-height: 1.5; font-weight: 600; }
p { margin: 12px 0; line-height: 1.8; }
small, .muted { color: var(--muted); }
small { font-size: 12px; line-height: 1.7; }
hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
[hidden] { display: none !important; }

/* Persistent workspace navigation. */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  display: flex; flex-direction: column; position: sticky; top: 0;
  height: 100vh; height: 100dvh; min-height: 0; padding: 32px 20px 24px;
  background: rgba(255, 255, 255, .88); border-right: 1px solid var(--line);
}
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 0 38px; color: #1d1d1f; font-size: 21px; font-weight: 650; letter-spacing: -.04em; flex-shrink: 0; }
.logo, .auth-logo { width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0; border-radius: 14px; background: #1d1d1f; color: #fff; font-size: 28px; font-weight: 400; line-height: 1; }
.logo svg, .auth-logo svg { width: 23px; height: 23px; }
.brand-copy { min-width: 0; font-size: 16px; line-height: 1.5; font-weight: 600; letter-spacing: -.025em; }
/* The chosen artwork includes generous margins; frame it without altering the image. */
.brand-lockup { position: relative; display: block; width: min(208px, 100%); aspect-ratio: 4.4; overflow: hidden; background: #fff; flex-shrink: 0; }
.brand-lockup .brand-image { position: absolute; display: block; width: 124%; max-width: none; height: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.brand small, .brand-eyebrow { display: block; margin-top: 2px; color: #6e6e73; font-size: 9px; line-height: 1.6; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.sidebar-label { margin: 0 14px 12px; font-size: 10px; font-weight: 600; letter-spacing: .15em; color: #6e6e73; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 0 0 20px; }
.nav button { justify-content: flex-start; text-align: left; background: transparent; color: #6e6e73; border: 0; border-radius: 12px; min-height: 44px; padding: 11px 14px; gap: 12px; font-size: 13px; font-weight: 450; flex-shrink: 0; }
.nav button:hover { color: #1d1d1f; background: #f5f5f7; }
.nav button.active { background: #eaf2ff; color: #0066cc; font-weight: 600; }
.nav-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nav-icon svg { width: 19px; height: 19px; }
.nav-label { min-width: 0; }
.account { position: static; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.account-person, .account-profile { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.account-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: #eef0f5; color: #515b6b; font-size: 13px; font-weight: 600; }
.account-copy { display: grid; gap: 2px; min-width: 0; }
.account-name { color: #1d1d1f; font-weight: 600; }
.account-role { font-size: 11px; color: #6e6e73; }
.account p { margin: 6px 0 12px; color: var(--muted); font-size: 11px; }
.logout-button, .account button { width: 100%; min-height: 38px; font-size: 12px; background: transparent; color: #6e6e73; border: 1px solid var(--line); }
.account button:hover { background: #f5f5f7; }
main { width: 100%; max-width: 1460px; min-width: 0; margin: 0 auto; padding: 42px clamp(26px, 3.5vw, 56px) 72px; }
.page-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 0 20px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: #0066cc; font-size: 13px; }
.page-back:hover { background: #eaf2ff; }
.page-back svg { width: 18px; height: 18px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 20px; }
.top > div:first-child { min-width: 0; }
.top h1 { font-size: clamp(30px, 2.7vw, 42px); font-weight: 650; }
.page-eyebrow { display: block; margin: 0 0 8px; font-size: 10px; font-weight: 600; letter-spacing: .16em; color: #6e6e73; text-transform: uppercase; }
.page-subtitle, .top > div > .muted { font-size: 13px; line-height: 1.8; margin: 8px 0 0; }
.header-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex-shrink: 0; }
.header-date { font-size: 12px; color: #6e6e73; white-space: nowrap; }
.tag { display: inline-flex; align-items: center; gap: 6px; background: #edf7f1; color: #26704b; border: 1px solid #e1efe6; border-radius: 999px; padding: 5px 10px; font-size: 10px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.header-meta > .tag:not(.server-tag)::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #32a368; }
.status-dot { display: inline-block; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #32a368; }
.sync { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #6e6e73; border: 0; padding: 0; margin: -4px 0 28px; line-height: 1.7; }
.sync::before { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #9aaba3; flex-shrink: 0; }
.sync.saving::before { background: #c48a20; }
.sync.failed { color: #b3261e; }
.sync.failed::before { background: #b3261e; }

/* Content, cards and clear states. */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 24px 0 32px; }
.stat, .panel { min-width: 0; background: #fff; border: 1px solid rgba(29, 29, 31, .045); border-radius: 22px; padding: 25px; box-shadow: var(--shadow); }
.stat { position: relative; text-align: left; }
button.stat { display: block; width: 100%; font-size: 13px; color: #515154; }
button.stat:hover { background: #fff; box-shadow: 0 8px 28px #1d1d1f0c; border-color: #c9def7; }
.stat strong, .stat-value { display: block; margin: 10px 0 6px; font-size: 38px; font-weight: 650; line-height: 1.25; color: #1d1d1f; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.stat-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #6e6e73; font-size: 12px; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-icon { display: inline-flex; align-items: center; justify-content: center; color: #6e6e73; }
.stat-icon svg { width: 19px; height: 19px; }
.stat-detail { color: #6e6e73; font-size: 11px; }
.compact { font-size: 23px !important; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.panel > form { display: grid; gap: 18px; }
.panel > form > p { margin: 0; }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fields input, .fields select { min-width: 0; }
.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0; }
.toolbar input { flex: 2; min-width: min(220px, 100%); }
.toolbar select { flex: 1; min-width: min(130px, 100%); }
.toolbar > label { min-width: 0; }
.warning, .notice { padding: 16px 19px; border: 1px solid; border-radius: 16px; margin: 18px 0; font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
.warning { color: #8a5910; background: #fff8e9; border-color: #f5e6c6; }
.notice { color: #3d648b; background: #edf4fd; border-color: #e1ecfa; }
.danger { color: #b3261e; }
.caption { margin: 12px 0; color: var(--muted); font-size: 12px; line-height: 1.85; }
.empty { padding: 48px 20px; text-align: center; color: #6e6e73; font-size: 13px; }
.item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.item > div, .split > div { min-width: 0; }
.item:last-child { border: 0; }
.item p { margin: 5px 0; }
.split { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.split > * { min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 7px; background: #f0f1f5; padding: 5px 9px; font-size: 11px; color: #62626a; line-height: 1.65; }
.pill.done { background: #e8f6ed; color: #287a4c; }
.pill.active { background: #e8f1ff; color: #0066cc; }
.pill.skipped { background: #fff1e8; color: #9c5b27; }
.pill.pending { background: #f0f1f5; color: #6e6e73; }
.size { display: inline-block; min-width: 30px; padding: 4px 8px; background: #e8f1ff; color: #3069ad; border-radius: 7px; font-size: 10px; font-weight: 600; text-align: center; }
.size.L { background: #e8f5ed; color: #387c57; }
.size.M { background: #f1edfb; color: #7851a8; }
.size.S { background: #fff3df; color: #916f2d; }
.check { display: flex; align-items: center; gap: 9px; font-weight: 400; }
.result { margin-top: 28px; }
.plan-card { margin: 18px 0; }
.plan-card .toolbar { margin-bottom: 0; }
.progress { font-size: 11px; color: var(--muted); }

/* Overview: generous editorial type and an abstract route story. */
.home-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; min-height: 310px; border-radius: 28px; padding: 36px 38px; background: #fff; border: 1px solid rgba(29,29,31,.035); box-shadow: var(--shadow); overflow: hidden; position: relative; gap: 20px; }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.hero-eyebrow { display: block; font-size: 10px; font-weight: 600; color: #0071e3; letter-spacing: .15em; margin-bottom: 14px; }
.hero-title { font-size: clamp(30px, 3vw, 44px); line-height: 1.4; font-weight: 650; margin: 0; letter-spacing: -.045em; }
.hero-title span { color: #86868b; }
.hero-description { max-width: 390px; font-size: 13px; color: #6e6e73; line-height: 1.9; margin: 16px 0 22px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-actions button { font-size: 12px; }
.hero-visual { position: relative; min-height: 250px; border-radius: 24px; background: radial-gradient(ellipse at 50% 60%, #eaf4ff 0%, #f5f9ff 48%, #fff 75%); isolation: isolate; }
.hero-visual svg { max-width: 100%; }
.hero-route-line { position: absolute; width: 100%; height: 185px; top: 25px; left: 0; color: #92c6fb; }
.hero-route-line > path { stroke: #9bc5f0; stroke-width: 2; stroke-dasharray: 5 6; }
.hero-stage { position: relative; width: 100%; height: 220px; margin-top: 20px; }
.hero-stage-icon { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; width: 104px; min-height: 94px; padding: 15px 10px; border-radius: 19px; background: #fffffff5; border: 1px solid #fff; box-shadow: 0 12px 35px #36679712; }
.hero-point-one { top: 80px; left: 0; }
.hero-point-two { top: 0; left: calc(50% - 52px); }
.hero-point-three { top: 88px; right: 0; }
.hero-point-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: #eaf3ff; color: #0071e3; }
.hero-point-icon svg { width: 21px; height: 21px; }
.hero-stage-label { display: block; color: #515154; font-size: 10px; font-weight: 500; }
.hero-stage-caption { display: block; font-size: 9px; color: #6e6e73; margin-top: 2px; }
.hero-map-label { position: absolute; top: 0; width: 100%; text-align: center; color: #9ca8b5; font-size: 9px; letter-spacing: .06em; }
.hero-route-point { fill: #0071e3; stroke: #fff; stroke-width: 3; }
.hero-connection { display: flex; justify-content: center; align-items: center; gap: 6px; color: #6e6e73; font-size: 9px; margin: 0; }
.overview-section { margin-top: 34px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-heading h2 { margin: 0; font-size: 23px; letter-spacing: -.03em; }
.section-description { color: #6e6e73; font-size: 12px; margin: 5px 0 0; }
.quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.quick-action { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 116px; padding: 22px; border: 1px solid rgba(29,29,31,.04); border-radius: 22px; background: #fff; text-align: left; box-shadow: var(--shadow); }
.quick-action:hover { background: #fff; box-shadow: 0 8px 28px #1d1d1f0c; }
.quick-action-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; background: #f1f5fc; color: #0071e3; }
.quick-action-icon svg { width: 22px; height: 22px; }
.quick-action-copy { display: grid; gap: 5px; min-width: 0; }
.quick-action-copy strong { font-size: 13px; font-weight: 600; }
.quick-action-copy small { font-size: 10px; font-weight: 400; }
.quick-action-copy > span { font-size: 11px; color: #6e6e73; font-weight: 400; line-height: 1.8; }
.quick-action-arrow { margin-left: auto; color: #a1a1a6; font-size: 20px; font-weight: 400; }
.home-bottom { display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: start; margin-top: 32px; }
.service-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: #edf3fd; color: #0071e3; margin-bottom: 21px; }
.service-icon svg { width: 23px; height: 23px; }
.service-panel h2 { font-size: 27px; line-height: 1.5; }
.service-panel > .muted { font-size: 12px; line-height: 1.9; }
.service-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 25px 0; }
.service-limits > span { color: #6e6e73; font-size: 10px; }
.service-limits strong { display: block; color: #1d1d1f; font-size: 22px; font-weight: 600; margin-top: 6px; letter-spacing: -.03em; }
.service-limits small { font-size: 9px; font-weight: 400; }
.usage-details { border-top: 1px solid var(--line); padding-top: 18px; font-size: 11px; }
.overview-note { font-size: 10px; color: #6e6e73; margin: 24px 2px 0; line-height: 1.9; }
.district-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 26px; margin-top: 22px; }
.district-row { min-width: 0; }
.district-label { font-size: 12px; color: #515154; }
.district-count { font-size: 12px; color: #6e6e73; font-weight: 600; }
.districtprogress, .bar { display: block; width: 100%; height: 5px; border: 0; border-radius: 99px; background: #f0f0f5; margin: 8px 0 14px; overflow: hidden; accent-color: #81b7ef; }
.districtprogress::-webkit-progress-bar { background: #f0f0f5; border-radius: 99px; }
.districtprogress::-webkit-progress-value { background: #81b7ef; border-radius: 99px; }
.districtprogress::-moz-progress-bar { background: #81b7ef; border-radius: 99px; }
.bar span { display: block; height: 100%; background: #81b7ef; }

/* Lists, field work, route editor and Calendar. */
.tablewrap { overflow: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
table { border-collapse: collapse; width: 100%; font-size: 12px; white-space: nowrap; }
th { text-align: left; font-weight: 500; color: #6e6e73; background: #fafafa; }
td, th { padding: 15px 14px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfcfe; }
td.name { white-space: normal; min-width: 220px; max-width: 350px; }
td input[type=checkbox] { width: 18px; min-height: 18px; }
table input { width: 105px; }
table select { width: 100px; }
.cliniccards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cliniccard { background: #fff; border: 1px solid #e9e9ef; border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
.cliniccard.chosen { border-color: #74aff0; background: #f5f9ff; box-shadow: 0 0 0 1px #74aff01c; }
.pick { display: flex; align-items: flex-start; gap: 13px; color: #1d1d1f; font-size: 15px; font-weight: 600; cursor: pointer; }
.pick input { margin-top: 4px; }
.pick small, .routecards small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 7px; }
.selectionbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #ffffffed; border: 1px solid #dbe5f2; backdrop-filter: blur(18px); box-shadow: 0 6px 24px #1d1d1f08; border-radius: 16px; padding: 14px 17px; position: sticky; top: 12px; z-index: 2; margin-bottom: 20px; }
.selectionbar span { margin-right: auto; font-size: 13px; }
.wizard { display: flex; gap: 10px; margin-bottom: 22px; }
.wizard button { flex: 1; border-radius: 12px; background: #eaeaef; color: #6e6e73; }
.wizard button.active { background: #e7f0fd; color: #0066cc; }
.wizard b { display: inline-grid; place-items: center; border-radius: 50%; width: 23px; height: 23px; background: #ffffffa0; margin-right: 3px; font-size: 11px; }
.stopeditors { display: grid; gap: 18px; }
.stopeditor .fields { margin-top: 20px; }
.routecards .item > div:first-child { display: block; }
.routecards .size { float: left; margin-right: 12px; }
.routecards .item button { flex-shrink: 0; }
.nextstop { background: #edf4ff; border: 1px solid #deebfc; border-radius: 24px; padding: 30px; margin: 24px 0; }
.nextstop h2 { margin: 18px 0 10px; font-size: 27px; }
.nextstop .tag { background: #fff; color: #0066cc; border-color: #dbe9fb; }
.visitrow { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.visitrow:last-child { border-bottom: 0; }
.visitnum { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: #edf2fa; color: #64758c; font-size: 12px; }
.visitbody { flex: 1; min-width: 0; }
.visitbody h3 { margin: 0; }
.visitbody .toolbar { margin: 10px 0 0; }
.member { padding: 20px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.member:first-child { padding-top: 0; }
.member:last-child { border-bottom: 0; }
.member h3 { margin: 0; }
.member p { margin: 9px 0; }
.members form { display: grid; gap: 14px; margin-top: 16px; }
.workload-grid, .task-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)); gap: 20px; }
.workload h2 { font-size: 18px; margin: 0; }
.workload-numbers { display: flex; flex-wrap: wrap; gap: 18px; margin: 22px 0; color: #6e6e73; font-size: 11px; }
.workload-numbers strong { display: block; color: #1d1d1f; font-size: 28px; line-height: 1.5; letter-spacing: -.04em; font-weight: 600; }
.workload .caption { overflow-wrap: anywhere; }
.task-card { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; overflow-wrap: anywhere; }
.task-card.overdue { border-left: 3px solid #d89b41; }
.task-card h3 { margin: 15px 0 9px; }
.meeting-list { display: grid; gap: 16px; }
.calendar-route { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.attendee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.calendar-description { white-space: pre-wrap; font: inherit; font-size: 13px; line-height: 1.85; overflow-wrap: anywhere; }
details { margin: 18px 0; }
summary { cursor: pointer; color: #0066cc; }

/* Focused dialogs and onboarding. */
dialog { width: min(720px, calc(100vw - 32px)); max-height: 90vh; max-height: 90dvh; overflow: auto; border: 1px solid #e6e6eb; border-radius: 24px; background: #fff; color: #1d1d1f; padding: 30px; box-shadow: 0 24px 100px #0000002b; }
dialog::backdrop { background: #16161d50; backdrop-filter: blur(5px); }
.dialoghead { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.dialoghead h2 { margin: 0; }
.dialoghead button { flex-shrink: 0; min-height: 36px; font-size: 12px; padding: 7px 14px; }
dialog form { display: grid; gap: 18px; }
dialog form .fields { gap: 16px; }
dialog .toolbar { margin-top: 18px; margin-bottom: 0; }
dialog textarea { min-height: 90px; }
.note { white-space: pre-wrap; overflow-wrap: anywhere; background: #f5f5f7; border-radius: 13px; padding: 16px; margin: 12px 0; font-size: 13px; }
#toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); max-width: min(90vw, 600px); padding: 14px 23px; border-radius: 16px; background: #1d1d1f; color: #fff; font-size: 13px; box-shadow: 0 8px 30px #0002; display: none; z-index: 100; }
.auth { width: calc(100% - 40px); max-width: 490px; margin: clamp(30px, 8vh, 90px) auto; padding: 42px; border-radius: 28px; box-shadow: 0 12px 60px #1d1d1f06; }
.auth .brand { margin-bottom: 36px; font-size: 20px; }
.auth .brand small { font-size: 8px; }
.auth-brand { align-items: center; text-align: center; }
.auth-brand .brand-lockup { width: min(280px, 100%); }
.auth-brand .brand-copy { font-size: 17px; }
.auth-logo { margin: 0 auto 20px; width: 48px; height: 48px; border-radius: 16px; }
.auth .brand .auth-logo { margin: 0; width: 40px; height: 40px; border-radius: 13px; }
.auth-intro { text-align: center; margin-bottom: 28px; }
.auth-eyebrow { color: #6e6e73; font-size: 10px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 10px; }
.auth h1 { font-size: 28px; line-height: 1.5; font-weight: 600; letter-spacing: -.04em; }
.auth .muted { font-size: 13px; line-height: 1.85; }
.auth form { display: grid; gap: 20px; }
.auth form > button { width: 100%; min-height: 48px; margin-top: 5px; }
.auth .danger { margin: 0; font-size: 12px; }
.auth form #passwordHelp { margin: -8px 0 -6px; font-size: 11px; }
.auth-provider { margin: 0 0 8px; }
.auth-provider .caption { text-align: center; font-size: 10px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; font-size: 10px; color: #6e6e73; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: var(--line); flex: 1; }
.auth-footer { color: #6e6e73; text-align: center; font-size: 10px; line-height: 1.9; padding-top: 22px; margin-top: 28px; border-top: 1px solid var(--line); }
#googleLogin { display: flex; justify-content: center; }
.google-signin { width: 100%; min-width: 0; display: flex; justify-content: center; }
.google-signin-fallback > div { width: min(300px, 100%); max-width: 100%; }
.google-signin-fallback .google-signin-button {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 0; height: 40px; padding: 0 12px; overflow: hidden;
  border: 1px solid #747775; border-radius: 4px; background: #fff; color: #1f1f1f;
  font-family: "Google Sans", Arial, sans-serif; font-size: 14px; font-weight: 500;
  line-height: 20px; letter-spacing: .25px; cursor: pointer; user-select: none;
}
.google-signin-fallback .google-signin-button:hover { background: #f8faff; border-color: #747775; }
.google-signin-fallback .google-signin-button:focus-visible { outline: 3px solid #0071e3; outline-offset: 3px; }
.google-signin-fallback .google-signin-state { position: absolute; inset: 0; pointer-events: none; }
.google-signin-fallback .google-signin-content { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-width: 0; }
.google-signin-fallback .google-signin-icon { display: flex; flex: 0 0 20px; width: 20px; height: 20px; }
.google-signin-fallback .google-signin-icon svg { display: block; width: 20px; height: 20px; }
.google-signin-fallback .google-signin-a11y { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (min-width: 1600px) { main { padding-top: 52px; } .home-hero { padding: 44px 48px; } }
@media (max-width: 1200px) {
  .shell { grid-template-columns: 218px minmax(0, 1fr); }
  .sidebar { padding-right: 15px; padding-left: 15px; }
  .brand { font-size: 19px; gap: 10px; }
  .logo { width: 37px; height: 37px; border-radius: 12px; }
  main { padding: 34px 28px 60px; }
  .home-hero { padding: 30px; grid-template-columns: 1.2fr .9fr; }
  .hero-title { font-size: 34px; }
  .hero-stage-icon { width: 88px; padding: 12px 8px; }
  .hero-point-two { left: calc(50% - 44px); }
  .hero-visual { min-height: 250px; }
  .stats { gap: 14px; }
  .stat { padding: 22px; }
  .quick-actions { gap: 14px; }
  .quick-action { padding: 19px; align-items: flex-start; }
  .quick-action-icon { width: 36px; height: 36px; border-radius: 11px; }
  .quick-action-arrow { display: none; }
  .home-bottom { grid-template-columns: 1.2fr 1fr; }
}
@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero { grid-template-columns: 1fr; padding: 30px; min-height: 0; }
  .hero-visual { display: none; }
  .hero-title { font-size: 37px; }
  .hero-description { max-width: 100%; }
  .quick-actions { grid-template-columns: 1fr; gap: 12px; }
  .quick-action { min-height: 88px; align-items: center; }
  .quick-action-arrow { display: block; }
  .home-bottom { grid-template-columns: 1fr; }
  .header-date { display: none; }
  .grid2 { gap: 18px; }
  .panel { padding: 22px; }
}
@media (max-width: 760px) {
  .shell { display: block; }
  .sidebar { position: relative; height: auto; padding: 18px 22px 0; background: #ffffffed; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .brand { margin-bottom: 18px; font-size: 20px; }
  .sidebar .logo { width: 34px; height: 34px; border-radius: 11px; font-size: 25px; }
  .sidebar-label { display: none; }
  .sidebar .nav { display: flex; flex-direction: row; flex-shrink: 0; gap: 6px; overflow: auto; padding: 0 0 14px; scrollbar-width: thin; }
  .nav button { flex-shrink: 0; min-height: 42px; white-space: nowrap; padding: 9px 13px; font-size: 12px; gap: 7px; border-radius: 10px; }
  .nav-icon svg { width: 16px; height: 16px; }
  .sidebar .account { border: 0; margin-top: 0; padding: 0 0 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .account-person, .account-profile { margin: 0; gap: 8px; }
  .account-avatar { width: 27px; height: 27px; font-size: 10px; }
  .account-copy { display: flex; align-items: baseline; gap: 8px; }
  .account-name { font-size: 11px; }
  .account-role { font-size: 10px; }
  .account button { width: auto; min-height: 30px; font-size: 10px; padding: 5px 11px; border-color: transparent; background: #f5f5f7; }
  .account p { display: none; }
  main { padding: 28px 22px 48px; }
  .top { flex-direction: column; gap: 11px; align-items: flex-start; margin-bottom: 15px; }
  .top h1 { font-size: 29px; margin-bottom: 5px; }
  .page-eyebrow { font-size: 9px; margin-bottom: 6px; }
  .page-subtitle, .top > div > .muted { font-size: 12px; }
  .header-meta { padding-top: 0; flex-direction: row; }
  .header-meta .tag { font-size: 10px; padding: 4px 9px; }
  .sync { margin-bottom: 24px; font-size: 11px; }
  .stats { gap: 12px; margin: 22px 0 26px; }
  .stat { border-radius: 19px; padding: 20px; }
  .stat strong { font-size: 34px; }
  .stat-label { font-size: 11px; }
  .grid2 { grid-template-columns: 1fr; gap: 18px; }
  .fields { gap: 14px; }
  .panel { border-radius: 20px; padding: 22px; }
  .panel h2 { font-size: 20px; }
  .home-hero { padding: 27px; border-radius: 24px; }
  .hero-title { font-size: 34px; }
  .hero-description { font-size: 12px; }
  .hero-eyebrow { font-size: 9px; }
  .overview-section { margin-top: 27px; }
  .section-heading h2 { font-size: 21px; }
  .section-description { font-size: 11px; }
  .district-list { gap: 14px 22px; }
  .cliniccards { grid-template-columns: 1fr; }
  .cliniccard { padding: 20px; }
  .selectionbar { top: 8px; border-radius: 15px; padding: 12px; gap: 9px; }
  .selectionbar button { font-size: 11px; min-height: 38px; padding: 8px 13px; }
  .wizard { gap: 7px; }
  .wizard button { padding: 10px 7px; font-size: 11px; gap: 3px; }
  .wizard b { width: 20px; height: 20px; font-size: 10px; }
  .visitbody .split { display: block; }
  .visitbody .pill { margin-top: 8px; }
  .visitbody .toolbar button { flex: 1; min-width: 100px; }
  .nextstop { padding: 24px; border-radius: 20px; }
  .nextstop h2 { font-size: 24px; }
  .nextstop .navlink { width: 100%; }
  .routecards .item { align-items: flex-start; }
  .workload-grid { grid-template-columns: 1fr; }
  .auth { margin: 30px auto; padding: 30px; }
}
@media (max-width: 480px) {
  .sidebar { padding: 16px 18px 0; }
  main { padding: 25px 18px 44px; }
  .top h1 { font-size: 27px; }
  .top { gap: 10px; }
  .header-meta .tag { font-size: 10px; letter-spacing: 0; padding: 4px 9px; }
  .header-meta > .tag:not(.server-tag)::before { width: 4px; height: 4px; }
  .page-subtitle { max-width: 260px; }
  .home-hero { padding: 24px; }
  .hero-title { font-size: 31px; }
  .hero-actions { gap: 10px; }
  .hero-actions button { min-height: 42px; padding: 10px 16px; }
  .stat { padding: 18px; }
  .stat strong { font-size: 32px; }
  .stat-icon { display: none; }
  .stat-detail { font-size: 10px; }
  .fields { grid-template-columns: 1fr; }
  .stopeditor .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { padding: 20px; }
  .panel h2 { font-size: 19px; }
  .toolbar { gap: 10px; }
  .toolbar > label { flex: 1 1 145px; }
  .toolbar > input { min-width: 100%; }
  .toolbar > select { min-width: 100px; }
  .toolbar > button { max-width: 100%; }
  .calendar-route { align-items: flex-start; flex-direction: column; }
  .attendee-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .quick-action { padding: 18px; }
  .quick-action-copy strong { font-size: 13px; }
  .district-list { grid-template-columns: 1fr; }
  .auth { padding: 28px 24px; width: calc(100% - 28px); border-radius: 24px; }
  .auth h1 { font-size: 25px; }
  .auth .brand { font-size: 19px; }
  dialog { padding: 23px 20px; width: calc(100vw - 22px); border-radius: 20px; }
  .dialoghead { gap: 12px; }
  .dialoghead h2 { font-size: 19px; }
  .dialoghead button { padding: 6px 10px; }
  .visitrow { gap: 11px; }
  .notice, .warning { padding: 14px 16px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Imported facility records: contact details, source context and dataset filter. */
.import-notice { display: flex; align-items: flex-start; gap: 13px; margin: 22px 0 0; padding: 18px 21px; background: #edf5ff; border: 1px solid #dceafa; border-radius: 18px; color: #355d87; }
.import-notice strong { display: block; font-size: 12px; font-weight: 600; }
.import-notice p { margin: 5px 0 0; font-size: 11px; line-height: 1.85; }
.import-notice-icon { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; background: #fff; border-radius: 50%; color: #0071e3; }
.import-notice-icon svg { width: 17px; height: 17px; }
.clinic-filterbar > input { flex: 2 1 250px; }
.clinic-filterbar > select { flex: 1 1 145px; max-width: 100%; }
.size.unknown { background: #f0f0f3; color: #77777f; }
.clinic-card-name { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.clinic-card-name .clinic-name-en { color: #86868b; font-size: 10px; }
.clinic-dataset { display: inline-block; background: #edf4ff; color: #486c9b; border-radius: 6px; padding: 4px 8px; margin-top: 14px; font-size: 10px; }
.clinic-services { color: #6e6e73; font-size: 11px; line-height: 1.85; overflow-wrap: anywhere; margin: 10px 0; }
.clinic-rating { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 8px; color: #6e6e73; font-size: 10px; line-height: 1.8; margin: 12px 0; }
.clinic-rating-value { color: #3b3b42; font-weight: 600; font-size: 12px; }
.clinic-rating .rating-scope { flex: 1 0 100%; color: #86868b; font-size: 10px; }
.clinic-directory { margin: 24px 0 28px; border: 1px solid #e6eaf1; border-radius: 18px; background: #fafbfe; padding: 21px; overflow-wrap: anywhere; }
.directory-heading { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 7px 15px; margin-bottom: 18px; }
.directory-heading h3 { font-size: 15px; margin: 0; }
.directory-date { font-size: 10px; color: #86868b; }
.directory-fields, .rating-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 22px; margin: 0; }
.directory-fields > div { min-width: 0; }
.directory-fields dt, .rating-fields dt { color: #86868b; font-size: 10px; margin-bottom: 4px; }
.directory-fields dd, .rating-fields dd { margin: 0; color: #42424a; font-size: 12px; line-height: 1.9; white-space: pre-line; }
.directory-contacts { border-top: 1px solid #e7eaf0; margin-top: 19px; padding-top: 17px; }
.directory-contacts h4, .directory-rating h4 { margin: 0 0 10px; font-size: 12px; font-weight: 600; }
.contact-list { display: grid; gap: 13px; list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.contact-list li > div { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.contact-label { color: #86868b; font-size: 10px; }
.directory-links { display: flex; flex-wrap: wrap; gap: 8px 17px; margin-top: 15px; font-size: 11px; }
.source-link { font-size: 10px; }
.directory-rating { border-top: 1px solid #e7eaf0; margin-top: 20px; padding-top: 18px; }
.directory-rating .clinic-rating { margin: 0 0 14px; }
.directory-rating .clinic-rating-value { font-size: 19px; }
.rating-fields { margin-bottom: 12px; }
.rating-fields dd { font-size: 11px; }
.rating-note { color: #6e6e73; font-size: 11px; line-height: 1.9; white-space: pre-line; }
.directory-rating > .caption { font-size: 10px; margin-bottom: 0; }
.directory-sources { border-top: 1px solid #e7eaf0; margin: 19px 0 0; padding-top: 15px; }
.directory-sources summary { font-size: 11px; }
.directory-sources > .caption { font-size: 10px; margin-bottom: 0; }
@media (max-width: 480px) {
  .import-notice { padding: 15px; border-radius: 16px; gap: 10px; }
  .import-notice strong { font-size: 11px; }
  .import-notice p { font-size: 10px; }
  .clinic-filterbar > select { flex-basis: calc(50% - 5px); min-width: 0; }
  .clinic-filterbar > #clinicType { flex-basis: 100%; }
  .clinic-directory { padding: 17px; border-radius: 15px; }
  .directory-fields { grid-template-columns: 1fr; gap: 13px; }
  .directory-heading h3 { font-size: 14px; }
  .directory-links { gap: 9px 13px; }
  .contact-list li { display: block; }
  .contact-list .source-link { display: inline-block; margin-top: 4px; }
}

/* Public research keeps source dates and review context beside the record. */
.clinic-researched { display: inline-block; border-radius: 6px; padding: 4px 8px; margin: 14px 0 0 6px; background: #edf6ef; color: #4f7558; font-size: 10px; }
.maps-record-link { font-size: 12px; }
.directory-research { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e3e8ef; }
.directory-research .directory-heading { margin-bottom: 12px; }
.research-source-links { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 17px; margin: 12px 0 17px; }
.research-rating { border-radius: 13px; padding: 16px; background: #f0f5fc; }
.research-rating h4, .research-reviews h4 { font-size: 12px; margin: 0 0 10px; font-weight: 600; }
.research-rating .clinic-rating { margin: 0 0 8px; }
.research-rating .clinic-rating-value { font-size: 20px; }
.research-rating > .caption { font-size: 10px; margin: 9px 0 0; }
.research-reviews { margin-top: 22px; }
.research-reviews > .caption { font-size: 10px; margin: 0 0 13px; }
.research-review-list { display: grid; gap: 12px; }
.research-review { min-width: 0; padding: 15px 16px; border: 1px solid #e5e9f0; border-radius: 13px; background: #fff; overflow-wrap: anywhere; }
.research-review-meta { display: flex; flex-wrap: wrap; gap: 5px 14px; justify-content: space-between; color: #86868b; font-size: 10px; }
.research-review-meta > span:first-child { color: #5d6f88; }
.research-review blockquote { margin: 11px 0 12px; padding: 0; color: #51515a; font-size: 12px; line-height: 1.9; white-space: pre-wrap; }
.research-review-source { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 12px; color: #86868b; font-size: 9px; }
.research-review-source > span { flex: 1 1 100%; }
.research-review-source .source-link { font-size: 9px; }
.research-match { margin: 16px 0 0; }
.research-match summary { font-size: 10px; }
.research-match p, .research-note { margin: 10px 0 0; font-size: 10px; line-height: 1.9; color: #777780; }
@media (max-width: 480px) {
  .research-rating { padding: 14px; }
  .research-review { padding: 13px; }
  .research-review-meta { flex-direction: column; gap: 3px; }
  .research-review blockquote { font-size: 11px; }
  .clinic-researched { margin-left: 0; margin-right: 6px; }
}


/* Navigation opens as a left drawer on every screen size. */
.workspace-shell { display: block; }
.workspace-bar { position: sticky; top: 0; z-index: 40; background: #fff; border-bottom: 1px solid var(--line); }
.workspace-bar-inner { display: flex; align-items: center; gap: 18px; min-height: 84px; max-width: 1460px; margin: 0 auto; padding: 16px clamp(22px, 3.5vw, 56px); }
.workspace-brand { width: 208px; min-width: 0; flex: 0 1 208px; }
.workspace-brand .brand-lockup { width: 100%; max-width: 100%; }
.menu-toggle { width: 44px; height: 44px; min-height: 44px; padding: 0; flex: 0 0 44px; border: 1px solid var(--line); border-radius: 12px; background: #f5f5f7; color: #1d1d1f; }
.menu-toggle svg { width: 23px; height: 23px; }
.menu-toggle:hover { background: #eaeaef; }
body.menu-open { overflow: hidden; }
#siteMenu { position: fixed; inset: 0 auto 0 0; margin: 0; width: min(340px, calc(100vw - 24px)); max-width: none; height: 100vh; height: 100dvh; max-height: 100dvh; min-height: 0; padding: 24px 20px 20px; overflow: hidden; border: 0; border-right: 1px solid var(--line); border-radius: 0 22px 22px 0; background: #fff; color: #1d1d1f; box-shadow: 12px 0 60px #1d1d1f22; }
#siteMenu:not([open]) { display: none; }
#siteMenu[open] { display: flex; flex-direction: column; animation: menuSlideIn .22s ease-out; }
#siteMenu::backdrop { background: #1d1d1f52; backdrop-filter: blur(3px); animation: menuBackdropIn .22s ease-out; }
.menu-drawer-head { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
/* Dialog autofocus can match :focus-visible even after pointer activation. */
#siteMenu[data-pointer-focus] #closeMenu:focus { outline: none; }
#siteMenu .sidebar-label { display: block; margin: 26px 14px 10px; flex-shrink: 0; }
#siteMenu .nav { display: flex; flex-direction: column; flex: 1 1 auto; gap: 5px; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 0 12px; }
#siteMenu .nav button { width: 100%; min-height: 46px; padding: 12px 14px; gap: 12px; flex-shrink: 0; white-space: normal; border-radius: 12px; font-size: 13px; line-height: 1.5; }
#siteMenu .nav-icon svg { width: 19px; height: 19px; }
#siteMenu .nav-label { min-width: 0; overflow-wrap: anywhere; }
#siteMenu .account { display: block; flex-shrink: 0; margin-top: 10px; padding: 18px 0 0; border-top: 1px solid var(--line); }
#siteMenu .account-profile { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
#siteMenu .account-avatar { width: 36px; height: 36px; font-size: 13px; }
#siteMenu .account-copy { display: grid; gap: 2px; }
#siteMenu .account-name { font-size: 12px; }
#siteMenu .account-role { font-size: 11px; }
#siteMenu .logout-button { width: 100%; min-height: 42px; padding: 9px 14px; border: 1px solid var(--line); background: transparent; font-size: 12px; }
@keyframes menuSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes menuBackdropIn { from { background: transparent; } to { background: #1d1d1f52; } }
@media (max-width: 760px) {
 .workspace-bar-inner { min-height: 76px; padding: 14px 18px; gap: 12px; }
 .workspace-brand { width: 190px; flex-basis: 190px; }
}
@media (prefers-reduced-motion: reduce) {
 #siteMenu[open], #siteMenu::backdrop { animation: none; }
}


/* Popup content scrolls independently of its external close button. */
body.popup-open { overflow: hidden; }
#detail { width: min(720px, calc(100vw - 48px)); max-width: none; max-height: none; margin: auto; padding: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#detail > .popup-panel { max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; padding: 30px; border: 1px solid #e6e6eb; border-radius: 24px; background: #fff; color: #1d1d1f; box-shadow: 0 24px 100px #0000002b; }
#detail > .popup-close { position: absolute; top: -52px; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid #e5e5ea; border-radius: 50%; background: #fff; color: #1d1d1f; box-shadow: 0 4px 18px #00000018; }
#detail > .popup-close:hover { background: #eaf2ff; color: #0066cc; }
#detail > .popup-close svg { width: 22px; height: 22px; }
#detail .dialoghead > button { display: none; }
@media (max-width: 480px) {
 #detail > .popup-panel { padding: 20px; border-radius: 20px; }
}

/* Monthly visit report: consistent with the Science Med workspace. */
.sales-report{--report-blue:#0071e3;--report-green:#21866a;--report-ink:#202737;--report-muted:#79818e;color:var(--report-ink)}
.report-control,.report-actions,.report-month-switch,.report-section-title,.report-legend,.report-view,.report-visit-top,.report-visit-bottom,.report-form-actions{display:flex;align-items:center}
.report-control{justify-content:space-between;gap:20px;margin:8px 0 26px;flex-wrap:wrap}
.report-month-switch{gap:17px}
.report-month-switch>button{font-family:Arial,sans-serif;font-size:26px;line-height:1;width:38px;height:38px;padding:0;background:#fff;color:#78808f;border:1px solid #e5e8ee;border-radius:11px}
.report-overline{display:block;font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--report-muted);margin-bottom:5px}
.report-month-label{display:flex;align-items:center;gap:10px;font-size:22px!important;font-weight:650;color:var(--report-ink);margin:0;position:relative;cursor:pointer}
.report-month-label input{font-size:12px;width:24px!important;min-width:24px;padding:0;border:0;cursor:pointer;color:transparent;background:transparent}
.report-month-label input::-webkit-datetime-edit{display:none}
.report-actions{gap:8px;flex-wrap:wrap}
.report-actions button{display:inline-flex;align-items:center;gap:6px;font-size:12px;border-radius:9px;min-height:38px;padding:9px 12px;background:white;border:1px solid #e3e6ec;color:#526174;white-space:nowrap}
.report-actions .primary{background:var(--report-blue);color:white;border-color:var(--report-blue);box-shadow:0 3px 7px #0071e319}
.report-actions .ui-icon{width:16px;height:16px}
.report-actions #reportDemo{background:transparent;border-color:transparent;color:#738299}
.report-actions #reportDemo.report-demo-active{color:#96600d;background:#fff4dc}
.report-demo-banner{display:flex;gap:10px;flex-wrap:wrap;padding:13px 17px;background:#fff7e6;border:1px solid #f0d9a4;border-radius:10px;font-size:12px;color:#8a6218;margin-bottom:18px}
.report-demo-banner strong{white-space:nowrap}
.report-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:25px}
.report-metric{background:#fff;border:1px solid #e7eaf0;border-radius:14px;padding:19px 21px;box-shadow:0 2px 3px #162a4203}
.report-metric>div{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#646f80;font-weight:550}
.report-metric-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#f0f5fe;color:#608dc5}
.report-metric-icon .ui-icon{width:17px;height:17px}
.report-metric strong{display:block;font-size:34px;line-height:1.3;font-weight:650;letter-spacing:-1px;margin-top:7px;font-variant-numeric:tabular-nums}
.report-metric strong small{font-size:11px;font-weight:400;color:#8a929f;letter-spacing:0;margin-left:8px}
.report-metric p{font-size:10px;color:#8a929f;margin:5px 0 0;line-height:1.5}
.report-metric.visited strong{color:var(--report-green)}
.report-metric.visited .report-metric-icon{background:#edf8f3;color:#21866a}
.report-metric.pending .report-metric-icon{background:#fff7e9;color:#ca9b45}
.report-metric.places .report-metric-icon{background:#f2effb;color:#8a73bc}
.report-filters{display:flex;gap:13px;align-items:flex-end;margin-bottom:20px;flex-wrap:wrap}
.report-filters label{font-size:10px;font-weight:500;color:#7a8594;margin:0;min-width:148px}
.report-filters input,.report-filters select{height:39px;margin-top:6px;border:1px solid #e1e6ed;border-radius:8px;background:#fff;font-size:12px;color:#536070;box-shadow:none;padding:8px 12px}
.report-filters .report-search{flex:1;min-width:190px}
.report-self{display:flex;gap:7px;align-items:center;font-size:12px;padding:10px;color:#5d6f82}
.report-view{background:#e9edf2;border-radius:9px;padding:3px;gap:2px;height:39px;margin-left:auto}
.report-view button{font-size:11px;border:0;background:transparent;border-radius:7px;color:#7b8595;padding:7px 14px;min-height:30px}
.report-view button.selected{background:#fff;box-shadow:0 1px 4px #20354914;color:#235f9b}
.report-workspace{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:20px;align-items:start}
.sales-report .panel{border-radius:14px;border:1px solid #e5e9ef;box-shadow:0 2px 4px #1b355104;background:#fff;overflow:hidden}
.report-calendar.panel{padding:0}
.report-section-title{justify-content:space-between;gap:10px;padding:23px 23px 20px}
.report-section-title h2{font-size:15px!important;font-weight:650;margin:0!important;letter-spacing:0}
.report-section-title>span{font-size:11px;color:#8793a3}
.report-legend{gap:12px;font-size:9px;color:#7f8997;flex-wrap:wrap}
.report-legend>span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.report-legend i{height:5px;width:5px;border-radius:50%;background:#aeb9c9}
.report-legend .visited{background:#47a98b}
.report-legend .planned{background:#6e9ada}
.report-legend .skipped{background:#c0a27e}
.report-weekdays,.report-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.report-weekdays{background:#fafbfc;border-top:1px solid #eef1f5;border-bottom:1px solid #eef1f5}
.report-weekdays span{font-size:10px;color:#8993a2;text-align:center;padding:12px 3px;font-weight:500}
.report-calendar-grid{gap:1px;background:#edf0f4}
.report-day,.report-calendar-blank{background:#fff;min-height:113px;border:0;border-radius:0;padding:10px 8px;min-width:0}
.report-calendar-blank{background:#fbfcfd}
.report-day{display:flex;flex-direction:column;text-align:left;align-items:stretch;justify-content:flex-start;gap:7px;position:relative;color:#47556a;box-shadow:none;cursor:pointer;font-weight:400;transition:background .15s}
.report-day:hover{background:#f3f7fd;transform:none}
.report-day.is-weekend{background:#fcfcfd}
.report-day.is-selected{background:#eef5ff;outline:2px solid #80afe9;outline-offset:-2px;z-index:1}
.report-day-number{font-size:11px;font-weight:550;line-height:20px;display:flex;align-items:center;gap:4px}
.report-day.is-today .report-day-number{color:#0071e3;font-weight:700}
.report-today-label{font-size:8px;font-weight:400;color:#7ba0ca}
.report-day-entries{display:flex;flex-direction:column;gap:5px}
.report-day-entry{display:flex;align-items:flex-start;gap:3px;color:#6e8cb3;font-size:8px;line-height:1.5;background:#f0f5fd;padding:2px 3px;border-radius:3px}
.report-day-entry>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.report-day-entry i{flex-shrink:0;width:3px;height:3px;border-radius:50%;background:currentColor;margin-top:5px}
.report-day-entry.visited{background:#eef8f3;color:#408c73}
.report-day-entry.skipped{background:#f8f3ee;color:#aa8c69}
.report-day-entry.active{background:#fff5df;color:#bd9140}
.report-day-more{font-size:8px;color:#8c9aad;padding-left:4px}
.report-day-summary{font-size:8px;color:#8797ac;margin-top:auto}
.report-day.is-selected .report-day-entry{background:#fff}
.report-daily.panel{padding:0}
.report-daily-head{padding:22px 23px 19px;border-bottom:1px solid #edf0f5;background:linear-gradient(120deg,#f9fbff,#fff)}
.report-daily-head h2{font-size:24px!important;font-weight:650;margin:5px 0 7px!important;letter-spacing:-.5px}
.report-daily-head p{font-size:11px;color:#8692a2;margin:0}
.report-day-list{padding:0 20px;max-height:650px;overflow:auto}
.report-visit{padding:20px 0;border-bottom:1px solid #eaf0f5}
.report-visit:last-child{border-bottom:0}
.report-visit-top{justify-content:space-between;gap:5px;font-size:10px;color:#7d8b9e;font-variant-numeric:tabular-nums;margin-bottom:11px}
.report-status{display:inline-block;padding:3px 7px;border-radius:5px;background:#eef4fc;color:#6289bf;font-size:9px;white-space:nowrap}
.report-status.visited{background:#edf7f2;color:#2f8e6b}
.report-status.active{background:#fff5df;color:#b98526}
.report-status.skipped{background:#f4f0ec;color:#a28565}
.report-visit h3{font-size:13px!important;line-height:1.6;font-weight:650;margin:0 0 9px!important;color:#354258}
.report-person{display:flex;gap:5px;align-items:flex-start;font-size:10px!important;color:#72839a;margin:6px 0!important}
.report-person .ui-icon{height:13px;width:13px;flex-shrink:0;margin-top:1px}
.report-original,.report-owner{font-size:9px!important;color:#8c98a8;margin:6px 0!important}
.report-note{font-size:11px!important;line-height:1.85!important;background:#f7f9fc;border-left:2px solid #c9d9ed;padding:10px 11px;margin:14px 0!important;color:#64758b;white-space:pre-wrap;overflow-wrap:anywhere;border-radius:0 5px 5px 0}
.report-no-note{color:#9ba5b3;font-size:10px!important;padding:8px 0}
.report-visit-bottom{justify-content:space-between;gap:8px;margin-top:12px;font-size:9px;color:#9ca6b4}
.report-visit-bottom button{display:inline-flex;gap:4px;align-items:center;font-size:10px;color:#4d83bd;background:transparent;border:0;padding:4px 0;min-height:25px;border-radius:3px}
.report-visit-bottom .ui-icon{height:12px;width:12px}
.report-day-add{display:block;width:calc(100% - 40px);margin:8px 20px 20px;border:1px dashed #c7d8eb;border-radius:8px;background:#f8fbff;font-size:11px;color:#6592c4;min-height:40px;padding:10px}
.report-empty{text-align:center;padding:45px 10px 35px;color:#a0adbd}
.report-empty>.ui-icon{width:31px;height:31px;color:#b2c6de;margin-bottom:12px}
.report-empty h3{font-size:13px!important;color:#718298;margin:0 0 8px!important;font-weight:500}
.report-empty p{font-size:11px;line-height:1.9;margin:0}
.report-footnote{color:#96a0ae;font-size:10px;margin:18px 0 5px;line-height:1.8}
.report-list.panel{padding:0 23px 12px}
.report-list .report-section-title{padding-left:0;padding-right:0}
.report-list-day{margin:5px 0 18px}
.report-list-day>h3{font-size:12px;padding:12px 14px;background:#f4f7fb;border-radius:7px;color:#66819f;margin:0}
.report-list .report-visit{display:grid;grid-template-columns:145px 1fr 1fr;column-gap:20px;padding:17px 10px;align-items:start}
.report-list .report-visit-top{grid-column:1;grid-row:1;justify-content:flex-start;gap:12px}
.report-list .report-visit h3{grid-column:2;grid-row:1}
.report-list .report-person{grid-column:2}
.report-list .report-owner,.report-list .report-original{grid-column:2}
.report-list .report-note,.report-list .report-no-note{grid-column:3;grid-row:1 / span 4;margin-top:0!important}
.report-list .report-visit-bottom{grid-column:1 / span 3}
.report-dialog{width:min(660px,calc(100vw - 28px))!important;max-width:660px!important}
.report-entry-form{margin-top:10px}
.report-entry-form label{display:flex;flex-direction:column;gap:6px;font-size:12px!important;color:#64748a;margin:0 0 15px}
.report-entry-form input,.report-entry-form select,.report-entry-form textarea{font-size:13px!important;border:1px solid #dfe6ef;border-radius:8px;padding:10px 12px;margin:0;box-shadow:none}
.report-entry-form textarea{resize:vertical;line-height:1.7}
.report-entry-form input:disabled,.report-entry-form select:disabled{background:#f4f6f9;color:#8997a7}
.report-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.report-form-actions{justify-content:flex-end;gap:10px;border-top:1px solid #e9eef5;padding-top:17px;margin-top:15px}
.report-form-actions button{font-size:12px;border-radius:8px}
.report-loading{padding:70px 20px;text-align:center;color:#8291a5;font-size:13px}
@media(min-width:1450px){.report-day,.report-calendar-blank{min-height:125px}.report-day-entry{font-size:9px}.report-visit h3{font-size:14px!important}.report-note{font-size:12px!important}}
@media(max-width:1050px){.report-workspace{grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr);gap:14px}.report-metric{padding:16px}.report-metric>div{font-size:11px}.report-section-title{padding:19px 15px}.report-legend{gap:7px;font-size:8px}.report-day,.report-calendar-blank{padding:8px 5px;min-height:104px}.report-actions button{padding:8px 10px}.report-control{gap:15px}}
@media(max-width:820px){.report-workspace{grid-template-columns:1fr}.report-day,.report-calendar-blank{min-height:103px}.report-day-entries{gap:5px}.report-day-entry{font-size:9px}.report-day-list{max-height:none}.report-metrics{gap:9px}.report-metric{padding:14px 12px}.report-metric p{font-size:9px}.report-control{margin-bottom:18px}.report-filters{gap:10px}.report-legend{font-size:9px}.report-daily-head h2{font-size:22px!important}.report-list .report-visit{grid-template-columns:105px 1fr}.report-list .report-note,.report-list .report-no-note{grid-column:2;grid-row:auto}.report-list .report-visit-bottom{grid-column:1 / span 2}}
@media(max-width:520px){.report-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}.report-metric strong{font-size:29px}.report-metric>div{font-size:11px}.report-metric p{font-size:9px}.report-month-label{font-size:20px!important}.report-month-switch{gap:12px}.report-actions{gap:5px;width:100%}.report-actions button{font-size:10px;padding:7px 9px;min-height:35px}.report-actions #reportDemo{padding-left:0;margin-right:auto}.report-actions #reportReload span{display:none}.report-filters label{min-width:0;width:calc(50% - 5px);flex:auto}.report-filters .report-search{min-width:0;width:100%;flex-basis:100%}.report-view{margin-left:0;width:100%;justify-content:center}.report-view button{flex:1}.report-day,.report-calendar-blank{min-height:83px;padding:6px 3px;gap:4px}.report-day-entries{gap:3px}.report-day-number{font-size:10px}.report-day-entry{font-size:7px;padding:2px}.report-day-entry i{display:none}.report-today-label{font-size:7px}.report-day-summary{font-size:7px}.report-section-title{padding:16px 12px}.report-section-title h2{font-size:13px!important}.report-legend{font-size:8px;gap:6px}.report-weekdays span{padding:9px 2px}.report-form-grid{gap:0 10px}.report-list .report-visit{display:block}.report-list .report-visit-top{justify-content:space-between}.report-list .report-note{margin-top:10px!important}.report-demo-banner{font-size:11px;gap:5px}.report-footnote{font-size:9px}}
@media print{.workspace-bar,.page-back,#sync,.report-actions,.report-filters,.report-day-add,.report-visit-bottom button{display:none!important}.sales-report .panel,.report-metric{box-shadow:none}.report-workspace{grid-template-columns:1fr}.report-day-list{max-height:none}.report-day{break-inside:avoid}.report-visit{break-inside:avoid}}

.clinic-filterbar > #clinicType { max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.clinic-address { color: #6e6e73; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }

/* Route creation starts with an area, then a local clinic checklist. */
.route-wizard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.route-wizard button{min-width:0;font-size:13px;padding:14px 10px}
.route-delete-button{color:#b13b3b;background:#fff1f1}.route-delete-confirm{background:#bb3535!important;color:#fff!important;border-color:#bb3535!important}
.route-topbar{gap:12px;flex-wrap:wrap}.route-top-actions{margin:0 0 16px;justify-content:flex-end;flex-wrap:wrap}.route-top-actions>button{white-space:normal}
@media(max-width:520px){.route-top-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}.route-top-actions>button{padding:13px 10px;font-size:12px;min-height:48px}}
.route-area-picker>h2{margin:7px 0 12px}.route-area-picker>.caption{margin-top:0}
.route-districts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0}
.route-district{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;padding:20px;border:1px solid #e3e7ed;border-radius:16px;background:#fff;color:#1d1d1f}
.route-district.active,.route-district:hover{background:#edf5ff;border-color:#b7d4fa}
.route-district strong{display:block;font-size:16px;font-weight:600}.route-district small{display:block;margin-top:6px;color:#6e6e73;font-size:12px}.route-district>span:last-child{color:#0071e3;font-size:18px}
.route-retained{padding:15px 18px;background:#edf5ff;color:#235e91;border-radius:12px;font-size:13px}
.route-picker>.split{gap:18px;align-items:flex-start}.route-picker>.split h2{margin:6px 0 20px}.route-area-count{display:inline-block;font-weight:400;color:#6e6e73;font-size:14px;margin-left:9px;white-space:nowrap}
.route-clinic-search{max-width:520px;margin:16px 0}.route-clinic-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 24px}
.route-clinic-choice{display:flex;align-items:flex-start;gap:13px;padding:18px;border:1px solid #e3e7ed;border-radius:14px;background:#fff;font-weight:400;min-width:0;margin:0}
.route-clinic-choice.chosen{border-color:#88b9f4;background:#f1f7ff}.route-clinic-choice>input[type=checkbox]{flex-shrink:0;margin-top:4px;width:22px;height:22px;min-height:22px;accent-color:#0071e3}.route-clinic-choice>span{min-width:0;overflow-wrap:anywhere}.route-clinic-choice strong{font-size:14px;font-weight:600;display:block;line-height:1.7}.route-clinic-choice small{display:block;color:#6e6e73;font-size:12px;line-height:1.8;margin-top:5px}.route-clinic-choice:has(input:disabled){opacity:.5}.route-clinic-choice:focus-within{outline:2px solid #0071e3;outline-offset:2px}
.route-selection-footer{border-top:1px solid #e3e7ed;padding-top:18px}.route-selection-footer>p{font-weight:500;color:#235e91;font-size:14px}.route-selected{margin-top:18px}.route-selected>summary{color:#0071e3;font-size:13px;padding:10px 0}.route-selected-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #edf0f4;font-size:13px}.route-selected-row>span{min-width:0;overflow-wrap:anywhere}.route-selected-row small{display:block;color:#6e6e73;margin-top:5px}.route-selected-row>button{flex-shrink:0;padding:10px 14px}
@media(max-width:820px){.route-districts{grid-template-columns:repeat(2,minmax(0,1fr))}.route-clinic-choices{grid-template-columns:1fr}.route-picker>.split{flex-wrap:wrap}.route-picker>.split>button{margin-bottom:8px}}
@media(max-width:520px){.route-wizard{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.route-wizard button{font-size:12px;min-height:48px}.route-districts{gap:9px}.route-district{padding:16px 12px}.route-district strong{font-size:14px}.route-district small{font-size:11px}.route-clinic-choice{padding:15px 12px}.route-selection-footer .toolbar{align-items:stretch;flex-direction:column}.route-selection-footer .toolbar>button{width:100%}.route-area-count{font-size:12px}}

/* Report row editing and recoverable removal. */
.report-row-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.report-row-actions .report-remove-button{color:#bb6464}.report-row-actions button{white-space:nowrap}.report-remove-primary{background:#c74d4d!important;border-color:#c74d4d!important;color:#fff!important}.report-remove-confirm h3{font-size:17px;line-height:1.7;margin:20px 0 9px}.report-remove-confirm>p{font-size:12px;line-height:1.9;color:#7b899e}.report-remove-note{padding:12px 15px;background:#f6f8fb;border-radius:8px}.report-trash-banner{padding:15px 18px;border:1px solid #eadfcf;background:#fcf8f2;border-radius:10px;display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:#978062;margin:0 0 22px}.is-trash .report-metrics,.is-trash #reportDemo,.is-trash #reportAdd,.is-trash #reportExport{display:none}.report-deleted-label{font-size:10px;color:#ae8e71}.report-deleted-row{opacity:.85}.report-list .report-row-actions{margin-left:auto}.report-actions #reportTrash{background:#f9fafc;color:#7e8997}.is-trash .report-actions #reportTrash{color:#0071e3;background:#edf5ff;border-color:#cbdff7}

/* Persistent drafts and outbox */
.offline-status{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 16px;margin-bottom:16px;border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc;font-size:.9rem}.offline-status button,.offline-draft-notice button{padding:7px 12px}.offline-preview{white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;font-size:.85rem}.offline-draft-notice{margin-bottom:12px}

.google-signin-busy{pointer-events:none;opacity:.65}