/* ==========================================================================
   Odontiko — Dashboard shell (sidebar + top bar)
   Same palette as the auth pages, sampled from the logo:
     mint  #8FD1C9   rose  #DD8E9F   mauve #936C76
   ========================================================================== */

:root {
	--mint-100: #EAF7F5;
	--mint-300: #B7E4DE;
	--mint-500: #8FD1C9;
	--mint-600: #5FB6AC;
	--mint-700: #3E9B90;

	--rose-100: #FBEEF1;
	--rose-500: #DD8E9F;
	--rose-600: #C9748A;

	--mauve-500: #936C76;
	--mauve-700: #6E4E56;
	--mauve-900: #4A333A;

	--ink: #4A3A3E;
	--ink-soft: #8A7378;
	--border: #ECDFE2;
	--cream: #FFFBF7;

	--sidebar-width: 250px;
	--topbar-height: 56px;
}

body {
	margin: 0;
	font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
	background: var(--cream);
	color: var(--ink);
}

/* ---------- Top bar ---------- */

.app-topbar {
	width: 100%;
	height: var(--topbar-height);
	background: #ffffff;
	border-bottom: 1px solid var(--border);
	box-shadow: 0 2px 10px rgba(74, 51, 58, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 400;
	box-sizing: border-box;
	padding: 0 18px;
}

.app-topbar::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mint-500), var(--rose-500));
}

.app-title {
	font-size: 19px;
	font-weight: 600;
	color: var(--mauve-900);
	cursor: pointer;
	letter-spacing: 0.01em;
}

.profile-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--mint-100);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease;
}
.profile-btn:hover { background: var(--mint-300); }
.profile-btn svg { width: 20px; height: 20px; color: var(--mint-700); }

.profile-menu {
	position: absolute;
	top: 52px;
	right: 0;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 14px 32px -14px rgba(74, 51, 58, 0.35);
	padding: 6px;
	display: none;
	width: 200px;
	z-index: 500;
}

.profile-menu-item {
	padding: 9px 12px;
	cursor: pointer;
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--ink);
	transition: background 0.15s ease, color 0.15s ease;
}
.profile-menu-item:hover {
	background: var(--mint-100);
	color: var(--mint-700);
}
.profile-menu-item.danger:hover {
	background: var(--rose-100);
	color: var(--rose-600);
}

/* ---------- Sidebar ---------- */

.app-sidebar {
	width: var(--sidebar-width);
	height: calc(100vh - var(--topbar-height));
	background: #ffffff;
	border-right: 1px solid var(--border);
	position: fixed;
	left: 0;
	top: var(--topbar-height);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 18px 14px;
	transition: width 0.2s ease;
	overflow: hidden;
	z-index: 300;
}

.app-sidebar.collapsed {
	padding: 18px 10px;
}

.sidebar-top {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-height: 0;
}

.sidebar-toggle {
	align-self: flex-end;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 1px solid var(--border);
	background: #fff;
	color: var(--mauve-500);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease, color 0.15s ease, transform 0.2s ease;
}
.sidebar-toggle:hover {
	background: var(--mint-100);
	color: var(--mint-700);
}
.sidebar-toggle svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.app-sidebar.collapsed .sidebar-toggle svg { transform: rotate(180deg); }
.app-sidebar.collapsed .sidebar-toggle { align-self: center; }

/* Doctor selector */

.doctor-select {
	position: relative;
	flex-shrink: 0;
}

.doctor-select-btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--mint-100);
	border: 1px solid var(--mint-300);
	color: var(--mauve-900);
	border-radius: 12px;
	padding: 10px 12px;
	cursor: pointer;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	text-align: left;
	transition: background 0.15s ease;
}
.doctor-select-btn:hover { background: var(--mint-300); }
.doctor-select-btn svg.doc-icon { width: 18px; height: 18px; color: var(--mint-700); flex-shrink: 0; }
.doctor-select-btn span.doctor-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-sidebar.collapsed .doctor-select-btn { justify-content: center; padding: 10px; }
.app-sidebar.collapsed .doctor-select-btn span.doctor-label { display: none; }

.doctor-list {
	list-style: none;
	margin: 8px 0 0;
	padding: 6px;
	position: absolute;
	top: 100%;
	left: 0;
	width: 220px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 14px 32px -14px rgba(74, 51, 58, 0.35);
	z-index: 1000;
	display: none;
	max-height: 260px;
	overflow-y: auto;
}

.doctor-list li {
	padding: 8px 10px;
	cursor: pointer;
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--ink);
	transition: background 0.15s ease, color 0.15s ease;
}
.doctor-list li:hover {
	background: var(--mint-100);
	color: var(--mint-700);
}

/* Nav */

.nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	overflow-y: auto;
}

