/*
 * Homeo Clinic Manager — front-end styles.
 * Everything is scoped under .hcm-app / .hcm-auth / .hcm-book so it does not
 * leak into, or get overridden by, the site theme.
 *
 * .hcm-book is the public booking page, which has no dashboard around it. It
 * has to carry the palette itself: without it every var(--hcm-*) resolves to
 * nothing and the calendar loses its borders, its panel and its selected day.
 */

.hcm-app,
.hcm-auth,
.hcm-book {
	--hcm-green: #008000;
	--hcm-green-dark: #056605;
	--hcm-green-soft: #eaf4ea;
	--hcm-yellow: #ffde59;
	--hcm-ink: #2a2927;
	--hcm-ink-2: #4f4e4a;
	--hcm-muted: #7b7a75;
	--hcm-line: #e3e5df;
	--hcm-line-2: #f0f1ee;
	--hcm-bg: #f4f5f2;
	--hcm-card: #ffffff;
	--hcm-danger: #b3261e;
	--hcm-danger-soft: #fdecea;
	--hcm-radius: 12px;
	--hcm-radius-sm: 9px;
	--hcm-shadow: 0 1px 2px rgba(20, 20, 18, .05), 0 6px 20px rgba(20, 20, 18, .05);
	--hcm-side-w: 246px;
	--hcm-canvas: 1340px;
	--hcm-gutter: 2rem;

	box-sizing: border-box;
	color: var(--hcm-ink);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.hcm-app *,
.hcm-auth *,
.hcm-app *::before,
.hcm-auth *::before,
.hcm-app *::after,
.hcm-auth *::after { box-sizing: border-box; }

/* ------------------------------------------------------------------ *
 * Escaping the theme's content column
 *
 * Block themes constrain post content to a reading measure — Twenty
 * Twenty-Five uses about 650px — which is right for an article and far too
 * narrow for an application with a sidebar. This widens the app back out,
 * centred on the page and capped at a sensible canvas. The negative margins
 * resolve to zero when the parent is already wide enough, so a full-width
 * template or a page builder is left alone.
 * ------------------------------------------------------------------ */

.hcm-app,
.hcm-auth {
	--hcm-breakout: min(var(--hcm-canvas), calc(100vw - var(--hcm-gutter)));

	/* WordPress's constrained-layout rule caps every child of the content area
	   with "max-width: <content-size>" and centres it with
	   "margin-inline: auto !important". Both have to be overridden, so the
	   !important here is answering an !important, not shouting for no reason.

	   The margin is written as (100% - breakout) / 2 rather than auto because
	   it has to work in both directions: positive to centre inside a parent
	   that is wider than the canvas, negative to spill symmetrically out of a
	   parent that is narrower. "auto" cannot do the second. */
	width: var(--hcm-breakout) !important;
	max-width: var(--hcm-breakout) !important;
	margin-left: calc((100% - var(--hcm-breakout)) / 2) !important;
	margin-right: calc((100% - var(--hcm-breakout)) / 2) !important;
}

/* A sign-in form does not want a 1340px canvas. */
.hcm-auth { --hcm-canvas: 1000px; }

/* [homeo_clinic width="full"] — edge to edge. */
.hcm-app--full,
.hcm-auth--full { --hcm-canvas: 100vw; }

/* [homeo_clinic width="contained"] — stay inside the theme's column, for
   themes that clip overflow or page builders that manage width themselves. */
.hcm-app--contained,
.hcm-auth--contained {
	width: auto !important;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.hcm-app h1, .hcm-app h2, .hcm-app h3,
.hcm-auth h1, .hcm-auth h2, .hcm-auth h3 {
	margin: 0;
	font-weight: 650;
	letter-spacing: -.011em;
	line-height: 1.25;
	color: var(--hcm-ink);
}

.hcm-app p, .hcm-auth p { margin: 0; }

/* ------------------------------------------------------------------ *
 * Buttons, links, pills
 * ------------------------------------------------------------------ */

.hcm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 17px;
	border: 1px solid transparent;
	border-radius: var(--hcm-radius-sm);
	background: transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .14s ease, border-color .14s ease, color .14s ease, opacity .14s ease;
}

/* Clicking a control should not leave a box around it. Keyboard focus still
   gets a clear green ring — this only suppresses the ring for pointer focus,
   including the browser's own default, which showed as a black rectangle on
   the disease bar. */
.hcm-app :focus:not(:focus-visible),
.hcm-auth :focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.hcm-btn:focus-visible,
.hcm-app a:focus-visible,
.hcm-auth a:focus-visible,
.hcm-app button:focus-visible,
.hcm-auth button:focus-visible,
.hcm-app input:focus-visible,
.hcm-app select:focus-visible,
.hcm-app textarea:focus-visible,
.hcm-auth input:focus-visible {
	outline: 2px solid var(--hcm-green);
	outline-offset: 2px;
	border-radius: var(--hcm-radius-sm);
}

.hcm-btn--primary { background: var(--hcm-green); color: #fff; }
.hcm-btn--primary:hover { background: var(--hcm-green-dark); color: #fff; }

.hcm-btn--ghost {
	background: var(--hcm-card);
	border-color: var(--hcm-line);
	color: var(--hcm-ink);
}
.hcm-btn--ghost:hover { border-color: #cdd0c8; background: #fbfbf9; color: var(--hcm-ink); }

.hcm-btn--danger { background: transparent; border-color: #eccdcb; color: var(--hcm-danger); }
.hcm-btn--danger:hover { background: var(--hcm-danger-soft); color: var(--hcm-danger); }

.hcm-btn--sm { padding: 7px 13px; font-size: 13px; }
.hcm-btn--block { width: 100%; }
.hcm-btn[disabled] { opacity: .55; cursor: default; }

.hcm-link { color: var(--hcm-green-dark); text-decoration: none; font-weight: 600; }
.hcm-link:hover { text-decoration: underline; }
.hcm-link--muted { color: var(--hcm-muted); font-weight: 500; font-size: 13px; }

.hcm-linkbtn {
	background: none; border: 0; padding: 0; font: inherit;
	color: var(--hcm-green-dark); font-weight: 600; cursor: pointer; text-decoration: underline;
}

.hcm-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 650;
	letter-spacing: .01em;
	background: var(--hcm-line-2);
	color: var(--hcm-ink-2);
	white-space: nowrap;
}
.hcm-pill--active { background: var(--hcm-green-soft); color: var(--hcm-green-dark); }
.hcm-pill--follow_up { background: #fff6da; color: #7a5c00; }
.hcm-pill--cured { background: #e8f0fe; color: #1a4b8c; }
.hcm-pill--closed { background: var(--hcm-line-2); color: var(--hcm-muted); }
.hcm-pill--date { background: var(--hcm-green-soft); color: var(--hcm-green-dark); font-variant-numeric: tabular-nums; }

.hcm-bubble {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	flex: 0 0 34px;
	border-radius: 50%;
	background: var(--hcm-green-soft);
	color: var(--hcm-green-dark);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .02em;
}
.hcm-bubble--lg { width: 44px; height: 44px; flex-basis: 44px; font-size: 15px; }
.hcm-bubble--xl { width: 58px; height: 58px; flex-basis: 58px; font-size: 19px; }

.hcm-amount { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hcm-invno { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--hcm-muted); }
.hcm-req { color: var(--hcm-danger); }

/* ------------------------------------------------------------------ *
 * Notices and toast
 * ------------------------------------------------------------------ */

.hcm-notice {
	padding: 11px 14px;
	border-radius: var(--hcm-radius-sm);
	font-size: 14px;
	margin: 0 0 16px;
	border: 1px solid transparent;
}
.hcm-notice--success { background: var(--hcm-green-soft); border-color: #cfe4cf; color: #17561a; }
.hcm-notice--error { background: var(--hcm-danger-soft); border-color: #f2cfcc; color: #8c1d18; }

.hcm-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 100000;
	max-width: min(420px, calc(100vw - 32px));
	padding: 12px 18px;
	border-radius: 10px;
	background: var(--hcm-ink);
	color: #fafaf7;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 8px 30px rgba(20, 20, 18, .28);
}
.hcm-toast--error { background: var(--hcm-danger); }

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

.hcm-form { display: flex; flex-direction: column; gap: 15px; }
.hcm-form--inline { gap: 0; margin-top: 4px; }

.hcm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hcm-field__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.hcm-field label,
.hcm-field > label {
	font-size: 13px;
	font-weight: 600;
	color: var(--hcm-ink-2);
	letter-spacing: .005em;
}

.hcm-app input[type="text"],
.hcm-app input[type="email"],
.hcm-app input[type="tel"],
.hcm-app input[type="url"],
.hcm-app input[type="date"],
.hcm-app input[type="number"],
.hcm-app input[type="search"],
.hcm-app input[type="password"],
.hcm-app select,
.hcm-app textarea,
.hcm-auth input[type="text"],
.hcm-auth input[type="email"],
.hcm-auth input[type="tel"],
.hcm-auth input[type="password"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius-sm);
	background: var(--hcm-card);
	color: var(--hcm-ink);
	font: inherit;
	font-size: 14.5px;
	line-height: 1.4;
	min-height: 42px;
	appearance: none;
	-webkit-appearance: none;
}

.hcm-app textarea, .hcm-auth textarea { resize: vertical; min-height: 66px; }

.hcm-app input::placeholder, .hcm-auth input::placeholder,
.hcm-app textarea::placeholder { color: #a9a8a2; }

.hcm-app input:focus, .hcm-app select:focus, .hcm-app textarea:focus,
.hcm-auth input:focus {
	border-color: var(--hcm-green);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 128, 0, .12);
}

.hcm-select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b7a75' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	padding-right: 34px;
}

.hcm-hint { font-size: 12.5px; color: var(--hcm-muted); }

.hcm-check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--hcm-ink-2); cursor: pointer; }
.hcm-check input { width: 16px; height: 16px; accent-color: var(--hcm-green); }

.hcm-passwrap { position: relative; }
.hcm-passwrap input { padding-right: 46px; }
.hcm-peek {
	position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; padding: 0;
	background: none; border: 0; border-radius: 8px;
	color: var(--hcm-muted); cursor: pointer;
}
.hcm-peek:hover { color: var(--hcm-ink); background: var(--hcm-line-2); }
.hcm-peek svg { width: 18px; height: 18px; display: block; }
.hcm-peek .hcm-peek__hide { display: none; }
.hcm-peek.is-on .hcm-peek__show { display: none; }
.hcm-peek.is-on .hcm-peek__hide { display: block; }

.hcm-otp {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 26px !important;
	letter-spacing: .34em;
	text-align: center;
	padding: 12px !important;
	min-height: 56px !important;
}

.hcm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.hcm-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }

.hcm-rule { border: 0; border-top: 1px solid var(--hcm-line); margin: 6px 0; }
.hcm-subhead { font-size: 14px; font-weight: 650; margin: 4px 0 0; }

.hcm-form__actions {
	display: flex; justify-content: flex-end; gap: 10px;
	padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--hcm-line-2);
}

/* Any class of ours that sets a display value beats the browser's own
   [hidden] rule, because author styles outrank the user agent's. That is how
   the import's buttons came to sit there before a file had been chosen. One
   rule, so it can never happen again to anything. */
.hcm-app [hidden],
.hcm-auth [hidden],
.hcm-book [hidden] { display: none !important; }

/* The rupee sign gets its own segment rather than floating over the input.
   As an overlay it collided with the digits, because the generic
   ".hcm-app input[type=number]" padding rule outranked the offset applied
   here. A real input group cannot drift out of alignment that way. */
.hcm-money {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius-sm);
	background: var(--hcm-card);
	overflow: hidden;
}
.hcm-money__sym {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 13px;
	background: var(--hcm-line-2);
	border-right: 1px solid var(--hcm-line);
	color: var(--hcm-ink-2);
	font-size: 15px;
	font-weight: 650;
	line-height: 1;
}
.hcm-app .hcm-money input[type="number"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.hcm-app .hcm-money input[type="number"]:focus { box-shadow: none; }
.hcm-money:focus-within {
	border-color: var(--hcm-green);
	box-shadow: 0 0 0 3px rgba(0, 128, 0, .12);
}

.hcm-inputchips { display: flex; flex-direction: column; gap: 7px; }
.hcm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hcm-chip {
	padding: 5px 10px; border: 1px solid var(--hcm-line); border-radius: 999px;
	background: var(--hcm-card); font: inherit; font-size: 12px; font-weight: 600;
	color: var(--hcm-ink-2); cursor: pointer;
}
.hcm-chip:hover, .hcm-chip.is-on { border-color: var(--hcm-green); background: var(--hcm-green-soft); color: var(--hcm-green-dark); }

/* Repeatable rows */
.hcm-repeat { display: flex; flex-direction: column; gap: 9px; }
.hcm-repeat__rows { display: flex; flex-direction: column; gap: 8px; }
.hcm-repeat__row { display: flex; align-items: center; gap: 8px; }
.hcm-repeat__row--med { flex-wrap: wrap; }
.hcm-repeat__row--med > input[name="medicines[]"] { flex: 1 1 190px; }
.hcm-repeat__n {
	flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--hcm-line-2); color: var(--hcm-muted);
	font-size: 11.5px; font-weight: 700;
}
.hcm-repeat__row > input { flex: 1 1 auto; min-width: 0; }
.hcm-mini { flex: 0 1 108px !important; }
/* "Dose/Pills/Drops Per Day" needs room to be read, not just typed into. */
.hcm-mini--dose { flex: 0 1 196px !important; }
.hcm-repeat__x {
	flex: 0 0 30px; width: 30px; height: 30px; border: 0; border-radius: 7px;
	background: transparent; color: var(--hcm-muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.hcm-repeat__x:hover { background: var(--hcm-danger-soft); color: var(--hcm-danger); }

/* ------------------------------------------------------------------ *
 * Auth screens
 * ------------------------------------------------------------------ */

.hcm-auth {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	min-height: 560px;
	background: var(--hcm-bg);
	border: 1px solid var(--hcm-line);
	border-radius: 16px;
	overflow: hidden;
}

.hcm-auth__brand {
	background: var(--hcm-ink);
	color: #fafaf7;
	padding: 46px 42px;
	display: flex;
	align-items: center;
}
.hcm-auth__brandinner { max-width: 380px; }
.hcm-auth__mark { color: var(--hcm-yellow); display: block; margin-bottom: 20px; }
/* Needs the extra class to outrank the ".hcm-auth h2" reset above, which would
   otherwise paint this charcoal-on-charcoal and make it disappear. */
.hcm-auth .hcm-auth__brandtitle { color: #fafaf7; font-size: 25px; margin-bottom: 12px; }
.hcm-auth__brandtext { color: #c6c5bf; font-size: 15px; line-height: 1.6; }
.hcm-auth__points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hcm-auth__points li {
	position: relative; padding-left: 26px; color: #dedcd4; font-size: 14px;
}
.hcm-auth__points li::before {
	content: ""; position: absolute; left: 0; top: 8px;
	width: 14px; height: 7px; border-left: 2px solid var(--hcm-yellow); border-bottom: 2px solid var(--hcm-yellow);
	transform: rotate(-45deg);
}

.hcm-auth__panel { display: flex; align-items: center; justify-content: center; padding: 46px 34px; background: var(--hcm-card); }
.hcm-auth__card { width: 100%; max-width: 380px; }
.hcm-auth__title { font-size: 24px; margin-bottom: 6px; }
.hcm-auth__subtitle { color: var(--hcm-muted); font-size: 14.5px; margin-bottom: 22px; }
.hcm-auth__foot { margin-top: 16px; font-size: 14px; color: var(--hcm-muted); text-align: center; }

/* ------------------------------------------------------------------ *
 * App shell
 * ------------------------------------------------------------------ */

.hcm-app {
	position: relative;
	display: grid;
	grid-template-columns: var(--hcm-side-w) minmax(0, 1fr);
	min-height: 640px;
	background: var(--hcm-bg);
	border: 1px solid var(--hcm-line);
	border-radius: 16px;
	overflow: hidden;
}

.hcm-side {
	background: var(--hcm-ink);
	color: #d9d8d1;
	display: flex;
	flex-direction: column;
	padding: 18px 12px;
	min-width: 0;
}

.hcm-side__head { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; }
.hcm-side__logo { color: var(--hcm-yellow); display: inline-flex; }
.hcm-side__name {
	font-size: 14.5px; font-weight: 650; color: #fafaf7; letter-spacing: -.01em;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hcm-side__close { display: none; margin-left: auto; background: none; border: 0; color: #9c9b94; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; }

.hcm-nav { display: flex; flex-direction: column; gap: 2px; }
.hcm-nav__item {
	display: flex; align-items: center; gap: 11px;
	padding: 10px 11px; border-radius: 9px;
	color: #c3c2ba; text-decoration: none; font-size: 14.5px; font-weight: 550;
	transition: background-color .14s ease, color .14s ease;
}
.hcm-nav__item:hover { background: rgba(255, 255, 255, .07); color: #fafaf7; }
.hcm-nav__item.is-active { background: var(--hcm-green); color: #fff; font-weight: 650; }
.hcm-nav__item.is-active .hcm-nav__count { background: rgba(255, 255, 255, .22); color: #fff; }
.hcm-nav__icon { flex: 0 0 19px; }
.hcm-nav__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcm-nav__count {
	flex: 0 0 auto; padding: 1px 7px; border-radius: 999px;
	background: rgba(255, 255, 255, .1); color: #b6b5ad;
	font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.hcm-side__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .09); }
.hcm-nav__item--sm { font-size: 13.5px; }

.hcm-main { display: flex; flex-direction: column; min-width: 0; background: var(--hcm-bg); }

.hcm-top {
	display: flex; align-items: center; gap: 12px;
	padding: 13px 22px;
	background: var(--hcm-card);
	border-bottom: 1px solid var(--hcm-line);
}
.hcm-top__title { font-size: 15px; font-weight: 650; flex: 1 1 auto; }

.hcm-burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; flex-direction: column; gap: 4px; }
.hcm-burger span { display: block; width: 20px; height: 2px; background: var(--hcm-ink); border-radius: 2px; }

.hcm-menu { position: relative; flex: 0 0 auto; }
.hcm-avatar {
	display: flex; align-items: center; gap: 9px;
	padding: 5px 9px 5px 5px; border: 1px solid transparent; border-radius: 999px;
	background: none; font: inherit; cursor: pointer; color: var(--hcm-ink);
}
.hcm-avatar:hover { background: var(--hcm-line-2); }
.hcm-avatar__initials {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--hcm-green); color: #fff; font-size: 11.5px; font-weight: 700;
}
.hcm-avatar__name { font-size: 14px; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hcm-menu__panel {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
	min-width: 232px; padding: 6px;
	background: var(--hcm-card); border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius); box-shadow: var(--hcm-shadow);
}
.hcm-menu__head { padding: 9px 11px 11px; border-bottom: 1px solid var(--hcm-line-2); margin-bottom: 5px; }
.hcm-menu__head strong { display: block; font-size: 14px; }
.hcm-menu__head span { display: block; font-size: 12.5px; color: var(--hcm-muted); overflow: hidden; text-overflow: ellipsis; }
.hcm-menu__panel a {
	display: block; padding: 9px 11px; border-radius: 8px;
	color: var(--hcm-ink-2); text-decoration: none; font-size: 14px;
}
.hcm-menu__panel a:hover { background: var(--hcm-line-2); color: var(--hcm-ink); }
.hcm-menu__danger { color: var(--hcm-danger) !important; }
.hcm-menu__danger:hover { background: var(--hcm-danger-soft) !important; }
.hcm-menu__sep { border-top: 1px solid var(--hcm-line-2); margin-top: 5px; padding-top: 11px !important; border-radius: 0 0 8px 8px !important; }

.hcm-content { flex: 1 1 auto; padding: 22px; min-width: 0; }

.hcm-scrim { display: none; }
.hcm-tabs { display: none; }

/* ------------------------------------------------------------------ *
 * Page furniture
 * ------------------------------------------------------------------ */

.hcm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.hcm-head--sub { margin-top: 28px; }
.hcm-head--tight { margin: 18px 0 12px; align-items: center; }
.hcm-head__left { min-width: 0; }
.hcm-head__title { font-size: 22px; }
.hcm-head__title--sm { font-size: 18px; }
.hcm-head__sub { color: var(--hcm-muted); font-size: 13.5px; margin-top: 3px; }

.hcm-back {
	display: inline-flex; align-items: center; gap: 5px; margin-bottom: 14px;
	color: var(--hcm-muted); text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.hcm-back:hover { color: var(--hcm-ink); }

.hcm-filters {
	display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
	margin-bottom: 16px;
}
.hcm-search { position: relative; flex: 1 1 260px; min-width: 0; max-width: 440px; }
.hcm-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--hcm-muted); pointer-events: none; }
.hcm-search input { padding-left: 34px !important; }
.hcm-filters .hcm-select { width: auto; min-width: 148px; flex: 0 0 auto; }
.hcm-datefield { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--hcm-muted); font-weight: 600; }
.hcm-datefield input { width: auto !important; min-width: 145px; }

/* Cards */
.hcm-card {
	background: var(--hcm-card);
	border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius);
	padding: 18px;
	min-width: 0;
}
.hcm-card--flat { box-shadow: none; }
.hcm-card--danger { border-color: #eccdcb; margin-top: 20px; }
.hcm-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.hcm-card__head h2 { font-size: 16px; }
.hcm-card__note { font-size: 12.5px; color: var(--hcm-muted); }
.hcm-card__mini { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hcm-muted); margin-bottom: 8px; }

.hcm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.hcm-prose { font-size: 14px; color: var(--hcm-ink-2); line-height: 1.6; }
.hcm-prose--muted { color: var(--hcm-muted); }
.hcm-prose--sm { font-size: 13.5px; }

/* Stats */
.hcm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.hcm-stat {
	display: flex; flex-direction: column; gap: 3px;
	background: var(--hcm-card); border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius); padding: 16px; text-decoration: none; color: inherit;
}
a.hcm-stat:hover { border-color: #cdd0c8; }
.hcm-stat__label { font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--hcm-muted); }
.hcm-stat__value { font-size: 27px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hcm-stat__foot { font-size: 12.5px; color: var(--hcm-muted); }

/* Simple lists */
.hcm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hcm-list__item {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 11px 0; border-bottom: 1px solid var(--hcm-line-2);
}
.hcm-list__item:last-child { border-bottom: 0; padding-bottom: 0; }
.hcm-list__main { text-decoration: none; color: inherit; min-width: 0; display: block; }
.hcm-list__main strong { display: block; font-size: 14.5px; font-weight: 600; }
.hcm-list__main span { display: block; font-size: 12.5px; color: var(--hcm-muted); }
.hcm-list__main:hover strong { color: var(--hcm-green-dark); }

/* Tables */
.hcm-tablewrap {
	background: var(--hcm-card);
	border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius);
	overflow-x: auto;
}
.hcm-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 680px; }
.hcm-table th {
	text-align: left; padding: 11px 14px;
	font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--hcm-muted); border-bottom: 1px solid var(--hcm-line); white-space: nowrap;
}
.hcm-table td { padding: 12px 14px; border-bottom: 1px solid var(--hcm-line-2); vertical-align: middle; }
.hcm-table tbody tr:last-child td { border-bottom: 0; }
.hcm-table tbody tr:hover { background: #fbfbf9; }

.hcm-cellname { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; min-width: 0; }
.hcm-cellname strong { display: block; font-weight: 600; font-size: 14px; }
.hcm-cellname small { display: block; font-size: 12px; color: var(--hcm-muted); }
.hcm-cellname:hover strong { color: var(--hcm-green-dark); }

/* Tiles */
.hcm-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 14px; }
.hcm-tile {
	display: flex; flex-direction: column; gap: 13px;
	background: var(--hcm-card); border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius); padding: 17px;
}
.hcm-tile__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hcm-tile__logo { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--hcm-line-2); }
.hcm-tile__title { font-size: 16px; }
.hcm-tile__sub { font-size: 12.5px; color: var(--hcm-muted); }
.hcm-tile__foot { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }

.hcm-meta { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.hcm-meta > div { display: flex; gap: 10px; align-items: baseline; }
.hcm-meta dt { flex: 0 0 88px; font-size: 12px; color: var(--hcm-muted); font-weight: 600; }
.hcm-meta dd { margin: 0; font-size: 13.5px; min-width: 0; word-break: break-word; }

/* Fact bar */
.hcm-factbar {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px 18px;
	margin: 0 0 18px; padding: 15px 17px;
	background: var(--hcm-card); border: 1px solid var(--hcm-line); border-radius: var(--hcm-radius);
}
.hcm-factbar--inset { background: #fbfbf9; margin-bottom: 14px; }
.hcm-factbar > div { min-width: 0; }
.hcm-factbar dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hcm-muted); margin-bottom: 2px; }
.hcm-factbar dd { margin: 0; font-size: 14px; font-weight: 600; word-break: break-word; }

/* Patient profile header */
.hcm-profile { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.hcm-profile__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hcm-profile__name { font-size: 24px; }
.hcm-profile__sub { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 5px; font-size: 13px; color: var(--hcm-muted); }
.hcm-profile__actions { display: flex; gap: 8px; }

/* Disease case blocks */
.hcm-case {
	background: var(--hcm-card); border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius); margin-bottom: 12px; overflow: hidden;
}
.hcm-case__head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; flex-wrap: wrap; }
.hcm-case__toggle {
	display: flex; align-items: center; gap: 10px; flex: 1 1 auto;
	background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; min-width: 0;
	color: var(--hcm-ink);
}
.hcm-case__toggle svg { flex: 0 0 16px; color: var(--hcm-muted); transition: transform .16s ease; }
.hcm-case__toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
.hcm-case__name { font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcm-case__tools { display: flex; gap: 7px; flex: 0 0 auto; }
.hcm-case__body { padding: 0 16px 16px; border-top: 1px solid var(--hcm-line-2); padding-top: 15px; }

.hcm-symptoms { margin-bottom: 15px; }
.hcm-symptoms__list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--hcm-ink-2); }