.nav-item a {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--ink);
	text-decoration: none;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.nav-item a svg {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
	color: var(--mauve-500);
	transition: color 0.15s ease;
}

.nav-item a:hover {
	background: var(--mint-100);
	color: var(--mint-700);
}
.nav-item a:hover svg { color: var(--mint-700); }

.nav-item a.active {
	background: linear-gradient(90deg, var(--mint-100), var(--rose-100));
	color: var(--mauve-900);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--mint-600);
}
.nav-item a.active svg { color: var(--mint-700); }

.app-sidebar.collapsed .nav-item a { justify-content: center; padding: 10px; }
.app-sidebar.collapsed .nav-label { display: none; }

.nav-item.danger a { color: var(--rose-600); }
.nav-item.danger a svg { color: var(--rose-500); }
.nav-item.danger a:hover { background: var(--rose-100); color: var(--rose-600); }
.nav-item.danger a:hover svg { color: var(--rose-600); }
.nav-item.danger a.active {
	background: var(--rose-100);
	box-shadow: inset 3px 0 0 var(--rose-600);
	color: var(--rose-600);
}
.nav-item.danger a.active svg { color: var(--rose-600); }

.app-topbar .app-logo {
	height: 32px;
	width: auto;
	display: block;
	cursor: pointer;
}

/* Business settings button */

.settings-btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 12px;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	color: #fff;
	background: linear-gradient(135deg, var(--mint-600), var(--rose-600));
	box-shadow: 0 10px 22px -12px rgba(201, 116, 138, 0.55);
	transition: filter 0.15s ease, transform 0.15s ease;
	flex-shrink: 0;
}
.settings-btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.settings-btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.app-sidebar.collapsed .settings-btn span.settings-label { display: none; }

/* On short/small screens (mobile) the sidebar's fixed height + hidden
   overflow can clip the toggle/settings button below the fold once the
   nav list takes up the available space. Let it flow naturally and
   scroll instead of disappearing. */
@media (max-width: 700px), (max-height: 700px) {
	.app-sidebar {
		overflow-y: auto;
		justify-content: flex-start;
	}
	.settings-btn {
		margin-top: 18px;
	}
}

/* Content area */

.app-content {
	margin-top: var(--topbar-height);
	margin-left: var(--sidebar-width);
	padding: 20px;
	box-sizing: border-box;
	transition: margin-left 0.2s ease;
}

/* Standalone settings pages (Profile, Change Password) — a single centered
   card below the top bar, same visual language as the auth pages. */

.settings-page {
	max-width: 480px;
	margin: 0 auto;
	padding: 0 20px;
	margin-top: calc(var(--topbar-height) + 40px);
	margin-bottom: 40px;
	box-sizing: border-box;
}

.settings-card {
	position: relative;
	background: #ffffff;
	border-radius: 22px;
	box-shadow: 0 20px 50px -20px rgba(74, 51, 58, 0.28), 0 2px 10px rgba(74, 51, 58, 0.06);
	padding: 32px 30px;
	overflow: hidden;
}
.settings-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--mint-500), var(--rose-500));
}

.settings-card h2 {
	margin: 0 0 20px;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	color: var(--mauve-900);
}

.settings-card .field-group { margin-bottom: 16px; }
.settings-card label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--mauve-700);
}

.settings-card input[type="text"],
.settings-card input[type="email"],
.settings-card input[type="password"],
.settings-card input[type="tel"],
.settings-card select,
.settings-card textarea {
	width: 100%;
	padding: 11px 13px;
	font-size: 14.5px;
	font-family: inherit;
	color: var(--ink);
	background: #FBFAF8;
	border: 1.5px solid var(--border);
	border-radius: 11px;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.settings-card select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 34px;
	cursor: pointer;
}
.settings-card textarea { resize: vertical; }
.settings-card input:focus,
.settings-card select:focus,
.settings-card textarea:focus {
	border-color: var(--mint-600);
	background: #ffffff;
	box-shadow: 0 0 0 4px rgba(143, 209, 201, 0.22);
}
.settings-card input[readonly] {
	color: var(--ink-soft);
	background: #F4F1EE;
	cursor: not-allowed;
}

.settings-card .placeholder-box {
	margin-top: 4px;
	padding: 12px 14px;
	background: var(--mint-100);
	border-radius: 12px;
}
.settings-card .placeholder-box strong {
	display: block;
	margin-bottom: 8px;
	font-size: 12.5px;
	color: var(--mauve-700);
}
.settings-card .placeholder-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.settings-card .placeholder-chip {
	background: #ffffff;
	border: 1px solid var(--mint-300);
	border-radius: 999px;
	padding: 4px 10px;
	font-family: 'SFMono-Regular', Consolas, monospace;
	font-size: 12px;
	color: var(--mint-700);
	cursor: pointer;
	transition: background 0.15s ease;
}
.settings-card .placeholder-chip:hover { background: var(--mint-100); }

.settings-card .checkbox-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ink-soft);
	margin-bottom: 20px;
}
.settings-card .checkbox-row input {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: var(--mint-600);
	flex-shrink: 0;
}

/* Fallback style for a plain <button> with no btn-* class. Buttons that
   already carry .btn-primary/.btn-secondary/.btn-danger/.btn-round-add
   keep their own colors — this must not override them. */
.settings-card button:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-round-add):not(.tab-item) {
	width: 100%;
	height: auto;
	padding: 12px 18px;
	margin-top: 4px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	background: linear-gradient(135deg, var(--mint-600), var(--rose-600));
	border: none;
	border-radius: 11px;
	cursor: pointer;
	text-align: center;
	box-shadow: 0 10px 22px -10px rgba(201, 116, 138, 0.55);
	transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.settings-card button:not(.btn-primary):not(.btn-secondary):not(.btn-danger):not(.btn-round-add):hover {
	filter: brightness(1.05);
	transform: translateY(-1px);
}
.settings-card .btn-primary,
.settings-card .btn-secondary,
.settings-card .btn-danger {
	margin-top: 4px;
}

.settings-back-link {
	display: block;
	text-align: center;
	margin-top: 18px;
	font-size: 13.5px;
	color: var(--ink-soft);
	text-decoration: none;
	font-weight: 600;
}
.settings-back-link:hover { color: var(--mint-700); }

/* Legal modal */

.legal-modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	color: var(--ink);
	padding: 22px;
	border-radius: 16px;
	box-shadow: 0 20px 50px -18px rgba(74, 51, 58, 0.4);
	width: 300px;
	text-align: center;
	z-index: 2000;
	border: 1px solid var(--border);
}
.legal-modal h2 { margin: 0 0 14px; color: var(--mauve-900); font-size: 18px; }

.support-description {
	margin: 0;
	color: var(--ink-soft);
	font-size: 13.5px;
	line-height: 1.6;
}
.support-contact-link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--mint-100);
	border: 1.5px solid var(--mint-300);
	color: var(--mint-700);
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}
.support-contact-link:hover { background: var(--mint-300); transform: translateY(-1px); }
.legal-link-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--mint-100);
	border: 1.5px solid var(--mint-300);
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}
.legal-link-row:hover { background: var(--mint-300); transform: translateY(-1px); }
.legal-link-row .legal-link-title {
	color: var(--mint-700);
	font-weight: 600;
	font-size: 14px;
}
.legal-link-row .legal-link-desc {
	color: var(--ink-soft);
	font-size: 12.5px;
	line-height: 1.4;
}
.legal-modal a {
	display: block;
	color: var(--ink);
	margin-bottom: 8px;
	text-decoration: none;
	padding: 8px;
	border-radius: 8px;
	font-size: 13.5px;
	transition: background 0.15s ease;
}
.legal-modal a:hover { background: var(--mint-100); color: var(--mint-700); }
.legal-modal .legal-close {
	margin-top: 10px;
	padding: 14px;
	width: 100%;
	cursor: pointer;
	background: var(--mauve-900);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

/* ==========================================================================
   Data lists — filter bar, cards, badges, modals.
   Shared across every "search + filter + list + edit modal" screen
   (admin users/businesses, patients, appointments, sessions, payments…).
   ========================================================================== */

/* Filter bar */

.filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	padding: 16px;
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: 0 10px 26px -18px rgba(74, 51, 58, 0.25);
	margin-bottom: 22px;
}

.filter-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.filter-field label {
	font-size: 12px;
	font-weight: 600;
	color: var(--mauve-700);
}

.filter-bar input[type="text"],
.filter-bar input[type="date"],
.filter-bar input[type="time"],
.filter-bar select {
	height: 38px;
	padding: 0 12px;
	font-size: 13.5px;
	font-family: inherit;
	color: var(--ink);
	background: #FBFAF8;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.filter-bar select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	padding-right: 32px;
	cursor: pointer;
}
.filter-bar input:focus,
.filter-bar select:focus {
	border-color: var(--mint-600);
	background-color: #ffffff;
	box-shadow: 0 0 0 4px rgba(143, 209, 201, 0.22);
}
.filter-bar input.search-input {
	width: 220px;
	max-width: 100%;
}

.category-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: middle;
	flex-shrink: 0;
}

/* Custom category picker (Add/Edit Appointment) — native <select> options
   can't reliably show colored text in the OS-rendered dropdown popup on
   most platforms, so this is a small custom dropdown instead, giving full
   control to actually draw a colored dot next to each category. */