/* Visit timeline */
.hcm-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hcm-visit {
	display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px;
	padding: 15px 0; border-top: 1px solid var(--hcm-line-2);
}
.hcm-visit:first-child { border-top: 0; padding-top: 4px; }
.hcm-visit__date strong { display: block; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }
.hcm-visit__date span { display: block; font-size: 12px; color: var(--hcm-muted); margin-top: 2px; }
.hcm-visit__body { min-width: 0; }

.hcm-meds { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hcm-meds li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.hcm-meds__name { font-weight: 600; }
.hcm-meds__pot { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--hcm-green-soft); color: var(--hcm-green-dark); font-weight: 650; }
.hcm-meds__dose { font-size: 12.5px; color: var(--hcm-muted); }

.hcm-visit__facts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 9px 0; font-size: 13px; color: var(--hcm-muted); }
.hcm-visit__tools { display: flex; gap: 6px; flex-wrap: wrap; }
.hcm-visit__tools--tight { gap: 5px; }

.hcm-chipbtn {
	display: inline-flex; align-items: center;
	padding: 5px 11px; border: 1px solid var(--hcm-line); border-radius: 999px;
	background: var(--hcm-card); color: var(--hcm-ink-2);
	font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer;
	white-space: nowrap;
}
.hcm-chipbtn:hover { border-color: var(--hcm-green); color: var(--hcm-green-dark); background: var(--hcm-green-soft); }
.hcm-chipbtn--wa:hover { border-color: #25d366; color: #0d7a3c; background: #e9f9ef; }
.hcm-chipbtn--danger { color: var(--hcm-danger); }
.hcm-chipbtn--danger:hover { border-color: #eccdcb; background: var(--hcm-danger-soft); color: var(--hcm-danger); }

/* Empty and welcome states */
.hcm-empty {
	background: var(--hcm-card); border: 1px dashed var(--hcm-line);
	border-radius: var(--hcm-radius); padding: 46px 24px; text-align: center;
}
.hcm-empty h2 { font-size: 17px; margin-bottom: 6px; }
.hcm-empty p { color: var(--hcm-muted); font-size: 14px; margin-bottom: 16px; }
.hcm-empty--sm { padding: 22px 16px; border: 0; background: transparent; color: var(--hcm-muted); font-size: 13.5px; text-align: left; }
.hcm-empty--inset { padding: 30px 20px; }

.hcm-welcome { background: var(--hcm-card); border: 1px solid var(--hcm-line); border-radius: var(--hcm-radius); padding: 26px; }
.hcm-welcome h2 { font-size: 20px; margin-bottom: 5px; }
.hcm-welcome > p { color: var(--hcm-muted); font-size: 14.5px; margin-bottom: 20px; }
.hcm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hcm-steps li { display: flex; gap: 12px; align-items: flex-start; }
.hcm-steps__n {
	flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--hcm-green-soft); color: var(--hcm-green-dark); font-size: 12.5px; font-weight: 700;
}
.hcm-steps strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.hcm-steps p { font-size: 13px; color: var(--hcm-muted); margin-bottom: 9px; }

/* Pagination */
.hcm-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.hcm-pager__btn {
	padding: 8px 15px; border: 1px solid var(--hcm-line); border-radius: var(--hcm-radius-sm);
	background: var(--hcm-card); color: var(--hcm-ink); text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.hcm-pager__btn:hover { border-color: #cdd0c8; }
.hcm-pager__btn.is-disabled { opacity: .45; pointer-events: none; }
.hcm-pager__count { font-size: 13px; color: var(--hcm-muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ *
 * Modal
 * ------------------------------------------------------------------ */

.hcm-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.hcm-modal[hidden] { display: none; }
.hcm-modal__scrim { position: absolute; inset: 0; background: rgba(24, 24, 22, .5); }
.hcm-modal__box {
	position: relative; z-index: 1;
	width: 100%; max-width: 620px; max-height: calc(100vh - 40px);
	display: flex; flex-direction: column;
	background: var(--hcm-card); border-radius: 14px;
	box-shadow: 0 20px 60px rgba(20, 20, 18, .3);
	overflow: hidden;
}
.hcm-modal__head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px 20px; border-bottom: 1px solid var(--hcm-line);
}
.hcm-modal__head h2 { font-size: 17px; }
.hcm-modal__x { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--hcm-muted); cursor: pointer; padding: 0 4px; }
.hcm-modal__x:hover { color: var(--hcm-ink); }
.hcm-modal__body { padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------------ *
 * Tablet
 * ------------------------------------------------------------------ */

@media (max-width: 1100px) {
	.hcm-stats { grid-template-columns: repeat(2, 1fr); }
	.hcm-steps { grid-template-columns: 1fr; }

	/* Laptop and tablet-landscape widths: tighten the table so it fits the
	   content column instead of needing a sideways scroll. */
	.hcm-table { font-size: 13.5px; }
	.hcm-table th { padding: 10px 8px; }
	.hcm-table td { padding: 10px 8px; }
	.hcm-cellname { gap: 8px; }
	.hcm-content { padding: 18px; }
}

@media (max-width: 900px) {
	.hcm-cols { grid-template-columns: 1fr; }
	.hcm-auth { grid-template-columns: 1fr; }
	.hcm-auth__brand { padding: 32px 26px; }
	.hcm-auth__points { display: none; }
	.hcm-auth__panel { padding: 30px 22px; }
}

/* ------------------------------------------------------------------ *
 * Mobile: drawer sidebar, bottom tabs, cards instead of tables
 * ------------------------------------------------------------------ */

@media (max-width: 782px) {
	.hcm-app {
		grid-template-columns: 1fr;
		border-radius: 12px;
		min-height: 520px;
	}

	.hcm-side {
		position: fixed;
		top: 0; bottom: 0; left: 0;
		width: 268px;
		z-index: 99998;
		transform: translateX(-102%);
		transition: transform .22s ease;
		padding-top: 16px;
		overflow-y: auto;
	}
	.hcm-app.is-drawer-open .hcm-side { transform: translateX(0); }
	.hcm-side__close { display: block; }

	.hcm-scrim {
		display: block;
		position: fixed; inset: 0; z-index: 99997;
		background: rgba(24, 24, 22, .45);
	}
	.hcm-scrim[hidden] { display: none; }

	.hcm-burger { display: inline-flex; }
	.hcm-avatar__name { display: none; }
	.hcm-top { padding: 11px 14px; }
	.hcm-content { padding: 16px 14px 88px; }

	.hcm-tabs {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		position: sticky;
		bottom: 0;
		z-index: 40;
		background: var(--hcm-card);
		border-top: 1px solid var(--hcm-line);
		padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
	}
	.hcm-tabs__item {
		display: flex; flex-direction: column; align-items: center; gap: 3px;
		padding: 6px 2px; border-radius: 9px;
		color: var(--hcm-muted); text-decoration: none;
		font-size: 10.5px; font-weight: 600; text-align: center; line-height: 1.2;
	}
	.hcm-tabs__item.is-active { color: var(--hcm-green-dark); background: var(--hcm-green-soft); }

	/* Tables become stacked cards */
	.hcm-tablewrap { border: 0; background: transparent; overflow: visible; }
	.hcm-table { min-width: 0; display: block; }
	.hcm-table thead { display: none; }
	.hcm-table tbody { display: flex; flex-direction: column; gap: 10px; }
	.hcm-table tbody tr {
		display: block;
		background: var(--hcm-card);
		border: 1px solid var(--hcm-line);
		border-radius: var(--hcm-radius);
		padding: 12px 14px;
	}
	.hcm-table tbody tr:hover { background: var(--hcm-card); }
	.hcm-table td {
		display: flex; align-items: center; justify-content: space-between; gap: 14px;
		padding: 6px 0; border-bottom: 1px solid var(--hcm-line-2); text-align: right;
	}
	.hcm-table td:first-child { padding-top: 0; text-align: left; }
	.hcm-table td:last-child { border-bottom: 0; padding-bottom: 0; }
	.hcm-table td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
		color: var(--hcm-muted); text-align: left;
	}
	.hcm-table td:first-child::before { display: none; }
	.hcm-table td:first-child > .hcm-cellname { width: 100%; }
	.hcm-table td .hcm-visit__tools { justify-content: flex-end; }

	.hcm-head { align-items: flex-start; }
	.hcm-head__title { font-size: 20px; }
	.hcm-filters .hcm-select, .hcm-datefield input { width: 100% !important; }
	.hcm-filters .hcm-select { flex: 1 1 140px; min-width: 0; }
	.hcm-datefield { flex: 1 1 140px; }

	.hcm-grid2, .hcm-grid3 { grid-template-columns: 1fr; }
	.hcm-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
	.hcm-stat { padding: 13px; }
	.hcm-stat__value { font-size: 22px; }

	.hcm-visit { grid-template-columns: 1fr; gap: 8px; }
	.hcm-visit__date { display: flex; align-items: baseline; gap: 9px; }
	.hcm-visit__date span { margin-top: 0; }

	.hcm-profile__actions { width: 100%; }
	.hcm-profile__actions .hcm-btn { flex: 1 1 auto; }

	.hcm-case__head { padding: 12px 13px; }
	.hcm-case__body { padding: 14px 13px 14px; }
	.hcm-case__tools { width: 100%; }
	.hcm-case__tools .hcm-btn { flex: 1 1 auto; }

	.hcm-modal { padding: 0; align-items: flex-end; }
	.hcm-modal__box {
		max-width: none; max-height: 92vh;
		border-radius: 16px 16px 0 0;
	}
	.hcm-modal__body { padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
	.hcm-form__actions { position: sticky; bottom: 0; background: var(--hcm-card); padding-bottom: 4px; }
	.hcm-form__actions .hcm-btn { flex: 1 1 auto; }

	.hcm-repeat__row--med > input[name="medicines[]"] { flex: 1 1 100%; }
	.hcm-mini { flex: 1 1 40% !important; }
	.hcm-mini--dose { flex: 1 1 100% !important; }
}

@media (max-width: 420px) {
	.hcm-stats { grid-template-columns: 1fr; }
	.hcm-tabs__item span { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.hcm-side, .hcm-btn, .hcm-nav__item, .hcm-case__toggle svg { transition: none !important; }
}

/* =====================================================================
 * Appointments
 * ===================================================================== */

.hcm-subnav {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	border-bottom: 1px solid var(--hcm-line);
	margin: 0 0 22px;
	padding-bottom: 0;
	scrollbar-width: thin;
}

.hcm-subnav__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 14px;
	border-bottom: 2px solid transparent;
	color: var(--hcm-muted);
	text-decoration: none;
	font-size: .875rem;
	font-weight: 600;
	white-space: nowrap;
}

.hcm-subnav__item:hover { color: var(--hcm-ink); }

.hcm-subnav__item.is-active {
	color: var(--hcm-ink);
	border-bottom-color: var(--hcm-green);
}

.hcm-subnav__count {
	background: var(--hcm-green-soft);
	color: var(--hcm-green-dark);
	border-radius: 999px;
	padding: 1px 8px;
	font-size: .72rem;
	font-weight: 700;
}

.hcm-head__tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hcm-inlineform { display: inline-flex; }

/* --- Availability, edited in place --- */

.hcm-avail {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
	gap: 14px;
	align-items: start;
	margin: 0 0 14px;
}

@media (max-width: 900px) {
	.hcm-avail { grid-template-columns: minmax(0, 1fr); }
}

.hcm-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 4px; }
.hcm-panel__sub { margin: 0 0 14px; color: var(--hcm-muted); font-size: .85rem; max-width: 62ch; }
.hcm-panel__title--spaced { margin-top: 26px; }
.hcm-panel__foot { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--hcm-line-2); }
.hcm-panel__empty { margin: 4px 0 0; color: var(--hcm-muted); font-size: .875rem; }
.hcm-panel__note { margin: 8px 0 0; font-size: .8rem; color: var(--hcm-muted); }
.hcm-tz { margin: 0; font-weight: 700; font-size: .95rem; }

.hcm-days { list-style: none; margin: 0; padding: 0; }

.hcm-day {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	padding: 13px 0;
	border-bottom: 1px solid var(--hcm-line-2);
}

.hcm-day:last-child { border-bottom: 0; }
.hcm-day.is-saving { opacity: .6; }
.hcm-day__ranges { display: grid; gap: 8px; min-height: 36px; align-content: center; }
.hcm-day__closed { margin: 0; color: var(--hcm-muted); font-size: .875rem; }
.hcm-day__tools { display: flex; gap: 2px; align-items: center; }

.hcm-range { display: flex; align-items: center; gap: 7px; }
.hcm-range input[type="time"] { width: 116px; flex: 0 0 auto; }
.hcm-range__dash { color: var(--hcm-muted); }

/* The day switch */

.hcm-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.hcm-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.hcm-switch__track {
	position: relative;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: #cdd0c9;
	flex: 0 0 auto;
	transition: background .15s ease;
}

.hcm-switch__dot {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform .15s ease;
}

.hcm-switch input:checked + .hcm-switch__track { background: var(--hcm-green); }
.hcm-switch input:checked + .hcm-switch__track .hcm-switch__dot { transform: translateX(16px); }
.hcm-switch input:focus-visible + .hcm-switch__track { outline: 2px solid var(--hcm-green); outline-offset: 2px; }
.hcm-switch__label { font-weight: 700; font-size: .9rem; }
.hcm-day.is-off .hcm-switch__label { color: var(--hcm-muted); font-weight: 600; }

/* Copy this day to others */

.hcm-copy { position: relative; }

.hcm-copy__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 5;
	background: var(--hcm-card);
	border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius);
	box-shadow: var(--hcm-shadow);
	padding: 12px 14px 14px;
	min-width: 196px;
}