.category-select {
	position: relative;
	width: 100%;
}
.category-select-btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 4px;
	background: #FBFAF8;
	border: 1.5px solid var(--border);
	color: var(--ink);
	border-radius: 10px;
	padding: 10px 12px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.category-select-btn:hover { background: #ffffff; }
.category-select-btn.open {
	border-color: var(--mint-600);
	background: #ffffff;
	box-shadow: 0 0 0 4px rgba(143, 209, 201, 0.22);
}
.category-select-label {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.category-select-btn svg.chevron {
	width: 16px;
	height: 16px;
	color: var(--ink-soft);
	flex-shrink: 0;
	transition: transform 0.15s ease;
}
.category-select-btn.open svg.chevron { transform: rotate(180deg); }
.category-select-list {
	list-style: none;
	margin: 6px 0 0;
	padding: 6px;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: 12px;
	box-shadow: 0 14px 32px -14px rgba(74, 51, 58, 0.35);
	z-index: 1000;
	display: none;
	max-height: 240px;
	overflow-y: auto;
}
.category-select-list li {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	cursor: pointer;
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--ink);
	transition: background 0.15s ease;
}
.category-select-list li:hover { background: var(--mint-100); }
.category-select-list li.selected { font-weight: 600; color: var(--mauve-900); }

.modal-search-input {
	width: 100%;
	height: 38px;
	padding: 0 14px;
	font-size: 13.5px;
	font-family: inherit;
	color: var(--ink);
	background: #FBFAF8;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	outline: none;
	box-sizing: border-box;
	margin-bottom: 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.modal-search-input:focus {
	border-color: var(--mint-600);
	background-color: #ffffff;
	box-shadow: 0 0 0 4px rgba(143, 209, 201, 0.22);
}

.btn-primary,
.btn-secondary,
.btn-danger {
	height: 38px;
	padding: 0 18px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 10px;
	cursor: pointer;
	border: none;
	white-space: nowrap;
	text-align: center;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: normal;
	transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.btn-primary {
	color: #ffffff;
	background: linear-gradient(135deg, var(--mint-600), var(--rose-600));
	box-shadow: 0 10px 20px -12px rgba(201, 116, 138, 0.5);
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-primary:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	filter: none;
	transform: none;
}
.btn-secondary {
	color: var(--mint-700);
	background: var(--mint-100);
	border: 1.5px solid var(--mint-300);
}
.btn-secondary:hover { background: var(--mint-300); }
.btn-danger {
	color: #ffffff;
	background: var(--rose-600);
}
.btn-danger:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Data cards */

.data-list { display: flex; flex-direction: column; gap: 10px; }

.data-card {
	position: relative;
	background: #ffffff;
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 16px 18px;
	box-shadow: 0 8px 20px -16px rgba(74, 51, 58, 0.2);
	transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.data-card[data-clickable] { cursor: pointer; }
.data-card[data-clickable]:hover {
	border-color: var(--mint-300);
	box-shadow: 0 14px 30px -16px rgba(74, 51, 58, 0.3);
}
.data-card h3 {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
	color: var(--mauve-900);
}
.data-card p {
	margin: 4px 0;
	font-size: 13.5px;
	color: var(--ink-soft);
	line-height: 1.5;
}
.data-card p strong {
	color: var(--mauve-700);
	font-weight: 600;
}

/* A card split into an info column and an action column, side by side —
   Delete sits on its own on the right instead of sharing a text line (which
   left it stranded far from its label on wide cards). Stacks to full width
   below the info once the screen is too narrow for both side by side. */
.data-card-split {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
}
.data-card-split .data-card-content {
	flex: 1 1 auto;
	min-width: 0;
}
.data-card-split .data-card-actions { flex-shrink: 0; }

@media (max-width: 700px) {
	.data-card-split {
		flex-direction: column;
		align-items: stretch;
	}
	.data-card-split .data-card-actions .btn-danger {
		width: 100%;
	}
}

.status-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
}
.status-badge::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

/* Business stat chips (admin > Businesses) — doctors/patients/appointments/
   sessions/SMS credits at a glance, one color per kind. */
.business-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.stat-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 500;
}
.stat-chip strong { font-weight: 700; }
.stat-chip--doctors { background: var(--mint-100); color: var(--mint-700); }
.stat-chip--patients { background: var(--rose-100); color: var(--rose-600); }
.stat-chip--appointments { background: #F1E6E8; color: var(--mauve-700); }
.stat-chip--sessions { background: #E7EFFC; color: #3161A8; }
.stat-chip--sms { background: #FFF1E4; color: #6B3E10; }
.stat-chip--sms.stat-chip--low { background: #FDEDED; color: #7A1F1F; }
.status-badge--active { background: var(--mint-100); color: var(--mint-700); }
.status-badge--pending { background: #FFF3D6; color: #A9761D; }
.status-badge--block,
.status-badge--blocked { background: var(--rose-100); color: var(--rose-600); }
.status-badge--neutral { background: #F1EEEC; color: var(--ink-soft); }
.status-badge--role { background: var(--rose-100); color: var(--mauve-700); }

.empty-state {
	padding: 22px;
	border-radius: 14px;
	background: var(--rose-100);
	color: var(--rose-600);
	text-align: center;
	font-weight: 600;
	font-size: 13.5px;
}

.list-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 18px;
	color: var(--mint-700);
	font-weight: 600;
	font-size: 13.5px;
	background: var(--mint-100);
	border-radius: 12px;
}
.list-loading .spinner {
	width: 16px;
	height: 16px;
	border: 3px solid var(--mint-300);
	border-top-color: var(--mint-700);
	border-radius: 50%;
	animation: dash-spin 0.8s linear infinite;
}
@keyframes dash-spin { to { transform: rotate(360deg); } }

/* Modals */

.modal-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: rgba(74, 51, 58, 0.45);
	z-index: 999;
	display: none;
}

.modal-dialog {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	max-width: 500px;
	width: 90%;
	max-height: 86vh;
	display: none;
	flex-direction: column;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 30px 60px -20px rgba(74, 51, 58, 0.45);
	z-index: 1000;
	overflow: hidden;
}

.modal-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}
.modal-header::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--mint-500), var(--rose-500));
}
.modal-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--mauve-900);
}
.modal-close {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: none;
	background: transparent;
	color: var(--ink-soft);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}