.hcm-copy__lead { margin: 0 0 9px; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--hcm-muted); }
.hcm-copy__day { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .875rem; cursor: pointer; }
.hcm-copy__panel .hcm-btn { margin-top: 10px; width: 100%; justify-content: center; }

@media (max-width: 700px) {
	/* Three columns do not fit a phone: the tools end up on top of the end
	   time. Stack the row instead — switch, then times, then the tools. */
	.hcm-day { grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 15px 0; }
	.hcm-day__ranges { min-height: 0; }
	.hcm-day__tools { justify-content: flex-start; }
	.hcm-range { justify-content: flex-start; }
	.hcm-range input[type="time"] { width: auto; flex: 1 1 0; min-width: 0; max-width: 148px; }
	.hcm-day.is-off .hcm-day__tools { margin-top: 0; }
	.hcm-copy__panel { right: auto; left: 0; }
}

/* --- Time off --- */

.hcm-offlist { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 8px; }

.hcm-offlist__row {
	display: grid;
	grid-template-columns: 120px 1fr auto auto;
	gap: 12px;
	align-items: center;
	background: var(--hcm-card);
	border: 1px solid var(--hcm-line);
	border-left: 3px solid var(--hcm-danger);
	border-radius: var(--hcm-radius-sm);
	padding: 10px 10px 10px 13px;
	font-size: .875rem;
}

.hcm-offlist__row--extra { border-left-color: var(--hcm-green); }
.hcm-offlist__date { font-weight: 700; }
.hcm-offlist__why { color: var(--hcm-muted); font-size: .8rem; }
.hcm-offlist__tools { display: flex; gap: 2px; }

@media (max-width: 640px) {
	.hcm-offlist__row { grid-template-columns: 1fr auto; }
	.hcm-offlist__why { grid-column: 1 / -1; }
}

/* --- Event types --- */

.hcm-dur {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--hcm-green-soft);
	color: var(--hcm-green-dark);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1;
}

.hcm-dur small { font-size: .6rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.hcm-tile.is-paused { opacity: .68; }
.hcm-tile__text { margin: 12px 0 0; color: var(--hcm-ink-2); font-size: .875rem; }

/* --- Month calendar --- */

.hcm-month { background: var(--hcm-card); border: 1px solid var(--hcm-line); border-radius: var(--hcm-radius); overflow: hidden; }

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

.hcm-month__dow span {
	padding: 9px 10px;
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hcm-muted);
	border-bottom: 1px solid var(--hcm-line);
	font-weight: 700;
}

.hcm-month__cell {
	min-height: 108px;
	border-right: 1px solid var(--hcm-line-2);
	border-bottom: 1px solid var(--hcm-line-2);
	padding: 6px 7px 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hcm-month__cell.is-pad { background: var(--hcm-line-2); }
.hcm-month__cell.is-work { background: #fbfdfb; }
.hcm-month__cell.is-today { box-shadow: inset 0 0 0 2px var(--hcm-green); }
.hcm-month__n { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: var(--hcm-muted); font-weight: 700; }

.hcm-month__add {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--hcm-muted);
	cursor: pointer;
	border-radius: 6px;
	width: 20px;
	height: 20px;
	line-height: 1;
	opacity: 0;
}

.hcm-month__cell:hover .hcm-month__add,
.hcm-month__add:focus-visible { opacity: 1; }
.hcm-month__add:hover { background: rgba(0, 0, 0, .07); color: var(--hcm-ink); }

.hcm-month__off {
	margin: 0;
	font-size: .68rem;
	font-weight: 700;
	color: var(--hcm-danger);
	background: var(--hcm-danger-soft);
	border-radius: 5px;
	padding: 2px 5px;
}

.hcm-month__off--extra { color: var(--hcm-green-dark); background: var(--hcm-green-soft); }

.hcm-appt {
	appearance: none;
	text-align: left;
	border: 0;
	border-left: 3px solid var(--hcm-green);
	background: var(--hcm-green-soft);
	border-radius: 5px;
	padding: 3px 6px;
	cursor: pointer;
	font: inherit;
	font-size: .7rem;
	line-height: 1.3;
	display: block;
	width: 100%;
	overflow: hidden;
}

.hcm-appt__t { font-weight: 800; display: block; }
.hcm-appt__n { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--hcm-ink-2); }
.hcm-appt--pending { border-left-color: #b8860b; background: #fdf5e2; }
.hcm-appt--awaiting_payment { border-left-color: var(--hcm-muted); background: var(--hcm-line-2); }
.hcm-appt--declined,
.hcm-appt--cancelled { border-left-color: var(--hcm-danger); background: var(--hcm-danger-soft); text-decoration: line-through; }

.hcm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; color: var(--hcm-muted); font-size: .78rem; margin: 12px 0 0; }
.hcm-legend__key { width: 11px; height: 11px; border-radius: 3px; display: inline-block; margin-right: 2px; }
.hcm-legend__key--work { background: #fbfdfb; border: 1px solid var(--hcm-line); }
.hcm-legend__key--confirmed { background: var(--hcm-green-soft); border-left: 3px solid var(--hcm-green); }
.hcm-legend__key--pending { background: #fdf5e2; border-left: 3px solid #b8860b; }
.hcm-legend__key--awaiting { background: var(--hcm-line-2); border-left: 3px solid var(--hcm-muted); }

@media (max-width: 780px) {
	.hcm-month__cell { min-height: 74px; padding: 4px 4px 6px; }
	.hcm-appt__n { display: none; }
}

/* --- Booking queue --- */

.hcm-statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 18px; }

.hcm-stat {
	background: var(--hcm-card);
	border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius);
	padding: 13px 15px;
	text-decoration: none;
	color: inherit;
	display: block;
}