.modal-close:hover { background: var(--rose-100); color: var(--rose-600); }

.modal-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 20px;
	overflow-y: auto;
}

.modal-field { display: flex; flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box; }
.modal-field label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--mauve-700);
}
.field-hint {
	font-size: 11.5px;
	color: var(--ink-soft);
	align-self: flex-end;
}
.modal-field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.modal-field select,
.modal-field textarea {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	font-family: inherit;
	color: var(--ink);
	background: #FBFAF8;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
.modal-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	padding-right: 32px;
	cursor: pointer;
}
.modal-field textarea { resize: vertical; }
.modal-field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus,
.modal-field select:focus,
.modal-field textarea:focus {
	border-color: var(--mint-600);
	background: #ffffff;
	box-shadow: 0 0 0 4px rgba(143, 209, 201, 0.22);
}
.modal-field input[readonly] {
	color: var(--ink-soft);
	background: #F4F1EE;
	cursor: not-allowed;
}
/* input[type=color] needs its native rendering left alone — appearance:none
   (the blanket rule above) hides the actual color swatch entirely, same
   underlying issue as the checkbox/radio case below. Give it a clear
   preview size instead of trying to reskin it. */
.modal-field input[type="color"] {
	width: 100%;
	height: 44px;
	padding: 4px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	background: #FBFAF8;
	cursor: pointer;
	box-sizing: border-box;
}
.modal-field input[type="color"]:focus {
	border-color: var(--mint-600);
	box-shadow: 0 0 0 4px rgba(143, 209, 201, 0.22);
}
/* Checkboxes/radios nested inside a .modal-field (e.g. Surface / Completed
   toggles) must keep their native browser rendering — Safari in particular
   renders an invisible, unclickable box once -webkit-appearance:none strips
   it with no custom replacement drawn back in. */
.modal-field input[type="checkbox"],
.modal-field input[type="radio"] {
	width: 17px;
	height: 17px;
	accent-color: var(--mint-600);
	cursor: pointer;
	flex-shrink: 0;
}

.modal-checkbox-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--mauve-700);
}
.modal-checkbox-row input {
	width: 17px;
	height: 17px;
	accent-color: var(--mint-600);
	cursor: pointer;
}

.modal-footer {
	display: flex;
	gap: 10px;
	padding: 16px 20px;
	border-top: 1px solid var(--border);
	flex-shrink: 0;
}
.modal-footer .btn-primary,
.modal-footer .btn-secondary,
.modal-footer .btn-danger { flex: 1; }

/* ==========================================================================
   Stat / KPI cards (Home tab)
   ========================================================================== */

.credit-warning-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 16px;
	background: #FDEDED;
	border: 1px solid #F0A8A8;
	color: #7A1F1F;
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 20px;
	font-weight: 600;
	font-size: 13.5px;
}
.credit-warning-banner .btn-primary { flex-shrink: 0; }

/* Home tab — "Charges and Payments" / "Charges by Treatment" charts */

.chart-row {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 20px;
}
.chart-row .chart-card {
	flex: 1 1 420px;
	min-width: 0;
	margin-bottom: 0;
}
@media (max-width: 900px) {
	.chart-row {
		flex-direction: column;
	}
}