.hcm-stat.is-on { border-color: var(--hcm-green); box-shadow: inset 0 0 0 1px var(--hcm-green); }
.hcm-stat__n { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.hcm-stat__l { display: block; font-size: .78rem; color: var(--hcm-muted); margin-top: 2px; }

.hcm-pill--awaiting_payment { background: var(--hcm-line-2); color: var(--hcm-ink-2); }
.hcm-pill--pending { background: #fdf5e2; color: #7a5406; }
.hcm-pill--confirmed { background: var(--hcm-green-soft); color: var(--hcm-green-dark); }
.hcm-pill--completed { background: #e8eef7; color: #23507f; }
.hcm-pill--declined,
.hcm-pill--cancelled { background: var(--hcm-danger-soft); color: var(--hcm-danger); }

.hcm-chipbtn--ok { border-color: var(--hcm-green); color: var(--hcm-green-dark); }
.hcm-chipbtn--no { border-color: var(--hcm-danger); color: var(--hcm-danger); }
.hcm-sub { display: block; font-size: .75rem; color: var(--hcm-muted); }

/* --- Modal recap --- */

.hcm-recap {
	background: var(--hcm-line-2);
	border-radius: var(--hcm-radius-sm);
	padding: 12px 14px;
	margin: 0 0 18px;
}

.hcm-recap__list { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 9px 16px; }
.hcm-recap__list div { margin: 0; }
.hcm-recap__list dt { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--hcm-muted); }
.hcm-recap__list dd { margin: 2px 0 0; font-weight: 700; font-size: .875rem; }
.hcm-recap__link { margin: 11px 0 0; font-size: .8rem; }

.hcm-form__lead { margin: 0 0 16px; color: var(--hcm-ink-2); }
.hcm-form__spacer { flex: 1 1 auto; }
.hcm-form__actions--split { display: flex; align-items: center; gap: 8px; }
.hcm-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }

/* --- Panels (booking settings) --- */

.hcm-panel {
	background: var(--hcm-card);
	border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius);
	padding: 18px 20px 20px;
	margin: 0 0 14px;
}

.hcm-panel__title { margin: 0 0 15px; font-size: .95rem; }
.hcm-upload { display: flex; gap: 8px; align-items: flex-start; }
.hcm-upload input { flex: 1 1 auto; }
.hcm-qrpreview { margin: 12px 0 0; }
.hcm-qrpreview img { max-width: 168px; height: auto; border-radius: 10px; border: 1px solid var(--hcm-line); }
.hcm-logopreview { margin: 12px 0 0; }
.hcm-logopreview img {
	max-width: 210px; max-height: 76px; width: auto; height: auto;
	border-radius: 8px; border: 1px solid var(--hcm-line); padding: 6px; background: #fff;
}
.hcm-hint--warn { color: var(--hcm-danger); }
.hcm-notice--warn { background: #fdf5e2; color: #7a5406; }

/* =====================================================================
 * The public booking page
 * ===================================================================== */

.hcm-book {
	max-width: 940px;
	margin: 0 auto;
	padding: 8px 0 40px;
	color: var(--hcm-ink);
	font-size: 15px;
	line-height: 1.55;
}

.hcm-book--done,
.hcm-book--empty { max-width: 620px; text-align: center; }
.hcm-book__head { margin: 0 0 22px; }
.hcm-book__title { margin: 0 0 6px; font-size: 1.6rem; letter-spacing: -.02em; }
.hcm-book__sub { margin: 0; color: var(--hcm-muted); }
.hcm-book__doctor { margin: 26px 0 10px; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--hcm-muted); }
.hcm-book__admin { margin: 18px 0 14px; color: var(--hcm-muted); font-size: .85rem; }
.hcm-book__foot { margin: 26px 0 0; color: var(--hcm-muted); font-size: .85rem; }

.hcm-book__back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 16px;
	color: var(--hcm-muted);
	text-decoration: none;
	font-size: .85rem;
	font-weight: 600;
}

.hcm-book__back:hover { color: var(--hcm-ink); }
.hcm-book__events { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.hcm-eventcard {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--hcm-card);
	border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius);
	padding: 16px 18px;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, transform .15s ease;
}

.hcm-eventcard:hover { border-color: var(--hcm-green); transform: translateY(-1px); }
.hcm-eventcard__title { display: block; font-weight: 700; font-size: 1.02rem; }
.hcm-eventcard__desc { display: block; color: var(--hcm-muted); font-size: .875rem; margin: 3px 0 0; }
.hcm-eventcard__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.hcm-eventcard__go { color: var(--hcm-muted); flex: 0 0 auto; }

.hcm-chip {
	display: inline-block;
	background: var(--hcm-line-2);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: .74rem;
	font-weight: 700;
	color: var(--hcm-ink-2);
}

.hcm-chip--price { background: var(--hcm-green-soft); color: var(--hcm-green-dark); }
.hcm-chip--free { background: #e8eef7; color: #23507f; }

.hcm-book__cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.hcm-book__cols--form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }

@media (max-width: 780px) {
	.hcm-book__cols { grid-template-columns: minmax(0, 1fr); }
}

.hcm-cal,
.hcm-times,
.hcm-summary {
	background: var(--hcm-card);
	border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius);
	padding: 16px 18px 18px;
}

.hcm-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.hcm-cal__month { margin: 0; font-size: 1rem; }

.hcm-cal__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	border: 1px solid var(--hcm-line);
	color: var(--hcm-ink);
	text-decoration: none;
}

.hcm-cal__nav:hover { background: var(--hcm-line-2); }
.hcm-cal__nav.is-off { opacity: .3; }
.hcm-cal__dow, .hcm-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.hcm-cal__dow span { text-align: center; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--hcm-muted); font-weight: 700; padding-bottom: 5px; }

.hcm-cal__day {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9px;
	border: 1px solid var(--hcm-line);
	background: var(--hcm-card);
	color: var(--hcm-ink);
	text-decoration: none;
	font-weight: 700;
	font-size: .9rem;
}

.hcm-cal__day:hover { border-color: var(--hcm-green); background: var(--hcm-green-soft); }
.hcm-cal__day.is-on { background: var(--hcm-green); border-color: var(--hcm-green); color: #fff; }
.hcm-cal__day.is-off { color: var(--hcm-muted); border-color: transparent; background: transparent; font-weight: 400; opacity: .55; }
.hcm-cal__dot { position: absolute; bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--hcm-green); }
.hcm-cal__day.is-on .hcm-cal__dot { background: #fff; }
.hcm-cal__legend { margin: 12px 0 0; font-size: .76rem; color: var(--hcm-muted); }

.hcm-times__date { margin: 0 0 12px; font-size: 1rem; }
.hcm-times__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }

.hcm-slot {
	display: block;
	text-align: center;
	padding: 11px 6px;
	border: 1px solid var(--hcm-line);
	border-radius: 9px;
	text-decoration: none;
	color: var(--hcm-ink);
	font-weight: 700;
	font-size: .875rem;
}

.hcm-slot:hover { border-color: var(--hcm-green); background: var(--hcm-green-soft); color: var(--hcm-green-dark); }
.hcm-times__empty { color: var(--hcm-muted); padding: 18px 0; }