.chart-card {
	padding: 20px 24px;
}
.chart-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}
.chart-card-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--mauve-900);
}
.chart-period-select {
	height: 34px;
	padding: 0 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--mauve-700);
	background: #FBFAF8;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 14px;
	padding-right: 28px;
}
.chart-legend {
	display: flex;
	gap: 36px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.chart-legend-item {
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.chart-legend-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 3px;
	margin-right: 6px;
	vertical-align: middle;
}
.chart-legend-dot--charges { background: #3E9B90; }
.chart-legend-dot--payments { background: #C9748A; }
.chart-legend-value {
	font-size: 24px;
	font-weight: 700;
	color: var(--mauve-900);
}
.chart-svg-wrapper {
	width: 100%;
	overflow-x: auto;
}
.income-expense-chart-svg {
	display: block;
	min-width: 600px;
}
.chart-gridline {
	stroke: var(--border);
	stroke-width: 1;
}
.chart-gridline--baseline { stroke: var(--mauve-500); }
.chart-axis-label {
	font-size: 11px;
	font-family: inherit;
	fill: var(--ink-soft);
}
.chart-axis-label--muted {
	font-size: 10px;
	opacity: 0.7;
}
.chart-bar--charges { fill: #3E9B90; }
.chart-bar--payments { fill: #C9748A; }

.donut-wrapper {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.donut-box {
	position: relative;
	flex-shrink: 0;
	width: 220px;
	height: 220px;
}
.treatments-donut-svg {
	width: 100%;
	height: 100%;
}
.treatments-donut-segment {
	transition: opacity 0.15s ease;
}
.treatments-donut-segment:hover { opacity: 0.85; }
.donut-center-label {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	pointer-events: none;
	width: 120px;
}
.donut-center-title {
	font-size: 12px;
	color: var(--ink-soft);
	font-weight: 600;
	margin-bottom: 4px;
}
.donut-center-value {
	font-size: 17px;
	font-weight: 700;
	color: var(--mauve-900);
}
.donut-legend {
	flex: 1 1 220px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.donut-legend-row {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
}
.donut-legend-dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	flex-shrink: 0;
}
.donut-legend-name {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--ink-soft);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.donut-legend-value {
	flex-shrink: 0;
	color: var(--mauve-900);
	font-weight: 700;
}

.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.stat-card h3 {
	display: flex;
	align-items: center;
	gap: 8px;
}
.stat-card h3::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--mint-500), var(--rose-500));
	flex-shrink: 0;
}

.stat-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
	font-size: 13.5px;
	color: var(--ink-soft);
}
.stat-row:last-of-type { border-bottom: none; }
.stat-row .stat-value {
	font-weight: 700;
	font-size: 15px;
	color: var(--mauve-900);
	white-space: nowrap;
}

.stat-card .stat-hint {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--ink-soft);
	line-height: 1.5;
}

/* Top-up package picker */

.package-grid {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.package-option {
	border: 1.5px solid var(--border);
	border-radius: 14px;
	padding: 16px 14px;
	width: 140px;
	text-align: center;
	cursor: pointer;
	background: #ffffff;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.package-option:hover { border-color: var(--mint-500); transform: translateY(-2px); }
.package-option.highlight { border-color: var(--mint-500); background: var(--mint-100); }
.package-option .package-title { font-weight: 600; font-size: 13.5px; color: var(--mauve-900); }
.package-option .package-price { margin-top: 8px; font-size: 22px; font-weight: 700; color: var(--mint-700); }
.package-option .package-badge {
	display: inline-block;
	margin-top: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--mint-500);
	color: #ffffff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Divider used between "pick an existing record" / "enter new details" */

.form-divider {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--ink-soft);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.form-divider::before,
.form-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--border);
}

.modal-field-row {
	display: flex;
	gap: 12px;
}
.modal-field-row .modal-field { flex: 1; }

/* Sub-section inside a form: a titled list with a round "add" button
   (e.g. Diagnoses / Treatments inside a session). */

.sub-section { margin-bottom: 16px; }
.sub-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.sub-section-header h3 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--mauve-900);
}
.btn-round-add {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, var(--mint-600), var(--rose-600));
	color: #fff;
	font-size: 17px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.btn-round-add:hover { transform: scale(1.08); filter: brightness(1.05); }
/* Override the generic ".settings-card button { width:100% }" rule, which
   otherwise wins on specificity and stretches this round button full-width. */
.settings-card .btn-round-add,
.modal-body .btn-round-add {
	width: 28px;
	height: 28px;
	padding: 0;
	margin-top: 0;
	box-shadow: none;
}

/* ==========================================================================
   Calendar tab (FullCalendar theming)
   ========================================================================== */