.hcm-summary__title { margin: 0 0 14px; font-size: 1.05rem; }
.hcm-summary__list { margin: 0; display: grid; gap: 11px; }
.hcm-summary__list div { margin: 0; }
.hcm-summary__list dt { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--hcm-muted); }
.hcm-summary__list dd { margin: 2px 0 0; font-weight: 700; }
.hcm-summary__desc { margin: 16px 0 0; color: var(--hcm-muted); font-size: .85rem; }

.hcm-form--book { background: var(--hcm-card); border: 1px solid var(--hcm-line); border-radius: var(--hcm-radius); padding: 20px 22px 22px; }
.hcm-form__foot { margin: 12px 0 0; color: var(--hcm-muted); font-size: .82rem; text-align: center; }
.hcm-btn--wide { width: 100%; justify-content: center; }
.hcm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Booked, waiting on payment --- */

.hcm-done__badge {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 16px;
}

.hcm-done__badge.is-ok { background: var(--hcm-green-soft); color: var(--hcm-green-dark); }
.hcm-done__badge.is-part { background: #fdf5e2; color: #7a5406; }

.hcm-ticket {
	background: var(--hcm-card);
	border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius);
	padding: 18px 20px 20px;
	margin: 22px 0 0;
	text-align: left;
}

.hcm-ticket__code {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 13px;
	margin-bottom: 14px;
	border-bottom: 1px dashed var(--hcm-line);
}

.hcm-ticket__code span { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; color: var(--hcm-muted); }
.hcm-ticket__code strong { font-size: 1.15rem; letter-spacing: .01em; }
.hcm-ticket__list { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; }
.hcm-ticket__list div { margin: 0; }
.hcm-ticket__list dt { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--hcm-muted); }
.hcm-ticket__list dd { margin: 2px 0 0; font-weight: 700; }

.hcm-pay {
	background: var(--hcm-card);
	border: 1px solid var(--hcm-green);
	border-radius: var(--hcm-radius);
	padding: 18px 20px 20px;
	margin: 16px 0 0;
	text-align: left;
}

.hcm-pay__title { margin: 0 0 14px; font-size: 1rem; }
.hcm-pay__body { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.hcm-pay__list { margin: 0; flex: 1 1 220px; display: grid; gap: 11px; }
.hcm-pay__list div { margin: 0; }
.hcm-pay__list dt { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--hcm-muted); }
.hcm-pay__list dd { margin: 2px 0 0; font-weight: 700; }
.hcm-pay__list code { background: var(--hcm-line-2); border-radius: 6px; padding: 2px 7px; font-size: .95em; }
.hcm-pay__qr { margin: 0; text-align: center; flex: 0 0 auto; }
.hcm-pay__qr img { max-width: 168px; height: auto; border-radius: 10px; border: 1px solid var(--hcm-line); }
.hcm-pay__qr figcaption { font-size: .74rem; color: var(--hcm-muted); margin-top: 6px; }
.hcm-pay__next { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--hcm-line); }
.hcm-pay__next h3 { margin: 0 0 6px; font-size: .95rem; }
.hcm-pay__next p { margin: 0; color: var(--hcm-ink-2); font-size: .9rem; }
.hcm-pay__actions { display: flex; gap: 9px; flex-wrap: wrap; margin: 14px 0 0; }
.hcm-pay__note { margin: 12px 0 0 !important; color: var(--hcm-muted) !important; font-size: .82rem !important; }
.hcm-btn--wa { background: #25d366; border-color: #25d366; color: #062b14; }

.hcm-vtype {
	display: inline-block;
	margin-top: 5px;
	border-radius: 999px;
	padding: 2px 9px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .02em;
	background: #e8eef7;
	color: #23507f;
}

.hcm-vtype--call { background: var(--hcm-green-soft); color: var(--hcm-green-dark); }

/*
 * Visually hidden, but still read out. The plugin defines its own rather than
 * borrowing the theme's .screen-reader-text: a theme that does not define it
 * leaves the label visible, which is what happened to the booking calendar.
 */
.hcm-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hcm-month__cell.is-work { background: #f6faf6; }

/* A status dropdown beside the search box should size to its content, not
   stretch and push the button onto its own line. */
.hcm-filters select { flex: 0 0 auto; width: auto; min-width: 168px; }

.hcm-hint--now { font-weight: 600; color: var(--hcm-ink-2); }

/* --- Linking doctors and clinics --- */

.hcm-picklist {
	display: grid;
	gap: 2px;
	max-height: 210px;
	overflow-y: auto;
	border: 1px solid var(--hcm-line);
	border-radius: var(--hcm-radius-sm);
	padding: 6px;
	background: var(--hcm-card);
}

.hcm-picklist__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 9px;
	border-radius: 7px;
	cursor: pointer;
	font-size: .875rem;
}

.hcm-picklist__item:hover { background: var(--hcm-line-2); }
.hcm-picklist__item input { margin-top: 2px; flex: 0 0 auto; }
.hcm-picklist__item strong { display: block; font-weight: 600; }
.hcm-picklist__item em { display: block; font-style: normal; color: var(--hcm-muted); font-size: .8rem; }
.hcm-muted { color: var(--hcm-muted); }

/* Calendar entries are buttons: they open for editing. */
.hcm-month__off {
	appearance: none;
	border: 0;
	font: inherit;
	text-align: left;
	width: 100%;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hcm-month__off:hover { filter: brightness(.95); }
.hcm-month__off:focus-visible,
.hcm-appt:focus-visible { outline: 2px solid var(--hcm-green); outline-offset: 1px; }

.hcm-upload { align-items: center; }
.hcm-upload input[type="file"] { display: none; }

/* =====================================================================
 * Importing old records
 * ===================================================================== */

.hcm-head__actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.hcm-import { max-width: 620px; }
.hcm-import__step { margin-bottom: 4px; }
.hcm-import__downloads { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 8px; }
.hcm-import__file { font-weight: 600; margin: 0 0 8px; }

.hcm-import__result {
	margin-top: 16px; padding: 14px 16px; border-radius: 10px;
	border: 1px solid var(--hcm-line); background: var(--hcm-line-2); font-size: 13px;
}
.hcm-import__result--ok { border-color: #b9d8c2; background: #f1f8f2; }
.hcm-import__result--bad { border-color: #e7c9c9; background: #fdf4f4; }

.hcm-import__counts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.hcm-import__counts li { color: var(--hcm-muted); }
.hcm-import__counts strong { color: var(--hcm-ink); font-size: 16px; margin-right: 3px; }

.hcm-import__new { margin: 12px 0 0; color: var(--hcm-muted); }
.hcm-import__ok { margin: 0 0 10px; font-weight: 600; }
.hcm-import__bad { margin: 12px 0 6px; color: var(--hcm-danger); font-weight: 600; }

.hcm-import__problems { margin: 0; padding-left: 18px; max-height: 220px; overflow-y: auto; }
.hcm-import__problems li { color: var(--hcm-muted); margin-bottom: 4px; }

.hcm-import .hcm-filepick input[type="file"] {
	font: inherit; font-size: 13px; width: 100%;
	padding: 10px; border: 1px dashed var(--hcm-line); border-radius: 9px; background: #fff;
}

/* A main action with a smaller alternative fused to its right. */
.hcm-split { display: inline-flex; align-items: stretch; }
.hcm-split > .hcm-btn { border-radius: 9px 0 0 9px; }
.hcm-split > .hcm-split__alt { border-radius: 0 9px 9px 0; margin-left: -1px; padding-left: 10px; padding-right: 10px; }