.calendar-card {
	background: #ffffff;
	border: 1.5px solid var(--border);
	border-radius: 16px;
	padding: 14px 16px 16px;
	box-shadow: 0 2px 10px rgba(74, 51, 58, 0.05);
	overflow: hidden;
}

/* Time slot under the cursor: a solid shaded box drawn exactly over the
   hovered cell (day column × time row) with its time inside — instead of
   a tooltip trailing the mouse. Sized/positioned from JS (calendar.js),
   since FullCalendar's slot-lane rows span every day column at once. */
.calendar-slot-hover {
	position: fixed;
	display: none;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 20;
	box-sizing: border-box;
	margin: 1px;
	background: var(--mauve-900);
	color: #ffffff;
	font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(74, 51, 58, 0.3);
}

.fc {
	font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
	color: var(--ink);
	--fc-border-color: var(--border);
	--fc-page-bg-color: #ffffff;
	--fc-neutral-bg-color: var(--mint-100);
	--fc-list-event-hover-bg-color: var(--mint-100);
	--fc-highlight-color: rgba(143, 209, 201, 0.28);
	--fc-today-bg-color: var(--mint-100);
	--fc-now-indicator-color: var(--rose-600);
	--fc-event-border-color: transparent;
}

/* Toolbar */
.fc .fc-toolbar.fc-header-toolbar {
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 8px;
}
.fc .fc-toolbar-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--mauve-900);
}
.fc .fc-button {
	background: #ffffff;
	border: 1.5px solid var(--border);
	color: var(--mauve-700);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	text-transform: capitalize;
	padding: 6px 14px;
	border-radius: 9px;
	box-shadow: none;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.fc .fc-button:hover {
	background: var(--mint-100);
	border-color: var(--mint-500);
	color: var(--mint-700);
}
.fc .fc-button:focus,
.fc .fc-button:focus-visible {
	box-shadow: 0 0 0 3px rgba(143, 209, 201, 0.3);
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
	background: linear-gradient(135deg, var(--mint-600), var(--rose-600));
	border-color: transparent;
	color: #ffffff;
}
.fc .fc-button:disabled {
	opacity: 0.45;
}
.fc .fc-icon { font-size: 15px; }
.fc .fc-prev-button .fc-icon,
.fc .fc-next-button .fc-icon { vertical-align: middle; }

/* Grid / headers */
.fc .fc-col-header-cell {
	background: #FBFAF8;
	padding: 8px 0;
}
.fc .fc-col-header-cell-cushion {
	color: var(--mauve-900);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	padding: 4px;
}
.fc .fc-timegrid-slot-label-cushion {
	color: var(--ink-soft);
	font-size: 10.5px;
	line-height: 1.15;
}
/* An empty table-cell still reserves room for one line box at the
   inherited line-height, so however small a `height` is requested here,
   the row can never render below roughly 1 line tall (~25px at the app's
   16px base) — line-height: 0 removes that invisible floor so the row-
   height fitting (calendar.js, full screen mode) can actually shrink rows. */
.fc .fc-timegrid-slot {
	height: var(--calendar-slot-height, 2.1em);
	line-height: 0;
}
.fc .fc-timegrid-slot-minor { border-top-style: dotted; }
.fc-theme-standard td,
.fc-theme-standard th { border-color: var(--border); }
.fc .fc-scrollgrid { border-color: var(--border); border-radius: 10px; overflow: hidden; }
.fc .fc-day-today .fc-timegrid-col-frame { background: var(--mint-100); }
.fc .fc-timegrid-now-indicator-line { border-color: var(--rose-600); }
.fc .fc-timegrid-now-indicator-arrow { border-color: var(--rose-600); color: var(--rose-600); }

/* Events */
.fc .fc-timegrid-event,
.fc .fc-daygrid-event {
	/* Solid fallback only — a gradient here would be a background-image
	   layer painted on top of an event's own inline background-color
	   (its appointment category's color), hiding it completely even
	   though the color is technically still set underneath. */
	background-color: var(--mint-600);
	border: none;
	border-radius: 8px;
	padding: 1px 2px;
	box-shadow: 0 1px 4px rgba(74, 51, 58, 0.18);
}
.fc .fc-event-main {
	color: #ffffff;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 4px;
}
.fc .fc-event-time { font-weight: 700; }
.fc .fc-timegrid-event:hover,
.fc .fc-daygrid-event:hover { filter: brightness(1.05); }
.fc .fc-timegrid-event.fc-event-mirror,
.fc .fc-timegrid-event.fc-event-dragging { box-shadow: 0 4px 14px rgba(74, 51, 58, 0.28); }

/* Sticky headers */
.fc .fc-scroller-liquid-absolute { overflow-y: auto !important; }

/* Small square icon button (e.g. the calendar's full screen toggle),
   sitting alongside the filter-bar's other controls. */
.btn-icon-square {
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	color: var(--mauve-700);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn-icon-square svg { width: 17px; height: 17px; }
.btn-icon-square:hover {
	background: var(--mint-100);
	border-color: var(--mint-500);
	color: var(--mint-700);
}

/* Full screen mode — let the whole week fit on one screen without an
   internal scrollbar, by giving the calendar the entire monitor. */
.calendar-fullscreen-root:fullscreen,
.calendar-fullscreen-root:-webkit-full-screen {
	background: var(--cream);
	padding: 16px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}

/* ==========================================================================
   Patient detail (Patients tab)
   ========================================================================== */

/* Horizontal pill tab bar — Patient / Sessions / Payments / Appointments */
.tab-bar {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1.5px solid var(--border);
}
.tab-bar .tab-item {
	width: auto;
	height: auto;
	margin-top: 0;
	padding: 8px 16px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	background: #F4F1EE;
	color: var(--ink-soft);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	box-shadow: none;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tab-bar .tab-item:hover { background: var(--mint-100); border-color: var(--mint-500); color: var(--mint-700); transform: none; }
.tab-bar .tab-item.active {
	background: linear-gradient(135deg, var(--mint-600), var(--rose-600));
	color: #ffffff;
}

/* Sticky-note alert cards — note / birthday / outstanding balance */
.sticky-note {
	position: relative;
	width: 220px;
	padding: 16px 18px 16px 22px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
	box-shadow: 0 6px 16px -8px rgba(74, 51, 58, 0.3);
	box-sizing: border-box;
	cursor: default;
}
.sticky-note .sticky-note-pin {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	position: absolute;
	top: 12px;
	left: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.sticky-note .sticky-note-title {
	font-weight: 700;
	margin-bottom: 6px;
	font-size: 13px;
}
.sticky-note--note {
	background: #FFF8DE;
	border: 1px solid #EFE0A0;
	color: #6B5A16;
	cursor: pointer;
	transition: transform 0.15s ease;
}
.sticky-note--note:hover { transform: translateY(-2px); }
.sticky-note--note .sticky-note-pin { background: var(--rose-600); }
.sticky-note--birthday {
	background: var(--rose-100);
	border: 1px solid var(--rose-500);
	color: var(--mauve-900);
}
.sticky-note--birthday .sticky-note-pin { background: var(--rose-600); }
.sticky-note--balance {
	background: #FFF1E4;
	border: 1px solid #F0C295;
	color: #6B3E10;
}
.sticky-note--balance .sticky-note-pin { background: #D97B3F; }
.sticky-note--medical {
	background: #FDEDED;
	border: 1px solid #F0A8A8;
	color: #7A1F1F;
	font-weight: 600;
}
.sticky-note--medical .sticky-note-pin { background: #D93636; }
.sticky-note--scaling {
	background: var(--mint-100);
	border: 1px solid var(--mint-300);
	color: #1B5E56;
	font-weight: 600;
}
.sticky-note--scaling .sticky-note-pin { background: var(--mint-600); }
.sticky-note--empty {
	background: #FBFAF8;
	border: 2px dashed var(--border);
	color: var(--ink-soft);
	text-align: center;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.sticky-note--empty:hover { border-color: var(--mint-500); background: var(--mint-100); }
.sticky-note--empty .sticky-note-title { margin: 0; color: var(--ink-soft); }

/* Dental-chart condition chips (Gingivitis, Bruxism, etc.) */
.condition-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
	padding: 14px;
	width: 100%;
	box-sizing: border-box;
	background: #FBFAF8;
	border: 1.5px solid var(--border);
	border-radius: 14px;
}
.condition-chip {
	padding: 6px 12px;
	background: #ffffff;
	border: 1px solid var(--mint-300);
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--mint-700);
}

/* Toggle-row list item — a clickable row with a round toggle indicator on
   the right (dental chart condition checklists: Bridges/Edit Dental Chart
   modals, per-tooth condition editor). */
.toggle-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	margin-bottom: 8px;
	border: 1.5px solid var(--border);
	border-radius: 12px;
	background: #ffffff;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.toggle-row:hover { border-color: var(--mint-500); background: var(--mint-100); }
.toggle-row .toggle-label {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ink);
}
.toggle-row .toggle-indicator {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border-radius: 50%;
	border: 2px solid var(--mint-500);
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.toggle-row .toggle-indicator img {
	width: 13px;
	height: 13px;
	display: none;
	filter: brightness(0) invert(1);
}
.toggle-row.checked .toggle-indicator {
	background: linear-gradient(135deg, var(--mint-600), var(--rose-600));
	border-color: transparent;
}
.toggle-row.checked .toggle-indicator img { display: block; }